/*==================================================
NOBO SERVICES V2
Premium Design System
==================================================*/

/*==================================================
ENVIRONMENT
==================================================*/

.section-divider-chip {
    position: relative;
    width: min(1120px, calc(100% - 40px));
    height: 56px;
    margin: 0 auto;
    z-index: 2;
}

.section-divider-chip::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    transform: translateY(-50%);
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(30, 58, 138, 0.10) 18%,
        rgba(212, 175, 55, 0.45) 50%,
        rgba(30, 58, 138, 0.10) 82%,
        transparent 100%
    );
}

.section-divider-chip::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: linear-gradient(
        135deg,
        var(--gold-accent),
        #f0cf63
    );
    box-shadow:
        0 0 0 8px rgba(255, 255, 255, 0.95),
        0 8px 20px rgba(212, 175, 55, 0.20);
}

.section-divider-chip-light::after {
    box-shadow:
        0 0 0 8px rgba(255, 255, 255, 0.95),
        0 8px 20px rgba(212, 175, 55, 0.20);
}

@media (max-width: 768px) {
    .split-layout {
        gap: 28px;
    }

    .split-intro h2 {
        font-size: 1.8rem;
    }

    .split-cards {
        gap: 24px;
    }

    .split-cards .service-card {
        min-height: auto;
        padding: 24px 22px;
    }

    .section-divider-chip {
        width: calc(100% - 32px);
        height: 44px;
    }

    .section-divider-chip::after {
        width: 12px;
        height: 12px;
        box-shadow:
            0 0 0 6px rgba(255, 255, 255, 0.95),
            0 6px 16px rgba(212, 175, 55, 0.18);
    }

    .section-divider-chip-light::after {
        box-shadow:
            0 0 0 6px rgba(255, 255, 255, 0.95),
            0 6px 16px rgba(212, 175, 55, 0.18);
    }
}

.section-tag {
    display: inline-block;
    padding: 10px 20px;
    margin-bottom: 22px;
    border-radius: 999px;
    background: rgba(31,95,175,.08);
    color: var(--blue-primary);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.section-tag::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--gold-accent);
}



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

/*==================================================
HERO
==================================================*/

.hero-paper{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.hero-paper h1{
    font-size:clamp(3rem,6vw,5.5rem);
    line-height:1.05;
    margin:1rem 0 2rem;
    color:#0f2f57;
}

.hero-paper p{
    max-width:700px;
    font-size:1.15rem;
    line-height:1.9;
    color:#5c6b7b;
}



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

.btn-primary{
    display:inline-block;
    margin-top:24px;
}

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

@media (max-width:900px){
    .hero-paper{
        min-height:58vh;
        margin-top: 70px;
    }
}









/*==================================================
ABOUT HERO
==================================================*/


.about-hero-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:
        2fr
        420px;

    gap:90px;
    align-items:end;
}

.about-hero-copy{
    max-width:860px;
}


.hero-intro{
    max-width:760px;
    color:rgba(255,255,255,.84);
    font-size:1.15rem;
    line-height:1.95;
}

/*==================================================
ABOUT HIGHLIGHT CARD
==================================================*/

.about-highlight-card{
    position:relative;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fafcff 100%
        );

    border:1px solid rgba(31,95,175,.08);
    border-radius:34px;
    padding:48px;
    overflow:hidden;
    box-shadow:
        0 1px 0 rgba(255,255,255,.9) inset,
        0 18px 40px rgba(15,23,42,.05),
        0 45px 90px rgba(15,23,42,.08);

}

.about-highlight-card::before{
    content:"";
    position:absolute;

    top:0;
    left:0;
    right:0;
    height:5px;

    background:linear-gradient(
        90deg,
        var(--gold-accent),
        #E7C86A,
        transparent
    );

}

.highlight-label{
    display:block;
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:.25em;
    font-weight:700;
    color:var(--gold-accent);

}



.highlight-year{
    margin:10px 0 25px;
    color:var(--blue-primary);
    font-size:4rem;
    font-weight:800;
}

.highlight-divider{

    width:90px;

    height:2px;

    margin-bottom:28px;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        var(--gold-accent),
        transparent
    );

}

.about-highlight-card ul{
    display:flex;
    flex-direction:column;
    gap:18px;
    padding:0;
    margin:0;
    list-style:none;
}

.about-highlight-card li{
    position:relative;
    padding-left:28px;
    color:var(--text-soft);
    line-height:1.7;
}

.about-highlight-card li::before{

    content:"";

    position:absolute;

    left:0;

    top:.72em;

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--gold-accent);

}



.about-highlight-card li:last-child{
    border:none;
}

@media(max-width:1000px){

.about-hero-grid{
grid-template-columns:1fr;

}

.about-highlight-card{
max-width:500px;

}

}

/*==================================================
OUR STORY
==================================================*/


.story-showcase{
    position:relative;
    margin-top:80px;
}

/* IMAGE */

.story-image{
    position:relative;
    width:78%;
    z-index:2;
}

.story-image img{
    width:100%;
    display:block;
    aspect-ratio:4/3;
    object-fit:cover;
    border-radius:34px;
    transition:
        transform .45s ease,
        box-shadow .45s ease;
    box-shadow:
        0 35px 80px rgba(15,23,42,.16);
}

.story-showcase:hover .story-image img{
    transform:translateY(-6px);
    box-shadow:
        0 50px 100px rgba(15,23,42,.22);
}

/* FLOATING PANEL */

.story-panel{
    position:absolute;
    right:0;
    bottom:-90px;
    width:470px;
    padding:60px;
    border-radius:34px;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(14px);
    border:1px solid rgba(15,23,42,.05);
    box-shadow:
        0 45px 90px rgba(15,23,42,.15),
        0 10px 30px rgba(15,23,42,.06);
    z-index:5;
}

.story-panel::before{
    content:"";
    position:absolute;
    top:-18px;
    left:60px;
    width:80px;
    height:4px;
    border-radius:999px;
    background:var(--gold-accent);
}

.story-label{
    display:inline-block;
    margin-bottom:20px;
    color:var(--gold-accent);
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.22em;
}

.story-panel h3{
    margin-bottom:24px;
    color:var(--blue-primary);
    font-size:2.3rem;
    line-height:1.15;
}

.story-panel p{
    margin-bottom:18px;
    line-height:1.9;
    color:var(--text-main);

}

.story-panel p:last-child{

    margin-bottom:0;

}

@media(max-width:1100px){

.story-image{
width:100%;
}

.story-panel{
position:relative;
width:100%;
right:auto;
bottom:auto;
margin-top:-40px;

}
}

.story-watermark{
    position:absolute;
    top:-80px;
    left:-30px;
    font-size:16rem;
    font-weight:800;
    line-height:1;
    color:rgba(10,31,61,.035);
    letter-spacing:-.08em;
    pointer-events:none;
    user-select:none;
    z-index:0;
}

.story-accent-line{
    position:absolute;
    left:65px;
    top:90px;
    width:3px;
    height:220px;
    background:linear-gradient(
        to bottom,
        var(--gold-accent),
        transparent
    );
    border-radius:999px;
    z-index:1;
}

.story-showcase{
    position:relative;
}

.story-showcase::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-80px;
    height:160px;
    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0),
            rgba(255,255,255,.95),
            #ffffff
        );
    pointer-events:none;
}


/*==================================================
MISSION & VISION
==================================================*/


.mission-vision-layout{
    margin-top:90px;
    display:grid;
    gap:80px;
}

/*-----------------------------------
Shared Card
-----------------------------------*/

.mission-card,
.vision-card{
    position:relative;
    max-width:760px;
    padding:65px;
    border-radius:34px;
    transition:.4s ease;
}

.mission-card{
    background:white;
    border:1px solid rgba(15,23,42,.06);
    box-shadow:
        0 30px 70px rgba(15,23,42,.08);
}

.vision-card{
    margin-left:auto;
    background:
        linear-gradient(
            135deg,
            #0A1F3D,
            #12335F
        );
    color:white;
    box-shadow:
        0 35px 80px rgba(10,31,61,.22);
}

/*-----------------------------------
Hover
-----------------------------------*/

.mission-card:hover,
.vision-card:hover{
    transform:translateY(-8px);
}

/*-----------------------------------
Icon
-----------------------------------*/

.card-icon{
    width:72px;
    height:72px;
    border-radius:22px;
    display:grid;
    place-items:center;
    margin-bottom:30px;
    background:
        rgba(212,175,55,.10);
}

.card-icon img{
    width:34px;
}

/*-----------------------------------
Label
-----------------------------------*/

.card-label{
    display:inline-block;
    margin-bottom:18px;
    color:var(--gold-accent);
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.22em;
}

/*-----------------------------------
Heading
-----------------------------------*/

.mission-card h3,
.vision-card h3{
    margin-bottom:24px;
    font-size:2.2rem;
    line-height:1.15;
    letter-spacing:-.03em;
}

.mission-card{
    color:var(--blue-primary);
}

.vision-card h3,
.vision-card p{
    color:white;
}

.mission-card p,
.vision-card p{
    line-height:1.95;
    font-size:1.04rem;
}

/*-----------------------------------
Gold Accent
-----------------------------------*/

.mission-card::before,
.vision-card::before{
    content:"";
    position:absolute;
    top:0;
    left:65px;
    width:90px;
    height:5px;
    border-radius:999px;
    background:var(--gold-accent);
}

/*-----------------------------------
Responsive
-----------------------------------*/

@media(max-width:900px){

.mission-card,
.vision-card{

margin-left:0;
padding:45px;

}

}

/*==================================================
NOBO CANVAS SYSTEM
The Page Behind The Page
==================================================*/

.nobo-canvas{
    position:fixed;
    inset:0;
    z-index:0;
    overflow:hidden;
    pointer-events:none;
    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(212,175,55,.08),
            transparent 45%
        ),
        linear-gradient(
            180deg,
            #07162C,
            #0A1F3D,
            #07162C
        );
}

.nobo-canvas::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(
            circle,
            transparent 45%,
            rgba(0,0,0,.28) 100%
        );
}

/*==================================================
CANVAS STORY WINDOW
==================================================*/

.canvas-window{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:8rem 2rem;

    z-index:20;

}

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

.canvas-overlay-content{

    width:min(900px,90%);

    text-align:center;

    position:relative;

    z-index:2;

}

/*==================================================
LABEL
==================================================*/

.canvas-overlay-content .section-tag{

    margin-bottom:2rem;

}

/*==================================================
HEADING
==================================================*/

.canvas-overlay-content h2{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.15em;
    margin:0;
    font-weight:800;
    line-height:.95;
    letter-spacing:-.05em;
    color:#fff;
}

.canvas-overlay-content h2 span{
    color:red;

    color:rgba(217, 190, 58, 0.82);

}

.canvas-header h2{
    color:#F5F7FA;
    font-size:clamp(3.5rem,6vw,5.8rem);
    font-weight:800;
    line-height:.95;
    letter-spacing:-.04em;
    text-shadow:
        0 4px 24px rgba(0,0,0,.18);

}

.canvas-header p{
    color:rgba(245,247,250,.82);
    max-width:760px;
    margin:2rem auto 0;
    line-height:2;
}

.section-tag.tag{

    color:#E7C86A;

    background:rgba(231,200,106,.10);

    border:1px solid rgba(231,200,106,.25);

}

.hero-focus{

    color:#fff;

};


.hero-focus{
    color:#fff;
}

/* First line */

.canvas-overlay-content h2 span:first-child{
    font-size:clamp(3.8rem,6vw,5.8rem);
}

/* Middle line (Hero Line) */

.canvas-overlay-content .hero-focus{
    font-size:clamp(4rem,7vw,6.8rem);
    color:#ffffff;
    margin-left:1.2rem;
    text-shadow:
        0 8px 30px rgba(0,0,0,.28);
}

/* Last line */

.canvas-overlay-content h2 span:last-child{
    font-size:clamp(4.2rem,7vw,6.2rem);
}
/*==================================================
ACCENT LINE
==================================================*/

.canvas-overlay-content::after{

    content:"";

    display:block;

    width:120px;

    height:3px;

    margin:2.8rem auto;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        transparent,
        var(--gold-accent),
        transparent
    );

}

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

.canvas-overlay-content p{

    max-width:760px;

    margin:0 auto;

    font-size:1.2rem;

    line-height:2;

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

    text-shadow:
        0 4px 18px rgba(0,0,0,.25);

}

/*==================================================
BREATHING SPACE
==================================================*/

.canvas-window::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at center,
            rgba(255,255,255,.03),
            transparent 70%
        );

    pointer-events:none;

}

.nobo-canvas::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(255,255,255,.05),
            transparent 60%
        );

}

/*----------------------------------
Large Logo
----------------------------------*/

/*=========================================
NOBO Editorial Watermark
=========================================*/

.canvas-logo{
    position:absolute;
    right:-220px;
    bottom:-180px;
    left:auto;
    top:auto;
    width:min(1100px,72vw);
    height:auto;
    z-index:1;
    opacity:.06;
    pointer-events:none;
    user-select:none;
    transform-origin:center;
    filter:
        grayscale(100%)
        brightness(185%)
        contrast(.95);
    animation:
        editorialFloat 18s ease-in-out infinite;
    transition:

        opacity 1s ease,

        transform 1.2s ease,

        filter 1s ease;

}

@keyframes editorialFloat{

    0%{

        transform:
            translate(0px,0px)
            scale(1)
            rotate(0deg);

    }

    50%{

        transform:
            translate(-18px,-14px)
            scale(1.02)
            rotate(.35deg);

    }

    100%{

        transform:
            translate(0px,0px)
            scale(1)
            rotate(0deg);

    }

}


/*----------------------------------
Gold Glow
----------------------------------*/
/*=========================================
Top Left Ambient Glow
=========================================*/

.canvas-glow{
    position:absolute;
    top:-280px;
    left:-280px;
    width:900px;
    height:900px;
    border-radius:50%;
    background:
        radial-gradient(
            rgba(212,175,55,.18) 0%,
            rgba(212,175,55,.08) 35%,
            transparent 75%
        );

    filter:blur(55px);
    opacity:.9;
    z-index:0;
    pointer-events:none;
    animation:
        glowDrift 18s ease-in-out infinite;
}

@keyframes glowDrift{

    0%{

        transform:
            translate(0,0)
            scale(1);

        opacity:.85;

    }

    50%{

        transform:
            translate(30px,20px)
            scale(1.08);

        opacity:1;

    }

    100%{

        transform:
            translate(0,0)
            scale(1);

        opacity:.85;

    }

}



.main-content{
    position:relative;
    z-index:1;
}

/*=====================================
CANVAS SCROLL STATES
=====================================*/

.nobo-canvas{
    transition:
        filter .8s ease,
        transform 1.2s ease;
}

/* Logo */

.canvas-logo{
    transition:
        transform 1.2s ease,
        opacity 1s ease;
}

/* Glow */

.canvas-glow{
    transition:
        opacity 1s ease,
        transform 1s ease;
    opacity:.65;
}

/* Statement */

.canvas-content{
    transition:
        opacity .8s ease,
        transform .8s ease;
}

/* Active */

.nobo-canvas.canvas-active .canvas-logo{

    transform:
        translate(-50%,-52%)
        scale(1.03)
        rotate(.5deg);
}

.nobo-canvas.canvas-active .canvas-glow{

    opacity:1;
    transform:
        translate(-50%,-50%)
        scale(1.15);
}

.nobo-canvas.canvas-active .canvas-content{
    opacity:1;
    transform:translateY(-12px);
}

/*=========================================
Canvas Content
=========================================*/

.canvas-content{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:min(900px,90%);
    text-align:center;
    z-index:5;
    opacity:.88;
}

.canvas-content h2{
    margin:0;
    font-size:clamp(4.2rem,7vw,6.8rem);
    font-weight:800;
    line-height:.98;
    letter-spacing:-.06em;
    color:rgba(255,255,255,.97);

    text-shadow:
        0 12px 45px rgba(0,0,0,.32);
}

.canvas-content p{
    max-width:720px;
    margin:0 auto;
    margin-top:38px;
    color:rgba(255,255,255,.80);
    font-size:1.1rem;
    line-height:2;
}

.canvas-content .section-tag{
    margin-bottom:28px;
}





/*==================================================
CHAPTER 5
WHAT WE STAND FOR
==================================================*/


/*----------------------------------
Background Watermark
----------------------------------*/


/*----------------------------------
Grid
----------------------------------*/

.values-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:34px;
    margin-top:90px;
}

/*----------------------------------
Cards
----------------------------------*/

.value-card{
    position:relative;
    padding:46px;
    background:#fff;
    border-radius:30px;
    border:1px solid rgba(15,23,42,.06);
    overflow:hidden;
    transition:
        transform .45s ease,
        box-shadow .45s ease,
        background .45s ease;
    box-shadow:
        0 18px 45px rgba(15,23,42,.05);
}

/* Gold Accent */

.value-card::before{
    content:"";
    position:absolute;
    top:0;
    left:46px;
    width:46px;
    height:4px;
    border-radius:999px;
    background:var(--gold-accent);
    transition:all .45s ease;
}

/*----------------------------------
Number
----------------------------------*/

.value-number{
    position:absolute;
    right:34px;
    top:28px;
    font-size:3.6rem;
    font-weight:800;
    color:rgba(10,31,61,.05);
    transition:.45s ease;
}

/*----------------------------------
Icon
----------------------------------*/

.value-icon{
    width:72px;
    height:72px;
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        rgba(212,175,55,.10);
    margin-bottom:34px;
    transition:.45s ease;
}

.value-icon img{
    width:34px;
    height:34px;
}

/*----------------------------------
Heading
----------------------------------*/

.value-card h3{
    margin-bottom:18px;
    color:var(--blue-primary);
    font-size:1.9rem;
    line-height:1.15;
}

/*----------------------------------
Paragraph
----------------------------------*/

.value-card p{

    color:var(--text-main);
    line-height:1.95;
    font-size:1rem;
}

/*----------------------------------
Hover
----------------------------------*/

.value-card:hover{
    transform:translateY(-10px);
    background:#FFFEFB;
    box-shadow:
        0 35px 70px rgba(15,23,42,.12);
}

.value-card:hover::before{
    width:120px;
}

.value-card:hover .value-icon{
    transform:translateY(-8px);
}

.value-card:hover .value-number{
    color:rgba(10,31,61,.10);
}

.value-card:hover h3{
    color:#0A4D92;
}

/*----------------------------------
Responsive
----------------------------------*/

@media(max-width:1000px){

.values-grid{

grid-template-columns:1fr;

}

.value-card{

padding:38px;

}


}

/*==================================================
CHAPTER 6
OUR JOURNEY
==================================================*/


/*----------------------------------
Background Watermark
----------------------------------*/


/*==================================
Timeline
==================================*/

.timeline{
    position:relative;
    max-width:980px;
    margin:110px auto 0;
}

/* Gold Line */

.timeline::before{
    content:"";
    position:absolute;
    left:145px;
    top:0;
    bottom:0;
    width:3px;
    border-radius:999px;
    background:linear-gradient(
        to bottom,
        var(--gold-accent),
        rgba(212,175,55,.18)
    );

}

/*==================================
Timeline Item
==================================*/

.timeline-item{
    position:relative;
    display:grid;
    grid-template-columns:180px 1fr;
    gap:70px;
    margin-bottom:110px;
}

.timeline-item:last-child{

    margin-bottom:0;
}

/*==================================
Year
==================================*/

.timeline-year{
    position:relative;
    font-size:4.3rem;
    font-weight:800;
    color:var(--blue-primary);
    letter-spacing:-.06em;
    line-height:1;

}

/* Gold Circle */

.timeline-year::after{

    content:"";
    position:absolute;
    right:-38px;
    top:22px;
    width:18px;
    height:18px;
    border-radius:50%;
    background:var(--gold-accent);
    box-shadow:
        0 0 0 10px rgba(212,175,55,.12),
        0 0 30px rgba(212,175,55,.35);
}

/*==================================
Content Card
==================================*/

.timeline-content{
    position:relative;
    background:#ffffff;
    border-radius:28px;
    padding:48px;
    border:1px solid rgba(15,23,42,.06);
    box-shadow:
        0 25px 60px rgba(15,23,42,.07);

    transition:

        transform .45s ease,
        box-shadow .45s ease;

}

/* Gold Accent */

.timeline-content::before{
    content:"";
    position:absolute;
    left:48px;
    top:0;
    width:60px;
    height:4px;
    border-radius:999px;
    background:var(--gold-accent);
    transition:.45s ease;
}

.timeline-content h3{
    margin-bottom:18px;
    color:var(--blue-primary);
    font-size:2rem;
    line-height:1.15;
}

.timeline-content p{
    color:var(--text-main);
    line-height:1.95;
    font-size:1.02rem;
}

/*==================================
Hover
==================================*/

.timeline-item:hover .timeline-content{
    transform:translateY(-10px);
    box-shadow:
        0 40px 80px rgba(15,23,42,.12);
}

.timeline-item:hover .timeline-content::before{
    width:120px;
}

.timeline-item:hover .timeline-year{
    color:#0A4D92;
}

/*==================================
Responsive
==================================*/

@media(max-width:900px){

.timeline::before{

left:34px;

}

.timeline-item{
grid-template-columns:70px 1fr;
gap:35px;
margin-bottom:70px;

}

.timeline-year{
font-size:2.4rem;
}

.timeline-year::after{
left:24px;
top:34px;
right:auto;
}

.timeline-content{
padding:35px;
}
}

/*==================================================
CHAPTER 7
TRUST & QUALITY
==================================================*/


/*----------------------------------
Watermark
----------------------------------*/


/*==================================
Executive Panel
==================================*/

.trust-panel{
    margin-top:90px;
    background:#fff;
    border-radius:34px;
    border:1px solid rgba(15,23,42,.06);
    box-shadow:
        0 35px 80px rgba(15,23,42,.06);
    overflow:hidden;
}

/*==================================
Trust Item
==================================*/

.trust-item{
    position:relative;
    display:grid;
    grid-template-columns:90px 1fr;
    gap:35px;
    align-items:center;
    padding:46px 55px;

    transition:
        background .4s ease,
        transform .4s ease;
}

/* Divider */

.trust-item:not(:last-child){

    border-bottom:
        1px solid rgba(15,23,42,.06);
}

/* Gold Accent */

.trust-item::before{

    content:"";
    position:absolute;
    left:55px;
    top:0;
    width:0;
    height:4px;
    border-radius:999px;
    background:var(--gold-accent);
    transition:.45s ease;
}

/*==================================
Icon
==================================*/

.trust-icon{
    width:74px;
    height:74px;
    border-radius:22px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:

        rgba(212,175,55,.08);
    transition:.45s ease;
}

.trust-icon img{
    width:34px;
    height:34px;
}

/*==================================
Content
==================================*/

.trust-content h3{
    margin-bottom:12px;
    color:var(--blue-primary);
    font-size:1.55rem;
}

.trust-content p{
    color:var(--text-main);
    line-height:1.9;
}

/*==================================
Hover
==================================*/

.trust-item:hover{
    background:#FFFEFB;
}

.trust-item:hover::before{
    width:120px;
}

.trust-item:hover .trust-icon{

    transform:
        translateY(-6px);

    background:
        rgba(212,175,55,.15);
}

.trust-item:hover h3{
    color:#0A4D92;
}

/*==================================================
ACCREDITATIONS
==================================================*/

.accreditation-showcase{
    margin-top:100px;
    text-align:center;
}

.accreditation-label{
    display:inline-block;
    margin-bottom:50px;
    color:var(--gold-accent);
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.22em;
    text-transform:uppercase;
}

/*==================================
Logo Grid
==================================*/

.accreditation-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:40px;
    align-items:center;
}

/*==================================
Logo
==================================*/

.accreditation-logo{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:40px;
    border-radius:26px;
    background:#fff;
    border:1px solid rgba(15,23,42,.05);
    box-shadow:
        0 20px 45px rgba(15,23,42,.05);

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

.accreditation-logo img{
    max-width:150px;
    max-height:70px;
    filter: none;

    opacity: 1;

     transition:
        transform .35s ease,
        filter .35s ease,
        opacity .35s ease;
}

.accreditation-logo:hover{
    transform:translateY(-8px);
    background:#fff;
    box-shadow:
        0 35px 70px rgba(15,23,42,.10);
}

.accreditation-logo:hover img{
    filter:none;
    opacity:1;
}

/*==================================
Responsive
==================================*/

@media(max-width:1000px){

.trust-item{
grid-template-columns:1fr;
text-align:center;
padding:40px 35px;
}

.trust-item::before{

left:50%;
transform:translateX(-50%);
}

.trust-icon{
margin:auto;
}

.accreditation-grid{
grid-template-columns:repeat(2,1fr);
gap:25px;

}
}

@media(max-width:640px){
.accreditation-grid{
grid-template-columns:1fr;
}
}


/*==================================================
CHAPTER 8
EXECUTIVE CLOSING
==================================================*/


/*==================================
Editorial Watermark
==================================*/


/*==================================
Closing Panel
==================================*/

.closing-panel{
    position:relative;
    max-width:980px;
    margin:auto;
    padding:90px;
    text-align:center;
    border-radius:36px;
    background:#ffffff;
    border:1px solid rgba(15,23,42,.06);
    box-shadow:
        0 40px 90px rgba(15,23,42,.08);
    overflow:hidden;
}

/*==================================
Gold Accent
==================================*/

.closing-panel::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:90px;
    height:5px;
    border-radius:999px;
    background:var(--gold-accent);
}

/*==================================
Heading
==================================*/

.closing-panel h2{
    margin:25px 0;
    color:var(--blue-primary);
    font-size:clamp(3.4rem,6vw,5.8rem);
    line-height:1;
    letter-spacing:-.06em;
}

/*==================================
Divider
==================================*/

.closing-divider{
    width:110px;
    height:5px;
    margin:45px auto;
    border-radius:999px;
    background:var(--gold-accent);
}

/*==================================
Paragraph
==================================*/

.closing-panel p{
    max-width:760px;
    margin:auto;
    color:var(--text-main);
    font-size:1.1rem;
    line-height:2;
}

/*==================================
Buttons
==================================*/

.closing-actions{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:22px;
    margin-top:60px;
    flex-wrap:wrap;
}

/* Secondary Button */
.secondary-button{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    padding:16px 34px;
    border-radius:999px;
    border:1px solid rgba(15,23,42,.12);
    color:var(--blue-primary);
    font-weight:600;
    text-decoration:none;
    transition:.35s ease;
}

.secondary-button:hover{
    transform:translateY(-4px);
    border-color:var(--gold-accent);
    color:var(--gold-accent);
}

/*==================================
Panel Hover
==================================*/

.closing-panel{
    transition:
        transform .45s ease,
        box-shadow .45s ease;
}

.closing-panel:hover{
    transform:translateY(-8px);
    box-shadow:
        0 55px 120px rgba(15,23,42,.12);
}

/*==================================
Responsive
==================================*/

@media(max-width:900px){
.closing-panel{
padding:60px 40px;
}

.closing-panel h2{
font-size:clamp(2.7rem,9vw,4rem);
}

.closing-actions{
flex-direction:column;
}

.secondary-button,
.cta-button{
width:100%;
justify-content:center;
}
}

@media(max-width:640px){

.closing-panel{
padding:50px 28px;
}
}

/* ==========================================
   WHAT WE STAND FOR - SECTION HEADER
========================================== */

.services-overview .section-header{

    max-width: 760px;

    margin: 0 auto 70px;

    text-align: center;

}

.services-overview .section-header h2{

    margin-left: auto;
    margin-right: auto;

}

.services-overview .section-header p{

    margin: 24px auto 0;

    max-width: 700px;

}

/* ==========================================
   CLOSING PANEL PRIMARY BUTTON
========================================== */

.closing-actions .cta-button{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    padding:18px 40px;

    min-width:240px;

    background:linear-gradient(
        135deg,
        #f4d979 0%,
        #d4af37 55%,
        #b88918 100%
    );

    color:#081321;

    text-decoration:none;

    font-weight:700;
    font-size:1rem;
    letter-spacing:.4px;

    border:none;
    border-radius:999px;

    box-shadow:
        0 14px 35px rgba(212,175,55,.28),
        0 0 25px rgba(212,175,55,.15);

    position:relative;
    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        filter .35s ease;

}

/* Shine Animation */

.closing-actions .cta-button::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:60%;
    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transform:skewX(-25deg);

    transition:left .75s ease;

}

.closing-actions .cta-button:hover{

    transform:translateY(-4px);

    filter:brightness(1.04);

    box-shadow:
        0 18px 40px rgba(212,175,55,.38),
        0 0 35px rgba(212,175,55,.22);

}

.closing-actions .cta-button:hover::before{

    left:160%;

}

.closing-actions .cta-button:active{

    transform:translateY(-1px);

}

/* ==========================================
   CLOSING PANEL SECONDARY BUTTON
========================================== */

.closing-actions .secondary-button{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    padding:18px 40px;

    min-width:240px;

    background:linear-gradient(
        135deg,
        #1e293b 0%,
        #0f172a 55%,
        #020617 100%
    );

    color:#ffffff;

    text-decoration:none;

    font-weight:700;
    font-size:1rem;
    letter-spacing:.4px;

    border:1px solid rgba(212,175,55,.30);

    border-radius:999px;

    box-shadow:
        0 14px 35px rgba(2,6,23,.35),
        0 0 25px rgba(15,23,42,.20);

    position:relative;
    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        filter .35s ease,
        border-color .35s ease;

}

/* Shine */

.closing-actions .secondary-button::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:60%;
    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.15),
        transparent
    );

    transform:skewX(-25deg);

    transition:left .75s ease;

}

.closing-actions .secondary-button:hover{

    transform:translateY(-4px);

    border-color:#d4af37;

    filter:brightness(1.08);

    box-shadow:
        0 18px 40px rgba(2,6,23,.45),
        0 0 30px rgba(212,175,55,.15);

}

.closing-actions .secondary-button:hover::before{

    left:160%;

}

.closing-actions .secondary-button:active{

    transform:translateY(-1px);

}