/* === ALL CSS FROM BOTH HTML FILES BELOW === */
    /* --- HERO SECTION & VIDEO SECTION --- */
    .hero-section {
      min-height: 70vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      /* padding-top: 78px; */
      padding-top: 78px;
      padding-bottom: 28px;
      /* background: radial-gradient(ellipse at 50% 70%, #bbdefb 0%, #bbdefb 37%, #e3f2fd 70%, #fff 100%); */
    }

    .hero-title {
      font-size: 3.2rem;
      font-weight: 800;
      line-height: 1.08;
      color: #111;
      margin-bottom: 20px;
      margin-top: 44px;
      font-family: var(--nav-font);
      min-height: 84px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transition: font-size 0.22s;
    }

    .typewriter-line {
      min-height: 1.2em;
      display: block;
      width: 100%;
      font-family: inherit;
      font-weight: inherit;
      font-size: inherit;
      letter-spacing: inherit;
      color: inherit;
    }

    @media (max-width: 900px) {

      .hero-section {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
      }
    }

    .typewriter-char {
      display: inline-block;
      opacity: 0;
      transform: translateY(18px);
      animation: charFadeIn .32s forwards;
      white-space: pre;
    }

    @keyframes charFadeIn {
      0% {
        opacity: 0;
        transform: translateY(18px);
      }

      65% {
        opacity: 1;
        transform: translateY(-4px);
      }

      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .hero-subtitle {
      color: #656668;
      font-size: 1.16rem;
      font-weight: 500;
      max-width: 690px;
      margin-bottom: 38px;
      /* font-family: var(--nav-font); */
      font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    }

    .hero-buttons {
      display: flex;
      gap: 22px;
      margin-top: 12px;
      flex-wrap: wrap;
      margin-bottom: 48px;
    }

    .btn {
      position: relative;
      display: inline-block;
      outline: none;
      border: none;
      cursor: pointer;
      font-family: var(--nav-font);
      font-size: 1.1rem;
      font-weight: 700;
      color: #fff;
      min-width: 170px;
      padding: 15px 38px;
      border-radius: 6px;
      margin: 0;
      letter-spacing: 0.01em;
      background: var(--primary);
      transition: color 0.2s, background 0.2s;
      overflow: hidden;
      z-index: 1;
      box-shadow: 0 3px 10px rgba(26, 115, 232, 0.06);
    }

    .btn.btn-contact {
      color: var(--primary);
      background: #fff;
      border: 2px solid var(--primary);
    }

    .btn span {
      position: relative;
      z-index: 2;
      transition: color 0.2s;
    }

    .btn::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 4px;
      background: #fff;
      transform: scaleX(0);
      transition: transform 0.35s cubic-bezier(.55, 0, .1, 1);
      z-index: 2;
    }

    .btn.btn-contact::before {
      background: var(--primary);
    }

    .btn:hover,
    .btn:focus {
      color: var(--primary);
      background: #fff;
      border-color: var(--primary-hover);
      outline: none;
    }

    .btn.btn-contact:hover,
    .btn.btn-contact:focus {
      color: #fff;
      background: var(--primary);
      border-color: var(--primary-hover);
    }

    .btn:hover::before,
    .btn:focus::before {
      transform: scaleX(1);
    }

    .btn.btn-contact:hover::before,
    .btn.btn-contact:focus::before {
      background: #fff;
    }

    .btn span {
      transition: color 0.2s;
    }

    .btn:hover span,
    .btn:focus span {
      color: var(--primary);
    }

    .btn.btn-contact:hover span,
    .btn.btn-contact:focus span {
      color: #fff;
    }

    /* VIDEO SECTION */
    .video-section {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0;
      padding: 60px 0;
      perspective: 1000px;
    }

    .video-gradient-bg {
      width: 90%;
      max-width: 900px;
      background: radial-gradient(ellipse 80% 60% at 50% 30%, #bbdefb 60%, #e3f2fd 100%);
      border-radius: 24px;
      box-shadow: 0 6px 32px rgba(26, 115, 232, 0.1);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0;
      transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
      will-change: transform;
      transform-origin: center center;
    }

    .video-frame {
      width: 100%;
      aspect-ratio: 16/9;
      border-radius: 20px;
      overflow: hidden;
      position: relative;
      background: #e2e2e2;
      box-shadow: 0 4px 24px rgba(26, 115, 232, 0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
    }

    .video-frame video {
      width: 100%;
      height: 100%;
      display: block;
      border-radius: 20px;
      background: #eee;
      aspect-ratio: 16/9;
      object-fit: cover;
    }

    @media (max-width: 1200px) {
      .hero-title {
        font-size: 2.5rem;
      }
    }

    @media (max-width: 900px) {
      .hero-title {
        font-size: 2rem;
      }

      .btn {
        font-size: 1rem;
        padding: 12px 18px;
      }

      .hero-section {
        padding-top: 40px;
      }

      .video-gradient-bg {
        width: 92%;
        max-width: 92vw;
      }
    }

    @media (max-width: 700px) {
      .hero-title {
        font-size: 1.3rem;
      }

      .btn {
        font-size: 0.93rem;
        padding: 10px 10px;
        min-width: 120px;
      }

      .hero-section {
        min-height: 56vh;
        padding-top: 15vw;
      }

      .video-section {
        padding: 50px 0;
      }

      .video-gradient-bg {
        width: 95%;
        border-radius: 20px;
      }

      .video-frame {
        border-radius: 16px;
      }
    }

    @media (max-width: 500px) {
      .hero-title {
        font-size: 1.08rem;
      }

      .video-gradient-bg {
        width: 98%;
      }
    }

    /* ==================== SECOND PAGE: PRODUCT/SOLUTION/SERVICES/SPARES ==================== */
    /* ===================== PRODUCTS SECTION CSS===================== */
    .product-section {
      margin: 0;
      padding: 0;
      background: #F8F9FB;
      font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      color: #171717;
    }
     .offer-section {
      max-width: 1200px;
      margin: 40px auto 0 auto;
      padding: 0 10px;
    }
    .offer-header {
      text-align: center;
      margin-bottom: 8px;
    }
    .offer-header h1 {
      font-size: 2.1rem;
      font-weight: 700;
      margin-bottom: 6px;
      letter-spacing: 0.5px;
      color: #171717;
      position: relative;
      font-family: 'Poppins', Arial, sans-serif;
    }
    .offer-header h1::before {
      content: '';
      display: block;
      width: 34px;
      height: 4px;
      background: #2A60CB;
      margin: 0 auto 7px auto;
      border-radius: 2px;
      font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    }

    .offer-header p {
      font-size: 0.98rem;
      color: #6A6A6A;
      margin-top: 0;
      margin-bottom: 18px;
      font-weight: 400;
      line-height: 1.4;
      /* font-family: 'Poppins', Arial, sans-serif; */
      font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    }

    .cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 14px;
      margin-bottom: 34px;
      max-width: 1000px;
      margin-left: auto;
      margin-right: auto;
    }

    .offer-card {
      background: #fff;
      box-shadow: 0 6px 24px 0 rgba(60, 70, 80, 0.10);
      padding: 0 0 20px 0;
      display: flex;
      flex-direction: column;
      min-height: 350px;
      border-radius: 0;
      opacity: 0;
      transform: translateY(-80px) scale(0.92) rotateX(15deg);
      transition:
        box-shadow 0.25s cubic-bezier(.24, 1.54, .52, .97),
        transform 0.85s cubic-bezier(.24, 1.54, .52, .97),
        opacity 0.85s cubic-bezier(.24, 1.54, .52, .97);
      will-change: transform, opacity;
    }

    .offer-card.fall-in {
      opacity: 1;
      transform: translateY(0) scale(1) rotateX(0deg);
      box-shadow: 0 14px 38px 0 rgba(60, 70, 80, 0.16), 0 3px 6px 0 rgba(60, 70, 80, 0.09);
    }

    .offer-card:hover {
      box-shadow: 0 26px 80px 0 rgba(42, 96, 203, 0.14), 0 4px 10px 0 rgba(60, 70, 80, 0.12);
      transform: translateY(-4px) scale(1.04);
      transition: box-shadow 0.24s, transform 0.32s;
      cursor: pointer;
    }

    .offer-card img {
      width: 100%;
      height: 200px;
      object-fit: cover;
      object-position: center;
      margin-bottom: 0;
      border-radius: 0;
      border-bottom: 1px solid #f2f2f2;
      background: #f6f6f6;
      transition: filter 0.3s;
    }

    .offer-card:hover img {
      filter: brightness(1.06) saturate(1.09);
    }

    .offer-card-content {
      padding: 15px 16px 0 16px;
      flex: 1;
      display: flex;
      flex-direction: column;
      font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    }

    .offer-card h3 {
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 7px;
      margin-top: 0;
      color: #171717;
      /* font-family: 'Poppins', Arial, sans-serif; */
      font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    }

    .offer-card p {
      font-size: 0.91rem;
      color: #6A6A6A;
      margin: 0 0 22px 0;
      flex: 1;
      line-height: 1.46;
      /* font-family: 'Poppins', Arial, sans-serif; */
      font-weight: 400;
      font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    }

    .offer-card a {
      margin-top: auto;
      font-size: 0.97rem;
      color: #2A60CB;
      text-decoration: none;
      font-weight: 600;
      letter-spacing: 0.08px;
      padding-bottom: 1px;
      transition: color 0.18s;
      display: inline-flex;
      align-items: center;
      font-family: 'Poppins', Arial, sans-serif;
    }

    .offer-card a::after {
      content: "→";
      margin-left: 5px;
      font-size: 1.1em;
      font-weight: 600;
      color: #2A60CB;
      transition: margin-left 0.18s;
    }

    .offer-card a:hover {
      color: #153878;
    }

    .offer-card a:hover::after {
      margin-left: 11px;
    }

    /* Responsive Styles */
    @media (max-width: 950px) {
      .cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
      }
    }

    @media (max-width: 650px) {
      .offer-section {
        padding: 0 2vw;
      }

      .cards-grid {
        grid-template-columns: 1fr;
        gap: 15px;
      }

      .offer-card img {
        height: 170px;
      }

      .offer-card-content {
        padding: 12px 9px 0 11px;
      }

      .offer-card {
        min-height: 330px;
      }
    }

    @media (max-width: 430px) {
      .offer-header h1 {
        font-size: 1.02rem;
      }

      .offer-header p {
        font-size: 0.86rem;
      }

      .offer-card h3 {
        font-size: 0.88rem;
      }

      .offer-card p {
        font-size: 0.83rem;
      }

      .offer-card a {
        font-size: 0.89rem;
      }
    }
    /* ========= SERVICES SECTION (MODERN) ========= */
    :root {
      --main-orange: #1A73E8;
      --gray-bg: #fafafa;
      --white: #fff;
      --shadow: 0 6px 24px 0 rgba(0, 0, 0, 0.07);
      --border-radius: 18px;
      --transition: 0.35s cubic-bezier(.77, 0, .18, 1);
    }

    .services-section {
      display: flex;
      gap: 40px;
      align-items: flex-start;
      max-width: 1150px;
      margin: 60px auto 0 auto;
      padding: 40px 24px 24px 24px;
      background: #e0dbd7;
      border-radius: var(--border-radius);
      box-shadow: var(--shadow);
      opacity: 0;
      transform: translateY(60px);
      transition: var(--transition);
    }

    .services-section.visible {
      /* Entry Animation */
      opacity: 1;
      transform: translateY(0);
    }

    .services-left {
      flex: 1.3;
    }

    .services-title {
      font-size: 2.3rem;
      font-weight: 700;
      margin-bottom: 8px;
    }

    .services-title .highlight {
      color: var(--main-orange);
      font-style: italic;
      font-weight: 400;
    }

    .services-desc {
      color: #757575;
      font-size: 1rem;
      margin-bottom: 24px;
      max-width: 400px;
      line-height: 1.5;
    }

    .accordion {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }


    .accordion-item {
      background: var(--white);
      border-radius: 16px;
      box-shadow: var(--shadow);
      overflow: hidden;
      transition: box-shadow 0.2s;
      cursor: pointer;
      border: none;
    }
    .accordion-item a{
      text-decoration: none;
    }

    .accordion-item.active {
      box-shadow: 0 8px 32px 0 rgba(26, 115, 232, 0.09);
      border: 1.5px solid var(--main-orange);
    }

    .accordion-header {
      display: flex;
      align-items: center;
      font-weight: 700;
      padding: 18px 22px 12px 22px;
      font-size: 1.08rem;
      color: #222;
      background: none;
      border: none;
      outline: none;
      cursor: pointer;
      transition: color .18s;
      justify-content: space-between;
    }

    .accordion-item.active .accordion-header {
      color: var(--main-orange);
    }
    .accordion-icon {
      font-size: 13px;
      transition: transform .25s;
    }

    .accordion-item.active .accordion-icon {
      transform: rotate(180deg);
    }

    .accordion-content {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-height 0.44s cubic-bezier(.77, 0, .18, 1), opacity 0.32s;
      font-size: 0.98rem;
      padding: 0 22px;
      color: #444;
      font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    }

    .accordion-item.active .accordion-content {
      max-height: 160px;
      opacity: 1;
      padding-bottom: 18px;
    }

    .services-image-block {
      flex: 1.2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      min-width: 260px;
      min-height: 260px;
      max-width: 400px;
      background: #f6f6f6;
      border-radius: 18px;
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
      transition: box-shadow .23s;
    }

    .services-image {
      width: 100%;
      height: 320px;
      object-fit: cover;
      border-radius: 18px;
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      transition: opacity 0.45s cubic-bezier(.77, 0, .18, 1);
    }

    .services-image.active {
      opacity: 1;
      z-index: 2;
      position: relative;
    }

    .explore-btn {
      margin: 34px auto 0 auto;
      display: block;
      padding: 15px 44px;
      background: var(--main-orange);
      color: #fff;
      font-weight: 700;
      font-size: 1.1rem;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      box-shadow: 0 6px 24px 0 rgba(26, 115, 232, 0.11);
      transition: background .19s, transform .13s;
    }

    .explore-btn:hover,
    .explore-btn:active {
      background: #1557b0;
      transform: translateY(-2px) scale(1.03);
    }

    @media (max-width: 900px) {
      .services-section {
        flex-direction: column;
        align-items: stretch;
        padding: 30px 10px;
        gap: 18px;
      }

      .services-image-block {
        margin-top: 22px;
        max-width: 100%;
        min-height: 180px;
        height: 200px;
      }

      .services-image {
        height: 200px;
      }

      .explore-btn {
        margin-top: 28px;
      }
    }

    @media (max-width: 600px) {
      .services-title {
        font-size: 1.55rem;
      }

      .services-section {
        padding: 18px 3vw;
      }

      .accordion-header {
        font-size: 0.98rem;
        padding: 14px 10px 8px 12px;
      }

      .accordion-content {
        font-size: 0.95rem;
        padding: 0 12px;
      }

      .services-image-block {
        min-width: 100%;
        min-height: 110px;
        height: 140px;
      }

      .services-image {
        height: 300px;
      }
    }

    /* ===================== SPARES SECTION ===================== */
    .spares-section {
      background: #e6f0ff;
      border-radius: 10px;
      box-shadow: 0 4px 22px 0 rgba(26, 115, 232, 0.09);
      max-width: 1120px;
      margin: 38px auto 0 auto;
      padding: 10px 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0;
      transform: translateY(40px);
      transition: none;
    }

    .spares-section.spares-animate {
      animation: fadeInUp 0.9s cubic-bezier(.18, 1.05, .57, .99) 0.1s both;
    }

    @keyframes fadeInUp {
      0% {
        opacity: 0;
        transform: translateY(40px);
      }

      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .spares-container {
      display: flex;
      align-items: center;
      gap: 40px;
      width: 100%;
    }

    .spares-image img {
      display: block;
      width: 100%;
      border-radius: 18px;
      background: #1A73E8;
      box-shadow: 0 6px 18px 0 rgba(26, 115, 232, 0.08);
    }

    .spares-content {
      flex: 1;
    }

    .spares-title {
      font-family: 'Inter', Arial, sans-serif;
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 10px;
      color: #181818;
    }

    .spares-desc {
      color: #555;
      font-size: 1rem;
      margin-bottom: 22px;
      line-height: 1.5;
    }

    .spares-list {
      list-style: none;
      padding: 0;
      margin: 0 0 28px 0;
    }

    .spares-list li {
      display: flex;
      align-items: center;
      font-size: 1rem;
      color: #525252;
      margin-bottom: 11px;
    }

    .spares-list .check {
      color: #1A73E8;
      font-size: 1.08rem;
      margin-right: 10px;
      font-weight: 700;
    }

    .spares-btn {
      display: inline-block;
      padding: 12px 26px;
      border: 2px solid #1A73E8;
      background: #fff;
      color: #1A73E8;
      font-weight: 600;
      font-family: 'Inter', Arial, sans-serif;
      border-radius: 5px;
      font-size: 1rem;
      transition: all 0.2s;
      text-decoration: none;
      margin-top: 10px;
    }

    .spares-btn:hover {
      background: #1A73E8;
      color: #fff;
    }

    @media (max-width: 900px) {
      .spares-container {
        flex-direction: column;
        gap: 24px;
      }

      .spares-image img {
        height: 200px;
        width: auto;
      }

      .spares-section {
        padding: 20px 5vw;
      }
    }

    @media (max-width: 500px) {
      .spares-section {
        padding: 10px 2vw;
        border-radius: 10px;
      }

      .spares-title {
        font-size: 1.3rem;
      }

      .spares-desc,
      .spares-list li,
      .spares-btn {
        font-size: 0.98rem;
      }
    }

    /* Testimonial Section */
:root{
  --gray-bg:#f6f8fc;
  --orange:#1a73e8;
  --carousel-width:1080px;
  --arrow-bg:#1a73e8;
  --arrow-size:44px;
  --carousel-gap:16px;
  --gray-border:#eee;
}


/* Enable smooth vertical scrolling while allowing horizontal swipe */
.carousel-track { touch-action: pan-y; }


/* ===== Testimonials Section ===== */
.testimonials-section {
  margin-top: 0px !important;
  width: 100%;
  background: var(--gray-bg);
  padding: 68px 0 72px;
  text-align: center;
  opacity: 0;                  /* will be set to visible by JS */
  transform: translateY(32px); /* fade-in motion */
  transition: opacity 1.2s cubic-bezier(.48,.2,.25,1),
              transform 1.2s cubic-bezier(.48,.2,.25,1);
  box-sizing: border-box;
}
.testimonials-section.visible { opacity: 1; transform: none; }

.testimonials-heading {
  font-size: clamp(25px, 4vw, 36px);
  font-family: 'Poppins','Inter',system-ui,Arial,sans-serif;
  color:#000;
  font-weight:700;
  margin-bottom:46px;
  letter-spacing:-1px;
  line-height:1.18;
  padding:0 16px;
}
.testimonials-heading .highlight{
  color:var(--orange);
  font-style:italic;
  font-family:'Times New Roman', Times, serif;
  font-weight:700;
  margin:0 2px;
  font-size:1.09em;
}

.carousel-row{
  width:100%;
  max-width:var(--carousel-width);
  margin:0 auto;
  position:relative;
  min-height:240px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 20px; /* keep inside on small widths */
  box-sizing:border-box;
}

.carousel-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:10;
  background:var(--arrow-bg);
  width:var(--arrow-size);
  height:var(--arrow-size);
  border-radius:50%;
  border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .17s;
  outline:none;
  box-shadow:0 1px 12px #b8b8b813;
}
.carousel-arrow svg{ width:20px; height:20px; fill:#fff; display:block; pointer-events:none; }
.carousel-arrow.left{ left:8px; }    /* JS will align to card border precisely */
.carousel-arrow.right{ right:8px; }

.carousel-track{ overflow:hidden; width:100%; max-width:100%; position:relative; margin:0 auto; }
.carousel-inner{
  display:flex;
  align-items:stretch;
  gap:var(--carousel-gap);
  will-change:transform;
  transition: transform .55s cubic-bezier(.58,.13,.25,1);
}

/* 3 per view on desktop, 1 per view on mobile */
.testimonial-card{
  background:#fff;
  border-radius:18px;
  box-shadow:0 2px 12px 0 #e7e7e7, 0 .5px 2px #b8b8b816;
  padding:28px 18px 22px;
  flex:0 0 calc((100% - 2 * var(--carousel-gap)) / 3);
  max-width:100%;
  display:flex; flex-direction:column; align-items:center;
  position:relative;
  border:1px solid var(--gray-border);
  transition: box-shadow .23s cubic-bezier(.55,.09,.3,1),
              border-color .18s, opacity .13s;
  opacity:.93; z-index:1; box-sizing:border-box;
}
.testimonial-card.active{
  box-shadow:0 6px 28px #1a73e819, 0 2px 12px #e0e0e06e;
  border:1.2px solid #98b3f1;
  opacity:1; z-index:2;
}

.testimonial-quote{ font-size:1.6rem; color:var(--orange); margin-bottom:10px; font-family:'Poppins',Arial,sans-serif; font-weight:bold; user-select:none; line-height:1; letter-spacing:-1px; }
.testimonial-text{ font-size:1rem; color:#484848; font-weight:400; font-family:'Inter',Arial,sans-serif; margin-bottom:17px; min-height:40px; line-height:1.5; }
.testimonial-author{ font-size:.93rem; color:#000; font-weight:700; margin-top:auto; text-align:left; width:100%; letter-spacing:-.3px; }

.read-more-btn{
  display:inline-block; padding:14px 38px; background:var(--orange); color:#fff; font-weight:600; font-size:1.02rem;
  border:none; border-radius:10px; box-shadow:0 3px 15px #1a73e823; margin:36px auto 0; cursor:pointer;
  transition:background .16s, box-shadow .16s; font-family:'Inter',Arial,sans-serif; letter-spacing:.02em; text-align:center;
}
.read-more-btn:hover{ background:#4285F4; box-shadow:0 6px 18px #1a73e823; }

/* ===== Mobile ===== */
@media (max-width:700px){
  .testimonials-section{ width:100%; padding-left:16px; padding-right:16px; }
  .testimonials-heading{ margin-left:auto; margin-right:auto; text-align:center; }
  .carousel-row{ min-height:160px; padding:0; }
  .carousel-arrow{ display:none; }   /* swipe on mobile */
  .carousel-inner{ gap:0; }
  .testimonial-card{ flex:0 0 100%; padding:16px 14px; margin:0; }
  .read-more-btn{ margin-top:18px; }
}
@media (max-width:460px){
  .testimonial-card{ padding:12px 10px; }
  .read-more-btn{ margin-top:13px; }
}

    /* ----------- FAQ Section from 2nd file, Scoped ---------- */
    .faq-section {
      opacity: 0;
      transform: translateY(48px);
      animation: fadeInUp 0.9s cubic-bezier(0.3, 0.7, 0.4, 1) 0.3s forwards;
      width: 100vw;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f6f8fc;
      box-sizing: border-box;
      padding: 60px 0 0 0;
    }

    .faq-wrapper {
      max-width: 520px;
      width: 100%;
      margin: 0 auto;
      text-align: center;
      padding: 0 14px;
    }

    .faq-title {
      margin-bottom: 6px;
      font-size: 2.2rem;
      font-family: 'Poppins', 'Inter', Arial, sans-serif;
      font-weight: 700;
    }

    .faq-title .blue {
      color: #2965ff;
      font-style: italic;
      font-weight: 700;
      font-family: 'Poppins', 'Inter', Arial, sans-serif;
    }

    .faq-desc {
      color: #6c6e71;
      font-size: 1rem;
      margin-bottom: 30px;
      line-height: 1.5;
      font-family: 'Inter', Arial, sans-serif;
    }

    .faq-list {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-bottom: 38px;
    }

    .faq-item {
      background: #fff;
      border-radius: 22px;
      box-shadow: 0 4px 20px 0 rgba(80, 91, 201, 0.10), 0 1.5px 8px rgba(41, 101, 255, 0.07);
      transition: box-shadow 0.22s, border 0.22s;
      text-align: left;
      overflow: hidden;
      cursor: pointer;
      border: 1.5px solid #e8ebf0;
      outline: none;
      position: relative;
    }

    .faq-item.active {
      border: 2px solid #2965ff;
      box-shadow: 0 6px 24px 0 rgba(41, 101, 255, 0.11), 0 1.5px 8px rgba(41, 101, 255, 0.13);
      z-index: 2;
    }

    .faq-question {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: 700;
      font-size: 1rem;
      padding: 20px 28px;
      font-family: 'Inter', Arial, sans-serif;
      color: #222;
      background: none;
      border: none;
      cursor: pointer;
      width: 100%;
      gap: 14px;
      outline: none;
      transition: background 0.16s;
    }

    .faq-item.active .faq-question {
      color: #2965ff;
      background: #f4f7ff;
    }

    .faq-question span:first-child {
      flex: 1;
      text-align: left;
      word-break: break-word;
    }

    .faq-icon {
      font-size: 15px;
      color: #2965ff;
      transition: transform 0.25s cubic-bezier(0.5, 1.5, 0.4, 1), color 0.18s;
      flex-shrink: 0;
      margin-left: 12px;
      will-change: transform;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .faq-item.active .faq-icon {
      transform: rotate(180deg);
      color: #2965ff;
    }

    .faq-answer {
      padding: 0 28px 16px 28px;
      color: #6c6e71;
      font-size: 0.98rem;
      line-height: 1.5;
      font-family: 'Inter', Arial, sans-serif;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      pointer-events: none;
      will-change: max-height, opacity;
      transition: max-height 0.35s cubic-bezier(0.35, 0, 0.36, 1), opacity 0.22s cubic-bezier(0.3, 1, 0.4, 1);
    }

    .faq-item.active .faq-answer {
      max-height: 400px;
      opacity: 1;
      pointer-events: auto;
      transition: max-height 0.45s cubic-bezier(0.35, 0, 0.36, 1), opacity 0.28s cubic-bezier(0.3, 1, 0.4, 1);
    }

    .faq-button {
      margin: 32px auto 0;
      background: #2965ff;
      color: #fff;
      border: none;
      border-radius: 9px;
      font-family: 'Inter', Arial, sans-serif;
      font-weight: 600;
      font-size: 1rem;
      padding: 12px 38px;
      cursor: pointer;
      box-shadow: 0 3px 16px 0 rgba(41, 101, 255, 0.12);
      transition: background 0.2s;
    }

    .faq-button:hover {
      background: #194bbd;
    }

    /* ----------- Stay Connected Section ------------ */
    .connected-section {
      min-height: 100vh;
      width: 100vw;
      box-sizing: border-box;
      background: #f8fafd;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 56px;
      animation: fadeInUp 0.8s cubic-bezier(.77, 0, .175, 1);
      padding: 0 32px;
    }

    .connected-content {
      max-width: 510px;
      min-width: 320px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    }

    .connected-content h1 {
      font-size: 2.4rem;
      font-weight: 900;
      margin: 0 0 20px 0;
      color: #111;
      letter-spacing: -1px;
      line-height: 1.15;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    }

    .half-strike {
      position: relative;
      display: inline-block;
      font-style: italic;
      color: var(--main-blue);
      font-weight: 700;
      margin: 0 8px;
    }

    .half-strike::before {
      content: '';
      position: absolute;
      left: 0;
      top: 55%;
      width: 53%;
      height: 2px;
      background: var(--main-blue);
      z-index: 1;
      transform: translateY(-50%);
      pointer-events: none;
    }

    .connected-content p {
      font-size: 1.06rem;
      margin: 0 0 32px 0;
      color: #333;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0;
      font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    }

    .store-buttons {
      display: flex;
      gap: 18px;
      margin-top: 2px;
    }

    .store-btn {
      display: flex;
      align-items: center;
      background: var(--main-blue);
      color: #fff;
      border: 2px solid var(--main-blue);
      border-radius: 12px;
      box-shadow: var(--shadow);
      padding: 0 24px;
      font-size: 1.01rem;
      font-weight: 600;
      min-width: 165px;
      min-height: 52px;
      outline: none;
      cursor: pointer;
      text-align: left;
      transition: background 0.16s, box-shadow 0.16s, border 0.16s;
      gap: 12px;
      text-decoration: none;
      justify-content: flex-start;
      position: relative;
      z-index: 2;
    }

    .store-btn:active,
    .store-btn:focus {
      background: var(--blue-hover);
      border-color: var(--blue-hover);
    }

    .store-btn i {
      font-size: 1.65rem;
      margin-right: 7px;
      color: #fff;
    }

    .btn-details {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      line-height: 1.08;
    }

    .btn-small {
      font-size: 0.78rem;
      font-weight: 400;
      color: #e0eaff;
    }

    .btn-bold {
      font-weight: 700;
      color: #fff;
      font-size: 1.08rem;
      margin-top: 2px;
      letter-spacing: -0.5px;
    }

    .phone-frame {
      width: 235px;
      height: 450px;
      border: 3.5px solid #222;
      border-radius: 34px;
      background: #fff;
      box-shadow: 0 10px 40px rgba(30, 60, 140, 0.11);
      display: flex;
      align-items: flex-start;
      justify-content: center;
      position: relative;
      z-index: 1;
      overflow: hidden;
    }

    .pill-notch {
      position: absolute;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      width: 66px;
      height: 13px;
      background: #171717;
      border-radius: 8px;
      z-index: 3;
    }

    /* ----------- Responsive styles for FAQ/Connected ------------ */
    @media (max-width: 1100px) {

      .faq-section,
      .connected-section {
        min-height: unset;
        padding: 42px 0 0 0;
      }

      .connected-section {
        flex-direction: column;
        gap: 32px;
        padding: 36px 8vw 36px 8vw;
        align-items: stretch;
      }

      .connected-content {
        align-items: center;
        text-align: center;
        min-width: 0;
        width: 100%;
        max-width: 700px;
      }

      .phone-frame {
        margin: 22px auto 0 auto;
      }
    }

    @media (max-width: 800px) {

      .faq-section,
      .connected-section {
        padding: 18px 0 0 0;
      }

      .faq-wrapper {
        max-width: 98vw;
        margin-top: 6px;
        padding: 0 5vw;
      }

      .faq-title {
        font-size: 1.36rem;
      }

      .faq-desc {
        font-size: 1rem;
      }

      .connected-content h1 {
        font-size: 1.3rem;
      }

      .store-btn {
        padding: 0 10px;
        min-width: 110px;
        font-size: 0.97rem;
        min-height: 45px;
      }

      .connected-content p {
        font-size: 0.98rem;
      }

      .phone-frame {
        width: 170px;
        height: 332px;
        border-radius: 16px;
      }

      .pill-notch {
        width: 32px;
        height: 7px;
        border-radius: 4px;
        top: 8px;
      }
    }

    @media (max-width: 500px) {
      .faq-wrapper {
        padding: 0 2vw;
      }

      .faq-title {
        font-size: 1.02rem;
      }

      .faq-desc {
        font-size: 0.92rem;
      }

      .connected-section {
        padding: 10px 0 24px 0;
        gap: 16px;
      }

      .connected-content h1 {
        font-size: 0.92rem;
      }

      .store-btn {
        font-size: 0.91rem;
        min-width: 94px;
        min-height: 40px;
      }

      .phone-frame {
        width: 140px;
        height: 250px;
        border-radius: 12px;
      }

      .pill-notch {
        width: 20px;
        height: 4px;
        border-radius: 2px;
        top: 4px;
      }

      .faq-section {
        padding: 12px 0 0 0;
      }
    }

    /*========== Know More Section CSS =========*/
  :root {
      --wmn-blue: #1a73e8;
      --wmn-card-radius: 18px;
      --wmn-shadow: 0 6px 32px #0001;
      --wmn-anim-duration: 700ms;
    }

    .wmn-section {
      max-width: 1200px;
      margin: 44px auto 0 auto;
      padding: 18px 8px 44px 8px;
    }
    .wmn-title {
      text-align: center;
      font-family: 'Poppins', Arial, sans-serif;
      font-weight: 700;
      font-size: clamp(2rem, 4vw, 2.7rem);
      margin-bottom: 34px;
      letter-spacing: -1px;
    }
    .wmn-title .wmn-highlight {
      color: var(--wmn-blue);
      font-family: 'Inter', Arial, sans-serif;
      font-style: italic;
    }
    .wmn-grid {
      display: flex;
      gap: 32px;
      align-items: stretch;
    }
    .wmn-col {
      display: flex;
      flex-direction: column;
      flex: 1;
      gap: 32px;
    }
    .wmn-maincard,
    .wmn-sidecard {
      background: #fff;
      border-radius: var(--wmn-card-radius);
      box-shadow: var(--wmn-shadow);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: box-shadow .18s;
      height: 100%;
    }
    .wmn-maincard:hover,
    .wmn-sidecard:hover {
      box-shadow: 0 10px 40px #0002;
    }
    .wmn-maincard-video {
      width: 100%;
      aspect-ratio: 16 / 9;
      background: #f3f3f3;
      display: flex;
      align-items: center;
      justify-content: center;
      border-top-left-radius: var(--wmn-card-radius);
      border-top-right-radius: var(--wmn-card-radius);
      overflow: hidden;
      position: relative;
    }
    #wmn-player {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0; left: 0;
      background: #f3f3f3;
    }
    .wmn-maincard-content {
      padding: 22px 20px 18px 20px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .wmn-maincard-title {
      /* font-family: 'Poppins', Arial, sans-serif; */
      font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      font-weight: 600;
      font-size: 1.08rem;
      margin: 0 0 9px 0;
      line-height: 1.3;
    }
    .wmn-maincard-desc {
      color: #666;
      font-size: 1rem;
      line-height: 1.6;
      margin-bottom: 19px;
    }
    .wmn-learn-btn, .wmn-learn-btn-link {
      color: var(--wmn-blue);
      font-weight: 700;
      font-size: 1.01rem;
      /* font-family: 'Inter', Arial, sans-serif; */
      font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      margin: 0 0 8px 0;
      transition: color 0.2s;
      text-align: left;
      letter-spacing: .01em;
      margin-top: auto;
      text-decoration: none;
      display: inline-block;
    }
    .wmn-learn-btn:hover, .wmn-learn-btn-link:hover {
      text-decoration: underline;
      color: #b44c18;
    }
    .wmn-sidecards-list {
      display: flex;
      flex-direction: column;
      gap: 32px;
      height: 100%;
    }
    .wmn-sidecard {
      flex: 1;
      flex-direction: row;
      min-height: 0;
      position: relative;
      min-height: 220px;
    }
    .wmn-sidecard-inner {
      width: 100%;
      display: flex;
      flex-direction: row;
      animation: wmn-fadeSlideIn var(--wmn-anim-duration) cubic-bezier(0.4, 0.2, 0.2, 1);
      background: #fff;
    }
    @keyframes wmn-fadeSlideIn {
      from {
        opacity: 0;
        transform: translateY(40px) scale(0.97);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
    .wmn-sidecard-content {
      flex: 2;
      display: flex;
      flex-direction: column;
      padding: 24px 20px 20px 26px;
    }
    .wmn-sidecard-title {
      font-family: 'Poppins', Arial, sans-serif;
      font-weight: 600;
      font-size: 1.04rem;
      margin: 0 0 9px 0;
      line-height: 1.32;
    }
    .wmn-sidecard-desc {
      color: #666;
      font-size: .99rem;
      margin-bottom: 15px;
      line-height: 1.6;
    }
    .wmn-sidecard-img-wrap {
      flex: 1.1;
      display: flex;
    }
    .wmn-sidecard-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      background: #eee;
      border-radius: 0;
      image-rendering: optimizeQuality;
    }
    .wmn-read-blogs-btn {
      display: block;
      margin: 40px auto 0 auto;
      font-family: 'Poppins', Arial, sans-serif;
      color: var(--wmn-blue);
      background: none;
      border: 2px solid var(--wmn-blue);
      border-radius: 6px;
      padding: 10px 32px;
      font-weight: 600;
      font-size: 1.07rem;
      letter-spacing: 0.03em;
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
      box-shadow: none;
    }
    .wmn-read-blogs-btn {
      text-decoration: none;
    }
    .wmn-read-blogs-btn:hover {
      background: var(--wmn-blue);
      color: #fff;
    }
    @media (max-width: 950px) {
      .wmn-grid {
        flex-direction: column;
        gap: 32px;
      }
      .wmn-col {
        min-width: 0;
        width: 100%;
      }
      .wmn-sidecards-list {
        gap: 32px;
      }
    }
    @media (max-width: 700px) {
      .wmn-grid {
        gap: 18px;
      }
      .wmn-maincard-video {
        aspect-ratio: 16 / 9;
        min-height: 200px;
      }
      .wmn-maincard-content {
        padding: 18px 10px 16px 10px;
      }
      .wmn-sidecard {
        flex-direction: column;
        height: auto;
        min-height: 0;
      }
      .wmn-sidecard-inner {
        flex-direction: column;
        padding: 0;
      }
      .wmn-sidecard-img-wrap {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        order: 0;
        min-height: 120px;
      }
      .wmn-sidecard-content {
        order: 1;
        padding: 18px 12px 18px 12px;
      }
    }
    @media (max-width: 480px) {
      .wmn-title {
        font-size: 1.17rem;
      }
      .wmn-read-blogs-btn {
        width: 100%;
        font-size: 1rem;
      }
      .wmn-maincard-video {
        min-height: 120px;
      }
      .wmn-maincard-content {
        padding: 12px 4px 8px 4px;
      }
      .wmn-sidecard-content {
        padding: 12px 3px 12px 3px;
      }
      .wmn-sidecard-img-wrap {
        min-height: 96px;
      }
    }