body {
    font-family: 'Comfortaa', cursive !important;
    background-image: url('../images/background.png');
    background-size: cover;
   /*background-color:#051216;*/
    background-position: top;
    color: white;
    margin: 0;
    padding: 0;
}

.main-header {
    background-image: url('../images/background.png');
    background-size: cover;
    background-position: top;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 10px 20px;
}

.main-header .logo img {
    max-height: 50px;
}

.comparison-table-section .mobile-image {
    display: none;
}

.section {
    padding: 30px 15px;
    border-bottom: 1px solid white;
}

.section h4 {
    font-size: calc(1.275rem + .3vw);
    line-height: 2.5rem;
}

@media (min-width: 768px) {
    .section {
        padding: 40px 80px;
    }
}

.hero-section {
    position: relative;
    height: 900px;
    overflow: hidden;
}

.hero-section video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.hero-section .hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    color: white;
    padding: 20px;
    background: rgba(0, 0, 0, 0.2);
    padding-top: 50px;
    padding-left: 70px;
    padding-right: 70px;
}

.hero-section .hero-content h1 {
    font-size: 1.4rem;
    margin-bottom: 20px;
}

.hero-section .hero-content p {
    font-size: 1rem;
    margin-bottom: 30px;
}

.hero-section .hero-content .btn-primary {
    background-color: #051216;
    border-color: #051216;
    padding: 11px 20px;
    border-radius: 13px;
}

.hero-section .desktop-video {
    display: block;
}

.hero-section .mobile-video {
    display: none;
}

@media (max-width: 768px) {
    .hero-section .hero-content {
        padding-top: 30px;
        padding-left: 30px;
        padding-right: 30px;
    }

    .hero-section .hero-content h1 {
        font-size: 1rem;
    }

    .hero-section .hero-content p {
        font-size: 0.6rem;
    }

    .hero-section .hero-content .btn-primary {
        width: 150px;
        font-size: 0.9rem;
    }

    .hero-section .desktop-video {
        display: none;
    }

    .hero-section .mobile-video {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.vimeo-video{
    width: 1000px;
    padding: 40% 0 0 0;
    position:relative;
    margin: 0 auto;
}

.srqi-section h3 {
    font-size: 1.5rem;
}

 /* Scoped styles under .testimonial-wrapper to avoid conflicts */
 .testimonial-wrapper {
    min-height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    line-height: 1.2;
    font-weight: 300;
    box-sizing: border-box;
}

.testimonial-wrapper p {
    line-height: 1.6;
    color: white; /* Ensuring all paragraph text is white */
    font-size: 14px;
}

.testimonial-wrapper h4 {
    color: white; /* Making sure headings are also white */
    font-size: 18px;
}

.testimonial-wrapper img {
    width: 100%;
    height: auto;
}

.testimonial-wrapper .button {
    position: relative;
    display: table;
    padding: 0.75em 3em;
    background: #000;
    color: #fff;
    text-decoration: none;
    margin-top: 1.5em;
    text-transform: uppercase;
}

.testimonial-wrapper .button:hover {
    background: #2f2f2f;
}

.testimonial-wrapper .wrapper {
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    color: #fff;
    padding: 1.5em;
}

.testimonial-wrapper header {
    margin: 0;
    padding: 0;
}

.testimonial-wrapper .swiper {
    padding: 1.5em;
}

.testimonial-wrapper .swiper .content-wrapper {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: ".";
    width: 100%;
    justify-items: center;
    align-items: center;
}

.testimonial-wrapper .swiper .content-wrapper .content {
    padding: 1.5em 0.5em;
    text-align: center;
    display: grid;
    justify-items: center;
    align-items: center;
    margin: 0 auto;
    color: #fff; /* Text color set to white for content */
}

.testimonial-wrapper .swiper .content-wrapper .content .swiper-avatar {
    width: 100%;
    max-width: 80px;
    height: auto;
}



.testimonial-wrapper .swiper .swiper-slide {
    margin: 0;
    height: auto;
    width: 100%;
    padding: 0;
    opacity: 0.2;
    background: rgba(255, 255, 255, .3);
    border-radius: 6px;
    transition: all 0.5s ease-in-out;
}

.testimonial-wrapper .swiper .swiper-slide.swiper-slide-active {
    opacity: 1;
    transform: scale(1.1);
}

.testimonial-wrapper .swiper .swiper-nav-wrapper {
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: auto;
    padding-top: 3em;
}

.testimonial-wrapper .swiper .swiper-nav-wrapper .swiper-button-next,
.testimonial-wrapper .swiper .swiper-nav-wrapper .swiper-button-prev {
    top: 0;
    top: auto;
    left: auto;
    right: auto;
    position: relative !important;
}

.testimonial-wrapper .swiper .swiper-nav-wrapper .swiper-button-next:after,
.testimonial-wrapper .swiper .swiper-nav-wrapper .swiper-button-prev:after {
    display: none;
}

.testimonial-wrapper .swiper .swiper-nav-wrapper .swiper-button-next, .swiper .swiper-nav-wrapper .swiper-container-rtl .swiper-button-prev {
    background-image: url("data:image/svg+xml,%0A%3Csvg width='9px' height='16px' viewBox='0 0 9 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='chevron-right' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cpath d='M8.674805,7.066406 L1.924805,0.316406 C1.696288,0.105468 1.432619,0 1.133789,0 C0.834959,0 0.57129,0.105468 0.342773,0.316406 C0.114257,0.544923 0,0.808592 0,1.107422 C0,1.406251 0.114257,1.669921 0.342773,1.898438 L6.301758,7.857422 L0.342773,13.816406 C0.114257,14.044923 0,14.308592 0,14.607422 C0,14.906251 0.114257,15.169921 0.342773,15.398438 C0.465821,15.521485 0.584472,15.609375 0.69873,15.662109 C0.812989,15.714844 0.958007,15.741211 1.133789,15.741211 C1.309571,15.741211 1.454589,15.714844 1.568848,15.662109 C1.683106,15.609375 1.801757,15.521485 1.924805,15.398438 L8.674805,8.648438 C8.903321,8.419921 9.017578,8.156251 9.017578,7.857422 C9.017578,7.558592 8.903321,7.294923 8.674805,7.066406 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
    width: 20px;
    height: 20px;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
}
.testimonial-wrapper .swiper .swiper-nav-wrapper .swiper-button-prev, .swiper .swiper-nav-wrapper .swiper-container-rtl .swiper-button-next {
    background-image: url("data:image/svg+xml,%0A%3Csvg width='9px' height='16px' viewBox='0 0 9 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='chevron-right' transform='translate(4.508789, 7.870605) rotate(-180.000000) translate(-4.508789, -7.870605) translate(-0.000000, -0.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cpath d='M8.674805,7.066406 L1.924805,0.316406 C1.696288,0.105468 1.432619,0 1.133789,0 C0.834959,0 0.57129,0.105468 0.342773,0.316406 C0.114257,0.544923 0,0.808592 0,1.107422 C0,1.406251 0.114257,1.669921 0.342773,1.898438 L6.301758,7.857422 L0.342773,13.816406 C0.114257,14.044923 0,14.308592 0,14.607422 C0,14.906251 0.114257,15.169921 0.342773,15.398438 C0.465821,15.521485 0.584472,15.609375 0.69873,15.662109 C0.812989,15.714844 0.958007,15.741211 1.133789,15.741211 C1.309571,15.741211 1.454589,15.714844 1.568848,15.662109 C1.683106,15.609375 1.801757,15.521485 1.924805,15.398438 L8.674805,8.648438 C8.903321,8.419921 9.017578,8.156251 9.017578,7.857422 C9.017578,7.558592 8.903321,7.294923 8.674805,7.066406 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
    width: 20px;
    height: 20px;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
}

.testimonial-wrapper .swiper-pagination {
    margin: 0;
    padding: 0;
    width: auto;
    position: relative !important;
    display: block;
    width: auto;
}

.testimonial-wrapper .swiper-pagination .swiper-pagination-bullets {
    margin: 0;
}

.testimonial-wrapper .swiper-pagination .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0;
    background: #fff !important;
}

.testimonial-wrapper .swiper-pagination-bullet {
    background: #fff !important;
    transition: all 0.2s ease-in-out;
}

.testimonial-wrapper .swiper-pagination-bullets.swiper-pagination-horizontal {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    bottom: 0;
    top: 0;
    bottom: 0;
    width: auto;
    padding: 0 1.5em;
}

.testimonial-wrapper .swiper-pagination-bullet-active {
    transform: scale(1.5);
}

/* Custom background colors for each slide */
.cognition {
    background-color: #FBA054 !important;
}

.emotion {
    background-color: #55C7F9 !important;
}

.awareness {
    background-color: #A557F7 !important;
}

.connectivity {
    background-color: #F458AD !important;
}
.srqi-section .container{
    padding-left: 0px !important;
    padding-right: 0px !important;
}
@media (max-width: 768px) {
    .testimonial-wrapper .swiper .content-wrapper .content {
        padding: 1em 0.5em;
    }
    .testimonial-wrapper .swiper .content-wrapper .content .swiper-avatar {
        max-width: 60px;
        padding-bottom: 10px;
    }
    .testimonial-wrapper h4 {
        font-size: 15px;
        padding-bottom: 10px;
    }
    .testimonial-wrapper p {
        line-height: 1.6;
        font-size: 12px;
    }
    .vimeo-video{
        width: 750px;
        padding: 50% 0 0 0;
        position:relative;
        margin: 0 auto;
    }
    .srqi-section .row {
        flex-direction: column-reverse; /* Show image first, then paragraphs on small screens */
        gap: 20px;
    }
     .srqi-section p {
         text-align:center;
     }

    .srqi-section .col-md-4 {
        justify-content: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
    }

    .srqi-section .col-md-8 {
        flex: 0 0 100%;
        max-width: 100%;
        justify-content: center;
        display: flex;
        align-items: center;
        text-align: center;
    }

    .srqi-section .col-md-4 img {
        width: 80%;
        margin: auto;
    }
}



.tech-section {
    padding: 60px 0;
    border-bottom: 1px solid white;
}

.tech-section .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.tech-section p {
    margin-top: 15px;
    margin-bottom: 20px; /* Adds space between paragraphs */
    line-height: 1.7; /* Increases line height for readability */
}
.tech-section a.custom-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: white;
    color: black;
    font-size: 0.9rem;
    border-radius: 5px;
    text-decoration: none;
    margin-top: 10px; /* Adds space between heading and button */
    margin-bottom: 10px;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-align: center;
}
.tech-section a.custom-btn:hover {
    background-color: black;
    color: white;
    border: 1px solid black;
}
.tech-section img {
    max-width: 100%;
    height: auto;
}
.tech-section h4 {
    text-align: left;
}

@media (min-width: 1920px) {
    .tech-section img {
        max-width: 75%; /* Reduces image size on screens 1920px or wider */
    }
}

@media (max-width: 768px) {
    .tech-section .row {
        flex-direction: column-reverse; /* Show image first, then paragraphs on small screens */
        text-align: center;
    }
    
    .tech-section .col-12 {
        margin-bottom: 20px; /* Adds space between image and text on mobile */
    }
    .tech-section a.custom-btn {
        margin-top: 10px; 
        margin-left: auto;
        margin-right: auto;
    }
    .tech-section p {
        text-align: center;
    }
    .tech-section h4 {
    text-align: center;
    }
   
}


.footer {
    color: white;
    padding: 20px 0;
}

.footer .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.footer-logo img {
    max-width: 150px;
    margin-bottom: 20px;
}

.social-icons {
    margin: 10px 0;
}

.social-icons a {
    margin: 0 5px;
}

.social-icons img {
    width: 30px;
    height: auto;
}

.copy-right {
    margin-top: 20px;
    font-size: 0.75em;
}

.social-icons i,
.social-icons span,
.social-icons svg {
    color: white;
    font-size: 24px;
    margin: 0 10px;
}

.social-icons a:hover {
    color: #e0e0e0;
}

.day-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.day-row {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.day-box {
    flex: 1;
    padding: 20px;
    background-color: black;
    border: 1px solid #616161;
    border-radius: 8px;
    color: white;
    text-align: center;
}

.day-box h3 {
    margin-bottom: 20px;
}

.day-box p {
    font-size: 1em;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .day-row {
        flex-direction: column;
        align-items: center;
    }

    .day-box {
        width: 100%;
        margin-bottom: 20px;
    }
}

.testimonial-slider {
    border-bottom: 1px solid white;
    padding: 2em 2em 3em;
}

.testimonial-title {
    color: #fff;
    text-align: center;
}

.testimonial-title h2 {
    padding-left: 0.2em;
}

.card {
    margin: 0 0.5em;
    box-shadow: 2px 6px 8px 0 rgba(106, 106, 131, 0.18);
    border: none;
    height: 100%;
}

.slider-left-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.slider-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.slider-actions .carousel-control-prev,
.slider-actions .carousel-control-next {
    position: static;
    background-color: #fff;
    transform: none;
}

.carousel-control-prev,
.carousel-control-next {
    background-color: #1b3035;
    width: 3em;
    height: 3em;
    border-radius: 50%;
    top: 60%;
    transform: translateY(-50%);
}

.svg-container {
    position: relative;
    text-align: center;
    margin-top: 20px;
}

.svg-container img {
    width: 150px;
    height: auto;
    cursor: pointer;
    display: inline-block;
}

@media (min-width: 768px) {
    .carousel-inner {
        padding: 1em;
    }

    .carousel-control-prev,
    .carousel-control-next {
        opacity: 1;
        position: absolute;
        left: 1em;
        top: 90%;
        transform: translateY(-50%);
    }

    .carousel-control-next {
        left: 5em;
    }

    .slider-left-wrapper > .svg-container {
        display: block;
    }

    .svg-container.for-mobile {
        display: none;
    }
}

@media (min-width: 576px) {
    .carousel-item {
        margin-right: 0;
        flex: 0 0 50%;
        display: block;
    }

    .carousel-inner {
        display: flex;
    }
}

@media (max-width: 576px) {
    .slider-left-wrapper > .svg-container {
        display: none;
    }

    .svg-container.for-mobile {
        display: block;
    }

    .slider-actions .carousel-control-next,
    .slider-actions .carousel-control-prev {
        position: absolute;
        top: 47.5%;
    }

    .testimonial-slider {
        padding: 2em 1em 3em;
    }

    .carousel-inner {
        padding-inline: 12%;
    }

    .carousel-item .card-body {
        min-height: 120px;
    }

    .testimonial-title {
        text-align: center;
    }

    .carousel-item .card-body .card-title {
        font-size: 1rem;
    }

    .carousel-item .card-body .card-text {
        font-size: 0.6rem;
    }
}

/* Hide mobile image on larger screens (desktop) */
.mobile-image {
    display: none;
}

/* Show desktop image on larger screens */
.desktop-image {
    display: block;
}
@media (max-width: 767px) {
    /* Hide desktop image on smaller screens (mobile) */
    .desktop-image {
        display: none;
    }

    /* Show mobile image */
    .mobile-image {
        display: block !important;
    }
}


/* For screens smaller than 768px (mobile) */
@media (max-width: 767px) {
    /* Center the container content */
    .main-header .container {
        justify-content: center; /* Centers flex items horizontally */
    }

    /* Center the logo on mobile devices */
    .main-header .logo {
        text-align: center;
        margin: 0 auto; /* Centers the logo horizontally */
    }
}



@media only screen and (max-width: 768px) {
    body {
      background-image: none;
      background-color: #1B3035;
    }
  }
  

.benefits-section h4 {
    font-size: calc(1.275rem + .3vw);
    margin-bottom: 1.5rem;
}

.benefits-section .benefit-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.benefits-section .benefit-item img {
    max-width: 160px;
    margin-bottom: 0.5rem;
}

.benefits-section .benefit-item p {
    font-size: 1.2rem;
    margin: 0;
}

@media (max-width: 767.98px) {
  /* BENEFITS SECTION: 1-column, icon left/text right */
  .benefits-section .row {
    display: block;       /* stack items */
  }
  .benefits-section .col {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    padding: .5rem 1rem;
  }
  .benefits-section .benefit-item {
    flex-direction: row;
    text-align: left;
  }
  .benefits-section .benefit-item img {
    margin: 0 .75rem 0 0;
    max-width: 40px;
  }
  .benefits-section .benefit-item p {
    margin: 0;
  }

}

/* ---------------------------- */
/*  Image + Bullets Section CSS */
/* ---------------------------- */

/* Heading style (both mobile & desktop) */
.info-bullets-heading {
  font-size: calc(1.275rem + .3vw);
  font-weight: 500;
  margin-bottom: 1rem;
}

/* Container: stack by default */
.info-bullets-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Image adjustments */
.info-bullets-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin-bottom: 1rem; /* space below image on mobile */
}

/* Text column */
.info-bullets-text p {
  margin-bottom: 0.75rem;
  line-height: 1.6;
}
.info-bullets-subheading {
  font-size: calc(1.275rem + .3vw);
  line-height: 1.6;
  margin-bottom: 0.75rem;
}
.info-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:14px;
  background:#16282D;   /* brand */
  color:#fff;
}
.info-chip:hover{ opacity:.95; }
.info-tooltip{
  background:transparent;
  width:auto;
  height:auto;
  padding:0;
  position: relative;   /* ✅ required for correct absolute positioning */
}
.info-tooltip:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
/* Tooltip base (hidden by default) */
.info-tooltip .tooltip-content{
  position:absolute;
  left:50%;
  /* vertical position will be set by .pos-top / .pos-bottom */
  transform:translateX(-50%);
  min-width: 280px;            /* prevent 'too thin' */
  max-width: min(560px, 92vw); /* wide but responsive */
  background:#040F12;
  color:#fff;
  padding:14px 16px;
  border-radius:10px;
  font-size:14px;
  line-height:1.6;
  box-shadow:0 10px 28px rgba(0,0,0,.28);
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease, visibility .18s ease;
  z-index:1000;
  text-align:left;
  white-space:normal;          /* wrap lines properly */
  word-wrap: break-word;
}
.info-tooltip .tooltip-content::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: rgba(5, 22, 32, 0.95) transparent transparent transparent;
}
/* Appear states */
.info-tooltip:hover .tooltip-content,
.info-tooltip:focus .tooltip-content,
.info-tooltip.is-open .tooltip-content{
  opacity:1;
  visibility:visible;
}

.info-tooltip strong {
  display: block;
  margin-top: 0.75rem;
}
.info-tooltip strong:first-child {
  margin-top: 0;
}
/* Position variants set by JS */
.info-tooltip .tooltip-content.pos-top{
  bottom: calc(100% + 12px);
}
.info-tooltip .tooltip-content.pos-bottom{
  top: calc(100% + 12px);
}
/* Carets for both positions */
.info-tooltip .tooltip-content::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  border:8px solid transparent;
}
.info-tooltip .tooltip-content.pos-top::after{
  top:100%;
  border-top-color:#040F12;    /* inverted because caret points up from below box edge */
  border-bottom-color:transparent;
}
.info-tooltip .tooltip-content.pos-bottom::after{
  bottom:100%;
  border-bottom-color:#040F12;
  border-top-color:transparent;
}
.tooltip-paragraph {
  display: block;
  margin-top: 0.75rem;
}
.tooltip-paragraph:first-child {
  margin-top: 0;
}
.info-bullets-text ul {
  margin: 0;
  padding: 0;
  margin-top: 0.5rem;
  font-size: 14px;
}
.info-bullets-text ul li {
  margin-bottom: 0.5rem;
}

/* Hide desktop‐only heading by default */
.info-bullets-heading--desktop {
  display: none;
}

/* Mobile (<768px):
   • Show mobile heading
   • Then image, then text */
@media (max-width: 767.98px) {
    .info-bullets-heading--mobile {
        display: block;
        text-align: left;
    }
    .info-bullets-text ul{
    list-style: disc outside;
    padding-left: 1.5rem;
  }
}

/* Desktop (≥768px):
   • Row layout
   • 40% image, 60% text
   • Swap headings */
@media (min-width: 768px) {
  .info-bullets-row {
    flex-direction: row;
    align-items: flex-start;
    gap: 2rem; /* more space between columns */
  }
  .info-bullets-image {
    flex: 0 0 40%;
    margin-bottom: 0; /* reset mobile margin */
  }
  .info-bullets-text {
    flex: 1;
    padding-left: 1.5rem;
  }

/* Keep inside viewport on very narrow screens */

  

  /* show desktop heading, hide mobile one */
  .info-bullets-heading--mobile {
    display: none;
  }
  .info-bullets-heading--desktop {
    display: block;
  }
}


/* ---------------------------- */
/*  Card Section CSS            */
/* ---------------------------- */
.compare-title {
  font-size: calc(1.275rem + .3vw);
  margin-bottom: 2rem;
}
.compare-text {
  font-size:14px;
}
.card-section {
  font-family: 'Comfortaa', sans-serif;
  position: relative;
}

.compare-carousel-section .container {
    position: relative;
    overflow: visible;
}


article.card {
  width: 100%;
  height: 350px;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  position: relative;
}

article.card .thumb {
  height: 260px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

article.card .infos {
  height: 350px;
  padding: 14px 24px;
  background: #fff;
  transition: transform 0.4s 0.15s cubic-bezier(0.17, 0.67, 0.5, 1.03);
}

article.card .infos .title {
  margin: 10px 0;
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  color: #152536;
}

article.card .infos .txt {
  opacity: 0;
  max-height: 220px;          /* adjust if you need more/less */
  overflow-y: auto;
  margin-bottom: 0;
  transition: opacity 0.5s 0.25s cubic-bezier(0.17,0.67,0.5,1.03);
  font-size: 12px;
  line-height: 1.5;
  color: rgba(21,37,54,0.7);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

}

/* optional light scrollbar styling */
article.card .infos .txt::-webkit-scrollbar {
  width: 6px;
}
article.card .infos .txt::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 3px;
}

/* sub-heading inside txt */
article.card .infos .subhead {
  margin: 1rem 0 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  color: #152536;
}

article.card .infos .subhead .label { font-size: 0.8rem; }

article.card:hover .infos {
  transform: translateY(-260px);
}

article.card:hover .txt {
  opacity: 1;
}

/* Carousel core styling */
#compare-carousel {
  margin: 0 -8px;        /* gutter on each side */
  overflow: hidden;      /* hide extra peek */
}
#compare-carousel .owl-item {
  padding: 0 8px;
}

/* Hide Owl’s built-in nav/dots entirely */
.compare-carousel-section .owl-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 10;
}

/* Style each button */
.compare-carousel-section .owl-nav button {
  pointer-events: all;
  background: #fff !important;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1 !important;
  transition: none !important;
}
#compare-carousel .owl-dots {
 display: none !important;
}
.compare-carousel-section .owl-nav .owl-prev::before {
  content: "‹";    /* single-left-quote */
  font-size: 24px;
  color: #000;
}
.compare-carousel-section .owl-nav .owl-next::before {
  content: "›";    /* single-right-quote */
  font-size: 24px;
  color: #000;
}


.owl-prev { left: -30px; }
.owl-next { right: -30px; }




/* Responsive */
/* Tweak on mobile so they sit closer */
@media (max-width: 767.98px) {
  .compare-carousel-section .owl-nav button {
    margin: 0 10px;
  }
   article.card .infos .subhead {
    /* pull this down to a more proportionate size on small screens */
    font-size: 12px; 
    margin-top: 10px;
    line-height: normal;
    
  }
  article.card .infos .subhead .label { font-size: 8px; }
  /* if you want a slightly shorter scroll area on mobile: */
  article.card .infos .txt {
    max-height: 240px;     /* adjust to taste */
  }
}