.elementor-15799 .elementor-element.elementor-element-ffedf0e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-15799 .elementor-element.elementor-element-f756a17{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}/* Start custom CSS for html, class: .elementor-element-f756a17 *//* =========================================================
   SHAKTI CONSTRUCTION — PAGE SECTIONS STYLESHEET
   Updated to follow Design System (doc 3):
   - Font: Figtree everywhere
   - Typography scale aligned to design system:
     Desktop (1024px+): H1=48 H2=32 H3=28 H4=26 H5=24 H6=18 p=16
     Tablet (768–1023px): H1=36 H2=26 H3=24 H4=22 H5=20 H6=17 p=15
     Mobile (<768px):  H1=26 H2=22 H3=20 H4=18 H5=16 H6=15 p=14
   - Text colors from design tokens (unchanged)
   - Dark bg sections retain white/light text (unchanged)
   - No structural/border/layout changes
   ========================================================= */


  /* ── Design Tokens (aligned to design system doc 3) ── */
  :root {
    --sc-primary: #0082c6;
    --sc-primary-light: #33a0da;
    --sc-primary-dark: #0c63b2;
    --sc-dark-bg: #011a26;
    --sc-dark-card: #002638;
    --sc-dark-border: #175c7d;
    --sc-dark-icon: #003d5a;
    --sc-dark-sec: #002a3f;

    /* Design System text tokens */
    --sc-text-dark: #022b3e;
    --sc-text-body: #212529; /* ds-color-text */
    --sc-text-secondary: #495057; /* ds-color-text-secondary */
    --sc-text-muted: #adb5bd; /* ds-color-text-muted */
    --sc-text-gray: #848484;
    --sc-text-white: #ffffff;

    --sc-bg-light: #f5f6f8;
    --sc-bg-cap-icon: #f3fbff;
    --sc-content: 1200px;

    /* Design System font */
    --sc-font: "Figtree", "Inter", "Segoe UI", Arial, sans-serif;
  }

  /* ── Shared Utilities ── */
  .sc-container {
    max-width: var(--sc-content);
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
  }

  .sc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--sc-font);
    cursor: pointer;
    border: none;
    transition: all 0.25s;
    text-decoration: none;
  }
  
  
.sc-btn--cta-p-1 {
     background: #fff;
    color: var(--sc-text-dark);
    font-family: var(--sc-font);
    font-size: 18px;
    font-weight: 600;
    padding: 14px 20px;
    border-radius: 6px;
    width:100%;
    
}



.sc-btn--cta-p-1:hover {
  background: var(--sc-primary);
  color: #fff !important;
}

/* Arrow swap */
.sc-btn--cta-p-1 .sc-arrow-hover { display: none; }
.sc-btn--cta-p-1:hover .sc-arrow-default { display: none; }
.sc-btn--cta-p-1:hover .sc-arrow-hover { display: inline-flex; }

  .sc-line {
    height: 1px;
    flex-shrink: 0;
  }
  .sc-line--82 {
    width: 82px;
    background: #000;
  }
  .sc-line--123-dark {
    width: 123px;
    background: #000;
  }
  .sc-line--123-light {
    width: 123px;
    background: rgba(255, 255, 255, 0.4);
  }
  .sc-line--123-muted {
    width: 123px;
    background: rgba(0, 0, 0, 0.3);
  }

  .sc-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }

  /* Divider text = H5 → desktop 24px / tablet 20px / mobile 16px */
  .sc-divider__text {
    font-family: var(--sc-font);
    font-size: 24px; /* DS H5 desktop */
    font-weight: 600;
    white-space: nowrap;
  }
  .sc-divider__text--d {
    color: #000;
  }
  .sc-divider__text--w {
    color: #fff;
  }
  .sc-divider__text--m {
    color: rgba(0, 0, 0, 0.7);
  }

  .sc-icon-arrow {
    width: 20px;
    height: 20px;
    display: inline-flex;
  }
  .sc-icon-arrow svg {
    width: 100%;
    height: 100%;
  }

  /* ── sc-label (shared "About Us" tag) = H6 → desktop 18px */
  .sc-label {
    font-family: var(--sc-font);
    font-size: 18px; /* DS H6 desktop */
    font-weight: 600;
    color: var(--sc-text-gray);
    line-height: 1.4;
  }

  /* =========================================================
   SECTION CSS: HERO
========================================================= */
/* =========================================================
   SECTION CSS: HERO
========================================================= */

.sc-hero {
  padding: 20px 62px;
}

.sc-hero__inner {
  width: 100%;
  border-radius: 24px;
  /* overflow: hidden REMOVED — kills iOS video */
  background-color: #023a57;
  background-image: url('/wp-content/uploads/2026/04/hero-bg-scaled.webp');
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 550px;
  position: relative;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.sc-hero__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  border-radius: 24px;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.sc-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(174deg, rgba(0, 12, 37, 0.13) -3.28%, rgb(0 0 0 / 74%) 57.58%);
  z-index: 1;
  border-radius: 24px;
}

.sc-hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  position: relative;
  z-index: 2;
}

h1.sc-hero__heading {
  font-family: var(--sc-font);
  font-size: 110px;
  font-style: normal;
  font-weight: 400;
  color: #fff !important;
  text-align: center;
  line-height: 120px;
  letter-spacing: -1.1px;
  margin-top: 30px;
}

.sc-hero__buttons {
  display: flex;
  gap: 12px;
  align-items: center;
}

.sc-btn--hero-w {
  background: #fff;
  color: var(--sc-text-dark);
  font-family: var(--sc-font);
  font-size: 18px;
  font-weight: 600;
  padding: 14px 20px;
  border-radius: 6px;
  max-height: 54px;
}
.sc-btn--hero-w:hover { background: #f0f0f0; }

.sc-btn--hero-o {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-family: var(--sc-font);
  font-size: 18px;
  font-weight: 500;
  padding: 14px 20px;
  border: 1px solid #fff;
  border-radius: 6px;
  max-height: 54px;
  min-width:200px;
}
.sc-btn--hero-o:hover {
  background: #0082c6;
  color: #fff;
  border-color: #0082c6;
}

/* ── 1300–1440px ── */
@media (min-width: 1300px) and (max-width: 1440px) {
  h1.sc-hero__heading { font-size: 88px; line-height: 98px; }
  .sc-hero__inner { height: 620px; }
}

/* ── ≤1280px ── */
@media (max-width: 1280px) {
  .sc-hero { padding: 20px 40px; }
  .sc-hero__inner { height: 600px; }
  h1.sc-hero__heading { font-size: 80px; line-height: 98px; letter-spacing: -1px; }
}

/* ── 768–1007px ── */
@media (min-width: 768px) and (max-width: 1007px) {
  h1.sc-hero__heading { font-size: 60px; line-height: 70px; }
  .sc-hero__inner { height: 500px; }
}

/* ── ≤1024px ── */
@media (max-width: 1024px) {
  .sc-hero { padding: 16px 28px; }
  .sc-hero__inner { height: 560px; }
  .sc-hero__text { gap: 52px; }
  .sc-hero__heading { font-size: 68px; line-height: 78px; letter-spacing: -0.8px; }
  .sc-btn--hero-w,
  .sc-btn--hero-o { font-size: 16px; padding: 12px 18px; }
}

/* ── ≤768px ── */
@media (max-width: 768px) {
  .sc-hero { padding: 12px 16px; }
  .sc-hero__inner {
    height: 460px;
    border-radius: 16px;
  }
  .sc-hero__video { border-radius: 16px; }
  .sc-hero__overlay { border-radius: 16px; }
  h1.sc-hero__heading { font-size: 44px; line-height: 52px; letter-spacing: -0.5px; }
  .sc-hero__text { gap: 40px; }
  .sc-hero__buttons { flex-direction: column; width: 100%; max-width: 320px; }
  .sc-btn--hero-w,
  .sc-btn--hero-o {
    font-size: 16px;
    padding: 14px 20px;
    width: 100%;
    justify-content: center;
    border-radius: 8px;
  }
}

/* ── ≤480px ── */
@media (max-width: 480px) {
  .sc-hero { padding: 0; }
  .sc-hero__inner {
    height: 420px;
    border-radius: 0;
  }
  .sc-hero__video { border-radius: 0; }
  .sc-hero__overlay { border-radius: 0; }
  h1.sc-hero__heading { font-size: 36px; line-height: 42px; letter-spacing: -0.3px; }
  .sc-hero__text { gap: 32px; }
}

/* ── ≤390px (small iPhones) ── */
@media (max-width: 390px) {
  .sc-hero__inner { height: 380px; }
  h1.sc-hero__heading { font-size: 30px; line-height: 38px; }
}
  /* =========================================================
   SECTION CSS: ABOUT INTRO
   Light bg → dark text from design system
========================================================= */

  .sc-about-intro {
    background: linear-gradient(to right, #fff, #f2f2f2 47.48%, #fff 97.05%);
    padding: 60px 0;
  }
  .sc-about-intro__header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }

  /* H4 desktop = 26px per DS */
  .sc-about-intro__title {
    font-family: var(--sc-font);
    font-size: 26px; /* DS H4 desktop */
    font-weight: 600;
    color: var(--sc-text-body);
    line-height: 1.3;
  }

  /* p desktop = 16px */
  .sc-about-intro__desc {
    font-family: var(--sc-font);
    font-size: 18px; /* DS p desktop */
    line-height: 1.5;
    color: var(--sc-text-body);
    font-weight: 400;
  }

  @media (max-width: 1024px) {
    .sc-about-intro {
      padding: 48px 0;
    }
    .sc-about-intro__title {
      font-size: 22px;
    } /* DS H4 tablet */
    .sc-about-intro__desc {
      font-size: 16px;
    } /* DS p tablet */
  }
  @media (max-width: 768px) {
    .sc-about-intro {
      padding: 40px 0;
    }
    .sc-about-intro__header {
      gap: 12px;
    }
    .sc-about-intro__title {
      font-size: 18px;
    } /* DS H4 mobile */
    .sc-about-intro__desc {
      font-size: 16px;
    } /* DS p mobile */
    .sc-line--82 {
      width: 40px;
    }
  }
  @media (max-width: 480px) {
    .sc-about-intro__header {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }
    .sc-line--82 {
      display: none;
    }
  }
  
  
  
  
  
  
  
  

  /* =========================================================
   SECTION CSS: ABOUT DETAIL
   Light bg → dark text. Image overlay section.
========================================================= */

  .sc-about-detail {
    background: #fff;
    padding: 80px 0;
  }
  .sc-about-detail__inner {
    max-width: var(--sc-content);
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 40px 20px;
    position: relative;
    min-height: 520px;
  }
  .sc-about-detail__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
  }
  .sc-about-detail__bg img {
    width: 105%;
    height: 104%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: -2.5%;
  }
  .sc-about-detail__content {
    position: relative;
    z-index: 1;
    max-width: 605px;
  }

  /* .sc-label already defined above as H6 = 18px desktop */

  /* H3 desktop = 28px per DS */
  .sc-about-detail__heading {
    font-family: var(--sc-font);
    font-size: 28px; /* DS H3 desktop */
    font-weight: 600;
    color: var(--sc-text-body);
    line-height: 1.2;
    margin-top: 24px;
  }

  /* p = 16px */
  .sc-about-detail__text {
    font-family: var(--sc-font);
    font-size: 18px; /* DS p desktop */
    line-height: 1.5;
    color: var(--sc-text-body);
    margin-top: 24px;
    font-weight: 400;
  }
  .sc-about-detail__cta {
    margin-top: 64px;
  }
  .sc-btn--blue {
    background: var(--sc-primary);
    color: #fff;
    font-family: var(--sc-font);
    font-size: 14px;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: 6px;
  }
  .sc-btn--blue:hover {
    background: #006da6;
    color: #fff;
  }

  @media (max-width: 1024px) {
    .sc-about-detail {
      padding: 60px 0;
    }
    .sc-about-detail__inner {
      min-height: 460px;
    }
    .sc-about-detail__content {
      max-width: 500px;
    }
    .sc-about-detail__heading {
      font-size: 24px;
    } /* DS H3 tablet */
    .sc-about-detail__text {
      font-size: 16px;
    } /* DS p tablet */
    .sc-label {
      font-size: 17px;
    } /* DS H6 tablet */
  }
  @media (max-width: 768px) {
    .sc-about-detail {
      padding: 0 0 48px;
    }
    .sc-about-detail__inner {
      flex-direction: column;
      min-height: auto;
      padding: 0;
      align-items: stretch;
    }
    .sc-about-detail__bg {
      position: static;
      /*inset: auto;*/
      height: 100%;
      width: 100%;
      /*overflow: hidden;*/
      display: flex;
      justify-content: center;
      align-self: center;
      margin-top:50px;
    }
    .sc-about-detail__bg img {
      position: static;
      width: 400px;
      height: 400px;
     
      object-fit: contain;
      object-position: center;
     
    }
    .sc-about-detail__content {
      padding: 32px 20px 0;
      max-width: 100%;
      position: relative;
      z-index: 1;
      background: #fff;
    }
    .sc-label {
      font-size: 16px;
    } /* DS H6 mobile */
    .sc-about-detail__heading {
      font-size: 20px;
      margin-top: 12px;
    } /* DS H3 mobile */
    .sc-about-detail__text {
      font-size: 16px;
    } /* DS p mobile */
    .sc-about-detail__cta {
      margin-top: 32px;
    }
  }
  @media (max-width: 480px) {
    .sc-about-detail__bg {
      height: 270px;
    }
     .sc-about-detail__bg img {
      position: static;
      width: 300px;
      height: 250px; }
      
      .sc-btn--blue {
          width: 100%;
          max-width: 100%;
      }
  }

  /* =========================================================
   SECTION CSS: CAPABILITIES
   Light bg overlay → dark text
========================================================= */

  .sc-cap {
    background: var(--sc-bg-light);
    overflow: hidden;
    position: relative;
  }
  .sc-cap__wrap {
    position: relative;
    min-height: 976px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sc-cap__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .sc-cap__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .sc-cap__inner {
    position: relative;
    z-index: 1;
    max-width: var(--sc-content);
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding-top: 100px;
    padding-bottom: 150px;
    width: 100%;
  }
  .sc-cap__header {
    text-align: center;
    color: #011a26;
  }

  /* H2 desktop = 32px per DS */
  .sc-cap__title {
    font-family: var(--sc-font);
    font-size: 32px; /* DS H2 desktop */
    font-weight: 700;
    line-height: 1.2;
    color: #011a26;
  }

  /* p = 16px */
  .sc-cap__sub {
    font-family: var(--sc-font);
    font-size: 18px; /* DS p desktop */
    line-height: 1.5;
    color: var(--sc-text-secondary);
    max-width: 794px;
    margin: 20px auto 0;
    font-weight: 400;
  }

  .sc-cap__grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }
  .sc-cap__row {
    display: flex;
    gap: 16px;
  }
  .sc-cap-card {
    flex: 1;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
  }
  .sc-cap-card__icon {
    width: 98px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sc-bg-cap-icon);
    flex-shrink: 0;
    border-radius: 12px 0 0 12px;
  }
  
  p.sc-cap-card__desc{
      margin-bottom: 0px;
  }
  .sc-cap-card__icon img {
    width: 54px;
    height: 54px;
    object-fit: contain;
  }
  .sc-cap-card__body {
    padding: 26px 10px;
    flex: 1;
  }

  /* Card title = H6 → desktop 18px */
  .sc-cap-card__title {
    font-family: var(--sc-font);
    font-size: 18px; /* DS H6 desktop */
    font-weight: 600;
    color: var(--sc-text-dark);
    line-height: 1.4;
  }

  /* Card desc = p → 16px */
  .sc-cap-card__desc {
    font-family: var(--sc-font);
    font-size: 16px; /* DS p desktop */
    color: var(--sc-text-secondary);
    line-height: 1.5;
    margin-top: 2px;
    font-weight: 400;
  }

  @media (max-width: 1024px) {
    .sc-cap__wrap {
      min-height: auto;
      padding: 70px 0;
    }
    
    
    
    
    .sc-cap__title {
      font-size: 26px;
    } /* DS H2 tablet */
    .sc-cap__sub {
      font-size: 16px;
    } /* DS p tablet */
    .sc-cap-card__title {
      font-size: 17px;
    } /* DS H6 tablet */
    .sc-cap-card__desc {
      font-size: 16px;
    } /* DS p tablet */
    .sc-cap-card__icon img {
      max-width: 48px;
      height: 48px;
    }
    .sc-divider__text {
      font-size: 20px;
    } /* DS H5 tablet */
  }
  @media (max-width: 768px) {
    .sc-cap__wrap {
      padding: 60px 0;
    }
    
     .sc-cap-card{
         align-items: normal;
     }
    .sc-cap__inner {
      gap: 24px;
      padding: 0 20px;
    }
    .sc-cap__title {
      font-size: 22px;
    } /* DS H2 mobile */
    .sc-cap__sub {
      font-size: 16px;
    } /* DS p mobile */
    .sc-cap-card__title {
      font-size: 18px;
    } /* DS H6 mobile */
    .sc-cap-card__desc {
      font-size: 16px;
    } /* DS p mobile */
    .sc-line--123-dark,
    .sc-line--123-light,
    .sc-line--123-muted {
      width: 60px;
    }
    .sc-cap__row {
      flex-direction: column;
    }
    .sc-cap-card__icon {
      width: 80px;
      /*min-height: 88px;*/
           
       
        min-height: 100%;
        height: auto;
    }
    .sc-cap-card__icon img {
      max-width: 44px;
      height: 44px;
    }
    .sc-divider__text {
      font-size: 16px;
    } /* DS H5 mobile */
  }
  @media (max-width: 480px) {
    .sc-cap__title {
      font-size: 22px;
    }
    .sc-divider {
      gap: 10px;
    }
    .sc-line--123-dark,
    .sc-line--123-light,
    .sc-line--123-muted {
      width: 40px;
    }
    .sc-cap-card__icon {
      width: 68px;
   
  
  
     
    }
    .sc-cap-card__icon img {
      max-width: 38px;
      height: 38px;
    }
  }

  /* =========================================================
   SECTION CSS: PROJECTS & INDUSTRIES
   Dark bg → white/light text (kept as-is per instruction)
========================================================= */

  .sc-proj {
    background: var(--sc-dark-bg);
    padding: 80px 0;
    overflow: hidden;
  }
  .sc-proj__inner {
    max-width: var(--sc-content);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 0 20px;
  }
  .sc-proj__header {
    text-align: center;
    background: linear-gradient(
      to right,
      var(--sc-dark-bg),
      #003148 52.4%,
      var(--sc-dark-bg)
    );
    padding: 24px 120px;
    width: 100%;
  }

  /* H2 desktop = 32px per DS; dark bg → white */
  .sc-proj__title {
    font-family: var(--sc-font);
    font-size: 32px; /* DS H2 desktop */
    font-weight: 700;
    color: #fff !important;
    max-width: 1092px;
    line-height: 1.2;
    margin-top: 26px;
  }

  /* p = 16px; dark bg → white 80% */
  .sc-proj__desc {
    font-family: var(--sc-font);
    font-size: 16px; /* DS p desktop */
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    max-width: 897px;
    margin: 26px auto 0;
    font-weight: 400;
  }

  /* Industries label: uppercase caption */
  .sc-ind__label {
    font-family: var(--sc-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--sc-primary-light);
    letter-spacing: 3px;
    text-transform: uppercase;
  }

  /* Industries desc: p = 16px; dark bg → white */
  .sc-ind__desc {
    font-family: var(--sc-font);
    font-size: 18px; /* DS p desktop */
    line-height: 1.5;
    color: #fff;
    text-align: center;
    max-width: 800px;
    margin: 16px auto 0;
    font-weight: 400;
  }

  .sc-ind__grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
  }
  .sc-ind__row {
    display: flex;
    gap: 24px;
  }
  .sc-ind-card {
    flex: 1;
    background: var(--sc-dark-card);
    border: 1px solid var(--sc-dark-border);
    border-radius: 8px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .sc-ind-card__icon {
    width: 52px;
    height: 52px;
    background: var(--sc-dark-icon);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sc-ind-card__icon img {
    width: 26px;
    height: 26px;
  }

  /* Card title = H6 → desktop 18px; dark bg → light */
  .sc-ind-card__title {
    font-family: var(--sc-font);
    font-size: 18px; /* DS H6 desktop */
    font-weight: 600;
    color: #f1f1f1;
  }

  /* Card desc = p → 16px; dark bg → muted */
  .sc-ind-card__desc {
    font-family: var(--sc-font);
    font-size: 16px; /* DS p desktop */
    line-height: 1.5;
    color: #bfbfbf;
    font-weight: 400;
  }

  @media (max-width: 1024px) {
    .sc-proj__title {
      font-size: 26px;
    } /* DS H2 tablet */
    .sc-proj__desc {
      font-size: 16px;
    } /* DS p tablet */
    .sc-proj__header {
      padding: 24px 40px;
    }
    .sc-ind__row {
      flex-wrap: wrap;
    }
    .sc-ind-card {
      flex: 1 1 calc(50% - 12px);
    }
    .sc-ind-card__icon img {
      max-width: 24px;
      height: 24px;
    }
    .sc-ind-card__title {
      font-size: 17px;
    } /* DS H6 tablet */
    .sc-ind-card__desc {
      font-size: 16px;
    } /* DS p tablet */
    .sc-ind__desc {
      font-size: 16px;
    } /* DS p tablet */
  }
  @media (max-width: 768px) {
    .sc-proj {
      padding: 56px 0;
    }
    .sc-proj__inner {
      gap: 24px;
    }
    .sc-proj__header {
      padding: 24px 20px;
    }
    .sc-proj__title {
      font-size: 22px;
      line-height: 1.2;
      margin-top: 16px;
    } /* DS H2 mobile */
    .sc-proj__desc {
      font-size: 16px;
      text-align: left;
      margin-top: 16px;
    } /* DS p mobile */
    .sc-ind__label {
      font-size: 18px;
      letter-spacing: 2px;
      text-align: left !important;
    }
    .sc-ind__desc {
      font-size: 16px;
      margin-top: 12px;
      text-align: left !important;
    } /* DS p mobile */
    .sc-ind__row {
      flex-direction: column;
      gap: 16px;
    }
    .sc-ind-card {
      padding: 22px 20px;
    }
    .sc-ind-card__title {
      font-size: 18px;
    } /* DS H6 mobile */
    .sc-ind-card__desc {
      font-size: 16px;
    } /* DS p mobile */
    .sc-ind-card__icon {
      width: 44px;
      height: 44px;
    }
    .sc-ind-card__icon img {
      max-width: 22px;
      height: 22px;
    }
  }
  @media (max-width: 480px) {
    .sc-proj__title {
      font-size: 22px;
      text-align: left;
    }
     .sc-proj__header{
           padding-inline: 0;
     }
    .sc-ind-card__icon {
      width: 40px;
      height: 40px;
    }
    .sc-ind-card__icon img {
      max-width: 20px;
      height: 20px;
    }
  }

  /* =========================================================
   SECTION CSS: COMMITMENT
   White bg → dark text from design system
========================================================= */

  .sc-commit {
    background: #fff;
    padding: 80px 0;
    overflow: hidden;
  }
  .sc-commit__inner {
    max-width: var(--sc-content);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 0 20px;
  }
  .sc-commit__header {
    text-align: center;
  }

  /* H2 desktop = 32px per DS */
  .sc-commit__title {
    font-family: var(--sc-font);
    font-size: 32px; /* DS H2 desktop */
    font-weight: 700;
    color: var(--sc-dark-bg);
    line-height: 1.2;
    margin-top: 28px;
  }

  .sc-commit__cards {
    width: 100%;
    display: flex;
    gap: 32px;
  }
  .sc-commit-card {
    flex: 1;
    background: #fff;
    border-radius: 16px;
    padding: 48px 40px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
  }
  .sc-commit-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(
      to right,
      var(--sc-primary),
      var(--sc-primary-light)
    );
  }
  .sc-commit-card__icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin-bottom: 24px;
    background: #f8f9fa;
  }

  /* H4 desktop = 26px per DS */
  .sc-commit-card__title {
    font-family: var(--sc-font);
    font-size: 26px; /* DS H4 desktop */
    font-weight: 700;
    color: var(--sc-text-body);
    line-height: 1.3;
    margin-bottom: 16px;
  }

  /* p = 16px */
  .sc-commit-card__text {
    font-family: var(--sc-font);
    font-size: 16px; /* DS p desktop */
    line-height: 1.5;
    color: var(--sc-text-secondary);
    margin-bottom: 32px;
    font-weight: 400;
  }
  .sc-commit-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .sc-commit-card__tag {
    font-family: var(--sc-font);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid #ddd;
    color: var(--sc-text-body);
    background: #fff;
  }

  @media (max-width: 1024px) {
    .sc-commit__title {
      font-size: 26px;
      line-height: 1.2;
    } /* DS H2 tablet */
    .sc-commit-card {
      padding: 36px 28px;
    }
    .sc-commit-card__title {
      font-size: 22px;
    } /* DS H4 tablet */
    .sc-commit-card__text {
      font-size: 16px;
    } /* DS p tablet */
  }
  @media (max-width: 768px) {
    .sc-commit {
      padding: 56px 0;
    }
    .sc-commit__title {
      font-size: 22px;
      line-height: 1.2;
      margin-top: 16px;
    } /* DS H2 mobile */
    .sc-commit__cards {
      flex-direction: column;
    }
    .sc-commit-card {
      padding: 32px 24px;
    }
    .sc-commit-card__title {
      font-size: 18px;
    } /* DS H4 mobile */
    .sc-commit-card__text {
      font-size: 16px;
    } /* DS p mobile */
  }
  @media (max-width: 480px) {
    .sc-commit__title {
      font-size: 22px;
    }
  }

  /* =========================================================
   SECTION CSS: CLIENTS
   Dark bg → white/light text (kept as-is)
========================================================= */

  .sc-clients {
    background: var(--sc-dark-sec);
    padding: 80px 120px;
  }
  .sc-clients__inner {
    max-width: var(--sc-content);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }
  .sc-clients__header {
    text-align: center;
    max-width: 800px;
  }

  /* H3 desktop = 28px per DS; dark bg → white */
  .sc-clients__title {
    font-family: var(--sc-font);
    font-size: 28px; /* DS H3 desktop */
    font-weight: 700;
    color: #fff !important;
    line-height: 1.2;
    margin-top: 16px;
  }

  /* p = 16px; dark bg → muted light */
  .sc-clients__desc {
    font-family: var(--sc-font);
    font-size: 16px; /* DS p desktop */
    line-height: 1.5;
    color: #cecece;
    max-width: 700px;
    margin: 16px auto 0;
    text-align: center;
    font-weight: 400;
  }
  .sc-clients__logos {
    display: flex;
    gap: 32px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }
  .sc-client-logo {
    width: 150px;
    height: 80px;
    background: var(--sc-bg-light);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sc-font);
    font-size: 12px;
    font-weight: 500;
    color: #777;
  }

  @media (max-width: 1024px) {
    .sc-clients {
      padding: 80px 40px;
    }
    .sc-clients__title {
      font-size: 24px;
    } /* DS H3 tablet */
    .sc-clients__desc {
      font-size: 16px;
    } /* DS p tablet */
  }
  @media (max-width: 768px) {
    .sc-clients {
      padding: 56px 20px;
    }
    .sc-clients__inner {
      align-items: flex-start;
    }
    .sc-clients__header {
      width: 100%;
      text-align: center;
    }
    .sc-clients__title {
      font-size: 20px;
    } /* DS H3 mobile */
    .sc-clients__desc {
      font-size: 16px;
    } /* DS p mobile */
    .sc-clients__logos {
      display: grid;
      grid-template-columns: repeat(2, 150px);
      gap: 16px;
      justify-content: start;
    }
    .sc-client-logo {
      width: 150px;
      height: 80px;
      font-size: 11px;
    }
  }
  @media (max-width: 480px) {
    .sc-clients__logos {
      grid-template-columns: repeat(2, 150px);
      gap: 12px;
    }
  }

  /* =========================================================
   SECTION CSS: EQUIPMENT
   Light bg → dark text from design system
========================================================= */

  .sc-equip {
    background: var(--sc-bg-light);
    padding: 80px 0;
    overflow: hidden;
  }
  .sc-equip__inner {
    max-width: var(--sc-content);
    margin: 0 auto;
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 0 20px;
  }
  .sc-equip__left {
    width: 590px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  /* Label: muted text / caption */
  .sc-equip__label {
    font-family: var(--sc-font);
    font-size: 14px;
    color: var(--sc-text-secondary);
    line-height: 1.5;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  /* H3 desktop = 28px per DS */
  .sc-equip__heading {
    font-family: var(--sc-font);
    font-size: 28px; /* DS H3 desktop */
    font-weight: 600;
    color: var(--sc-text-body);
    line-height: 1.2;
    margin-top: 4px;
  }

  /* p = 16px */
  .sc-equip__desc {
    font-family: var(--sc-font);
    font-size: 16px; /* DS p desktop */
    color: var(--sc-text-secondary);
    line-height: 1.5;
    margin-top: 24px;
    font-weight: 400;
  }
  .sc-equip__images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .sc-equip__img {
    overflow: hidden;
    border-radius: 12px;
  }
  .sc-equip__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .sc-equip__img--full {
    grid-column: 1 / -1;
    height: 235px;
  }
  .sc-equip__img--half {
    height: 172px;
  }
  .sc-equip__right {
    flex: 1;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
    padding: 40px 30px;
  }

  /* Table header */
  .sc-eq-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 33px;
    font-family: var(--sc-font);
    font-size: 14px;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 2px;
  }
  .sc-eq-rows {
    display: flex;
    flex-direction: column;
    gap: 29px;
  }
  .sc-eq-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* Row text = p → 16px desktop */
  .sc-eq-name {
    font-family: var(--sc-font);
    font-size: 16px; /* DS p desktop */
    color: var(--sc-text-body);
    line-height: 1.5;
  }
  .sc-eq-qty {
    font-family: var(--sc-font);
    font-size: 16px; /* DS p desktop */
    font-weight: 600;
    color: #0584c7;
    text-align: right;
    white-space: nowrap;
  }

  @media (max-width: 1024px) {
    .sc-equip__inner {
      gap: 32px;
    }
    .sc-equip__left {
      width: 440px;
    }
    .sc-equip__heading {
      font-size: 24px;
    } /* DS H3 tablet */
    .sc-equip__desc {
      font-size: 16px;
    } /* DS p tablet */
    .sc-eq-name {
      font-size: 16px;
    } /* DS p tablet */
    .sc-eq-qty {
      font-size: 16px;
    } /* DS p tablet */
  }
  @media (max-width: 768px) {
    .sc-equip {
      padding: 56px 0;
    }
    .sc-equip__inner {
      flex-direction: column;
      gap: 40px;
    }
    .sc-equip__left {
      width: 100%;
      gap: 40px;
    }
    .sc-equip__heading {
      font-size: 20px;
    } /* DS H3 mobile */
    .sc-equip__desc {
      font-size: 16px;
    } /* DS p mobile */
    .sc-equip__right {
      width: 100%;
    }
    .sc-eq-header {
      margin-bottom: 24px;
    }
    .sc-eq-rows {
      gap: 22px;
    }
    .sc-eq-name {
      font-size: 14px;
    } /* DS p mobile */
    .sc-eq-qty {
      font-size: 14px;
    } /* DS p mobile */
  }
  @media (max-width: 480px) {
    .sc-equip__images {
      gap: 8px;
    }
    .sc-equip__img--full {
      height: 190px;
    }
    .sc-equip__img--half {
      height: 140px;
    }
  }

  /* =========================================================
   SECTION CSS: CTA
   White bg → dark text
========================================================= */

  .sc-cta {
    background: #fff;
    padding: 180px 0;
  }
  .sc-cta__inner {
    max-width: 941px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 0 20px;
  }

  /* H2 desktop = 32px per DS */
  .sc-cta__heading {
    font-family: var(--sc-font);
    font-size: 32px; /* DS H2 desktop */
    font-weight: 700;
    color: var(--sc-text-body);
    line-height: 1.2;
  }

  /* p = 16px */
  .sc-cta__desc {
    font-family: var(--sc-font);
    font-size: 16px; /* DS p desktop */
    font-weight: 400;
    color: #212529;
    line-height: 1.5;
    max-width: 786px;
    margin-top: 24px;
  }
  .sc-cta__buttons {
    display: flex;
    gap: 12px;
  }
  .sc-btn--cta-p {
    background: var(--sc-primary-light);
    color: #fff !important;
    font-family: var(--sc-font);
    font-size: 16px;
    font-weight: 600;
    padding: 14px 20px;
    border-radius: 6px;
  }
  .sc-btn--cta-p:hover {
    background: #0082c6;
  }
  .sc-btn--cta-s {
    background: rgba(255, 255, 255, 0.2);
    color: var(--sc-primary-light);
    font-family: var(--sc-font);
    font-size: 16px;
    font-weight: 500;
    padding: 14px 20px;
    border: 1px solid var(--sc-primary-light);
    border-radius: 6px;
    min-width: 185px;
  }
  .sc-btn--cta-s:hover {
    background:  #0082c6;
    color: #fff;
  }

  @media (max-width: 1024px) {
    .sc-cta {
      padding: 120px 0;
    }
    .sc-cta__heading {
      font-size: 26px;
    } /* DS H2 tablet */
    .sc-cta__desc {
      font-size: 16px;
    } /* DS p tablet */
  }
  @media (max-width: 768px) {
    .sc-cta {
      padding: 80px 0;
    }
    .sc-cta__inner {
      gap: 28px;
    }
    .sc-cta__heading {
      font-size: 22px;
      line-height: 1.2;
    } /* DS H2 mobile */
    .sc-cta__desc {
      font-size: 16px;
    } /* DS p mobile */
    .sc-cta__buttons {
      flex-direction: column;
      width: 100%;
      max-width: 320px;
    }
    .sc-btn--cta-p,
    .sc-btn--cta-s {
      font-size: 16px;
      padding: 14px 20px;
      width: 100%;
      justify-content: center;
    }
  }
  @media (max-width: 480px) {
    .sc-cta__heading {
      font-size: 22px;
    }
      .sc-btn--cta-p-1{
           width: 100%;
           max-width: 100%;
      }
      .hide-mob{
          display: none;
      }
     
     .sc-divider.mob-div{ 
           justify-content: start;
     }

      
  }
    
    
    
    /* About Detail — mobile/desktop image swap */
.sc-about-detail__bg-mobile {
  display: none;
}

@media (max-width: 767px) {
  .sc-about-detail__bg-desktop {
    display: none;
  }
  .sc-about-detail__bg-mobile {
    display: block;
  }
}/* End custom CSS */