.tollfree-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

/* ROUND TOLL FREE ICON */
.tollfree-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle at top, #ffb703, #f77f00);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 18px rgba(255, 140, 0, 0.8);
}

.tollfree-icon span {
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  text-align: center;
  letter-spacing: 0.5px;
}

/* NUMBER BUTTON */
.tollfree-number {
  background: #0b5ed7;
  color: #fff;
  padding: 12px 18px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(11, 94, 215, 0.4);
}

/* HOVER EFFECT */
.tollfree-wrap:hover .tollfree-icon {
  transform: scale(1.08);
  transition: 0.3s ease;
}

.tollfree-wrap:hover .tollfree-number {
  background: #084298;
}

      /* Section center */
      /* Section */
      .hpt-client-logo-1-area {
        /* background: #000; */
        padding: 80px 20px;
        position: relative;
      }

      /* Wrapper – real center */
      .htp-client-logo-1-wrap {
        max-width: 1400px;
        margin: 0 auto;
        text-align: center;
        position: relative;
        z-index: 2; /* social icons above/below issue avoid */
      }

      /* Subtitle */
      .sub-title {
        color: #ffc107;
        margin-bottom: 8px;
        text-align: center;
      }

      /* Title */
      .htp-client-logo-1-wrap h2 {
        color: #fff;
        margin-bottom: 40px;
        text-align: center;
      }

      /* Logo grid – TRUE CENTER */
      .simple-logo-style {
        display: grid;
        grid-template-columns: repeat(5, auto);
        gap: 45px 40px;
        justify-content: center; /* 🔥 main fix */
        align-items: center;
        margin: 0 auto;
      }

      /* Logos */
      .simple-logo-style img {
        display: block;
        max-height: 80px;
        max-width: 160px;
        object-fit: contain;
        background: #fff;
        padding: 6px;
        border-radius: 6px;
      }

      /* Tablet */
      @media (max-width: 992px) {
        .simple-logo-style {
          grid-template-columns: repeat(3, auto);
        }
      }

      /* Mobile */
      @media (max-width: 576px) {
        .simple-logo-style {
          grid-template-columns: repeat(2, auto);
          gap: 30px 20px;
        }

        .simple-logo-style img {
          max-height: 60px;
          max-width: 120px;
        }
      }
      /* ===============================
   TESTIMONIAL BASE STYLE
================================ */

      .bi-testimonial-item-3 {
        width: 100%;
        max-width: 625px;
        padding: 45px 40px;
        border-radius: 10px;
        background-color: #111318;
        position: relative; /* ⭐ IMPORTANT */
      }

      /* Testimonial text */
      .testimonial-text {
        color: #fff;
        font-size: 24px;
        font-weight: 600;
        max-width: 415px;
        line-height: 40px;
        padding-bottom: 40px;
        font-family: var(--heading);
      }
      .testimonial-rating {
        position: absolute;
        top: 25px;
        right: 130px;
        display: flex;
      }

      .testimonial-rating i {
        color: #f4b400;
        font-size: 16px;
        margin-left: 3px;
      }

      /* Customer image */
      .testimonial-img {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        overflow: hidden;
        bottom: 20px;
        right: 25px;
        border: 3px solid #f5c542;
        background: #000;
      }

      .testimonial-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      /* ===============================
   MOBILE VIEW FIX
================================ */
      /* ===============================
   MOBILE TESTIMONIAL IMAGE FIX
================================ */
      @media (max-width: 767px) {
        /* Card layout */
        .bi-testimonial-item-3 {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          padding: 20px 20px !important;
        }

        /* 📝 TEXT – TOP */
        .testimonial-text {
          order: 1;
          font-size: 12px !important;
          line-height: 1.6 !important;
          margin-top: 10px;
        }

        /* ⭐ RATING – TEXT & IMAGE IN-BETWEEN */
        .quote-icon {
          position: relative !important;
          order: 2;
          margin: -6px 0 12px; /* 👈 TOP margin negative */
          display: flex;
          justify-content: center;
          width: 100%;
        }

        .testimonial-rating {
          display: flex;
          justify-content: center;
          top: 25px;
        }

        .testimonial-rating i {
          color: #f4b400;
          font-size: 16px;
          margin: 0 3px;
        }

        /* 👤 IMAGE – BOTTOM */
        .testimonial-img {
          position: relative !important; /* remove absolute */
          order: 3;
          width: 90px !important;
          height: 90px !important;
          margin: 0 auto;
        }
      }

      /* ===============================
   MOBILE TESTIMONIAL IMAGE FIX
================================ */

      /* Section center */
      .bi-video-play-section {
        min-height: 450px;
        display: flex;
        align-items: center; /* vertical center */
        justify-content: center; /* horizontal center */
        text-align: center;
        padding: 60px 20px;
      }

      /* Content wrapper */
      .center-image {
        display: flex;
        flex-direction: column;
        align-items: center; /* image & text center */
        justify-content: center;
        gap: 15px;
      }

      /* Title alignment */
      .center-image .sub-title,
      .center-image h2 {
        text-align: center;
      }

      /* Image size & center */
      .center-image img {
        width: 300px; /* adjust size here */
        max-width: 90%;
        height: auto;
        display: block;
        margin-top: 20px;
        border-radius: 10px; /* optional */
      }

      .bi-testimonial-item-3 .testimonial-img {
        width: 150px;
        height: 150px;
        left: 450px;
        bottom: 30px;
        z-index: 3;
      }

      /* Circle image */
      .bi-testimonial-item-3 .testimonial-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        border: 4px solid #ffffff;
        background: #ffffff;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18);
        bottom: 10px;
      }

      /* Optional verified badge */
      .bi-testimonial-item-3 .testimonial-img::after {
        content: "✔";
        position: absolute;
        bottom: -5px;
        right: -5px;
        width: 24px;
        height: 26px;
        background: #0d6efd;
        color: #ffffff;
        border-radius: 50%;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      /* Mobile adjustment */
      @media (max-width: 768px) {
        .bi-testimonial-item-3 .testimonial-img {
          position: relative;
          right: 0;
          bottom: 0;
          margin-top: 20px;
        }
      }
      .waterproof-list .one-by-one {
        list-style: none;
        padding: 20px;
        margin: 0;
        background: linear-gradient(135deg, #1a0f0c, #2a0f14);
        border-radius: 14px;
        max-width: 550px;
      }

      .one-by-one li {
        display: flex;
        align-items: center;
        gap: 10px; /* 🐀𢀠icon & text gap */
        padding: 14px 20px; /* left padding consistent */
        font-size: 16px;
        color: #fff;
      }

      .one-by-one li:last-child {
        border-bottom: none;
      }

      .one-by-one li i {
        font-size: 20px;
        color: #ffc107;
        min-width: auto; /* ❌ remove fixed width */
        margin: 0; /* ❌ extra spacing remove */
      }

      .one-by-one li span {
        font-weight: 500;
      }

      /* slider */
     .hero-section {
  position: relative;
  min-height: 120vh;
  overflow: hidden;
  color: #fff;
}

.bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: -2;
}


/* OVERLAY – hero section only */
.hero-section .overlay {
  position: absolute;      /* FIXED ❌ → ABSOLUTE ✅ */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
  z-index: -1;
}

      .hero-row {
 min-height: 120vh;      }

      .hero-content h1 {
        font-size: 60px;
        font-weight: 800;
        line-height: 1.2;
      }

      .hero-content span {
        display: block;
        color: #f4c430;
      }

      .hero-content strong {
        font-size: 90px;
        color: #fff;
      }

      .hero-content p {
        margin-top: 20px;
        max-width: 500px;
        font-size: 16px;
        line-height: 1.7;
      }

      .hero-btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-top: 30px;
        padding: 14px 30px;
        background: #f4c430;
        color: #000;
        text-transform: uppercase;
        font-weight: 600;
        border-radius: 40px;
        text-decoration: none;
      }

      .hero-btn img {
        width: 20px;
      }

      .hero-image {
        text-align: right;
      }

      .hero-image img {
        max-width: 85%;
        height: auto;
      }
      .company-title {
        display: flex;
        align-items: center;
        gap: 12px;
        color: #b58933;
        font-size: 26px;
        font-weight: 700;
      }

      /* ISO logo inline */
      .iso-inline img {
        max-height: 85px;
        padding: 6px;
        /* background: #fff; */
        border-radius: 50%;

        box-shadow:
          0 0 15px rgba(255, 165, 0, 0.7),
          0 0 30px rgba(255, 140, 0, 0.5);

        animation: isoGlowZoom 6s ease-in-out infinite;
      }

      /* Smooth zoom in & out */
      @keyframes isoGlowZoom {
        0% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.08);
        }
        100% {
          transform: scale(1);
        }
      }
@media (max-width: 768px) {
  .hero-section {
    min-height: 100vh;
  }

  .bg-video {
    width: auto;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
  }

  .hero-content h1 {
    font-size: 34px;
  }

  .hero-content strong {
    font-size: 48px;
  }
}

      /* ---------- MOBILE ---------- */
      @media (max-width: 991px) {
        .hero-row {
          text-align: center;
        }

        .hero-content h1 {
          font-size: 38px;
        }

        .hero-content strong {
          font-size: 55px;
        }

        .hero-image {
          margin-top: 30px;
          text-align: center;
        }

        .hero-image img {
          max-width: 70%;
        }
      }

      /* Filters left vertical */
      /* ===== FILTER (LEFT) ===== */
      .vertical-filter ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      .vertical-filter li {
        background: #c49a3a;
        color: #fff;
        padding: 12px 15px;
        margin-bottom: 10px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 14px;
        text-transform: uppercase;
      }

      .vertical-filter .filtr-active {
        background: #c49a3a;
      }

      /* ===== GRID ===== */
      .bi-portfolio-item-3 {
        width: 33.333%;
        padding: 12px;
      }

      /* ===== CARD ===== */
      .service-card {
        background: #111;
        border-radius: 18px;
        padding: 22px;
        text-align: center;
        transition: 0.3s ease;
        height: 100%;
      }

      .service-card:hover {
        transform: translateY(-6px);
      }

      /* ===== IMAGE BOX ===== */
      /* .service-img-box {
     background: #fff; 
      border-radius: 14px;
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 15px;
    } */

      .service-img-box img {
        max-width: 100%;
        max-height: 170px;
        object-fit: contain;
      }

      /* ===== TEXT ===== */
      .service-text {
        margin-top: 15px;
      }

      .service-text span {
        font-size: 14px;
        color: #9bbcff;
      }

      .service-text h5 {
        margin-top: 6px;
        font-size: 18px;
        color: #fff;
      }

      /* ===== MOBILE ===== */
      @media (max-width: 767px) {
        .bi-portfolio-item-3 {
          width: 100%;
        }
      }
      /* Right side items spacing */

      .testimonial-rating {
        margin-bottom: 15px;
      }

      .testimonial-rating i {
        color: #f4b400; /* gold star */
        font-size: 16px;
        margin-right: 3px;
      }

      /* State title base */
      .state-title {
        font-weight: 700;
        margin-bottom: 6px;
        font-size: 19px;
        letter-spacing: 0.5px;
      }

      /* Individual colors */
      .state-title.tn {
        color: #bd933a;
      } /* Tamil Nadu */
      .state-title.ka {
        color: #bd933a;
      } /* Karnataka */
      .state-title.ts {
        color: #bd933a;
      } /* Telangana */
      .state-title.kl {
        color: #bd933a;
      } /* Kerala */
      .state-title.ap {
        color: #bd933a;
      } /* Andhra Pradesh */
      .state-title.py {
        color: #bd933a;
      } /* Puducherry */

      /* Location list */
      .location-grid ul {
        padding-left: 0;
        list-style: none;
      }

      .location-grid ul li {
        font-size: 16px;
        line-height: 1.6;
        color: #ccc;
      }

      /* Top Bar */
      /* Top Bar */
      /* Service scroll item fixed size */
      .bi-service-scroll-item {
        width: 360px; /* 🔼 width increased */
        height: 420px;
        overflow: hidden;
        flex-shrink: 0;
      }

      /* Image container */
      .bi-service-scroll-item .service-img {
        width: 100%; /* important */
        height: 100%;
        overflow: hidden;
      }

      /* Image perfect fit */
      .bi-service-scroll-item .service-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      /* Title */
      .skills-section {
        height: 60vh;
        display: flex;
        align-items: center;
        /* background:url(source/about_bg.png); */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
      }
      .skills-section h1 {
        transform: rotate(270deg);
        text-transform: uppercase;
      }

      .skills {
        height: 50%;
        display: flex;
        align-items: center;
        overflow: hidden;
      }
      .slide {
        display: inline-flex;
        justify-content: center;
        gap: 7rem;
        margin: 3.5rem;
        animation: 20s slide infinite linear;
      }
      .slidebox {
        height: 200px;
        width: 200px;
        background-color: rgb(141, 61, 179);
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
      }
      .slidebox img {
        height: 60px;
        width: 60px;
        margin: 10px;
      }
      .slidebox p {
        font-size: 30px;
        color: white;
      }

      .skills:hover .slide {
        animation-play-state: paused;
      }

      @keyframes slide {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(-100%);
        }
      }
      .map-container {
        position: relative;
        display: inline-block;
        width: 100%;
        max-width: 600px; /* Set a max width to avoid excessive stretching */
      }

      .map-container img {
        width: 100%; /* Make the map fully responsive */
        height: auto;
        display: block;
      }

      .pin {
        position: absolute;
        background-color: red;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        animation: pulse 1.5s infinite;
        transform: translate(-50%, -50%);
      }

      .pin::after {
        content: "Watpac";
        position: absolute;
        top: -20px;
        left: -10px;
        background: white;
        padding: 2px 5px;
        border-radius: 4px;
        font-size: 10px;
        color: black;
        font-weight: bold;
        white-space: nowrap;
      }

      @keyframes pulse {
        0% {
          transform: scale(1);
          opacity: 1;
        }
        50% {
          transform: scale(1.5);
          opacity: 0.7;
        }
        100% {
          transform: scale(1);
          opacity: 1;
        }
      }

      /* Responsive Adjustments */
      @media screen and (max-width: 768px) {
        .map-container {
          max-width: 100%; /* Ensures it fits mobile screens */
        }

        .pin {
          width: 6px;
          height: 6px;
        }

        .pin::after {
          font-size: 8px;
        }
      }

      .chart-container {
        width: 80%;
        height: 400px;
        margin: 50px auto;
        display: flex;
        align-items: flex-end;
        justify-content: space-around;
        background-image: url(assets/img/5.html);
        background-repeat: no-repeat;
        box-shadow:
          rgba(232, 140, 74, 0.5) 0px 50px 100px -20px,
          rgba(232, 140, 74, 0.5) 0px 50px 100px -20px,
          rgba(10, 37, 64, 0.2) 0px -2px 6px 0px inset;
        border-radius: 10%;
        padding: 20px;
        position: relative;
      }
      .bar {
        width: 80px;
        text-align: center;
        color: white;
        font-weight: bold;
        transition: height 1s ease-in-out;
        position: relative;
      }
      .bar:nth-child(1) {
        background: linear-gradient(to top, #ff5733, #ffbd69);
      }
      .bar:nth-child(2) {
        background: linear-gradient(to top, #ff5733, #ffbd69);
      }
      .bar:nth-child(3) {
        background: linear-gradient(to top, #ff5733, #ffbd69);
      }
      .bar:nth-child(4) {
        background: linear-gradient(to top, #ff5733, #ffbd69);
      }
      .bar:nth-child(5) {
        background: linear-gradient(to top, #ff5733, #ffbd69);
      }
      .label {
        margin-top: 10px;
        font-size: 14px;
        font-weight: bold;
      }
      .arrow {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 24px;
        font-weight: bold;
        color: #ff5733;
      }

      .certificate {
        width: 150px;
        animation: zoomEffect 3s infinite alternate ease-in-out;
      }

      @keyframes zoomEffect {
        0% {
          transform: scale(1);
        }
        100% {
          transform: scale(1.2);
        }
      }
      /* Top marquee bar */

      .footer-contact-list li {
        display: flex;
        gap: 12px;
        margin-bottom: 12px;
      }

      .footer-contact-list i {
        color: #c6aa64;
        font-size: 16px;
        margin-top: 4px;
      }

      .footer-contact-list span {
        color: #fff;
        font-size: 14px;
        line-height: 1.6;
      }

      .service-ui-card {
        position: relative;
        overflow: hidden;
        border-radius: 18px;
        height: 480px;
      }

      .service-ui-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
      }

      .service-ui-card .overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to top,
          rgba(0, 0, 0, 0.75),
          rgba(0, 0, 0, 0.2)
        );
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 25px;
        transition: 0.4s;
      }

      .service-ui-card h4 {
        margin: 0;
        font-size: 20px;
        font-weight: 600;
      }

      .service-ui-card p {
        font-size: 14px;
        margin-top: 5px;
        opacity: 0.9;
      }

      .service-ui-card:hover img {
        transform: scale(1.08);
      }

      /* Section */
      .bi-service-section-4 {
        padding: 80px 0;
        background: #ffffff;
      }

      /* Title */
      .bi-section-title-4 .sub-title {
        display: block;
        color: #ffc107;
        font-weight: 600;
        letter-spacing: 1px;
        margin-bottom: 10px;
        text-transform: uppercase;
      }

      .bi-section-title-4 h2 {
        font-size: 36px;
        font-weight: 700;
      }

      /* Service Card */
      /* Service Card */
      .service-ui-card.text-card {
        background: linear-gradient(
          to right top,
          #b58933,
          #bd933a,
          #c59c42,
          #cda649,
          #d5b051,
          #d0ab4e,
          #caa54b,
          #c5a048,
          #b18a3b,
          #9d752e,
          #896122,
          #754d16
        );
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.6);
        transition: all 0.3s ease;
        max-width: 350px; /* 🔽 card width reduced */
        margin: auto;
        height: 490px;
        color: black; /* soft white */
      }

      /* Image size reduced */
      .service-ui-card.text-card img {
        width: 100%;
        height: 350px; /* 🔽 image height reduced */
        object-fit: cover;
      }

      /* Content area */
      .service-ui-card .card-content {
        padding: 15px; /* 🔽 padding reduced */
        text-align: center;
      }

      /* Heading */

      /* Paragraph */
      .service-ui-card .card-content p {
        font-size: 17px;
        line-height: 1.5;
        color: white; /* soft white */
      }

      /* Hover effect */
      .service-ui-card.text-card:hover {
        transform: translateY(-5px);
      }
      /* ----MARQUEE */
      .locations-section {
        display: flex;
        align-items: center;
        background: #000;
        padding: 0 0 30px 0; /* top padding remove */
        overflow: hidden;
      }

      /* Vertical title */
      .locations-title {
        width: auto;
        display: flex;
        align-items: center;
        margin-right: 40px; /* 👉 right side-ku move */
      }

      .locations-title h4 {
        color: #c89b3c;
        font-size: 22px;
        letter-spacing: 3px;
        white-space: nowrap;
        font-weight: 700;
      }

      /* Strip wrapper */
      .location-strip-section {
        flex: 1;
        overflow: hidden;
      }

      /* Gold strip */
      .location-strip {
        background: linear-gradient(90deg, #c89b3c, #b88a2f);
        padding: 14px 0;
        white-space: nowrap;
      }

      /* Scrolling text */
      .location-strip p {
        display: inline-block;
        padding-left: 120%;
        color: #fff;
        font-size: 19px;
        font-weight: 500;
        animation: scrollText 60s linear infinite; /* ⬅ slow */
      }

      .location-strip strong {
        font-weight: 700;
      }

      /* Pause on hover */
      .location-strip:hover p {
        animation-play-state: paused;
      }

      /* Animation */
      @keyframes scrollText {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(-100%);
        }
      }
      /* Mobile view */
      @media (max-width: 768px) {
        .locations-section {
          flex-direction: column;
          align-items: flex-start;
          padding: 10px 0 20px;
        }

        .locations-title {
          margin: 0 0 10px 15px;
        }

        .locations-title h4 {
          font-size: 18px;
          letter-spacing: 2px;
        }

        .location-strip {
          padding: 10px 0;
        }

        @media (max-width: 768px) {
          .location-strip p {
            font-size: 14px;
            padding-left: 100%;
            animation-duration: 45s; /* slow for mobile */
          }
        }
      }

      #bi-header {
        position: sticky;
        top: 40px; /* marquee height */
      }
      /* SECTION WITH CONSTRUCTION BACKGROUND */
      .waterproofing-services {
        position: relative;
        padding: 80px 60px;
        background-image: url("assets/img/services/construction-bg.html");
        background-size: cover;
        background-position: center;
      }

      /* BLACK OVERLAY */
      .waterproofing-services::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.75);
        z-index: 0;
      }

      /* CARD */
      .service-wrapper {
        position: relative;
        z-index: 1;
        display: flex;
        /* background: linear-gradient(135deg, #0f1c3f, #1b2b5c); */
        border-radius: 30px;
        overflow: hidden;
      }

      /* LEFT IMAGE */
      .service-image {
        width: 40%;
      }

      .service-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      /* RIGHT CONTENT */
      .service-content {
        width: 60%;
        padding: 50px;
        color: #fff;
      }

      /* SUB TITLE */

      /* TITLE */
      .service-content h2 {
        font-size: 32px;
        margin-bottom: 35px;
      }

      /* GRID */
      .service-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
      }

      .service-item {
        display: flex;
        align-items: center;
        gap: 15px;
      }

      .service-item .icon {
        width: 55px;
        height: 55px;
        background: #fff;
        color: #0f1c3f;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 22px;
      }

      .service-item p {
        font-size: 20px;
        margin: 0;
      }

      /* RESPONSIVE */
      @media (max-width: 991px) {
        .service-wrapper {
          flex-direction: column;
        }

        .service-image,
        .service-content {
          width: 100%;
        }

        .service-content {
          padding: 30px;
        }

        .service-list {
          grid-template-columns: 1fr;
        }
      }
      /* MOBILE CALL SECTION */
      .mobile-call-box {
        margin-top: 20px;
        padding: 0 20px;
      }

      .mobile-call {
        display: flex;
        align-items: left;
        justify-content: left;
        gap: 10px;
        /* background: #f4b400; */
        color: white;
        padding: 12px;
        border-radius: 6px;
        text-decoration: none;
        font-weight: 600;
        margin-bottom: 10px;
      }

      .mobile-call i {
        font-size: 16px;
      }

      .mobile-call.toll {
        /* background: #ffffff; */

        color: white;
      }

      /* Only mobile view */
      @media (min-width: 992px) {
        .mobile-call-box {
          display: none;
        }
      }
    .mission-vision-section {
        width: 100%;
        padding: 60px 20px;
      }

      .mv-container {
        display: grid;
        grid-template-columns: 1fr 1.2fr 1fr;
        gap: 0;
        max-width: 1400px;
        margin: auto;
      }

      /* COMMON BOX STYLE */
      .mv-box {
        padding: 50px 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      /* LEFT */
      .mission {
        background: black;
        color: #fff;
      }

      .mission h3 {
        font-size: 26px;
        margin-bottom: 20px;
      }

      .mission span {
        color: #c89b3c;
        font-weight: 600;
      }

      /* CENTER VIDEO */
      .video-box {
  background: #000;
  padding: 0;
  overflow: hidden;      /* important */
  border-radius: 10px;   /* optional – nice look */
}

.video-box video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;    /* fill box */
}

      /* RIGHT */
      .vision {
        background: #c89b3c;
        color: #000;
        text-align: center;
      }

      .vision h3 {
        font-size: 26px;
        margin-bottom: 20px;
      }
      .hpt-about-1-img .about-1-img-1 {
    width: 100%;
    height: 560px;
    overflow: hidden;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 5px;
}
 /* Content List Styling */
      .feature-list-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 35px;
      }
      .feature-icon {
        flex-shrink: 0;
        width: 60px;
        height: 60px;
        margin-right: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .feature-icon img {
        width: 100%;
        height: auto;
        object-fit: contain;
      }
      .feature-text h5 {
        font-size: 20px;
        font-weight: 700;
        color: #b88a2f;
        margin-bottom: 8px;
      }
      .feature-text p {
        font-size: 15px;
        color: #555;
        line-height: 1.6;
        margin: 0;
      }

      /* Right Side Image Styling */
      .feature-image-wrapper {
        position: relative;
        height: 100%;
        min-height: 600px;
      }
      .feature-image-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 20px;
        box-shadow: -20px 20px 0px #f0f4f8; /* Decorative offset background */
      }
      /* Styling for Font Awesome Icons */
      .feature-icon i {
        font-size: 32px;
        color: black; /* Your dark blue color */
        background: #f0f4f8; /* Very light blue circular background */
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: 0.3s;
      }

      .feature-list-item:hover .feature-icon i {
        background: black;
        color: #ffffff;
      }

      .feature-text {
        margin-top: 5px;
      }
         .section-header {
        margin-bottom: 50px;
      }
      .subtitle-text {
        color: #d1a317; /* Gold/Accent color */
        font-weight: 700;
        letter-spacing: 2px;
        display: block;
        margin-bottom: 10px;
      }
      .main-title {
        font-size: 42px;
        font-weight: 800;
        color: black;
      }
      .hpt-client-logo-1-area {
        /* background: #000; */
        padding: 80px 20px;
        position: relative;
      }
      /* ===== HERO ===== */
.hero-banner{
  background: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),
  url('assets/img/lamination-banner.jpg');
  background-size: cover;
  padding: 90px 0;
}

.hero-banner h1{
  font-size: 42px;
  font-weight: 700;
}

/* ===== LIST ===== */
.custom-list{
  padding-left: 18px;
}

.custom-list li{
  margin-bottom: 8px;
}

/* ===== CARDS ===== */
.card-box{
  background: #fff;
  padding: 25px;
  text-align: center;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
  transition: 0.3s;
}

.card-box i{
  font-size: 30px;
  color: #ff9800;
  margin-bottom: 10px;
}

.card-box:hover{
  transform: translateY(-5px);
}

/* ===== FEATURES ===== */
.feature-box{
  background: #f8f9fa;
  padding: 12px;
  border-radius: 8px;
  text-align: center;
  font-weight: 500;
}

/* ===== APPLICATION BOX ===== */
.app-box{
  background: #fff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 3px 15px rgba(0,0,0,0.08);
}

/* ===== WHY BOX ===== */
.why-box{
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  font-weight: 600;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

/* ===== CTA ===== */
.cta-section{
  background: #111;
  padding: 70px 0;
}


/* product */
/* ======================
   GLOBAL
====================== */

body {
  background: #f6f7fb;
}

/* ======================
   PRODUCT HERO LAYOUT
====================== */

.product-hero {
  padding: 60px 0;
}

.product-image-box img {
  width: 100%;
  /* height: auto; */
  border-radius: 18px;
  margin-bottom: 20px;
}

/* Title */
.product-title {
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 15px;
  color: #111;
}

/* Description */
.product-desc {
  font-size: 16px;
  color: #555;
  line-height: 1.7;
}

/* Headings */
.product-hero h3 {
  margin-top: 25px;
  font-weight: 700;
  color: #111;
}

/* ======================
   LIST STYLE
====================== */

.custom-list {
  padding-left: 0;
  list-style: none;
  margin-top: 10px;
}

.custom-list li {
  background: #fff;
  padding: 10px 15px;
  margin-bottom: 10px;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
  position: relative;
  padding-left: 30px;
}

.custom-list li::before {
  content: "✔";
  position: absolute;
  left: 10px;
  color: green;
  font-weight: bold;
}

/* ======================
   SIDEBAR BOX
====================== */

.sidebar-box {
  background: #ffeedd;
  padding: 25px;
  border-radius: 18px;
  margin-bottom: 25px;
}

.sidebar-box h4 {
  font-weight: 700;
  margin-bottom: 15px;
}

.cat-item {
  display: flex;
  justify-content: space-between;
  background: #fff;
  padding: 12px 15px;
  border-radius: 12px;
  margin-bottom: 10px;
  text-decoration: none;
  color: #222;
  transition: 0.3s;
}

.cat-item:hover {
  background: #111;
  color: #fff;
}

/* ======================
   HELP BOX (BLACK CARD)
====================== */

.help-box {
  background: #0d0d0d;
  color: #fff;
  padding: 30px;
  border-radius: 18px;
  text-align: center;
}

.help-box .phone-icon {
  font-size: 40px;
  margin-bottom: 10px;
}

.help-box h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.help-box p {
  font-size: 18px;
  margin-bottom: 20px;
}

.quote-btn {
  display: inline-block;
  background: red;
  color: #fff;
  padding: 10px 20px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
}

.quote-btn:hover {
  background: darkred;
}

/* ======================
   RESPONSIVE
====================== */

@media(max-width: 768px){
  .product-title {
    font-size: 24px;
  }

  .help-box {
    margin-top: 20px;
  }
}
.modern-features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.modern-features li {
  background: #ffffff;
  margin-bottom: 12px;
  padding: 14px 18px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  font-size: 19px;
  line-height: 1.6;
  color: #444;
  transition: 0.3s ease;
  border-left: 4px solid #000000;
}

.modern-features li:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

.modern-features li span {
  font-weight: 700;
  color: #111;
}
/* --- Contact Form Styles --- */
.form-title {
    font-weight: 800;
    font-size: 32px;
    margin-bottom: 5px;
}

.title-separator {
    width: 60px;
    height: 4px;
    background-color: #ffc107; /* Yellow line */
}

.custom-input {
    background-color: #f8f9fa;
    border: 1px solid #eee;
    padding: 12px;
    border-radius: 4px;
}

.btn-send {
    border: 2px solid black;
    color:black;
    background: transparent;
    font-weight: bold;
    letter-spacing: 2px;
    padding: 10px 30px;
    text-transform: uppercase;
    transition: 0.3s;
}

.btn-send:hover {
    background: black;
    color: #fff;
}

/* --- FAQ Accordion Styles --- */
.faq-accordion {
    border: 1px solid #dee2e6;
}

.faq-item {
    border-bottom: 1px solid #dee2e6;
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-header {
    padding: 15px 20px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: black;
    transition: 0.3s;
}

.faq-icon {
    color:#b88a2f;
    font-weight: bold;
    margin-right: 15px;
    font-size: 20px;
}

.faq-body {
    padding: 0 20px 20px 55px; /* Aligns text under the question */
    color: #555;
    line-height: 1.6;
}
  /* State title base */
      .state-title {
        font-weight: 700;
        margin-bottom: 6px;
        font-size: 19px;
        letter-spacing: 0.5px;
      }

      /* Individual colors */
      .state-title.tn {
        color: #bd933a;
      } /* Tamil Nadu */
      .state-title.ka {
        color: #bd933a;
      } /* Karnataka */
      .state-title.ts {
        color: #bd933a;
      } /* Telangana */
      .state-title.kl {
        color: #bd933a;
      } /* Kerala */
      .state-title.ap {
        color: #bd933a;
      } /* Andhra Pradesh */
      .state-title.py {
        color: #bd933a;
      } /* Puducherry */

      /* Location list */
      .location-grid ul {
        padding-left: 0;
        list-style: none;
      }

      .location-grid ul li {
        font-size: 16px;
        line-height: 1.6;
        color: #ccc;
      }
/* Change icon when expanded (handled via JS or simple logic) */
.faq-header.active .faq-icon {
    color:#b88a2f;
}
/* --- Contact Form Styles --- */
      .form-title {
        font-weight: 800;
        font-size: 32px;
        margin-bottom: 5px;
      }

      .title-separator {
        width: 60px;
        height: 4px;
        background-color: #ffc107; /* Yellow line */
      }

      .custom-input {
        background-color: #f8f9fa;
        border: 1px solid #eee;
        padding: 12px;
        border-radius: 4px;
      }

      .btn-send {
        border: 2px solid black;
        color: black;
        background: transparent;
        font-weight: bold;
        letter-spacing: 2px;
        padding: 10px 30px;
        text-transform: uppercase;
        transition: 0.3s;
      }

      .btn-send:hover {
        background: black;
        color: #fff;
      }
          .contact-form-wrapper {
        background: #111;
        padding: 35px;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      }
        .form-title {
        color: #fff;
        margin-bottom: 10px;
      }

      .custom-input {
        background: #1a1a1a;
        border: 1px solid #333;
        color: #fff;
      }

      .custom-input::placeholder {
        color: #aaa;
      }

      .custom-input:focus {
        border-color: #f4b400;
        box-shadow: none;
      }

      .btn-send {
        background: #f4b400;
        color: #000;
        font-weight: 600;
        padding: 12px;
        border-radius: 6px;
      }

      .btn-send:hover {
        background: #e0a800;
      }
      
           /* 1. Make all images same height */
      .bi-blog-feed-item-2 .blog-img img {
        width: 100%; /* Full width of the card */
        height: 530px; /* Fixed height for all images */
        object-fit: cover;
		border-radius: 20px; /* Crops image nicely so it doesn't look stretched */
      }

      /* 2. H2 Tag with Background Color and White Text */
      .headline-title {
        color: #ffffff; /* White Text Color */
        padding: 10px 30px; /* Space around the text */
        display: inline-block; /* Makes background wrap the text neatly */
        border-radius: 5px; /* Optional: Rounded corners */
        margin-top: 15px;
      }
      .bi-breadcrumbs-content h1 {
    color: #fff !important;
    font-weight: 500;
    font-size: 62px;
}