body {
    margin: 0;
    padding: 0;
    height: 100vh;
    
    font-family: Arial, sans-serif;
  }
  
  /*--------------------last button----------------*/
  .fancy-callNow {
    background: linear-gradient(90deg, #a86217, #c9771a);
    padding: 5px;
    text-align: center;
    position: fixed;
    bottom: 20px;
    left: 0;
    right: 0;
    z-index: 9999;
    display: none; /* default hidden */
  }
  
  /* Show on small devices */
  @media (max-width: 767px) {
    .fancy-callNow {
      display: block;
    }
  }
  
  .custom-cta-button {
    background-color: #c9771a;
    color: #fff;
    border: none;
    padding: 12px 15px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 50px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
  }
  
  .custom-cta-button:hover {
    background: #e68920;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
  }
  
  .arrow-icon {
    font-size: 20px;
  }
  /*-------------end-------------------*/
  
  /* Social media icons container */
  .social-icons {
    position: fixed;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 11px; /* Space between icons */
    padding-left: 80px;
  }
  
  /* Individual icon styling */
  .social-bar {
    position: fixed;
    top: 40%;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999;
  }
  
  .social-item {
    width: 50px;
    height: 50px;
    background: #914f1e;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    transition: all 0.3s ease;
    position: relative;
    right: -20px; /* hidden part initially */
  }
  
  .social-item:hover {
    right: 0; /* slide into view on hover */
    background: #704005;
    
  }
  
  
   @media (max-width: 576px) {
      #mainNavbar .nav-link {
        padding-left: 0.5rem;
      }
  
      #mainNavbar .mb-2 {
        margin-bottom: 1rem !important;
      }
    }
  
     /*------------------------faq start--------------------*/
     body {
     
      min-height: 100vh;
      box-sizing: border-box;
  }
  
  /* FAQ Container Styling */
  .faq-container {
      width: 100%;
      max-width: 800vh; /* Adjust as needed */
      background-color: #FFF8EE; /* Same as body for a cohesive look */
      border-radius: 8px;
      padding: 20px 30px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Subtle shadow */
      color: #4A4A4A; /* Dark text color */
      margin-top: 20px;
      
  }
  
  h2 {
      text-align: center;
      color: #DDA05D; /* Golden/orange accent, similar to the image's question mark icon */
      margin-bottom: 30px;
      font-size: 2em;
  }
  
  /* Individual FAQ Item */
  .faq-item {
      margin-bottom: 15px;
      border-bottom: 1px solid #E0E0E0; /* Light separator */
      padding-bottom: 15px;
  }
  
  .faq-item:last-child {
      border-bottom: none; /* No border for the last item */
      margin-bottom: 0;
      padding-bottom: 0;
  }
  
  /* Question Styling */
  .faq-question {
      display: flex;
      align-items: center; /* Align items vertically in the middle */
      padding: 10px 0;
      cursor: pointer;
      font-weight: bold;
      color: #333; /* Slightly darker for questions */
      transition: color 0.3s ease;
  }
  
  .faq-question:hover {
      color: #DDA05D; /* Highlight on hover, matching accent color */
  }
  
  /* Left Question Mark Icon Styling */
  .question-mark-icon {
      font-weight: normal; /* Override bold from parent */
      font-size: 1.2em;
      color: #DDA05D; /* Use accent color for the question mark */
      margin-right: 10px; /* Space between question mark and text */
      line-height: 1; /* Align vertically */
  }
  
  /* Right Arrow Icon Styling (black single line) */
  .faq-icon {
      font-size: 1.5em;
      color: #000; /* Black color for the arrow */
      margin-left: auto; /* Push to the right */
      transition: transform 0.3s ease;
      line-height: 1; /* Align vertically */
  }
  
  /* Answer Styling */
  .faq-answer {
      max-height: 0; /* Initially hidden */
      overflow: hidden;
      transition: max-height 0.4s ease-out, padding 0.4s ease-out; /* Smooth transition */
      padding-left: 35px; /* Indent the answer to align with question text after question mark */
      line-height: 1.6;
      color: #000000; /* Slightly lighter for answer text */
  }
  
  /* When the answer is active (expanded) */
  .faq-answer.active {
      max-height: 200px; /* Adjust based on expected content height */
      padding-top: 10px;
      padding-bottom: 10px;
  }
  
  /* Icon rotation when active (for down arrow to up arrow effect) */
  .faq-question.active .faq-icon {
      transform: rotate(180deg); /* Rotates the down arrow to an up arrow */
  }
  
    /*------------------------faq end--------------------*/
  
      .banner-card-1, .banner-card-2 {
        background: #fcc1b2;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }
  
      .banner-card-2 div, .banner-card-1 div {
        color: #914F1E;
      }
  
      .slider-main-content-1 h1 {
        text-align: center;
        color: #924e1f;
        text-transform: uppercase;
        font-weight: 800;
      }
  
      .slider-main-content-2 {
        padding-top: 20px;
        text-align: center;
        padding: 15px 20px 20px 20px;
      }
  
      .slider-main-content-2 h3 {
        color: #924e1f;
        text-transform: uppercase;
      }
  
      .slider-main-content-3 {
        padding: 0 150px;
      }
  
      .slider-main-content-3 h2 {
        background: #924e1f;
        color: #ffffff;
        padding: 12px;
        border-radius: 12px;
        font-weight: 700;
        text-transform: uppercase;
      }
  
      .border-bottom {
        border-bottom: 3px var(--bs-border-style) #924E1F !important;
      }
   @media screen and (max-width: 576px) {
      .awad-wining {
          width: 100%;
      }
  
      .vitigilo img {
          width: 100%;
      }
  }
  
  @media screen and (min-width: 576px) {
      .awad-wining {
          width: 280px;
          height: 450px;
      }
  
      .vitigilo {
          width: 320px;
          height: 320px;
      }
  }
  
  
          @media screen and (max-width: 376px) {
              .hero {
                  min-height: 0vh;
              }
  
              .hero .hero-bg {
                  height: 100%;
              }
  
              .banner-slider-1 {
                  transform: translate3d(1.7%, 32.8%, 0) rotate(353deg);
              }
  
  
              .banner-card-1,
              .banner-card-2 {
                  width: 163px;
                  padding: 10px;
              }
  
              .banner-card-1 img,
              .banner-card-2 img {
                  width: 142px;
                  height: 200px;
  
              }
  
              .banner-slider-2 {
                  transform: translate3d(47.6%, -55.9%, 0) rotate(9deg);
              }
  
              .stats-p {
                  font-weight: 700 !important;
                  font-size: 24px !important;
              }
  
              @media (max-width: 576px) {
      .stats-item {
        padding: 20px;
      }
    }
  
              .stats .stats-item {
  
                  padding: 20px 20px 20px 20px;
              }
  
              .stats .stats-item p {
  
                  font-size: 14px;
                  font-weight: 600;
              }
  
              .stats .stats-item span {
                  font-size: 20px;
                  display: block;
                  font-weight: 800;
              }
  
              .slider-main-content-1 h1 {
                  font-size: 33px;
  
                  line-height: 41px;
              }
  
              .slider-main-content-2 h3 {
                  font-size: 20px;
              }
  
              .slider-main-content-3 h2 {
  
                  padding: 15px;
  
              }
  
              .slider-main-content-3 {
                  padding: 0 5px;
              }
  
              .silder-colmunm {
                  height: 440px;
              }
          }
  
          .review-videos, .feedback-videos {
        background-color: #f0f0f0;
        padding: 2rem 1rem;
      }
  
      .reel-carousel {
        display: flex;
        gap: 1rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
      }
  
      .reel-carousel video {
        width: 300px;
        height: 533px;
        scroll-snap-align: center;
        border-radius: 10px;
        object-fit: cover;
      }
  
          @media only screen and (min-width: 376px) and (max-width: 476px) {
              .hero {
                  min-height: 0vh;
              }
  
              .hero .hero-bg {
                  height: 100%;
              }
  
              .banner-slider-1 {
                  transform: translate3d(1.7%, 32.8%, 0) rotate(353deg);
              }
  
  
              .banner-card-1,
              .banner-card-2 {
                  width: 163px;
                  padding: 10px;
              }
  
              .banner-card-1 img,
              .banner-card-2 img {
                  width: 142px;
                  height: 200px;
  
              }
  
              .banner-slider-2 {
                  transform: translate3d(47.6%, -55.9%, 0) rotate(9deg);
              }
  
              .stats .stats-item {
  
                  padding: 20px 20px 20px 20px;
              }
  
              .stats .stats-item p {
  
                  font-size: 14px;
              }
  
              .stats .stats-item span {
                  font-size: 20px;
                  display: block;
                  font-weight: 800;
              }
  
              .stats-p {
                  font-weight: 700 !important;
                  font-size: 24px !important;
              }
  
              .slider-main-content-1 h1 {
                  font-size: 35px;
  
                  line-height: 41px;
              }
  
              .slider-main-content-2 h3 {
                  font-size: 20px;
              }
  
              .slider-main-content-3 h2 {
  
                  padding: 15px;
  
              }
  
              .slider-main-content-3 {
                  padding: 0 25px;
              }
  
              .silder-colmunm {
                  height: 440px;
              }
          }
  
          @media only screen and (min-width: 476px) and (max-width: 576px) {
              .hero {
                  min-height: 0vh;
                  margin: 20px 0 0 0;
              }
  
              .hero .hero-bg {
                  height: 100%;
              }
  
              .banner-slider-1 {
                  transform: translate3d(2.7%, 18.8%, 0) rotate(353deg);
              }
  
  
              .banner-card-1,
              .banner-card-2 {
                  width: 203px;
                  padding: 10px;
              }
  
              .banner-card-1 img,
              .banner-card-2 img {
                  width: 180px;
                  height: 250px;
              }
  
              .banner-slider-2 {
                  transform: translate3d(48.6%, -67.9%, 0) rotate(9deg);
              }
  
              .stats-p {
                  font-weight: 700 !important;
                  font-size: 24px !important;
              }
  
              .stats .stats-item {
  
                  padding: 20px 20px 20px 20px;
              }
  
              .stats .stats-item p {
  
                  font-size: 14px;
              }
  
              .stats .stats-item span {
                  font-size: 20px;
                  display: block;
                  font-weight: 800;
              }
  
              .slider-main-content-1 h1 {
                  font-size: 35px;
  
                  line-height: 41px;
              }
  
              .slider-main-content-2 h3 {
                  font-size: 20px;
              }
  
              .slider-main-content-3 h2 {
  
                  padding: 15px;
  
              }
  
              .slider-main-content-3 {
                  padding: 0 86px;
              }
  
              .silder-colmunm {
                  height: 440px;
              }
          }
  
          @media only screen and (min-width: 576px) and (max-width: 767px) {
              .col-sized{
                  width: 66%;
              }
  
              .hero .hero-bg {
                  height: 100%;
              }
  
              .banner-slider-1 {
                  transform: translate3d(2.7%, 18.8%, 0) rotate(353deg);
              }
  
  
              .banner-card-1,
              .banner-card-2 {
                  width: 220px;
                  padding: 10px;
              }
  
              .banner-card-1 img,
              .banner-card-2 img {
                  width: 199px;
                  height: 250px;
              }
  
              .banner-slider-2 {
                  transform: translate3d(48.6%, -67.9%, 0) rotate(9deg);
              }
  
              .stats-p {
                  font-weight: 700 !important;
                  font-size: 24px !important;
              }
  
              .slider-main-content-1 h1 {
                  font-size: 35px;
  
                  line-height: 41px;
              }
  
              .slider-main-content-2 h3 {
                  font-size: 20px;
              }
  
              .slider-main-content-3 h2 {
  
                  padding: 15px;
  
              }
  
              .slider-main-content-3 {
                  padding: 0 86px;
              }
  
              .silder-colmunm {
                  height: 440px;
              }
  
          }
  
          @media only screen and (min-width: 767px) and (max-width: 992px) {
              .hero {
                  min-height: 0vh;
                  margin: 119px 0 0 0;
              }
  
              .hero .hero-bg {
                  height: 100%;
              }
  
              .banner-slider-1 {
                  transform: translate3d(-10.3%, 7.8%, 0) rotate(353deg);
              }
  
  
              .banner-card-1,
              .banner-card-2 {
                  width: 186px;
                  padding: 10px;
              }
  
              .banner-card-1 img,
              .banner-card-2 img {
                  width: 163px;
                  height: 220px;
              }
  
              .banner-slider-2 {
                  transform: translate3d(44.6%, -32.9%, 0) rotate(9deg);
              }
  
              .stats-p {
                  font-weight: 700 !important;
                  font-size: 24px !important;
  
              }
  
              .slider-main-content-1 h1 {
                  font-size: 28px;
                  line-height: 31px;
              }
  
              .slider-main-content-2 h3 {
                  font-size: 15px;
              }
  
              .slider-main-content-3 h2 {
  
                  padding: 15px;
                  font-size: 27px;
              }
  
              .slider-main-content-3 {
                  padding: 0 50px;
              }
  
              .silder-colmunm {
                  height: 440px;
              }
  
              .content-roe {
                  margin-top: 40px;
              }
  
              .content-col1 {
                  padding-top: 214px;
              }
  
          }
  
          @media screen and (min-width: 992px) {
              .banner-slider-1 {
                  transform: translate3d(8.9%, 28.8%, 0) rotate(353deg);
              }
  
              .banner-card-1,
              .banner-card-2 {
                  padding: 5px;
                  width: 230px;
                  /* Larger card sizes */
              }
  
              .banner-card-1 img,
              .banner-card-2 img {
                  width: 219px;
                  height: 340px;
              }
  
              .banner-slider-2 {
                  transform: translate3d(50.0%, -26.9%, 0) rotate(9deg);
              }
  
              .stats-p {
                  font-weight: 700 !important;
                  font-size: 24px !important;
              }
  
              .content-col1 {
                  padding-top: 188px;
              }
          }
  
          @media only screen and (min-width: 993px) and (max-width: 1200px) {
              /* .hero .hero-bg {
                  height: auto;
              } */
  
              .banner-slider-1 {
                  transform: translate3d(4.9%, 41.5%, 0) rotate(353deg);
              }
  
              .banner-card-1,
              .banner-card-2 {
                  width: 191px;
                  /* Larger card sizes */
              }
  
              .banner-card-1 img,
              .banner-card-2 img {
                  width: 180px;
                  height: 230px;
              }
  
              .banner-slider-2 {
                  transform: translate3d(49.9%, 5.1%, 0) rotate(9deg) !important;
              }
  
              .slider-main-content-1 h1 {
                  font-size: 36px;
              }
  
              .slider-main-content-2 h3 {
                  font-size: 24px;
              }
  
              .slider-main-content-3 {
                  padding: 0px 96px;
              }
  
              .slider-main-content-3 h2 {
                  font-size: 25px;
              }
  
              .content-col1 {
                  padding-top: 274px;
              }
          }
  
          @media only screen and (min-width: 1200px) and (max-width: 1400px) {
              .banner-slider-1 {
                  transform: translate3d(8.9%, 28.8%, 0) rotate(353deg);
              }
  
              .banner-card-1,
              .banner-card-2 {
                  padding: 5px;
                  width: 230px;
                  /* Larger card sizes */
              }
  
              .banner-card-1 img,
              .banner-card-2 img {
                  width: 219px;
                  height: 340px;
              }
  
              .banner-slider-2 {
                  transform: translate3d(50.0%, -26.9%, 0) rotate(9deg);
              }
  
              .slider-main-content-1 h1 {
                  font-size: 40px;
              }
  
              .content-col1 {
                  padding-top: 230px;
              }
  
          }
  
          @media only screen and (max-width: 992px) {
              .hero .hero-bg {
                  object-fit: fill;
              }
          }
  
          .befor-after-font {
              font-family: "Permanent Marker", cursive;
              font-weight: 400;
              font-style: normal;
              font-size: 28px;
              text-align: center;
          }
  
          .text-fnt {
              font-size: 24px !important;
              color: #924e1f !important;
          }
          .video-carousel-wrapper {
        max-width: 1200px;
        margin: 0 auto;
        touch-action: pan-y;
      }
  
      /* .video-carousel-wrapper .carousel-control-next,
      .video-carousel-wrapper .carousel-control-prev {
        width: 10%;
      }
  
      .video-carousel-wrapper .carousel-inner {
        background: #111;
      }
  
      .video-carousel-wrapper .carousel-indicators {
        bottom: -13px;
      }
  
      .video-carousel-wrapper .carousel-item {
        padding-bottom: 25px;
        position: relative;
      }
  
      .video-carousel-wrapper video {
        width: 100%;
        pointer-events: none;
        object-fit: cover;
      }
  
      .sound-toggle {
        position: absolute;
        top: 15px;
        right: 15px;
        z-index: 10;
        background-color: rgba(0, 0, 0, 0.6);
        color: #fff;
        border: none;
        font-size: 18px;
        padding: 6px 10px;
        border-radius: 5px;
        cursor: pointer;
        transition: transform 0.2s ease;
      }
  
      .sound-toggle:active {
        transform: scale(0.9);
      }
  
      @media (max-width: 768px) {
        .carousel-control-prev,
        .carousel-control-next {
          width: 15%;
        }
  
        .carousel-control-prev-icon,
        .carousel-control-next-icon {
          background-image: none !important;
          background-color: rgba(0, 0, 0, 0.4);
          width: 36px;
          height: 36px;
          font-size: 18px;
        }
      }
  
      .carousel-control-prev-icon,
      .carousel-control-next-icon {
        background-image: none !important;
        background-color: rgba(0, 0, 0, 0.3);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        font-size: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
      }
  
      .carousel-control-prev-icon::after {
        content: "‹";
      }
  
      .carousel-control-next-icon::after {
        content: "›";
      }
  
      .carousel-control-prev-icon:hover,
      .carousel-control-next-icon:hover {
        background-color: rgba(0, 0, 0, 0.6);
      }
  
      .play-pause-btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(0, 0, 0, 0.6);
        color: white;
        border: none;
        font-size: 30px;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      } */
  
   .gradient-border {
      position: relative;
      background-color: #ffc107; /* fallback color */
      color: #000;
      z-index: 1;
      overflow: hidden;
      border: 2px solid transparent;
      border-radius: 50px;
      transition: border 0.5s ease-in-out;
  }
  
  .gradient-border::before {
      content: "";
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      z-index: -1;
      background: linear-gradient(45deg, #ff6b6b, #f8c907, #4cd964);
      background-size: 300% 300%;
      animation: gradientAnimation 5s ease infinite;
      border-radius: 55px;
  }
  
  @keyframes gradientAnimation {
      0% {
          background-position: 0% 50%;
      }
      50% {
          background-position: 100% 50%;
      }
      100% {
          background-position: 0% 50%;
      }
  }
  
  .bubble-pop {
      animation: popIn 0.7s ease-in-out infinite alternate;
      transition: transform 0.3s ease;
  }
  
  @keyframes popIn {
      0% {
          transform: scale(1);
          box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
      }
      100% {
          transform: scale(1.08);
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
      }
  }
  /* Custom play button */
  .play-button-custom {
      background: rgba(255, 255, 255, 0.85);
      border: none;
      border-radius: 50%;
      padding: 12px 16px;
      font-size: 32px;
      color: #000;
      z-index: 2;
      cursor: pointer;
      box-shadow: 0 5px 15px rgba(0,0,0,0.2);
      transition: transform 0.2s ease;
  }
  
  .play-button-custom:hover {
      transform: scale(1.1);
  }
  
  
    
  
  
    .scroll-wrapper {
      position: relative;
    }
  
    .scroll-container {
      display: flex;
      overflow-x: auto;
      scroll-behavior: smooth;
      scroll-snap-type: x mandatory;
      gap: 16px;
      padding: 0 40px;
    }
  
    .product-card {
      flex: 0 0 auto;
      scroll-snap-align: start;
      background: #fff;
      border-radius: 1rem;
      width: calc((100% - 80px - 32px * 2) / 3);
      transition: transform 0.3s ease;
    }
  
    .product-card:hover {
      transform: translateY(-5px);
    }
  
    .product-card img {
      width: 100%;
      height: 300px;
      object-fit: cover;
      border-radius: 0.75rem;
    }
  
    .product-description {
      max-height: 90px;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 0.9rem;
      color: #555;
      padding:2px;
    }
  
    .scroll-wrapper {
      position: relative;
      background: #fff5e8;
      padding: 10px 40px; /* enough space for buttons */
    }
    
    .scroll-content {
      display: flex;
      overflow-x: auto;
      scroll-behavior: smooth;
    }
    
    .scroll-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
      background: #fff;
      border: none;
      font-size: 1.5rem;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #333;
    }
    
    .scroll-btn.left {
      left: 10px;
    }
    
    .scroll-btn.right {
      right: 10px;
    }
    
  
    .scroll-container::-webkit-scrollbar {
      display: none;
    }
  
    @media (max-width: 992px) {
      .product-card {
        width: calc((100% - 80px - 16px) / 2);
      }
    }
  
    @media (max-width: 576px) {
      .scroll-container {
        padding: 0 16px;
        gap: 12px;
      }
  
      .product-card {
        width: 180px;
        padding: 0.75rem;
      }
  
      .product-card img {
        height: 160px;
      }
  
      .product-description {
        font-size: 0.8rem;
        max-height: 70px;
      }
  
      .scroll-btn {
        font-size: 1.5rem;
        padding: 3px 8px;
      }
    }
  
  
  
    .contact-card {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 20px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
  
    .contact-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
    }
  
    .icon-wrapper {
      font-size: 4rem;
      transition: transform 0.4s ease;
      display: inline-block;
    }
  
    .icon-wrapper:hover {
      animation: shake 0.5s ease-in-out;
    }
  
    @keyframes shake {
      0% { transform: translate(0); }
      25% { transform: translateX(-5px); }
      50% { transform: translateX(5px); }
      75% { transform: translateX(-5px); }
      100% { transform: translateX(0); }
    }
  
    .contact-btn {
      background: #fff;
      color: #914F1E;
      font-weight: 600;
      border: none;
      transition: all 0.3s ease;
    }
  
    .contact-btn:hover {
      background: #ffba75;
      color: #000;
      transform: scale(1.05);
    }
  
  
  
          .feedback-videos {
            background: #fff5e8;
            padding: 40px 0;
            overflow-x: hidden;
          }
        
          .feedback-videos h2 {
            font-weight: 600;
            color: #333;
          }
        
          .feedback-scroll {
            display: flex;
            gap: 20px;
            overflow-x: auto;
            scroll-behavior: smooth;
            scroll-snap-type: x mandatory;
            padding: 0 40px;
          }
        
          .feedback-scroll iframe {
            flex: 0 0 auto;
            width: 600px;
            height: 340px;
            border-radius: 1rem;
            scroll-snap-align: start;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          }
        
          @media (max-width: 992px) {
            .feedback-scroll iframe {
              width: 500px;
              height: 300px;
            }
          }
        
          @media (max-width: 768px) {
            .feedback-scroll iframe {
              width: 100%;
              height: 250px;
            }
          }
        
          .feedback-scroll::-webkit-scrollbar {
            display: none;
          }
        
  
  
          .review-videos {
            background: #fff5e8;
            padding: 10px 0;
            overflow-x: hidden;
          }
        
          .reel-carousel {
            display: flex;
            gap: 16px;
            overflow-x: auto;
            scroll-behavior: smooth;
            scroll-snap-type: x mandatory;
            padding: 0 40px;
          }
        
          .reel-carousel video {
            flex: 0 0 auto;
            width: 300px;
            height: 520px;
            scroll-snap-align: start;
            object-fit: cover;
            border-radius: 1rem;
            cursor: pointer;
            transition: transform 0.3s ease;
          }
        
          .reel-carousel video:hover {
            transform: scale(1.02);
          }
        
          @media (max-width: 768px) {
            .reel-carousel video {
              width: 240px;
              height: 425px;
            }
          }
        
          .reel-carousel::-webkit-scrollbar {
            display: none;
          }
        
          /* Modal styles */
          .video-modal {
            display: none;
            position: fixed;
            z-index: 9999;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(10px);
            justify-content: center;
            align-items: center;
          }
        
          .video-modal-content {
            position: relative;
            width: 90%;
            max-width: 800px;
            display: flex;
            justify-content: center;
            align-items: center;
            animation: fadeIn 0.3s ease-in-out;
          }
        
          .video-modal video {
            width: 100%;
            max-height: 80vh;
            border-radius: 1rem;
            box-shadow: 0 0 25px rgba(255, 255, 255, 0.25);
          }
        
          .video-modal-close {
            position: absolute;
            top: -30px;
            right: -20px;
            color: #fff;
            font-size: 2.5rem;
            font-weight: bold;
            cursor: pointer;
            transition: 0.3s ease;
          }
        
          .video-modal-close:hover {
            transform: scale(1.2);
          }
        
          .modal-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.15);
            border: none;
            color: #fff;
            font-size: 2.5rem;
            padding: 10px 15px;
            border-radius: 10px;
            cursor: pointer;
            z-index: 10000;
            transition: background 0.3s;
          }
        
          .modal-nav.left { left: -50px; }
          .modal-nav.right { right: -50px; }
        
          .modal-nav:hover {
            background: rgba(255, 255, 255, 0.4);
          }
          /* @media (max-width: 768px) {
    .scroll-btn {
      display: none !important;
    }
  } */
  
        
          @media (max-width: 720px) {
            .video-modal-content { width: 95%; }
            .modal-nav.left { left: -20px; }
            .modal-nav.right { right: -20px; }
            .video-modal-close { top: 5px; right: 10px; font-size: 2rem; }
          }
        
          @keyframes fadeIn {
            from { opacity: 0; transform: scale(0.9); }
            to { opacity: 1; transform: scale(1); }
          }
  
          .modal-backdrop.show {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
  }
  .modal-content {
    background-color: transparent;
    border: none;
  }
  
        
  
  
    .custom-carousel {
  
      overflow: hidden;
    }
  
    .custom-carousel .carousel-item {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  
    .carousel-image-wrapper {
      width: 100%;
      max-height: 85vh;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #000;
    }
  
    .carousel-image-wrapper img {
      width: 100%;
      height: auto;
      object-fit: contain;
    }
  
    .carousel-content {
      padding: 20px;
      text-align: center;
      background: #f8f9fa;
      width: 100%;
    }
  
    .carousel-content h5 {
      font-size: 1.5rem;
      color: #d39e00;
      font-weight: bold;
    }
  
    .carousel-content p {
      margin-top: 10px;
      font-size: 1rem;
      color: #333;
    }
  
    @media (max-width: 768px) {
      .carousel-content h5 {
        font-size: 1.2rem;
      }
  
      .carousel-content p {
        font-size: 0.9rem;
      }
    }
  
    @media (max-width: 480px) {
      .carousel-content h5 {
        font-size: 1rem;
      }
  
      .carousel-content p {
        font-size: 0.8rem;
      }
    }
  
    .carousel-control-prev, .carousel-control-next {
      z-index: 3;
    }
  
  
  
    .form-wrapper {
      background: #fff;
      border-radius: 15px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
    }
  
    .form-wrapper:hover {
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
      transform: translateY(-4px);
    }
  
    .bg-gradient-custom {
      background: linear-gradient(135deg, #6e260e, #914F1E);
    }
  
    .btn-book {
      background-color: #914F1E;
      border-color: #914F1E;
      font-weight: bold;
    }
  
    .btn-book:hover {
      background-color: #6e260e;
      border-color: #6e260e;
    }
  
  
  
          .marquee {
              animation: marquee 15s linear infinite;
          }
  
          @keyframes marquee {
              0% {
                  transform: translateX(100%);
              }
  
              100% {
                  transform: translateX(-100%);
              }
          }
      
  
  
          .callNow {
                  display: none;
          }
  
          @media only screen and (max-width: 480px) {
                  .callNow {
                          background: #dc470d;
                          padding: 8px 0;
                          z-index: 999;
                          text-align: center;
                          font-size: 20px;
                          font-weight: 700;
                          text-transform: uppercase;
                          display: block;
                          position: fixed;
                          left: 0;
                          bottom: 0;
                          width: 100%;
                          height: 53px;
  
                  }
  
                  .callNow a {
                          color: white;
                  }
          }
  
  
  
    .fancy-callNow {
      display: none;
    }
  
  
  
    .fancy-callNow {
      display: none;
    }



/* Optional: Smooth scroll */
html {
  scroll-behavior: smooth;
}

    
  /*---------------thank you page-------------*/
  
    .bg-brown {
      background-color: #914F1E;
    }
    
    .thank-you-section {
      background: #FDD9CC;
      padding: 30px;
  
    }
    
    .thank-you-section h1 {
      color: #333;
      font-weight: 800;
    }
    
    .thank-you-section h4 {
      color: #555;
      font-weight: 800;
    }
    
    .thank-you-section p {
      color: #666;
    }
    
    .larger-img {
      width: 100%;
      max-width: 400px; /* Let image get larger on mobile */
    }
    
   
    @media (max-width: 767.98px) {
      .larger-img {
        max-width: 100%; /* Let it fill width on small devices */
      }
    }
    .larger-img {
      width: 100%;
      max-width: 530px;
    }
    
    @media (max-width: 767.98px) {
      .larger-img {
        max-width: 100%;
      }
    }