.neon-text {
    position: absolute;
    top: 20%;
    left: 50%;
    text-align: center;
    font-family: 'Balistany', cursive;
    font-size: 2rem;
    color: white;
    line-height: 1;
    transform: translate(-50%, -50%);
    text-shadow: 0 0 10px white,
            0 0 20px white;
    white-space: nowrap;
  }
  
  .input-field,
  .price-section,
  .font-section,
  .size-section,
  .color-section,
  .waterproof-section {
    margin-bottom: 20px;
  }

  .input-field p,
  .price-section p,
  .font-section p,
  .size-section p,
  .color-section p,
  .waterproof-section p{
    padding-bottom: 2%;
  }
  
  .input-field label {
    font-size: 1.5rem;
    margin-bottom: 10px;
  }
  
  .input-field textarea {
    font-size: 1.5rem;
    line-height: 0.9;
    width: 100%;
    height: 5rem;
    padding: 10px;
    border: 1px solid white;
    border-radius: 5px;
    background-color: transparent;
    color: white;
  }
  
  .font-options,
  .price-options,
  .size-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  
  .waterproof-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  
  .font-button,
  .size-button,
  .waterproof-button {
    padding: 10px;
    border: 1px solid white;
    border-radius: 5px;
    background-color: transparent;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
  }
  
  .size-button .size-measurement {
    font-size: 0.75rem;
    display: block;
    margin-top: 5px;
    color: white;
  }
  
  .font-button:hover,
  .size-button:hover,
  .color-button:hover,
  .waterproof-button:hover {
    border: 2px solid #fbcd0a;
  }
  
  .font-button.selected,
  .size-button.selected,
  .waterproof-button.selected {
    border: 2px solid #fbcd0a;
    color: #fff;
  }

  .color-options {
    display: grid;
    grid-template-columns: repeat(6, 2.5rem);
    row-gap: 1rem;
    justify-content: center;
  }

  .color-button {
    width: 30px;
    height: 30px;
    border: 1px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.color-button[data-color="#ffffff"] {
  background-color: white;
}

.color-button[data-color="#fff7b4"] {
  background-color: #fff7b4;
}

.color-button[data-color="#e31e25"] {
  background-color: #e31e25;
}

.color-button[data-color="#f27e17"] {
  background-color: #f27e17;
}

.color-button[data-color="#f8ab05"] {
  background-color: #f8ab05;
}

.color-button[data-color="#ffec02"] {
  background-color: #ffec02;
}

.color-button[data-color="#b0397d"] {
  background-color: #b0397d;
}

.color-button[data-color="#6db633"] {
  background-color: #6db633;
}

.color-button[data-color="#e10b7d"] {
    background-color: #e10b7d;
}

.color-button[data-color="#85205c"] {
    background-color: #85205c;
}

.color-button[data-color="#60c2dd"] {
  background-color: #60c2dd;
}

.color-button[data-color="#1457dc"] {
  background-color: #1457dc;
}

.color-button.selected {
    border: 2px solid rgb(47, 255, 0);
}

.preview__overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Ensure it's above other elements */
}

.preview-text {
  position: absolute;
  top: 30%;
  left: 50%;
  text-align: center;
  font-family: 'Balistany', cursive;
  font-size: 2rem;
  color: white;
  line-height: 0.8;
  transform: translate(-50%, -50%);
  text-shadow: 0 0 10px white,
          0 0 20px white;
  white-space: nowrap;
}

.preview{
  cursor: pointer;
}

/* .preview p:hover{
  text-shadow: 0 0 100px greenyellow;
} */

.price-section.preview {
  transition: text-shadow 0.3s ease-in-out;
}

.price-section.preview:hover {
  text-shadow: 0 0 10px rgb(0, 149, 255),
  0 0 20px rgb(0, 149, 255),
  0 0 30px rgb(0, 149, 255);
}

.preview__image {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: auto;
  display: none;
  z-index: 1000;
  border: 10px solid white;
}

.preview__image.show {
  display: block;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  font-size: 24px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px;
  border-radius: 50%;
  z-index: 1001;
}

.close-btn:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

  
  .upload {
    color: white;
    font-weight: bold;
  }
  
  .order-button {
    width: 100%;
    margin-top: 20px;
    padding: 10px 10px;
    border: none;
    border-radius: 50px;
    background-color: #00ff00;
    color: white;
    text-shadow: 0 0 20px #000000;
    font-weight: bolder;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .order-button:hover {
    background-color: #00cc00;
  }
  
  .font-button[data-font="Passionate"] {
    font-family: 'Balistany', cursive;
    font-size: large;
  }
  
  .font-button[data-font="Dreamy"] {
    font-family: 'Billistone', cursive;
    font-size: x-large;
  }
  
  .font-button[data-font="Grovy"] {
    font-family: 'Dream\ Angel', cursive;
    font-size: x-large;
  }
  
  .font-button[data-font="ORIGINAL"] {
    font-family: Freeflow, sans-serif;
    font-size: x-large;
  }
  
  .font-button[data-font="CLASSIC"] {
    font-family: 'Neoneon', serif;
    font-size: x-large;
  }
  
  .font-button[data-font="Bryce"] {
    font-family: 'AceSans', monospace;
    font-size: x-large;
  }
  
  .font-button[data-font="Funky"] {
    font-family: 'Funky\ Signature', cursive;
    font-size: x-large;
  }
  
  .font-button[data-font="Livya"] {
    font-family: 'Handestonie', sans-serif;
    font-size: x-large;
  }
  
  .font-button[data-font="Delight"] {
    font-family: 'AmandaVinola', cursive;
    font-size: x-large;
  }
  
  .font-button[data-font="Classy"] {
    font-family: 'Butterland', serif;
    font-size: large;
  }
  
  .font-button[data-font="Romantic"] {
    font-family: 'Bastogne', cursive;
    font-size: large;
  }
  
  .font-button[data-font="ROBO"] {
    font-family: 'Barques', sans-serif;
    font-size: large;
  }
  
  .font-button[data-font="Charming"] {
    font-family: 'CharlesSebastian', cursive;
    font-size: x-large;
  }
  
  .font-button[data-font="Humble"] {
    font-family: 'Foundry-Font', cursive;
    font-size: x-large;
  }
  
  .font-button[data-font="Stylish"] {
    font-family: 'Cosmodrome', sans-serif;
    font-size: x-large;
  }
  
  .font-button[data-font="Sassy"] {
    font-family: 'Geraldyne', cursive;
    font-size: xx-large;
  }
  
  .font-button[data-font="Glam"] {
    font-family: 'Rocket', cursive;
    font-size: large;
  }
  
  .font-button[data-font="DOPE"] {
    font-family: 'GoldenHopes', sans-serif;
    font-size: x-large;
  }
  
  .font-button[data-font="Chemistry"] {
    font-family: 'Higher', cursive;
    font-size: x-large;
  }
  
  .font-button[data-font="Acoustic"] {
    font-family: 'Acoustica', serif;
    font-size: xx-large;
  }
  
  .font-button[data-font="Adelya"] {
    font-family: 'Adelya', cursive;
    font-size: xx-large;
  }

.advantages {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.content {
    text-align: center;
    width: 100%;
    max-width: 1200px;
}

.tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.tab {
    color: #2edcf3;
    text-decoration: none;
    padding: 10px 15px;
    font-size: 20px;
    cursor: pointer;
}

.tab.active {
    color: white;
    border-bottom: 5px solid white;
    border-radius: 3px;
}

.sections {
  background: linear-gradient(to right, #0f1320, #1a1019);
    border: 1px solid white;
    border-radius: 10px;
    width: 100%;
}

.section_1 {
    display: none;
}

.section_1.visible {
    display: block;
}

.features-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.feature {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: transparent;
    border-radius: 10px;
    padding: 20px;
    margin: 10px;
    width: 250px;
    text-align: left;
}

.feature-header {
    display: flex;
    align-items: center;
}

.feature h3 {
    color: #0077ff;
    margin-left: 10%;
}

.feature p {
    color: #909196;
}

.feature .icon {
    width: 60px;
    height: 60px;
    margin-bottom: 10px;
}

.premium-quality {
    background: url('https://cdn.shopify.com/s/files/1/0460/2753/8595/files/Group_82.svg?v=1649227862') no-repeat center center;
    background-size: contain;
    filter: drop-shadow(0 0 10px #15a1c0);
}

.two-year-warranty {
    background: url('https://cdn.shopify.com/s/files/1/0460/2753/8595/files/Group_2472.svg?v=1649228083') no-repeat center center;
    background-size: contain;
    filter: drop-shadow(0 0 10px #14b96c);
}

.craftsmanship {
    background: url('https://cdn.shopify.com/s/files/1/0460/2753/8595/files/Group_80.svg?v=1649228083') no-repeat center center;
    background-size: contain;
    filter: drop-shadow(0 0 10px #6b0ce6);
}

.satisfaction {
    background: url('https://cdn.shopify.com/s/files/1/0460/2753/8595/files/Group_2804.svg?v=1649228083') no-repeat center center;
    background-size: contain;
    filter: drop-shadow(0 0 10px #9eb61a);
}

.power-efficient {
    background: url('https://cdn.shopify.com/s/files/1/0460/2753/8595/files/Group_2601.svg?v=1649228083') no-repeat center center;
    background-size: contain;
    filter: drop-shadow(0 0 10px #9eb61a);
}

.shipping {
    background: url('https://cdn.shopify.com/s/files/1/0460/2753/8595/files/Group_2599.svg?v=1649228083') no-repeat center center;
    background-size: contain;
    filter: drop-shadow(0 0 10px #13b6db);
}

.scale{
    background: url('https://cdn.shopify.com/s/files/1/0460/2753/8595/files/guide_1.png') no-repeat center center;
    background-size: contain;
    filter: drop-shadow(0 0 10px #13b6db);
}

.drill{
    background: url('https://cdn.shopify.com/s/files/1/0460/2753/8595/files/guide_2.png') no-repeat center center;
    background-size: contain;
    filter: drop-shadow(0 0 10px #9eb61a);
}

.screw{
    background: url('https://cdn.shopify.com/s/files/1/0460/2753/8595/files/guide_3.png') no-repeat center center;
    background-size: contain;
    filter: drop-shadow(0 0 10px #14b96c);
}

.power{
 background: url('https://cdn.shopify.com/s/files/1/0460/2753/8595/files/guide_4.png') no-repeat center center;
    background-size: contain;
    filter: drop-shadow(0 0 10px #6b0ce6);
}

.info-section {
    margin-top: 40px;
}

.info-section h2 {
    font-size: 24px;
    color: #00ff00;
}

.info-section p {
    max-width: 800px;
    margin: 10px auto;
    line-height: 1.5;
}

.reviews-section {
    padding: 10%;
    text-align: left;
}

.reviews-header{
    border-bottom: 2px solid white;
    padding-bottom: 2%;
    margin-bottom: 2%;
}

.reviews-header h2{
    font-size: xx-large;
}

.reviews-summary {
    display: flex;
    justify-content: left;
}

.summary-right, .review-images, .write-review {
    flex: 1;
    padding-right: 1%;
}

.star-rating {
    margin-bottom: 1px;
}

.star-rating .stars {
    font-size: 30px;
    color: #9200f9;
    margin-bottom: 1px;
}

.rating-bar {
    display: flex;
    align-items: center;
    margin-bottom: 1px;
}

.summary-right {
    text-align: left;
    padding-left: 20px;
}

.rating-bar span {
    flex: 0 0 80px;
}

.bar {
    flex: 1;
    height: 15px;
    background-color: transparent;
    border: .5px solid #1a1a1a;
    margin: 0 10px;
    position: relative;
}

.filled-bar {
    height: 100%;
    background-color: #fbcd0a;
}

.reviews-filter {
    margin-bottom: 20px;
}

.reviews-filter select {
    padding: 5px;
    background-color: #222;
    color: #fff;
    border: 1px solid #444;
    border-radius: 5px;
}

.reviews-gallery {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.review-card {
    background-color: hsla(0, 0%, 0%, .3);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 2px solid #0077ff;
    border-radius: 5px;
    margin: 10px;
    text-align: left;
    width: calc(29% - 15px);
    padding-bottom: 1%;
}

.review-card img {
    width: 100%;
}

.review-card h3 {
    color: #ffffff;
    padding-top: 3%;
    padding-left: 20px;
}

.review-card .star-rating{
    padding-left: 20px;
}

.review-card p {
    font-size: 15px;
    color: #ffffff;
    padding-left: 20px;
    padding-right: 20px;
}

.faq-section{
    text-align: left;
    padding-top: 0%;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 10%;
}

.FAQ{
    padding-bottom: 2%;
}

.about-title{
    font-size: xx-large;
}

.accordion {
  background: linear-gradient(to right, #0f1320, #1a1019);
    color: whitesmoke;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
    border-radius: 10px;
    margin-bottom: 1%;
  }
  
  .accordion:hover {
    background-color: #4f4e4e25;
    color: #6dcef4; 
  }

.pane1 {
    padding: 0 11px;
    display: none;
    background-color: transparent;
    overflow: hidden;
  }

  .pane1 p{
    font-size: 15px;
    font-weight: 100;
  }