@media screen and (max-width: 1200px) {
   .first-image h1 {
      font-size: 15px;
   }

   .question h1 {
      font-size: 35px;
   }

   .firstInfo h1 {
      font-size: 40px;
   }

   .message {
      height: 250px;
   }

   .message h1 {
      font-size: 48px;
   }

   .message h1 .colorFont {
      font-size: 60px;
   }

   .message h1 .colorFont2 {
      font-size: 60px;
   }

   .message h1 span {
      font-size: 48px;
   }

   .story-box {
      height: 300px;
   }

   .logo-text-footer {
      max-width: 100%;
   }

   .logo-footer {
      width: 40%;
   }

   .services,
   .contact {
      width: 30%;
   }

   .services {
      padding-left: 3rem;
   }

   .message2 h1 {
      font-size: 27px;
   }

   .rev-section {
      max-width: 900px;
   }

   .textbox h1 {
      font-size: 40px;
   }

   .textmessage h1 {
      font-size: 35px;
   }

   .info-textmessage h1 {
      font-size: 35px;
   }

   .message3 {
      font-size: 18px;
   }
   .transition-fade {
   margin-top: 3rem !important; /* Adds space below the navbar */
   padding-right:0px;
   opacity: 1;
   transition: opacity 500ms ease-in-out; /* Smooth fade transition */
   min-height: calc(100vh - 4rem); /* Ensures main content is always visible */
}
body {
  margin: 0;
  padding: 0;
  font-family: Georgia, serif;
  min-height: 100vh;
  background-color: white;
  overflow-x: hidden !important;
  padding-right: 300px; /* if you really want space for sidebar */
  padding-left: 20px;
}

.product-purchase {
  position: fixed;
  top: 20px;
  right: 35px;
  width: fit-content;
  height: fit-content;
  max-width: 360px;
  background: white;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 1px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  transform: scale(0.75);
  transform-origin: top right;
}
.product-page {
  display: flex;
  flex-wrap: nowrap; /* ensure they stay in one row */
  background-color: #ffffff;
  width: 100%;
  align-items: flex-start; /* aligns tops */
  justify-content: space-between; /* optional */
}
.product-left img {
    width: 100%;
}
.product-right {
  padding-left: 5px;
}
.product-right p {
  display: hidden;
}
.head-review {
  margin: 1.75rem;
  width: 250px;
  height: 150px;
}

.body-review {
  background-color: white;
  flex: 1;
}
.body-review .imgInput {
  width: 100%;    
    
}
.firstInfo h1{
  font-size: 14px;
}
.message {
  margin-bottom:5px;
}
.card-container {
            display: flex;
            margin-top:30px;
            margin-bottom:20px;
            flex-wrap: wrap;
            gap: 20px;
            padding-left: 50px;
        }

        .card {
            background-color: #ffffff;
            width: 500px;
            padding: 20px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
        }
        
.before-after {
  margin-bottom: 10px;
}
.product-right h1 {
  font-size: 30px;
  color: #222;
}



.product-right small {
    font-size: 18px;
}
   
   
   
   
   
}

@media screen and (max-width: 1024px) {
   .first-image {
      padding: 1.5rem;
   }

   .first-image h1 {
      font-size: 15px;
   }

   .question h1 {
      font-size: 30px;
   }

   .firstInfo h1 {
      font-size: 35px;
   }

   .message {
      height: 200px;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
   }

   .message h1 .colorFont {
      font-size: 50px;
   }

   .message h1 .colorFont2 {
      font-size: 50px;
   }

   .message h1 span {
      font-size: 40px;
   }

   .story-container {
      padding: 0 1.5rem;
   }

   .story-box {
      height: 230px;
   }

   .logo-footer {
      flex-direction: column;
      align-items: flex-start;
   }

   .services {
      padding-left: 1.5rem;
   }

   .story-box .story-info {
      margin-top: 3rem;
      padding-left: 1.5rem;
   }

   .story-box .story-info h1 {
      font-size: 21px;
   }

   nav {
      padding: 10px 1.5rem;
   }

   .product-page {
      padding: 1.5rem;
   }

   .questionCH {
      margin-top: 2rem;
   }

   .questionCH h1 {
      font-size: 30px;
   }

   .before-after3 {
      margin-top: 2rem;
      padding: 1.5rem;
      gap: 1.5rem;
   }

   .message2 {
      margin-top: 2rem;
   }

   .question {
      margin-top: 2rem;
   }

   .rev-section {
      max-width: 700px;
      margin: 2rem auto;
      padding: 2rem;
   }

.reviews {
  width: 100%;
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
}

.review {
  width: calc(50% - 10px); /* Adjust width to fit two reviews side by side */
  margin-top: 10px;
  box-sizing: border-box;
  flex-grow: 1; /* Allow the reviews to grow to fill available space */
}

.review.large {
  width: 100%; /* Make larger reviews take up the full width */
}
}
@media screen and (max-width: 600px) {
body {
  padding-right: 0px; /* if you really want space for sidebar */
  padding-left: 00px;
}
.product-page {
  padding: none;
  margin: none;
}
  .product-purchase {
    display:none;
  }
    .product-right {
    display:none;
  }
  .product-left {
      width: 350px;
      margin-right:20px;
  }
  .product-left img{
      width: 350px;
  }

  .product-right li {
      font-size: 15px;
  }
  .transition-fade {
      padding:0;
  }
  .rev-start-phone {
    margin-left: 20px;
  }
  .rev-start-phone img {
   display:none;
  }
  .before-after {
   margin-top: 2rem;
   margin-bottom: 0px;
  }
  .review {
   margin-top: -30px;
  } 
  .customer-photo img {
   max-width: 150px;      /* Don't force exact size */
   max-height: 150px;
   margin-top:60px;
   width: auto;           /* Keep original aspect ratio */
   height: auto;      /* Crop image nicely */
   border-radius: 8px;      /* Rounded corners if you want */
   box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  }
    .card-container {
    flex-direction: column;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 50px;
    margin-bottom: 50px;
  }

  .card {
    width: 100%;
    box-sizing: border-box;
  }
.bottom-menu-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 60px;
      background-color: #ffffff;
      border-top: 1px solid #ccc;
      box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }
  .bottom-menu-bar h1 {
      font-size: 15px;
      margin-right: 30px;
      margin-left: 20px;
  }
 .bottom-menu-bar button{
    background-color:red;
    width: 10% !important;
    color: white;
    border: none;
    border-radius: 2px;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: bold;
    flex: 1;
    margin: 0 20px;
 }
    #paypal-button-container-buynow {
      display: block;
      min-height: 50px;
      width: 50%;
      text-align: center;
      color: white;
      font-size: 20px;
      padding: 15px;
      background-color: red; /* light green to debug visibility */
    }
    
    #paypal-button-container-buynow:hover {
     transform: scale(1.05);
    }

  .product-purchase  {
    font-size: 14px;
    margin: 0;
    padding: 0;
  }

  .product-purchase button {
    flex: 1;
    margin: 0 5px;
    padding: 10px;
    font-weight: bold;
    background-color: #0070ba;
    color: white;
    border: none;
    border-radius: 4px;
  }
    #thank-you-message {
        top: 10%;  /* Adjust position for smaller screens */
        left: 50%;
        transform: translateX(-50%);
        padding: 10px;
        font-size: 0.8rem;  /* Smaller font size for phones */
        width: 90%;  /* Make the message container smaller */
    }

    #thank-you-message .small-text {
        font-size: 0.75rem;  /* Smaller font size for the additional message on phones */
    }
 .review {
    flex: 1 1 calc(100% - 10px); /* Each review takes full width on smaller screens */
    min-height: 150px; /* Adjust minimum height for smaller screens */
    padding: 5px; /* Reduce padding */
  }

  .head-review {
    width: 60px; /* Smaller image */
    height: 60px;
    margin: 0.5rem auto;
  }

  .body-review {
    padding: 0.5rem; /* Reduce padding inside the body */
  }

  .name-review {
    font-size: 0.9rem; /* Smaller font size */
  }

  .place-review {
    font-size: 0.8rem; /* Smaller font size */
  }

  .rating {
    font-size: 0.9rem; /* Smaller font size */
    margin: 0.2rem 0; /* Reduce margin */
  }

  .desc-review {
    font-size: 0.8rem; /* Smaller font size */
    line-height: 1.2rem; /* Adjust line height */
  }
   .message2 h1 {
      font-size: 21px;
   }

   .benefits img {
      width: 60%;
   }

   .before-after3 img {
      width: 80%;
   }

   .next {
      right: 1.5rem;
   }

   .textmessage h1 {
      font-size: 30px;
   }
   .textbox h1 {
      font-size: 30px;
   }
   .info-textmessage h1 {
      font-size: 30px;
   }
   .message3{
      font-size: 16px;
   }
   .message3 h1{
      font-size: 25px;
   }
   .message h1 {
      font-size: 40px;
   }
}


@media (max-width: 768px) {
    .card-source{
        display:none;
    }
    .price-box {
        padding: 20px;
    }

    .price-old {
        font-size: 8vw;
    }

    .price-new {
        font-size: 5vw;
    }

    .discount-info {
        font-size: 4vw;
    }

    .teaser-text {
        font-size: 4vw;
    }
      .lifes video {
     width: 100%;
  }
  
}

@media (max-width: 480px) {
    .price-box {
        padding: 10px;
    }

    .price-old {
        font-size: 10vw;
    }

    .price-new {
        font-size: 8vw;
    }

    .discount-info {
        font-size: 5vw;
    }

    .teaser-text {
        font-size: 5vw;
    }
}













@media screen and (max-width: 767px) {

   .slideshow-container {
      width: 100%;
      order: -1;
   }

   .main-text {
      width: 100%;
   }

   .first-image h1 {
      margin-bottom: 1rem;
      margin-top: 0.5rem;
   }

   .firstInfo h1 {
      font-size: 27px;
   }

   .question {
      margin-top: 2rem;
      height: 50px;
   }

   .question h1 {
      font-size: 25px;
   }

   .before-after {
      margin-top: 2rem;
   }
   .lifes {
      padding: 1.5rem;
      margin-top: 2rem;
   }
 


   .message {
      height: 150px;
      margin-top: 2rem;
   }


   .messageText br {
      display: none;
   }

   .message h1 {
      font-size: 40px;
   }

   .message h1 .colorFont {
      font-size: 40px;
   }

   .message h1 .colorFont2 {
      font-size: 40px;
   }

   .message h1 span {
      font-size: 30px;
   }

   .story-container {
      margin-top: 1.5rem;
      gap: 1rem;
   }

   .product .story-info h1 {
      font-size: 21px;
   }

   .story-box {
      height: 180px;
   }

   footer {
      padding: 1.5rem;
   }

   .services {
      padding-left: 1rem;
   }

   .next {
      right: 0;
   }



   .questionCH h1 {
      font-size: 25px;
   }

   .message2 h1 {
      font-size: 19px;
   }

   .rev-section {
      max-width: 600%;
      margin-top: 0;
   }

   .message2 {
      padding: 1.5rem;
   }

   .questionCH {
      margin-top: 1rem;
   }

   .before-after {
      flex-direction: column;
   }
   .textmessage {
      width: 90%;
   }
   .textmessage h1 {
      font-size: 27px;
   }
   .info-textmessage h1 {
      font-size: 27px;
   }
   .message h1 {
      font-size: 35px;
   }
}



@media screen and (max-width: 640px) {
   .before-after .chadVsIncel {
      width: 100%;
   }
   .firstInfo {
      width: 100%;
      padding: 1.5rem 0;
   }

   .question {
      margin-top: 1.5rem;
   }

   .before-after {
      margin-top: 1.5rem;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
   }
   .lifes {
      margin-top: 1.5rem;
   }


   .message {
      height: auto;
      margin-top: 1.5rem;
      min-height: 100px;
      padding-top: 8px;
      padding-bottom: 8px;
   }

   .message h1 {
      font-size: 30px;
   }

   .message h1 .colorFont {
      font-size: 32px;
   }

   .message h1 .colorFont2 {
      font-size: 32px;
   }

   .message h1 span {
      font-size: 24px;
   }

   .question h1 {
      font-size: 21px;
   }

   .first-image h1 {
      font-size: 25px;
   }

   .firstInfo h1 {
      font-size: 25px;
   }

   .index-main {
      padding-bottom: 1.5rem;
   }

   .story-container {
      flex-wrap: wrap;
   }

   .story-box {
      width: 100%;
   }

   .story-box img {
      width: 100%;
      position: static;
   }

   .logo-footer,
   .services,
   .contact {
      width: 100%;
      padding-left: 0;
   }

   footer {
      gap: 1.5rem;
   }

   .product {
      width: 100%;
   }

   .questionCH {
      margin-top: 0rem;
      height: 50px;
   }

   .questionCH h1 {
      font-size: 21px;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
   }

   .before-after3 {
      margin-top: 1.5rem;
   }

   .message2 {
      margin-top: 1.5rem;
      flex-wrap: wrap;
      gap: 2rem 0;
   }

   .benefits {
      width: 50%;
   }

   .rev-section {
      max-width: 100%;
      padding: 1.5rem 3rem;
   }

   .message2 h1 {
      font-size: 16px;
   }

   .message3 h1 {
      font-size: 25px;
   }
   .textmessage {
      width: 100%;
   }
   .info-textmessage h1 {
      font-size: 25px;
   }
}



@media screen and (max-width: 400px) {
   .nav-right a {
      margin-right: 1rem;
   }

   .firstInfo h1 {
      font-size: 21px;
   }

   .message h1 span {
      font-size: 21px;
   }

   .message h1 .colorFont {
      font-size: 27px;
   }

   .message h1 .colorFont2 {
      font-size: 27px;
   }

   .message h1 {
      font-size: 25px;
   }

   .question h1 {
      font-size: 19px;
   }

   .story-box {
      height: 160px;
   }

   .story-box .story-info h1 {
      font-size: 19px;
   }
  .lifes {
    padding: 1rem;
    margin-top: 1rem;
  }

  .lifes img {
    width: 2000px;
    display: block;
    margin: 0 auto 2rem auto; /* cleaner margin */
  }

  .lifes video {
    width: 100%;
    max-width: 100%;
    display: block;
    margin: 0 auto;
  }
.lifes video::-webkit-media-controls {
  display: none !important;
}
   nav {
      padding: 10px 1rem;
   }
  .flex-div {
    flex-direction: column;   /* Stack items vertically on mobile */

  }

  .nav-left {
    width: 100%;                /* Make sure both sections take full width */
    text-align: left;           /* Ensure text is left-aligned */
  }

  .nav-right {
    display: flex;
    flex-direction: row;        /* Keep right items in a row */
    gap: 10px;                  /* Space out the items */
    margin-left: 170px;
    position:relative;
    bottom: 30px;
    text-align: right; /* Ensure the items align to the right */
  }
  
  .nav-right img {
    position: relative;
    bottom: 3px;
  }
  .nav-left img {
    width: 100px;
    position: relative;
    bottom: 5px;
  }
   .first-image {
      padding: 1rem;
   }

   .before-after {
      padding-left: 1rem;
      padding-right: 1rem;
   }

   .message {
      padding-left: 1rem;
      padding-right: 1rem;
   }


   .story-container {
      padding-left: 1rem;
      padding-right: 1rem;
   }

   footer {
      padding-left: 1rem;
      padding-right: 1rem;
   }

   .benefits {
      width: 100%;
   }

   .rev-section {
      padding: 1.5rem;
   }

   .before-after3 img {
      width: 100%;
   }

   .questionCH h1 {
      font-size: 19px;
   }

   .product-right h1 {
      font-size: 30px;
   }


   .rev-start {
      gap: 1rem;
      flex-direction: column;
   }

   .rev-start-left {
      justify-content: center;
   }

   .rev-start small {
      text-align: center;
   }

   .body-review {
      padding: 1.5rem 1rem;
   }

   .benefits img {
      width: 100%;
      max-width: 200px;
   }

   .textbox h1 {
      font-size: 25px;
   }

   .textbox {
      padding: 10px;
   }

   .message3{
      padding: 0.5rem;
   }

   .textmessage h1 {
      font-size: 21px;
   }
   .info-textmessage h1 {
      font-size: 19px;
   }
   .message3 h1 {
      font-size: 21px;
   }
}