@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

body {
    margin: 0;
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    background-color: #fff;
    overflow-x: hidden;
    }

.container{
  max-width: 1200px;}

html {
  scroll-behavior: smooth; /* Optional: adds a nice sliding effect */
  scroll-padding-top: 70px; /* Replace 80px with the height of your menu bar */
}

.container-fluid, .container-fluid-left, .container-fluid-right {
  margin-right: 0;
  margin-left: 0;
  padding-right: 60px;
  padding-left: 60px
}

/* Navbar Styling */
.navbar {
    /* background: linear-gradient(to bottom right, #007bff, #00c6ff); */
    background-color: #fff;
    color: #111;
    border-bottom: 1px solid #ebebeb;
}

.navbar-brand {
    font-weight: bold;
    font-size: 1.5rem;
}
    
.navbar-brand img { height: 50px;}   
.navbar-brand:focus-visible {border: 0;}

/* ---- START: REVISED Animated Toggler Icon CSS ---- */

.navbar-toggler {
    position: relative; /* Establishes a positioning context for the bars */
    height: 40px;
    width: 40px;
    border: none;
    padding: 0; /* Remove padding to precisely control bar position */
    background: transparent !important;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.toggler-icon {
    width: 28px;
    height: 3px;
    background-color: #35659e;
    border-radius: 2px;
    display: block;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: absolute;
    left: 6px; /* Center the bars inside the 40px button */
}

.top-bar {
    transform: translateY(-8px);
}

.bottom-bar {
    transform: translateY(8px);
}

/* When menu is OPEN (aria-expanded="true") */
.navbar-toggler[aria-expanded="true"] .top-bar {
    transform: rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .middle-bar {
    opacity: 0;
    transform: translateX(-20px);
}

.navbar-toggler[aria-expanded="true"] .bottom-bar {
    transform: rotate(-45deg);
}
/* ---- END: REVISED Animated Toggler Icon CSS ---- */


.navbar-nav .nav-link {
    color: #111111;
    margin-right: 24px;
    font-size: 17px;
}

.navbar-nav .nav-link:hover {
    color: #35659e;
}



.navbar .btn-blue {
    background-color: #35659e;
    border: 1px solid #35659e;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 33px;
    text-transform: uppercase;
    font-size: 15px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.navbar .btn-blue:hover {
    background-color: white;
    color: #35659e;
    border-color: #35659e;

}


.navbar.fixed-top.scrolled {
   /* background: linear-gradient(to bottom right, #00dbffc4, #003259e3);  */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    background: #00486e;
}
   
.navbar-collapse.collapsing {
    transition: height 0.4s ease, opacity 0.3s ease;
    opacity: 0;
}


.navbar-collapse.show {
    transition: opacity 0.4s ease;
    opacity: 1;
}


.modal-backdrop {
  z-index: 9998 !important;
}
.modal {
  z-index: 9999 !important;
}

.dropdown-item {font-size: 15px;}

/* Default Bootstrap hamburger icon */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba%28255,255,255, 1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Close icon style */
.navbar-toggler.collapsed .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba%28255,255,255, 1%29' stroke-width='2' stroke-linecap='round' d='M6 6l18 18M6 24L24 6'/%3E%3C/svg%3E");
}
.login-btn {
    background: linear-gradient(90deg, #2dc7b5, #5d4de0);
    color: white !important;
    border-radius: 50px;
    padding: 6px 18px;
    font-weight: 600;
}

/* Hero Section */
.hero {
    position: relative;
    height: auto;
    overflow: hidden;
    padding-top: 82px; /* space for navbar */
    
}

/* Image Row Styles */
.image-row {
    display: flex;
    gap: 0px;
    position: relative;
    width: max-content;
    height: auto;
    padding-bottom: 0px;
}
.image-row img {
    height: 100%;
    border-radius: 12px;
    object-fit: cover;
    filter: brightness(1) saturate(1);
    position: relative;
}
.image-row img::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 12px;
}

.row1 {
animation: scrollLeft 40s linear infinite;
}
.row2 {
    animation: scrollRight 40s linear infinite;
}

@keyframes scrollLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* moves half, showing second set */
}

@keyframes scrollRight {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}


/* Overlay Text */
.overlay {
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    padding: 40px;
    border-radius: 33px;
    max-width: 650px;
    text-align: center;
    z-index: 3;
}

.overlay h1 {  font-size: 36px;  font-weight: 600;}

.overlay h1 span {text-transform: uppercase;}

.btn-gradient {
    background: linear-gradient(90deg, #1fa0cc, #35659e, #1fa0cc);
    background-size: 200% auto;
    transition: background-position 0.5s ease; /* This handles the smoothness */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 33px;
    text-transform: uppercase;
    font-size: 15px;
}


.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active, .btn-gradient:active {color: #fff;}
.btn-gradient:hover, .btn-gradient:focus-visible  {color: #fff;  background-position: right center;}
.btn-white { background: white; color: #333;  padding: 10px 20px; border-radius: 33px; text-transform: uppercase; font-size: 15px; border: 1px solid #fff; transition: all 0.3s ease-in-out; box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);}
.btn-white:hover {background: #fff; border-color: #35659e; color: #35659e;}



/*
========================================
    AI FEATURES SECTION STYLES
========================================
*/

.ai-features {
    padding: 0px 0px 50px;
    background-color: #f8f9fd  !important; 
}

.feature-card {
    background-color: #ffffff;
    border-radius: 33px;
    padding: 25px;
    /* box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); */
    height: 100%;
    display: flex;
    flex-direction: column; /* Default direction */
    border: 1px solid #e8e8e8;
}

.feature-card.full-box {flex-direction: row;}
.feature-card.full-box .feature-text {width: 50%;}
.feature-card.full-box .feature-image {text-align: center; margin: auto;}


.feature-text {
    order: 1; /* On mobile, text comes second */
}
.feature-image {
    order: 2; 
    text-align: center;
}

.feature-text h4 {font-size: 24px;
    line-height: 30px;
    font-weight: 500;
    color: #111111;}

.feature-text p {font-size: 17px; line-height: 27px; font-weight: 400; color: #2e2e2e;}
.ai-features-wrapper { padding-top: 60px;}
.check-config {text-align: center; padding-bottom: 40px;}




.carousel-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 0px 0px 30px;
  margin-bottom: 0px;
  background: linear-gradient(to top, #edeff9, #ffffff);
}

.scroll-container {
 display: flex;
  overflow-x: auto; /* Required for scrolling */
  scroll-behavior: smooth;
  gap: 15px;
  padding: 50px 20px 70px; /* Added some side padding */
  width: 100%; /* Changed from fit-content to 100% */
  box-sizing: border-box;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Hides scrollbar in Firefox */
  max-width: fit-content;
    margin: 0 auto;
}

.scroll-container::-webkit-scrollbar {
  display: none;
}

.SiteFooter.lights-out .bg-solid {
    background: #ffffff;
}
.lights-out .bg-faded {
    /* background-color: #262626; */
    background-color: #fff;
}


.item {
  flex: 0 0 auto;
  width: 370px;
  height: 520px;
  margin: 0 10px;
  background-size: cover;
  background-position: center;
  border-radius: 33px;
  position: relative;
  color: #111111;
  padding: 20px;
  box-sizing: border-box;
  cursor: pointer;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  /* background: linear-gradient(to top, #1bdbe2, #189b8e); */
  /* background: linear-gradient(to top, #db5043, #dd4c3e); */
  /* background: linear-gradient(to top, #d17c47, #c06125); */
  /* box-shadow: 0px 1px 6px 1px #afb0b1; */
  transition: all 0.4s ease;
  scroll-snap-align: start;
  
}

.item:hover {
    transform: scale(1.02);
    /* box-shadow: 0 20px 40px rgba(0,0,0,0.3); */
}


.item img{width: 100%; bottom: 0; position: absolute; right:0;}
/* .item.slider-img-1 img {width: 85%; left: 35px;} */
.item.slider-img-1.gray-color img {left: 15px; width: 95%;}
/* .item.slider-img-1.gray-color {background: linear-gradient(to top,  #f5f5f7, #d2d2d2);} */
.item.slider-img-2 { width: 530px; height: 520px; /*background:  linear-gradient(to top, #155e81, #175e80);*/ overflow: hidden;}
/* .item.slider-img-2 img {width: 670px; bottom: 20px; right: -150px;} */
.item.slider-img-2 img {padding: 0px 10px; height: 325px; width: -webkit-fill-available;} 
.item.slider-img-2 .plus-icon-box img {right: 10px; bottom: 10px;}
.item.slider-img-3  {background: #f5f5f7;}

.carousel-wrapper-top {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 20px 0;
   margin-bottom: 30px;
}




.scroll-container.top-slider-box .item.slider-img-1 {background-image: url(../images/slider-img-1.jpg); width: 370px; height: 570px;}
.scroll-container.top-slider-box .item.slider-img-2 {background-image: url(../images/slider-img-2.jpg); width: 370px; height: 570px;}
.scroll-container.top-slider-box .item.slider-img-3 {background-image: url(../images/slider-img-3.jpg); width: 370px; height: 570px;} 
.scroll-container.top-slider-box .item.slider-img-4 {background-image: url(../images/slider-img-4.jpg); width: 370px; height: 570px;} 
.scroll-container.top-slider-box .item.slider-img-5 {background-image: url(../images/slider-img-5.jpg); width: 370px; height: 570px;} 


.item .caption {
  position: absolute;
    top: 30px;
    left: 25px;
    font-size: 24px;
    padding-right: 25px;
    font-weight: 500;
    /* text-shadow: 0 0 10px rgba(0, 0, 0, 0.7); */
    /* letter-spacing: -0.02em; */
    color: #111111;
}

.caption-hd { display: block;
    justify-content: space-between;
    align-items: center;
    font-size: 17px;
    color: #2e2e2e;
    line-height: 27px; font-weight: 400;
    }



.caption-top { font-size: 24px; font-weight: 500; color: #111111; text-align: center; padding-bottom: 15px;}
/* .caption-hd.grey { font-size: 17px; color: #4b4b4b; margin-bottom: 0px; text-transform: uppercase;} */

.product-card .caption-hd {  display: block;}


/* .arrow-icon {
    flex-shrink: 0; 
} */


/* Container for the icon */
.arrow-icon {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-left: 10px;
}

/* Creating the two bars of the Plus sign */
.create-design-selection .accordion-item .caption-hd.grey .arrow-icon::before,
.create-design-selection .accordion-item .caption-hd.grey .arrow-icon::after {
    content: '';
    position: absolute;
    background-color: #333; /* Icon Color - change as needed */
    transition: transform 0.3s ease, opacity 0.3s ease;
}




/* Horizontal bar */
.arrow-icon::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    transform: translateY(-50%);
}

/* Vertical bar */
.arrow-icon::after {
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    transform: translateX(-50%);
}

/* ANIMATION: When active, turn Plus into Minus */
.accordion-item.active .arrow-icon::after {
    transform: translateX(-50%) rotate(90deg);
    opacity: 0; /* Hides the vertical bar to leave only the horizontal (minus) */
}

.accordion-item.active .arrow-icon::before {
    /* Optional: you can rotate the horizontal bar if you want a different effect */
    transform: translateY(-50%) rotate(180deg);
}

.p-t-b-15 {padding: 15px 0px;}

.item.slider-img-1.gray-color .caption, .item.slider-img-1.gray-color .caption strong {color: #1d1d1f;}




.explore-btn {background: rgb(0 0 0 / 60%);
  border: 1px solid rgb(0 0 0 / 20%);
  border-radius: 50px;
  padding: 10px 20px;
  color: white;
  backdrop-filter: blur(10px);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease; text-decoration: none;}

.explore-btn:hover{background:rgb(0 0 0 / 70%);
  transform: scale(1.05); color:#fff; text-decoration: none;}

.explore-btn span {font-size: 24px;line-height: 12px;display: table-caption; padding-left: 4px;}





.arrow-buttons {
  position: absolute;
  bottom: 40px;
  right: 20px;
  display: flex;
  gap: 10px;
  z-index: 2;
}

.carousel-wrapper .arrow {
  font-size: 20px;
  background: rgba(0, 0, 0, 0.4);
  color: white;
  border: none;
  cursor: pointer;
  padding: 5px 15px;
  border-radius: 50%;
}

.arrow:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.popup-inner .sub-header { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -0.006em; display: block; text-align: left; color:#1d1d1f;}

.popup-inner .header {font-size: 40px; line-height: 36px; font-weight: 700; letter-spacing: -0.03em;  display: block; text-align: left; color: #1d1d1f;}

body.modal-open {
      overflow: hidden;
    }

    /* Modal overlay */
    #popup {
     position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.4); /* black tint */
      backdrop-filter: blur(10px);    /* blur effect */
      -webkit-backdrop-filter: blur(10px); /* Safari support */
      display: none;
      justify-content: center;
      align-items: flex-start;
      overflow-y: auto;
      z-index: 9999;
      padding: 2rem;
    }

    /* Modal content box */
    .popup-inner {
      background-color: white;
      width: 95%;
      /* max-width: 900px; */
      border-radius: 20px;
      padding: 30px;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
      position: relative;
    }

    /* Close button */
    .close-btn {
       position: absolute;
      top: 1rem;
      right: 1rem;
      font-size: 1.8rem;
      background: none;
      border: none;
      cursor: pointer;
    }

    .gray-box-model {
       background: #f5f5f5;
      padding: 30px 30px 0px;
      border-radius: 18px;
      margin-top: 20px;
      display: flex;
      gap: 1rem;
      align-items: center;
    }

    .gray-box-model.laptop img {
       max-width: 100%;
      height: auto;
    }

.create-design-selection {
      display: flex;
      max-width: auto;
      margin: auto;
      /* background: #f5f5f5; */
      border-radius: 0px;
      padding: 30px 30px 50px;
   
    }

    .create-design-selection .accordion {
      width: 40%;
    }

    .create-design-selection .accordion-item {
      border-bottom: 1px solid #ccc;
      padding: 20px 0;
      cursor: pointer;
      background: transparent;
      border: 0;
      border-bottom: 1px solid #ccc;
    }

    /* .create-design-selection .accordion-item h3 {
      margin: 0; font-size: 26px; color: #1d1d1f;font-family: "Noto Sans", sans-serif; font-weight: 300; letter-spacing: -0.03em;
    } */

    .create-design-selection .accordion-item.active h3 {
      color: #1d1d1f;
    }

    .create-design-selection .image-display {
      width: 60%;
      padding-left: 40px;
    }

    .create-design-selection .image-display img {
      width: 100%;
      max-height: 500px;
      object-fit: contain;
    }

    .create-design-selection .accordion-content {
      display: none;
      margin-top: 8px;
      font-size: 17px;
      color: #2e2e2e;
      line-height: 27px;
      font-weight: 400;
      letter-spacing: 0;
      }

  .create-design-selection .accordion-item .caption-hd.grey{
    font-size: 17px;
    color: #4b4b4b;
    margin-bottom: 0px;
    text-transform: uppercase;
  }

  .create-design-selection .accordion-item.active .caption-hd.grey {color: #2eb5c5;}


  .create-design-selection .accordion-item .caption-hd.grey .caption-sub-hd {font-size: 24px; line-height: 30px; font-weight: 500; color: #111111; text-transform: none; display: contents;}

  .create-design-selection .accordion-item.active .caption-hd.grey .caption-sub-hd {color:#35659e;}
   

 



    .create-design-selection .accordion-item.active .accordion-content {
      display: block;
    }

    .accordion-content p {margin-bottom: 0;}
    .create-design-selection .accordion .view-mobile {display: none;}
    /* .create-design-selection .accordion-item .arrow-icon {
      display: inline-block;
      width: 16px;
      height: 16px;
      margin-right: 25px;
      margin-left: 10px;
      background-image: url('../images/down-arrow.png'); 
      background-size: contain;
      background-repeat: no-repeat;
      transition: background-image 0.3s ease;
    } */
    .create-design-selection .accordion-item:nth-child(4) {border-bottom:0;}


.plus-icon-box {
  position: absolute;
    bottom: 30px;
    right: 90px;
    display: block;
}

.plus-icon-box img {width: 30px !important; height: 30px; opacity: 0.8; cursor: pointer; filter: drop-shadow(white 0px 0px 4px);}

.plus-icon-box img:hover {opacity: 1;}

.item.slider-img-2 .plus-icon-box {right: 20px; bottom: 21px;}

/* Container for the flip effect */
.flip-card {
    background-color: transparent;
    width: 350px; /* Adjust based on your image size */
    height: 260px; /* Adjust based on your image size */
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    display: inline-block;
    margin: 5px;
    cursor: pointer;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}

/* Style the front side */
.flip-card-front img, .flip-card-back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

/* Style the back side */
.flip-card-back {
    transform: rotateY(180deg);
}

.flip-card.is-flipped .flip-card-inner {
    transform: rotateY(180deg);
}

h1.headline-selection, .headline-selection {color: #111111; text-transform: uppercase; text-align: center; font-size: 33px; padding-top: 50px; font-weight: 600;}
.headline-selection br {display: none;}
.subheading-text {font-size: 19px; color: #2e2e2e; font-weight: 400; text-align: center; }
.subheading-text br {display: none;}
.show-pool-selection {padding-top: 50px;}
.show-pool-selection img {width: 100%; padding-bottom: 50px;}

.headline-selection .logo-poolpix {height: 27px; margin-bottom: 5px;}
.subheading-text.text-left {text-align: left; display: block;}

/* The white card container */
.main-card {
  background: #ffffff;
  border-radius: 33px;
  padding: 40px;
  max-width: 1200px;
  margin: 40px auto;
  border: 1px solid #e8e8e8;
}

/* The flex wrapper that creates the side-by-side layout */
.content-wrapper {
  display: flex;
  align-items: center; /* Vertically centers the text against the image */
  gap: 50px;           /* Creates space between text and image */
}

/* Forces the text and image columns to take up 50% width each */
.text-column, 
.image-column {
  flex: 1; 
}

.text-column.first-box {order: 1;}
.image-column.first-box {order: 2;}


.image-column img {
  width: 100%;
  height: auto;
  display: block;
}

.content-wrapper .subtitle {font-size: 17px; color: #2eb5c5; margin-bottom: 10px; text-transform: uppercase; }
.content-wrapper h1 {font-size: 24px; line-height: 30px; font-weight: 500; color: #111111;}
.content-wrapper .description {font-size: 17px; color: #2e2e2e; line-height: 27px; font-weight: 400;}

.life-materials-selection {background: #f8f9fd; padding-bottom: 10px;}
.m-b-0 {margin-bottom: 0;} 
.p-l-0 {padding-left: 0;}
.p-b-0 {padding-bottom: 0;}


.work-win-selection {background: #f8f9fd;}

.carousel-wrapper.bottom-scroll-box {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 0px 0px 30px;
  margin-bottom: 0px;
  /* background: #f8f9fd;  */
}

.bottom-scroll-box .scroll-container {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 15px;
  padding: 10px;
  scroll-snap-type: x mandatory;
  padding: 50px 0px 70px;
}

.bottom-scroll-box .scroll-container::-webkit-scrollbar {
  display: none;
}




.bottom-scroll-box .item {
  flex: 0 0 auto;
  width: 370px;
  height: 570px;
  margin: 0 10px;
  background-size: cover;
  background-position: center;
  border-radius: 33px;
  position: relative;
  color: #111111;
  padding: 20px;
  box-sizing: border-box;
  cursor: pointer;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  /* background: linear-gradient(to top, #1bdbe2, #189b8e); */
  /* background: linear-gradient(to top, #db5043, #dd4c3e); */
  /* background: linear-gradient(to top, #d17c47, #c06125); */
  /* box-shadow: 0px 1px 6px 1px #afb0b1; */
  transition: all 0.4s ease;
  
}

.bottom-scroll-box .item:hover {
    transform: scale(1.02);
    /* box-shadow: 0 20px 40px rgba(0,0,0,0.3); */
}


.bottom-scroll-box .item img{width: 100%; bottom: 0; position: absolute; right:0;}
.bottom-scroll-box .item.slider-img-1 img {width: 85%; left: 35px;}
.bottom-scroll-box .item.slider-img-1.gray-color img {left: 15px; width: 95%;}
.bottom-scroll-box .item.slider-img-1.gray-color {background: #ffffff;}
.bottom-scroll-box .item.slider-img-2 { width: 530px; height: 570px; background: #ffffff; overflow: hidden;}
.bottom-scroll-box .item.slider-img-2 img {width: 670px; bottom: 20px; right: -150px;} 
/* .item.slider-img-2 img {padding: 0px 10px;} 
.item.slider-img-2 .plus-icon-box img {right: 10px; bottom: 10px;}
.item.slider-img-3  {background: #f5f5f7;} */


/* Thumbnail Container */

.video-container {
  position: relative;
  width: 100%;
  max-width: 1000px;
  cursor: pointer;
  border-radius: 33px 33px 0px 0px;
  overflow: hidden;
  margin: 20px auto 0px;
}

.thumbnail {
  width: 100%;
  display: block;
  transition: transform 0.3s ease;
}

.video-container:hover .thumbnail {
  transform: scale(1.05);
}

/* Play Icon Styling */
.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
}

.video-container:hover .play-button {
  background: #ff0000;
}

.play-icon {
  width: 0; 
  height: 0; 
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 20px solid white;
  margin-left: 5px;
}

/* Modal Styling */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
  position: relative;
  margin: 5% auto;
  width: 90%;
  max-width: 800px;
  background: rgb(255 255 255 / 70%);
}

.close-btn {
  position: absolute;
  top: 0px;
  right:10px;
  color:#111;
  font-size: 45px;
  font-weight: 300;
  cursor: pointer;
}


#bookdemo .modal-content  {background: #fff; max-width:none;}

#bookdemo .modal-content .form-text-label {text-align: left; display: block; margin-bottom: 15px; font-size: 14px; color: #111111; font-weight: 500;width: 98%;}

#bookdemo input::placeholder {color: #999;}

#bookdemo .form-subtext {color:#4b4b4b; text-align: left; font-size: 14px; margin-top: 30px;}

.demo-img img  {width: 90%;}
.width-50 {width: 48% !important; display: inline-block !important; margin-right: 5px;}

.form-right-side {text-align: left;}

/* Responsive 16:9 Video Wrapper */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Container for the text-only accordion */
#text-accordion {
  width: 100vw;
  min-height: auto;
}

#text-accordion .accordion-item {
  cursor: pointer;
  border-bottom: 1px solid #ddd;
  transition: all 0.4s ease; /* Smooth transition */
}

/* When the item is active, it expands */
#text-accordion .accordion-item.active {
  background-color: #f9f9f9;
  padding: 40px; /* Give it more room */
}

/* Hide content by default, show when active */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.accordion-item.active .accordion-content {
  max-height: 1000px; /* Large enough to fit text */
}


   /* 1. Hide content with height 0 */
#top-accodion .accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); /* Smooth slide */
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

/* 2. When active, expand to a large enough height */
#top-accodion .accordion-item.active .accordion-content {
  max-height: 1000px; /* High enough to fit your text + image */
  opacity: 1;
  padding-bottom: 20px;
}

/* 3. Smooth rotate for arrow */
/* .arrow-icon {
  transition: transform 0.3s ease;
} */
/* .accordion-item.active .arrow-icon {
  transform: rotate(180deg);
} */





.video-selection {background: linear-gradient(to top, #edeff9, #ffffff);}

#text-accordion .caption-sub-hd {font-size: 17px;line-height: 27px; font-weight: 600;}


.site-footer {
  background-color: #f5f6f7;
  padding: 20px 0;
  border-top: 1px solid #e0e0e0;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between; /* Pushes logo left, copyright right */
  align-items: center;
  padding: 0px 2%;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 12px; /* Space between the logo image and the text */
}

.logo-image {
  height: 32px;  /* Adjust size as needed */
  width: auto;
}

.footer-left, 
.footer-middle, 
.footer-right {
    flex: 1;
}

.footer-middle p, .footer-right p{margin-bottom: 0; font-size: 14px;}

.footer-middle {
    text-align: center;
}

.footer-right {
    text-align: right;
}

.footer-right br {display: none;}
.copyright {
  font-size: 14px;
  color: #333;
  margin: 0;
}



.device-container {
  width: 100%;
  max-width: 1000px; /* Adjust to your liking */
  margin: 50px auto 0px;
  display: flex;
  justify-content: center;
}

.device-wrapper {
  position: relative;
  width: 100%;
}

/* The Frame image sits on top */
.device-frame {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 10; /* Keeps frame on top of video */
  pointer-events: none; /* Allows clicking through to video if needed */
}

/* The Video Container sits BEHIND the frame screen area */
/* 1. The Container - Now with relative positioning for the overlay */
.remodel-video-container {
    position: absolute;
    top: 5.6%;
    left: 14%;
    width: 81.3%;
    height: 71%;
    overflow: hidden;
    background-color: #000;
    z-index: 1;
}

/* 2. The White Flash Overlay */
.remodel-video-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white; /* Pure white flash */
    opacity: 0;               /* Hidden by default */
    z-index: 20;              /* Stays above images/video/labels */
    pointer-events: none;     /* Allows clicks to pass through */
}

/* 3. The Flash Animation Trigger */
.flash-active::after {
    animation: whiteFlash 0.3s forwards;
}

@keyframes whiteFlash {
    0% { opacity: 0; }
    50% { opacity: 1; }  /* Peak brightness */
    100% { opacity: 0; } /* Fade back to clear */
}

/* 4. Layout & Media Elements */
.fade-img, 
video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease, opacity 0.5s ease-in-out;
}

#img1 { z-index: 3; }
#img2 { z-index: 2; }
video { z-index: 1; }

.label-tag {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 4px 10px;
    font-family: 'Arial', sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 3px;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}


.show-pool-selection.mobile-view img {display: none;}
.mobile-view , .image-column img.mobile-view {display: none;}
.button-wrapper {text-align: center; padding-top: 20px; display: flex; justify-content: center; gap: 20px;}

/* .button-wrapper .btn-white, .top-button-wrapper .btn-white {box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);} */

.video-selection .button-wrapper .btn-white, .video-selection .button-wrapper .btn-gradient, 
.popup-btn-wrapper .btn-white, .popup-btn-wrapper .btn-gradient {min-width: 200px;}

.top-button-wrapper .btn-gradient, .top-button-wrapper .btn-white {min-width: 140px;}

.top-button-wrapper {display: flex; justify-content: center; gap: 10px;}

/* .modal-body {padding-top: 0px; padding-bottom: 0px;} */
.modal-header { padding: 15px;background: #eee;}
.modal-header .btn-close {padding-right: 10px; margin-top: -10px; right: -6px !important; font-size: 13px; color: #111111;}
.lead {padding-top: 0px;}
.modal-footer {border-top: 0;  padding-top: 0px; padding-bottom: 15px;}

.modal-footer h2 {
    font-weight: 400;
    font-size: 1.8rem;
    margin-bottom: 20px;
    width: 100%;
    text-align: center;
    color: #fff;
}

.modal-footer h2 span {
    color: #3b82f6;
    font-weight: bold;
}

/* Phone Input Form */
.phone-input-group {
    background: white;
    border-radius: 30px;
    display: inline-flex;
    padding: 5px;
    width: 100%;
    max-width: 460px;
    overflow: hidden;
    margin-bottom: 30px;
}

.phone-input-group input {
    border: none;
    padding: 10px 20px;
    flex-grow: 1;
    outline: none;
    font-size: 0.9rem;
}

.phone-input-group button {
    background: #3e6d9c;
    color: white;
    border: none;
    padding: 10px 30px;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 400;
    font-size: 15px;
}

.benefits h3 {
    letter-spacing: 3px;
    font-size: 1.5rem;
    opacity: 0.8;
}



/* The Individual Card */
.card-side {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  
  /* ADJUST THESE TWO FOR SIZE */
  max-width: 650px;    /* Reduced from 800px to make it smaller */
  height: 380px;       /* Set a fixed height for a cleaner look */
  
  background: #fff;
  border-radius: 33px;
  overflow: hidden;
  border: 1px solid #eef2f6;
  box-shadow: 0 2px 3px rgba(0,0,0,0.06);
  flex-shrink: 0;      /* Prevents card from crushing in the flex row */
}

/* Force the 50/50 Split */
.text-side {
  flex: 0 0 50%;       /* Exactly 50% */
  padding: 30px;       /* Reduced padding for smaller card */
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

.image-side {
  flex: 0 0 50%;       /* Exactly 50% */
  overflow: hidden;
  border-radius: 0px 20px 20px 0px;
}

.profile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* Ensures the person stays centered */
  display: block;
}


.testimonal-selection .scroll-container {
  display: flex;
  overflow-x: auto;
  gap: 24px;
  padding: 40px 1% 70px;   /* Adds breathing room on sides */
  scroll-snap-type: x mandatory;
  align-items: center; /* Centers cards vertically in the section */
}

.card-side {
  scroll-snap-align: center;
  padding: 15px;
}

.quote-text {font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    padding-top: 10px; text-align: center;}

.author {
  font-size: 15px;
    color: #111;
    padding-top: 10px;
    margin-bottom: 0;
    text-align: center;
}

.author-sub {
  font-size: 13px;
    padding-top: 0;
    color: #808080; text-align: center;
}

.text-side .client-logo {width: 80%;text-align: center;margin: 0 auto;}

.bottom-logo {width: 60%;text-align: center;margin: 40px auto 0px;}
.btn-gradient.m-t-40 {margin-top: 40px;}


/* Play button CSS */
.video-container-mobile {
    position: relative;
}

.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 60px;
    color: white;
    background: rgba(0, 0, 0, 0.6);
    width: 80px;
    height: 80px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: opacity 0.3s ease;
}

.play-btn.hidden {
    opacity: 0;
    pointer-events: none;
}

.login-txt {
    font-size: 24px;
    font-weight: 500;
    color: #111111;
    margin-bottom: 20px;
}

.project-hd {
    font-size: 17px;
    font-weight: 400;
    line-height: 27px;
    color: #1d1d1f;
    margin-bottom: 20px;
}

.light-gray-txt {
    color: #6e6e73;
}

.caption-top br {display: none;}

.model-copy-right br {display: none;}
.logo-height {height: 17px; padding-top: 0px;}
.text-logo {height: 15px; margin-bottom: 3px;}
.item .caption .caption-hd .text-logo {position: initial; width: auto;}
.testimonal-poolpix-logo { height: 16px; margin-bottom: 4px;}

.faq-selection {padding-top: 50px;}
.faq-sub-hd {font-size: 24px; padding-right: 25px; font-weight: 500; color: #111111;}
.faq-sub-text{font-size: 17px; color: #2e2e2e; line-height: 27px; font-weight: 400; margin-bottom: 0px;}

.faq-container { margin: 50px auto; }

.section-body, .question-body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1), opacity 0.3s ease;
}

/* Expanded State */
.faq-section.active > .section-body,
.faq-question.active > .question-body {
    max-height: 2000px;
    opacity: 1;
    transition: max-height 0.8s cubic-bezier(1, 0, 1, 0), opacity 0.5s ease;
}

/* --- HEADERS --- */
.faq-section {border-bottom: 1px solid #ddd;}

.section-header, .question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 20px;
    transition: background-color 0.3s ease;
}

/* Distinct styling for the sub-questions */
.faq-question {
    margin: 10px 0;
    border-radius: 8px;
    background-color: #f9f9f9; /* Light grey background for child items */
}

.question-header:hover { background-color: #f1f3f5; }

.question-title { color: #111111; font-size: 17px; line-height: 27px; font-weight: 500; }
.question-body p { font-size: 17px;color: #2e2e2e;line-height: 27px; font-weight: 400;letter-spacing: 0; padding: 0px 20px;}

/* --- PLUS ICON --- */
.plus-icon {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.plus-icon::before, .plus-icon::after {
    content: '';
    position: absolute;
    background-color: #333;
    transition: all 0.3s ease;
}
.plus-icon::before { width: 100%; height: 2px; top: 50%; left: 0; transform: translateY(-50%); }
.plus-icon::after { width: 2px; height: 100%; left: 50%; top: 0; transform: translateX(-50%); }

/* Small variant for sub-questions */
.plus-icon.small { width: 14px; height: 14px; }

/* Animate to Minus */
.active > .section-header .plus-icon::after,
.active > .question-header .plus-icon::after {
    transform: translateX(-50%) rotate(90deg);
    opacity: 0;
}

.faq-section:last-child {border-bottom: 0;}

/* Container that scales based on width */
        .phone-wrapper {
            position: relative;
            width: 300px;
           margin: 50px auto;
        }

        /* The iPhone Frame Image */
        .phone-frame {
            display: block;
            width: 100%;
            height: auto;
            position: relative;
            z-index: 2;
            pointer-events: none; /* Allows clicks to pass through to video */
        }

        /* The Video Container - Positioned exactly over the screen area */
        .video-container-mobile {
            position: absolute;
            top: 1.8%;    /* Fine-tune these % based on your specific PNG */
            left: 4.5%;
            right: 5.5%;
            bottom: 1.8%;
            z-index: 1;
            background: #000;
            border-radius: 35px; /* Matches iPhone corner radius */
            overflow: hidden;
             max-width: 100%;
        }

        video {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Ensures video fills the screen area */
            cursor: pointer;
        }

        /* --- CONTAINER & TRANSITION LOGIC --- */


/* Container that scales based on width */
        .laptop-wrapper {
            position: relative;
            width: 1000px;
           margin: 50px auto;
        }

        /* The iPhone Frame Image */
        .deskto-frame {
            display: block;
            width: 100%;
            height: auto;
            position: relative;
            z-index: 2;
            pointer-events: none; /* Allows clicks to pass through to video */
        }

        /* The Video Container - Positioned exactly over the screen area */
        .video-container-desktop {
            position: absolute;
            top: 4.8%;
            left: 4.5%;
            right: 5.5%;
            bottom: 4.8%;
            z-index: 1;
            background: #000;
            border-radius: 35px; /* Matches iPhone corner radius */
            overflow: hidden;
             max-width: 100%;
        }


        /* --- CONTAINER & TRANSITION LOGIC --- */


/* Maruti dummy style */
.is-invalid {
  border: 1px solid #dc3545;
}

.error-msg {
  font-size: 12px;
}

.success-msg {
  color: #28a745;
  font-size: 14px;
}


@media (min-width:2000px) {
.carousel-wrapper.bottom-scroll-box .arrow-buttons {display: none;}
}


@media (min-width:1600px) {
  .carousel-wrapper.modern-ai .arrow-buttons {display: none;}
}


@media (max-width:1189px) {
  .container-fluid, .container-fluid-left, .container-fluid-right {
    padding-left: 30px;
    padding-right: 30px
  }
}

@media screen and (min-width:1760px) {
  .container-fluid, .container-fluid-left, .container-fluid-right {
    padding-right: calc(50% - 820px);
    padding-left: calc(50% - 820px)
  }
}




@media (max-width:1160px) {

  .navbar-brand img {height: 40px;}
  .navbar-nav .nav-link {font-size: 16px;}
}



    

 @media (max-width: 992px) {
    .navbar-nav .nav-item {margin-bottom: 10px; margin-left: 10px;}
    .navbar-nav .btn-outline-light {width: 100%; margin-top: 10px;}
    .custom-navbar {width:95%;}
    .navbar-toggler, .navbar-toggler:focus {background: linear-gradient(90deg, #2dc7b5, #5d4de0); border: 0; box-shadow: none;}
    .btn-gradient, .btn-white {padding: 8px 15px !important; font-size: 15px;}
    .hero { padding-top: 70px;}
    .flip-card {width: 300px; height: 245px;}
    .overlay h1 {padding: 0px;}
    .overlay {top:60%;}
    .feature-text {order: 2; }
    .feature-image {
        order: 1; /* On desktop, image comes second */
        margin-bottom: 0;
        margin-bottom: 24px; /* Add space between text and image */}
    .feature-card.full-box .feature-image {margin-bottom: 24px;}
    .feature-card.full-box {    flex-direction: column;}
    .feature-card.full-box .feature-text {width: 100%;}
    .navbar-brand img {height: 40px;}
    .navbar-collapse .navbar-nav .nav-link:hover{color: #00486e !important;}
    .main-card {padding: 30px;}
    .top-button-wrapper {justify-content: left; flex-direction: column; width: auto; display: inline-flex !important;}
    .gray-box-model  {display: flex; flex-direction: column; align-items: center; padding: 30px 30px 0px 30px; margin-top: 20px; background: #f5f5f5; border-radius: 18px; width: 100%; box-sizing: border-box; gap: 1rem; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; padding-bottom: 0;}
    .left-text-50, .right-img-50 {width: 100%; margin: 0 auto;  text-align: center;}
    .right-img-50 {order: 2;}
    .right-img-50 img {width: 90%;}
    .login-txt { font-size: 18px; font-weight: 500; margin-bottom: 20px;}
    .model-copy-right br {display: block;}
    html {scroll-padding-top: 67px; /* Replace 80px with the height of your menu bar */}
    .demo-img, .form-right-side {width: 100%;}
    .width-50 {width: 100% !important; margin-right: 0;}
 }






@media (max-width: 768px) {
  .navbar-brand img {height: 35px;}
  .overlay {top: 59%;}
  .overlay h1 {font-size: 28px;font-weight: 600; line-height: 38px;}
  .overlay h2 { font-size: 20px;}
  .feature-text h4, .item .caption, .caption-sub-hd, .content-wrapper h1, .faq-sub-hd  {font-size: 20px; line-height: 30px;}
  .feature-text p {font-size: 15px;}
  .feature-card {padding: 18px;}
  .create-design-selection {flex-direction: column; padding: 20px;}
  .create-design-selection .accordion {width: 100%;}
  .create-design-selection .image-display {display: none;}
  .create-design-selection .accordion .view-mobile {display: block; width: 100%; padding-top: 15px; margin: 0 auto;}
  .create-design-selection .accordion-item h3 {margin: 0; font-size: 26px;}
  .content-wrapper {flex-direction: column; text-align: center;}
  .text-column.first-box {order: 2;}
  .image-column.first-box {order: 1;}
  h1.headline-selection, .headline-selection {font-size: 26px; line-height: 36px; padding-bottom: 20px;}
  .headline-selection br {display: block;}
  .subheading-text {font-size: 16px; padding-right: 30px;}
  .caption-hd {font-size: 15px; line-height: 25px;}
  .flip-card {width: 250px; height: 200px;}
  /* .overlay .flex-column {flex-direction:row !important;} */
  .btn-gradient, .btn-white {padding: 8px 17px !important;font-size: 13px;}
  .navbar {padding-right: 10px;}
  .subheading-text br {display: block;}
  #text-accordion {width: auto;}
  #text-accordion .accordion-item {position: relative;}
  .create-design-selection .caption-hd.grey {padding-right: 20px;}
  .create-design-selection .accordion-item .arrow-icon {position: absolute; top: 28px; right: 0;}
  #text-accordion .accordion-item.active {padding: 20px;}
  .content-wrapper .description, .content-wrapper .subtitle, .faq-sub-text {font-size: 16px; line-height: 26px;}
  .bottom-scroll-box .item.slider-img-1, .bottom-scroll-box .item.slider-img-2{width: 300px; height: 500px;}
  .bottom-scroll-box .item.slider-img-2 img {width: 540px; left: -155px;}
  .show-pool-selection.mobile-view img {display: block;}
  .show-pool-selection {padding-top: 15px;}
  .show-pool-selection img, .desktop-view, .image-column img.desktop-view {display: none;}
  .device-container {margin: 20px auto 0px; margin-left: -20px;}
  /* .image-column img {width: 120%; left: -29px; position: relative;} */
  .item.slider-img-2 img {width: 455px; left: -6px; height: auto;}
  .item.slider-img-2.see-magic img {width: 370px; left: -50px;}
  .show-pool-selection.mobile-view {display: block;}
  .ai-features-wrapper .justify-content-center .col-12 {padding-left: 0; padding-right: 0;}
  .mobile-view, .image-column img.mobile-view {display: block;}
  .popup-inner {width: 100%; padding: 20px;}
  .popup-inner .header { font-size: 32px;}
  .popup-inner .header br {display: none;}
  .popup-inner .sub-header {font-size: 18px;}
   .caption-top br {display: block;}
  .footer-right br {display: none;}
  .footer-container {flex-direction: column; gap: 15px; text-align: center;}
  .project-hd {    font-size: 15px; line-height: 24px; font-family: "Rubik", sans-serif; font-weight: 400; margin-bottom: 20px;}
  .logo-height {height: 11px;}
  .gray-box-model {padding: 15px 10px 0px;}
  .text-logo {height: 12px;}
  .headline-selection .logo-poolpix {height: 24px;}
  .m-t-10 {padding-top: 10px; display: inline-block;}
  #text-accordion .caption-sub-hd { padding-right: 30px; display: inline-block;}
  .create-design-selection .accordion-item {position: relative;}
  html {scroll-padding-top: 62px; /* Replace 80px with the height of your menu bar */}
  .section-header, .question-header {padding: 10px;}
  .faq-sub-text {padding-right: 20px;}
  .faq-container {  margin: 30px auto 50px;}
  .create-design-selection .accordion-item .caption-hd.grey .caption-sub-hd {font-size: 20px; line-height: 30px;}

}


@media (max-width: 734px) {
  .item, .item.slider-img-2, .scroll-container.top-slider-box .item.slider-img-1, .scroll-container.top-slider-box .item.slider-img-2,
  .scroll-container.top-slider-box .item.slider-img-3, .scroll-container.top-slider-box .item.slider-img-4,
  .scroll-container.top-slider-box .item.slider-img-5{width: 300px; height: 480px;}
  .caption-top {font-size: 20px;}
  /* .caption-hd {font-size: 20px; line-height: 26px;} */

  .caption-hd br {display: none;}
  .accordion-item .caption-hd br {display: block;}
  /* h1.headline-selection, .headline-selection {font-size: 38px;line-height: 42px; padding-top: 0;} */
  }

@media (max-width: 690px) {
    .card-side {
        display: flex;
        flex-direction: column;
        height: 500px; /* Your requested height */
        padding: 0;
        overflow: hidden;
        width: 330px;
    }

    /* Top Section: Holds Logo and Text */
    .text-side {
        flex: 0 0 auto; /* Only takes the space it needs */
        padding: 20px 15px 10px 15px ;
        text-align: center;
        width: 100%;
    }

    .text-side .logo {
        max-width: 120px !important; /* Keeps logo small to save space */
        height: auto !important;
        margin-bottom: 8px !important;
    }

    .quote-text {
        font-size: 17px;
        margin-bottom: 5px;
        line-height: 27px;
    }

    .testimonal-poolpix-logo {
    height: 15px;
    margin-bottom: 3px;
    }

    /* Bottom Section: The Photo */
    .image-side {
        flex: 1 1 auto; /* Grows to fill the remaining 380px */
        width: 100% ;
        margin: 0;
        overflow: hidden;
        border-radius: 0px 0px 20px 20px;
    }



    /* Hide smaller sub-text if it forces a scrollbar */
    .author-sub {
        font-size: 0.8rem !important;
        opacity: 0.8;
    }

    .btn-gradient.m-t-40 {margin-top: 25px;}
    .text-side .client-logo {width: 50%;}
    .bottom-logo {margin: 18px auto 0px;}
    .client-logo.width-40 {width: 42%;}
    .client-logo.width-70{width: 70%; margin-bottom: 12px;}

}

@media (max-width: 580px) {
     .overlay {top: 55%;width: 70%; padding: 20px;}
     .overlay h1 {padding: 0px; font-size: 26px;}
    .video-selection .button-wrapper {display: grid;}
    #popup {padding: 15px;}
    
      
}

@media (max-width: 480px) {
 .gray-box-model img {max-width: 240px;height: auto;}
 .gray-box-model img.logo-height {height: 11px;}


}

@media (max-width: 380px) {
    .overlay { width: 80%;}
    .overlay h1 {padding: 0;}

}