/* =========================================================
   PURI WELCOME ANIMATION
   ========================================================= */

.puri-welcome-animation {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 20;
}


/* =========================================================
   PURI CHARACTER
   ========================================================= */

.puri-character-container {
    position: absolute;
    left: 5%;
    bottom: -80px;

    width: min(430px, 38vw);

    opacity: 0;
    transform: translateY(100vh) scale(0.88);

    z-index: 25;

    animation:
        puriEnter 1.8s cubic-bezier(.17,.67,.27,1.18) 1.15s forwards,
        puriWelcome 1.2s ease-in-out 3s forwards;
}


.puri-character {
    display: block;


    object-fit: contain;

    filter:
        drop-shadow(0 18px 25px rgba(0,0,0,.20));
}


/* Puri comes from bottom */

@keyframes puriEnter {

    0% {
        opacity: 0;
        transform:
            translateY(100vh)
            scale(.88);
    }

    60% {
        opacity: 1;
        transform:
            translateY(-18px)
            scale(1.02);
    }

    80% {
        transform:
            translateY(7px)
            scale(.99);
    }

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

}


/* Small natural movement after entering */

@keyframes puriWelcome {

    0% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    30% {
        transform:
            translateY(-7px)
            rotate(-1deg);
    }

    60% {
        transform:
            translateY(0)
            rotate(1deg);
    }

    100% {
        transform:
            translateY(0)
            rotate(0deg);
    }

}


/* =========================================================
   CONFETTI
   ========================================================= */

.puri-confetti {
    position: absolute;
    inset: 0;

    pointer-events: none;

    z-index: 50;
}


.puri-confetti-piece {
    position: absolute;

    top: -30px;

    width: 8px;
    height: 14px;

    opacity: 0;

    animation:
        puriConfettiFall
        var(--fall-duration)
        linear
        forwards;
}


@keyframes puriConfettiFall {

    0% {
        opacity: 0;
        transform:
            translate3d(0, -20px, 0)
            rotate(0deg);
    }

    10% {
        opacity: 1;
    }

    100% {
        opacity: .9;
        transform:
            translate3d(var(--drift), 110vh, 0)
            rotate(var(--rotation));
    }

}


/* =========================================================
   BUTTERFLIES
   ========================================================= */

.puri-butterflies {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    z-index: 30;

}


/* =========================================================
   BUTTERFLY
   ========================================================= */

.puri-butterfly {

    position: absolute;

    width: 70px;
    height: 56px;

    opacity: 0;

    will-change: transform, opacity;

}


/* =========================================================
   SVG
   ========================================================= */

.butterfly-svg {

    width: 100%;
    height: 100%;

    overflow: visible;

    filter:
        drop-shadow(
            0 5px 8px rgba(0,0,0,.20)
        );

}


/* =========================================================
   WINGS
   ========================================================= */

.wing-left,
.wing-right {

    transform-box: fill-box;

    transform-origin: center center;

}


/* LEFT WING */

.wing-left path {

    fill: #F4A742;

    stroke: #C86B2C;

    stroke-width: 2;

}


/* RIGHT WING */

.wing-right path {

    fill: #F4A742;

    stroke: #C86B2C;

    stroke-width: 2;

}


/* =========================================================
   WING DETAILS
   ========================================================= */

.wing-left path,
.wing-right path {

    paint-order: stroke fill;

}


/* =========================================================
   BODY
   ========================================================= */

.butterfly-body-svg {

    fill: #3B2419;

    stroke: #21140F;

    stroke-width: 1;

}


/* =========================================================
   ANTENNAE
   ========================================================= */

.butterfly-antenna-svg {

    fill: none;

    stroke: #3B2419;

    stroke-width: 1.5;

    stroke-linecap: round;

}


/* =========================================================
   NATURAL WING FLAPPING
   ========================================================= */

.wing-left {

    animation:
        butterflyWingLeft
        .24s
        ease-in-out
        infinite
        alternate;

}


.wing-right {

    animation:
        butterflyWingRight
        .24s
        ease-in-out
        infinite
        alternate;

}


@keyframes butterflyWingLeft {

    from {

        transform:
            rotateY(0deg)
            rotateZ(-2deg);

    }

    to {

        transform:
            rotateY(55deg)
            rotateZ(-5deg);

    }

}


@keyframes butterflyWingRight {

    from {

        transform:
            rotateY(0deg)
            rotateZ(2deg);

    }

    to {

        transform:
            rotateY(-55deg)
            rotateZ(5deg);

    }

}


/* =========================================================
   BUTTERFLY POSITIONS
   ========================================================= */

.butterfly-1 {

    left: 3%;

    bottom: 25%;

    animation:
        butterflyOne
        6s
        ease-in-out
        2.7s
        forwards;

}


.butterfly-2 {

    left: 25%;

    bottom: 45%;

    animation:
        butterflyTwo
        6.5s
        ease-in-out
        2.9s
        forwards;

}


.butterfly-3 {

    left: 12%;

    bottom: 65%;

    animation:
        butterflyThree
        7s
        ease-in-out
        3.1s
        forwards;

}


.butterfly-4 {

    left: 32%;

    bottom: 30%;

    animation:
        butterflyFour
        6.8s
        ease-in-out
        3.3s
        forwards;

}


.butterfly-5 {

    left: 18%;

    bottom: 75%;

    animation:
        butterflyFive
        7s
        ease-in-out
        3.5s
        forwards;

}


/* =========================================================
   BUTTERFLY FLIGHT 1
   ========================================================= */

@keyframes butterflyOne {

    0% {

        opacity: 0;

        transform:
            translate(0,120px)
            scale(.35)
            rotate(-20deg);

    }

    12% {

        opacity: 1;

    }

    30% {

        transform:
            translate(100px,-60px)
            scale(.75)
            rotate(15deg);

    }

    50% {

        transform:
            translate(40px,-150px)
            scale(1)
            rotate(-10deg);

    }

    70% {

        transform:
            translate(180px,-100px)
            scale(.9)
            rotate(12deg);

    }

    100% {

        opacity: .95;

        transform:
            translate(100px,-220px)
            scale(.72)
            rotate(-8deg);

    }

}


/* =========================================================
   BUTTERFLY FLIGHT 2
   ========================================================= */

@keyframes butterflyTwo {

    0% {

        opacity: 0;

        transform:
            translate(-50px,100px)
            scale(.3);

    }

    12% {

        opacity: 1;

    }

    35% {

        transform:
            translate(100px,-100px)
            scale(.8)
            rotate(15deg);

    }

    60% {

        transform:
            translate(220px,-20px)
            scale(1)
            rotate(-15deg);

    }

    100% {

        opacity: .9;

        transform:
            translate(330px,-150px)
            scale(.7)
            rotate(10deg);

    }

}


/* =========================================================
   BUTTERFLY FLIGHT 3
   ========================================================= */

@keyframes butterflyThree {

    0% {

        opacity: 0;

        transform:
            translate(0,100px)
            scale(.3);

    }

    12% {

        opacity: 1;

    }

    35% {

        transform:
            translate(120px,30px)
            scale(.9)
            rotate(-12deg);

    }

    65% {

        transform:
            translate(40px,-130px)
            scale(1)
            rotate(15deg);

    }

    100% {

        opacity: .9;

        transform:
            translate(200px,-210px)
            scale(.7)
            rotate(-8deg);

    }

}


/* =========================================================
   BUTTERFLY FLIGHT 4
   ========================================================= */

@keyframes butterflyFour {

    0% {

        opacity: 0;

        transform:
            translate(-40px,90px)
            scale(.3);

    }

    12% {

        opacity: 1;

    }

    40% {

        transform:
            translate(130px,-80px)
            scale(.8)
            rotate(15deg);

    }

    70% {

        transform:
            translate(250px,-150px)
            scale(1)
            rotate(-10deg);

    }

    100% {

        opacity: .9;

        transform:
            translate(350px,-80px)
            scale(.65)
            rotate(12deg);

    }

}


/* =========================================================
   BUTTERFLY FLIGHT 5
   ========================================================= */

@keyframes butterflyFive {

    0% {

        opacity: 0;

        transform:
            translate(0,100px)
            scale(.3);

    }

    12% {

        opacity: 1;

    }

    40% {

        transform:
            translate(100px,-120px)
            scale(.9)
            rotate(-15deg);

    }

    70% {

        transform:
            translate(240px,-50px)
            scale(.8)
            rotate(12deg);

    }

    100% {

        opacity: .9;

        transform:
            translate(330px,-180px)
            scale(.7)
            rotate(-10deg);

    }

}


/* =========================================================
   SPECIAL BUTTERFLY
   ========================================================= */

.puri-learning-butterfly {

    left: 28%;

    bottom: 35%;

    width: 76px;
    height: 62px;

    z-index: 100;

    animation:
        butterflyToLearning
        4.5s
        cubic-bezier(.42,0,.25,1)
        3.7s
        forwards;

}


@keyframes butterflyToLearning {

    0% {

        opacity: 0;

        transform:
            translate(0,120px)
            scale(.3)
            rotate(-20deg);

    }

    10% {

        opacity: 1;

    }

    25% {

        transform:
            translate(
                calc(var(--target-x) * .25),
                calc(var(--target-y) * .25)
            )
            scale(.85)
            rotate(15deg);

    }

    45% {

        transform:
            translate(
                calc(var(--target-x) * .55),
                calc(var(--target-y) * .55 - 90px)
            )
            scale(1)
            rotate(-15deg);

    }

    65% {

        transform:
            translate(
                calc(var(--target-x) * .78),
                calc(var(--target-y) * .78 + 30px)
            )
            scale(.9)
            rotate(12deg);

    }

    82% {

        transform:
            translate(
                calc(var(--target-x) * .94),
                calc(var(--target-y) * .94)
            )
            scale(.75)
            rotate(-5deg);

    }

    92%,
    100% {

        opacity: 1;

        transform:
            translate(
                var(--target-x),
                var(--target-y)
            )
            scale(.68)
            rotate(0deg);

    }

}


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

@media (max-width: 768px) {

    .puri-butterfly {

        width: 48px;
        height: 40px;

    }

    .puri-learning-butterfly {

        width: 58px;
        height: 48px;

    }

}


.left-antenna {

    left: 19px;

    transform:
        rotate(-35deg);

    border-radius:
        100% 0 0 0;

}


.right-antenna {

    right: 19px;

    transform:
        scaleX(-1)
        rotate(-35deg);

    border-radius:
        100% 0 0 0;

}


/* =========================================================
   WING FLAPPING
   ========================================================= */

.puri-butterfly .left-wing {

    animation:
        butterflyLeftWing
        .22s
        ease-in-out
        infinite alternate;

}


.puri-butterfly .right-wing {

    animation:
        butterflyRightWing
        .22s
        ease-in-out
        infinite alternate;

}


@keyframes butterflyLeftWing {

    from {

        transform:
            rotate(-28deg);

    }

    to {

        transform:
            rotate(-55deg);

    }

}


@keyframes butterflyRightWing {

    from {

        transform:
            scaleX(-1)
            rotate(-28deg);

    }

    to {

        transform:
            scaleX(-1)
            rotate(-55deg);

    }

}


/* =========================================================
   BUTTERFLY 1
   ========================================================= */

.butterfly-1 {

    left: 3%;
    bottom: 25%;

    animation:
        butterflyOne
        6s
        ease-in-out
        2.7s
        forwards;

}


/* =========================================================
   BUTTERFLY 2
   ========================================================= */

.butterfly-2 {

    left: 25%;
    bottom: 45%;

    animation:
        butterflyTwo
        6.5s
        ease-in-out
        2.9s
        forwards;

}


/* =========================================================
   BUTTERFLY 3
   ========================================================= */

.butterfly-3 {

    left: 12%;
    bottom: 65%;

    animation:
        butterflyThree
        7s
        ease-in-out
        3.1s
        forwards;

}


/* =========================================================
   BUTTERFLY 4
   ========================================================= */

.butterfly-4 {

    left: 32%;
    bottom: 30%;

    animation:
        butterflyFour
        6.8s
        ease-in-out
        3.3s
        forwards;

}


/* =========================================================
   BUTTERFLY 5
   ========================================================= */

.butterfly-5 {

    left: 18%;
    bottom: 75%;

    animation:
        butterflyFive
        7s
        ease-in-out
        3.5s
        forwards;

}


/* =========================================================
   BUTTERFLY 1 FLIGHT
   ========================================================= */

@keyframes butterflyOne {

    0% {

        opacity: 0;

        transform:
            translate(0,120px)
            scale(.35)
            rotate(-20deg);

    }

    12% {

        opacity: 1;

    }

    30% {

        transform:
            translate(100px,-60px)
            scale(.75)
            rotate(15deg);

    }

    50% {

        transform:
            translate(40px,-150px)
            scale(1)
            rotate(-10deg);

    }

    70% {

        transform:
            translate(180px,-100px)
            scale(.9)
            rotate(12deg);

    }

    100% {

        opacity: .95;

        transform:
            translate(100px,-220px)
            scale(.72)
            rotate(-8deg);

    }

}




/* =========================================================
   SPECIAL BUTTERFLY
   -> FLIES TO START LEARNING
   ========================================================= */

.puri-learning-butterfly {

    left: 28%;
    bottom: 35%;

    width: 64px;
    height: 55px;

    z-index: 100;

    animation:
        butterflyToLearning
        4.5s
        cubic-bezier(.42,0,.25,1)
        3.7s
        forwards;

}


@keyframes butterflyToLearning {

    0% {

        opacity: 0;

        transform:
            translate(0,120px)
            scale(.3)
            rotate(-20deg);

    }

    10% {

        opacity: 1;

    }

    25% {

        transform:
            translate(
                calc(var(--target-x) * .25),
                calc(var(--target-y) * .25)
            )
            scale(.8)
            rotate(15deg);

    }

    45% {

        transform:
            translate(
                calc(var(--target-x) * .55),
                calc(var(--target-y) * .55 - 90px)
            )
            scale(1)
            rotate(-15deg);

    }

    65% {

        transform:
            translate(
                calc(var(--target-x) * .78),
                calc(var(--target-y) * .78 + 30px)
            )
            scale(.9)
            rotate(12deg);

    }

    82% {

        transform:
            translate(
                calc(var(--target-x) * .94),
                calc(var(--target-y) * .94)
            )
            scale(.72)
            rotate(-5deg);

    }

    100% {

        opacity: 1;

        transform:
            translate(
                var(--target-x),
                var(--target-y)
            )
            scale(.68)
            rotate(0deg);

    }

}


/* =========================================================
   NORMAL BUTTERFLY FLIGHT PATHS
   ========================================================= */

@keyframes butterflyOne {

    0% {
        opacity: 0;
        transform:
            translate(0, 100px)
            scale(.4)
            rotate(-20deg);
    }

    15% {
        opacity: 1;
    }

    35% {
        transform:
            translate(100px, -70px)
            scale(.8)
            rotate(15deg);
    }

    60% {
        transform:
            translate(20px, -160px)
            scale(1)
            rotate(-10deg);
    }

    80% {
        transform:
            translate(180px, -110px)
            scale(.9)
            rotate(12deg);
    }

    100% {
        opacity: .85;
        transform:
            translate(80px, -220px)
            scale(.75)
            rotate(-8deg);
    }

}


@keyframes butterflyTwo {

    0% {
        opacity: 0;
        transform:
            translate(-50px, 80px)
            scale(.3);
    }

    15% {
        opacity: 1;
    }

    35% {
        transform:
            translate(100px, -100px)
            scale(.8)
            rotate(15deg);
    }

    65% {
        transform:
            translate(230px, -20px)
            scale(1)
            rotate(-15deg);
    }

    100% {
        opacity: .8;
        transform:
            translate(320px, -140px)
            scale(.7)
            rotate(10deg);
    }

}


@keyframes butterflyThree {

    0% {
        opacity: 0;
        transform:
            translate(0, 80px)
            scale(.3);
    }

    15% {
        opacity: 1;
    }

    40% {
        transform:
            translate(120px, 30px)
            scale(.9)
            rotate(-12deg);
    }

    70% {
        transform:
            translate(40px, -130px)
            scale(1)
            rotate(15deg);
    }

    100% {
        opacity: .85;
        transform:
            translate(200px, -210px)
            scale(.7)
            rotate(-8deg);
    }

}


@keyframes butterflyFour {

    0% {
        opacity: 0;
        transform:
            translate(-40px, 80px)
            scale(.3);
    }

    15% {
        opacity: 1;
    }

    40% {
        transform:
            translate(130px, -80px)
            scale(.8)
            rotate(15deg);
    }

    70% {
        transform:
            translate(250px, -150px)
            scale(1)
            rotate(-10deg);
    }

    100% {
        opacity: .8;
        transform:
            translate(350px, -80px)
            scale(.65)
            rotate(12deg);
    }

}


@keyframes butterflyFive {

    0% {
        opacity: 0;
        transform:
            translate(0, 100px)
            scale(.3);
    }

    15% {
        opacity: 1;
    }

    40% {
        transform:
            translate(100px, -120px)
            scale(.9)
            rotate(-15deg);
    }

    70% {
        transform:
            translate(240px, -50px)
            scale(.8)
            rotate(12deg);
    }

    100% {
        opacity: .8;
        transform:
            translate(330px, -180px)
            scale(.7)
            rotate(-10deg);
    }

}


/* =========================================================
   SPECIAL BUTTERFLY
   This one flies to START LEARNING
   ========================================================= */

.puri-learning-butterfly {

    left: 28%;
    bottom: 35%;

    font-size: 34px;

    z-index: 100;

    animation:
        butterflyToLearning 4.5s
        cubic-bezier(.42,0,.25,1)
        3.7s forwards;

}


/*
   JS changes these variables to the actual
   Start Learning button position.
*/

@keyframes butterflyToLearning {

    0% {

        opacity: 0;

        transform:
            translate(0, 120px)
            scale(.3)
            rotate(-20deg);

    }

    10% {

        opacity: 1;

    }

    25% {

        transform:
            translate(
                calc(var(--target-x) * .25),
                calc(var(--target-y) * .25)
            )
            scale(.8)
            rotate(15deg);

    }

    45% {

        transform:
            translate(
                calc(var(--target-x) * .55),
                calc(var(--target-y) * .55 - 90px)
            )
            scale(1)
            rotate(-15deg);

    }

    65% {

        transform:
            translate(
                calc(var(--target-x) * .78),
                calc(var(--target-y) * .78 + 30px)
            )
            scale(.9)
            rotate(12deg);

    }

    82% {

        transform:
            translate(
                calc(var(--target-x) * .94),
                calc(var(--target-y) * .94)
            )
            scale(.72)
            rotate(-5deg);

    }

    92% {

        transform:
            translate(
                var(--target-x),
                var(--target-y)
            )
            scale(.68)
            rotate(0deg);

    }

    100% {

        opacity: 1;

        transform:
            translate(
                var(--target-x),
                var(--target-y)
            )
            scale(.68)
            rotate(0deg);

    }

}


/* =========================================================
   SPARKLES
   ========================================================= */

.puri-sparkles {
    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 28;
}


.puri-sparkles span {

    position: absolute;

    opacity: 0;

    font-size: 20px;

    animation:
        puriSparkle
        2.5s
        ease-in-out
        infinite;

}


.puri-sparkles span:nth-child(1) {
    left: 35%;
    top: 35%;
    animation-delay: 3s;
}


.puri-sparkles span:nth-child(2) {
    left: 42%;
    top: 50%;
    animation-delay: 3.5s;
}


.puri-sparkles span:nth-child(3) {
    left: 24%;
    top: 25%;
    animation-delay: 4s;
}


.puri-sparkles span:nth-child(4) {
    left: 50%;
    top: 30%;
    animation-delay: 4.5s;
}


.puri-sparkles span:nth-child(5) {
    left: 45%;
    top: 65%;
    animation-delay: 5s;
}


@keyframes puriSparkle {

    0% {
        opacity: 0;
        transform: scale(.3) rotate(0deg);
    }

    40% {
        opacity: 1;
        transform: scale(1.2) rotate(90deg);
    }

    70% {
        opacity: .7;
        transform: scale(.8) rotate(180deg);
    }

    100% {
        opacity: 0;
        transform: scale(.2) rotate(270deg);
    }

}


/* =========================================================
   START LEARNING BUTTON
   Existing button gets highlighted when butterfly lands
   ========================================================= */

.puri-learning-target {

    position: relative;

    z-index: 40;

    animation:
        learningButtonGlow
        1.8s
        ease-in-out
        8s
        8.2s;

}


@keyframes learningButtonGlow {

    0%,
    100% {
        box-shadow: 0 0 0 rgba(255,255,255,0);
    }

    20% {
        box-shadow:
            0 0 0 5px rgba(255,255,255,.15),
            0 0 25px rgba(255,215,100,.65);
    }

    50% {
        box-shadow:
            0 0 0 8px rgba(255,255,255,.08),
            0 0 40px rgba(255,215,100,.8);
    }

    80% {
        box-shadow:
            0 0 0 4px rgba(255,255,255,.12),
            0 0 25px rgba(255,215,100,.5);
    }

}


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

@media (max-width: 768px) {

    .puri-character-container {

        left: 50%;

        width: min(300px, 65vw);

        transform:
            translate(-50%, 100vh)
            scale(.88);

    }

    @keyframes puriEnter {

        0% {
            opacity: 0;
            transform:
                translate(-50%, 100vh)
                scale(.88);
        }

        60% {
            opacity: 1;
            transform:
                translate(-50%, -10px)
                scale(1.02);
        }

        80% {
            transform:
                translate(-50%, 5px)
                scale(.99);
        }

        100% {
            opacity: 1;
            transform:
                translate(-50%, 0)
                scale(1);
        }

    }

    .puri-butterfly {
        font-size: 24px;
    }

    .puri-learning-butterfly {
        font-size: 28px;
    }

}


/* =========================================================
   REDUCE MOTION ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .puri-welcome-animation * {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }

}

/* =========================================================
   BUTTERFLY LANDED STATE
   ========================================================= */

.puri-butterfly-landed {

    animation:
        learningButtonPulse
        2s
        ease-in-out
        3;

}


@keyframes learningButtonPulse {

    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.035);
    }

    60% {
        transform: scale(1);
    }

    100% {
        transform: scale(1);
    }

}	

.puri-welcome-animation.puri-animation-finished {
    opacity: 0;
    transition: opacity 1.2s ease;
    pointer-events: none;
}

/* Make sure everything disappears with the container */
.puri-welcome-animation.puri-animation-finished
.puri-character-container,
.puri-welcome-animation.puri-animation-finished
.puri-butterflies,
.puri-welcome-animation.puri-animation-finished
.puri-sparkles,
.puri-welcome-animation.puri-animation-finished
.puri-confetti {
    opacity: 0;
    transition: opacity 1.2s ease;
}

/* new css end here */

.ss-home-hero{
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    background: url('../img/home/Section1.webp') center center / cover no-repeat;
    overflow: hidden;
	margin-bottom: 20px;
}

.ss-home-hero-overlay{
    position: absolute;
    inset: 0;
}

.ss-home-hero-rightshade{
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(10,18,28,0.08) 0%,
        rgba(10,18,28,0.10) 28%,
        rgba(10,18,28,0.28) 52%,
        rgba(10,18,28,0.56) 72%,
        rgba(10,18,28,0.74) 100%
    );
    z-index: 1;
}

.ss-home-hero .container{
    position: relative;
    z-index: 2;
    width: 100%;
}

.ss-home-hero-inner{
    display: flex;
    align-items: center;
    min-height: 92vh;
    width: 100%;
}

.ss-home-hero-spacer{
    flex: 0 0 56%;
}

.ss-home-hero-content{
    flex: 0 0 44%;
    max-width: 560px;
    color: #ffffff;
    text-align: left;
    margin-left: auto;
    padding: 40px 0;
}

.ss-home-hero-content h1{
    margin: 0 0 24px;
    font-size: clamp(40px, 4.8vw, 72px);
    line-height: 1.06;
    font-weight: 700;
    letter-spacing: -1px;
    color: #ffffff;
}

.ss-home-hero-content p{
    margin: 0 0 16px;
    font-size: 18px;
    line-height: 1.9;
    color: rgba(255,255,255,.92);
}

.ss-home-hero-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 34px;
}

.ss-royal-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 14px 30px;
    border-radius: 14px;
    border: 1px solid #cfb06f;
    background: linear-gradient(180deg, #6f8f58 0%, #48673a 100%);
    color: #fff8e6;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .45px;
    text-transform: uppercase;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 12px 26px rgba(34,44,21,.22);
    transition: all .35s ease;
}

.ss-royal-btn:hover{
    transform: translateY(-2px);
    background: linear-gradient(180deg, #7ca066 0%, #557646 100%);
    color: #ffffff;
    border-color: #e0bf7d;
}

.ss-royal-btn-outline{
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(232,210,170,.75);
    color: #fff3d8;
    backdrop-filter: blur(8px);
}

.ss-royal-btn-outline:hover{
    background: rgba(255,255,255,.14);
    color: #ffffff;
}

@media (max-width: 1199px){
    .ss-home-hero-spacer{
        flex: 0 0 50%;
    }

    .ss-home-hero-content{
        flex: 0 0 50%;
        max-width: 520px;
    }
}

@media (max-width: 991px){
    .ss-home-hero{
        min-height: auto;
    }

    .ss-home-hero-inner{
        min-height: auto;
        padding: 90px 0 70px;
        display: block;
    }

    .ss-home-hero-spacer{
        display: none;
    }

    .ss-home-hero-content{
        max-width: 100%;
        width: 100%;
        margin-left: 0;
        padding: 0;
    }

    .ss-home-hero-rightshade{
        background: linear-gradient(
            180deg,
            rgba(10,18,28,0.28) 0%,
            rgba(10,18,28,0.46) 100%
        );
    }
}

@media (max-width: 767px){
    .ss-home-hero-content h1{
        font-size: 38px;
    }

    .ss-home-hero-content p{
        font-size: 16px;
        line-height: 1.82;
    }

    .ss-home-hero-actions{
        flex-direction: column;
        align-items: flex-start;
    }
}

.ss-home-header{
    text-align: center;
    max-width: 980px;
    margin: 0 auto 58px;
}

.ss-home-header-badge,
.ss-home-badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 18px;
    border: 1px solid #75a36e;
    border-radius: 12px;
    color: #73976d;
    background: #d5e4db;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 22px;
}

.ss-home-header-title,
.ss-home-split-content h2{
    margin: 0 0 18px;
    font-size: 32px;
    line-height: 1.18;
    font-weight: 700;
    color: #17346d;
    letter-spacing: -0.5px;
}

.ss-home-split-wrap{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 52px;
}

.ss-home-split-wrap-reverse{
    flex-direction: row;
}

.ss-home-split-content{
    flex: 0 0 47%;
}

.ss-home-split-media{
    flex: 0 0 48%;
}

.ss-home-split-media img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 24px;
    box-shadow: 0 18px 42px rgba(15,23,42,.08);
}

.ss-home-copy p{
    margin: 0 0 12px;
    font-size: 16px;
    line-height: 1.95;
    color: #5f6b7a;
}

.ss-home-featured-box{
    margin-top: 28px;
    padding: 22px 24px;
    border-left: 4px solid #559864;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(15,23,42,.05);
}

.ss-home-featured-box strong{
    display: block;
    font-size: 21px;
    line-height: 1.45;
    color: #17346d;
    margin-bottom: 6px;
}

.ss-home-featured-box span{
    display: block;
    font-size: 17px;
    line-height: 1.6;
    color: #559864;
    font-weight: 600;
}

.ss-home-mini-label{
    display: inline-block;
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 600;
    color: #559864;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ss-home-split-content h3{
    margin: 0 0 18px;
    font-size: 38px;
    line-height: 1.18;
    font-weight: 700;
    color: #17346d;
}

.ss-home-video-tabs{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.ss-home-video-tabs button{
    border: 1px solid #c9d7ce;
    background: #ffffff;
    color: #5f6b7a;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all .3s ease;
}

.ss-home-video-tabs button.active,
.ss-home-video-tabs button:hover{
    background: #559864;
    border-color: #559864;
    color: #ffffff;
}

.ss-home-video-box{
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    background: #dfe7ea;
    box-shadow: 0 14px 38px rgba(15,23,42,.08);
}

.ss-home-video-box img{
    width: 100%;
    display: block;
    border-radius: 24px;
}

.ss-home-video-play{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(15,23,42,.14);
    transition: all .3s ease;
}

.ss-home-video-play span{
    font-size: 28px;
    color: #559864;
    margin-left: 4px;
}

.ss-home-video-play:hover{
    transform: translate(-50%, -50%) scale(1.08);
}

.ss-home-feature-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-top: 28px;
}

.ss-home-feature-card{
    padding: 22px 20px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(15,23,42,.05);
    transition: transform .35s ease, box-shadow .35s ease;
}

.ss-home-feature-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(15,23,42,.08);
}

.ss-home-feature-card h4{
    margin: 0 0 10px;
    font-size: 20px;
    line-height: 1.35;
    color: #17346d;
    font-weight: 700;
}

.ss-home-feature-card p{
    margin: 0;
    font-size: 15px;
    line-height: 1.8;
    color: #667283;
}

.ss-home-guru-wrap{
    align-items: flex-start;
}

.ss-home-guru-content{
    padding-right: 20px;
}

.ss-home-gratitude-block{
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(23,52,109,.08);
}

.ss-home-gratitude-block:last-of-type{
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 24px;
}

.ss-home-gratitude-block h4{
    margin: 0 0 10px;
    font-size: 24px;
    line-height: 1.3;
    color: #17346d;
    font-weight: 700;
}

.ss-home-gratitude-block p{
    margin: 0;
    font-size: 16px;
    line-height: 1.95;
    color: #5f6b7a;
}

.ss-home-founder-signoff{
    margin-top: 20px;
    padding: 22px 24px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15,23,42,.05);
}

.ss-home-founder-signoff p{
    margin: 0 0 8px;
    font-size: 16px;
    color: #667283;
}

.ss-home-founder-signoff strong{
    font-size: 20px;
    color: #17346d;
    font-weight: 700;
}

.ss-home-guru-media{
    text-align: left;
}

.ss-home-guru-media img{
    width: 100%;
    display: block;
    border-radius: 24px;
    box-shadow: 0 18px 42px rgba(15,23,42,.08);
}

.ss-home-guru-quote-box{
    margin-top: 22px;
    padding: 28px 26px;
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 16px 35px rgba(15,23,42,.07);
    border-top: 4px solid #78a56f;
}

.ss-home-guru-quote-box h3{
    margin: 0 0 12px;
    font-size: 28px;
    line-height: 1.2;
    color: #17346d;
    font-weight: 700;
}

.ss-home-guru-quote-box p{
    margin: 0 0 14px;
    font-size: 17px;
    line-height: 1.9;
    color: #5f6b7a;
    font-style: italic;
}

.ss-home-guru-quote-box span{
    display: inline-block;
    font-size: 16px;
    color: #559864;
    font-weight: 600;
}

@media (max-width: 991px){
    .ss-home-guru-content{
        padding-right: 0;
    }

    .ss-home-guru-media{
        text-align: center;
    }

    .ss-home-guru-quote-box{
        text-align: left;
    }
}

@media (max-width: 767px){
    .ss-home-gratitude-block h4{
        font-size: 22px;
    }

    .ss-home-guru-quote-box{
        padding: 22px 20px;
    }

    .ss-home-guru-quote-box h3{
        font-size: 24px;
    }

    .ss-home-guru-quote-box p{
        font-size: 16px;
    }
}

.ss-home-hero-content,
.ss-home-split-content,
.ss-home-split-media,
.ss-home-header{
    animation: ssFadeUp .9s ease both;
}

@keyframes ssFadeUp{
    from{
        opacity: 0;
        transform: translateY(24px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 991px){
    .ss-home-section{
        padding: 80px 0;
    }

    .ss-home-split-wrap,
    .ss-home-split-wrap-reverse{
        flex-direction: column;
    }

    .ss-home-split-content,
    .ss-home-split-media{
        flex: 0 0 100%;
        width: 100%;
    }

    .ss-home-hero{
        min-height: auto;
    }

    .ss-home-hero-inner{
        padding: 90px 0 70px;
        justify-content: center;
    }

    .ss-home-hero-content{
        margin: 0 auto;
        max-width: 100%;
    }

    .ss-home-split-content h3{
        font-size: 32px;
    }
}

@media (max-width: 767px){
    .ss-home-section{
        padding: 58px 0;
    }

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

    .ss-home-hero-content p{
        font-size: 16px;
        line-height: 1.85;
    }

    .ss-home-header-title,
    .ss-home-split-content h2{
        font-size: 28px;
    }

    .ss-home-split-content h3{
        font-size: 28px;
    }

    .ss-home-feature-grid{
        grid-template-columns: 1fr;
    }

    .ss-home-video-tabs{
        gap: 8px;
    }

    .ss-home-video-tabs button{
        font-size: 13px;
        padding: 8px 12px;
    }

    .ss-home-hero-actions{
        flex-direction: column;
        align-items: flex-start;
    }
}

.ss-home-section{
    padding: 50px 0;
    position: relative;
    margin-bottom: 20px;
}

.ss-home-section:last-child{
    margin-bottom: 0;
}


.ss-home-video-embed{
    background: #dfe7ea;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 14px 38px rgba(15,23,42,.08);
}

.ss-home-video-frame{
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 24px;
    background: #000;
}

.ss-home-video-frame iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 24px;
}

.ss-home-video-tabs button{
    border: 1px solid #c9d7ce;
    background: #ffffff;
    color: #5f6b7a;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all .3s ease;
}

.ss-home-video-tabs button.active,
.ss-home-video-tabs button:hover{
    background: #559864;
    border-color: #559864;
    color: #ffffff;
}


.ss-home-bullet-list{
    list-style: none;
    margin: 18px 0 22px;
    padding: 0;
}

.ss-home-bullet-list li{
    position: relative;
    padding-left: 30px;
    margin-bottom: 14px;
    font-size: 16px;
    line-height: 1.9;
    color: #5f6b7a;
    font-weight: 500;
}

.ss-home-bullet-list li:last-child{
    margin-bottom: 0;
}

.ss-home-bullet-list li::before{
    content: "";
    position: absolute;
    top: 11px;
    left: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(180deg, #7aa66f 0%, #5c8f63 100%);
    box-shadow: 0 0 0 4px rgba(122,166,111,.12);
}





.ss-video-modal{
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all .35s ease;
}

.ss-video-modal.is-open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.ss-video-modal-backdrop{
    position: absolute;
    inset: 0;
    background: rgba(8, 14, 24, 0.72);
    backdrop-filter: blur(8px);
}

.ss-video-modal-dialog{
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 980px;
    background: linear-gradient(180deg, #fbfaf7 0%, #f4f5f1 100%);
    border-radius: 28px;
    padding: 34px 34px 28px;
    box-shadow: 0 30px 80px rgba(0,0,0,.22);
    border: 1px solid rgba(201,171,103,.22);
    transform: translateY(24px) scale(.98);
    transition: all .35s ease;
}

.ss-video-modal.is-open .ss-video-modal-dialog{
    transform: translateY(0) scale(1);
}

.ss-video-modal-close{
    position: absolute;
    top: 16px;
    right: 18px;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    color: #17346d;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(15,23,42,.10);
    transition: all .3s ease;
}

.ss-video-modal-close:hover{
    background: #17346d;
    color: #ffffff;
    transform: rotate(90deg);
}

.ss-video-modal-header{
    text-align: center;
    max-width: 760px;
    margin: 0 auto 24px;
}

.ss-video-modal-badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 18px;
    border: 1px solid #75a36e;
    border-radius: 12px;
    color: #73976d;
    background: #d5e4db;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 18px;
}

.ss-video-modal-header h3{
    margin: 0 0 12px;
    font-size: 36px;
    line-height: 1.15;
    color: #17346d;
    font-weight: 700;
}

.ss-video-modal-header p{
    margin: 0;
    font-size: 16px;
    line-height: 1.8;
    color: #6b7280;
}

.ss-video-modal-tabs{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 24px;
}

.ss-video-modal-tabs button{
    border: 1px solid #c9d7ce;
    background: #ffffff;
    color: #5f6b7a;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s ease;
}

.ss-video-modal-tabs button.active,
.ss-video-modal-tabs button:hover{
    background: #559864;
    border-color: #559864;
    color: #ffffff;
}

.ss-video-modal-frame-wrap{
    border-radius: 24px;
    overflow: hidden;
    background: #dde3e4;
    box-shadow: 0 18px 40px rgba(15,23,42,.10);
}

.ss-video-modal-frame{
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    background: #000;
}

.ss-video-modal-frame iframe{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

body.ss-modal-open{
    overflow: hidden;
}

@media (max-width: 991px){
    .ss-video-modal{
        padding: 20px;
    }

    .ss-video-modal-dialog{
        padding: 28px 22px 22px;
        border-radius: 22px;
    }

    .ss-video-modal-header h3{
        font-size: 30px;
    }
}

@media (max-width: 767px){
    .ss-video-modal{
        padding: 14px;
        align-items: flex-end;
    }

    .ss-video-modal-dialog{
        padding: 22px 16px 18px;
        border-radius: 20px 20px 0 0;
        max-height: 92vh;
        overflow-y: auto;
    }

    .ss-video-modal-header h3{
        font-size: 25px;
    }

    .ss-video-modal-tabs{
        justify-content: flex-start;
    }

    .ss-video-modal-tabs button{
        font-size: 13px;
        padding: 9px 12px;
    }

    .ss-video-modal-close{
        width: 40px;
        height: 40px;
        font-size: 28px;
    }
}





*{box-sizing:border-box;margin:0;padding:0}
    .team-section{
      max-width:1400px;
      margin:0 auto;
    }
    .container{
      max-width:1320px;
      margin:0 auto;
    }
    .section-header{
      text-align:center;
      max-width:1180px;
      margin:0 auto 60px;
    }
    .section-badge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:40px;
      padding:8px 18px;
      border:1px solid #75a36e;
      border-radius:12px;
      color:#73976d;
      background:#D5E4DB;
      font-size:15px;
      font-weight:500;
      line-height:1;
      margin-bottom:24px;
    }
    
    .section-header{
    text-align: center !important;
    max-width: 1180px;
    margin: 0 auto 60px;
}

.section-header .section-title{
    display: block;
    width: 100%;
    text-align: center !important;
    margin: 0 auto 18px !important;
}

.section-header .section-desc{
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


    .section-title{
      font-size:clamp(32px,4vw,32px);
      line-height:1.15;
      font-weight:700;
      letter-spacing:-1px;
      margin-bottom:18px;
    }
    .section-desc{
      max-width:1000px;
      margin:0 auto;
      font-size:clamp(15px,1.45vw,18px);
      line-height:1.9;
      color:#98a1b1;
      font-weight:400;
    }

    .slider-wrap{
      position:relative;
      margin-top:30px;
      padding:0 58px;
    }
    .slider{
      overflow:hidden;
      width:100%;
    }
    .slider-track{
      display:flex;
      gap:22px;
      transition:transform .55s ease;
      will-change:transform;
    }

    .team-card{
      flex:0 0 calc((100% - 66px) / 4);
      background:#fff;
      border-radius:22px;
      overflow:hidden;
      box-shadow:0 12px 34px rgba(15,23,42,.06);
      transition:transform .35s ease, box-shadow .35s ease;
    }
    .team-card:hover{
      transform:translateY(-8px);
      box-shadow:0 18px 42px rgba(15,23,42,.12);
    }

    .team-photo{
      height:330px;
      background:#e8edf3;
      overflow:hidden;
    }
    .team-photo img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      transition:transform .45s ease;
    }
    .team-card:hover .team-photo img{
      transform:scale(1.06);
    }

    .team-info{
      padding:18px 14px 22px;
      text-align:center;
    }
    .team-info h3{
      font-size:19px;
      line-height:1.35;
      color:#559864;
      margin-bottom:6px;
      font-weight:700;
    }
    .team-info p{
      font-size:14px;
      color:#7d8798;
      font-weight:500;
      line-height:1.6;
    }

    .arrow{
      position:absolute;
      top:50%;
      transform:translateY(-50%);
      width:44px;
      height:44px;
      border:none;
      border-radius:50%;
      background:#559864;
      color:#fff;
      font-size:24px;
      cursor:pointer;
      z-index:5;
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow:0 10px 24px rgba(23,52,109,.18);
      transition:background .25s ease, transform .25s ease;
    }
    .arrow:hover{
      background:#559864;
    }
    .arrow.left{left:0}
    .arrow.right{right:0}

    @media (max-width: 1199px){
      .team-card{
        flex:0 0 calc((100% - 44px) / 3);
      }
    }
    @media (max-width: 991px){
      .team-card{
        flex:0 0 calc((100% - 22px) / 2);
      }
    }
    @media (max-width: 640px){
      body{padding:40px 16px}
      .section-header{margin-bottom:36px}
      .slider-wrap{padding:0 44px}
      .team-card{
        flex:0 0 100%;
      }
      .team-photo{
        height:300px;
      }
      .arrow{
        width:38px;
        height:38px;
        font-size:20px;
      }
    }
    
.core-team-section{
    padding: 70px 0;
    background: #f4f5f7;
}

.core-team-header{
    text-align: center;
    max-width: 980px;
    margin: 0 auto 50px;
}

.core-team-badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 18px;
    border: 1px solid #75a36e;
    border-radius: 12px;
    color:#73976d;
    background:#D5E4DB;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 24px;
}

.core-team-title{
    display: block;
    width: 100%;
    text-align: center;
    font-size: clamp(32px, 4vw, 32px);
    line-height: 1.15;
    font-weight: 700;
    color: #17346d;
    letter-spacing: -0.5px;
    margin: 0 auto 18px;
}

.core-team-desc{
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.9;
    color: #98a1b1;
    font-weight: 400;
}

.core-team-row{
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 30px;
}

.core-team-card{
    width: 100%;
    max-width: 340px;
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 12px 34px rgba(15,23,42,.06);
    transition: transform .35s ease, box-shadow .35s ease;
}

.core-team-card:hover{
    transform: translateY(-8px);
    box-shadow: 0 18px 42px rgba(15,23,42,.12);
}

.core-team-photo{
    height: 340px;
    overflow: hidden;
    background: #e8edf3;
}

.core-team-photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s ease;
}

.core-team-card:hover .core-team-photo img{
    transform: scale(1.05);
}

.core-team-info{
    padding: 20px 18px 24px;
    text-align: center;
}

.core-team-info h3{
    font-size: 22px;
    line-height: 1.35;
    color: #559864;
    margin-bottom: 8px;
    font-weight: 700;
}

.core-team-info p{
    font-size: 15px;
    color: #7d8798;
    font-weight: 500;
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 767px){
    .core-team-section{
        padding: 50px 0;
    }

    .core-team-row{
        gap: 22px;
    }

    .core-team-card{
        max-width: 100%;
    }

    .core-team-photo{
        height: 300px;
    }
}



.service-team-section{
    padding: 70px 0;
    background: #f4f5f7;
}

.service-team-header{
    text-align: center;
    max-width: 980px;
    margin: 0 auto 50px;
}

.service-team-badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 18px;
    border: 1px solid #75a36e;
    border-radius: 12px;
    color: #73976d;
    background: #D5E4DB;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 24px;
}

.service-team-title{
    display: block;
    width: 100%;
    text-align: center;
    font-size: 32px;
    line-height: 1.15;
    font-weight: 700;
    color: #17346d;
    letter-spacing: -0.5px;
    margin: 0 auto 18px;
}

.service-team-desc{
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.9;
    color: #98a1b1;
    font-weight: 400;
}

.service-team-row{
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 34px;
}

.service-team-row > .service-team-card,
.service-team-row > .service-team-link{
    flex: 0 0 calc((100% - 68px) / 3);
    max-width: calc((100% - 68px) / 3);
}

.service-team-link{
    display: flex;
    text-decoration: none;
    color: inherit;
}

.service-team-card{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 12px 34px rgba(15,23,42,.06);
    transition: transform .35s ease, box-shadow .35s ease;
}

.service-team-card:hover{
    transform: translateY(-8px);
    box-shadow: 0 18px 42px rgba(15,23,42,.12);
}

.service-team-photo{
    width: 100%;
    aspect-ratio: 400 / 227;
    overflow: hidden;
    background: #e8edf3;
    flex-shrink: 0;
}

.service-team-photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s ease;
}

.service-team-card:hover .service-team-photo img{
    transform: scale(1.04);
}

.service-team-info{
    padding: 22px 18px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
}

.service-team-info h3{
    font-size: 24px;
    line-height: 1.35;
    color: #559864;
    margin-bottom: 8px;
    font-weight: 700;
}

.service-team-info p{
    font-size: 15px;
    color: #7d8798;
    font-weight: 500;
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 991px){
    .service-team-row > .service-team-card,
    .service-team-row > .service-team-link{
        flex: 0 0 calc((100% - 34px) / 2);
        max-width: calc((100% - 34px) / 2);
    }
}

@media (max-width: 767px){
    .service-team-section{
        padding: 50px 0;
    }

    .service-team-row{
        gap: 22px;
    }

    .service-team-row > .service-team-card,
    .service-team-row > .service-team-link{
        flex: 0 0 100%;
        max-width: 100%;
    }

    .service-team-info h3{
        font-size: 21px;
    }
}

.ss-testimonials-section{
    background: linear-gradient(180deg, #f5f6f8 0%, #eef2f3 100%);
    overflow: hidden;
}

.ss-home-header-subtitle{
    max-width: 780px;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.85;
    color: #8b95a7;
    text-align: center;
}

.ss-testimonials-slider-wrap{
    position: relative;
    padding: 10px 62px 0;
}

.ss-testimonials-swiper{
    overflow: visible;
}

.ss-testimonials-swiper .swiper-wrapper{
    align-items: stretch;
}

.ss-testimonials-swiper .swiper-slide{
    height: auto;
}

.ss-testimonial-card{
    position: relative;
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    padding: 34px 28px 26px;
    border-radius: 24px;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(201,171,103,.14);
    box-shadow: 0 18px 45px rgba(15,23,42,.08);
    transition: transform .35s ease, box-shadow .35s ease;
}

.ss-testimonial-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 24px 54px rgba(15,23,42,.12);
}

.ss-testimonial-quote{
    font-size: 68px;
    line-height: .8;
    color: #7ca066;
    font-family: Georgia, serif;
}

.ss-testimonial-text{
    flex: 1;
    font-size: 16px;
    line-height: 1.9;
    color: #566173;
    margin-bottom: 24px;
}

.ss-testimonial-footer{
    padding-top: 18px;
    border-top: 1px solid rgba(23,52,109,.08);
}

.ss-testimonial-footer h4{
    margin: 0 0 6px;
    font-size: 20px;
    line-height: 1.3;
    color: #17346d;
    font-weight: 700;
}

.ss-testimonial-footer p{
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #7a8494;
    font-weight: 500;
}

.ss-testimonials-nav{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid rgba(201,171,103,.24);
    box-shadow: 0 12px 30px rgba(15,23,42,.10);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    transition: all .3s ease;
}

.ss-testimonials-nav:hover{
    background: #5f8f63;
    color: #ffffff;
    border-color: #5f8f63;
}

.ss-testimonials-nav span{
    font-size: 22px;
    line-height: 1;
    color: #17346d;
    transition: all .3s ease;
}

.ss-testimonials-nav:hover span{
    color: #ffffff;
}

.ss-testimonials-prev{
    left: 0;
}

.ss-testimonials-next{
    right: 0;
}

@media (max-width: 991px){
    .ss-testimonials-slider-wrap{
        padding: 10px 0 0;
    }

    .ss-testimonials-nav{
        display: none;
    }
}

@media (max-width: 767px){
    .ss-testimonial-card{
        padding: 28px 22px 22px;
        border-radius: 20px;
    }

    .ss-testimonial-text{
        font-size: 15px;
        line-height: 1.82;
    }

    .ss-testimonial-footer h4{
        font-size: 18px;
    }

    .ss-home-header-subtitle{
        font-size: 15px;
        line-height: 1.8;
    }
}







/* Eight Path Journey Page */

.epj-explore-hero{
    position: relative;
    padding: 90px 0 110px;
    background: linear-gradient(180deg, #f6f8f5 0%, #eef2ee 100%);
    overflow: hidden;
}

.epj-explore-grid{
    display: grid;
    grid-template-columns: minmax(0, 0.80fr) minmax(0, 1.20fr);
    align-items: center;
    /* gap: 40px; */
    min-height: 78vh;
}

.epj-explore-content{
    max-width: 500px;
    padding-right: 0;
}

.epj-explore-label{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border: 1px solid rgba(95, 143, 99, 0.28);
    border-radius: 999px;
    background: rgba(255,255,255,0.78);
    color: #5f8f63;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 26px;
}

.epj-explore-title{
    margin: 0;
    color: #17346d;
    font-size: 54px;
    line-height: 1.02;
    font-weight: 700;
    letter-spacing: -0.03em;
    max-width: 15ch;
}

.epj-explore-text{
    margin: 26px 0 0;
    color: #5f6b7a;
    font-size: 18px;
    line-height: 1.9;
    max-width: 40ch;
}

.epj-explore-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 34px;
}

.epj-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 26px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none !important;
    transition: all .3s ease;
}

.epj-btn-primary{
    background: #5f8f63;
    color: #ffffff !important;
    box-shadow: 0 16px 30px rgba(95, 143, 99, 0.22);
}

.epj-btn-primary:hover{
    background: #4f7d52;
    color: #ffffff !important;
    transform: translateY(-2px);
}

.epj-btn-secondary{
    background: transparent;
    color: #17346d !important;
    border: 1px solid rgba(23, 52, 109, 0.16);
}

.epj-btn-secondary:hover{
    background: #ffffff;
    color: #17346d !important;
    border-color: rgba(23, 52, 109, 0.28);
    transform: translateY(-2px);
}

.epj-explore-media{
    position: relative;
    height: 100%;
}

.epj-explore-image-wrap{
    position: relative;
    height: 90%;
    min-height: 680px;
    overflow: hidden;
    border-radius: 36px;
    background: #dfe6dd;
    box-shadow: 0 30px 70px rgba(19, 31, 53, 0.12);
}

.epj-explore-image{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
}

@media (max-width: 1399px){
    .epj-explore-title{
        font-size: 58px;
    }

    .epj-explore-image-wrap{
        min-height: 660px;
    }
}

@media (max-width: 1199px){
    .epj-explore-grid{
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 40px;
        min-height: auto;
    }

    .epj-explore-title{
        font-size: 50px;
    }

    .epj-explore-image-wrap{
        min-height: 580px;
    }
}

@media (max-width: 991px){
    .epj-explore-hero{
        padding: 72px 0 88px;
    }

    .epj-explore-grid{
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .epj-explore-content{
        max-width: 100%;
        padding-right: 0;
    }

    .epj-explore-title{
        max-width: 100%;
        font-size: 44px;
    }

    .epj-explore-image-wrap{
        min-height: 480px;
    }
}

@media (max-width: 767px){
    .epj-explore-hero{
        padding: 54px 0 70px;
    }

    .epj-explore-label{
        margin-bottom: 18px;
        font-size: 11px;
        letter-spacing: 0.13em;
    }

    .epj-explore-title{
        font-size: 34px;
        line-height: 1.12;
    }

    .epj-explore-text{
        margin-top: 18px;
        font-size: 15px;
        line-height: 1.9;
    }

    .epj-explore-actions{
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-top: 26px;
    }

    .epj-btn{
        width: 100%;
        min-height: 50px;
        padding: 0 20px;
        font-size: 13px;
    }

    .epj-explore-image-wrap{
        min-height: 360px;
        border-radius: 24px;
    }
}





.epj-pathways-section{
    padding: 110px 0;
    background: linear-gradient(180deg, #f2f7f2 0%, #e8f0e8 100%);
}

.epj-pathways-heading{
    max-width: 860px;
    margin: 0 auto 52px;
}

.epj-pathways-label{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border: 1px solid rgba(85, 152, 100, 0.30);
    border-radius: 999px;
    background: rgba(255,255,255,0.75);
    color: #559864;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.epj-pathways-title{
    margin: 0;
    color: #17346d;
    font-size: 48px;
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.epj-pathways-subtitle{
    margin: 18px auto 0;
    color: #5f6b7a;
    font-size: 18px;
    line-height: 1.9;
    max-width: 760px;
}

.epj-pathways-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.epj-path-card{
    position: relative;
}

.epj-path-card-media{
    position: relative;
    min-height: 420px;
    overflow: hidden;
    border-radius: 28px;
    background: linear-gradient(180deg, #7cab84 0%, #559864 42%, #3c6f46 100%);
    box-shadow: 0 22px 46px rgba(39, 68, 45, 0.16);
}

.epj-path-card-image{
    width: 100%;
    height: 200px;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform .5s ease;
}

.epj-path-card:hover .epj-path-card-image{
    transform: scale(1.04);
}

.epj-path-card-overlay{
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px 24px 24px;
    background: linear-gradient(
        180deg,
        rgba(14, 24, 18, 0.00) 0%,
        rgba(35, 58, 41, 0.10) 36%,
        rgba(48, 83, 57, 0.62) 62%,
        rgba(38, 68, 45, 0.92) 100%
    );
}

.epj-path-card-overlay h3{
    margin: 0;
    color: #ffffff;
    font-size: 20px;
    line-height: 1.15;
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(0,0,0,0.10);
}

.epj-path-card-overlay p{
    margin: 10px 0 0;
    color: rgba(255,255,255,0.90);
    font-size: 14px;
    line-height: 1.5;
    max-width: 30ch;
}

.epj-path-card-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 18px;
    min-height: 46px;
    width: fit-content;
    padding: 0 18px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
    transition: all .3s ease;
}

.epj-path-card-btn:hover{
    background: #ffffff;
    color: #355e3d;
    border-color: #ffffff;
}

.epj-modal{
    position: fixed;
    inset: 0;
    display: none;
    z-index: 9999;
}

.epj-modal.is-open{
    display: block;
}

.epj-modal-backdrop{
    position: absolute;
    inset: 0;
    background: rgba(9, 16, 29, 0.62);
    backdrop-filter: blur(8px);
}

.epj-modal-dialog{
    position: relative;
    width: min(1360px, calc(100% - 40px));
    height: min(860px, calc(100vh - 24px));
    margin: 12px auto;
    overflow: hidden;
    border-radius: 32px;
    background: #f8faf7;
    box-shadow: 0 32px 80px rgba(9, 16, 29, 0.28);
}

.epj-modal-close{
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 5;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: rgba(23, 52, 109, 0.08);
    color: #17346d;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    transition: all .25s ease;
}

.epj-modal-close:hover{
    background: rgba(23, 52, 109, 0.14);
}

.epj-modal-layout{
    display: grid;
    grid-template-columns: 52% 48%;
    height: 100%;
    align-items: stretch;
}

.epj-modal-media{
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 100%;
    background: #e4eee4;
}

.epj-modal-image{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
}

.epj-modal-content{
    padding: 42px 42px 28px;
    overflow-y: auto;
    height: 100%;
}

.epj-modal-eyebrow{
    color: #559864;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.epj-modal-title{
    margin: 0;
    color: #17346d;
    font-size: 42px;
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.epj-modal-content p{
    margin: 14px 0 0;
    color: #5f6b7a;
    font-size: 17px;
    line-height: 1.75;
}

.epj-modal-two-col{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-top: 24px;
    align-items: start;
}

.epj-modal-block{
    margin-top: 0;
}

.epj-modal-block h4{
    margin: 0 0 12px;
    color: #17346d;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.epj-modal-block ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

.epj-modal-block ul li{
    position: relative;
    padding-left: 18px;
    margin-bottom: 8px;
    color: #5f6b7a;
    font-size: 15px;
    line-height: 1.6;
}

.epj-modal-block ul li:last-child{
    margin-bottom: 0;
}

.epj-modal-block ul li::before{
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #559864;
}

.epj-check-list li{
    padding-left: 18px;
    margin-bottom: 8px;
    line-height: 1.6;
}

.epj-check-list li::before{
    content: "✓";
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    background: transparent;
    color: #559864;
    font-size: 14px;
    font-weight: 700;
}

.epj-modal-journey{
    margin-top: 24px;
    margin-bottom: 0;
    padding: 16px 20px;
    border-radius: 20px;
    background: #e3f0e5;
    color: #17346d;
    border: 1px solid rgba(85, 152, 100, 0.18);
}

.epj-modal-journey span{
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin-bottom: 8px;
    color: #559864;
}

.epj-modal-journey strong{
    font-size: 18px;
    line-height: 1.55;
    font-weight: 700;
}

@media (min-width: 1200px){
    .epj-modal-dialog{
        width: min(1380px, calc(100% - 32px));
        height: min(88vh, 900px);
        margin: 16px auto;
    }

    .epj-modal-content{
        padding: 40px 40px 24px;
    }
}

@media (max-width: 1399px){
    .epj-pathways-grid{
        gap: 20px;
    }

    .epj-path-card-media{
        min-height: 400px;
    }
}

@media (max-width: 1199px){
    .epj-pathways-title{
        font-size: 42px;
    }

    .epj-pathways-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .epj-modal-dialog{
        width: min(96vw, 980px);
        height: calc(100vh - 24px);
        margin: 12px auto;
    }

    .epj-modal-layout{
        grid-template-columns: 1fr;
        height: 100%;
    }

    .epj-modal-media{
        height: 300px;
        min-height: 300px;
    }

    .epj-modal-content{
        padding: 32px 28px 24px;
    }

    .epj-modal-title{
        font-size: 36px;
    }

    .epj-modal-two-col{
        grid-template-columns: 1fr;
        gap: 22px;
    }
}

@media (max-width: 767px){
    .epj-pathways-section{
        padding: 72px 0;
    }

    .epj-pathways-heading{
        margin-bottom: 34px;
    }

    .epj-pathways-title{
        font-size: 32px;
        line-height: 1.14;
    }

    .epj-pathways-subtitle{
        font-size: 15px;
        line-height: 1.9;
    }

    .epj-pathways-grid{
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .epj-path-card-media{
        min-height: 360px;
        border-radius: 22px;
    }

    .epj-path-card-image{
        height: 180px;
    }

    .epj-path-card-overlay{
        padding: 22px 18px 18px;
    }

    .epj-modal-dialog{
        width: calc(100% - 12px);
        height: calc(100vh - 12px);
        margin: 6px auto;
        border-radius: 22px;
    }

    .epj-modal-media{
        height: 220px;
        min-height: 220px;
    }

    .epj-modal-content{
        padding: 24px 18px 20px;
    }

    .epj-modal-title{
        font-size: 28px;
    }

    .epj-modal-content p,
    .epj-modal-block ul li{
        font-size: 15px;
    }

    .epj-modal-two-col{
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .epj-modal-journey strong{
        font-size: 16px;
    }

    .epj-modal-close{
        top: 12px;
        right: 12px;
        width: 40px;
        height: 40px;
        font-size: 24px;
    }
}




.ss-journey-section{
    position: relative;
    padding: 110px 0;
    background: linear-gradient(180deg, #f7faf6 0%, #eef5ee 100%);
    overflow: hidden;
}

.ss-journey-wrap{
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    gap: 48px;
    align-items: center;
}

.ss-journey-content{
    max-width: 520px;
}

.ss-journey-label{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    margin-bottom: 20px;
    border: 1px solid rgba(85, 152, 100, 0.26);
    border-radius: 999px;
    background: rgba(255,255,255,0.76);
    color: #559864;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ss-journey-title{
    margin: 0;
    color: #17346d;
    font-size: 52px;
    line-height: 1.06;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.ss-journey-text{
    margin: 22px 0 0;
    color: #5f6b7a;
    font-size: 18px;
    line-height: 1.9;
    max-width: 48ch;
}

.ss-journey-highlights{
    display: flex;
    flex-wrap: wrap;
    gap: 12px 14px;
    margin-top: 28px;
}

.ss-journey-highlights span{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    background: #e6f1e7;
    border: 1px solid rgba(85, 152, 100, 0.16);
    color: #355e3d;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.ss-journey-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    margin-top: 32px;
    padding: 0 24px;
    border-radius: 999px;
    background: #559864;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 16px 34px rgba(58, 107, 67, 0.18);
    transition: all .3s ease;
}

.ss-journey-btn:hover{
    background: #3f7c4b;
    color: #ffffff;
    transform: translateY(-1px);
}

.ss-journey-media{
    position: relative;
}

.ss-journey-image-card{
    position: relative;
    overflow: hidden;
    border-radius: 32px;
    padding: 18px;
}

.ss-journey-image{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 24px;
}

@media (max-width: 1399px){
    .ss-journey-wrap{
        gap: 40px;
    }

    .ss-journey-title{
        font-size: 46px;
    }
}

@media (max-width: 1199px){
    .ss-journey-section{
        padding: 90px 0;
    }

    .ss-journey-wrap{
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .ss-journey-content{
        max-width: 100%;
    }

    .ss-journey-title{
        font-size: 42px;
    }

    .ss-journey-text{
        max-width: 100%;
    }

    .ss-journey-image-card{
        max-width: 900px;
        margin: 0 auto;
    }
}

@media (max-width: 767px){
    .ss-journey-section{
        padding: 72px 0;
    }

    .ss-journey-wrap{
        gap: 26px;
    }

    .ss-journey-label{
        margin-bottom: 16px;
        padding: 9px 16px;
        font-size: 11px;
    }

    .ss-journey-title{
        font-size: 32px;
        line-height: 1.12;
    }

    .ss-journey-text{
        margin-top: 18px;
        font-size: 15px;
        line-height: 1.85;
    }

    .ss-journey-highlights{
        display: block;
        margin-top: 20px;
        color: #355e3d;
        font-size: 15px;
        line-height: 1.9;
        font-weight: 600;
    }

    .ss-journey-highlights span{
        display: inline;
        min-height: auto;
        padding: 0;
        border: 0;
        background: transparent;
        border-radius: 0;
        color: #355e3d;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.9;
        white-space: normal;
    }

    .ss-journey-highlights span:not(:last-child)::after{
        content: " • ";
    }

    .ss-journey-btn{
        min-height: 48px;
        margin-top: 24px;
        padding: 0 20px;
        font-size: 12px;
    }

    .ss-journey-image-card{
        padding: 10px;
        border-radius: 22px;
    }

    .ss-journey-image{
        border-radius: 16px;
    }
}



.ss-pricing-section{
    position: relative;
    padding: 110px 0;
    background: linear-gradient(180deg, #f8faf7 0%, #edf4ee 100%);
    overflow: hidden;
}

.ss-pricing-heading{
    max-width: 820px;
    margin: 0 auto 44px;
}

.ss-pricing-label{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    margin-bottom: 18px;
    border: 1px solid rgba(85, 152, 100, 0.28);
    border-radius: 999px;
    background: rgba(255,255,255,0.80);
    color: #559864;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ss-pricing-title{
    margin: 0;
    color: #17346d;
    font-size: 52px;
    line-height: 1.06;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.ss-pricing-subtitle{
    margin: 18px auto 0;
    color: #5f6b7a;
    font-size: 18px;
    line-height: 1.85;
    max-width: 640px;
}

.ss-pricing-hero{
    position: relative;
    margin: 0 auto 34px;
    border-radius: 34px;
    overflow: hidden;
    background: linear-gradient(180deg, #f3f7f1 0%, #e4ece2 100%);
    box-shadow: 0 28px 60px rgba(24, 41, 31, 0.12);
    padding: 16px;
}

.ss-pricing-hero-image{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 24px;
}

.ss-pricing-cards{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.ss-pricing-card{
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 20px 44px rgba(24, 41, 31, 0.10);
    transition: transform .3s ease, box-shadow .3s ease;
}

.ss-pricing-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 26px 52px rgba(24, 41, 31, 0.14);
}

.ss-pricing-card-image{
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 1399px){
    .ss-pricing-title{
        font-size: 46px;
    }

    .ss-pricing-cards{
        gap: 18px;
    }
}

@media (max-width: 1199px){
    .ss-pricing-section{
        padding: 90px 0;
    }

    .ss-pricing-title{
        font-size: 42px;
    }

    .ss-pricing-hero{
        border-radius: 28px;
        padding: 12px;
    }

    .ss-pricing-hero-image{
        border-radius: 20px;
    }

    .ss-pricing-cards{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}

@media (max-width: 767px){
    .ss-pricing-section{
        padding: 72px 0;
    }

    .ss-pricing-heading{
        margin-bottom: 28px;
    }

    .ss-pricing-label{
        margin-bottom: 16px;
        padding: 9px 16px;
        font-size: 11px;
    }

    .ss-pricing-title{
        font-size: 32px;
        line-height: 1.12;
    }

    .ss-pricing-subtitle{
        margin-top: 14px;
        font-size: 15px;
        line-height: 1.8;
    }

    .ss-pricing-hero{
        margin-bottom: 22px;
        border-radius: 22px;
        padding: 8px;
    }

    .ss-pricing-hero-image{
        border-radius: 16px;
    }

    .ss-pricing-cards{
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .ss-pricing-card{
        border-radius: 22px;
    }
}



.ss-character-section{
    position: relative;
    padding: 80px 0;
    overflow: hidden;
}

.ss-character-wrap{
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: 72px 72px;
    border-radius: 36px;
    background: rgba(255,255,255,0.74);
    border: 1px solid rgba(85, 152, 100, 0.10);
    box-shadow: 0 28px 70px rgba(21, 34, 28, 0.10);
    backdrop-filter: blur(10px);
}

.ss-character-wrap::before{
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 28px;
    border: 1px solid rgba(85, 152, 100, 0.08);
    pointer-events: none;
}

.ss-character-label{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    margin-bottom: 28px;
    border: 1px solid rgba(85, 152, 100, 0.26);
    border-radius: 999px;
    background: rgba(245,250,245,0.9);
    color: #559864;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ss-character-grid{
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    align-items: start;
}

.ss-character-title{
    margin: 0;
    color: #17346d;
    font-size: 58px;
    line-height: 0.98;
    font-weight: 700;
    letter-spacing: -0.04em;
    max-width: 11ch;
}

.ss-character-intro{
    margin-top: 28px;
}

.ss-character-intro p{
    margin: 0 0 18px;
    color: #5f6b7a;
    font-size: 21px;
    line-height: 1.75;
    letter-spacing: -0.01em;
}

.ss-character-intro p:last-child{
    margin-bottom: 0;
}

.ss-character-emphasis{
    margin: 28px 0 0;
    color: #17346d;
    font-size: 28px;
    line-height: 1.5;
    font-weight: 600;
    max-width: 24ch;
    letter-spacing: -0.02em;
}

.ss-character-right{
    padding-top: 10px;
}

.ss-character-body{
    margin: 0;
    color: #5f6b7a;
    font-size: 20px;
    line-height: 1.8;
    max-width: 34ch;
}

.ss-character-body span{
    color: #355e3d;
    font-weight: 700;
}

.ss-character-closing-block{
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid rgba(85, 152, 100, 0.14);
}

.ss-character-closing{
    margin: 0 0 12px;
    color: #17346d;
    font-size: 24px;
    line-height: 1.5;
    font-weight: 500;
}

.ss-character-final{
    margin: 0;
    color: #17346d;
    font-size: 34px;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: -0.03em;
    max-width: 16ch;
}

@media (max-width: 1399px){
    .ss-character-title{
        font-size: 52px;
    }

    .ss-character-emphasis{
        font-size: 26px;
    }

    .ss-character-body{
        font-size: 19px;
    }
}

@media (max-width: 1199px){
    .ss-character-section{
        padding: 96px 0;
    }

    .ss-character-wrap{
        padding: 56px 44px;
        border-radius: 30px;
    }

    .ss-character-wrap::before{
        inset: 14px;
        border-radius: 22px;
    }

    .ss-character-grid{
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .ss-character-title{
        font-size: 44px;
        max-width: 13ch;
    }

    .ss-character-intro p{
        font-size: 18px;
    }

    .ss-character-emphasis{
        font-size: 24px;
        max-width: 100%;
    }

    .ss-character-right{
        padding-top: 0;
    }

    .ss-character-body{
        font-size: 18px;
        max-width: 100%;
    }

    .ss-character-final{
        font-size: 30px;
        max-width: 100%;
    }
}

@media (max-width: 767px){
    .ss-character-section{
        padding: 72px 0;
    }

    .ss-character-wrap{
        padding: 34px 22px;
        border-radius: 24px;
    }

    .ss-character-wrap::before{
        inset: 10px;
        border-radius: 16px;
    }

    .ss-character-label{
        margin-bottom: 18px;
        padding: 9px 15px;
        font-size: 11px;
    }

    .ss-character-grid{
        gap: 22px;
    }

    .ss-character-title{
        font-size: 34px;
        line-height: 1.04;
        max-width: 100%;
    }

    .ss-character-intro{
        margin-top: 20px;
    }

    .ss-character-intro p{
        margin-bottom: 14px;
        font-size: 16px;
        line-height: 1.8;
    }

    .ss-character-emphasis{
        margin-top: 20px;
        font-size: 21px;
        line-height: 1.55;
    }

    .ss-character-body{
        font-size: 16px;
        line-height: 1.85;
    }

    .ss-character-closing-block{
        margin-top: 24px;
        padding-top: 20px;
    }

    .ss-character-closing{
        font-size: 20px;
    }

    .ss-character-final{
        font-size: 26px;
        line-height: 1.35;
    }
}





/* FAQ Page */
.ss-faq-page{
        position: relative;
        padding: 50px 0 50px;
        overflow: hidden;
    }

    .ss-faq-page__hero{
        max-width: 920px;
        margin: 0 auto 46px;
    }

    .ss-faq-page__label,
    .ss-faq-page__cta-label{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px 18px;
        border: 1px solid rgba(85, 152, 100, 0.28);
        border-radius: 999px;
        background: rgba(255,255,255,0.82);
        color: #559864;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .ss-faq-page__label{
        margin-bottom: 20px;
    }

    .ss-faq-page__title{
        margin: 0;
        color: #17346d;
        font-size: 56px;
        line-height: 1.05;
        font-weight: 700;
        letter-spacing: -0.03em;
    }

    .ss-faq-page__subtitle{
        margin: 20px auto 0;
        max-width: 760px;
        color: #5f6b7a;
        font-size: 18px;
        line-height: 1.9;
    }

    .ss-faq-page__list-wrap{
        max-width: 980px;
        margin: 0 auto;
        padding: 38px;
        border-radius: 32px;
        background: rgba(255,255,255,0.74);
        border: 1px solid rgba(85, 152, 100, 0.10);
        box-shadow: 0 22px 56px rgba(21, 34, 28, 0.08);
        backdrop-filter: blur(10px);
    }

    .ss-faq-page__list-title{
        margin-bottom: 22px;
        color: #17346d;
        font-size: 24px;
        line-height: 1.3;
        font-weight: 700;
        letter-spacing: -0.01em;
        text-transform: uppercase;
    }

    .ss-faq-list{
        display: grid;
        gap: 14px;
    }

    .ss-faq-item{
        border-radius: 22px;
        background: #ffffff;
        border: 1px solid rgba(85, 152, 100, 0.10);
        box-shadow: 0 14px 34px rgba(21, 34, 28, 0.06);
        overflow: hidden;
        transition: all .28s ease;
    }

    .ss-faq-item.active{
        border-color: rgba(85, 152, 100, 0.18);
        box-shadow: 0 20px 44px rgba(21, 34, 28, 0.09);
    }

    .ss-faq-question{
        margin: 0;
    }

    .ss-faq-trigger{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        padding: 22px 24px;
        border: 0;
        background: transparent;
        text-align: left;
        color: #17346d;
        font-size: 19px;
        line-height: 1.5;
        font-weight: 600;
        cursor: pointer;
    }

    .ss-faq-icon{
        position: relative;
        flex: 0 0 18px;
        width: 18px;
        height: 18px;
    }

    .ss-faq-icon::before,
    .ss-faq-icon::after{
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 18px;
        height: 2px;
        border-radius: 999px;
        background: #559864;
        transform: translate(-50%, -50%);
        transition: transform .25s ease, opacity .25s ease;
    }

    .ss-faq-icon::after{
        transform: translate(-50%, -50%) rotate(90deg);
    }

    .ss-faq-trigger[aria-expanded="true"] .ss-faq-icon::after{
        opacity: 0;
        transform: translate(-50%, -50%) rotate(90deg) scaleX(0.2);
    }

    .ss-faq-panel{
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows .35s ease;
    }

    .ss-faq-item.active .ss-faq-panel{
        grid-template-rows: 1fr;
    }

    .ss-faq-answer{
        overflow: hidden;
        padding: 0 24px 22px;
    }

    .ss-faq-answer p{
        margin: 0 0 14px;
        color: #5f6b7a;
        font-size: 16px;
        line-height: 1.85;
    }

    .ss-faq-answer p:last-child{
        margin-bottom: 0;
    }

    .ss-faq-page__cta{
        max-width: 980px;
        margin: 30px auto 0;
    }

    .ss-faq-page__cta-card{
        padding: 42px 32px;
        border-radius: 32px;
        background: linear-gradient(180deg, #edf6ee 0%, #e4efe5 100%);
        border: 1px solid rgba(85, 152, 100, 0.12);
        box-shadow: 0 20px 48px rgba(21, 34, 28, 0.08);
    }

    .ss-faq-page__cta-label{
        margin-bottom: 18px;
    }

    .ss-faq-page__cta-card h2{
        margin: 0;
        color: #17346d;
        font-size: 34px;
        line-height: 1.2;
        font-weight: 700;
        letter-spacing: -0.02em;
    }

    .ss-faq-page__cta-card p{
        margin: 16px auto 0;
        max-width: 680px;
        color: #5f6b7a;
        font-size: 17px;
        line-height: 1.85;
    }

    .ss-faq-page__btn{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 52px;
        margin-top: 28px;
        padding: 0 24px;
        border-radius: 999px;
        background: #559864;
        color: #ffffff;
        text-decoration: none;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        box-shadow: 0 16px 34px rgba(58, 107, 67, 0.18);
        transition: all .25s ease;
    }

    .ss-faq-page__btn:hover{
        background: #3f7c4b;
        color: #ffffff;
    }

    @media (max-width: 1199px){
        .ss-faq-page{
            padding: 92px 0 100px;
        }

        .ss-faq-page__title{
            font-size: 46px;
        }

        .ss-faq-page__list-wrap{
            padding: 28px;
        }

        .ss-faq-page__cta-card h2{
            font-size: 30px;
        }
    }

    @media (max-width: 767px){
        .ss-faq-page{
            padding: 72px 0 80px;
        }

        .ss-faq-page__hero{
            margin-bottom: 28px;
        }

        .ss-faq-page__label,
        .ss-faq-page__cta-label{
            padding: 9px 16px;
            font-size: 11px;
        }

        .ss-faq-page__title{
            font-size: 34px;
            line-height: 1.12;
        }

        .ss-faq-page__subtitle{
            font-size: 15px;
            line-height: 1.8;
        }

        .ss-faq-page__list-wrap{
            padding: 18px;
            border-radius: 22px;
        }

        .ss-faq-page__list-title{
            margin-bottom: 16px;
            font-size: 18px;
        }

        .ss-faq-list{
            gap: 12px;
        }

        .ss-faq-item{
            border-radius: 18px;
        }

        .ss-faq-trigger{
            gap: 14px;
            padding: 18px 18px;
            font-size: 16px;
            line-height: 1.5;
        }

        .ss-faq-answer{
            padding: 0 18px 18px;
        }

        .ss-faq-answer p{
            font-size: 15px;
            line-height: 1.8;
        }

        .ss-faq-page__cta{
            margin-top: 20px;
        }

        .ss-faq-page__cta-card{
            padding: 26px 18px;
            border-radius: 22px;
        }

        .ss-faq-page__cta-card h2{
            font-size: 25px;
        }

        .ss-faq-page__cta-card p{
            font-size: 15px;
            line-height: 1.8;
        }

        .ss-faq-page__btn{
            width: 100%;
            min-height: 48px;
            margin-top: 22px;
        }
    }




/* About Us Page */

.ss-about-page{
        position: relative;
        overflow: hidden;
        padding: 110px 0 120px;
        background:
            radial-gradient(circle at top left, rgba(85, 152, 100, 0.08), transparent 28%),
            radial-gradient(circle at right center, rgba(23, 52, 109, 0.06), transparent 24%),
            linear-gradient(180deg, #f7faf6 0%, #edf4ee 100%);
    }

    .ss-about-page .container{
        max-width: 1180px;
    }

    .ss-about-hero{
        max-width: 900px;
        margin: 0 auto 56px;
        text-align: center;
    }

    .ss-about-hero__label,
    .ss-about-block__eyebrow,
    .ss-about-cta__eyebrow{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px 18px;
        border: 1px solid rgba(85, 152, 100, 0.24);
        border-radius: 999px;
        background: rgba(255,255,255,0.78);
        color: #559864;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .ss-about-hero__label{
        margin-bottom: 20px;
    }

    .ss-about-hero__title{
        margin: 0;
        color: #17346d;
        font-size: 64px;
        line-height: 1.02;
        font-weight: 700;
        letter-spacing: -0.04em;
    }

    .ss-about-hero__text{
        max-width: 760px;
        margin: 22px auto 0;
        color: #5f6b7a;
        font-size: 19px;
        line-height: 1.9;
    }

    .ss-about-block{
        margin-bottom: 26px;
        padding: 40px;
        border-radius: 32px;
        background: rgba(255,255,255,0.74);
        border: 1px solid rgba(85, 152, 100, 0.10);
        box-shadow: 0 20px 50px rgba(21, 34, 28, 0.07);
        backdrop-filter: blur(10px);
    }

    .ss-about-block__eyebrow{
        margin-bottom: 20px;
    }

    .ss-about-block__grid{
        display: grid;
        grid-template-columns: 1.05fr 1fr;
        gap: 42px;
        align-items: start;
    }

    .ss-about-block__left h2,
    .ss-about-story-card__content h2,
    .ss-about-language__intro h2,
    .ss-about-cta__card h2{
        margin: 0;
        color: #17346d;
        font-size: 42px;
        line-height: 1.14;
        font-weight: 700;
        letter-spacing: -0.03em;
    }

    .ss-about-block__right p,
    .ss-about-story-card__content p,
    .ss-about-language__intro p,
    .ss-about-language__content p{
        margin: 0 0 16px;
        color: #5f6b7a;
        font-size: 17px;
        line-height: 1.95;
    }

    .ss-about-block__right p:last-child,
    .ss-about-story-card__content p:last-child,
    .ss-about-language__intro p:last-child,
    .ss-about-language__content p:last-child{
        margin-bottom: 0;
    }

    .ss-about-story-card{
        position: relative;
        padding: 44px;
        border-radius: 30px;
        background: linear-gradient(180deg, #ffffff 0%, #f8fbf8 100%);
        border: 1px solid rgba(85, 152, 100, 0.12);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
    }

    .ss-about-story-card__quote{
        margin: 24px 0 24px;
        padding: 24px 26px;
        border-left: 4px solid #559864;
        border-radius: 0 22px 22px 0;
        background: linear-gradient(90deg, rgba(85, 152, 100, 0.10), rgba(85, 152, 100, 0.03));
        color: #17346d;
        font-size: 28px;
        line-height: 1.45;
        font-weight: 600;
        letter-spacing: -0.02em;
    }

    .ss-about-founder{
        display: inline-flex;
        flex-direction: column;
        gap: 6px;
        margin-top: 28px;
        padding-top: 22px;
        border-top: 1px solid rgba(85, 152, 100, 0.12);
    }

    .ss-about-founder__name{
        color: #17346d;
        font-size: 22px;
        line-height: 1.3;
        font-weight: 700;
        letter-spacing: -0.02em;
    }

    .ss-about-founder__role{
        color: #559864;
        font-size: 14px;
        line-height: 1.5;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .ss-about-language{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 42px;
        align-items: start;
    }

    .ss-language-tags{
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 24px;
    }

    .ss-language-tags span{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        padding: 0 16px;
        border-radius: 999px;
        background: #ffffff;
        border: 1px solid rgba(85, 152, 100, 0.14);
        color: #17346d;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.02em;
        box-shadow: 0 10px 24px rgba(21, 34, 28, 0.05);
    }

    .ss-about-cta{
        margin-top: 34px;
    }

    .ss-about-cta__card{
        position: relative;
        overflow: hidden;
        padding: 54px 30px;
        border-radius: 34px;
        text-align: center;
        background:
            radial-gradient(circle at top center, rgba(255,255,255,0.38), transparent 35%),
            linear-gradient(180deg, #eaf4eb 0%, #dfece1 100%);
        border: 1px solid rgba(85, 152, 100, 0.12);
        box-shadow: 0 22px 54px rgba(21, 34, 28, 0.08);
    }

    .ss-about-cta__eyebrow{
        margin-bottom: 18px;
    }

    .ss-about-cta__card h2{
        max-width: 760px;
        margin: 0 auto;
    }

    .ss-about-cta__btn{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 54px;
        margin-top: 28px;
        padding: 0 28px;
        border-radius: 999px;
        background: #559864;
        color: #ffffff;
        text-decoration: none;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        box-shadow: 0 16px 34px rgba(58, 107, 67, 0.18);
        transition: all .25s ease;
    }

    .ss-about-cta__btn:hover{
        background: #3f7c4b;
        color: #ffffff;
        transform: translateY(-1px);
    }

    @media (max-width: 1199px){
        .ss-about-page{
            padding: 92px 0 100px;
        }

        .ss-about-hero__title{
            font-size: 52px;
        }

        .ss-about-block{
            padding: 30px;
        }

        .ss-about-block__grid,
        .ss-about-language{
            grid-template-columns: 1fr;
            gap: 24px;
        }

        .ss-about-block__left h2,
        .ss-about-story-card__content h2,
        .ss-about-language__intro h2,
        .ss-about-cta__card h2{
            font-size: 34px;
        }

        .ss-about-story-card{
            padding: 32px;
        }
    }

    @media (max-width: 767px){
        .ss-about-page{
            padding: 72px 0 80px;
        }

        .ss-about-hero{
            margin-bottom: 30px;
        }

        .ss-about-hero__label,
        .ss-about-block__eyebrow,
        .ss-about-cta__eyebrow{
            padding: 9px 15px;
            font-size: 11px;
        }

        .ss-about-hero__title{
            font-size: 36px;
            line-height: 1.08;
        }

        .ss-about-hero__text{
            margin-top: 16px;
            font-size: 15px;
            line-height: 1.85;
        }

        .ss-about-block{
            margin-bottom: 18px;
            padding: 20px 18px;
            border-radius: 22px;
        }

        .ss-about-block__eyebrow{
            margin-bottom: 16px;
        }

        .ss-about-block__left h2,
        .ss-about-story-card__content h2,
        .ss-about-language__intro h2,
        .ss-about-cta__card h2{
            font-size: 26px;
            line-height: 1.18;
        }

        .ss-about-block__right p,
        .ss-about-story-card__content p,
        .ss-about-language__intro p,
        .ss-about-language__content p{
            font-size: 15px;
            line-height: 1.85;
        }

        .ss-about-story-card{
            padding: 22px 18px;
            border-radius: 22px;
        }

        .ss-about-story-card__quote{
            margin: 18px 0;
            padding: 18px 18px;
            font-size: 21px;
            line-height: 1.5;
            border-radius: 0 18px 18px 0;
        }

        .ss-about-founder{
            margin-top: 20px;
            padding-top: 18px;
        }

        .ss-about-founder__name{
            font-size: 19px;
        }

        .ss-about-founder__role{
            font-size: 12px;
        }

        .ss-language-tags{
            gap: 10px;
            margin-top: 18px;
        }

        .ss-language-tags span{
            min-height: 38px;
            padding: 0 14px;
            font-size: 13px;
        }

        .ss-about-cta{
            margin-top: 20px;
        }

        .ss-about-cta__card{
            padding: 28px 18px;
            border-radius: 22px;
        }

        .ss-about-cta__btn{
            width: 100%;
            min-height: 48px;
            margin-top: 22px;
        }
    }
    
    
    
    .ss-home-anthem-section{
    position: relative;
}

.ss-home-anthem-wrap{
    align-items: center;
}

.ss-home-anthem-section .ss-home-header-subtitle{
    max-width: 620px;
    margin-inline: auto;
}

.ss-home-anthem-featured{
    border-left-color: #d9a441;
    background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(249,244,233,0.92));
}

.ss-home-anthem-featured strong{
    color: #17346d;
}

.ss-home-anthem-featured span{
    color: #7f6a34;
}

.ss-home-anthem-tabs{
    justify-content: flex-start;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.ss-home-anthem-video-box{
    position: relative;
}

.ss-home-anthem-video-box::after{
    content: "";
    position: absolute;
    inset: auto -18px -18px auto;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(217,164,65,0.14) 0%, rgba(217,164,65,0) 72%);
    pointer-events: none;
    z-index: 0;
}

.ss-home-anthem-video-box .ss-home-video-frame{
    position: relative;
    z-index: 1;
}

@media (max-width: 991px){
    .ss-home-anthem-tabs{
        justify-content: center;
    }
}



.ss-home-intro-section{
    padding-top: 90px;
    padding-bottom: 90px;
}

.ss-home-intro-wrap{
    align-items: center;
}

.ss-home-intro-section .ss-home-header-subtitle{
    max-width: 620px;
    margin-inline: auto;
}

.ss-home-intro-featured{
    border-left-color: #5b9b67;
    background: linear-gradient(135deg, rgba(255,255,255,0.97), rgba(240,247,241,0.94));
}

.ss-home-intro-featured strong{
    color: #17346d;
}

.ss-home-intro-featured span{
    color: #4f8d5f;
}

.ss-home-intro-tabs{
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.ss-home-intro-video-box{
    position: relative;
}

.ss-home-intro-video-box::after{
    content: "";
    position: absolute;
    inset: auto -18px -18px auto;
    width: 170px;
    height: 170px;
    background: radial-gradient(circle, rgba(91,155,103,0.14) 0%, rgba(91,155,103,0) 72%);
    pointer-events: none;
    z-index: 0;
}

.ss-home-intro-video-box .ss-home-video-frame{
    position: relative;
    z-index: 1;
}

@media (max-width: 991px){
    .ss-home-intro-tabs{
        justify-content: center;
    }

    .ss-home-intro-section{
        padding-top: 70px;
        padding-bottom: 70px;
    }
}


.ss-home-bothworlds-section{
    padding-top: 90px;
    padding-bottom: 90px;
}

.ss-home-bothworlds-wrap{
    align-items: center;
}

.ss-home-bothworlds-section .ss-home-header-subtitle{
    max-width: 620px;
    margin-inline: auto;
}

.ss-home-bothworlds-featured{
    border-left-color: #5b9b67;
    background: linear-gradient(135deg, rgba(255,255,255,0.97), rgba(240,247,241,0.94));
}

.ss-home-bothworlds-featured strong{
    color: #17346d;
}

.ss-home-bothworlds-featured span{
    color: #4f8d5f;
}


.ss-home-bothworlds-tabs{
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.ss-home-bothworlds-video-box{
    position: relative;
}

.ss-home-bothworlds-video-box::after{
    content: "";
    position: absolute;
    inset: auto -18px -18px auto;
    width: 170px;
    height: 170px;
    background: radial-gradient(circle, rgba(110,143,185,0.14) 0%, rgba(110,143,185,0) 72%);
    pointer-events: none;
    z-index: 0;
}

.ss-home-bothworlds-video-box .ss-home-video-frame{
    position: relative;
    z-index: 1;
}

@media (max-width: 991px){
    .ss-home-bothworlds-tabs{
        justify-content: center;
    }

    .ss-home-bothworlds-section{
        padding-top: 70px;
        padding-bottom: 70px;
    }
}




/* ================================
   Character Intro Video Section
================================ */

.character-intro-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #edf1ee;
    border-radius: 28px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}

.character-intro-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(111, 181, 125, 0.03) 0%, rgba(255, 255, 255, 0) 30%);
    pointer-events: none;
}

.character-intro-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

.character-intro-content {
    flex: 1 1 auto;
    min-width: 0;
}

.character-intro-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border-radius: 999px;
    background: #eef7ee;
    color: #4d8b57;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 12px;
}

.character-intro-title {
    margin: 0 0 10px;
    color: #1f2940;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.character-intro-description {
    margin: 0;
    max-width: 670px;
    color: #96a0b5;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 400;
}

.character-intro-tagline {
    display: inline-block;
    margin-top: 14px;
    margin-bottom: 16px;
    padding: 10px 16px;
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(96, 160, 106, 0.14) 0%, rgba(96, 160, 106, 0.04) 100%);
    color: #41794a;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: -0.01em;
    box-shadow: inset 0 0 0 1px rgba(96, 160, 106, 0.10);
}

.character-intro-language {
    width: 170px;
    min-width: 170px;
}

.character-intro-language label {
    display: block;
    margin: 0 0 8px;
    color: #9aa3b2;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
}

.character-intro-language .form-control,
.character-intro-language select {
    width: 100%;
    height: 46px;
    padding: 0 16px;
    background: #ffffff;
    border: 1px solid #e6ebf0;
    border-radius: 14px;
    color: #2a3347;
    font-size: 15px;
    font-weight: 500;
    box-shadow: none;
    outline: none;
    transition: all 0.2s ease;
}

.character-intro-language .form-control:focus,
.character-intro-language select:focus {
    border-color: #8dbb93;
    box-shadow: 0 0 0 3px rgba(111, 181, 125, 0.12);
}

.character-intro-player {
    position: relative;
    z-index: 2;
    width: 100%;
    margin-top: 14px;
    border-radius: 22px;
    overflow: hidden;
    background: #111111;
}

.character-intro-player video,
.character-intro-player iframe {
    display: block;
    width: 100%;
    height: auto;
    min-height: 390px;
    border: 0;
    border-radius: 22px;
    background: #111111;
}

.character-intro-player iframe {
    aspect-ratio: 16 / 9;
    min-height: 390px;
}

.character-intro-player video {
    object-fit: cover;
}

/* Optional helper if you wrap content inside a top row */
.character-intro-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

/* Tablet */
@media (max-width: 991px) {
    .character-intro-card {
        padding: 18px;
        border-radius: 24px;
    }

    .character-intro-header {
        flex-direction: column;
        gap: 14px;
    }

    .character-intro-language {
        width: 100%;
        min-width: 100%;
    }

    .character-intro-title {
        font-size: 17px;
    }

    .character-intro-description,
    .character-intro-tagline {
        display: block;
        font-size: 15px;
        line-height: 1.45;
        padding: 10px 12px;
        margin-top: 12px;
        margin-bottom: 14px;
        border-radius: 12px;
    }

    .character-intro-player {
        border-radius: 18px;
    }

    .character-intro-player video,
    .character-intro-player iframe {
        min-height: 320px;
        border-radius: 18px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .character-intro-card {
        padding: 16px;
        border-radius: 20px;
    }

    .character-intro-kicker {
        font-size: 12px;
        padding: 6px 12px;
        margin-bottom: 10px;
    }

    .character-intro-title {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .character-intro-description {
        font-size: 13px;
        line-height: 1.45;
    }

    .character-intro-tagline {
        display: block;
        font-size: 15px;
        line-height: 1.45;
        padding: 10px 12px;
        margin-top: 12px;
        margin-bottom: 14px;
        border-radius: 12px;
    }

    .character-intro-language label {
        font-size: 13px;
    }

    .character-intro-language .form-control,
    .character-intro-language select {
        height: 44px;
        font-size: 14px;
        border-radius: 12px;
    }

    .character-intro-player {
        margin-top: 12px;
        border-radius: 16px;
    }

    .character-intro-player video,
    .character-intro-player iframe {
        min-height: 220px;
        border-radius: 16px;
    }
}