/* ===== Shivalik Solar Energy — style.css ===== */
:root {
  --blue: #07579A;
  --navy: #062B49;
  --green: #3C9B35;
  --yellow: #F7B719;
  --bg: #F7FAFC;
  --ink: #10212F;
  --mute: #64748B;
  --line: #E2E8F0;
  --hf: 'Manrope', sans-serif;
  --h: 76px;
  --r: 6px
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--h)
}

body {
  font: 400 16px/1.7 Inter, sans-serif;
  color: var(--ink);
  background: #fff;
  overflow-x: hidden
}

img {
  max-width: 100%;
  display: block;
  object-fit: cover
}

a {
  color: inherit;
  text-decoration: none
}

ul,
ol {
  list-style: none
}

h1,
h2,
h3,
h4 {
  font-family: var(--hf);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--navy)
}

h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.7rem);
  margin-bottom: 16px
}

p {
  margin-bottom: 14px
}

:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px
}

.sse-wrap {
  width: min(1200px, 100% - 40px);
  margin-inline: auto
}

.sse-sec {
  padding: clamp(64px, 9vw, 112px) 0
}

.sse-alt {
  background: var(--bg)
}

.sse-mute {
  color: var(--mute)
}

.sse-head {
  max-width: 720px;
  margin-bottom: 44px
}

.sse-eyebrow {
  font: 600 .8rem/1 var(--hf);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 14px
}

.sse-eyebrow--light {
  color: var(--yellow)
}

.sse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  border: 1.5px solid var(--blue);
  border-radius: var(--r);
  background: var(--blue);
  color: #fff;
  font: 700 .85rem var(--hf);
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s
}

.sse-btn i {
  transition: transform .25s
}

.sse-btn:hover i.bi-arrow-right {
  transform: translateX(4px)
}

.sse-btn:hover {
  background: var(--navy);
  border-color: var(--navy)
}

.sse-btn--ghost {
  background: transparent;
  color: var(--blue)
}

.sse-btn--ghost:hover {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue)
}

.sse-btn--yellow {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--navy)
}

.sse-btn--yellow:hover {
  background: #fff;
  border-color: #fff
}

.sse-btn--outline {
  background: transparent;
  border-color: rgba(255, 255, 255, .6)
}

.sse-btn--outline:hover {
  background: #fff;
  color: var(--navy);
  border-color: #fff
}

.sse-btn--green {
  background: var(--green);
  border-color: var(--green)
}

.sse-btn--green:hover {
  background: #2f7d2a;
  border-color: #2f7d2a
}

.sse-link {
  font: 700 .9rem var(--hf);
  color: var(--blue);
  display: inline-flex;
  gap: 8px;
  margin-top: 24px
}

/* Header */
.sse-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--h);
  background: rgb(255, 255, 255);
  backdrop-filter: blur(8px);
  transition: background .3s, box-shadow .3s
}

.sse-header.is-solid {
  background: #fff;
  box-shadow: 0 2px 18px rgba(6, 43, 73, .09)
}

.sse-header__in {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 24px
}

.sse-logo img {
  height: 70px;
  width: auto;
  object-fit: contain
}

.sse-nav {
  display: flex;
  align-items: center;
  flex: 1
}

.sse-menu {
  display: flex;
  gap: 6px;
  margin: 0 auto
}

.sse-menu>li {
  position: relative;
  display: flex;
  align-items: center
}

.sse-menu a {
  padding: 14px 12px;
  font: 600 .9rem var(--hf);
  color: var(--ink);
  transition: color .2s
}

.sse-menu a:hover,
.sse-menu a.active {
  color: var(--blue)
}

.sse-sub-btn {
  background: none;
  border: 0;
  cursor: pointer;
  margin-left: -8px;
  color: var(--mute);
  font-size: .7rem
}

.sse-sub {
  position: absolute;
  top: 100%;
  left: -60px;
  width: min(460px, 90vw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--yellow);
  border-radius: var(--r);
  box-shadow: 0 20px 40px rgba(6, 43, 73, .14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: .25s
}

.sse-has-sub:hover .sse-sub,
.sse-has-sub:focus-within .sse-sub,
.sse-has-sub.open .sse-sub {
  opacity: 1;
  visibility: visible;
  transform: none
}

.sse-sub a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  font-weight: 500;
  border-radius: var(--r)
}

.sse-sub a:hover {
  background: var(--bg)
}

.sse-sub i {
  color: var(--green)
}

.sse-nav__cta {
  display: flex;
  gap: 14px
}

.sse-nav__cta .sse-btn {
  padding: 14px 18px
}

.sse-burger {
  display: none;
  margin-left: auto;
  background: none;
  border: 0;
  font-size: 2rem;
  color: var(--navy);
  cursor: pointer
}

/* =========================================================
   PREMIUM ABOUT SECTION
========================================================= */

.sse-premium-about {
    position: relative;

    padding: 115px 0;

    background: #ffffff;

    overflow: hidden;
}


/* =========================================================
   MAIN GRID
========================================================= */

.sse-premium-about__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);

    align-items: center;

    gap: 90px;
}


/* =========================================================
   IMAGE AREA
========================================================= */

.sse-premium-about__visual {
    position: relative;

    min-height: 570px;
}


/* IMAGE */

.sse-premium-about__image-wrap {
    position: relative;

    width: calc(100% - 55px);
    height: 530px;

    overflow: hidden;

    border-radius: 20px 20px 70px 20px;

    background: #e9eef1;

    box-shadow:
        0 25px 60px rgba(5, 43, 68, 0.13);
}

.sse-premium-about__image-wrap img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.7s ease;
}

.sse-premium-about__visual:hover
.sse-premium-about__image-wrap img {
    transform: scale(1.035);
}


/* IMAGE OVERLAY */

.sse-premium-about__image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(4, 46, 76, 0.02) 35%,
            rgba(4, 46, 76, 0.20) 100%
        );

    pointer-events: none;
}


/* =========================================================
   EXPERIENCE CARD
========================================================= */

.sse-premium-about__experience {
    position: absolute;

    right: 0;
    bottom: 38px;

    display: flex;
    align-items: center;

    gap: 16px;

    min-width: 214px;

    padding: 18px 20px;

    border-radius: 14px;

    background: #073b68;

    box-shadow:
        0 18px 40px rgba(5, 43, 68, 0.22);
}

.sse-premium-about__experience-icon {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    color: #073b68;
    background: #f7c51b;
}

.sse-premium-about__experience-icon i {
    font-size: 19px;
}

.sse-premium-about__experience-text {
    display: flex;
    align-items: center;

    gap: 12px;
}

.sse-premium-about__experience-text strong {
    color: #ffffff;

    font-family: "Manrope", sans-serif;
    font-size: 31px;
    line-height: 1;
    font-weight: 800;
}

.sse-premium-about__experience-text small {
    color: rgba(255, 255, 255, 0.72);

    font-family: "Inter", sans-serif;
    font-size: 12px;
    line-height: 1.45;
}


/* =========================================================
   FLOATING BADGE
========================================================= */

.sse-premium-about__solar-badge {
    position: absolute;

    left: -18px;
    top: 38px;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 14px 15px;

    border: 1px solid #e5ecef;
    border-radius: 50px;

    color: #073b68;
    background: rgba(255, 255, 255, 0.94);

    box-shadow:
        0 14px 30px rgba(5, 43, 68, 0.10);

    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 700;

    z-index: 3;
}

.sse-premium-about__solar-badge i {
    color: #f4bf12;
    font-size: 14px;
}


/* =========================================================
   CONTENT
========================================================= */

.sse-premium-about__content {
    max-width: 650px;
}


/* EYEBROW */

.sse-premium-about__eyebrow {
    display: flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 19px;

    color: #4fae2c;

    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2px;
}

.sse-premium-about__eyebrow span {
    width: 34px;
    height: 2px;

    background: #f4c21b;
}


/* HEADING */

.sse-premium-about__content h2 {
    max-width: 620px;

    margin: 0;

    color: #073b68;

    font-family: "Manrope", sans-serif;
    font-size: clamp(38px, 4vw, 54px);
    line-height: 1.08;
    font-weight: 800;

    letter-spacing: -1.8px;
}

.sse-premium-about__content h2 strong {
    display: block;

    color: #4fae2c;

    font-weight: 800;
}


/* TEXT */

.sse-premium-about__intro {
    margin: 24px 0 0;

    color: #344f63;

    font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 1.8;
    font-weight: 500;
}

.sse-premium-about__text {
    margin: 16px 0 0;

    color: #74828c;

    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   HIGHLIGHTS
========================================================= */

.sse-premium-about__highlights {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px 25px;

    margin-top: 30px;
}

.sse-premium-about__highlight {
    display: flex;
    align-items: center;

    gap: 11px;
}

.sse-premium-about__highlight-icon {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    color: #07558d;
    background: rgba(7, 85, 141, 0.08);
}

.sse-premium-about__highlight-icon i {
    font-size: 16px;
}

.sse-premium-about__highlight > div:last-child {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.sse-premium-about__highlight strong {
    color: #17364f;

    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 800;
}

.sse-premium-about__highlight span {
    color: #89949b;

    font-family: "Inter", sans-serif;
    font-size: 12px;
}


/* =========================================================
   STATS
========================================================= */

.sse-premium-about__stats {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    margin-top: 35px;

    padding-top: 25px;

    border-top: 1px solid #e4eaed;
}

.sse-premium-about__stat {
    position: relative;

    display: flex;
    flex-direction: column;

    gap: 4px;

    padding-right: 15px;
}

.sse-premium-about__stat:not(:last-child)::after {
    content: "";

    position: absolute;

    right: 15px;
    top: 5px;

    width: 1px;
    height: 38px;

    background: #dfe6ea;
}

.sse-premium-about__stat strong {
    color: #073b68;

    font-family: "Manrope", sans-serif;
    font-size: 25px;
    line-height: 1;
    font-weight: 800;
}

.sse-premium-about__stat strong span {
    color: #4fae2c;
}

.sse-premium-about__stat small {
    color: #89949c;

    font-family: "Inter", sans-serif;
    font-size: 12px;
}


/* =========================================================
   CTA
========================================================= */

.sse-premium-about__link {
    display: inline-flex;
    align-items: center;

    gap: 14px;

    margin-top: 29px;

    color: #073b68;

    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.sse-premium-about__link i {
    width: 31px;
    height: 31px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #ffffff;
    background: #073b68;

    transition: transform 0.3s ease;
}

.sse-premium-about__link:hover {
    color: #073b68;
}

.sse-premium-about__link:hover i {
    transform: translate(3px, -3px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .sse-premium-about {
        padding: 90px 0;
    }

    .sse-premium-about__grid {
        gap: 55px;
    }

    .sse-premium-about__visual {
        min-height: 500px;
    }

    .sse-premium-about__image-wrap {
        height: 470px;
    }

    .sse-premium-about__content h2 {
        font-size: 40px;
    }

    .sse-premium-about__highlights {
        gap: 14px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .sse-premium-about {
        padding: 70px 0;
    }

    .sse-premium-about__grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .sse-premium-about__visual {
        min-height: 414px;
    }

    .sse-premium-about__image-wrap {
        width: calc(100% - 30px);
        height: 380px;

        border-radius: 17px 17px 50px 17px;
    }

    .sse-premium-about__experience {
        right: 0;
        bottom: 20px;

        min-width: 185px;

        padding: 14px 16px;
    }

    .sse-premium-about__experience-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .sse-premium-about__experience-text strong {
        font-size: 27px;
    }

    .sse-premium-about__solar-badge {
        left: 0;
        top: 22px;
    }

    .sse-premium-about__content {
        text-align: center;
    }

    .sse-premium-about__eyebrow {
        justify-content: center;
    }

    .sse-premium-about__content h2 {
        font-size: 35px;
    }

    .sse-premium-about__intro {
        font-size: 16px;
    }

    .sse-premium-about__text {
        font-size: 12px;
    }

    .sse-premium-about__highlights {
        text-align: left;
    }

    .sse-premium-about__stats {
        text-align: left;
    }

    .sse-premium-about__link {
        margin-top: 25px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .sse-premium-about__visual {
        min-height: 355px;
    }

    .sse-premium-about__image-wrap {
        width: calc(100% - 20px);
        height: 325px;
    }

    .sse-premium-about__experience {
        bottom: 8px;
        right: 0;

        min-width: 165px;

        padding: 12px;
    }

    .sse-premium-about__experience-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .sse-premium-about__experience-text strong {
        font-size: 24px;
    }

    .sse-premium-about__experience-text small {
        font-size: 8px;
    }

    .sse-premium-about__content h2 {
        font-size: 31px;
    }

    .sse-premium-about__highlights {
        grid-template-columns: 1fr;
    }

    .sse-premium-about__stats {
        grid-template-columns: 1fr 1fr;

        gap: 20px 0;
    }

    .sse-premium-about__stat:not(:last-child)::after {
        display: none;
    }

}

/* =========================================================
   PREMIUM SOLUTIONS SECTION
========================================================= */

.sse-premium-solutions {
    position: relative;

    padding: 114px 0;

    background:
        linear-gradient(
            180deg,
            #f6f9fa 0%,
            #ffffff 100%
        );

    overflow: hidden;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.sse-premium-solutions__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 60px;

    margin-bottom: 55px;
}

.sse-premium-solutions__heading {
    max-width: 700px;
}

.sse-premium-solutions__eyebrow {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 16px;

    color: #4fae2c;

    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 800;

    letter-spacing: 2px;
}

.sse-premium-solutions__eyebrow span {
    width: 35px;
    height: 2px;

    background: #f4c21b;
}

.sse-premium-solutions__heading h2 {
    margin: 0;

    color: #073b68;

    font-family: "Manrope", sans-serif;
    font-size: clamp(36px, 4vw, 53px);
    line-height: 1.08;
    font-weight: 800;

    letter-spacing: -1.8px;
}

.sse-premium-solutions__heading h2 strong {
    display: block;

    color: #4fae2c;

    font-weight: 800;
}

.sse-premium-solutions__intro {
    max-width: 430px;

    margin: 0;

    color: #72818b;

    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   GRID
========================================================= */

.sse-premium-solutions__grid {
    margin-right: -12px;
    margin-left: -12px;
}

.sse-premium-solutions__grid > [class*="col-"] {
    padding-right: 12px;
    padding-left: 12px;

    margin-bottom: 24px;
}


/* =========================================================
   SOLUTION CARD
========================================================= */

.sse-premium-solution {
    position: relative;

    min-height: 330px;

    height: 100%;

    display: flex;
    flex-direction: column;

    padding: 28px;

    overflow: hidden;

    border: 1px solid #e1e8ed;
    border-radius: 18px;

    background: #ffffff;

    text-decoration: none;

    box-shadow:
        0 8px 25px rgba(5, 45, 72, 0.035);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.sse-premium-solution:hover {
    transform: translateY(-7px);

    border-color: rgba(7, 59, 104, 0.18);

    box-shadow:
        0 22px 45px rgba(5, 45, 72, 0.11);
}


/* =========================================================
   TOP
========================================================= */

.sse-premium-solution__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}


/* NUMBER */

.sse-premium-solution__number {
    color: #c7d2d9;

    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1px;

    transition: color 0.3s ease;
}

.sse-premium-solution:hover
.sse-premium-solution__number {
    color: #4fae2c;
}


/* =========================================================
   ICON
========================================================= */

.sse-premium-solution__icon {
    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    color: #07558d;

    background:
        rgba(7, 85, 141, 0.075);

    transition:
        color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;
}

.sse-premium-solution__icon i {
    font-size: 21px;
}

.sse-premium-solution:hover
.sse-premium-solution__icon {
    color: #ffffff;

    background: #07558d;

    transform: translateY(-2px) rotate(-3deg);
}


/* =========================================================
   CONTENT
========================================================= */

.sse-premium-solution__content {
    margin-top: 32px;
}

.sse-premium-solution__content > span {
    display: block;

    margin-bottom: 8px;

    color: #7d8a93;

    font-family: "Inter", sans-serif;
    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1.2px;
}

.sse-premium-solution__content h3 {
    margin: 0;

    color: #123b5d;

    font-family: "Manrope", sans-serif;
    font-size: 19px;
    line-height: 1.3;
    font-weight: 800;

    letter-spacing: -0.35px;
}

.sse-premium-solution__content p {
    margin: 11px 0 0;

    color: #7b8992;

    font-family: "Inter", sans-serif;
    font-size: 11px;
    line-height: 1.7;
}


/* =========================================================
   BOTTOM LINK
========================================================= */

.sse-premium-solution__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: auto;
    padding-top: 24px;

    border-top: 1px solid #edf1f3;

    color: #073b68;

    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 800;
}

.sse-premium-solution__bottom i {
    width: 31px;
    height: 31px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #dce5e9;
    border-radius: 50%;

    color: #073b68;
    background: #ffffff;

    transition:
        color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;
}

.sse-premium-solution:hover
.sse-premium-solution__bottom i {
    color: #ffffff;
    background: #073b68;

    transform: translate(2px, -2px);
}


/* =========================================================
   CARD DECORATION
========================================================= */

.sse-premium-solution::after {
    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    right: -75px;
    bottom: -75px;

    border: 1px solid rgba(7, 59, 104, 0.055);

    border-radius: 50%;

    transition:
        transform 0.5s ease,
        border-color 0.5s ease;
}

.sse-premium-solution:hover::after {
    transform: scale(1.25);

    border-color: rgba(79, 174, 44, 0.15);
}


/* =========================================================
   BOTTOM CTA
========================================================= */

.sse-premium-solutions__bottom {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 18px;

    margin-top: 25px;
    padding-top: 25px;

    border-top: 1px solid #e3e9ec;
}

.sse-premium-solutions__bottom p {
    margin: 0;

    color: #7b8790;

    font-family: "Inter", sans-serif;
    font-size: 11px;
}

.sse-premium-solutions__bottom a {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: #073b68;

    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}

.sse-premium-solutions__bottom a i {
    transition: transform 0.3s ease;
}

.sse-premium-solutions__bottom a:hover i {
    transform: translate(3px, -3px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .sse-premium-solutions {
        padding: 90px 0;
    }

    .sse-premium-solutions__head {
        align-items: flex-start;
        flex-direction: column;

        gap: 18px;
    }

    .sse-premium-solutions__intro {
        max-width: 650px;
    }

    .sse-premium-solution {
        min-height: 315px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .sse-premium-solutions {
        padding: 70px 0;
    }

    .sse-premium-solutions__head {
        margin-bottom: 35px;

        text-align: center;
    }

    .sse-premium-solutions__eyebrow {
        justify-content: center;
    }

    .sse-premium-solutions__heading h2 {
        font-size: 34px;
    }

    .sse-premium-solutions__intro {
        font-size: 12px;
        line-height: 1.75;
    }

    .sse-premium-solution {
        min-height: 290px;

        padding: 25px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .sse-premium-solutions__heading h2 {
        font-size: 30px;
    }

    .sse-premium-solutions__grid {
        margin-right: -7px;
        margin-left: -7px;
    }

    .sse-premium-solutions__grid > [class*="col-"] {
        padding-right: 7px;
        padding-left: 7px;

        margin-bottom: 14px;
    }

    .sse-premium-solution {
        min-height: 275px;

        padding: 23px;
    }

    .sse-premium-solution__content h3 {
        font-size: 18px;
    }

    .sse-premium-solutions__bottom {
        flex-direction: column;

        gap: 8px;

        text-align: center;
    }

}
/* =========================================================
   FORCE 4 CARDS PER ROW
========================================================= */

@media (min-width: 992px) {

    #solutions .sse-premium-solutions__grid {
        display: flex !important;
        flex-wrap: wrap !important;
        margin-right: -12px;
        margin-left: -12px;
    }

    #solutions .sse-premium-solutions__grid > .col-lg-3 {
        width: 25% !important;
        max-width: 25% !important;
        flex: 0 0 25% !important;

        padding-right: 12px !important;
        padding-left: 12px !important;
    }

}


/* TABLET - 2 CARDS */

@media (min-width: 768px) and (max-width: 991px) {

    #solutions .sse-premium-solutions__grid {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    #solutions .sse-premium-solutions__grid > .col-md-6 {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
    }

}


/* MOBILE - 1 CARD */

@media (max-width: 767px) {

    #solutions .sse-premium-solutions__grid {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    #solutions .sse-premium-solutions__grid > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

}


/* =========================================
   PREMIUM PM SURYA GHAR YOJANA
========================================= */

.sse-pm-premium {
    position: relative;
    overflow: hidden;
    padding: 105px 0;
    background:
        radial-gradient(circle at 82% 25%, rgba(39, 145, 91, 0.18), transparent 28%),
        radial-gradient(circle at 12% 85%, rgba(247, 197, 27, 0.08), transparent 30%),
        linear-gradient(135deg, #062b4d 0%, #073b68 48%, #052b4b 100%);
    color: #fff;
}


/* BACKGROUND GLOWS */

.sse-pm-premium__glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
}

.sse-pm-premium__glow--one {
    width: 420px;
    height: 420px;
    right: -170px;
    top: -180px;
    background: rgba(79, 174, 44, 0.08);
}

.sse-pm-premium__glow--two {
    width: 300px;
    height: 300px;
    left: -160px;
    bottom: -150px;
    background: rgba(247, 197, 27, 0.07);
}


/* MAIN GRID */

.sse-pm-premium__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(400px, 0.92fr);
    align-items: center;
    gap: 90px;
}


/* EYEBROW */

.sse-pm-premium__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    padding: 7px 16px 7px 7px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.07);
    color: #e8f6ed;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.sse-pm-premium__eyebrow-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f7c51b;
    color: #073b68;
    font-size: 14px;
}


/* HEADING */

.sse-pm-premium__content h2 {
    max-width: 680px;
    margin: 0;
    color: #fff;
    font-family: "Manrope", sans-serif;
    font-size: clamp(42px, 5vw, 68px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -2.4px;
}

.sse-pm-premium__content h2 span {
    display: block;
    color: #f7c51b;
}


/* DESCRIPTION */

.sse-pm-premium__description {
    max-width: 620px;
    margin: 27px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 16px;
    line-height: 1.8;
}


/* BUTTONS */

.sse-pm-premium__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 34px;
}

.sse-pm-premium__btn {
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 21px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.sse-pm-premium__btn i {
    font-size: 17px;
    transition: transform 0.3s ease;
}

.sse-pm-premium__btn--primary {
    background: #f7c51b;
    color: #073b68;
    box-shadow: 0 12px 30px rgba(247, 197, 27, 0.16);
}

.sse-pm-premium__btn--primary:hover {
    background: #ffd94b;
    color: #073b68;
    transform: translateY(-3px);
}

.sse-pm-premium__btn--primary:hover i {
    transform: translate(3px, -3px);
}

.sse-pm-premium__btn--secondary {
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.sse-pm-premium__btn--secondary:hover {
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    transform: translateY(-3px);
}


/* NOTE */

.sse-pm-premium__note {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 25px;
    color: rgba(255, 255, 255, 0.56);
    font-size: 12px;
}

.sse-pm-premium__note i {
    color: #67c94b;
    font-size: 17px;
}


/* =========================================
   RIGHT VISUAL PANEL
========================================= */

.sse-pm-premium__visual {
    position: relative;
    padding: 34px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 22px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.105),
            rgba(255, 255, 255, 0.035)
        );
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
}


/* TOP */

.sse-pm-premium__visual-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.sse-pm-premium__small-label {
    color: rgba(255, 255, 255, 0.50);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.sse-pm-premium__sun-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(247, 197, 27, 0.13);
    color: #f7c51b;
    font-size: 19px;
}


/* VISUAL TITLE */

.sse-pm-premium__visual-title {
    padding: 28px 0 25px;
}

.sse-pm-premium__visual-title span,
.sse-pm-premium__visual-title strong {
    display: block;
    font-family: "Manrope", sans-serif;
}

.sse-pm-premium__visual-title span {
    color: rgba(255, 255, 255, 0.62);
    font-size: 17px;
    font-weight: 600;
}

.sse-pm-premium__visual-title strong {
    margin-top: 3px;
    color: #fff;
    font-size: 31px;
    font-weight: 800;
    letter-spacing: -1px;
}


/* BENEFITS */

.sse-pm-premium__benefits {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.sse-pm-premium__benefit {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.045);
    transition: all 0.3s ease;
}

.sse-pm-premium__benefit:hover {
    border-color: rgba(247, 197, 27, 0.25);
    background: rgba(255, 255, 255, 0.075);
    transform: translateX(5px);
}

.sse-pm-premium__benefit-icon {
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(79, 174, 44, 0.13);
    color: #6fd052;
    font-size: 18px;
}

.sse-pm-premium__benefit strong,
.sse-pm-premium__benefit span {
    display: block;
}

.sse-pm-premium__benefit strong {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.sse-pm-premium__benefit span {
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.48);
    font-size: 11px;
}


/* BOTTOM */

.sse-pm-premium__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.sse-pm-premium__bottom span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 11px;
    font-weight: 600;
}

.sse-pm-premium__bottom i {
    color: #67c94b;
    font-size: 16px;
}


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

@media (max-width: 1100px) {

    .sse-pm-premium {
        padding: 85px 0;
    }

    .sse-pm-premium__grid {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 0.8fr);
        gap: 50px;
    }

    .sse-pm-premium__content h2 {
        font-size: 50px;
    }

}


@media (max-width: 991px) {

    .sse-pm-premium {
        padding: 75px 0;
    }

    .sse-pm-premium__grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .sse-pm-premium__content h2 {
        max-width: 700px;
    }

    .sse-pm-premium__description {
        max-width: 680px;
    }

    .sse-pm-premium__visual {
        max-width: 650px;
    }

}


@media (max-width: 576px) {

    .sse-pm-premium {
        padding: 65px 0;
    }

    .sse-pm-premium__content h2 {
        font-size: 38px;
        line-height: 1.08;
        letter-spacing: -1.5px;
    }

    .sse-pm-premium__description {
        margin-top: 20px;
        font-size: 14px;
        line-height: 1.75;
    }

    .sse-pm-premium__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .sse-pm-premium__btn {
        width: 100%;
    }

    .sse-pm-premium__note {
        align-items: flex-start;
    }

    .sse-pm-premium__visual {
        padding: 23px;
        border-radius: 17px;
    }

    .sse-pm-premium__visual-title {
        padding: 22px 0;
    }

    .sse-pm-premium__visual-title strong {
        font-size: 27px;
    }

    .sse-pm-premium__benefit {
        padding: 16px;
    }

    .sse-pm-premium__bottom {
        flex-direction: column;
        gap: 14px;
    }

}


/* =========================================
   PREMIUM WHY CHOOSE US
========================================= */

.sse-why-premium {
    position: relative;
    overflow: hidden;
    padding: 114px 0;
    background: #f7fafc;
}


/* MAIN GRID */

.sse-why-premium__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: center;
    gap: 90px;
}


/* =========================================
   IMAGE
========================================= */

.sse-why-premium__visual {
    position: relative;
    padding-bottom: 24px;
}

.sse-why-premium__image-wrap {
    position: relative;
    overflow: hidden;
    height: 614px;
    border-radius: 22px;
    background: #e9eef2;
    box-shadow: 0 25px 65px rgba(7, 59, 104, 0.12);
}

.sse-why-premium__image-wrap img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.sse-why-premium__image-wrap:hover img {
    transform: scale(1.035);
}


/* IMAGE OVERLAY */

.sse-why-premium__image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(3, 30, 53, 0.42),
        transparent 48%
    );
    pointer-events: none;
}


/* EXPERIENCE CARD */

.sse-why-premium__experience {
    position: absolute;
    left: 25px;
    bottom: 25px;
    min-width: 190px;
    padding: 20px 23px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 14px;
    background: rgba(4, 42, 72, 0.88);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(12px);
}

.sse-why-premium__experience strong {
    color: #f7c51b;
    font-family: "Manrope", sans-serif;
    font-size: 39px;
    font-weight: 800;
    line-height: 1;
}

.sse-why-premium__experience span {
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
}


/* IMAGE CAPTION */

.sse-why-premium__image-caption {
    position: absolute;
    right: -18px;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 17px;
    border-radius: 8px;
    background: #fff;
    color: #073b68;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 15px 35px rgba(7, 59, 104, 0.13);
}

.sse-why-premium__image-caption i {
    color: #4fae2c;
    font-size: 16px;
}


/* =========================================
   CONTENT
========================================= */

.sse-why-premium__content {
    max-width: 650px;
}


/* EYEBROW */

.sse-why-premium__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 17px;
    color: #4fae2c;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.sse-why-premium__eyebrow span {
    width: 30px;
    height: 2px;
    display: inline-block;
    background: #f7c51b;
}


/* HEADING */

.sse-why-premium__content h2 {
    margin: 0;
    color: #073b68;
    font-family: "Manrope", sans-serif;
    font-size: clamp(38px, 4vw, 54px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -1.8px;
}

.sse-why-premium__content h2 span {
    display: block;
    color: #4fae2c;
}


/* INTRO */

.sse-why-premium__intro {
    max-width: 600px;
    margin: 22px 0 32px;
    color: #66727d;
    font-size: 15px;
    line-height: 1.8;
}


/* =========================================
   FEATURES
========================================= */

.sse-why-premium__features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.sse-why-premium__feature {
    position: relative;
    min-height: 155px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
    overflow: hidden;
    border: 1px solid #e5ebef;
    border-radius: 16px;
    background: #fff;
    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.sse-why-premium__feature:hover {
    transform: translateY(-4px);
    border-color: rgba(79, 174, 44, 0.30);
    box-shadow: 0 16px 35px rgba(7, 59, 104, 0.09);
}


/* ICON */

.sse-why-premium__icon {
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #eef8e9;
    color: #4fae2c;
    font-size: 18px;
}

.sse-why-premium__feature h3 {
    margin: 1px 0 6px;
    color: #173c59;
    font-size: 14px;
    font-weight: 800;
}

.sse-why-premium__feature p {
    max-width: 230px;
    margin: 0;
    color: #78838d;
    font-size: 11px;
    line-height: 1.7;
}


/* NUMBER */

.sse-why-premium__number {
    position: absolute;
    right: 15px;
    top: 12px;
    color: #edf1f3;
    font-family: "Manrope", sans-serif;
    font-size: 24px;
    font-weight: 800;
}


/* CTA */

.sse-why-premium__link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    color: #073b68;
    text-decoration: none;
    font-size: 16px;
    font-weight: 800;
}

.sse-why-premium__link > span {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #073b68;
    color: #fff;
    transition: all 0.3s ease;
}

.sse-why-premium__link:hover {
    color: #4fae2c;
}

.sse-why-premium__link:hover > span {
    background: #4fae2c;
    transform: rotate(45deg);
}


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

@media (max-width: 1100px) {

    .sse-why-premium {
        padding: 90px 0;
    }

    .sse-why-premium__grid {
        gap: 55px;
    }

    .sse-why-premium__image-wrap {
        height: 540px;
    }

}


@media (max-width: 991px) {

    .sse-why-premium {
        padding: 80px 0;
    }

    .sse-why-premium__grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .sse-why-premium__visual {
        max-width: 650px;
    }

    .sse-why-premium__content {
        max-width: 700px;
    }

}


@media (max-width: 600px) {

    .sse-why-premium {
        padding: 65px 0;
    }

    .sse-why-premium__image-wrap {
        height: 430px;
        border-radius: 17px;
    }

    .sse-why-premium__experience {
        left: 15px;
        bottom: 15px;
        min-width: 165px;
        padding: 16px;
    }

    .sse-why-premium__experience strong {
        font-size: 32px;
    }

    .sse-why-premium__image-caption {
        right: 14px;
        padding: 11px 16px;
        font-size: 14px;
    }

    .sse-why-premium__content h2 {
        font-size: 36px;
        letter-spacing: -1.2px;
    }

    .sse-why-premium__intro {
        font-size: 14px;
    }

    .sse-why-premium__features {
        grid-template-columns: 1fr;
    }

    .sse-why-premium__feature {
        min-height: auto;
    }

}



/* =========================================
   PREMIUM SOLAR PROCESS
========================================= */

.sse-process-premium {
    position: relative;
    overflow: hidden;
    padding: 114px 0;
    background: #f7fafc;
}


/* MAIN GRID */

.sse-process-premium__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    align-items: start;
    gap: 80px;
}


/* =========================================
   IMAGE
========================================= */

.sse-process-premium__visual {
    position: sticky;
    top: 100px;
}

.sse-process-premium__image {
    position: relative;
    height: 690px;
    overflow: hidden;
    border-radius: 24px;
    background: #dfe8ed;
    box-shadow: 0 28px 70px rgba(7, 59, 104, 0.13);
}

.sse-process-premium__image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.sse-process-premium__image:hover img {
    transform: scale(1.035);
}


/* IMAGE OVERLAY */

.sse-process-premium__image-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to top,
            rgba(3, 29, 50, 0.72) 0%,
            rgba(3, 29, 50, 0.12) 48%,
            transparent 75%
        );
}


/* IMAGE FLOATING CARD */

.sse-process-premium__image-card {
    position: absolute;
    left: 25px;
    right: 25px;
    bottom: 25px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 14px;
    background: rgba(4, 42, 72, 0.86);
    backdrop-filter: blur(12px);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.20);
}

.sse-process-premium__image-card > span {
    width: 45px;
    height: 45px;
    flex: 0 0 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #f7c51b;
    color: #073b68;
    font-size: 19px;
}

.sse-process-premium__image-card strong,
.sse-process-premium__image-card small {
    display: block;
}

.sse-process-premium__image-card strong {
    color: #fff;
    font-family: "Manrope", sans-serif;
    font-size: 15px;
    font-weight: 800;
}

.sse-process-premium__image-card small {
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 11px;
}


/* =========================================
   CONTENT
========================================= */

.sse-process-premium__content {
    max-width: 720px;
}


/* EYEBROW */

.sse-process-premium__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 17px;
    color: #4fae2c;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.sse-process-premium__eyebrow span {
    width: 30px;
    height: 2px;
    background: #f7c51b;
}


/* HEADING */

.sse-process-premium__content h2 {
    margin: 0;
    color: #073b68;
    font-family: "Manrope", sans-serif;
    font-size: clamp(38px, 4vw, 54px);
    font-weight: 800;
    line-height: 1.07;
    letter-spacing: -1.8px;
}

.sse-process-premium__content h2 span {
    display: block;
    color: #4fae2c;
}


/* INTRO */

.sse-process-premium__intro {
    max-width: 650px;
    margin: 21px 0 34px;
    color: #697681;
    font-size: 15px;
    line-height: 1.8;
}


/* =========================================
   STEPS
========================================= */

.sse-process-premium__steps {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
}


/* CONNECTING LINE */

.sse-process-premium__steps::before {
    content: "";
    position: absolute;
    left: 29px;
    top: 28px;
    bottom: 28px;
    width: 1px;
    background: #dce5ea;
}


/* STEP */

.sse-process-premium__step {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 48px 48px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-height: 91px;
    padding: 15px 18px 15px 14px;
    border: 1px solid #e5ebef;
    border-radius: 16px;
    background: #fff;
    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.sse-process-premium__step:hover {
    transform: translateX(5px);
    border-color: rgba(79, 174, 44, 0.28);
    box-shadow: 0 14px 32px rgba(7, 59, 104, 0.08);
}


/* NUMBER */

.sse-process-premium__step-number {
    color: #c8d2d9;
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}


/* ICON */

.sse-process-premium__step-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e0edd9;
    border-radius: 12px;
    background: #f1f8ed;
    color: #4fae2c;
    font-size: 18px;
    transition: all 0.3s ease;
}

.sse-process-premium__step:hover .sse-process-premium__step-icon {
    background: #4fae2c;
    color: #fff;
    border-color: #4fae2c;
}


/* STEP CONTENT */

.sse-process-premium__step-content h3 {
    margin: 0;
    color: #173d5a;
    font-size: 14px;
    font-weight: 800;
}

.sse-process-premium__step-content p {
    margin: 4px 0 0;
    color: #7b8790;
    font-size: 11px;
    line-height: 1.6;
}


/* CTA */

.sse-process-premium__cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
    padding: 16px 18px;
    border-radius: 8px;
    background: #073b68;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.sse-process-premium__cta i {
    transition: transform 0.3s ease;
}

.sse-process-premium__cta:hover {
    background: #4fae2c;
    color: #fff;
    transform: translateY(-2px);
}

.sse-process-premium__cta:hover i {
    transform: translate(3px, -3px);
}


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

@media (max-width: 1100px) {

    .sse-process-premium {
        padding: 90px 0;
    }

    .sse-process-premium__grid {
        gap: 55px;
    }

    .sse-process-premium__image {
        height: 620px;
    }

}


@media (max-width: 991px) {

    .sse-process-premium {
        padding: 80px 0;
    }

    .sse-process-premium__grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .sse-process-premium__visual {
        position: relative;
        top: auto;
        max-width: 650px;
    }

    .sse-process-premium__image {
        height: 520px;
    }

    .sse-process-premium__content {
        max-width: 720px;
    }

}


@media (max-width: 600px) {

    .sse-process-premium {
        padding: 65px 0;
    }

    .sse-process-premium__image {
        height: 430px;
        border-radius: 18px;
    }

    .sse-process-premium__image-card {
        left: 15px;
        right: 15px;
        bottom: 15px;
        padding: 14px;
    }

    .sse-process-premium__content h2 {
        font-size: 36px;
        letter-spacing: -1.2px;
    }

    .sse-process-premium__intro {
        font-size: 14px;
    }

    .sse-process-premium__step {
        grid-template-columns: 34px 43px minmax(0, 1fr);
        gap: 14px;
        padding: 16px 12px 16px 6px;
    }

    .sse-process-premium__step-icon {
        width: 43px;
        height: 43px;
        font-size: 16px;
    }

    .sse-process-premium__steps::before {
        left: 26px;
    }

    .sse-process-premium__step-content h3 {
        font-size: 16px;
    }

    .sse-process-premium__step-content p {
        font-size: 14px;
    }

}


/* =========================================
   PREMIUM PRODUCTS SECTION
========================================= */

.sse-products-premium {
    padding: 114px 0;
    background: #ffffff;
}


/* =========================================
   HEADER
========================================= */

.sse-products-premium__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 48px;
}

.sse-products-premium__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    color: #4fae2c;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.sse-products-premium__eyebrow span {
    width: 30px;
    height: 2px;
    background: #f7c51b;
}

.sse-products-premium__head h2 {
    margin: 0;
    color: #073b68;
    font-family: "Manrope", sans-serif;
    font-size: clamp(38px, 4vw, 53px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -1.8px;
}

.sse-products-premium__head h2 span {
    display: block;
    color: #4fae2c;
}

.sse-products-premium__head > p {
    max-width: 414px;
    margin: 0 0 4px;
    color: #73808a;
    font-size: 14px;
    line-height: 1.8;
}


/* =========================================
   PRODUCT CARD
========================================= */

.sse-product-card {
    height: 100%;
    overflow: hidden;
    border: 1px solid #e8edf0;
    border-radius: 15px;
    background: #fff;
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.sse-product-card:hover {
    transform: translateY(-7px);
    border-color: rgba(79, 174, 44, 0.25);
    box-shadow: 0 22px 50px rgba(7, 59, 104, 0.11);
}


/* =========================================
   IMAGE
========================================= */

.sse-product-card__image {
    position: relative;
    height: 245px;
    overflow: hidden;
    background: #edf2f4;
}

.sse-product-card__image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.sse-product-card:hover .sse-product-card__image img {
    transform: scale(1.06);
}


/* IMAGE BADGE */

.sse-product-card__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    background: rgba(4, 43, 73, 0.84);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}


/* QUICK BUTTON */

.sse-product-card__quick {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f7c51b;
    color: #073b68;
    text-decoration: none;
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.3s ease;
}

.sse-product-card:hover .sse-product-card__quick {
    opacity: 1;
    transform: translateY(0);
}

.sse-product-card__quick:hover {
    background: #4fae2c;
    color: #fff;
}


/* =========================================
   CONTENT
========================================= */

.sse-product-card__content {
    position: relative;
    padding: 23px 22px 22px;
}

.sse-product-card__number {
    position: absolute;
    top: 18px;
    right: 20px;
    color: #edf1f3;
    font-family: "Manrope", sans-serif;
    font-size: 25px;
    font-weight: 800;
}

.sse-product-card__content h3 {
    position: relative;
    margin: 0;
    padding-right: 28px;
    color: #173d59;
    font-size: 16px;
    font-weight: 800;
}

.sse-product-card__content p {
    min-height: 58px;
    margin: 14px 0 18px;
    color: #78848e;
    font-size: 11px;
    line-height: 1.7;
}


/* LINK */

.sse-product-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #073b68;
    text-decoration: none;
    font-size: 11px;
    font-weight: 800;
}

.sse-product-card__link i {
    transition: transform 0.3s ease;
}

.sse-product-card__link:hover {
    color: #4fae2c;
}

.sse-product-card__link:hover i {
    transform: translateX(4px);
}


/* =========================================
   BOTTOM CTA
========================================= */

.sse-products-premium__bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 45px;
    padding-top: 25px;
    border-top: 1px solid #e8edf0;
}

.sse-products-premium__bottom span {
    color: #7a858e;
    font-size: 12px;
}

.sse-products-premium__bottom a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #073b68;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
}

.sse-products-premium__bottom a i {
    transition: transform 0.3s ease;
}

.sse-products-premium__bottom a:hover {
    color: #4fae2c;
}

.sse-products-premium__bottom a:hover i {
    transform: translate(3px, -3px);
}


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

@media (max-width: 991px) {

    .sse-products-premium {
        padding: 85px 0;
    }

    .sse-products-premium__head {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 38px;
    }

    .sse-products-premium__head > p {
        max-width: 600px;
    }

}


@media (max-width: 576px) {

    .sse-products-premium {
        padding: 65px 0;
    }

    .sse-products-premium__head h2 {
        font-size: 36px;
        letter-spacing: -1.2px;
    }

    .sse-product-card__image {
        height: 230px;
    }

    .sse-product-card__quick {
        opacity: 1;
        transform: none;
    }

    .sse-products-premium__bottom {
        align-items: center;
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

}
/* =========================================
   FORCE PRODUCT GRID LAYOUT
   4 COLUMNS DESKTOP
========================================= */

#products .sse-products-premium__grid {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin-left: -12px !important;
    margin-right: -12px !important;
}

#products .sse-products-premium__grid > [class*="col-"] {
    position: relative !important;
    width: 25% !important;
    max-width: 25% !important;
    flex: 0 0 25% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-bottom: 24px !important;
}


/* =========================================
   TABLET - 2 COLUMNS
========================================= */

@media (min-width: 576px) and (max-width: 991px) {

    #products .sse-products-premium__grid > [class*="col-"] {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
    }

}


/* =========================================
   MOBILE - 1 COLUMN
========================================= */

@media (max-width: 575px) {

    #products .sse-products-premium__grid {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #products .sse-products-premium__grid > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

}

/* =========================================
   PREMIUM SOLAR CALCULATOR
========================================= */

.sse-calculator-premium {
    position: relative;
    overflow: hidden;
    padding: 105px 0;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(79, 174, 44, 0.12),
            transparent 30%
        ),
        #f5f8fa;
}

.sse-calculator-premium__glow {
    position: absolute;
    width: 420px;
    height: 420px;
    right: -180px;
    bottom: -200px;
    border-radius: 50%;
    background: rgba(7, 59, 104, 0.04);
}


/* =========================================
   MAIN GRID
========================================= */

.sse-calculator-premium__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(400px, 0.78fr);
    align-items: center;
    gap: 85px;
}


/* =========================================
   LEFT CONTENT
========================================= */

.sse-calculator-premium__content {
    max-width: 650px;
}

.sse-calculator-premium__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    color: #4fae2c;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.sse-calculator-premium__eyebrow-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #eaf5e5;
    color: #4fae2c;
    font-size: 14px;
}


.sse-calculator-premium__content h2 {
    margin: 0;
    color: #073b68;
    font-family: "Manrope", sans-serif;
    font-size: clamp(38px, 4vw, 55px);
    font-weight: 800;
    line-height: 1.07;
    letter-spacing: -1.8px;
}

.sse-calculator-premium__content h2 span {
    display: block;
    color: #4fae2c;
}


.sse-calculator-premium__content > p {
    max-width: 600px;
    margin: 22px 0 34px;
    color: #707d87;
    font-size: 15px;
    line-height: 1.8;
}


/* =========================================
   FORM
========================================= */

.sse-calculator-premium__form {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 15px;
}

.sse-calculator-premium__field:first-child {
    grid-column: span 2;
}

.sse-calculator-premium__field label {
    display: block;
    margin-bottom: 8px;
    color: #29465d;
    font-size: 11px;
    font-weight: 800;
}


.sse-calculator-premium__input,
.sse-calculator-premium__select {
    position: relative;
    height: 54px;
    display: flex;
    align-items: center;
    border: 1px solid #dfe7eb;
    border-radius: 12px;
    background: #fff;
    transition: all 0.25s ease;
}

.sse-calculator-premium__input:focus-within,
.sse-calculator-premium__select:focus-within {
    border-color: #4fae2c;
    box-shadow: 0 0 0 4px rgba(79, 174, 44, 0.08);
}


.sse-calculator-premium__input > span {
    padding-left: 17px;
    color: #4fae2c;
    font-size: 15px;
    font-weight: 800;
}


.sse-calculator-premium__input input,
.sse-calculator-premium__select select {
    width: 100%;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #173d59;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
}

.sse-calculator-premium__input input {
    padding: 0 15px 0 9px;
}

.sse-calculator-premium__select select {
    appearance: none;
    padding: 0 42px 0 15px;
    cursor: pointer;
}

.sse-calculator-premium__select i {
    position: absolute;
    right: 17px;
    pointer-events: none;
    color: #71808a;
    font-size: 11px;
}


.sse-calculator-premium__input--city i {
    margin-left: 16px;
    color: #4fae2c;
    font-size: 14px;
}

.sse-calculator-premium__input--city input {
    padding-left: 11px;
}


/* NOTE */

.sse-calculator-premium__note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 18px;
    color: #8a949c;
    font-size: 14px;
    line-height: 1.6;
}

.sse-calculator-premium__note i {
    flex: 0 0 auto;
    margin-top: 2px;
    color: #4fae2c;
}


/* =========================================
   RESULTS PANEL
========================================= */

.sse-calculator-premium__results {
    padding: 29px;
    border: 1px solid #dfe7eb;
    border-radius: 20px;
    background: #073b68;
    box-shadow: 0 25px 65px rgba(7, 59, 104, 0.16);
}


/* RESULTS HEADER */

.sse-calculator-premium__results-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.sse-calculator-premium__results-head > div:first-child span {
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.sse-calculator-premium__results-head h3 {
    margin: 5px 0 0;
    color: #fff;
    font-family: "Manrope", sans-serif;
    font-size: 22px;
    font-weight: 800;
}


.sse-calculator-premium__sun {
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(247, 197, 27, 0.13);
    color: #f7c51b;
    font-size: 18px;
}


/* RESULT */

.sse-calculator-premium__result {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 12px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.045);
}


.sse-calculator-premium__result-icon {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(79, 174, 44, 0.14);
    color: #6fd052;
    font-size: 17px;
}


.sse-calculator-premium__result-text {
    flex: 1;
}

.sse-calculator-premium__result-text span {
    display: block;
    color: rgba(255, 255, 255, 0.48);
    font-size: 14px;
    font-weight: 600;
}

.sse-calculator-premium__result-text strong {
    display: block;
    margin-top: 4px;
    color: #fff;
    font-family: "Manrope", sans-serif;
    font-size: 20px;
    font-weight: 800;
}


/* SAVINGS */

.sse-calculator-premium__result--saving {
    border-color: rgba(247, 197, 27, 0.16);
    background: rgba(247, 197, 27, 0.07);
}

.sse-calculator-premium__result--saving .sse-calculator-premium__result-icon {
    background: rgba(247, 197, 27, 0.13);
    color: #f7c51b;
}


/* DISCLAIMER */

.sse-calculator-premium__result-footer {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 18px;
    padding-top: 17px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.sse-calculator-premium__result-footer > i {
    flex: 0 0 auto;
    margin-top: 2px;
    color: #6fd052;
    font-size: 16px;
}

.sse-calculator-premium__result-footer p {
    margin: 0;
    color: rgba(255, 255, 255, 0.43);
    font-size: 12px;
    line-height: 1.65;
}


/* CTA */

.sse-calculator-premium__cta {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
    border-radius: 8px;
    background: #f7c51b;
    color: #073b68;
    text-decoration: none;
    font-size: 11px;
    font-weight: 800;
    transition: all 0.3s ease;
}

.sse-calculator-premium__cta:hover {
    background: #ffd84b;
    color: #073b68;
    transform: translateY(-2px);
}

.sse-calculator-premium__cta i {
    transition: transform 0.3s ease;
}

.sse-calculator-premium__cta:hover i {
    transform: translate(3px, -3px);
}


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

@media (max-width: 1050px) {

    .sse-calculator-premium__grid {
        grid-template-columns: 1fr 0.85fr;
        gap: 50px;
    }

}


@media (max-width: 991px) {

    .sse-calculator-premium {
        padding: 80px 0;
    }

    .sse-calculator-premium__grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .sse-calculator-premium__content {
        max-width: 700px;
    }

    .sse-calculator-premium__results {
        max-width: 650px;
    }

}


@media (max-width: 600px) {

    .sse-calculator-premium {
        padding: 65px 0;
    }

    .sse-calculator-premium__content h2 {
        font-size: 36px;
        letter-spacing: -1.2px;
    }

    .sse-calculator-premium__content > p {
        font-size: 14px;
    }

    .sse-calculator-premium__form {
        grid-template-columns: 1fr;
    }

    .sse-calculator-premium__field:first-child {
        grid-column: span 1;
    }

    .sse-calculator-premium__results {
        padding: 21px;
        border-radius: 16px;
    }

}


/* Projects */
.sse-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 28px
}

.sse-filters button {
  padding: 9px 18px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 50px;
  font: 700 .8rem var(--hf);
  text-transform: uppercase;
  cursor: pointer;
  transition: .2s
}

.sse-filters button.on,
.sse-filters button:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff
}

.sse-proj {
  position: relative;
  overflow: hidden;
  border-radius: var(--r)
}

.sse-proj .sse-media {
  aspect-ratio: 1/1
}

.sse-proj__ov {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  color: #fff;
  background: linear-gradient(transparent 40%, rgba(6, 43, 73, .92));
  transition: background .3s
}

.sse-proj:hover .sse-proj__ov {
  background: rgba(6, 43, 73, .82)
}

.sse-proj__ov small {
  color: var(--yellow);
  font-weight: 600
}

.sse-proj__ov h3 {
  color: #fff;
  font-size: 1.05rem
}

.sse-proj__ov span {
  font-size: .85rem;
  opacity: .85
}

.sse-proj.hide {
  display: none
}

/* =========================================
   PREMIUM FAQ
========================================= */

.sse-faq-premium {
    padding: 114px 0;
    background: #f7fafc;
}


/* GRID */

.sse-faq-premium__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: 75px;
}


/* =========================================
   CONTENT
========================================= */

.sse-faq-premium__content {
    max-width: 760px;
}

.sse-faq-premium__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 17px;
    color: #4fae2c;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.sse-faq-premium__eyebrow span {
    width: 30px;
    height: 2px;
    background: #f7c51b;
}


.sse-faq-premium__content h2 {
    margin: 0;
    color: #073b68;
    font-family: "Manrope", sans-serif;
    font-size: clamp(38px, 4vw, 53px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -1.7px;
}

.sse-faq-premium__content h2 span {
    display: block;
    color: #4fae2c;
}


.sse-faq-premium__intro {
    max-width: 650px;
    margin: 20px 0 35px;
    color: #71808a;
    font-size: 14px;
    line-height: 1.8;
}


/* =========================================
   FAQ ITEMS
========================================= */

.sse-faq-premium__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


.sse-faq-item {
    overflow: hidden;
    border: 1px solid #e2e9ed;
    border-radius: 11px;
    background: #fff;
    transition: all 0.3s ease;
}

.sse-faq-item.active {
    border-color: rgba(79, 174, 44, 0.30);
    box-shadow: 0 12px 30px rgba(7, 59, 104, 0.06);
}


/* QUESTION */

.sse-faq-item__question {
    width: 100%;
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 20px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #173d59;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
}


.sse-faq-item__question i {
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eef7ea;
    color: #4fae2c;
    font-size: 15px;
    transition: transform 0.3s ease;
}


.sse-faq-item.active .sse-faq-item__question i {
    transform: rotate(45deg);
    background: #4fae2c;
    color: #fff;
}


/* ANSWER */

.sse-faq-item__answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
}

.sse-faq-item.active .sse-faq-item__answer {
    grid-template-rows: 1fr;
}

.sse-faq-item__answer p {
    min-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0 20px;
    color: #75828b;
    font-size: 12px;
    line-height: 1.8;
    transition: padding 0.35s ease;
}

.sse-faq-item.active .sse-faq-item__answer p {
    padding: 0 20px 19px;
}


/* =========================================
   SIDE CARD
========================================= */

.sse-faq-premium__side {
    position: sticky;
    top: 100px;
    overflow: hidden;
    padding: 30px;
    border-radius: 19px;
    background:
        radial-gradient(
            circle at 90% 5%,
            rgba(79, 174, 44, 0.18),
            transparent 32%
        ),
        #073b68;
    box-shadow: 0 25px 60px rgba(7, 59, 104, 0.15);
}


.sse-faq-premium__side-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    border-radius: 12px;
    background: rgba(247, 197, 27, 0.13);
    color: #f7c51b;
    font-size: 20px;
}


.sse-faq-premium__side-label {
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;
}


.sse-faq-premium__side h3 {
    margin: 9px 0 15px;
    color: #fff;
    font-family: "Manrope", sans-serif;
    font-size: 27px;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.7px;
}


.sse-faq-premium__side > p {
    margin: 0;
    color: rgba(255, 255, 255, 0.58);
    font-size: 11px;
    line-height: 1.75;
}


/* BUTTON */

.sse-faq-premium__side-btn {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 25px;
    border-radius: 8px;
    background: #f7c51b;
    color: #073b68;
    text-decoration: none;
    font-size: 11px;
    font-weight: 800;
    transition: all 0.3s ease;
}

.sse-faq-premium__side-btn:hover {
    background: #ffd84b;
    color: #073b68;
    transform: translateY(-2px);
}


/* PHONE */

.sse-faq-premium__phone {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 20px;
    padding-top: 19px;
    border-top: 1px solid rgba(255, 255, 255, 0.11);
    color: #fff;
    text-decoration: none;
}

.sse-faq-premium__phone > i {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(79, 174, 44, 0.15);
    color: #6fd052;
    font-size: 12px;
}

.sse-faq-premium__phone small,
.sse-faq-premium__phone strong {
    display: block;
}

.sse-faq-premium__phone small {
    color: rgba(255, 255, 255, 0.42);
    font-size: 12px;
}

.sse-faq-premium__phone strong {
    margin-top: 2px;
    color: #fff;
    font-size: 12px;
}


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

@media (max-width: 991px) {

    .sse-faq-premium {
        padding: 85px 0;
    }

    .sse-faq-premium__grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .sse-faq-premium__side {
        position: relative;
        top: auto;
        max-width: 600px;
    }

}


@media (max-width: 576px) {

    .sse-faq-premium {
        padding: 65px 0;
    }

    .sse-faq-premium__content h2 {
        font-size: 36px;
        letter-spacing: -1.2px;
    }

    .sse-faq-premium__intro {
        font-size: 16px;
    }

    .sse-faq-item__question {
        min-height: 63px;
        padding: 0 15px;
        font-size: 12px;
    }

    .sse-faq-item__answer p {
        padding-left: 15px;
        padding-right: 15px;
        font-size: 11px;
    }

    .sse-faq-item.active .sse-faq-item__answer p {
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 17px;
    }

    .sse-faq-premium__side {
        padding: 24px;
    }

}


/* =========================================
   PREMIUM FINAL CTA
========================================= */

.sse-final-cta {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 100px 0;
    color: #fff;
}


/* BACKGROUND */

.sse-final-cta__background {
    position: absolute;
    inset: 0;
    background:
        url("images/cta-solar.jpg")
        center center / cover no-repeat;
    transform: scale(1.02);
}


/* OVERLAY */

.sse-final-cta__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(3, 30, 52, 0.97) 0%,
            rgba(5, 49, 82, 0.91) 48%,
            rgba(3, 30, 52, 0.70) 100%
        );
}


/* CONTENT */

.sse-final-cta .sse-wrap {
    position: relative;
    z-index: 2;
}


.sse-final-cta__content {
    max-width: 760px;
}


/* EYEBROW */

.sse-final-cta__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.sse-final-cta__eyebrow > span {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f7c51b;
    color: #073b68;
    font-size: 14px;
}


/* HEADING */

.sse-final-cta__content h2 {
    margin: 0;
    color: #fff;
    font-family: "Manrope", sans-serif;
    font-size: clamp(44px, 5vw, 68px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -2.5px;
}

.sse-final-cta__content h2 span {
    display: block;
    color: #f7c51b;
}


/* DESCRIPTION */

.sse-final-cta__content > p {
    max-width: 620px;
    margin: 24px 0 32px;
    color: rgba(255, 255, 255, 0.66);
    font-size: 15px;
    line-height: 1.8;
}


/* BUTTONS */

.sse-final-cta__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}


.sse-final-cta__btn {
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0 21px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    transition: all 0.3s ease;
}


/* PRIMARY */

.sse-final-cta__btn--primary {
    background: #f7c51b;
    color: #073b68;
    box-shadow: 0 12px 35px rgba(247, 197, 27, 0.17);
}

.sse-final-cta__btn--primary:hover {
    background: #ffd94b;
    color: #073b68;
    transform: translateY(-3px);
}

.sse-final-cta__btn--primary i {
    transition: transform 0.3s ease;
}

.sse-final-cta__btn--primary:hover i {
    transform: translate(3px, -3px);
}


/* OUTLINE */

.sse-final-cta__btn--outline {
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.055);
    color: #fff;
    backdrop-filter: blur(8px);
}

.sse-final-cta__btn--outline:hover {
    border-color: rgba(255, 255, 255, 0.50);
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    transform: translateY(-3px);
}


/* =========================================
   FLOATING CARD
========================================= */

.sse-final-cta__card {
    position: absolute;
    right: 15px;
    bottom: 0;
    z-index: 3;
    min-width: 330px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px 16px 0 0;
    background: rgba(3, 39, 66, 0.82);
    box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(14px);
}


.sse-final-cta__card-icon {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(247, 197, 27, 0.13);
    color: #f7c51b;
    font-size: 18px;
}


.sse-final-cta__card span,
.sse-final-cta__card strong {
    display: block;
}


.sse-final-cta__card span {
    color: rgba(255, 255, 255, 0.40);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.2px;
}


.sse-final-cta__card strong {
    margin-top: 4px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}


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

@media (max-width: 991px) {

    .sse-final-cta {
        min-height: auto;
        padding: 90px 0;
    }

    .sse-final-cta__card {
        position: relative;
        right: auto;
        bottom: auto;
        margin-top: 45px;
        width: fit-content;
        border-radius: 16px;
    }

}


@media (max-width: 576px) {

    .sse-final-cta {
        padding: 70px 0;
    }

    .sse-final-cta__content h2 {
        font-size: 40px;
        letter-spacing: -1.5px;
    }

    .sse-final-cta__content > p {
        font-size: 16px;
    }

    .sse-final-cta__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .sse-final-cta__btn {
        width: 100%;
    }

    .sse-final-cta__card {
        width: 100%;
        min-width: 0;
        margin-top: 38px;
    }

}



/* =========================================
   PREMIUM SHIVALIK SOLAR FOOTER
========================================= */

.sse-footer-premium {
    position: relative;
    overflow: hidden;
    background: #042b4b;
    color: #fff;
}


/* =========================================
   MAIN FOOTER
========================================= */

.sse-footer-premium__main {
    position: relative;
    padding: 75px 0 65px;
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(79, 174, 44, 0.08),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #032b4b 0%,
            #073b68 55%,
            #052f52 100%
        );
}


/* subtle bottom glow */

.sse-footer-premium__main::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(247, 197, 27, 0.65),
        transparent
    );
}


/* =========================================
   GRID
========================================= */

.sse-footer-premium__grid {
    display: grid;
    grid-template-columns: 1.45fr 0.75fr 1fr 0.8fr 1.15fr;
    gap: 38px;
}


/* =========================================
   BRAND
========================================= */

.sse-footer-premium__brand {
    padding-right: 20px;
}


/* LOGO */

.sse-footer-premium__logo {
    display: inline-block;
    width: 270px;
    text-decoration: none;
}

.sse-footer-premium__logo img {
    width: 100%;
    height: auto;
    max-height: 125px;
    display: block;
    object-fit: contain;
    object-position: left center;
}


/* TAGLINE */

.sse-footer-premium__tagline {
    max-width: 280px;
    margin: 18px 0 25px;
    color: rgba(255, 255, 255, 0.63);
    font-size: 12px;
    line-height: 1.7;
}


/* BRAND POINTS */

.sse-footer-premium__points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sse-footer-premium__points span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.035);
    color: rgba(255, 255, 255, 0.60);
    font-size: 8px;
    font-weight: 700;
}

.sse-footer-premium__points i {
    color: #69c94c;
    font-size: 11px;
}


/* =========================================
   COLUMNS
========================================= */

.sse-footer-premium__column h4 {
    position: relative;
    margin: 7px 0 23px;
    padding-bottom: 12px;
    color: #fff;
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    font-weight: 800;
}

.sse-footer-premium__column h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 2px;
    background: #f7c51b;
}


/* LINKS */

.sse-footer-premium__links {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.sse-footer-premium__links a {
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.57);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.25s ease;
}

.sse-footer-premium__links a i {
    color: #f7c51b;
    font-size: 8px;
    transition: transform 0.25s ease;
}

.sse-footer-premium__links a:hover {
    color: #fff;
    transform: translateX(3px);
}

.sse-footer-premium__links a:hover i {
    transform: translateX(2px);
}


/* =========================================
   CONTACT
========================================= */

.sse-footer-premium__contact {
    padding-left: 5px;
}


.sse-footer-premium__contact-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 18px;
    color: #fff;
    text-decoration: none;
}


.sse-footer-premium__contact-icon {
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(247, 197, 27, 0.11);
    color: #f7c51b;
    font-size: 12px;
}


.sse-footer-premium__contact-item small,
.sse-footer-premium__contact-item strong {
    display: block;
}


.sse-footer-premium__contact-item small {
    margin-bottom: 3px;
    color: rgba(255, 255, 255, 0.38);
    font-size: 8px;
    font-weight: 600;
}


.sse-footer-premium__contact-item strong {
    color: rgba(255, 255, 255, 0.80);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    word-break: break-word;
}


/* =========================================
   BOTTOM BAR
========================================= */

.sse-footer-premium__bottom {
    background: #032541;
}


.sse-footer-premium__bottom-inner {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}


.sse-footer-premium__bottom p {
    margin: 0;
    color: rgba(255, 255, 255, 0.46);
    font-size: 12px;
}


/* BOTTOM LINKS */

.sse-footer-premium__bottom-links {
    display: flex;
    align-items: center;
    gap: 20px;
}

.sse-footer-premium__bottom-links a {
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    font-size: 12px;
    transition: color 0.25s ease;
}

.sse-footer-premium__bottom-links a:hover {
    color: #f7c51b;
}


/* SOCIAL */

.sse-footer-premium__social {
    display: flex;
    align-items: center;
    gap: 7px;
}

.sse-footer-premium__social a {
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.67);
    text-decoration: none;
    font-size: 12px;
    transition: all 0.25s ease;
}

.sse-footer-premium__social a:hover {
    border-color: #f7c51b;
    background: #f7c51b;
    color: #073b68;
    transform: translateY(-3px);
}


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

@media (max-width: 1100px) {

    .sse-footer-premium__grid {
        grid-template-columns: 1.3fr 0.8fr 1fr 0.8fr;
        row-gap: 45px;
    }

    .sse-footer-premium__brand {
        grid-column: span 4;
        padding-right: 0;
    }

    .sse-footer-premium__logo {
        width: 250px;
    }

}


@media (max-width: 767px) {

    .sse-footer-premium__main {
        padding: 60px 0 45px;
    }

    .sse-footer-premium__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px 25px;
    }

    .sse-footer-premium__brand {
        grid-column: span 2;
    }

    .sse-footer-premium__contact {
        padding-left: 0;
    }

    .sse-footer-premium__bottom-inner {
        padding-top: 20px;
        padding-bottom: 20px;
        flex-direction: column;
        text-align: center;
    }

    .sse-footer-premium__bottom-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px 18px;
    }

}


@media (max-width: 480px) {

    .sse-footer-premium__grid {
        grid-template-columns: 1fr;
    }

    .sse-footer-premium__brand {
        grid-column: span 1;
    }

    .sse-footer-premium__logo {
        width: 245px;
    }

    .sse-footer-premium__tagline {
        margin-top: 16px;
    }

    .sse-footer-premium__column h4 {
        margin-bottom: 18px;
    }

}

/* Floating buttons */
.sse-float {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 14px
}

.sse-float a {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: #fff;
  font-size: 1.25rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
  transition: transform .25s
}

.sse-float a:hover {
  transform: scale(1.08)
}

.sse-float__wa {
  background: #25D366
}

.sse-float__call {
  background: var(--blue)
}

/* Reveal */
.sse-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s, transform .6s
}

.sse-reveal.in {
  opacity: 1;
  transform: none
}

/* Responsive */
@media(max-width:1100px) {
  .sse-grid {
    grid-template-columns: repeat(3, 1fr)
  }

  .sse-menu a {
    padding: 14px 8px
  }

  .sse-footer__grid {
    grid-template-columns: repeat(3, 1fr)
  }
}

@media(max-width:991px) {
  .sse-burger {
    display: block
  }

  .sse-nav {
    position: fixed;
    top: var(--h);
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--h));
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    padding: 12px 20px 24px;
    background: #fff;
    box-shadow: 0 20px 30px rgba(6, 43, 73, .12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: .3s
  }

  .sse-nav.open {
    opacity: 1;
    visibility: visible;
    transform: none
  }

  .sse-menu {
    flex-direction: column;
    gap: 0;
    margin: 0
  }

  .sse-menu>li {
    flex-wrap: wrap;
    border-bottom: 1px solid var(--line)
  }

  .sse-menu>li>a {
    flex: 1;
    padding: 14px 0
  }

  .sse-sub-btn {
    margin: 0;
    padding: 14px
  }

  .sse-sub {
    position: static;
    width: 100%;
    grid-template-columns: 1fr;
    border: 0;
    box-shadow: none;
    padding: 0 0 8px;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none
  }

  .sse-has-sub:hover .sse-sub {
    display: none
  }

  .sse-has-sub.open .sse-sub {
    display: grid
  }

  .sse-nav__cta {
    margin-top: 16px;
    flex-direction: column
  }

  .sse-hero__grid,
  .sse-lead,
  .sse-about__grid,
  .sse-pm__grid,
  .sse-why,
  .sse-contact,
  .sse-calc {
    grid-template-columns: 1fr
  }

  .sse-hero__grid {
    gap: 32px
  }

  .sse-about__img figcaption {
    right: 16px
  }

  .sse-trust ul {
    grid-template-columns: 1fr 1fr
  }

  .sse-trust li:nth-child(3) {
    border-left: 0
  }

  .sse-trust li:nth-child(n+3) {
    border-top: 1px solid var(--line)
  }

  .sse-steps {
    grid-template-columns: 1fr;
    gap: 0;
    padding-left: 0
  }

  .sse-steps::before {
    top: 0;
    bottom: 0;
    left: 21px;
    right: auto;
    width: 1px;
    height: auto
  }

  .sse-steps li {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 0
  }

  .sse-steps span {
    margin: 0;
    flex: none
  }
}

@media(max-width:768px) {
  .sse-grid {
    grid-template-columns: 1fr 1fr
  }

  .sse-hero__card {
    display: none
  }

  .sse-footer__grid {
    grid-template-columns: 1fr 1fr
  }

  .sse-stats {
    grid-template-columns: 1fr 1fr
  }

  .sse-why__list {
    grid-template-columns: 1fr
  }

  .sse-float {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    flex-direction: row;
    gap: 0
  }

  .sse-float a {
    flex: 1;
    width: auto;
    height: 52px;
    border-radius: 0;
    box-shadow: none
  }

  .sse-footer {
    padding-bottom: 52px
  }
}

@media(max-width:540px) {

  .sse-grid,
  .sse-form,
  .sse-footer__grid {
    grid-template-columns: 1fr
  }

  .sse-hero {
    min-height: auto;
    padding-bottom: 96px
  }

  .sse-hero__btns .sse-btn {
    width: 100%
  }

  .sse-form--card,
  .sse-calc__in,
  .sse-calc__out {
    padding: 22px
  }

  .sse-logo img {
    height: 60px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }

  * {
    transition: none !important
  }

  .sse-reveal {
    opacity: 1;
    transform: none
  }
}



/* =========================================================
   SSX PREMIUM SOLAR HERO
   Completely new class system
========================================================= */

.ssx-hero {
    --ssx-navy: #071c2d;
    --ssx-blue: #0d3555;
    --ssx-yellow: #f7d21b;
    --ssx-green: #25c56f;
    --ssx-white: #ffffff;

    position: relative;
    width: 100%;
    min-height: 760px;
    overflow: hidden;
    isolation: isolate;
    background: var(--ssx-navy);
}


/* =========================================================
   CAROUSEL
========================================================= */

.ssx-carousel {
    position: relative;
    width: 100%;
    min-height: 760px;
    overflow: hidden;
}


.ssx-slide {
    position: absolute;
    inset: 0;

    width: 100%;
    min-height: 760px;

    opacity: 0;
    visibility: hidden;

    transform: scale(1.035);

    transition:
        opacity .75s ease,
        transform 1.1s cubic-bezier(.2,.65,.25,1),
        visibility .75s ease;

    z-index: 1;
}


.ssx-slide--active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    z-index: 3;
}


/* =========================================================
   SLIDE BACKGROUNDS
========================================================= */

.ssx-slide__image {
    position: absolute;
    inset: 0;

    background-size: cover;
    background-position: center;

    transform: scale(1.01);
}


.ssx-slide:first-child .ssx-slide__image {
    background-image: url("images/hero.jpg");
}


.ssx-slide--pm .ssx-slide__image {
    background-image: url("images/hero.jpg");
}


/* =========================================================
   DARK / LIGHT SHADES
========================================================= */

.ssx-slide:first-child .ssx-slide__shade {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(3,20,35,.96) 0%,
            rgba(3,25,42,.86) 38%,
            rgba(3,25,42,.46) 68%,
            rgba(3,25,42,.22) 100%
        );
}


.ssx-slide--pm .ssx-slide__shade {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.97) 0%,
            rgba(255,255,255,.91) 42%,
            rgba(255,255,255,.54) 72%,
            rgba(255,255,255,.08) 100%
        );
}


/* =========================================================
   CONTAINER
========================================================= */

.ssx-container {
    position: relative;
    z-index: 10;

    width: min(1380px, calc(100% - 80px));

    min-height: 760px;

    margin: auto;

    display: flex;
    align-items: center;
}


/* =========================================================
   SLIDE 01 LAYOUT
========================================================= */

.ssx-slide__layout {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(360px, .75fr);

    align-items: center;

    gap: clamp(35px, 5vw, 85px);
}


/* =========================================================
   MAIN CONTENT
========================================================= */

.ssx-main {
    max-width: 760px;
    color: #fff;
}


.ssx-kicker {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 20px;

    color: rgba(255,255,255,.82);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 2.2px;
}


.ssx-kicker__line {
    width: 42px;
    height: 2px;

    background: var(--ssx-yellow);

    border-radius: 20px;
}


.ssx-title {
    margin: 0;

    font-size: clamp(48px, 5.3vw, 78px);

    line-height: .98;

    letter-spacing: -3px;

    font-weight: 850;

    color: #fff;
}


.ssx-title em {
    color: var(--ssx-yellow);
    font-style: normal;
}


.ssx-description {
    max-width: 650px;

    margin: 27px 0 30px;

    color: rgba(255,255,255,.76);

    font-size: 15px;

    line-height: 1.75;
}


/* =========================================================
   ACTIONS
========================================================= */

.ssx-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;
}


.ssx-btn {
    min-height: 53px;

    padding: 0 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    border-radius: 9px;

    text-decoration: none;

    font-size: 14px;
    font-weight: 800;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease,
        box-shadow .3s ease;
}


.ssx-btn--primary {
    color: #10202d;

    background: var(--ssx-yellow);

    box-shadow:
        0 10px 30px rgba(247,210,27,.17);
}


.ssx-btn--primary:hover {
    transform: translateY(-3px);

    box-shadow:
        0 16px 35px rgba(247,210,27,.25);
}


.ssx-btn--outline {
    color: #fff;

    border: 1px solid rgba(255,255,255,.38);

    background: rgba(255,255,255,.06);

    backdrop-filter: blur(10px);
}


.ssx-btn--outline:hover {
    color: #132b40;

    background: #fff;

    border-color: #fff;

    transform: translateY(-3px);
}


/* =========================================================
   TRUST
========================================================= */

.ssx-trust {
    margin-top: 30px;

    display: flex;
    align-items: center;

    gap: 20px;
}


.ssx-call {
    display: flex;
    align-items: center;
    gap: 10px;

    color: #fff;

    text-decoration: none;
}


.ssx-call__icon {
    width: 41px;
    height: 41px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #17232d;

    background: var(--ssx-yellow);
}


.ssx-call__text {
    display: flex;
    flex-direction: column;
}


.ssx-call__text small {
    font-size: 10px;

    color: rgba(255,255,255,.62);
}


.ssx-call__text strong {
    font-size: 14px;
}


.ssx-trust__separator {
    width: 1px;
    height: 38px;

    background: rgba(255,255,255,.25);
}


.ssx-trust__item {
    display: flex;
    align-items: center;

    gap: 8px;

    color: rgba(255,255,255,.68);

    font-size: 11px;
}


.ssx-trust__item i {
    color: var(--ssx-yellow);

    font-size: 19px;
}


.ssx-trust__item span {
    display: flex;
    flex-direction: column;
}


.ssx-trust__item strong {
    color: #fff;
}


/* =========================================================
   PREMIUM GLASS CARD
========================================================= */

.ssx-glass-card {
    position: relative;

    padding: 30px;

    border: 1px solid rgba(255,255,255,.55);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(244,248,250,.90)
        );

    box-shadow:
        0 30px 80px rgba(0,0,0,.28);

    backdrop-filter: blur(18px);

    color: #102a40;
}


.ssx-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.ssx-card__badge {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 8px 12px;

    border-radius: 50px;

    color: #705b00;

    background: #fff1a7;

    font-size: 11px;
    font-weight: 800;
}


.ssx-card__number {
    color: #a9b1b7;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 2px;
}


.ssx-glass-card h2 {
    margin: 21px 0 20px;

    font-size: 30px;

    line-height: 1.08;

    letter-spacing: -1px;
}


.ssx-glass-card h2 span {
    color: #547084;
}


/* =========================================================
   SERVICES
========================================================= */

.ssx-services {
    border-top: 1px solid #e3e8eb;
}


.ssx-service {
    display: grid;

    grid-template-columns: 43px 1fr;

    gap: 13px;

    padding: 15px 0;

    border-bottom: 1px solid #e3e8eb;
}


.ssx-service__icon {
    width: 43px;
    height: 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    color: #b18a00;

    background: #fff3bd;

    font-size: 20px;
}


.ssx-service h3 {
    margin: 1px 0 4px;

    font-size: 13px;

    line-height: 1.3;
}


.ssx-service p {
    margin: 0;

    color: #77838c;

    font-size: 11px;

    line-height: 1.45;
}


.ssx-card__bottom {
    display: flex;

    flex-wrap: wrap;

    gap: 12px 18px;

    margin-top: 17px;

    color: #62727d;

    font-size: 10px;

    font-weight: 700;
}


.ssx-card__bottom i {
    color: #21a963;
}


/* =========================================================
   PM SLIDE
========================================================= */

.ssx-pm-layout {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(360px, .9fr);

    align-items: center;

    gap: 20px;
}


.ssx-pm-content {
    max-width: 760px;

    color: #113c67;
}


.ssx-pm-label {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 13px;

    color: #174777;

    font-size: 13px;

    font-weight: 900;

    letter-spacing: 1.8px;
}


.ssx-pm-label span {
    width: 38px;
    height: 3px;

    border-radius: 20px;

    background: #174777;
}


.ssx-pm-title {
    margin: 0;

    color: #e02227;

    font-size: clamp(43px, 5vw, 72px);

    line-height: .98;

    letter-spacing: -2.5px;

    font-weight: 900;
}


.ssx-pm-title strong {
    color: #103f72;
}


.ssx-pm-title span {
    display: block;

    margin-top: 10px;

    color: #174777;

    font-size: .58em;

    letter-spacing: -1px;
}


.ssx-pm-text {
    max-width: 650px;

    margin: 22px 0;

    color: #536675;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   SUBSIDY CARDS
========================================================= */

.ssx-subsidy {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 10px;

    max-width: 730px;
}


.ssx-subsidy-card {
    position: relative;

    min-height: 94px;

    padding: 15px;

    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: center;

    border-radius: 13px;

    color: #fff;

    box-shadow:
        0 12px 28px rgba(0,0,0,.13);
}


.ssx-subsidy-card::after {
    content: "";

    position: absolute;

    width: 70px;
    height: 70px;

    right: -20px;
    bottom: -30px;

    border-radius: 50%;

    background: rgba(255,255,255,.13);
}


.ssx-subsidy-card span {
    position: relative;
    z-index: 2;

    font-size: 12px;

    font-weight: 700;
}


.ssx-subsidy-card strong {
    position: relative;
    z-index: 2;

    margin-top: 4px;

    font-size: 25px;

    line-height: 1;
}


.ssx-subsidy-card--one {
    background:
        linear-gradient(135deg,#38208d,#6346ce);
}


.ssx-subsidy-card--two {
    background:
        linear-gradient(135deg,#d91f27,#fa5050);
}


.ssx-subsidy-card--three {
    background:
        linear-gradient(135deg,#116b45,#29965e);
}


/* =========================================================
   PM ACTIONS
========================================================= */

.ssx-pm-actions {
    display: flex;
    align-items: center;

    gap: 18px;

    margin-top: 22px;
}


.ssx-pm-button {
    min-height: 50px;

    padding: 0 17px;

    display: inline-flex;
    align-items: center;

    gap: 14px;

    border-radius: 9px;

    color: #18242d;

    background: var(--ssx-yellow);

    text-decoration: none;

    font-size: 13px;

    font-weight: 900;

    box-shadow:
        0 9px 25px rgba(206,166,0,.17);

    transition: .3s ease;
}


.ssx-pm-button:hover {
    transform: translateY(-3px);
}


.ssx-pm-button i {
    width: 29px;
    height: 29px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #fff;

    background: #173957;
}


.ssx-pm-phone {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: #174777;

    text-decoration: none;

    font-size: 13px;
}


.ssx-pm-phone i {
    color: #df2227;
}


/* =========================================================
   BENEFITS
========================================================= */

.ssx-pm-benefits {
    display: flex;

    align-items: center;

    gap: 22px;

    margin-top: 25px;
}


.ssx-benefit {
    display: flex;
    align-items: center;

    gap: 8px;

    color: #425462;

    font-size: 10px;

    font-weight: 800;
}


.ssx-benefit > div {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 38px;

    border-radius: 50%;

    color: #148250;

    background: #fff;

    box-shadow:
        0 7px 22px rgba(0,0,0,.12);
}


.ssx-benefit i {
    font-size: 17px;
}


/* =========================================================
   PM VISUAL
========================================================= */

.ssx-pm-visual {
    position: relative;

    min-height: 600px;

    display: flex;
    align-items: flex-end;
    justify-content: center;
}


.ssx-pm-image {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: flex-end;
    justify-content: center;
}


.ssx-pm-image img {
    display: block;

    width: auto;
    max-width: 100%;

    height: 590px;

    object-fit: contain;
    object-position: bottom center;

    filter:
        drop-shadow(0 30px 30px rgba(0,0,0,.18));
}


/* =========================================================
   ARROWS
========================================================= */

.ssx-arrow {
    position: absolute;

    top: 46%;

    z-index: 50;

    width: 46px;
    height: 46px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,.4);

    border-radius: 50%;

    color: #142b3d;

    background: rgba(255,255,255,.94);

    backdrop-filter: blur(12px);

    box-shadow:
        0 12px 35px rgba(0,0,0,.18);

    cursor: pointer;

    transition:
        transform .3s ease,
        background .3s ease;
}


.ssx-arrow:hover {
    transform: scale(1.08);

    background: var(--ssx-yellow);
}


.ssx-arrow--prev {
    left: 20px;
}


.ssx-arrow--next {
    right: 20px;
}


/* =========================================================
   PROGRESS DOTS
========================================================= */

.ssx-progress {
    position: absolute;

    left: 50%;

    bottom: 118px;

    z-index: 60;

    transform: translateX(-50%);

    display: flex;

    align-items: center;

    gap: 7px;
}


.ssx-dot {
    position: relative;

    width: 28px;
    height: 4px;

    padding: 0;

    overflow: hidden;

    border: 0;

    border-radius: 30px;

    background: rgba(255,255,255,.45);

    cursor: pointer;
}


.ssx-dot span {
    position: absolute;

    inset: 0;

    width: 0;

    border-radius: inherit;

    background: var(--ssx-yellow);
}


.ssx-dot--active {
    width: 48px;
}


.ssx-dot--active span {
    animation: ssxProgress 6s linear forwards;
}


@keyframes ssxProgress {

    from {
        width: 0;
    }

    to {
        width: 100%;
    }

}


/* =========================================================
   FEATURE BAR
========================================================= */

.ssx-feature-bar {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 45;

    min-height: 105px;

    border-top: 1px solid rgba(255,255,255,.12);

    background:
        linear-gradient(
            90deg,
            rgba(3,18,30,.94),
            rgba(4,27,43,.88)
        );

    backdrop-filter: blur(18px);
}


.ssx-feature-scroll {
    width: min(1380px, calc(100% - 80px));

    min-height: 105px;

    margin: auto;

    display: flex;
    align-items: center;

    justify-content: space-between;
}


.ssx-feature {
    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 180px;

    color: #fff;
}


.ssx-feature__icon {
    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--ssx-yellow);

    font-size: 24px;
}


.ssx-feature__icon--green {
    color: #3adb7d;
}


.ssx-feature strong,
.ssx-feature span {
    display: block;
}


.ssx-feature strong {
    font-size: 13px;
}


.ssx-feature span {
    margin-top: 3px;

    color: rgba(255,255,255,.58);

    font-size: 11px;
}


.ssx-feature-divider {
    width: 1px;
    height: 38px;

    background: rgba(255,255,255,.20);
}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1200px) {

    .ssx-container {
        width: min(100% - 70px, 1100px);
    }

    .ssx-title {
        font-size: 57px;
    }

    .ssx-pm-title {
        font-size: 56px;
    }

    .ssx-glass-card {
        padding: 24px;
    }

    .ssx-trust__item {
        display: none;
    }

    .ssx-trust__separator {
        display: none;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .ssx-hero,
    .ssx-carousel,
    .ssx-slide {
        min-height: 790px;
    }


    .ssx-container {
        width: calc(100% - 50px);

        min-height: 790px;

        padding-top: 35px;

        padding-bottom: 145px;
    }


    .ssx-slide__layout {

        grid-template-columns: 1fr;

        gap: 30px;

    }


    .ssx-main {
        max-width: 700px;
    }


    .ssx-glass-card {
        max-width: 600px;
    }


    .ssx-pm-layout {

        grid-template-columns: 1fr;

    }


    .ssx-pm-visual {
        display: none;
    }


    .ssx-pm-content {
        max-width: 750px;
    }


    .ssx-feature-scroll {

        width: 100%;

        padding: 0 25px;

        justify-content: flex-start;

        gap: 22px;

        overflow-x: auto;

        scrollbar-width: none;

    }


    .ssx-feature-scroll::-webkit-scrollbar {
        display: none;
    }


    .ssx-feature {
        flex: 0 0 auto;
    }


    .ssx-feature-divider {
        flex: 0 0 1px;
    }

}


/* =========================================================
   MOBILE LARGE
========================================================= */

@media (max-width: 650px) {

    .ssx-hero,
    .ssx-carousel,
    .ssx-slide {

        min-height: 900px;

    }


    .ssx-container {

        width: calc(100% - 34px);

        min-height: 900px;

        padding-top: 42px;

        padding-bottom: 145px;

    }


    .ssx-slide:first-child .ssx-slide__shade {

        background:
            linear-gradient(
                180deg,
                rgba(3,20,35,.91) 0%,
                rgba(3,20,35,.82) 65%,
                rgba(3,20,35,.96) 100%
            );

    }


    .ssx-slide--pm .ssx-slide__shade {

        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.95),
                rgba(255,255,255,.86) 65%,
                rgba(255,255,255,.96)
            );

    }


    .ssx-kicker {

        font-size: 9px;

        letter-spacing: 1.5px;

    }


    .ssx-title {

        font-size: clamp(38px, 10vw, 49px);

        letter-spacing: -1.7px;

        line-height: 1;

    }


    .ssx-description {

        margin: 20px 0 23px;

        font-size: 13px;

        line-height: 1.65;

    }


    .ssx-actions {

        display: grid;

        grid-template-columns: 1fr;

    }


    .ssx-btn {

        width: 100%;

        min-height: 50px;

    }


    .ssx-trust {

        margin-top: 22px;

    }


    .ssx-call__icon {

        width: 37px;
        height: 37px;

    }


    .ssx-glass-card {

        padding: 19px;

        border-radius: 16px;

    }


    .ssx-glass-card h2 {

        font-size: 23px;

        margin: 16px 0;

    }


    .ssx-service {

        padding: 12px 0;

    }


    .ssx-service__icon {

        width: 37px;
        height: 37px;

        font-size: 17px;

    }


    .ssx-card__bottom {

        display: none;

    }


    /* PM */

    .ssx-pm-title {

        font-size: clamp(37px, 10vw, 48px);

        letter-spacing: -1.5px;

    }


    .ssx-pm-title span {

        font-size: .62em;

    }


    .ssx-pm-text {

        font-size: 13px;

        margin: 18px 0;

    }


    .ssx-subsidy {

        grid-template-columns: 1fr;

        gap: 8px;

    }


    .ssx-subsidy-card {

        min-height: 69px;

        padding: 11px 14px;

    }


    .ssx-subsidy-card strong {

        font-size: 22px;

    }


    .ssx-pm-actions {

        align-items: flex-start;

        flex-direction: column;

        gap: 12px;

    }


    .ssx-pm-benefits {

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 13px;

    }


    .ssx-benefit {

        font-size: 9px;

    }


    .ssx-arrow {

        width: 36px;
        height: 36px;

        top: 44%;

        font-size: 13px;

    }


    .ssx-arrow--prev {

        left: 7px;

    }


    .ssx-arrow--next {

        right: 7px;

    }


    .ssx-progress {

        bottom: 118px;

    }


    .ssx-feature-bar {

        min-height: 95px;

    }


    .ssx-feature-scroll {

        min-height: 95px;

        padding: 0 17px;

    }


    .ssx-feature {

        min-width: 175px;

    }


    .ssx-feature__icon {

        width: 37px;
        height: 37px;

        font-size: 21px;

    }


}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

    .ssx-hero,
    .ssx-carousel,
    .ssx-slide {

        min-height: 930px;

    }


    .ssx-container {

        min-height: 930px;

    }


    .ssx-title {

        font-size: 35px;

    }


    .ssx-pm-title {

        font-size: 34px;

    }


    .ssx-glass-card {

        padding: 16px;

    }


    .ssx-benefit > div {

        width: 34px;
        height: 34px;

        flex-basis: 34px;

    }


    .ssx-benefit {

        gap: 5px;

    }

}


/* =========================================================
   REDUCE MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ssx-slide,
    .ssx-btn,
    .ssx-arrow,
    .ssx-pm-button {

        transition: none !important;

    }

    .ssx-dot--active span {

        animation: none;

        width: 100%;

    }

}

/* =========================================================
   SERVICES
========================================================= */

.sse-premium-card__services {
    display: flex;
    flex-direction: column;

    gap: 18px;
}

.sse-premium-card__service {
    display: grid;

    grid-template-columns: 48px minmax(0, 1fr);

    align-items: center;

    gap: 16px;
}

.sse-premium-service-icon {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #f4bf12;
    background: #ffffff;

    box-shadow:
        0 7px 20px rgba(5, 45, 75, 0.10);
}

.sse-premium-service-icon i {
    font-size: 20px;
}

.sse-premium-card__service h3 {
    margin: 0 0 4px;

    color: #18344e;

    font-family: "Manrope", sans-serif;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 800;
}

.sse-premium-card__service p {
    margin: 0;

    color: #687785;

    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.45;
}


/* =========================================================
   BOTTOM FEATURE BAR
========================================================= */

.sse-premium-hero__features {
    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    min-height: 105px;

    display: flex;
    align-items: center;

    background: #f8fafb;

    z-index: 5;

    clip-path: ellipse(78% 100% at 50% 100%);
}

.sse-premium-features__inner {
    width: 100%;

    display: grid;

    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr;

    align-items: center;

    gap: 22px;
}


/* FEATURE */

.sse-premium-feature {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 11px;
}

.sse-premium-feature__icon {
    width: 43px;
    height: 43px;

    flex: 0 0 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #07548c;
    background: rgba(7, 84, 140, 0.08);
}

.sse-premium-feature__icon i {
    font-size: 19px;
}

.sse-premium-feature__icon--green {
    color: #4fae2c;
    background: rgba(79, 174, 44, 0.10);
}

.sse-premium-feature > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sse-premium-feature strong {
    color: #073b68;

    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 800;
}

.sse-premium-feature span {
    color: #687681;

    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 500;
}


/* FEATURE DIVIDER */

.sse-premium-feature__divider {
    width: 1px;
    height: 42px;

    background: #d9e0e5;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .sse-premium-hero__container {
        padding-right: 30px;
        padding-left: 30px;
    }

    .sse-premium-hero__grid {
        gap: 45px;

        grid-template-columns:
            minmax(0, 1.1fr)
            minmax(320px, 0.7fr);
    }

    .sse-premium-hero__content h1 {
        font-size: 51px;
    }

    .sse-premium-hero__description {
        font-size: 14px;
    }

    .sse-premium-hero__card {
        max-width: 390px;
    }

    .sse-premium-feature strong {
        font-size: 14px;
    }

    .sse-premium-feature span {
        font-size: 12px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .sse-premium-hero {
        min-height: auto;

        background-position: center center;
    }

    .sse-premium-hero__overlay {
        background:
            linear-gradient(
                180deg,
                rgba(3, 35, 60, 0.95),
                rgba(3, 40, 67, 0.91)
            );
    }

    .sse-premium-hero__container {
        padding: 75px 20px 185px;
    }

    .sse-premium-hero__grid {
        display: flex;
        flex-direction: column;

        gap: 45px;
    }

    .sse-premium-hero__content {
        max-width: 650px;
        margin: 0 auto;

        text-align: center;
    }

    .sse-premium-hero__eyebrow {
        justify-content: center;

        font-size: 12px;
    }

    .sse-premium-hero__content h1 {
        font-size: clamp(37px, 10vw, 48px);
        letter-spacing: -1.5px;
    }

    .sse-premium-hero__description {
        margin-right: auto;
        margin-left: auto;

        font-size: 16px;
        line-height: 1.7;
    }

    .sse-premium-hero__actions {
        justify-content: center;
        flex-wrap: wrap;
    }

    .sse-premium-btn {
        min-height: 50px;

        padding: 0 17px;

        font-size: 11px;
    }

    .sse-premium-hero__trust {
        justify-content: center;
    }

    .sse-premium-trust-item {
        display: none;
    }

    .sse-premium-trust-divider {
        display: none;
    }

    .sse-premium-hero__card {
        max-width: 500px;

        margin: 0 auto;

        padding: 27px 23px;
    }

    .sse-premium-hero__card h2 {
        font-size: 24px;
    }

    .sse-premium-hero__features {
        min-height: 145px;

        clip-path: none;
    }

    .sse-premium-features__inner {
        grid-template-columns: 1fr 1fr;

        gap: 14px;

        padding: 16px;
    }

    .sse-premium-feature {
        justify-content: flex-start;
    }

    .sse-premium-feature__divider {
        display: none;
    }

    .sse-premium-feature__icon {
        width: 37px;
        height: 37px;

        flex-basis: 37px;
    }

    .sse-premium-feature strong {
        font-size: 14px;
    }

    .sse-premium-feature span {
        font-size: 12px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .sse-premium-hero__container {
        padding: 60px 16px 170px;
    }

    .sse-premium-hero__content h1 {
        font-size: 35px;
    }

    .sse-premium-hero__description {
        font-size: 12px;
    }

    .sse-premium-hero__actions {
        flex-direction: column;
        width: 100%;
    }

    .sse-premium-btn {
        width: 100%;
        max-width: 290px;
    }

    .sse-premium-hero__trust {
        margin-top: 27px;
    }

    .sse-premium-hero__card {
        padding: 24px 19px;
        border-radius: 16px;
    }

    .sse-premium-hero__card h2 {
        font-size: 21px;
    }

}

/* =========================================================
   PREMIUM SOLAR LEAD SECTION
========================================================= */

.sse-premium-lead {
    position: relative;
    padding: 105px 0;

    background:
        linear-gradient(
            135deg,
            #f5f8fa 0%,
            #ffffff 48%,
            #f3f8f3 100%
        );

    overflow: hidden;
}


/* Decorative glow */

.sse-premium-lead::before {
    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    top: -220px;
    left: -180px;

    border-radius: 50%;

    background: rgba(8, 92, 145, 0.06);

    pointer-events: none;
}

.sse-premium-lead::after {
    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    right: -180px;
    bottom: -220px;

    border-radius: 50%;

    background: rgba(79, 174, 44, 0.07);

    pointer-events: none;
}


/* =========================================================
   MAIN WRAPPER
========================================================= */

.sse-premium-lead__wrapper {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 0.85fr)
        minmax(520px, 1.15fr);

    align-items: center;

    gap: 80px;

    padding: 65px;

    border: 1px solid #e1e8ed;
    border-radius: 28px;

    background: #ffffff;

    box-shadow:
        0 25px 70px rgba(8, 42, 67, 0.09);
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.sse-premium-lead__content {
    max-width: 500px;
}


/* EYEBROW */

.sse-premium-lead__eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 20px;

    color: #4fae2c;

    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.sse-premium-lead__eyebrow span {
    width: 30px;
    height: 2px;

    background: #f4c21b;
}


/* HEADING */

.sse-premium-lead__content h2 {
    margin: 0;

    color: #073b68;

    font-family: "Manrope", sans-serif;
    font-size: clamp(38px, 4vw, 54px);
    line-height: 1.08;
    font-weight: 800;

    letter-spacing: -1.8px;
}

.sse-premium-lead__content h2 strong {
    display: block;

    color: #4fae2c;

    font-weight: 800;
}


/* DESCRIPTION */

.sse-premium-lead__content > p {
    max-width: 480px;

    margin: 22px 0 0;

    color: #687681;

    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.8;
}


/* =========================================================
   BENEFITS
========================================================= */

.sse-premium-lead__benefits {
    display: flex;
    flex-direction: column;

    gap: 17px;

    margin-top: 30px;
}

.sse-premium-lead__benefit {
    display: flex;
    align-items: center;

    gap: 12px;
}

.sse-premium-lead__benefit > span {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #ffffff;
    background: #4fae2c;
}

.sse-premium-lead__benefit > span i {
    font-size: 15px;
}

.sse-premium-lead__benefit > div {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.sse-premium-lead__benefit strong {
    color: #16344e;

    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 800;
}

.sse-premium-lead__benefit small {
    color: #7b8790;

    font-family: "Inter", sans-serif;
    font-size: 14px;
}


/* =========================================================
   CONTACT
========================================================= */

.sse-premium-lead__contact {
    display: inline-flex;
    align-items: center;

    gap: 11px;

    margin-top: 32px;

    color: #073b68;

    text-decoration: none;
}

.sse-premium-lead__contact-icon {
    width: 45px;
    height: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #ffffff;
    background: #073b68;
}

.sse-premium-lead__contact > span:nth-child(2) {
    display: flex;
    flex-direction: column;

    gap: 1px;
}

.sse-premium-lead__contact small {
    color: #7b8790;

    font-size: 14px;
}

.sse-premium-lead__contact strong {
    color: #073b68;

    font-family: "Manrope", sans-serif;
    font-size: 17px;
    font-weight: 800;
}

.sse-premium-lead__contact > i {
    margin-left: 7px;

    transition: transform 0.3s ease;
}

.sse-premium-lead__contact:hover > i {
    transform: translate(3px, -3px);
}


/* =========================================================
   FORM BOX
========================================================= */

.sse-premium-lead__form-box {
    padding: 35px;

    border-radius: 20px;

    background: #f7fafb;

    border: 1px solid #e5ecef;
}


/* FORM HEADER */

.sse-premium-lead__form-head {
    display: flex;
    align-items: center;

    gap: 16px;

    margin-bottom: 27px;
}

.sse-premium-lead__form-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;

    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #073b68,
            #087dbb
        );

    box-shadow:
        0 8px 18px rgba(7, 59, 104, 0.18);
}

.sse-premium-lead__form-icon i {
    font-size: 21px;
}

.sse-premium-lead__form-head h3 {
    margin: 0;

    color: #073b68;

    font-family: "Manrope", sans-serif;
    font-size: 20px;
    font-weight: 800;
}

.sse-premium-lead__form-head p {
    margin: 3px 0 0;

    color: #78848d;

    font-family: "Inter", sans-serif;
    font-size: 11px;
}


/* =========================================================
   FORM GRID
========================================================= */

.sse-premium-form {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px 15px;
}


/* FIELD */

.sse-premium-field {
    display: block;
}

.sse-premium-field > span {
    display: block;

    margin-bottom: 7px;

    color: #233d53;

    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 700;
}

.sse-premium-field > span b {
    color: #e34d4d;
}


/* =========================================================
   INPUT
========================================================= */

.sse-premium-input {
    position: relative;

    display: flex;
    align-items: center;
}

.sse-premium-input > i:first-child {
    position: absolute;
    left: 14px;

    color: #71818d;

    font-size: 15px;

    pointer-events: none;
}

.sse-premium-input input,
.sse-premium-input select {
    width: 100%;
    height: 49px;

    padding: 0 14px 0 40px;

    border: 1px solid #dce5ea;
    border-radius: 12px;

    outline: none;

    color: #19364e;
    background: #ffffff;

    font-family: "Inter", sans-serif;
    font-size: 12px;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.sse-premium-input input::placeholder {
    color: #a1abb2;
}

.sse-premium-input input:focus,
.sse-premium-input select:focus {
    border-color: #0878b7;

    box-shadow:
        0 0 0 3px rgba(8, 120, 183, 0.08);
}


/* SELECT */

.sse-premium-input select {
    appearance: none;
    -webkit-appearance: none;

    cursor: pointer;
}

.sse-select-arrow {
    position: absolute;

    right: 14px;

    color: #75848e !important;

    font-size: 11px !important;

    pointer-events: none;
}


/* =========================================================
   SUBMIT
========================================================= */

.sse-premium-form__submit {
    grid-column: 1 / -1;

    min-height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    margin-top: 3px;

    border: 0;
    border-radius: 12px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #073b68,
            #086fa7
        );

    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 14px 25px rgba(7, 59, 104, 0.16);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.sse-premium-form__submit i {
    transition: transform 0.3s ease;
}

.sse-premium-form__submit:hover {
    transform: translateY(-2px);

    box-shadow:
        0 14px 30px rgba(7, 59, 104, 0.22);
}

.sse-premium-form__submit:hover i {
    transform: translate(3px, -3px);
}


/* =========================================================
   SUCCESS
========================================================= */

.sse-premium-form__success {
    grid-column: 1 / -1;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    margin: 0;

    color: #31831f;

    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 600;
}


/* =========================================================
   NOTE
========================================================= */

.sse-premium-form__note {
    grid-column: 1 / -1;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 5px;

    margin-top: -5px;

    color: #89949c;

    text-align: center;

    font-family: "Inter", sans-serif;
    font-size: 12px;
    line-height: 1.5;
}

.sse-premium-form__note i {
    color: #4fae2c;
    font-size: 11px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .sse-premium-lead__wrapper {
        grid-template-columns: 1fr;

        gap: 45px;

        padding: 50px;
    }

    .sse-premium-lead__content {
        max-width: 700px;
    }

    .sse-premium-lead__content > p {
        max-width: 650px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .sse-premium-lead {
        padding: 70px 0;
    }

    .sse-premium-lead__wrapper {
        gap: 38px;

        padding: 35px 20px;

        border-radius: 20px;
    }

    .sse-premium-lead__content {
        text-align: center;
    }

    .sse-premium-lead__eyebrow {
        justify-content: center;

        font-size: 12px;
    }

    .sse-premium-lead__content h2 {
        font-size: 36px;
    }

    .sse-premium-lead__content > p {
        font-size: 16px;
    }

    .sse-premium-lead__benefits {
        text-align: left;
    }

    .sse-premium-lead__contact {
        margin-right: auto;
        margin-left: auto;
    }

    .sse-premium-lead__form-box {
        padding: 25px 18px;

        border-radius: 16px;
    }

    .sse-premium-form {
        grid-template-columns: 1fr;
    }

    .sse-premium-form__submit,
    .sse-premium-form__success,
    .sse-premium-form__note {
        grid-column: 1;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .sse-premium-lead__wrapper {
        padding: 30px 15px;
    }

    .sse-premium-lead__content h2 {
        font-size: 32px;
    }

    .sse-premium-lead__form-box {
        padding: 22px 15px;
    }

    .sse-premium-lead__form-head h3 {
        font-size: 18px;
    }

}

/* =========================================================
   SSV — PREMIUM SOLAR SOLUTIONS
========================================================= */

.ssv-solutions {

    --ssv-navy: #082238;
    --ssv-navy-2: #0d304a;
    --ssv-yellow: #f5c518;
    --ssv-green: #25a965;
    --ssv-text: #172b3a;
    --ssv-muted: #71808b;
    --ssv-line: #e8edf0;
    --ssv-bg: #f6f8f9;

    position: relative;

    padding: 105px 0 90px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(245,197,24,.08),
            transparent 28%
        ),
        var(--ssv-bg);
}


/* subtle background detail */

.ssv-solutions::before {

    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -220px;
    top: 80px;

    border-radius: 50%;

    border: 1px solid rgba(8,34,56,.06);

    pointer-events: none;

}


.ssv-solutions::after {

    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    left: -170px;
    bottom: 150px;

    border-radius: 50%;

    border: 1px solid rgba(8,34,56,.05);

    pointer-events: none;

}


/* =========================================================
   CONTAINER
========================================================= */

.ssv-container {

    width: min(1380px, calc(100% - 70px));

    margin: 0 auto;

    position: relative;

    z-index: 2;

}


/* =========================================================
   HEADER
========================================================= */

.ssv-head {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, .62fr);

    align-items: end;

    gap: 70px;

    margin-bottom: 48px;

}


.ssv-label {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 14px;

    color: #6b7983;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2.2px;

}


.ssv-label__line {

    width: 38px;

    height: 2px;

    border-radius: 20px;

    background: var(--ssv-yellow);

}


.ssv-head h2 {

    margin: 0;

    color: var(--ssv-navy);

    font-size: clamp(40px, 4.3vw, 62px);

    line-height: .98;

    letter-spacing: -2.5px;

    font-weight: 850;

}


.ssv-head h2 span {

    display: block;

    margin-top: 7px;

    color: #647783;

    font-size: .72em;

    font-weight: 500;

    letter-spacing: -1px;

}


.ssv-head__right {

    padding-bottom: 3px;

}


.ssv-head__right p {

    margin: 0;

    max-width: 510px;

    color: var(--ssv-muted);

    font-size: 14px;

    line-height: 1.8;

}


/* =========================================================
   GRID
========================================================= */

.ssv-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 20px;

}


/* =========================================================
   CARD
========================================================= */

.ssv-card {

    position: relative;

    overflow: hidden;

    border: 1px solid rgba(10,39,59,.08);

    border-radius: 16px;

    background: #fff;

    box-shadow:
        0 10px 35px rgba(11,34,50,.055);

    transition:
        transform .45s cubic-bezier(.2,.7,.2,1),
        box-shadow .45s ease,
        border-color .45s ease;

}


.ssv-card:hover {

    transform: translateY(-7px);

    border-color: rgba(245,197,24,.32);

    box-shadow:
        0 24px 55px rgba(11,34,50,.12);

}


/* =========================================================
   IMAGE
========================================================= */

.ssv-card__media {

    position: relative;

    height: 245px;

    overflow: hidden;

    background: #edf2f4;

}


.ssv-card__media img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .75s cubic-bezier(.2,.7,.2,1);

}


.ssv-card:hover .ssv-card__media img {

    transform: scale(1.08);

}


/* image overlay */

.ssv-card__shade {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(3,20,31,.08) 20%,
            rgba(3,20,31,.62) 100%
        );

    opacity: .72;

    transition: opacity .4s ease;

}


.ssv-card:hover .ssv-card__shade {

    opacity: .86;

}


/* =========================================================
   NUMBER
========================================================= */

.ssv-card__number {

    position: absolute;

    left: 15px;
    top: 15px;

    min-width: 39px;
    height: 28px;

    padding: 0 9px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,.3);

    border-radius: 7px;

    color: #fff;

    background: rgba(4,23,37,.46);

    backdrop-filter: blur(12px);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

}


/* =========================================================
   CATEGORY
========================================================= */

.ssv-card__category {

    position: absolute;

    left: 15px;
    bottom: 15px;

    padding: 7px 10px;

    border-radius: 6px;

    color: #fff;

    background: rgba(8,34,56,.75);

    backdrop-filter: blur(10px);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;

}


/* =========================================================
   ACTION
========================================================= */

.ssv-card__action {

    position: absolute;

    right: 15px;
    bottom: 15px;

    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,.38);

    border-radius: 50%;

    color: var(--ssv-navy);

    background: rgba(255,255,255,.94);

    text-decoration: none;

    opacity: 0;

    transform: translateY(8px) rotate(-10deg);

    transition:
        opacity .35s ease,
        transform .35s ease,
        background .3s ease;

}


.ssv-card:hover .ssv-card__action {

    opacity: 1;

    transform:
        translateY(0)
        rotate(0);

}


.ssv-card__action:hover {

    color: #172b3a;

    background: var(--ssv-yellow);

}


/* =========================================================
   CARD BODY
========================================================= */

.ssv-card__body {

    padding: 21px 20px 19px;

}


.ssv-card__heading {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

}


.ssv-card__heading h3 {

    margin: 0;

    color: var(--ssv-text);

    font-size: 18px;

    line-height: 1.25;

    letter-spacing: -.4px;

    font-weight: 800;

}


.ssv-card__heading > i {

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 9px;

    color: #a27c00;

    background: #fff7d5;

    font-size: 15px;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;

}


.ssv-card:hover .ssv-card__heading > i {

    color: #fff;

    background: var(--ssv-navy);

    transform: rotate(-5deg);

}


.ssv-card__body p {

    min-height: 52px;

    margin: 11px 0 17px;

    color: var(--ssv-muted);

    font-size: 12px;

    line-height: 1.65;

}


/* =========================================================
   CARD LINK
========================================================= */

.ssv-card__link {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: var(--ssv-navy);

    text-decoration: none;

    font-size: 11px;

    font-weight: 850;

}


.ssv-card__link i {

    width: 25px;
    height: 25px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #fff;

    background: var(--ssv-navy);

    font-size: 11px;

    transition:
        transform .3s ease,
        background .3s ease;

}


.ssv-card:hover .ssv-card__link i {

    transform: translateX(4px);

    background: #d5aa00;

}


/* =========================================================
   BOTTOM CTA
========================================================= */

.ssv-bottom {

    min-height: 92px;

    margin-top: 28px;

    padding: 15px 20px 15px 22px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    border: 1px solid rgba(8,34,56,.09);

    border-radius: 15px;

    background:
        linear-gradient(
            100deg,
            #ffffff,
            #f9fbfc
        );

    box-shadow:
        0 12px 35px rgba(8,34,56,.045);

}


.ssv-bottom__left {

    display: flex;

    align-items: center;

    gap: 13px;

}


.ssv-bottom__icon {

    width: 46px;
    height: 46px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 46px;

    border-radius: 12px;

    color: #a27c00;

    background: #fff6cf;

    font-size: 20px;

}


.ssv-bottom__left small {

    display: block;

    margin-bottom: 3px;

    color: #9a7b0d;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1.5px;

}


.ssv-bottom__left strong {

    display: block;

    color: var(--ssv-navy);

    font-size: 14px;

}


.ssv-bottom__button {

    min-height: 47px;

    padding: 0 17px;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    border-radius: 8px;

    color: #fff;

    background: var(--ssv-navy);

    text-decoration: none;

    font-size: 11px;

    font-weight: 800;

    transition:
        background .3s ease,
        transform .3s ease;

}


.ssv-bottom__button:hover {

    color: #132b3d;

    background: var(--ssv-yellow);

    transform: translateY(-2px);

}


.ssv-bottom__button i {

    font-size: 13px;

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1200px) {

    .ssv-container {

        width: min(100% - 50px, 1100px);

    }


    .ssv-head {

        gap: 35px;

    }


    .ssv-grid {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

    }


    .ssv-card__media {

        height: 220px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .ssv-solutions {

        padding: 80px 0 70px;

    }


    .ssv-head {

        grid-template-columns: 1fr;

        gap: 17px;

        margin-bottom: 35px;

    }


    .ssv-head__right p {

        max-width: 680px;

    }


    .ssv-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 16px;

    }


    .ssv-card__media {

        height: 230px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .ssv-solutions {

        padding: 65px 0 55px;

    }


    .ssv-container {

        width: calc(100% - 30px);

    }


    .ssv-head {

        margin-bottom: 27px;

    }


    .ssv-label {

        font-size: 9px;

        letter-spacing: 1.6px;

    }


    .ssv-label__line {

        width: 28px;

    }


    .ssv-head h2 {

        font-size: 37px;

        letter-spacing: -1.7px;

    }


    .ssv-head h2 span {

        font-size: .70em;

        line-height: 1.15;

    }


    .ssv-head__right p {

        font-size: 12px;

        line-height: 1.7;

    }


    .ssv-grid {

        grid-template-columns: 1fr;

        gap: 14px;

    }


    .ssv-card__media {

        height: 230px;

    }


    .ssv-card__action {

        opacity: 1;

        transform: none;

    }


    .ssv-card__body {

        padding: 18px;

    }


    .ssv-card__heading h3 {

        font-size: 17px;

    }


    .ssv-card__body p {

        min-height: auto;

        font-size: 11px;

    }


    .ssv-bottom {

        padding: 16px;

        align-items: stretch;

        flex-direction: column;

        gap: 15px;

    }


    .ssv-bottom__button {

        width: 100%;

        justify-content: center;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .ssv-head h2 {

        font-size: 33px;

    }


    .ssv-card__media {

        height: 210px;

    }


    .ssv-card__number {

        left: 11px;
        top: 11px;

    }


    .ssv-card__category {

        left: 11px;
        bottom: 11px;

    }


    .ssv-card__action {

        right: 11px;
        bottom: 11px;

    }

}
/* =========================================================
   OUR VALUED CUSTOMERS
========================================================= */

.svc-customers {

    --svc-navy: #082238;
    --svc-yellow: #f5c518;
    --svc-text: #172b3a;
    --svc-muted: #71808b;
    --svc-bg: #f7f9fa;

    position: relative;

    padding: 90px 0 80px;

    overflow: hidden;

    background: var(--svc-bg);
}


/* subtle background */

.svc-customers::before {

    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    top: -220px;
    right: -170px;

    border-radius: 50%;

    border: 1px solid rgba(8,34,56,.05);

    pointer-events: none;

}


.svc-customers::after {

    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    bottom: -170px;
    left: -130px;

    border-radius: 50%;

    border: 1px solid rgba(8,34,56,.05);

    pointer-events: none;

}


/* =========================================================
   CONTAINER
========================================================= */

.svc-customers__container {

    width: min(1380px, calc(100% - 70px));

    margin: auto;

    position: relative;

    z-index: 2;

}


/* =========================================================
   HEADER
========================================================= */

.svc-customers__head {

    max-width: 720px;

    margin: 0 auto 45px;

    text-align: center;

}


.svc-customers__eyebrow {

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    margin-bottom: 13px;

    color: #7a858c;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2px;

}


.svc-customers__eyebrow span {

    width: 30px;
    height: 2px;

    border-radius: 20px;

    background: var(--svc-yellow);

}


.svc-customers__head h2 {

    margin: 0;

    color: var(--svc-navy);

    font-size: clamp(35px, 4vw, 52px);

    line-height: 1;

    letter-spacing: -2px;

    font-weight: 850;

}


.svc-customers__head h2 strong {

    display: block;

    color: #687985;

    font-weight: 500;

}


.svc-customers__head p {

    max-width: 590px;

    margin: 18px auto 0;

    color: var(--svc-muted);

    font-size: 13px;

    line-height: 1.7;

}


/* =========================================================
   MARQUEE
========================================================= */

.svc-marquee {

    position: relative;

    width: 100%;

    overflow: hidden;

    padding: 12px 0;

}


/* left fade */

.svc-marquee::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 90px;

    z-index: 5;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            var(--svc-bg),
            rgba(247,249,250,0)
        );

}


/* right fade */

.svc-marquee::after {

    content: "";

    position: absolute;

    right: 0;
    top: 0;
    bottom: 0;

    width: 90px;

    z-index: 5;

    pointer-events: none;

    background:
        linear-gradient(
            270deg,
            var(--svc-bg),
            rgba(247,249,250,0)
        );

}


/* =========================================================
   TRACK
========================================================= */

.svc-marquee__track {

    display: flex;

    align-items: stretch;

    gap: 18px;

    width: max-content;

    animation:
        svcCustomerScroll 28s linear infinite;

}


/* pause */

.svc-marquee:hover .svc-marquee__track {

    animation-play-state: paused;

}


/* =========================================================
   CUSTOMER CARD
========================================================= */

.svc-customer {

    position: relative;

    flex: 0 0 calc(
        (min(1380px, calc(100vw - 70px)) - 72px) / 5
    );

    height: 190px;

    overflow: hidden;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid rgba(8,34,56,.08);

    border-radius: 15px;

    background: #fff;

    box-shadow:
        0 10px 30px rgba(8,34,56,.055);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}


.svc-customer:hover {

    transform: translateY(-5px);

    box-shadow:
        0 18px 40px rgba(8,34,56,.12);

}


/* =========================================================
   IMAGE
========================================================= */

.svc-customer img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .5s ease;

}


.svc-customer:hover img {

    transform: scale(1.04);

}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes svcCustomerScroll {

    from {

        transform: translateX(0);

    }

    to {

        transform:
            translateX(
                calc(
                    -50% - 9px
                )
            );

    }

}


/* =========================================================
   BOTTOM
========================================================= */

.svc-customers__bottom {

    margin-top: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 14px;

    color: #879198;

    font-size: 10px;

    text-align: center;

}


.svc-customers__line {

    width: 45px;

    height: 1px;

    background: #dce2e5;

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1200px) {

    .svc-customer {

        flex-basis: calc(
            (100vw - 120px - 72px) / 5
        );

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .svc-customers {

        padding: 75px 0 65px;

    }


    .svc-customers__container {

        width: calc(100% - 40px);

    }


    .svc-customer {

        flex-basis: 210px;

        height: 175px;

    }


    .svc-marquee__track {

        gap: 14px;

        animation-duration: 24s;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .svc-customers {

        padding: 60px 0 55px;

    }


    .svc-customers__container {

        width: calc(100% - 30px);

    }


    .svc-customers__head {

        margin-bottom: 30px;

    }


    .svc-customers__eyebrow {

        font-size: 8px;

        letter-spacing: 1.5px;

    }


    .svc-customers__head h2 {

        font-size: 35px;

        letter-spacing: -1.5px;

    }


    .svc-customers__head p {

        margin-top: 14px;

        font-size: 11px;

    }


    .svc-customer {

        flex-basis: 180px;

        height: 155px;

        border-radius: 12px;

    }


    .svc-marquee__track {

        gap: 12px;

        animation-duration: 20s;

    }


    .svc-marquee::before,
    .svc-marquee::after {

        width: 45px;

    }


    .svc-customers__bottom {

        margin-top: 28px;

        font-size: 9px;

    }


    .svc-customers__line {

        width: 25px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .svc-customer {

        flex-basis: 165px;

        height: 145px;

    }

}