/* Navbar Starts Here */

/*====================================================
        MONEY RICH FINSERV
        PREMIUM WEBSITE
====================================================*/

/*==============================
GOOGLE FONT
==============================*/

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/*==============================
ROOT VARIABLES
==============================*/

:root{

    /* Brand */

    /* --primary:#0056D6; */
    --primary:#032555;
    --primary-dark:#0042A8;
    --primary-light:#2F7BFF;

    --accent:#D4A017;
    --accent-light:#F5C542;

    /* Background */

    --white:#ffffff;
    --body:#F7F9FC;
    --section:#FFFFFF;
    --section-alt:#F4F8FD;

    /* Text */

    --heading:#132238;
    --text:#596579;
    --text-light:#8693A5;

    /* Border */

    --border:#E6EDF6;

    /* Shadow */

    --shadow-sm:0 5px 15px rgba(18,38,63,.05);

    --shadow-md:0 15px 40px rgba(18,38,63,.08);

    --shadow-lg:0 25px 60px rgba(18,38,63,.12);

    --shadow-primary:0 15px 35px rgba(0,86,214,.18);

    /* Glass */

    --glass:rgba(255,255,255,.82);

    --blur:18px;

    /* Radius */

    --radius-sm:10px;
    --radius-md:16px;
    --radius-lg:24px;
    --radius-xl:40px;

    /* Transition */

    --transition:.35s ease;

    /* Width */

    --container:1400px;

    --gradient-primary:linear-gradient(
135deg,
var(--primary),
var(--primary-light));

--gradient-gold:linear-gradient(
135deg,
var(--accent),
var(--accent-light));

 /* Type (added for this section) */
    --font-display:'Fraunces', Georgia, serif;
    --font-body:'Inter', -apple-system, sans-serif;

}

/*==============================
RESET
==============================*/

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

html{
    scroll-behavior:smooth;
}

body{

    /* font-family:'Manrope',sans-serif; */
    font-family:var(--font-body);

    background:var(--body);

    color:var(--text);

    overflow-x:hidden;

}

img{

    display:block;

    max-width:100%;

}

a{

    text-decoration:none;

    color:inherit;

}

ul{

    list-style:none;

}

button{

    border:none;

    outline:none;

    background:none;

    cursor:pointer;

}

/*==============================
COMMON
==============================*/

.container{

    width:100%;

    max-width:var(--container);

    margin:auto;

    padding:0 20px;

}

/* Whatsapp Icon Starts Here */

/*=========================================
        FLOATING WHATSAPP
=========================================*/

.floatingWhatsapp{

    position:fixed;

    right:30px;

    bottom:100px;

    width:72px;

    height:72px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#25D366,#0BA34A);

    color:#fff;

    font-size:36px;

    text-decoration:none;

    z-index:99999;

    overflow:hidden;

    box-shadow:
        0 15px 40px rgba(37,211,102,.45);

    animation:whatsappFloat 4s ease-in-out infinite;

    transition:.35s;

}

/*======================
      Glow Ring
=======================*/

.floatingWhatsapp::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid rgba(37,211,102,.35);

    animation:whatsappPulse 2s infinite;

}

/*======================
    Rotating Gradient
=======================*/

.floatingWhatsapp::after{

    content:"";

    position:absolute;

    width:160%;

    height:160%;

    background:conic-gradient(

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    animation:whatsappRotate 5s linear infinite;

}

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

.floatingWhatsapp i{

    position:relative;

    z-index:2;

}

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

.floatingWhatsapp:hover{

    transform:translateY(-8px) scale(1.08);

    box-shadow:
        0 20px 55px rgba(37,211,102,.6);

}

/*======================
      Tooltip
=======================*/

.floatingWhatsappTooltip{

    position:absolute;

    right:88px;

    white-space:nowrap;

    background:#032555;

    color:#fff;

    padding:12px 18px;

    border-radius:40px;

    font-size:14px;

    font-weight:600;

    opacity:0;

    visibility:hidden;

    transform:translateX(15px);

    transition:.35s;

}

.floatingWhatsapp:hover .floatingWhatsappTooltip{

    opacity:1;

    visibility:visible;

    transform:translateX(0);

}

/*======================
      Floating
=======================*/

@keyframes whatsappFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}

/*======================
      Ripple
=======================*/

@keyframes whatsappPulse{

    0%{

        transform:scale(1);

        opacity:1;

    }

    100%{

        transform:scale(1.45);

        opacity:0;

    }

}

/*======================
      Rotation
=======================*/

@keyframes whatsappRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*======================
      Mobile
=======================*/

@media(max-width:768px){

    .floatingWhatsapp{

        width:62px;

        height:62px;

        right:20px;

        bottom:20px;

        font-size:30px;

    }

    .floatingWhatsappTooltip{

        display:none;

    }

}

/* Whatsapp Icon Ends Here */

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

.top-bar{

    /* background:var(--primary); */
        background: linear-gradient(135deg, var(--primary), var(--primary-light));

    color:var(--white);

    font-size:14px;

}

.top-bar .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:45px;

}

.top-left,
.top-right{

    display:flex;

    align-items:center;

    gap:30px;

}

.top-left a{

    display:flex;

    align-items:center;

    gap:8px;

    transition:var(--transition);

}

.top-left a:hover{

    color:var(--accent-light);

}

.top-right span{

    display:flex;

    align-items:center;

    gap:8px;

}

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

.header{

    position:sticky;

    top:0;

    z-index:999;

    padding:16px 0;

    transition:var(--transition);

}

.header.scrolled{

    padding:10px 0;

}

/*==============================
NAVBAR
==============================*/

.navbar{

    height:88px;

    background:var(--glass);

    backdrop-filter:blur(var(--blur));

    border:1px solid var(--border);

    border-radius:var(--radius-xl);

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 28px;

    box-shadow:var(--shadow-md);

}

/*==============================
LOGO
==============================*/

.logo{

    flex-shrink:0;

}

.logo img{

    width:210px;

    transition:var(--transition);

}

.logo:hover img{

    transform:scale(1.04);

}

/*==============================
DESKTOP MENU
==============================*/

.nav-menu{

    display:flex;

    align-items:center;

    gap:34px;

}

.nav-menu>li{

    position:relative;

}

.nav-menu>li>a{

    position:relative;

    display:flex;

    align-items:center;

    gap:8px;

    color:var(--heading);

    font-size:15px;

    font-weight:700;

    transition:var(--transition);

}

/*==============================
UNDERLINE
==============================*/

.nav-menu>li>a::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-10px;

    transform:translateX(-50%);

    width:0;

    height:3px;

    border-radius:20px;

    background:linear-gradient(
    to right,
    var(--primary),
    var(--accent));

    transition:var(--transition);

}

.nav-menu>li:hover>a{

    color:var(--primary);

}

.nav-menu>li:hover>a::after{

    width:100%;

}

.nav-menu .active{

    color:var(--primary);

}

.nav-menu .active::after{

    width:100%;

}

/*==============================
RIGHT SIDE
==============================*/

.nav-right{

    display:flex;

    align-items:center;

    gap:15px;

}

/*==============================
PHONE BUTTON
==============================*/

.phone-btn{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--primary);

    background:#EDF5FF;

    transition:var(--transition);

}

.phone-btn:hover{

    background:var(--primary);

    color:var(--white);

}

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

.cta-btn{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    gap:10px;

    padding:14px 28px;

    border-radius:50px;

    color:var(--white);

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--primary-light));

    font-weight:700;

    transition:var(--transition);

    box-shadow:var(--shadow-primary);

}

.cta-btn i{

    transition:var(--transition);

}

.cta-btn:hover{

    transform:translateY(-4px);

}

.cta-btn:hover i{

    transform:translateX(5px);

}

/*==============================
BUTTON SHINE
==============================*/

.cta-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:60px;

    height:100%;

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

    transform:skewX(-25deg);

}

.cta-btn:hover::before{

    animation:shine .9s linear;

}

@keyframes shine{

    from{

        left:-100%;

    }

    to{

        left:130%;

    }

}

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

.menu-btn{

    display:none;

}

/* Part-2 */

/*=========================================
    PART 2B-1
    PREMIUM MEGA MENU
=========================================*/

/* Dropdown Parent */

.dropdown{
    position:relative;
}

/*==========================
MEGA MENU
==========================*/

.mega-menu{

    position:absolute;

    top:calc(100% + 28px);

    left:50%;

    transform:translateX(-50%) translateY(30px);

    width:950px;

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

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    border:1px solid var(--border);

    border-radius:28px;

    box-shadow:0 30px 80px rgba(16,42,67,.12);

    display:grid;

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

    gap:25px;

    padding:35px;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:.35s ease;

    z-index:999;

}

/* Hover */

.dropdown:hover .mega-menu{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:translateX(-50%) translateY(0);

}

/*==========================
COLUMN
==========================*/

.mega-column{

    display:flex;

    flex-direction:column;

}

/* Heading */

.mega-column h4{

    font-family:'Space Grotesk',sans-serif;

    font-size:18px;

    color:var(--heading);

    margin-bottom:18px;

    padding-bottom:12px;

    border-bottom:2px solid var(--border);

    position:relative;

}

.mega-column h4::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-2px;

    width:55px;

    height:2px;

    background:linear-gradient(
        to right,
        var(--primary),
        var(--accent)
    );

}

/*==========================
LINKS
==========================*/

.mega-column a{

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 18px;

    border-radius:14px;

    color:var(--text);

    font-size:15px;

    font-weight:600;

    transition:var(--transition);

}

/* Icons */

.mega-column a i{

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    background:#EDF5FF;

    color:var(--primary);

    font-size:16px;

    transition:var(--transition);

}

/* Hover */

.mega-column a:hover{

    background:#F8FBFF;

    color:var(--primary);

    transform:translateX(8px);

}

.mega-column a:hover i{

    background:var(--gradient-primary);

    color:#fff;

    transform:rotate(-8deg);

}

/*==========================
FEATURE CARD
==========================*/

.mega-column:last-child{

    background:#F8FBFF;

    border:1px solid var(--border);

    border-radius:22px;

    padding:22px;

}

.mega-column:last-child h4{

    border:none;

    margin-bottom:10px;

}

.mega-column:last-child p{

    color:var(--text);

    font-size:14px;

    line-height:1.8;

    margin-bottom:20px;

}

.mega-column:last-child .menu-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 24px;

    border-radius:50px;

    background:var(--gradient-primary);

    color:#fff;

    font-weight:700;

    width:max-content;

    transition:.3s;

}

.mega-column:last-child .menu-btn:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow-primary);

}

/*==========================
MEGA MENU ARROW
==========================*/

.mega-menu::before{

    content:"";

    position:absolute;

    top:-10px;

    left:50%;

    width:20px;

    height:20px;

    background:#fff;

    border-left:1px solid var(--border);

    border-top:1px solid var(--border);

    transform:translateX(-50%) rotate(45deg);

}

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

.dropdown>a i{

    transition:.3s;

}

.dropdown:hover>a i{

    transform:rotate(180deg);

}

/*==========================
SMOOTH GAP
==========================*/

.dropdown::after{

    content:"";

    position:absolute;

    left:0;

    top:100%;

    width:100%;

    height:35px;

}

/* Part-3 */

    /*==================================================
        PART 2B-2
    MOBILE MENU & RESPONSIVE
==================================================*/


/*==============================
MENU BUTTON
==============================*/

.menu-btn{

    width:50px;

    height:50px;

    display:none;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:6px;

    background:var(--white);

    border:1px solid var(--border);

    border-radius:14px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.menu-btn span{

    width:24px;

    height:2px;

    background:var(--heading);

    border-radius:10px;

    transition:var(--transition);

}

.menu-btn:hover{

    border-color:var(--primary);

}

.menu-btn.active span:nth-child(1){

    transform:translateY(8px) rotate(45deg);

}

.menu-btn.active span:nth-child(2){

    opacity:0;

}

.menu-btn.active span:nth-child(3){

    transform:translateY(-8px) rotate(-45deg);

}


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

.mobile-menu{

    position:fixed;

    top:0;

    right:-420px;

    width:380px;

    max-width:100%;

    height:100vh;

    background:var(--white);

    z-index:9999;

    box-shadow:-15px 0 60px rgba(0,0,0,.12);

    transition:.45s ease;

    overflow-y:auto;

    padding:30px;

}

.mobile-menu.active{

    right:0;

}


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

.mobile-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:35px;

}

.mobile-header img{

    width:180px;

}

.close-menu{

    width:45px;

    height:45px;

    border-radius:12px;

    background:#EDF5FF;

    color:var(--primary);

    transition:var(--transition);

}

.close-menu:hover{

    background:var(--primary);

    color:var(--white);

}


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

.mobile-menu ul{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.mobile-menu ul li{

    border-bottom:1px solid var(--border);

}

.mobile-menu ul li:last-child{

    border:none;

}

.mobile-menu ul li a{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 5px;

    font-size:16px;

    font-weight:700;

    color:var(--heading);

    transition:var(--transition);

}

.mobile-menu ul li a:hover{

    color:var(--primary);

    padding-left:12px;

}


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

.mobile-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    margin-top:35px;

    padding:16px;

    border-radius:50px;

    background:var(--gradient-primary);

    color:var(--white);

    font-weight:700;

    box-shadow:var(--shadow-primary);

    transition:var(--transition);

}

.mobile-btn:hover{

    transform:translateY(-3px);

}


/*==============================
OVERLAY
==============================*/

.overlay{

    position:fixed;

    inset:0;

    background:rgba(12,20,38,.45);

    backdrop-filter:blur(3px);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:9998;

}

.overlay.active{

    opacity:1;

    visibility:visible;

}


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

@media(max-width:1200px){

    .nav-menu{

        gap:22px;

    }

    .nav-right{

        gap:10px;

    }

    .cta-btn{

        padding:13px 20px;

        font-size:14px;

    }

}


/*==============================
LAPTOP
==============================*/

@media(max-width:992px){

    .top-bar{

        display:none;

    }

    .nav-menu{

        display:none;

    }

    .nav-right{

        display:none;

    }

    .menu-btn{

        display:flex;

    }

    .navbar{

        height:82px;

        padding:0 20px;

    }

    .logo img{

        width:190px;

    }

}


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

@media(max-width:768px){

    .header{

        padding:10px 0;

    }

    .navbar{

        border-radius:18px;

        height:75px;

    }

    .logo img{

        width:165px;

    }

    .mobile-menu{

        width:100%;

        right:-100%;

        padding:25px;

    }

}


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

@media(max-width:480px){

    .container{

        padding:0 15px;

    }

    .navbar{

        padding:0 16px;

    }

    .logo img{

        width:145px;

    }

    .menu-btn{

        width:46px;

        height:46px;

    }

}

/* Part-4 */

/*==================================================
        PART 2B-3
        FINISHING & ANIMATIONS
==================================================*/


/*==============================
HEADER SCROLL EFFECT
==============================*/

.header{

    transition:
        padding .35s ease,
        transform .35s ease;

}

.header.scrolled .navbar{

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

    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);

    box-shadow:0 18px 45px rgba(16,42,67,.12);

    border-color:rgba(0,86,214,.12);

}


/*==============================
NAVBAR HOVER
==============================*/

.navbar{

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

}

.navbar:hover{

    transform:translateY(-2px);

    box-shadow:0 22px 55px rgba(17,41,71,.12);

}


/*==============================
LOGO EFFECT
==============================*/

.logo img{

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

}

.logo:hover img{

    transform:scale(1.04);

    filter:drop-shadow(0 10px 18px rgba(0,86,214,.18));

}


/*==============================
NAVIGATION HOVER
==============================*/

.nav-menu>li>a{

    padding:8px 2px;

}

.nav-menu>li>a i{

    font-size:12px;

    transition:.3s;

}

.nav-menu>li:hover>a i{

    transform:rotate(180deg);

}


/*==============================
PHONE BUTTON
==============================*/

.phone-btn{

    transition:
        background .35s ease,
        color .35s ease,
        transform .35s ease;

}

.phone-btn:hover{

    transform:translateY(-3px);

}


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

.cta-btn{

    letter-spacing:.3px;

}

.cta-btn:active{

    transform:scale(.97);

}


/*==============================
MEGA MENU ITEMS
==============================*/

.mega-column a{

    position:relative;

    overflow:hidden;

}

.mega-column a::before{

    content:"";

    position:absolute;

    left:-100%;

    top:0;

    width:100%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(0,86,214,.06),
        transparent
    );

    transition:.6s;

}

.mega-column a:hover::before{

    left:100%;

}


/*==============================
CUSTOM SCROLLBAR
==============================*/

.mobile-menu::-webkit-scrollbar{

    width:8px;

}

.mobile-menu::-webkit-scrollbar-track{

    background:#f5f7fb;

}

.mobile-menu::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}


/* Firefox */

.mobile-menu{

    scrollbar-width:thin;

    scrollbar-color:var(--primary) #f5f7fb;

}


/*==============================
FOCUS STATES
==============================*/

a:focus-visible,
button:focus-visible{

    outline:3px solid rgba(0,86,214,.25);

    outline-offset:3px;

    border-radius:8px;

}


/*==============================
TEXT SELECTION
==============================*/

::selection{

    background:rgba(0,86,214,.15);

    color:var(--heading);

}


/*==============================
SMOOTH FADE
==============================*/

.fade-up{

    opacity:0;

    transform:translateY(30px);

    transition:
        opacity .6s ease,
        transform .6s ease;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}


/*==============================
REDUCED MOTION
==============================*/

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

    *,
    *::before,
    *::after{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}


/*==============================
EXTRA LARGE SCREENS
==============================*/

@media(min-width:1600px){

    .container{

        max-width:1500px;

    }

}


/*==============================
DESKTOP POLISH
==============================*/

@media(min-width:992px){

    .nav-menu>li{

        padding:20px 0;

    }

    .cta-btn{

        min-width:200px;

        justify-content:center;

    }

}


/*==============================
PRINT
==============================*/

@media print{

    .top-bar,
    .header,
    .mobile-menu,
    .overlay{

        display:none !important;

    }

}

/* Navbar Ends Here */

/* Footer Starts Here */

/*====================================================
                    FOOTER
                    PART 2A
====================================================*/

.footer{

    position:relative;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        #04152E 0%,
        #021327 100%
    );

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

    padding-top:90px;

}

/*==================================
BACKGROUND GLOW
==================================*/

.footer-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    pointer-events:none;

}

.glow-1{

    width:350px;
    height:350px;

    top:-120px;
    left:-120px;

    background:rgba(3,37,85,.45);

}

.glow-2{

    width:300px;
    height:300px;

    right:-80px;
    bottom:-100px;

    background:rgba(212,160,23,.18);

}

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

.footer-top{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:
        1.7fr
        1fr
        1fr
        1fr
        1.2fr;

    gap:45px;

    padding-bottom:70px;

    border-bottom:1px solid rgba(255,255,255,.08);

}

/*==================================
COMPANY
==================================*/

.footer-company{

    max-width:360px;

}

.footer-logo{

    display:inline-block;

    margin-bottom:25px;

}

.footer-logo img{

    max-width:210px;

    display:block;

}

.footer-company p{

    line-height:1.9;

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

    margin-bottom:30px;

}

/*==================================
COLUMN
==================================*/

.footer-column h3{

    color:#fff;

    font-size:22px;

    margin-bottom:28px;

    font-family:var(--font-display);

    position:relative;

}

.footer-column h3::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:45px;

    height:3px;

    border-radius:10px;

    background:var(--gradient-gold);

}

.footer-column ul{

    list-style:none;

    margin:0;

    padding:0;

}

.footer-column li{

    margin-bottom:16px;

}

.footer-column li:last-child{

    margin-bottom:0;

}

/*==================================
LINKS
==================================*/

.footer-column a{

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

    transition:var(--transition);

    position:relative;

    display:inline-flex;

    align-items:center;

    gap:8px;

}

.footer-column a:hover{

    color:#fff;

}

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

.footer-contact li{

    display:flex;

    align-items:flex-start;

    gap:15px;

    line-height:1.8;

}

.footer-contact i{

    color:var(--accent);

    width:18px;

    margin-top:5px;

}

.footer-contact span{

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

}

/*==================================
SOCIAL
==================================*/

.footer-social{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

}

.footer-social a{

    width:48px;

    height:48px;

    border-radius:14px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

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

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

    transition:var(--transition);

}

/*==================================
DISCLAIMER
==================================*/

.footer-disclaimer{

    padding:45px 0;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.footer-disclaimer h4{

    color:#fff;

    font-size:24px;

    margin-bottom:18px;

    font-family:var(--font-display);

}

.footer-disclaimer p{

    line-height:1.9;

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

    margin-bottom:12px;

}

.footer-disclaimer p:last-child{

    margin-bottom:0;

}

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

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

    padding:30px 0;

}

.footer-copy{

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

}

.footer-copy strong{

    color:#fff;

}

.footer-credit{

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

}

.footer-credit a{

    color:var(--accent-light);

    font-weight:600;

}

/*==================================
BACK TO TOP
==================================*/

.back-to-top{

    position:fixed;

    right:30px;

    bottom:30px;

    width:58px;

    height:58px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    background:var(--gradient-primary);

    color:#fff;

    font-size:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:var(--shadow-primary);

    z-index:999;

    opacity:0;

    visibility:hidden;

    transition:var(--transition);

}

.back-to-top.show{

    opacity:1;

    visibility:visible;

}

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

@media(max-width:1200px){

    .footer-top{

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

    }

    .footer-company{

        max-width:100%;

        grid-column:1/-1;

    }

}

@media(max-width:768px){

    .footer{

        padding-top:70px;

    }

    .footer-top{

        grid-template-columns:1fr;

        gap:40px;

    }

    .footer-bottom{

        flex-direction:column;

        text-align:center;

    }

    .footer-disclaimer{

        text-align:center;

    }

}

@media(max-width:576px){

    .back-to-top{

        width:50px;

        height:50px;

        right:20px;

        bottom:20px;

        font-size:18px;

    }

}

/* Part - 2 */

/*====================================================
                FOOTER
                PART 2B
====================================================*/

/*==================================
LINK UNDERLINE ANIMATION
==================================*/

.footer-column a{

    position:relative;

}

.footer-column a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:0;

    height:2px;

    border-radius:20px;

    background:var(--gradient-gold);

    transition:width .35s ease;

}

.footer-column a:hover{

    color:#fff;

    transform:translateX(8px);

}

.footer-column a:hover::after{

    width:100%;

}

/*==================================
SOCIAL ICON HOVER
==================================*/

.footer-social a{

    position:relative;

    overflow:hidden;

    backdrop-filter:blur(12px);

}

.footer-social a::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:inherit;

    background:var(--gradient-primary);

    opacity:0;

    transition:.4s;

    z-index:-2;

}

.footer-social a::after{

    content:"";

    position:absolute;

    top:-120%;

    left:-60%;

    width:45%;

    height:320%;

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

    transform:rotate(25deg);

    transition:.7s;

}

.footer-social a:hover{

    color:#fff;

    transform:translateY(-8px);

    box-shadow:0 18px 35px rgba(3,37,85,.30);

}

.footer-social a:hover::before{

    opacity:1;

}

.footer-social a:hover::after{

    left:170%;

}

/*==================================
LOGO
==================================*/

.footer-logo{

    transition:var(--transition);

}

.footer-logo:hover{

    transform:translateY(-4px);

}

/*==================================
COLUMN TITLE
==================================*/

.footer-column h3{

    transition:var(--transition);

}

.footer-column:hover h3{

    color:var(--accent-light);

}

.footer-column:hover h3::after{

    width:70px;

}

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

.footer-contact i{

    transition:var(--transition);

}

.footer-contact li:hover i{

    transform:scale(1.2) rotate(-12deg);

    color:#FFD76A;

}

/*==================================
DISCLAIMER
==================================*/

.footer-disclaimer{

    position:relative;

}

.footer-disclaimer::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:1px;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(212,160,23,.55),
        transparent
    );

}

.footer-disclaimer h4{

    transition:var(--transition);

}

.footer-disclaimer:hover h4{

    color:var(--accent-light);

}

/*==================================
BOTTOM BORDER
==================================*/

.footer-bottom{

    position:relative;

}

.footer-bottom::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:180px;

    height:2px;

    background:var(--gradient-gold);

    border-radius:20px;

}

/*==================================
DEVELOPER LINK
==================================*/

.footer-credit a{

    position:relative;

    transition:var(--transition);

}

.footer-credit a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-3px;

    width:0;

    height:2px;

    background:var(--accent);

    transition:.35s;

}

.footer-credit a:hover{

    color:#fff;

}

.footer-credit a:hover::after{

    width:100%;

}

/*==================================
BACK TO TOP
==================================*/

.back-to-top{

    overflow:hidden;

}

.back-to-top::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.35),
        transparent
    );

    opacity:0;

    transition:.4s;

}

.back-to-top:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(3,37,85,.35);

}

.back-to-top:hover::before{

    opacity:1;

}

.back-to-top i{

    transition:transform .35s ease;

}

.back-to-top:hover i{

    transform:translateY(-3px);

}

/*==================================
COPYRIGHT
==================================*/

.footer-copy,
.footer-credit{

    transition:var(--transition);

}

.footer-bottom:hover .footer-copy{

    color:#fff;

}

/*==================================
PARALLAX GLOW
==================================*/

.footer-glow{

    animation:footerGlowFloat 12s ease-in-out infinite;

}

.glow-2{

    animation-delay:4s;

}

@keyframes footerGlowFloat{

    0%{

        transform:translate(0,0);

    }

    25%{

        transform:translate(30px,-25px);

    }

    50%{

        transform:translate(-20px,20px);

    }

    75%{

        transform:translate(15px,12px);

    }

    100%{

        transform:translate(0,0);

    }

}

/*==================================
FADE UP
==================================*/

.footer-column{

    opacity:0;

    transform:translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.footer-column.footer-visible{

    opacity:1;

    transform:translateY(0);

}

/*==================================
SOCIAL ICON PULSE
==================================*/

.footer-social a:hover i{

    animation:footerPulse .7s ease;

}

@keyframes footerPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.25);

    }

    100%{

        transform:scale(1);

    }

}

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

@media (max-width:992px){

    .footer-column a:hover{

        transform:none;

    }

    .footer-social a:hover{

        transform:translateY(-4px);

    }

}

@media (max-width:768px){

    .footer-bottom::before{

        width:120px;

    }

    .footer-social{

        justify-content:flex-start;

    }

}

@media (max-width:576px){

    .footer-social{

        justify-content:center;

    }

    .footer-company{

        text-align:center;

    }

    .footer-logo{

        display:flex;

        justify-content:center;

    }

    .footer-company p{

        margin-left:auto;

        margin-right:auto;

    }

}

/*==================================
SOCIAL RIPPLE
==================================*/

.footer-social a{

    position:relative;

    overflow:hidden;

}

.footer-ripple{

    position:absolute;

    border-radius:50%;

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

    transform:scale(0);

    animation:footerRipple .7s linear;

    pointer-events:none;

}

@keyframes footerRipple{

    to{

        transform:scale(4);

        opacity:0;

    }

}

/* Footer Ends Here */

/* Homepage Starts Here */

/* Hero Section Starts Here */
 
body{
    font-family:var(--font-body);
    background:var(--body);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
}
 
.container{max-width:var(--container);margin:0 auto;padding:0 40px;}
 
/* ============ HERO ============ */
 
.hero{
    position:relative;
    overflow:hidden;
    padding:130px 0 110px;
    background:var(--body);
}
 
.hero .container{
    display:grid;
    grid-template-columns:1.05fr 1fr;
    align-items:center;
    gap:56px;
    position:relative;
    z-index:2;
}
 
/* ---- Left column ---- */
 
.hero-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 16px 7px 8px;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:100px;
    box-shadow:var(--shadow-sm);
    font-size:13px;
    font-weight:600;
    color:var(--primary);
    letter-spacing:.2px;
    margin-bottom:26px;
}
.hero-eyebrow .dot{
    width:20px;height:20px;
    border-radius:50%;
    background:var(--gradient-gold);
    display:grid;place-items:center;
    color:var(--white);
    font-size:11px;
}
 
.hero h1{
    font-family:var(--font-display);
    font-weight:600;
    font-size:clamp(36px, 4.4vw, 58px);
    line-height:1.12;
    letter-spacing:-.5px;
    color:var(--heading);
    margin-bottom:24px;
}
.hero h1 em{
    font-style:italic;
    font-weight:500;
    background:var(--gradient-gold);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
 
.hero .subhead{
    font-size:18px;
    line-height:1.65;
    color:var(--text);
    max-width:520px;
    margin-bottom:38px;
}
 
.hero-buttons{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
    margin-bottom:46px;
}
 
.btn{
    font-family:var(--font-body);
    font-size:15.5px;
    font-weight:600;
    padding:16px 30px;
    border-radius:var(--radius-sm);
    border:none;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:10px;
    transition:var(--transition);
    text-decoration:none;
    white-space:nowrap;
}
.btn-primary{
    background:var(--gradient-primary);
    color:var(--white);
    box-shadow:var(--shadow-primary);
}
.btn-primary:hover{
    transform:translateY(-3px);
    box-shadow:0 20px 45px rgba(0,86,214,.28);
}
.btn-primary svg{transition:transform var(--transition);}
.btn-primary:hover svg{transform:translateX(4px);}
 
.btn-secondary{
    background:var(--white);
    color:var(--primary);
    border:1.5px solid var(--border);
}
.btn-secondary:hover{
    border-color:var(--primary-light);
    transform:translateY(-3px);
    box-shadow:var(--shadow-md);
}
 
.trust-row{
    display:flex;
    flex-wrap:wrap;
    gap:22px 32px;
}
.trust-item{
    display:flex;
    align-items:center;
    gap:9px;
    font-size:14.5px;
    font-weight:600;
    color:var(--heading);
}
.trust-item .check{
    width:20px;height:20px;
    border-radius:50%;
    background:rgba(212,160,23,.14);
    color:var(--accent);
    display:grid;place-items:center;
    flex-shrink:0;
}
.trust-item .check svg{width:11px;height:11px;}
 
/* ---- Right column: animated illustration ---- */
 
.hero-visual{
    position:relative;
    height:560px;
    display:flex;
    align-items:center;
    justify-content:center;
}
 
/* aurora blobs */
.aurora{
    position:absolute;
    inset:-60px;
    z-index:0;
    filter:blur(50px);
    opacity:.55;
    pointer-events:none;
}
.aurora span{
    position:absolute;
    border-radius:50%;
}
.aurora span:nth-child(1){
    width:320px;height:320px;
    top:0;right:20px;
    background:var(--gradient-primary);
    animation:drift1 13s ease-in-out infinite;
}
.aurora span:nth-child(2){
    width:260px;height:260px;
    bottom:0;left:0;
    background:var(--gradient-gold);
    opacity:.8;
    animation:drift2 16s ease-in-out infinite;
}
@keyframes drift1{
    0%,100%{transform:translate(0,0) scale(1);}
    50%{transform:translate(-30px,30px) scale(1.12);}
}
@keyframes drift2{
    0%,100%{transform:translate(0,0) scale(1);}
    50%{transform:translate(25px,-25px) scale(1.08);}
}
 
/* market grid */
.market-grid{
    position:absolute;
    inset:0;
    z-index:1;
    opacity:.5;
    -webkit-mask-image:radial-gradient(circle at center, #000 45%, transparent 78%);
    mask-image:radial-gradient(circle at center, #000 45%, transparent 78%);
    animation:gridpulse 6s ease-in-out infinite;
}
@keyframes gridpulse{
    0%,100%{opacity:.35;}
    50%{opacity:.6;}
}
 
/* floating micro icons */
.float-icon{
    position:absolute;
    z-index:3;
    display:grid;
    place-items:center;
    background:var(--white);
    border:1px solid var(--border);
    box-shadow:var(--shadow-md);
    animation:bob 5s ease-in-out infinite;
}
.float-icon svg{width:50%;height:50%;}
.fi-1{ width:52px;height:52px;border-radius:16px; top:8%; left:2%; color:var(--accent); animation-delay:.2s;}
.fi-2{ width:44px;height:44px;border-radius:50%; top:62%; left:-2%; color:var(--primary-light); animation-delay:1.4s; animation-duration:6s;}
.fi-3{ width:46px;height:46px;border-radius:14px; top:2%; right:10%; color:var(--primary); animation-delay:.8s; animation-duration:5.5s;}
.fi-4{ width:38px;height:38px;border-radius:50%; bottom:6%; right:0%; color:var(--accent); animation-delay:2s; animation-duration:6.5s;}
@keyframes bob{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-16px);}
}
 
/* main glass dashboard card — signature element */
.dash-card{
    position:relative;
    z-index:4;
    width:340px;
    background:var(--glass);
    backdrop-filter:blur(var(--blur));
    -webkit-backdrop-filter:blur(var(--blur));
    border:1px solid rgba(255,255,255,.6);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    padding:26px 26px 22px;
    animation:cardfloat 7s ease-in-out infinite;
}
@keyframes cardfloat{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-14px);}
}
 
.dash-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px;
}
.dash-label{
    font-size:12.5px;
    font-weight:600;
    color:var(--text-light);
    text-transform:uppercase;
    letter-spacing:.6px;
}
.dash-pill{
    font-size:12px;
    font-weight:700;
    color:#1E8E5A;
    background:rgba(30,142,90,.12);
    padding:4px 10px;
    border-radius:100px;
    display:flex;
    align-items:center;
    gap:4px;
}
 
.dash-value{
    font-family:var(--font-body);
    font-variant-numeric:tabular-nums;
    font-size:34px;
    font-weight:800;
    color:var(--heading);
    margin-bottom:2px;
}
.dash-sub{
    font-size:13px;
    color:var(--text-light);
    margin-bottom:16px;
}
 
.chart-wrap{
    width:100%;
    height:96px;
    margin-bottom:16px;
}
.growth-path{
    fill:none;
    stroke:var(--primary-light);
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:600;
    stroke-dashoffset:600;
    animation:draw 2.2s ease forwards .4s;
}
.growth-fill{
    opacity:0;
    animation:fadein 1.2s ease forwards 1.8s;
}
@keyframes draw{to{stroke-dashoffset:0;}}
@keyframes fadein{to{opacity:1;}}
 
.dash-stats{
    display:flex;
    gap:10px;
}
.stat-chip{
    flex:1;
    background:var(--section-alt);
    border-radius:var(--radius-sm);
    padding:10px 12px;
}
.stat-chip .k{font-size:11.5px;color:var(--text-light);font-weight:600;margin-bottom:2px;}
.stat-chip .v{font-size:14.5px;font-weight:700;color:var(--heading);}
.stat-chip .v.up{color:#1E8E5A;}
 
/* secondary floating card: SIP bars */
.bar-card{
    position:absolute;
    z-index:5;
    left:-42px;
    bottom:34px;
    width:150px;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-md);
    padding:14px 16px;
    animation:cardfloat 8s ease-in-out infinite 1s;
}
.bar-card .k{font-size:11px;font-weight:700;color:var(--text-light);text-transform:uppercase;letter-spacing:.4px;margin-bottom:10px;}
.bars{display:flex;align-items:flex-end;gap:6px;height:46px;}
.bars span{
    flex:1;
    background:var(--gradient-primary);
    border-radius:3px 3px 0 0;
    transform:scaleY(0);
    transform-origin:bottom;
    animation:growbar .7s ease forwards;
}
.bars span:nth-child(1){height:40%;animation-delay:.6s;}
.bars span:nth-child(2){height:65%;animation-delay:.75s;}
.bars span:nth-child(3){height:50%;animation-delay:.9s;}
.bars span:nth-child(4){height:85%;animation-delay:1.05s;background:var(--gradient-gold);}
.bars span:nth-child(5){height:100%;animation-delay:1.2s;background:var(--gradient-gold);}
@keyframes growbar{to{transform:scaleY(1);}}
 
/* mobile app peek card */
.phone-card{
    position:absolute;
    z-index:5;
    right:-30px;
    top:6%;
    width:104px;
    height:210px;
    background:var(--heading);
    border-radius:24px;
    padding:8px;
    box-shadow:var(--shadow-lg);
    animation:cardfloat 6.5s ease-in-out infinite .5s;
}
.phone-screen{
    width:100%;height:100%;
    background:var(--gradient-primary);
    border-radius:17px;
    padding:14px 10px;
    position:relative;
    overflow:hidden;
}
.phone-screen .ps-label{font-size:8px;color:rgba(255,255,255,.75);font-weight:600;letter-spacing:.3px;margin-bottom:4px;}
.phone-screen .ps-value{font-size:15px;color:#fff;font-weight:800;margin-bottom:10px;}
.phone-line{
    position:absolute;
    left:10px;right:10px;bottom:16px;height:34px;
}
 
/* ---- responsive ---- */
@media (max-width:1080px){

    .hero .container{grid-template-columns:1fr;text-align:center;}
    .hero .subhead{margin-left:auto;margin-right:auto;}
    .hero-buttons,.trust-row{justify-content:center;}
    .hero-visual{margin-top:20px;height:460px;}
    .bar-card{left:0;}
    .phone-card{right:0;}
}
@media (max-width:480px){
    .hero{padding:90px 0 70px;}
    .container{padding:0 22px;}
    .dash-card{width:88vw;max-width:320px;}
    .bar-card,.phone-card{display:none;}
}
 
@media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}


/* Hero Section Ends Here */

/* Trust Section Starts Here */

.trust-strip{
    padding:56px 0;
    background:var(--section);
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
}

.trust-strip .container{
    max-width:var(--container);
    margin:0 auto;
    padding:0 40px;
}

.trust-strip-label{
    text-align:center;
    font-family:var(--font-body);
    font-size:13px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:var(--text-light);
    margin:0 0 32px;
}

/* marquee viewport */
.logo-marquee{
    position:relative;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.logo-track{
    display:flex;
    align-items:center;
    gap:16px;
    width:max-content;
    list-style:none;
    margin:0;
    padding:0;
    animation:scrollLogos 26s linear infinite;
}
.logo-marquee:hover .logo-track{
    animation-play-state:paused;
}

.logo-item{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
    padding:14px 22px;
    background:var(--section-alt);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    transition:var(--transition);
    filter:grayscale(1);
    opacity:.72;
}
.logo-item:hover{
    filter:grayscale(0);
    opacity:1;
    border-color:var(--primary-light);
    background:var(--white);
    box-shadow:var(--shadow-sm);
    transform:translateY(-2px);
}

.logo-badge{
    width:34px;height:34px;
    border-radius:50%;
    background:var(--gradient-primary);
    color:var(--white);
    display:grid;
    place-items:center;
    font-family:var(--font-body);
    font-size:11px;
    font-weight:800;
    letter-spacing:.2px;
    flex-shrink:0;
}
.logo-item.gold .logo-badge{
    background:var(--gradient-gold);
}

.logo-name{
    font-family:var(--font-body);
    font-size:15px;
    font-weight:700;
    color:var(--heading);
    white-space:nowrap;
}
.logo-tag{
    font-size:11px;
    font-weight:600;
    color:var(--text-light);
    display:block;
    margin-top:1px;
}

@keyframes scrollLogos{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
}

@media (max-width:640px){
    .trust-strip{padding:44px 0;}
    .logo-item{padding:11px 16px;}
    .logo-name{font-size:13.5px;}
}

@media (prefers-reduced-motion: reduce){
    .logo-track{
        animation:none;
        flex-wrap:wrap;
        justify-content:center;
        width:auto;
    }
}

/* Trust Section Ends Here */

/* About Section Starts Here */

.about-section{
    padding:120px 0;
    background:var(--section);
}

.about-section .container{
    max-width:var(--container);
    margin:0 auto;
    padding:0 40px;
}

.about-grid{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:72px;
    align-items:start;
}

/* ---- Left: founder image ---- */
.about-media{
    position:relative;
}

.founder-frame{
    position:relative;
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-lg);
    aspect-ratio:4/5;
}
.founder-frame img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.founder-frame::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, transparent 55%, rgba(3,37,85,.65) 100%);
}

.founder-caption{
    position:absolute;
    left:24px;
    right:24px;
    bottom:22px;
    z-index:2;
    color:var(--white);
}
.founder-caption .name{
    font-family:var(--font-display);
    font-size:22px;
    font-weight:600;
    margin-bottom:2px;
}
.founder-caption .role{
    font-size:13px;
    font-weight:500;
    opacity:.85;
    letter-spacing:.2px;
}

.founder-badge{
    position:absolute;
    top:-18px;
    right:-18px;
    z-index:3;
    width:88px;
    height:88px;
    border-radius:50%;
    background:var(--gradient-gold);
    color:var(--white);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    box-shadow:var(--shadow-md);
    text-align:center;
    line-height:1.1;
}
.founder-badge strong{font-size:20px;font-weight:800;}
.founder-badge span{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;}

/* ---- Right: content ---- */
.about-eyebrow{
    display:inline-block;
    font-size:13px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:var(--primary);
    margin-bottom:14px;
}

.about-content h2{
    font-family:var(--font-display);
    font-weight:600;
    font-size:clamp(30px, 3vw, 40px);
    line-height:1.2;
    color:var(--heading);
    margin-bottom:20px;
    letter-spacing:-.4px;
}

.about-intro{
    font-size:16.5px;
    line-height:1.75;
    color:var(--text);
    margin-bottom:36px;
    max-width:640px;
}

.mv-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-bottom:36px;
}
.mv-card{
    background:var(--section-alt);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    padding:24px;
}
.mv-icon{
    width:42px;height:42px;
    border-radius:12px;
    background:var(--gradient-primary);
    color:var(--white);
    display:grid;
    place-items:center;
    margin-bottom:14px;
}
.mv-icon svg{width:20px;height:20px;}
.mv-card h3{
    font-family:var(--font-body);
    font-size:16px;
    font-weight:700;
    color:var(--heading);
    margin-bottom:8px;
}
.mv-card p{
    font-size:14px;
    line-height:1.6;
    color:var(--text);
}

.why-choose h3{
    font-family:var(--font-body);
    font-size:17px;
    font-weight:700;
    color:var(--heading);
    margin-bottom:16px;
}
.why-list{
    list-style:none;
    margin:0 0 44px;
    padding:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px 20px;
}
.why-list li{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:14.5px;
    font-weight:600;
    color:var(--heading);
    line-height:1.4;
}
.why-list .check{
    width:22px;height:22px;
    border-radius:50%;
    background:rgba(212,160,23,.14);
    color:var(--accent);
    display:grid;
    place-items:center;
    flex-shrink:0;
    margin-top:1px;
}
.why-list .check svg{width:11px;height:11px;}

/* ---- Stats row ---- */
.stats-row{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:0;
    border-top:1px solid var(--border);
    padding-top:36px;
}
.stat-block{
    text-align:left;
    padding-right:20px;
    border-right:1px solid var(--border);
}
.stat-block:last-child{
    border-right:none;
}
.stat-num{
    font-family:var(--font-display);
    font-variant-numeric:tabular-nums;
    font-size:clamp(26px, 2.6vw, 34px);
    font-weight:600;
    color:var(--primary);
    margin-bottom:6px;
    line-height:1;
}
.stat-num .unit{
    font-size:.6em;
    font-weight:600;
    color:var(--accent);
}
.stat-caption{
    font-size:13px;
    font-weight:600;
    color:var(--text-light);
    line-height:1.3;
}

/* ---- responsive ---- */
@media (max-width:960px){
    .about-grid{grid-template-columns:1fr;gap:44px;}
    .about-media{max-width:340px;margin:0 auto;}
    .mv-grid{grid-template-columns:1fr;}
    .why-list{grid-template-columns:1fr;}
    .stats-row{grid-template-columns:1fr 1fr;row-gap:28px;}
    .stat-block:nth-child(2){border-right:none;}
    .stat-block:nth-child(odd){border-right:1px solid var(--border);}
}
@media (max-width:480px){
    .about-section{padding:80px 0;}
    .stats-row{grid-template-columns:1fr 1fr;}
}

/* About Section Ends Here */

/* Services Section Starts Here */

.services-section{
    padding:120px 0;
    background:var(--section-alt);
}

.services-section .container{
    max-width:var(--container);
    margin:0 auto;
    padding:0 40px;
}

.services-header{
    text-align:center;
    max-width:640px;
    margin:0 auto 56px;
}
.services-eyebrow{
    display:inline-block;
    font-size:13px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:var(--primary);
    margin-bottom:14px;
}
.services-header h2{
    font-family:var(--font-display);
    font-weight:600;
    font-size:clamp(30px, 3vw, 40px);
    line-height:1.2;
    color:var(--heading);
    margin-bottom:14px;
    letter-spacing:-.4px;
}
.services-header p{
    font-size:16px;
    line-height:1.65;
    color:var(--text);
}

/* ---- Bento grid ---- */
.bento-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    /* grid-auto-rows:190px; */
    grid-auto-rows:275px;
    grid-auto-flow:dense;
    gap:22px;
}

.bento-card{
    position:relative;
    display:flex;
    flex-direction:column;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:28px;
    overflow:hidden;
    transition:var(--transition);
}
.bento-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-lg);
    border-color:var(--primary-light);
}

/* size variants */
.bento-lg{
    grid-column:span 2;
    grid-row:span 2;
    padding:36px;
    background:var(--gradient-primary);
    border:none;
    color:var(--white);
}
.bento-wide{
    grid-column:span 2;
}

.bento-lg:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-primary);
    border-color:transparent;
}

/* decorative glow inside the featured card */
.bento-lg::after{
    content:"";
    position:absolute;
    width:220px;height:220px;
    border-radius:50%;
    background:var(--gradient-gold);
    opacity:.18;
    filter:blur(40px);
    right:-60px;
    bottom:-60px;
}

.card-icon{
    width:52px;height:52px;
    border-radius:14px;
    background:rgba(0,86,214,.08);
    color:var(--primary);
    display:grid;
    place-items:center;
    margin-bottom:auto;
    flex-shrink:0;
}
.card-icon svg{width:24px;height:24px;}

.bento-card.gold .card-icon{
    background:rgba(212,160,23,.14);
    color:var(--accent);
}

.bento-lg .card-icon{
    background:rgba(255,255,255,.16);
    color:var(--white);
    width:60px;height:60px;
}
.bento-lg .card-icon svg{width:28px;height:28px;}

.card-body{
    margin-top:18px;
}
.bento-lg .card-body{margin-top:24px;}

.card-body h3{
    font-family:var(--font-body);
    font-size:18px;
    font-weight:700;
    color:var(--heading);
    margin-bottom:8px;
}
.bento-lg .card-body h3{
    font-size:24px;
    color:var(--white);
}

.card-body p{
    font-size:14px;
    line-height:1.6;
    color:var(--text);
    margin-bottom:0;
}
.bento-lg .card-body p{
    font-size:15px;
    color:rgba(255,255,255,.82);
    max-width:340px;
}

.card-link{
    margin-top:18px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:13.5px;
    font-weight:700;
    color:var(--primary);
    text-decoration:none;
    z-index:2;
    position:relative;
    width:fit-content;
}
.card-link svg{
    width:14px;height:14px;
    transition:transform var(--transition);
}
.bento-card:hover .card-link svg{
    transform:translateX(4px);
}
.bento-lg .card-link{
    color:var(--white);
}
.bento-lg .card-link svg{stroke:var(--white);}

/* ---- responsive ---- */
@media (max-width:1080px){
    .bento-grid{grid-template-columns:repeat(2, 1fr);grid-auto-rows:200px;}
    .bento-lg{grid-column:span 2;grid-row:span 1;}
    .bento-wide{grid-column:span 2;}
}
@media (max-width:640px){
    .services-section{padding:80px 0;}
    .bento-grid{grid-template-columns:1fr;grid-auto-rows:auto;}
    .bento-lg,.bento-wide{grid-column:span 1;}
    .bento-card{padding:24px;}
}

/* Services Section Ends Here */

/* Why Choose Section Starts Here */

.why-section{
    padding:120px 0;
    background:var(--section);
}

.why-section .container{
    max-width:var(--container);
    margin:0 auto;
    padding:0 40px;
}

.why-header{
    max-width:640px;
    margin:0 0 56px;
}
.why-eyebrow{
    display:inline-block;
    font-size:13px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:var(--primary);
    margin-bottom:14px;
}
.why-header h2{
    font-family:var(--font-display);
    font-weight:600;
    font-size:clamp(30px, 3vw, 40px);
    line-height:1.2;
    color:var(--heading);
    margin-bottom:14px;
    letter-spacing:-.4px;
}
.why-header p{
    font-size:16px;
    line-height:1.65;
    color:var(--text);
}

/* ---- interactive layout ---- */
.why-interactive{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:0;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-md);
    min-height:460px;
}

/* left: clickable feature list */
.why-list{
    border-right:1px solid var(--border);
    background:var(--section-alt);
}
.why-tab{
    width:100%;
    display:flex;
    align-items:center;
    gap:16px;
    text-align:left;
    padding:20px 28px;
    background:transparent;
    border:none;
    border-left:3px solid transparent;
    border-bottom:1px solid var(--border);
    cursor:pointer;
    font-family:var(--font-body);
    transition:var(--transition);
}
.why-tab:last-child{border-bottom:none;}
.why-tab:hover{background:rgba(0,86,214,.04);}
.why-tab.active{
    background:var(--white);
    border-left-color:var(--accent);
}

.why-tab-icon{
    width:40px;height:40px;
    border-radius:11px;
    background:rgba(0,86,214,.08);
    color:var(--primary);
    display:grid;
    place-items:center;
    flex-shrink:0;
    transition:var(--transition);
}
.why-tab-icon svg{width:19px;height:19px;}
.why-tab.active .why-tab-icon{
    background:var(--gradient-gold);
    color:var(--white);
}

.why-tab-title{
    font-size:15px;
    font-weight:700;
    color:var(--heading);
}
.why-tab.active .why-tab-title{
    color:var(--primary);
}

/* right: detail panel */
.why-panel{
    padding:48px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:relative;
}

.why-panel-icon{
    width:64px;height:64px;
    border-radius:16px;
    background:var(--gradient-primary);
    color:var(--white);
    display:grid;
    place-items:center;
    margin-bottom:24px;
}
.why-panel-icon svg{width:30px;height:30px;}

.why-panel-title{
    font-family:var(--font-display);
    font-size:26px;
    font-weight:600;
    color:var(--heading);
    margin-bottom:14px;
}
.why-panel-desc{
    font-size:16px;
    line-height:1.7;
    color:var(--text);
    max-width:480px;
    margin-bottom:24px;
}

.why-panel-points{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:12px;
}
.why-panel-points li{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:14.5px;
    font-weight:600;
    color:var(--heading);
}
.why-panel-points .check{
    width:20px;height:20px;
    border-radius:50%;
    background:rgba(212,160,23,.14);
    color:var(--accent);
    display:grid;
    place-items:center;
    flex-shrink:0;
    margin-top:1px;
}
.why-panel-points .check svg{width:10px;height:10px;}

.why-panel-count{
    position:absolute;
    top:32px;
    right:40px;
    font-family:var(--font-display);
    font-size:14px;
    font-weight:600;
    color:var(--text-light);
}

/* ---- responsive ---- */
@media (max-width:900px){
    .why-interactive{grid-template-columns:1fr;}
    .why-list{border-right:none;border-bottom:1px solid var(--border);}
    .why-tab{padding:16px 22px;}
    .why-panel{padding:36px 28px;}
}
@media (max-width:480px){
    .why-section{padding:80px 0;}
    .why-panel-title{font-size:22px;}
}

/* Why Choose Section Ends Here */

/* Process Section Starts Here */

.process-section{
    position:relative;
    padding:130px 0;
    background:var(--section-alt);
    overflow:hidden;
}

.process-glow{
    position:absolute;
    inset:-100px;
    z-index:0;
    pointer-events:none;
    filter:blur(60px);
    opacity:.45;
}
.process-glow span{position:absolute;border-radius:50%;}
.process-glow span:nth-child(1){
    width:380px;height:380px;
    top:-120px;left:-80px;
    background:var(--gradient-primary);
}
.process-glow span:nth-child(2){
    width:340px;height:340px;
    bottom:-140px;right:-80px;
    background:var(--gradient-gold);
    opacity:.7;
}

.process-section .container{
    max-width:var(--container);
    margin:0 auto;
    padding:0 40px;
    position:relative;
    z-index:2;
}

.process-header{
    text-align:center;
    max-width:640px;
    margin:0 auto 88px;
}
.process-eyebrow{
    display:inline-block;
    font-size:13px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:var(--primary);
    margin-bottom:14px;
}
.process-header h2{
    font-family:var(--font-display);
    font-weight:600;
    font-size:clamp(30px, 3vw, 40px);
    line-height:1.2;
    color:var(--heading);
    margin-bottom:14px;
    letter-spacing:-.4px;
}
.process-header p{
    font-size:16px;
    line-height:1.65;
    color:var(--text);
}

/* ---- timeline ---- */
.process-timeline{
    position:relative;
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    column-gap:8px;
    list-style:none;
    margin:0;
    padding:0;
}

/* base track */
.process-timeline::before{
    content:"";
    position:absolute;
    top:32px;
    left:calc(100%/12);
    right:calc(100%/12);
    height:3px;
    border-radius:3px;
    background:var(--border);
    z-index:0;
}

/* animated gradient fill that draws in on scroll */
.process-line-fill{
    position:absolute;
    top:32px;
    left:calc(100%/12);
    height:3px;
    border-radius:3px;
    width:0;
    z-index:1;
    background:linear-gradient(90deg, var(--primary), var(--primary-light), var(--accent-light), var(--accent));
    transition:width 1.6s cubic-bezier(.16,1,.3,1);
    box-shadow:0 0 14px rgba(212,160,23,.35);
}

/* traveling pulse riding the line once drawn */
.process-line-fill::after{
    content:"";
    position:absolute;
    top:-3px;
    right:-3px;
    width:9px;height:9px;
    border-radius:50%;
    background:var(--white);
    box-shadow:0 0 10px 3px var(--accent-light);
    opacity:0;
}
.process-timeline.drawn .process-line-fill::after{
    animation:pulseTravel 2.4s ease-in-out .6s infinite;
}
@keyframes pulseTravel{
    0%{opacity:0;}
    8%{opacity:1;}
    92%{opacity:1;}
    100%{opacity:0;}
}

.process-step{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:0 10px;
}

/* node stays anchored to the line */
.step-node-wrap{
    position:relative;
    margin-bottom:16px;
}
.step-node{
    width:64px;
    height:64px;
    border-radius:50%;
    background:var(--gradient-primary);
    color:var(--white);
    display:grid;
    place-items:center;
    box-shadow:var(--shadow-primary);
    position:relative;
}
.step-node svg{width:26px;height:26px;}
.step-node::before{
    content:"";
    position:absolute;
    inset:-6px;
    border-radius:50%;
    border:1.5px solid var(--primary-light);
    opacity:0;
    transform:scale(.85);
    transition:opacity .4s, transform .4s;
}
.process-step.in-view .step-node::before{
    opacity:.5;
    transform:scale(1);
}

.step-number{
    position:absolute;
    top:-6px;
    right:-6px;
    width:24px;
    height:24px;
    border-radius:50%;
    background:var(--gradient-gold);
    color:var(--white);
    font-family:var(--font-body);
    font-size:11px;
    font-weight:800;
    display:grid;
    place-items:center;
    border:2px solid var(--section-alt);
}

/* zigzag stagger: even cards sit closer to the line, odd cards sit lower */
.process-step:nth-child(odd) .step-card{ margin-top:6px; }
.process-step:nth-child(even) .step-card{ margin-top:38px; }

.step-card{
    position:relative;
    width:100%;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    padding:22px 18px 20px;
    text-align:center;
    overflow:hidden;
    opacity:0;
    transform:translateY(18px);
    transition:opacity .5s ease, transform .5s ease, box-shadow var(--transition), border-color var(--transition);
}
.process-step.in-view .step-card{
    opacity:1;
    transform:translateY(0);
}
.step-card:hover{
    box-shadow:var(--shadow-md);
    border-color:var(--primary-light);
    transform:translateY(-5px);
}

.step-card-ghost{
    position:absolute;
    top:-14px;
    right:0px;
    font-family:var(--font-display);
    font-size:64px;
    font-weight:600;
    color:var(--primary);
    opacity:.05;
    line-height:1;
    pointer-events:none;
    user-select:none;
}

.step-title{
    font-family:var(--font-body);
    font-size:15px;
    font-weight:700;
    color:var(--heading);
    margin-bottom:8px;
    position:relative;
}
.step-desc{
    font-size:13px;
    line-height:1.55;
    color:var(--text-light);
    position:relative;
}

/* ---- responsive: vertical rail on mobile/tablet ---- */
@media (max-width:960px){
    .process-timeline{
        grid-template-columns:1fr;
        max-width:440px;
        margin:0 auto;
    }
    .process-timeline::before{
        top:0;bottom:0;
        left:31px;right:auto;
        width:3px;height:auto;
    }
    .process-line-fill{
        top:0;left:31px;
        width:3px;height:0;
        transition:height 1.6s cubic-bezier(.16,1,.3,1);
    }
    .process-line-fill::after{
        top:auto;bottom:-3px;right:-3px;
    }
    .process-step{
        flex-direction:row;
        align-items:flex-start;
        text-align:left;
        padding:0 0 34px;
    }
    .process-step:last-child{padding-bottom:0;}
    .step-node-wrap{margin-bottom:0;margin-right:20px;flex-shrink:0;}
    .process-step:nth-child(odd) .step-card,
    .process-step:nth-child(even) .step-card{margin-top:0;}
    .step-card{text-align:left;padding:16px 18px;}
    .step-card-ghost{right:8px;top:-10px;font-size:50px;}
}

@media (max-width:480px){
    .process-section{padding:80px 0;}
    .process-header{margin-bottom:60px;}
    .step-node{width:56px;height:56px;}
}

@media (prefers-reduced-motion: reduce){
    .process-line-fill,.step-card{transition:none;}
    .process-line-fill::after{animation:none;}
}

/* Process Section Ends Here */

/* Calc Section Starts Here */

.calc-section{
    padding:120px 0;
    background:var(--section);
}

.calc-section .container{
    max-width:var(--container);
    margin:0 auto;
    padding:0 40px;
}

.calc-header{
    text-align:center;
    max-width:640px;
    margin:0 auto 56px;
}
.calc-eyebrow{
    display:inline-block;
    font-size:13px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:var(--primary);
    margin-bottom:14px;
}
.calc-header h2{
    font-family:var(--font-display);
    font-weight:600;
    font-size:clamp(30px, 3vw, 40px);
    line-height:1.2;
    color:var(--heading);
    margin-bottom:14px;
    letter-spacing:-.4px;
}
.calc-header p{
    font-size:16px;
    line-height:1.65;
    color:var(--text);
}

/* ---- grid ---- */
.calc-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:24px;
}

.calc-card{
    position:relative;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:30px 30px 26px;
    transition:var(--transition);
    overflow:hidden;
}
.calc-card:hover{
    box-shadow:var(--shadow-lg);
    border-color:var(--primary-light);
    transform:translateY(-4px);
}

.calc-top{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:18px;
}
.calc-icon{
    width:48px;height:48px;
    border-radius:13px;
    background:var(--gradient-primary);
    color:var(--white);
    display:grid;
    place-items:center;
    flex-shrink:0;
}
.calc-icon svg{width:22px;height:22px;}
.calc-card.gold .calc-icon{background:var(--gradient-gold);}

.calc-titles h3{
    font-family:var(--font-body);
    font-size:17px;
    font-weight:700;
    color:var(--heading);
    margin-bottom:3px;
}
.calc-titles p{
    font-size:13px;
    color:var(--text-light);
}

/* mini interactive widget */
.calc-widget{
    background:var(--section-alt);
    border-radius:var(--radius-md);
    padding:18px 20px;
    margin-bottom:20px;
}

.calc-slider-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:8px;
}
.calc-slider-label{
    font-size:12.5px;
    font-weight:600;
    color:var(--text-light);
}
.calc-slider-value{
    font-family:var(--font-body);
    font-variant-numeric:tabular-nums;
    font-size:13.5px;
    font-weight:700;
    color:var(--primary);
}

.calc-slider{
    width:100%;
    -webkit-appearance:none;
    appearance:none;
    height:5px;
    border-radius:3px;
    background:var(--border);
    outline:none;
    margin-bottom:16px;
    cursor:pointer;
}
.calc-slider::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:17px;height:17px;
    border-radius:50%;
    background:var(--gradient-primary);
    border:2px solid var(--white);
    box-shadow:0 2px 6px rgba(18,38,63,.25);
    cursor:pointer;
}
.calc-slider::-moz-range-thumb{
    width:17px;height:17px;
    border-radius:50%;
    background:var(--primary);
    border:2px solid var(--white);
    box-shadow:0 2px 6px rgba(18,38,63,.25);
    cursor:pointer;
    border:none;
}

.calc-result{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    padding-top:14px;
    border-top:1px dashed var(--border);
}
.calc-result .k{
    font-size:12.5px;
    font-weight:600;
    color:var(--text-light);
}
.calc-result .v{
    font-family:var(--font-body);
    font-variant-numeric:tabular-nums;
    font-size:20px;
    font-weight:800;
    color:var(--heading);
}
.calc-card.gold .calc-result .v{color:var(--primary);}

.calc-note{
    font-size:11px;
    color:var(--text-light);
    margin-bottom:20px;
    line-height:1.4;
}

.calc-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:14px;
    font-weight:700;
    color:var(--primary);
    text-decoration:none;
}
.calc-link svg{
    width:15px;height:15px;
    transition:transform var(--transition);
}
.calc-link:hover svg{transform:translateX(4px);}

/* ---- responsive ---- */
@media (max-width:900px){
    .calc-grid{grid-template-columns:1fr;}
}
@media (max-width:480px){
    .calc-section{padding:80px 0;}
    .calc-card{padding:24px 22px 22px;}
}

/* Calc Section Ends Here */

/* Category Section Starts Here */

.categories-section{
    padding:120px 0;
    background:var(--section-alt);
}

.categories-section .container{
    max-width:var(--container);
    margin:0 auto;
    padding:0 40px;
}

.cat-header{
    text-align:center;
    max-width:640px;
    margin:0 auto 56px;
}
.cat-eyebrow{
    display:inline-block;
    font-size:13px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:var(--primary);
    margin-bottom:14px;
}
.cat-header h2{
    font-family:var(--font-display);
    font-weight:600;
    font-size:clamp(30px, 3vw, 40px);
    line-height:1.2;
    color:var(--heading);
    margin-bottom:14px;
    letter-spacing:-.4px;
}
.cat-header p{
    font-size:16px;
    line-height:1.65;
    color:var(--text);
}

.cat-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.cat-card{
    display:flex;
    align-items:center;
    gap:20px;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:24px 26px;
    text-decoration:none;
    transition:var(--transition);
    position:relative;
    overflow:hidden;
}
.cat-card:hover{
    border-color:var(--primary-light);
    box-shadow:var(--shadow-md);
    transform:translateY(-4px);
}

.cat-icon{
    width:58px;height:58px;
    border-radius:16px;
    background:var(--gradient-primary);
    color:var(--white);
    display:grid;
    place-items:center;
    flex-shrink:0;
    transition:var(--transition);
}
.cat-icon svg{width:26px;height:26px;}
.cat-card.gold .cat-icon{background:var(--gradient-gold);}
.cat-card:hover .cat-icon{transform:scale(1.08) rotate(-4deg);}

.cat-body{flex:1;min-width:0;}
.cat-body h3{
    font-family:var(--font-body);
    font-size:17px;
    font-weight:700;
    color:var(--heading);
    margin-bottom:5px;
}
.cat-body p{
    font-size:13.5px;
    line-height:1.5;
    color:var(--text-light);
}

.cat-risk{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.4px;
    padding:4px 10px;
    border-radius:100px;
    margin-top:10px;
}
.risk-high{background:rgba(226,75,74,.1);color:#B23A39;}
.risk-mod{background:rgba(212,160,23,.14);color:var(--accent);}
.risk-low{background:rgba(30,142,90,.1);color:#1E8E5A;}

.cat-arrow{
    width:38px;height:38px;
    border-radius:50%;
    border:1.5px solid var(--border);
    color:var(--primary);
    display:grid;
    place-items:center;
    flex-shrink:0;
    transition:var(--transition);
}
.cat-arrow svg{width:15px;height:15px;transition:transform var(--transition);}
.cat-card:hover .cat-arrow{
    background:var(--gradient-primary);
    border-color:transparent;
    color:var(--white);
}
.cat-card:hover .cat-arrow svg{transform:translateX(3px);}

@media (max-width:900px){
    .cat-grid{grid-template-columns:1fr;}
}
@media (max-width:480px){
    .categories-section{padding:80px 0;}
    .cat-card{padding:20px;gap:16px;}
    .cat-icon{width:50px;height:50px;}
    .cat-arrow{display:none;}
}

/* Category Section Ends Here */

/* Plans Section Starts Here */

.plans-section{
    padding:120px 0;
    background:var(--section);
}

.plans-section .container{
    max-width:var(--container);
    margin:0 auto;
    padding:0 40px;
}

.plans-header{
    text-align:center;
    max-width:640px;
    margin:0 auto 64px;
}
.plans-eyebrow{
    display:inline-block;
    font-size:13px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:var(--primary);
    margin-bottom:14px;
}
.plans-header h2{
    font-family:var(--font-display);
    font-weight:600;
    font-size:clamp(30px, 3vw, 40px);
    line-height:1.2;
    color:var(--heading);
    margin-bottom:14px;
    letter-spacing:-.4px;
}
.plans-header p{
    font-size:16px;
    line-height:1.65;
    color:var(--text);
}

.plans-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:26px;
    align-items:start;
}

.plan-card{
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:36px 32px;
    transition:var(--transition);
    position:relative;
}
.plan-card:hover{
    box-shadow:var(--shadow-md);
    transform:translateY(-4px);
}

/* featured / most popular plan */
.plan-card.featured{
    background:var(--gradient-primary);
    border:none;
    padding:44px 32px 36px;
    transform:scale(1.04);
    box-shadow:var(--shadow-primary);
}
.plan-card.featured:hover{
    transform:scale(1.04) translateY(-4px);
}

.plan-badge{
    position:absolute;
    top:-14px;
    left:50%;
    transform:translateX(-50%);
    background:var(--gradient-gold);
    color:var(--white);
    font-size:12px;
    font-weight:700;
    letter-spacing:.3px;
    padding:7px 18px;
    border-radius:100px;
    white-space:nowrap;
    box-shadow:var(--shadow-sm);
}

.plan-name{
    font-family:var(--font-display);
    font-size:24px;
    font-weight:600;
    color:var(--heading);
    margin-bottom:6px;
}
.plan-card.featured .plan-name{color:var(--white);}

.plan-tag{
    font-size:13.5px;
    font-weight:600;
    color:var(--text-light);
    margin-bottom:26px;
}
.plan-card.featured .plan-tag{color:rgba(255,255,255,.78);}

.plan-detail{
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:16px 0;
    border-top:1px solid var(--border);
}
.plan-card.featured .plan-detail{border-top-color:rgba(255,255,255,.18);}
.plan-detail:first-of-type{border-top:none;padding-top:0;}

.plan-detail .k{
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;
    color:var(--text-light);
}
.plan-card.featured .plan-detail .k{color:rgba(255,255,255,.65);}

.plan-detail .v{
    font-family:var(--font-body);
    font-size:16px;
    font-weight:700;
    color:var(--heading);
}
.plan-card.featured .plan-detail .v{color:var(--white);}

.plan-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    margin-top:28px;
    padding:15px;
    border-radius:var(--radius-sm);
    font-size:15px;
    font-weight:700;
    text-decoration:none;
    border:1.5px solid var(--border);
    color:var(--primary);
    background:var(--white);
    transition:var(--transition);
}
.plan-btn:hover{
    border-color:var(--primary-light);
    box-shadow:var(--shadow-sm);
}
.plan-card.featured .plan-btn{
    background:var(--gradient-gold);
    color:var(--white);
    border:none;
    box-shadow:var(--shadow-sm);
}
.plan-card.featured .plan-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 30px rgba(212,160,23,.3);
}
.plan-btn svg{width:15px;height:15px;transition:transform var(--transition);}
.plan-btn:hover svg{transform:translateX(4px);}

@media (max-width:960px){
    .plans-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto;}
    .plan-card.featured{transform:none;}
    .plan-card.featured:hover{transform:translateY(-4px);}
}
@media (max-width:480px){
    .plans-section{padding:80px 0;}
    .plan-card{padding:28px 24px;}
    .plan-card.featured{padding:36px 24px 28px;}
}

/* Plans Section Ends Here */

/* Testimonials Section Starts Here */

.testimonial-section{
    position:relative;
    padding:120px 0;
    background:var(--section-alt);
    overflow:hidden;
}

.testimonial-glow{
    position:absolute;
    inset:-100px;
    z-index:0;
    pointer-events:none;
    filter:blur(60px);
    opacity:.4;
}
.testimonial-glow span{position:absolute;border-radius:50%;}
.testimonial-glow span:nth-child(1){
    width:360px;height:360px;
    top:-100px;right:-60px;
    background:var(--gradient-primary);
}
.testimonial-glow span:nth-child(2){
    width:300px;height:300px;
    bottom:-100px;left:-60px;
    background:var(--gradient-gold);
    opacity:.7;
}

.testimonial-section .container{
    max-width:var(--container);
    margin:0 auto;
    padding:0 40px;
    position:relative;
    z-index:2;
}

.testimonial-header{
    text-align:center;
    max-width:640px;
    margin:0 auto 56px;
}
.testimonial-eyebrow{
    display:inline-block;
    font-size:13px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:var(--primary);
    margin-bottom:14px;
}
.testimonial-header h2{
    font-family:var(--font-display);
    font-weight:600;
    font-size:clamp(30px, 3vw, 40px);
    line-height:1.2;
    color:var(--heading);
    margin-bottom:14px;
    letter-spacing:-.4px;
}
.testimonial-header p{
    font-size:16px;
    line-height:1.65;
    color:var(--text);
}

/* ---- slider ---- */
.testimonial-slider{
    position:relative;
    max-width:920px;
    margin:0 auto;
}

.testimonial-viewport{
    overflow:hidden;
    border-radius:var(--radius-xl);
}

.testimonial-track{
    display:flex;
    transition:transform .6s cubic-bezier(.16,1,.3,1);
}

.testimonial-slide{
    flex:0 0 100%;
    min-width:0;
}

.testimonial-card{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    align-items:center;
    gap:0;
    background:var(--white);
    border:1px solid var(--border);
}

.tc-media{
    position:relative;
    height:100%;
    min-height:420px;
    background:var(--gradient-primary);
    display:flex;
    align-items:flex-end;
    padding:32px;
    overflow:hidden;
}
.tc-media img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:.9;
}
.tc-media::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, transparent 40%, rgba(3,37,85,.75) 100%);
}
.tc-media-info{
    position:relative;
    z-index:2;
    color:var(--white);
}
.tc-media-info .name{
    font-family:var(--font-display);
    font-size:22px;
    font-weight:600;
    margin-bottom:3px;
}
.tc-media-info .role{
    font-size:13px;
    font-weight:500;
    opacity:.85;
}

.tc-quote-mark{
    position:absolute;
    top:20px;
    left:24px;
    z-index:2;
    font-family:var(--font-display);
    font-size:72px;
    line-height:1;
    color:rgba(255,255,255,.25);
}

.tc-body{
    padding:48px 48px 48px 40px;
}

.tc-quote{
    font-family:var(--font-display);
    font-size:20px;
    font-weight:500;
    font-style:italic;
    line-height:1.55;
    color:var(--heading);
    margin-bottom:28px;
}

.tc-stats{
    display:flex;
    gap:14px;
}
.tc-stat{
    flex:1;
    background:var(--section-alt);
    border-radius:var(--radius-md);
    padding:14px 16px;
}
.tc-stat .k{
    font-size:11.5px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.4px;
    color:var(--text-light);
    margin-bottom:4px;
}
.tc-stat .v{
    font-family:var(--font-body);
    font-size:15px;
    font-weight:700;
    color:var(--heading);
}
.tc-stat.result .v{color:#1E8E5A;}

/* ---- controls ---- */
.testimonial-controls{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:22px;
    margin-top:36px;
}

.testimonial-arrow{
    width:46px;height:46px;
    border-radius:50%;
    background:var(--white);
    border:1px solid var(--border);
    color:var(--primary);
    display:grid;
    place-items:center;
    cursor:pointer;
    transition:var(--transition);
    flex-shrink:0;
}
.testimonial-arrow:hover{
    background:var(--gradient-primary);
    color:var(--white);
    border-color:transparent;
    box-shadow:var(--shadow-primary);
}
.testimonial-arrow svg{width:18px;height:18px;}

.testimonial-dots{
    display:flex;
    align-items:center;
    gap:9px;
}
.testimonial-dot{
    width:9px;height:9px;
    border-radius:50%;
    background:var(--border);
    border:none;
    cursor:pointer;
    padding:0;
    transition:var(--transition);
}
.testimonial-dot.active{
    width:26px;
    border-radius:5px;
    background:var(--gradient-gold);
}

/* ---- responsive ---- */
@media (max-width:820px){
    .tc-media{min-height:260px;padding:24px;}
    .tc-body{padding:32px 28px;}
    .testimonial-card{grid-template-columns:1fr;}
}
@media (max-width:480px){
    .testimonial-section{padding:80px 0;}
    .tc-quote{font-size:17px;}
    .tc-stats{flex-direction:column;gap:10px;}
    .testimonial-controls{gap:16px;}
}

/* Testimonials Section Ends Here */

/* FAQ Section Starts Here */

/*====================================================
        LATEST FINANCIAL INSIGHTS
        PART 2A
====================================================*/

.blog-section{
    position:relative;
    padding:120px 0;
    background:var(--section);
    overflow:hidden;
}

/* Background */

.blog-section::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    background:rgba(3,37,85,.04);

    border-radius:50%;

    filter:blur(120px);

    top:-180px;
    right:-120px;

}

.blog-section::after{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    background:rgba(212,160,23,.06);

    border-radius:50%;

    filter:blur(120px);

    bottom:-180px;
    left:-120px;

}

/*==================================
SECTION TITLE
==================================*/

.section-title{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

    position:relative;

    z-index:2;

}

.section-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 22px;

    background:rgba(3,37,85,.08);

    color:var(--primary);

    font-size:14px;

    font-weight:700;

    border-radius:50px;

    margin-bottom:18px;

}

.section-title h2{

    font-family:var(--font-display);

    font-size:clamp(34px,5vw,54px);

    color:var(--heading);

    line-height:1.2;

    margin-bottom:22px;

}

.section-title h2 span{

    color:var(--accent);

}

.section-title p{

    font-size:17px;

    line-height:1.9;

    color:var(--text);

}

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

.blog-grid{

    display:grid;

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

    gap:30px;

    position:relative;

    z-index:2;

}

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

.blog-card{

    background:var(--white);

    border-radius:var(--radius-lg);

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

    border:1px solid var(--border);

    display:flex;

    flex-direction:column;

}

.blog-card:hover{

    transform:translateY(-12px);

    box-shadow:var(--shadow-lg);

}

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

.blog-image{

    position:relative;

    overflow:hidden;

    aspect-ratio:16/10;

}

.blog-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s ease;

}

.blog-card:hover .blog-image img{

    transform:scale(1.08);

}

/*==================================
CATEGORY
==================================*/

.blog-category{

    position:absolute;

    top:18px;

    left:18px;

    padding:8px 16px;

    border-radius:50px;

    background:var(--gradient-primary);

    color:#fff;

    font-size:13px;

    font-weight:700;

    box-shadow:var(--shadow-primary);

}

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

.blog-content{

    padding:28px;

    display:flex;

    flex-direction:column;

    flex:1;

}

.blog-meta{

    display:flex;

    gap:22px;

    flex-wrap:wrap;

    margin-bottom:18px;

}

.blog-meta span{

    display:flex;

    align-items:center;

    gap:8px;

    color:var(--text-light);

    font-size:14px;

}

.blog-meta i{

    color:var(--accent);

}

/*==================================
TITLE
==================================*/

.blog-content h3{

    font-size:24px;

    line-height:1.4;

    color:var(--heading);

    margin-bottom:16px;

    transition:var(--transition);

}

.blog-card:hover h3{

    color:var(--primary);

}

.blog-content p{

    color:var(--text);

    line-height:1.9;

    margin-bottom:28px;

    flex:1;

}

/*==================================
READ MORE
==================================*/

.read-more{

    display:inline-flex;

    align-items:center;

    gap:10px;

    font-weight:700;

    color:var(--primary);

    transition:var(--transition);

}

.read-more i{

    transition:var(--transition);

}

.read-more:hover{

    color:var(--accent);

}

.read-more:hover i{

    transform:translateX(6px);

}

/*==================================
VIEW ALL BUTTON
==================================*/

.blog-btn{

    margin-top:60px;

    text-align:center;

}

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

@media(max-width:1200px){

    .blog-grid{

        gap:24px;

    }

}

@media(max-width:992px){

    .blog-grid{

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

    }

}

@media(max-width:768px){

    .blog-section{

        padding:90px 0;

    }

    .section-title{

        margin-bottom:50px;

    }

    .blog-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:576px){

    .blog-content{

        padding:22px;

    }

    .blog-content h3{

        font-size:21px;

    }

    .blog-meta{

        gap:14px;

        font-size:13px;

    }

}

/* Part - 2 */

/*====================================================
            FAQ SECTION
            PART 2B
====================================================*/

.faq-section{
    position:relative;
    padding:120px 0;
    background:var(--section-alt);
    overflow:hidden;
}

/*==================================
BACKGROUND
==================================*/

.faq-section::before{

    content:"";

    position:absolute;

    width:550px;
    height:550px;

    background:rgba(3,37,85,.05);

    border-radius:50%;

    filter:blur(130px);

    top:-220px;
    left:-180px;

}

.faq-section::after{

    content:"";

    position:absolute;

    width:450px;
    height:450px;

    background:rgba(212,160,23,.08);

    border-radius:50%;

    filter:blur(120px);

    bottom:-150px;
    right:-120px;

}

/*==================================
WRAPPER
==================================*/

.faq-wrapper{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:420px 1fr;

    gap:60px;

    align-items:start;

}

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

.faq-content h2{

    font-family:var(--font-display);

    font-size:clamp(34px,4vw,52px);

    color:var(--heading);

    line-height:1.2;

    margin:18px 0 22px;

}

.faq-content h2 span{

    color:var(--accent);

}

.faq-content>p{

    color:var(--text);

    line-height:1.9;

    margin-bottom:35px;

}

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

.faq-contact-card{

    display:flex;

    gap:20px;

    align-items:flex-start;

    padding:30px;

    border-radius:var(--radius-lg);

    background:var(--white);

    border:1px solid var(--border);

    box-shadow:var(--shadow-md);

    transition:var(--transition);

}

.faq-contact-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

.faq-icon{

    width:70px;

    height:70px;

    flex-shrink:0;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--gradient-primary);

    color:var(--white);

    font-size:28px;

}

.faq-contact-card h4{

    font-size:22px;

    color:var(--heading);

    margin-bottom:10px;

}

.faq-contact-card p{

    color:var(--text);

    line-height:1.8;

    margin-bottom:20px;

}

/*==================================
FAQ LIST
==================================*/

.faq-list{

    display:flex;

    flex-direction:column;

    gap:18px;

}

/*==================================
FAQ ITEM
==================================*/

.faq-item{

    background:var(--white);

    border:1px solid var(--border);

    border-radius:20px;

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.faq-item:hover{

    box-shadow:var(--shadow-md);

    border-color:rgba(3,37,85,.12);

}

/*==================================
ACTIVE
==================================*/

.faq-item.active{

    border-color:rgba(3,37,85,.18);

    box-shadow:var(--shadow-lg);

}

/*==================================
QUESTION
==================================*/

.faq-question{

    width:100%;

    padding:26px 30px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    background:none;

    border:none;

    cursor:pointer;

    text-align:left;

    color:var(--heading);

    font-size:18px;

    font-weight:700;

    transition:var(--transition);

}

.faq-question:hover{

    color:var(--primary);

}

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

.faq-question i{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#EDF5FF;

    color:var(--primary);

    transition:.35s;

    flex-shrink:0;

}

.faq-item.active .faq-question i{

    transform:rotate(45deg);

    background:var(--gradient-primary);

    color:#fff;

}

/*==================================
ANSWER
==================================*/

.faq-answer{

    max-height:0;

    overflow:hidden;

    opacity:0;

    transition:
        max-height .45s ease,
        opacity .3s ease;

}

.faq-item.active .faq-answer{

    opacity:1;

}

.faq-answer p{

    padding:0 30px 28px;

    color:var(--text);

    line-height:1.9;

}

/*==================================
ACTIVE ANSWER
==================================*/

.faq-item.active .faq-answer{

    max-height:250px;

}

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

@media(max-width:1200px){

    .faq-wrapper{

        grid-template-columns:360px 1fr;

        gap:40px;

    }

}

@media(max-width:992px){

    .faq-wrapper{

        grid-template-columns:1fr;

    }

    .faq-content{

        text-align:center;

    }

    .faq-contact-card{

        max-width:550px;

        margin:auto;

    }

}

@media(max-width:768px){

    .faq-section{

        padding:90px 0;

    }

    .faq-question{

        padding:22px;

        font-size:17px;

    }

    .faq-answer p{

        padding:0 22px 22px;

    }

}

@media(max-width:576px){

    .faq-contact-card{

        flex-direction:column;

        text-align:center;

        align-items:center;

        padding:25px;

    }

    .faq-icon{

        width:60px;

        height:60px;

        font-size:24px;

    }

    .faq-question{

        padding:20px;

        font-size:16px;

    }

    .faq-question i{

        width:38px;

        height:38px;

    }

}

/* FAQ Section Ends Here */

/* CTA Section Starts Here */

/*====================================================
        INVESTMENT CTA
        PART 2A
====================================================*/

.investment-cta{

    position:relative;

    padding:140px 0;

    overflow:hidden;

    background:linear-gradient(
        135deg,
        #021A40 0%,
        var(--primary) 45%,
        var(--primary-light) 100%
    );

}

/*==================================
BACKGROUND GLOW
==================================*/

.investment-cta::before{

    content:"";

    position:absolute;

    width:700px;
    height:700px;

    top:-300px;
    left:-250px;

    border-radius:50%;

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

    filter:blur(120px);

}

.investment-cta::after{

    content:"";

    position:absolute;

    width:650px;
    height:650px;

    right:-250px;
    bottom:-250px;

    border-radius:50%;

    background:rgba(212,160,23,.12);

    filter:blur(140px);

}

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

.investment-cta .container{

    position:relative;

    z-index:5;

}

.investment-cta::selection{

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

}

/*==================================
WRAPPER
==================================*/

.cta-wrapper{

    position:relative;

    max-width:900px;

    margin:auto;

    padding:80px 60px;

    text-align:center;

    border-radius:40px;

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

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

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

    box-shadow:

        0 30px 70px rgba(0,0,0,.18),

        inset 0 1px 1px rgba(255,255,255,.18);

}

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

.cta-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    border-radius:50px;

    margin-bottom:28px;

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

    color:#fff;

    font-size:15px;

    font-weight:600;

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

}

.cta-badge i{

    color:var(--accent-light);

}

/*==================================
TITLE
==================================*/

.cta-wrapper h2{

    font-family:var(--font-display);

    font-size:clamp(42px,6vw,68px);

    line-height:1.15;

    color:#fff;

    margin-bottom:25px;

}

.cta-wrapper h2 span{

    color:var(--accent-light);

}

/*==================================
DESCRIPTION
==================================*/

.cta-wrapper p{

    max-width:760px;

    margin:0 auto;

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

    line-height:1.9;

    font-size:18px;

}

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

.cta-features{

    margin-top:45px;

    display:flex;

    justify-content:center;

    gap:35px;

    flex-wrap:wrap;

}

.cta-feature{

    display:flex;

    align-items:center;

    gap:10px;

    color:#fff;

    font-weight:600;

}

.cta-feature i{

    color:var(--accent-light);

    font-size:20px;

}

/*==================================
BUTTONS
==================================*/

.cta-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:22px;

    margin-top:50px;

}

.cta-buttons .primary-btn{

    min-width:240px;

}

.cta-buttons .secondary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    min-width:220px;

    height:58px;

    padding:0 34px;

    border-radius:60px;

    background:transparent;

    color:#fff;

    border:2px solid rgba(255,255,255,.25);

    font-weight:700;

    transition:var(--transition);

}

.cta-buttons .secondary-btn:hover{

    background:#fff;

    color:var(--primary);

    border-color:#fff;

}

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

@media(max-width:992px){

    .investment-cta{

        padding:110px 0;

    }

    .cta-wrapper{

        padding:60px 40px;

    }

}

@media(max-width:768px){

    .cta-wrapper{

        padding:50px 30px;

    }

    .cta-wrapper h2{

        font-size:44px;

    }

    .cta-wrapper p{

        font-size:16px;

    }

    .cta-features{

        flex-direction:column;

        gap:18px;

        align-items:center;

    }

    .cta-buttons{

        flex-direction:column;

    }

}

@media(max-width:576px){

    .investment-cta{

        padding:90px 0;

    }

    .cta-wrapper{

        padding:40px 25px;

        border-radius:30px;

    }

    .cta-wrapper h2{

        font-size:36px;

    }

    .cta-buttons .primary-btn,
    .cta-buttons .secondary-btn{

        width:100%;

        min-width:100%;

    }

}

/* Part - 2 */

/*====================================================
        INVESTMENT CTA
        PART 2B
====================================================*/

/*==================================
FLOATING SHAPES
==================================*/

.cta-bg-shape{

    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    pointer-events:none;

    animation:floatBlob 14s ease-in-out infinite;

}

.shape-1{

    width:260px;
    height:260px;

    top:8%;
    left:8%;

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

}

.shape-2{

    width:340px;
    height:340px;

    bottom:8%;
    right:10%;

    background:rgba(212,160,23,.16);

    animation-delay:4s;

}

.shape-3{

    width:180px;
    height:180px;

    top:40%;
    right:18%;

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

    animation-delay:8s;

}

@keyframes floatBlob{

    0%{

        transform:translate(0,0);

    }

    25%{

        transform:translate(40px,-30px);

    }

    50%{

        transform:translate(-20px,35px);

    }

    75%{

        transform:translate(25px,15px);

    }

    100%{

        transform:translate(0,0);

    }

}

/*==================================
FLOATING FINANCE ICONS
==================================*/

.cta-floating-icons{

    position:absolute;

    inset:0;

    pointer-events:none;

    overflow:hidden;

}

.cta-floating-icons span{

    position:absolute;

    width:70px;

    height:70px;

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

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

    backdrop-filter:blur(12px);

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

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

    font-size:28px;

    animation:financeFloat 10s ease-in-out infinite;

}

/* Individual Positions */

.cta-floating-icons span:nth-child(1){

    top:14%;
    left:6%;

}

.cta-floating-icons span:nth-child(2){

    top:20%;
    right:10%;

    animation-delay:2s;

}

.cta-floating-icons span:nth-child(3){

    bottom:18%;
    left:12%;

    animation-delay:4s;

}

.cta-floating-icons span:nth-child(4){

    bottom:12%;
    right:14%;

    animation-delay:6s;

}

.cta-floating-icons span:nth-child(5){

    top:48%;
    left:88%;

    animation-delay:8s;

}

@keyframes financeFloat{

    0%{

        transform:translateY(0) rotate(0);

    }

    50%{

        transform:translateY(-20px) rotate(6deg);

    }

    100%{

        transform:translateY(0) rotate(0);

    }

}

/*==================================
GLASS SHINE
==================================*/

.cta-wrapper{

    overflow:hidden;

}

.cta-wrapper::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-60%;

    width:40%;

    height:320%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.18),

        transparent

    );

    transform:rotate(28deg);

    animation:glassShine 8s linear infinite;

}

@keyframes glassShine{

    from{

        left:-70%;

    }

    to{

        left:160%;

    }

}

/*==================================
BUTTON SHINE
==================================*/

.cta-buttons a{

    position:relative;

    overflow:hidden;

}

.cta-buttons a::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:.8s;

}

.cta-buttons a:hover::before{

    left:170%;

}

/*==================================
BUTTON HOVER
==================================*/

.cta-buttons .primary-btn:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 45px rgba(0,0,0,.25);

}

.cta-buttons .secondary-btn:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 45px rgba(255,255,255,.15);

}

/*==================================
FEATURE HOVER
==================================*/

.cta-feature{

    transition:var(--transition);

}

.cta-feature:hover{

    transform:translateY(-4px);

}

.cta-feature i{

    transition:var(--transition);

}

.cta-feature:hover i{

    color:#FFD86B;

    transform:scale(1.2);

}

/*==================================
BADGE HOVER
==================================*/

.cta-badge{

    transition:var(--transition);

}

.cta-badge:hover{

    transform:translateY(-3px);

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

}

/*==================================
TITLE ANIMATION
==================================*/

.cta-wrapper h2 span{

    position:relative;

}

.cta-wrapper h2 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:4px;

    border-radius:10px;

    background:var(--gradient-gold);

    opacity:.75;

}

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

@media(max-width:992px){

    .cta-floating-icons span{

        width:58px;

        height:58px;

        font-size:22px;

    }

}

@media(max-width:768px){

    .cta-floating-icons{

        display:none;

    }

    .shape-1,
    .shape-2,
    .shape-3{

        opacity:.45;

    }

    .cta-wrapper::before{

        animation-duration:12s;

    }

}

/*==================================
RIPPLE EFFECT
==================================*/

.cta-buttons a{

    position:relative;

    overflow:hidden;

}

.btn-ripple{

    position:absolute;

    border-radius:50%;

    transform:scale(0);

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

    animation:ctaRipple .7s linear;

    pointer-events:none;

}

@keyframes ctaRipple{

    to{

        transform:scale(4);

        opacity:0;

    }

}

/*==================================
SCROLL REVEAL
==================================*/

.cta-wrapper{

    opacity:0;

    transform:translateY(60px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.cta-wrapper.cta-visible{

    opacity:1;

    transform:translateY(0);

}

/* CTA Section Ends Here */

/* CTA Form Section Starts Here */

/*====================================================
            CONTACT PREVIEW
            PART 2A
====================================================*/

.contact-preview{

    position:relative;

    padding:120px 0;

    background:var(--section);

    overflow:hidden;

}

/*==================================
BACKGROUND GLOW
==================================*/

.contact-preview::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    top:-180px;
    left:-150px;

    border-radius:50%;

    background:rgba(3,37,85,.05);

    filter:blur(120px);

}

.contact-preview::after{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    right:-120px;
    bottom:-150px;

    border-radius:50%;

    background:rgba(212,160,23,.08);

    filter:blur(120px);

}

/*==================================
LAYOUT
==================================*/

.contact-wrapper{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:420px 1fr;

    gap:50px;

    align-items:start;

}

/*==================================
LEFT SIDE
==================================*/

.contact-info{

    display:flex;

    flex-direction:column;

    gap:22px;

}

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

.contact-card{

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:28px;

    background:var(--white);

    border:1px solid var(--border);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.contact-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

.contact-icon{

    width:65px;

    height:65px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:var(--gradient-primary);

    color:#fff;

    font-size:24px;

}

.contact-card h4{

    color:var(--heading);

    font-size:20px;

    margin-bottom:8px;

}

.contact-card p{

    color:var(--text);

    line-height:1.8;

}

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

.contact-trust{

    margin-top:10px;

    padding:35px;

    border-radius:var(--radius-lg);

    background:var(--gradient-primary);

    color:#fff;

    box-shadow:var(--shadow-primary);

}

.contact-trust h3{

    font-family:var(--font-display);

    font-size:28px;

    margin-bottom:22px;

}

.contact-trust ul{

    list-style:none;

    padding:0;

    margin:0;

}

.contact-trust li{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin-bottom:16px;

    line-height:1.7;

}

.contact-trust li:last-child{

    margin-bottom:0;

}

.contact-trust i{

    color:var(--accent-light);

    margin-top:3px;

}

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

.contact-form-wrapper{

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

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

    border-radius:30px;

    padding:45px;

    box-shadow:var(--shadow-lg);

}

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

.form-header{

    margin-bottom:35px;

}

.form-header span{

    display:inline-block;

    padding:10px 18px;

    border-radius:50px;

    background:rgba(3,37,85,.08);

    color:var(--primary);

    font-weight:700;

    font-size:14px;

    margin-bottom:18px;

}

.form-header h3{

    font-family:var(--font-display);

    font-size:36px;

    color:var(--heading);

}

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

.contact-form{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.form-group{

    width:100%;

}

.contact-form input,
.contact-form select,
.contact-form textarea{

    width:100%;

    padding:18px 22px;

    border:1px solid var(--border);

    border-radius:16px;

    background:#fff;

    color:var(--heading);

    font-size:16px;

    transition:var(--transition);

    outline:none;

    resize:none;

    font-family:var(--font-body);

}

.contact-form textarea{

    min-height:170px;

}

.contact-form select{

    cursor:pointer;

}

/*==================================
BUTTON
==================================*/

.contact-form .primary-btn{

    width:100%;

    justify-content:center;

    margin-top:8px;

}

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

@media(max-width:1100px){

    .contact-wrapper{

        grid-template-columns:360px 1fr;

        gap:35px;

    }

}

@media(max-width:992px){

    .contact-wrapper{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .contact-preview{

        padding:90px 0;

    }

    .contact-form-wrapper{

        padding:35px 28px;

    }

    .form-header h3{

        font-size:30px;

    }

}

@media(max-width:576px){

    .contact-card{

        padding:22px;

    }

    .contact-icon{

        width:55px;

        height:55px;

        font-size:20px;

    }

    .contact-form-wrapper{

        padding:25px;

        border-radius:22px;

    }

    .contact-trust{

        padding:28px;

    }

}

/* Part - 2 */

/*====================================================
            CONTACT PREVIEW
            PART 2B
====================================================*/

/*==================================
FLOATING BACKGROUND SHAPES
==================================*/

.contact-preview .shape{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

    filter:blur(80px);

    animation:contactFloat 14s ease-in-out infinite;

}

.contact-preview .shape-1{

    width:220px;
    height:220px;

    top:10%;
    left:8%;

    background:rgba(3,37,85,.06);

}

.contact-preview .shape-2{

    width:280px;
    height:280px;

    bottom:8%;
    right:5%;

    background:rgba(212,160,23,.08);

    animation-delay:5s;

}

@keyframes contactFloat{

    0%{

        transform:translate(0,0);

    }

    25%{

        transform:translate(30px,-20px);

    }

    50%{

        transform:translate(-15px,25px);

    }

    75%{

        transform:translate(20px,12px);

    }

    100%{

        transform:translate(0,0);

    }

}

/*==================================
FORM GLASS SHINE
==================================*/

.contact-form-wrapper{

    position:relative;

    overflow:hidden;

}

.contact-form-wrapper::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-70%;

    width:40%;

    height:320%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.28),

        transparent

    );

    transform:rotate(25deg);

    animation:contactShine 8s linear infinite;

}

@keyframes contactShine{

    from{

        left:-70%;

    }

    to{

        left:170%;

    }

}

/*==================================
CONTACT CARD HOVER
==================================*/

.contact-card{

    position:relative;

    overflow:hidden;

}

.contact-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        135deg,

        rgba(3,37,85,.03),

        transparent 70%

    );

    opacity:0;

    transition:.4s;

}

.contact-card:hover::before{

    opacity:1;

}

.contact-card:hover .contact-icon{

    transform:rotate(-8deg) scale(1.08);

    box-shadow:0 12px 30px rgba(3,37,85,.25);

}

.contact-icon{

    transition:var(--transition);

}

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

.contact-trust{

    position:relative;

    overflow:hidden;

}

.contact-trust::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(circle at top right,
        rgba(255,255,255,.15),
        transparent 60%);

    pointer-events:none;

}

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

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{

    border-color:var(--primary);

    box-shadow:

        0 0 0 4px rgba(3,37,85,.08);

    transform:translateY(-2px);

}

/*==================================
PLACEHOLDER
==================================*/

.contact-form input::placeholder,
.contact-form textarea::placeholder{

    color:var(--text-light);

}

/*==================================
SELECT
==================================*/

.contact-form select{

    appearance:none;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23032555' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5 8 12l6.5-6.5' stroke='%23032555' stroke-width='2' fill='none'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:right 20px center;

    padding-right:55px;

}

/*==================================
BUTTON
==================================*/

.contact-form .primary-btn{

    position:relative;

    overflow:hidden;

}

.contact-form .primary-btn::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:.8s;

}

.contact-form .primary-btn:hover::before{

    left:170%;

}

.contact-form .primary-btn:hover{

    transform:translateY(-4px);

}

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

.contact-card:hover .contact-icon i{

    animation:iconPulse .8s ease;

}

@keyframes iconPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.25);

    }

    100%{

        transform:scale(1);

    }

}

/*==================================
LIST
==================================*/

.contact-trust li{

    transition:var(--transition);

}

.contact-trust li:hover{

    transform:translateX(8px);

}

.contact-trust li:hover i{

    color:#FFD76A;

}

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

.form-header span{

    transition:var(--transition);

}

.form-header span:hover{

    background:var(--primary);

    color:#fff;

}

/*==================================
INPUT HOVER
==================================*/

.contact-form input:hover,
.contact-form select:hover,
.contact-form textarea:hover{

    border-color:rgba(3,37,85,.25);

}

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

@media(max-width:768px){

    .contact-preview .shape{

        opacity:.45;

    }

    .contact-form-wrapper::before{

        animation-duration:12s;

    }

}

@media(max-width:576px){

    .contact-card:hover{

        transform:none;

    }

    .contact-card:hover .contact-icon{

        transform:none;

    }

}

/*==================================
SCROLL REVEAL
==================================*/

.contact-form-wrapper{

    opacity:0;

    transform:translateY(60px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.contact-form-wrapper.contact-visible{

    opacity:1;

    transform:translateY(0);

}

/*==================================
RIPPLE
==================================*/

.contact-form .primary-btn{

    position:relative;

    overflow:hidden;

}

.contact-ripple{

    position:absolute;

    border-radius:50%;

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

    transform:scale(0);

    animation:contactRipple .7s linear;

    pointer-events:none;

}

@keyframes contactRipple{

    to{

        transform:scale(4);

        opacity:0;

    }

}

/*==================================
INPUT ERROR
==================================*/

.input-error{

    border-color:#dc3545 !important;

    animation:shake .35s;

}

@keyframes shake{

    0%,100%{

        transform:translateX(0);

    }

    20%{

        transform:translateX(-5px);

    }

    40%{

        transform:translateX(5px);

    }

    60%{

        transform:translateX(-4px);

    }

    80%{

        transform:translateX(4px);

    }

}

/*==================================
FOCUSED GROUP
==================================*/

.form-group{

    transition:var(--transition);

}

.form-group.focused{

    transform:translateY(-2px);

}

/* CTA Form Section Ends Here */

/* Homepage Ends Here */

/* About Us Page Starts Here */

/* Hero Section Starts Here */

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

.aboutHero{

    position:relative;

    overflow:hidden;

    padding:110px 0 70px;

    background:
        linear-gradient(
        180deg,
        var(--body) 0%,
        var(--section) 100%);

}

/*=========================
BACKGROUND SHAPES
=========================*/

.aboutHeroBgShape{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    z-index:0;

}

.aboutHeroBgShapeOne{

    width:380px;

    height:380px;

    top:-120px;

    left:-120px;

    background:rgba(3,37,85,.06);

}

.aboutHeroBgShapeTwo{

    width:260px;

    height:260px;

    right:-80px;

    bottom:-80px;

    background:rgba(212,160,23,.08);

}

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

.aboutHeroContainer{

    position:relative;

    z-index:2;

    max-width:980px;

    text-align:center;

}

/*=========================
BREADCRUMB
=========================*/

.aboutHeroBreadcrumb{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin-bottom:22px;

}

.aboutHeroBreadcrumb a{

    color:var(--text);

    font-size:15px;

    transition:var(--transition);

}

.aboutHeroBreadcrumb a:hover{

    color:var(--primary);

}

.aboutHeroBreadcrumb span{

    color:var(--text-light);

}

.aboutHeroBreadcrumb p{

    margin:0;

    color:var(--primary);

    font-weight:600;

}

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

.aboutHeroBadge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 20px;

    border-radius:100px;

    background:#fff;

    border:1px solid var(--border);

    color:var(--primary);

    font-size:14px;

    font-weight:600;

    box-shadow:var(--shadow-sm);

}

.aboutHeroBadge i{

    color:var(--accent);

}

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

.aboutHeroContent{

    margin-top:28px;

}

.aboutHeroContent h1{

    margin:28px auto 24px;

    max-width:820px;

    font-family:var(--font-display);

    font-size:clamp(46px,5vw,70px);

    line-height:1.08;

    color:var(--heading);

    letter-spacing:-1px;

}

.aboutHeroContent h1 span{

    display:block;

    color:var(--primary);

}

.aboutHeroContent p{

    max-width:700px;

    margin:auto;

    font-size:18px;

    line-height:1.8;

    color:var(--text);

}

/*=========================
BUTTONS
=========================*/

.aboutHeroButtons{

    display:flex;

    justify-content:center;

    gap:18px;

    margin-top:42px;

    flex-wrap:wrap;

}

.aboutHeroBtnPrimary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:17px 34px;

    border-radius:100px;

    background:var(--gradient-primary);

    color:#fff;

    font-weight:600;

    transition:var(--transition);

    box-shadow:var(--shadow-primary);

}

.aboutHeroBtnPrimary:hover{

    transform:translateY(-5px);

}

.aboutHeroBtnSecondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:17px 34px;

    border-radius:100px;

    border:1px solid var(--border);

    background:#fff;

    color:var(--primary);

    font-weight:600;

    transition:var(--transition);

}

.aboutHeroBtnSecondary:hover{

    border-color:var(--primary);

    background:var(--section-alt);

}

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

.aboutHeroStats{

    display:grid;

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

    gap:30px;

    max-width:760px;

    margin:65px auto 55px;

}

.aboutHeroStat{

    text-align:center;

}

.aboutHeroStat h3{

    margin:0;

    font-size:44px;

    font-family:var(--font-display);

    color:var(--primary);

}

.aboutHeroStat span{

    display:block;

    margin-top:8px;

    color:var(--text-light);

    font-size:15px;

    font-weight:500;

}

/* Part - 2 */

/*==================================
        DASHBOARD
==================================*/

.aboutHeroDashboard{

    position:relative;

    max-width:920px;

    margin:auto;

    background:var(--glass);

    backdrop-filter:blur(var(--blur));

    -webkit-backdrop-filter:blur(var(--blur));

    border:1px solid var(--border);

    border-radius:var(--radius-xl);

    padding:35px;

    box-shadow:var(--shadow-lg);

    overflow:hidden;

    transition:var(--transition);

}

.aboutHeroDashboard:hover{

    transform:translateY(-6px);

    box-shadow:0 35px 70px rgba(18,38,63,.16);

}

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

.aboutHeroDashboard::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:var(--gradient-primary);

}

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

.aboutDashboardHeader{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:40px;

}

.aboutDashboardHeader small{

    display:block;

    margin-bottom:6px;

    font-size:13px;

    letter-spacing:1px;

    text-transform:uppercase;

    color:var(--text-light);

}

.aboutDashboardHeader h4{

    margin:0;

    color:var(--heading);

    font-size:30px;

    font-weight:700;

}

.aboutDashboardHeader span{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 16px;

    border-radius:50px;

    background:rgba(47,123,255,.08);

    border:1px solid rgba(47,123,255,.15);

    color:var(--primary);

    font-size:14px;

    font-weight:600;

}

.aboutDashboardHeader span i{

    font-size:9px;

    color:#18b66d;

    animation:aboutDashboardPulse 2s infinite;

}

/*==================================
CHART
==================================*/

.aboutDashboardChart{

    margin-bottom:35px;

}

.aboutDashboardChart svg{

    display:block;

    width:100%;

    height:auto;

}

.aboutDashboardChart path{

    stroke-dasharray:1200;

    stroke-dashoffset:1200;

    animation:aboutChartDraw 2.2s ease forwards;

}

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

.aboutDashboardBottom{

    display:grid;

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

    gap:20px;

}

.aboutDashboardBottom div{

    padding:22px;

    border-radius:var(--radius-md);

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

    border:1px solid var(--border);

    text-align:center;

    transition:var(--transition);

}

.aboutDashboardBottom div:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow-md);

}

.aboutDashboardBottom small{

    display:block;

    margin-bottom:8px;

    color:var(--text-light);

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:1px;

}

.aboutDashboardBottom strong{

    display:block;

    font-size:24px;

    font-weight:700;

    color:var(--primary);

}

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

@media(max-width:992px){

    .aboutHeroDashboard{

        padding:28px;

    }

}

@media(max-width:768px){

    .aboutDashboardHeader{

        flex-direction:column;

        align-items:flex-start;

    }

    .aboutDashboardBottom{

        grid-template-columns:1fr;

    }

}

@media(max-width:576px){

    .aboutHeroDashboard{

        padding:22px;

        border-radius:var(--radius-lg);

    }

    .aboutDashboardHeader h4{

        font-size:24px;

    }

}

/*==================================
ANIMATIONS
==================================*/

@keyframes aboutChartDraw{

    to{

        stroke-dashoffset:0;

    }

}

@keyframes aboutDashboardPulse{

    0%,100%{

        opacity:1;

        transform:scale(1);

    }

    50%{

        opacity:.4;

        transform:scale(1.5);

    }

}

/* Part - 3 */

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

.aboutHeroContent{

    animation:aboutHeroFadeUp .8s ease;

}

.aboutHeroStats{

    animation:aboutHeroFadeUp 1s ease;

}

.aboutHeroDashboard{

    animation:aboutHeroDashboardUp 1.1s ease;

}

/*==================================
        BUTTON SHINE
==================================*/

.aboutHeroBtnPrimary{

    position:relative;

    overflow:hidden;

}

.aboutHeroBtnPrimary::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

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

    transform:skewX(-25deg);

}

.aboutHeroBtnPrimary:hover::before{

    animation:aboutHeroButtonShine .8s linear;

}

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

.aboutHeroBadge{

    transition:var(--transition);

}

.aboutHeroBadge:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow-md);

}

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

.aboutHeroStat{

    transition:var(--transition);

}

.aboutHeroStat:hover{

    transform:translateY(-6px);

}

.aboutHeroStat h3{

    transition:var(--transition);

}

.aboutHeroStat:hover h3{

    color:var(--accent);

}

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

.aboutDashboardBottom div{

    position:relative;

    overflow:hidden;

}

.aboutDashboardBottom div::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:3px;

    background:var(--gradient-primary);

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.aboutDashboardBottom div:hover::before{

    transform:scaleX(1);

}

/*==================================
        DASHBOARD SHINE
==================================*/

.aboutHeroDashboard::after{

    content:"";

    position:absolute;

    top:0;

    left:-130%;

    width:45%;

    height:100%;

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

    transform:skewX(-20deg);

}

.aboutHeroDashboard:hover::after{

    animation:aboutDashboardShine 1s linear;

}

/*==================================
        BACKGROUND MOTION
==================================*/

.aboutHeroBgShapeOne{

    animation:aboutHeroBlobOne 12s ease-in-out infinite;

}

.aboutHeroBgShapeTwo{

    animation:aboutHeroBlobTwo 10s ease-in-out infinite;

}

/*==================================
        ANIMATIONS
==================================*/

@keyframes aboutHeroFadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes aboutHeroDashboardUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes aboutHeroButtonShine{

    from{

        left:-120%;

    }

    to{

        left:150%;

    }

}

@keyframes aboutDashboardShine{

    from{

        left:-130%;

    }

    to{

        left:140%;

    }

}

@keyframes aboutHeroBlobOne{

    0%,100%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(20px,20px);

    }

}

@keyframes aboutHeroBlobTwo{

    0%,100%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(-20px,-15px);

    }

}

/*==================================
        ACCESSIBILITY
==================================*/

.aboutHero a:focus-visible{

    outline:3px solid var(--accent);

    outline-offset:4px;

}

/*==================================
        REDUCED MOTION
==================================*/

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

    .aboutHero *{

        animation:none !important;

        transition:none !important;

    }

}

/*==================================
        JS SUPPORT
==================================*/

.aboutHeroVisible{

    opacity:1;

}

.aboutHeroButtons a{

    position:relative;

    overflow:hidden;

}

.aboutHeroRipple{

    position:absolute;

    width:20px;

    height:20px;

    border-radius:50%;

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

    transform:translate(-50%,-50%) scale(0);

    animation:aboutRipple .7s linear;

    pointer-events:none;

}

@keyframes aboutRipple{

    to{

        transform:translate(-50%,-50%) scale(18);

        opacity:0;

    }

}

/* Hero Section Ends Here */

/* Who Section Starts Here */

/*==========================================
        ABOUT INTRO SECTION
==========================================*/

.aboutIntro{

    position: relative;

    padding: 100px 0;

    background: var(--white);

    overflow: hidden;

}

.aboutIntro::before{

    content: "";

    position: absolute;

    width: 380px;

    height: 380px;

    border-radius: 50%;

    background: rgba(3,37,85,.04);

    top: -180px;

    left: -180px;

    filter: blur(30px);

}

.aboutIntro::after{

    content: "";

    position: absolute;

    width: 300px;

    height: 300px;

    border-radius: 50%;

    background: rgba(212,160,23,.05);

    right: -120px;

    bottom: -120px;

    filter: blur(35px);

}

/*==========================================
        WRAPPER
==========================================*/

.aboutIntroWrapper{

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 80px;

}

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

.aboutIntroImageArea{

    position: relative;

}

.aboutIntroImage{

    position: relative;

    overflow: hidden;

    border-radius: var(--radius-xl);

    box-shadow: var(--shadow-lg);

}

.aboutIntroImage img{

    width: 100%;

    display: block;

    aspect-ratio: 4/5;

    object-fit: cover;

    transition: .8s;

}

.aboutIntroImage:hover img{

    transform: scale(1.08);

}

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

.aboutIntroImage::before{

    /* added by me */
    display: none;

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(
        to top,
        rgba(3,37,85,.28),
        transparent 60%
    );

    z-index: 1;

}

.aboutIntroImage::after{

    content: "";

    position: absolute;

    inset: 0;

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

    border-radius: inherit;

    pointer-events: none;

}

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

.aboutIntroExperience{

    position: absolute;

    right: -20px;

    bottom: 40px;

    width: 180px;

    background: var(--white);

    border-radius: var(--radius-lg);

    padding: 28px;

    text-align: center;

    border: 1px solid var(--border);

    box-shadow: var(--shadow-lg);

    transition: var(--transition);

}

.aboutIntroExperience:hover{

    transform: translateY(-8px);

}

.aboutIntroExperience span{

    display: block;

    font-family: var(--font-display);

    font-size: 52px;

    line-height: 1;

    color: var(--primary);

}

.aboutIntroExperience p{

    margin: 12px 0 0;

    color: var(--text);

    font-size: 15px;

    font-weight: 600;

    line-height: 1.6;

}

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

.aboutIntroContent{

    position: relative;

}

.aboutIntroSubTitle{

    display: inline-flex;

    align-items: center;

    gap: 10px;

    font-size: 15px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 2px;

    color: var(--primary);

}

.aboutIntroSubTitle::before{

    content: "";

    width: 45px;

    height: 2px;

    background: var(--accent);

}

.aboutIntroContent h2{

    margin: 22px 0;

    color: var(--heading);

    font-family: var(--font-display);

    font-size: clamp(38px,4vw,56px);

    line-height: 1.18;

    max-width: 650px;

}

.aboutIntroContent p{

    margin-bottom: 22px;

    color: var(--text);

    font-size: 17px;

    line-height: 1.9;

}

/* Part - 2 */

/*==========================================
        FOUNDER SECTION
==========================================*/

.aboutIntroFounder{

    margin-top:40px;

    display:flex;

    align-items:center;

    gap:24px;

    flex-wrap:wrap;

}

.aboutIntroSignature{

    position:relative;

    width:180px;

    flex-shrink:0;

}

.aboutIntroSignature img{

    width:100%;

    display:block;

    object-fit:contain;

    transition:var(--transition);

}

.aboutIntroFounder:hover .aboutIntroSignature img{

    transform:scale(1.05);

}

.aboutIntroFounderInfo{

    position:relative;

}

.aboutIntroFounderInfo::before{

    content:"";

    position:absolute;

    left:-18px;

    top:5px;

    width:2px;

    height:60px;

    background:var(--gradient-gold);

    border-radius:50px;

}

.aboutIntroFounderInfo h4{

    margin:0 0 8px;

    color:var(--heading);

    font-family:var(--font-display);

    font-size:30px;

    line-height:1.2;

}

.aboutIntroFounderInfo span{

    display:block;

    color:var(--primary);

    font-size:16px;

    font-weight:600;

    letter-spacing:.5px;

}

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

.aboutIntroImageArea::before{

    content:"";

    position:absolute;

    width:140px;

    height:140px;

    border:2px dashed rgba(3,37,85,.10);

    border-radius:24px;

    top:-24px;

    left:-24px;

    z-index:-1;

}

.aboutIntroImageArea::after{

    /* added by me */
    display: none;

    content:"";

    position:absolute;

    width:140px;

    height:140px;

    border:2px dashed rgba(212,160,23,.18);

    border-radius:24px;

    right:-24px;

    bottom:-24px;

    z-index:-1;

}

/*==========================================
        HOVER EFFECTS
==========================================*/

.aboutIntroImage{

    transition:var(--transition);

}

.aboutIntroImage:hover{

    transform:translateY(-10px);

}

.aboutIntroContent h2{

    transition:var(--transition);

}

.aboutIntroContent:hover h2{

    color:var(--primary);

}

.aboutIntroSubTitle{

    transition:var(--transition);

}

.aboutIntroContent:hover .aboutIntroSubTitle{

    letter-spacing:3px;

}

.aboutIntroExperience{
    z-index: 10;

    overflow:hidden;

}

.aboutIntroExperience::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:60%;

    height:100%;

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

    transform:skewX(-20deg);

}

.aboutIntroExperience:hover::before{

    animation:aboutIntroShine .8s linear;

}

/*==========================================
        ANIMATIONS
==========================================*/

@keyframes aboutIntroShine{

    from{

        left:-120%;

    }

    to{

        left:150%;

    }

}

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

@media(max-width:1200px){

    .aboutIntroWrapper{

        gap:60px;

    }

}

@media(max-width:992px){

    .aboutIntro{

        padding:80px 0;

    }

    .aboutIntroWrapper{

        grid-template-columns:1fr;

        gap:70px;

    }

    .aboutIntroContent{

        order:2;

    }

    .aboutIntroImageArea{

        max-width:650px;

        margin:auto;

    }

    .aboutIntroExperience{

        right:20px;

        bottom:20px;

    }

}

@media(max-width:768px){

    .aboutIntroContent h2{

        font-size:36px;

    }

    .aboutIntroFounder{

        flex-direction:column;

        align-items:flex-start;

    }

    .aboutIntroFounderInfo::before{

        display:none;

    }

}

@media(max-width:576px){

    .aboutIntro{

        padding:70px 0;

    }

    .aboutIntroExperience{

        position:relative;

        right:auto;

        bottom:auto;

        margin:20px auto 0;

        width:100%;

        max-width:220px;

    }

    .aboutIntroContent h2{

        font-size:30px;

    }

    .aboutIntroContent p{

        font-size:16px;

        line-height:1.8;

    }

    .aboutIntroSignature{

        width:150px;

    }

}

/* Who Section Ends Here */

/* Stats Section Starts Here */

/*==========================================
        ABOUT STATISTICS
==========================================*/

.aboutStats{

    position:relative;

    padding:100px 0;

    background:var(--section);

    overflow:hidden;

}

.aboutStats::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    top:-220px;

    left:-220px;

    border-radius:50%;

    background:rgba(3,37,85,.05);

    filter:blur(70px);

}

.aboutStats::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    bottom:-180px;

    right:-180px;

    border-radius:50%;

    background:rgba(212,160,23,.06);

    filter:blur(70px);

}

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

.aboutStats .container{

    position:relative;

    z-index:2;

}

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

.aboutStatsHeading{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.aboutStatsSubTitle{

    display:inline-flex;

    align-items:center;

    gap:12px;

    color:var(--primary);

    font-size:15px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:2px;

}

.aboutStatsSubTitle::before{

    content:"";

    width:45px;

    height:2px;

    background:var(--gradient-gold);

}

.aboutStatsHeading h2{

    margin:22px 0;

    color:var(--heading);

    font-family:var(--font-display);

    font-size:clamp(36px,4vw,54px);

    line-height:1.2;

}

.aboutStatsHeading p{

    max-width:680px;

    margin:auto;

    color:var(--text);

    font-size:17px;

    line-height:1.9;

}

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

.aboutStatsGrid{

    display:grid;

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

    gap:30px;

}

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

.aboutStatsCard{

    position:relative;

    padding:40px 35px;

    border-radius:var(--radius-xl);

    background:var(--glass);

    backdrop-filter:blur(var(--blur));

    -webkit-backdrop-filter:blur(var(--blur));

    border:1px solid var(--border);

    box-shadow:var(--shadow-md);

    overflow:hidden;

    transition:var(--transition);

}

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

.aboutStatsCard::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:var(--gradient-primary);

}

/*==========================================
        BACKGROUND GLOW
==========================================*/

.aboutStatsCard::after{

    content:"";

    position:absolute;

    width:160px;

    height:160px;

    top:-80px;

    right:-80px;

    border-radius:50%;

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

    filter:blur(40px);

}

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

.aboutStatsIcon{

    position:relative;

    z-index:2;

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

    border-radius:22px;

    background:var(--gradient-primary);

    color:#fff;

    font-size:28px;

    box-shadow:var(--shadow-primary);

}

/*==========================================
        NUMBER
==========================================*/

.aboutStatsCard h3{

    position:relative;

    z-index:2;

    margin:0 0 14px;

    color:var(--heading);

    font-family:var(--font-display);

    font-size:48px;

    line-height:1;

}

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

.aboutStatsCard p{

    position:relative;

    z-index:2;

    margin:0;

    color:var(--text);

    font-size:17px;

    font-weight:600;

}

/* Part - 2 */

/*==========================================
        CARD HOVER
==========================================*/

.aboutStatsCard:hover{

    transform:translateY(-12px);

    box-shadow:var(--shadow-lg);

    border-color:rgba(3,37,85,.12);

}

.aboutStatsCard:hover .aboutStatsIcon{

    transform:rotate(-8deg) scale(1.08);

}

.aboutStatsCard:hover h3{

    color:var(--primary);

}

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

.aboutStatsIcon{

    transition:var(--transition);

    position:relative;

    overflow:hidden;

}

.aboutStatsIcon::before{

    content:"";

    position:absolute;

    width:180%;

    height:180%;

    top:-40%;

    left:-160%;

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

    transform:rotate(25deg);

}

.aboutStatsCard:hover .aboutStatsIcon::before{

    animation:aboutStatsIconShine .9s linear;

}

/*==========================================
        CARD SHINE
==========================================*/

.aboutStatsCard{

    isolation:isolate;

}

.aboutStatsCard .aboutStatsIcon,
.aboutStatsCard h3,
.aboutStatsCard p{

    position:relative;

    z-index:2;

}

.aboutStatsCard .aboutStatsGlow{

    display:none;

}

.aboutStatsCard::after{

    transition:var(--transition);

}

.aboutStatsCard:hover::after{

    transform:scale(1.35);

}

/*==========================================
        TOP BORDER ANIMATION
==========================================*/

.aboutStatsCard::before{

    transform:scaleX(.35);

    transform-origin:left;

    transition:.45s;

}

.aboutStatsCard:hover::before{

    transform:scaleX(1);

}

/*==========================================
        NUMBER
==========================================*/

.aboutStatsCard h3{

    transition:var(--transition);

}

.aboutCounter{

    display:inline-block;

}

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

.aboutStatsCard p{

    transition:var(--transition);

}

.aboutStatsCard:hover p{

    color:var(--heading);

}

/*==========================================
        ENTRANCE ANIMATION
==========================================*/

/* .aboutStatsCard{

    opacity:0;

    transform:translateY(40px);

} */
 .aboutStatsCard{

    opacity:1;

    transform:translateY(0);

}

.aboutStatsCard.aboutStatsVisible{

    opacity:1;

    transform:translateY(0);

    transition:
        opacity .7s ease,
        transform .7s ease;

}

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

@media(max-width:1200px){

    .aboutStatsGrid{

        gap:24px;

    }

}

@media(max-width:991px){

    .aboutStats{

        padding:80px 0;

    }

    .aboutStatsGrid{

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

    }

}

@media(max-width:767px){

    .aboutStatsHeading{

        margin-bottom:50px;

    }

    .aboutStatsHeading h2{

        font-size:36px;

    }

    .aboutStatsCard{

        padding:32px 26px;

    }

    .aboutStatsCard h3{

        font-size:40px;

    }

}

@media(max-width:576px){

    .aboutStats{

        padding:70px 0;

    }

    .aboutStatsGrid{

        grid-template-columns:1fr;

    }

    .aboutStatsCard{

        text-align:center;

    }

    .aboutStatsIcon{

        margin:0 auto 24px;

    }

    .aboutStatsCard h3{

        font-size:36px;

    }

    .aboutStatsHeading h2{

        font-size:30px;

    }

    .aboutStatsHeading p{

        font-size:16px;

        line-height:1.8;

    }

}

/*==========================================
        ANIMATIONS
==========================================*/

@keyframes aboutStatsIconShine{

    from{

        left:-160%;

    }

    to{

        left:180%;

    }

}

/*==========================================
        REDUCED MOTION
==========================================*/

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

    .aboutStatsCard,
    .aboutStatsCard::before,
    .aboutStatsCard::after,
    .aboutStatsIcon,
    .aboutStatsIcon::before{

        transition:none !important;

        animation:none !important;

    }

}

/* Stats Section Ends Here */

/* Journey Section Starts Here */

.aboutJourney-section{
    position:relative;
    padding:130px 0;
    background:var(--section-alt);
    overflow:hidden;
}

.aboutJourney-glow{
    position:absolute;
    inset:-100px;
    z-index:0;
    pointer-events:none;
    filter:blur(60px);
    opacity:.4;
}
.aboutJourney-glow span{position:absolute;border-radius:50%;}
.aboutJourney-glow span:nth-child(1){
    width:360px;height:360px;
    top:-110px;left:-70px;
    background:var(--gradient-primary);
}
.aboutJourney-glow span:nth-child(2){
    width:320px;height:320px;
    bottom:-120px;right:-70px;
    background:var(--gradient-gold);
    opacity:.7;
}

.aboutJourney-section .container{
    max-width:var(--container);
    margin:0 auto;
    padding:0 40px;
    position:relative;
    z-index:2;
}

.aboutJourney-header{
    text-align:center;
    max-width:640px;
    margin:0 auto 90px;
}
.aboutJourney-eyebrow{
    display:inline-block;
    font-size:13px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:var(--primary);
    margin-bottom:14px;
}
.aboutJourney-header h2{
    font-family:var(--font-display);
    font-weight:600;
    font-size:clamp(30px, 3vw, 40px);
    line-height:1.2;
    color:var(--heading);
    margin-bottom:14px;
    letter-spacing:-.4px;
}
.aboutJourney-header p{
    font-size:16px;
    line-height:1.65;
    color:var(--text);
}

/* ---- vertical tree ---- */
.aboutJourney-tree{
    position:relative;
    max-width:1000px;
    margin:0 auto;
    list-style:none;
    padding:0;
}

/* the trunk */
.aboutJourney-tree::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    width:3px;
    border-radius:3px;
    background:var(--border);
    transform:translateX(-50%);
    z-index:0;
}
.aboutJourney-trunk-fill{
    position:absolute;
    top:0;
    left:50%;
    width:3px;
    border-radius:3px;
    height:0;
    transform:translateX(-50%);
    background:linear-gradient(180deg, var(--primary), var(--primary-light), var(--accent-light), var(--accent));
    box-shadow:0 0 14px rgba(212,160,23,.35);
    z-index:1;
    transition:height 2s cubic-bezier(.16,1,.3,1);
}
.aboutJourney-trunk-fill::after{
    content:"";
    position:absolute;
    left:-3px;bottom:-3px;
    width:9px;height:9px;
    border-radius:50%;
    background:var(--white);
    box-shadow:0 0 10px 3px var(--accent-light);
    opacity:0;
}
.aboutJourney-tree.is-drawn .aboutJourney-trunk-fill::after{
    animation:aboutJourneyPulse 2.6s ease-in-out .6s infinite;
}
@keyframes aboutJourneyPulse{
    0%{opacity:0;}
    8%{opacity:1;}
    92%{opacity:1;}
    100%{opacity:0;}
}

/* ---- branch row ---- */
.aboutJourney-branch{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1fr 72px 1fr;
    align-items:center;
    min-height:150px;
}

/* node sits centered on the trunk */
.aboutJourney-node-col{
    grid-column:2;
    display:flex;
    justify-content:center;
    position:relative;
}
.aboutJourney-node{
    width:58px;height:58px;
    border-radius:50%;
    background:var(--gradient-primary);
    color:var(--white);
    display:grid;
    place-items:center;
    box-shadow:var(--shadow-primary);
    position:relative;
    border:4px solid var(--section-alt);
    z-index:2;
}
.aboutJourney-node svg{width:23px;height:23px;}
.aboutJourney-node::before{
    content:"";
    position:absolute;
    inset:-7px;
    border-radius:50%;
    border:1.5px solid var(--primary-light);
    opacity:0;
    transform:scale(.85);
    transition:opacity .4s, transform .4s;
}
.aboutJourney-branch.in-view .aboutJourney-node::before{
    opacity:.5;
    transform:scale(1);
}

.aboutJourney-year{
    position:absolute;
    top:-32px;
    left:50%;
    transform:translateX(-50%);
    font-family:var(--font-body);
    font-size:11px;
    font-weight:800;
    letter-spacing:.4px;
    color:var(--white);
    background:var(--gradient-gold);
    padding:4px 11px;
    border-radius:100px;
    white-space:nowrap;
    z-index:2;
}

/* horizontal twig connecting node to card */
.aboutJourney-twig{
    position:absolute;
    top:50%;
    height:2px;
    width:36px;
    background:var(--border);
    transform:translateY(-50%);
    z-index:1;
}

/* card slot: left column for odd, right column for even */
.aboutJourney-card-col{
    display:flex;
}
.aboutJourney-branch.left .aboutJourney-card-col{
    grid-column:1;
    justify-content:flex-end;
}
.aboutJourney-branch.left .aboutJourney-twig{
    right:calc(50% + 29px);
}
.aboutJourney-branch.right .aboutJourney-card-col{
    grid-column:3;
    justify-content:flex-start;
}
.aboutJourney-branch.right .aboutJourney-twig{
    left:calc(50% + 29px);
}

.aboutJourney-card{
    position:relative;
    width:100%;
    max-width:380px;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    padding:22px 24px 20px;
    overflow:hidden;
    opacity:0;
    transition:opacity .5s ease, box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.aboutJourney-card:hover{
    box-shadow:var(--shadow-md);
    border-color:var(--primary-light);
    transform:translateY(-4px);
}

.aboutJourney-branch.left .aboutJourney-card{
    transform-origin:right center;
    transform:scaleX(.3);
    text-align:right;
}
.aboutJourney-branch.right .aboutJourney-card{
    transform-origin:left center;
    transform:scaleX(.3);
    text-align:left;
}
.aboutJourney-branch.in-view .aboutJourney-card{
    opacity:1;
    transform:scaleX(1);
}

.aboutJourney-ghost{
    position:absolute;
    top:-14px;
    font-family:var(--font-display);
    font-size:56px;
    font-weight:600;
    color:var(--primary);
    opacity:.05;
    line-height:1;
    pointer-events:none;
    user-select:none;
}
.aboutJourney-branch.left .aboutJourney-ghost{left:0;}
.aboutJourney-branch.right .aboutJourney-ghost{right:0;}

.aboutJourney-title{
    font-family:var(--font-body);
    font-size:15.5px;
    font-weight:700;
    color:var(--heading);
    margin-bottom:8px;
    position:relative;
}
.aboutJourney-desc{
    font-size:13.5px;
    line-height:1.55;
    color:var(--text-light);
    position:relative;
}

/* ---- responsive: single-side rail ---- */
@media (max-width:820px){
    .aboutJourney-tree::before{left:27px;}
    .aboutJourney-trunk-fill{left:27px;}
    .aboutJourney-trunk-fill::after{left:-3px;}

    .aboutJourney-branch{
        grid-template-columns:56px 1fr;
        min-height:auto;
        margin-bottom:34px;
    }
    .aboutJourney-branch:last-child{margin-bottom:0;}

    .aboutJourney-node-col{
        grid-column:1;
        justify-content:center;
    }
    .aboutJourney-year{top:-30px;left:50%;}

    .aboutJourney-twig{
        display:none;
    }

    .aboutJourney-branch.left .aboutJourney-card-col,
    .aboutJourney-branch.right .aboutJourney-card-col{
        grid-column:2;
        justify-content:flex-start;
    }

    .aboutJourney-branch.left .aboutJourney-card,
    .aboutJourney-branch.right .aboutJourney-card{
        max-width:none;
        text-align:left;
        transform-origin:left center;
    }
}

@media (max-width:480px){
    .aboutJourney-section{padding:80px 0;}
    .aboutJourney-header{margin-bottom:64px;}
    .aboutJourney-node{width:50px;height:50px;}
    .aboutJourney-card{padding:18px 20px;}
}

@media (prefers-reduced-motion: reduce){
    .aboutJourney-trunk-fill,.aboutJourney-card{transition:none;}
    .aboutJourney-trunk-fill::after{animation:none;}
}

/* Journey Section Ends Here */

/* Mission Vision Section Starts Here */

.aboutMission-section{
    position:relative;
    padding:130px 0;
    background:var(--primary);
    overflow:hidden;
}

/* animated gradient backdrop so the glass cards have something to show through */
.aboutMission-bg{
    position:absolute;
    inset:0;
    z-index:0;
    background:
        radial-gradient(circle at 15% 20%, rgba(47,123,255,.45), transparent 55%),
        radial-gradient(circle at 85% 15%, rgba(212,160,23,.35), transparent 50%),
        radial-gradient(circle at 50% 90%, rgba(47,123,255,.3), transparent 55%),
        var(--gradient-primary);
}
.aboutMission-bg span{
    position:absolute;
    border-radius:50%;
    filter:blur(70px);
    opacity:.55;
}
.aboutMission-bg span:nth-child(1){
    width:420px;height:420px;
    top:-140px;left:-100px;
    background:var(--gradient-gold);
    animation:aboutMissionDrift1 15s ease-in-out infinite;
}
.aboutMission-bg span:nth-child(2){
    width:380px;height:380px;
    bottom:-160px;right:-100px;
    background:var(--primary-light);
    animation:aboutMissionDrift2 18s ease-in-out infinite;
}
@keyframes aboutMissionDrift1{
    0%,100%{transform:translate(0,0);}
    50%{transform:translate(40px,30px);}
}
@keyframes aboutMissionDrift2{
    0%,100%{transform:translate(0,0);}
    50%{transform:translate(-35px,-25px);}
}

.aboutMission-grid-pattern{
    position:absolute;
    inset:0;
    z-index:0;
    opacity:.08;
    background-image:linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
    background-size:44px 44px;
    -webkit-mask-image:radial-gradient(circle at center, #000 0%, transparent 75%);
    mask-image:radial-gradient(circle at center, #000 0%, transparent 75%);
}

.aboutMission-section .container{
    max-width:var(--container);
    margin:0 auto;
    padding:0 40px;
    position:relative;
    z-index:2;
}

.aboutMission-header{
    text-align:center;
    max-width:640px;
    margin:0 auto 64px;
}
.aboutMission-eyebrow{
    display:inline-block;
    font-size:13px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:var(--accent-light);
    margin-bottom:14px;
}
.aboutMission-header h2{
    font-family:var(--font-display);
    font-weight:600;
    font-size:clamp(30px, 3vw, 40px);
    line-height:1.2;
    color:var(--white);
    margin-bottom:14px;
    letter-spacing:-.4px;
}
.aboutMission-header p{
    font-size:16px;
    line-height:1.65;
    color:rgba(255,255,255,.75);
}

/* ---- glass cards ---- */
.aboutMission-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:28px;
}

.aboutMission-card{
    position:relative;
    background:var(--glass);
    backdrop-filter:blur(var(--blur));
    -webkit-backdrop-filter:blur(var(--blur));
    border:1px solid rgba(255,255,255,.4);
    border-radius:var(--radius-lg);
    padding:44px 34px 38px;
    text-align:center;
    overflow:hidden;
    transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease, border-color .45s ease, background .45s ease;
}

/* sheen sweep on hover */
.aboutMission-card::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:60%;
    height:100%;
    background:linear-gradient(115deg, transparent, rgba(255,255,255,.5), transparent);
    transform:skewX(-18deg);
    transition:left .8s ease;
    pointer-events:none;
}
.aboutMission-card:hover::before{
    left:130%;
}

.aboutMission-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow-lg);
    border-color:rgba(255,255,255,.7);
    background:rgba(255,255,255,.94);
}

.aboutMission-icon{
    width:84px;
    height:84px;
    border-radius:24px;
    background:var(--gradient-primary);
    color:var(--white);
    display:grid;
    place-items:center;
    margin:0 auto 26px;
    box-shadow:var(--shadow-primary);
    position:relative;
    z-index:2;
    transition:transform .45s cubic-bezier(.16,1,.3,1), border-radius .45s ease;
}
.aboutMission-icon svg{width:38px;height:38px;}
.aboutMission-card.gold .aboutMission-icon{
    background:var(--gradient-gold);
    box-shadow:0 15px 35px rgba(212,160,23,.28);
}
.aboutMission-card:hover .aboutMission-icon{
    transform:scale(1.1) rotate(-6deg);
    border-radius:50%;
}

.aboutMission-card h3{
    font-family:var(--font-display);
    font-size:23px;
    font-weight:600;
    color:var(--heading);
    margin-bottom:14px;
    position:relative;
    z-index:2;
}

.aboutMission-card p{
    font-size:14.5px;
    line-height:1.7;
    color:var(--text);
    position:relative;
    z-index:2;
}

/* Core Values gets a small tag list instead of/with the paragraph */
.aboutMission-tags{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
    margin-top:18px;
    position:relative;
    z-index:2;
}
.aboutMission-tags span{
    font-size:12px;
    font-weight:700;
    padding:6px 13px;
    border-radius:100px;
    background:rgba(212,160,23,.12);
    color:var(--accent);
}

/* ---- responsive ---- */
@media (max-width:960px){
    .aboutMission-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto;}
}
@media (max-width:480px){
    .aboutMission-section{padding:80px 0;}
    .aboutMission-card{padding:36px 26px 30px;}
    .aboutMission-icon{width:72px;height:72px;border-radius:20px;}
    .aboutMission-icon svg{width:32px;height:32px;}
}

/* Mission Vision Section Ends Here */

/* Why choose section starts here */

.aboutChoose-section{
    padding:120px 0;
    background:var(--section-alt);
}

.aboutChoose-section .container{
    max-width:var(--container);
    margin:0 auto;
    padding:0 40px;
}

.aboutChoose-header{
    text-align:center;
    max-width:640px;
    margin:0 auto 56px;
}
.aboutChoose-eyebrow{
    display:inline-block;
    font-size:13px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:var(--primary);
    margin-bottom:14px;
}
.aboutChoose-header h2{
    font-family:var(--font-display);
    font-weight:600;
    font-size:clamp(30px, 3vw, 40px);
    line-height:1.2;
    color:var(--heading);
    margin-bottom:14px;
    letter-spacing:-.4px;
}
.aboutChoose-header p{
    font-size:16px;
    line-height:1.65;
    color:var(--text);
}

/* ---- bento grid ---- */
.aboutChoose-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    grid-auto-rows:180px;
    grid-auto-flow:dense;
    gap:22px;
}

.aboutChoose-card{
    position:relative;
    display:flex;
    flex-direction:column;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:26px;
    overflow:hidden;
    transition:var(--transition);
}
.aboutChoose-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-lg);
    border-color:var(--primary-light);
}

/* size variants */
.aboutChoose-lg{
    grid-column:span 2;
    grid-row:span 2;
    padding:34px;
    background:var(--gradient-primary);
    border:none;
    color:var(--white);
}
.aboutChoose-wide{
    grid-column:span 2;
}
.aboutChoose-lg:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-primary);
    border-color:transparent;
}
.aboutChoose-lg::after{
    content:"";
    position:absolute;
    width:200px;height:200px;
    border-radius:50%;
    background:var(--gradient-gold);
    opacity:.18;
    filter:blur(40px);
    right:-50px;
    bottom:-50px;
}

.aboutChoose-icon{
    width:50px;height:50px;
    border-radius:13px;
    background:rgba(0,86,214,.08);
    color:var(--primary);
    display:grid;
    place-items:center;
    margin-bottom:auto;
    flex-shrink:0;
}
.aboutChoose-icon svg{width:22px;height:22px;}
.aboutChoose-card.gold .aboutChoose-icon{
    background:rgba(212,160,23,.14);
    color:var(--accent);
}
.aboutChoose-lg .aboutChoose-icon{
    background:rgba(255,255,255,.16);
    color:var(--white);
    width:58px;height:58px;
}
.aboutChoose-lg .aboutChoose-icon svg{width:26px;height:26px;}

/* .aboutChoose-body{margin-top:16px;} */
.aboutChoose-body{margin-top:12px;}
.aboutChoose-lg .aboutChoose-body{margin-top:22px;}

.aboutChoose-body h3{
    font-family:var(--font-body);
    font-size:17px;
    font-weight:700;
    color:var(--heading);
    margin-bottom:7px;
}
.aboutChoose-lg .aboutChoose-body h3{
    font-size:22px;
    color:var(--white);
}

.aboutChoose-body p{
    font-size:12.5px;
    line-height:1.55;
    color:var(--text);
    margin:0;
}
.aboutChoose-lg .aboutChoose-body p{
    font-size:14.5px;
    color:rgba(255,255,255,.82);
    max-width:320px;
}

/* ---- responsive ---- */
@media (max-width:1080px){
    .aboutChoose-grid{grid-template-columns:repeat(2, 1fr);grid-auto-rows:190px;}
    .aboutChoose-lg{grid-column:span 2;grid-row:span 1;}
    .aboutChoose-wide{grid-column:span 2;}
}
@media (max-width:640px){
    .aboutChoose-section{padding:80px 0;}
    .aboutChoose-grid{grid-template-columns:1fr;grid-auto-rows:auto;}
    .aboutChoose-lg,.aboutChoose-wide{grid-column:span 1;}
    .aboutChoose-card{padding:22px;}
}

/* Why choose section ends here */

/* Philosophy Section Starts Here */

.aboutPhilosophy-section{
    position:relative;
    padding:130px 0;
    background:var(--section);
    overflow:hidden;
}

.aboutPhilosophy-glow{
    position:absolute;
    inset:-100px;
    z-index:0;
    pointer-events:none;
    filter:blur(70px);
    opacity:.35;
}
.aboutPhilosophy-glow span{position:absolute;border-radius:50%;}
.aboutPhilosophy-glow span:nth-child(1){
    width:380px;height:380px;top:-120px;right:-80px;
    background:var(--gradient-primary);
}
.aboutPhilosophy-glow span:nth-child(2){
    width:320px;height:320px;bottom:-120px;left:-80px;
    background:var(--gradient-gold);
    opacity:.7;
}

.aboutPhilosophy-section .container{
    max-width:var(--container);
    margin:0 auto;
    padding:0 40px;
    position:relative;
    z-index:2;
}

.aboutPhilosophy-header{
    text-align:center;
    max-width:640px;
    margin:0 auto 40px;
}
.aboutPhilosophy-eyebrow{
    display:inline-block;
    font-size:13px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:var(--primary);
    margin-bottom:14px;
}
.aboutPhilosophy-header h2{
    font-family:var(--font-display);
    font-weight:600;
    font-size:clamp(30px, 3vw, 40px);
    line-height:1.2;
    color:var(--heading);
    margin-bottom:14px;
    letter-spacing:-.4px;
}
.aboutPhilosophy-header p{
    font-size:16px;
    line-height:1.65;
    color:var(--text);
}

/* ---- the road ---- */
.aboutPhilosophy-road-wrap{
    position:relative;
    width:100%;
    max-width:1100px;
    margin:0 auto;
    aspect-ratio:1200 / 320;
}

.aboutPhilosophy-road-svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.aboutPhilosophy-road-base{
    fill:none;
    stroke:var(--border);
    stroke-width:10;
    stroke-linecap:round;
}
.aboutPhilosophy-road-dashes{
    fill:none;
    stroke:var(--white);
    stroke-width:2;
    stroke-linecap:round;
    stroke-dasharray:10 12;
    opacity:.9;
}
.aboutPhilosophy-road-progress{
    fill:none;
    stroke:url(#aboutPhilosophyGradient);
    stroke-width:5;
    stroke-linecap:round;
    filter:drop-shadow(0 0 6px rgba(212,160,23,.35));
}

.aboutPhilosophy-marker{
    position:absolute;
    top:0;left:0;
    width:26px;height:26px;
    margin:-13px 0 0 -13px;
    border-radius:50%;
    background:var(--white);
    display:grid;
    place-items:center;
    box-shadow:0 0 0 4px rgba(212,160,23,.25), 0 4px 10px rgba(18,38,63,.2);
    opacity:0;
    offset-rotate:0deg;
}
.aboutPhilosophy-marker svg{width:13px;height:13px;color:var(--accent);}
.aboutPhilosophy-road-wrap.is-drawn .aboutPhilosophy-marker{
    opacity:1;
    animation:aboutPhilosophyTravel 7s linear infinite;
}
@keyframes aboutPhilosophyTravel{
    0%{offset-distance:0%;}
    100%{offset-distance:100%;}
}

/* ---- stations ---- */
.aboutPhilosophy-station{
    position:absolute;
    transform:translate(-50%, -50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    z-index:2;
    opacity:0;
    transition:opacity .5s ease, transform .5s ease;
}
.aboutPhilosophy-station.above{flex-direction:column-reverse;}
.aboutPhilosophy-station.in-view{opacity:1;}

.aboutPhilosophy-node{
    width:58px;height:58px;
    border-radius:50%;
    background:var(--gradient-primary);
    color:var(--white);
    display:grid;
    place-items:center;
    box-shadow:var(--shadow-primary);
    border:4px solid var(--section);
    position:relative;
    z-index:2;
}
.aboutPhilosophy-node svg{width:23px;height:23px;}
.aboutPhilosophy-station.final .aboutPhilosophy-node{
    background:var(--gradient-gold);
    width:66px;height:66px;
    box-shadow:0 15px 35px rgba(212,160,23,.35);
}
.aboutPhilosophy-node::before{
    content:"";
    position:absolute;
    inset:-7px;
    border-radius:50%;
    border:1.5px solid var(--primary-light);
    opacity:0;
    transform:scale(.85);
    transition:opacity .4s, transform .4s;
}
.aboutPhilosophy-station.in-view .aboutPhilosophy-node::before{
    opacity:.5;
    transform:scale(1);
}

.aboutPhilosophy-label{
    margin:12px 0;
    text-align:center;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:12px;
    padding:8px 14px;
    box-shadow:var(--shadow-sm);
    white-space:nowrap;
}
.aboutPhilosophy-label .step-num{
    font-size:10px;
    font-weight:700;
    color:var(--accent);
    letter-spacing:.4px;
    display:block;
}
.aboutPhilosophy-label .step-title{
    font-family:var(--font-body);
    font-size:14px;
    font-weight:700;
    color:var(--heading);
}

/* ---- mobile fallback: simple vertical list ---- */
.aboutPhilosophy-mobile{
    display:none;
}

@media (max-width:860px){
    .aboutPhilosophy-road-wrap{display:none;}
    .aboutPhilosophy-mobile{
        display:flex;
        flex-direction:column;
        gap:16px;
        max-width:440px;
        margin:0 auto;
    }
    .aboutPhilosophy-mobile-item{
        display:flex;
        align-items:center;
        gap:16px;
        background:var(--white);
        border:1px solid var(--border);
        border-radius:var(--radius-md);
        padding:16px 18px;
        opacity:0;
        transform:translateX(-14px);
        transition:opacity .5s ease, transform .5s ease;
    }
    .aboutPhilosophy-mobile-item.in-view{
        opacity:1;
        transform:translateX(0);
    }
    .aboutPhilosophy-mobile-item .m-node{
        width:46px;height:46px;
        border-radius:50%;
        background:var(--gradient-primary);
        color:var(--white);
        display:grid;
        place-items:center;
        flex-shrink:0;
    }
    .aboutPhilosophy-mobile-item.final .m-node{background:var(--gradient-gold);}
    .aboutPhilosophy-mobile-item .m-node svg{width:19px;height:19px;}
    .aboutPhilosophy-mobile-item .m-title{
        font-family:var(--font-body);
        font-size:15px;
        font-weight:700;
        color:var(--heading);
    }
    .aboutPhilosophy-mobile-item .m-step{
        font-size:11px;
        font-weight:700;
        color:var(--accent);
    }
}

@media (max-width:480px){
    .aboutPhilosophy-section{padding:80px 0;}
}

@media (prefers-reduced-motion: reduce){
    .aboutPhilosophy-marker{animation:none !important; opacity:1;}
}

/* Philosophy Section Ends Here */

/* Certificates Section Starts Here */

.aboutCompliance-section{
    padding:120px 0;
    background:var(--section-alt);
}

.aboutCompliance-section .container{
    max-width:var(--container);
    margin:0 auto;
    padding:0 40px;
}

.aboutCompliance-header{
    text-align:center;
    max-width:640px;
    margin:0 auto 56px;
}
.aboutCompliance-eyebrow{
    display:inline-block;
    font-size:13px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:var(--primary);
    margin-bottom:14px;
}
.aboutCompliance-header h2{
    font-family:var(--font-display);
    font-weight:600;
    font-size:clamp(30px, 3vw, 40px);
    line-height:1.2;
    color:var(--heading);
    margin-bottom:14px;
    letter-spacing:-.4px;
}
.aboutCompliance-header p{
    font-size:16px;
    line-height:1.65;
    color:var(--text);
}

/* ---- grid ---- */
.aboutCompliance-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
}

.aboutCompliance-card{
    position:relative;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:32px 28px 28px;
    text-align:center;
    transition:var(--transition);
    overflow:hidden;
}
.aboutCompliance-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-lg);
    border-color:var(--primary-light);
}

.aboutCompliance-card::before{
    content:"";
    position:absolute;
    top:0;left:0;right:0;
    height:4px;
    background:var(--gradient-primary);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .45s ease;
}
.aboutCompliance-card.gold::before{background:var(--gradient-gold);}
.aboutCompliance-card:hover::before{transform:scaleX(1);}

.aboutCompliance-logo{
    width:76px;
    height:76px;
    border-radius:20px;
    background:var(--gradient-primary);
    color:var(--white);
    display:grid;
    place-items:center;
    margin:0 auto 20px;
    box-shadow:var(--shadow-primary);
    font-family:var(--font-body);
    font-size:16px;
    font-weight:800;
    letter-spacing:.2px;
    transition:var(--transition);
}
.aboutCompliance-card.gold .aboutCompliance-logo{
    background:var(--gradient-gold);
    box-shadow:0 15px 35px rgba(212,160,23,.28);
}
.aboutCompliance-card:hover .aboutCompliance-logo{
    transform:scale(1.08) rotate(-4deg);
}

.aboutCompliance-card h3{
    font-family:var(--font-body);
    font-size:18px;
    font-weight:700;
    color:var(--heading);
    margin-bottom:10px;
}

.aboutCompliance-card p{
    font-size:13.5px;
    line-height:1.6;
    color:var(--text);
    margin-bottom:22px;
    min-height:60px;
}

.aboutCompliance-verify{
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-size:13.5px;
    font-weight:700;
    color:var(--primary);
    background:var(--section-alt);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:10px 20px;
    text-decoration:none;
    transition:var(--transition);
}
.aboutCompliance-verify svg{width:14px;height:14px;transition:transform var(--transition);}
.aboutCompliance-verify:hover{
    background:var(--gradient-primary);
    color:var(--white);
    border-color:transparent;
    box-shadow:var(--shadow-primary);
}
.aboutCompliance-verify:hover svg{transform:translate(2px,-2px);}

/* ---- responsive ---- */
@media (max-width:900px){
    .aboutCompliance-grid{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:560px){
    .aboutCompliance-section{padding:80px 0;}
    .aboutCompliance-grid{grid-template-columns:1fr;}
    .aboutCompliance-card p{min-height:auto;}
}

/* Certificates Section Ends Here */

/* Clients Section Starts Here */

/*=========================================
        ABOUT SUCCESS SECTION
=========================================*/

.aboutSuccess{
    position:relative;
    padding:120px 0;
    background:var(--section);
    overflow:hidden;
}

.aboutSuccess::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    top:-180px;
    left:-180px;
    border-radius:50%;
    background:rgba(212,175,55,.08);
    filter:blur(90px);
}

.aboutSuccess::after{
    content:"";
    position:absolute;
    width:380px;
    height:380px;
    right:-150px;
    bottom:-150px;
    border-radius:50%;
    background:rgba(3,37,85,.08);
    filter:blur(90px);
}

.aboutSuccess .container{
    position:relative;
    z-index:2;
}

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

.aboutSuccessHeading{
    max-width:760px;
    margin:0 auto 80px;
    text-align:center;
}

.aboutSuccessPrefix{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:10px 22px;
    border-radius:50px;
    background:rgba(3,37,85,.08);
    color:var(--primary);
    font-size:14px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
}

.aboutSuccessPrefix::before,
.aboutSuccessPrefix::after{
    content:"";
    width:28px;
    height:2px;
    background:linear-gradient(to right,#D4AF37,#FFD86A);
}

.aboutSuccessHeading h2{
    margin:25px 0 18px;
    font-family:var(--heading);
    font-size:clamp(40px,5vw,60px);
    line-height:1.15;
    color:var(--primary);
}

.aboutSuccessHeading h2 span{
    display:block;
    color:#D4AF37;
}

.aboutSuccessHeading p{
    max-width:680px;
    margin:auto;
    color:var(--text);
    font-size:17px;
    line-height:1.9;
}

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

.aboutSuccessGrid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
}

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

.aboutSuccessCard{
    position:relative;
    padding:40px 35px;
    border-radius:28px;
    background:var(--glass);
    backdrop-filter:blur(var(--blur));
    -webkit-backdrop-filter:blur(var(--blur));
    border:1px solid var(--border);
    box-shadow:var(--shadow-md);
    overflow:hidden;
    transition:.4s ease;
}

.aboutSuccessCard::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        135deg,
        rgba(255,255,255,.15),
        transparent 60%
    );
    opacity:0;
    transition:.4s;
}

.aboutSuccessCard:hover{
    transform:translateY(-10px);
    box-shadow:0 30px 60px rgba(0,0,0,.12);
}

.aboutSuccessCard:hover::before{
    opacity:1;
}

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

.aboutSuccessIcon{
    width:75px;
    height:75px;
    margin:0 auto 25px;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#032555,#0B4AA2);
    color:#fff;
    font-size:30px;
    box-shadow:0 20px 40px rgba(3,37,85,.25);
}

.aboutSuccessCard h3{
    margin-bottom:35px;
    text-align:center;
    font-family:var(--heading);
    font-size:28px;
    color:var(--primary);
}

/* Part - 2 */

/*=========================================
            SUCCESS TIMELINE
=========================================*/

.aboutSuccessTimeline{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
}

/*=========================================
            STEP CARD
=========================================*/

.aboutSuccessStep{
    width:100%;
    position:relative;
    padding:18px 20px;
    border-radius:18px;
    text-align:center;
    background:rgba(3,37,85,.05);
    border:1px solid rgba(3,37,85,.08);
    transition:.35s ease;
}

.aboutSuccessStep span{
    display:block;
    font-size:16px;
    font-weight:600;
    color:var(--text);
    line-height:1.6;
}

/*=========================================
            ARROW
=========================================*/

.aboutSuccessArrow{
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#032555,#0B4AA2);
    color:#fff;
    font-size:16px;
    box-shadow:0 12px 25px rgba(3,37,85,.18);
    animation:aboutSuccessBounce 2s infinite;
}

/*=========================================
            GOAL
=========================================*/

.aboutSuccessGoal{
    width:100%;
    padding:20px;
    text-align:center;
    border-radius:18px;
    background:linear-gradient(135deg,#D4AF37,#FFD86A);
    color:#032555;
    font-size:18px;
    font-weight:700;
    box-shadow:0 18px 35px rgba(212,175,55,.30);
    transition:.35s ease;
}

/*=========================================
            HOVER EFFECTS
=========================================*/

.aboutSuccessCard:hover .aboutSuccessIcon{
    transform:rotate(-10deg) scale(1.08);
}

.aboutSuccessIcon{
    transition:.35s ease;
}

.aboutSuccessCard:hover .aboutSuccessStep{
    background:#fff;
    transform:translateY(-3px);
    box-shadow:0 12px 25px rgba(0,0,0,.08);
}

.aboutSuccessCard:hover .aboutSuccessGoal{
    transform:scale(1.03);
    box-shadow:0 22px 45px rgba(212,175,55,.40);
}

.aboutSuccessCard:hover .aboutSuccessArrow{
    background:linear-gradient(135deg,#D4AF37,#F5D76E);
    color:#032555;
}

/*=========================================
            SHINE EFFECT
=========================================*/

.aboutSuccessCard::after{
    content:"";
    position:absolute;
    top:0;
    left:-130%;
    width:70px;
    height:100%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );
    transform:skewX(-25deg);
}

.aboutSuccessCard:hover::after{
    animation:aboutSuccessShine .9s linear;
}

/* Part - 3 */

/*=========================================
            ANIMATIONS
=========================================*/

@keyframes aboutSuccessBounce{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(8px);

    }

}

@keyframes aboutSuccessShine{

    from{

        left:-130%;

    }

    to{

        left:140%;

    }

}

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

.aboutSuccessCard:nth-child(1){

    animation:aboutSuccessFloatOne 6s ease-in-out infinite;

}

.aboutSuccessCard:nth-child(2){

    animation:aboutSuccessFloatTwo 7s ease-in-out infinite;

}

.aboutSuccessCard:nth-child(3){

    animation:aboutSuccessFloatThree 8s ease-in-out infinite;

}

@keyframes aboutSuccessFloatOne{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

@keyframes aboutSuccessFloatTwo{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(10px);

    }

}

@keyframes aboutSuccessFloatThree{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}

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

@media (max-width:991px){

    .aboutSuccess{

        padding:100px 0;

    }

    .aboutSuccessGrid{

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

        gap:30px;

    }

}

@media (max-width:767px){

    .aboutSuccess{

        padding:80px 0;

    }

    .aboutSuccessHeading{

        margin-bottom:50px;

    }

    .aboutSuccessHeading h2{

        font-size:36px;

    }

    .aboutSuccessHeading h2 span{

        display:inline;

    }

    .aboutSuccessHeading p{

        font-size:16px;

    }

    .aboutSuccessGrid{

        grid-template-columns:1fr;

    }

    .aboutSuccessCard{

        padding:30px 25px;

    }

    .aboutSuccessIcon{

        width:65px;

        height:65px;

        font-size:26px;

        margin-bottom:20px;

    }

    .aboutSuccessCard h3{

        font-size:24px;

        margin-bottom:25px;

    }

    .aboutSuccessStep{

        padding:16px;

    }

    .aboutSuccessStep span{

        font-size:15px;

    }

    .aboutSuccessArrow{

        width:38px;

        height:38px;

        font-size:14px;

    }

    .aboutSuccessGoal{

        padding:18px;

        font-size:17px;

    }

}

/* Clients Section Ends Here */

/* FAQ Section Starts Here */

.aboutFaq-section{
    padding:120px 0;
    background:var(--section-alt);
}

.aboutFaq-section .container{
    max-width:900px;
    margin:0 auto;
    padding:0 40px;
}

.aboutFaq-header{
    text-align:center;
    max-width:640px;
    margin:0 auto 56px;
}
.aboutFaq-eyebrow{
    display:inline-block;
    font-size:13px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:var(--primary);
    margin-bottom:14px;
}
.aboutFaq-header h2{
    font-family:var(--font-display);
    font-weight:600;
    font-size:clamp(30px, 3vw, 40px);
    line-height:1.2;
    color:var(--heading);
    margin-bottom:14px;
    letter-spacing:-.4px;
}
.aboutFaq-header p{
    font-size:16px;
    line-height:1.65;
    color:var(--text);
}

/* ---- accordion ---- */
.aboutFaq-list{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.aboutFaq-item{
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    overflow:hidden;
    transition:border-color var(--transition), box-shadow var(--transition);
}
.aboutFaq-item.open{
    border-color:var(--primary-light);
    box-shadow:var(--shadow-md);
}

.aboutFaq-question{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    text-align:left;
    background:transparent;
    border:none;
    cursor:pointer;
    padding:22px 26px;
    font-family:var(--font-body);
}

.aboutFaq-q-left{
    display:flex;
    align-items:center;
    gap:16px;
}

.aboutFaq-num{
    font-family:var(--font-display);
    font-size:14px;
    font-weight:600;
    color:var(--text-light);
    flex-shrink:0;
    width:26px;
}
.aboutFaq-item.open .aboutFaq-num{color:var(--accent);}

.aboutFaq-q-text{
    font-size:16px;
    font-weight:700;
    color:var(--heading);
    line-height:1.4;
}

.aboutFaq-toggle{
    width:34px;height:34px;
    border-radius:50%;
    background:var(--section-alt);
    border:1px solid var(--border);
    color:var(--primary);
    display:grid;
    place-items:center;
    flex-shrink:0;
    transition:var(--transition);
}
.aboutFaq-toggle svg{
    width:14px;height:14px;
    transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.aboutFaq-item.open .aboutFaq-toggle{
    background:var(--gradient-gold);
    border-color:transparent;
    color:var(--white);
}
.aboutFaq-item.open .aboutFaq-toggle svg{
    transform:rotate(135deg);
}

.aboutFaq-panel{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .45s cubic-bezier(.16,1,.3,1);
}
.aboutFaq-item.open .aboutFaq-panel{
    grid-template-rows:1fr;
}
.aboutFaq-panel-inner{
    overflow:hidden;
}
.aboutFaq-answer{
    padding:0 26px 24px 66px;
    font-size:14.5px;
    line-height:1.7;
    color:var(--text);
    max-width:600px;
}

/* ---- responsive ---- */
@media (max-width:560px){
    .aboutFaq-section{padding:80px 0;}
    .aboutFaq-question{padding:18px 20px;}
    .aboutFaq-q-text{font-size:14.5px;}
    .aboutFaq-answer{padding:0 20px 20px 20px;}
    .aboutFaq-num{display:none;}
}

@media (prefers-reduced-motion: reduce){
    .aboutFaq-panel,.aboutFaq-toggle svg{transition:none;}
}

/* FAQ Section Ends Here */

/* CTA Section Starts Here */

/*=========================================
            ABOUT CTA SECTION
=========================================*/

.aboutCta{
    position: relative;
    padding: 140px 0;
    overflow: hidden;
    background:
        radial-gradient(circle at top left, rgba(212,175,55,.08), transparent 40%),
        radial-gradient(circle at bottom right, rgba(3,37,85,.08), transparent 45%),
        linear-gradient(135deg,#02142f,#032555,#05336f);
}

.aboutCta .container{
    position: relative;
    z-index: 5;
}

/*=========================================
                GLASS BOX
=========================================*/

.aboutCtaBox{

    position: relative;

    max-width: 980px;

    margin: auto;

    padding: 80px;

    text-align: center;

    border-radius: 32px;

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

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

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

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

    overflow: hidden;

}

/*=========================================
            SHINE EFFECT
=========================================*/

.aboutCtaBox::before{

    content:"";

    position:absolute;

    top:0;

    left:-150%;

    width:90px;

    height:100%;

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

    transform:skewX(-25deg);

}

.aboutCtaBox:hover::before{

    animation:aboutCtaShine 1.4s linear;

}

/*=========================================
                PREFIX
=========================================*/

.aboutCtaPrefix{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:10px 22px;

    border-radius:40px;

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

    color:#FFD86A;

    font-size:14px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:2px;

}

.aboutCtaPrefix::before,
.aboutCtaPrefix::after{

    content:"";

    width:26px;

    height:2px;

    background:#FFD86A;

}

/*=========================================
                TITLE
=========================================*/

.aboutCta h2{

    margin:30px 0 25px;

    font-family:var(--heading);

    font-size:clamp(40px,5vw,64px);

    line-height:1.15;

    color:#fff;

}

.aboutCta p{

    max-width:720px;

    margin:auto;

    font-size:18px;

    line-height:1.9;

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

}

/* Part - 2 */

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

.aboutCtaButtons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    margin-top:50px;

    flex-wrap:wrap;

}

.aboutCtaButtons .themeBtn{

    min-width:260px;

}

.aboutCtaButtons .themeBtn i{

    margin-right:10px;

    transition:.35s;

}

.aboutCtaButtons .themeBtn:hover i{

    transform:translateX(4px);

}

/*=========================================
            BACKGROUND GLOW
=========================================*/

.aboutCtaBlur{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    opacity:.6;

    pointer-events:none;

}

.aboutCtaBlurOne{

    width:380px;

    height:380px;

    background:#D4AF37;

    top:-150px;

    left:-120px;

    animation:aboutCtaGlowOne 8s ease-in-out infinite;

}

.aboutCtaBlurTwo{

    width:450px;

    height:450px;

    background:#0B4AA2;

    bottom:-180px;

    right:-150px;

    animation:aboutCtaGlowTwo 9s ease-in-out infinite;

}

/*=========================================
            FLOATING ICONS
=========================================*/

.aboutCtaFloat{

    position:absolute;

    width:70px;

    height:70px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

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

    color:#FFD86A;

    font-size:28px;

    z-index:2;

    pointer-events:none;

}

.aboutCtaCoin{

    top:12%;

    left:8%;

    animation:aboutCtaFloatOne 7s ease-in-out infinite;

}

.aboutCtaChart{

    top:18%;

    right:10%;

    animation:aboutCtaFloatTwo 8s ease-in-out infinite;

}

.aboutCtaPiggy{

    bottom:18%;

    left:12%;

    animation:aboutCtaFloatThree 9s ease-in-out infinite;

}

.aboutCtaWallet{

    bottom:12%;

    right:8%;

    animation:aboutCtaFloatFour 7s ease-in-out infinite;

}

/*=========================================
            HOVER EFFECT
=========================================*/

.aboutCtaBox{

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

}

.aboutCtaBox:hover{

    transform:translateY(-8px);

    border-color:rgba(255,255,255,.25);

    box-shadow:
        0 40px 100px rgba(0,0,0,.35);

}

/* Part - 3 */

/*=========================================
            ANIMATIONS
=========================================*/

@keyframes aboutCtaShine{

    0%{

        left:-150%;

    }

    100%{

        left:160%;

    }

}

/*=========================================
            BACKGROUND GLOW
=========================================*/

@keyframes aboutCtaGlowOne{

    0%{

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

    }

    50%{

        transform:translate(60px,40px) scale(1.15);

    }

    100%{

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

    }

}

@keyframes aboutCtaGlowTwo{

    0%{

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

    }

    50%{

        transform:translate(-70px,-50px) scale(1.18);

    }

    100%{

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

    }

}

/*=========================================
            FLOATING ICONS
=========================================*/

@keyframes aboutCtaFloatOne{

    0%,100%{

        transform:translateY(0) rotate(0deg);

    }

    50%{

        transform:translateY(-20px) rotate(8deg);

    }

}

@keyframes aboutCtaFloatTwo{

    0%,100%{

        transform:translateY(0) rotate(0deg);

    }

    50%{

        transform:translateY(18px) rotate(-10deg);

    }

}

@keyframes aboutCtaFloatThree{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-25px);

    }

}

@keyframes aboutCtaFloatFour{

    0%,100%{

        transform:translateY(0) rotate(0deg);

    }

    50%{

        transform:translateY(22px) rotate(10deg);

    }

}

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

@media (max-width:991px){

    .aboutCta{

        padding:100px 0;

    }

    .aboutCtaBox{

        padding:60px 40px;

    }

    .aboutCta h2{

        font-size:44px;

    }

    .aboutCta p{

        font-size:16px;

    }

    .aboutCtaFloat{

        width:58px;

        height:58px;

        font-size:22px;

    }

}

@media (max-width:767px){

    .aboutCta{

        padding:80px 0;

    }

    .aboutCtaBox{

        padding:45px 25px;

        border-radius:24px;

    }

    .aboutCtaPrefix{

        font-size:12px;

        letter-spacing:1px;

        padding:8px 18px;

    }

    .aboutCtaPrefix::before,
    .aboutCtaPrefix::after{

        width:18px;

    }

    .aboutCta h2{

        font-size:34px;

    }

    .aboutCtaButtons{

        flex-direction:column;

        gap:15px;

    }

    .aboutCtaButtons .themeBtn{

        width:100%;

        min-width:100%;

    }

    .aboutCtaFloat{

        display:none;

    }

    .aboutCtaBlurOne{

        width:260px;

        height:260px;

    }

    .aboutCtaBlurTwo{

        width:300px;

        height:300px;

    }

}

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

.aboutCtaButtons{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
    margin-top:50px;
    flex-wrap:wrap;
}

.aboutCtaButtons a{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    min-width:260px;
    height:60px;
    padding:0 35px;
    border-radius:60px;
    text-decoration:none;
    font-weight:700;
    font-size:16px;
    overflow:hidden;
    transition:.35s ease;
}

/* Primary Button */

.aboutCtaButtons .themeBtn{

    background:linear-gradient(135deg,#D4AF37,#F7D96C);

    color:#032555;

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

}

.aboutCtaButtons .themeBtn:hover{

    transform:translateY(-6px);

    box-shadow:
        0 25px 50px rgba(212,175,55,.45);

}

/* Outline Button */

.aboutCtaButtons .themeBtnOutline{

    background:transparent;

    color:#fff;

    border:2px solid rgba(255,255,255,.25);

    backdrop-filter:blur(10px);

}

.aboutCtaButtons .themeBtnOutline:hover{

    background:#fff;

    color:#032555;

    border-color:#fff;

    transform:translateY(-6px);

}

/* Icon */

.aboutCtaButtons i{

    font-size:18px;

    transition:.35s;

}

.aboutCtaButtons a:hover i{

    transform:translateX(4px);

}

/* Shine */

.aboutCtaButtons a::before{

    content:"";

    position:absolute;

    left:-130%;

    top:0;

    width:80px;

    height:100%;

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

    transform:skewX(-25deg);

}

.aboutCtaButtons a:hover::before{

    animation:aboutCtaButtonShine .8s linear;

}

@keyframes aboutCtaButtonShine{

    from{
        left:-130%;
    }

    to{
        left:140%;
    }

}

/* CTA Section Ends Here */

/* About Us Page Ends Here */

/* Service Page Starts Here */

/* Hero Section Starts Here */

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

.serviceHero{
    position:relative;
    padding:180px 0 120px;
    overflow:hidden;
    background:
        radial-gradient(circle at top left, rgba(212,175,55,.08), transparent 35%),
        radial-gradient(circle at bottom right, rgba(3,37,85,.08), transparent 40%),
        linear-gradient(135deg,#02142f,#032555,#063d82);
}

.serviceHero .container{
    position:relative;
    z-index:5;
}

/*=========================================
            BACKGROUND GLOWS
=========================================*/

.serviceHeroBlur{
    position:absolute;
    border-radius:50%;
    filter:blur(100px);
    pointer-events:none;
}

.serviceHeroBlurOne{
    width:420px;
    height:420px;
    background:rgba(212,175,55,.22);
    top:-180px;
    left:-180px;
}

.serviceHeroBlurTwo{
    width:500px;
    height:500px;
    background:rgba(3,37,85,.28);
    right:-180px;
    bottom:-180px;
}

/*=========================================
            BREADCRUMB
=========================================*/

.serviceHeroBreadcrumb{
    margin-bottom:40px;
}

.serviceHeroBreadcrumb ul{
    margin:0;
    padding:0;
    display:flex;
    align-items:center;
    gap:14px;
    list-style:none;
    flex-wrap:wrap;
}

.serviceHeroBreadcrumb li{
    color:rgba(255,255,255,.70);
    font-size:15px;
}

.serviceHeroBreadcrumb a{
    color:#fff;
    text-decoration:none;
    transition:.35s;
}

.serviceHeroBreadcrumb a:hover{
    color:#D4AF37;
}

.serviceHeroBreadcrumb i{
    color:#D4AF37;
    font-size:13px;
}

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

.serviceHeroContent{
    position:relative;
    padding:55px;
    border-radius:30px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 30px 80px rgba(0,0,0,.25);
    overflow:hidden;
}

.serviceHeroContent::before{
    content:"";
    position:absolute;
    top:0;
    left:-150%;
    width:90px;
    height:100%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );
    transform:skewX(-25deg);
}

/*=========================================
            PREFIX
=========================================*/

.serviceHeroPrefix{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:10px 24px;
    border-radius:50px;
    background:rgba(255,255,255,.10);
    color:#FFD86A;
    font-size:14px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
}

.serviceHeroPrefix::before,
.serviceHeroPrefix::after{
    content:"";
    width:28px;
    height:2px;
    background:#FFD86A;
}

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

.serviceHeroContent h1{
    margin:28px 0 24px;
    color:#fff;
    font-family:var(--heading);
    font-size:clamp(26px,4vw,56px);
    line-height:1.15;
}

.serviceHeroContent p{
    margin:0;
    max-width:640px;
    color:rgba(255,255,255,.82);
    font-size:18px;
    line-height:1.9;
}

/*=========================================
            BUTTONS
=========================================*/

.serviceHeroButtons{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
    margin-top:45px;
}

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

.serviceHeroImage{
    position:relative;
    text-align:center;
}

.serviceHeroImage img{
    width:100%;
    max-width:540px;
    animation:serviceHeroImageFloat 6s ease-in-out infinite;
    filter:drop-shadow(0 25px 50px rgba(0,0,0,.30));
}

/* Part - 2 */

/*=========================================
        HERO BUTTON STYLES
=========================================*/

.serviceHeroButtons .themeBtn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    min-width:240px;
    height:60px;
    padding:0 34px;
    border-radius:60px;
    text-decoration:none;
    font-size:16px;
    font-weight:700;
    overflow:hidden;
    transition:.4s ease;
}

/* Primary */

.serviceHeroButtons .themeBtn{

    color:#032555;

    background:linear-gradient(135deg,#D4AF37,#FFD86A);

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

}

.serviceHeroButtons .themeBtn:hover{

    transform:translateY(-6px);

    box-shadow:
        0 25px 50px rgba(212,175,55,.45);

}

/* Outline */

.serviceHeroButtons .themeBtnOutline{

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

    border:2px solid rgba(255,255,255,.18);

    color:#fff;

    backdrop-filter:blur(10px);

}

.serviceHeroButtons .themeBtnOutline:hover{

    background:#fff;

    color:#032555;

    border-color:#fff;

}

/* Shine */

.serviceHeroButtons .themeBtn::before{

    content:"";

    position:absolute;

    top:0;

    left:-140%;

    width:80px;

    height:100%;

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

    transform:skewX(-25deg);

}

.serviceHeroButtons .themeBtn:hover::before{

    animation:serviceHeroButtonShine .9s linear;

}

.serviceHeroButtons .themeBtn i{

    transition:.35s;

}

.serviceHeroButtons .themeBtn:hover i{

    transform:translateX(5px);

}

/*=========================================
            FLOATING ICONS
=========================================*/

.serviceHeroFloat{

    position:absolute;

    width:74px;

    height:74px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

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

    color:#FFD86A;

    font-size:28px;

    z-index:2;

    box-shadow:0 15px 35px rgba(0,0,0,.18);

}

.serviceHeroChart{

    top:18%;

    left:6%;

    animation:serviceHeroFloatOne 7s ease-in-out infinite;

}

.serviceHeroCoins{

    top:22%;

    right:8%;

    animation:serviceHeroFloatTwo 8s ease-in-out infinite;

}

.serviceHeroShield{

    bottom:18%;

    left:10%;

    animation:serviceHeroFloatThree 9s ease-in-out infinite;

}

.serviceHeroWallet{

    bottom:14%;

    right:12%;

    animation:serviceHeroFloatFour 8s ease-in-out infinite;

}

/*=========================================
        HOVER EFFECTS
=========================================*/

.serviceHeroContent{

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

}

.serviceHeroContent:hover{

    transform:translateY(-10px);

    border-color:rgba(255,255,255,.20);

    box-shadow:
        0 40px 100px rgba(0,0,0,.35);

}

.serviceHeroContent:hover::before{

    animation:serviceHeroShine 1.2s linear;

}

/* Part - 3 */

/*=========================================
            ANIMATIONS
=========================================*/

@keyframes serviceHeroShine{

    from{

        left:-150%;

    }

    to{

        left:150%;

    }

}

@keyframes serviceHeroButtonShine{

    from{

        left:-140%;

    }

    to{

        left:140%;

    }

}

@keyframes serviceHeroImageFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

}

@keyframes serviceHeroFloatOne{

    0%,100%{

        transform:translateY(0) rotate(0deg);

    }

    50%{

        transform:translateY(-18px) rotate(8deg);

    }

}

@keyframes serviceHeroFloatTwo{

    0%,100%{

        transform:translateY(0) rotate(0deg);

    }

    50%{

        transform:translateY(16px) rotate(-8deg);

    }

}

@keyframes serviceHeroFloatThree{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-22px);

    }

}

@keyframes serviceHeroFloatFour{

    0%,100%{

        transform:translateY(0) rotate(0deg);

    }

    50%{

        transform:translateY(20px) rotate(10deg);

    }

}

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

@media(max-width:991px){

    .serviceHeroWrapper{

        flex-direction:column;

        text-align:center;

    }

    .serviceHeroLeft,
    .serviceHeroRight{

        flex:100%;

        width:100%;

    }

    .serviceHeroButtons{

        justify-content:center;

    }

    .serviceHeroImage{

        margin-top:50px;

    }

}
/* Hero Section Ends Here */

/* Intro Section Starts Here */

/*=========================================
            SERVICE INTRO
=========================================*/

.serviceIntro{
    position:relative;
    padding:120px 0;
    background:var(--section);
    overflow:hidden;
}

.serviceIntro .container{
    max-width:1280px;
    margin:auto;
    position:relative;
    z-index:2;
}

/*=========================================
            BACKGROUND EFFECTS
=========================================*/

.serviceIntro::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    top:-180px;
    left:-180px;
    border-radius:50%;
    background:rgba(212,175,55,.08);
    filter:blur(100px);
}

.serviceIntro::after{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    right:-180px;
    bottom:-180px;
    border-radius:50%;
    background:rgba(3,37,85,.08);
    filter:blur(100px);
}

/*=========================================
            FLEX LAYOUT
=========================================*/

.serviceIntroWrapper{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:70px;
}

.serviceIntroContent{
    flex:0 0 52%;
}

.serviceIntroCards{
    flex:0 0 44%;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
}

/*=========================================
            PREFIX
=========================================*/

.serviceIntroPrefix{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:10px 22px;

    border-radius:50px;

    background:rgba(3,37,85,.08);

    color:var(--primary);

    font-size:14px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:2px;

}

.serviceIntroPrefix::before,
.serviceIntroPrefix::after{

    content:"";

    width:28px;

    height:2px;

    background:linear-gradient(to right,#D4AF37,#FFD86A);

}

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

.serviceIntroContent h2{

    margin:25px 0;

    font-family:var(--heading);

    font-size:clamp(40px,5vw,58px);

    line-height:1.15;

    color:var(--primary);

}

.serviceIntroContent h2 span{

    display:block;

    color:#D4AF37;

}

/*=========================================
            PARAGRAPHS
=========================================*/

.serviceIntroContent p{

    margin-bottom:24px;

    color:var(--text);

    font-size:17px;

    line-height:1.9;

}

.serviceIntroContent strong{

    color:var(--primary);

}

/* Part - 2 */

/*=========================================
            FEATURE CARDS
=========================================*/

.serviceIntroCard{

    position:relative;

    padding:35px 30px;

    border-radius:24px;

    background:var(--glass);

    backdrop-filter:blur(var(--blur));

    -webkit-backdrop-filter:blur(var(--blur));

    border:1px solid var(--border);

    box-shadow:var(--shadow-md);

    overflow:hidden;

    transition:.4s ease;

}

.serviceIntroCard::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.15),
        transparent 60%
    );

    opacity:0;

    transition:.4s;

}

.serviceIntroCard:hover{

    transform:translateY(-10px);

    border-color:rgba(212,175,55,.25);

    box-shadow:
        0 25px 60px rgba(0,0,0,.12);

}

.serviceIntroCard:hover::before{

    opacity:1;

}

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

.serviceIntroIcon{

    width:72px;

    height:72px;

    margin-bottom:25px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        #032555,
        #0B4AA2
    );

    color:#fff;

    font-size:28px;

    box-shadow:
        0 15px 35px rgba(3,37,85,.22);

    transition:.4s;

}

.serviceIntroCard:hover .serviceIntroIcon{

    transform:rotate(-10deg) scale(1.08);

}

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

.serviceIntroCard h3{

    margin-bottom:16px;

    color:var(--primary);

    font-family:var(--heading);

    font-size:24px;

    line-height:1.3;

}

.serviceIntroCard p{

    margin:0;

    color:var(--text);

    font-size:15px;

    line-height:1.8;

}

/*=========================================
            BUTTON
=========================================*/

.serviceIntroContent .themeBtn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    margin-top:12px;

    padding:16px 34px;

    border-radius:60px;

    background:linear-gradient(
        135deg,
        #D4AF37,
        #FFD86A
    );

    color:#032555;

    text-decoration:none;

    font-size:16px;

    font-weight:700;

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

    transition:.35s;

}

.serviceIntroContent .themeBtn:hover{

    transform:translateY(-5px);

    box-shadow:
        0 25px 50px rgba(212,175,55,.45);

}

.serviceIntroContent .themeBtn i{

    transition:.35s;

}

.serviceIntroContent .themeBtn:hover i{

    transform:translateX(4px);

}

/*=========================================
            SHINE EFFECT
=========================================*/

.serviceIntroContent .themeBtn::before{

    content:"";

    position:absolute;

    top:0;

    left:-130%;

    width:70px;

    height:100%;

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

    transform:skewX(-25deg);

}

.serviceIntroContent .themeBtn{

    position:relative;

    overflow:hidden;

}

.serviceIntroContent .themeBtn:hover::before{

    animation:serviceIntroButtonShine .8s linear;

}

/* Part - 3 */

/*=========================================
            ANIMATIONS
=========================================*/

@keyframes serviceIntroButtonShine{

    0%{
        left:-130%;
    }

    100%{
        left:130%;
    }

}

@keyframes serviceIntroFloat{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }

}

.serviceIntroCard:nth-child(1){

    animation:serviceIntroFloat 5s ease-in-out infinite;

}

.serviceIntroCard:nth-child(2){

    animation:serviceIntroFloat 5s ease-in-out infinite .6s;

}

.serviceIntroCard:nth-child(3){

    animation:serviceIntroFloat 5s ease-in-out infinite 1.2s;

}

.serviceIntroCard:nth-child(4){

    animation:serviceIntroFloat 5s ease-in-out infinite 1.8s;

}

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

@media (max-width:1100px){

    .serviceIntroWrapper{

        gap:50px;

    }

    .serviceIntroContent{

        flex:0 0 55%;

    }

    .serviceIntroCards{

        flex:0 0 45%;

        gap:20px;

    }

}

@media (max-width:991px){

    .serviceIntro{

        padding:90px 0;

    }

    .serviceIntroWrapper{

        flex-direction:column;

    }

    .serviceIntroContent,
    .serviceIntroCards{

        flex:0 0 100%;

        width:100%;

    }

    .serviceIntroContent{

        text-align:center;

    }

    .serviceIntroCards{

        margin-top:20px;

    }

    .serviceIntroContent .themeBtn{

        margin:15px auto 0;

    }

}

@media (max-width:768px){

    .serviceIntroCards{

        grid-template-columns:1fr;

    }

    .serviceIntroContent h2{

        font-size:40px;

    }

    .serviceIntroContent p{

        font-size:16px;

    }

}

@media (max-width:576px){

    .serviceIntro{

        padding:70px 0;

    }

    .serviceIntroCard{

        padding:28px 24px;

        border-radius:20px;

    }

    .serviceIntroIcon{

        width:62px;

        height:62px;

        font-size:24px;

        border-radius:18px;

    }

    .serviceIntroCard h3{

        font-size:21px;

    }

    .serviceIntroContent h2{

        font-size:34px;

    }

    .serviceIntroPrefix{

        font-size:12px;

        padding:8px 18px;

        letter-spacing:1.5px;

    }

}

/* Intro Section Ends Here */

/* Service Section Starts Here */

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

.servicesList{

    position:relative;

    padding:120px 0;

    background:var(--section);

    overflow:hidden;

}

.servicesList .container{

    max-width:1280px;

    margin:auto;

    position:relative;

    z-index:2;

}

/*=========================================
            BACKGROUND GLOW
=========================================*/

.servicesList::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    top:-180px;

    left:-180px;

    border-radius:50%;

    background:rgba(212,175,55,.08);

    filter:blur(120px);

}

.servicesList::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    bottom:-180px;

    right:-180px;

    border-radius:50%;

    background:rgba(3,37,85,.08);

    filter:blur(120px);

}

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

.servicesListHeading{

    max-width:780px;

    margin:0 auto 90px;

    text-align:center;

}

.servicesListPrefix{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:10px 22px;

    border-radius:50px;

    background:rgba(3,37,85,.08);

    color:var(--primary);

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.servicesListPrefix::before,
.servicesListPrefix::after{

    content:"";

    width:28px;

    height:2px;

    background:linear-gradient(to right,#D4AF37,#FFD86A);

}

.servicesListHeading h2{

    margin:25px 0 18px;

    font-family:var(--heading);

    font-size:clamp(40px,5vw,58px);

    line-height:1.15;

    color:var(--primary);

}

.servicesListHeading h2 span{

    display:block;

    color:#D4AF37;

}

.servicesListHeading p{

    color:var(--text);

    font-size:18px;

    line-height:1.8;

}

/*=========================================
            SERVICE ITEM
=========================================*/

.servicesItem{

    display:flex;

    align-items:center;

    gap:45px;

    margin-bottom:45px;

}

.servicesItem.reverse{

    flex-direction:row-reverse;

}

.servicesIcon{

    flex:0 0 140px;

    width:140px;

    height:140px;

    border-radius:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        #032555,
        #0B4AA2
    );

    color:#fff;

    font-size:52px;

    box-shadow:0 25px 60px rgba(3,37,85,.25);

}

.servicesContent{

    flex:1;

    position:relative;

    padding:45px;

    border-radius:30px;

    background:var(--glass);

    backdrop-filter:blur(var(--blur));

    -webkit-backdrop-filter:blur(var(--blur));

    border:1px solid var(--border);

    box-shadow:var(--shadow-md);

    overflow:hidden;

}

/* Part - 2 */

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

.servicesNumber{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:58px;

    height:58px;

    margin-bottom:22px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #D4AF37,
        #FFD86A
    );

    color:#032555;

    font-size:18px;

    font-weight:800;

    box-shadow:0 12px 30px rgba(212,175,55,.30);

}

.servicesContent h3{

    margin-bottom:18px;

    font-family:var(--heading);

    font-size:34px;

    color:var(--primary);

    line-height:1.2;

}

.servicesContent p{

    margin-bottom:28px;

    color:var(--text);

    font-size:17px;

    line-height:1.9;

}

/*=========================================
            HIGHLIGHT TAGS
=========================================*/

.servicesTags{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-bottom:35px;

}

.servicesTags span{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 18px;

    border-radius:50px;

    background:rgba(3,37,85,.08);

    border:1px solid rgba(3,37,85,.08);

    color:var(--primary);

    font-size:14px;

    font-weight:600;

    transition:.35s;

}

.servicesTags span::before{

    content:"✓";

    width:22px;

    height:22px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#D4AF37;

    color:#032555;

    font-size:12px;

    font-weight:700;

}

.servicesTags span:hover{

    transform:translateY(-4px);

    background:#032555;

    color:#fff;

}

.servicesTags span:hover::before{

    background:#FFD86A;

}

/*=========================================
            BUTTON
=========================================*/

.servicesContent .themeBtn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 34px;

    border-radius:60px;

    background:linear-gradient(
        135deg,
        #D4AF37,
        #FFD86A
    );

    color:#032555;

    text-decoration:none;

    font-size:15px;

    font-weight:700;

    transition:.35s;

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

}

.servicesContent .themeBtn:hover{

    transform:translateY(-5px);

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

}

/*=========================================
            HOVER EFFECT
=========================================*/

.servicesContent::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:120px;

    height:100%;

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

    transform:skewX(-25deg);

    transition:none;

}

.servicesItem:hover .servicesContent::before{

    animation:servicesShine .9s linear;

}

.servicesItem:hover .servicesContent{

    transform:translateY(-8px);

    border-color:rgba(212,175,55,.25);

    box-shadow:0 28px 70px rgba(0,0,0,.12);

}

.servicesItem:hover .servicesIcon{

    transform:rotate(-10deg) scale(1.08);

}

/* Part - 3 */

/*=========================================
            ANIMATIONS
=========================================*/

@keyframes servicesFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

@keyframes servicesShine{

    0%{

        left:-120%;

    }

    100%{

        left:130%;

    }

}

.servicesItem:nth-child(2){

    animation:servicesFloat 5s ease-in-out infinite;

}

.servicesItem:nth-child(3){

    animation:servicesFloat 5s ease-in-out infinite .4s;

}

.servicesItem:nth-child(4){

    animation:servicesFloat 5s ease-in-out infinite .8s;

}

.servicesItem:nth-child(5){

    animation:servicesFloat 5s ease-in-out infinite 1.2s;

}

.servicesItem:nth-child(6){

    animation:servicesFloat 5s ease-in-out infinite 1.6s;

}

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

@media (max-width:1100px){

    .servicesIcon{

        flex:0 0 120px;

        width:120px;

        height:120px;

        font-size:44px;

    }

    .servicesContent{

        padding:35px;

    }

    .servicesContent h3{

        font-size:30px;

    }

}

@media (max-width:991px){

    .servicesList{

        padding:90px 0;

    }

    .servicesItem,
    .servicesItem.reverse{

        flex-direction:column;

        text-align:center;

        gap:30px;

    }

    .servicesContent{

        width:100%;

    }

    .servicesTags{

        justify-content:center;

    }

}

@media (max-width:768px){

    .servicesListHeading{

        margin-bottom:60px;

    }

    .servicesListHeading h2{

        font-size:40px;

    }

    .servicesContent{

        padding:30px;

    }

    .servicesContent h3{

        font-size:26px;

    }

    .servicesContent p{

        font-size:16px;

    }

    .servicesTags{

        gap:10px;

    }

    .servicesTags span{

        padding:10px 16px;

        font-size:13px;

    }

}

@media (max-width:576px){

    .servicesList{

        padding:70px 0;

    }

    .servicesIcon{

        width:90px;

        height:90px;

        flex:0 0 90px;

        font-size:34px;

        border-radius:22px;

    }

    .servicesContent{

        padding:25px;

        border-radius:22px;

    }

    .servicesNumber{

        width:50px;

        height:50px;

        font-size:16px;

    }

    .servicesContent h3{

        font-size:24px;

    }

    .servicesListHeading h2{

        font-size:34px;

    }

    .servicesListHeading p{

        font-size:16px;

    }

    .servicesTags{

        flex-direction:column;

        align-items:center;

    }

    .servicesContent .themeBtn{

        width:100%;

        justify-content:center;

    }

}

/* Service Section Ends Here */

/* Why Section Starts Here */

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

.whyServices{

    position:relative;

    padding:120px 0;

    background:var(--section);

    overflow:hidden;

}

.whyServices .container{

    max-width:1300px;

    margin:auto;

    position:relative;

    z-index:2;

}

/*=========================================
            BACKGROUND GLOW
=========================================*/

.whyServices::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    top:-180px;

    left:-180px;

    border-radius:50%;

    background:rgba(212,175,55,.08);

    filter:blur(120px);

}

.whyServices::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    bottom:-180px;

    right:-180px;

    border-radius:50%;

    background:rgba(3,37,85,.08);

    filter:blur(120px);

}

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

.whyServicesHeading{

    max-width:760px;

    margin:0 auto 90px;

    text-align:center;

}

.whyServicesPrefix{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:10px 22px;

    border-radius:50px;

    background:rgba(3,37,85,.08);

    color:var(--primary);

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.whyServicesPrefix::before,
.whyServicesPrefix::after{

    content:"";

    width:28px;

    height:2px;

    background:linear-gradient(to right,#D4AF37,#FFD86A);

}

.whyServicesHeading h2{

    margin:24px 0 18px;

    font-family:var(--heading);

    font-size:clamp(40px,5vw,58px);

    line-height:1.15;

    color:var(--primary);

}

.whyServicesHeading h2 span{

    display:block;

    color:#D4AF37;

}

.whyServicesHeading p{

    color:var(--text);

    font-size:18px;

    line-height:1.8;

}

/*=========================================
            LAYOUT
=========================================*/

.whyServicesWrapper{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

}

.whyServicesGrid{

    width:100%;

    display:grid;

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

    gap:30px;

    align-items:center;

}

.whyServicesCenter{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    z-index:5;

}

/*=========================================
            CENTER CIRCLE
=========================================*/

.whyServicesCircle{

    width:260px;

    height:260px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #032555,
        #0B4AA2
    );

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:35px;

    color:#fff;

    box-shadow:
        0 30px 70px rgba(3,37,85,.30);

    border:6px solid rgba(212,175,55,.18);

}

.whyServicesCircle i{

    font-size:56px;

    color:#FFD86A;

    margin-bottom:20px;

}

.whyServicesCircle h3{

    margin-bottom:10px;

    font-family:var(--heading);

    font-size:28px;

}

.whyServicesCircle p{

    margin:0;

    font-size:15px;

    opacity:.9;

}

/* Part - 2 */

/*=========================================
            WHY SERVICE CARD
=========================================*/

.whyServicesCard{

    position:relative;

    padding:35px 30px;

    min-height:260px;

    border-radius:28px;

    background:var(--glass);

    backdrop-filter:blur(var(--blur));

    -webkit-backdrop-filter:blur(var(--blur));

    border:1px solid var(--border);

    box-shadow:var(--shadow-md);

    overflow:hidden;

    transition:.4s ease;

}

.whyServicesCard::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.15),
        transparent 60%
    );

    opacity:0;

    transition:.4s;

}

.whyServicesCard:hover{

    transform:translateY(-10px);

    border-color:rgba(212,175,55,.25);

    box-shadow:
        0 25px 60px rgba(0,0,0,.15);

}

.whyServicesCard:hover::before{

    opacity:1;

}

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

.whyServicesCard i{

    width:72px;

    height:72px;

    margin-bottom:24px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        #032555,
        #0B4AA2
    );

    color:#fff;

    font-size:30px;

    box-shadow:
        0 15px 35px rgba(3,37,85,.22);

    transition:.4s;

}

.whyServicesCard:hover i{

    transform:rotate(-10deg) scale(1.08);

}

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

.whyServicesCard h3{

    margin-bottom:16px;

    font-family:var(--heading);

    font-size:24px;

    line-height:1.3;

    color:var(--primary);

}

.whyServicesCard p{

    margin:0;

    color:var(--text);

    font-size:15px;

    line-height:1.8;

}

/*=========================================
            CENTER GLOW
=========================================*/

.whyServicesCircle{

    position:relative;

    overflow:hidden;

}

.whyServicesCircle::before{

    content:"";

    position:absolute;

    inset:-30px;

    border-radius:50%;

    background:radial-gradient(
        rgba(212,175,55,.18),
        transparent 70%
    );

    animation:whyServicesPulse 4s ease-in-out infinite;

}

.whyServicesCircle>*{

    position:relative;

    z-index:2;

}

/*=========================================
            CONNECTOR EFFECT
=========================================*/

.whyServicesCard::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:90px;

    height:100%;

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

    transform:skewX(-25deg);

}

.whyServicesCard:hover::after{

    animation:whyServicesShine .8s linear;

}

/* Part - 3 */

/*=========================================
            ANIMATIONS
=========================================*/

@keyframes whyServicesPulse{

    0%,100%{

        transform:scale(1);

        opacity:.8;

    }

    50%{

        transform:scale(1.12);

        opacity:.35;

    }

}

@keyframes whyServicesFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

@keyframes whyServicesShine{

    0%{

        left:-120%;

    }

    100%{

        left:130%;

    }

}

/* Floating Animation */

.whyServicesCard:nth-child(1){

    animation:whyServicesFloat 5s ease-in-out infinite;

}

.whyServicesCard:nth-child(2){

    animation:whyServicesFloat 5s ease-in-out infinite .5s;

}

.whyServicesCard:nth-child(3){

    animation:whyServicesFloat 5s ease-in-out infinite 1s;

}

.whyServicesCard:nth-child(4){

    animation:whyServicesFloat 5s ease-in-out infinite 1.5s;

}

.whyServicesCard:nth-child(5){

    animation:whyServicesFloat 5s ease-in-out infinite 2s;

}

.whyServicesCard:nth-child(6){

    animation:whyServicesFloat 5s ease-in-out infinite 2.5s;

}

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

@media (max-width:1200px){

    .whyServicesGrid{

        gap:25px;

    }

    .whyServicesCircle{

        width:220px;

        height:220px;

    }

    .whyServicesCircle h3{

        font-size:24px;

    }

}

@media (max-width:991px){

    .whyServices{

        padding:90px 0;

    }

    .whyServicesWrapper{

        display:block;

    }

    .whyServicesCenter{

        position:relative;

        left:auto;

        top:auto;

        transform:none;

        margin-bottom:50px;

        display:flex;

        justify-content:center;

    }

    .whyServicesGrid{

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

    }

}

@media (max-width:768px){

    .whyServicesHeading{

        margin-bottom:60px;

    }

    .whyServicesHeading h2{

        font-size:40px;

    }

    .whyServicesGrid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .whyServicesCard{

        min-height:auto;

        padding:30px;

    }

    .whyServicesCard h3{

        font-size:22px;

    }

    .whyServicesCircle{

        width:190px;

        height:190px;

        padding:25px;

    }

    .whyServicesCircle i{

        font-size:42px;

    }

    .whyServicesCircle h3{

        font-size:22px;

    }

    .whyServicesCircle p{

        font-size:14px;

    }

}

@media (max-width:576px){

    .whyServices{

        padding:70px 0;

    }

    .whyServicesHeading h2{

        font-size:34px;

    }

    .whyServicesHeading p{

        font-size:16px;

    }

    .whyServicesPrefix{

        font-size:12px;

        padding:8px 18px;

        letter-spacing:1.5px;

    }

    .whyServicesCard{

        padding:25px;

        border-radius:22px;

    }

    .whyServicesCard i{

        width:60px;

        height:60px;

        font-size:24px;

        border-radius:18px;

    }

    .whyServicesCard h3{

        font-size:20px;

    }

    .whyServicesCard p{

        font-size:15px;

    }

}

/* Why Section Ends Here */

/* Client Profile Section Starts Here */

/*=========================================
        CLIENT PROFILE SECTION
=========================================*/

.clientProfile{

    position:relative;

    padding:120px 0;

    background:var(--section);

    overflow:hidden;

}

.clientProfile .container{

    max-width:1280px;

    margin:auto;

    position:relative;

    z-index:2;

}

/*=========================================
        BACKGROUND GLOW
=========================================*/

.clientProfile::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    top:-180px;

    left:-180px;

    border-radius:50%;

    background:rgba(212,175,55,.08);

    filter:blur(120px);

}

.clientProfile::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    bottom:-180px;

    right:-180px;

    border-radius:50%;

    background:rgba(3,37,85,.08);

    filter:blur(120px);

}

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

.clientProfileHeading{

    max-width:760px;

    margin:0 auto 80px;

    text-align:center;

}

.clientProfilePrefix{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:10px 22px;

    border-radius:50px;

    background:rgba(3,37,85,.08);

    color:var(--primary);

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.clientProfilePrefix::before,
.clientProfilePrefix::after{

    content:"";

    width:28px;

    height:2px;

    background:linear-gradient(to right,#D4AF37,#FFD86A);

}

.clientProfileHeading h2{

    margin:25px 0 18px;

    font-family:var(--heading);

    font-size:clamp(40px,5vw,58px);

    line-height:1.15;

    color:var(--primary);

}

.clientProfileHeading h2 span{

    display:block;

    color:#D4AF37;

}

.clientProfileHeading p{

    color:var(--text);

    font-size:18px;

    line-height:1.8;

}

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

.clientProfileGrid{

    display:grid;

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

    gap:28px;

}

.clientProfileCard{

    position:relative;

    padding:38px;

    border-radius:28px;

    background:var(--glass);

    backdrop-filter:blur(var(--blur));

    -webkit-backdrop-filter:blur(var(--blur));

    border:1px solid var(--border);

    box-shadow:var(--shadow-md);

    overflow:hidden;

    transition:.4s ease;

}

/* Bento Sizes */

.clientProfileCard.large{

    grid-column:span 2;

    min-height:320px;

}

.clientProfileCard.wide{

    grid-column:span 2;

}

/* Part - 2 */

/*=========================================
            CLIENT PROFILE CARD
=========================================*/

.clientProfileCard::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.14),
        transparent 65%
    );

    opacity:0;

    transition:.4s;

}

.clientProfileCard:hover{

    transform:translateY(-10px);

    border-color:rgba(212,175,55,.25);

    box-shadow:
        0 25px 60px rgba(0,0,0,.14);

}

.clientProfileCard:hover::before{

    opacity:1;

}

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

.clientProfileIcon{

    width:74px;

    height:74px;

    margin-bottom:24px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        #032555,
        #0B4AA2
    );

    color:#fff;

    font-size:30px;

    box-shadow:
        0 18px 40px rgba(3,37,85,.22);

    transition:.4s;

}

.clientProfileCard:hover .clientProfileIcon{

    transform:rotate(-10deg) scale(1.08);

}

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

.clientProfileCard h3{

    margin-bottom:16px;

    font-family:var(--heading);

    font-size:28px;

    line-height:1.25;

    color:var(--primary);

}

.clientProfileCard p{

    margin:0;

    color:var(--text);

    font-size:16px;

    line-height:1.9;

}

/*=========================================
            GOLD ACCENT
=========================================*/

.clientProfileCard::after{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:100%;

    background:linear-gradient(
        to bottom,
        #D4AF37,
        #FFD86A
    );

    transform:scaleY(0);

    transform-origin:top;

    transition:.45s;

}

.clientProfileCard:hover::after{

    transform:scaleY(1);

}

/*=========================================
            LARGE CARD
=========================================*/

.clientProfileCard.large h3{

    font-size:36px;

}

.clientProfileCard.large p{

    max-width:520px;

    font-size:17px;

}

/*=========================================
            WIDE CARD
=========================================*/

.clientProfileCard.wide{

    display:flex;

    align-items:center;

    gap:28px;

}

.clientProfileCard.wide .clientProfileIcon{

    flex-shrink:0;

    margin-bottom:0;

}

.clientProfileCard.wide h3{

    margin-bottom:12px;

}

/* Part - 3 */

/*=========================================
            ANIMATIONS
=========================================*/

@keyframes clientProfileFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

@keyframes clientProfileShine{

    0%{

        left:-120%;

    }

    100%{

        left:130%;

    }

}

/* Shine Effect */

.clientProfileCard::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:90px;

    height:100%;

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

    transform:skewX(-25deg);

}

.clientProfileCard:hover::before{

    animation:clientProfileShine .8s linear;

}

/* Floating Cards */

.clientProfileCard:nth-child(1){

    animation:clientProfileFloat 5s ease-in-out infinite;

}

.clientProfileCard:nth-child(2){

    animation:clientProfileFloat 5s ease-in-out infinite .4s;

}

.clientProfileCard:nth-child(3){

    animation:clientProfileFloat 5s ease-in-out infinite .8s;

}

.clientProfileCard:nth-child(4){

    animation:clientProfileFloat 5s ease-in-out infinite 1.2s;

}

.clientProfileCard:nth-child(5){

    animation:clientProfileFloat 5s ease-in-out infinite 1.6s;

}

.clientProfileCard:nth-child(6){

    animation:clientProfileFloat 5s ease-in-out infinite 2s;

}

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

@media(max-width:1100px){

    .clientProfileGrid{

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

    }

    .clientProfileCard.large,
    .clientProfileCard.wide{

        grid-column:span 2;

    }

}

@media(max-width:991px){

    .clientProfile{

        padding:90px 0;

    }

    .clientProfileHeading{

        margin-bottom:60px;

    }

    .clientProfileCard{

        padding:32px;

    }

    .clientProfileCard.large{

        min-height:auto;

    }

}

@media(max-width:768px){

    .clientProfileGrid{

        grid-template-columns:1fr;

        gap:22px;

    }

    .clientProfileCard,
    .clientProfileCard.large,
    .clientProfileCard.wide{

        grid-column:span 1;

    }

    .clientProfileCard.wide{

        display:block;

    }

    .clientProfileCard.wide .clientProfileIcon{

        margin-bottom:22px;

    }

    .clientProfileHeading h2{

        font-size:40px;

    }

    .clientProfileCard.large h3{

        font-size:30px;

    }

}

@media(max-width:576px){

    .clientProfile{

        padding:70px 0;

    }

    .clientProfileHeading h2{

        font-size:34px;

    }

    .clientProfileHeading p{

        font-size:16px;

    }

    .clientProfilePrefix{

        font-size:12px;

        padding:8px 18px;

        letter-spacing:1.5px;

    }

    .clientProfileCard{

        padding:26px;

        border-radius:22px;

    }

    .clientProfileIcon{

        width:60px;

        height:60px;

        font-size:24px;

        border-radius:18px;

    }

    .clientProfileCard h3,
    .clientProfileCard.large h3{

        font-size:22px;

    }

    .clientProfileCard p,
    .clientProfileCard.large p{

        font-size:15px;

        max-width:100%;

    }

}

/* Client Profile Section Ends Here */

/* Success Section Starts Here */

/*=========================================
        SUCCESS HIGHLIGHT SECTION
=========================================*/

.successHighlight{

    position:relative;

    padding:120px 0;

    background:var(--section);

    overflow:hidden;

}

.successHighlight .container{

    max-width:1280px;

    margin:auto;

    position:relative;

    z-index:2;

}

/*=========================================
        BACKGROUND EFFECTS
=========================================*/

.successHighlight::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    top:-180px;

    left:-180px;

    border-radius:50%;

    background:rgba(212,175,55,.08);

    filter:blur(120px);

}

.successHighlight::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:rgba(3,37,85,.08);

    filter:blur(120px);

}

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

.successHighlightHeading{

    max-width:760px;

    margin:0 auto 80px;

    text-align:center;

}

.successHighlightPrefix{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:10px 22px;

    border-radius:50px;

    background:rgba(3,37,85,.08);

    color:var(--primary);

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.successHighlightPrefix::before,
.successHighlightPrefix::after{

    content:"";

    width:28px;

    height:2px;

    background:linear-gradient(
        to right,
        #D4AF37,
        #FFD86A
    );

}

.successHighlightHeading h2{

    margin:25px 0 18px;

    font-family:var(--heading);

    font-size:clamp(40px,5vw,58px);

    line-height:1.15;

    color:var(--primary);

}

.successHighlightHeading h2 span{

    display:block;

    color:#D4AF37;

}

.successHighlightHeading p{

    color:var(--text);

    font-size:18px;

    line-height:1.8;

}

/*=========================================
            LAYOUT
=========================================*/

.successHighlightWrapper{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

}

.successHighlightMain{

    flex:0 0 42%;

    position:relative;

    padding:55px 45px;

    border-radius:32px;

    background:var(--glass);

    backdrop-filter:blur(var(--blur));

    -webkit-backdrop-filter:blur(var(--blur));

    border:1px solid var(--border);

    box-shadow:var(--shadow-md);

    overflow:hidden;

}

.successHighlightGrid{

    flex:0 0 54%;

    display:grid;

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

    gap:24px;

}

/* Part - 2 */

/*=========================================
            MAIN HIGHLIGHT CARD
=========================================*/

.successHighlightMain::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.12),
        transparent 65%
    );

    opacity:0;

    transition:.4s;

}

.successHighlightMain:hover::before{

    opacity:1;

}

.successHighlightMain:hover{

    transform:translateY(-10px);

    border-color:rgba(212,175,55,.25);

    box-shadow:0 30px 70px rgba(0,0,0,.15);

}

.successHighlightIcon{

    width:90px;

    height:90px;

    margin-bottom:30px;

    border-radius:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        #032555,
        #0B4AA2
    );

    color:#FFD86A;

    font-size:38px;

    box-shadow:0 20px 45px rgba(3,37,85,.25);

    transition:.4s;

}

.successHighlightMain:hover .successHighlightIcon{

    transform:rotate(-10deg) scale(1.08);

}

.successHighlightMain h3{

    margin:0;

    font-family:var(--heading);

    font-size:64px;

    line-height:1;

    color:#D4AF37;

}

.successHighlightMain span{

    display:block;

    margin:14px 0 18px;

    color:var(--primary);

    font-size:26px;

    font-weight:700;

}

.successHighlightMain p{

    margin:0;

    color:var(--text);

    font-size:18px;

    line-height:1.8;

}

/*=========================================
            STAT CARDS
=========================================*/

.successHighlightCard{

    position:relative;

    padding:35px 28px;

    border-radius:24px;

    background:var(--glass);

    backdrop-filter:blur(var(--blur));

    -webkit-backdrop-filter:blur(var(--blur));

    border:1px solid var(--border);

    box-shadow:var(--shadow-md);

    text-align:center;

    overflow:hidden;

    transition:.4s ease;

}

.successHighlightCard::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.12),
        transparent 65%
    );

    opacity:0;

    transition:.4s;

}

.successHighlightCard:hover{

    transform:translateY(-10px);

    border-color:rgba(212,175,55,.25);

    box-shadow:0 25px 60px rgba(0,0,0,.15);

}

.successHighlightCard:hover::before{

    opacity:1;

}

.successHighlightCard i{

    width:70px;

    height:70px;

    margin:0 auto 22px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        #032555,
        #0B4AA2
    );

    color:#FFD86A;

    font-size:28px;

    box-shadow:0 15px 35px rgba(3,37,85,.22);

    transition:.4s;

}

.successHighlightCard:hover i{

    transform:scale(1.08) rotate(-8deg);

}

.successHighlightCard h3{

    margin-bottom:14px;

    font-family:var(--heading);

    font-size:42px;

    color:var(--primary);

    line-height:1;

}

.successHighlightCard p{

    margin:0;

    color:var(--text);

    font-size:16px;

    line-height:1.7;

}

/* Part - 3 */

/*=========================================
            ANIMATIONS
=========================================*/

@keyframes successHighlightFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

@keyframes successHighlightShine{

    0%{

        left:-120%;

    }

    100%{

        left:130%;

    }

}

/*=========================================
            SHINE EFFECT
=========================================*/

.successHighlightMain::after,
.successHighlightCard::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:90px;

    height:100%;

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

    transform:skewX(-25deg);

}

.successHighlightMain:hover::after,
.successHighlightCard:hover::after{

    animation:successHighlightShine .8s linear;

}

/*=========================================
            FLOATING EFFECT
=========================================*/

.successHighlightMain{

    animation:successHighlightFloat 5s ease-in-out infinite;

}

.successHighlightCard:nth-child(1){

    animation:successHighlightFloat 5s ease-in-out infinite .4s;

}

.successHighlightCard:nth-child(2){

    animation:successHighlightFloat 5s ease-in-out infinite .8s;

}

.successHighlightCard:nth-child(3){

    animation:successHighlightFloat 5s ease-in-out infinite 1.2s;

}

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

@media(max-width:1100px){

    .successHighlightWrapper{

        gap:30px;

    }

    .successHighlightMain{

        padding:45px 35px;

    }

    .successHighlightMain h3{

        font-size:54px;

    }

    .successHighlightGrid{

        gap:18px;

    }

    .successHighlightCard{

        padding:30px 22px;

    }

    .successHighlightCard h3{

        font-size:34px;

    }

}

@media(max-width:991px){

    .successHighlight{

        padding:90px 0;

    }

    .successHighlightWrapper{

        flex-direction:column;

    }

    .successHighlightMain,
    .successHighlightGrid{

        width:100%;

        flex:0 0 100%;

    }

    .successHighlightGrid{

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

    }

}

@media(max-width:768px){

    .successHighlightHeading{

        margin-bottom:60px;

    }

    .successHighlightHeading h2{

        font-size:40px;

    }

    .successHighlightGrid{

        grid-template-columns:1fr;

    }

    .successHighlightMain{

        text-align:center;

    }

    .successHighlightIcon{

        margin:0 auto 25px;

    }

    .successHighlightMain h3{

        font-size:46px;

    }

    .successHighlightMain span{

        font-size:22px;

    }

}

@media(max-width:576px){

    .successHighlight{

        padding:70px 0;

    }

    .successHighlightHeading h2{

        font-size:34px;

    }

    .successHighlightHeading p{

        font-size:16px;

    }

    .successHighlightPrefix{

        font-size:12px;

        padding:8px 18px;

        letter-spacing:1.5px;

    }

    .successHighlightMain{

        padding:35px 25px;

        border-radius:24px;

    }

    .successHighlightIcon{

        width:70px;

        height:70px;

        font-size:30px;

        border-radius:20px;

    }

    .successHighlightMain h3{

        font-size:38px;

    }

    .successHighlightMain span{

        font-size:20px;

    }

    .successHighlightMain p{

        font-size:15px;

    }

    .successHighlightCard{

        padding:28px 22px;

        border-radius:22px;

    }

    .successHighlightCard i{

        width:60px;

        height:60px;

        font-size:24px;

        border-radius:18px;

    }

    .successHighlightCard h3{

        font-size:32px;

    }

    .successHighlightCard p{

        font-size:15px;

    }

}

/* Success Section Ends Here */

/* FAQ Section Starts Here */

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

.servicesFaq{

    position:relative;

    padding:120px 0;

    background:var(--section);

    overflow:hidden;

}

.servicesFaq .container{

    max-width:1280px;

    margin:auto;

    position:relative;

    z-index:2;

}

/*=========================================
        BACKGROUND EFFECTS
=========================================*/

.servicesFaq::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    top:-180px;

    left:-180px;

    border-radius:50%;

    background:rgba(212,175,55,.08);

    filter:blur(120px);

}

.servicesFaq::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:rgba(3,37,85,.08);

    filter:blur(120px);

}

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

.servicesFaqHeading{

    max-width:760px;

    margin:0 auto 80px;

    text-align:center;

}

.servicesFaqPrefix{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:10px 22px;

    border-radius:50px;

    background:rgba(3,37,85,.08);

    color:var(--primary);

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.servicesFaqPrefix::before,
.servicesFaqPrefix::after{

    content:"";

    width:28px;

    height:2px;

    background:linear-gradient(
        to right,
        #D4AF37,
        #FFD86A
    );

}

.servicesFaqHeading h2{

    margin:25px 0 18px;

    font-family:var(--heading);

    font-size:clamp(40px,5vw,58px);

    line-height:1.15;

    color:var(--primary);

}

.servicesFaqHeading h2 span{

    display:block;

    color:#D4AF37;

}

.servicesFaqHeading p{

    color:var(--text);

    font-size:18px;

    line-height:1.8;

}

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

.servicesFaqGrid{

    display:grid;

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

    gap:28px;

    align-items:start;

}

/* Part - 2 */

/*=========================================
            FAQ ITEM
=========================================*/

.servicesFaqItem{

    position:relative;

    background:var(--glass);

    backdrop-filter:blur(var(--blur));

    -webkit-backdrop-filter:blur(var(--blur));

    border:1px solid var(--border);

    border-radius:26px;

    overflow:hidden;

    box-shadow:var(--shadow-md);

    transition:.4s ease;

}

.servicesFaqItem::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.10),
        transparent 65%
    );

    opacity:0;

    transition:.4s;

}

.servicesFaqItem:hover{

    transform:translateY(-8px);

    border-color:rgba(212,175,55,.25);

    box-shadow:0 25px 60px rgba(0,0,0,.15);

}

.servicesFaqItem:hover::before{

    opacity:1;

}

.servicesFaqItem.active{

    border-color:rgba(212,175,55,.35);

    box-shadow:0 25px 60px rgba(0,0,0,.18);

}

/*=========================================
            QUESTION
=========================================*/

.servicesFaqQuestion{

    width:100%;

    padding:28px 30px;

    border:none;

    background:transparent;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;

    cursor:pointer;

    text-align:left;

    position: relative;

    z-index: 5;

}

.servicesFaqQuestion span{

    font-size:21px;

    font-weight:700;

    color:var(--primary);

    line-height:1.5;

}

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

.servicesFaqIcon{

    flex-shrink:0;

    width:52px;

    height:52px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        #032555,
        #0B4AA2
    );

    color:#FFD86A;

    font-size:18px;

    box-shadow:0 15px 35px rgba(3,37,85,.20);

    transition:.4s;

}

.servicesFaqItem.active .servicesFaqIcon{

    transform:rotate(45deg);

}

/*=========================================
            ANSWER
=========================================*/

.servicesFaqAnswer{

    max-height:0;

    overflow:hidden;

    transition:max-height .45s ease;

}

.servicesFaqItem.active .servicesFaqAnswer{

    max-height:300px;

}

.servicesFaqAnswer p{

    padding:0 30px 30px;

    margin:0;

    color:var(--text);

    font-size:17px;

    line-height:1.9;

}

/* Part - 3 */

/*=========================================
            ANIMATIONS
=========================================*/

@keyframes servicesFaqFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}

@keyframes servicesFaqShine{

    0%{

        left:-120%;

    }

    100%{

        left:130%;

    }

}

/*=========================================
            SHINE EFFECT
=========================================*/

.servicesFaqItem::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:90px;

    height:100%;

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

    transform:skewX(-25deg);

}

.servicesFaqItem:hover::after{

    animation:servicesFaqShine .8s linear;

}

/*=========================================
            FLOATING CARDS
=========================================*/

.servicesFaqItem:nth-child(1){

    animation:servicesFaqFloat 5s ease-in-out infinite;

}

.servicesFaqItem:nth-child(2){

    animation:servicesFaqFloat 5s ease-in-out infinite .4s;

}

.servicesFaqItem:nth-child(3){

    animation:servicesFaqFloat 5s ease-in-out infinite .8s;

}

.servicesFaqItem:nth-child(4){

    animation:servicesFaqFloat 5s ease-in-out infinite 1.2s;

}

.servicesFaqItem:nth-child(5){

    animation:servicesFaqFloat 5s ease-in-out infinite 1.6s;

}

.servicesFaqItem:nth-child(6){

    animation:servicesFaqFloat 5s ease-in-out infinite 2s;

}

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

@media(max-width:991px){

    .servicesFaq{

        padding:90px 0;

    }

    .servicesFaqHeading{

        margin-bottom:60px;

    }

    .servicesFaqGrid{

        grid-template-columns:1fr;

        gap:22px;

    }

}

@media(max-width:768px){

    .servicesFaqHeading h2{

        font-size:40px;

    }

    .servicesFaqQuestion{

        padding:24px;

        gap:18px;

    }

    .servicesFaqQuestion span{

        font-size:19px;

    }

    .servicesFaqAnswer p{

        padding:0 24px 24px;

        font-size:16px;

        line-height:1.8;

    }

    .servicesFaqIcon{

        width:46px;

        height:46px;

        border-radius:14px;

        font-size:16px;

    }

}

@media(max-width:576px){

    .servicesFaq{

        padding:70px 0;

    }

    .servicesFaqHeading h2{

        font-size:34px;

    }

    .servicesFaqHeading p{

        font-size:16px;

    }

    .servicesFaqPrefix{

        padding:8px 18px;

        font-size:12px;

        letter-spacing:1.5px;

    }

    .servicesFaqItem{

        border-radius:22px;

    }

    .servicesFaqQuestion{

        padding:20px;

        gap:15px;

    }

    .servicesFaqQuestion span{

        font-size:17px;

        line-height:1.5;

    }

    .servicesFaqIcon{

        width:42px;

        height:42px;

        border-radius:12px;

        font-size:14px;

    }

    .servicesFaqAnswer p{

        padding:0 20px 20px;

        font-size:15px;

    }

}

/*=========================================
        FAQ ACCORDION JS SUPPORT
=========================================*/

.servicesFaqItem.active{

    border-color:rgba(212,175,55,.35);

}

/* FAQ Section Ends Here */

/* CTA Section Starts Here */

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

.servicesCta{

    position:relative;

    padding:120px 0;

    background:var(--section);

    overflow:hidden;

}

.servicesCta .container{

    max-width:1280px;

    margin:auto;

    position:relative;

    z-index:2;

}

/*=========================================
        BACKGROUND GLOW
=========================================*/

.servicesCtaBlur{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    opacity:.6;

    pointer-events:none;

}

.servicesCtaBlurOne{

    width:420px;

    height:420px;

    top:-180px;

    left:-180px;

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

}

.servicesCtaBlurTwo{

    width:450px;

    height:450px;

    bottom:-180px;

    right:-180px;

    background:rgba(3,37,85,.18);

}

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

.servicesCtaBox{

    position:relative;

    max-width:950px;

    margin:auto;

    padding:80px 70px;

    text-align:center;

    background:var(--glass);

    backdrop-filter:blur(var(--blur));

    -webkit-backdrop-filter:blur(var(--blur));

    border:1px solid var(--border);

    border-radius:34px;

    box-shadow:var(--shadow-md);

    overflow:hidden;

}

.servicesCtaBox::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.12),
        transparent 65%
    );

    opacity:.9;

}

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

.servicesCtaBox>*{

    position:relative;

    z-index:2;

}

.servicesCtaPrefix{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:10px 22px;

    border-radius:50px;

    background:rgba(3,37,85,.08);

    color:var(--primary);

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.servicesCtaPrefix::before,
.servicesCtaPrefix::after{

    content:"";

    width:28px;

    height:2px;

    background:linear-gradient(
        to right,
        #D4AF37,
        #FFD86A
    );

}

.servicesCtaBox h2{

    margin:28px 0 22px;

    font-family:var(--heading);

    font-size:clamp(42px,5vw,60px);

    line-height:1.15;

    color:var(--primary);

}

.servicesCtaBox h2 span{

    display:block;

    color:#D4AF37;

}

.servicesCtaBox p{

    max-width:760px;

    margin:0 auto;

    font-size:18px;

    line-height:1.9;

    color:var(--text);

}

/* Part - 2 */

/*=========================================
            BUTTONS
=========================================*/

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

.servicesCtaButtons .themeBtn{

    display:inline-flex;
    margin-top: 2rem;

    align-items:center;

    justify-content:center;

    padding:16px 36px;

    border-radius:50px;

    background:linear-gradient(
        135deg,
        #D4AF37,
        #FFD86A
    );

    color:#032555;

    font-weight:700;

    font-size:16px;

    text-decoration:none;

    border:none;

    transition:.35s ease;

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

}

.servicesCtaButtons .themeBtn:hover{

    transform:translateY(-4px);

    box-shadow:0 24px 50px rgba(212,175,55,.45);

}

.servicesCtaButtons .themeBtnOutline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 36px;

    border-radius:50px;

    background:transparent;

    color:var(--primary);

    font-weight:700;

    font-size:16px;

    text-decoration:none;

    border:2px solid #D4AF37;

    transition:.35s ease;

}

.servicesCtaButtons .themeBtnOutline:hover{

    background:#D4AF37;

    color:#032555;

    transform:translateY(-4px);

}

/*=========================================
        FLOATING ELEMENTS
=========================================*/

.servicesCtaFloat{

    position:absolute;

    width:90px;

    height:90px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:24px;

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

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

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

    color:#D4AF37;

    font-size:36px;

    box-shadow:0 20px 45px rgba(0,0,0,.15);

    z-index:1;

    pointer-events:none;

}

.servicesCtaCoin{

    top:120px;

    left:8%;

}

.servicesCtaChart{

    top:180px;

    right:8%;

}

.servicesCtaShield{

    bottom:90px;

    left:15%;

}

/*=========================================
        DECORATIVE BORDERS
=========================================*/

.servicesCtaBox::after{

    content:"";

    position:absolute;

    inset:1px;

    border-radius:32px;

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

    pointer-events:none;

}

.servicesCtaBox:hover{

    transform:translateY(-8px);

    border-color:rgba(212,175,55,.25);

    box-shadow:0 30px 70px rgba(0,0,0,.18);

}

/*=========================================
            HOVER EFFECTS
=========================================*/

.servicesCtaBox:hover .servicesCtaPrefix{

    background:rgba(212,175,55,.12);

}

.servicesCtaBox:hover h2 span{

    color:#FFD86A;

}

.servicesCtaBox:hover .servicesCtaCoin{

    transform:rotate(-12deg) scale(1.08);

}

.servicesCtaBox:hover .servicesCtaChart{

    transform:rotate(10deg) scale(1.08);

}

.servicesCtaBox:hover .servicesCtaShield{

    transform:rotate(-8deg) scale(1.08);

}

.servicesCtaFloat{

    transition:.4s ease;

}

/* Part - 3 */

/*=========================================
            ANIMATIONS
=========================================*/

@keyframes servicesCtaFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}

@keyframes servicesCtaShine{

    0%{

        left:-120%;

    }

    100%{

        left:130%;

    }

}

/*=========================================
            SHINE EFFECT
=========================================*/

.servicesCtaBox::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:100px;

    height:100%;

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

    transform:skewX(-25deg);

    pointer-events:none;

}

.servicesCtaBox:hover::after{

    animation:servicesCtaShine .9s linear;

}

/*=========================================
        FLOATING ICON ANIMATION
=========================================*/

.servicesCtaCoin{

    animation:servicesCtaFloat 5s ease-in-out infinite;

}

.servicesCtaChart{

    animation:servicesCtaFloat 5s ease-in-out infinite .8s;

}

.servicesCtaShield{

    animation:servicesCtaFloat 5s ease-in-out infinite 1.6s;

}

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

@media(max-width:991px){

    .servicesCta{

        padding:90px 0;

    }

    .servicesCtaBox{

        padding:60px 45px;

    }

    .servicesCtaFloat{

        width:70px;

        height:70px;

        font-size:28px;

    }

    .servicesCtaCoin{

        left:3%;

    }

    .servicesCtaChart{

        right:3%;

    }

}

@media(max-width:768px){

    .servicesCtaBox{

        padding:50px 35px;

    }

    .servicesCtaBox h2{

        font-size:40px;

    }

    .servicesCtaBox p{

        font-size:16px;

    }

    .servicesCtaButtons{

        flex-direction:column;

        gap:16px;

    }

    .servicesCtaButtons .themeBtn,
    .servicesCtaButtons .themeBtnOutline{

        width:100%;

        max-width:340px;

    }

    .servicesCtaFloat{

        display:none;

    }

}

@media(max-width:576px){

    .servicesCta{

        padding:70px 0;

    }

    .servicesCtaBox{

        padding:40px 25px;

        border-radius:24px;

    }

    .servicesCtaPrefix{

        padding:8px 18px;

        font-size:12px;

        letter-spacing:1.5px;

    }

    .servicesCtaBox h2{

        font-size:34px;

    }

    .servicesCtaBox p{

        font-size:15px;

        line-height:1.8;

    }

    .servicesCtaButtons{

        margin-top:35px;

    }

    .servicesCtaButtons .themeBtn,
    .servicesCtaButtons .themeBtnOutline{

        min-width:100%;

    }

}

/* CTA Section Ends Here */

/* Service Page Ends Here */

/* Wealth Creation Page Starts Here */

/* Hero Section Starts Here */

/* =========================================
   WEALTH CREATION HERO
========================================= */

.wealthHero {

    position: relative;

    min-height: 780px;

    padding: 50px 0 100px;

    overflow: hidden;

    background: var(--section);

}


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

.wealthHero .container {

    width: min(1280px, 92%);

    margin: auto;

    position: relative;

    z-index: 5;

}


/* =========================================
   BACKGROUND GLOW
========================================= */

.wealthHeroGlow {

    position: absolute;

    border-radius: 50%;

    filter: blur(120px);

    pointer-events: none;

}

.wealthHeroGlowOne {

    width: 500px;

    height: 500px;

    top: -220px;

    left: -180px;

    background: rgba(212, 175, 55, .14);

}

.wealthHeroGlowTwo {

    width: 600px;

    height: 600px;

    right: -250px;

    bottom: -300px;

    background: rgba(3, 37, 85, .16);

}


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

.wealthHeroGrid {

    position: absolute;

    inset: 0;

    opacity: .04;

    background-image:

        linear-gradient(
            rgba(212,175,55,.5) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(212,175,55,.5) 1px,
            transparent 1px
        );

    background-size: 60px 60px;

    mask-image: linear-gradient(
        to right,
        black,
        transparent
    );

}


/* =========================================
   BREADCRUMB
========================================= */

.wealthHeroBreadcrumb {

    margin-bottom: 60px;

}

.wealthHeroBreadcrumb ul {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin: 0;

    padding: 0;

    list-style: none;

}

.wealthHeroBreadcrumb li {

    font-size: 14px;

    color: var(--text);

}

.wealthHeroBreadcrumb a {

    color: var(--text);

    text-decoration: none;

    transition: .3s ease;

}

.wealthHeroBreadcrumb a:hover {

    color: #D4AF37;

}

.wealthHeroBreadcrumb i {

    font-size: 11px;

    color: #D4AF37;

}


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

.wealthHeroWrapper {

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 80px;

}


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

.wealthHeroContent {

    max-width: 680px;

}

.wealthHeroPrefix {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 24px;

    padding: 9px 18px;

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

    border-radius: 50px;

    background: rgba(212,175,55,.07);

    color: #D4AF37;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

}

.wealthHeroPrefixLine {

    width: 25px;

    height: 2px;

    background: #D4AF37;

}


.wealthHeroContent h1 {

    margin: 0 0 28px;

    font-size: clamp(46px, 5vw, 72px);

    line-height: 1.08;

    font-weight: 800;

    color: var(--primary);

    letter-spacing: -2px;

}

.wealthHeroContent h1 span {

    display: block;

    color: #D4AF37;

}


.wealthHeroContent p {

    max-width: 650px;

    margin: 0;

    font-size: 18px;

    line-height: 1.9;

    color: var(--text);

}


/* =========================================
   BUTTONS
========================================= */

.wealthHeroButtons {

    display: flex;

    flex-wrap: wrap;

    gap: 16px;

    margin-top: 38px;

}


.wealthHeroBtn,
.wealthHeroBtnOutline {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    min-height: 56px;

    padding: 0 28px;

    border-radius: 50px;

    text-decoration: none;

    font-size: 15px;

    font-weight: 700;

    transition: .35s ease;

}


.wealthHeroBtn {

    color: #032555;

    background: linear-gradient(
        135deg,
        #D4AF37,
        #FFD86A
    );

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

}

.wealthHeroBtn:hover {

    transform: translateY(-4px);

    box-shadow:
        0 20px 45px rgba(212,175,55,.4);

}

.wealthHeroBtn i {

    transition: .3s ease;

}

.wealthHeroBtn:hover i {

    transform: translateX(5px);

}


.wealthHeroBtnOutline {

    color: var(--primary);

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

    background: rgba(212,175,55,.04);

}

.wealthHeroBtnOutline:hover {

    color: #032555;

    background: #D4AF37;

    transform: translateY(-4px);

}


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

.wealthHeroTrust {

    display: flex;

    flex-wrap: wrap;

    gap: 22px;

    margin-top: 32px;

}

.wealthHeroTrustItem {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 13px;

    color: var(--text);

}

.wealthHeroTrustItem i {

    color: #D4AF37;

    font-size: 14px;

}


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

.wealthHeroVisual {

    position: relative;

    min-height: 520px;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* =========================================
   VISUAL GLOW
========================================= */

.wealthVisualGlow {

    position: absolute;

    width: 430px;

    height: 430px;

    border-radius: 50%;

    background: rgba(212,175,55,.08);

    filter: blur(35px);

}


/* =========================================
   GROWTH CIRCLE
========================================= */

.wealthGrowthCircle {

    position: absolute;

    width: 330px;

    height: 330px;

    border-radius: 50%;

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

    display: flex;

    align-items: center;

    justify-content: center;

    animation: wealthRotate 18s linear infinite;

}

.wealthGrowthCircle::before {

    content: "";

    position: absolute;

    inset: 22px;

    border-radius: 50%;

    border: 1px dashed rgba(212,175,55,.3);

}

.wealthGrowthCircleInner {

    width: 110px;

    height: 110px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(
        135deg,
        #D4AF37,
        #FFD86A
    );

    color: #032555;

    font-size: 40px;

    box-shadow:
        0 0 50px rgba(212,175,55,.35);

    animation: wealthCounterRotate 18s linear infinite;

}


/* =========================================
   CHART
========================================= */

.wealthChart {

    position: relative;

    z-index: 3;

    width: 500px;

    max-width: 100%;

    padding: 28px;

    border-radius: 28px;

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

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

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    box-shadow:

        0 30px 80px rgba(0,0,0,.18),

        inset 0 1px 0 rgba(255,255,255,.1);

}


.wealthChartHeader {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

}

.wealthChartHeader span {

    display: block;

    margin-bottom: 5px;

    font-size: 12px;

    color: var(--text);

}

.wealthChartHeader strong {

    color: var(--primary);

    font-size: 17px;

}


.wealthChartBadge {

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 7px 12px;

    border-radius: 20px;

    background: rgba(212,175,55,.12);

    color: #D4AF37;

    font-size: 11px;

    font-weight: 700;

}


.wealthChartGraph {

    height: 220px;

    margin-top: 25px;

}

.wealthChartGraph svg {

    width: 100%;

    height: 100%;

    overflow: visible;

}

.wealthChartArea {

    fill: url(#wealthGradient);

}

.wealthChartLine {

    fill: none;

    stroke: #D4AF37;

    stroke-width: 4;

    stroke-linecap: round;

}


.wealthChartFooter {

    display: flex;

    justify-content: space-between;

    margin-top: 12px;

    font-size: 10px;

    color: var(--text);

}


/* =========================================
   MINI CARDS
========================================= */

.wealthMiniCard {

    position: absolute;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 13px 17px;

    border-radius: 16px;

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

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

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);

    box-shadow: 0 20px 45px rgba(0,0,0,.15);

}

.wealthMiniCardOne {

    /* top: 70px; */
    top: 20px;

    left: 0;

}

.wealthMiniCardTwo {

    right: 0;

    bottom: 65px;

}


.wealthMiniIcon {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background: rgba(212,175,55,.12);

    color: #D4AF37;

}

.wealthMiniCard small {

    display: block;

    margin-bottom: 3px;

    color: var(--text);

    font-size: 10px;

}

.wealthMiniCard strong {

    display: block;

    color: var(--primary);

    font-size: 13px;

}

/* =========================================
   FLOATING ICONS
========================================= */

.wealthHeroFloat {

    position: absolute;

    z-index: 6;

    width: 62px;

    height: 62px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 18px;

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

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

    backdrop-filter: blur(12px);

    color: #D4AF37;

    font-size: 24px;

    box-shadow: 0 15px 35px rgba(0,0,0,.12);

}


.wealthHeroFloatOne {

    top: 22%;

    right: 46%;

    animation: wealthFloat 5s ease-in-out infinite;

}

.wealthHeroFloatTwo {

    top: 12%;

    right: 7%;

    animation: wealthFloat 5s ease-in-out infinite 1s;

}

.wealthHeroFloatThree {

    bottom: 18%;

    right: 48%;

    animation: wealthFloat 5s ease-in-out infinite 1.8s;

}

.wealthHeroFloatFour {

    bottom: 10%;

    right: 6%;

    animation: wealthFloat 5s ease-in-out infinite 2.5s;

}


@keyframes wealthFloat {

    0%, 100% {

        transform: translateY(0) rotate(0deg);

    }

    50% {

        transform: translateY(-16px) rotate(5deg);

    }

}


@keyframes wealthRotate {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}


@keyframes wealthCounterRotate {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(-360deg);

    }

}

/* =========================================
   RESPONSIVE
========================================= */
/* =========================================================
   WEALTH HERO - RESPONSIVE FIX
========================================================= */


/* =========================================================
   LARGE TABLET / SMALL DESKTOP
========================================================= */

@media (max-width: 1199px) {

    .wealthHero {
        min-height: auto;
        padding: 45px 0 90px;
    }

    .wealthHeroWrapper {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 45px;
    }

    .wealthHeroContent {
        max-width: 100%;
    }

    .wealthHeroContent h1 {
        font-size: clamp(44px, 5vw, 60px);
    }

    .wealthHeroContent p {
        font-size: 17px;
    }

    .wealthHeroVisual {
        min-height: 470px;
        width: 100%;
    }

    .wealthChart {
        width: min(100%, 450px);
    }

    .wealthGrowthCircle {
        width: 285px;
        height: 285px;
    }

    .wealthHeroFloatOne {
        left: 0;
        right: auto;
    }

    .wealthHeroFloatThree {
        left: 5px;
        right: auto;
    }

    .wealthMiniCardOne {
        left: 0;
    }

    .wealthMiniCardTwo {
        right: 0;
    }

}


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

@media (max-width: 991px) {

    .wealthHero {
        padding: 35px 0 80px;
    }

    .wealthHero .container {
        width: min(94%, 760px);
    }

    .wealthHeroBreadcrumb {
        margin-bottom: 45px;
    }

    .wealthHeroWrapper {
        grid-template-columns: 1fr;
        gap: 70px;
    }


    /* -----------------------------------------
       CONTENT
    ----------------------------------------- */

    .wealthHeroContent {
        width: 100%;
        max-width: 720px;
        margin: 0 auto;
        text-align: center;
    }

    .wealthHeroPrefix {
        justify-content: center;
    }

    .wealthHeroContent h1 {
        font-size: clamp(44px, 7vw, 58px);
        line-height: 1.1;
    }

    .wealthHeroContent p {
        max-width: 680px;
        margin: 0 auto;
    }

    .wealthHeroButtons {
        justify-content: center;
    }

    .wealthHeroTrust {
        justify-content: center;
    }


    /* -----------------------------------------
       VISUAL
    ----------------------------------------- */

    .wealthHeroVisual {
        width: 100%;
        max-width: 650px;
        min-height: 500px;
        margin: 0 auto;
    }

    .wealthChart {
        width: min(100%, 500px);
    }

    .wealthGrowthCircle {
        width: 300px;
        height: 300px;
    }


    /* -----------------------------------------
       FLOATING ICONS
    ----------------------------------------- */

    .wealthHeroFloatOne {
        left: 3%;
        right: auto;
    }

    .wealthHeroFloatTwo {
        right: 3%;
    }

    .wealthHeroFloatThree {
        left: 5%;
        right: auto;
    }

    .wealthHeroFloatFour {
        right: 5%;
    }

}


/* =========================================================
   MOBILE LANDSCAPE / SMALL TABLET
========================================================= */

@media (max-width: 767px) {

    .wealthHero {
        padding: 30px 0 65px;
    }

    .wealthHero .container {
        width: calc(100% - 32px);
    }

    .wealthHeroBreadcrumb {
        margin-bottom: 35px;
    }

    .wealthHeroBreadcrumb ul {
        gap: 8px;
    }

    .wealthHeroBreadcrumb li {
        font-size: 12px;
    }


    /* -----------------------------------------
       CONTENT
    ----------------------------------------- */

    .wealthHeroContent h1 {
        font-size: clamp(36px, 9vw, 48px);
        letter-spacing: -1px;
        line-height: 1.12;
        margin-bottom: 22px;
    }

    .wealthHeroContent p {
        font-size: 15px;
        line-height: 1.8;
    }

    .wealthHeroPrefix {
        font-size: 11px;
        letter-spacing: 1.5px;
        padding: 8px 15px;
    }


    /* -----------------------------------------
       BUTTONS
    ----------------------------------------- */

    .wealthHeroButtons {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-top: 30px;
    }

    .wealthHeroBtn,
    .wealthHeroBtnOutline {
        width: 100%;
        min-height: 54px;
        padding: 0 20px;
    }


    /* -----------------------------------------
       TRUST
    ----------------------------------------- */

    .wealthHeroTrust {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 10px;
        margin-top: 25px;
    }


    /* -----------------------------------------
       VISUAL
    ----------------------------------------- */

    .wealthHeroVisual {
        width: 100%;
        min-height: 390px;
        max-width: 100%;
    }

    .wealthChart {
        width: calc(100% - 30px);
        max-width: 470px;
        padding: 18px;
        border-radius: 22px;
    }

    .wealthChartHeader {
        gap: 10px;
    }

    .wealthChartHeader strong {
        font-size: 14px;
    }

    .wealthChartBadge {
        padding: 6px 9px;
        font-size: 9px;
    }

    .wealthChartGraph {
        height: 165px;
        margin-top: 18px;
    }

    .wealthChartFooter {
        font-size: 9px;
    }


    /* -----------------------------------------
       GROWTH CIRCLE
    ----------------------------------------- */

    .wealthGrowthCircle {
        width: 225px;
        height: 225px;
    }

    .wealthGrowthCircle::before {
        inset: 16px;
    }

    .wealthGrowthCircleInner {
        width: 75px;
        height: 75px;
        font-size: 27px;
    }


    /* -----------------------------------------
       MINI CARDS
    ----------------------------------------- */

    .wealthMiniCard {
        padding: 9px 11px;
        border-radius: 13px;
        gap: 8px;
    }

    .wealthMiniIcon {
        width: 34px;
        height: 34px;
        border-radius: 9px;
        font-size: 13px;
    }

    .wealthMiniCard small {
        font-size: 8px;
    }

    .wealthMiniCard strong {
        font-size: 11px;
    }

    .wealthMiniCardOne {
        top: 15px;
        left: 0;
    }

    .wealthMiniCardTwo {
        right: 0;
        bottom: 15px;
    }


    /* -----------------------------------------
       FLOATING ICONS
    ----------------------------------------- */

    .wealthHeroFloat {
        width: 45px;
        height: 45px;
        border-radius: 13px;
        font-size: 17px;
    }

    .wealthHeroFloatOne {
        left: 0;
        top: 28%;
    }

    .wealthHeroFloatTwo {
        right: 0;
        top: 12%;
    }

    .wealthHeroFloatThree {
        left: 2%;
        bottom: 20%;
    }

    .wealthHeroFloatFour {
        right: 1%;
        bottom: 8%;
    }

}


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

@media (max-width: 480px) {

    .wealthHero {
        padding: 25px 0 55px;
    }

    .wealthHero .container {
        width: calc(100% - 24px);
    }


    /* -----------------------------------------
       BREADCRUMB
    ----------------------------------------- */

    .wealthHeroBreadcrumb {
        margin-bottom: 28px;
    }

    .wealthHeroBreadcrumb ul {
        gap: 6px;
    }

    .wealthHeroBreadcrumb li {
        font-size: 11px;
    }


    /* -----------------------------------------
       CONTENT
    ----------------------------------------- */

    .wealthHeroPrefix {
        font-size: 9px;
        letter-spacing: 1px;
        padding: 7px 12px;
    }

    .wealthHeroPrefixLine {
        width: 17px;
    }

    .wealthHeroContent h1 {
        font-size: 34px;
        line-height: 1.13;
        margin-bottom: 18px;
    }

    .wealthHeroContent p {
        font-size: 14px;
        line-height: 1.75;
    }


    /* -----------------------------------------
       BUTTONS
    ----------------------------------------- */

    .wealthHeroButtons {
        margin-top: 25px;
    }

    .wealthHeroBtn,
    .wealthHeroBtnOutline {
        min-height: 51px;
        font-size: 13px;
        padding: 0 16px;
    }


    /* -----------------------------------------
       VISUAL
    ----------------------------------------- */

    .wealthHeroVisual {
        min-height: 310px;
    }

    .wealthChart {
        width: calc(100% - 20px);
        padding: 14px;
        border-radius: 17px;
    }

    .wealthChartHeader span {
        font-size: 9px;
    }

    .wealthChartHeader strong {
        font-size: 11px;
    }

    .wealthChartBadge {
        display: none;
    }

    .wealthChartGraph {
        height: 125px;
    }

    .wealthChartFooter {
        font-size: 7px;
    }


    /* -----------------------------------------
       CIRCLE
    ----------------------------------------- */

    .wealthGrowthCircle {
        width: 170px;
        height: 170px;
    }

    .wealthGrowthCircle::before {
        inset: 12px;
    }

    .wealthGrowthCircleInner {
        width: 58px;
        height: 58px;
        font-size: 21px;
    }


    /* -----------------------------------------
       MINI CARDS
    ----------------------------------------- */

    .wealthMiniCardOne {
        top: 8px;
        left: 0;
    }

    .wealthMiniCardTwo {
        right: 0;
        bottom: 8px;
    }

    .wealthMiniCard {
        padding: 7px 8px;
        gap: 6px;
    }

    .wealthMiniIcon {
        width: 29px;
        height: 29px;
        font-size: 11px;
    }

    .wealthMiniCard small {
        font-size: 7px;
    }

    .wealthMiniCard strong {
        font-size: 9px;
    }


    /* -----------------------------------------
       FLOATING ICONS
    ----------------------------------------- */

    .wealthHeroFloat {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        font-size: 13px;
    }

    .wealthHeroFloatOne {
        left: -2px;
        top: 32%;
    }

    .wealthHeroFloatTwo {
        right: -2px;
        top: 8%;
    }

    .wealthHeroFloatThree {
        left: -2px;
        bottom: 20%;
    }

    .wealthHeroFloatFour {
        right: -2px;
        bottom: 5%;
    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 360px) {

    .wealthHeroContent h1 {
        font-size: 30px;
    }

    .wealthHeroContent p {
        font-size: 13px;
    }

    .wealthHeroVisual {
        min-height: 275px;
    }

    .wealthChart {
        width: calc(100% - 12px);
    }

    .wealthGrowthCircle {
        width: 145px;
        height: 145px;
    }

    .wealthGrowthCircleInner {
        width: 50px;
        height: 50px;
        font-size: 18px;
    }

    .wealthMiniCard {
        transform: scale(.85);
    }

    .wealthHeroFloat {
        transform: scale(.85);
    }

}

/* Hero Section Ends Here */

/* Intro Section Starts Here */

/* =========================================
   WEALTH INTRODUCTION
========================================= */

.wealthIntro {

    position: relative;

    padding: 120px 0;

    overflow: hidden;

    background: var(--section);

}


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

.wealthIntro .container {

    width: min(1280px, 92%);

    margin: auto;

    position: relative;

    z-index: 3;

}


/* =========================================
   BACKGROUND GLOW
========================================= */

.wealthIntroGlow {

    position: absolute;

    border-radius: 50%;

    filter: blur(110px);

    pointer-events: none;

}

.wealthIntroGlowOne {

    width: 420px;

    height: 420px;

    left: -220px;

    top: 20%;

    background: rgba(212,175,55,.10);

}

.wealthIntroGlowTwo {

    width: 500px;

    height: 500px;

    right: -280px;

    bottom: -200px;

    background: rgba(3,37,85,.14);

}


/* =========================================
   WRAPPER
========================================= */

.wealthIntroWrapper {

    display: grid;

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

    align-items: center;

    gap: 90px;

}


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

.wealthIntroContent {

    max-width: 680px;

}

.wealthIntroPrefix {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 9px 18px;

    margin-bottom: 22px;

    border-radius: 50px;

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

    background: rgba(212,175,55,.06);

    color: #D4AF37;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

}


.wealthIntroContent h2 {

    margin: 0 0 25px;

    color: var(--primary);

    font-size: clamp(42px, 5vw, 62px);

    line-height: 1.1;

    letter-spacing: -1.5px;

}

.wealthIntroContent h2 span {

    display: block;

    color: #D4AF37;

}


.wealthIntroContent > p {

    margin: 0 0 18px;

    color: var(--text);

    font-size: 17px;

    line-height: 1.9;

}

.wealthIntroContent strong {

    color: #D4AF37;

}


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

.wealthIntroHighlights {

    display: grid;

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

    gap: 14px;

    margin-top: 35px;

}


.wealthIntroHighlight {

    padding: 20px 16px;

    border-radius: 20px;

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

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

    transition: .35s ease;

}

.wealthIntroHighlight:hover {

    transform: translateY(-7px);

    border-color: rgba(212,175,55,.35);

    background: rgba(212,175,55,.06);

}


.wealthIntroHighlightIcon {

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 14px;

    border-radius: 13px;

    background: rgba(212,175,55,.10);

    color: #D4AF37;

    font-size: 18px;

}


.wealthIntroHighlight h3 {

    margin: 0 0 8px;

    color: var(--primary);

    font-size: 15px;

    line-height: 1.35;

}


.wealthIntroHighlight p {

    margin: 0;

    color: var(--text);

    font-size: 12px;

    line-height: 1.6;

}


/* =========================================
   VISUAL
========================================= */

.wealthIntroVisual {

    position: relative;

    min-height: 560px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.wealthIntroVisualCard {

    position: relative;

    width: min(100%, 540px);

    min-height: 500px;

    padding: 30px;

    border-radius: 32px;

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

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

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    box-shadow:

        0 30px 80px rgba(0,0,0,.18),

        inset 0 1px 0 rgba(255,255,255,.10);

    overflow: hidden;

}


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

.wealthIntroVisualHeader {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;

}

.wealthIntroVisualHeader span {

    display: block;

    margin-bottom: 5px;

    color: var(--text);

    font-size: 11px;

}

.wealthIntroVisualHeader strong {

    display: block;

    color: var(--primary);

    font-size: 16px;

}


.wealthIntroVisualStatus {

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 7px 11px;

    border-radius: 30px;

    background: rgba(212,175,55,.08);

    color: #D4AF37;

    font-size: 10px;

}

.wealthIntroVisualStatus i {

    font-size: 6px;

}


/* =========================================
   CENTRAL CIRCLE
========================================= */

.wealthStrategyCircle {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 170px;

    height: 170px;

    transform: translate(-50%, -50%);

    border-radius: 50%;

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

    display: flex;

    align-items: center;

    justify-content: center;

    background:

        radial-gradient(
            circle,
            rgba(212,175,55,.12),
            transparent 70%
        );

}


.wealthStrategyCircle::before {

    content: "";

    position: absolute;

    inset: 14px;

    border-radius: 50%;

    border: 1px dashed rgba(212,175,55,.25);

    animation: wealthIntroSpin 16s linear infinite;

}


.wealthStrategyCircleInner {

    position: relative;

    z-index: 2;

    width: 90px;

    height: 90px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #D4AF37,
        #FFD86A
    );

    color: #032555;

    box-shadow:

        0 0 45px rgba(212,175,55,.28);

}


.wealthStrategyCircleInner i {

    margin-bottom: 5px;

    font-size: 25px;

}

.wealthStrategyCircleInner span {

    font-size: 11px;

    font-weight: 800;

}


/* =========================================
   STRATEGY NODES
========================================= */

.wealthStrategyNode {

    position: absolute;

    z-index: 5;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 7px;

    color: var(--text);

    font-size: 10px;

}


.wealthStrategyNodeIcon {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    background: rgba(212,175,55,.08);

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

    color: #D4AF37;

    font-size: 18px;

    transition: .35s ease;

}


.wealthStrategyNode:hover .wealthStrategyNodeIcon {

    transform: scale(1.1);

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

}


.wealthStrategyNodeOne {

    top: 28%;

    left: 13%;

}

.wealthStrategyNodeTwo {

    top: 28%;

    right: 13%;

}

.wealthStrategyNodeThree {

    bottom: 29%;

    left: 13%;

}

.wealthStrategyNodeFour {

    bottom: 29%;

    right: 13%;

}


/* =========================================
   CONNECTING LINES
========================================= */

.wealthStrategyLine {

    position: absolute;

    height: 1px;

    width: 105px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(212,175,55,.45),
        transparent
    );

}

.wealthStrategyLineOne {

    top: 42%;

    left: 23%;

    transform: rotate(25deg);

}

.wealthStrategyLineTwo {

    top: 42%;

    right: 23%;

    transform: rotate(-25deg);

}

.wealthStrategyLineThree {

    bottom: 42%;

    left: 23%;

    transform: rotate(-25deg);

}

.wealthStrategyLineFour {

    bottom: 42%;

    right: 23%;

    transform: rotate(25deg);

}


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

.wealthIntroVisualStats {

    position: absolute;

    left: 30px;

    right: 30px;

    bottom: 25px;

    display: grid;

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

    gap: 10px;

    padding-top: 20px;

    border-top: 1px solid rgba(255,255,255,.08);

}

.wealthIntroVisualStats span {

    display: block;

    margin-bottom: 5px;

    color: var(--text);

    font-size: 9px;

}

.wealthIntroVisualStats strong {

    color: var(--primary);

    font-size: 11px;

}


/* =========================================
   FLOATING ELEMENTS
========================================= */

.wealthIntroFloat {

    position: absolute;

    z-index: 8;

    width: 62px;

    height: 62px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 18px;

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

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

    backdrop-filter: blur(12px);

    color: #D4AF37;

    font-size: 24px;

    box-shadow: 0 18px 40px rgba(0,0,0,.15);

}


.wealthIntroFloatOne {

    top: 12%;

    left: 0;

    animation: wealthIntroFloat 5s ease-in-out infinite;

}

.wealthIntroFloatTwo {

    right: 0;

    bottom: 14%;

    animation: wealthIntroFloat 5s ease-in-out infinite 1.5s;

}


/* =========================================
   ANIMATIONS
========================================= */

@keyframes wealthIntroFloat {

    0%,100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-14px);

    }

}


@keyframes wealthIntroSpin {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}


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

@media (max-width: 991px) {

    .wealthIntro {

        padding: 90px 0;

    }

    .wealthIntroWrapper {

        grid-template-columns: 1fr;

        gap: 70px;

    }

    .wealthIntroContent {

        max-width: 760px;

        margin: auto;

        text-align: center;

    }

    .wealthIntroPrefix {

        justify-content: center;

    }

    .wealthIntroContent > p {

        font-size: 16px;

    }

    .wealthIntroHighlights {

        text-align: left;

    }

    .wealthIntroVisual {

        min-height: 530px;

        max-width: 600px;

        width: 100%;

        margin: auto;

    }

}


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

@media (max-width: 767px) {

    .wealthIntro {

        padding: 75px 0;

    }

    .wealthIntro .container {

        width: calc(100% - 32px);

    }

    .wealthIntroContent h2 {

        font-size: 38px;

        letter-spacing: -1px;

    }

    .wealthIntroContent > p {

        font-size: 15px;

        line-height: 1.8;

    }

    .wealthIntroHighlights {

        grid-template-columns: 1fr;

        gap: 12px;

    }

    .wealthIntroHighlight {

        display: flex;

        align-items: center;

        gap: 15px;

        padding: 16px;

    }

    .wealthIntroHighlightIcon {

        flex-shrink: 0;

        margin: 0;

    }

    .wealthIntroVisual {

        min-height: 450px;

    }

    .wealthIntroVisualCard {

        min-height: 430px;

        padding: 22px;

        border-radius: 25px;

    }

    .wealthStrategyCircle {

        width: 135px;

        height: 135px;

    }

    .wealthStrategyCircleInner {

        width: 72px;

        height: 72px;

    }

    .wealthStrategyCircleInner i {

        font-size: 20px;

    }

    .wealthStrategyNodeOne {

        left: 6%;

    }

    .wealthStrategyNodeTwo {

        right: 6%;

    }

    .wealthStrategyNodeThree {

        left: 6%;

    }

    .wealthStrategyNodeFour {

        right: 6%;

    }

    .wealthStrategyLine {

        width: 65px;

    }

    .wealthIntroFloat {

        width: 48px;

        height: 48px;

        font-size: 18px;

    }

    .wealthIntroFloatOne {

        left: -5px;

    }

    .wealthIntroFloatTwo {

        right: -5px;

    }

}


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

@media (max-width: 480px) {

    .wealthIntro {

        padding: 60px 0;

    }

    .wealthIntroContent h2 {

        font-size: 32px;

    }

    .wealthIntroPrefix {

        font-size: 10px;

        letter-spacing: 1.3px;

    }

    .wealthIntroVisual {

        min-height: 390px;

    }

    .wealthIntroVisualCard {

        min-height: 370px;

        padding: 17px;

    }

    .wealthIntroVisualHeader strong {

        font-size: 13px;

    }

    .wealthIntroVisualStatus {

        display: none;

    }

    .wealthStrategyCircle {

        width: 110px;

        height: 110px;

    }

    .wealthStrategyCircleInner {

        width: 62px;

        height: 62px;

    }

    .wealthStrategyCircleInner i {

        font-size: 17px;

    }

    .wealthStrategyCircleInner span {

        font-size: 9px;

    }

    .wealthStrategyNodeIcon {

        width: 40px;

        height: 40px;

        font-size: 15px;

        border-radius: 12px;

    }

    .wealthStrategyNode {

        font-size: 8px;

    }

    .wealthStrategyLine {

        width: 45px;

    }

    .wealthIntroVisualStats {

        left: 17px;

        right: 17px;

        bottom: 17px;

    }

    .wealthIntroVisualStats span {

        font-size: 7px;

    }

    .wealthIntroVisualStats strong {

        font-size: 9px;

    }

}

/* Intro Section Ends Here */

/* Matters Section Starts Here */

/* =========================================
   WHY WEALTH CREATION MATTERS
========================================= */

.wealthMatters {

    position: relative;

    padding: 120px 0;

    overflow: hidden;

    background: var(--section);

}


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

.wealthMatters .container {

    width: min(1280px, 92%);

    margin: auto;

    position: relative;

    z-index: 3;

}


/* =========================================
   BACKGROUND GLOW
========================================= */

.wealthMattersGlow {

    position: absolute;

    border-radius: 50%;

    filter: blur(120px);

    pointer-events: none;

}

.wealthMattersGlowOne {

    width: 450px;

    height: 450px;

    top: -200px;

    left: -220px;

    background: rgba(212,175,55,.09);

}

.wealthMattersGlowTwo {

    width: 500px;

    height: 500px;

    right: -280px;

    bottom: -250px;

    background: rgba(3,37,85,.14);

}


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

.wealthMattersHeading {

    max-width: 800px;

    margin: 0 auto 65px;

    text-align: center;

}


.wealthMattersPrefix {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 9px 18px;

    margin-bottom: 22px;

    border-radius: 50px;

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

    background: rgba(212,175,55,.06);

    color: #D4AF37;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

}


.wealthMattersHeading h2 {

    margin: 0 0 22px;

    color: var(--primary);

    font-size: clamp(42px, 5vw, 62px);

    line-height: 1.1;

    letter-spacing: -1.5px;

}

.wealthMattersHeading h2 span {

    display: block;

    color: #D4AF37;

}


.wealthMattersHeading p {

    max-width: 700px;

    margin: auto;

    color: var(--text);

    font-size: 17px;

    line-height: 1.85;

}


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

.wealthMattersGrid {

    display: grid;

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

    gap: 22px;

}


/* =========================================
   CARDS
========================================= */

.wealthMatterCard {

    position: relative;

    min-height: 290px;

    padding: 28px;

    border-radius: 26px;

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

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

    overflow: hidden;

    transition:
        transform .4s ease,
        border-color .4s ease,
        background .4s ease,
        box-shadow .4s ease;

}


.wealthMatterCard::before {

    content: "";

    position: absolute;

    width: 160px;

    height: 160px;

    top: -80px;

    right: -80px;

    border-radius: 50%;

    background: rgba(212,175,55,.08);

    filter: blur(5px);

    transition: .4s ease;

}


.wealthMatterCard:hover {

    transform: translateY(-9px);

    border-color: rgba(212,175,55,.35);

    background: rgba(212,175,55,.055);

    box-shadow:

        0 25px 60px rgba(0,0,0,.15),

        0 0 35px rgba(212,175,55,.05);

}


.wealthMatterCard:hover::before {

    transform: scale(1.5);

    background: rgba(212,175,55,.12);

}


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

.wealthMatterTop {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 35px;

}


.wealthMatterNumber {

    color: rgba(212,175,55,.45);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 2px;

}


.wealthMatterIcon {

    position: relative;

    z-index: 2;

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 16px;

    background: rgba(212,175,55,.09);

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

    color: #D4AF37;

    font-size: 21px;

    transition: .4s ease;

}


.wealthMatterCard:hover .wealthMatterIcon {

    transform: rotate(-6deg) scale(1.08);

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

    box-shadow: 0 10px 30px rgba(212,175,55,.15);

}


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

.wealthMatterContent {

    position: relative;

    z-index: 2;

}


.wealthMatterContent h3 {

    margin: 0 0 12px;

    color: var(--primary);

    font-size: 21px;

    line-height: 1.35;

}


.wealthMatterContent p {

    margin: 0;

    color: var(--text);

    font-size: 14px;

    line-height: 1.75;

}


/* =========================================
   GOLD BOTTOM LINE
========================================= */

.wealthMatterLine {

    position: absolute;

    left: 28px;

    bottom: 22px;

    width: 35px;

    height: 2px;

    background: #D4AF37;

    transition: .4s ease;

}


.wealthMatterCard:hover .wealthMatterLine {

    width: 75px;

}


/* =========================================
   SPECIAL CARD POSITIONS
========================================= */

.wealthMatterCardTwo {

    transform: translateY(25px);

}

.wealthMatterCardTwo:hover {

    transform: translateY(16px);

}


.wealthMatterCardFive {

    transform: translateY(25px);

}

.wealthMatterCardFive:hover {

    transform: translateY(16px);

}

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

@media (max-width: 991px) {

    .wealthMatters {

        padding: 90px 0;

    }

    .wealthMattersHeading {

        margin-bottom: 50px;

    }

    .wealthMattersHeading h2 {

        font-size: 46px;

    }

    .wealthMattersGrid {

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

        gap: 18px;

    }

    .wealthMatterCardTwo,
    .wealthMatterCardFive {

        transform: none;

    }

    .wealthMatterCardTwo:hover,
    .wealthMatterCardFive:hover {

        transform: translateY(-9px);

    }

}


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

@media (max-width: 767px) {

    .wealthMatters {

        padding: 75px 0;

    }

    .wealthMatters .container {

        width: calc(100% - 32px);

    }

    .wealthMattersHeading {

        margin-bottom: 40px;

    }

    .wealthMattersPrefix {

        font-size: 10px;

        letter-spacing: 1.3px;

        padding: 8px 14px;

    }

    .wealthMattersHeading h2 {

        font-size: 37px;

        letter-spacing: -1px;

    }

    .wealthMattersHeading p {

        font-size: 15px;

        line-height: 1.75;

    }

    .wealthMattersGrid {

        grid-template-columns: 1fr;

        gap: 15px;

    }

    .wealthMatterCard {

        min-height: auto;

        padding: 23px;

    }

    .wealthMatterCardTwo,
    .wealthMatterCardFive {

        transform: none;

    }

    .wealthMatterCardTwo:hover,
    .wealthMatterCardFive:hover {

        transform: translateY(-7px);

    }

    .wealthMatterTop {

        margin-bottom: 25px;

    }

    .wealthMatterIcon {

        width: 48px;

        height: 48px;

        font-size: 18px;

    }

    .wealthMatterContent h3 {

        font-size: 19px;

    }

    .wealthMatterContent p {

        font-size: 13px;

        line-height: 1.7;

    }

}


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

@media (max-width: 480px) {

    .wealthMatters {

        padding: 60px 0;

    }

    .wealthMattersHeading h2 {

        font-size: 31px;

    }

    .wealthMattersHeading p {

        font-size: 14px;

    }

    .wealthMatterCard {

        padding: 20px;

        border-radius: 21px;

    }

    .wealthMatterNumber {

        font-size: 11px;

    }

    .wealthMatterIcon {

        width: 44px;

        height: 44px;

        border-radius: 13px;

        font-size: 16px;

    }

    .wealthMatterContent h3 {

        font-size: 18px;

    }

    .wealthMatterContent p {

        font-size: 12.5px;

    }

    .wealthMatterLine {

        left: 20px;

        bottom: 17px;

    }

}

/* Matters Section Ends Here */


/* Approach Section Starts Here */

/* =========================================
   WEALTH CREATION APPROACH
========================================= */

.wealthApproach {

    position: relative;

    padding: 120px 0;

    overflow: hidden;

    background: var(--section);

}


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

.wealthApproach .container {

    width: min(1380px, 92%);

    margin: auto;

    position: relative;

    z-index: 3;

}


/* =========================================
   BACKGROUND GLOW
========================================= */

.wealthApproachGlow {

    position: absolute;

    border-radius: 50%;

    filter: blur(120px);

    pointer-events: none;

}

.wealthApproachGlowOne {

    width: 500px;

    height: 500px;

    left: -280px;

    top: 15%;

    background: rgba(212,175,55,.08);

}

.wealthApproachGlowTwo {

    width: 550px;

    height: 550px;

    right: -300px;

    bottom: -200px;

    background: rgba(3,37,85,.15);

}


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

.wealthApproachHeading {

    max-width: 800px;

    margin: 0 auto 80px;

    text-align: center;

}

.wealthApproachPrefix {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 9px 18px;

    margin-bottom: 22px;

    border-radius: 50px;

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

    background: rgba(212,175,55,.06);

    color: #D4AF37;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

}

.wealthApproachHeading h2 {

    margin: 0 0 20px;

    color: var(--primary);

    font-size: clamp(42px, 5vw, 62px);

    line-height: 1.1;

    letter-spacing: -1.5px;

}

.wealthApproachHeading h2 span {

    display: block;

    color: #D4AF37;

}

.wealthApproachHeading p {

    max-width: 680px;

    margin: auto;

    color: var(--text);

    font-size: 16px;

    line-height: 1.8;

}


/* =========================================
   ROADMAP
========================================= */

.wealthApproachRoadmap {

    position: relative;

    display: grid;

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

    gap: 18px;

}


/* =========================================
   TRACK
========================================= */

.wealthApproachTrack {

    position: absolute;

    top: 38px;

    left: 8%;

    right: 8%;

    height: 2px;

    background: rgba(212,175,55,.14);

    z-index: 1;

}

.wealthApproachProgress {

    width: 100%;

    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        #D4AF37,
        #FFD86A,
        #D4AF37,
        transparent
    );

    box-shadow:
        0 0 12px rgba(212,175,55,.45);

    animation: wealthApproachPulse 3s ease-in-out infinite;

}


/* =========================================
   STEP
========================================= */

.wealthApproachStep {

    position: relative;

    z-index: 3;

    min-width: 0;

}


/* =========================================
   NODE
========================================= */

.wealthApproachNode {

    position: relative;

    z-index: 5;

    width: 76px;

    height: 76px;

    margin: 0 auto 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--section);

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

    box-shadow:

        0 0 0 8px rgba(212,175,55,.035),

        0 0 30px rgba(212,175,55,.08);

    transition: .4s ease;

}

.wealthApproachNode::before {

    content: "";

    position: absolute;

    inset: 7px;

    border-radius: 50%;

    border: 1px dashed rgba(212,175,55,.25);

}

.wealthApproachNode span {

    position: relative;

    z-index: 2;

    color: #D4AF37;

    font-size: 15px;

    font-weight: 800;

    letter-spacing: 1px;

}

.wealthApproachStep:hover .wealthApproachNode {

    transform: scale(1.1);

    background: #D4AF37;

    border-color: #D4AF37;

    box-shadow:

        0 0 0 10px rgba(212,175,55,.06),

        0 0 40px rgba(212,175,55,.25);

}

.wealthApproachStep:hover .wealthApproachNode span {

    color: #032555;

}


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

.wealthApproachCard {

    position: relative;

    min-height: 300px;

    padding: 26px 22px;

    border-radius: 24px;

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

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

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    transition:

        transform .4s ease,

        border-color .4s ease,

        background .4s ease,

        box-shadow .4s ease;

}

.wealthApproachCard:hover {

    transform: translateY(-8px);

    border-color: rgba(212,175,55,.32);

    background: rgba(212,175,55,.055);

    box-shadow:

        0 25px 50px rgba(0,0,0,.15),

        0 0 30px rgba(212,175,55,.04);

}


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

.wealthApproachIcon {

    width: 52px;

    height: 52px;

    margin-bottom: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    background: rgba(212,175,55,.09);

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

    color: #D4AF37;

    font-size: 19px;

    transition: .4s ease;

}

.wealthApproachCard:hover .wealthApproachIcon {

    transform: rotate(-6deg) scale(1.08);

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

}


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

.wealthApproachStepLabel {

    display: block;

    margin-bottom: 8px;

    color: rgba(212,175,55,.65);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


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

.wealthApproachCard h3 {

    margin: 0 0 12px;

    color: var(--primary);

    font-size: 20px;

    line-height: 1.3;

}

.wealthApproachCard p {

    margin: 0;

    color: var(--text);

    font-size: 13px;

    line-height: 1.75;

}


/* =========================================
   BOTTOM STATEMENT
========================================= */

.wealthApproachBottom {

    max-width: 850px;

    margin: 60px auto 0;

    padding: 20px 24px;

    display: flex;

    align-items: center;

    gap: 18px;

    border-radius: 18px;

    background: rgba(212,175,55,.055);

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

}

.wealthApproachBottomIcon {

    flex-shrink: 0;

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    background: rgba(212,175,55,.10);

    color: #D4AF37;

    font-size: 18px;

}

.wealthApproachBottom strong {

    display: block;

    margin-bottom: 4px;

    color: var(--primary);

    font-size: 14px;

}

.wealthApproachBottom span {

    display: block;

    color: var(--text);

    font-size: 12px;

    line-height: 1.6;

}


/* =========================================
   ANIMATION
========================================= */

@keyframes wealthApproachPulse {

    0%,
    100% {

        opacity: .5;

    }

    50% {

        opacity: 1;

    }

}

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

@media (max-width: 1100px) {

    .wealthApproachRoadmap {

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

        row-gap: 45px;

    }

    .wealthApproachTrack {

        display: none;

    }

    .wealthApproachNode {

        margin-bottom: 22px;

    }

    .wealthApproachCard {

        min-height: 270px;

    }

}


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

@media (max-width: 991px) {

    .wealthApproach {

        padding: 90px 0;

    }

    .wealthApproachHeading {

        margin-bottom: 60px;

    }

    .wealthApproachHeading h2 {

        font-size: 46px;

    }

    .wealthApproachRoadmap {

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

        gap: 22px;

    }

    .wealthApproachCard {

        min-height: 250px;

    }

}


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

@media (max-width: 767px) {

    .wealthApproach {

        padding: 75px 0;

    }

    .wealthApproach .container {

        width: calc(100% - 32px);

    }

    .wealthApproachHeading {

        margin-bottom: 45px;

    }

    .wealthApproachPrefix {

        font-size: 10px;

        letter-spacing: 1.3px;

        padding: 8px 14px;

    }

    .wealthApproachHeading h2 {

        font-size: 37px;

        letter-spacing: -1px;

    }

    .wealthApproachHeading p {

        font-size: 14px;

    }


    /* Vertical Timeline */

    .wealthApproachRoadmap {

        display: flex;

        flex-direction: column;

        gap: 28px;

        padding-left: 34px;

    }


    .wealthApproachRoadmap::before {

        content: "";

        position: absolute;

        top: 0;

        bottom: 0;

        left: 38px;

        width: 2px;

        background: linear-gradient(
            to bottom,
            rgba(212,175,55,.05),
            #D4AF37,
            rgba(212,175,55,.05)
        );

    }


    .wealthApproachTrack {

        display: none;

    }


    .wealthApproachStep {

        width: 100%;

    }


    .wealthApproachNode {

        position: absolute;

        left: -34px;

        top: 18px;

        width: 48px;

        height: 48px;

        margin: 0;

    }

    .wealthApproachNode::before {

        inset: 5px;

    }

    .wealthApproachNode span {

        font-size: 11px;

    }


    .wealthApproachCard {

        min-height: auto;

        padding: 22px;

        border-radius: 20px;

    }

    .wealthApproachIcon {

        width: 46px;

        height: 46px;

        margin-bottom: 17px;

        font-size: 17px;

    }

    .wealthApproachCard h3 {

        font-size: 19px;

    }

    .wealthApproachCard p {

        font-size: 13px;

        line-height: 1.7;

    }


    .wealthApproachBottom {

        margin-top: 45px;

        padding: 18px;

    }

}


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

@media (max-width: 480px) {

    .wealthApproach {

        padding: 60px 0;

    }

    .wealthApproachHeading h2 {

        font-size: 31px;

    }

    .wealthApproachHeading p {

        font-size: 13px;

        line-height: 1.7;

    }


    .wealthApproachRoadmap {

        padding-left: 29px;

        gap: 22px;

    }

    .wealthApproachRoadmap::before {

        left: 31px;

    }

    .wealthApproachNode {

        left: -29px;

        top: 15px;

        width: 43px;

        height: 43px;

    }

    .wealthApproachNode span {

        font-size: 10px;

    }

    .wealthApproachCard {

        padding: 19px;

        border-radius: 18px;

    }

    .wealthApproachStepLabel {

        font-size: 9px;

    }

    .wealthApproachCard h3 {

        font-size: 18px;

    }

    .wealthApproachCard p {

        font-size: 12px;

    }


    .wealthApproachBottom {

        align-items: flex-start;

        gap: 12px;

        padding: 15px;

    }

    .wealthApproachBottomIcon {

        width: 40px;

        height: 40px;

        font-size: 15px;

    }

    .wealthApproachBottom strong {

        font-size: 12px;

    }

    .wealthApproachBottom span {

        font-size: 10px;

    }

}

/* Approach Section Ends Here */


/* Strategy Section Starts Here */

/* =========================================
   WEALTH CREATION STRATEGIES
========================================= */

.wealthStrategies {

    position: relative;

    padding: 120px 0;

    overflow: hidden;

    background: var(--section);

}


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

.wealthStrategies .container {

    width: min(1280px, 92%);

    margin: auto;

    position: relative;

    z-index: 3;

}


/* =========================================
   BACKGROUND GLOWS
========================================= */

.wealthStrategiesGlow {

    position: absolute;

    border-radius: 50%;

    filter: blur(120px);

    pointer-events: none;

}

.wealthStrategiesGlowOne {

    width: 450px;

    height: 450px;

    top: -200px;

    left: -250px;

    background: rgba(212,175,55,.08);

}

.wealthStrategiesGlowTwo {

    width: 550px;

    height: 550px;

    right: -300px;

    bottom: -250px;

    background: rgba(3,37,85,.14);

}


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

.wealthStrategiesHeading {

    max-width: 820px;

    margin: 0 auto 65px;

    text-align: center;

}

.wealthStrategiesPrefix {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 9px 18px;

    margin-bottom: 22px;

    border-radius: 50px;

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

    background: rgba(212,175,55,.06);

    color: #D4AF37;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

}

.wealthStrategiesHeading h2 {

    margin: 0 0 20px;

    color: var(--primary);

    font-size: clamp(42px, 5vw, 62px);

    line-height: 1.1;

    letter-spacing: -1.5px;

}

.wealthStrategiesHeading h2 span {

    display: block;

    color: #D4AF37;

}

.wealthStrategiesHeading p {

    max-width: 700px;

    margin: auto;

    color: var(--text);

    font-size: 16px;

    line-height: 1.85;

}


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

.wealthStrategiesGrid {

    display: grid;

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

    gap: 20px;

}


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

.wealthStrategyCard {

    position: relative;

    min-height: 315px;

    padding: 28px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    border-radius: 27px;

    overflow: hidden;

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

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

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    transition:

        transform .45s ease,

        border-color .45s ease,

        background .45s ease,

        box-shadow .45s ease;

}


/* Decorative Glow */

.wealthStrategyCard::before {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    top: -100px;

    right: -100px;

    border-radius: 50%;

    background: rgba(212,175,55,.07);

    filter: blur(8px);

    transition: .5s ease;

}

.wealthStrategyCard:hover {

    transform: translateY(-9px);

    border-color: rgba(212,175,55,.35);

    background: rgba(212,175,55,.055);

    box-shadow:

        0 30px 65px rgba(0,0,0,.16),

        0 0 35px rgba(212,175,55,.05);

}

.wealthStrategyCard:hover::before {

    transform: scale(1.6);

    background: rgba(212,175,55,.12);

}


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

.wealthStrategyCardTop {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.wealthStrategyNumber {

    color: rgba(212,175,55,.45);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 2px;

}


.wealthStrategyIcon {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 16px;

    background: rgba(212,175,55,.09);

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

    color: #D4AF37;

    font-size: 21px;

    transition: .4s ease;

}

.wealthStrategyCard:hover .wealthStrategyIcon {

    transform: rotate(-7deg) scale(1.08);

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

    box-shadow: 0 12px 30px rgba(212,175,55,.12);

}


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

.wealthStrategyCardContent {

    position: relative;

    z-index: 2;

    margin-top: 30px;

}

.wealthStrategyMiniLabel {

    display: inline-block;

    margin-bottom: 9px;

    color: rgba(212,175,55,.65);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.wealthStrategyCardContent h3 {

    margin: 0 0 12px;

    color: var(--primary);

    font-size: 21px;

    line-height: 1.35;

}

.wealthStrategyCardContent p {

    margin: 0;

    color: var(--text);

    font-size: 13px;

    line-height: 1.75;

}


/* =========================================
   GOLD ACCENT
========================================= */

.wealthStrategyAccent {

    position: absolute;

    left: 28px;

    bottom: 20px;

    width: 38px;

    height: 2px;

    background: #D4AF37;

    transition: .4s ease;

}

.wealthStrategyCard:hover .wealthStrategyAccent {

    width: 80px;

}


/* =========================================
   SPECIAL LARGE CARDS
========================================= */

.wealthStrategyCardLarge {

    grid-row: span 1;

}

.wealthStrategyCardWide {

    min-height: 290px;

}


/* =========================================
   BOTTOM MESSAGE
========================================= */

.wealthStrategiesBottom {

    max-width: 850px;

    margin: 55px auto 0;

    padding: 20px 24px;

    display: flex;

    align-items: center;

    gap: 18px;

    border-radius: 18px;

    background: rgba(212,175,55,.055);

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

}

.wealthStrategiesBottomIcon {

    flex-shrink: 0;

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    background: rgba(212,175,55,.10);

    color: #D4AF37;

    font-size: 18px;

}

.wealthStrategiesBottom strong {

    display: block;

    margin-bottom: 4px;

    color: var(--primary);

    font-size: 14px;

}

.wealthStrategiesBottom span {

    display: block;

    color: var(--text);

    font-size: 12px;

    line-height: 1.6;

}

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

@media (max-width: 991px) {

    .wealthStrategies {

        padding: 90px 0;

    }

    .wealthStrategiesHeading {

        margin-bottom: 50px;

    }

    .wealthStrategiesHeading h2 {

        font-size: 46px;

    }

    .wealthStrategiesGrid {

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

        gap: 18px;

    }

    .wealthStrategyCard {

        min-height: 285px;

    }

}


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

@media (max-width: 767px) {

    .wealthStrategies {

        padding: 75px 0;

    }

    .wealthStrategies .container {

        width: calc(100% - 32px);

    }

    .wealthStrategiesHeading {

        margin-bottom: 40px;

    }

    .wealthStrategiesPrefix {

        font-size: 10px;

        letter-spacing: 1.3px;

        padding: 8px 14px;

    }

    .wealthStrategiesHeading h2 {

        font-size: 37px;

        letter-spacing: -1px;

    }

    .wealthStrategiesHeading p {

        font-size: 14px;

        line-height: 1.75;

    }


    .wealthStrategiesGrid {

        grid-template-columns: 1fr;

        gap: 15px;

    }

    .wealthStrategyCard,
    .wealthStrategyCardWide {

        min-height: auto;

        padding: 23px;

    }

    .wealthStrategyCardContent {

        margin-top: 27px;

    }

    .wealthStrategyIcon {

        width: 48px;

        height: 48px;

        font-size: 18px;

    }

    .wealthStrategyCardContent h3 {

        font-size: 19px;

    }

    .wealthStrategyCardContent p {

        font-size: 13px;

        line-height: 1.7;

    }

}


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

@media (max-width: 480px) {

    .wealthStrategies {

        padding: 60px 0;

    }

    .wealthStrategiesHeading h2 {

        font-size: 31px;

    }

    .wealthStrategiesHeading p {

        font-size: 13px;

    }

    .wealthStrategyCard,
    .wealthStrategyCardWide {

        padding: 20px;

        border-radius: 21px;

    }

    .wealthStrategyNumber {

        font-size: 11px;

    }

    .wealthStrategyIcon {

        width: 44px;

        height: 44px;

        border-radius: 13px;

        font-size: 16px;

    }

    .wealthStrategyMiniLabel {

        font-size: 8px;

    }

    .wealthStrategyCardContent h3 {

        font-size: 18px;

    }

    .wealthStrategyCardContent p {

        font-size: 12px;

    }

    .wealthStrategiesBottom {

        align-items: flex-start;

        gap: 12px;

        padding: 15px;

    }

    .wealthStrategiesBottomIcon {

        width: 40px;

        height: 40px;

        font-size: 15px;

    }

    .wealthStrategiesBottom strong {

        font-size: 12px;

    }

    .wealthStrategiesBottom span {

        font-size: 10px;

    }

}

/* Strategy Section Ends Here */

/* Goal Section Starts Here */

/* =========================================
   GOAL-BASED WEALTH CREATION
========================================= */

.goalWealth {

    position: relative;

    padding: 120px 0;

    overflow: hidden;

    background: var(--section);

}


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

.goalWealth .container {

    width: min(1280px, 92%);

    margin: auto;

    position: relative;

    z-index: 3;

}


/* =========================================
   BACKGROUND GLOW
========================================= */

.goalWealthGlow {

    position: absolute;

    border-radius: 50%;

    filter: blur(120px);

    pointer-events: none;

}

.goalWealthGlowOne {

    width: 500px;

    height: 500px;

    left: -280px;

    top: 10%;

    background: rgba(212,175,55,.08);

}

.goalWealthGlowTwo {

    width: 500px;

    height: 500px;

    right: -280px;

    bottom: -200px;

    background: rgba(3,37,85,.14);

}


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

.goalWealthHeading {

    max-width: 800px;

    margin: 0 auto 75px;

    text-align: center;

}

.goalWealthPrefix {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 9px 18px;

    margin-bottom: 22px;

    border-radius: 50px;

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

    background: rgba(212,175,55,.06);

    color: #D4AF37;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

}

.goalWealthHeading h2 {

    margin: 0 0 20px;

    color: var(--primary);

    font-size: clamp(42px, 5vw, 62px);

    line-height: 1.1;

    letter-spacing: -1.5px;

}

.goalWealthHeading h2 span {

    display: block;

    color: #D4AF37;

}

.goalWealthHeading p {

    max-width: 700px;

    margin: auto;

    color: var(--text);

    font-size: 16px;

    line-height: 1.85;

}


/* =========================================
   GOAL SYSTEM
========================================= */

.goalWealthSystem {

    position: relative;

    width: 100%;

    max-width: 1120px;

    height: 700px;

    margin: auto;

}


/* =========================================
   CENTER HUB
========================================= */

.goalWealthCenter {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 220px;

    height: 220px;

    transform: translate(-50%, -50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(212,175,55,.12),
            rgba(255,255,255,.025) 60%,
            transparent 70%
        );

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

    box-shadow:

        0 0 0 18px rgba(212,175,55,.025),

        0 0 0 38px rgba(212,175,55,.012),

        0 0 70px rgba(212,175,55,.10);

    z-index: 8;

}


.goalWealthCenterRing {

    width: 88px;

    height: 88px;

    margin-bottom: 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    border: 1px dashed rgba(212,175,55,.4);

    animation: goalWealthRotate 18s linear infinite;

}

.goalWealthCenterIcon {

    width: 62px;

    height: 62px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #D4AF37,
        #FFD86A
    );

    color: #032555;

    font-size: 25px;

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

    animation: goalWealthCounterRotate 18s linear infinite;

}

.goalWealthCenter span {

    margin-bottom: 4px;

    color: rgba(212,175,55,.7);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

}

.goalWealthCenter strong {

    color: var(--primary);

    font-size: 15px;

}


/* =========================================
   CARDS
========================================= */

.goalWealthCard {

    position: absolute;

    width: 310px;

    min-height: 135px;

    padding: 20px;

    display: grid;

    grid-template-columns: 52px 1fr;

    column-gap: 15px;

    align-items: center;

    border-radius: 22px;

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

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

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);

    transition:

        transform .4s ease,

        border-color .4s ease,

        background .4s ease,

        box-shadow .4s ease;

    z-index: 7;

}


.goalWealthCard:hover {

    border-color: rgba(212,175,55,.35);

    background: rgba(212,175,55,.055);

    box-shadow:

        0 20px 45px rgba(0,0,0,.15),

        0 0 30px rgba(212,175,55,.05);

}


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

.goalWealthCardIcon {

    grid-row: span 2;

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    background: rgba(212,175,55,.09);

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

    color: #D4AF37;

    font-size: 20px;

    transition: .4s ease;

}

.goalWealthCard:hover .goalWealthCardIcon {

    transform: scale(1.1) rotate(-5deg);

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

}


/* =========================================
   CARD NUMBER
========================================= */

.goalWealthCardNumber {

    margin-bottom: 3px;

    color: rgba(212,175,55,.5);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


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

.goalWealthCard h3 {

    margin: 0 0 7px;

    color: var(--primary);

    font-size: 18px;

    line-height: 1.3;

}

.goalWealthCard p {

    margin: 0;

    color: var(--text);

    font-size: 12px;

    line-height: 1.6;

}


/* =========================================
   CARD POSITIONS
========================================= */

.goalWealthCardOne {

    top: 2%;

    left: 0;

}

.goalWealthCardTwo {

    top: 37%;

    left: 0;

}

.goalWealthCardThree {

    bottom: 2%;

    left: 0;

}


.goalWealthCardFour {

    top: 2%;

    right: 0;

}

.goalWealthCardFive {

    top: 37%;

    right: 0;

}

.goalWealthCardSix {

    bottom: 2%;

    right: 0;

}


/* =========================================
   CONNECTION LINES
========================================= */

.goalWealthLine {

    position: absolute;

    height: 1px;

    background: linear-gradient(
        90deg,
        rgba(212,175,55,.05),
        rgba(212,175,55,.55),
        rgba(212,175,55,.05)
    );

    transform-origin: center;

    z-index: 2;

    opacity: .7;

}


/* Left */

.goalWealthLineOne {

    width: 230px;

    top: 19%;

    left: 26%;

    transform: rotate(24deg);

}

.goalWealthLineTwo {

    width: 230px;

    top: 50%;

    left: 26%;

}

.goalWealthLineThree {

    width: 230px;

    bottom: 19%;

    left: 26%;

    transform: rotate(-24deg);

}


/* Right */

.goalWealthLineFour {

    width: 230px;

    top: 19%;

    right: 26%;

    transform: rotate(-24deg);

}

.goalWealthLineFive {

    width: 230px;

    top: 50%;

    right: 26%;

}

.goalWealthLineSix {

    width: 230px;

    bottom: 19%;

    right: 26%;

    transform: rotate(24deg);

}


/* =========================================
   BOTTOM MESSAGE
========================================= */

.goalWealthBottom {

    max-width: 850px;

    margin: 60px auto 0;

    padding: 20px 24px;

    display: flex;

    align-items: center;

    gap: 18px;

    border-radius: 18px;

    background: rgba(212,175,55,.055);

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

}

.goalWealthBottomIcon {

    flex-shrink: 0;

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    background: rgba(212,175,55,.10);

    color: #D4AF37;

    font-size: 18px;

}

.goalWealthBottom strong {

    display: block;

    margin-bottom: 4px;

    color: var(--primary);

    font-size: 14px;

}

.goalWealthBottom span {

    display: block;

    color: var(--text);

    font-size: 12px;

    line-height: 1.6;

}


/* =========================================
   ANIMATIONS
========================================= */

@keyframes goalWealthRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

@keyframes goalWealthCounterRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }

}


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

@media (max-width: 1100px) {

    .goalWealthSystem {

        height: 660px;

    }

    .goalWealthCard {

        width: 280px;

    }

    .goalWealthLine {

        width: 190px;

    }

}


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

@media (max-width: 991px) {

    .goalWealth {

        padding: 90px 0;

    }

    .goalWealthHeading {

        margin-bottom: 60px;

    }

    .goalWealthHeading h2 {

        font-size: 46px;

    }

    .goalWealthSystem {

        height: auto;

        display: grid;

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

        gap: 18px;

    }


    /* Hide central connections */

    .goalWealthCenter {

        position: relative;

        top: auto;

        left: auto;

        transform: none;

        grid-column: 1 / -1;

        grid-row: 1;

        width: 180px;

        height: 180px;

        margin: 0 auto 20px;

    }


    .goalWealthCard {

        position: relative;

        top: auto;

        left: auto;

        right: auto;

        bottom: auto;

        width: 100%;

        min-height: 150px;

    }


    .goalWealthLine {

        display: none;

    }

}


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

@media (max-width: 767px) {

    .goalWealth {

        padding: 75px 0;

    }

    .goalWealth .container {

        width: calc(100% - 32px);

    }

    .goalWealthHeading {

        margin-bottom: 45px;

    }

    .goalWealthPrefix {

        font-size: 10px;

        letter-spacing: 1.3px;

        padding: 8px 14px;

    }

    .goalWealthHeading h2 {

        font-size: 37px;

        letter-spacing: -1px;

    }

    .goalWealthHeading p {

        font-size: 14px;

        line-height: 1.75;

    }


    .goalWealthSystem {

        grid-template-columns: 1fr;

        gap: 15px;

    }


    .goalWealthCenter {

        grid-column: auto;

        width: 155px;

        height: 155px;

        margin-bottom: 20px;

    }

    .goalWealthCenterRing {

        width: 65px;

        height: 65px;

        margin-bottom: 10px;

    }

    .goalWealthCenterIcon {

        width: 48px;

        height: 48px;

        font-size: 19px;

    }

    .goalWealthCenter span {

        font-size: 8px;

    }

    .goalWealthCenter strong {

        font-size: 12px;

    }


    .goalWealthCard {

        min-height: 125px;

        padding: 19px;

        grid-template-columns: 48px 1fr;

        gap: 13px;

        border-radius: 20px;

    }


    .goalWealthCardIcon {

        width: 48px;

        height: 48px;

        border-radius: 13px;

        font-size: 18px;

    }

    .goalWealthCardNumber {

        font-size: 8px;

    }

    .goalWealthCard h3 {

        font-size: 18px;

    }

    .goalWealthCard p {

        font-size: 12px;

        line-height: 1.6;

    }


    .goalWealthBottom {

        margin-top: 45px;

        padding: 18px;

    }

}


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

@media (max-width: 480px) {

    .goalWealth {

        padding: 60px 0;

    }

    .goalWealthHeading h2 {

        font-size: 31px;

    }

    .goalWealthHeading p {

        font-size: 13px;

    }

    .goalWealthCard {

        padding: 17px;

        grid-template-columns: 43px 1fr;

        gap: 11px;

    }

    .goalWealthCardIcon {

        width: 43px;

        height: 43px;

        font-size: 16px;

    }

    .goalWealthCard h3 {

        font-size: 17px;

    }

    .goalWealthCard p {

        font-size: 11.5px;

    }

    .goalWealthBottom {

        align-items: flex-start;

        gap: 12px;

        padding: 15px;

    }

    .goalWealthBottomIcon {

        width: 40px;

        height: 40px;

        font-size: 15px;

    }

    .goalWealthBottom strong {

        font-size: 12px;

    }

    .goalWealthBottom span {

        font-size: 10px;

    }

}

/* Goal Section Ends Here */

/* Compounding Section Starts Here */

/* =========================================
   POWER OF COMPOUNDING
========================================= */

.compoundingPower {

    position: relative;

    padding: 130px 0;

    overflow: hidden;

    background: var(--section);

}


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

.compoundingPower .container {

    width: min(1280px, 92%);

    margin: auto;

    position: relative;

    z-index: 5;

}


/* =========================================
   BACKGROUND GLOWS
========================================= */

.compoundingGlow {

    position: absolute;

    border-radius: 50%;

    filter: blur(130px);

    pointer-events: none;

}

.compoundingGlowOne {

    width: 500px;

    height: 500px;

    left: -280px;

    top: 10%;

    background: rgba(212,175,55,.08);

}

.compoundingGlowTwo {

    width: 600px;

    height: 600px;

    right: -350px;

    bottom: -300px;

    background: rgba(3,37,85,.15);

}


/* =========================================
   GRAPH
========================================= */

.compoundingGraph {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 80px;

    height: 520px;

    opacity: .30;

    pointer-events: none;

    z-index: 1;

}

.compoundingGraphSvg {

    width: 100%;

    height: 100%;

    overflow: visible;

}


/* Grid */

.compoundingGraphSvg line {

    stroke: rgba(212,175,55,.12);

    stroke-width: 1;

}


/* Graph Area */

.compoundingGraphArea {

    fill: url(#compoundingGradient);

    opacity: .12;

}


/* Graph Line */

.compoundingGraphLine {

    fill: none;

    stroke: #D4AF37;

    stroke-width: 4;

    stroke-linecap: round;

    stroke-linejoin: round;

    stroke-dasharray: 1800;

    stroke-dashoffset: 1800;

    animation:
        compoundingGraphDraw 5s ease-out forwards,
        compoundingGraphGlow 3s ease-in-out 5s infinite;

}


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

.compoundingHeading {

    max-width: 780px;

    margin: 0 auto 85px;

    text-align: center;

}

.compoundingPrefix {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 9px 18px;

    margin-bottom: 22px;

    border-radius: 50px;

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

    background: rgba(212,175,55,.06);

    color: #D4AF37;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

}

.compoundingHeading h2 {

    margin: 0 0 20px;

    color: var(--primary);

    font-size: clamp(44px, 5vw, 64px);

    line-height: 1.08;

    letter-spacing: -1.5px;

}

.compoundingHeading h2 span {

    display: block;

    color: #D4AF37;

}

.compoundingHeading p {

    max-width: 690px;

    margin: auto;

    color: var(--text);

    font-size: 16px;

    line-height: 1.85;

}


/* =========================================
   JOURNEY
========================================= */

.compoundingJourney {

    position: relative;

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr
        auto
        1fr
        auto
        1fr
        auto
        1fr;

    align-items: center;

    gap: 14px;

}


/* =========================================
   STEP
========================================= */

.compoundingStep {

    position: relative;

    min-height: 230px;

    padding: 27px 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    border-radius: 25px;

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

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

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);

    transition:

        transform .4s ease,

        border-color .4s ease,

        background .4s ease,

        box-shadow .4s ease;

}

.compoundingStep:hover {

    transform: translateY(-9px);

    border-color: rgba(212,175,55,.35);

    background: rgba(212,175,55,.055);

    box-shadow:

        0 25px 55px rgba(0,0,0,.16),

        0 0 30px rgba(212,175,55,.05);

}


/* =========================================
   NUMBER
========================================= */

.compoundingStepNumber {

    position: absolute;

    top: 15px;

    right: 18px;

    color: rgba(212,175,55,.40);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


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

.compoundingStepIcon {

    width: 65px;

    height: 65px;

    margin-bottom: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 19px;

    background: rgba(212,175,55,.09);

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

    color: #D4AF37;

    font-size: 22px;

    transition: .4s ease;

}

.compoundingStep:hover .compoundingStepIcon {

    transform: scale(1.1) rotate(-5deg);

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

    box-shadow:

        0 10px 30px rgba(212,175,55,.12);

}


/* =========================================
   TEXT
========================================= */

.compoundingStep h3 {

    margin: 0 0 8px;

    color: var(--primary);

    font-size: 18px;

    line-height: 1.3;

}

.compoundingStep span {

    color: var(--text);

    font-size: 11px;

    line-height: 1.55;

}


/* =========================================
   FINAL STEP
========================================= */

.compoundingFinal {

    border-color: rgba(212,175,55,.28);

    background:

        linear-gradient(
            145deg,
            rgba(212,175,55,.10),
            rgba(255,255,255,.035)
        );

}

.compoundingFinal .compoundingStepIcon {

    background: linear-gradient(
        135deg,
        #D4AF37,
        #FFD86A
    );

    color: #032555;

    box-shadow:

        0 0 35px rgba(212,175,55,.18);

}


/* =========================================
   ARROWS
========================================= */

.compoundingArrow {

    display: flex;

    align-items: center;

    justify-content: center;

    color: rgba(212,175,55,.65);

    font-size: 18px;

    animation: compoundingArrowPulse 2s ease-in-out infinite;

}


/* =========================================
   BOTTOM MESSAGE
========================================= */

.compoundingBottom {

    max-width: 850px;

    margin: 65px auto 0;

    padding: 20px 24px;

    display: flex;

    align-items: center;

    gap: 18px;

    border-radius: 18px;

    background: rgba(212,175,55,.055);

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

}

.compoundingBottomIcon {

    flex-shrink: 0;

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    background: rgba(212,175,55,.10);

    color: #D4AF37;

    font-size: 18px;

}

.compoundingBottom strong {

    display: block;

    margin-bottom: 4px;

    color: var(--primary);

    font-size: 14px;

}

.compoundingBottom span {

    display: block;

    color: var(--text);

    font-size: 12px;

    line-height: 1.6;

}


/* =========================================
   ANIMATIONS
========================================= */

@keyframes compoundingGraphDraw {

    to {

        stroke-dashoffset: 0;

    }

}

@keyframes compoundingGraphGlow {

    0%,
    100% {

        filter: drop-shadow(
            0 0 3px rgba(212,175,55,.25)
        );

    }

    50% {

        filter: drop-shadow(
            0 0 12px rgba(212,175,55,.65)
        );

    }

}

@keyframes compoundingArrowPulse {

    0%,
    100% {

        transform: translateX(0);

        opacity: .45;

    }

    50% {

        transform: translateX(5px);

        opacity: 1;

    }

}

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

@media (max-width: 991px) {

    .compoundingPower {

        padding: 95px 0;

    }

    .compoundingHeading {

        margin-bottom: 60px;

    }

    .compoundingHeading h2 {

        font-size: 48px;

    }

    .compoundingJourney {

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

        gap: 18px;

    }

    .compoundingArrow {

        display: none;

    }

    .compoundingStep {

        min-height: 220px;

    }

    .compoundingGraph {

        height: 600px;

        bottom: 40px;

    }

}


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

@media (max-width: 767px) {

    .compoundingPower {

        padding: 75px 0;

    }

    .compoundingPower .container {

        width: calc(100% - 32px);

    }

    .compoundingHeading {

        margin-bottom: 45px;

    }

    .compoundingPrefix {

        font-size: 10px;

        letter-spacing: 1.3px;

        padding: 8px 14px;

    }

    .compoundingHeading h2 {

        font-size: 37px;

        letter-spacing: -1px;

    }

    .compoundingHeading p {

        font-size: 14px;

        line-height: 1.75;

    }


    .compoundingJourney {

        grid-template-columns: 1fr;

        gap: 14px;

    }

    .compoundingStep {

        min-height: 150px;

        padding: 22px;

    }

    .compoundingStepIcon {

        width: 52px;

        height: 52px;

        margin-bottom: 14px;

        border-radius: 15px;

        font-size: 18px;

    }

    .compoundingStep h3 {

        font-size: 18px;

    }

    .compoundingStep span {

        font-size: 11px;

    }


    /* Vertical arrows */

    .compoundingArrow {

        display: flex;

        height: 12px;

        transform: rotate(90deg);

        font-size: 15px;

    }


    .compoundingGraph {

        height: 700px;

        bottom: 0;

        opacity: .16;

    }


    .compoundingBottom {

        margin-top: 45px;

        padding: 18px;

    }

}


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

@media (max-width: 480px) {

    .compoundingPower {

        padding: 60px 0;

    }

    .compoundingHeading h2 {

        font-size: 31px;

    }

    .compoundingHeading p {

        font-size: 13px;

    }

    .compoundingStep {

        min-height: 140px;

        padding: 19px;

        border-radius: 20px;

    }

    .compoundingStepIcon {

        width: 46px;

        height: 46px;

        margin-bottom: 11px;

        font-size: 16px;

    }

    .compoundingStep h3 {

        font-size: 17px;

    }

    .compoundingStep span {

        font-size: 10px;

    }

    .compoundingStepNumber {

        top: 12px;

        right: 14px;

        font-size: 8px;

    }

    .compoundingBottom {

        align-items: flex-start;

        gap: 12px;

        padding: 15px;

    }

    .compoundingBottomIcon {

        width: 40px;

        height: 40px;

        font-size: 15px;

    }

    .compoundingBottom strong {

        font-size: 12px;

    }

    .compoundingBottom span {

        font-size: 10px;

    }

}

/* Compounding Section Ends Here */

/* For Whom Section Starts Here */

/* =========================================
   WHO IS WEALTH CREATION FOR?
========================================= */

.wealthProfiles {

    position: relative;

    padding: 120px 0;

    overflow: hidden;

    background: var(--section);

}


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

.wealthProfiles .container {

    width: min(1280px, 92%);

    margin: auto;

    position: relative;

    z-index: 3;

}


/* =========================================
   BACKGROUND GLOW
========================================= */

.wealthProfilesGlow {

    position: absolute;

    border-radius: 50%;

    filter: blur(120px);

    pointer-events: none;

}

.wealthProfilesGlowOne {

    width: 480px;

    height: 480px;

    left: -270px;

    top: 5%;

    background: rgba(212,175,55,.08);

}

.wealthProfilesGlowTwo {

    width: 550px;

    height: 550px;

    right: -320px;

    bottom: -250px;

    background: rgba(3,37,85,.15);

}


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

.wealthProfilesHeading {

    max-width: 820px;

    margin: 0 auto 65px;

    text-align: center;

}

.wealthProfilesPrefix {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 9px 18px;

    margin-bottom: 22px;

    border-radius: 50px;

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

    background: rgba(212,175,55,.06);

    color: #D4AF37;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

}

.wealthProfilesHeading h2 {

    margin: 0 0 20px;

    color: var(--primary);

    font-size: clamp(42px, 5vw, 62px);

    line-height: 1.1;

    letter-spacing: -1.5px;

}

.wealthProfilesHeading h2 span {

    display: block;

    color: #D4AF37;

}

.wealthProfilesHeading p {

    max-width: 720px;

    margin: auto;

    color: var(--text);

    font-size: 16px;

    line-height: 1.85;

}


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

.wealthProfilesGrid {

    display: grid;

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

    gap: 20px;

}


/* =========================================
   PROFILE CARD
========================================= */

.wealthProfileCard {

    position: relative;

    min-height: 320px;

    padding: 28px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;

    border-radius: 27px;

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

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

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);

    transition:

        transform .45s ease,

        border-color .45s ease,

        background .45s ease,

        box-shadow .45s ease;

}


/* Decorative Glow */

.wealthProfileCard::before {

    content: "";

    position: absolute;

    width: 190px;

    height: 190px;

    top: -105px;

    right: -105px;

    border-radius: 50%;

    background: rgba(212,175,55,.07);

    filter: blur(5px);

    transition: .5s ease;

}

.wealthProfileCard:hover {

    transform: translateY(-9px);

    border-color: rgba(212,175,55,.35);

    background: rgba(212,175,55,.055);

    box-shadow:

        0 28px 60px rgba(0,0,0,.16),

        0 0 35px rgba(212,175,55,.05);

}

.wealthProfileCard:hover::before {

    transform: scale(1.5);

    background: rgba(212,175,55,.12);

}


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

.wealthProfileTop {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.wealthProfileNumber {

    color: rgba(212,175,55,.42);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 2px;

}

.wealthProfileIcon {

    width: 57px;

    height: 57px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 17px;

    background: rgba(212,175,55,.09);

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

    color: #D4AF37;

    font-size: 21px;

    transition: .4s ease;

}

.wealthProfileCard:hover .wealthProfileIcon {

    transform: rotate(-7deg) scale(1.08);

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

    box-shadow:

        0 12px 30px rgba(212,175,55,.12);

}


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

.wealthProfileContent {

    position: relative;

    z-index: 2;

    margin-top: 30px;

}

.wealthProfileLabel {

    display: inline-block;

    margin-bottom: 9px;

    color: rgba(212,175,55,.65);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.wealthProfileContent h3 {

    margin: 0 0 12px;

    color: var(--primary);

    font-size: 21px;

    line-height: 1.3;

}

.wealthProfileContent p {

    margin: 0;

    color: var(--text);

    font-size: 13px;

    line-height: 1.75;

}


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

.wealthProfileBottom {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 25px;

    padding-top: 15px;

    border-top: 1px solid rgba(255,255,255,.08);

}

.wealthProfileBottom span {

    color: rgba(212,175,55,.75);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

}

.wealthProfileBottom i {

    color: #D4AF37;

    font-size: 12px;

    transition: .35s ease;

}

.wealthProfileCard:hover .wealthProfileBottom i {

    transform: translateX(6px);

}


/* =========================================
   BOTTOM STATEMENT
========================================= */

.wealthProfilesBottom {

    max-width: 850px;

    margin: 55px auto 0;

    padding: 20px 24px;

    display: flex;

    align-items: center;

    gap: 18px;

    border-radius: 18px;

    background: rgba(212,175,55,.055);

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

}

.wealthProfilesBottomIcon {

    flex-shrink: 0;

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    background: rgba(212,175,55,.10);

    color: #D4AF37;

    font-size: 18px;

}

.wealthProfilesBottom strong {

    display: block;

    margin-bottom: 4px;

    color: var(--primary);

    font-size: 14px;

}

.wealthProfilesBottom span {

    display: block;

    color: var(--text);

    font-size: 12px;

    line-height: 1.6;

}

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

@media (max-width: 991px) {

    .wealthProfiles {

        padding: 90px 0;

    }

    .wealthProfilesHeading {

        margin-bottom: 50px;

    }

    .wealthProfilesHeading h2 {

        font-size: 46px;

    }

    .wealthProfilesGrid {

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

        gap: 18px;

    }

    .wealthProfileCard {

        min-height: 290px;

    }

}


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

@media (max-width: 767px) {

    .wealthProfiles {

        padding: 75px 0;

    }

    .wealthProfiles .container {

        width: calc(100% - 32px);

    }

    .wealthProfilesHeading {

        margin-bottom: 40px;

    }

    .wealthProfilesPrefix {

        font-size: 10px;

        letter-spacing: 1.3px;

        padding: 8px 14px;

    }

    .wealthProfilesHeading h2 {

        font-size: 37px;

        letter-spacing: -1px;

    }

    .wealthProfilesHeading p {

        font-size: 14px;

        line-height: 1.75;

    }


    .wealthProfilesGrid {

        grid-template-columns: 1fr;

        gap: 15px;

    }


    .wealthProfileCard {

        min-height: auto;

        padding: 23px;

        border-radius: 22px;

    }

    .wealthProfileIcon {

        width: 49px;

        height: 49px;

        border-radius: 14px;

        font-size: 18px;

    }

    .wealthProfileContent {

        margin-top: 25px;

    }

    .wealthProfileContent h3 {

        font-size: 19px;

    }

    .wealthProfileContent p {

        font-size: 13px;

        line-height: 1.7;

    }

    .wealthProfileBottom {

        margin-top: 22px;

    }

}


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

@media (max-width: 480px) {

    .wealthProfiles {

        padding: 60px 0;

    }

    .wealthProfilesHeading h2 {

        font-size: 31px;

    }

    .wealthProfilesHeading p {

        font-size: 13px;

    }

    .wealthProfileCard {

        padding: 20px;

        border-radius: 20px;

    }

    .wealthProfileNumber {

        font-size: 11px;

    }

    .wealthProfileIcon {

        width: 44px;

        height: 44px;

        border-radius: 12px;

        font-size: 16px;

    }

    .wealthProfileLabel {

        font-size: 8px;

    }

    .wealthProfileContent h3 {

        font-size: 18px;

    }

    .wealthProfileContent p {

        font-size: 12px;

    }

    .wealthProfileBottom span {

        font-size: 8px;

    }

    .wealthProfilesBottom {

        align-items: flex-start;

        gap: 12px;

        padding: 15px;

    }

    .wealthProfilesBottomIcon {

        width: 40px;

        height: 40px;

        font-size: 15px;

    }

    .wealthProfilesBottom strong {

        font-size: 12px;

    }

    .wealthProfilesBottom span {

        font-size: 10px;

    }

}

/* For Whom Section Ends Here */

/* Benefits Section Starts Here */

/* =========================================
   BENEFITS OF PROFESSIONAL WEALTH PLANNING
========================================= */

.wealthBenefits {

    position: relative;

    padding: 120px 0;

    overflow: hidden;

    background: var(--section);

}


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

.wealthBenefits .container {

    width: min(1280px, 92%);

    margin: auto;

    position: relative;

    z-index: 3;

}


/* =========================================
   BACKGROUND GLOW
========================================= */

.wealthBenefitsGlow {

    position: absolute;

    border-radius: 50%;

    filter: blur(130px);

    pointer-events: none;

}

.wealthBenefitsGlowOne {

    width: 500px;

    height: 500px;

    left: -300px;

    top: 10%;

    background: rgba(212,175,55,.08);

}

.wealthBenefitsGlowTwo {

    width: 550px;

    height: 550px;

    right: -320px;

    bottom: -250px;

    background: rgba(3,37,85,.15);

}


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

.wealthBenefitsHeading {

    max-width: 820px;

    margin: 0 auto 75px;

    text-align: center;

}

.wealthBenefitsPrefix {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 9px 18px;

    margin-bottom: 22px;

    border-radius: 50px;

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

    background: rgba(212,175,55,.06);

    color: #D4AF37;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

}

.wealthBenefitsHeading h2 {

    margin: 0 0 20px;

    color: var(--primary);

    font-size: clamp(42px, 5vw, 62px);

    line-height: 1.1;

    letter-spacing: -1.5px;

}

.wealthBenefitsHeading h2 span {

    display: block;

    color: #D4AF37;

}

.wealthBenefitsHeading p {

    max-width: 710px;

    margin: auto;

    color: var(--text);

    font-size: 16px;

    line-height: 1.85;

}


/* =========================================
   MAIN WRAPPER
========================================= */

.wealthBenefitsWrapper {

    position: relative;

    display: grid;

    grid-template-columns: 1fr 300px 1fr;

    align-items: center;

    gap: 55px;

}


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

.wealthBenefitsColumn {

    display: flex;

    flex-direction: column;

    gap: 20px;

}


/* =========================================
   BENEFIT CARD
========================================= */

.wealthBenefitCard {

    position: relative;

    min-height: 150px;

    padding: 23px;

    display: flex;

    align-items: center;

    gap: 18px;

    border-radius: 23px;

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

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

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);

    transition:

        transform .45s ease,

        border-color .45s ease,

        background .45s ease,

        box-shadow .45s ease;

}


/* Decorative Gold Line */

.wealthBenefitCard::after {

    content: "";

    position: absolute;

    top: 20px;

    bottom: 20px;

    width: 2px;

    background: #D4AF37;

    opacity: .35;

    transition: .4s ease;

}

.wealthBenefitsLeft .wealthBenefitCard::after {

    left: 0;

}

.wealthBenefitsRight .wealthBenefitCard::after {

    right: 0;

}


.wealthBenefitCard:hover {

    border-color: rgba(212,175,55,.35);

    background: rgba(212,175,55,.055);

    box-shadow:

        0 25px 55px rgba(0,0,0,.15),

        0 0 30px rgba(212,175,55,.05);

}

.wealthBenefitsLeft .wealthBenefitCard:hover {

    transform: translateX(8px);

}

.wealthBenefitsRight .wealthBenefitCard:hover {

    transform: translateX(-8px);

}

.wealthBenefitCard:hover::after {

    opacity: 1;

}


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

.wealthBenefitIcon {

    flex-shrink: 0;

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 17px;

    background: rgba(212,175,55,.09);

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

    color: #D4AF37;

    font-size: 21px;

    transition: .4s ease;

}

.wealthBenefitCard:hover .wealthBenefitIcon {

    transform: scale(1.08);

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

    box-shadow:

        0 10px 30px rgba(212,175,55,.10);

}


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

.wealthBenefitContent {

    flex: 1;

}

.wealthBenefitContent > span {

    display: block;

    margin-bottom: 5px;

    color: rgba(212,175,55,.45);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;

}

.wealthBenefitContent h3 {

    margin: 0 0 7px;

    color: var(--primary);

    font-size: 18px;

    line-height: 1.3;

}

.wealthBenefitContent p {

    margin: 0;

    color: var(--text);

    font-size: 12px;

    line-height: 1.65;

}


/* =========================================
   CENTER HUB
========================================= */

.wealthBenefitsCenter {

    position: relative;

    width: 300px;

    height: 300px;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* =========================================
   ORBITS
========================================= */

.wealthBenefitsOrbit {

    position: absolute;

    border-radius: 50%;

    border: 1px dashed rgba(212,175,55,.20);

}

.wealthBenefitsOrbitOne {

    width: 270px;

    height: 270px;

    animation: wealthBenefitsOrbit 18s linear infinite;

}

.wealthBenefitsOrbitTwo {

    width: 220px;

    height: 220px;

    border-color: rgba(212,175,55,.12);

    animation: wealthBenefitsOrbitReverse 14s linear infinite;

}


/* =========================================
   CENTER CIRCLE
========================================= */

.wealthBenefitsCenterCircle {

    position: relative;

    z-index: 5;

    width: 190px;

    height: 190px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(212,175,55,.14),
            rgba(255,255,255,.035) 65%,
            transparent 70%
        );

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

    box-shadow:

        0 0 55px rgba(212,175,55,.10),

        inset 0 0 30px rgba(212,175,55,.04);

}


.wealthBenefitsLogoIcon {

    width: 52px;

    height: 52px;

    margin-bottom: 9px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    background: linear-gradient(
        135deg,
        #D4AF37,
        #FFD86A
    );

    color: #032555;

    font-size: 20px;

    box-shadow:

        0 0 30px rgba(212,175,55,.20);

}

.wealthBenefitsCenterCircle span {

    color: rgba(212,175,55,.7);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 2px;

}

.wealthBenefitsCenterCircle strong {

    color: #D4AF37;

    font-size: 20px;

    line-height: 1.2;

}

.wealthBenefitsCenterCircle small {

    max-width: 110px;

    margin-top: 6px;

    color: var(--text);

    font-size: 9px;

    line-height: 1.4;

}


/* =========================================
   BOTTOM MESSAGE
========================================= */

.wealthBenefitsBottom {

    max-width: 850px;

    margin: 65px auto 0;

    padding: 20px 24px;

    display: flex;

    align-items: center;

    gap: 18px;

    border-radius: 18px;

    background: rgba(212,175,55,.055);

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

}

.wealthBenefitsBottomIcon {

    flex-shrink: 0;

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    background: rgba(212,175,55,.10);

    color: #D4AF37;

    font-size: 18px;

}

.wealthBenefitsBottom strong {

    display: block;

    margin-bottom: 4px;

    color: var(--primary);

    font-size: 14px;

}

.wealthBenefitsBottom span {

    display: block;

    color: var(--text);

    font-size: 12px;

    line-height: 1.6;

}


/* =========================================
   ANIMATIONS
========================================= */

@keyframes wealthBenefitsOrbit {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

@keyframes wealthBenefitsOrbitReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }

}

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

@media (max-width: 1100px) {

    .wealthBenefitsWrapper {

        grid-template-columns: 1fr 240px 1fr;

        gap: 25px;

    }

    .wealthBenefitsCenter {

        width: 240px;

        height: 240px;

    }

    .wealthBenefitsCenterCircle {

        width: 160px;

        height: 160px;

    }

    .wealthBenefitsOrbitOne {

        width: 220px;

        height: 220px;

    }

    .wealthBenefitsOrbitTwo {

        width: 180px;

        height: 180px;

    }

    .wealthBenefitCard {

        padding: 18px;

        gap: 13px;

    }

    .wealthBenefitIcon {

        width: 50px;

        height: 50px;

        font-size: 18px;

    }

    .wealthBenefitContent h3 {

        font-size: 16px;

    }

}


/* =========================================
   TABLET / SMALL LAPTOP
========================================= */

@media (max-width: 991px) {

    .wealthBenefits {

        padding: 90px 0;

    }

    .wealthBenefitsHeading {

        margin-bottom: 55px;

    }

    .wealthBenefitsHeading h2 {

        font-size: 46px;

    }

    .wealthBenefitsWrapper {

        grid-template-columns: 1fr 1fr;

        gap: 18px;

    }

    .wealthBenefitsCenter {

        grid-column: 1 / -1;

        grid-row: 1;

        width: 210px;

        height: 210px;

        margin: 0 auto 25px;

    }

    .wealthBenefitsLeft {

        grid-column: 1;

    }

    .wealthBenefitsRight {

        grid-column: 2;

    }

    .wealthBenefitsCenterCircle {

        width: 150px;

        height: 150px;

    }

    .wealthBenefitsOrbitOne {

        width: 200px;

        height: 200px;

    }

    .wealthBenefitsOrbitTwo {

        width: 165px;

        height: 165px;

    }

}


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

@media (max-width: 767px) {

    .wealthBenefits {

        padding: 75px 0;

    }

    .wealthBenefits .container {

        width: calc(100% - 32px);

    }

    .wealthBenefitsHeading {

        margin-bottom: 45px;

    }

    .wealthBenefitsPrefix {

        font-size: 10px;

        letter-spacing: 1.3px;

        padding: 8px 14px;

    }

    .wealthBenefitsHeading h2 {

        font-size: 37px;

        letter-spacing: -1px;

    }

    .wealthBenefitsHeading p {

        font-size: 14px;

        line-height: 1.75;

    }


    .wealthBenefitsWrapper {

        display: flex;

        flex-direction: column;

        gap: 15px;

    }


    .wealthBenefitsCenter {

        order: 1;

        width: 180px;

        height: 180px;

        margin: 0 auto 15px;

    }

    .wealthBenefitsLeft {

        order: 2;

    }

    .wealthBenefitsRight {

        order: 3;

    }


    .wealthBenefitsCenterCircle {

        width: 135px;

        height: 135px;

    }

    .wealthBenefitsOrbitOne {

        width: 170px;

        height: 170px;

    }

    .wealthBenefitsOrbitTwo {

        width: 145px;

        height: 145px;

    }

    .wealthBenefitsLogoIcon {

        width: 42px;

        height: 42px;

        margin-bottom: 7px;

        border-radius: 12px;

        font-size: 16px;

    }

    .wealthBenefitsCenterCircle strong {

        font-size: 17px;

    }

    .wealthBenefitsCenterCircle span {

        font-size: 7px;

    }

    .wealthBenefitsCenterCircle small {

        font-size: 8px;

    }


    .wealthBenefitsColumn {

        gap: 15px;

    }

    .wealthBenefitCard {

        min-height: auto;

        padding: 20px;

        border-radius: 20px;

    }

    .wealthBenefitIcon {

        width: 48px;

        height: 48px;

        border-radius: 14px;

        font-size: 17px;

    }

    .wealthBenefitContent h3 {

        font-size: 18px;

    }

    .wealthBenefitContent p {

        font-size: 12px;

        line-height: 1.7;

    }


    .wealthBenefitsLeft .wealthBenefitCard:hover,
    .wealthBenefitsRight .wealthBenefitCard:hover {

        transform: translateY(-5px);

    }


    .wealthBenefitsBottom {

        margin-top: 45px;

        padding: 18px;

    }

}


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

@media (max-width: 480px) {

    .wealthBenefits {

        padding: 60px 0;

    }

    .wealthBenefitsHeading h2 {

        font-size: 31px;

    }

    .wealthBenefitsHeading p {

        font-size: 13px;

    }

    .wealthBenefitsCenter {

        width: 155px;

        height: 155px;

    }

    .wealthBenefitsCenterCircle {

        width: 120px;

        height: 120px;

    }

    .wealthBenefitsOrbitOne {

        width: 145px;

        height: 145px;

    }

    .wealthBenefitsOrbitTwo {

        width: 125px;

        height: 125px;

    }

    .wealthBenefitsLogoIcon {

        width: 37px;

        height: 37px;

        border-radius: 10px;

        font-size: 14px;

    }

    .wealthBenefitsCenterCircle strong {

        font-size: 15px;

    }

    .wealthBenefitsCenterCircle small {

        font-size: 7px;

    }

    .wealthBenefitCard {

        padding: 18px;

    }

    .wealthBenefitIcon {

        width: 43px;

        height: 43px;

        border-radius: 12px;

        font-size: 15px;

    }

    .wealthBenefitContent > span {

        font-size: 8px;

    }

    .wealthBenefitContent h3 {

        font-size: 17px;

    }

    .wealthBenefitContent p {

        font-size: 11px;

    }

    .wealthBenefitsBottom {

        align-items: flex-start;

        gap: 12px;

        padding: 15px;

    }

    .wealthBenefitsBottomIcon {

        width: 40px;

        height: 40px;

        font-size: 15px;

    }

    .wealthBenefitsBottom strong {

        font-size: 12px;

    }

    .wealthBenefitsBottom span {

        font-size: 10px;

    }

}

/* Benefits Section Ends Here */

/* CTA Section Starts Here */

/* =========================================
   FINAL WEALTH CREATION CTA
========================================= */

.wealthFinalCta {

    position: relative;

    padding: 130px 0;

    overflow: hidden;

    background: var(--section);

}


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

.wealthFinalCta .container {

    width: min(1200px, 92%);

    margin: auto;

    position: relative;

    z-index: 5;

}


/* =========================================
   BACKGROUND GLOWS
========================================= */

.wealthFinalCtaGlow {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(130px);

}

.wealthFinalCtaGlowOne {

    width: 600px;

    height: 600px;

    left: 50%;

    top: -350px;

    transform: translateX(-50%);

    background: rgba(212,175,55,.11);

}

.wealthFinalCtaGlowTwo {

    width: 450px;

    height: 450px;

    right: -250px;

    bottom: -250px;

    background: rgba(3,37,85,.18);

}


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

.wealthFinalCtaGrid {

    position: absolute;

    inset: 0;

    opacity: .25;

    background-image:

        linear-gradient(
            rgba(212,175,55,.06) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(212,175,55,.06) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    mask-image: linear-gradient(
        to bottom,
        transparent,
        black 25%,
        black 75%,
        transparent
    );

    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent,
        black 25%,
        black 75%,
        transparent
    );

    pointer-events: none;

}


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

.wealthFinalCtaBox {

    position: relative;

    max-width: 1000px;

    margin: auto;

    padding: 90px 70px;

    text-align: center;

    overflow: hidden;

    border-radius: 40px;

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(212,175,55,.10),
            transparent 42%
        ),

        rgba(255,255,255,.035);

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

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);

    box-shadow:

        0 40px 100px rgba(0,0,0,.18),

        inset 0 0 60px rgba(212,175,55,.025);

}


/* =========================================
   INNER BORDER
========================================= */

.wealthFinalCtaBox::before {

    content: "";

    position: absolute;

    inset: 12px;

    border-radius: 30px;

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

    pointer-events: none;

}


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

.wealthFinalCtaLine {

    width: 100px;

    height: 2px;

    margin: 0 auto 30px;

    background: linear-gradient(
        90deg,
        transparent,
        #D4AF37,
        transparent
    );

    box-shadow:

        0 0 15px rgba(212,175,55,.4);

}


/* =========================================
   PREFIX
========================================= */

.wealthFinalCtaPrefix {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 10px 19px;

    margin-bottom: 25px;

    border-radius: 50px;

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

    background: rgba(212,175,55,.065);

    color: #D4AF37;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.8px;

    text-transform: uppercase;

}

.wealthFinalCtaPrefix i {

    font-size: 10px;

}


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

.wealthFinalCtaBox h2 {

    position: relative;

    max-width: 800px;

    margin: 0 auto 22px;

    color: var(--primary);

    font-size: clamp(42px, 5vw, 64px);

    line-height: 1.08;

    letter-spacing: -1.5px;

}

.wealthFinalCtaBox h2 span {

    display: block;

    color: #D4AF37;

}


/* =========================================
   DESCRIPTION
========================================= */

.wealthFinalCtaBox > p {

    position: relative;

    max-width: 700px;

    margin: 0 auto;

    color: var(--text);

    font-size: 16px;

    line-height: 1.85;

}


/* =========================================
   BUTTONS
========================================= */

.wealthFinalCtaButtons {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    margin-top: 35px;

    flex-wrap: wrap;

}


/* Base Button */

.wealthFinalBtn {

    min-height: 56px;

    padding: 0 23px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    border-radius: 13px;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .2px;

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        background .35s ease,

        border-color .35s ease;

}


/* Primary */

.wealthFinalBtnPrimary {

    color: #032555;

    background: linear-gradient(
        135deg,
        #D4AF37,
        #FFD86A
    );

    border: 1px solid #D4AF37;

    box-shadow:

        0 12px 35px rgba(212,175,55,.16);

}

.wealthFinalBtnPrimary:hover {

    color: #032555;

    transform: translateY(-4px);

    box-shadow:

        0 18px 45px rgba(212,175,55,.28);

}


/* Outline */

.wealthFinalBtnOutline {

    color: #D4AF37;

    background: rgba(212,175,55,.045);

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

}

.wealthFinalBtnOutline:hover {

    color: #D4AF37;

    transform: translateY(-4px);

    background: rgba(212,175,55,.09);

    border-color: rgba(212,175,55,.60);

    box-shadow:

        0 15px 35px rgba(212,175,55,.08);

}


/* Arrow */

.wealthFinalBtnArrow {

    margin-left: 4px;

    transition: transform .35s ease;

}

.wealthFinalBtnPrimary:hover .wealthFinalBtnArrow {

    transform: translateX(5px);

}


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

.wealthFinalTrust {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 22px;

    margin-top: 35px;

    padding-top: 25px;

    border-top: 1px solid rgba(255,255,255,.07);

}

.wealthFinalTrust span {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: var(--text);

    font-size: 10px;

}

.wealthFinalTrust i {

    color: #D4AF37;

    font-size: 9px;

}


/* =========================================
   FLOATING ELEMENTS
========================================= */

.wealthFinalFloat {

    position: absolute;

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 17px;

    color: #D4AF37;

    background: rgba(212,175,55,.055);

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

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    font-size: 20px;

    z-index: 4;

    animation: wealthFinalFloat 5s ease-in-out infinite;

}

.wealthFinalFloatOne {

    top: 17%;

    left: 7%;

}

.wealthFinalFloatTwo {

    top: 32%;

    right: 7%;

    animation-delay: -1.5s;

}

.wealthFinalFloatThree {

    bottom: 20%;

    left: 11%;

    animation-delay: -3s;

}

.wealthFinalFloatFour {

    bottom: 14%;

    right: 11%;

    animation-delay: -4s;

}


/* =========================================
   ANIMATION
========================================= */

@keyframes wealthFinalFloat {

    0%,
    100% {

        transform: translateY(0) rotate(0deg);

    }

    50% {

        transform: translateY(-14px) rotate(4deg);

    }

}


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

@media (max-width: 991px) {

    .wealthFinalCta {

        padding: 95px 0;

    }

    .wealthFinalCtaBox {

        padding: 75px 45px;

        border-radius: 32px;

    }

    .wealthFinalCtaBox h2 {

        font-size: 48px;

    }

    .wealthFinalFloat {

        width: 48px;

        height: 48px;

        font-size: 17px;

    }

    .wealthFinalFloatOne {

        left: 3%;

    }

    .wealthFinalFloatTwo {

        right: 3%;

    }

    .wealthFinalFloatThree {

        left: 5%;

    }

    .wealthFinalFloatFour {

        right: 5%;

    }

}


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

@media (max-width: 767px) {

    .wealthFinalCta {

        padding: 75px 0;

    }

    .wealthFinalCta .container {

        width: calc(100% - 32px);

    }

    .wealthFinalCtaBox {

        padding: 65px 23px;

        border-radius: 26px;

    }

    .wealthFinalCtaBox::before {

        inset: 8px;

        border-radius: 20px;

    }

    .wealthFinalCtaLine {

        margin-bottom: 23px;

    }

    .wealthFinalCtaPrefix {

        padding: 8px 13px;

        margin-bottom: 20px;

        font-size: 9px;

        letter-spacing: 1px;

    }

    .wealthFinalCtaBox h2 {

        font-size: 37px;

        letter-spacing: -1px;

    }

    .wealthFinalCtaBox > p {

        font-size: 13px;

        line-height: 1.75;

    }


    .wealthFinalCtaButtons {

        flex-direction: column;

        width: 100%;

        gap: 11px;

    }

    .wealthFinalBtn {

        width: 100%;

        min-height: 54px;

        padding: 0 16px;

        font-size: 12px;

    }


    .wealthFinalTrust {

        gap: 10px 16px;

        margin-top: 28px;

        padding-top: 20px;

    }

    .wealthFinalTrust span {

        font-size: 9px;

    }


    /* Reduce floating decorations */

    .wealthFinalFloat {

        width: 40px;

        height: 40px;

        border-radius: 12px;

        font-size: 14px;

        opacity: .55;

    }

    .wealthFinalFloatOne {

        top: 8%;

        left: 3%;

    }

    .wealthFinalFloatTwo {

        top: 15%;

        right: 3%;

    }

    .wealthFinalFloatThree {

        bottom: 8%;

        left: 3%;

    }

    .wealthFinalFloatFour {

        bottom: 7%;

        right: 3%;

    }

}


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

@media (max-width: 480px) {

    .wealthFinalCta {

        padding: 60px 0;

    }

    .wealthFinalCtaBox {

        padding: 55px 18px;

        border-radius: 23px;

    }

    .wealthFinalCtaBox h2 {

        font-size: 31px;

    }

    .wealthFinalCtaBox > p {

        font-size: 12px;

    }

    .wealthFinalCtaPrefix {

        font-size: 8px;

    }

    .wealthFinalTrust {

        flex-direction: column;

        align-items: center;

        gap: 9px;

    }

    .wealthFinalTrust span {

        font-size: 9px;

    }

    .wealthFinalFloat {

        display: none;

    }

}



/* CTA Section Ends Here */

/* Wealth Creation Page Ends Here */


/* Wealth Protection Page Starts Here */

/* Hero Section Starts Here */

/* =========================================
   WEALTH PROTECTION HERO
========================================= */

.protectionHero {

    position: relative;

    min-height: 760px;

    padding: 45px 0 80px;

    overflow: hidden;

    background: var(--section);

}


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

.protectionHero .container {

    width: min(1280px, 92%);

    margin: auto;

    position: relative;

    z-index: 10;

}


/* =========================================
   BACKGROUND GLOWS
========================================= */

.protectionHeroGlow {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(130px);

}

.protectionHeroGlowOne {

    width: 550px;

    height: 550px;

    top: -250px;

    right: 5%;

    background: rgba(212,175,55,.11);

}

.protectionHeroGlowTwo {

    width: 500px;

    height: 500px;

    bottom: -300px;

    left: -200px;

    background: rgba(3,37,85,.17);

}


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

.protectionHeroGrid {

    position: absolute;

    inset: 0;

    opacity: .22;

    pointer-events: none;

    background-image:

        linear-gradient(
            rgba(212,175,55,.055) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(212,175,55,.055) 1px,
            transparent 1px
        );

    background-size: 75px 75px;

    mask-image: linear-gradient(
        to bottom,
        black,
        transparent 90%
    );

    -webkit-mask-image: linear-gradient(
        to bottom,
        black,
        transparent 90%
    );

}


/* =========================================
   BREADCRUMB
========================================= */

.protectionHeroBreadcrumb {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 70px;

    color: var(--text);

    font-size: 12px;

}

.protectionHeroBreadcrumb a {

    color: var(--text);

    text-decoration: none;

    transition: .3s ease;

}

.protectionHeroBreadcrumb a:hover {

    color: #D4AF37;

}

.protectionHeroBreadcrumb i {

    color: #D4AF37;

    font-size: 10px;

}

.protectionHeroBreadcrumb span {

    color: rgba(212,175,55,.75);

}


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

.protectionHeroWrapper {

    display: grid;

    grid-template-columns: 1.05fr .95fr;

    align-items: center;

    gap: 70px;

}


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

.protectionHeroContent {

    position: relative;

    z-index: 5;

}


/* =========================================
   PREFIX
========================================= */

.protectionHeroPrefix {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 10px 18px;

    margin-bottom: 25px;

    border-radius: 50px;

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

    background: rgba(212,175,55,.06);

    color: #D4AF37;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.8px;

    text-transform: uppercase;

}

.protectionHeroPrefix i {

    font-size: 12px;

}


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

.protectionHeroContent h1 {

    max-width: 760px;

    margin: 0 0 25px;

    color: var(--primary);

    font-size: clamp(48px, 5.4vw, 72px);

    line-height: 1.04;

    letter-spacing: -2px;

}

.protectionHeroContent h1 span {

    display: block;

    color: #D4AF37;

}


/* =========================================
   DESCRIPTION
========================================= */

.protectionHeroContent > p {

    max-width: 670px;

    margin: 0;

    color: var(--text);

    font-size: 16px;

    line-height: 1.85;

}

.protectionHeroContent > p strong {

    color: var(--primary);

}


/* =========================================
   BUTTONS
========================================= */

.protectionHeroButtons {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 35px;

    flex-wrap: wrap;

}

.protectionHeroBtn {

    min-height: 56px;

    padding: 0 22px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    border-radius: 13px;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        background .35s ease,

        border-color .35s ease;

}


/* Primary */

.protectionHeroBtnPrimary {

    color: #032555;

    background: linear-gradient(
        135deg,
        #D4AF37,
        #FFD86A
    );

    border: 1px solid #D4AF37;

    box-shadow:

        0 12px 35px rgba(212,175,55,.15);

}

.protectionHeroBtnPrimary:hover {

    color: #032555;

    transform: translateY(-4px);

    box-shadow:

        0 18px 45px rgba(212,175,55,.28);

}


/* Outline */

.protectionHeroBtnOutline {

    color: #D4AF37;

    background: rgba(212,175,55,.045);

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

}

.protectionHeroBtnOutline:hover {

    color: #D4AF37;

    transform: translateY(-4px);

    background: rgba(212,175,55,.09);

    border-color: rgba(212,175,55,.60);

}


/* Arrow */

.protectionHeroBtnArrow {

    margin-left: 3px;

    transition: transform .35s ease;

}

.protectionHeroBtnPrimary:hover .protectionHeroBtnArrow {

    transform: translateX(5px);

}


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

.protectionHeroTrust {

    display: flex;

    align-items: center;

    gap: 20px;

    flex-wrap: wrap;

    margin-top: 27px;

}

.protectionHeroTrust span {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: var(--text);

    font-size: 10px;

}

.protectionHeroTrust i {

    color: #D4AF37;

    font-size: 9px;

}


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

.protectionHeroVisual {

    position: relative;

    width: min(520px, 100%);

    height: 520px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* =========================================
   PROTECTION RINGS
========================================= */

.protectionRing {

    position: absolute;

    border-radius: 50%;

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

    pointer-events: none;

}

.protectionRingOne {

    width: 470px;

    height: 470px;

    animation: protectionRingRotate 20s linear infinite;

}

.protectionRingTwo {

    width: 370px;

    height: 370px;

    border-style: dashed;

    border-color: rgba(212,175,55,.20);

    animation: protectionRingRotateReverse 16s linear infinite;

}

.protectionRingThree {

    width: 270px;

    height: 270px;

    border-color: rgba(212,175,55,.27);

}


/* =========================================
   MAIN SHIELD
========================================= */

.protectionHeroMainShield {

    position: relative;

    width: 230px;

    height: 270px;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 5;

}


/* Glow */

.protectionHeroShieldGlow {

    position: absolute;

    width: 230px;

    height: 230px;

    border-radius: 50%;

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

    filter: blur(55px);

    animation: protectionShieldGlow 3s ease-in-out infinite;

}


/* Shield */

.protectionHeroShield {

    position: relative;

    width: 190px;

    height: 220px;

    display: flex;

    align-items: center;

    justify-content: center;

    clip-path: polygon(
        50% 0%,
        92% 17%,
        88% 58%,
        76% 78%,
        50% 100%,
        24% 78%,
        12% 58%,
        8% 17%
    );

    background:

        linear-gradient(
            145deg,
            #FFD86A 0%,
            #D4AF37 45%,
            #A98120 100%
        );

    box-shadow:

        0 0 70px rgba(212,175,55,.22);

}

.protectionHeroShield::before {

    content: "";

    position: absolute;

    inset: 7px;

    clip-path: inherit;

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.16),
            rgba(3,37,85,.85)
        );

}

.protectionHeroShield i {

    position: relative;

    z-index: 2;

    color: #D4AF37;

    font-size: 70px;

    filter:

        drop-shadow(
            0 5px 15px rgba(0,0,0,.35)
        );

}


/* =========================================
   FLOATING VISUAL CARDS
========================================= */

.protectionVisualCard {

    position: absolute;

    min-width: 180px;

    padding: 13px 15px;

    display: flex;

    align-items: center;

    gap: 11px;

    border-radius: 15px;

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

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

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);

    box-shadow:

        0 15px 40px rgba(0,0,0,.14);

    z-index: 8;

}

.protectionFamilyCard {

    top: 17%;

    left: 0;

    animation: protectionCardFloat 5s ease-in-out infinite;

}

.protectionAssetCard {

    right: -5%;

    bottom: 20%;

    animation: protectionCardFloat 5s ease-in-out -2s infinite;

}

.protectionVisualCardIcon {

    width: 40px;

    height: 40px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    background: rgba(212,175,55,.10);

    color: #D4AF37;

    font-size: 15px;

}

.protectionVisualCard strong {

    display: block;

    color: var(--primary);

    font-size: 12px;

}

.protectionVisualCard span {

    display: block;

    margin-top: 2px;

    color: var(--text);

    font-size: 9px;

}

.protectionVisualCheck {

    margin-left: auto;

    color: #D4AF37;

    font-size: 11px;

}


/* =========================================
   SECURITY BADGE
========================================= */

.protectionSecurityBadge {

    position: absolute;

    bottom: 8%;

    left: 18%;

    padding: 10px 15px;

    display: flex;

    align-items: center;

    gap: 8px;

    border-radius: 50px;

    background: rgba(3,37,85,.75);

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

    backdrop-filter: blur(12px);

    color: #D4AF37;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

    z-index: 9;

}


/* =========================================
   ORBIT DOTS
========================================= */

.protectionOrbitDot {

    position: absolute;

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #D4AF37;

    box-shadow:

        0 0 15px rgba(212,175,55,.7);

    z-index: 4;

}

.protectionOrbitDotOne {

    top: 12%;

    right: 25%;

}

.protectionOrbitDotTwo {

    bottom: 17%;

    right: 19%;

}

.protectionOrbitDotThree {

    top: 48%;

    left: 4%;

}


/* =========================================
   FLOATING ELEMENTS
========================================= */

.protectionHeroFloat {

    position: absolute;

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 16px;

    background: rgba(212,175,55,.05);

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

    backdrop-filter: blur(10px);

    color: #D4AF37;

    font-size: 18px;

    z-index: 4;

    animation: protectionFloat 5s ease-in-out infinite;

}

.protectionHeroShieldFloat {

    top: 17%;

    right: 4%;

}

.protectionHeroCoinFloat {

    top: 35%;

    left: 3%;

    animation-delay: -1.5s;

}

.protectionHeroFamilyFloat {

    bottom: 17%;

    right: 5%;

    animation-delay: -2.5s;

}

.protectionHeroDocumentFloat {

    bottom: 10%;

    left: 8%;

    animation-delay: -3.5s;

}


/* =========================================
   SCROLL
========================================= */

.protectionHeroScroll {

    margin-top: 70px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 9px;

    color: rgba(212,175,55,.60);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.8px;

    text-transform: uppercase;

}

.protectionHeroScroll i {

    animation: protectionScroll 1.8s ease-in-out infinite;

}


/* =========================================
   ANIMATIONS
========================================= */

@keyframes protectionRingRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

@keyframes protectionRingRotateReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }

}

@keyframes protectionShieldGlow {

    0%,
    100% {

        transform: scale(.9);

        opacity: .55;

    }

    50% {

        transform: scale(1.15);

        opacity: .9;

    }

}

@keyframes protectionFloat {

    0%,
    100% {

        transform: translateY(0) rotate(0deg);

    }

    50% {

        transform: translateY(-13px) rotate(4deg);

    }

}

@keyframes protectionCardFloat {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-9px);

    }

}

@keyframes protectionScroll {

    0%,
    100% {

        transform: translateY(0);

        opacity: .5;

    }

    50% {

        transform: translateY(7px);

        opacity: 1;

    }

}


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

@media (max-width: 1100px) {

    .protectionHeroWrapper {

        gap: 35px;

    }

    .protectionHeroContent h1 {

        font-size: 57px;

    }

    .protectionHeroVisual {

        transform: scale(.92);

    }

    .protectionHeroFloat {

        display: none;

    }

}


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

@media (max-width: 991px) {

    .protectionHero {

        min-height: auto;

        padding: 35px 0 80px;

    }

    .protectionHeroBreadcrumb {

        margin-bottom: 55px;

    }

    .protectionHeroWrapper {

        grid-template-columns: 1fr;

        gap: 60px;

    }

    .protectionHeroContent {

        text-align: center;

    }

    .protectionHeroContent h1 {

        max-width: 800px;

        margin-left: auto;

        margin-right: auto;

        font-size: 52px;

    }

    .protectionHeroContent > p {

        margin-left: auto;

        margin-right: auto;

    }

    .protectionHeroButtons {

        justify-content: center;

    }

    .protectionHeroTrust {

        justify-content: center;

    }

    .protectionHeroVisual {

        width: 500px;

        max-width: 100%;

        height: 470px;

    }

    .protectionHeroScroll {

        margin-top: 25px;

    }

}


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

@media (max-width: 767px) {

    .protectionHero {

        padding: 25px 0 65px;

    }

    .protectionHero .container {

        width: calc(100% - 32px);

    }

    .protectionHeroBreadcrumb {

        margin-bottom: 40px;

        font-size: 10px;

        gap: 8px;

    }

    .protectionHeroWrapper {

        gap: 35px;

    }

    .protectionHeroPrefix {

        padding: 8px 14px;

        margin-bottom: 20px;

        font-size: 9px;

        letter-spacing: 1.2px;

    }

    .protectionHeroContent h1 {

        font-size: 38px;

        line-height: 1.08;

        letter-spacing: -1px;

        margin-bottom: 20px;

    }

    .protectionHeroContent > p {

        font-size: 13px;

        line-height: 1.75;

    }


    /* Buttons */

    .protectionHeroButtons {

        flex-direction: column;

        width: 100%;

        gap: 10px;

        margin-top: 27px;

    }

    .protectionHeroBtn {

        width: 100%;

        min-height: 53px;

        font-size: 12px;

    }


    /* Trust */

    .protectionHeroTrust {

        gap: 9px 15px;

        margin-top: 22px;

    }

    .protectionHeroTrust span {

        font-size: 9px;

    }


    /* Visual */

    .protectionHeroVisual {

        width: 100%;

        height: 390px;

        transform: none;

    }

    .protectionRingOne {

        width: 340px;

        height: 340px;

    }

    .protectionRingTwo {

        width: 270px;

        height: 270px;

    }

    .protectionRingThree {

        width: 200px;

        height: 200px;

    }

    .protectionHeroMainShield {

        width: 170px;

        height: 200px;

    }

    .protectionHeroShield {

        width: 145px;

        height: 170px;

    }

    .protectionHeroShield i {

        font-size: 52px;

    }

    .protectionHeroShieldGlow {

        width: 170px;

        height: 170px;

    }


    /* Visual Cards */

    .protectionVisualCard {

        min-width: 145px;

        padding: 9px 11px;

        gap: 8px;

        border-radius: 12px;

    }

    .protectionFamilyCard {

        top: 12%;

        left: 0;

    }

    .protectionAssetCard {

        right: 0;

        bottom: 17%;

    }

    .protectionVisualCardIcon {

        width: 34px;

        height: 34px;

        font-size: 12px;

    }

    .protectionVisualCard strong {

        font-size: 10px;

    }

    .protectionVisualCard span {

        font-size: 8px;

    }

    .protectionVisualCheck {

        font-size: 9px;

    }


    .protectionSecurityBadge {

        bottom: 3%;

        left: 50%;

        transform: translateX(-50%);

        white-space: nowrap;

        font-size: 8px;

    }

    .protectionHeroScroll {

        display: none;

    }

}


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

@media (max-width: 480px) {

    .protectionHero {

        padding-bottom: 50px;

    }

    .protectionHeroContent h1 {

        font-size: 32px;

    }

    .protectionHeroContent > p {

        font-size: 12px;

    }

    .protectionHeroVisual {

        height: 330px;

    }

    .protectionRingOne {

        width: 285px;

        height: 285px;

    }

    .protectionRingTwo {

        width: 225px;

        height: 225px;

    }

    .protectionRingThree {

        width: 165px;

        height: 165px;

    }

    .protectionHeroMainShield {

        width: 145px;

        height: 170px;

    }

    .protectionHeroShield {

        width: 120px;

        height: 145px;

    }

    .protectionHeroShield i {

        font-size: 43px;

    }

    .protectionHeroShieldGlow {

        width: 140px;

        height: 140px;

    }

    .protectionVisualCard {

        min-width: 125px;

    }

    .protectionFamilyCard {

        left: -3px;

    }

    .protectionAssetCard {

        right: -3px;

    }

    .protectionVisualCardIcon {

        width: 30px;

        height: 30px;

        font-size: 10px;

    }

    .protectionVisualCard strong {

        font-size: 9px;

    }

    .protectionVisualCard span {

        font-size: 7px;

    }

    .protectionSecurityBadge {

        font-size: 7px;

        padding: 8px 11px;

    }

}

/* Hero Section Ends Here */

/* Intro Section Starts Here */

/* =========================================
   SIMPLE WEALTH PROTECTION INTRO
========================================= */

.protectionIntroSimple {

    position: relative;

    padding: 110px 0;

    background: var(--section);

    overflow: hidden;

}


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

.protectionIntroSimple .container {

    width: min(1180px, 92%);

    margin: auto;

}


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

.protectionIntroSimpleTop {

    display: grid;

    grid-template-columns: .85fr 1.15fr;

    gap: 90px;

    align-items: start;

    padding-bottom: 70px;

    border-bottom: 1px solid rgba(255,255,255,.08);

}


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

.protectionIntroSimpleHeading {

    position: relative;

    padding-left: 25px;

}

.protectionIntroSimpleHeading::before {

    content: "";

    position: absolute;

    left: 0;

    top: 4px;

    width: 3px;

    height: 105px;

    border-radius: 10px;

    background: #D4AF37;

}

.protectionIntroSimplePrefix {

    display: block;

    margin-bottom: 18px;

    color: #D4AF37;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

}

.protectionIntroSimpleHeading h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(38px, 4vw, 56px);

    line-height: 1.1;

    letter-spacing: -1.3px;

}

.protectionIntroSimpleHeading h2 span {

    display: block;

    color: #D4AF37;

}


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

.protectionIntroSimpleContent {

    padding-top: 5px;

}

.protectionIntroSimpleContent p {

    margin: 0 0 18px;

    color: var(--text);

    font-size: 14px;

    line-height: 1.85;

}

.protectionIntroSimpleContent p:last-child {

    margin-bottom: 0;

}

.protectionIntroSimpleContent strong {

    color: var(--primary);

}


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

.protectionIntroSimpleHighlights {

    display: grid;

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

    margin-top: 35px;

}


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

.protectionSimpleHighlight {

    position: relative;

    min-height: 145px;

    padding: 25px 28px;

    display: grid;

    grid-template-columns: auto auto 1fr;

    align-items: center;

    gap: 17px;

    border-right: 1px solid rgba(255,255,255,.08);

    transition: background .35s ease;

}

.protectionSimpleHighlight:last-child {

    border-right: none;

}

.protectionSimpleHighlight:hover {

    background: rgba(212,175,55,.035);

}


/* =========================================
   NUMBER
========================================= */

.protectionSimpleNumber {

    align-self: start;

    color: rgba(212,175,55,.45);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

}


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

.protectionSimpleIcon {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 13px;

    color: #D4AF37;

    background: rgba(212,175,55,.07);

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

    font-size: 16px;

    transition: .35s ease;

}

.protectionSimpleHighlight:hover .protectionSimpleIcon {

    background: rgba(212,175,55,.13);

    transform: translateY(-3px);

}


/* =========================================
   TEXT
========================================= */

.protectionSimpleText h3 {

    margin: 0 0 6px;

    color: var(--primary);

    font-size: 15px;

    line-height: 1.3;

}

.protectionSimpleText p {

    margin: 0;

    color: var(--text);

    font-size: 11px;

    line-height: 1.6;

}


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

@media (max-width: 991px) {

    .protectionIntroSimple {

        padding: 90px 0;

    }

    .protectionIntroSimpleTop {

        grid-template-columns: 1fr;

        gap: 35px;

        padding-bottom: 50px;

    }

    .protectionIntroSimpleHeading {

        max-width: 650px;

    }

    .protectionIntroSimpleHighlights {

        grid-template-columns: 1fr;

    }

    .protectionSimpleHighlight {

        border-right: none;

        border-bottom: 1px solid rgba(255,255,255,.08);

    }

    .protectionSimpleHighlight:last-child {

        border-bottom: none;

    }

}


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

@media (max-width: 767px) {

    .protectionIntroSimple {

        padding: 70px 0;

    }

    .protectionIntroSimple .container {

        width: calc(100% - 32px);

    }

    .protectionIntroSimpleTop {

        gap: 30px;

    }

    .protectionIntroSimpleHeading {

        padding-left: 19px;

    }

    .protectionIntroSimpleHeading::before {

        width: 2px;

        height: 82px;

    }

    .protectionIntroSimplePrefix {

        font-size: 9px;

        letter-spacing: 1.5px;

    }

    .protectionIntroSimpleHeading h2 {

        font-size: 35px;

    }

    .protectionIntroSimpleContent p {

        font-size: 13px;

        line-height: 1.75;

    }

    .protectionIntroSimpleHighlights {

        margin-top: 25px;

    }

    .protectionSimpleHighlight {

        min-height: auto;

        padding: 20px 5px;

        grid-template-columns: auto auto 1fr;

        gap: 12px;

    }

    .protectionSimpleIcon {

        width: 43px;

        height: 43px;

        border-radius: 11px;

        font-size: 14px;

    }

    .protectionSimpleText h3 {

        font-size: 14px;

    }

    .protectionSimpleText p {

        font-size: 10px;

    }

}


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

@media (max-width: 480px) {

    .protectionIntroSimple {

        padding: 60px 0;

    }

    .protectionIntroSimpleHeading h2 {

        font-size: 30px;

    }

    .protectionSimpleHighlight {

        grid-template-columns: auto 1fr;

    }

    .protectionSimpleNumber {

        display: none;

    }

}

/* Intro Section Ends Here */

/* Matters Section Starts Here */

/* =========================================
   WHY WEALTH PROTECTION MATTERS
========================================= */

.protectionMatters {

    position: relative;

    padding: 115px 0;

    overflow: hidden;

    background: var(--section);

}


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

.protectionMatters .container {

    width: min(1180px, 92%);

    margin: auto;

}


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

.protectionMattersHeading {

    max-width: 780px;

    margin: 0 auto 65px;

    text-align: center;

}

.protectionMattersPrefix {

    display: inline-block;

    margin-bottom: 18px;

    color: #D4AF37;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

}

.protectionMattersHeading h2 {

    margin: 0 0 18px;

    color: var(--primary);

    font-size: clamp(38px, 4.5vw, 56px);

    line-height: 1.1;

    letter-spacing: -1.4px;

}

.protectionMattersHeading h2 span {

    color: #D4AF37;

}

.protectionMattersHeading p {

    max-width: 690px;

    margin: auto;

    color: var(--text);

    font-size: 14px;

    line-height: 1.8;

}


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

.protectionMattersGrid {

    display: grid;

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

    gap: 18px;

}


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

.protectionMatterCard {

    position: relative;

    min-height: 275px;

    padding: 27px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;

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

    border-radius: 22px;

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

    transition:

        transform .4s ease,

        border-color .4s ease,

        background .4s ease,

        box-shadow .4s ease;

}


/* Subtle corner glow */

.protectionMatterCard::before {

    content: "";

    position: absolute;

    width: 150px;

    height: 150px;

    top: -90px;

    right: -90px;

    border-radius: 50%;

    background: rgba(212,175,55,.08);

    transition: .5s ease;

}

.protectionMatterCard:hover {

    transform: translateY(-8px);

    border-color: rgba(212,175,55,.30);

    background: rgba(212,175,55,.045);

    box-shadow:

        0 25px 55px rgba(0,0,0,.14);

}

.protectionMatterCard:hover::before {

    transform: scale(1.5);

    background: rgba(212,175,55,.12);

}


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

.protectionMatterTop {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

}

.protectionMatterNumber {

    color: rgba(212,175,55,.40);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


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

.protectionMatterIcon {

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background: rgba(212,175,55,.07);

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

    color: #D4AF37;

    font-size: 18px;

    transition: .4s ease;

}

.protectionMatterCard:hover .protectionMatterIcon {

    transform: translateY(-3px) rotate(-4deg);

    background: rgba(212,175,55,.13);

    box-shadow:

        0 10px 25px rgba(212,175,55,.08);

}


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

.protectionMatterContent {

    position: relative;

    z-index: 2;

    margin-top: 30px;

}

.protectionMatterContent h3 {

    max-width: 280px;

    margin: 0 0 10px;

    color: var(--primary);

    font-size: 19px;

    line-height: 1.35;

}

.protectionMatterContent p {

    margin: 0;

    color: var(--text);

    font-size: 12px;

    line-height: 1.7;

}


/* =========================================
   GOLD BOTTOM LINE
========================================= */

.protectionMatterLine {

    position: relative;

    z-index: 2;

    width: 35px;

    height: 2px;

    margin-top: 20px;

    border-radius: 10px;

    background: #D4AF37;

    transition: width .4s ease;

}

.protectionMatterCard:hover .protectionMatterLine {

    width: 75px;

}


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

@media (max-width: 991px) {

    .protectionMatters {

        padding: 90px 0;

    }

    .protectionMattersHeading {

        margin-bottom: 50px;

    }

    .protectionMattersGrid {

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

    }

}


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

@media (max-width: 767px) {

    .protectionMatters {

        padding: 75px 0;

    }

    .protectionMatters .container {

        width: calc(100% - 32px);

    }

    .protectionMattersHeading {

        margin-bottom: 40px;

    }

    .protectionMattersHeading h2 {

        font-size: 35px;

        letter-spacing: -1px;

    }

    .protectionMattersHeading p {

        font-size: 13px;

        line-height: 1.75;

    }

    .protectionMattersGrid {

        grid-template-columns: 1fr;

        gap: 14px;

    }

    .protectionMatterCard {

        min-height: 240px;

        padding: 22px;

        border-radius: 19px;

    }

    .protectionMatterIcon {

        width: 47px;

        height: 47px;

        font-size: 16px;

    }

    .protectionMatterContent {

        margin-top: 25px;

    }

    .protectionMatterContent h3 {

        font-size: 18px;

    }

    .protectionMatterContent p {

        font-size: 12px;

    }

}


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

@media (max-width: 480px) {

    .protectionMatters {

        padding: 60px 0;

    }

    .protectionMattersHeading h2 {

        font-size: 30px;

    }

    .protectionMattersHeading p {

        font-size: 12px;

    }

    .protectionMatterCard {

        min-height: 220px;

        padding: 20px;

    }

    .protectionMatterContent h3 {

        font-size: 17px;

    }

    .protectionMatterContent p {

        font-size: 11px;

        line-height: 1.65;

    }

}

/* Matters Section Ends Here */

/* Approach Section Starts Here */

/* =========================================
   WEALTH PROTECTION APPROACH
========================================= */

.protectionApproach {

    position: relative;

    padding: 120px 0;

    overflow: hidden;

    background: var(--section);

}


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

.protectionApproach .container {

    width: min(1200px, 92%);

    margin: auto;

}


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

.protectionApproachHeading {

    max-width: 780px;

    margin: 0 auto 75px;

    text-align: center;

}

.protectionApproachPrefix {

    display: inline-block;

    margin-bottom: 18px;

    color: #D4AF37;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

}

.protectionApproachHeading h2 {

    margin: 0 0 18px;

    color: var(--primary);

    font-size: clamp(38px, 4.5vw, 56px);

    line-height: 1.1;

    letter-spacing: -1.4px;

}

.protectionApproachHeading h2 span {

    display: block;

    color: #D4AF37;

}

.protectionApproachHeading p {

    max-width: 680px;

    margin: auto;

    color: var(--text);

    font-size: 13px;

    line-height: 1.8;

}


/* =========================================
   ROADMAP
========================================= */

.protectionApproachRoadmap {

    position: relative;

    display: grid;

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

    gap: 20px;

}


/* =========================================
   CONNECTING LINE
========================================= */

.protectionApproachLine {

    position: absolute;

    top: 32px;

    left: 10%;

    right: 10%;

    height: 1px;

    background: rgba(212,175,55,.18);

    z-index: 1;

}

.protectionApproachProgress {

    width: 100%;

    height: 100%;

    background: linear-gradient(
        90deg,
        rgba(212,175,55,.15),
        #D4AF37,
        rgba(212,175,55,.15)
    );

    box-shadow:

        0 0 12px rgba(212,175,55,.25);

}


/* =========================================
   STEP
========================================= */

.protectionApproachStep {

    position: relative;

    z-index: 2;

    text-align: center;

}


/* =========================================
   DOT
========================================= */

.protectionApproachDot {

    width: 64px;

    height: 64px;

    margin: 0 auto 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--section);

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

    box-shadow:

        0 0 0 7px var(--section),

        0 0 25px rgba(212,175,55,.08);

    transition:

        transform .4s ease,

        background .4s ease,

        border-color .4s ease,

        box-shadow .4s ease;

}

.protectionApproachDot span {

    color: #D4AF37;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

}

.protectionApproachStep:hover .protectionApproachDot {

    transform: scale(1.08);

    background: rgba(212,175,55,.10);

    border-color: #D4AF37;

    box-shadow:

        0 0 0 7px var(--section),

        0 0 30px rgba(212,175,55,.20);

}


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

.protectionApproachCard {

    min-height: 285px;

    padding: 24px 20px;

    text-align: left;

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

    border-radius: 18px;

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

    transition:

        transform .4s ease,

        border-color .4s ease,

        background .4s ease,

        box-shadow .4s ease;

}

.protectionApproachCard:hover {

    transform: translateY(-7px);

    border-color: rgba(212,175,55,.28);

    background: rgba(212,175,55,.035);

    box-shadow:

        0 20px 45px rgba(0,0,0,.12);

}


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

.protectionApproachIcon {

    width: 44px;

    height: 44px;

    margin-bottom: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    background: rgba(212,175,55,.07);

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

    color: #D4AF37;

    font-size: 15px;

    transition: .35s ease;

}

.protectionApproachCard:hover .protectionApproachIcon {

    background: rgba(212,175,55,.13);

    transform: translateY(-3px);

}


/* =========================================
   NUMBER
========================================= */

.protectionApproachNumber {

    display: block;

    margin-bottom: 7px;

    color: rgba(212,175,55,.45);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


/* =========================================
   TITLE
========================================= */

.protectionApproachCard h3 {

    margin: 0 0 12px;

    color: var(--primary);

    font-size: 20px;

    line-height: 1.3;

}


/* =========================================
   DESCRIPTION
========================================= */

.protectionApproachCard p {

    margin: 0;

    color: var(--text);

    font-size: 11px;

    line-height: 1.75;

}


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

@media (max-width: 991px) {

    .protectionApproach {

        padding: 90px 0;

    }

    .protectionApproachHeading {

        margin-bottom: 60px;

    }

    .protectionApproachRoadmap {

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

        gap: 45px 20px;

    }

    .protectionApproachLine {

        display: none;

    }

    .protectionApproachCard {

        min-height: 250px;

    }

}


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

@media (max-width: 767px) {

    .protectionApproach {

        padding: 75px 0;

    }

    .protectionApproach .container {

        width: calc(100% - 32px);

    }

    .protectionApproachHeading {

        margin-bottom: 45px;

    }

    .protectionApproachHeading h2 {

        font-size: 35px;

        letter-spacing: -1px;

    }

    .protectionApproachHeading p {

        font-size: 12px;

        line-height: 1.75;

    }

    .protectionApproachRoadmap {

        grid-template-columns: 1fr;

        gap: 15px;

    }

    .protectionApproachStep {

        display: grid;

        grid-template-columns: 55px 1fr;

        gap: 15px;

        text-align: left;

    }

    .protectionApproachDot {

        width: 55px;

        height: 55px;

        margin: 0;

        position: relative;

        z-index: 3;

    }

    .protectionApproachCard {

        min-height: auto;

        padding: 20px;

        border-radius: 16px;

    }

    .protectionApproachIcon {

        width: 40px;

        height: 40px;

        margin-bottom: 15px;

    }

    .protectionApproachCard h3 {

        font-size: 18px;

    }

    .protectionApproachCard p {

        font-size: 11px;

        line-height: 1.7;

    }


    /* Vertical connecting line */

    .protectionApproachStep:not(:last-child)::after {

        content: "";

        position: absolute;

        left: 27px;

        top: 55px;

        bottom: -15px;

        width: 1px;

        background: rgba(212,175,55,.20);

        z-index: 1;

    }

}


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

@media (max-width: 480px) {

    .protectionApproach {

        padding: 60px 0;

    }

    .protectionApproachHeading h2 {

        font-size: 30px;

    }

    .protectionApproachStep {

        grid-template-columns: 48px 1fr;

        gap: 12px;

    }

    .protectionApproachDot {

        width: 48px;

        height: 48px;

    }

    .protectionApproachStep:not(:last-child)::after {

        left: 23px;

        top: 48px;

    }

    .protectionApproachCard {

        padding: 17px;

    }

    .protectionApproachCard h3 {

        font-size: 17px;

    }

    .protectionApproachCard p {

        font-size: 10px;

    }

}

/* Approach Section Ends Here */

/* Protection Section Starts Here */

/* =========================================
   WEALTH PROTECTION SOLUTIONS
========================================= */

.protectionSolutions {

    position: relative;

    padding: 115px 0;

    overflow: hidden;

    background: var(--section);

}


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

.protectionSolutions .container {

    width: min(1180px, 92%);

    margin: auto;

}


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

.protectionSolutionsHeading {

    max-width: 780px;

    margin: 0 auto 60px;

    text-align: center;

}

.protectionSolutionsPrefix {

    display: inline-block;

    margin-bottom: 17px;

    color: #D4AF37;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

}

.protectionSolutionsHeading h2 {

    margin: 0 0 18px;

    color: var(--primary);

    font-size: clamp(38px, 4.5vw, 56px);

    line-height: 1.1;

    letter-spacing: -1.4px;

}

.protectionSolutionsHeading h2 span {

    display: block;

    color: #D4AF37;

}

.protectionSolutionsHeading p {

    max-width: 680px;

    margin: auto;

    color: var(--text);

    font-size: 13px;

    line-height: 1.8;

}


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

.protectionSolutionsGrid {

    display: grid;

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

    gap: 18px;

}


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

.protectionSolutionCard {

    position: relative;

    min-height: 330px;

    padding: 27px;

    display: flex;

    flex-direction: column;

    overflow: hidden;

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

    border-radius: 22px;

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

    transition:

        transform .4s ease,

        border-color .4s ease,

        background .4s ease,

        box-shadow .4s ease;

}


/* Gold corner */

.protectionSolutionCard::before {

    content: "";

    position: absolute;

    top: 0;

    right: 0;

    width: 90px;

    height: 90px;

    background: linear-gradient(
        135deg,
        transparent 50%,
        rgba(212,175,55,.10) 50%
    );

    opacity: .7;

    transition: .4s ease;

}


/* Bottom glow */

.protectionSolutionCard::after {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    right: -120px;

    bottom: -120px;

    border-radius: 50%;

    background: rgba(212,175,55,.08);

    filter: blur(35px);

    transition: .5s ease;

}

.protectionSolutionCard:hover {

    transform: translateY(-8px);

    border-color: rgba(212,175,55,.30);

    background: rgba(212,175,55,.035);

    box-shadow:

        0 25px 55px rgba(0,0,0,.14);

}

.protectionSolutionCard:hover::after {

    transform: scale(1.5);

}


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

.protectionSolutionHeader {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

}

.protectionSolutionNumber {

    color: rgba(212,175,55,.42);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


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

.protectionSolutionIcon {

    width: 53px;

    height: 53px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background: rgba(212,175,55,.07);

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

    color: #D4AF37;

    font-size: 18px;

    transition:

        transform .4s ease,

        background .4s ease,

        box-shadow .4s ease;

}

.protectionSolutionCard:hover .protectionSolutionIcon {

    transform: translateY(-4px) rotate(-4deg);

    background: rgba(212,175,55,.13);

    box-shadow:

        0 10px 25px rgba(212,175,55,.10);

}


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

.protectionSolutionContent {

    position: relative;

    z-index: 2;

    flex: 1;

    padding-top: 42px;

}

.protectionSolutionContent h3 {

    max-width: 290px;

    margin: 0 0 12px;

    color: var(--primary);

    font-size: 20px;

    line-height: 1.3;

}

.protectionSolutionContent p {

    max-width: 320px;

    margin: 0;

    color: var(--text);

    font-size: 11px;

    line-height: 1.75;

}


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

.protectionSolutionFooter {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 20px;

    margin-top: 25px;

    border-top: 1px solid rgba(255,255,255,.07);

}

.protectionSolutionFooter span {

    color: rgba(212,175,55,.65);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .8px;

    text-transform: uppercase;

}

.protectionSolutionFooter i {

    color: #D4AF37;

    font-size: 10px;

    transition: transform .35s ease;

}

.protectionSolutionCard:hover .protectionSolutionFooter i {

    transform: translateX(5px);

}


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

@media (max-width: 991px) {

    .protectionSolutions {

        padding: 90px 0;

    }

    .protectionSolutionsHeading {

        margin-bottom: 50px;

    }

    .protectionSolutionsGrid {

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

    }

}


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

@media (max-width: 767px) {

    .protectionSolutions {

        padding: 75px 0;

    }

    .protectionSolutions .container {

        width: calc(100% - 32px);

    }

    .protectionSolutionsHeading {

        margin-bottom: 40px;

    }

    .protectionSolutionsHeading h2 {

        font-size: 35px;

        letter-spacing: -1px;

    }

    .protectionSolutionsHeading p {

        font-size: 12px;

        line-height: 1.75;

    }

    .protectionSolutionsGrid {

        grid-template-columns: 1fr;

        gap: 14px;

    }

    .protectionSolutionCard {

        min-height: 285px;

        padding: 22px;

        border-radius: 19px;

    }

    .protectionSolutionIcon {

        width: 47px;

        height: 47px;

        font-size: 16px;

    }

    .protectionSolutionContent {

        padding-top: 32px;

    }

    .protectionSolutionContent h3 {

        font-size: 18px;

    }

    .protectionSolutionContent p {

        font-size: 11px;

        line-height: 1.7;

    }

}


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

@media (max-width: 480px) {

    .protectionSolutions {

        padding: 60px 0;

    }

    .protectionSolutionsHeading h2 {

        font-size: 30px;

    }

    .protectionSolutionsCard {

        padding: 20px;

    }

    .protectionSolutionContent h3 {

        font-size: 17px;

    }

}


/* Protection Section Ends Here */

/* Who Section Starts Here */

/* =========================================
   PROTECTION — LIFE STAGES
========================================= */

.protectionLifeStages {

    position: relative;

    padding: 115px 0;

    overflow: hidden;

    background: var(--section);

}


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

.protectionLifeStages .container {

    width: min(1100px, 92%);

    margin: auto;

}


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

.protectionLifeStagesHeading {

    max-width: 760px;

    margin: 0 auto 65px;

    text-align: center;

}

.protectionLifeStagesPrefix {

    display: inline-block;

    margin-bottom: 17px;

    color: #D4AF37;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

}

.protectionLifeStagesHeading h2 {

    margin: 0 0 18px;

    color: var(--primary);

    font-size: clamp(38px, 4.5vw, 56px);

    line-height: 1.1;

    letter-spacing: -1.4px;

}

.protectionLifeStagesHeading h2 span {

    display: block;

    color: #D4AF37;

}

.protectionLifeStagesHeading p {

    max-width: 670px;

    margin: auto;

    color: var(--text);

    font-size: 13px;

    line-height: 1.8;

}


/* =========================================
   JOURNEY
========================================= */

.protectionLifeStagesJourney {

    position: relative;

    display: grid;

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

    gap: 16px;

}


/* =========================================
   CONNECTING CENTER LINE
========================================= */

.protectionLifeStagesJourney::before {

    content: "";

    position: absolute;

    top: 30px;

    bottom: 30px;

    left: 50%;

    width: 1px;

    background:

        linear-gradient(
            to bottom,
            transparent,
            rgba(212,175,55,.25),
            rgba(212,175,55,.25),
            transparent
        );

    transform: translateX(-50%);

}


/* =========================================
   LIFE STAGE CARD
========================================= */

.protectionLifeStage {

    position: relative;

    min-height: 190px;

    padding: 25px 25px 25px 25px;

    display: grid;

    grid-template-columns: 42px 55px 1fr auto;

    align-items: center;

    gap: 15px;

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

    border-radius: 20px;

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

    transition:

        transform .4s ease,

        border-color .4s ease,

        background .4s ease,

        box-shadow .4s ease;

    z-index: 2;

}

.protectionLifeStage:hover {

    transform: translateY(-6px);

    border-color: rgba(212,175,55,.28);

    background: rgba(212,175,55,.035);

    box-shadow:

        0 22px 50px rgba(0,0,0,.13);

}


/* =========================================
   NUMBER
========================================= */

.protectionLifeStageNumber {

    align-self: start;

    padding-top: 4px;

    color: rgba(212,175,55,.40);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

}


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

.protectionLifeStageIcon {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    background: rgba(212,175,55,.07);

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

    color: #D4AF37;

    font-size: 18px;

    transition:

        transform .4s ease,

        background .4s ease;

}

.protectionLifeStage:hover .protectionLifeStageIcon {

    transform: translateY(-3px) rotate(-4deg);

    background: rgba(212,175,55,.13);

}


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

.protectionLifeStageContent {

    min-width: 0;

}

.protectionLifeStageContent > span {

    display: block;

    margin-bottom: 5px;

    color: rgba(212,175,55,.65);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.2px;

    text-transform: uppercase;

}

.protectionLifeStageContent h3 {

    margin: 0 0 8px;

    color: var(--primary);

    font-size: 17px;

    line-height: 1.3;

}

.protectionLifeStageContent p {

    margin: 0;

    color: var(--text);

    font-size: 10px;

    line-height: 1.65;

}


/* =========================================
   ARROW
========================================= */

.protectionLifeStageArrow {

    width: 30px;

    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: rgba(212,175,55,.55);

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

    font-size: 9px;

    transition:

        transform .35s ease,

        color .35s ease,

        background .35s ease;

}

.protectionLifeStage:hover .protectionLifeStageArrow {

    transform: translateX(4px);

    color: #D4AF37;

    background: rgba(212,175,55,.08);

}


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

@media (max-width: 991px) {

    .protectionLifeStages {

        padding: 90px 0;

    }

    .protectionLifeStagesHeading {

        margin-bottom: 50px;

    }

    .protectionLifeStagesJourney {

        grid-template-columns: 1fr;

        gap: 14px;

    }

    .protectionLifeStagesJourney::before {

        display: none;

    }

    .protectionLifeStage {

        min-height: 170px;

    }

}


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

@media (max-width: 767px) {

    .protectionLifeStages {

        padding: 75px 0;

    }

    .protectionLifeStages .container {

        width: calc(100% - 32px);

    }

    .protectionLifeStagesHeading {

        margin-bottom: 40px;

    }

    .protectionLifeStagesHeading h2 {

        font-size: 35px;

        letter-spacing: -1px;

    }

    .protectionLifeStagesHeading p {

        font-size: 12px;

        line-height: 1.75;

    }

    .protectionLifeStage {

        min-height: auto;

        padding: 20px;

        grid-template-columns: 35px 48px 1fr;

        gap: 11px;

        border-radius: 17px;

    }

    .protectionLifeStageNumber {

        font-size: 9px;

    }

    .protectionLifeStageIcon {

        width: 48px;

        height: 48px;

        border-radius: 13px;

        font-size: 15px;

    }

    .protectionLifeStageContent > span {

        font-size: 7px;

    }

    .protectionLifeStageContent h3 {

        font-size: 15px;

        margin-bottom: 6px;

    }

    .protectionLifeStageContent p {

        font-size: 9px;

        line-height: 1.6;

    }

    .protectionLifeStageArrow {

        display: none;

    }

}


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

@media (max-width: 480px) {

    .protectionLifeStages {

        padding: 60px 0;

    }

    .protectionLifeStagesHeading h2 {

        font-size: 30px;

    }

    .protectionLifeStage {

        padding: 17px;

        grid-template-columns: 30px 43px 1fr;

        gap: 9px;

    }

    .protectionLifeStageIcon {

        width: 43px;

        height: 43px;

        font-size: 13px;

    }

    .protectionLifeStageContent h3 {

        font-size: 14px;

    }

    .protectionLifeStageContent p {

        font-size: 8px;

    }

}

/* Who Section Ends Here */

/* Transformation Section Starts Here */

/* =========================================
   PROTECTION TRANSFORMATION
========================================= */

.protectionTransformation {

    position: relative;

    padding: 120px 0;

    overflow: hidden;

    background: var(--section);

}


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

.protectionTransformation .container {

    width: min(1180px, 92%);

    margin: auto;

}


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

.protectionTransformationHeading {

    max-width: 780px;

    margin: 0 auto 55px;

    text-align: center;

}

.protectionTransformationPrefix {

    display: inline-block;

    margin-bottom: 17px;

    color: #D4AF37;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

}

.protectionTransformationHeading h2 {

    margin: 0 0 18px;

    color: var(--primary);

    font-size: clamp(38px, 4.5vw, 56px);

    line-height: 1.1;

    letter-spacing: -1.4px;

}

.protectionTransformationHeading h2 span {

    display: block;

    color: #D4AF37;

}

.protectionTransformationHeading p {

    max-width: 680px;

    margin: auto;

    color: var(--text);

    font-size: 13px;

    line-height: 1.8;

}


/* =========================================
   CENTRAL FLOW
========================================= */

.protectionTransformationCore {

    max-width: 760px;

    margin: 0 auto 65px;

    padding: 24px 30px;

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

    border-radius: 18px;

    background: rgba(212,175,55,.025);

    box-shadow:

        0 20px 50px rgba(0,0,0,.08);

}

.protectionCoreLabel {

    display: block;

    margin-bottom: 20px;

    color: rgba(212,175,55,.55);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 2px;

    text-align: center;

}


/* =========================================
   FLOW
========================================= */

.protectionCoreFlow {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 17px;

}

.protectionCoreItem {

    min-width: 145px;

    padding: 12px 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    border-radius: 10px;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .7px;

}

.protectionCoreItem i {

    font-size: 13px;

}

.protectionCoreRisk {

    color: #c99a32;

    background: rgba(212,175,55,.055);

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

}

.protectionCoreProtection {

    color: #D4AF37;

    background: rgba(212,175,55,.09);

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

}

.protectionCoreSecurity {

    color: #D4AF37;

    background: rgba(212,175,55,.14);

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

    box-shadow:

        0 0 20px rgba(212,175,55,.08);

}

.protectionCoreArrow {

    color: rgba(212,175,55,.5);

    font-size: 10px;

}


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

.protectionTransformationSteps {

    display: grid;

    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;

    align-items: stretch;

    gap: 12px;

}


/* =========================================
   STEP
========================================= */

.protectionTransformationStep {

    position: relative;

    min-height: 270px;

    padding: 24px;

    display: flex;

    flex-direction: column;

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

    border-radius: 20px;

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

    transition:

        transform .4s ease,

        border-color .4s ease,

        background .4s ease,

        box-shadow .4s ease;

}

.protectionTransformationStep:hover {

    transform: translateY(-7px);

    border-color: rgba(212,175,55,.28);

    background: rgba(212,175,55,.035);

    box-shadow:

        0 22px 45px rgba(0,0,0,.12);

}


/* =========================================
   NUMBER
========================================= */

.protectionTransformationStepNumber {

    position: absolute;

    top: 20px;

    right: 20px;

    color: rgba(212,175,55,.35);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

}


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

.protectionTransformationStepIcon {

    width: 48px;

    height: 48px;

    margin-bottom: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    color: #D4AF37;

    background: rgba(212,175,55,.07);

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

    font-size: 16px;

    transition: .35s ease;

}

.protectionTransformationStep:hover .protectionTransformationStepIcon {

    transform: translateY(-3px);

    background: rgba(212,175,55,.13);

}


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

.protectionTransformationStepContent {

    margin-top: auto;

}

.protectionTransformationStepContent > span {

    display: block;

    margin-bottom: 7px;

    color: rgba(212,175,55,.60);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.2px;

    text-transform: uppercase;

}

.protectionTransformationStepContent h3 {

    margin: 0 0 11px;

    color: var(--primary);

    font-size: 18px;

    line-height: 1.3;

}

.protectionTransformationStepContent p {

    margin: 0;

    color: var(--text);

    font-size: 10px;

    line-height: 1.7;

}


/* =========================================
   CONNECTOR
========================================= */

.protectionTransformationConnector {

    display: flex;

    align-items: center;

    justify-content: center;

    color: rgba(212,175,55,.45);

    font-size: 11px;

}


/* =========================================
   FINAL CARD
========================================= */

.protectionTransformationFinal {

    border-color: rgba(212,175,55,.20);

    background: rgba(212,175,55,.035);

}


/* =========================================
   BOTTOM STATEMENT
========================================= */

.protectionTransformationStatement {

    max-width: 750px;

    margin: 50px auto 0;

    padding: 18px 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    border-top: 1px solid rgba(255,255,255,.07);

    border-bottom: 1px solid rgba(255,255,255,.07);

}

.protectionTransformationStatement > i {

    color: #D4AF37;

    font-size: 17px;

}

.protectionTransformationStatement p {

    margin: 0;

    color: var(--text);

    font-size: 11px;

    line-height: 1.6;

}

.protectionTransformationStatement strong {

    color: var(--primary);

}


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

@media (max-width: 1100px) {

    .protectionTransformationSteps {

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

        gap: 16px;

    }

    .protectionTransformationConnector {

        display: none;

    }

}


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

@media (max-width: 767px) {

    .protectionTransformation {

        padding: 75px 0;

    }

    .protectionTransformation .container {

        width: calc(100% - 32px);

    }

    .protectionTransformationHeading {

        margin-bottom: 40px;

    }

    .protectionTransformationHeading h2 {

        font-size: 35px;

        letter-spacing: -1px;

    }

    .protectionTransformationHeading p {

        font-size: 12px;

        line-height: 1.75;

    }


    /* Central Flow */

    .protectionTransformationCore {

        margin-bottom: 40px;

        padding: 20px 12px;

    }

    .protectionCoreFlow {

        gap: 6px;

    }

    .protectionCoreItem {

        min-width: 0;

        flex: 1;

        padding: 10px 5px;

        flex-direction: column;

        gap: 5px;

        font-size: 7px;

        text-align: center;

    }

    .protectionCoreItem i {

        font-size: 12px;

    }

    .protectionCoreArrow {

        font-size: 8px;

    }


    /* Steps */

    .protectionTransformationSteps {

        grid-template-columns: 1fr;

        gap: 12px;

    }

    .protectionTransformationStep {

        min-height: 210px;

        padding: 21px;

    }

    .protectionTransformationStepIcon {

        width: 44px;

        height: 44px;

        margin-bottom: 25px;

    }

    .protectionTransformationStepContent h3 {

        font-size: 17px;

    }

    .protectionTransformationStepContent p {

        font-size: 10px;

    }


    /* Statement */

    .protectionTransformationStatement {

        margin-top: 35px;

        padding: 16px 8px;

        text-align: center;

    }

    .protectionTransformationStatement p {

        font-size: 10px;

    }

}


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

@media (max-width: 480px) {

    .protectionTransformation {

        padding: 60px 0;

    }

    .protectionTransformationHeading h2 {

        font-size: 30px;

    }

    .protectionCoreLabel {

        font-size: 7px;

    }

    .protectionCoreItem {

        font-size: 6px;

    }

    .protectionTransformationStep {

        min-height: 195px;

        padding: 18px;

    }

    .protectionTransformationStepContent h3 {

        font-size: 16px;

    }

}

/* Transformation Section Ends Here */

/* Benefits Section Starts Here */

/* =========================================
   PROFESSIONAL WEALTH PROTECTION BENEFITS
========================================= */

.protectionBenefits {

    position: relative;

    padding: 120px 0;

    overflow: hidden;

    background: var(--section);

}


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

.protectionBenefits .container {

    width: min(1180px, 92%);

    margin: auto;

}


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

.protectionBenefitsHeading {

    max-width: 760px;

    margin: 0 auto 70px;

    text-align: center;

}

.protectionBenefitsPrefix {

    display: inline-block;

    margin-bottom: 17px;

    color: #D4AF37;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

}

.protectionBenefitsHeading h2 {

    margin: 0 0 18px;

    color: var(--primary);

    font-size: clamp(38px, 4.5vw, 56px);

    line-height: 1.1;

    letter-spacing: -1.4px;

}

.protectionBenefitsHeading h2 span {

    display: block;

    color: #D4AF37;

}

.protectionBenefitsHeading p {

    max-width: 670px;

    margin: auto;

    color: var(--text);

    font-size: 13px;

    line-height: 1.8;

}


/* =========================================
   MAIN LAYOUT
========================================= */

.protectionBenefitsLayout {

    display: grid;

    grid-template-columns: 1fr 270px 1fr;

    gap: 35px;

    align-items: center;

}


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

.protectionBenefitsColumn {

    display: flex;

    flex-direction: column;

    gap: 18px;

}


/* =========================================
   BENEFIT
========================================= */

.protectionBenefit {

    position: relative;

    min-height: 145px;

    padding: 22px 20px;

    display: grid;

    grid-template-columns: 32px 48px 1fr;

    align-items: start;

    gap: 13px;

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

    border-radius: 17px;

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

    transition:

        transform .4s ease,

        border-color .4s ease,

        background .4s ease,

        box-shadow .4s ease;

}

.protectionBenefit:hover {

    transform: translateY(-5px);

    border-color: rgba(212,175,55,.28);

    background: rgba(212,175,55,.035);

    box-shadow:

        0 18px 40px rgba(0,0,0,.11);

}


/* =========================================
   NUMBER
========================================= */

.protectionBenefitNumber {

    padding-top: 3px;

    color: rgba(212,175,55,.38);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;

}


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

.protectionBenefitIcon {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    background: rgba(212,175,55,.07);

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

    color: #D4AF37;

    font-size: 15px;

    transition:

        transform .35s ease,

        background .35s ease;

}

.protectionBenefit:hover .protectionBenefitIcon {

    transform: translateY(-3px);

    background: rgba(212,175,55,.13);

}


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

.protectionBenefitContent h3 {

    margin: 0 0 7px;

    color: var(--primary);

    font-size: 15px;

    line-height: 1.35;

}

.protectionBenefitContent p {

    margin: 0;

    color: var(--text);

    font-size: 10px;

    line-height: 1.7;

}


/* =========================================
   CENTER
========================================= */

.protectionBenefitsCenter {

    position: relative;

    width: 250px;

    height: 250px;

    margin: auto;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    border-radius: 50%;

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

    background:

        radial-gradient(
            circle at center,
            rgba(212,175,55,.09),
            rgba(255,255,255,.015) 55%,
            transparent 70%
        );

}


/* Outer ring */

.protectionBenefitsCenter::before {

    content: "";

    position: absolute;

    inset: -14px;

    border-radius: 50%;

    border: 1px dashed rgba(212,175,55,.15);

    animation: protectionBenefitsRotate 22s linear infinite;

}

.protectionBenefitsCenter::after {

    content: "";

    position: absolute;

    inset: 22px;

    border-radius: 50%;

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

}


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

.protectionBenefitsCenterRing {

    position: relative;

    z-index: 2;

}

.protectionBenefitsCenterIcon {

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 18px;

    background: rgba(212,175,55,.09);

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

    color: #D4AF37;

    font-size: 22px;

    box-shadow:

        0 0 30px rgba(212,175,55,.10);

}

.protectionBenefitsCenter > span {

    position: relative;

    z-index: 2;

    margin-top: 15px;

    color: rgba(212,175,55,.65);

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1.8px;

}

.protectionBenefitsCenter h3 {

    position: relative;

    z-index: 2;

    margin: 7px 0;

    color: var(--primary);

    font-size: 21px;

    line-height: 1.2;

}

.protectionBenefitsCenter h3 strong {

    display: block;

    color: #D4AF37;

}

.protectionBenefitsCenter p {

    position: relative;

    z-index: 2;

    max-width: 170px;

    margin: 0;

    color: var(--text);

    font-size: 9px;

    line-height: 1.6;

}


/* =========================================
   ANIMATION
========================================= */

@keyframes protectionBenefitsRotate {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}


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

@media (max-width: 1100px) {

    .protectionBenefitsLayout {

        grid-template-columns: 1fr 220px 1fr;

        gap: 18px;

    }

    .protectionBenefitsCenter {

        width: 210px;

        height: 210px;

    }

    .protectionBenefit {

        grid-template-columns: 28px 42px 1fr;

        gap: 10px;

        padding: 18px;

    }

    .protectionBenefitIcon {

        width: 42px;

        height: 42px;

        font-size: 13px;

    }

    .protectionBenefitContent h3 {

        font-size: 13px;

    }

}


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

@media (max-width: 991px) {

    .protectionBenefits {

        padding: 90px 0;

    }

    .protectionBenefitsHeading {

        margin-bottom: 50px;

    }

    .protectionBenefitsLayout {

        grid-template-columns: 1fr;

        gap: 30px;

    }

    .protectionBenefitsCenter {

        order: -1;

        width: 220px;

        height: 220px;

        margin-bottom: 10px;

    }

    .protectionBenefitsColumn {

        display: grid;

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

        gap: 14px;

    }

}


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

@media (max-width: 767px) {

    .protectionBenefits {

        padding: 75px 0;

    }

    .protectionBenefits .container {

        width: calc(100% - 32px);

    }

    .protectionBenefitsHeading {

        margin-bottom: 40px;

    }

    .protectionBenefitsHeading h2 {

        font-size: 35px;

        letter-spacing: -1px;

    }

    .protectionBenefitsHeading p {

        font-size: 12px;

        line-height: 1.75;

    }

    .protectionBenefitsCenter {

        width: 190px;

        height: 190px;

    }

    .protectionBenefitsCenterIcon {

        width: 48px;

        height: 48px;

        border-radius: 14px;

        font-size: 18px;

    }

    .protectionBenefitsCenter > span {

        font-size: 6px;

    }

    .protectionBenefitsCenter h3 {

        font-size: 17px;

    }

    .protectionBenefitsCenter p {

        font-size: 8px;

    }

    .protectionBenefitsColumn {

        grid-template-columns: 1fr;

        gap: 12px;

    }

    .protectionBenefit {

        min-height: auto;

        padding: 19px;

        grid-template-columns: 30px 45px 1fr;

        gap: 11px;

    }

    .protectionBenefitIcon {

        width: 45px;

        height: 45px;

    }

    .protectionBenefitContent h3 {

        font-size: 14px;

    }

    .protectionBenefitContent p {

        font-size: 10px;

    }

}


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

@media (max-width: 480px) {

    .protectionBenefits {

        padding: 60px 0;

    }

    .protectionBenefitsHeading h2 {

        font-size: 30px;

    }

    .protectionBenefitsCenter {

        width: 175px;

        height: 175px;

    }

    .protectionBenefit {

        grid-template-columns: 25px 42px 1fr;

        gap: 9px;

        padding: 16px;

    }

    .protectionBenefitIcon {

        width: 42px;

        height: 42px;

        font-size: 13px;

    }

    .protectionBenefitContent h3 {

        font-size: 13px;

    }

    .protectionBenefitContent p {

        font-size: 9px;

    }

}

/* Benefits Section Ends Here */

/* CTA Section Starts Here */

/* =========================================
   FINAL WEALTH PROTECTION CTA
========================================= */

.protectionFinalCta {

    position: relative;

    padding: 100px 0;

    overflow: hidden;

    background: var(--section);

}


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

.protectionFinalCta .container {

    width: min(1180px, 92%);

    margin: auto;

}


/* =========================================
   BACKGROUND GLOW
========================================= */

.protectionFinalCtaGlow {

    position: absolute;

    width: 600px;

    height: 600px;

    right: -250px;

    top: 50%;

    transform: translateY(-50%);

    border-radius: 50%;

    background: rgba(212,175,55,.055);

    filter: blur(120px);

    pointer-events: none;

}


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

.protectionFinalCtaBox {

    position: relative;

    min-height: 470px;

    padding: 70px 75px;

    display: grid;

    grid-template-columns: 1.1fr .9fr;

    align-items: center;

    gap: 50px;

    overflow: hidden;

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

    border-radius: 30px;

    background:

        linear-gradient(
            110deg,
            rgba(212,175,55,.045),
            rgba(255,255,255,.018)
        );

    box-shadow:

        0 30px 80px rgba(0,0,0,.12);

}


/* Subtle top line */

.protectionFinalCtaBox::before {

    content: "";

    position: absolute;

    top: 0;

    left: 10%;

    width: 80%;

    height: 1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(212,175,55,.45),
            transparent
        );

}


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

.protectionFinalCtaContent {

    position: relative;

    z-index: 4;

}

.protectionFinalCtaPrefix {

    display: inline-flex;

    align-items: center;

    padding: 8px 15px;

    margin-bottom: 20px;

    border-radius: 50px;

    color: #D4AF37;

    background: rgba(212,175,55,.06);

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

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.8px;

    text-transform: uppercase;

}

.protectionFinalCtaContent h2 {

    max-width: 650px;

    margin: 0 0 22px;

    color: var(--primary);

    font-size: clamp(40px, 4.4vw, 58px);

    line-height: 1.08;

    letter-spacing: -1.5px;

}

.protectionFinalCtaContent h2 span {

    display: block;

    color: #D4AF37;

}

.protectionFinalCtaContent p {

    max-width: 650px;

    margin: 0;

    color: var(--text);

    font-size: 13px;

    line-height: 1.8;

}


/* =========================================
   BUTTONS
========================================= */

.protectionFinalCtaButtons {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 30px;

}

.protectionFinalCtaButtons a {

    min-height: 48px;

    padding: 0 20px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    border-radius: 10px;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    transition:

        transform .3s ease,

        box-shadow .3s ease,

        background .3s ease;

}


/* Primary */

.protectionCtaPrimary {

    color: #111 !important;

    background: #D4AF37;

    border: 1px solid #D4AF37;

    box-shadow:

        0 10px 25px rgba(212,175,55,.12);

}

.protectionCtaPrimary:hover {

    transform: translateY(-3px);

    color: #111 !important;

    background: #E2C15A;

    box-shadow:

        0 15px 35px rgba(212,175,55,.20);

}


/* Secondary */

.protectionCtaSecondary {

    color: #D4AF37 !important;

    background: rgba(212,175,55,.045);

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

}

.protectionCtaSecondary:hover {

    transform: translateY(-3px);

    color: #D4AF37 !important;

    background: rgba(212,175,55,.09);

}


/* =========================================
   VISUAL
========================================= */

.protectionFinalCtaVisual {

    position: relative;

    width: 390px;

    height: 390px;

    max-width: 100%;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* =========================================
   VISUAL GLOW
========================================= */

.protectionFinalCtaVisualGlow {

    position: absolute;

    width: 210px;

    height: 210px;

    border-radius: 50%;

    background: rgba(212,175,55,.14);

    filter: blur(60px);

    animation: protectionCtaPulse 4s ease-in-out infinite;

}


/* =========================================
   ORBITS
========================================= */

.protectionCtaOrbit {

    position: absolute;

    border-radius: 50%;

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

}

.protectionCtaOrbitOne {

    width: 310px;

    height: 310px;

    border-style: dashed;

    animation: protectionCtaRotate 18s linear infinite;

}

.protectionCtaOrbitTwo {

    width: 235px;

    height: 235px;

    border-color: rgba(212,175,55,.20);

    animation: protectionCtaRotateReverse 14s linear infinite;

}


/* =========================================
   SHIELD
========================================= */

.protectionCtaShield {

    position: relative;

    width: 185px;

    height: 215px;

    display: flex;

    align-items: center;

    justify-content: center;

    clip-path: polygon(
        50% 0%,
        91% 17%,
        87% 58%,
        75% 79%,
        50% 100%,
        25% 79%,
        13% 58%,
        9% 17%
    );

    background:

        linear-gradient(
            145deg,
            #F0D36A,
            #D4AF37 48%,
            #8F6D19
        );

    filter:

        drop-shadow(
            0 20px 35px rgba(212,175,55,.15)
        );

    z-index: 3;

}

.protectionCtaShield::before {

    content: "";

    position: absolute;

    inset: 6px;

    clip-path: inherit;

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.10),
            rgba(20,20,20,.90)
        );

}

.protectionCtaShieldInner {

    position: relative;

    z-index: 3;

    width: 75px;

    height: 75px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 20px;

    background: rgba(212,175,55,.10);

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

    color: #D4AF37;

}

.protectionCtaShieldInner i {

    font-size: 38px;

}


/* =========================================
   FLOATING ICONS
========================================= */

.protectionCtaFloat {

    position: absolute;

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

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

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

    backdrop-filter: blur(12px);

    color: #D4AF37;

    font-size: 15px;

    z-index: 5;

    box-shadow:

        0 12px 30px rgba(0,0,0,.15);

    animation: protectionCtaFloat 5s ease-in-out infinite;

}

.protectionCtaFloatOne {

    top: 20%;

    right: 2%;

}

.protectionCtaFloatTwo {

    bottom: 17%;

    left: 5%;

    animation-delay: -1.5s;

}

.protectionCtaFloatThree {

    top: 8%;

    left: 17%;

    animation-delay: -3s;

}


/* =========================================
   ANIMATIONS
========================================= */

@keyframes protectionCtaPulse {

    0%,
    100% {

        transform: scale(.9);

        opacity: .65;

    }

    50% {

        transform: scale(1.15);

        opacity: 1;

    }

}

@keyframes protectionCtaRotate {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}

@keyframes protectionCtaRotateReverse {

    from {

        transform: rotate(360deg);

    }

    to {

        transform: rotate(0deg);

    }

}

@keyframes protectionCtaFloat {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-10px);

    }

}


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

@media (max-width: 1100px) {

    .protectionFinalCtaBox {

        padding: 55px;

        gap: 25px;

    }

    .protectionFinalCtaVisual {

        width: 330px;

        height: 330px;

    }

    .protectionCtaOrbitOne {

        width: 270px;

        height: 270px;

    }

    .protectionCtaOrbitTwo {

        width: 205px;

        height: 205px;

    }

    .protectionCtaShield {

        width: 155px;

        height: 180px;

    }

}


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

@media (max-width: 991px) {

    .protectionFinalCta {

        padding: 80px 0;

    }

    .protectionFinalCtaBox {

        grid-template-columns: 1fr;

        text-align: center;

        padding: 60px 40px;

    }

    .protectionFinalCtaContent {

        order: 1;

    }

    .protectionFinalCtaVisual {

        order: 2;

    }

    .protectionFinalCtaContent h2,
    .protectionFinalCtaContent p {

        margin-left: auto;

        margin-right: auto;

    }

    .protectionFinalCtaButtons {

        justify-content: center;

    }

}


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

@media (max-width: 767px) {

    .protectionFinalCta {

        padding: 70px 0;

    }

    .protectionFinalCta .container {

        width: calc(100% - 28px);

    }

    .protectionFinalCtaBox {

        min-height: auto;

        padding: 45px 20px;

        gap: 35px;

        border-radius: 23px;

    }

    .protectionFinalCtaPrefix {

        font-size: 8px;

        letter-spacing: 1.4px;

    }

    .protectionFinalCtaContent h2 {

        font-size: 35px;

        letter-spacing: -1px;

    }

    .protectionFinalCtaContent p {

        font-size: 12px;

        line-height: 1.75;

    }

    .protectionFinalCtaButtons {

        flex-direction: column;

        align-items: stretch;

    }

    .protectionFinalCtaButtons a {

        width: 100%;

        min-height: 48px;

    }

    .protectionFinalCtaVisual {

        width: 290px;

        height: 290px;

    }

    .protectionCtaOrbitOne {

        width: 250px;

        height: 250px;

    }

    .protectionCtaOrbitTwo {

        width: 190px;

        height: 190px;

    }

    .protectionCtaShield {

        width: 135px;

        height: 160px;

    }

    .protectionCtaShieldInner {

        width: 58px;

        height: 58px;

        border-radius: 16px;

    }

    .protectionCtaShieldInner i {

        font-size: 29px;

    }

    .protectionCtaFloat {

        width: 40px;

        height: 40px;

        border-radius: 11px;

        font-size: 12px;

    }

}


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

@media (max-width: 480px) {

    .protectionFinalCta {

        padding: 60px 0;

    }

    .protectionFinalCtaBox {

        padding: 40px 17px;

    }

    .protectionFinalCtaContent h2 {

        font-size: 30px;

    }

    .protectionFinalCtaContent p {

        font-size: 11px;

    }

    .protectionFinalCtaVisual {

        width: 250px;

        height: 250px;

    }

    .protectionCtaOrbitOne {

        width: 215px;

        height: 215px;

    }

    .protectionCtaOrbitTwo {

        width: 165px;

        height: 165px;

    }

    .protectionCtaShield {

        width: 115px;

        height: 138px;

    }

    .protectionCtaFloat {

        width: 35px;

        height: 35px;

        font-size: 10px;

    }

}

/* CTA Section Ends Here */

/* Wealth Protection Page Ends Here */


/* Wealth Preservation Page Starts Here */

/* Hero Section Starts Here */

/* =========================================
   WEALTH PRESERVATION HERO
   THEME-CONSISTENT VERSION
========================================= */

.wpHero {
    position: relative;
    min-height: 720px;
    padding: 120px 0 90px;
    overflow: hidden;
    background: var(--section);
}


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

.wpHero .container {
    position: relative;
    z-index: 5;
    width: min(1180px, 92%);
    margin: 0 auto;
}


/* =========================================
   BACKGROUND EFFECTS
   Uses existing website theme
========================================= */

.wpHeroGlow {
    position: absolute;
    width: 560px;
    height: 560px;
    top: -250px;
    right: -180px;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.045);
    filter: blur(120px);
    pointer-events: none;
}

.wpHeroGrid {
    position: absolute;
    top: 0;
    right: 0;
    width: 55%;
    height: 100%;
    opacity: .12;

    background-image:
        linear-gradient(
            rgba(212, 175, 55, .04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(212, 175, 55, .04) 1px,
            transparent 1px
        );

    background-size: 65px 65px;

    mask-image:
        linear-gradient(
            to right,
            transparent,
            black
        );

    pointer-events: none;
}


/* =========================================
   BREADCRUMB
========================================= */

.wpHeroBreadcrumb {
    margin-bottom: 65px;
}

.wpHeroBreadcrumb ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    padding: 0;
    margin: 0;

    list-style: none;
}

.wpHeroBreadcrumb li {
    color: var(--text);
    font-size: 10px;
    line-height: 1;
}

.wpHeroBreadcrumb li i {
    color: #D4AF37;
    opacity: .55;
    font-size: 8px;
}

.wpHeroBreadcrumb a {
    color: var(--text);
    text-decoration: none;
    transition: .3s ease;
}

.wpHeroBreadcrumb a:hover {
    color: #D4AF37;
}


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

.wpHeroWrapper {
    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(390px, .92fr);

    align-items: center;

    gap: 55px;
}


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

.wpHeroContent {
    max-width: 690px;
}

.wpHeroPrefix {
    display: inline-flex;
    align-items: center;

    padding: 8px 15px;
    margin-bottom: 20px;

    color: #D4AF37;

    background: rgba(212, 175, 55, .04);

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

    border-radius: 50px;

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

    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.wpHeroContent h1 {
    margin: 0 0 24px;

    color: var(--primary);

    font-size: clamp(45px, 5vw, 68px);

    font-weight: 700;

    line-height: 1.05;

    letter-spacing: -2px;
}

.wpHeroContent h1 span {
    display: block;
    color: #D4AF37;
}

.wpHeroContent p {
    max-width: 650px;

    margin: 0;

    color: var(--text);

    font-size: 13px;

    line-height: 1.85;
}


/* =========================================
   BUTTONS
========================================= */

.wpHeroButtons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 32px;
}

.wpHeroBtn {
    min-height: 50px;

    padding: 0 21px;

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

    gap: 9px;

    border-radius: 10px;

    font-size: 10px;
    font-weight: 700;

    text-decoration: none !important;

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

.wpHeroBtn i {
    font-size: 11px;
}


/* Primary */

.wpHeroBtnPrimary {
    color: #111 !important;

    background: #D4AF37;

    border: 1px solid #D4AF37;

    box-shadow:
        0 10px 25px rgba(212, 175, 55, .10);
}

.wpHeroBtnPrimary:hover {
    color: #111 !important;

    background: #D4AF37;

    border-color: #D4AF37;

    transform: translateY(-3px);

    box-shadow:
        0 14px 30px rgba(212, 175, 55, .16);
}


/* Secondary */

.wpHeroBtnSecondary {
    color: #D4AF37 !important;

    background: transparent;

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

.wpHeroBtnSecondary:hover {
    color: #D4AF37 !important;

    background: rgba(212, 175, 55, .05);

    border-color: rgba(212, 175, 55, .42);

    transform: translateY(-3px);
}


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

.wpHeroPoints {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 20px;

    margin-top: 27px;
}

.wpHeroPoint {
    display: flex;
    align-items: center;

    gap: 7px;
}

.wpHeroPoint i {
    color: #D4AF37;
    font-size: 8px;
}

.wpHeroPoint span {
    color: var(--text);

    font-size: 8px;

    opacity: .65;

    letter-spacing: .4px;
}


/* =========================================
   VISUAL
========================================= */

.wpHeroVisual {
    position: relative;

    width: 480px;
    height: 460px;

    max-width: 100%;

    margin: 0 auto;

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


/* =========================================
   VISUAL GLOW
========================================= */

.wpVisualGlow {
    position: absolute;

    width: 230px;
    height: 230px;

    border-radius: 50%;

    background: rgba(212, 175, 55, .08);

    filter: blur(65px);

    animation: wpGlow 5s ease-in-out infinite;
}


/* =========================================
   MAIN PRESERVATION CIRCLE
========================================= */

.wpPreservationCircle {
    position: relative;

    width: 250px;
    height: 250px;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(212, 175, 55, .07),
            transparent 68%
        );

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

    box-shadow:
        0 0 60px rgba(212, 175, 55, .06),
        inset 0 0 35px rgba(212, 175, 55, .025);

    z-index: 4;
}


/* =========================================
   INNER RINGS
========================================= */

.wpCircleOuter {
    width: 190px;
    height: 190px;

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

    border-radius: 50%;

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

.wpCircleInner {
    width: 140px;
    height: 140px;

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

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            rgba(212, 175, 55, .07),
            rgba(0, 0, 0, .15)
        );

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


/* =========================================
   VAULT
========================================= */

.wpVault {
    width: 88px;
    height: 88px;

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

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(212, 175, 55, .10),
            rgba(0, 0, 0, .12)
        );

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

    box-shadow:
        inset 0 0 22px rgba(212, 175, 55, .025);
}

.wpVaultRing {
    width: 58px;
    height: 58px;

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

    border-radius: 50%;

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

.wpVaultCenter {
    width: 34px;
    height: 34px;

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

    border-radius: 10px;

    color: #D4AF37;

    background: rgba(212, 175, 55, .07);

    font-size: 13px;
}


/* =========================================
   ORBITS
========================================= */

.wpOrbit {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.wpOrbitOne {
    width: 350px;
    height: 350px;

    border: 1px dashed rgba(212, 175, 55, .10);

    animation:
        wpRotate 22s linear infinite;
}

.wpOrbitTwo {
    width: 300px;
    height: 300px;

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

    animation:
        wpRotateReverse 17s linear infinite;
}


/* =========================================
   FLOATING ICONS
========================================= */

.wpFloat {
    position: absolute;

    width: 50px;
    height: 50px;

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

    border-radius: 14px;

    background: var(--section);

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

    color: #D4AF37;

    font-size: 15px;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, .10);

    z-index: 7;

    animation:
        wpFloat 5s ease-in-out infinite;
}

.wpFloatCoin {
    top: 10%;
    right: 7%;
}

.wpFloatShield {
    bottom: 13%;
    left: 5%;

    animation-delay: -1.5s;
}

.wpFloatGem {
    top: 17%;
    left: 8%;

    animation-delay: -3s;
}


/* =========================================
   GROWTH GRAPH
========================================= */

.wpGrowthLine {
    position: absolute;

    width: 300px;
    height: 130px;

    right: -5px;
    bottom: 25px;

    z-index: 2;

    opacity: .60;
}

.wpGrowthLine svg {
    width: 100%;
    height: 100%;

    overflow: visible;
}


/* =========================================
   STABILITY BADGE
========================================= */

.wpStability {
    position: absolute;

    right: 0;
    bottom: 0;

    z-index: 8;

    padding: 11px 14px;

    display: flex;
    align-items: center;

    gap: 9px;

    border-radius: 12px;

    background: var(--section);

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

    box-shadow:
        0 12px 30px rgba(0, 0, 0, .10);
}

.wpStabilityIcon {
    width: 34px;
    height: 34px;

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

    border-radius: 9px;

    color: #D4AF37;

    background: rgba(212, 175, 55, .06);

    font-size: 11px;
}

.wpStability span {
    display: block;

    color: var(--text);

    opacity: .50;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 1.1px;
}

.wpStability strong {
    display: block;

    margin-top: 3px;

    color: #D4AF37;

    font-size: 7px;

    letter-spacing: .7px;
}


/* =========================================
   ANIMATIONS
========================================= */

@keyframes wpGlow {

    0%,
    100% {
        transform: scale(.90);
        opacity: .55;
    }

    50% {
        transform: scale(1.10);
        opacity: .9;
    }
}

@keyframes wpRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes wpRotateReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

@keyframes wpFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}


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

@media (max-width: 1100px) {

    .wpHeroWrapper {
        grid-template-columns:
            minmax(0, 1fr)
            400px;

        gap: 25px;
    }

    .wpHeroVisual {
        width: 400px;
        height: 410px;
    }

    .wpPreservationCircle {
        width: 220px;
        height: 220px;
    }

    .wpCircleOuter {
        width: 170px;
        height: 170px;
    }

    .wpCircleInner {
        width: 125px;
        height: 125px;
    }

    .wpOrbitOne {
        width: 315px;
        height: 315px;
    }

    .wpOrbitTwo {
        width: 270px;
        height: 270px;
    }

    .wpGrowthLine {
        width: 250px;
        height: 110px;
    }
}


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

@media (max-width: 991px) {

    .wpHero {
        min-height: auto;
        padding: 100px 0 80px;
    }

    .wpHeroBreadcrumb {
        margin-bottom: 50px;
    }

    .wpHeroWrapper {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .wpHeroContent {
        max-width: 760px;
        margin: 0 auto;

        text-align: center;
    }

    .wpHeroContent p {
        margin-left: auto;
        margin-right: auto;
    }

    .wpHeroButtons {
        justify-content: center;
    }

    .wpHeroPoints {
        justify-content: center;
    }

    .wpHeroVisual {
        margin: 0 auto;
    }
}


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

@media (max-width: 767px) {

    .wpHero {
        padding: 75px 0 60px;
    }

    .wpHero .container {
        width: calc(100% - 30px);
    }

    .wpHeroBreadcrumb {
        margin-bottom: 40px;
    }

    .wpHeroBreadcrumb li {
        font-size: 8px;
    }

    .wpHeroPrefix {
        font-size: 8px;
        padding: 7px 12px;
        margin-bottom: 17px;
    }

    .wpHeroContent h1 {
        font-size: 38px;
        line-height: 1.08;
        letter-spacing: -1px;
    }

    .wpHeroContent p {
        font-size: 11px;
        line-height: 1.75;
    }

    .wpHeroButtons {
        flex-direction: column;
        align-items: stretch;

        margin-top: 27px;
    }

    .wpHeroBtn {
        width: 100%;
        min-height: 48px;
    }

    .wpHeroPoints {
        gap: 10px 15px;
        margin-top: 22px;
    }

    .wpHeroPoint span {
        font-size: 7px;
    }

    .wpHeroVisual {
        width: 310px;
        height: 310px;
    }

    .wpPreservationCircle {
        width: 165px;
        height: 165px;
    }

    .wpCircleOuter {
        width: 130px;
        height: 130px;
    }

    .wpCircleInner {
        width: 98px;
        height: 98px;
    }

    .wpVault {
        width: 65px;
        height: 65px;
        border-radius: 17px;
    }

    .wpVaultRing {
        width: 43px;
        height: 43px;
    }

    .wpVaultCenter {
        width: 27px;
        height: 27px;
        font-size: 10px;
    }

    .wpOrbitOne {
        width: 265px;
        height: 265px;
    }

    .wpOrbitTwo {
        width: 215px;
        height: 215px;
    }

    .wpFloat {
        width: 39px;
        height: 39px;
        border-radius: 11px;
        font-size: 11px;
    }

    .wpGrowthLine {
        width: 190px;
        height: 85px;

        right: -3px;
        bottom: 12px;
    }

    .wpStability {
        right: -5px;
        bottom: -3px;

        padding: 8px 10px;
    }

    .wpStabilityIcon {
        width: 27px;
        height: 27px;
        font-size: 9px;
    }

    .wpStability span {
        font-size: 5px;
    }

    .wpStability strong {
        font-size: 6px;
    }
}


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

@media (max-width: 480px) {

    .wpHero {
        padding: 65px 0 50px;
    }

    .wpHeroContent h1 {
        font-size: 32px;
    }

    .wpHeroContent p {
        font-size: 10px;
    }

    .wpHeroVisual {
        width: 270px;
        height: 275px;
    }

    .wpPreservationCircle {
        width: 145px;
        height: 145px;
    }

    .wpCircleOuter {
        width: 115px;
        height: 115px;
    }

    .wpCircleInner {
        width: 87px;
        height: 87px;
    }

    .wpVault {
        width: 57px;
        height: 57px;
    }

    .wpVaultRing {
        width: 38px;
        height: 38px;
    }

    .wpOrbitOne {
        width: 230px;
        height: 230px;
    }

    .wpOrbitTwo {
        width: 185px;
        height: 185px;
    }

    .wpGrowthLine {
        width: 165px;
        height: 75px;
    }

    .wpStability {
        display: none;
    }
}

/* Hero Section Ends Here */

/* Intro Section Starts Here */

/* =========================================
   WEALTH PRESERVATION INTRO
========================================= */

.wpIntro {

    position: relative;

    padding: 110px 0;

    overflow: hidden;

    background: var(--section);

}


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

.wpIntro .container {

    position: relative;

    z-index: 2;

    width: min(1180px, 92%);

    margin: auto;

}


/* =========================================
   MAIN WRAPPER
========================================= */

.wpIntroWrapper {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(400px, .85fr);

    align-items: center;

    gap: 80px;

}


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

.wpIntroContent {

    max-width: 680px;

}

.wpIntroPrefix {

    display: inline-flex;

    padding: 8px 15px;

    margin-bottom: 20px;

    border-radius: 50px;

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

    background: rgba(212,175,55,.035);

    color: #D4AF37;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.7px;

    text-transform: uppercase;

}

.wpIntroContent h2 {

    margin: 0 0 25px;

    color: var(--primary);

    font-size: clamp(38px, 4.2vw, 58px);

    line-height: 1.08;

    letter-spacing: -1.5px;

}

.wpIntroContent h2 span {

    display: block;

    color: #D4AF37;

}

.wpIntroContent p {

    max-width: 650px;

    margin: 0 0 17px;

    color: var(--text);

    font-size: 13px;

    line-height: 1.85;

    opacity: .85;

}

.wpIntroContent p:last-child {

    margin-bottom: 0;

}


/* =========================================
   VISUAL
========================================= */

.wpIntroVisual {

    position: relative;

    width: 430px;

    height: 430px;

    max-width: 100%;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* =========================================
   GLOW
========================================= */

.wpIntroGlow {

    position: absolute;

    width: 230px;

    height: 230px;

    border-radius: 50%;

    background: rgba(212,175,55,.08);

    filter: blur(75px);

    animation: wpIntroGlow 5s ease-in-out infinite;

}


/* =========================================
   CORE
========================================= */

.wpIntroCore {

    position: relative;

    width: 220px;

    height: 220px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

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

    background:

        radial-gradient(
            circle,
            rgba(212,175,55,.08),
            transparent 68%
        );

    box-shadow:

        0 0 60px rgba(212,175,55,.06),

        inset 0 0 35px rgba(212,175,55,.025);

    z-index: 4;

}

.wpIntroCore::before {

    content: "";

    position: absolute;

    inset: 16px;

    border-radius: 50%;

    border: 1px dashed rgba(212,175,55,.16);

    animation: wpIntroRotate 18s linear infinite;

}

.wpIntroCoreInner {

    width: 140px;

    height: 140px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--section);

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

    box-shadow:

        inset 0 0 25px rgba(212,175,55,.025);

    text-align: center;

}

.wpIntroCoreInner i {

    margin-bottom: 9px;

    color: #D4AF37;

    font-size: 25px;

}

.wpIntroCoreInner span {

    color: var(--text);

    opacity: .50;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.5px;

}

.wpIntroCoreInner strong {

    margin-top: 4px;

    color: #D4AF37;

    font-size: 10px;

    letter-spacing: 1px;

}


/* =========================================
   CONNECTING LINES
========================================= */

.wpIntroLine {

    position: absolute;

    height: 1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(212,175,55,.25),
            transparent
        );

    transform-origin: center;

    z-index: 1;

}

.wpIntroLineOne {

    width: 115px;

    top: 30%;

    right: 15%;

    transform: rotate(25deg);

}

.wpIntroLineTwo {

    width: 115px;

    bottom: 30%;

    left: 15%;

    transform: rotate(25deg);

}

.wpIntroLineThree {

    width: 100px;

    right: 7%;

    bottom: 28%;

    transform: rotate(-25deg);

}


/* =========================================
   FLOATING ITEMS
========================================= */

.wpIntroItem {

    position: absolute;

    z-index: 6;

    min-width: 90px;

    padding: 10px 12px;

    display: flex;

    align-items: center;

    gap: 8px;

    border-radius: 10px;

    background: var(--section);

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

    box-shadow:

        0 12px 30px rgba(0,0,0,.08);

    color: #D4AF37;

    animation: wpIntroFloat 5s ease-in-out infinite;

}

.wpIntroItem i {

    font-size: 12px;

}

.wpIntroItem span {

    color: var(--text);

    font-size: 8px;

    opacity: .75;

}

.wpIntroAsset {

    top: 10%;

    right: 4%;

}

.wpIntroGrowth {

    left: 2%;

    bottom: 19%;

    animation-delay: -1.5s;

}

.wpIntroFuture {

    right: 2%;

    bottom: 7%;

    animation-delay: -3s;

}


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

.wpIntroBalance {

    position: absolute;

    left: 50%;

    bottom: -5px;

    transform: translateX(-50%);

    width: 220px;

    padding: 13px 15px;

    border-radius: 12px;

    background: var(--section);

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

    text-align: center;

    z-index: 8;

}

.wpIntroBalance > span {

    display: block;

    color: #D4AF37;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.2px;

}

.wpIntroBalanceBar {

    width: 100%;

    height: 3px;

    margin: 9px 0;

    overflow: hidden;

    border-radius: 10px;

    background: rgba(212,175,55,.08);

}

.wpIntroBalanceBar div {

    width: 75%;

    height: 100%;

    border-radius: inherit;

    background: #D4AF37;

    animation: wpIntroProgress 3s ease-in-out infinite alternate;

}

.wpIntroBalance small {

    color: var(--text);

    opacity: .45;

    font-size: 7px;

}


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

.wpIntroHighlights {

    display: grid;

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

    gap: 15px;

    margin-top: 80px;

}

.wpIntroHighlight {

    min-height: 90px;

    padding: 20px;

    display: flex;

    align-items: center;

    gap: 15px;

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

    border-radius: 14px;

    background: rgba(212,175,55,.018);

    transition:

        transform .3s ease,

        border-color .3s ease,

        background .3s ease;

}

.wpIntroHighlight:hover {

    transform: translateY(-5px);

    border-color: rgba(212,175,55,.28);

    background: rgba(212,175,55,.035);

}

.wpIntroHighlightIcon {

    flex: 0 0 45px;

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    color: #D4AF37;

    background: rgba(212,175,55,.06);

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

}

.wpIntroHighlightIcon i {

    font-size: 14px;

}

.wpIntroHighlight span {

    display: block;

    margin-bottom: 4px;

    color: #D4AF37;

    font-size: 7px;

    letter-spacing: 1px;

}

.wpIntroHighlight h3 {

    margin: 0;

    color: var(--primary);

    font-size: 11px;

    line-height: 1.4;

}


/* =========================================
   ANIMATIONS
========================================= */

@keyframes wpIntroGlow {

    0%,
    100% {
        transform: scale(.9);
        opacity: .55;
    }

    50% {
        transform: scale(1.1);
        opacity: .9;
    }
}

@keyframes wpIntroRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes wpIntroFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes wpIntroProgress {

    from {
        width: 65%;
    }

    to {
        width: 82%;
    }
}


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

@media (max-width: 991px) {

    .wpIntro {

        padding: 90px 0;

    }

    .wpIntroWrapper {

        grid-template-columns: 1fr;

        gap: 60px;

    }

    .wpIntroContent {

        max-width: 750px;

        margin: auto;

        text-align: center;

    }

    .wpIntroContent p {

        margin-left: auto;

        margin-right: auto;

    }

    .wpIntroVisual {

        width: 420px;

        height: 420px;

    }

    .wpIntroHighlights {

        margin-top: 65px;

    }

}


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

@media (max-width: 767px) {

    .wpIntro {

        padding: 75px 0;

    }

    .wpIntro .container {

        width: calc(100% - 30px);

    }

    .wpIntroPrefix {

        font-size: 8px;

        padding: 7px 12px;

    }

    .wpIntroContent h2 {

        font-size: 36px;

        letter-spacing: -1px;

    }

    .wpIntroContent p {

        font-size: 11px;

        line-height: 1.75;

    }

    .wpIntroVisual {

        width: 310px;

        height: 320px;

    }

    .wpIntroCore {

        width: 170px;

        height: 170px;

    }

    .wpIntroCore::before {

        inset: 12px;

    }

    .wpIntroCoreInner {

        width: 110px;

        height: 110px;

    }

    .wpIntroCoreInner i {

        font-size: 20px;

    }

    .wpIntroCoreInner span {

        font-size: 6px;

    }

    .wpIntroCoreInner strong {

        font-size: 8px;

    }

    .wpIntroLineOne {

        width: 75px;

        right: 9%;

    }

    .wpIntroLineTwo {

        width: 75px;

        left: 8%;

    }

    .wpIntroLineThree {

        width: 70px;

        right: 4%;

    }

    .wpIntroItem {

        min-width: 75px;

        padding: 8px 9px;

        gap: 6px;

    }

    .wpIntroItem i {

        font-size: 9px;

    }

    .wpIntroItem span {

        font-size: 7px;

    }

    .wpIntroAsset {

        top: 8%;

    }

    .wpIntroGrowth {

        bottom: 22%;

    }

    .wpIntroFuture {

        bottom: 9%;

    }

    .wpIntroBalance {

        width: 185px;

        padding: 10px;

    }

    .wpIntroHighlights {

        grid-template-columns: 1fr;

        margin-top: 55px;

    }

    .wpIntroHighlight {

        min-height: 75px;

        padding: 15px;

    }

}


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

@media (max-width: 480px) {

    .wpIntroContent h2 {

        font-size: 31px;

    }

    .wpIntroContent p {

        font-size: 10px;

    }

    .wpIntroVisual {

        width: 275px;

        height: 290px;

    }

    .wpIntroCore {

        width: 145px;

        height: 145px;

    }

    .wpIntroCoreInner {

        width: 92px;

        height: 92px;

    }

    .wpIntroCoreInner i {

        font-size: 17px;

    }

    .wpIntroItem {

        min-width: auto;

    }

    .wpIntroBalance {

        display: none;

    }

}

/* Intro Section Ends Here */

/* Why Section Starts Here */

/* =========================================
   WEALTH PRESERVATION
   WHY IT MATTERS
========================================= */

.wpWhy {

    position: relative;

    padding: 110px 0;

    overflow: hidden;

    background: var(--section);

}


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

.wpWhy .container {

    position: relative;

    z-index: 2;

    width: min(1180px, 92%);

    margin: auto;

}


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

.wpWhyHeading {

    max-width: 760px;

    margin: 0 auto 65px;

    text-align: center;

}

.wpWhyPrefix {

    display: inline-flex;

    align-items: center;

    padding: 8px 15px;

    margin-bottom: 19px;

    border-radius: 50px;

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

    background: rgba(212,175,55,.035);

    color: #D4AF37;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.7px;

    text-transform: uppercase;

}

.wpWhyHeading h2 {

    margin: 0 0 18px;

    color: var(--primary);

    font-size: clamp(38px, 4.5vw, 58px);

    line-height: 1.08;

    letter-spacing: -1.5px;

}

.wpWhyHeading h2 span {

    display: block;

    color: #D4AF37;

}

.wpWhyHeading p {

    max-width: 650px;

    margin: auto;

    color: var(--text);

    opacity: .72;

    font-size: 12px;

    line-height: 1.8;

}


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

.wpWhyGrid {

    display: grid;

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

    gap: 18px;

}


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

.wpWhyCard {

    position: relative;

    min-height: 255px;

    padding: 25px;

    overflow: hidden;

    border-radius: 17px;

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

    background: rgba(212,175,55,.015);

    transition:

        transform .4s ease,

        border-color .4s ease,

        background .4s ease,

        box-shadow .4s ease;

}


/* Top subtle glow */

.wpWhyCard::before {

    content: "";

    position: absolute;

    width: 150px;

    height: 150px;

    top: -90px;

    right: -70px;

    border-radius: 50%;

    background: rgba(212,175,55,.055);

    filter: blur(35px);

    transition: .4s ease;

}


/* Hover */

.wpWhyCard:hover {

    transform: translateY(-7px);

    border-color: rgba(212,175,55,.27);

    background: rgba(212,175,55,.028);

    box-shadow:

        0 20px 45px rgba(0,0,0,.08);

}

.wpWhyCard:hover::before {

    transform: scale(1.4);

}


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

.wpWhyCardTop {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 35px;

}

.wpWhyNumber {

    color: #D4AF37;

    opacity: .55;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;

}


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

.wpWhyIcon {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    color: #D4AF37;

    background: rgba(212,175,55,.055);

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

    transition:

        transform .4s ease,

        background .4s ease;

}

.wpWhyIcon i {

    font-size: 15px;

}

.wpWhyCard:hover .wpWhyIcon {

    transform: rotate(-5deg) scale(1.08);

    background: rgba(212,175,55,.09);

}


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

.wpWhyCardContent {

    position: relative;

    z-index: 2;

}

.wpWhyCardContent h3 {

    margin: 0 0 12px;

    color: var(--primary);

    font-size: 16px;

    font-weight: 600;

    line-height: 1.35;

}

.wpWhyCardContent p {

    max-width: 300px;

    margin: 0;

    color: var(--text);

    opacity: .68;

    font-size: 10px;

    line-height: 1.75;

}


/* =========================================
   BOTTOM CARD LINE
========================================= */

.wpWhyCardLine {

    position: absolute;

    left: 25px;

    bottom: 20px;

    width: 32px;

    height: 2px;

    border-radius: 5px;

    background: #D4AF37;

    opacity: .45;

    transition:

        width .4s ease,

        opacity .4s ease;

}

.wpWhyCard:hover .wpWhyCardLine {

    width: 70px;

    opacity: .85;

}


/* =========================================
   BOTTOM STATEMENT
========================================= */

.wpWhyBottom {

    max-width: 760px;

    margin: 55px auto 0;

    padding: 17px 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    border-radius: 14px;

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

    background: rgba(212,175,55,.018);

}

.wpWhyBottomIcon {

    flex: 0 0 42px;

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    color: #D4AF37;

    background: rgba(212,175,55,.06);

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

}

.wpWhyBottomIcon i {

    font-size: 13px;

}

.wpWhyBottom span {

    display: block;

    margin-bottom: 4px;

    color: #D4AF37;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 1.4px;

}

.wpWhyBottom strong {

    display: block;

    color: var(--primary);

    font-size: 10px;

    font-weight: 500;

}


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

@media (max-width: 991px) {

    .wpWhy {

        padding: 90px 0;

    }

    .wpWhyHeading {

        margin-bottom: 50px;

    }

    .wpWhyGrid {

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

    }

}


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

@media (max-width: 767px) {

    .wpWhy {

        padding: 75px 0;

    }

    .wpWhy .container {

        width: calc(100% - 30px);

    }

    .wpWhyHeading {

        margin-bottom: 40px;

    }

    .wpWhyPrefix {

        font-size: 8px;

        padding: 7px 12px;

    }

    .wpWhyHeading h2 {

        font-size: 35px;

        letter-spacing: -1px;

    }

    .wpWhyHeading p {

        font-size: 10px;

        line-height: 1.75;

    }

    .wpWhyGrid {

        grid-template-columns: 1fr;

        gap: 14px;

    }

    .wpWhyCard {

        min-height: 220px;

        padding: 22px;

    }

    .wpWhyCardTop {

        margin-bottom: 28px;

    }

    .wpWhyCardContent h3 {

        font-size: 15px;

    }

    .wpWhyCardContent p {

        max-width: none;

        font-size: 10px;

    }

    .wpWhyBottom {

        margin-top: 40px;

        justify-content: flex-start;

        padding: 15px;

    }

    .wpWhyBottom strong {

        font-size: 9px;

        line-height: 1.5;

    }

}


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

@media (max-width: 480px) {

    .wpWhyHeading h2 {

        font-size: 30px;

    }

    .wpWhyHeading p {

        font-size: 9.5px;

    }

    .wpWhyCard {

        min-height: 205px;

    }

    .wpWhyIcon {

        width: 43px;

        height: 43px;

    }

    .wpWhyCardContent h3 {

        font-size: 14px;

    }

    .wpWhyBottomIcon {

        flex-basis: 37px;

        width: 37px;

        height: 37px;

    }

    .wpWhyBottom strong {

        font-size: 8px;

    }

}

/* Why Section Ends Here */

/* Approach Section Starts Here */

/* =========================================
   WEALTH PRESERVATION APPROACH
========================================= */

.wpApproach {

    position: relative;

    padding: 115px 0;

    overflow: hidden;

    background: var(--section);

}

.wpApproach .container {

    position: relative;

    z-index: 2;

    width: min(1180px, 92%);

    margin: auto;

}


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

.wpApproachHeading {

    max-width: 800px;

    margin: 0 auto 80px;

    text-align: center;

}

.wpApproachPrefix {

    display: inline-flex;

    align-items: center;

    padding: 8px 15px;

    margin-bottom: 20px;

    border-radius: 50px;

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

    background: rgba(212,175,55,.035);

    color: #D4AF37;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.7px;

    text-transform: uppercase;

}

.wpApproachHeading h2 {

    margin: 0 0 18px;

    color: var(--primary);

    font-size: clamp(38px, 4.3vw, 58px);

    line-height: 1.08;

    letter-spacing: -1.5px;

}

.wpApproachHeading h2 span {

    display: block;

    color: #D4AF37;

}

.wpApproachHeading p {

    max-width: 650px;

    margin: auto;

    color: var(--text);

    opacity: .68;

    font-size: 12px;

    line-height: 1.8;

}


/* =========================================
   SIX STEP ROADMAP
========================================= */

.wpApproachRoadmap {

    position: relative;

    display: grid;

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

    gap: 12px;

}


/* =========================================
   CONNECTING LINE
========================================= */

.wpApproachLine {

    position: absolute;

    top: 67px;

    left: 7%;

    right: 7%;

    height: 1px;

    background: rgba(212,175,55,.12);

    z-index: 1;

}

.wpApproachProgress {

    width: 100%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(212,175,55,.75),
            transparent
        );

    background-size: 200% 100%;

    animation:
        wpApproachProgress 4s ease-in-out infinite;

}


/* =========================================
   STEP
========================================= */

.wpApproachStep {

    position: relative;

    z-index: 2;

    min-width: 0;

}


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

.wpApproachStepTop {

    position: relative;

    height: 95px;

    display: flex;

    align-items: flex-start;

    justify-content: center;

}


/* =========================================
   STEP NUMBER
========================================= */

.wpApproachNumber {

    position: absolute;

    top: -2px;

    left: 50%;

    transform: translateX(-50%);

    color: #D4AF37;

    opacity: .45;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.4px;

}


/* =========================================
   NODE
========================================= */

.wpApproachNode {

    position: relative;

    margin-top: 30px;

    width: 54px;

    height: 54px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--section);

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

    color: #D4AF37;

    font-size: 14px;

    box-shadow:

        0 0 0 7px var(--section),

        0 0 0 8px rgba(212,175,55,.07),

        0 10px 25px rgba(0,0,0,.08);

    transition:

        transform .4s ease,

        background .4s ease,

        box-shadow .4s ease;

}

.wpApproachStep:hover .wpApproachNode {

    transform: translateY(-5px) scale(1.08);

    background: rgba(212,175,55,.06);

    box-shadow:

        0 0 0 7px var(--section),

        0 0 0 8px rgba(212,175,55,.14),

        0 12px 30px rgba(212,175,55,.08);

}


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

.wpApproachContent {

    padding: 25px 10px 0;

    text-align: center;

}

.wpApproachLabel {

    color: #D4AF37;

    opacity: .60;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1.4px;

}

.wpApproachContent h3 {

    margin: 7px 0 11px;

    color: var(--primary);

    font-size: 16px;

    font-weight: 600;

    line-height: 1.3;

}

.wpApproachContent p {

    max-width: 170px;

    margin: 0 auto;

    color: var(--text);

    opacity: .65;

    font-size: 8.5px;

    line-height: 1.75;

}


/* =========================================
   BOTTOM JOURNEY
========================================= */

.wpApproachBottom {

    max-width: 800px;

    margin: 70px auto 0;

    padding: 16px 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    border-radius: 14px;

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

    background: rgba(212,175,55,.018);

}

.wpApproachBottomIcon {

    flex: 0 0 42px;

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    color: #D4AF37;

    background: rgba(212,175,55,.055);

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

}

.wpApproachBottomIcon i {

    font-size: 13px;

}

.wpApproachBottom span {

    display: block;

    margin-bottom: 4px;

    color: #D4AF37;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 1.3px;

}

.wpApproachBottom strong {

    color: var(--primary);

    font-size: 10px;

    font-weight: 500;

}


/* =========================================
   ANIMATION
========================================= */

@keyframes wpApproachProgress {

    0% {
        background-position: 100% 0;
    }

    50% {
        background-position: 0% 0;
    }

    100% {
        background-position: -100% 0;
    }

}


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

@media (max-width: 1100px) {

    .wpApproachRoadmap {

        gap: 8px;

    }

    .wpApproachContent {

        padding-left: 5px;

        padding-right: 5px;

    }

    .wpApproachContent h3 {

        font-size: 14px;

    }

    .wpApproachContent p {

        font-size: 8px;

    }

}


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

@media (max-width: 991px) {

    .wpApproach {

        padding: 90px 0;

    }

    .wpApproachHeading {

        margin-bottom: 60px;

    }

    .wpApproachRoadmap {

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

        gap: 50px 20px;

    }

    .wpApproachLine {

        display: none;

    }

    .wpApproachStepTop {

        height: 80px;

    }

    .wpApproachNode {

        margin-top: 25px;

    }

    .wpApproachContent {

        padding-top: 15px;

    }

    .wpApproachContent p {

        max-width: 210px;

        font-size: 9px;

    }

}


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

@media (max-width: 767px) {

    .wpApproach {

        padding: 75px 0;

    }

    .wpApproach .container {

        width: calc(100% - 30px);

    }

    .wpApproachHeading {

        margin-bottom: 45px;

    }

    .wpApproachPrefix {

        font-size: 8px;

        padding: 7px 12px;

    }

    .wpApproachHeading h2 {

        font-size: 35px;

        letter-spacing: -1px;

    }

    .wpApproachHeading p {

        font-size: 10px;

        line-height: 1.75;

    }

    /* Vertical Timeline */

    .wpApproachRoadmap {

        grid-template-columns: 1fr;

        gap: 0;

    }

    .wpApproachStep {

        display: grid;

        grid-template-columns: 75px 1fr;

        gap: 15px;

        min-height: 145px;

    }

    .wpApproachStepTop {

        height: 100%;

        justify-content: center;

    }

    .wpApproachStepTop::after {

        content: "";

        position: absolute;

        top: 82px;

        bottom: 0;

        left: 50%;

        width: 1px;

        transform: translateX(-50%);

        background:
            linear-gradient(
                to bottom,
                rgba(212,175,55,.30),
                rgba(212,175,55,.04)
            );

    }

    .wpApproachStep:last-child
    .wpApproachStepTop::after {

        display: none;

    }

    .wpApproachNumber {

        top: 0;

    }

    .wpApproachNode {

        margin-top: 30px;

        width: 48px;

        height: 48px;

        font-size: 12px;

    }

    .wpApproachContent {

        padding: 28px 0 30px;

        text-align: left;

    }

    .wpApproachContent h3 {

        font-size: 16px;

    }

    .wpApproachContent p {

        max-width: 100%;

        margin: 0;

        font-size: 9px;

        line-height: 1.7;

    }

    .wpApproachBottom {

        margin-top: 35px;

        justify-content: flex-start;

        padding: 15px;

    }

    .wpApproachBottom strong {

        font-size: 8px;

        line-height: 1.5;

    }

}


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

@media (max-width: 480px) {

    .wpApproachHeading h2 {

        font-size: 30px;

    }

    .wpApproachHeading p {

        font-size: 9px;

    }

    .wpApproachStep {

        grid-template-columns: 65px 1fr;

    }

    .wpApproachNode {

        width: 43px;

        height: 43px;

        box-shadow:

            0 0 0 6px var(--section),

            0 0 0 7px rgba(212,175,55,.07);

    }

    .wpApproachContent h3 {

        font-size: 14px;

    }

    .wpApproachContent p {

        font-size: 8.5px;

    }

    .wpApproachBottomIcon {

        flex-basis: 37px;

        width: 37px;

        height: 37px;

    }

}

/* Approach Section Ends Here */

/* Strategies Section Starts Here */

/* =========================================
   WEALTH PRESERVATION STRATEGIES
========================================= */

.wpStrategies {

    position: relative;

    padding: 115px 0;

    overflow: hidden;

    background: var(--section);

}

.wpStrategies .container {

    position: relative;

    z-index: 2;

    width: min(1180px, 92%);

    margin: auto;

}


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

.wpStrategiesHeading {

    max-width: 800px;

    margin: 0 auto 65px;

    text-align: center;

}

.wpStrategiesPrefix {

    display: inline-flex;

    align-items: center;

    padding: 8px 15px;

    margin-bottom: 20px;

    border-radius: 50px;

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

    background: rgba(212,175,55,.035);

    color: #D4AF37;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.7px;

    text-transform: uppercase;

}

.wpStrategiesHeading h2 {

    margin: 0 0 18px;

    color: var(--primary);

    font-size: clamp(38px, 4.4vw, 58px);

    line-height: 1.08;

    letter-spacing: -1.5px;

}

.wpStrategiesHeading h2 span {

    display: block;

    color: #D4AF37;

}

.wpStrategiesHeading p {

    max-width: 650px;

    margin: auto;

    color: var(--text);

    opacity: .68;

    font-size: 12px;

    line-height: 1.8;

}


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

.wpStrategiesGrid {

    display: grid;

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

    gap: 17px;

}


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

.wpStrategyCard {

    position: relative;

    min-height: 300px;

    padding: 25px;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    border-radius: 18px;

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

    background: rgba(212,175,55,.014);

    transition:

        transform .4s ease,

        border-color .4s ease,

        background .4s ease,

        box-shadow .4s ease;

}


/* Background glow */

.wpStrategyCard::before {

    content: "";

    position: absolute;

    width: 190px;

    height: 190px;

    top: -100px;

    right: -90px;

    border-radius: 50%;

    background: rgba(212,175,55,.045);

    filter: blur(40px);

    transition: .5s ease;

}

.wpStrategyCard:hover {

    transform: translateY(-7px);

    border-color: rgba(212,175,55,.27);

    background: rgba(212,175,55,.025);

    box-shadow:

        0 20px 50px rgba(0,0,0,.08);

}

.wpStrategyCard:hover::before {

    transform: scale(1.5);

}


/* =========================================
   FEATURED CARD
========================================= */

.wpStrategyFeatured {

    border-color: rgba(212,175,55,.20);

    background:

        linear-gradient(
            145deg,
            rgba(212,175,55,.045),
            rgba(212,175,55,.008)
        );

}

.wpStrategyFeatured::after {

    content: "";

    position: absolute;

    top: 0;

    left: 25px;

    right: 25px;

    height: 1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(212,175,55,.55),
            transparent
        );

}


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

.wpStrategyTop {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 25px;

}

.wpStrategyNumber {

    color: #D4AF37;

    opacity: .45;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;

}


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

.wpStrategyIcon {

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    color: #D4AF37;

    background: rgba(212,175,55,.055);

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

    transition:

        transform .4s ease,

        background .4s ease;

}

.wpStrategyIcon i {

    font-size: 15px;

}

.wpStrategyCard:hover .wpStrategyIcon {

    transform: translateY(-3px) rotate(-4deg);

    background: rgba(212,175,55,.09);

}


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

.wpStrategyMini {

    position: relative;

    z-index: 2;

    display: inline-block;

    margin-bottom: 8px;

    color: #D4AF37;

    opacity: .55;

    font-size: 6px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


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

.wpStrategyCard h3 {

    position: relative;

    z-index: 2;

    margin: 0 0 13px;

    color: var(--primary);

    font-size: 17px;

    font-weight: 600;

    line-height: 1.35;

}

.wpStrategyCard p {

    position: relative;

    z-index: 2;

    max-width: 320px;

    margin: 0;

    color: var(--text);

    opacity: .67;

    font-size: 10px;

    line-height: 1.75;

}


/* =========================================
   CARD FOOTER
========================================= */

.wpStrategyBottom {

    position: relative;

    z-index: 2;

    margin-top: auto;

    padding-top: 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-top: 1px solid rgba(212,175,55,.08);

}

.wpStrategyBottom span {

    color: var(--text);

    opacity: .42;

    font-size: 7px;

    letter-spacing: .6px;

}

.wpStrategyBottom i {

    color: #D4AF37;

    font-size: 8px;

    transition: transform .3s ease;

}

.wpStrategyCard:hover .wpStrategyBottom i {

    transform: translateX(5px);

}


/* =========================================
   BOTTOM PRINCIPLE
========================================= */

.wpStrategiesPrinciple {

    max-width: 800px;

    margin: 55px auto 0;

    padding: 17px 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    border-radius: 14px;

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

    background: rgba(212,175,55,.018);

}

.wpStrategiesPrincipleIcon {

    flex: 0 0 42px;

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    color: #D4AF37;

    background: rgba(212,175,55,.055);

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

}

.wpStrategiesPrincipleIcon i {

    font-size: 13px;

}

.wpStrategiesPrinciple span {

    display: block;

    margin-bottom: 4px;

    color: #D4AF37;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 1.4px;

}

.wpStrategiesPrinciple strong {

    display: block;

    color: var(--primary);

    font-size: 10px;

    font-weight: 500;

}


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

@media (max-width: 991px) {

    .wpStrategies {

        padding: 90px 0;

    }

    .wpStrategiesHeading {

        margin-bottom: 50px;

    }

    .wpStrategiesGrid {

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

    }

}


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

@media (max-width: 767px) {

    .wpStrategies {

        padding: 75px 0;

    }

    .wpStrategies .container {

        width: calc(100% - 30px);

    }

    .wpStrategiesPrefix {

        font-size: 8px;

        padding: 7px 12px;

    }

    .wpStrategiesHeading h2 {

        font-size: 35px;

        letter-spacing: -1px;

    }

    .wpStrategiesHeading p {

        font-size: 10px;

        line-height: 1.75;

    }

    .wpStrategiesGrid {

        grid-template-columns: 1fr;

        gap: 14px;

    }

    .wpStrategyCard {

        min-height: 260px;

        padding: 22px;

    }

    .wpStrategyCard h3 {

        font-size: 15px;

    }

    .wpStrategyCard p {

        max-width: none;

        font-size: 10px;

    }

    .wpStrategiesPrinciple {

        margin-top: 40px;

        justify-content: flex-start;

        padding: 15px;

    }

    .wpStrategiesPrinciple strong {

        font-size: 8px;

        line-height: 1.5;

    }

}


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

@media (max-width: 480px) {

    .wpStrategiesHeading h2 {

        font-size: 30px;

    }

    .wpStrategiesHeading p {

        font-size: 9px;

    }

    .wpStrategyCard {

        min-height: 240px;

    }

    .wpStrategyIcon {

        width: 44px;

        height: 44px;

    }

    .wpStrategyCard h3 {

        font-size: 14px;

    }

    .wpStrategyCard p {

        font-size: 9px;

    }

    .wpStrategiesPrincipleIcon {

        flex-basis: 37px;

        width: 37px;

        height: 37px;

    }

}

/* Strategies Section Ends Here */

/* Stages Section Starts Here */

/* =========================================
   WEALTH PRESERVATION
   LIFE STAGES JOURNEY
========================================= */

.wpLifeStages {

    position: relative;

    padding: 115px 0;

    overflow: hidden;

    background: var(--section);

}

.wpLifeStages .container {

    position: relative;

    z-index: 2;

    width: min(1180px, 92%);

    margin: auto;

}


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

.wpLifeHeading {

    max-width: 800px;

    margin: 0 auto 80px;

    text-align: center;

}

.wpLifePrefix {

    display: inline-flex;

    align-items: center;

    padding: 8px 15px;

    margin-bottom: 20px;

    border-radius: 50px;

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

    background: rgba(212,175,55,.035);

    color: #D4AF37;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.7px;

    text-transform: uppercase;

}

.wpLifeHeading h2 {

    margin: 0 0 18px;

    color: var(--primary);

    font-size: clamp(38px, 4.5vw, 58px);

    line-height: 1.08;

    letter-spacing: -1.5px;

}

.wpLifeHeading h2 span {

    display: block;

    color: #D4AF37;

}

.wpLifeHeading p {

    max-width: 650px;

    margin: auto;

    color: var(--text);

    opacity: .68;

    font-size: 12px;

    line-height: 1.8;

}


/* =========================================
   JOURNEY
========================================= */

.wpLifeJourney {

    position: relative;

    max-width: 1050px;

    margin: auto;

}


/* =========================================
   CENTRAL LINE
========================================= */

.wpLifeLine {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 50%;

    width: 1px;

    transform: translateX(-50%);

    background: rgba(212,175,55,.11);

    z-index: 1;

}

.wpLifeLineProgress {

    width: 100%;

    height: 100%;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(212,175,55,.75),
            rgba(212,175,55,.20),
            transparent
        );

    background-size: 100% 200%;

    animation: wpLifeProgress 5s ease-in-out infinite;

}


/* =========================================
   STAGE
========================================= */

.wpLifeStage {

    position: relative;

    display: grid;

    grid-template-columns: 1fr 70px 1fr;

    align-items: center;

    min-height: 205px;

    z-index: 2;

}


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

.wpLifeStageLeft .wpLifeContent {

    grid-column: 1;

    text-align: right;

}

.wpLifeStageLeft .wpLifeNode {

    grid-column: 2;

}

.wpLifeStageRight .wpLifeNode {

    grid-column: 2;

}

.wpLifeStageRight .wpLifeContent {

    grid-column: 3;

    text-align: left;

}


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

.wpLifeContent {

    position: relative;

    padding: 25px;

    border-radius: 17px;

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

    background: rgba(212,175,55,.014);

    transition:

        transform .4s ease,

        border-color .4s ease,

        background .4s ease,

        box-shadow .4s ease;

}

.wpLifeContent::before {

    content: "";

    position: absolute;

    top: 50%;

    width: 35px;

    height: 1px;

    background: rgba(212,175,55,.20);

}

.wpLifeStageLeft .wpLifeContent::before {

    right: -35px;

}

.wpLifeStageRight .wpLifeContent::before {

    left: -35px;

}

.wpLifeContent:hover {

    transform: translateY(-5px);

    border-color: rgba(212,175,55,.25);

    background: rgba(212,175,55,.025);

    box-shadow:

        0 18px 40px rgba(0,0,0,.07);

}


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

.wpLifeTop {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 17px;

}

.wpLifeStageLeft .wpLifeTop {

    justify-content: flex-end;

}

.wpLifeStageRight .wpLifeTop {

    justify-content: flex-start;

}

.wpLifeNumber {

    color: #D4AF37;

    opacity: .45;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.5px;

}

.wpLifeIcon {

    width: 43px;

    height: 43px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    color: #D4AF37;

    background: rgba(212,175,55,.055);

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

    transition:

        transform .4s ease,

        background .4s ease;

}

.wpLifeContent:hover .wpLifeIcon {

    transform: scale(1.08);

    background: rgba(212,175,55,.09);

}

.wpLifeIcon i {

    font-size: 13px;

}


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

.wpLifeLabel {

    display: block;

    margin-bottom: 6px;

    color: #D4AF37;

    opacity: .55;

    font-size: 6px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


/* =========================================
   TITLE
========================================= */

.wpLifeContent h3 {

    margin: 0 0 10px;

    color: var(--primary);

    font-size: 18px;

    font-weight: 600;

}

.wpLifeContent p {

    max-width: 370px;

    margin: 0;

    color: var(--text);

    opacity: .66;

    font-size: 9px;

    line-height: 1.75;

}


/* =========================================
   CENTRAL NODE
========================================= */

.wpLifeNode {

    position: relative;

    width: 70px;

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

}

.wpLifeNode::before {

    content: "";

    position: absolute;

    width: 23px;

    height: 23px;

    border-radius: 50%;

    background: var(--section);

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

    box-shadow:

        0 0 0 7px var(--section),

        0 0 0 8px rgba(212,175,55,.08),

        0 0 25px rgba(212,175,55,.08);

    z-index: 3;

}

.wpLifeNode span {

    position: relative;

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #D4AF37;

    z-index: 4;

    box-shadow:

        0 0 12px rgba(212,175,55,.45);

}


/* =========================================
   BOTTOM JOURNEY MESSAGE
========================================= */

.wpLifeBottom {

    max-width: 780px;

    margin: 65px auto 0;

    padding: 17px 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    border-radius: 14px;

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

    background: rgba(212,175,55,.018);

}

.wpLifeBottomIcon {

    flex: 0 0 42px;

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    color: #D4AF37;

    background: rgba(212,175,55,.055);

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

}

.wpLifeBottomIcon i {

    font-size: 13px;

}

.wpLifeBottom span {

    display: block;

    margin-bottom: 4px;

    color: #D4AF37;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 1.4px;

}

.wpLifeBottom strong {

    display: block;

    color: var(--primary);

    font-size: 10px;

    font-weight: 500;

}


/* =========================================
   ANIMATION
========================================= */

@keyframes wpLifeProgress {

    0% {

        background-position: 0% 0%;

    }

    50% {

        background-position: 0% 100%;

    }

    100% {

        background-position: 0% 0%;

    }

}


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

@media (max-width: 991px) {

    .wpLifeStages {

        padding: 90px 0;

    }

    .wpLifeHeading {

        margin-bottom: 60px;

    }

    .wpLifeStage {

        grid-template-columns: 1fr 60px 1fr;

    }

    .wpLifeContent {

        padding: 20px;

    }

    .wpLifeContent h3 {

        font-size: 16px;

    }

    .wpLifeContent p {

        font-size: 8.5px;

    }

}


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

@media (max-width: 767px) {

    .wpLifeStages {

        padding: 75px 0;

    }

    .wpLifeStages .container {

        width: calc(100% - 30px);

    }

    .wpLifeHeading {

        margin-bottom: 45px;

    }

    .wpLifePrefix {

        font-size: 8px;

        padding: 7px 12px;

    }

    .wpLifeHeading h2 {

        font-size: 35px;

        letter-spacing: -1px;

    }

    .wpLifeHeading p {

        font-size: 10px;

        line-height: 1.75;

    }


    /* Vertical Journey */

    .wpLifeLine {

        left: 25px;

        transform: none;

    }

    .wpLifeStage {

        display: grid;

        grid-template-columns: 50px 1fr;

        min-height: auto;

        margin-bottom: 18px;

        gap: 18px;

    }


    .wpLifeStageLeft .wpLifeContent,
    .wpLifeStageRight .wpLifeContent {

        grid-column: 2;

        grid-row: 1;

        text-align: left;

    }

    .wpLifeStageLeft .wpLifeNode,
    .wpLifeStageRight .wpLifeNode {

        grid-column: 1;

        grid-row: 1;

    }


    .wpLifeNode {

        width: 50px;

        height: 100%;

        min-height: 150px;

    }

    .wpLifeNode::before {

        width: 20px;

        height: 20px;

    }

    .wpLifeNode span {

        width: 6px;

        height: 6px;

    }


    .wpLifeContent {

        padding: 20px;

    }


    .wpLifeContent::before {

        display: none;

    }


    .wpLifeTop,
    .wpLifeStageLeft .wpLifeTop,
    .wpLifeStageRight .wpLifeTop {

        justify-content: flex-start;

    }

    .wpLifeLabel {

        font-size: 6px;

    }

    .wpLifeContent h3 {

        font-size: 15px;

    }

    .wpLifeContent p {

        max-width: none;

        font-size: 9px;

    }


    .wpLifeBottom {

        margin-top: 35px;

        justify-content: flex-start;

        padding: 15px;

    }

    .wpLifeBottom strong {

        font-size: 8px;

        line-height: 1.5;

    }

}


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

@media (max-width: 480px) {

    .wpLifeHeading h2 {

        font-size: 30px;

    }

    .wpLifeHeading p {

        font-size: 9px;

    }

    .wpLifeStage {

        grid-template-columns: 42px 1fr;

        gap: 12px;

    }

    .wpLifeNode {

        width: 42px;

    }

    .wpLifeNode::before {

        width: 18px;

        height: 18px;

        box-shadow:

            0 0 0 5px var(--section),

            0 0 0 6px rgba(212,175,55,.08);

    }

    .wpLifeContent {

        padding: 17px;

    }

    .wpLifeIcon {

        width: 38px;

        height: 38px;

    }

    .wpLifeContent h3 {

        font-size: 14px;

    }

    .wpLifeContent p {

        font-size: 8.5px;

    }

    .wpLifeBottomIcon {

        flex-basis: 37px;

        width: 37px;

        height: 37px;

    }

}

/* Stages Section Ends Here */

/* Transformation Section Starts Here */

/* =========================================
   WEALTH TRANSFORMATION
   CLEAN EDITORIAL DESIGN
========================================= */

.wpTransformation {

    position: relative;

    padding: 110px 0;

    overflow: hidden;

    background: var(--section);

}

.wpTransformation .container {

    width: min(1180px, 92%);

    margin: auto;

}


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

.wpTransformationHeading {

    max-width: 780px;

    margin: 0 auto 70px;

    text-align: center;

}

.wpTransformationPrefix {

    display: inline-block;

    margin-bottom: 18px;

    padding: 8px 15px;

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

    border-radius: 50px;

    background: rgba(212,175,55,.035);

    color: #D4AF37;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.6px;

    text-transform: uppercase;

}

.wpTransformationHeading h2 {

    margin: 0 0 18px;

    color: var(--primary);

    font-size: clamp(38px, 4.5vw, 58px);

    line-height: 1.08;

    letter-spacing: -1.5px;

}

.wpTransformationHeading h2 span {

    display: block;

    color: #D4AF37;

}

.wpTransformationHeading p {

    max-width: 650px;

    margin: auto;

    color: var(--text);

    opacity: .65;

    font-size: 12px;

    line-height: 1.8;

}


/* =========================================
   PATH
========================================= */

.wpTransformationPath {

    position: relative;

    display: grid;

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

    border-top: 1px solid rgba(212,175,55,.15);

}


/* =========================================
   STAGE
========================================= */

.wpTransformationStage {

    position: relative;

    min-height: 270px;

    padding: 28px 22px 25px;

    border-right: 1px solid rgba(212,175,55,.10);

    transition:

        background .35s ease,

        transform .35s ease;

}

.wpTransformationStage:first-child {

    border-left: 1px solid rgba(212,175,55,.10);

}

.wpTransformationStage:hover {

    background: rgba(212,175,55,.025);

    transform: translateY(-4px);

}


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

.wpTransformationStageHead {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 38px;

}

.wpTransformationNumber {

    color: #D4AF37;

    opacity: .45;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;

}

.wpTransformationArrow {

    color: #D4AF37;

    opacity: .45;

    font-size: 14px;

    transition: transform .3s ease;

}

.wpTransformationStage:hover
.wpTransformationArrow {

    transform: translateX(4px);

}


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

.wpTransformationLabel {

    display: block;

    margin-bottom: 9px;

    color: #D4AF37;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1.6px;

}


/* =========================================
   TITLE
========================================= */

.wpTransformationStage h3 {

    margin: 0 0 13px;

    color: var(--primary);

    font-size: 18px;

    font-weight: 600;

    line-height: 1.3;

}

.wpTransformationStage p {

    max-width: 205px;

    margin: 0;

    color: var(--text);

    opacity: .63;

    font-size: 9px;

    line-height: 1.8;

}


/* =========================================
   HIGHLIGHT STAGE
========================================= */

.wpTransformationStageHighlight {

    background:

        linear-gradient(
            180deg,
            rgba(212,175,55,.055),
            rgba(212,175,55,.012)
        );

    border-top: 2px solid #D4AF37;

}

.wpTransformationStageHighlight
.wpTransformationLabel {

    opacity: 1;

}

.wpTransformationStageHighlight h3 {

    font-size: 19px;

}


/* =========================================
   FINAL STAGE
========================================= */

.wpTransformationFinal {

    border-right: none;

}

.wpTransformationFinal
.wpTransformationArrow {

    width: 24px;

    height: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(212,175,55,.07);

}


/* =========================================
   STATEMENT
========================================= */

.wpTransformationStatement {

    margin: 55px auto 0;

    text-align: center;

}

.wpTransformationStatement > span {

    display: block;

    margin-bottom: 15px;

    color: var(--text);

    opacity: .4;

    font-size: 6px;

    font-weight: 800;

    letter-spacing: 2px;

}

.wpTransformationFlow {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

}

.wpTransformationFlow strong {

    color: #D4AF37;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.2px;

}

.wpTransformationFlow i {

    color: #D4AF37;

    opacity: .35;

    font-size: 8px;

}


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

@media (max-width: 991px) {

    .wpTransformation {

        padding: 90px 0;

    }

    .wpTransformationHeading {

        margin-bottom: 55px;

    }

    .wpTransformationPath {

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

        border-top: none;

        gap: 12px;

    }

    .wpTransformationStage {

        min-height: 230px;

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

        border-radius: 14px;

    }

    .wpTransformationStage:first-child {

        border-left: 1px solid rgba(212,175,55,.10);

    }

    .wpTransformationFinal {

        grid-column: span 2;

    }

    .wpTransformationStage p {

        max-width: 100%;

    }

}


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

@media (max-width: 767px) {

    .wpTransformation {

        padding: 75px 0;

    }

    .wpTransformation .container {

        width: calc(100% - 30px);

    }

    .wpTransformationHeading {

        margin-bottom: 40px;

    }

    .wpTransformationPrefix {

        font-size: 8px;

        padding: 7px 12px;

    }

    .wpTransformationHeading h2 {

        font-size: 34px;

        letter-spacing: -1px;

    }

    .wpTransformationHeading p {

        font-size: 10px;

        line-height: 1.75;

    }


    .wpTransformationPath {

        grid-template-columns: 1fr;

        gap: 10px;

    }

    .wpTransformationStage {

        min-height: auto;

        padding: 20px;

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

        border-radius: 14px;

    }

    .wpTransformationStage:first-child {

        border-left: 1px solid rgba(212,175,55,.10);

    }

    .wpTransformationFinal {

        grid-column: auto;

    }

    .wpTransformationStageHead {

        margin-bottom: 25px;

    }

    .wpTransformationStage h3 {

        font-size: 16px;

    }

    .wpTransformationStage p {

        max-width: none;

        font-size: 9px;

    }

    .wpTransformationStageHighlight {

        border-top: 2px solid #D4AF37;

    }


    /* Bottom Flow */

    .wpTransformationStatement {

        margin-top: 35px;

    }

    .wpTransformationFlow {

        gap: 9px;

        flex-wrap: wrap;

    }

    .wpTransformationFlow strong {

        font-size: 8px;

    }

    .wpTransformationFlow i {

        font-size: 6px;

    }

}


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

@media (max-width: 480px) {

    .wpTransformationHeading h2 {

        font-size: 29px;

    }

    .wpTransformationHeading p {

        font-size: 9px;

    }

    .wpTransformationStage {

        padding: 18px;

    }

    .wpTransformationStage h3 {

        font-size: 15px;

    }

    .wpTransformationStage p {

        font-size: 8.5px;

    }

    .wpTransformationFlow {

        gap: 6px;

    }

    .wpTransformationFlow strong {

        font-size: 7px;

    }

}

/* Transformation Section Ends Here */

/* Benefits Section Starts Here */

/* =========================================
   WEALTH PRESERVATION
   PROFESSIONAL BENEFITS
========================================= */

.wpBenefits {

    position: relative;

    padding: 115px 0;

    overflow: hidden;

    background: var(--section);

}

.wpBenefits .container {

    width: min(1100px, 92%);

    margin: auto;

    position: relative;

    z-index: 2;

}


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

.wpBenefitsHeading {

    max-width: 780px;

    margin: 0 auto 75px;

    text-align: center;

}

.wpBenefitsPrefix {

    display: inline-flex;

    align-items: center;

    padding: 8px 15px;

    margin-bottom: 20px;

    border-radius: 50px;

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

    background: rgba(212,175,55,.035);

    color: #D4AF37;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.6px;

    text-transform: uppercase;

}

.wpBenefitsHeading h2 {

    margin: 0 0 18px;

    color: var(--primary);

    font-size: clamp(38px, 4.5vw, 58px);

    line-height: 1.08;

    letter-spacing: -1.5px;

}

.wpBenefitsHeading h2 span {

    display: block;

    color: #D4AF37;

}

.wpBenefitsHeading p {

    max-width: 650px;

    margin: auto;

    color: var(--text);

    opacity: .65;

    font-size: 12px;

    line-height: 1.8;

}


/* =========================================
   FRAMEWORK
========================================= */

.wpBenefitsFramework {

    position: relative;

    max-width: 920px;

    margin: auto;

}


/* Central spine */

.wpBenefitsFramework::before {

    content: "";

    position: absolute;

    top: 0;

    bottom: 0;

    left: 50%;

    width: 1px;

    transform: translateX(-50%);

    background:

        linear-gradient(
            to bottom,
            transparent,
            rgba(212,175,55,.20),
            rgba(212,175,55,.20),
            transparent
        );

}


/* =========================================
   BENEFIT
========================================= */

.wpBenefit {

    position: relative;

    width: calc(50% - 45px);

    min-height: 145px;

    margin-bottom: 35px;

    padding: 22px;

    display: flex;

    align-items: flex-start;

    gap: 15px;

    border-radius: 16px;

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

    background: rgba(212,175,55,.014);

    transition:

        transform .4s ease,

        border-color .4s ease,

        background .4s ease,

        box-shadow .4s ease;

}

.wpBenefit:hover {

    border-color: rgba(212,175,55,.25);

    background: rgba(212,175,55,.025);

    box-shadow:

        0 18px 40px rgba(0,0,0,.07);

}


/* Left */

.wpBenefitLeft {

    margin-right: auto;

}


/* Right */

.wpBenefitRight {

    margin-left: auto;

}


/* Connector */

.wpBenefit::after {

    content: "";

    position: absolute;

    top: 50%;

    width: 45px;

    height: 1px;

    background: rgba(212,175,55,.18);

}

.wpBenefitLeft::after {

    right: -45px;

}

.wpBenefitRight::after {

    left: -45px;

}


/* =========================================
   NUMBER
========================================= */

.wpBenefitNumber {

    position: absolute;

    top: 13px;

    color: #D4AF37;

    opacity: .35;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1px;

}

.wpBenefitLeft .wpBenefitNumber {

    right: 15px;

}

.wpBenefitRight .wpBenefitNumber {

    left: 15px;

}


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

.wpBenefitIcon {

    flex: 0 0 46px;

    width: 46px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-top: 5px;

    border-radius: 12px;

    color: #D4AF37;

    background: rgba(212,175,55,.055);

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

    transition:

        transform .35s ease,

        background .35s ease;

}

.wpBenefit:hover .wpBenefitIcon {

    transform: translateY(-3px) scale(1.06);

    background: rgba(212,175,55,.09);

}

.wpBenefitIcon i {

    font-size: 13px;

}


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

.wpBenefitContent {

    padding-right: 10px;

}

.wpBenefitContent span {

    display: block;

    margin-bottom: 6px;

    color: #D4AF37;

    opacity: .52;

    font-size: 6px;

    font-weight: 800;

    letter-spacing: 1.4px;

}

.wpBenefitContent h3 {

    margin: 0 0 9px;

    color: var(--primary);

    font-size: 16px;

    font-weight: 600;

    line-height: 1.35;

}

.wpBenefitContent p {

    margin: 0;

    color: var(--text);

    opacity: .64;

    font-size: 9px;

    line-height: 1.75;

}


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

.wpBenefitsBottom {

    max-width: 720px;

    margin: 50px auto 0;

    padding: 17px 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    border-radius: 14px;

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

    background: rgba(212,175,55,.018);

}

.wpBenefitsBottomIcon {

    flex: 0 0 42px;

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    color: #D4AF37;

    background: rgba(212,175,55,.055);

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

}

.wpBenefitsBottomIcon i {

    font-size: 13px;

}

.wpBenefitsBottom span {

    display: block;

    margin-bottom: 4px;

    color: #D4AF37;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 1.4px;

}

.wpBenefitsBottom strong {

    display: block;

    color: var(--primary);

    font-size: 10px;

    font-weight: 500;

}


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

@media (max-width: 991px) {

    .wpBenefits {

        padding: 90px 0;

    }

    .wpBenefitsHeading {

        margin-bottom: 60px;

    }

    .wpBenefit {

        width: calc(50% - 35px);

    }

    .wpBenefitLeft::after {

        right: -35px;

    }

    .wpBenefitRight::after {

        left: -35px;

    }

}


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

@media (max-width: 767px) {

    .wpBenefits {

        padding: 75px 0;

    }

    .wpBenefits .container {

        width: calc(100% - 30px);

    }

    .wpBenefitsHeading {

        margin-bottom: 45px;

    }

    .wpBenefitsPrefix {

        font-size: 8px;

        padding: 7px 12px;

    }

    .wpBenefitsHeading h2 {

        font-size: 35px;

        letter-spacing: -1px;

    }

    .wpBenefitsHeading p {

        font-size: 10px;

        line-height: 1.75;

    }


    /* Remove Center Spine */

    .wpBenefitsFramework {

        display: flex;

        flex-direction: column;

        gap: 12px;

    }

    .wpBenefitsFramework::before {

        display: none;

    }


    /* Full Width */

    .wpBenefit,
    .wpBenefitLeft,
    .wpBenefitRight {

        width: 100%;

        margin: 0;

        min-height: auto;

        padding: 20px;

    }


    /* Remove Connectors */

    .wpBenefit::after {

        display: none;

    }


    .wpBenefitNumber {

        top: 12px;

    }

    .wpBenefitLeft .wpBenefitNumber {

        right: 15px;

        left: auto;

    }

    .wpBenefitRight .wpBenefitNumber {

        left: auto;

        right: 15px;

    }


    .wpBenefitContent h3 {

        font-size: 15px;

    }

    .wpBenefitContent p {

        font-size: 9px;

    }


    .wpBenefitsBottom {

        margin-top: 35px;

        justify-content: flex-start;

        padding: 15px;

    }

    .wpBenefitsBottom strong {

        font-size: 8px;

        line-height: 1.5;

    }

}


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

@media (max-width: 480px) {

    .wpBenefitsHeading h2 {

        font-size: 30px;

    }

    .wpBenefitsHeading p {

        font-size: 9px;

    }

    .wpBenefit {

        padding: 17px;

    }

    .wpBenefitIcon {

        flex-basis: 42px;

        width: 42px;

        height: 42px;

    }

    .wpBenefitContent h3 {

        font-size: 14px;

    }

    .wpBenefitContent p {

        font-size: 8.5px;

    }

    .wpBenefitsBottomIcon {

        flex-basis: 37px;

        width: 37px;

        height: 37px;

    }

}

/* Benefits Section Ends Here */

/* CTA Section Starts Here */

/* =========================================
   WEALTH PRESERVATION
   FINAL CTA
========================================= */

.wpFinalCta {

    position: relative;

    padding: 115px 0;

    overflow: hidden;

    background: var(--section);

}


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

.wpFinalCta .container {

    position: relative;

    z-index: 5;

    width: min(1180px, 92%);

    margin: auto;

}


/* =========================================
   AMBIENT GLOWS
========================================= */

.wpFinalCtaGlow {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(90px);

}

.wpFinalCtaGlowOne {

    width: 420px;

    height: 420px;

    right: 8%;

    top: 5%;

    background: rgba(212,175,55,.055);

}

.wpFinalCtaGlowTwo {

    width: 300px;

    height: 300px;

    left: -100px;

    bottom: -120px;

    background: rgba(212,175,55,.025);

}


/* =========================================
   MAIN WRAPPER
========================================= */

.wpFinalCtaWrapper {

    position: relative;

    min-height: 560px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 70px;

    padding: 70px;

    overflow: hidden;

    border-radius: 28px;

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

    background:

        linear-gradient(
            135deg,
            rgba(212,175,55,.025),
            rgba(212,175,55,.008)
        );

}


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

.wpFinalCtaContent {

    position: relative;

    z-index: 5;

    max-width: 590px;

}

.wpFinalCtaPrefix {

    display: inline-flex;

    align-items: center;

    padding: 8px 15px;

    margin-bottom: 22px;

    border-radius: 50px;

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

    background: rgba(212,175,55,.04);

    color: #D4AF37;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.7px;

    text-transform: uppercase;

}

.wpFinalCtaContent h2 {

    margin: 0 0 22px;

    color: var(--primary);

    font-size: clamp(40px, 4.5vw, 60px);

    line-height: 1.05;

    letter-spacing: -1.8px;

}

.wpFinalCtaContent h2 span {

    display: block;

    color: #D4AF37;

}

.wpFinalCtaContent p {

    max-width: 560px;

    margin: 0;

    color: var(--text);

    opacity: .67;

    font-size: 12px;

    line-height: 1.85;

}


/* =========================================
   BUTTONS
========================================= */

.wpFinalCtaButtons {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 32px;

    flex-wrap: wrap;

}

.wpFinalCtaPrimary,
.wpFinalCtaSecondary {

    min-height: 48px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 0 21px;

    border-radius: 9px;

    text-decoration: none;

    font-size: 9px;

    font-weight: 700;

    transition:

        transform .3s ease,

        box-shadow .3s ease,

        background .3s ease;

}


/* Primary */

.wpFinalCtaPrimary {

    color: #111;

    background: #D4AF37;

    border: 1px solid #D4AF37;

    box-shadow:

        0 8px 25px rgba(212,175,55,.12);

}

.wpFinalCtaPrimary i {

    font-size: 9px;

    transition: transform .3s ease;

}

.wpFinalCtaPrimary:hover {

    color: #111;

    transform: translateY(-3px);

    box-shadow:

        0 12px 30px rgba(212,175,55,.22);

}

.wpFinalCtaPrimary:hover i {

    transform: translateX(4px);

}


/* Secondary */

.wpFinalCtaSecondary {

    color: var(--primary);

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

    background: rgba(212,175,55,.025);

}

.wpFinalCtaSecondary i {

    color: #D4AF37;

}

.wpFinalCtaSecondary:hover {

    color: var(--primary);

    transform: translateY(-3px);

    border-color: rgba(212,175,55,.38);

    background: rgba(212,175,55,.06);

}


/* =========================================
   VISUAL
========================================= */

.wpFinalCtaVisual {

    position: relative;

    min-height: 440px;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* =========================================
   VAULT AURA
========================================= */

.wpVaultAura {

    position: absolute;

    width: 390px;

    height: 390px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(212,175,55,.12),
            rgba(212,175,55,.035) 40%,
            transparent 70%
        );

    filter: blur(5px);

    animation: wpVaultAuraPulse 4s ease-in-out infinite;

}


/* =========================================
   GRAPH
========================================= */

.wpVaultGraph {

    position: absolute;

    width: 100%;

    max-width: 520px;

    height: 190px;

    bottom: 55px;

    left: 50%;

    transform: translateX(-50%);

    color: rgba(212,175,55,.23);

    opacity: .7;

}

.wpVaultGraph svg {

    width: 100%;

    height: 100%;

}


/* =========================================
   VAULT
========================================= */

.wpVault {

    position: relative;

    z-index: 5;

    width: 245px;

    height: 245px;

    display: flex;

    align-items: center;

    justify-content: center;

}

.wpVaultOuter {

    position: relative;

    width: 210px;

    height: 210px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

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

    background:

        radial-gradient(
            circle,
            rgba(212,175,55,.07),
            rgba(212,175,55,.015) 60%,
            transparent 70%
        );

    box-shadow:

        0 0 60px rgba(212,175,55,.08),

        inset 0 0 40px rgba(212,175,55,.025);

}


/* Rings */

.wpVaultRing {

    position: absolute;

    border-radius: 50%;

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

}

.wpVaultRingOne {

    inset: 14px;

    animation: wpVaultRotate 20s linear infinite;

}

.wpVaultRingTwo {

    inset: 30px;

    border-style: dashed;

    border-color: rgba(212,175,55,.12);

    animation: wpVaultRotateReverse 25s linear infinite;

}


/* =========================================
   VAULT DOOR
========================================= */

.wpVaultDoor {

    position: relative;

    width: 115px;

    height: 115px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:

        linear-gradient(
            145deg,
            rgba(212,175,55,.16),
            rgba(212,175,55,.035)
        );

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

    box-shadow:

        inset 0 0 25px rgba(212,175,55,.05),

        0 10px 35px rgba(0,0,0,.12);

}

.wpVaultDoor::before {

    content: "";

    position: absolute;

    inset: 9px;

    border-radius: 50%;

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

}


/* Lock */

.wpVaultLock {

    position: relative;

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    color: #D4AF37;

    background: rgba(212,175,55,.07);

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

}

.wpVaultLock i {

    font-size: 17px;

}


/* =========================================
   LEGACY
========================================= */

.wpVaultLegacy {

    position: absolute;

    right: 10px;

    bottom: 20px;

    z-index: 8;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 10px 13px;

    border-radius: 9px;

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

    background: rgba(0,0,0,.025);

    backdrop-filter: blur(8px);

}

.wpVaultLegacy i {

    color: #D4AF37;

    font-size: 11px;

}

.wpVaultLegacy span {

    color: var(--primary);

    font-size: 6px;

    font-weight: 800;

    letter-spacing: 1.3px;

}


/* =========================================
   FLOATING ICONS
========================================= */

.wpVaultFloat {

    position: absolute;

    width: 43px;

    height: 43px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    color: #D4AF37;

    background: rgba(212,175,55,.045);

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

    backdrop-filter: blur(8px);

    z-index: 8;

}

.wpVaultFloat i {

    font-size: 12px;

}

.wpVaultFloatOne {

    top: 55px;

    left: 50px;

    animation: wpVaultFloat 4s ease-in-out infinite;

}

.wpVaultFloatTwo {

    top: 110px;

    right: 25px;

    animation: wpVaultFloat 4.5s ease-in-out infinite .5s;

}

.wpVaultFloatThree {

    bottom: 80px;

    left: 30px;

    animation: wpVaultFloat 5s ease-in-out infinite 1s;

}


/* =========================================
   BOTTOM LINE
========================================= */

.wpFinalCtaBottom {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    margin-top: 28px;

}

.wpFinalCtaBottom span {

    color: var(--text);

    opacity: .38;

    font-size: 6px;

    font-weight: 800;

    letter-spacing: 1.5px;

}

.wpFinalCtaBottom span:first-child {

    color: #D4AF37;

    opacity: .8;

}

.wpFinalCtaBottom i {

    color: #D4AF37;

    opacity: .25;

    font-size: 6px;

}


/* =========================================
   ANIMATIONS
========================================= */

@keyframes wpVaultAuraPulse {

    0%,
    100% {

        transform: scale(.92);

        opacity: .65;

    }

    50% {

        transform: scale(1.06);

        opacity: 1;

    }

}

@keyframes wpVaultRotate {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}

@keyframes wpVaultRotateReverse {

    from {

        transform: rotate(360deg);

    }

    to {

        transform: rotate(0deg);

    }

}

@keyframes wpVaultFloat {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-9px);

    }

}


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

@media (max-width: 991px) {

    .wpFinalCta {

        padding: 90px 0;

    }

    .wpFinalCtaWrapper {

        grid-template-columns: 1fr;

        gap: 40px;

        padding: 55px;

    }

    .wpFinalCtaContent {

        max-width: 700px;

        margin: auto;

        text-align: center;

    }

    .wpFinalCtaContent p {

        margin: auto;

    }

    .wpFinalCtaButtons {

        justify-content: center;

    }

    .wpFinalCtaVisual {

        min-height: 400px;

    }

}


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

@media (max-width: 767px) {

    .wpFinalCta {

        padding: 75px 0;

    }

    .wpFinalCta .container {

        width: calc(100% - 30px);

    }

    .wpFinalCtaWrapper {

        min-height: auto;

        padding: 40px 22px;

        border-radius: 20px;

        gap: 25px;

    }

    .wpFinalCtaPrefix {

        font-size: 8px;

        padding: 7px 12px;

    }

    .wpFinalCtaContent h2 {

        font-size: 35px;

        letter-spacing: -1px;

    }

    .wpFinalCtaContent p {

        font-size: 10px;

        line-height: 1.75;

    }

    .wpFinalCtaButtons {

        flex-direction: column;

        align-items: stretch;

    }

    .wpFinalCtaPrimary,
    .wpFinalCtaSecondary {

        width: 100%;

        min-height: 47px;

        font-size: 9px;

    }


    /* Visual */

    .wpFinalCtaVisual {

        min-height: 330px;

    }

    .wpVaultAura {

        width: 280px;

        height: 280px;

    }

    .wpVault {

        width: 200px;

        height: 200px;

    }

    .wpVaultOuter {

        width: 175px;

        height: 175px;

    }

    .wpVaultDoor {

        width: 95px;

        height: 95px;

    }

    .wpVaultLock {

        width: 40px;

        height: 40px;

    }

    .wpVaultLock i {

        font-size: 14px;

    }

    .wpVaultFloatOne {

        top: 35px;

        left: 10px;

    }

    .wpVaultFloatTwo {

        top: 80px;

        right: 0;

    }

    .wpVaultFloatThree {

        bottom: 50px;

        left: 0;

    }

    .wpVaultLegacy {

        right: 0;

        bottom: 10px;

    }

    .wpFinalCtaBottom {

        flex-wrap: wrap;

        gap: 8px;

    }

}


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

@media (max-width: 480px) {

    .wpFinalCtaContent h2 {

        font-size: 30px;

    }

    .wpFinalCtaContent p {

        font-size: 9px;

    }

    .wpFinalCtaWrapper {

        padding: 35px 17px;

    }

    .wpFinalCtaVisual {

        min-height: 290px;

    }

    .wpVaultAura {

        width: 240px;

        height: 240px;

    }

    .wpVault {

        width: 175px;

        height: 175px;

    }

    .wpVaultOuter {

        width: 150px;

        height: 150px;

    }

    .wpVaultDoor {

        width: 82px;

        height: 82px;

    }

    .wpVaultFloat {

        width: 37px;

        height: 37px;

    }

    .wpVaultLegacy {

        padding: 8px 10px;

    }

    .wpFinalCtaBottom span {

        font-size: 5px;

    }

}

/* CTA Section Ends Here */

/* Wealth Preservation Page Ends Here */


/* Education Planning Page Starts Here */

/* Hero Section Starts Here */

/* =========================================================
   EDUCATION PLANNING HERO
   PREMIUM • CLEAN • RESPONSIVE
========================================================= */

.educationHero {

    position: relative;

    padding: 55px 0 110px;

    overflow: hidden;

    background: var(--section);

}

.educationHero .container {

    position: relative;

    z-index: 5;

    width: min(1200px, 92%);

    margin: auto;

}


/* =========================================================
   BACKGROUND GLOWS
========================================================= */

.educationHeroGlow {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(100px);

}

.educationHeroGlowOne {

    width: 420px;

    height: 420px;

    right: -100px;

    top: 80px;

    background: rgba(212, 175, 55, .035);

}

.educationHeroGlowTwo {

    width: 300px;

    height: 300px;

    left: -150px;

    bottom: -120px;

    background: rgba(212, 175, 55, .018);

}


/* =========================================================
   BREADCRUMB
========================================================= */

.educationHeroBreadcrumb {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 70px;

    font-size: 13px;

    line-height: 1.5;

}

.educationHeroBreadcrumb a {

    color: var(--text);

    opacity: .60;

    text-decoration: none;

    transition: .3s ease;

}

.educationHeroBreadcrumb a:hover {

    color: #D4AF37;

    opacity: 1;

}

.educationHeroBreadcrumb i {

    color: #D4AF37;

    opacity: .55;

    font-size: 10px;

}

.educationHeroBreadcrumb span {

    color: #D4AF37;

}


/* =========================================================
   MAIN WRAPPER
========================================================= */

.educationHeroWrapper {

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 80px;

}


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

.educationHeroContent {

    max-width: 650px;

}

.educationHeroPrefix {

    display: inline-flex;

    align-items: center;

    padding: 9px 17px;

    margin-bottom: 24px;

    border-radius: 50px;

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

    background: rgba(212, 175, 55, .025);

    color: #D4AF37;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.educationHeroContent h1 {

    margin: 0 0 25px;

    color: var(--primary);

    font-size: clamp(44px, 5vw, 68px);

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -1.8px;

}

.educationHeroContent h1 span {

    color: #D4AF37;

}

.educationHeroContent p {

    max-width: 620px;

    margin: 0;

    color: var(--text);

    opacity: .70;

    font-size: 16px;

    line-height: 1.85;

}


/* =========================================================
   BUTTONS
========================================================= */

.educationHeroButtons {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: 35px;

    flex-wrap: wrap;

}

.educationHeroPrimary,
.educationHeroSecondary {

    min-height: 54px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 0 24px;

    border-radius: 9px;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    transition:

        transform .3s ease,

        box-shadow .3s ease,

        border-color .3s ease,

        background .3s ease;

}


/* Primary Button */

.educationHeroPrimary {

    color: #111;

    background: #D4AF37;

    border: 1px solid #D4AF37;

    box-shadow:

        0 8px 25px rgba(212, 175, 55, .10);

}

.educationHeroPrimary i {

    font-size: 12px;

    transition: transform .3s ease;

}

.educationHeroPrimary:hover {

    color: #111;

    transform: translateY(-3px);

    box-shadow:

        0 12px 30px rgba(212, 175, 55, .18);

}

.educationHeroPrimary:hover i {

    transform: translateX(4px);

}


/* Secondary Button */

.educationHeroSecondary {

    color: var(--primary);

    background: transparent;

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

}

.educationHeroSecondary i {

    color: #D4AF37;

    font-size: 13px;

}

.educationHeroSecondary:hover {

    color: var(--primary);

    transform: translateY(-3px);

    border-color: rgba(212, 175, 55, .40);

    background: rgba(212, 175, 55, .035);

}


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

.educationHeroTrust {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 22px;

    margin-top: 30px;

}

.educationHeroTrust div {

    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--text);

    opacity: .65;

    font-size: 13px;

    line-height: 1.5;

}

.educationHeroTrust i {

    color: #D4AF37;

    font-size: 12px;

}


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

.educationHeroVisual {

    position: relative;

    min-height: 530px;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* Main circular visual */

.educationHeroVisual::before {

    content: "";

    position: absolute;

    width: 470px;

    height: 470px;

    border-radius: 50%;

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

    background:

        radial-gradient(
            circle,
            rgba(212, 175, 55, .045),
            transparent 68%
        );

}

.educationHeroVisual::after {

    content: "";

    position: absolute;

    width: 380px;

    height: 380px;

    border-radius: 50%;

    border: 1px dashed rgba(212, 175, 55, .08);

    animation: educationHeroRotate 28s linear infinite;

}


/* =========================================================
   BACKGROUND FINANCIAL GRAPH
========================================================= */

.educationHeroGraph {

    position: absolute;

    width: 570px;

    height: 280px;

    bottom: 50px;

    left: 50%;

    transform: translateX(-50%);

    color: rgba(212, 175, 55, .16);

    z-index: 1;

}

.educationHeroGraph svg {

    width: 100%;

    height: 100%;

}


/* =========================================================
   EDUCATION PATH
========================================================= */

.educationPath {

    position: absolute;

    width: 390px;

    height: 220px;

    z-index: 3;

    transform: rotate(-17deg);

}

.educationPathLine {

    position: absolute;

    left: 20px;

    right: 20px;

    top: 50%;

    height: 1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(212, 175, 55, .45),
            transparent
        );

}

.educationPathPoint {

    position: absolute;

    top: calc(50% - 4px);

    display: flex;

    flex-direction: column;

    align-items: center;

}

.educationPathPoint span {

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: #D4AF37;

    box-shadow:

        0 0 0 6px rgba(212, 175, 55, .05);

}

.educationPathPoint small {

    position: absolute;

    top: 22px;

    color: var(--text);

    opacity: .55;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;

    white-space: nowrap;

}

.educationPathOne {

    left: 15px;

}

.educationPathTwo {

    left: 32%;

}

.educationPathThree {

    left: 62%;

}

.educationPathFour {

    right: 10px;

}


/* =========================================================
   MAIN EDUCATION CORE
========================================================= */

.educationHeroCore {

    position: relative;

    z-index: 6;

    width: 220px;

    height: 220px;

    display: flex;

    align-items: center;

    justify-content: center;

}

.educationHeroCoreRing {

    position: relative;

    width: 165px;

    height: 165px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(212, 175, 55, .09),
            rgba(212, 175, 55, .025) 60%,
            transparent 70%
        );

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

    box-shadow:

        0 0 50px rgba(212, 175, 55, .07);

}

.educationHeroCoreRing::before {

    content: "";

    position: absolute;

    inset: 14px;

    border-radius: 50%;

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

}

.educationHeroCap {

    width: 80px;

    height: 80px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 22px;

    color: #D4AF37;

    background: rgba(212, 175, 55, .055);

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

}

.educationHeroCap i {

    font-size: 34px;

}


/* =========================================================
   FAMILY / FUTURE PANEL
========================================================= */

.educationHeroFamily {

    position: absolute;

    right: 0;

    bottom: 75px;

    z-index: 8;

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 14px 18px;

    border-radius: 14px;

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

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

    backdrop-filter: blur(6px);

    -webkit-backdrop-filter: blur(6px);

    box-shadow:

        0 10px 30px rgba(0, 0, 0, .08);

}

.educationHeroFamily i {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    color: #D4AF37;

    background: rgba(212, 175, 55, .10);

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

    font-size: 17px;

}

.educationHeroFamily span {

    display: block;

    margin-bottom: 4px;

    color: var(--text);

    opacity: .70;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;

}

.educationHeroFamily strong {

    display: block;

    color: var(--primary);

    font-size: 14px;

    font-weight: 600;

    letter-spacing: .3px;

}


/* =========================================================
   INVESTMENT / FINANCIAL GROWTH PANEL
========================================================= */

.educationHeroInvestment {

    position: absolute;

    top: 65px;

    left: 15px;

    z-index: 8;

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 13px 16px;

    border-radius: 13px;

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

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

    backdrop-filter: blur(6px);

    -webkit-backdrop-filter: blur(6px);

    box-shadow:

        0 10px 30px rgba(0, 0, 0, .07);

}

.educationHeroInvestment i {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    color: #D4AF37;

    background: rgba(212, 175, 55, .10);

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

    font-size: 15px;

}

.educationHeroInvestment span {

    color: var(--text);

    opacity: .68;

    font-size: 10px;

    line-height: 1.5;

    letter-spacing: .8px;

}

.educationHeroInvestment strong {

    display: block;

    margin-top: 2px;

    color: #D4AF37;

    opacity: 1;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .6px;

}


/* =========================================================
   FLOATING BOOK
========================================================= */

.educationHeroBook {

    position: absolute;

    right: 70px;

    top: 80px;

    z-index: 9;

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    color: #D4AF37;

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

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

    box-shadow:

        0 10px 30px rgba(0, 0, 0, .07);

    backdrop-filter: blur(6px);

    -webkit-backdrop-filter: blur(6px);

}

.educationHeroBook i {

    font-size: 15px;

}


/* =========================================================
   FLOATING COINS
========================================================= */

.educationHeroCoins {

    position: absolute;

    left: 55px;

    bottom: 100px;

    z-index: 9;

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    color: #D4AF37;

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

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

    box-shadow:

        0 10px 30px rgba(0, 0, 0, .07);

    backdrop-filter: blur(6px);

    -webkit-backdrop-filter: blur(6px);

}

.educationHeroCoins i {

    font-size: 15px;

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes educationHeroFloat {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-9px);

    }

}

@keyframes educationHeroRotate {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}


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

@media (max-width: 991px) {

    .educationHero {

        padding: 45px 0 90px;

    }

    .educationHeroBreadcrumb {

        margin-bottom: 55px;

    }

    .educationHeroWrapper {

        grid-template-columns: 1fr;

        gap: 50px;

    }

    .educationHeroContent {

        max-width: 760px;

        margin: auto;

        text-align: center;

    }

    .educationHeroContent p {

        margin: auto;

    }

    .educationHeroButtons {

        justify-content: center;

    }

    .educationHeroTrust {

        justify-content: center;

    }

    .educationHeroVisual {

        min-height: 480px;

    }

}


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

@media (max-width: 767px) {

    .educationHero {

        padding: 30px 0 70px;

    }

    .educationHero .container {

        width: calc(100% - 30px);

    }

    .educationHeroBreadcrumb {

        gap: 7px;

        margin-bottom: 45px;

        font-size: 11px;

        flex-wrap: wrap;

    }

    .educationHeroPrefix {

        font-size: 10px;

        padding: 8px 13px;

        margin-bottom: 18px;

    }

    .educationHeroContent h1 {

        font-size: 38px;

        letter-spacing: -1.2px;

        line-height: 1.08;

    }

    .educationHeroContent p {

        font-size: 14px;

        line-height: 1.8;

    }


    /* Buttons */

    .educationHeroButtons {

        flex-direction: column;

        align-items: stretch;

        margin-top: 28px;

    }

    .educationHeroPrimary,
    .educationHeroSecondary {

        width: 100%;

        min-height: 52px;

        font-size: 12px;

    }


    /* Trust */

    .educationHeroTrust {

        flex-direction: column;

        gap: 11px;

        margin-top: 24px;

    }

    .educationHeroTrust div {

        font-size: 12px;

    }


    /* Visual */

    .educationHeroVisual {

        min-height: 390px;

        margin-top: 5px;

    }

    .educationHeroVisual::before {

        width: 330px;

        height: 330px;

    }

    .educationHeroVisual::after {

        width: 270px;

        height: 270px;

    }

    .educationHeroCore {

        width: 180px;

        height: 180px;

    }

    .educationHeroCoreRing {

        width: 135px;

        height: 135px;

    }

    .educationHeroCap {

        width: 65px;

        height: 65px;

        border-radius: 17px;

    }

    .educationHeroCap i {

        font-size: 27px;

    }

    .educationPath {

        width: 285px;

        height: 170px;

    }

    .educationPathPoint small {

        font-size: 9px;

    }

    .educationHeroGraph {

        width: 350px;

        height: 210px;

    }


    /* Family */

    .educationHeroFamily {

        right: 0;

        bottom: 45px;

        padding: 11px 13px;

    }

    .educationHeroFamily i {

        width: 37px;

        height: 37px;

        font-size: 15px;

    }

    .educationHeroFamily span {

        font-size: 9px;

    }

    .educationHeroFamily strong {

        font-size: 12px;

    }


    /* Investment */

    .educationHeroInvestment {

        top: 35px;

        left: 0;

        padding: 10px 12px;

    }

    .educationHeroInvestment i {

        width: 34px;

        height: 34px;

        font-size: 13px;

    }

    .educationHeroInvestment span {

        font-size: 9px;

    }

    .educationHeroInvestment strong {

        font-size: 10px;

    }


    /* Book */

    .educationHeroBook {

        right: 15px;

        top: 25px;

        width: 42px;

        height: 42px;

    }

    .educationHeroBook i {

        font-size: 13px;

    }


    /* Coins */

    .educationHeroCoins {

        left: 10px;

        bottom: 75px;

        width: 42px;

        height: 42px;

    }

    .educationHeroCoins i {

        font-size: 13px;

    }

}


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

@media (max-width: 480px) {

    .educationHeroContent h1 {

        font-size: 33px;

    }

    .educationHeroContent p {

        font-size: 13px;

    }

    .educationHeroVisual {

        min-height: 350px;

    }

    .educationHeroVisual::before {

        width: 280px;

        height: 280px;

    }

    .educationHeroVisual::after {

        width: 225px;

        height: 225px;

    }

    .educationHeroCoreRing {

        width: 115px;

        height: 115px;

    }

    .educationHeroCap {

        width: 55px;

        height: 55px;

    }

    .educationHeroCap i {

        font-size: 23px;

    }

    .educationPath {

        width: 235px;

        height: 140px;

    }

    .educationPathPoint small {

        font-size: 8px;

    }

    .educationHeroFamily {

        transform: scale(.85);

        transform-origin: right bottom;

    }

    .educationHeroInvestment {

        transform: scale(.85);

        transform-origin: left top;

    }

    .educationHeroBook,
    .educationHeroCoins {

        width: 38px;

        height: 38px;

    }

    .educationHeroBook i,
    .educationHeroCoins i {

        font-size: 11px;

    }

}

/* Hero Section Ends Here */

/* Intro Section Starts Here */

/* =========================================================
   EDUCATION PLANNING
   SECTION 02 — INTRODUCTION
========================================================= */

.educationIntro {

    position: relative;

    padding: 110px 0;

    overflow: hidden;

    background: var(--section);

}

.educationIntro .container {

    width: min(1180px, 92%);

    margin: auto;

}


/* =========================================================
   MAIN WRAPPER
========================================================= */

.educationIntroWrapper {

    display: grid;

    grid-template-columns: 42% 58%;

    gap: 75px;

    align-items: start;

}


/* =========================================================
   LEFT LEAD
========================================================= */

.educationIntroLead {

    position: sticky;

    top: 100px;

    padding-right: 30px;

}

.educationIntroNumber {

    display: block;

    margin-bottom: 15px;

    color: #D4AF37;

    font-size: 16px;

    font-weight: 700;

    letter-spacing: 2px;

    opacity: .7;

}

.educationIntroPrefix {

    display: inline-block;

    margin-bottom: 20px;

    color: #D4AF37;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.educationIntroLead h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(38px, 4vw, 55px);

    font-weight: 600;

    line-height: 1.1;

    letter-spacing: -1.4px;

}

.educationIntroLead h2 span {

    display: block;

    color: #D4AF37;

}

.educationIntroLine {

    width: 70px;

    height: 2px;

    margin-top: 30px;

    background: #D4AF37;

    opacity: .65;

}


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

.educationIntroContent {

    padding-top: 8px;

}

.educationIntroContent > p {

    margin: 0 0 22px;

    color: var(--text);

    opacity: .70;

    font-size: 16px;

    line-height: 1.85;

}

.educationIntroContent > p strong {

    color: var(--primary);

    font-weight: 700;

}


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

.educationIntroHighlights {

    margin-top: 40px;

    border-top: 1px solid rgba(212, 175, 55, .14);

}

.educationIntroHighlight {

    display: grid;

    grid-template-columns: 55px 1fr;

    gap: 18px;

    padding: 24px 0;

    border-bottom: 1px solid rgba(212, 175, 55, .12);

    transition:

        padding-left .3s ease,

        background .3s ease;

}

.educationIntroHighlight:hover {

    padding-left: 8px;

}


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

.educationIntroHighlightIcon {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    color: #D4AF37;

    background: rgba(212, 175, 55, .06);

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

}

.educationIntroHighlightIcon i {

    font-size: 18px;

}


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

.educationIntroHighlight span {

    display: block;

    margin-bottom: 4px;

    color: #D4AF37;

    opacity: .65;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;

}

.educationIntroHighlight h3 {

    margin: 0 0 7px;

    color: var(--primary);

    font-size: 19px;

    font-weight: 600;

    line-height: 1.35;

}

.educationIntroHighlight p {

    max-width: 520px;

    margin: 0;

    color: var(--text);

    opacity: .60;

    font-size: 13px;

    line-height: 1.7;

}


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

@media (max-width: 991px) {

    .educationIntro {

        padding: 90px 0;

    }

    .educationIntroWrapper {

        grid-template-columns: 1fr;

        gap: 45px;

    }

    .educationIntroLead {

        position: static;

        padding-right: 0;

        max-width: 750px;

    }

    .educationIntroLead h2 {

        font-size: 46px;

    }

}


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

@media (max-width: 767px) {

    .educationIntro {

        padding: 75px 0;

    }

    .educationIntro .container {

        width: calc(100% - 30px);

    }

    .educationIntroWrapper {

        gap: 35px;

    }

    .educationIntroNumber {

        font-size: 14px;

    }

    .educationIntroPrefix {

        font-size: 11px;

        margin-bottom: 15px;

    }

    .educationIntroLead h2 {

        font-size: 36px;

        letter-spacing: -1px;

    }

    .educationIntroLine {

        margin-top: 22px;

    }

    .educationIntroContent > p {

        font-size: 14px;

        line-height: 1.8;

        margin-bottom: 19px;

    }

    .educationIntroHighlights {

        margin-top: 30px;

    }

    .educationIntroHighlight {

        grid-template-columns: 48px 1fr;

        gap: 14px;

        padding: 20px 0;

    }

    .educationIntroHighlightIcon {

        width: 44px;

        height: 44px;

    }

    .educationIntroHighlightIcon i {

        font-size: 16px;

    }

    .educationIntroHighlight h3 {

        font-size: 17px;

    }

    .educationIntroHighlight p {

        font-size: 12px;

        line-height: 1.7;

    }

}


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

@media (max-width: 480px) {

    .educationIntroLead h2 {

        font-size: 31px;

    }

    .educationIntroContent > p {

        font-size: 13px;

    }

    .educationIntroHighlight {

        grid-template-columns: 44px 1fr;

        gap: 12px;

    }

    .educationIntroHighlight h3 {

        font-size: 16px;

    }

    .educationIntroHighlight p {

        font-size: 12px;

    }

}

/* Intro Section Ends Here */


/* Why Section Starts Here */

/* =========================================================
   EDUCATION PLANNING
   SECTION 03 — WHY EDUCATION PLANNING MATTERS
========================================================= */

.educationWhy {

    position: relative;

    padding: 115px 0;

    overflow: hidden;

    background: var(--section);

}

.educationWhy .container {

    width: min(1180px, 92%);

    margin: auto;

}


/* =========================================================
   MAIN WRAPPER
========================================================= */

.educationWhyWrapper {

    display: grid;

    grid-template-columns: 40% 60%;

    gap: 80px;

    align-items: start;

}


/* =========================================================
   LEFT INTRO
========================================================= */

.educationWhyIntro {

    position: sticky;

    top: 100px;

    padding-right: 25px;

}

.educationWhyPrefix {

    display: block;

    margin-bottom: 16px;

    color: #D4AF37;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.educationWhyNumber {

    display: block;

    margin-bottom: 18px;

    color: var(--text);

    opacity: .35;

    font-size: 15px;

    font-weight: 600;

    letter-spacing: 2px;

}

.educationWhyIntro h2 {

    margin: 0 0 22px;

    color: var(--primary);

    font-size: clamp(40px, 4.2vw, 58px);

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -1.5px;

}

.educationWhyIntro h2 span {

    display: block;

    color: #D4AF37;

}

.educationWhyIntro > p {

    max-width: 470px;

    margin: 0;

    color: var(--text);

    opacity: .68;

    font-size: 16px;

    line-height: 1.85;

}


/* =========================================================
   STATEMENT
========================================================= */

.educationWhyStatement {

    display: flex;

    align-items: center;

    gap: 15px;

    max-width: 430px;

    margin-top: 35px;

    padding: 18px 20px;

    border-left: 2px solid #D4AF37;

    background: rgba(212, 175, 55, .025);

}

.educationWhyStatement > i {

    flex: 0 0 42px;

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    color: #D4AF37;

    background: rgba(212, 175, 55, .07);

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

    font-size: 17px;

}

.educationWhyStatement strong {

    display: block;

    margin-bottom: 5px;

    color: var(--primary);

    font-size: 14px;

    font-weight: 600;

}

.educationWhyStatement span {

    display: block;

    color: var(--text);

    opacity: .58;

    font-size: 12px;

    line-height: 1.5;

}


/* =========================================================
   BENEFITS
========================================================= */

.educationWhyBenefits {

    border-top: 1px solid rgba(212, 175, 55, .15);

}


/* =========================================================
   BENEFIT ITEM
========================================================= */

.educationWhyItem {

    display: grid;

    grid-template-columns: 42px 54px 1fr;

    gap: 18px;

    align-items: center;

    padding: 27px 10px;

    border-bottom: 1px solid rgba(212, 175, 55, .12);

    transition:

        background .3s ease,

        padding-left .3s ease;

}

.educationWhyItem:hover {

    padding-left: 18px;

    background: rgba(212, 175, 55, .018);

}


/* =========================================================
   NUMBER
========================================================= */

.educationWhyItemNumber {

    color: #D4AF37;

    opacity: .55;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1px;

}


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

.educationWhyItemIcon {

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    color: #D4AF37;

    background: rgba(212, 175, 55, .055);

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

    transition:

        transform .3s ease,

        background .3s ease;

}

.educationWhyItem:hover .educationWhyItemIcon {

    transform: translateY(-3px);

    background: rgba(212, 175, 55, .09);

}

.educationWhyItemIcon i {

    font-size: 18px;

}


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

.educationWhyItemContent h3 {

    margin: 0 0 7px;

    color: var(--primary);

    font-size: 20px;

    font-weight: 600;

    line-height: 1.35;

}

.educationWhyItemContent p {

    max-width: 560px;

    margin: 0;

    color: var(--text);

    opacity: .62;

    font-size: 14px;

    line-height: 1.7;

}


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

@media (max-width: 991px) {

    .educationWhy {

        padding: 90px 0;

    }

    .educationWhyWrapper {

        grid-template-columns: 1fr;

        gap: 55px;

    }

    .educationWhyIntro {

        position: static;

        padding-right: 0;

        max-width: 760px;

    }

    .educationWhyIntro h2 {

        font-size: 48px;

    }

    .educationWhyIntro > p {

        max-width: 650px;

    }

}


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

@media (max-width: 767px) {

    .educationWhy {

        padding: 75px 0;

    }

    .educationWhy .container {

        width: calc(100% - 30px);

    }

    .educationWhyWrapper {

        gap: 40px;

    }

    .educationWhyPrefix {

        font-size: 11px;

    }

    .educationWhyNumber {

        font-size: 13px;

    }

    .educationWhyIntro h2 {

        font-size: 36px;

        letter-spacing: -1px;

    }

    .educationWhyIntro > p {

        font-size: 14px;

        line-height: 1.8;

    }

    .educationWhyStatement {

        margin-top: 28px;

        padding: 15px;

    }

    .educationWhyStatement strong {

        font-size: 13px;

    }

    .educationWhyStatement span {

        font-size: 11px;

    }


    /* Benefits */

    .educationWhyItem {

        grid-template-columns: 32px 48px 1fr;

        gap: 13px;

        padding: 21px 5px;

    }

    .educationWhyItem:hover {

        padding-left: 10px;

    }

    .educationWhyItemNumber {

        font-size: 11px;

    }

    .educationWhyItemIcon {

        width: 44px;

        height: 44px;

    }

    .educationWhyItemIcon i {

        font-size: 15px;

    }

    .educationWhyItemContent h3 {

        font-size: 16px;

    }

    .educationWhyItemContent p {

        font-size: 12px;

        line-height: 1.7;

    }

}


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

@media (max-width: 480px) {

    .educationWhyIntro h2 {

        font-size: 31px;

    }

    .educationWhyIntro > p {

        font-size: 13px;

    }

    .educationWhyItem {

        grid-template-columns: 28px 42px 1fr;

        gap: 10px;

    }

    .educationWhyItemIcon {

        width: 40px;

        height: 40px;

    }

    .educationWhyItemContent h3 {

        font-size: 15px;

    }

    .educationWhyItemContent p {

        font-size: 11.5px;

    }

}

/* Why Section Ends Here */

/* Approach Section Starts Here */

/* =========================================================
   EDUCATION APPROACH
   SIMPLE PREMIUM DESIGN
========================================================= */

.educationApproach {

    padding: 110px 0;

    background: var(--section);

}

.educationApproach .container {

    width: min(1100px, 92%);

    margin: auto;

}


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

.educationApproachHeading {

    max-width: 750px;

    margin: 0 auto 65px;

    text-align: center;

}

.educationApproachPrefix {

    display: block;

    margin-bottom: 16px;

    color: #D4AF37;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.educationApproachHeading h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(38px, 4.5vw, 56px);

    font-weight: 600;

    line-height: 1.1;

    letter-spacing: -1.2px;

}

.educationApproachHeading h2 span {

    color: #D4AF37;

}

.educationApproachHeading p {

    max-width: 620px;

    margin: 20px auto 0;

    color: var(--text);

    opacity: .65;

    font-size: 16px;

    line-height: 1.8;

}


/* =========================================================
   STEP LIST
========================================================= */

.educationApproachList {

    position: relative;

    max-width: 900px;

    margin: auto;

}


/* Vertical connecting line */

.educationApproachList::before {

    content: "";

    position: absolute;

    left: 39px;

    top: 30px;

    bottom: 30px;

    width: 1px;

    background: rgba(212, 175, 55, .16);

}


/* =========================================================
   STEP ITEM
========================================================= */

.educationApproachItem {

    position: relative;

    display: grid;

    grid-template-columns: 80px 60px 1fr;

    align-items: center;

    gap: 20px;

    min-height: 125px;

    padding: 22px 25px;

    margin-bottom: 12px;

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

    border-radius: 14px;

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

    transition:

        transform .3s ease,

        border-color .3s ease,

        background .3s ease;

}

.educationApproachItem:hover {

    transform: translateX(6px);

    border-color: rgba(212, 175, 55, .25);

    background: rgba(212, 175, 55, .018);

}


/* =========================================================
   NUMBER
========================================================= */

.educationApproachNumber {

    color: #D4AF37;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 1.5px;

}


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

.educationApproachIcon {

    position: relative;

    z-index: 2;

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    color: #D4AF37;

    background: var(--section);

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

}

.educationApproachIcon i {

    font-size: 18px;

}


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

.educationApproachContent h3 {

    margin: 0 0 7px;

    color: var(--primary);

    font-size: 21px;

    font-weight: 600;

}

.educationApproachContent p {

    max-width: 680px;

    margin: 0;

    color: var(--text);

    opacity: .62;

    font-size: 14px;

    line-height: 1.7;

}


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

@media (max-width: 767px) {

    .educationApproach {

        padding: 80px 0;

    }

    .educationApproach .container {

        width: calc(100% - 30px);

    }

    .educationApproachHeading {

        margin-bottom: 45px;

    }

    .educationApproachPrefix {

        font-size: 11px;

    }

    .educationApproachHeading h2 {

        font-size: 36px;

    }

    .educationApproachHeading p {

        font-size: 14px;

    }


    .educationApproachList::before {

        left: 28px;

        top: 25px;

        bottom: 25px;

    }


    .educationApproachItem {

        grid-template-columns: 42px 48px 1fr;

        gap: 12px;

        min-height: 110px;

        padding: 18px 15px;

    }


    .educationApproachNumber {

        font-size: 11px;

    }


    .educationApproachIcon {

        width: 42px;

        height: 42px;

    }

    .educationApproachIcon i {

        font-size: 15px;

    }


    .educationApproachContent h3 {

        font-size: 18px;

    }

    .educationApproachContent p {

        font-size: 13px;

        line-height: 1.65;

    }

}


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

@media (max-width: 480px) {

    .educationApproachHeading h2 {

        font-size: 31px;

    }

    .educationApproachHeading p {

        font-size: 13px;

    }

    .educationApproachList::before {

        left: 23px;

    }

    .educationApproachItem {

        grid-template-columns: 34px 42px 1fr;

        gap: 10px;

        padding: 16px 12px;

    }

    .educationApproachIcon {

        width: 38px;

        height: 38px;

    }

    .educationApproachIcon i {

        font-size: 13px;

    }

    .educationApproachContent h3 {

        font-size: 17px;

    }

    .educationApproachContent p {

        font-size: 12px;

    }

}

/* Approach Section Ends Here */

/* Strategy Section Starts Here */

/* =========================================================
   EDUCATION FUNDING STRATEGIES
   SECTION 05
========================================================= */

.educationStrategies {

    position: relative;

    padding: 110px 0;

    overflow: hidden;

    background: var(--section);

}

.educationStrategies .container {

    width: min(1120px, 92%);

    margin: auto;

}


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

.educationStrategiesHeading {

    max-width: 760px;

    margin: 0 auto 65px;

    text-align: center;

}

.educationStrategiesPrefix {

    display: block;

    margin-bottom: 16px;

    color: #D4AF37;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.educationStrategiesHeading h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(38px, 4.4vw, 56px);

    font-weight: 600;

    line-height: 1.1;

    letter-spacing: -1.2px;

}

.educationStrategiesHeading h2 span {

    color: #D4AF37;

}

.educationStrategiesHeading p {

    max-width: 650px;

    margin: 20px auto 0;

    color: var(--text);

    opacity: .65;

    font-size: 16px;

    line-height: 1.8;

}


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

.educationStrategiesGrid {

    display: grid;

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

    gap: 18px;

}


/* =========================================================
   STRATEGY
========================================================= */

.educationStrategy {

    position: relative;

    min-height: 275px;

    padding: 30px;

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

    border-radius: 16px;

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

    overflow: hidden;

    transition:

        transform .35s ease,

        border-color .35s ease,

        background .35s ease,

        box-shadow .35s ease;

}

.educationStrategy:hover {

    transform: translateY(-5px);

    border-color: rgba(212, 175, 55, .28);

    background: rgba(212, 175, 55, .018);

    box-shadow:

        0 18px 40px rgba(0, 0, 0, .07);

}


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

.educationStrategyTop {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 28px;

}

.educationStrategyNumber {

    color: #D4AF37;

    opacity: .65;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;

}

.educationStrategyIcon {

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    color: #D4AF37;

    background: rgba(212, 175, 55, .06);

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

    transition:

        transform .3s ease,

        background .3s ease;

}

.educationStrategy:hover .educationStrategyIcon {

    transform: scale(1.05);

    background: rgba(212, 175, 55, .10);

}

.educationStrategyIcon i {

    font-size: 18px;

}


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

.educationStrategy h3 {

    max-width: 450px;

    margin: 0 0 12px;

    color: var(--primary);

    font-size: 22px;

    font-weight: 600;

    line-height: 1.3;

}

.educationStrategy p {

    max-width: 480px;

    margin: 0;

    color: var(--text);

    opacity: .63;

    font-size: 14px;

    line-height: 1.75;

}


/* =========================================================
   BOTTOM ACCENT
========================================================= */

.educationStrategyLine {

    position: absolute;

    left: 30px;

    bottom: 0;

    width: 55px;

    height: 2px;

    background: #D4AF37;

    opacity: .55;

    transition: width .35s ease;

}

.educationStrategy:hover .educationStrategyLine {

    width: 110px;

}


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

@media (max-width: 767px) {

    .educationStrategies {

        padding: 80px 0;

    }

    .educationStrategies .container {

        width: calc(100% - 30px);

    }

    .educationStrategiesHeading {

        margin-bottom: 45px;

    }

    .educationStrategiesPrefix {

        font-size: 11px;

    }

    .educationStrategiesHeading h2 {

        font-size: 36px;

    }

    .educationStrategiesHeading p {

        font-size: 14px;

    }

    .educationStrategiesGrid {

        grid-template-columns: 1fr;

        gap: 15px;

    }

    .educationStrategy {

        min-height: auto;

        padding: 25px;

    }

    .educationStrategyTop {

        margin-bottom: 23px;

    }

    .educationStrategyIcon {

        width: 46px;

        height: 46px;

    }

    .educationStrategy h3 {

        font-size: 20px;

    }

    .educationStrategy p {

        font-size: 13px;

    }

}


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

@media (max-width: 480px) {

    .educationStrategiesHeading h2 {

        font-size: 31px;

    }

    .educationStrategiesHeading p {

        font-size: 13px;

    }

    .educationStrategy {

        padding: 22px;

    }

    .educationStrategy h3 {

        font-size: 18px;

    }

    .educationStrategy p {

        font-size: 13px;

        line-height: 1.7;

    }

}

/* Strategy Section Ends Here */

/* Journey Section Starts Here */

/* =========================================================
   EDUCATION JOURNEY PLANNING
   SECTION 06
========================================================= */

.educationJourneyPlan {

    position: relative;

    padding: 110px 0;

    overflow: hidden;

    background: var(--section);

}

.educationJourneyPlan .container {

    width: min(1150px, 92%);

    margin: auto;

}


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

.educationJourneyPlanHeading {

    max-width: 780px;

    margin: 0 auto 75px;

    text-align: center;

}

.educationJourneyPlanPrefix {

    display: block;

    margin-bottom: 16px;

    color: #D4AF37;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.educationJourneyPlanHeading h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(38px, 4.4vw, 56px);

    font-weight: 600;

    line-height: 1.1;

    letter-spacing: -1.2px;

}

.educationJourneyPlanHeading h2 span {

    color: #D4AF37;

}

.educationJourneyPlanHeading p {

    max-width: 650px;

    margin: 20px auto 0;

    color: var(--text);

    opacity: .64;

    font-size: 16px;

    line-height: 1.8;

}


/* =========================================================
   JOURNEY TRACK
========================================================= */

.educationJourneyPlanTrack {

    position: relative;

    display: grid;

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

    gap: 25px;

}


/* =========================================================
   CONNECTING LINE
========================================================= */

.educationJourneyPlanLine {

    position: absolute;

    top: 27px;

    left: 9%;

    right: 9%;

    height: 1px;

    background: rgba(212, 175, 55, .20);

    z-index: 1;

}


/* =========================================================
   STEP
========================================================= */

.educationJourneyPlanStep {

    position: relative;

    z-index: 2;

}


/* =========================================================
   MARKER
========================================================= */

.educationJourneyPlanMarker {

    position: relative;

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 30px;

    border-radius: 50%;

    color: #D4AF37;

    background: var(--section);

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

    font-size: 13px;

    font-weight: 700;

    box-shadow:
        0 0 0 7px var(--section),
        0 0 0 8px rgba(212, 175, 55, .06);

}

.educationJourneyPlanMarker::after {

    content: "";

    position: absolute;

    width: 7px;

    height: 7px;

    bottom: -4px;

    left: 50%;

    transform: translateX(-50%);

    border-radius: 50%;

    background: #D4AF37;

}


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

.educationJourneyPlanContent {

    padding: 0 8px;

    text-align: center;

}

.educationJourneyPlanContent > span {

    display: block;

    margin-bottom: 12px;

    color: #D4AF37;

    opacity: .60;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.2px;

}

.educationJourneyPlanContent h3 {

    margin: 0 0 11px;

    color: var(--primary);

    font-size: 20px;

    font-weight: 600;

    line-height: 1.3;

}

.educationJourneyPlanContent p {

    margin: 0;

    color: var(--text);

    opacity: .60;

    font-size: 13px;

    line-height: 1.7;

}


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

.educationJourneyPlanBottom {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 22px;

    margin: 70px auto 0;

    padding: 20px 25px;

    border-top: 1px solid rgba(212, 175, 55, .12);

    border-bottom: 1px solid rgba(212, 175, 55, .12);

}

.educationJourneyPlanBottomItem {

    display: flex;

    align-items: center;

    gap: 9px;

    white-space: nowrap;

}

.educationJourneyPlanBottomItem i {

    color: #D4AF37;

    font-size: 15px;

}

.educationJourneyPlanBottomItem span {

    color: var(--primary);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;

}

.educationJourneyPlanArrow {

    color: #D4AF37;

    opacity: .45;

    font-size: 12px;

}


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

@media (max-width: 991px) {

    .educationJourneyPlan {

        padding: 90px 0;

    }

    .educationJourneyPlanTrack {

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

        gap: 55px 25px;

    }

    .educationJourneyPlanLine {

        display: none;

    }

    .educationJourneyPlanStep {

        padding-top: 0;

    }

    .educationJourneyPlanMarker {

        margin-bottom: 22px;

    }

    .educationJourneyPlanBottom {

        flex-wrap: wrap;

        gap: 18px;

    }

}


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

@media (max-width: 767px) {

    .educationJourneyPlan {

        padding: 75px 0;

    }

    .educationJourneyPlan .container {

        width: calc(100% - 30px);

    }

    .educationJourneyPlanHeading {

        margin-bottom: 50px;

        text-align: left;

    }

    .educationJourneyPlanPrefix {

        font-size: 11px;

    }

    .educationJourneyPlanHeading h2 {

        font-size: 36px;

        letter-spacing: -1px;

    }

    .educationJourneyPlanHeading p {

        margin-left: 0;

        font-size: 14px;

        line-height: 1.8;

    }


    /* Vertical Journey */

    .educationJourneyPlanTrack {

        display: block;

        padding-left: 45px;

    }

    .educationJourneyPlanTrack::before {

        content: "";

        position: absolute;

        left: 12px;

        top: 20px;

        bottom: 20px;

        width: 1px;

        background: rgba(212, 175, 55, .20);

    }

    .educationJourneyPlanStep {

        display: grid;

        grid-template-columns: 45px 1fr;

        gap: 15px;

        margin-bottom: 35px;

        min-height: 100px;

    }

    .educationJourneyPlanStep:last-child {

        margin-bottom: 0;

    }

    .educationJourneyPlanMarker {

        width: 45px;

        height: 45px;

        margin: 0;

        box-shadow:
            0 0 0 6px var(--section);

    }

    .educationJourneyPlanMarker::after {

        display: none;

    }

    .educationJourneyPlanContent {

        padding: 2px 0 0;

        text-align: left;

    }

    .educationJourneyPlanContent > span {

        font-size: 10px;

        margin-bottom: 7px;

    }

    .educationJourneyPlanContent h3 {

        font-size: 19px;

        margin-bottom: 7px;

    }

    .educationJourneyPlanContent p {

        font-size: 13px;

        line-height: 1.7;

    }


    /* Bottom */

    .educationJourneyPlanBottom {

        justify-content: flex-start;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        margin-top: 50px;

        padding: 0;

        border: 0;

    }

    .educationJourneyPlanBottomItem {

        padding: 14px 0;

        border-bottom: 1px solid rgba(212, 175, 55, .10);

    }

    .educationJourneyPlanBottomItem span {

        font-size: 12px;

    }

    .educationJourneyPlanArrow {

        display: none;

    }

}


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

@media (max-width: 480px) {

    .educationJourneyPlanHeading h2 {

        font-size: 31px;

    }

    .educationJourneyPlanHeading p {

        font-size: 13px;

    }

    .educationJourneyPlanTrack {

        padding-left: 38px;

    }

    .educationJourneyPlanTrack::before {

        left: 10px;

    }

    .educationJourneyPlanStep {

        grid-template-columns: 38px 1fr;

        gap: 12px;

    }

    .educationJourneyPlanMarker {

        width: 38px;

        height: 38px;

        font-size: 10px;

    }

    .educationJourneyPlanContent h3 {

        font-size: 17px;

    }

    .educationJourneyPlanContent p {

        font-size: 12px;

    }

}

/* Journey Section Ends Here */

/* Who Section Starts Here */

/* =========================================================
   EDUCATION PROFILES
   SECTION 07
========================================================= */

.educationProfiles {

    position: relative;

    padding: 110px 0;

    overflow: hidden;

    background: var(--section);

}

.educationProfiles .container {

    width: min(1120px, 92%);

    margin: auto;

}


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

.educationProfilesHeading {

    max-width: 760px;

    margin: 0 auto 65px;

    text-align: center;

}

.educationProfilesPrefix {

    display: block;

    margin-bottom: 16px;

    color: #D4AF37;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.educationProfilesHeading h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(38px, 4.4vw, 56px);

    font-weight: 600;

    line-height: 1.1;

    letter-spacing: -1.2px;

}

.educationProfilesHeading h2 span {

    color: #D4AF37;

}

.educationProfilesHeading p {

    max-width: 650px;

    margin: 20px auto 0;

    color: var(--text);

    opacity: .64;

    font-size: 16px;

    line-height: 1.8;

}


/* =========================================================
   PROFILE LIST
========================================================= */

.educationProfilesList {

    display: grid;

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

    border-top: 1px solid rgba(212, 175, 55, .13);

    border-left: 1px solid rgba(212, 175, 55, .13);

}


/* =========================================================
   PROFILE
========================================================= */

.educationProfile {

    display: grid;

    grid-template-columns: 45px 58px 1fr;

    align-items: center;

    gap: 18px;

    min-height: 185px;

    padding: 28px;

    border-right: 1px solid rgba(212, 175, 55, .13);

    border-bottom: 1px solid rgba(212, 175, 55, .13);

    transition:

        background .3s ease,

        padding-left .3s ease;

}

.educationProfile:hover {

    background: rgba(212, 175, 55, .018);

    padding-left: 34px;

}


/* =========================================================
   NUMBER
========================================================= */

.educationProfileNumber {

    align-self: start;

    padding-top: 5px;

    color: #D4AF37;

    opacity: .55;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;

}


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

.educationProfileIcon {

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    color: #D4AF37;

    background: rgba(212, 175, 55, .055);

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

    transition:

        transform .3s ease,

        background .3s ease;

}

.educationProfile:hover .educationProfileIcon {

    transform: translateY(-3px);

    background: rgba(212, 175, 55, .09);

}

.educationProfileIcon i {

    font-size: 18px;

}


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

.educationProfileContent h3 {

    margin: 0 0 9px;

    color: var(--primary);

    font-size: 20px;

    font-weight: 600;

    line-height: 1.35;

}

.educationProfileContent p {

    margin: 0;

    color: var(--text);

    opacity: .62;

    font-size: 14px;

    line-height: 1.7;

}


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

@media (max-width: 767px) {

    .educationProfiles {

        padding: 80px 0;

    }

    .educationProfiles .container {

        width: calc(100% - 30px);

    }

    .educationProfilesHeading {

        margin-bottom: 45px;

        text-align: left;

    }

    .educationProfilesPrefix {

        font-size: 11px;

    }

    .educationProfilesHeading h2 {

        font-size: 36px;

    }

    .educationProfilesHeading p {

        margin-left: 0;

        font-size: 14px;

        line-height: 1.8;

    }


    .educationProfilesList {

        grid-template-columns: 1fr;

    }


    .educationProfile {

        grid-template-columns: 38px 48px 1fr;

        gap: 13px;

        min-height: 140px;

        padding: 22px 18px;

    }

    .educationProfile:hover {

        padding-left: 22px;

    }

    .educationProfileNumber {

        font-size: 11px;

    }

    .educationProfileIcon {

        width: 44px;

        height: 44px;

    }

    .educationProfileIcon i {

        font-size: 15px;

    }

    .educationProfileContent h3 {

        font-size: 18px;

    }

    .educationProfileContent p {

        font-size: 13px;

        line-height: 1.7;

    }

}


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

@media (max-width: 480px) {

    .educationProfilesHeading h2 {

        font-size: 31px;

    }

    .educationProfilesHeading p {

        font-size: 13px;

    }

    .educationProfile {

        grid-template-columns: 32px 42px 1fr;

        gap: 10px;

        padding: 19px 14px;

    }

    .educationProfileIcon {

        width: 39px;

        height: 39px;

    }

    .educationProfileIcon i {

        font-size: 13px;

    }

    .educationProfileContent h3 {

        font-size: 17px;

    }

    .educationProfileContent p {

        font-size: 12px;

    }

}

/* Who Section Ends Here */

/* Benefits Section Starts Here */

/* =========================================================
   EDUCATION BENEFITS
   SECTION 08
========================================================= */

.educationBenefits {

    position: relative;

    padding: 110px 0;

    overflow: hidden;

    background: var(--section);

}

.educationBenefits .container {

    width: min(1120px, 92%);

    margin: auto;

}


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

.educationBenefitsHeading {

    max-width: 760px;

    margin: 0 auto 65px;

    text-align: center;

}

.educationBenefitsPrefix {

    display: block;

    margin-bottom: 16px;

    color: #D4AF37;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.educationBenefitsHeading h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(38px, 4.4vw, 56px);

    font-weight: 600;

    line-height: 1.1;

    letter-spacing: -1.2px;

}

.educationBenefitsHeading h2 span {

    color: #D4AF37;

}

.educationBenefitsHeading p {

    max-width: 650px;

    margin: 20px auto 0;

    color: var(--text);

    opacity: .64;

    font-size: 16px;

    line-height: 1.8;

}


/* =========================================================
   ASYMMETRIC LAYOUT
========================================================= */

.educationBenefitsLayout {

    display: grid;

    grid-template-columns: 40% 60%;

    gap: 25px;

    align-items: stretch;

}


/* =========================================================
   FEATURED BENEFIT
========================================================= */

.educationBenefitFeatured {

    position: relative;

    min-height: 560px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 35px;

    overflow: hidden;

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

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(212,175,55,.045),
            rgba(255,255,255,.012) 55%,
            rgba(255,255,255,.005)
        );

}


/* subtle background element */

.educationBenefitFeatured::after {

    content: "";

    position: absolute;

    width: 220px;

    height: 220px;

    right: -100px;

    bottom: -100px;

    border-radius: 50%;

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

    box-shadow:
        0 0 0 35px rgba(212,175,55,.018),
        0 0 0 70px rgba(212,175,55,.012);

    pointer-events: none;

}


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

.educationBenefitFeaturedTop {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.educationBenefitFeaturedTop > span {

    color: #D4AF37;

    opacity: .60;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;

}

.educationBenefitFeaturedIcon {

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    color: #D4AF37;

    background: rgba(212,175,55,.07);

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

}

.educationBenefitFeaturedIcon i {

    font-size: 22px;

}


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

.educationBenefitFeaturedContent {

    position: relative;

    z-index: 2;

    margin-top: auto;

    margin-bottom: 45px;

}

.educationBenefitFeaturedContent small {

    display: block;

    margin-bottom: 16px;

    color: #D4AF37;

    opacity: .55;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;

}

.educationBenefitFeaturedContent h3 {

    max-width: 350px;

    margin: 0 0 18px;

    color: var(--primary);

    font-size: 34px;

    font-weight: 600;

    line-height: 1.12;

}

.educationBenefitFeaturedContent h3 span {

    display: block;

    color: #D4AF37;

}

.educationBenefitFeaturedContent p {

    max-width: 370px;

    margin: 0;

    color: var(--text);

    opacity: .64;

    font-size: 15px;

    line-height: 1.8;

}


/* =========================================================
   FEATURED BOTTOM
========================================================= */

.educationBenefitFeaturedBottom {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 20px;

    border-top: 1px solid rgba(212,175,55,.12);

}

.educationBenefitFeaturedBottom span {

    color: var(--text);

    opacity: .48;

    font-size: 12px;

}

.educationBenefitFeaturedBottom i {

    color: #D4AF37;

    font-size: 13px;

}


/* =========================================================
   RIGHT LIST
========================================================= */

.educationBenefitsList {

    display: flex;

    flex-direction: column;

    border-top: 1px solid rgba(212,175,55,.13);

}


/* =========================================================
   BENEFIT ROW
========================================================= */

.educationBenefitRow {

    display: grid;

    grid-template-columns: 35px 48px 1fr 20px;

    align-items: center;

    gap: 18px;

    flex: 1;

    min-height: 108px;

    padding: 18px 20px;

    border-bottom: 1px solid rgba(212,175,55,.13);

    transition:

        background .3s ease,

        padding-left .3s ease;

}

.educationBenefitRow:hover {

    background: rgba(212,175,55,.018);

    padding-left: 28px;

}


/* =========================================================
   ROW NUMBER
========================================================= */

.educationBenefitRowNumber {

    color: #D4AF37;

    opacity: .55;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1px;

}


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

.educationBenefitRowIcon {

    width: 46px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    color: #D4AF37;

    background: rgba(212,175,55,.05);

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

}

.educationBenefitRowIcon i {

    font-size: 16px;

}


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

.educationBenefitRowContent h3 {

    margin: 0 0 5px;

    color: var(--primary);

    font-size: 18px;

    font-weight: 600;

    line-height: 1.35;

}

.educationBenefitRowContent p {

    margin: 0;

    color: var(--text);

    opacity: .58;

    font-size: 13px;

    line-height: 1.6;

}


/* =========================================================
   ARROW
========================================================= */

.educationBenefitArrow {

    color: #D4AF37;

    opacity: .35;

    font-size: 11px;

    transition:

        transform .3s ease,

        opacity .3s ease;

}

.educationBenefitRow:hover .educationBenefitArrow {

    opacity: .75;

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

}


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

@media (max-width: 991px) {

    .educationBenefits {

        padding: 90px 0;

    }

    .educationBenefitsLayout {

        grid-template-columns: 1fr;

    }

    .educationBenefitFeatured {

        min-height: 400px;

    }

    .educationBenefitsList {

        border-top: 0;

    }

}


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

@media (max-width: 767px) {

    .educationBenefits {

        padding: 80px 0;

    }

    .educationBenefits .container {

        width: calc(100% - 30px);

    }

    .educationBenefitsHeading {

        margin-bottom: 45px;

        text-align: left;

    }

    .educationBenefitsPrefix {

        font-size: 11px;

    }

    .educationBenefitsHeading h2 {

        font-size: 36px;

    }

    .educationBenefitsHeading p {

        margin-left: 0;

        font-size: 14px;

        line-height: 1.8;

    }


    .educationBenefitFeatured {

        min-height: 360px;

        padding: 25px;

        border-radius: 14px;

    }

    .educationBenefitFeaturedIcon {

        width: 48px;

        height: 48px;

    }

    .educationBenefitFeaturedIcon i {

        font-size: 18px;

    }

    .educationBenefitFeaturedContent h3 {

        font-size: 28px;

    }

    .educationBenefitFeaturedContent p {

        font-size: 14px;

    }


    .educationBenefitRow {

        grid-template-columns: 32px 45px 1fr;

        gap: 12px;

        min-height: auto;

        padding: 20px 5px;

    }

    .educationBenefitRow:hover {

        padding-left: 10px;

    }

    .educationBenefitRowNumber {

        font-size: 10px;

    }

    .educationBenefitRowIcon {

        width: 42px;

        height: 42px;

    }

    .educationBenefitRowIcon i {

        font-size: 14px;

    }

    .educationBenefitRowContent h3 {

        font-size: 17px;

    }

    .educationBenefitRowContent p {

        font-size: 12px;

        line-height: 1.65;

    }

    .educationBenefitArrow {

        display: none;

    }

}


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

@media (max-width: 480px) {

    .educationBenefitsHeading h2 {

        font-size: 31px;

    }

    .educationBenefitsHeading p {

        font-size: 13px;

    }

    .educationBenefitFeatured {

        min-height: 330px;

        padding: 21px;

    }

    .educationBenefitFeaturedContent h3 {

        font-size: 25px;

    }

    .educationBenefitFeaturedContent p {

        font-size: 13px;

    }

    .educationBenefitRow {

        grid-template-columns: 28px 40px 1fr;

        gap: 10px;

    }

    .educationBenefitRowIcon {

        width: 38px;

        height: 38px;

    }

    .educationBenefitRowContent h3 {

        font-size: 16px;

    }

    .educationBenefitRowContent p {

        font-size: 12px;

    }

}

/* Benefits Section Ends Here */

/* CTA Section Starts Here */

/* =========================================================
   EDUCATION FINAL CTA
   SIMPLE DESIGN
========================================================= */

.educationCta {

    padding: 100px 0;

    background: var(--section);

}

.educationCta .container {

    width: min(1120px, 92%);

    margin: auto;

}


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

.educationCtaBox {

    display: grid;

    grid-template-columns: 1.4fr .6fr;

    align-items: center;

    gap: 60px;

    padding: 60px;

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

    border-radius: 18px;

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

}


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

.educationCtaContent {

    max-width: 700px;

}

.educationCtaPrefix {

    display: block;

    margin-bottom: 16px;

    color: #D4AF37;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.educationCtaContent h2 {

    margin: 0 0 20px;

    color: var(--primary);

    font-size: clamp(38px, 4vw, 54px);

    font-weight: 600;

    line-height: 1.1;

    letter-spacing: -1.2px;

}

.educationCtaContent h2 span {

    color: #D4AF37;

}

.educationCtaContent p {

    max-width: 650px;

    margin: 0;

    color: var(--text);

    opacity: .62;

    font-size: 16px;

    line-height: 1.8;

}


/* =========================================================
   BUTTONS
========================================================= */

.educationCtaButtons {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 32px;

}

.educationCtaPrimary,
.educationCtaSecondary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 50px;

    padding: 0 23px;

    border-radius: 7px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    transition: .3s ease;

}

.educationCtaPrimary {

    color: #111;

    background: #D4AF37;

    border: 1px solid #D4AF37;

}

.educationCtaPrimary:hover {

    transform: translateY(-2px);

}

.educationCtaSecondary {

    color: var(--primary);

    background: transparent;

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

}

.educationCtaSecondary:hover {

    border-color: rgba(212,175,55,.50);

    background: rgba(212,175,55,.04);

}


/* =========================================================
   SIMPLE VISUAL
========================================================= */

.educationCtaVisual {

    position: relative;

    width: 300px;

    height: 280px;

    margin: auto;

}


/* Main circle */

.educationCtaVisualCircle {

    position: absolute;

    top: 35px;

    left: 50%;

    width: 125px;

    height: 125px;

    display: flex;

    align-items: center;

    justify-content: center;

    transform: translateX(-50%);

    border-radius: 50%;

    color: #D4AF37;

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

    background: rgba(212,175,55,.035);

}

.educationCtaVisualCircle i {

    font-size: 43px;

}


/* Connecting line */

.educationCtaVisualLine {

    position: absolute;

    top: 160px;

    left: 50%;

    width: 1px;

    height: 55px;

    transform: translateX(-50%);

    background: rgba(212,175,55,.25);

}


/* Bottom items */

.educationCtaVisualItem {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 115px;

    padding: 15px 10px;

    text-align: center;

    border-top: 1px solid rgba(212,175,55,.20);

}

.educationCtaVisualItemRight {

    left: auto;

    right: 0;

}

.educationCtaVisualItem i {

    display: block;

    margin-bottom: 8px;

    color: #D4AF37;

    font-size: 18px;

}

.educationCtaVisualItem span {

    color: var(--text);

    opacity: .50;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.2px;

}


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

@media (max-width: 900px) {

    .educationCtaBox {

        grid-template-columns: 1fr;

        gap: 40px;

        padding: 50px;

    }

    .educationCtaVisual {

        height: 250px;

    }

}


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

@media (max-width: 767px) {

    .educationCta {

        padding: 75px 0;

    }

    .educationCta .container {

        width: calc(100% - 30px);

    }

    .educationCtaBox {

        gap: 35px;

        padding: 35px 22px;

        border-radius: 14px;

    }

    .educationCtaPrefix {

        font-size: 11px;

    }

    .educationCtaContent h2 {

        font-size: 34px;

    }

    .educationCtaContent p {

        font-size: 14px;

    }

    .educationCtaButtons {

        flex-direction: column;

        align-items: stretch;

    }

    .educationCtaPrimary,
    .educationCtaSecondary {

        width: 100%;

    }

    .educationCtaVisual {

        width: 270px;

        height: 240px;

    }

    .educationCtaVisualCircle {

        width: 105px;

        height: 105px;

    }

    .educationCtaVisualCircle i {

        font-size: 36px;

    }

}


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

@media (max-width: 480px) {

    .educationCtaContent h2 {

        font-size: 30px;

    }

    .educationCtaContent p {

        font-size: 13px;

    }

    .educationCtaVisual {

        transform: scale(.9);

    }

}

/* CTA Section Ends Here */

/* Education Planning Page Ends Here */


/* Marriage Planning Page Starts Here */

/* Hero Section Starts Here */

/* =========================================================
   MARRIAGE PLANNING HERO
   REDESIGNED PREMIUM VERSION
========================================================= */

.marriageHero {

    position: relative;

    padding: 120px 0 125px;

    overflow: hidden;

    background: var(--section);

}

.marriageHero .container {

    width: min(1180px, 92%);

    margin: auto;

}


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

.marriageHeroGrid {

    display: grid;

    grid-template-columns: 1.05fr .95fr;

    align-items: center;

    gap: 85px;

}


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

.marriageHeroContent {

    max-width: 680px;

}

.marriageHeroPrefix {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

    color: #D4AF37;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.6px;

    text-transform: uppercase;

}

.marriageHeroPrefix::before {

    content: "";

    width: 28px;

    height: 1px;

    background: #D4AF37;

}

.marriageHeroContent h1 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(44px, 5vw, 66px);

    font-weight: 600;

    line-height: 1.06;

    letter-spacing: -2px;

}

.marriageHeroContent h1 span {

    display: block;

    color: #D4AF37;

}

.marriageHeroContent p {

    max-width: 650px;

    margin: 26px 0 0;

    color: var(--text);

    opacity: .64;

    font-size: 16px;

    line-height: 1.85;

}


/* =========================================================
   BUTTONS
========================================================= */

.marriageHeroButtons {

    display: flex;

    align-items: center;

    gap: 13px;

    flex-wrap: wrap;

    margin-top: 34px;

}

.marriageHeroBtn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    min-height: 52px;

    padding: 0 24px;

    border-radius: 7px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    transition:

        transform .3s ease,

        background .3s ease,

        border-color .3s ease;

}

.marriageHeroBtnPrimary {

    color: #111;

    background: #D4AF37;

    border: 1px solid #D4AF37;

}

.marriageHeroBtnPrimary:hover {

    transform: translateY(-3px);

    background: #dfbd43;

}

.marriageHeroBtnPrimary i {

    font-size: 11px;

}

.marriageHeroBtnSecondary {

    color: var(--primary);

    background: transparent;

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

}

.marriageHeroBtnSecondary:hover {

    transform: translateY(-3px);

    border-color: rgba(212,175,55,.50);

    background: rgba(212,175,55,.035);

}


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

.marriageHeroTrust {

    display: flex;

    align-items: center;

    gap: 25px;

    margin-top: 38px;

    padding-top: 22px;

    border-top: 1px solid rgba(212,175,55,.12);

}

.marriageHeroTrust div {

    display: flex;

    align-items: center;

    gap: 8px;

}

.marriageHeroTrust i {

    color: #D4AF37;

    font-size: 13px;

}

.marriageHeroTrust span {

    color: var(--text);

    opacity: .50;

    font-size: 12px;

}


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

.marriageHeroVisual {

    position: relative;

    min-height: 520px;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* =========================================================
   MAIN PANEL
========================================================= */

.marriageHeroPanel {

    position: relative;

    z-index: 2;

    width: 390px;

    min-height: 450px;

    padding: 30px;

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

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.025),
            rgba(212,175,55,.018)
        );

    box-shadow:

        0 25px 70px rgba(0,0,0,.14);

}


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

.marriageHeroPanelHeader {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom: 22px;

    border-bottom: 1px solid rgba(212,175,55,.10);

}

.marriageHeroPanelHeader span {

    display: block;

    margin-bottom: 7px;

    color: #D4AF37;

    opacity: .55;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

}

.marriageHeroPanelHeader strong {

    color: var(--primary);

    font-size: 17px;

    font-weight: 600;

}

.marriageHeroRingIcon {

    width: 44px;

    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    color: #D4AF37;

    background: rgba(212,175,55,.05);

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

}

.marriageHeroRingIcon i {

    font-size: 18px;

}


/* =========================================================
   GOAL AREA
========================================================= */

.marriageHeroGoal {

    display: flex;

    align-items: center;

    justify-content: center;

    height: 225px;

}

.marriageHeroGoalCircle {

    width: 165px;

    height: 165px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

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

    box-shadow:

        0 0 0 12px rgba(212,175,55,.025),

        0 0 0 25px rgba(212,175,55,.012);

}

.marriageHeroGoalCircle > div {

    width: 125px;

    height: 125px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(212,175,55,.035);

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

}

.marriageHeroGoalCircle i {

    margin-bottom: 9px;

    color: #D4AF37;

    font-size: 20px;

}

.marriageHeroGoalCircle span {

    color: var(--text);

    opacity: .45;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;

}

.marriageHeroGoalCircle strong {

    margin-top: 3px;

    color: #D4AF37;

    font-size: 17px;

    font-weight: 600;

}


/* =========================================================
   PROGRESS
========================================================= */

.marriageHeroProgress {

    padding: 18px 0;

    border-top: 1px solid rgba(212,175,55,.10);

    border-bottom: 1px solid rgba(212,175,55,.10);

}

.marriageHeroProgressTop {

    display: flex;

    justify-content: space-between;

    margin-bottom: 11px;

}

.marriageHeroProgressTop span {

    color: var(--text);

    opacity: .52;

    font-size: 11px;

}

.marriageHeroProgressTop span:last-child {

    color: #D4AF37;

    opacity: .65;

}

.marriageHeroProgressBar {

    height: 5px;

    overflow: hidden;

    border-radius: 10px;

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

}

.marriageHeroProgressBar span {

    display: block;

    width: 68%;

    height: 100%;

    border-radius: inherit;

    background: #D4AF37;

}


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

.marriageHeroDetails {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;

    padding-top: 20px;

}

.marriageHeroDetails > div {

    display: flex;

    align-items: center;

    gap: 11px;

}

.marriageHeroDetails > div > i {

    color: #D4AF37;

    font-size: 15px;

}

.marriageHeroDetails span {

    display: block;

    margin-bottom: 4px;

    color: var(--text);

    opacity: .35;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;

}

.marriageHeroDetails strong {

    color: var(--primary);

    font-size: 12px;

    font-weight: 600;

}


/* =========================================================
   DECORATIVE ACCENT
========================================================= */

.marriageHeroAccentLine {

    position: absolute;

    width: 250px;

    height: 250px;

    right: -30px;

    bottom: 15px;

    border-right: 1px solid rgba(212,175,55,.10);

    border-bottom: 1px solid rgba(212,175,55,.10);

    border-radius: 0 0 100% 0;

}


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

@media (max-width: 991px) {

    .marriageHero {

        padding: 90px 0 100px;

    }

    .marriageHeroGrid {

        grid-template-columns: 1fr;

        gap: 65px;

    }

    .marriageHeroContent {

        max-width: 800px;

        margin: auto;

        text-align: center;

    }

    .marriageHeroPrefix {

        justify-content: center;

    }

    .marriageHeroContent p {

        margin-left: auto;

        margin-right: auto;

    }

    .marriageHeroButtons {

        justify-content: center;

    }

    .marriageHeroTrust {

        justify-content: center;

    }

    .marriageHeroVisual {

        min-height: 500px;

    }

}


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

@media (max-width: 767px) {

    .marriageHero {

        padding: 75px 0 85px;

    }

    .marriageHero .container {

        width: calc(100% - 30px);

    }

    .marriageHeroContent {

        text-align: left;

    }

    .marriageHeroPrefix {

        justify-content: flex-start;

        font-size: 11px;

    }

    .marriageHeroContent h1 {

        font-size: 38px;

        letter-spacing: -1px;

    }

    .marriageHeroContent p {

        font-size: 14px;

        line-height: 1.8;

    }

    .marriageHeroButtons {

        flex-direction: column;

        align-items: stretch;

    }

    .marriageHeroBtn {

        width: 100%;

    }

    .marriageHeroTrust {

        align-items: flex-start;

        flex-direction: column;

        gap: 13px;

    }

    .marriageHeroVisual {

        min-height: 450px;

    }

    .marriageHeroPanel {

        width: 100%;

        max-width: 390px;

        min-height: 420px;

        padding: 25px;

    }

}


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

@media (max-width: 480px) {

    .marriageHeroContent h1 {

        font-size: 32px;

    }

    .marriageHeroContent p {

        font-size: 13px;

    }

    .marriageHeroPanel {

        min-height: 400px;

        padding: 21px;

        border-radius: 17px;

    }

    .marriageHeroGoal {

        height: 205px;

    }

    .marriageHeroGoalCircle {

        width: 145px;

        height: 145px;

    }

    .marriageHeroGoalCircle > div {

        width: 110px;

        height: 110px;

    }

    .marriageHeroDetails {

        gap: 10px;

    }

}

/* Hero Section Ends Here */

/* Intro Section Starts Here */

/* =========================================================
   MARRIAGE PLANNING INTRODUCTION
========================================================= */

.marriageIntro {

    position: relative;

    padding: 110px 0;

    overflow: hidden;

    background: var(--section);

}

.marriageIntro .container {

    width: min(1120px, 92%);

    margin: auto;

}


/* =========================================================
   MAIN WRAPPER
========================================================= */

.marriageIntroWrapper {

    display: grid;

    grid-template-columns: .85fr 1.15fr;

    gap: 90px;

    align-items: center;

}


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

.marriageIntroHeading {

    position: relative;

}

.marriageIntroPrefix {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 18px;

    color: #D4AF37;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.marriageIntroPrefix::before {

    content: "";

    width: 25px;

    height: 1px;

    background: #D4AF37;

}

.marriageIntroHeading h2 {

    max-width: 500px;

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.3vw, 55px);

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -1.3px;

}

.marriageIntroHeading h2 span {

    display: block;

    color: #D4AF37;

}


/* =========================================================
   ACCENT
========================================================= */

.marriageIntroAccent {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 30px;

}

.marriageIntroAccent span {

    width: 55px;

    height: 1px;

    background: rgba(212,175,55,.45);

}

.marriageIntroAccent i {

    color: #D4AF37;

    font-size: 16px;

    opacity: .65;

}


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

.marriageIntroContent {

    max-width: 650px;

}

.marriageIntroContent p {

    margin: 0 0 20px;

    color: var(--text);

    opacity: .62;

    font-size: 16px;

    line-height: 1.85;

}

.marriageIntroContent p:last-child {

    margin-bottom: 0;

}

.marriageIntroContent .marriageIntroLead {

    color: var(--text);

    opacity: .75;

    font-size: 18px;

    line-height: 1.8;

}


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

.marriageIntroHighlights {

    display: grid;

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

    margin-top: 75px;

    border-top: 1px solid rgba(212,175,55,.13);

    border-bottom: 1px solid rgba(212,175,55,.13);

}


/* =========================================================
   HIGHLIGHT
========================================================= */

.marriageIntroHighlight {

    display: flex;

    align-items: center;

    gap: 17px;

    min-height: 110px;

    padding: 20px 25px;

    border-right: 1px solid rgba(212,175,55,.13);

}

.marriageIntroHighlight:last-child {

    border-right: 0;

}


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

.marriageIntroHighlightIcon {

    flex: 0 0 48px;

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    color: #D4AF37;

    background: rgba(212,175,55,.045);

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

}

.marriageIntroHighlightIcon i {

    font-size: 17px;

}


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

.marriageIntroHighlight span {

    display: block;

    margin-bottom: 5px;

    color: #D4AF37;

    opacity: .55;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.2px;

}

.marriageIntroHighlight h3 {

    margin: 0;

    color: var(--primary);

    font-size: 16px;

    font-weight: 600;

    line-height: 1.35;

}


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

@media (max-width: 991px) {

    .marriageIntro {

        padding: 90px 0;

    }

    .marriageIntroWrapper {

        grid-template-columns: 1fr;

        gap: 45px;

    }

    .marriageIntroHeading h2 {

        max-width: 700px;

    }

    .marriageIntroContent {

        max-width: 800px;

    }

}


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

@media (max-width: 767px) {

    .marriageIntro {

        padding: 75px 0;

    }

    .marriageIntro .container {

        width: calc(100% - 30px);

    }

    .marriageIntroWrapper {

        gap: 35px;

    }

    .marriageIntroPrefix {

        font-size: 11px;

    }

    .marriageIntroHeading h2 {

        font-size: 36px;

        letter-spacing: -1px;

    }

    .marriageIntroContent p {

        font-size: 14px;

        line-height: 1.8;

    }

    .marriageIntroContent .marriageIntroLead {

        font-size: 16px;

    }


    .marriageIntroHighlights {

        grid-template-columns: 1fr;

        margin-top: 50px;

    }

    .marriageIntroHighlight {

        min-height: 90px;

        padding: 18px 5px;

        border-right: 0;

        border-bottom: 1px solid rgba(212,175,55,.13);

    }

    .marriageIntroHighlight:last-child {

        border-bottom: 0;

    }

}


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

@media (max-width: 480px) {

    .marriageIntroHeading h2 {

        font-size: 31px;

    }

    .marriageIntroContent p {

        font-size: 13px;

    }

    .marriageIntroContent .marriageIntroLead {

        font-size: 15px;

    }

    .marriageIntroHighlight h3 {

        font-size: 15px;

    }

}

/* Intro Section Ends Here */

/* Matters Section Starts Here */

/* =========================================================
   MARRIAGE PLANNING
   WHY MARRIAGE PLANNING MATTERS
========================================================= */

.marriageWhy {

    position: relative;

    padding: 110px 0;

    overflow: hidden;

    background: var(--section);

}

.marriageWhy .container {

    width: min(1120px, 92%);

    margin: auto;

}


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

.marriageWhyHeader {

    max-width: 780px;

    margin-bottom: 65px;

}

.marriageWhyPrefix {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 17px;

    color: #D4AF37;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.marriageWhyPrefix::before {

    content: "";

    width: 27px;

    height: 1px;

    background: #D4AF37;

}

.marriageWhyHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(39px, 4.5vw, 57px);

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -1.4px;

}

.marriageWhyHeader h2 span {

    display: block;

    color: #D4AF37;

}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.marriageWhyLayout {

    display: grid;

    grid-template-columns: .78fr 1.22fr;

    gap: 65px;

    align-items: start;

}


/* =========================================================
   LEFT STATEMENT
========================================================= */

.marriageWhyStatement {

    position: sticky;

    top: 100px;

    min-height: 470px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 35px;

    overflow: hidden;

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

    border-radius: 18px;

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

}

.marriageWhyStatement::before {

    content: "";

    position: absolute;

    width: 220px;

    height: 220px;

    right: -100px;

    bottom: -100px;

    border-radius: 50%;

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

}

.marriageWhyQuoteIcon {

    position: relative;

    width: 54px;

    height: 54px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    color: #D4AF37;

    background: rgba(212,175,55,.045);

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

}

.marriageWhyQuoteIcon i {

    font-size: 19px;

}

.marriageWhyStatement h3 {

    position: relative;

    margin: auto 0 18px;

    color: var(--primary);

    font-size: 31px;

    font-weight: 600;

    line-height: 1.2;

    letter-spacing: -.6px;

}

.marriageWhyStatement h3 span {

    display: block;

    color: #D4AF37;

}

.marriageWhyStatement > p {

    position: relative;

    max-width: 390px;

    margin: 0;

    color: var(--text);

    opacity: .60;

    font-size: 15px;

    line-height: 1.8;

}


/* =========================================================
   STATEMENT LINE
========================================================= */

.marriageWhyLine {

    width: 65px;

    height: 1px;

    margin-top: 30px;

    background: rgba(212,175,55,.35);

}


/* =========================================================
   STATEMENT BOTTOM
========================================================= */

.marriageWhyBottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 20px;

}

.marriageWhyBottom span {

    color: var(--text);

    opacity: .35;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

}

.marriageWhyBottom i {

    color: #D4AF37;

    font-size: 12px;

}


/* =========================================================
   RIGHT LIST
========================================================= */

.marriageWhyList {

    border-top: 1px solid rgba(212,175,55,.13);

}


/* =========================================================
   ITEM
========================================================= */

.marriageWhyItem {

    display: grid;

    grid-template-columns: 32px 48px 1fr;

    align-items: start;

    gap: 18px;

    padding: 25px 5px;

    border-bottom: 1px solid rgba(212,175,55,.13);

    transition:

        background .3s ease,

        padding-left .3s ease;

}

.marriageWhyItem:hover {

    padding-left: 14px;

    background: rgba(212,175,55,.012);

}


/* =========================================================
   NUMBER
========================================================= */

.marriageWhyNumber {

    padding-top: 7px;

    color: #D4AF37;

    opacity: .48;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;

}


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

.marriageWhyIcon {

    width: 46px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    color: #D4AF37;

    background: rgba(212,175,55,.04);

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

}

.marriageWhyIcon i {

    font-size: 15px;

}


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

.marriageWhyContent h3 {

    margin: 0 0 7px;

    color: var(--primary);

    font-size: 19px;

    font-weight: 600;

    line-height: 1.35;

}

.marriageWhyContent p {

    max-width: 600px;

    margin: 0;

    color: var(--text);

    opacity: .58;

    font-size: 14px;

    line-height: 1.7;

}


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

@media (max-width: 991px) {

    .marriageWhy {

        padding: 90px 0;

    }

    .marriageWhyLayout {

        grid-template-columns: 1fr;

        gap: 45px;

    }

    .marriageWhyStatement {

        position: relative;

        top: auto;

        min-height: 330px;

    }

}


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

@media (max-width: 767px) {

    .marriageWhy {

        padding: 75px 0;

    }

    .marriageWhy .container {

        width: calc(100% - 30px);

    }

    .marriageWhyHeader {

        margin-bottom: 45px;

    }

    .marriageWhyPrefix {

        font-size: 11px;

    }

    .marriageWhyHeader h2 {

        font-size: 35px;

        letter-spacing: -1px;

    }

    .marriageWhyStatement {

        min-height: 310px;

        padding: 25px;

        border-radius: 14px;

    }

    .marriageWhyStatement h3 {

        font-size: 27px;

    }

    .marriageWhyStatement > p {

        font-size: 14px;

    }

    .marriageWhyItem {

        grid-template-columns: 28px 43px 1fr;

        gap: 12px;

        padding: 20px 0;

    }

    .marriageWhyItem:hover {

        padding-left: 7px;

    }

    .marriageWhyIcon {

        width: 41px;

        height: 41px;

    }

    .marriageWhyIcon i {

        font-size: 13px;

    }

    .marriageWhyContent h3 {

        font-size: 17px;

    }

    .marriageWhyContent p {

        font-size: 13px;

        line-height: 1.7;

    }

}


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

@media (max-width: 480px) {

    .marriageWhyHeader h2 {

        font-size: 30px;

    }

    .marriageWhyStatement {

        padding: 22px;

    }

    .marriageWhyStatement h3 {

        font-size: 24px;

    }

    .marriageWhyContent h3 {

        font-size: 16px;

    }

    .marriageWhyContent p {

        font-size: 12px;

    }

}

/* Matters Section Ends Here */

/* Approach Section Starts Here */

/* =========================================================
   MARRIAGE PLANNING APPROACH
========================================================= */

.marriageApproach {

    position: relative;

    padding: 110px 0;

    overflow: hidden;

    background: var(--section);

}

.marriageApproach .container {

    width: min(1180px, 92%);

    margin: auto;

}


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

.marriageApproachHeading {

    max-width: 760px;

    margin: 0 auto 70px;

    text-align: center;

}

.marriageApproachPrefix {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 17px;

    color: #D4AF37;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.marriageApproachPrefix::before,
.marriageApproachPrefix::after {

    content: "";

    width: 24px;

    height: 1px;

    background: rgba(212,175,55,.45);

}

.marriageApproachHeading h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.5vw, 58px);

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -1.4px;

}

.marriageApproachHeading h2 span {

    display: block;

    color: #D4AF37;

}

.marriageApproachHeading p {

    max-width: 620px;

    margin: 20px auto 0;

    color: var(--text);

    opacity: .58;

    font-size: 16px;

    line-height: 1.8;

}


/* =========================================================
   PROCESS
========================================================= */

.marriageApproachProcess {

    position: relative;

    display: grid;

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

}


/* =========================================================
   CONNECTING LINE
========================================================= */

.marriageApproachProcess::before {

    content: "";

    position: absolute;

    top: 31px;

    left: 8%;

    right: 8%;

    height: 1px;

    background: rgba(212,175,55,.18);

}


/* =========================================================
   STEP
========================================================= */

.marriageApproachStep {

    position: relative;

    padding: 0 15px;

}

.marriageApproachStepTop {

    position: relative;

    height: 65px;

    display: flex;

    align-items: flex-start;

    justify-content: center;

}


/* =========================================================
   NUMBER
========================================================= */

.marriageApproachNumber {

    position: relative;

    z-index: 3;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 62px;

    height: 62px;

    border-radius: 50%;

    color: #D4AF37;

    background: var(--section);

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

    font-size: 13px;

    font-weight: 700;

}


/* =========================================================
   STEP DOT
========================================================= */

.marriageApproachDot {

    position: absolute;

    z-index: 4;

    top: 28px;

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #D4AF37;

    box-shadow:

        0 0 0 5px var(--section);

}


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

.marriageApproachStepContent {

    padding-top: 25px;

    text-align: center;

}

.marriageApproachStepContent h3 {

    margin: 0 0 10px;

    color: var(--primary);

    font-size: 19px;

    font-weight: 600;

    line-height: 1.3;

}

.marriageApproachStepContent p {

    margin: 0;

    color: var(--text);

    opacity: .58;

    font-size: 13px;

    line-height: 1.7;

}


/* =========================================================
   HOVER
========================================================= */

.marriageApproachStep:hover .marriageApproachNumber {

    border-color: rgba(212,175,55,.50);

}

.marriageApproachStep:hover .marriageApproachContent h3 {

    color: #D4AF37;

}


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

@media (max-width: 1100px) {

    .marriageApproachStep {

        padding: 0 10px;

    }

    .marriageApproachStepContent p {

        font-size: 12px;

    }

}


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

@media (max-width: 991px) {

    .marriageApproach {

        padding: 90px 0;

    }

    .marriageApproachProcess {

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

        row-gap: 55px;

    }

    .marriageApproachProcess::before {

        display: none;

    }

    .marriageApproachStep {

        padding: 0 20px;

    }

    .marriageApproachStepTop {

        height: 62px;

    }

    .marriageApproachStepContent {

        padding-top: 18px;

    }

}


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

@media (max-width: 767px) {

    .marriageApproach {

        padding: 75px 0;

    }

    .marriageApproach .container {

        width: calc(100% - 30px);

    }

    .marriageApproachHeading {

        margin-bottom: 50px;

        text-align: left;

    }

    .marriageApproachPrefix {

        font-size: 11px;

    }

    .marriageApproachHeading h2 {

        font-size: 35px;

        letter-spacing: -1px;

    }

    .marriageApproachHeading p {

        margin-left: 0;

        font-size: 14px;

    }


    .marriageApproachProcess {

        display: block;

        padding-left: 25px;

    }

    .marriageApproachProcess::before {

        display: block;

        top: 30px;

        bottom: 30px;

        left: 30px;

        right: auto;

        width: 1px;

        height: auto;

    }


    .marriageApproachStep {

        display: grid;

        grid-template-columns: 62px 1fr;

        gap: 22px;

        min-height: 150px;

        padding: 0 0 35px;

    }

    .marriageApproachStep:last-child {

        min-height: auto;

        padding-bottom: 0;

    }


    .marriageApproachStepTop {

        height: 62px;

        justify-content: flex-start;

    }

    .marriageApproachNumber {

        width: 62px;

        height: 62px;

        font-size: 12px;

    }

    .marriageApproachDot {

        display: none;

    }


    .marriageApproachStepContent {

        padding-top: 5px;

        text-align: left;

    }

    .marriageApproachStepContent h3 {

        font-size: 19px;

    }

    .marriageApproachStepContent p {

        font-size: 13px;

        line-height: 1.7;

    }

}


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

@media (max-width: 480px) {

    .marriageApproachHeading h2 {

        font-size: 30px;

    }

    .marriageApproachHeading p {

        font-size: 13px;

    }

    .marriageApproachProcess {

        padding-left: 18px;

    }

    .marriageApproachProcess::before {

        left: 23px;

    }

    .marriageApproachStep {

        grid-template-columns: 48px 1fr;

        gap: 17px;

        min-height: 140px;

    }

    .marriageApproachNumber {

        width: 48px;

        height: 48px;

        font-size: 11px;

    }

    .marriageApproachStepContent h3 {

        font-size: 17px;

    }

    .marriageApproachStepContent p {

        font-size: 12px;

    }

}

/* Approach Section Ends Here */

/* Strategies Section Starts Here */

/* =========================================================
   MARRIAGE FUNDING STRATEGIES
========================================================= */

.marriageStrategies {

    position: relative;

    padding: 110px 0;

    overflow: hidden;

    background: var(--section);

}

.marriageStrategies .container {

    width: min(1120px, 92%);

    margin: auto;

}


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

.marriageStrategiesHeading {

    max-width: 760px;

    margin: 0 auto 65px;

    text-align: center;

}

.marriageStrategiesPrefix {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 17px;

    color: #D4AF37;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.marriageStrategiesPrefix::before,
.marriageStrategiesPrefix::after {

    content: "";

    width: 24px;

    height: 1px;

    background: rgba(212,175,55,.40);

}

.marriageStrategiesHeading h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.5vw, 57px);

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -1.4px;

}

.marriageStrategiesHeading h2 span {

    display: block;

    color: #D4AF37;

}

.marriageStrategiesHeading p {

    max-width: 650px;

    margin: 20px auto 0;

    color: var(--text);

    opacity: .58;

    font-size: 16px;

    line-height: 1.8;

}


/* =========================================================
   STRATEGY LIST
========================================================= */

.marriageStrategiesList {

    border-top: 1px solid rgba(212,175,55,.14);

}


/* =========================================================
   STRATEGY
========================================================= */

.marriageStrategy {

    position: relative;

    display: grid;

    grid-template-columns: 50px 62px 1fr 40px;

    align-items: center;

    gap: 25px;

    min-height: 145px;

    padding: 25px 20px;

    border-bottom: 1px solid rgba(212,175,55,.14);

    transition:

        background .3s ease,

        padding-left .3s ease;

}

.marriageStrategy:hover {

    background: rgba(212,175,55,.018);

    padding-left: 30px;

}


/* =========================================================
   NUMBER
========================================================= */

.marriageStrategyNumber {

    align-self: start;

    padding-top: 8px;

    color: #D4AF37;

    opacity: .48;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1px;

}


/* =========================================================
   ICON
========================================================= */

.marriageStrategyIcon {

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    color: #D4AF37;

    background: rgba(212,175,55,.045);

    border: 1px solid rgba(212,175,55,.15);

    transition:

        background .3s ease,

        transform .3s ease;

}

.marriageStrategy:hover .marriageStrategyIcon {

    transform: translateY(-2px);

    background: rgba(212,175,55,.07);

}

.marriageStrategyIcon i {

    font-size: 19px;

}


/* =========================================================
   CONTENT
========================================================= */

.marriageStrategyContent {

    max-width: 700px;

}

.marriageStrategyContent h3 {

    margin: 0 0 8px;

    color: var(--primary);

    font-size: 21px;

    font-weight: 600;

    line-height: 1.35;

}

.marriageStrategyContent p {

    max-width: 680px;

    margin: 0;

    color: var(--text);

    opacity: .58;

    font-size: 14px;

    line-height: 1.75;

}


/* =========================================================
   ARROW
========================================================= */

.marriageStrategyArrow {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #D4AF37;

    border: 1px solid rgba(212,175,55,.15);

    opacity: .45;

    transition:

        opacity .3s ease,

        transform .3s ease;

}

.marriageStrategy:hover .marriageStrategyArrow {

    opacity: .9;

    transform: translateX(4px);

}

.marriageStrategyArrow i {

    font-size: 12px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .marriageStrategies {

        padding: 90px 0;

    }

    .marriageStrategy {

        grid-template-columns: 40px 55px 1fr 38px;

        gap: 18px;

        min-height: 135px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .marriageStrategies {

        padding: 75px 0;

    }

    .marriageStrategies .container {

        width: calc(100% - 30px);

    }

    .marriageStrategiesHeading {

        margin-bottom: 45px;

        text-align: left;

    }

    .marriageStrategiesPrefix {

        font-size: 11px;

    }

    .marriageStrategiesHeading h2 {

        font-size: 35px;

        letter-spacing: -1px;

    }

    .marriageStrategiesHeading p {

        margin-left: 0;

        font-size: 14px;

    }


    .marriageStrategy {

        grid-template-columns: 30px 48px 1fr;

        gap: 13px;

        min-height: auto;

        padding: 22px 0;

    }

    .marriageStrategy:hover {

        padding-left: 7px;

    }

    .marriageStrategyNumber {

        font-size: 10px;

    }

    .marriageStrategyIcon {

        width: 45px;

        height: 45px;

        border-radius: 11px;

    }

    .marriageStrategyIcon i {

        font-size: 15px;

    }

    .marriageStrategyContent h3 {

        font-size: 18px;

    }

    .marriageStrategyContent p {

        font-size: 13px;

        line-height: 1.7;

    }

    .marriageStrategyArrow {

        display: none;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .marriageStrategiesHeading h2 {

        font-size: 30px;

    }

    .marriageStrategy {

        grid-template-columns: 25px 42px 1fr;

        gap: 10px;

    }

    .marriageStrategyIcon {

        width: 40px;

        height: 40px;

    }

    .marriageStrategyContent h3 {

        font-size: 16px;

    }

    .marriageStrategyContent p {

        font-size: 12px;

    }

}

/* Strategies Section Ends Here */

/* Journey Section Starts Here */

/* =========================================================
   MARRIAGE PLANNING JOURNEY
========================================================= */

.marriageJourney {

    position: relative;

    padding: 115px 0;

    overflow: hidden;

    background: var(--section);

}

.marriageJourney .container {

    width: min(1180px, 92%);

    margin: auto;

}


/* =========================================================
   HEADING
========================================================= */

.marriageJourneyHeading {

    max-width: 760px;

    margin: 0 auto 80px;

    text-align: center;

}

.marriageJourneyPrefix {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 17px;

    color: #D4AF37;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.marriageJourneyPrefix::before,
.marriageJourneyPrefix::after {

    content: "";

    width: 25px;

    height: 1px;

    background: rgba(212,175,55,.40);

}

.marriageJourneyHeading h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.5vw, 58px);

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -1.5px;

}

.marriageJourneyHeading h2 span {

    display: block;

    color: #D4AF37;

}

.marriageJourneyHeading p {

    max-width: 650px;

    margin: 20px auto 0;

    color: var(--text);

    opacity: .58;

    font-size: 16px;

    line-height: 1.8;

}


/* =========================================================
   JOURNEY TRACK
========================================================= */

.marriageJourneyTrack {

    position: relative;

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 20px;

}


/* =========================================================
   CONNECTING LINE
========================================================= */

.marriageJourneyLine {

    position: absolute;

    top: 31px;

    left: 10%;

    right: 10%;

    height: 1px;

    background: rgba(212,175,55,.16);

    z-index: 1;

}

.marriageJourneyLineProgress {

    display: block;

    width: 100%;

    height: 100%;

    background: linear-gradient(
        90deg,
        rgba(212,175,55,.20),
        rgba(212,175,55,.55),
        rgba(212,175,55,.20)
    );

}


/* =========================================================
   STAGE
========================================================= */

.marriageJourneyStage {

    position: relative;

    z-index: 2;

    padding: 0 10px;

}


/* =========================================================
   POINT
========================================================= */

.marriageJourneyPoint {

    width: 64px;

    height: 64px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto;

    border-radius: 50%;

    background: var(--section);

    border: 1px solid rgba(212,175,55,.25);

}

.marriageJourneyPoint span {

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #D4AF37;

    background: rgba(212,175,55,.045);

    font-size: 12px;

    font-weight: 700;

}


/* =========================================================
   STAGE CONTENT
========================================================= */

.marriageJourneyStageContent {

    margin-top: 28px;

    text-align: center;

}

.marriageJourneyStageLabel {

    display: block;

    margin-bottom: 9px;

    color: #D4AF37;

    opacity: .50;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

}

.marriageJourneyStageContent h3 {

    min-height: 50px;

    margin: 0 0 10px;

    color: var(--primary);

    font-size: 19px;

    font-weight: 600;

    line-height: 1.3;

}

.marriageJourneyStageContent p {

    margin: 0 auto;

    max-width: 205px;

    color: var(--text);

    opacity: .58;

    font-size: 13px;

    line-height: 1.7;

}


/* =========================================================
   FINAL STAGE
========================================================= */

.marriageJourneyFinal .marriageJourneyPoint {

    border-color: rgba(212,175,55,.40);

}

.marriageJourneyFinal .marriageJourneyPoint span {

    color: #111;

    background: #D4AF37;

}


/* =========================================================
   HOVER
========================================================= */

.marriageJourneyStage:hover .marriageJourneyPoint {

    border-color: rgba(212,175,55,.55);

    transform: translateY(-3px);

    transition: .3s ease;

}

.marriageJourneyStage:hover .marriageJourneyPoint span {

    background: rgba(212,175,55,.09);

}


/* =========================================================
   BOTTOM MESSAGE
========================================================= */

.marriageJourneyBottom {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 75px;

    padding-top: 25px;

    border-top: 1px solid rgba(212,175,55,.12);

}

.marriageJourneyBottom span {

    color: var(--text);

    opacity: .45;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.2px;

}

.marriageJourneyBottom i {

    color: #D4AF37;

    opacity: .55;

    font-size: 10px;

}

.marriageJourneyBottom .marriageJourneyBottomHighlight {

    color: #D4AF37;

    opacity: .80;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .marriageJourney {

        padding: 90px 0;

    }

    .marriageJourneyHeading {

        margin-bottom: 65px;

    }

    .marriageJourneyTrack {

        grid-template-columns: repeat(3, 1fr);

        row-gap: 55px;

    }

    .marriageJourneyLine {

        display: none;

    }

    .marriageJourneyStageContent h3 {

        min-height: auto;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .marriageJourney {

        padding: 75px 0;

    }

    .marriageJourney .container {

        width: calc(100% - 30px);

    }

    .marriageJourneyHeading {

        margin-bottom: 50px;

        text-align: left;

    }

    .marriageJourneyPrefix {

        font-size: 11px;

    }

    .marriageJourneyHeading h2 {

        font-size: 35px;

        letter-spacing: -1px;

    }

    .marriageJourneyHeading p {

        margin-left: 0;

        font-size: 14px;

    }


    /* Vertical Journey */

    .marriageJourneyTrack {

        display: block;

        padding-left: 24px;

    }

    .marriageJourneyTrack::before {

        content: "";

        position: absolute;

        top: 32px;

        bottom: 35px;

        left: 55px;

        width: 1px;

        background: rgba(212,175,55,.18);

    }


    .marriageJourneyStage {

        display: grid;

        grid-template-columns: 64px 1fr;

        gap: 24px;

        min-height: 155px;

        padding: 0 0 35px;

    }

    .marriageJourneyStage:last-child {

        min-height: auto;

        padding-bottom: 0;

    }


    .marriageJourneyPoint {

        position: relative;

        z-index: 3;

        margin: 0;

    }


    .marriageJourneyStageContent {

        margin-top: 5px;

        text-align: left;

    }

    .marriageJourneyStageContent h3 {

        min-height: auto;

        margin-bottom: 8px;

        font-size: 19px;

    }

    .marriageJourneyStageContent p {

        max-width: 100%;

        margin: 0;

        font-size: 13px;

        line-height: 1.7;

    }


    .marriageJourneyBottom {

        justify-content: flex-start;

        gap: 10px;

        margin-top: 50px;

        line-height: 1.8;

    }

    .marriageJourneyBottom span {

        font-size: 9px;

    }

    .marriageJourneyBottom i {

        font-size: 8px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .marriageJourneyHeading h2 {

        font-size: 30px;

    }

    .marriageJourneyHeading p {

        font-size: 13px;

    }

    .marriageJourneyTrack {

        padding-left: 10px;

    }

    .marriageJourneyTrack::before {

        left: 34px;

    }

    .marriageJourneyStage {

        grid-template-columns: 48px 1fr;

        gap: 18px;

        min-height: 145px;

    }

    .marriageJourneyPoint {

        width: 48px;

        height: 48px;

    }

    .marriageJourneyPoint span {

        width: 34px;

        height: 34px;

        font-size: 10px;

    }

    .marriageJourneyStageContent h3 {

        font-size: 17px;

    }

    .marriageJourneyStageContent p {

        font-size: 12px;

    }

    .marriageJourneyBottom {

        gap: 7px;

    }

    .marriageJourneyBottom span {

        font-size: 8px;

    }

}

/* Journey Section Ends Here */

/* Who Section Starts Here */

/* =========================================================
   MARRIAGE PLANNING
   WHO IS MARRIAGE PLANNING FOR?
========================================================= */

.marriageAudience {

    position: relative;

    padding: 110px 0;

    overflow: hidden;

    background: var(--section);

}

.marriageAudience .container {

    width: min(1120px, 92%);

    margin: auto;

}


/* =========================================================
   HEADING
========================================================= */

.marriageAudienceHeading {

    max-width: 780px;

    margin: 0 auto 65px;

    text-align: center;

}

.marriageAudiencePrefix {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 17px;

    color: #D4AF37;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.marriageAudiencePrefix::before,
.marriageAudiencePrefix::after {

    content: "";

    width: 25px;

    height: 1px;

    background: rgba(212,175,55,.40);

}

.marriageAudienceHeading h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.5vw, 57px);

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -1.4px;

}

.marriageAudienceHeading h2 span {

    display: block;

    color: #D4AF37;

}

.marriageAudienceHeading p {

    max-width: 650px;

    margin: 20px auto 0;

    color: var(--text);

    opacity: .58;

    font-size: 16px;

    line-height: 1.8;

}


/* =========================================================
   LIST
========================================================= */

.marriageAudienceList {

    border-top: 1px solid rgba(212,175,55,.13);

}


/* =========================================================
   PROFILE ITEM
========================================================= */

.marriageAudienceItem {

    position: relative;

    display: grid;

    grid-template-columns: 42px 58px 1fr 42px;

    align-items: center;

    gap: 24px;

    min-height: 125px;

    padding: 22px 18px;

    border-bottom: 1px solid rgba(212,175,55,.13);

    transition:
        background .3s ease,
        padding-left .3s ease;

}

.marriageAudienceItem:hover {

    padding-left: 28px;

    background: rgba(212,175,55,.018);

}


/* =========================================================
   NUMBER
========================================================= */

.marriageAudienceNumber {

    align-self: start;

    padding-top: 7px;

    color: #D4AF37;

    opacity: .45;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;

}


/* =========================================================
   ICON
========================================================= */

.marriageAudienceIcon {

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    color: #D4AF37;

    background: rgba(212,175,55,.04);

    border: 1px solid rgba(212,175,55,.14);

    transition:
        transform .3s ease,
        background .3s ease;

}

.marriageAudienceItem:hover .marriageAudienceIcon {

    transform: translateY(-3px);

    background: rgba(212,175,55,.065);

}

.marriageAudienceIcon i {

    font-size: 19px;

}


/* =========================================================
   CONTENT
========================================================= */

.marriageAudienceContent {

    max-width: 720px;

}

.marriageAudienceContent h3 {

    margin: 0 0 7px;

    color: var(--primary);

    font-size: 20px;

    font-weight: 600;

    line-height: 1.35;

}

.marriageAudienceContent p {

    max-width: 680px;

    margin: 0;

    color: var(--text);

    opacity: .58;

    font-size: 14px;

    line-height: 1.7;

}


/* =========================================================
   ARROW
========================================================= */

.marriageAudienceArrow {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #D4AF37;

    border: 1px solid rgba(212,175,55,.14);

    opacity: .35;

    transition:
        opacity .3s ease,
        transform .3s ease;

}

.marriageAudienceItem:hover .marriageAudienceArrow {

    opacity: .85;

    transform: translate(3px, -3px);

}

.marriageAudienceArrow i {

    font-size: 11px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .marriageAudience {

        padding: 90px 0;

    }

    .marriageAudienceItem {

        grid-template-columns: 35px 52px 1fr 38px;

        gap: 18px;

    }

    .marriageAudienceIcon {

        width: 52px;

        height: 52px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .marriageAudience {

        padding: 75px 0;

    }

    .marriageAudience .container {

        width: calc(100% - 30px);

    }

    .marriageAudienceHeading {

        margin-bottom: 45px;

        text-align: left;

    }

    .marriageAudiencePrefix {

        font-size: 11px;

    }

    .marriageAudienceHeading h2 {

        font-size: 35px;

        letter-spacing: -1px;

    }

    .marriageAudienceHeading p {

        margin-left: 0;

        font-size: 14px;

    }


    .marriageAudienceItem {

        grid-template-columns: 28px 46px 1fr;

        gap: 13px;

        min-height: auto;

        padding: 21px 0;

    }

    .marriageAudienceItem:hover {

        padding-left: 7px;

    }

    .marriageAudienceNumber {

        font-size: 10px;

    }

    .marriageAudienceIcon {

        width: 44px;

        height: 44px;

        border-radius: 11px;

    }

    .marriageAudienceIcon i {

        font-size: 15px;

    }

    .marriageAudienceContent h3 {

        font-size: 17px;

    }

    .marriageAudienceContent p {

        font-size: 13px;

        line-height: 1.7;

    }

    .marriageAudienceArrow {

        display: none;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .marriageAudienceHeading h2 {

        font-size: 30px;

    }

    .marriageAudienceHeading p {

        font-size: 13px;

    }

    .marriageAudienceItem {

        grid-template-columns: 24px 40px 1fr;

        gap: 10px;

    }

    .marriageAudienceIcon {

        width: 39px;

        height: 39px;

    }

    .marriageAudienceContent h3 {

        font-size: 16px;

    }

    .marriageAudienceContent p {

        font-size: 12px;

    }

}

/* Who Section Ends Here */

/* Benefits Section Starts Here */

/* =========================================================
   MARRIAGE PLANNING
   PROFESSIONAL BENEFITS
========================================================= */

.marriageBenefits {

    position: relative;

    padding: 115px 0;

    overflow: hidden;

    background: var(--section);

}

.marriageBenefits .container {

    width: min(1120px, 92%);

    margin: auto;

}


/* =========================================================
   HEADING
========================================================= */

.marriageBenefitsHeading {

    max-width: 720px;

    margin-bottom: 65px;

}

.marriageBenefitsPrefix {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 17px;

    color: #D4AF37;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.marriageBenefitsPrefix::before {

    content: "";

    width: 28px;

    height: 1px;

    background: #D4AF37;

}

.marriageBenefitsHeading h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.5vw, 57px);

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -1.4px;

}

.marriageBenefitsHeading h2 span {

    display: block;

    color: #D4AF37;

}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.marriageBenefitsLayout {

    display: grid;

    grid-template-columns: .78fr 1.22fr;

    gap: 60px;

    align-items: stretch;

}


/* =========================================================
   FEATURED BENEFIT
========================================================= */

.marriageBenefitFeatured {

    position: relative;

    min-height: 515px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 34px;

    overflow: hidden;

    border: 1px solid rgba(212,175,55,.16);

    border-radius: 20px;

    background: rgba(255,255,255,.012);

}

.marriageBenefitFeatured::before {

    content: "";

    position: absolute;

    width: 240px;

    height: 240px;

    right: -110px;

    bottom: -110px;

    border: 1px solid rgba(212,175,55,.08);

    border-radius: 50%;

}

.marriageBenefitFeatured::after {

    content: "";

    position: absolute;

    width: 150px;

    height: 150px;

    right: -70px;

    bottom: -70px;

    border: 1px solid rgba(212,175,55,.06);

    border-radius: 50%;

}


/* =========================================================
   FEATURED TOP
========================================================= */

.marriageBenefitFeaturedTop {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.marriageBenefitFeaturedTop > span {

    color: #D4AF37;

    opacity: .50;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;

}

.marriageBenefitFeaturedIcon {

    width: 54px;

    height: 54px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    color: #D4AF37;

    background: rgba(212,175,55,.045);

    border: 1px solid rgba(212,175,55,.15);

}

.marriageBenefitFeaturedIcon i {

    font-size: 19px;

}


/* =========================================================
   FEATURED CONTENT
========================================================= */

.marriageBenefitFeaturedContent {

    position: relative;

    z-index: 2;

    margin-top: auto;

    margin-bottom: 25px;

}

.marriageBenefitLabel {

    display: block;

    margin-bottom: 13px;

    color: #D4AF37;

    opacity: .48;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.6px;

}

.marriageBenefitFeaturedContent h3 {

    margin: 0 0 17px;

    color: var(--primary);

    font-size: 34px;

    font-weight: 600;

    line-height: 1.12;

    letter-spacing: -.8px;

}

.marriageBenefitFeaturedContent h3 span {

    display: block;

    color: #D4AF37;

}

.marriageBenefitFeaturedContent p {

    max-width: 380px;

    margin: 0;

    color: var(--text);

    opacity: .60;

    font-size: 15px;

    line-height: 1.8;

}


/* =========================================================
   FEATURED BOTTOM
========================================================= */

.marriageBenefitFeaturedLine {

    position: relative;

    z-index: 2;

    width: 65px;

    height: 1px;

    margin-bottom: 18px;

    background: rgba(212,175,55,.40);

}

.marriageBenefitFeaturedBottom {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.marriageBenefitFeaturedBottom span {

    color: var(--text);

    opacity: .34;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.4px;

}

.marriageBenefitFeaturedBottom i {

    color: #D4AF37;

    font-size: 12px;

}


/* =========================================================
   RIGHT BENEFITS LIST
========================================================= */

.marriageBenefitsList {

    border-top: 1px solid rgba(212,175,55,.13);

}


/* =========================================================
   BENEFIT ITEM
========================================================= */

.marriageBenefitItem {

    display: grid;

    grid-template-columns: 30px 50px 1fr;

    align-items: start;

    gap: 17px;

    min-height: 103px;

    padding: 21px 5px;

    border-bottom: 1px solid rgba(212,175,55,.13);

    transition:
        background .3s ease,
        padding-left .3s ease;

}

.marriageBenefitItem:hover {

    padding-left: 14px;

    background: rgba(212,175,55,.012);

}


/* =========================================================
   NUMBER
========================================================= */

.marriageBenefitNumber {

    padding-top: 7px;

    color: #D4AF37;

    opacity: .42;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;

}


/* =========================================================
   ICON
========================================================= */

.marriageBenefitIcon {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    color: #D4AF37;

    background: rgba(212,175,55,.04);

    border: 1px solid rgba(212,175,55,.13);

}

.marriageBenefitIcon i {

    font-size: 15px;

}


/* =========================================================
   CONTENT
========================================================= */

.marriageBenefitContent h3 {

    margin: 0 0 6px;

    color: var(--primary);

    font-size: 18px;

    font-weight: 600;

    line-height: 1.35;

}

.marriageBenefitContent p {

    max-width: 600px;

    margin: 0;

    color: var(--text);

    opacity: .57;

    font-size: 13px;

    line-height: 1.7;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .marriageBenefits {

        padding: 90px 0;

    }

    .marriageBenefitsLayout {

        grid-template-columns: 1fr;

        gap: 45px;

    }

    .marriageBenefitFeatured {

        min-height: 370px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .marriageBenefits {

        padding: 75px 0;

    }

    .marriageBenefits .container {

        width: calc(100% - 30px);

    }

    .marriageBenefitsHeading {

        margin-bottom: 45px;

    }

    .marriageBenefitsPrefix {

        font-size: 11px;

    }

    .marriageBenefitsHeading h2 {

        font-size: 35px;

        letter-spacing: -1px;

    }

    .marriageBenefitFeatured {

        min-height: 350px;

        padding: 25px;

        border-radius: 15px;

    }

    .marriageBenefitFeaturedContent h3 {

        font-size: 29px;

    }

    .marriageBenefitFeaturedContent p {

        font-size: 14px;

    }

    .marriageBenefitItem {

        grid-template-columns: 27px 45px 1fr;

        gap: 12px;

        padding: 20px 0;

    }

    .marriageBenefitItem:hover {

        padding-left: 7px;

    }

    .marriageBenefitIcon {

        width: 43px;

        height: 43px;

    }

    .marriageBenefitContent h3 {

        font-size: 17px;

    }

    .marriageBenefitContent p {

        font-size: 13px;

        line-height: 1.7;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .marriageBenefitsHeading h2 {

        font-size: 30px;

    }

    .marriageBenefitFeatured {

        min-height: 320px;

        padding: 22px;

    }

    .marriageBenefitFeaturedContent h3 {

        font-size: 25px;

    }

    .marriageBenefitContent h3 {

        font-size: 16px;

    }

    .marriageBenefitContent p {

        font-size: 12px;

    }

}

/* Benefits Section Ends Here */

/* CTA Section Starts Here */

/* =========================================================
   MARRIAGE PLANNING
   FINAL CTA - REDESIGNED
========================================================= */

.marriageFinalCta {

    position: relative;

    padding: 110px 0 120px;

    overflow: hidden;

    background: var(--section);

}

.marriageFinalCta .container {

    width: min(1120px, 92%);

    margin: auto;

}


/* =========================================================
   MAIN CTA BOX
========================================================= */

.marriageFinalCtaBox {

    position: relative;

    overflow: hidden;

    padding: 65px 70px 35px;

    text-align: center;

    border: 1px solid rgba(212,175,55,.15);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.018),
            rgba(212,175,55,.008)
        );

}


/* =========================================================
   SUBTLE BACKGROUND CIRCLE
========================================================= */

.marriageFinalCtaBox::before {

    content: "";

    position: absolute;

    width: 520px;

    height: 520px;

    top: -380px;

    left: 50%;

    transform: translateX(-50%);

    border-radius: 50%;

    border: 1px solid rgba(212,175,55,.045);

}

.marriageFinalCtaBox::after {

    content: "";

    position: absolute;

    width: 330px;

    height: 330px;

    top: -230px;

    left: 50%;

    transform: translateX(-50%);

    border-radius: 50%;

    border: 1px solid rgba(212,175,55,.035);

}


/* =========================================================
   ORNAMENT
========================================================= */

.marriageFinalCtaOrnament {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    margin-bottom: 25px;

}

.marriageFinalCtaOrnament span {

    width: 42px;

    height: 1px;

    background: rgba(212,175,55,.30);

}

.marriageFinalCtaOrnament i {

    color: #D4AF37;

    font-size: 17px;

    opacity: .70;

}


/* =========================================================
   CONTENT
========================================================= */

.marriageFinalCtaContent {

    position: relative;

    z-index: 3;

    max-width: 800px;

    margin: auto;

}

.marriageFinalCtaPrefix {

    display: block;

    margin-bottom: 15px;

    color: #D4AF37;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.7px;

    text-transform: uppercase;

}

.marriageFinalCtaContent h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.5vw, 58px);

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -1.5px;

}

.marriageFinalCtaContent h2 span {

    display: block;

    color: #D4AF37;

}

.marriageFinalCtaContent p {

    max-width: 720px;

    margin: 22px auto 0;

    color: var(--text);

    opacity: .60;

    font-size: 16px;

    line-height: 1.85;

}


/* =========================================================
   BUTTONS
========================================================= */

.marriageFinalCtaButtons {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    flex-wrap: wrap;

    margin-top: 32px;

}

.marriageFinalCtaPrimary,
.marriageFinalCtaSecondary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 52px;

    padding: 0 25px;

    border-radius: 7px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease;

}

.marriageFinalCtaPrimary {

    color: #111;

    background: #D4AF37;

    border: 1px solid #D4AF37;

}

.marriageFinalCtaPrimary:hover {

    transform: translateY(-3px);

    background: #dfbd43;

}

.marriageFinalCtaPrimary i {

    font-size: 11px;

}

.marriageFinalCtaSecondary {

    color: var(--primary);

    background: transparent;

    border: 1px solid rgba(212,175,55,.22);

}

.marriageFinalCtaSecondary:hover {

    transform: translateY(-3px);

    border-color: rgba(212,175,55,.45);

    background: rgba(212,175,55,.025);

}


/* =========================================================
   VISUAL
========================================================= */

.marriageFinalCtaVisual {

    position: relative;

    width: min(720px, 100%);

    height: 135px;

    margin: 40px auto 0;

}


/* =========================================================
   GROWTH LINE
========================================================= */

.marriageFinalCtaVisualLine {

    position: absolute;

    inset: 0;

    color: rgba(212,175,55,.35);

}

.marriageFinalCtaVisualLine svg {

    width: 100%;

    height: 100%;

    overflow: visible;

}


/* =========================================================
   MILESTONES
========================================================= */

.marriageFinalCtaMilestone {

    position: absolute;

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #D4AF37;

    box-shadow:
        0 0 0 5px rgba(212,175,55,.05);

}

.milestoneOne {

    left: 22%;

    bottom: 27%;

}

.milestoneTwo {

    left: 56%;

    bottom: 50%;

}

.milestoneThree {

    right: 1%;

    top: 6%;

}


/* =========================================================
   RING
========================================================= */

.marriageFinalCtaRing {

    position: absolute;

    left: 49%;

    top: 37px;

    width: 66px;

    height: 66px;

    display: flex;

    align-items: center;

    justify-content: center;

    transform: translateX(-50%);

    border-radius: 50%;

    background: var(--section);

    border: 1px solid rgba(212,175,55,.22);

}

.marriageFinalCtaRing i {

    color: #D4AF37;

    font-size: 22px;

    opacity: .70;

}


/* =========================================================
   CELEBRATION
========================================================= */

.marriageFinalCtaCelebration {

    position: absolute;

    right: 7%;

    top: 20px;

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    color: #D4AF37;

    background: rgba(212,175,55,.025);

    border: 1px solid rgba(212,175,55,.12);

}

.marriageFinalCtaCelebration i {

    font-size: 14px;

    opacity: .65;

}


/* =========================================================
   BOTTOM
========================================================= */

.marriageFinalCtaBottom {

    position: relative;

    z-index: 3;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

    padding-top: 22px;

    border-top: 1px solid rgba(212,175,55,.10);

}

.marriageFinalCtaBottom span {

    color: var(--text);

    opacity: .35;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.3px;

}

.marriageFinalCtaBottom i {

    color: #D4AF37;

    opacity: .40;

    font-size: 7px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .marriageFinalCta {

        padding: 90px 0 100px;

    }

    .marriageFinalCtaBox {

        padding: 55px 45px 30px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .marriageFinalCta {

        padding: 75px 0 85px;

    }

    .marriageFinalCta .container {

        width: calc(100% - 30px);

    }

    .marriageFinalCtaBox {

        padding: 40px 22px 25px;

        border-radius: 17px;

    }

    .marriageFinalCtaOrnament {

        margin-bottom: 20px;

    }

    .marriageFinalCtaContent h2 {

        font-size: 34px;

        letter-spacing: -1px;

    }

    .marriageFinalCtaContent p {

        font-size: 14px;

        line-height: 1.8;

    }

    .marriageFinalCtaButtons {

        flex-direction: column;

        align-items: stretch;

    }

    .marriageFinalCtaPrimary,
    .marriageFinalCtaSecondary {

        width: 100%;

    }

    .marriageFinalCtaVisual {

        height: 105px;

        margin-top: 30px;

    }

    .marriageFinalCtaRing {

        width: 55px;

        height: 55px;

        top: 30px;

    }

    .marriageFinalCtaRing i {

        font-size: 18px;

    }

    .marriageFinalCtaCelebration {

        width: 35px;

        height: 35px;

        right: 3%;

    }

    .marriageFinalCtaBottom {

        gap: 8px;

    }

    .marriageFinalCtaBottom span {

        font-size: 8px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .marriageFinalCtaContent h2 {

        font-size: 29px;

    }

    .marriageFinalCtaContent p {

        font-size: 13px;

    }

    .marriageFinalCtaBox {

        padding: 32px 18px 22px;

    }

    .marriageFinalCtaBottom {

        display: none;

    }

}

/* CTA Section Ends Here */

/* Marriage Planning Page Ends Here */


/* Retirement Planning Page Starts Here */

/* Hero Section Starts Here */

/* =========================================================
   RETIREMENT PLANNING HERO
   NEW RESPONSIVE VERSION
========================================================= */

.retirementHeroNew {

    position: relative;

    width: 100%;

    padding: 100px 0 110px;

    overflow: hidden;

    background: var(--section);

}


/* =========================================================
   CONTAINER
========================================================= */

.retirementHeroNew .container {

    width: min(1180px, 92%);

    margin: 0 auto;

}


/* =========================================================
   MAIN GRID
========================================================= */

.retirementHeroNewGrid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(420px, .95fr);

    align-items: center;

    gap: 70px;

}


/* =========================================================
   CONTENT
========================================================= */

.retirementHeroNewContent {

    min-width: 0;

    max-width: 680px;

}


/* =========================================================
   PREFIX
========================================================= */

.retirementHeroNewPrefix {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

    color: #D4AF37;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.retirementHeroNewPrefix span {

    display: block;

    width: 30px;

    height: 1px;

    flex-shrink: 0;

    background: #D4AF37;

}


/* =========================================================
   HEADING
========================================================= */

.retirementHeroNewContent h1 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(44px, 5vw, 66px);

    font-weight: 600;

    line-height: 1.06;

    letter-spacing: -1.8px;

}

.retirementHeroNewContent h1 strong {

    display: block;

    color: #D4AF37;

    font-weight: 600;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.retirementHeroNewContent > p {

    max-width: 625px;

    margin: 25px 0 0;

    color: var(--text);

    opacity: .62;

    font-size: 16px;

    line-height: 1.85;

}


/* =========================================================
   BUTTONS
========================================================= */

.retirementHeroNewButtons {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 32px;

}

.retirementHeroNewPrimary,
.retirementHeroNewSecondary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 52px;

    padding: 0 24px;

    border-radius: 7px;

    text-decoration: none;

    white-space: nowrap;

    font-size: 14px;

    font-weight: 600;

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease;

}

.retirementHeroNewPrimary {

    color: #111;

    background: #D4AF37;

    border: 1px solid #D4AF37;

}

.retirementHeroNewPrimary:hover {

    transform: translateY(-2px);

    background: #dfbd43;

}

.retirementHeroNewPrimary i {

    font-size: 11px;

}

.retirementHeroNewSecondary {

    color: var(--primary);

    background: transparent;

    border: 1px solid rgba(212,175,55,.22);

}

.retirementHeroNewSecondary:hover {

    transform: translateY(-2px);

    border-color: rgba(212,175,55,.45);

}


/* =========================================================
   SUPPORTING POINTS
========================================================= */

.retirementHeroNewPoints {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 24px;

    margin-top: 25px;

}

.retirementHeroNewPoints div {

    display: flex;

    align-items: center;

    gap: 8px;

}

.retirementHeroNewPoints i {

    color: #D4AF37;

    opacity: .65;

    font-size: 12px;

}

.retirementHeroNewPoints span {

    color: var(--text);

    opacity: .48;

    font-size: 12px;

    font-weight: 600;

}


/* =========================================================
   VISUAL AREA
========================================================= */

.retirementHeroNewVisual {

    position: relative;

    width: 100%;

    min-width: 0;

}


/* =========================================================
   VISUAL CARD
========================================================= */

.retirementHeroNewVisualCard {

    position: relative;

    width: 100%;

    aspect-ratio: 1 / .92;

    min-height: 460px;

    overflow: hidden;

    border: 1px solid rgba(212,175,55,.15);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.018),
            rgba(212,175,55,.006)
        );

}


/* =========================================================
   CIRCLES
========================================================= */

.retirementHeroNewCircle {

    position: absolute;

    border-radius: 50%;

    border: 1px solid rgba(212,175,55,.07);

    pointer-events: none;

}

.circleOne {

    width: 390px;

    height: 390px;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}

.circleTwo {

    width: 280px;

    height: 280px;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    border-color: rgba(212,175,55,.045);

}


/* =========================================================
   VISUAL LABEL
========================================================= */

.retirementHeroNewVisualLabel {

    position: absolute;

    top: 28px;

    left: 30px;

    z-index: 3;

}

.retirementHeroNewVisualLabel span {

    display: block;

    margin-bottom: 4px;

    color: var(--text);

    opacity: .35;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

}

.retirementHeroNewVisualLabel strong {

    display: block;

    color: #D4AF37;

    opacity: .78;

    font-size: 14px;

    font-weight: 600;

    letter-spacing: .5px;

}


/* =========================================================
   CENTER ICON
========================================================= */

.retirementHeroNewCenter {

    position: absolute;

    z-index: 4;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -55%);

    display: flex;

    flex-direction: column;

    align-items: center;

}

.retirementHeroNewCenterIcon {

    width: 125px;

    height: 125px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #D4AF37;

    background: rgba(212,175,55,.025);

    border: 1px solid rgba(212,175,55,.18);

}

.retirementHeroNewCenterIcon i {

    font-size: 46px;

    opacity: .68;

}

.retirementHeroNewCenter > span {

    margin-top: 13px;

    color: var(--text);

    opacity: .42;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.7px;

}


/* =========================================================
   GRAPH
========================================================= */

.retirementHeroNewGraph {

    position: absolute;

    z-index: 2;

    left: 6%;

    right: 6%;

    bottom: 40px;

    height: 180px;

    color: rgba(212,175,55,.32);

    pointer-events: none;

}

.retirementHeroNewGraph svg {

    width: 100%;

    height: 100%;

}

.retirementHeroNewGraphArea {

    fill: rgba(212,175,55,.045);

}

.retirementHeroNewGraphLine {

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;

}


/* =========================================================
   INCOME CARD
========================================================= */

.retirementHeroNewIncome {

    position: absolute;

    z-index: 6;

    left: 24px;

    bottom: 90px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px 14px;

    border-radius: 10px;

    background: rgba(20,20,20,.18);

    border: 1px solid rgba(212,175,55,.13);

    backdrop-filter: blur(8px);

}

.retirementHeroNewSmallIcon {

    width: 35px;

    height: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 8px;

    color: #D4AF37;

    background: rgba(212,175,55,.045);

}

.retirementHeroNewSmallIcon i {

    font-size: 13px;

}

.retirementHeroNewIncome span {

    display: block;

    margin-bottom: 3px;

    color: var(--text);

    opacity: .35;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;

}

.retirementHeroNewIncome strong {

    color: var(--primary);

    font-size: 13px;

    font-weight: 600;

}


/* =========================================================
   GROWTH BADGE
========================================================= */

.retirementHeroNewGrowth {

    position: absolute;

    z-index: 6;

    right: 25px;

    top: 105px;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 9px 12px;

    border-radius: 8px;

    color: #D4AF37;

    background: rgba(212,175,55,.025);

    border: 1px solid rgba(212,175,55,.12);

}

.retirementHeroNewGrowth i {

    font-size: 11px;

}

.retirementHeroNewGrowth span {

    color: var(--text);

    opacity: .45;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;

}


/* =========================================================
   BEACH / RETIREMENT SYMBOL
========================================================= */

.retirementHeroNewBeach {

    position: absolute;

    z-index: 6;

    right: 30px;

    bottom: 38px;

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    color: #D4AF37;

    background: rgba(212,175,55,.025);

    border: 1px solid rgba(212,175,55,.12);

}

.retirementHeroNewBeach i {

    font-size: 15px;

    opacity: .65;

}


/* =========================================================
   LARGE LAPTOP
========================================================= */

@media (max-width: 1100px) {

    .retirementHeroNewGrid {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(380px, .9fr);

        gap: 45px;

    }

    .retirementHeroNewContent h1 {

        font-size: 54px;

    }

    .retirementHeroNewVisualCard {

        min-height: 420px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .retirementHeroNew {

        padding: 85px 0 90px;

    }

    .retirementHeroNewGrid {

        grid-template-columns: 1fr;

        gap: 55px;

    }

    .retirementHeroNewContent {

        max-width: 760px;

    }

    .retirementHeroNewContent h1 {

        font-size: clamp(44px, 7vw, 58px);

    }

    .retirementHeroNewVisual {

        width: min(650px, 100%);

        margin: 0 auto;

    }

    .retirementHeroNewVisualCard {

        min-height: 450px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .retirementHeroNew {

        padding: 65px 0 70px;

    }

    .retirementHeroNew .container {

        width: calc(100% - 30px);

    }

    .retirementHeroNewGrid {

        gap: 40px;

    }

    .retirementHeroNewPrefix {

        margin-bottom: 15px;

        font-size: 11px;

    }

    .retirementHeroNewContent h1 {

        font-size: 38px;

        line-height: 1.08;

        letter-spacing: -1px;

    }

    .retirementHeroNewContent > p {

        margin-top: 19px;

        font-size: 14px;

        line-height: 1.8;

    }


    /* Buttons */

    .retirementHeroNewButtons {

        display: grid;

        grid-template-columns: 1fr;

        gap: 10px;

        margin-top: 27px;

    }

    .retirementHeroNewPrimary,
    .retirementHeroNewSecondary {

        width: 100%;

        min-height: 51px;

    }


    /* Points */

    .retirementHeroNewPoints {

        gap: 13px;

        margin-top: 21px;

    }

    .retirementHeroNewPoints div {

        gap: 7px;

    }

    .retirementHeroNewPoints span {

        font-size: 11px;

    }


    /* Visual */

    .retirementHeroNewVisual {

        width: 100%;

    }

    .retirementHeroNewVisualCard {

        aspect-ratio: auto;

        height: 360px;

        min-height: 0;

        border-radius: 18px;

    }


    .retirementHeroNewCircle.circleOne {

        width: 310px;

        height: 310px;

    }

    .retirementHeroNewCircle.circleTwo {

        width: 220px;

        height: 220px;

    }


    .retirementHeroNewVisualLabel {

        top: 22px;

        left: 20px;

    }

    .retirementHeroNewVisualLabel span {

        font-size: 9px;

    }

    .retirementHeroNewVisualLabel strong {

        font-size: 12px;

    }


    /* Center */

    .retirementHeroNewCenter {

        top: 50%;

    }

    .retirementHeroNewCenterIcon {

        width: 95px;

        height: 95px;

    }

    .retirementHeroNewCenterIcon i {

        font-size: 35px;

    }


    /* Graph */

    .retirementHeroNewGraph {

        left: 5%;

        right: 5%;

        bottom: 30px;

        height: 135px;

    }


    /* Income */

    .retirementHeroNewIncome {

        left: 15px;

        bottom: 65px;

        padding: 9px 11px;

    }

    .retirementHeroNewSmallIcon {

        width: 31px;

        height: 31px;

    }

    .retirementHeroNewIncome span {

        font-size: 8px;

    }

    .retirementHeroNewIncome strong {

        font-size: 11px;

    }


    /* Growth */

    .retirementHeroNewGrowth {

        top: 80px;

        right: 15px;

        padding: 8px 10px;

    }

    .retirementHeroNewGrowth span {

        font-size: 8px;

    }


    /* Beach */

    .retirementHeroNewBeach {

        right: 16px;

        bottom: 25px;

        width: 37px;

        height: 37px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .retirementHeroNewContent h1 {

        font-size: 33px;

    }

    .retirementHeroNewContent > p {

        font-size: 13px;

    }

    .retirementHeroNewPoints {

        flex-direction: column;

        align-items: flex-start;

    }

    .retirementHeroNewVisualCard {

        height: 320px;

    }

    .retirementHeroNewCircle.circleOne {

        width: 270px;

        height: 270px;

    }

    .retirementHeroNewCircle.circleTwo {

        width: 195px;

        height: 195px;

    }

    .retirementHeroNewCenterIcon {

        width: 82px;

        height: 82px;

    }

    .retirementHeroNewCenterIcon i {

        font-size: 30px;

    }

    .retirementHeroNewCenter > span {

        font-size: 8px;

    }

    .retirementHeroNewIncome {

        left: 10px;

        bottom: 50px;

    }

    .retirementHeroNewGrowth {

        right: 10px;

        top: 68px;

    }

    .retirementHeroNewBeach {

        right: 12px;

        bottom: 18px;

    }

}

/* Hero Section Ends Here */

/* Intro Section Starts Here */

/* =========================================================
   RETIREMENT PLANNING
   INTRODUCTION
========================================================= */

.retirementIntro {

    position: relative;

    padding: 110px 0;

    overflow: hidden;

    background: var(--section);

}

.retirementIntro .container {

    width: min(1120px, 92%);

    margin: auto;

}


/* =========================================================
   MAIN GRID
========================================================= */

.retirementIntroGrid {

    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 90px;

    align-items: start;

}


/* =========================================================
   LEFT HEADING
========================================================= */

.retirementIntroHeading {

    position: relative;

    padding-right: 20px;

}

.retirementIntroPrefix {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 18px;

    color: #D4AF37;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.retirementIntroPrefix::before {

    content: "";

    width: 27px;

    height: 1px;

    background: #D4AF37;

}

.retirementIntroHeading h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(38px, 4.2vw, 55px);

    font-weight: 600;

    line-height: 1.1;

    letter-spacing: -1.3px;

}

.retirementIntroHeading h2 span {

    display: block;

    color: #D4AF37;

}

.retirementIntroLine {

    width: 55px;

    height: 1px;

    margin-top: 30px;

    background: rgba(212,175,55,.40);

}


/* =========================================================
   RIGHT CONTENT
========================================================= */

.retirementIntroContent {

    padding-top: 7px;

}

.retirementIntroContent p {

    margin: 0 0 22px;

    color: var(--text);

    opacity: .62;

    font-size: 16px;

    line-height: 1.85;

}

.retirementIntroContent p:last-child {

    margin-bottom: 0;

}


/* =========================================================
   HIGHLIGHTS
========================================================= */

.retirementIntroHighlights {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    margin-top: 75px;

    border-top: 1px solid rgba(212,175,55,.13);

    border-bottom: 1px solid rgba(212,175,55,.13);

}


/* =========================================================
   HIGHLIGHT
========================================================= */

.retirementIntroHighlight {

    display: flex;

    align-items: center;

    gap: 18px;

    min-height: 105px;

    padding: 20px 25px;

    border-right: 1px solid rgba(212,175,55,.13);

}

.retirementIntroHighlight:last-child {

    border-right: none;

}


/* =========================================================
   ICON
========================================================= */

.retirementIntroHighlightIcon {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 11px;

    color: #D4AF37;

    background: rgba(212,175,55,.035);

    border: 1px solid rgba(212,175,55,.13);

}

.retirementIntroHighlightIcon i {

    font-size: 16px;

}


/* =========================================================
   TEXT
========================================================= */

.retirementIntroHighlight span {

    display: block;

    margin-bottom: 4px;

    color: #D4AF37;

    opacity: .45;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;

}

.retirementIntroHighlight h3 {

    margin: 0;

    color: var(--primary);

    font-size: 16px;

    font-weight: 600;

    line-height: 1.4;

}


/* =========================================================
   HOVER
========================================================= */

.retirementIntroHighlight {

    transition: background .3s ease;

}

.retirementIntroHighlight:hover {

    background: rgba(212,175,55,.012);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .retirementIntro {

        padding: 90px 0;

    }

    .retirementIntroGrid {

        grid-template-columns: 1fr;

        gap: 40px;

    }

    .retirementIntroHeading {

        padding-right: 0;

        max-width: 750px;

    }

    .retirementIntroHeading h2 {

        font-size: 48px;

    }

    .retirementIntroHighlights {

        margin-top: 55px;

    }

    .retirementIntroHighlight {

        padding: 18px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .retirementIntro {

        padding: 75px 0;

    }

    .retirementIntro .container {

        width: calc(100% - 30px);

    }

    .retirementIntroGrid {

        gap: 32px;

    }

    .retirementIntroPrefix {

        font-size: 11px;

    }

    .retirementIntroHeading h2 {

        font-size: 35px;

        letter-spacing: -1px;

    }

    .retirementIntroContent {

        padding-top: 0;

    }

    .retirementIntroContent p {

        font-size: 14px;

        line-height: 1.8;

        margin-bottom: 18px;

    }


    /* Highlights become vertical */

    .retirementIntroHighlights {

        display: block;

        margin-top: 45px;

    }

    .retirementIntroHighlight {

        min-height: 90px;

        padding: 18px 5px;

        border-right: none;

        border-bottom: 1px solid rgba(212,175,55,.13);

    }

    .retirementIntroHighlight:last-child {

        border-bottom: none;

    }

    .retirementIntroHighlightIcon {

        width: 44px;

        height: 44px;

    }

    .retirementIntroHighlight h3 {

        font-size: 16px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .retirementIntroHeading h2 {

        font-size: 30px;

    }

    .retirementIntroContent p {

        font-size: 13px;

    }

    .retirementIntroHighlight h3 {

        font-size: 15px;

    }

}

/* Intro Section Ends Here */

/* Matters Section Starts Here */

/* =========================================================
   RETIREMENT PLANNING
   WHY RETIREMENT PLANNING MATTERS
========================================================= */

.retirementWhy {

    position: relative;

    padding: 115px 0;

    overflow: hidden;

    background: var(--section);

}

.retirementWhy .container {

    width: min(1150px, 92%);

    margin: 0 auto;

}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.retirementWhyLayout {

    display: grid;

    grid-template-columns: .82fr 1.18fr;

    gap: 80px;

    align-items: start;

}


/* =========================================================
   LEFT EDITORIAL AREA
========================================================= */

.retirementWhyIntro {

    position: sticky;

    top: 100px;

    max-width: 470px;

}

.retirementWhyPrefix {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 19px;

    color: #D4AF37;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.retirementWhyPrefix::before {

    content: "";

    width: 30px;

    height: 2px;

    flex-shrink: 0;

    background: #D4AF37;

}

.retirementWhyIntro h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.2vw, 56px);

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -1.4px;

}

.retirementWhyIntro h2 span {

    display: block;

    color: #D4AF37;

}

.retirementWhyIntro > p {

    margin: 27px 0 0;

    color: var(--text);

    opacity: .58;

    font-size: 15px;

    line-height: 1.85;

}


/* =========================================================
   ACCENT
========================================================= */

.retirementWhyAccent {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 35px;

}

.retirementWhyAccent span {

    width: 42px;

    height: 2px;

    background: #D4AF37;

}

.retirementWhyAccent strong {

    color: var(--text);

    opacity: .34;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

}


/* =========================================================
   BENEFITS GRID
========================================================= */

.retirementWhyBenefits {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    border-top: 2px solid rgba(212,175,55,.16);

    border-left: 2px solid rgba(212,175,55,.16);

}


/* =========================================================
   BENEFIT ITEM
========================================================= */

.retirementWhyItem {

    position: relative;

    min-width: 0;

    min-height: 230px;

    display: flex;

    flex-direction: column;

    padding: 25px 25px 27px;

    border-right: 2px solid rgba(212,175,55,.16);

    border-bottom: 2px solid rgba(212,175,55,.16);

    transition:

        background .3s ease,

        transform .3s ease;

}

.retirementWhyItem:hover {

    background: rgba(212,175,55,.018);

    transform: translateY(-3px);

}


/* =========================================================
   NUMBER
========================================================= */

.retirementWhyNumber {

    position: absolute;

    top: 20px;

    right: 23px;

    color: #D4AF37;

    opacity: .32;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.2px;

}


/* =========================================================
   ICON
========================================================= */

.retirementWhyIcon {

    width: 47px;

    height: 47px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 22px;

    border-radius: 11px;

    color: #D4AF37;

    background: rgba(212,175,55,.045);

    border: 2px solid rgba(212,175,55,.13);

}

.retirementWhyIcon i {

    font-size: 15px;

}


/* =========================================================
   CONTENT
========================================================= */

.retirementWhyContent {

    margin-top: auto;

}

.retirementWhyContent h3 {

    max-width: 280px;

    margin: 0 0 9px;

    color: var(--primary);

    font-size: 18px;

    font-weight: 600;

    line-height: 1.35;

}

.retirementWhyContent p {

    margin: 0;

    color: var(--text);

    opacity: .55;

    font-size: 14px;

    line-height: 1.7;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .retirementWhy {

        padding: 95px 0;

    }

    .retirementWhyLayout {

        grid-template-columns: .75fr 1.25fr;

        gap: 50px;

    }

    .retirementWhyIntro h2 {

        font-size: 44px;

    }

    .retirementWhyItem {

        min-height: 220px;

        padding: 22px;

    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 850px) {

    .retirementWhyLayout {

        grid-template-columns: 1fr;

        gap: 50px;

    }

    .retirementWhyIntro {

        position: static;

        max-width: 720px;

    }

    .retirementWhyIntro h2 {

        font-size: 48px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .retirementWhy {

        padding: 75px 0;

    }

    .retirementWhy .container {

        width: calc(100% - 30px);

    }

    .retirementWhyLayout {

        gap: 38px;

    }

    .retirementWhyPrefix {

        font-size: 11px;

    }

    .retirementWhyIntro h2 {

        font-size: 36px;

        letter-spacing: -1px;

    }

    .retirementWhyIntro > p {

        margin-top: 20px;

        font-size: 14px;

        line-height: 1.8;

    }

    .retirementWhyAccent {

        margin-top: 27px;

    }


    /* Single column */

    .retirementWhyBenefits {

        grid-template-columns: 1fr;

        border-left: 2px solid rgba(212,175,55,.16);

    }

    .retirementWhyItem {

        min-height: auto;

        padding: 24px 20px 26px;

    }

    .retirementWhyIcon {

        margin-bottom: 18px;

    }

    .retirementWhyContent h3 {

        font-size: 18px;

    }

    .retirementWhyContent p {

        font-size: 14px;

        line-height: 1.75;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .retirementWhyIntro h2 {

        font-size: 31px;

    }

    .retirementWhyContent h3 {

        font-size: 17px;

    }

    .retirementWhyContent p {

        font-size: 13px;

    }

}

/* Matters Section Ends Here */

/* Approach Section Starts Here */

/* =========================================================
   RETIREMENT PLANNING
   PREMIUM ROADMAP
========================================================= */

.retirementRoadmap {

    position: relative;

    padding: 115px 0;

    overflow: hidden;

    background: var(--section);

}

.retirementRoadmap .container {

    width: min(1120px, 92%);

    margin: auto;

}


/* =========================================================
   HEADING
========================================================= */

.retirementRoadmapHeading {

    max-width: 700px;

    margin-bottom: 55px;

}

.retirementRoadmapPrefix {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 17px;

    color: #D4AF37;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.retirementRoadmapPrefix::before {

    content: "";

    width: 30px;

    height: 2px;

    background: #D4AF37;

}

.retirementRoadmapHeading h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.5vw, 58px);

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -1.5px;

}

.retirementRoadmapHeading h2 span {

    display: block;

    color: #D4AF37;

}


/* =========================================================
   ROADMAP BOX
========================================================= */

.retirementRoadmapBox {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    overflow: hidden;

    border: 2px solid rgba(212,175,55,.14);

    border-radius: 22px;

    background: rgba(255,255,255,.008);

}


/* =========================================================
   STEP
========================================================= */

.retirementRoadmapStep {

    position: relative;

    display: grid;

    grid-template-columns: 75px 1fr;

    gap: 20px;

    min-height: 220px;

    padding: 34px 35px;

    border-right: 2px solid rgba(212,175,55,.12);

    border-bottom: 2px solid rgba(212,175,55,.12);

    transition:

        background .3s ease,

        transform .3s ease;

}


/* Remove right border from even steps */

.retirementRoadmapStep:nth-child(even) {

    border-right: none;

}


/* Remove bottom borders from last row */

.retirementRoadmapStep:nth-child(5),
.retirementRoadmapStep:nth-child(6) {

    border-bottom: none;

}


.retirementRoadmapStep:hover {

    background: rgba(212,175,55,.018);

}


/* =========================================================
   STEP TOP
========================================================= */

.retirementRoadmapStepTop {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 13px;

}


/* =========================================================
   NUMBER
========================================================= */

.retirementRoadmapNumber {

    color: #D4AF37;

    opacity: .45;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;

}


/* =========================================================
   ICON
========================================================= */

.retirementRoadmapIcon {

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    color: #D4AF37;

    background: rgba(212,175,55,.045);

    border: 2px solid rgba(212,175,55,.14);

    transition:

        background .3s ease,

        border-color .3s ease;

}

.retirementRoadmapStep:hover .retirementRoadmapIcon {

    background: rgba(212,175,55,.08);

    border-color: rgba(212,175,55,.32);

}

.retirementRoadmapIcon i {

    font-size: 15px;

}


/* =========================================================
   CONTENT
========================================================= */

.retirementRoadmapStepContent {

    align-self: center;

}

.retirementRoadmapStepContent h3 {

    margin: 0 0 10px;

    color: var(--primary);

    font-size: 23px;

    font-weight: 600;

    line-height: 1.25;

}

.retirementRoadmapStepContent p {

    max-width: 430px;

    margin: 0;

    color: var(--text);

    opacity: .56;

    font-size: 14px;

    line-height: 1.8;

}


/* =========================================================
   DIRECTION
========================================================= */

.retirementRoadmapDirection {

    display: flex;

    align-items: center;

    gap: 16px;

    max-width: 500px;

    margin: 32px auto 0;

}

.retirementRoadmapDirection > span {

    flex-shrink: 0;

    color: var(--text);

    opacity: .38;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.4px;

}

.retirementRoadmapDirection > span:last-child {

    color: #D4AF37;

    opacity: .72;

}

.retirementRoadmapDirectionLine {

    flex: 1;

    height: 2px;

    background: rgba(212,175,55,.14);

}

.retirementRoadmapDirectionLine span {

    display: block;

    width: 42%;

    height: 100%;

    background: rgba(212,175,55,.45);

}

.retirementRoadmapDirection i {

    color: #D4AF37;

    opacity: .60;

    font-size: 11px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 850px) {

    .retirementRoadmap {

        padding: 90px 0;

    }

    .retirementRoadmapBox {

        grid-template-columns: 1fr;

    }

    .retirementRoadmapStep,
    .retirementRoadmapStep:nth-child(even) {

        grid-template-columns: 65px 1fr;

        min-height: 185px;

        border-right: none;

        border-bottom: 2px solid rgba(212,175,55,.12);

    }

    .retirementRoadmapStep:nth-child(5) {

        border-bottom: 2px solid rgba(212,175,55,.12);

    }

    .retirementRoadmapStep:last-child {

        border-bottom: none;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .retirementRoadmap {

        padding: 75px 0;

    }

    .retirementRoadmap .container {

        width: calc(100% - 30px);

    }

    .retirementRoadmapHeading {

        margin-bottom: 38px;

    }

    .retirementRoadmapPrefix {

        font-size: 11px;

    }

    .retirementRoadmapHeading h2 {

        font-size: 35px;

        letter-spacing: -1px;

    }

    .retirementRoadmapBox {

        border-radius: 17px;

    }

    .retirementRoadmapStep,
    .retirementRoadmapStep:nth-child(even) {

        grid-template-columns: 52px 1fr;

        gap: 17px;

        min-height: auto;

        padding: 25px 20px;

    }

    .retirementRoadmapStepTop {

        gap: 10px;

    }

    .retirementRoadmapIcon {

        width: 45px;

        height: 45px;

        border-radius: 11px;

    }

    .retirementRoadmapIcon i {

        font-size: 13px;

    }

    .retirementRoadmapNumber {

        font-size: 10px;

    }

    .retirementRoadmapStepContent h3 {

        font-size: 19px;

        margin-bottom: 7px;

    }

    .retirementRoadmapStepContent p {

        font-size: 13px;

        line-height: 1.75;

    }

    .retirementRoadmapDirection {

        margin-top: 25px;

        gap: 10px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .retirementRoadmapHeading h2 {

        font-size: 30px;

    }

    .retirementRoadmapStep,
    .retirementRoadmapStep:nth-child(even) {

        grid-template-columns: 45px 1fr;

        gap: 14px;

        padding: 22px 16px;

    }

    .retirementRoadmapIcon {

        width: 42px;

        height: 42px;

    }

    .retirementRoadmapStepContent h3 {

        font-size: 18px;

    }

    .retirementRoadmapStepContent p {

        font-size: 12.5px;

    }

    .retirementRoadmapDirection > span {

        font-size: 8px;

    }

}

/* Approach Section Ends Here */

/* Strategies Section Starts Here */

/* =========================================================
   RETIREMENT PLANNING
   STRATEGIES
========================================================= */

.retirementStrategies {

    position: relative;

    padding: 115px 0;

    overflow: hidden;

    background: var(--section);

}

.retirementStrategies .container {

    width: min(1120px, 92%);

    margin: auto;

}


/* =========================================================
   HEADING
========================================================= */

.retirementStrategiesHeading {

    max-width: 760px;

    margin-bottom: 65px;

}

.retirementStrategiesPrefix {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 18px;

    color: #D4AF37;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.retirementStrategiesPrefix::before {

    content: "";

    width: 30px;

    height: 2px;

    background: #D4AF37;

}

.retirementStrategiesHeading h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.5vw, 58px);

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -1.5px;

}

.retirementStrategiesHeading h2 span {

    display: block;

    color: #D4AF37;

}


/* =========================================================
   STRATEGY LIST
========================================================= */

.retirementStrategiesList {

    position: relative;

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;

}


/* =========================================================
   STRATEGY
========================================================= */

.retirementStrategy {

    position: relative;

    min-height: 245px;

    display: grid;

    grid-template-columns: 48px 58px 1fr 25px;

    gap: 18px;

    align-items: start;

    padding: 30px;

    overflow: hidden;

    border: 2px solid rgba(212,175,55,.12);

    border-radius: 18px;

    background: rgba(255,255,255,.008);

    transition:

        transform .3s ease,

        background .3s ease,

        border-color .3s ease;

}

.retirementStrategy::before {

    content: "";

    position: absolute;

    width: 170px;

    height: 170px;

    right: -100px;

    bottom: -100px;

    border-radius: 50%;

    border: 2px solid rgba(212,175,55,.035);

}

.retirementStrategy:hover {

    transform: translateY(-5px);

    background: rgba(212,175,55,.012);

    border-color: rgba(212,175,55,.23);

}


/* =========================================================
   NUMBER
========================================================= */

.retirementStrategyNumber {

    padding-top: 4px;

    color: #D4AF37;

    opacity: .42;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.4px;

}


/* =========================================================
   ICON
========================================================= */

.retirementStrategyIcon {

    width: 54px;

    height: 54px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    color: #D4AF37;

    background: rgba(212,175,55,.045);

    border: 2px solid rgba(212,175,55,.13);

    transition:

        background .3s ease,

        border-color .3s ease;

}

.retirementStrategy:hover .retirementStrategyIcon {

    background: rgba(212,175,55,.08);

    border-color: rgba(212,175,55,.30);

}

.retirementStrategyIcon i {

    font-size: 16px;

}


/* =========================================================
   CONTENT
========================================================= */

.retirementStrategyContent {

    align-self: center;

}

.retirementStrategyContent > span {

    display: block;

    margin-bottom: 7px;

    color: #D4AF37;

    opacity: .40;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.4px;

}

.retirementStrategyContent h3 {

    margin: 0 0 9px;

    color: var(--primary);

    font-size: 21px;

    font-weight: 600;

    line-height: 1.3;

}

.retirementStrategyContent p {

    max-width: 390px;

    margin: 0;

    color: var(--text);

    opacity: .56;

    font-size: 14px;

    line-height: 1.75;

}


/* =========================================================
   ARROW
========================================================= */

.retirementStrategyArrow {

    position: relative;

    z-index: 2;

    width: 25px;

    height: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #D4AF37;

    opacity: .40;

    border: 2px solid rgba(212,175,55,.12);

    border-radius: 50%;

    transition:

        opacity .3s ease,

        transform .3s ease;

}

.retirementStrategy:hover .retirementStrategyArrow {

    opacity: .80;

    transform: translate(2px, -2px);

}

.retirementStrategyArrow i {

    font-size: 8px;

}


/* =========================================================
   BOTTOM
========================================================= */

.retirementStrategiesBottom {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 55px;

}

.retirementStrategiesBottom > span {

    flex: 1;

    height: 2px;

    background: rgba(212,175,55,.12);

}

.retirementStrategiesBottom p {

    margin: 0;

    color: var(--text);

    opacity: .35;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    white-space: nowrap;

}

.retirementStrategiesBottom strong {

    padding: 0 8px;

    color: #D4AF37;

    opacity: .75;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .retirementStrategies {

        padding: 95px 0;

    }

    .retirementStrategiesList {

        grid-template-columns: 1fr;

    }

    .retirementStrategy {

        min-height: 205px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .retirementStrategies {

        padding: 75px 0;

    }

    .retirementStrategies .container {

        width: calc(100% - 30px);

    }

    .retirementStrategiesHeading {

        margin-bottom: 40px;

    }

    .retirementStrategiesPrefix {

        font-size: 11px;

    }

    .retirementStrategiesHeading h2 {

        font-size: 35px;

        letter-spacing: -1px;

    }


    /* Strategy */

    .retirementStrategy {

        grid-template-columns: 40px 48px 1fr;

        gap: 13px;

        min-height: auto;

        padding: 23px 18px;

        border-radius: 15px;

    }

    .retirementStrategyNumber {

        font-size: 9px;

    }

    .retirementStrategyIcon {

        width: 46px;

        height: 46px;

        border-radius: 11px;

    }

    .retirementStrategyIcon i {

        font-size: 13px;

    }

    .retirementStrategyContent > span {

        font-size: 8px;

    }

    .retirementStrategyContent h3 {

        font-size: 18px;

    }

    .retirementStrategyContent p {

        font-size: 13px;

        line-height: 1.7;

    }


    /* Arrow */

    .retirementStrategyArrow {

        position: absolute;

        right: 16px;

        top: 18px;

    }


    /* Bottom */

    .retirementStrategiesBottom {

        margin-top: 35px;

        gap: 10px;

    }

    .retirementStrategiesBottom p {

        font-size: 8px;

        letter-spacing: 1px;

    }

    .retirementStrategiesBottom strong {

        padding: 0 3px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .retirementStrategiesHeading h2 {

        font-size: 30px;

    }

    .retirementStrategy {

        grid-template-columns: 35px 43px 1fr;

        gap: 10px;

        padding: 20px 15px;

    }

    .retirementStrategyIcon {

        width: 42px;

        height: 42px;

    }

    .retirementStrategyContent h3 {

        font-size: 17px;

    }

    .retirementStrategyContent p {

        font-size: 12.5px;

    }

    .retirementStrategiesBottom {

        display: none;

    }

}

/* Strategies Section Ends Here */

/* Journey Section Starts Here */

/* =========================================================
   RETIREMENT LIFE JOURNEY
   PREMIUM REDESIGN
========================================================= */

.retirementLifeJourney {

    position: relative;

    padding: 120px 0;

    overflow: hidden;

    background: var(--section);

}

.retirementLifeJourney .container {

    width: min(1120px, 92%);

    margin: auto;

}


/* =========================================================
   HEADING
========================================================= */

.retirementLifeJourneyHead {

    max-width: 760px;

    margin-bottom: 85px;

}

.retirementLifeJourneyEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 18px;

    color: #D4AF37;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.retirementLifeJourneyEyebrow span {

    width: 30px;

    height: 2px;

    background: #D4AF37;

}

.retirementLifeJourneyHead h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.5vw, 58px);

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -1.5px;

}

.retirementLifeJourneyHead h2 strong {

    display: block;

    color: #D4AF37;

    font-weight: 600;

}

.retirementLifeJourneyHead p {

    max-width: 590px;

    margin: 22px 0 0;

    color: var(--text);

    opacity: .52;

    font-size: 15px;

    line-height: 1.8;

}


/* =========================================================
   JOURNEY MAP
========================================================= */

.retirementLifeJourneyMap {

    position: relative;

    display: flex;

    flex-direction: column;

    gap: 35px;

}


/* =========================================================
   CENTRAL PATH
========================================================= */

.retirementLifeJourneyPath {

    position: absolute;

    z-index: 1;

    top: 35px;

    bottom: 35px;

    left: 50%;

    width: 2px;

    transform: translateX(-50%);

    background: rgba(212,175,55,.12);

}

.retirementPathProgress {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 65%;

    background:

        linear-gradient(
            to bottom,
            rgba(212,175,55,.55),
            rgba(212,175,55,.12)
        );

}


/* =========================================================
   STAGE
========================================================= */

.retirementLifeStage {

    position: relative;

    z-index: 3;

    width: calc(50% - 55px);

    display: flex;

    align-items: flex-start;

    gap: 22px;

}

.stageLeft {

    align-self: flex-start;

    text-align: right;

    flex-direction: row-reverse;

}

.stageRight {

    align-self: flex-end;

}


/* =========================================================
   NUMBER
========================================================= */

.retirementLifeStageNumber {

    flex-shrink: 0;

    padding-top: 9px;

    color: #D4AF37;

    opacity: .38;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;

}


/* =========================================================
   BODY
========================================================= */

.retirementLifeStageBody {

    position: relative;

    flex: 1;

    padding: 25px 27px 28px;

    border: 2px solid rgba(212,175,55,.12);

    border-radius: 17px;

    background: var(--section);

    transition:

        transform .3s ease,

        border-color .3s ease,

        background .3s ease;

}

.retirementLifeStageBody::after {

    content: "";

    position: absolute;

    top: 25px;

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: #D4AF37;

    box-shadow:

        0 0 0 7px var(--section),

        0 0 0 9px rgba(212,175,55,.18);

}

.stageLeft .retirementLifeStageBody::after {

    right: -64px;

}

.stageRight .retirementLifeStageBody::after {

    left: -64px;

}

.retirementLifeStageBody:hover {

    transform: translateY(-4px);

    border-color: rgba(212,175,55,.28);

    background: rgba(212,175,55,.012);

}


/* =========================================================
   ICON
========================================================= */

.retirementLifeStageIcon {

    width: 47px;

    height: 47px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 18px;

    border-radius: 11px;

    color: #D4AF37;

    background: rgba(212,175,55,.045);

    border: 2px solid rgba(212,175,55,.13);

}

.stageLeft .retirementLifeStageIcon {

    margin-left: auto;

}

.retirementLifeStageIcon i {

    font-size: 15px;

}


/* =========================================================
   LABEL
========================================================= */

.retirementLifeStageLabel {

    display: block;

    margin-bottom: 7px;

    color: #D4AF37;

    opacity: .42;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.4px;

}


/* =========================================================
   TITLE
========================================================= */

.retirementLifeStageBody h3 {

    margin: 0 0 10px;

    color: var(--primary);

    font-size: 21px;

    font-weight: 600;

    line-height: 1.3;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.retirementLifeStageBody p {

    margin: 0;

    color: var(--text);

    opacity: .55;

    font-size: 14px;

    line-height: 1.75;

}


/* =========================================================
   BOTTOM
========================================================= */

.retirementLifeJourneyBottom {

    margin-top: 75px;

    padding-top: 27px;

    border-top: 2px solid rgba(212,175,55,.12);

}

.retirementJourneyBottomTitle {

    margin-bottom: 15px;

    color: var(--text);

    opacity: .30;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.6px;

    text-transform: uppercase;

    text-align: center;

}

.retirementJourneySequence {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 13px;

}

.retirementJourneySequence span,
.retirementJourneySequence strong {

    color: var(--text);

    opacity: .38;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.2px;

}

.retirementJourneySequence strong {

    color: #D4AF37;

    opacity: .72;

}

.retirementJourneySequence i {

    color: #D4AF37;

    opacity: .45;

    font-size: 8px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .retirementLifeJourney {

        padding: 95px 0;

    }

    .retirementLifeJourneyHead {

        margin-bottom: 60px;

    }

    .retirementLifeJourneyMap {

        gap: 25px;

    }

    .retirementLifeStage {

        width: calc(50% - 40px);

    }

    .retirementLifeStageBody {

        padding: 22px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .retirementLifeJourney {

        padding: 75px 0;

    }

    .retirementLifeJourney .container {

        width: calc(100% - 30px);

    }

    .retirementLifeJourneyHead {

        margin-bottom: 45px;

    }

    .retirementLifeJourneyEyebrow {

        font-size: 11px;

    }

    .retirementLifeJourneyHead h2 {

        font-size: 35px;

        letter-spacing: -1px;

    }

    .retirementLifeJourneyHead p {

        font-size: 14px;

        line-height: 1.8;

    }


    /* Vertical journey */

    .retirementLifeJourneyMap {

        gap: 25px;

        padding-left: 7px;

    }

    .retirementLifeJourneyPath {

        top: 25px;

        bottom: 25px;

        left: 27px;

        transform: none;

    }


    /* All stages */

    .retirementLifeStage,
    .stageLeft,
    .stageRight {

        width: 100%;

        align-self: stretch;

        display: grid;

        grid-template-columns: 42px 1fr;

        gap: 14px;

        flex-direction: initial;

        text-align: left;

    }


    /* Number */

    .retirementLifeStageNumber {

        grid-column: 1;

        grid-row: 1;

        padding-top: 8px;

        text-align: center;

        font-size: 9px;

    }


    /* Body */

    .retirementLifeStageBody {

        grid-column: 2;

        grid-row: 1;

        padding: 20px;

    }


    .stageLeft .retirementLifeStageBody::after,
    .stageRight .retirementLifeStageBody::after {

        left: -25px;

        right: auto;

        top: 24px;

    }


    .stageLeft .retirementLifeStageIcon {

        margin-left: 0;

    }

    .retirementLifeStageIcon {

        width: 43px;

        height: 43px;

        margin-bottom: 15px;

    }

    .retirementLifeStageBody h3 {

        font-size: 19px;

    }

    .retirementLifeStageBody p {

        font-size: 13px;

        line-height: 1.75;

    }


    /* Bottom */

    .retirementLifeJourneyBottom {

        margin-top: 45px;

    }

    .retirementJourneySequence {

        justify-content: flex-start;

        gap: 9px;

    }

    .retirementJourneySequence span,
    .retirementJourneySequence strong {

        font-size: 8px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .retirementLifeJourneyHead h2 {

        font-size: 30px;

    }

    .retirementLifeStage,
    .stageLeft,
    .stageRight {

        grid-template-columns: 36px 1fr;

        gap: 11px;

    }

    .retirementLifeStageBody {

        padding: 18px;

    }

    .retirementLifeStageBody h3 {

        font-size: 18px;

    }

    .retirementLifeStageBody p {

        font-size: 12.5px;

    }

    .retirementLifeStageBody::after {

        width: 8px;

        height: 8px;

    }

    .stageLeft .retirementLifeStageBody::after,
    .stageRight .retirementLifeStageBody::after {

        left: -21px;

    }

}

/* Journey Section Ends Here */

/* Who Section Starts Here */

/* =========================================================
   RETIREMENT PLANNING
   WHO IS RETIREMENT PLANNING FOR?
========================================================= */

.retirementAudience {

    position: relative;

    padding: 115px 0;

    overflow: hidden;

    background: var(--section);

}

.retirementAudience .container {

    width: min(1180px, 92%);

    margin: auto;

}


/* =========================================================
   HEADING
========================================================= */

.retirementAudienceHeading {

    max-width: 750px;

    margin-bottom: 75px;

}

.retirementAudiencePrefix {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 18px;

    color: #D4AF37;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.retirementAudiencePrefix::before {

    content: "";

    width: 30px;

    height: 2px;

    background: #D4AF37;

}

.retirementAudienceHeading h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.5vw, 58px);

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -1.5px;

}

.retirementAudienceHeading h2 span {

    display: block;

    color: #D4AF37;

}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.retirementAudienceLayout {

    display: grid;

    grid-template-columns: 1fr 280px 1fr;

    gap: 35px;

    align-items: center;

}


/* =========================================================
   COLUMNS
========================================================= */

.retirementAudienceColumn {

    display: flex;

    flex-direction: column;

    gap: 20px;

}


/* =========================================================
   PROFILE ITEM
========================================================= */

.retirementAudienceItem {

    position: relative;

    display: grid;

    grid-template-columns: 55px 1fr;

    gap: 18px;

    min-height: 170px;

    padding: 24px;

    border: 2px solid rgba(212,175,55,.12);

    border-radius: 16px;

    background: rgba(255,255,255,.008);

    transition:

        transform .3s ease,

        background .3s ease,

        border-color .3s ease;

}

.retirementAudienceItem:hover {

    transform: translateY(-4px);

    background: rgba(212,175,55,.015);

    border-color: rgba(212,175,55,.25);

}


/* =========================================================
   ICON
========================================================= */

.retirementAudienceIcon {

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    color: #D4AF37;

    background: rgba(212,175,55,.045);

    border: 2px solid rgba(212,175,55,.13);

}

.retirementAudienceIcon i {

    font-size: 15px;

}


/* =========================================================
   CONTENT
========================================================= */

.retirementAudienceContent {

    align-self: center;

}

.retirementAudienceContent > span {

    display: block;

    margin-bottom: 7px;

    color: #D4AF37;

    opacity: .40;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.3px;

}

.retirementAudienceContent h3 {

    margin: 0 0 9px;

    color: var(--primary);

    font-size: 19px;

    font-weight: 600;

    line-height: 1.3;

}

.retirementAudienceContent p {

    margin: 0;

    color: var(--text);

    opacity: .55;

    font-size: 13.5px;

    line-height: 1.7;

}


/* =========================================================
   CENTER
========================================================= */

.retirementAudienceCenter {

    position: relative;

    z-index: 3;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    min-height: 320px;

}

.retirementAudienceCenterRing {

    width: 190px;

    height: 190px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    border: 2px solid rgba(212,175,55,.15);

    box-shadow:

        0 0 0 18px rgba(212,175,55,.012),

        0 0 0 36px rgba(212,175,55,.008);

}

.retirementAudienceCenterIcon {

    width: 105px;

    height: 105px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #D4AF37;

    background: rgba(212,175,55,.035);

    border: 2px solid rgba(212,175,55,.18);

}

.retirementAudienceCenterIcon i {

    font-size: 36px;

    opacity: .75;

}

.retirementAudienceCenter > span {

    margin-top: 27px;

    color: #D4AF37;

    opacity: .45;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.7px;

}

.retirementAudienceCenter > strong {

    margin-top: 5px;

    color: var(--primary);

    font-size: 18px;

    font-weight: 600;

}

.retirementAudienceCenter > p {

    max-width: 220px;

    margin: 10px auto 0;

    color: var(--text);

    opacity: .42;

    font-size: 12px;

    line-height: 1.6;

}


/* =========================================================
   CONNECTOR LINES
========================================================= */

.retirementAudienceCenter::before,
.retirementAudienceCenter::after {

    content: "";

    position: absolute;

    top: 50%;

    width: 40px;

    height: 2px;

    background: rgba(212,175,55,.15);

}

.retirementAudienceCenter::before {

    left: -35px;

}

.retirementAudienceCenter::after {

    right: -35px;

}


/* =========================================================
   BOTTOM
========================================================= */

.retirementAudienceBottom {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 65px;

}

.retirementAudienceBottom > span {

    flex: 1;

    height: 2px;

    background: rgba(212,175,55,.12);

}

.retirementAudienceBottom p {

    margin: 0;

    color: var(--text);

    opacity: .34;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.4px;

    white-space: nowrap;

}

.retirementAudienceBottom strong {

    padding: 0 8px;

    color: #D4AF37;

    opacity: .7;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .retirementAudience {

        padding: 95px 0;

    }

    .retirementAudienceLayout {

        grid-template-columns: 1fr 220px 1fr;

        gap: 20px;

    }

    .retirementAudienceCenterRing {

        width: 155px;

        height: 155px;

    }

    .retirementAudienceCenterIcon {

        width: 88px;

        height: 88px;

    }

    .retirementAudienceCenterIcon i {

        font-size: 29px;

    }

    .retirementAudienceItem {

        grid-template-columns: 46px 1fr;

        gap: 13px;

        padding: 20px;

    }

    .retirementAudienceIcon {

        width: 45px;

        height: 45px;

    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 850px) {

    .retirementAudienceLayout {

        grid-template-columns: 1fr 1fr;

        gap: 20px;

    }

    .retirementAudienceCenter {

        grid-column: 1 / -1;

        grid-row: 1;

        min-height: 270px;

        order: -1;

    }

    .retirementAudienceCenter::before,
    .retirementAudienceCenter::after {

        display: none;

    }

    .retirementAudienceCenterRing {

        width: 150px;

        height: 150px;

    }

    .retirementAudienceCenterIcon {

        width: 85px;

        height: 85px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .retirementAudience {

        padding: 75px 0;

    }

    .retirementAudience .container {

        width: calc(100% - 30px);

    }

    .retirementAudienceHeading {

        margin-bottom: 45px;

    }

    .retirementAudiencePrefix {

        font-size: 11px;

    }

    .retirementAudienceHeading h2 {

        font-size: 35px;

        letter-spacing: -1px;

    }


    /* Center */

    .retirementAudienceLayout {

        display: flex;

        flex-direction: column;

        gap: 20px;

    }

    .retirementAudienceCenter {

        order: 0;

        min-height: auto;

        margin-bottom: 20px;

    }

    .retirementAudienceCenterRing {

        width: 140px;

        height: 140px;

        box-shadow:

            0 0 0 12px rgba(212,175,55,.012),

            0 0 0 24px rgba(212,175,55,.006);

    }

    .retirementAudienceCenterIcon {

        width: 78px;

        height: 78px;

    }

    .retirementAudienceCenterIcon i {

        font-size: 27px;

    }

    .retirementAudienceCenter > span {

        margin-top: 20px;

    }


    /* Columns */

    .retirementAudienceColumn {

        width: 100%;

        gap: 15px;

    }


    /* Profile */

    .retirementAudienceItem {

        grid-template-columns: 47px 1fr;

        gap: 14px;

        min-height: auto;

        padding: 20px 18px;

        border-radius: 14px;

    }

    .retirementAudienceIcon {

        width: 44px;

        height: 44px;

        border-radius: 10px;

    }

    .retirementAudienceIcon i {

        font-size: 13px;

    }

    .retirementAudienceContent h3 {

        font-size: 18px;

    }

    .retirementAudienceContent p {

        font-size: 13px;

        line-height: 1.7;

    }


    /* Bottom */

    .retirementAudienceBottom {

        margin-top: 40px;

    }

    .retirementAudienceBottom p {

        white-space: normal;

        text-align: center;

        font-size: 8px;

        line-height: 1.8;

    }

    .retirementAudienceBottom > span {

        display: none;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .retirementAudienceHeading h2 {

        font-size: 30px;

    }

    .retirementAudienceItem {

        grid-template-columns: 42px 1fr;

        gap: 11px;

        padding: 18px 15px;

    }

    .retirementAudienceIcon {

        width: 40px;

        height: 40px;

    }

    .retirementAudienceContent h3 {

        font-size: 17px;

    }

    .retirementAudienceContent p {

        font-size: 12.5px;

    }

}

/* Who Section Ends Here */

/* Benefits Section Starts Here */

/* =========================================================
   RETIREMENT PLANNING
   PROFESSIONAL BENEFITS
========================================================= */

.retirementBenefits {

    position: relative;

    padding: 120px 0;

    overflow: hidden;

    background: var(--section);

}

.retirementBenefits .container {

    width: min(1150px, 92%);

    margin: auto;

}


/* =========================================================
   HEADING
========================================================= */

.retirementBenefitsHeading {

    max-width: 700px;

    margin-bottom: 65px;

}

.retirementBenefitsPrefix {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 18px;

    color: #D4AF37;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.retirementBenefitsPrefix::before {

    content: "";

    width: 30px;

    height: 2px;

    background: #D4AF37;

}

.retirementBenefitsHeading h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.5vw, 58px);

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -1.5px;

}

.retirementBenefitsHeading h2 span {

    display: block;

    color: #D4AF37;

}


/* =========================================================
   EDITORIAL GRID
========================================================= */

.retirementBenefitsEditorial {

    display: grid;

    grid-template-columns: 1.15fr .85fr 1fr;

    grid-template-rows: auto auto auto;

    gap: 18px;

}


/* =========================================================
   INTRO PANEL
========================================================= */

.retirementBenefitsIntro {

    grid-column: 1;

    grid-row: 1 / span 2;

    position: relative;

    min-height: 475px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 38px;

    overflow: hidden;

    border: 2px solid rgba(212,175,55,.14);

    border-radius: 22px;

    background:

        radial-gradient(
            circle at 20% 10%,
            rgba(212,175,55,.07),
            transparent 35%
        );

}

.retirementBenefitsIntro::after {

    content: "";

    position: absolute;

    width: 260px;

    height: 260px;

    top: -130px;

    right: -130px;

    border-radius: 50%;

    border: 2px solid rgba(212,175,55,.07);

}

.retirementBenefitsIntroNumber {

    position: absolute;

    top: 28px;

    left: 38px;

    color: #D4AF37;

    opacity: .28;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;

}

.retirementBenefitsIntroIcon {

    position: absolute;

    top: 31px;

    right: 32px;

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    color: #D4AF37;

    background: rgba(212,175,55,.045);

    border: 2px solid rgba(212,175,55,.14);

}

.retirementBenefitsIntroIcon i {

    font-size: 17px;

}

.retirementBenefitsIntro > span {

    margin-bottom: 12px;

    color: #D4AF37;

    opacity: .45;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;

}

.retirementBenefitsIntro h3 {

    max-width: 430px;

    margin: 0 0 17px;

    color: var(--primary);

    font-size: 29px;

    font-weight: 600;

    line-height: 1.28;

    letter-spacing: -.5px;

}

.retirementBenefitsIntro p {

    max-width: 440px;

    margin: 0;

    color: var(--text);

    opacity: .55;

    font-size: 14px;

    line-height: 1.8;

}


/* =========================================================
   BENEFIT ITEM
========================================================= */

.retirementBenefitItem {

    position: relative;

    min-height: 225px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 29px;

    overflow: hidden;

    border: 2px solid rgba(212,175,55,.11);

    border-radius: 17px;

    background: rgba(255,255,255,.006);

    transition:

        transform .3s ease,

        border-color .3s ease,

        background .3s ease;

}

.retirementBenefitItem::after {

    content: "";

    position: absolute;

    width: 110px;

    height: 110px;

    right: -70px;

    bottom: -70px;

    border-radius: 50%;

    border: 2px solid rgba(212,175,55,.045);

}

.retirementBenefitItem:hover {

    transform: translateY(-4px);

    border-color: rgba(212,175,55,.25);

    background: rgba(212,175,55,.012);

}


/* =========================================================
   TOP
========================================================= */

.retirementBenefitTop {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 24px;

}

.retirementBenefitTop > span {

    color: #D4AF37;

    opacity: .35;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.4px;

}

.retirementBenefitIcon {

    width: 47px;

    height: 47px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    color: #D4AF37;

    background: rgba(212,175,55,.045);

    border: 2px solid rgba(212,175,55,.12);

}

.retirementBenefitIcon i {

    font-size: 14px;

}


/* =========================================================
   CONTENT
========================================================= */

.retirementBenefitItem h3 {

    position: relative;

    z-index: 2;

    margin: 0 0 10px;

    color: var(--primary);

    font-size: 20px;

    font-weight: 600;

    line-height: 1.3;

}

.retirementBenefitItem p {

    position: relative;

    z-index: 2;

    max-width: 400px;

    margin: 0;

    color: var(--text);

    opacity: .54;

    font-size: 13.5px;

    line-height: 1.75;

}


/* =========================================================
   WIDE BENEFIT
========================================================= */

.benefitWide {

    grid-column: 2 / span 2;

}


/* =========================================================
   FINAL BENEFIT
========================================================= */

.benefitFinal {

    grid-column: 2 / span 2;

    min-height: 205px;

    display: grid;

    grid-template-columns: 65px 1fr;

    gap: 20px;

    align-items: center;

}

.benefitFinal .retirementBenefitTop {

    align-self: start;

    margin: 0;

    display: flex;

    flex-direction: column;

    gap: 17px;

    align-items: flex-start;

}

.retirementBenefitMiniLabel {

    display: block;

    margin-bottom: 8px;

    color: #D4AF37;

    opacity: .38;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.4px;

}


/* =========================================================
   BOTTOM
========================================================= */

.retirementBenefitsBottom {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 55px;

}

.retirementBenefitsBottomLine {

    flex: 1;

    height: 2px;

    background: rgba(212,175,55,.12);

}

.retirementBenefitsBottom p {

    margin: 0;

    color: var(--text);

    opacity: .32;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    white-space: nowrap;

}

.retirementBenefitsBottom strong {

    padding: 0 7px;

    color: #D4AF37;

    opacity: .75;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .retirementBenefits {

        padding: 95px 0;

    }

    .retirementBenefitsEditorial {

        grid-template-columns: 1fr 1fr;

    }

    .retirementBenefitsIntro {

        grid-column: 1 / span 2;

        grid-row: auto;

        min-height: 340px;

    }

    .benefitWide {

        grid-column: auto;

    }

    .benefitFinal {

        grid-column: 1 / span 2;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .retirementBenefits {

        padding: 75px 0;

    }

    .retirementBenefits .container {

        width: calc(100% - 30px);

    }

    .retirementBenefitsHeading {

        margin-bottom: 40px;

    }

    .retirementBenefitsPrefix {

        font-size: 11px;

    }

    .retirementBenefitsHeading h2 {

        font-size: 35px;

        letter-spacing: -1px;

    }


    .retirementBenefitsEditorial {

        display: flex;

        flex-direction: column;

        gap: 15px;

    }


    /* Intro */

    .retirementBenefitsIntro {

        min-height: 390px;

        padding: 28px 22px;

        border-radius: 17px;

    }

    .retirementBenefitsIntroNumber {

        left: 22px;

        top: 23px;

    }

    .retirementBenefitsIntroIcon {

        right: 20px;

        top: 20px;

        width: 48px;

        height: 48px;

    }

    .retirementBenefitsIntro h3 {

        font-size: 25px;

    }

    .retirementBenefitsIntro p {

        font-size: 13px;

    }


    /* Benefits */

    .retirementBenefitItem,
    .benefitWide,
    .benefitFinal {

        min-height: auto;

        display: block;

        padding: 23px 20px;

        border-radius: 15px;

    }

    .retirementBenefitTop {

        margin-bottom: 20px;

    }

    .retirementBenefitIcon {

        width: 44px;

        height: 44px;

    }

    .retirementBenefitItem h3 {

        font-size: 19px;

    }

    .retirementBenefitItem p {

        font-size: 13px;

        line-height: 1.75;

    }

    .benefitFinal .retirementBenefitTop {

        display: flex;

        flex-direction: row;

        align-items: center;

        justify-content: space-between;

        gap: 0;

        margin-bottom: 20px;

    }


    /* Bottom */

    .retirementBenefitsBottom {

        margin-top: 35px;

        gap: 10px;

    }

    .retirementBenefitsBottomLine {

        display: none;

    }

    .retirementBenefitsBottom p {

        width: 100%;

        text-align: center;

        white-space: normal;

        font-size: 8px;

        line-height: 1.8;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .retirementBenefitsHeading h2 {

        font-size: 30px;

    }

    .retirementBenefitsIntro {

        min-height: 370px;

        padding: 24px 18px;

    }

    .retirementBenefitsIntro h3 {

        font-size: 22px;

    }

    .retirementBenefitItem,
    .benefitWide,
    .benefitFinal {

        padding: 20px 17px;

    }

    .retirementBenefitItem h3 {

        font-size: 18px;

    }

    .retirementBenefitItem p {

        font-size: 12.5px;

    }

}

/* Benefits Section Ends Here */

/* CTA Section Starts Here */

/* =========================================================
   RETIREMENT FINAL CTA
   MINIMAL HORIZON DESIGN
========================================================= */

.retirementCta {

    position: relative;

    padding: 110px 0;

    overflow: hidden;

    background: var(--section);

}

.retirementCta .container {

    width: min(1160px, 92%);

    margin: auto;

}


/* =========================================================
   MAIN
========================================================= */

.retirementCtaInner {

    position: relative;

    min-height: 480px;

    display: grid;

    grid-template-columns: 1.1fr .9fr;

    align-items: center;

    gap: 70px;

    padding: 65px 70px;

    overflow: hidden;

    border: 2px solid rgba(212,175,55,.13);

    border-radius: 24px;

    background: rgba(255,255,255,.008);

}


/* Very subtle background glow */

.retirementCtaInner::before {

    content: "";

    position: absolute;

    width: 450px;

    height: 450px;

    right: -220px;

    top: -220px;

    border-radius: 50%;

    background: rgba(212,175,55,.025);

    pointer-events: none;

}


/* =========================================================
   CONTENT
========================================================= */

.retirementCtaContent {

    position: relative;

    z-index: 2;

    max-width: 650px;

}

.retirementCtaEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 19px;

    color: #D4AF37;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.retirementCtaEyebrow span {

    width: 30px;

    height: 2px;

    background: #D4AF37;

}

.retirementCtaContent h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(39px, 4.2vw, 55px);

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -1.5px;

}

.retirementCtaContent h2 em {

    display: block;

    color: #D4AF37;

    font-style: normal;

    font-weight: 600;

}

.retirementCtaContent p {

    max-width: 625px;

    margin: 23px 0 0;

    color: var(--text);

    opacity: .55;

    font-size: 15px;

    line-height: 1.85;

}


/* =========================================================
   BUTTONS
========================================================= */

.retirementCtaActions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 13px;

    margin-top: 31px;

}

.retirementCtaPrimary,
.retirementCtaSecondary {

    min-height: 52px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

    border-radius: 8px;

    transition: all .3s ease;

}

.retirementCtaPrimary {

    gap: 13px;

    padding: 0 22px;

    color: #111;

    background: #D4AF37;

    border: 2px solid #D4AF37;

}

.retirementCtaPrimary i {

    font-size: 10px;

    transition: transform .3s ease;

}

.retirementCtaPrimary:hover {

    transform: translateY(-2px);

}

.retirementCtaPrimary:hover i {

    transform: translateX(3px);

}

.retirementCtaSecondary {

    padding: 0 22px;

    color: var(--primary);

    border: 2px solid rgba(212,175,55,.18);

}

.retirementCtaSecondary:hover {

    transform: translateY(-2px);

    border-color: rgba(212,175,55,.40);

}


/* =========================================================
   GRAPHIC
========================================================= */

.retirementCtaGraphic {

    position: relative;

    width: 100%;

    max-width: 500px;

    height: 300px;

    margin-left: auto;

}


/* =========================================================
   SUN / HORIZON
========================================================= */

.retirementCtaSun {

    position: absolute;

    right: 95px;

    top: 38px;

    width: 62px;

    height: 62px;

    border-radius: 50%;

    border: 2px solid rgba(212,175,55,.17);

    background: rgba(212,175,55,.045);

}

.retirementCtaHorizon {

    position: absolute;

    left: 10px;

    right: 0;

    bottom: 72px;

    height: 2px;

    background: rgba(212,175,55,.14);

}


/* =========================================================
   GRAPH
========================================================= */

.retirementCtaGraph {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 70px;

    width: 100%;

    height: 220px;

    color: rgba(212,175,55,.48);

}


/* =========================================================
   GRAPH POINTS
========================================================= */

.retirementCtaGraphPoint {

    position: absolute;

    width: 9px;

    height: 9px;

    border-radius: 50%;

    background: #D4AF37;

    box-shadow:

        0 0 0 5px rgba(212,175,55,.07);

}

.point1 {

    left: 29%;

    bottom: 104px;

}

.point2 {

    left: 63%;

    bottom: 143px;

}

.point3 {

    right: 1%;

    top: 37px;

}


/* =========================================================
   FREEDOM ICON
========================================================= */

.retirementCtaFreedom {

    position: absolute;

    right: 8px;

    top: 5px;

    width: 43px;

    height: 43px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #D4AF37;

    border: 2px solid rgba(212,175,55,.13);

    background: rgba(212,175,55,.025);

}

.retirementCtaFreedom i {

    font-size: 14px;

    opacity: .65;

}


/* =========================================================
   GRAPHIC LABEL
========================================================= */

.retirementCtaGraphicLabel {

    position: absolute;

    left: 10px;

    right: 0;

    bottom: 25px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.retirementCtaGraphicLabel span,
.retirementCtaGraphicLabel strong {

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.3px;

}

.retirementCtaGraphicLabel span {

    color: var(--text);

    opacity: .28;

}

.retirementCtaGraphicLabel strong {

    color: #D4AF37;

    opacity: .55;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .retirementCta {

        padding: 90px 0;

    }

    .retirementCtaInner {

        grid-template-columns: 1fr;

        gap: 35px;

        padding: 55px 45px;

    }

    .retirementCtaContent {

        max-width: 720px;

    }

    .retirementCtaGraphic {

        margin: auto;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .retirementCta {

        padding: 70px 0;

    }

    .retirementCta .container {

        width: calc(100% - 30px);

    }

    .retirementCtaInner {

        min-height: auto;

        padding: 38px 22px 30px;

        gap: 25px;

        border-radius: 18px;

    }

    .retirementCtaEyebrow {

        font-size: 11px;

    }

    .retirementCtaContent h2 {

        font-size: 34px;

        letter-spacing: -1px;

    }

    .retirementCtaContent p {

        font-size: 13.5px;

        line-height: 1.8;

    }


    /* Buttons */

    .retirementCtaActions {

        flex-direction: column;

        align-items: stretch;

        margin-top: 25px;

    }

    .retirementCtaPrimary,
    .retirementCtaSecondary {

        width: 100%;

        min-height: 50px;

    }


    /* Graphic */

    .retirementCtaGraphic {

        height: 215px;

        max-width: 330px;

        margin: 0 auto;

    }

    .retirementCtaSun {

        right: 55px;

        top: 20px;

        width: 48px;

        height: 48px;

    }

    .retirementCtaHorizon {

        bottom: 55px;

    }

    .retirementCtaGraph {

        bottom: 53px;

        height: 165px;

    }

    .point1 {

        bottom: 82px;

    }

    .point2 {

        bottom: 112px;

    }

    .point3 {

        top: 28px;

    }

    .retirementCtaFreedom {

        right: 0;

        top: 0;

        width: 38px;

        height: 38px;

    }

    .retirementCtaGraphicLabel {

        bottom: 10px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .retirementCtaContent h2 {

        font-size: 30px;

    }

    .retirementCtaInner {

        padding: 32px 18px 25px;

    }

    .retirementCtaGraphic {

        max-width: 285px;

    }

    .retirementCtaGraphicLabel span,
    .retirementCtaGraphicLabel strong {

        font-size: 7px;

    }

}

/* CTA Section Ends Here */

/* Retirement Planning Page Ends Here */


/* Dream Vacation Planning Page Starts Here */

/* Hero Section Starts Here */

/* =========================================================
   DREAM VACATION PLANNING
   HERO SECTION
========================================================= */

.vacationHero {

    position: relative;

    padding: 105px 0 65px;

    overflow: hidden;

    background: var(--section);

}

.vacationHero .container {

    width: min(1160px, 92%);

    margin: auto;

}


/* =========================================================
   MAIN HERO
========================================================= */

.vacationHeroInner {

    display: grid;

    grid-template-columns: 1.05fr .95fr;

    align-items: center;

    gap: 75px;

    min-height: 590px;

}


/* =========================================================
   CONTENT
========================================================= */

.vacationHeroContent {

    max-width: 650px;

}

.vacationHeroPrefix {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 19px;

    color: #D4AF37;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.vacationHeroPrefix::before {

    content: "";

    width: 30px;

    height: 2px;

    background: #D4AF37;

}

.vacationHeroContent h1 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(42px, 4.6vw, 62px);

    font-weight: 600;

    line-height: 1.06;

    letter-spacing: -1.8px;

}

.vacationHeroContent h1 span {

    display: block;

    color: #D4AF37;

}

.vacationHeroContent p {

    max-width: 610px;

    margin: 25px 0 0;

    color: var(--text);

    opacity: .56;

    font-size: 15px;

    line-height: 1.85;

}


/* =========================================================
   BUTTONS
========================================================= */

.vacationHeroButtons {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 13px;

    margin-top: 32px;

}

.vacationHeroPrimary,
.vacationHeroSecondary {

    min-height: 53px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    border-radius: 8px;

    font-size: 13px;

    font-weight: 600;

    transition: all .3s ease;

}

.vacationHeroPrimary {

    gap: 13px;

    padding: 0 22px;

    color: #111;

    background: #D4AF37;

    border: 2px solid #D4AF37;

}

.vacationHeroPrimary i {

    font-size: 10px;

    transition: transform .3s ease;

}

.vacationHeroPrimary:hover {

    transform: translateY(-2px);

}

.vacationHeroPrimary:hover i {

    transform: translateX(4px);

}

.vacationHeroSecondary {

    padding: 0 22px;

    color: var(--primary);

    border: 2px solid rgba(212,175,55,.19);

}

.vacationHeroSecondary:hover {

    transform: translateY(-2px);

    border-color: rgba(212,175,55,.42);

}


/* =========================================================
   VISUAL
========================================================= */

.vacationHeroVisual {

    position: relative;

    width: 100%;

    max-width: 520px;

    height: 500px;

    margin-left: auto;

    border: 2px solid rgba(212,175,55,.11);

    border-radius: 24px;

    background: rgba(255,255,255,.006);

    overflow: hidden;

}


/* subtle atmospheric circle */

.vacationHeroVisual::before {

    content: "";

    position: absolute;

    width: 330px;

    height: 330px;

    right: -100px;

    top: -100px;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(212,175,55,.07),
        transparent 68%
    );

}


/* =========================================================
   VISUAL TOP
========================================================= */

.vacationHeroVisualTop {

    position: absolute;

    top: 27px;

    left: 29px;

    right: 29px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.vacationHeroVisualTop > span {

    color: var(--text);

    opacity: .30;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;

}

.vacationHeroPlane {

    width: 43px;

    height: 43px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #D4AF37;

    background: rgba(212,175,55,.04);

    border: 2px solid rgba(212,175,55,.13);

    transform: rotate(-12deg);

}

.vacationHeroPlane i {

    font-size: 14px;

    opacity: .72;

}


/* =========================================================
   ROUTE
========================================================= */

.vacationRoute {

    position: absolute;

    left: 20px;

    right: 20px;

    top: 95px;

    height: 300px;

}

.vacationRoute svg {

    width: 100%;

    height: 100%;

    overflow: visible;

}

.vacationRouteBase {

    fill: none;

    stroke: rgba(212,175,55,.12);

    stroke-width: 3;

    stroke-linecap: round;

}

.vacationRouteDash {

    fill: none;

    stroke: rgba(212,175,55,.48);

    stroke-width: 2;

    stroke-linecap: round;

    stroke-dasharray: 7 10;

}


/* =========================================================
   ROUTE POINTS
========================================================= */

.vacationRoutePoint {

    position: absolute;

    width: 13px;

    height: 13px;

    border-radius: 50%;

    background: #D4AF37;

    box-shadow:

        0 0 0 6px rgba(212,175,55,.07);

}

.vacationPointStart {

    left: 2%;

    bottom: 13%;

}

.vacationPointMiddle {

    left: 54%;

    top: 42%;

}

.vacationPointEnd {

    right: 1%;

    top: 5%;

}


/* =========================================================
   DESTINATION
========================================================= */

.vacationDestination {

    position: absolute;

    right: 28px;

    top: 88px;

    display: flex;

    align-items: center;

    gap: 11px;

}

.vacationDestinationIcon {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #D4AF37;

    border: 2px solid rgba(212,175,55,.13);

    border-radius: 50%;

    background: rgba(212,175,55,.035);

}

.vacationDestinationIcon i {

    font-size: 12px;

}

.vacationDestination div {

    display: flex;

    flex-direction: column;

    gap: 3px;

}

.vacationDestination span {

    color: var(--text);

    opacity: .28;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.2px;

}

.vacationDestination strong {

    color: var(--primary);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: .4px;

}


/* =========================================================
   SUITCASE
========================================================= */

.vacationSuitcase {

    position: absolute;

    left: 35px;

    bottom: 38px;

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    color: #D4AF37;

    background: rgba(212,175,55,.035);

    border: 2px solid rgba(212,175,55,.13);

    transform: rotate(-4deg);

}

.vacationSuitcase i {

    font-size: 19px;

    opacity: .68;

}


/* =========================================================
   GROWTH INDICATOR
========================================================= */

.vacationGrowth {

    position: absolute;

    right: 28px;

    bottom: 31px;

    display: flex;

    align-items: center;

    gap: 9px;

}

.vacationGrowth span {

    color: var(--text);

    opacity: .28;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.2px;

}

.vacationGrowth strong {

    color: #D4AF37;

    opacity: .62;

    font-size: 10px;

    font-weight: 700;

}

.vacationGrowth i {

    color: #D4AF37;

    opacity: .60;

    font-size: 12px;

}


/* =========================================================
   BOTTOM JOURNEY
========================================================= */

.vacationHeroBottom {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    margin-top: 48px;

}

.vacationHeroBottom span,
.vacationHeroBottom strong {

    color: var(--text);

    opacity: .30;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.4px;

}

.vacationHeroBottom strong {

    color: #D4AF37;

    opacity: .70;

}

.vacationHeroBottom i {

    color: #D4AF37;

    opacity: .45;

    font-size: 8px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .vacationHero {

        padding: 90px 0 55px;

    }

    .vacationHeroInner {

        grid-template-columns: 1fr;

        gap: 55px;

    }

    .vacationHeroContent {

        max-width: 760px;

    }

    .vacationHeroVisual {

        margin: auto;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .vacationHero {

        padding: 70px 0 45px;

    }

    .vacationHero .container {

        width: calc(100% - 30px);

    }

    .vacationHeroInner {

        min-height: auto;

        gap: 40px;

    }

    .vacationHeroPrefix {

        font-size: 11px;

    }

    .vacationHeroContent h1 {

        font-size: 35px;

        letter-spacing: -1px;

    }

    .vacationHeroContent p {

        font-size: 13.5px;

        line-height: 1.8;

    }


    /* Buttons */

    .vacationHeroButtons {

        flex-direction: column;

        align-items: stretch;

        margin-top: 26px;

    }

    .vacationHeroPrimary,
    .vacationHeroSecondary {

        width: 100%;

        min-height: 51px;

    }


    /* Visual */

    .vacationHeroVisual {

        height: 400px;

        border-radius: 18px;

    }

    .vacationHeroVisualTop {

        top: 20px;

        left: 20px;

        right: 20px;

    }

    .vacationHeroVisualTop > span {

        font-size: 8px;

    }

    .vacationHeroPlane {

        width: 38px;

        height: 38px;

    }

    .vacationRoute {

        top: 80px;

        left: 13px;

        right: 13px;

        height: 245px;

    }

    .vacationDestination {

        top: 74px;

        right: 19px;

    }

    .vacationDestination strong {

        font-size: 9px;

    }

    .vacationSuitcase {

        left: 20px;

        bottom: 24px;

        width: 50px;

        height: 50px;

    }

    .vacationGrowth {

        right: 19px;

        bottom: 23px;

    }

    .vacationHeroBottom {

        margin-top: 32px;

        gap: 9px;

        flex-wrap: wrap;

    }

    .vacationHeroBottom span,
    .vacationHeroBottom strong {

        font-size: 8px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .vacationHeroContent h1 {

        font-size: 31px;

    }

    .vacationHeroVisual {

        height: 370px;

    }

    .vacationRoute {

        height: 225px;

    }

    .vacationDestination {

        transform: scale(.9);

        transform-origin: right top;

    }

    .vacationGrowth {

        transform: scale(.9);

        transform-origin: right bottom;

    }

}

/* Hero Section Ends Here */

/* Intro Section Starts Here */

/* =========================================================
   DREAM VACATION PLANNING
   INTRODUCTION SECTION
========================================================= */

.vacationIntro {

    position: relative;

    padding: 110px 0;

    overflow: hidden;

    background: var(--section);

}

.vacationIntro .container {

    width: min(1140px, 92%);

    margin: auto;

}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.vacationIntroLayout {

    display: grid;

    grid-template-columns: 1.05fr .95fr;

    align-items: center;

    gap: 85px;

}


/* =========================================================
   LEFT CONTENT
========================================================= */

.vacationIntroContent {

    max-width: 650px;

}

.vacationIntroPrefix {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 18px;

    color: #D4AF37;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.vacationIntroPrefix::before {

    content: "";

    width: 30px;

    height: 2px;

    background: #D4AF37;

}

.vacationIntroContent h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(39px, 4.2vw, 56px);

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -1.4px;

}

.vacationIntroContent h2 span {

    display: block;

    color: #D4AF37;

}

.vacationIntroText {

    margin-top: 27px;

}

.vacationIntroText p {

    margin: 0 0 17px;

    color: var(--text);

    opacity: .56;

    font-size: 15px;

    line-height: 1.85;

}

.vacationIntroText p:last-child {

    margin-bottom: 0;

}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.vacationIntroVisual {

    position: relative;

    padding: 31px 32px;

    border: 2px solid rgba(212,175,55,.12);

    border-radius: 21px;

    background: rgba(255,255,255,.006);

}


/* subtle background circle */

.vacationIntroVisual::before {

    content: "";

    position: absolute;

    width: 220px;

    height: 220px;

    right: -110px;

    top: -110px;

    border-radius: 50%;

    border: 2px solid rgba(212,175,55,.045);

    pointer-events: none;

}


/* =========================================================
   VISUAL HEADER
========================================================= */

.vacationIntroVisualHeader {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom: 23px;

    border-bottom: 2px solid rgba(212,175,55,.10);

}

.vacationIntroVisualHeader span {

    color: var(--text);

    opacity: .32;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;

}

.vacationIntroVisualHeader i {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #D4AF37;

    background: rgba(212,175,55,.035);

    border: 2px solid rgba(212,175,55,.12);

    font-size: 13px;

}


/* =========================================================
   STEPS
========================================================= */

.vacationIntroSteps {

    padding-top: 25px;

}

.vacationIntroStep {

    display: grid;

    grid-template-columns: 61px 1fr;

    gap: 19px;

}


/* =========================================================
   MARKER
========================================================= */

.vacationIntroStepMarker {

    position: relative;

    width: 61px;

    height: 61px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    color: #D4AF37;

    background: rgba(212,175,55,.035);

    border: 2px solid rgba(212,175,55,.14);

}

.vacationIntroStepMarker span {

    position: absolute;

    top: -7px;

    right: -7px;

    min-width: 20px;

    height: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: var(--section);

    background: #D4AF37;

    font-size: 8px;

    font-weight: 700;

}

.vacationIntroStepMarker i {

    font-size: 17px;

    opacity: .70;

}


/* =========================================================
   STEP CONTENT
========================================================= */

.vacationIntroStepContent {

    padding-top: 2px;

}

.vacationIntroStepContent > span {

    display: block;

    margin-bottom: 6px;

    color: #D4AF37;

    opacity: .40;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.3px;

}

.vacationIntroStepContent h3 {

    margin: 0 0 8px;

    color: var(--primary);

    font-size: 19px;

    font-weight: 600;

    line-height: 1.35;

}

.vacationIntroStepContent p {

    margin: 0;

    color: var(--text);

    opacity: .50;

    font-size: 13px;

    line-height: 1.7;

}


/* =========================================================
   CONNECTOR
========================================================= */

.vacationIntroConnector {

    width: 2px;

    height: 25px;

    margin: 8px 0 8px 29px;

    background:

        linear-gradient(
            to bottom,
            rgba(212,175,55,.30),
            rgba(212,175,55,.08)
        );

}


/* =========================================================
   BOTTOM
========================================================= */

.vacationIntroBottom {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 65px;

}

.vacationIntroBottom > span {

    flex: 1;

    height: 2px;

    background: rgba(212,175,55,.10);

}

.vacationIntroBottom p {

    margin: 0;

    color: var(--text);

    opacity: .32;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.4px;

    white-space: nowrap;

}

.vacationIntroBottom strong {

    padding: 0 8px;

    color: #D4AF37;

    opacity: .70;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .vacationIntro {

        padding: 90px 0;

    }

    .vacationIntroLayout {

        grid-template-columns: 1fr;

        gap: 50px;

    }

    .vacationIntroContent {

        max-width: 760px;

    }

    .vacationIntroVisual {

        max-width: 680px;

        width: 100%;

        margin: auto;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .vacationIntro {

        padding: 75px 0;

    }

    .vacationIntro .container {

        width: calc(100% - 30px);

    }

    .vacationIntroLayout {

        gap: 38px;

    }

    .vacationIntroPrefix {

        font-size: 11px;

    }

    .vacationIntroContent h2 {

        font-size: 35px;

        letter-spacing: -1px;

    }

    .vacationIntroText {

        margin-top: 22px;

    }

    .vacationIntroText p {

        font-size: 13.5px;

        line-height: 1.8;

        margin-bottom: 15px;

    }


    /* Visual */

    .vacationIntroVisual {

        padding: 24px 20px;

        border-radius: 17px;

    }

    .vacationIntroVisualHeader {

        padding-bottom: 19px;

    }

    .vacationIntroVisualHeader i {

        width: 37px;

        height: 37px;

    }

    .vacationIntroSteps {

        padding-top: 22px;

    }

    .vacationIntroStep {

        grid-template-columns: 53px 1fr;

        gap: 15px;

    }

    .vacationIntroStepMarker {

        width: 53px;

        height: 53px;

        border-radius: 12px;

    }

    .vacationIntroStepMarker i {

        font-size: 15px;

    }

    .vacationIntroStepContent h3 {

        font-size: 18px;

    }

    .vacationIntroStepContent p {

        font-size: 13px;

        line-height: 1.7;

    }

    .vacationIntroConnector {

        margin-left: 25px;

        height: 22px;

    }


    /* Bottom */

    .vacationIntroBottom {

        margin-top: 40px;

    }

    .vacationIntroBottom > span {

        display: none;

    }

    .vacationIntroBottom p {

        width: 100%;

        text-align: center;

        white-space: normal;

        line-height: 1.8;

        font-size: 8px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .vacationIntroContent h2 {

        font-size: 30px;

    }

    .vacationIntroVisual {

        padding: 21px 17px;

    }

    .vacationIntroStep {

        grid-template-columns: 47px 1fr;

        gap: 13px;

    }

    .vacationIntroStepMarker {

        width: 47px;

        height: 47px;

    }

    .vacationIntroStepContent h3 {

        font-size: 17px;

    }

    .vacationIntroStepContent p {

        font-size: 12.5px;

    }

    .vacationIntroConnector {

        margin-left: 22px;

    }

}

/* Intro Section Ends Here */

/* Matters Section Starts Here */

/* =========================================================
   DREAM VACATION
   WHY VACATION PLANNING MATTERS
========================================================= */

.vacationWhy {

    position: relative;

    padding: 115px 0;

    overflow: hidden;

    background: var(--section);

}

.vacationWhy .container {

    width: min(1160px, 92%);

    margin: auto;

}


/* =========================================================
   HEADER
========================================================= */

.vacationWhyHeader {

    max-width: 760px;

    margin-bottom: 70px;

}

.vacationWhyPrefix {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 18px;

    color: #D4AF37;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.vacationWhyPrefix::before {

    content: "";

    width: 30px;

    height: 2px;

    background: #D4AF37;

}

.vacationWhyHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.5vw, 58px);

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -1.5px;

}

.vacationWhyHeader h2 span {

    display: block;

    color: #D4AF37;

}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.vacationWhyLayout {

    display: grid;

    grid-template-columns: .72fr 1.28fr;

    gap: 70px;

    align-items: start;

}


/* =========================================================
   EDITORIAL LEFT
========================================================= */

.vacationWhyEditorial {

    position: sticky;

    top: 100px;

    min-height: 470px;

    padding: 35px 35px 38px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    overflow: hidden;

    border: 2px solid rgba(212,175,55,.12);

    border-radius: 21px;

    background: rgba(255,255,255,.006);

}

.vacationWhyEditorial::before {

    content: "";

    position: absolute;

    width: 280px;

    height: 280px;

    top: -145px;

    right: -145px;

    border-radius: 50%;

    border: 2px solid rgba(212,175,55,.05);

}

.vacationWhyBigNumber {

    position: absolute;

    top: 28px;

    left: 35px;

    color: #D4AF37;

    opacity: .13;

    font-size: 105px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: -6px;

}

.vacationWhyEditorialLine {

    position: absolute;

    top: 153px;

    left: 35px;

    width: 45px;

    height: 2px;

    background: rgba(212,175,55,.35);

}

.vacationWhyEditorial p {

    position: relative;

    z-index: 2;

    max-width: 390px;

    margin: 0 0 35px;

    color: var(--text);

    opacity: .55;

    font-size: 15px;

    line-height: 1.85;

}

.vacationWhyDestination {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 12px;

}

.vacationWhyDestination i {

    width: 43px;

    height: 43px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #D4AF37;

    background: rgba(212,175,55,.035);

    border: 2px solid rgba(212,175,55,.13);

    font-size: 13px;

}

.vacationWhyDestination span {

    color: var(--text);

    opacity: .27;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.4px;

}

.vacationWhyDestination strong {

    display: block;

    color: #D4AF37;

    opacity: .65;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .5px;

}


/* =========================================================
   BENEFITS
========================================================= */

.vacationWhyBenefits {

    display: grid;

    grid-template-columns: 1fr 1fr;

    border-top: 2px solid rgba(212,175,55,.12);

    border-left: 2px solid rgba(212,175,55,.12);

}


/* =========================================================
   ITEM
========================================================= */

.vacationWhyItem {

    position: relative;

    min-height: 230px;

    display: flex;

    flex-direction: column;

    padding: 27px 27px 30px;

    border-right: 2px solid rgba(212,175,55,.12);

    border-bottom: 2px solid rgba(212,175,55,.12);

    transition:

        background .3s ease,

        transform .3s ease;

}

.vacationWhyItem:hover {

    background: rgba(212,175,55,.012);

    transform: translateY(-3px);

}


/* =========================================================
   NUMBER
========================================================= */

.vacationWhyNumber {

    position: absolute;

    top: 26px;

    right: 25px;

    color: #D4AF37;

    opacity: .25;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.4px;

}


/* =========================================================
   ICON
========================================================= */

.vacationWhyIcon {

    width: 47px;

    height: 47px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 25px;

    border-radius: 12px;

    color: #D4AF37;

    background: rgba(212,175,55,.035);

    border: 2px solid rgba(212,175,55,.12);

}

.vacationWhyIcon i {

    font-size: 14px;

    opacity: .72;

}


/* =========================================================
   CONTENT
========================================================= */

.vacationWhyContent {

    margin-top: auto;

}

.vacationWhyContent h3 {

    margin: 0 35px 10px 0;

    color: var(--primary);

    font-size: 19px;

    font-weight: 600;

    line-height: 1.35;

}

.vacationWhyContent p {

    margin: 0;

    color: var(--text);

    opacity: .52;

    font-size: 13.5px;

    line-height: 1.75;

}


/* =========================================================
   BOTTOM
========================================================= */

.vacationWhyBottom {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 65px;

}

.vacationWhyBottom > span {

    flex: 1;

    height: 2px;

    background: rgba(212,175,55,.10);

}

.vacationWhyBottom p {

    margin: 0;

    color: var(--text);

    opacity: .32;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.4px;

    white-space: nowrap;

}

.vacationWhyBottom strong {

    padding: 0 8px;

    color: #D4AF37;

    opacity: .70;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .vacationWhy {

        padding: 95px 0;

    }

    .vacationWhyLayout {

        grid-template-columns: 1fr;

        gap: 35px;

    }

    .vacationWhyEditorial {

        position: relative;

        top: auto;

        min-height: 300px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .vacationWhy {

        padding: 75px 0;

    }

    .vacationWhy .container {

        width: calc(100% - 30px);

    }

    .vacationWhyHeader {

        margin-bottom: 40px;

    }

    .vacationWhyPrefix {

        font-size: 11px;

    }

    .vacationWhyHeader h2 {

        font-size: 35px;

        letter-spacing: -1px;

    }


    /* Editorial */

    .vacationWhyEditorial {

        min-height: 300px;

        padding: 28px 22px;

        border-radius: 17px;

    }

    .vacationWhyBigNumber {

        top: 23px;

        left: 22px;

        font-size: 80px;

    }

    .vacationWhyEditorialLine {

        top: 112px;

        left: 22px;

        width: 35px;

    }

    .vacationWhyEditorial p {

        font-size: 13.5px;

        line-height: 1.8;

        margin-bottom: 25px;

    }


    /* Benefits */

    .vacationWhyBenefits {

        display: block;

        border-left: none;

    }

    .vacationWhyItem {

        min-height: auto;

        padding: 23px 20px;

        border-left: 2px solid rgba(212,175,55,.12);

        border-radius: 0;

    }

    .vacationWhyItem:first-child {

        border-top: 2px solid rgba(212,175,55,.12);

    }

    .vacationWhyIcon {

        width: 44px;

        height: 44px;

        margin-bottom: 20px;

    }

    .vacationWhyContent h3 {

        font-size: 18px;

    }

    .vacationWhyContent p {

        font-size: 13px;

        line-height: 1.75;

    }


    /* Bottom */

    .vacationWhyBottom {

        margin-top: 40px;

    }

    .vacationWhyBottom > span {

        display: none;

    }

    .vacationWhyBottom p {

        width: 100%;

        text-align: center;

        white-space: normal;

        line-height: 1.8;

        font-size: 8px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .vacationWhyHeader h2 {

        font-size: 30px;

    }

    .vacationWhyEditorial {

        min-height: 280px;

        padding: 24px 18px;

    }

    .vacationWhyEditorial p {

        font-size: 13px;

    }

    .vacationWhyItem {

        padding: 20px 17px;

    }

    .vacationWhyContent h3 {

        font-size: 17px;

    }

    .vacationWhyContent p {

        font-size: 12.5px;

    }

}

/* Matters Section Ends Here */

/* Approach Section Starts Here */

/* =========================================================
   DREAM VACATION PLANNING
   APPROACH SECTION
========================================================= */

.vacationApproach {

    position: relative;

    padding: 115px 0;

    overflow: hidden;

    background: var(--section);

}

.vacationApproach .container {

    width: min(1180px, 92%);

    margin: auto;

}


/* =========================================================
   HEADING
========================================================= */

.vacationApproachHeading {

    max-width: 760px;

    margin-bottom: 80px;

}

.vacationApproachPrefix {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 18px;

    color: #D4AF37;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.vacationApproachPrefix::before {

    content: "";

    width: 30px;

    height: 2px;

    background: #D4AF37;

}

.vacationApproachHeading h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.5vw, 58px);

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -1.5px;

}

.vacationApproachHeading h2 span {

    display: block;

    color: #D4AF37;

}

.vacationApproachHeading p {

    max-width: 570px;

    margin: 20px 0 0;

    color: var(--text);

    opacity: .50;

    font-size: 15px;

    line-height: 1.8;

}


/* =========================================================
   ROUTE AREA
========================================================= */

.vacationApproachRoute {

    position: relative;

    min-height: 590px;

    display: grid;

    grid-template-columns: repeat(6, 1fr);

    column-gap: 14px;

    align-items: start;

}


/* =========================================================
   ROUTE PATH
========================================================= */

.vacationApproachPath {

    position: absolute;

    z-index: 1;

    top: 195px;

    left: 25px;

    right: 25px;

    height: 180px;

    pointer-events: none;

}

.vacationApproachPath svg {

    width: 100%;

    height: 100%;

    overflow: visible;

}

.vacationApproachPathBase {

    fill: none;

    stroke: rgba(212,175,55,.10);

    stroke-width: 3;

    stroke-linecap: round;

}

.vacationApproachPathDash {

    fill: none;

    stroke: rgba(212,175,55,.38);

    stroke-width: 2;

    stroke-linecap: round;

    stroke-dasharray: 7 11;

}


/* =========================================================
   STEP
========================================================= */

.vacationApproachStep {

    position: relative;

    z-index: 3;

    min-width: 0;

    min-height: 390px;

    padding: 22px 18px 25px;

    border: 2px solid rgba(212,175,55,.11);

    border-radius: 17px;

    background: var(--section);

    transition:

        transform .3s ease,

        border-color .3s ease,

        background .3s ease;

}

.vacationApproachStep:hover {

    transform: translateY(-5px);

    border-color: rgba(212,175,55,.27);

    background: rgba(212,175,55,.012);

}


/* =========================================================
   ALTERNATING POSITION
========================================================= */

.step01,
.step03,
.step05 {

    margin-top: 0;

}

.step02,
.step04,
.step06 {

    margin-top: 200px;

}


/* =========================================================
   NUMBER
========================================================= */

.vacationApproachNumber {

    position: absolute;

    top: 20px;

    right: 19px;

    color: #D4AF37;

    opacity: .30;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.3px;

}


/* =========================================================
   ICON
========================================================= */

.vacationApproachIcon {

    width: 54px;

    height: 54px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 25px;

    border-radius: 13px;

    color: #D4AF37;

    background: rgba(212,175,55,.035);

    border: 2px solid rgba(212,175,55,.13);

}

.vacationApproachIcon i {

    font-size: 16px;

    opacity: .72;

}


/* =========================================================
   LABEL
========================================================= */

.vacationApproachLabel {

    display: block;

    margin-bottom: 7px;

    color: #D4AF37;

    opacity: .40;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.4px;

}


/* =========================================================
   TITLE
========================================================= */

.vacationApproachStep h3 {

    margin: 0 0 11px;

    color: var(--primary);

    font-size: 21px;

    font-weight: 600;

    line-height: 1.3;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.vacationApproachStep p {

    margin: 0;

    color: var(--text);

    opacity: .53;

    font-size: 13.5px;

    line-height: 1.75;

}


/* =========================================================
   SUMMARY
========================================================= */

.vacationApproachSummary {

    display: flex;

    align-items: center;

    gap: 17px;

    width: fit-content;

    max-width: 100%;

    margin: 15px auto 0;

    padding: 17px 22px;

    border: 2px solid rgba(212,175,55,.11);

    border-radius: 12px;

    background: rgba(255,255,255,.005);

}

.vacationApproachSummaryIcon {

    width: 40px;

    height: 40px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #D4AF37;

    border: 2px solid rgba(212,175,55,.13);

}

.vacationApproachSummaryIcon i {

    font-size: 12px;

    transform: rotate(-12deg);

}

.vacationApproachSummary > div:last-child {

    display: flex;

    flex-direction: column;

    gap: 5px;

}

.vacationApproachSummary span {

    color: var(--text);

    opacity: .28;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.3px;

}

.vacationApproachSummary strong {

    color: #D4AF37;

    opacity: .65;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: .5px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .vacationApproach {

        padding: 95px 0;

    }

    .vacationApproachRoute {

        grid-template-columns: repeat(3, 1fr);

        gap: 18px;

        min-height: auto;

    }

    .vacationApproachPath {

        display: none;

    }

    .vacationApproachStep,
    .step01,
    .step02,
    .step03,
    .step04,
    .step05,
    .step06 {

        margin-top: 0;

        min-height: 310px;

    }

    .vacationApproachSummary {

        margin-top: 30px;

    }

}


/* =========================================================
   MOBILE / TABLET
========================================================= */

@media (max-width: 700px) {

    .vacationApproach {

        padding: 75px 0;

    }

    .vacationApproach .container {

        width: calc(100% - 30px);

    }

    .vacationApproachHeading {

        margin-bottom: 42px;

    }

    .vacationApproachPrefix {

        font-size: 11px;

    }

    .vacationApproachHeading h2 {

        font-size: 35px;

        letter-spacing: -1px;

    }

    .vacationApproachHeading p {

        font-size: 13.5px;

        line-height: 1.8;

    }


    /* Vertical route */

    .vacationApproachRoute {

        display: flex;

        flex-direction: column;

        gap: 14px;

        padding-left: 20px;

    }


    /* Vertical route line */

    .vacationApproachRoute::before {

        content: "";

        position: absolute;

        top: 25px;

        bottom: 25px;

        left: 0;

        width: 2px;

        background: rgba(212,175,55,.13);

    }


    .vacationApproachStep,
    .step01,
    .step02,
    .step03,
    .step04,
    .step05,
    .step06 {

        width: 100%;

        min-height: auto;

        margin-top: 0;

        padding: 22px 20px;

    }


    /* connector point */

    .vacationApproachStep::before {

        content: "";

        position: absolute;

        left: -25px;

        top: 27px;

        width: 9px;

        height: 9px;

        border-radius: 50%;

        background: #D4AF37;

        box-shadow:

            0 0 0 5px var(--section),

            0 0 0 7px rgba(212,175,55,.17);

    }


    .vacationApproachIcon {

        width: 47px;

        height: 47px;

        margin-bottom: 19px;

    }

    .vacationApproachStep h3 {

        font-size: 19px;

    }

    .vacationApproachStep p {

        font-size: 13px;

        line-height: 1.75;

    }


    /* Summary */

    .vacationApproachSummary {

        width: 100%;

        margin-top: 32px;

        padding: 16px;

    }

    .vacationApproachSummary strong {

        font-size: 8px;

        line-height: 1.7;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .vacationApproachHeading h2 {

        font-size: 30px;

    }

    .vacationApproachRoute {

        padding-left: 17px;

    }

    .vacationApproachStep {

        padding: 19px 17px;

    }

    .vacationApproachStep::before {

        left: -22px;

    }

    .vacationApproachStep h3 {

        font-size: 18px;

    }

    .vacationApproachStep p {

        font-size: 12.5px;

    }

}

/* Approach Section Ends Here */

/* Strategy Section Starts Here */

/* =========================================================
   DREAM VACATION
   FUNDING STRATEGIES
========================================================= */

.vacationStrategies {

    position: relative;

    padding: 115px 0;

    overflow: hidden;

    background: var(--section);

}

.vacationStrategies .container {

    width: min(1160px, 92%);

    margin: auto;

}


/* =========================================================
   HEADER
========================================================= */

.vacationStrategiesHeader {

    max-width: 760px;

    margin-bottom: 65px;

}

.vacationStrategiesPrefix {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 18px;

    color: #D4AF37;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.vacationStrategiesPrefix::before {

    content: "";

    width: 30px;

    height: 2px;

    background: #D4AF37;

}

.vacationStrategiesHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.5vw, 58px);

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -1.5px;

}

.vacationStrategiesHeader h2 span {

    display: block;

    color: #D4AF37;

}

.vacationStrategiesHeader p {

    max-width: 610px;

    margin: 20px 0 0;

    color: var(--text);

    opacity: .52;

    font-size: 15px;

    line-height: 1.8;

}


/* =========================================================
   GRID
========================================================= */

.vacationStrategiesGrid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 18px;

}


/* =========================================================
   STRATEGY
========================================================= */

.vacationStrategy {

    position: relative;

    min-height: 285px;

    display: flex;

    flex-direction: column;

    padding: 28px 30px 25px;

    overflow: hidden;

    border: 2px solid rgba(212,175,55,.12);

    border-radius: 18px;

    background: rgba(255,255,255,.006);

    transition:

        transform .3s ease,

        border-color .3s ease,

        background .3s ease;

}

.vacationStrategy:hover {

    transform: translateY(-4px);

    border-color: rgba(212,175,55,.28);

    background: rgba(212,175,55,.012);

}


/* subtle corner detail */

.vacationStrategy::after {

    content: "";

    position: absolute;

    width: 100px;

    height: 100px;

    right: -52px;

    bottom: -52px;

    border-radius: 50%;

    border: 2px solid rgba(212,175,55,.045);

}


/* =========================================================
   TOP
========================================================= */

.vacationStrategyTop {

    display: flex;

    align-items: center;

    gap: 14px;

}

.vacationStrategyNumber {

    color: #D4AF37;

    opacity: .38;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.3px;

}

.vacationStrategyIcon {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    color: #D4AF37;

    background: rgba(212,175,55,.035);

    border: 2px solid rgba(212,175,55,.13);

}

.vacationStrategyIcon i {

    font-size: 15px;

    opacity: .72;

}

.vacationStrategyTag {

    margin-left: auto;

    color: #D4AF37;

    opacity: .35;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.2px;

}


/* =========================================================
   BODY
========================================================= */

.vacationStrategyBody {

    margin-top: 29px;

    max-width: 500px;

}

.vacationStrategyBody h3 {

    margin: 0 0 11px;

    color: var(--primary);

    font-size: 22px;

    font-weight: 600;

    line-height: 1.3;

}

.vacationStrategyBody p {

    margin: 0;

    color: var(--text);

    opacity: .53;

    font-size: 14px;

    line-height: 1.8;

}


/* =========================================================
   PROGRESS LINE
========================================================= */

.vacationStrategyLine {

    position: relative;

    height: 2px;

    margin-top: auto;

    padding-top: 25px;

}

.vacationStrategyLine::before {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    top: 25px;

    height: 2px;

    background: rgba(212,175,55,.08);

}

.vacationStrategyLine span {

    position: absolute;

    left: 0;

    top: 25px;

    width: 28%;

    height: 2px;

    background: rgba(212,175,55,.45);

    transition: width .4s ease;

}

.vacationStrategy:hover
.vacationStrategyLine span {

    width: 58%;

}


/* =========================================================
   FOOTER
========================================================= */

.vacationStrategiesFooter {

    width: fit-content;

    max-width: 100%;

    display: flex;

    align-items: center;

    gap: 16px;

    margin: 42px auto 0;

    padding: 16px 22px;

    border: 2px solid rgba(212,175,55,.11);

    border-radius: 12px;

}

.vacationStrategiesFooterIcon {

    width: 40px;

    height: 40px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #D4AF37;

    border: 2px solid rgba(212,175,55,.13);

    border-radius: 50%;

}

.vacationStrategiesFooterIcon i {

    font-size: 12px;

}

.vacationStrategiesFooter > div:last-child {

    display: flex;

    flex-direction: column;

    gap: 5px;

}

.vacationStrategiesFooter span {

    color: var(--text);

    opacity: .27;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.3px;

}

.vacationStrategiesFooter strong {

    color: #D4AF37;

    opacity: .65;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: .6px;

}

.vacationStrategiesFooter strong b {

    padding: 0 7px;

    opacity: .55;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 850px) {

    .vacationStrategies {

        padding: 95px 0;

    }

    .vacationStrategiesGrid {

        grid-template-columns: 1fr;

    }

    .vacationStrategy {

        min-height: 245px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .vacationStrategies {

        padding: 75px 0;

    }

    .vacationStrategies .container {

        width: calc(100% - 30px);

    }

    .vacationStrategiesHeader {

        margin-bottom: 40px;

    }

    .vacationStrategiesPrefix {

        font-size: 11px;

    }

    .vacationStrategiesHeader h2 {

        font-size: 35px;

        letter-spacing: -1px;

    }

    .vacationStrategiesHeader p {

        font-size: 13.5px;

        line-height: 1.8;

    }


    /* Strategy */

    .vacationStrategiesGrid {

        gap: 13px;

    }

    .vacationStrategy {

        min-height: auto;

        padding: 23px 20px 22px;

        border-radius: 16px;

    }

    .vacationStrategyTop {

        gap: 11px;

    }

    .vacationStrategyIcon {

        width: 45px;

        height: 45px;

    }

    .vacationStrategyTag {

        font-size: 7px;

    }

    .vacationStrategyBody {

        margin-top: 23px;

    }

    .vacationStrategyBody h3 {

        font-size: 19px;

    }

    .vacationStrategyBody p {

        font-size: 13px;

        line-height: 1.75;

    }

    .vacationStrategyLine {

        margin-top: 24px;

    }


    /* Footer */

    .vacationStrategiesFooter {

        width: 100%;

        margin-top: 30px;

        padding: 14px 15px;

    }

    .vacationStrategiesFooter strong {

        font-size: 8px;

        line-height: 1.7;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .vacationStrategiesHeader h2 {

        font-size: 30px;

    }

    .vacationStrategy {

        padding: 20px 17px;

    }

    .vacationStrategyBody h3 {

        font-size: 18px;

    }

    .vacationStrategyBody p {

        font-size: 12.5px;

    }

    .vacationStrategyTag {

        display: none;

    }

}

/* Strategy Section Ends Here */

/* Journey Section Starts Here */

/* =========================================================
   DREAM VACATION
   JOURNEY SECTION
========================================================= */

.vacationJourney {

    position: relative;

    padding: 115px 0;

    overflow: hidden;

    background: var(--section);

}

.vacationJourney .container {

    width: min(1180px, 92%);

    margin: auto;

}


/* =========================================================
   HEADER
========================================================= */

.vacationJourneyHeader {

    max-width: 760px;

    margin-bottom: 85px;

}

.vacationJourneyPrefix {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 18px;

    color: #D4AF37;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.vacationJourneyPrefix::before {

    content: "";

    width: 30px;

    height: 2px;

    background: #D4AF37;

}

.vacationJourneyHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.5vw, 58px);

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -1.5px;

}

.vacationJourneyHeader h2 span {

    display: block;

    color: #D4AF37;

}

.vacationJourneyHeader p {

    max-width: 610px;

    margin: 20px 0 0;

    color: var(--text);

    opacity: .52;

    font-size: 15px;

    line-height: 1.8;

}


/* =========================================================
   JOURNEY TRACK
========================================================= */

.vacationJourneyTrack {

    position: relative;

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 18px;

    min-height: 455px;

}


/* =========================================================
   CONNECTING LINE
========================================================= */

.vacationJourneyLine {

    position: absolute;

    z-index: 0;

    left: 9%;

    right: 9%;

    top: 61px;

    height: 3px;

    background: rgba(212,175,55,.10);

}

.vacationJourneyProgress {

    width: 100%;

    height: 100%;

    background:

        repeating-linear-gradient(
            to right,
            rgba(212,175,55,.48) 0,
            rgba(212,175,55,.48) 8px,
            transparent 8px,
            transparent 17px
        );

}


/* =========================================================
   STAGE
========================================================= */

.vacationJourneyStage {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    padding: 0 10px;

}


/* =========================================================
   MARKER
========================================================= */

.vacationJourneyMarker {

    position: relative;

    width: 66px;

    height: 66px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #D4AF37;

    background: var(--section);

    border: 2px solid rgba(212,175,55,.18);

    box-shadow:

        0 0 0 8px var(--section),

        0 0 0 10px rgba(212,175,55,.06);

    transition: all .3s ease;

}

.vacationJourneyStage:hover
.vacationJourneyMarker {

    border-color: rgba(212,175,55,.40);

    transform: translateY(-3px);

}

.vacationJourneyMarker span {

    position: absolute;

    top: -5px;

    right: -7px;

    min-width: 21px;

    height: 21px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #111;

    background: #D4AF37;

    font-size: 8px;

    font-weight: 700;

}

.vacationJourneyMarker i {

    font-size: 17px;

    opacity: .72;

}

.vacationJourneyFinalMarker {

    background: rgba(212,175,55,.035);

    border-color: rgba(212,175,55,.30);

}


/* =========================================================
   STAGE CONTENT
========================================================= */

.vacationJourneyStageContent {

    max-width: 205px;

    margin-top: 40px;

}

.vacationJourneyLabel {

    display: block;

    margin-bottom: 9px;

    color: #D4AF37;

    opacity: .45;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.5px;

}

.vacationJourneyStageContent h3 {

    margin: 0 0 12px;

    color: var(--primary);

    font-size: 20px;

    font-weight: 600;

    line-height: 1.3;

}

.vacationJourneyStageContent p {

    margin: 0;

    color: var(--text);

    opacity: .52;

    font-size: 13.5px;

    line-height: 1.75;

}


/* =========================================================
   BOTTOM
========================================================= */

.vacationJourneyBottom {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 45px;

}

.vacationJourneyBottomLine {

    flex: 1;

    height: 2px;

    background: rgba(212,175,55,.10);

}

.vacationJourneyBottomContent {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 7px;

}

.vacationJourneyBottomContent span {

    color: var(--text);

    opacity: .27;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.4px;

}

.vacationJourneyBottomContent strong {

    color: #D4AF37;

    opacity: .68;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: .6px;

    white-space: nowrap;

}

.vacationJourneyBottomContent b {

    padding: 0 8px;

    opacity: .55;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .vacationJourney {

        padding: 95px 0;

    }

    .vacationJourneyTrack {

        grid-template-columns: repeat(3, 1fr);

        row-gap: 65px;

        min-height: auto;

    }

    .vacationJourneyLine {

        display: none;

    }

    .vacationJourneyStage {

        padding: 0 12px;

    }

    .vacationJourneyStageContent {

        max-width: 230px;

        margin-top: 30px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .vacationJourney {

        padding: 75px 0;

    }

    .vacationJourney .container {

        width: calc(100% - 30px);

    }

    .vacationJourneyHeader {

        margin-bottom: 42px;

    }

    .vacationJourneyPrefix {

        font-size: 11px;

    }

    .vacationJourneyHeader h2 {

        font-size: 35px;

        letter-spacing: -1px;

    }

    .vacationJourneyHeader p {

        font-size: 13.5px;

        line-height: 1.8;

    }


    /* Vertical journey */

    .vacationJourneyTrack {

        display: flex;

        flex-direction: column;

        gap: 0;

        padding-left: 28px;

    }


    /* Vertical line */

    .vacationJourneyTrack::before {

        content: "";

        position: absolute;

        z-index: 0;

        left: 0;

        top: 30px;

        bottom: 35px;

        width: 2px;

        background:

            repeating-linear-gradient(
                to bottom,
                rgba(212,175,55,.35) 0,
                rgba(212,175,55,.35) 8px,
                transparent 8px,
                transparent 17px
            );

    }


    .vacationJourneyStage {

        min-height: 0;

        display: grid;

        grid-template-columns: 55px 1fr;

        column-gap: 18px;

        align-items: start;

        padding: 0 0 42px;

        text-align: left;

    }


    .vacationJourneyStage:last-child {

        padding-bottom: 0;

    }


    /* Marker */

    .vacationJourneyMarker {

        width: 55px;

        height: 55px;

        box-shadow:

            0 0 0 6px var(--section);

    }

    .vacationJourneyMarker i {

        font-size: 14px;

    }


    /* Content */

    .vacationJourneyStageContent {

        max-width: none;

        margin-top: 2px;

    }

    .vacationJourneyLabel {

        margin-bottom: 7px;

        font-size: 8px;

    }

    .vacationJourneyStageContent h3 {

        font-size: 19px;

        margin-bottom: 8px;

    }

    .vacationJourneyStageContent p {

        font-size: 13px;

        line-height: 1.75;

    }


    /* Hide desktop line */

    .vacationJourneyLine {

        display: none;

    }


    /* Bottom */

    .vacationJourneyBottom {

        margin-top: 40px;

    }

    .vacationJourneyBottomLine {

        display: none;

    }

    .vacationJourneyBottomContent {

        width: 100%;

        padding: 17px 14px;

        border: 2px solid rgba(212,175,55,.10);

        border-radius: 11px;

    }

    .vacationJourneyBottomContent strong {

        font-size: 8px;

        line-height: 1.8;

        text-align: center;

        white-space: normal;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .vacationJourneyHeader h2 {

        font-size: 30px;

    }

    .vacationJourneyTrack {

        padding-left: 22px;

    }

    .vacationJourneyStage {

        grid-template-columns: 48px 1fr;

        column-gap: 15px;

        padding-bottom: 35px;

    }

    .vacationJourneyMarker {

        width: 48px;

        height: 48px;

    }

    .vacationJourneyMarker span {

        min-width: 19px;

        height: 19px;

        font-size: 7px;

    }

    .vacationJourneyStageContent h3 {

        font-size: 18px;

    }

    .vacationJourneyStageContent p {

        font-size: 12.5px;

    }

}

/* Journey Section Ends Here */

/* Who Section Starts Here */

/* =========================================================
   DREAM VACATION
   WHO IS IT FOR?
========================================================= */

.vacationProfiles {

    position: relative;

    padding: 115px 0;

    overflow: hidden;

    background: var(--section);

}

.vacationProfiles .container {

    width: min(1160px, 92%);

    margin: auto;

}


/* =========================================================
   HEADER
========================================================= */

.vacationProfilesHeader {

    max-width: 790px;

    margin-bottom: 65px;

}

.vacationProfilesPrefix {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 18px;

    color: #D4AF37;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.vacationProfilesPrefix::before {

    content: "";

    width: 30px;

    height: 2px;

    background: #D4AF37;

}

.vacationProfilesHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.5vw, 58px);

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -1.5px;

}

.vacationProfilesHeader h2 span {

    display: block;

    color: #D4AF37;

}

.vacationProfilesHeader p {

    max-width: 650px;

    margin: 20px 0 0;

    color: var(--text);

    opacity: .52;

    font-size: 15px;

    line-height: 1.8;

}


/* =========================================================
   PROFILE GRID
========================================================= */

.vacationProfilesGrid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    grid-auto-rows: minmax(300px, auto);

    gap: 17px;

}


/* =========================================================
   PROFILE
========================================================= */

.vacationProfile {

    position: relative;

    min-height: 300px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 28px 28px 25px;

    overflow: hidden;

    border: 2px solid rgba(212,175,55,.12);

    border-radius: 19px;

    background: rgba(255,255,255,.006);

    transition:

        transform .3s ease,

        border-color .3s ease,

        background .3s ease;

}

.vacationProfile:hover {

    transform: translateY(-5px);

    border-color: rgba(212,175,55,.27);

    background: rgba(212,175,55,.012);

}


/* =========================================================
   LARGE PROFILE
========================================================= */

.profileLarge {

    grid-row: span 2;

    min-height: 100%;

    padding: 32px;

}


/* =========================================================
   FEATURED PROFILE
========================================================= */

.profileFeatured {

    background:

        linear-gradient(
            145deg,
            rgba(212,175,55,.035),
            rgba(255,255,255,.005)
        );

}


/* =========================================================
   NUMBER
========================================================= */

.vacationProfileNumber {

    position: absolute;

    top: 25px;

    right: 27px;

    color: #D4AF37;

    opacity: .25;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.4px;

}


/* =========================================================
   ICON
========================================================= */

.vacationProfileIcon {

    width: 53px;

    height: 53px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    color: #D4AF37;

    background: rgba(212,175,55,.035);

    border: 2px solid rgba(212,175,55,.13);

}

.vacationProfileIcon i {

    font-size: 17px;

    opacity: .72;

}


/* =========================================================
   CONTENT
========================================================= */

.vacationProfileContent {

    position: relative;

    z-index: 2;

    margin-top: 35px;

}

.vacationProfileContent > span {

    display: block;

    margin-bottom: 8px;

    color: #D4AF37;

    opacity: .38;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.4px;

}

.vacationProfileContent h3 {

    max-width: 360px;

    margin: 0 35px 11px 0;

    color: var(--primary);

    font-size: 21px;

    font-weight: 600;

    line-height: 1.3;

}

.vacationProfileContent p {

    max-width: 430px;

    margin: 0;

    color: var(--text);

    opacity: .52;

    font-size: 13.5px;

    line-height: 1.78;

}


/* =========================================================
   ACCENT
========================================================= */

.vacationProfileAccent {

    position: absolute;

    left: 28px;

    bottom: 25px;

    width: 35px;

    height: 2px;

    background: rgba(212,175,55,.35);

    transition: width .35s ease;

}

.vacationProfile:hover .vacationProfileAccent {

    width: 75px;

}


/* =========================================================
   LARGE PROFILE DECORATION
========================================================= */

.profileLarge::after {

    content: "";

    position: absolute;

    width: 250px;

    height: 250px;

    right: -120px;

    top: 50%;

    transform: translateY(-50%);

    border: 2px solid rgba(212,175,55,.045);

    border-radius: 50%;

}

.profileLarge::before {

    content: "";

    position: absolute;

    width: 120px;

    height: 120px;

    right: -60px;

    top: 50%;

    transform: translateY(-50%);

    border: 2px solid rgba(212,175,55,.035);

    border-radius: 50%;

}


/* =========================================================
   BOTTOM
========================================================= */

.vacationProfilesBottom {

    width: fit-content;

    max-width: 100%;

    display: flex;

    align-items: center;

    gap: 15px;

    margin: 43px auto 0;

    padding: 15px 21px;

    border: 2px solid rgba(212,175,55,.11);

    border-radius: 12px;

}

.vacationProfilesBottomIcon {

    width: 40px;

    height: 40px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #D4AF37;

    border: 2px solid rgba(212,175,55,.13);

}

.vacationProfilesBottomIcon i {

    font-size: 12px;

}

.vacationProfilesBottom > div:last-child {

    display: flex;

    flex-direction: column;

    gap: 5px;

}

.vacationProfilesBottom span {

    color: var(--text);

    opacity: .27;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.3px;

}

.vacationProfilesBottom strong {

    color: #D4AF37;

    opacity: .65;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: .6px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .vacationProfiles {

        padding: 95px 0;

    }

    .vacationProfilesGrid {

        grid-template-columns: repeat(2, 1fr);

        grid-auto-rows: auto;

    }

    .profileLarge {

        grid-row: auto;

        min-height: 300px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .vacationProfiles {

        padding: 75px 0;

    }

    .vacationProfiles .container {

        width: calc(100% - 30px);

    }

    .vacationProfilesHeader {

        margin-bottom: 40px;

    }

    .vacationProfilesPrefix {

        font-size: 11px;

    }

    .vacationProfilesHeader h2 {

        font-size: 35px;

        letter-spacing: -1px;

    }

    .vacationProfilesHeader p {

        font-size: 13.5px;

        line-height: 1.8;

    }


    /* Grid */

    .vacationProfilesGrid {

        display: flex;

        flex-direction: column;

        gap: 13px;

    }

    .vacationProfile,
    .profileLarge {

        min-height: auto;

        padding: 23px 20px 25px;

        border-radius: 16px;

    }

    .vacationProfileIcon {

        width: 47px;

        height: 47px;

    }

    .vacationProfileContent {

        margin-top: 27px;

    }

    .vacationProfileContent h3 {

        font-size: 19px;

    }

    .vacationProfileContent p {

        font-size: 13px;

        line-height: 1.75;

    }

    .vacationProfileAccent {

        position: relative;

        left: auto;

        bottom: auto;

        margin-top: 23px;

    }


    /* Bottom */

    .vacationProfilesBottom {

        width: 100%;

        margin-top: 30px;

        padding: 14px 15px;

    }

    .vacationProfilesBottom strong {

        font-size: 8px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .vacationProfilesHeader h2 {

        font-size: 30px;

    }

    .vacationProfile,
    .profileLarge {

        padding: 20px 17px 22px;

    }

    .vacationProfileContent h3 {

        font-size: 18px;

    }

    .vacationProfileContent p {

        font-size: 12.5px;

    }

}

/* Who Section Ends Here */

/* Benefits Section Starts Here */

/* =========================================================
   DREAM VACATION
   PROFESSIONAL BENEFITS
========================================================= */

.vacationBenefits {

    position: relative;

    padding: 115px 0;

    overflow: hidden;

    background: var(--section);

}

.vacationBenefits .container {

    width: min(1160px, 92%);

    margin: auto;

}


/* =========================================================
   HEADER
========================================================= */

.vacationBenefitsHeader {

    max-width: 650px;

    margin-bottom: 70px;

}

.vacationBenefitsPrefix {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 18px;

    color: #D4AF37;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.vacationBenefitsPrefix::before {

    content: "";

    width: 30px;

    height: 2px;

    background: #D4AF37;

}

.vacationBenefitsHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.5vw, 58px);

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -1.5px;

}

.vacationBenefitsHeader h2 span {

    display: block;

    color: #D4AF37;

}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.vacationBenefitsLayout {

    display: grid;

    grid-template-columns: .82fr 1.18fr;

    gap: 65px;

    align-items: start;

}


/* =========================================================
   EDITORIAL PANEL
========================================================= */

.vacationBenefitsEditorial {

    position: sticky;

    top: 100px;

    min-height: 520px;

    padding: 36px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    overflow: hidden;

    border: 2px solid rgba(212,175,55,.12);

    border-radius: 21px;

    background: rgba(255,255,255,.006);

}

.vacationBenefitsEditorial::before {

    content: "";

    position: absolute;

    width: 300px;

    height: 300px;

    right: -155px;

    top: -155px;

    border: 2px solid rgba(212,175,55,.045);

    border-radius: 50%;

}

.vacationBenefitsEditorial::after {

    content: "";

    position: absolute;

    width: 170px;

    height: 170px;

    right: -85px;

    top: -85px;

    border: 2px solid rgba(212,175,55,.035);

    border-radius: 50%;

}


/* =========================================================
   ROUTE DETAIL
========================================================= */

.vacationBenefitsRoute {

    position: absolute;

    top: 36px;

    left: 36px;

    display: flex;

    align-items: center;

    gap: 8px;

}

.vacationBenefitsRouteDot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #D4AF37;

    opacity: .55;

}

.vacationBenefitsRouteLine {

    width: 32px;

    height: 2px;

    background: rgba(212,175,55,.17);

}


/* =========================================================
   EDITORIAL ICON
========================================================= */

.vacationBenefitsEditorialIcon {

    position: relative;

    z-index: 2;

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 24px;

    border-radius: 15px;

    color: #D4AF37;

    background: rgba(212,175,55,.035);

    border: 2px solid rgba(212,175,55,.13);

}

.vacationBenefitsEditorialIcon i {

    font-size: 18px;

    opacity: .72;

}


/* =========================================================
   EDITORIAL CONTENT
========================================================= */

.vacationBenefitsEditorialLabel {

    position: relative;

    z-index: 2;

    display: block;

    margin-bottom: 10px;

    color: #D4AF37;

    opacity: .38;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.4px;

}

.vacationBenefitsEditorial h3 {

    position: relative;

    z-index: 2;

    max-width: 400px;

    margin: 0 0 17px;

    color: var(--primary);

    font-size: 30px;

    font-weight: 600;

    line-height: 1.2;

    letter-spacing: -.5px;

}

.vacationBenefitsEditorial h3 span {

    display: block;

    color: #D4AF37;

}

.vacationBenefitsEditorial p {

    position: relative;

    z-index: 2;

    max-width: 430px;

    margin: 0 0 32px;

    color: var(--text);

    opacity: .52;

    font-size: 14px;

    line-height: 1.8;

}


/* =========================================================
   DESTINATION DETAIL
========================================================= */

.vacationBenefitsDestination {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 12px;

    width: fit-content;

    padding-top: 20px;

    border-top: 2px solid rgba(212,175,55,.09);

}

.vacationBenefitsDestination > i {

    width: 41px;

    height: 41px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #D4AF37;

    border: 2px solid rgba(212,175,55,.13);

    background: rgba(212,175,55,.025);

    font-size: 12px;

}

.vacationBenefitsDestination div {

    display: flex;

    flex-direction: column;

    gap: 4px;

}

.vacationBenefitsDestination span {

    color: var(--text);

    opacity: .25;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.2px;

}

.vacationBenefitsDestination strong {

    color: #D4AF37;

    opacity: .62;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: .4px;

}


/* =========================================================
   BENEFITS LIST
========================================================= */

.vacationBenefitsList {

    display: flex;

    flex-direction: column;

    border-top: 2px solid rgba(212,175,55,.11);

}


/* =========================================================
   BENEFIT ROW
========================================================= */

.vacationBenefit {

    position: relative;

    display: grid;

    grid-template-columns: 35px 52px 1fr;

    align-items: start;

    gap: 18px;

    padding: 27px 20px 27px 0;

    border-bottom: 2px solid rgba(212,175,55,.11);

    transition:

        background .3s ease,

        padding-left .3s ease;

}

.vacationBenefit:hover {

    padding-left: 12px;

    background: rgba(212,175,55,.008);

}


/* =========================================================
   NUMBER
========================================================= */

.vacationBenefitNumber {

    padding-top: 14px;

    color: #D4AF37;

    opacity: .28;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.3px;

}


/* =========================================================
   ICON
========================================================= */

.vacationBenefitIcon {

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    color: #D4AF37;

    background: rgba(212,175,55,.035);

    border: 2px solid rgba(212,175,55,.12);

}

.vacationBenefitIcon i {

    font-size: 15px;

    opacity: .70;

}


/* =========================================================
   CONTENT
========================================================= */

.vacationBenefitContent {

    padding-top: 2px;

}

.vacationBenefitContent h3 {

    margin: 0 0 8px;

    color: var(--primary);

    font-size: 20px;

    font-weight: 600;

    line-height: 1.35;

}

.vacationBenefitContent p {

    max-width: 590px;

    margin: 0;

    color: var(--text);

    opacity: .52;

    font-size: 13.5px;

    line-height: 1.75;

}


/* =========================================================
   FEATURED FINAL BENEFIT
========================================================= */

.vacationBenefitFeatured {

    padding-top: 31px;

    padding-bottom: 31px;

    background:

        linear-gradient(
            90deg,
            rgba(212,175,55,.018),
            transparent
        );

}

.vacationBenefitFeatured
.vacationBenefitIcon {

    border-color: rgba(212,175,55,.20);

}


/* =========================================================
   BOTTOM
========================================================= */

.vacationBenefitsBottom {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 58px;

}

.vacationBenefitsBottom > span {

    flex: 1;

    height: 2px;

    background: rgba(212,175,55,.09);

}

.vacationBenefitsBottom p {

    margin: 0;

    color: var(--text);

    opacity: .30;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.4px;

    white-space: nowrap;

}

.vacationBenefitsBottom strong {

    padding: 0 8px;

    color: #D4AF37;

    opacity: .70;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .vacationBenefits {

        padding: 95px 0;

    }

    .vacationBenefitsLayout {

        grid-template-columns: 1fr;

        gap: 45px;

    }

    .vacationBenefitsEditorial {

        position: relative;

        top: auto;

        min-height: 360px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .vacationBenefits {

        padding: 75px 0;

    }

    .vacationBenefits .container {

        width: calc(100% - 30px);

    }

    .vacationBenefitsHeader {

        margin-bottom: 42px;

    }

    .vacationBenefitsPrefix {

        font-size: 11px;

    }

    .vacationBenefitsHeader h2 {

        font-size: 35px;

        letter-spacing: -1px;

    }


    /* Editorial */

    .vacationBenefitsEditorial {

        min-height: 340px;

        padding: 27px 21px;

        border-radius: 17px;

    }

    .vacationBenefitsRoute {

        top: 27px;

        left: 21px;

    }

    .vacationBenefitsEditorialIcon {

        width: 49px;

        height: 49px;

        margin-bottom: 20px;

    }

    .vacationBenefitsEditorial h3 {

        font-size: 27px;

    }

    .vacationBenefitsEditorial p {

        font-size: 13.5px;

        line-height: 1.8;

        margin-bottom: 25px;

    }


    /* Benefits */

    .vacationBenefit {

        grid-template-columns: 28px 47px 1fr;

        gap: 12px;

        padding: 22px 0;

    }

    .vacationBenefit:hover {

        padding-left: 0;

    }

    .vacationBenefitNumber {

        padding-top: 12px;

        font-size: 8px;

    }

    .vacationBenefitIcon {

        width: 47px;

        height: 47px;

    }

    .vacationBenefitContent h3 {

        font-size: 18px;

    }

    .vacationBenefitContent p {

        font-size: 13px;

        line-height: 1.75;

    }


    /* Bottom */

    .vacationBenefitsBottom {

        margin-top: 40px;

    }

    .vacationBenefitsBottom > span {

        display: none;

    }

    .vacationBenefitsBottom p {

        width: 100%;

        text-align: center;

        white-space: normal;

        line-height: 1.8;

        font-size: 8px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .vacationBenefitsHeader h2 {

        font-size: 30px;

    }

    .vacationBenefitsEditorial {

        min-height: 325px;

        padding: 23px 18px;

    }

    .vacationBenefitsEditorial h3 {

        font-size: 24px;

    }

    .vacationBenefitsEditorial p {

        font-size: 13px;

    }

    .vacationBenefit {

        grid-template-columns: 24px 43px 1fr;

        gap: 10px;

    }

    .vacationBenefitIcon {

        width: 43px;

        height: 43px;

    }

    .vacationBenefitContent h3 {

        font-size: 17px;

    }

    .vacationBenefitContent p {

        font-size: 12.5px;

    }

}

/* Benefits Section Ends Here */

/* CTA Section Starts Here */

/* =========================================================
   DREAM VACATION
   FINAL CTA
========================================================= */

.vacationFinalCta {

    position: relative;

    padding: 105px 0 115px;

    overflow: hidden;

    background: var(--section);

}

.vacationFinalCta .container {

    width: min(1160px, 92%);

    margin: auto;

}


/* =========================================================
   CTA BOX
========================================================= */

.vacationFinalCtaBox {

    position: relative;

    display: grid;

    grid-template-columns: 1.1fr .9fr;

    align-items: center;

    gap: 75px;

    padding: 65px 70px;

    overflow: hidden;

    border: 2px solid rgba(212,175,55,.14);

    border-radius: 25px;

    background:

        linear-gradient(
            120deg,
            rgba(212,175,55,.018),
            rgba(255,255,255,.004)
        );

}


/* subtle corner circle */

.vacationFinalCtaBox::before {

    content: "";

    position: absolute;

    width: 360px;

    height: 360px;

    right: -210px;

    top: -190px;

    border-radius: 50%;

    border: 2px solid rgba(212,175,55,.045);

}

.vacationFinalCtaBox::after {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    left: -110px;

    bottom: -110px;

    border-radius: 50%;

    border: 2px solid rgba(212,175,55,.035);

}


/* =========================================================
   CONTENT
========================================================= */

.vacationFinalCtaContent {

    position: relative;

    z-index: 2;

    max-width: 690px;

}

.vacationFinalCtaPrefix {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 18px;

    color: #D4AF37;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}

.vacationFinalCtaPrefix::before {

    content: "";

    width: 30px;

    height: 2px;

    background: #D4AF37;

}

.vacationFinalCtaContent h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(38px, 4.2vw, 55px);

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -1.5px;

}

.vacationFinalCtaContent h2 span {

    display: block;

    color: #D4AF37;

}

.vacationFinalCtaContent p {

    max-width: 630px;

    margin: 24px 0 0;

    color: var(--text);

    opacity: .55;

    font-size: 15px;

    line-height: 1.85;

}


/* =========================================================
   BUTTONS
========================================================= */

.vacationFinalCtaButtons {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: 32px;

}

.vacationFinalCtaPrimary,
.vacationFinalCtaSecondary {

    min-height: 49px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 8px;

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

    transition:

        transform .25s ease,

        border-color .25s ease,

        background .25s ease;

}


/* Primary */

.vacationFinalCtaPrimary {

    gap: 13px;

    padding: 0 20px;

    color: #111;

    background: #D4AF37;

}

.vacationFinalCtaPrimary i {

    font-size: 11px;

    transition: transform .25s ease;

}

.vacationFinalCtaPrimary:hover {

    transform: translateY(-2px);

}

.vacationFinalCtaPrimary:hover i {

    transform: translateX(4px);

}


/* Secondary */

.vacationFinalCtaSecondary {

    padding: 0 20px;

    color: var(--primary);

    border: 2px solid rgba(212,175,55,.18);

    background: transparent;

}

.vacationFinalCtaSecondary:hover {

    transform: translateY(-2px);

    border-color: rgba(212,175,55,.40);

    background: rgba(212,175,55,.025);

}


/* =========================================================
   VISUAL
========================================================= */

.vacationFinalCtaVisual {

    position: relative;

    z-index: 2;

    min-height: 320px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 25px 0;

}

.vacationFinalCtaVisualLabel {

    position: absolute;

    top: 0;

    right: 0;

    color: var(--text);

    opacity: .25;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.4px;

}


/* =========================================================
   ROUTE
========================================================= */

.vacationFinalCtaRoute {

    position: relative;

    width: 100%;

    height: 240px;

}


/* SVG */

.vacationRoutePath {

    position: absolute;

    inset: 0;

}

.vacationRoutePath svg {

    width: 100%;

    height: 100%;

    overflow: visible;

}


/* =========================================================
   AIRPLANE ROUTE
========================================================= */

.vacationRouteDashed {

    fill: none;

    stroke: rgba(212,175,55,.28);

    stroke-width: 2;

    stroke-linecap: round;

    stroke-dasharray: 7 10;

}


/* =========================================================
   GROWTH CURVE
========================================================= */

.vacationGrowthCurve {

    fill: none;

    stroke: rgba(212,175,55,.18);

    stroke-width: 2;

    stroke-linecap: round;

}


/* =========================================================
   ROUTE START
========================================================= */

.vacationRouteStart {

    position: absolute;

    left: 2%;

    bottom: 17%;

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: rgba(212,175,55,.45);

    box-shadow:

        0 0 0 7px rgba(212,175,55,.04);

}


/* =========================================================
   PLANE
========================================================= */

.vacationRoutePlane {

    position: absolute;

    left: 51%;

    top: 37%;

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #D4AF37;

    background: var(--section);

    border: 2px solid rgba(212,175,55,.17);

    box-shadow:

        0 0 0 7px var(--section),

        0 0 0 9px rgba(212,175,55,.045);

}

.vacationRoutePlane i {

    font-size: 13px;

    transform: rotate(-15deg);

    opacity: .72;

}


/* =========================================================
   DESTINATION
========================================================= */

.vacationRouteDestination {

    position: absolute;

    right: 0;

    top: 5%;

    display: flex;

    align-items: center;

    gap: 8px;

}

.vacationDestinationDot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #D4AF37;

    box-shadow:

        0 0 0 7px rgba(212,175,55,.045);

}

.vacationRouteDestination i {

    color: #D4AF37;

    font-size: 13px;

    opacity: .65;

}

.vacationRouteDestination span {

    color: var(--text);

    opacity: .34;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.1px;

}


/* =========================================================
   COMPASS
========================================================= */

.vacationRouteCompass {

    position: absolute;

    left: 6%;

    top: 5%;

    width: 43px;

    height: 43px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #D4AF37;

    border: 2px solid rgba(212,175,55,.11);

    border-radius: 50%;

}

.vacationRouteCompass i {

    font-size: 14px;

    opacity: .45;

}


/* =========================================================
   VISUAL FOOTER
========================================================= */

.vacationFinalCtaVisualFooter {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding-top: 13px;

    border-top: 2px solid rgba(212,175,55,.08);

}

.vacationFinalCtaVisualFooter span {

    color: var(--text);

    opacity: .30;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.3px;

}

.vacationFinalCtaVisualFooter b {

    color: #D4AF37;

    opacity: .55;

    font-size: 9px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .vacationFinalCta {

        padding: 90px 0 95px;

    }

    .vacationFinalCtaBox {

        grid-template-columns: 1fr;

        gap: 45px;

        padding: 55px 50px;

    }

    .vacationFinalCtaVisual {

        min-height: 280px;

        max-width: 650px;

        width: 100%;

        margin: auto;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .vacationFinalCta {

        padding: 70px 0 80px;

    }

    .vacationFinalCta .container {

        width: calc(100% - 30px);

    }

    .vacationFinalCtaBox {

        gap: 35px;

        padding: 38px 22px;

        border-radius: 19px;

    }

    .vacationFinalCtaPrefix {

        font-size: 11px;

    }

    .vacationFinalCtaContent h2 {

        font-size: 34px;

        letter-spacing: -1px;

    }

    .vacationFinalCtaContent p {

        margin-top: 20px;

        font-size: 13.5px;

        line-height: 1.8;

    }


    /* Buttons */

    .vacationFinalCtaButtons {

        flex-direction: column;

        align-items: stretch;

        margin-top: 27px;

    }

    .vacationFinalCtaPrimary,
    .vacationFinalCtaSecondary {

        width: 100%;

    }


    /* Visual */

    .vacationFinalCtaVisual {

        min-height: 235px;

        padding-top: 20px;

    }

    .vacationFinalCtaVisualLabel {

        top: 0;

    }

    .vacationFinalCtaRoute {

        height: 190px;

    }

    .vacationRouteDestination span {

        font-size: 7px;

    }

    .vacationRoutePlane {

        width: 37px;

        height: 37px;

    }

    .vacationRouteCompass {

        width: 38px;

        height: 38px;

    }

    .vacationFinalCtaVisualFooter {

        padding-top: 10px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .vacationFinalCtaContent h2 {

        font-size: 29px;

    }

    .vacationFinalCtaBox {

        padding: 32px 18px;

    }

    .vacationFinalCtaVisual {

        min-height: 210px;

    }

    .vacationFinalCtaRoute {

        height: 170px;

    }

    .vacationRouteDestination {

        right: -2px;

    }

    .vacationRouteDestination i {

        display: none;

    }

    .vacationRouteDestination span {

        font-size: 6.5px;

    }

}

/* CTA Section Ends Here */

/* Dream Vacation Planning Page Ends Here */


/* Dream House Planning Page Starts Here */

/* Hero Section Starts Here */

/* =========================================================
   DREAM HOUSE PLANNING
   PREMIUM HERO
========================================================= */

.housePlanningHero {

    position: relative;

    padding: 110px 0 95px;

    overflow: hidden;

    background: var(--section);

}


/* subtle page atmosphere */

.housePlanningHero::before {

    content: "";

    position: absolute;

    width: 650px;

    height: 650px;

    right: -360px;

    top: -320px;

    border-radius: 50%;

    border: 2px solid rgba(196,155,40,.035);

    pointer-events: none;

}

.housePlanningHero::after {

    content: "";

    position: absolute;

    width: 400px;

    height: 400px;

    left: -300px;

    bottom: -300px;

    border-radius: 50%;

    border: 2px solid rgba(196,155,40,.025);

    pointer-events: none;

}


.housePlanningHero .container {

    width: min(1180px, 92%);

    margin: auto;

}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.housePlanningHeroInner {

    display: grid;

    grid-template-columns: .94fr 1.06fr;

    align-items: center;

    gap: 75px;

}


/* =========================================================
   CONTENT
========================================================= */

.housePlanningHeroContent {

    max-width: 650px;

}

.housePlanningEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 21px;

}

.housePlanningEyebrow span {

    width: 31px;

    height: 2px;

    background: #c49b28;

}

.housePlanningEyebrow p {

    margin: 0;

    color: #b88e21;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.housePlanningHeroContent h1 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(44px, 5vw, 66px);

    font-weight: 600;

    line-height: 1.05;

    letter-spacing: -2px;

}

.housePlanningHeroContent h1 strong {

    display: block;

    color: #b88e21;

    font-weight: 600;

}


.housePlanningDescription {

    max-width: 620px;

    margin: 28px 0 0;

    color: var(--text);

    opacity: .56;

    font-size: 15px;

    line-height: 1.85;

}


/* =========================================================
   ACTIONS
========================================================= */

.housePlanningActions {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: 33px;

}

.housePlanningPrimary,
.housePlanningSecondary {

    min-height: 51px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 8px;

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

    transition: all .25s ease;

}


.housePlanningPrimary {

    gap: 13px;

    padding: 0 21px;

    color: #111;

    background: #c49b28;

}

.housePlanningPrimary i {

    font-size: 11px;

    transition: transform .25s ease;

}

.housePlanningPrimary:hover {

    transform: translateY(-2px);

}

.housePlanningPrimary:hover i {

    transform: translateX(4px);

}


.housePlanningSecondary {

    padding: 0 21px;

    color: var(--primary);

    border: 2px solid rgba(196,155,40,.18);

}

.housePlanningSecondary:hover {

    transform: translateY(-2px);

    border-color: rgba(196,155,40,.42);

}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.housePlanningVisual {

    position: relative;

    min-height: 535px;

}


.housePlanningVisualInner {

    position: relative;

    width: 100%;

    height: 535px;

}


/* =========================================================
   ARCHITECTURAL FRAME
========================================================= */

.architecturalFrame {

    position: absolute;

    left: 9%;

    top: 6%;

    width: 72%;

    height: 78%;

    border: 2px solid rgba(196,155,40,.12);

}


.frameCorner {

    position: absolute;

    width: 35px;

    height: 35px;

}

.frameCornerTL {

    left: -2px;

    top: -2px;

    border-left: 3px solid #c49b28;

    border-top: 3px solid #c49b28;

}

.frameCornerTR {

    right: -2px;

    top: -2px;

    border-right: 3px solid #c49b28;

    border-top: 3px solid #c49b28;

}

.frameCornerBL {

    left: -2px;

    bottom: -2px;

    border-left: 3px solid #c49b28;

    border-bottom: 3px solid #c49b28;

}

.frameCornerBR {

    right: -2px;

    bottom: -2px;

    border-right: 3px solid #c49b28;

    border-bottom: 3px solid #c49b28;

}


.frameVertical {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 50%;

    width: 2px;

    background: rgba(196,155,40,.045);

}


.frameHorizontal {

    position: absolute;

    left: 0;

    right: 0;

    top: 54%;

    height: 2px;

    background: rgba(196,155,40,.045);

}


.frameNumber {

    position: absolute;

    top: 20px;

    right: 22px;

    color: #c49b28;

    opacity: .48;

    font-size: 11px;

    font-weight: 700;

}


.frameTitle {

    position: absolute;

    left: 23px;

    top: 21px;

    color: var(--text);

    opacity: .25;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.5px;

}

.frameTitle span {

    display: block;

    margin-top: 4px;

}


/* =========================================================
   PLANNING JOURNEY
========================================================= */

.planningJourney {

    position: absolute;

    z-index: 4;

    left: 3%;

    right: 3%;

    top: 12%;

    height: 60%;

}


/* vertical elegant line */

.journeyLine {

    position: absolute;

    left: 50%;

    top: 3%;

    bottom: 3%;

    width: 2px;

    background:

        linear-gradient(
            to bottom,
            rgba(196,155,40,.04),
            rgba(196,155,40,.24),
            rgba(196,155,40,.04)
        );

}


/* steps */

.journeyStep {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 11px;

}


.journeyStepOne {

    top: 5%;

    left: 8%;

}

.journeyStepTwo {

    top: 31%;

    right: 5%;

}

.journeyStepThree {

    top: 57%;

    left: 7%;

}

.journeyStepFour {

    top: 82%;

    right: 5%;

}


/* dots */

.journeyDot {

    width: 11px;

    height: 11px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--section);

    border: 2px solid #c49b28;

    box-shadow:

        0 0 0 6px rgba(196,155,40,.035);

}


/* text */

.journeyText {

    display: flex;

    flex-direction: column;

    gap: 3px;

}

.journeyText span {

    color: #c49b28;

    opacity: .45;

    font-size: 8px;

    font-weight: 700;

}

.journeyText strong {

    color: var(--primary);

    opacity: .65;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .8px;

}

.journeyText p {

    margin: 0;

    color: var(--text);

    opacity: .32;

    font-size: 9px;

}


/* =========================================================
   GROWTH PATH
========================================================= */

.planningGrowth {

    position: absolute;

    z-index: 3;

    inset: 7% 0 9%;

    width: 100%;

    height: 84%;

    pointer-events: none;

}


.planningGrowth path {

    fill: none;

    stroke: rgba(196,155,40,.25);

    stroke-width: 2;

    stroke-linecap: round;

    stroke-dasharray: 7 11;

}


/* =========================================================
   FINANCIAL CORE
========================================================= */

.financialMark {

    position: absolute;

    z-index: 8;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

}


.financialMarkCircle {

    width: 76px;

    height: 76px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--section);

    border: 2px solid rgba(196,155,40,.20);

    box-shadow:

        0 0 0 10px rgba(196,155,40,.025);

}


.financialMarkCircle i {

    color: #b88e21;

    font-size: 23px;

}


.financialMarkText {

    margin-top: 17px;

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.financialMarkText span {

    color: var(--text);

    opacity: .25;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.2px;

}


.financialMarkText strong {

    color: #b88e21;

    opacity: .68;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: .5px;

}


/* =========================================================
   GOAL MARKER
========================================================= */

.goalMarker {

    position: absolute;

    z-index: 8;

    right: 4%;

    top: 10%;

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #b88e21;

    border: 2px solid rgba(196,155,40,.13);

    background: var(--section);

}


.goalMarker i {

    font-size: 13px;

    opacity: .55;

}


/* =========================================================
   BOTTOM STATEMENT
========================================================= */

.visualStatement {

    position: absolute;

    left: 8%;

    right: 8%;

    bottom: 4%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    padding-top: 18px;

    border-top: 2px solid rgba(196,155,40,.08);

}


.visualStatement span {

    color: var(--text);

    opacity: .30;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.3px;

}

.visualStatement b {

    color: #c49b28;

    opacity: .45;

    font-size: 10px;

}

.visualStatement strong {

    color: #b88e21;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.3px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .housePlanningHero {

        padding: 90px 0 75px;

    }

    .housePlanningHeroInner {

        grid-template-columns: 1fr;

        gap: 55px;

    }

    .housePlanningHeroContent {

        max-width: 760px;

    }

    .housePlanningVisual {

        width: 100%;

        max-width: 760px;

        margin: auto;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .housePlanningHero {

        padding: 70px 0 60px;

    }

    .housePlanningHero .container {

        width: calc(100% - 30px);

    }

    .housePlanningHeroInner {

        gap: 40px;

    }


    /* content */

    .housePlanningEyebrow p {

        font-size: 11px;

    }

    .housePlanningHeroContent h1 {

        font-size: 36px;

        line-height: 1.08;

        letter-spacing: -1px;

    }

    .housePlanningDescription {

        margin-top: 22px;

        font-size: 13.5px;

        line-height: 1.8;

    }


    /* buttons */

    .housePlanningActions {

        flex-direction: column;

        align-items: stretch;

        margin-top: 27px;

    }

    .housePlanningPrimary,
    .housePlanningSecondary {

        width: 100%;

    }


    /* visual */

    .housePlanningVisual {

        min-height: 430px;

    }

    .housePlanningVisualInner {

        height: 430px;

    }

    .architecturalFrame {

        left: 4%;

        width: 92%;

        height: 76%;

    }

    .planningJourney {

        left: 0;

        right: 0;

    }

    .journeyStepOne {

        left: 3%;

    }

    .journeyStepTwo {

        right: 2%;

    }

    .journeyStepThree {

        left: 3%;

    }

    .journeyStepFour {

        right: 2%;

    }

    .journeyText p {

        font-size: 8px;

    }

    .financialMark {

        transform: translate(-50%, -50%) scale(.86);

    }

    .goalMarker {

        right: 1%;

    }

    .visualStatement {

        left: 2%;

        right: 2%;

        gap: 9px;

    }

    .visualStatement span,
    .visualStatement strong {

        font-size: 7px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .housePlanningHeroContent h1 {

        font-size: 31px;

    }

    .housePlanningDescription {

        font-size: 13px;

    }

    .housePlanningVisual {

        min-height: 390px;

    }

    .housePlanningVisualInner {

        height: 390px;

    }

    .architecturalFrame {

        top: 7%;

        height: 74%;

    }

    .planningJourney {

        transform: scale(.86);

        transform-origin: center;

    }

    .financialMark {

        transform: translate(-50%, -50%) scale(.72);

    }

    .journeyText strong {

        font-size: 9px;

    }

    .journeyText p {

        font-size: 7px;

    }

    .visualStatement {

        gap: 6px;

    }

}

/* Hero Section Ends Here */

/* Intro Section Starts Here */

/* =========================================================
   DREAM HOUSE PLANNING
   INTRODUCTION SECTION
========================================================= */

.houseIntro {

    position: relative;

    padding: 105px 0 110px;

    overflow: hidden;

    background: var(--section);

}

.houseIntro .container {

    width: min(1180px, 92%);

    margin: auto;

}


/* =========================================================
   TOP EDITORIAL AREA
========================================================= */

.houseIntroTop {

    display: grid;

    grid-template-columns: .82fr 1.18fr;

    gap: 90px;

    align-items: start;

}


/* =========================================================
   LEFT HEADING
========================================================= */

.houseIntroHeading {

    position: sticky;

    top: 100px;

}

.houseIntroEyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

}

.houseIntroEyebrow span {

    width: 28px;

    height: 2px;

    background: #c49b28;

}

.houseIntroEyebrow p {

    margin: 0;

    color: #b88e21;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.4px;

    text-transform: uppercase;

}


.houseIntroHeading h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(38px, 4vw, 55px);

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -1.5px;

}

.houseIntroHeading h2 strong {

    display: block;

    color: #b88e21;

    font-weight: 600;

}


/* =========================================================
   CONTENT
========================================================= */

.houseIntroContent {

    padding-top: 5px;

    max-width: 690px;

}

.houseIntroContent p {

    margin: 0;

    color: var(--text);

    opacity: .57;

    font-size: 15px;

    line-height: 1.9;

}

.houseIntroContent p + p {

    margin-top: 22px;

}


/* =========================================================
   HIGHLIGHTS
========================================================= */

.houseIntroHighlights {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    margin-top: 85px;

    border-top: 2px solid rgba(196,155,40,.13);

    border-bottom: 2px solid rgba(196,155,40,.13);

}


/* =========================================================
   INDIVIDUAL HIGHLIGHT
========================================================= */

.houseIntroHighlight {

    position: relative;

    min-height: 220px;

    padding: 32px 30px 34px;

}

.houseIntroHighlight + .houseIntroHighlight {

    border-left: 2px solid rgba(196,155,40,.10);

}


/* number */

.houseIntroHighlightNumber {

    position: absolute;

    top: 28px;

    right: 27px;

    color: #b88e21;

    opacity: .40;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;

}


/* icon */

.houseIntroHighlightIcon {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 25px;

    border: 2px solid rgba(196,155,40,.14);

    border-radius: 50%;

    color: #b88e21;

    background: rgba(196,155,40,.025);

}

.houseIntroHighlightIcon i {

    font-size: 15px;

    opacity: .75;

}


/* text */

.houseIntroHighlightText h3 {

    margin: 0;

    color: var(--primary);

    font-size: 20px;

    font-weight: 600;

    line-height: 1.25;

}

.houseIntroHighlightText p {

    max-width: 310px;

    margin: 12px 0 0;

    color: var(--text);

    opacity: .52;

    font-size: 13.5px;

    line-height: 1.75;

}


/* =========================================================
   BOTTOM STATEMENT
========================================================= */

.houseIntroStatement {

    display: flex;

    align-items: center;

    gap: 13px;

    max-width: 720px;

    margin: 40px auto 0;

    justify-content: center;

    text-align: center;

}

.houseIntroStatement span {

    width: 25px;

    height: 2px;

    flex-shrink: 0;

    background: #c49b28;

    opacity: .55;

}

.houseIntroStatement p {

    margin: 0;

    color: var(--text);

    opacity: .32;

    font-size: 12px;

    font-weight: 500;

    line-height: 1.6;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .houseIntro {

        padding: 90px 0 95px;

    }

    .houseIntroTop {

        grid-template-columns: 1fr;

        gap: 38px;

    }

    .houseIntroHeading {

        position: static;

        max-width: 700px;

    }

    .houseIntroContent {

        max-width: 760px;

    }

    .houseIntroHighlights {

        grid-template-columns: 1fr;

    }

    .houseIntroHighlight {

        min-height: auto;

        padding: 30px;

    }

    .houseIntroHighlight + .houseIntroHighlight {

        border-left: 0;

        border-top: 2px solid rgba(196,155,40,.10);

    }

    .houseIntroHighlightText p {

        max-width: 650px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .houseIntro {

        padding: 70px 0 75px;

    }

    .houseIntro .container {

        width: calc(100% - 30px);

    }

    .houseIntroTop {

        gap: 30px;

    }


    /* heading */

    .houseIntroEyebrow p {

        font-size: 10px;

    }

    .houseIntroHeading h2 {

        font-size: 34px;

        line-height: 1.1;

        letter-spacing: -1px;

    }


    /* content */

    .houseIntroContent p {

        font-size: 13.5px;

        line-height: 1.85;

    }

    .houseIntroContent p + p {

        margin-top: 18px;

    }


    /* highlights */

    .houseIntroHighlights {

        margin-top: 55px;

    }

    .houseIntroHighlight {

        padding: 27px 22px 30px;

    }

    .houseIntroHighlightNumber {

        top: 24px;

        right: 21px;

    }

    .houseIntroHighlightIcon {

        width: 45px;

        height: 45px;

        margin-bottom: 20px;

    }

    .houseIntroHighlightText h3 {

        font-size: 19px;

    }

    .houseIntroHighlightText p {

        font-size: 13px;

        line-height: 1.75;

    }


    /* statement */

    .houseIntroStatement {

        margin-top: 30px;

    }

    .houseIntroStatement p {

        font-size: 11px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .houseIntroHeading h2 {

        font-size: 30px;

    }

    .houseIntroContent p {

        font-size: 13px;

    }

    .houseIntroHighlightText h3 {

        font-size: 18px;

    }

}

/* Intro Section Ends Here */

/* Matters Section Starts Here */

/* =========================================================
   DREAM HOUSE PLANNING
   WHY IT MATTERS
========================================================= */

.houseWhy {

    position: relative;

    padding: 110px 0 115px;

    overflow: hidden;

    background: var(--section);

}

.houseWhy .container {

    width: min(1180px, 92%);

    margin: auto;

}


/* =========================================================
   HEADER
========================================================= */

.houseWhyHeader {

    max-width: 760px;

    margin-bottom: 70px;

}

.houseWhyEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

}

.houseWhyEyebrow span {

    width: 30px;

    height: 2px;

    background: #b88e21;

}

.houseWhyEyebrow p {

    margin: 0;

    color: #b88e21;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.4px;

    text-transform: uppercase;

}


.houseWhyHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(39px, 4.2vw, 56px);

    line-height: 1.08;

    font-weight: 600;

    letter-spacing: -1.7px;

}

.houseWhyHeader h2 strong {

    display: block;

    color: #b88e21;

    font-weight: 600;

}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.houseWhyLayout {

    display: grid;

    grid-template-columns: .88fr 1.12fr;

    gap: 85px;

    align-items: center;

}


/* =========================================================
   LEFT VISUAL
========================================================= */

.houseWhyVisual {

    min-width: 0;

}

.houseWhyVisualInner {

    position: relative;

    width: 100%;

    height: 620px;

}


/* architectural frame */

.whyArchitectureFrame {

    position: absolute;

    inset: 5% 3% 5% 3%;

    border: 2px solid rgba(184,142,33,.13);

    overflow: hidden;

}


/* corner accents */

.whyCorner {

    position: absolute;

    z-index: 8;

    width: 38px;

    height: 38px;

}

.whyCornerTL {

    top: -2px;

    left: -2px;

    border-top: 3px solid #b88e21;

    border-left: 3px solid #b88e21;

}

.whyCornerTR {

    top: -2px;

    right: -2px;

    border-top: 3px solid #b88e21;

    border-right: 3px solid #b88e21;

}

.whyCornerBL {

    bottom: -2px;

    left: -2px;

    border-bottom: 3px solid #b88e21;

    border-left: 3px solid #b88e21;

}

.whyCornerBR {

    bottom: -2px;

    right: -2px;

    border-bottom: 3px solid #b88e21;

    border-right: 3px solid #b88e21;

}


/* =========================================================
   FLOOR PLAN
========================================================= */

.floorPlan {

    position: absolute;

    left: 14%;

    right: 14%;

    top: 20%;

    height: 52%;

    border: 2px solid rgba(184,142,33,.11);

}


/* rooms */

.floorRoom {

    position: absolute;

    border: 2px solid rgba(184,142,33,.09);

}

.floorRoom span {

    position: absolute;

    top: 10px;

    left: 11px;

    color: #b88e21;

    opacity: .35;

    font-size: 8px;

    font-weight: 700;

}


/* room positions */

.roomOne {

    left: 0;

    top: 0;

    width: 43%;

    height: 45%;

}

.roomTwo {

    right: 0;

    top: 0;

    width: 57%;

    height: 45%;

}

.roomThree {

    left: 0;

    bottom: 0;

    width: 57%;

    height: 55%;

}

.roomFour {

    right: 0;

    bottom: 0;

    width: 43%;

    height: 55%;

}


/* hall */

.floorHall {

    position: absolute;

    left: 43%;

    top: 0;

    bottom: 0;

    width: 14%;

    border-left: 2px solid rgba(184,142,33,.08);

    border-right: 2px solid rgba(184,142,33,.08);

}


/* =========================================================
   ARCHITECTURAL DIMENSIONS
========================================================= */

.dimensionTop {

    position: absolute;

    left: 14%;

    right: 14%;

    top: 14%;

    display: flex;

    align-items: center;

    gap: 9px;

}

.dimensionTop span {

    flex: 1;

    height: 2px;

    background: rgba(184,142,33,.10);

}

.dimensionTop p {

    margin: 0;

    color: var(--text);

    opacity: .25;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.dimensionLeft {

    position: absolute;

    left: 7%;

    top: 34%;

    writing-mode: vertical-rl;

    color: #b88e21;

    opacity: .35;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.4px;

}


/* =========================================================
   GROWTH LINE
========================================================= */

.whyGrowthLine {

    position: absolute;

    z-index: 4;

    inset: 24% 2% 12% 2%;

    width: 96%;

    height: 64%;

    pointer-events: none;

}

.whyGrowthLine path {

    fill: none;

    stroke: rgba(184,142,33,.27);

    stroke-width: 2.5;

    stroke-linecap: round;

    stroke-dasharray: 7 10;

}


/* =========================================================
   GOAL POINT
========================================================= */

.whyGoalPoint {

    position: absolute;

    z-index: 10;

    right: 8%;

    top: 28%;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 11px 14px;

    background: var(--section);

    border: 2px solid rgba(184,142,33,.12);

}

.whyGoalIcon {

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #b88e21;

    background: rgba(184,142,33,.045);

}

.whyGoalIcon i {

    font-size: 11px;

}

.whyGoalPoint div:last-child {

    display: flex;

    flex-direction: column;

    gap: 3px;

}

.whyGoalPoint small {

    color: var(--text);

    opacity: .25;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 1px;

}

.whyGoalPoint strong {

    color: #b88e21;

    opacity: .65;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: .4px;

}


/* =========================================================
   BOTTOM STATEMENT
========================================================= */

.whyVisualBottom {

    position: absolute;

    z-index: 10;

    left: 10%;

    right: 10%;

    bottom: 6%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding-top: 18px;

    border-top: 2px solid rgba(184,142,33,.08);

}

.whyVisualBottom span {

    color: var(--text);

    opacity: .28;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.2px;

}

.whyVisualBottom b {

    color: #b88e21;

    opacity: .40;

    font-size: 9px;

}

.whyVisualBottom strong {

    color: #b88e21;

    opacity: .65;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.2px;

}


/* =========================================================
   RIGHT EDITORIAL LIST
========================================================= */

.houseWhyList {

    border-top: 2px solid rgba(184,142,33,.12);

}


/* individual item */

.houseWhyItem {

    position: relative;

    display: grid;

    grid-template-columns: 52px 1fr;

    gap: 18px;

    padding: 27px 0 29px;

    border-bottom: 2px solid rgba(184,142,33,.10);

}


/* number */

.houseWhyNumber {

    color: #b88e21;

    opacity: .55;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .7px;

    padding-top: 3px;

}


/* content */

.houseWhyItemContent {

    max-width: 600px;

}

.houseWhyItemContent h3 {

    margin: 0;

    color: var(--primary);

    font-size: 21px;

    font-weight: 600;

    line-height: 1.3;

}

.houseWhyItemContent p {

    margin: 9px 0 0;

    color: var(--text);

    opacity: .52;

    font-size: 13.5px;

    line-height: 1.75;

}


/* hover */

.houseWhyItem {

    transition: padding-left .25s ease;

}

.houseWhyItem:hover {

    padding-left: 8px;

}

.houseWhyItem:hover .houseWhyNumber {

    opacity: .85;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .houseWhy {

        padding: 90px 0 95px;

    }

    .houseWhyHeader {

        margin-bottom: 55px;

    }

    .houseWhyLayout {

        grid-template-columns: 1fr;

        gap: 60px;

    }

    .houseWhyVisual {

        max-width: 650px;

        width: 100%;

        margin: auto;

    }

    .houseWhyVisualInner {

        height: 560px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .houseWhy {

        padding: 70px 0 75px;

    }

    .houseWhy .container {

        width: calc(100% - 30px);

    }

    .houseWhyHeader {

        margin-bottom: 45px;

    }


    .houseWhyEyebrow p {

        font-size: 10px;

    }

    .houseWhyHeader h2 {

        font-size: 34px;

        line-height: 1.1;

        letter-spacing: -1px;

    }


    /* visual */

    .houseWhyLayout {

        gap: 48px;

    }

    .houseWhyVisualInner {

        height: 460px;

    }

    .whyArchitectureFrame {

        inset: 4% 0 4% 0;

    }

    .floorPlan {

        left: 9%;

        right: 9%;

    }

    .dimensionTop {

        left: 9%;

        right: 9%;

    }

    .dimensionLeft {

        left: 3%;

    }

    .whyGoalPoint {

        right: 4%;

        top: 25%;

        transform: scale(.88);

        transform-origin: right top;

    }

    .whyVisualBottom {

        left: 6%;

        right: 6%;

    }


    /* list */

    .houseWhyItem {

        grid-template-columns: 38px 1fr;

        gap: 12px;

        padding: 24px 0 25px;

    }

    .houseWhyNumber {

        font-size: 10px;

    }

    .houseWhyItemContent h3 {

        font-size: 19px;

    }

    .houseWhyItemContent p {

        font-size: 13px;

        line-height: 1.75;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .houseWhyHeader h2 {

        font-size: 30px;

    }

    .houseWhyVisualInner {

        height: 410px;

    }

    .whyGoalPoint {

        transform: scale(.76);

    }

    .houseWhyItem {

        grid-template-columns: 32px 1fr;

        gap: 10px;

    }

    .houseWhyItemContent h3 {

        font-size: 18px;

    }

    .houseWhyItemContent p {

        font-size: 12.8px;

    }

}

/* Matters Section Ends Here */

/* Approach Section Starts Here */

/* =========================================================
   DREAM HOUSE PLANNING
   SIMPLE APPROACH
========================================================= */

.houseApproachSimple {

    padding: 105px 0 100px;

    background: var(--section);

    overflow: hidden;

}

.houseApproachSimple .container {

    width: min(1180px, 92%);

    margin: auto;

}


/* =========================================================
   HEADER
========================================================= */

.houseApproachSimpleHeader {

    max-width: 760px;

    margin-bottom: 70px;

}

.houseApproachSimpleEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

}

.houseApproachSimpleEyebrow span {

    width: 30px;

    height: 2px;

    background: #b88e21;

}

.houseApproachSimpleEyebrow p {

    margin: 0;

    color: #b88e21;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.4px;

    text-transform: uppercase;

}


.houseApproachSimpleHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.3vw, 56px);

    line-height: 1.08;

    letter-spacing: -1.5px;

    font-weight: 600;

}

.houseApproachSimpleHeader h2 strong {

    color: #b88e21;

    font-weight: 600;

}


.houseApproachSimpleHeader > p {

    max-width: 580px;

    margin: 18px 0 0;

    color: var(--text);

    opacity: .50;

    font-size: 14px;

    line-height: 1.8;

}


/* =========================================================
   PROCESS
========================================================= */

.houseSimpleProcess {

    position: relative;

    display: grid;

    grid-template-columns: repeat(6, 1fr);

    gap: 25px;

    padding-top: 35px;

}


/* horizontal line */

.houseSimpleLine {

    position: absolute;

    left: 4%;

    right: 4%;

    top: 48px;

    height: 2px;

    background:

        linear-gradient(
            90deg,
            rgba(184,142,33,.08),
            rgba(184,142,33,.25),
            rgba(184,142,33,.08)
        );

}


/* =========================================================
   STEP
========================================================= */

.houseSimpleStep {

    position: relative;

    min-width: 0;

}


/* number */

.houseSimpleNumber {

    position: relative;

    z-index: 2;

    margin-bottom: 15px;

    color: #b88e21;

    opacity: .55;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;

}


/* dot */

.houseSimpleDot {

    position: relative;

    z-index: 3;

    width: 13px;

    height: 13px;

    margin-bottom: 25px;

    border-radius: 50%;

    background: var(--section);

    border: 2px solid #b88e21;

}


/* content */

.houseSimpleContent h3 {

    margin: 0;

    color: var(--primary);

    font-size: 21px;

    font-weight: 600;

    line-height: 1.25;

}

.houseSimpleContent p {

    margin: 10px 0 0;

    color: var(--text);

    opacity: .50;

    font-size: 13px;

    line-height: 1.72;

}


/* =========================================================
   BOTTOM FLOW
========================================================= */

.houseSimpleBottom {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 65px;

    padding: 22px 25px;

    border-top: 2px solid rgba(184,142,33,.10);

    border-bottom: 2px solid rgba(184,142,33,.10);

}

.houseSimpleBottom span {

    color: var(--text);

    opacity: .35;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.1px;

}

.houseSimpleBottom i {

    color: #b88e21;

    opacity: .35;

    font-size: 9px;

}

.houseSimpleBottom strong {

    color: #b88e21;

    opacity: .72;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.1px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .houseApproachSimple {

        padding: 90px 0;

    }

    .houseSimpleProcess {

        grid-template-columns: repeat(3, 1fr);

        row-gap: 55px;

    }

    .houseSimpleLine {

        display: none;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .houseApproachSimple {

        padding: 70px 0 75px;

    }

    .houseApproachSimple .container {

        width: calc(100% - 30px);

    }


    .houseApproachSimpleHeader {

        margin-bottom: 48px;

    }

    .houseApproachSimpleHeader h2 {

        font-size: 34px;

        line-height: 1.1;

        letter-spacing: -1px;

    }

    .houseApproachSimpleHeader > p {

        font-size: 13px;

    }


    /* vertical process */

    .houseSimpleProcess {

        display: flex;

        flex-direction: column;

        gap: 0;

        padding: 0 0 0 32px;

    }


    .houseSimpleLine {

        display: block;

        left: 6px;

        right: auto;

        top: 7px;

        bottom: 7px;

        width: 2px;

        height: auto;

        background:

            linear-gradient(
                to bottom,
                rgba(184,142,33,.08),
                rgba(184,142,33,.28),
                rgba(184,142,33,.08)
            );

    }


    .houseSimpleStep {

        padding: 0 0 40px;

    }


    .houseSimpleNumber {

        margin-bottom: 7px;

    }


    .houseSimpleDot {

        position: absolute;

        left: -32px;

        top: 29px;

        width: 13px;

        height: 13px;

        margin: 0;

    }


    .houseSimpleContent h3 {

        font-size: 20px;

    }

    .houseSimpleContent p {

        font-size: 13px;

        line-height: 1.75;

    }


    /* bottom */

    .houseSimpleBottom {

        flex-direction: column;

        gap: 9px;

        margin-top: 30px;

        padding: 23px;

    }

    .houseSimpleBottom i {

        transform: rotate(90deg);

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .houseApproachSimpleHeader h2 {

        font-size: 30px;

    }

    .houseSimpleContent h3 {

        font-size: 18px;

    }

    .houseSimpleContent p {

        font-size: 12.8px;

    }

}

/* Approach Section Ends Here */

/* Strategy Section Starts Here */

/* =========================================================
   DREAM HOUSE FUNDING STRATEGIES
========================================================= */

.houseFunding {

    position: relative;

    padding: 110px 0 105px;

    background: var(--section);

    overflow: hidden;

}

.houseFunding .container {

    width: min(1180px, 92%);

    margin: auto;

}


/* =========================================================
   HEADER
========================================================= */

.houseFundingHeader {

    max-width: 760px;

    margin-bottom: 65px;

}

.houseFundingEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 19px;

}

.houseFundingEyebrow span {

    width: 30px;

    height: 2px;

    background: #b88e21;

}

.houseFundingEyebrow p {

    margin: 0;

    color: #b88e21;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.4px;

    text-transform: uppercase;

}


.houseFundingHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.3vw, 56px);

    line-height: 1.08;

    letter-spacing: -1.5px;

    font-weight: 600;

}

.houseFundingHeader h2 strong {

    display: block;

    color: #b88e21;

    font-weight: 600;

}


.houseFundingHeader > p {

    max-width: 640px;

    margin: 20px 0 0;

    color: var(--text);

    opacity: .50;

    font-size: 14px;

    line-height: 1.8;

}


/* =========================================================
   LIST
========================================================= */

.houseFundingList {

    border-top: 2px solid rgba(184,142,33,.13);

}


/* =========================================================
   ITEM
========================================================= */

.houseFundingItem {

    position: relative;

    display: grid;

    grid-template-columns: 70px 1.05fr 1.35fr 55px;

    align-items: center;

    gap: 35px;

    min-height: 155px;

    padding: 27px 15px;

    border-bottom: 2px solid rgba(184,142,33,.10);

    transition:
        padding-left .25s ease,
        background .25s ease;

}


.houseFundingItem:hover {

    padding-left: 25px;

    background: rgba(184,142,33,.018);

}


/* =========================================================
   NUMBER
========================================================= */

.houseFundingNumber {

    color: #b88e21;

    opacity: .50;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1px;

}


/* =========================================================
   TITLE
========================================================= */

.houseFundingTitle span {

    display: block;

    margin-bottom: 7px;

    color: #b88e21;

    opacity: .45;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.2px;

}

.houseFundingTitle h3 {

    margin: 0;

    color: var(--primary);

    font-size: 21px;

    line-height: 1.3;

    font-weight: 600;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.houseFundingDescription {

    max-width: 500px;

}

.houseFundingDescription p {

    margin: 0;

    color: var(--text);

    opacity: .52;

    font-size: 13.5px;

    line-height: 1.75;

}


/* =========================================================
   ARROW
========================================================= */

.houseFundingArrow {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid rgba(184,142,33,.12);

    border-radius: 50%;

    color: #b88e21;

    opacity: .55;

    transition:

        transform .25s ease,

        border-color .25s ease,

        opacity .25s ease;

}

.houseFundingArrow i {

    font-size: 11px;

}

.houseFundingItem:hover .houseFundingArrow {

    transform: translate(3px, -3px);

    border-color: rgba(184,142,33,.35);

    opacity: .85;

}


/* =========================================================
   FOOTER
========================================================= */

.houseFundingFooter {

    margin-top: 42px;

}

.houseFundingFooterLine {

    width: 100%;

    height: 2px;

    margin-bottom: 20px;

    background: rgba(184,142,33,.07);

}

.houseFundingFooter p {

    margin: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

    color: var(--text);

    opacity: .34;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.1px;

    text-align: center;

}

.houseFundingFooter span {

    color: #b88e21;

    opacity: .65;

}

.houseFundingFooter strong {

    color: #b88e21;

    opacity: .75;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .houseFunding {

        padding: 90px 0;

    }

    .houseFundingItem {

        grid-template-columns: 55px 1fr 1.3fr 45px;

        gap: 22px;

    }

    .houseFundingTitle h3 {

        font-size: 19px;

    }

    .houseFundingDescription p {

        font-size: 13px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .houseFunding {

        padding: 70px 0 75px;

    }

    .houseFunding .container {

        width: calc(100% - 30px);

    }


    .houseFundingHeader {

        margin-bottom: 48px;

    }

    .houseFundingHeader h2 {

        font-size: 34px;

        line-height: 1.1;

        letter-spacing: -1px;

    }

    .houseFundingHeader > p {

        font-size: 13px;

        line-height: 1.75;

    }


    /* mobile item */

    .houseFundingItem {

        grid-template-columns: 42px 1fr;

        gap: 10px;

        min-height: auto;

        padding: 27px 0;

    }

    .houseFundingItem:hover {

        padding-left: 0;

        background: transparent;

    }


    .houseFundingNumber {

        grid-row: 1 / span 2;

        align-self: start;

        padding-top: 3px;

        font-size: 10px;

    }


    .houseFundingTitle {

        grid-column: 2;

    }

    .houseFundingTitle span {

        font-size: 7px;

    }

    .houseFundingTitle h3 {

        font-size: 20px;

    }


    .houseFundingDescription {

        grid-column: 2;

        max-width: none;

        margin-top: 2px;

    }

    .houseFundingDescription p {

        font-size: 13px;

        line-height: 1.75;

    }


    .houseFundingArrow {

        display: none;

    }


    .houseFundingFooter {

        margin-top: 30px;

    }

    .houseFundingFooter p {

        flex-direction: column;

        gap: 7px;

        font-size: 7px;

        line-height: 1.4;

    }

    .houseFundingFooter p span {

        transform: rotate(90deg);

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .houseFundingHeader h2 {

        font-size: 30px;

    }

    .houseFundingTitle h3 {

        font-size: 18px;

    }

    .houseFundingDescription p {

        font-size: 12.8px;

    }

}

/* Strategy Section Ends Here */

/* Journey Section Starts Here */

/* =========================================================
   DREAM HOUSE JOURNEY
   SIMPLE PREMIUM VERSION
========================================================= */

.houseJourneySimple {

    padding: 110px 0 105px;

    background: var(--section);

    overflow: hidden;

}

.houseJourneySimple .container {

    width: min(1180px, 92%);

    margin: auto;

}


/* =========================================================
   HEADER
========================================================= */

.houseJourneySimpleHeader {

    max-width: 760px;

    margin-bottom: 70px;

}

.houseJourneySimpleEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

}

.houseJourneySimpleEyebrow span {

    width: 30px;

    height: 2px;

    background: #b88e21;

}

.houseJourneySimpleEyebrow p {

    margin: 0;

    color: #b88e21;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.4px;

    text-transform: uppercase;

}


.houseJourneySimpleHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.4vw, 57px);

    line-height: 1.08;

    letter-spacing: -1.6px;

    font-weight: 600;

}

.houseJourneySimpleHeader h2 strong {

    display: block;

    color: #b88e21;

    font-weight: 600;

}


/* =========================================================
   JOURNEY
========================================================= */

.simpleHomeJourney {

    position: relative;

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 28px;

    padding-top: 15px;

}


/* connecting line */

.simpleJourneyLine {

    position: absolute;

    left: 8%;

    right: 8%;

    top: 31px;

    height: 2px;

    background:

        linear-gradient(
            90deg,
            rgba(184,142,33,.07),
            rgba(184,142,33,.24),
            rgba(184,142,33,.07)
        );

}


/* =========================================================
   STEP
========================================================= */

.simpleJourneyStep {

    position: relative;

    min-width: 0;

}


/* top */

.simpleJourneyTop {

    position: relative;

    height: 45px;

}


/* number */

.simpleJourneyNumber {

    position: absolute;

    /* left: 0;

    top: 0; */
    left: 90px;

    top: -10px;

    color: #b88e21;

    opacity: .48;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;

}


/* dot */

.simpleJourneyDot {

    position: absolute;

    z-index: 2;

    left: 50%;

    top: 9px;

    width: 14px;

    height: 14px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: var(--section);

    border: 2px solid #b88e21;

}


/* content */

.simpleJourneyContent {

    padding-top: 25px;

    text-align: center;

}

.simpleJourneyContent h3 {

    margin: 0;

    color: var(--primary);

    font-size: 21px;

    font-weight: 600;

    line-height: 1.25;

}

.simpleJourneyContent p {

    max-width: 205px;

    margin: 11px auto 0;

    color: var(--text);

    opacity: .50;

    font-size: 13px;

    line-height: 1.72;

}


/* final */

.simpleJourneyFinal .simpleJourneyDot {

    border-color: #b88e21;

    background: #b88e21;

}

.simpleJourneyFinal .simpleJourneyContent h3 {

    color: #b88e21;

}


/* =========================================================
   BOTTOM FLOW
========================================================= */

.simpleJourneyBottom {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 13px;

    margin-top: 65px;

    padding: 23px 25px;

    border-top: 2px solid rgba(184,142,33,.10);

    border-bottom: 2px solid rgba(184,142,33,.10);

}

.simpleJourneyBottom span,
.simpleJourneyBottom strong {

    color: var(--text);

    opacity: .34;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.2px;

}

.simpleJourneyBottom .active,
.simpleJourneyBottom strong {

    color: #b88e21;

    opacity: .72;

}

.simpleJourneyBottom i {

    color: #b88e21;

    opacity: .32;

    font-size: 9px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .houseJourneySimple {

        padding: 90px 0;

    }

    .simpleHomeJourney {

        grid-template-columns: repeat(3, 1fr);

        row-gap: 55px;

    }

    .simpleJourneyLine {

        display: none;

    }

    .simpleJourneyContent {

        text-align: left;

    }

    .simpleJourneyContent p {

        margin-left: 0;

    }

    .simpleJourneyDot {

        left: 0;

        transform: none;

    }

    .simpleJourneyNumber {

        left: 25px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .houseJourneySimple {

        padding: 70px 0 75px;

    }

    .houseJourneySimple .container {

        width: calc(100% - 30px);

    }


    .houseJourneySimpleHeader {

        margin-bottom: 48px;

    }

    .houseJourneySimpleHeader h2 {

        font-size: 34px;

        line-height: 1.1;

        letter-spacing: -1px;

    }


    /* vertical journey */

    .simpleHomeJourney {

        display: flex;

        flex-direction: column;

        gap: 0;

        padding: 0 0 0 34px;

    }


    .simpleJourneyLine {

        display: block;

        left: 6px;

        right: auto;

        top: 6px;

        bottom: 15px;

        width: 2px;

        height: auto;

        background:

            linear-gradient(
                to bottom,
                rgba(184,142,33,.08),
                rgba(184,142,33,.28),
                rgba(184,142,33,.08)
            );

    }


    .simpleJourneyStep {

        padding-bottom: 42px;

    }


    .simpleJourneyTop {

        height: 27px;

    }


    .simpleJourneyNumber {

        position: relative;

        left: auto;

        top: auto;

    }


    .simpleJourneyDot {

        left: -34px;

        top: 1px;

        transform: none;

    }


    .simpleJourneyContent {

        padding-top: 4px;

        text-align: left;

    }

    .simpleJourneyContent h3 {

        font-size: 20px;

    }

    .simpleJourneyContent p {

        max-width: 650px;

        margin: 9px 0 0;

        font-size: 13px;

        line-height: 1.75;

    }


    /* bottom */

    .simpleJourneyBottom {

        flex-direction: column;

        gap: 9px;

        margin-top: 20px;

        padding: 23px;

    }

    .simpleJourneyBottom i {

        transform: rotate(90deg);

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .houseJourneySimpleHeader h2 {

        font-size: 30px;

    }

    .simpleJourneyContent h3 {

        font-size: 18px;

    }

    .simpleJourneyContent p {

        font-size: 12.8px;

    }

}

/* Journey Section Ends Here */

/* Who Section Starts Here */

/* =========================================================
   DREAM HOUSE PLANNING
   WHO IS IT FOR?
========================================================= */

.houseWho {

    position: relative;

    padding: 110px 0 105px;

    background: var(--section);

    overflow: hidden;

}

.houseWho .container {

    width: min(1180px, 92%);

    margin: auto;

}


/* =========================================================
   HEADER
========================================================= */

.houseWhoHeader {

    max-width: 800px;

    margin-bottom: 70px;

}

.houseWhoEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

}

.houseWhoEyebrow span {

    width: 30px;

    height: 2px;

    background: #b88e21;

}

.houseWhoEyebrow p {

    margin: 0;

    color: #b88e21;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.4px;

    text-transform: uppercase;

}


.houseWhoHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.4vw, 57px);

    line-height: 1.08;

    letter-spacing: -1.6px;

    font-weight: 600;

}

.houseWhoHeader h2 strong {

    display: block;

    color: #b88e21;

    font-weight: 600;

}


.houseWhoHeader > p {

    max-width: 650px;

    margin: 20px 0 0;

    color: var(--text);

    opacity: .50;

    font-size: 14px;

    line-height: 1.8;

}


/* =========================================================
   GRID
========================================================= */

.houseWhoGrid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    border-top: 2px solid rgba(184,142,33,.11);

    border-left: 2px solid rgba(184,142,33,.06);

}


/* =========================================================
   PROFILE
========================================================= */

.houseWhoItem {

    position: relative;

    display: grid;

    grid-template-columns: 55px 1fr;

    gap: 20px;

    min-height: 220px;

    padding: 32px 35px;

    border-right: 2px solid rgba(184,142,33,.09);

    border-bottom: 2px solid rgba(184,142,33,.09);

    transition:

        background .25s ease,

        padding-left .25s ease;

}

.houseWhoItem:hover {

    background: rgba(184,142,33,.018);

    padding-left: 42px;

}


/* number */

.houseWhoNumber {

    color: #b88e21;

    opacity: .48;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;

    padding-top: 3px;

}


/* content */

.houseWhoContent span {

    display: block;

    margin-bottom: 9px;

    color: #b88e21;

    opacity: .45;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.2px;

}

.houseWhoContent h3 {

    margin: 0;

    color: var(--primary);

    font-size: 22px;

    line-height: 1.3;

    font-weight: 600;

}

.houseWhoContent p {

    max-width: 430px;

    margin: 11px 0 0;

    color: var(--text);

    opacity: .52;

    font-size: 13.5px;

    line-height: 1.75;

}


/* =========================================================
   BOTTOM
========================================================= */

.houseWhoBottom {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    margin-top: 45px;

}

.houseWhoBottom > span {

    width: 25px;

    height: 2px;

    background: #b88e21;

    opacity: .45;

}

.houseWhoBottom p {

    margin: 0;

    color: var(--text);

    opacity: .35;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.2px;

    text-align: center;

}

.houseWhoBottom strong {

    color: #b88e21;

    opacity: .75;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 850px) {

    .houseWho {

        padding: 90px 0;

    }

    .houseWhoItem {

        padding: 28px 25px;

        grid-template-columns: 42px 1fr;

        gap: 15px;

    }

    .houseWhoItem:hover {

        padding-left: 30px;

    }

    .houseWhoContent h3 {

        font-size: 20px;

    }

    .houseWhoContent p {

        font-size: 13px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .houseWho {

        padding: 70px 0 75px;

    }

    .houseWho .container {

        width: calc(100% - 30px);

    }


    .houseWhoHeader {

        margin-bottom: 48px;

    }

    .houseWhoHeader h2 {

        font-size: 34px;

        line-height: 1.1;

        letter-spacing: -1px;

    }

    .houseWhoHeader > p {

        font-size: 13px;

        line-height: 1.75;

    }


    /* single column */

    .houseWhoGrid {

        grid-template-columns: 1fr;

        border-left: 0;

    }


    .houseWhoItem {

        min-height: auto;

        grid-template-columns: 42px 1fr;

        gap: 13px;

        padding: 28px 0;

        border-right: 0;

    }

    .houseWhoItem:hover {

        padding-left: 0;

        background: transparent;

    }


    .houseWhoNumber {

        font-size: 10px;

    }

    .houseWhoContent h3 {

        font-size: 20px;

    }

    .houseWhoContent p {

        font-size: 13px;

        line-height: 1.75;

    }


    .houseWhoBottom {

        margin-top: 30px;

        gap: 9px;

    }

    .houseWhoBottom p {

        font-size: 7px;

        line-height: 1.5;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .houseWhoHeader h2 {

        font-size: 30px;

    }

    .houseWhoContent h3 {

        font-size: 18px;

    }

    .houseWhoContent p {

        font-size: 12.8px;

    }

}

/* Who Section Ends Here */

/* Benefits Section Starts Here */

/* =========================================================
   DREAM HOUSE PLANNING
   PROFESSIONAL BENEFITS
========================================================= */

.houseBenefits {

    position: relative;

    padding: 110px 0 105px;

    background: var(--section);

    overflow: hidden;

}

.houseBenefits .container {

    width: min(1180px, 92%);

    margin: auto;

}


/* =========================================================
   HEADER
========================================================= */

.houseBenefitsHeader {

    max-width: 760px;

    margin-bottom: 70px;

}

.houseBenefitsEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

}

.houseBenefitsEyebrow span {

    width: 30px;

    height: 2px;

    background: #b88e21;

}

.houseBenefitsEyebrow p {

    margin: 0;

    color: #b88e21;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.4px;

    text-transform: uppercase;

}


.houseBenefitsHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.4vw, 57px);

    line-height: 1.07;

    letter-spacing: -1.6px;

    font-weight: 600;

}

.houseBenefitsHeader h2 strong {

    display: block;

    color: #b88e21;

    font-weight: 600;

}


.houseBenefitsHeader > p {

    max-width: 650px;

    margin: 20px 0 0;

    color: var(--text);

    opacity: .50;

    font-size: 14px;

    line-height: 1.8;

}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.houseBenefitsLayout {

    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 70px;

    align-items: stretch;

}


/* =========================================================
   FEATURED BENEFIT
========================================================= */

.houseBenefitsFeatured {

    position: relative;

    min-height: 590px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 38px 40px;

    border: 2px solid rgba(184,142,33,.13);

    background:

        linear-gradient(
            135deg,
            rgba(184,142,33,.025),
            transparent 60%
        );

}


/* architectural corner */

.houseBenefitsFeatured::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 75px;

    height: 75px;

    border-top: 2px solid rgba(184,142,33,.32);

    border-left: 2px solid rgba(184,142,33,.32);

}

.houseBenefitsFeatured::after {

    content: "";

    position: absolute;

    right: 0;

    bottom: 0;

    width: 75px;

    height: 75px;

    border-right: 2px solid rgba(184,142,33,.16);

    border-bottom: 2px solid rgba(184,142,33,.16);

}


/* top */

.featuredTop {

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.featuredNumber {

    color: #b88e21;

    opacity: .52;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1px;

}

.featuredLabel {

    color: #b88e21;

    opacity: .45;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.2px;

}


/* line */

.featuredLine {

    width: 45px;

    height: 2px;

    margin-top: 55px;

    background: #b88e21;

    opacity: .45;

}


/* title */

.houseBenefitsFeatured h3 {

    margin: 28px 0 0;

    color: var(--primary);

    font-size: clamp(32px, 3vw, 42px);

    line-height: 1.12;

    letter-spacing: -1px;

    font-weight: 600;

}

.houseBenefitsFeatured h3 span {

    display: block;

    color: #b88e21;

}


/* description */

.houseBenefitsFeatured > p {

    max-width: 400px;

    margin: 20px 0 0;

    color: var(--text);

    opacity: .52;

    font-size: 14px;

    line-height: 1.8;

}


/* bottom */

.featuredBottom {

    display: flex;

    align-items: center;

    gap: 12px;

    padding-top: 25px;

    border-top: 2px solid rgba(184,142,33,.09);

}

.featuredBottom span {

    color: var(--text);

    opacity: .30;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1px;

}

.featuredBottom i {

    color: #b88e21;

    opacity: .50;

    font-size: 9px;

}

.featuredBottom strong {

    color: #b88e21;

    opacity: .70;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1px;

}


/* =========================================================
   RIGHT LIST
========================================================= */

.houseBenefitsList {

    display: flex;

    flex-direction: column;

    border-top: 2px solid rgba(184,142,33,.11);

}


.houseBenefitItem {

    display: grid;

    grid-template-columns: 50px 1fr;

    gap: 18px;

    padding: 27px 5px 27px 0;

    border-bottom: 2px solid rgba(184,142,33,.09);

    transition: padding-left .25s ease;

}

.houseBenefitItem:hover {

    padding-left: 12px;

}


/* number */

.benefitNumber {

    padding-top: 3px;

    color: #b88e21;

    opacity: .48;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;

}


/* content */

.benefitContent span {

    display: block;

    margin-bottom: 7px;

    color: #b88e21;

    opacity: .43;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.2px;

}

.benefitContent h3 {

    margin: 0;

    color: var(--primary);

    font-size: 20px;

    line-height: 1.3;

    font-weight: 600;

}

.benefitContent p {

    max-width: 600px;

    margin: 8px 0 0;

    color: var(--text);

    opacity: .50;

    font-size: 13px;

    line-height: 1.72;

}


/* =========================================================
   BOTTOM
========================================================= */

.houseBenefitsBottom {

    margin-top: 48px;

}

.houseBenefitsBottomLine {

    width: 100%;

    height: 2px;

    margin-bottom: 20px;

    background: rgba(184,142,33,.08);

}

.houseBenefitsBottom p {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

    margin: 0;

    color: var(--text);

    opacity: .32;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.1px;

    text-align: center;

}

.houseBenefitsBottom i {

    color: #b88e21;

    opacity: .45;

    font-size: 9px;

}

.houseBenefitsBottom strong {

    color: #b88e21;

    opacity: .72;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .houseBenefits {

        padding: 90px 0;

    }

    .houseBenefitsLayout {

        grid-template-columns: .85fr 1.15fr;

        gap: 40px;

    }

    .houseBenefitsFeatured {

        min-height: 600px;

        padding: 30px;

    }

    .houseBenefitsFeatured h3 {

        font-size: 32px;

    }

    .benefitContent h3 {

        font-size: 18px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .houseBenefits {

        padding: 70px 0 75px;

    }

    .houseBenefits .container {

        width: calc(100% - 30px);

    }


    .houseBenefitsHeader {

        margin-bottom: 48px;

    }

    .houseBenefitsHeader h2 {

        font-size: 34px;

        line-height: 1.1;

        letter-spacing: -1px;

    }

    .houseBenefitsHeader > p {

        font-size: 13px;

        line-height: 1.75;

    }


    /* stack */

    .houseBenefitsLayout {

        grid-template-columns: 1fr;

        gap: 35px;

    }


    /* featured */

    .houseBenefitsFeatured {

        min-height: 390px;

        padding: 28px;

    }

    .houseBenefitsFeatured h3 {

        font-size: 31px;

    }

    .houseBenefitsFeatured > p {

        font-size: 13px;

    }

    .featuredLine {

        margin-top: 35px;

    }


    /* list */

    .houseBenefitsList {

        border-top: 2px solid rgba(184,142,33,.11);

    }

    .houseBenefitItem {

        grid-template-columns: 40px 1fr;

        gap: 12px;

        padding: 25px 0;

    }

    .houseBenefitItem:hover {

        padding-left: 0;

    }

    .benefitContent h3 {

        font-size: 20px;

    }

    .benefitContent p {

        font-size: 13px;

        line-height: 1.75;

    }


    /* bottom */

    .houseBenefitsBottom {

        margin-top: 32px;

    }

    .houseBenefitsBottom p {

        flex-direction: column;

        gap: 8px;

        font-size: 7px;

    }

    .houseBenefitsBottom i {

        transform: rotate(90deg);

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .houseBenefitsHeader h2 {

        font-size: 30px;

    }

    .houseBenefitsFeatured h3 {

        font-size: 28px;

    }

    .benefitContent h3 {

        font-size: 18px;

    }

    .benefitContent p {

        font-size: 12.8px;

    }

}

/* Benefits Section Ends Here */

/* CTA Section Starts Here */

/* =========================================================
   DREAM HOUSE FINAL CTA V2
   NO HOUSE ILLUSTRATION
========================================================= */

.houseFinalCtaV2 {

    position: relative;

    padding: 105px 0 85px;

    background: var(--section);

    overflow: hidden;

}

.houseFinalCtaV2 .container {

    width: min(1180px, 92%);

    margin: auto;

}


/* =========================================================
   MAIN BOX
========================================================= */

.houseCtaV2Box {

    display: grid;

    grid-template-columns: 1.15fr .85fr;

    align-items: center;

    gap: 75px;

    min-height: 500px;

    padding: 65px 70px;

    border: 2px solid rgba(184,142,33,.11);

    background:

        linear-gradient(
            135deg,
            rgba(184,142,33,.025),
            transparent 65%
        );

}


/* =========================================================
   CONTENT
========================================================= */

.houseCtaV2Content {

    max-width: 650px;

}


.houseCtaV2Eyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

}

.houseCtaV2Eyebrow span {

    width: 30px;

    height: 2px;

    background: #b88e21;

}

.houseCtaV2Eyebrow p {

    margin: 0;

    color: #b88e21;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.houseCtaV2Content h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(38px, 4vw, 54px);

    line-height: 1.08;

    letter-spacing: -1.5px;

    font-weight: 600;

}

.houseCtaV2Content h2 strong {

    color: #b88e21;

    font-weight: 600;

}


.houseCtaV2Description {

    max-width: 620px;

    margin: 22px 0 0;

    color: var(--text);

    opacity: .52;

    font-size: 14px;

    line-height: 1.85;

}


/* =========================================================
   BUTTONS
========================================================= */

.houseCtaV2Buttons {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 13px;

    margin-top: 32px;

}


.houseCtaV2Primary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    min-height: 50px;

    padding: 0 23px;

    background: #b88e21;

    border: 2px solid #b88e21;

    color: #fff;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    transition: all .25s ease;

}

.houseCtaV2Primary i {

    font-size: 10px;

    transition: transform .25s ease;

}

.houseCtaV2Primary:hover {

    background: transparent;

    color: #b88e21;

}

.houseCtaV2Primary:hover i {

    transform: translateX(4px);

}


.houseCtaV2Secondary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 50px;

    padding: 0 23px;

    border: 2px solid rgba(184,142,33,.16);

    color: var(--primary);

    text-decoration: none;

    font-size: 12px;

    font-weight: 600;

    transition: all .25s ease;

}

.houseCtaV2Secondary:hover {

    color: #b88e21;

    border-color: #b88e21;

}


/* =========================================================
   ABSTRACT VISUAL
========================================================= */

.houseCtaV2Visual {

    position: relative;

    height: 360px;

    overflow: hidden;

}


/* =========================================================
   GRID
========================================================= */

.ctaV2Grid {

    position: absolute;

    inset: 5%;

    background-image:

        linear-gradient(
            rgba(184,142,33,.045) 2px,
            transparent 2px
        ),

        linear-gradient(
            90deg,
            rgba(184,142,33,.045) 2px,
            transparent 2px
        );

    background-size: 55px 55px;

    mask-image: linear-gradient(
        90deg,
        transparent,
        black 20%,
        black 80%,
        transparent
    );

}


/* =========================================================
   CIRCLES
========================================================= */

.ctaV2Circle {

    position: absolute;

    border: 2px solid rgba(184,142,33,.07);

    border-radius: 50%;

}

.circleOne {

    width: 260px;

    height: 260px;

    right: -30px;

    top: 10px;

}

.circleTwo {

    width: 150px;

    height: 150px;

    right: 70px;

    top: 65px;

}


/* =========================================================
   GROWTH PATH
========================================================= */

.ctaV2Growth {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 45px;

    width: 100%;

    height: 250px;

    overflow: visible;

}

.ctaV2Growth path {

    fill: none;

    stroke: rgba(184,142,33,.48);

    stroke-width: 2.5;

    stroke-linecap: round;

    stroke-dasharray: 7 8;

}


/* =========================================================
   LOCATION
========================================================= */

.ctaV2Location {

    position: absolute;

    top: 40px;

    left: 27%;

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid rgba(184,142,33,.15);

    border-radius: 50%;

    background: var(--section);

}

.ctaV2Location i {

    color: #b88e21;

    opacity: .58;

    font-size: 13px;

}


/* =========================================================
   MILESTONES
========================================================= */

.ctaV2Milestone {

    position: absolute;

    z-index: 4;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    width: 52px;

    height: 52px;

    border: 2px solid rgba(184,142,33,.17);

    border-radius: 50%;

    background: var(--section);

}

.ctaV2Milestone span {

    color: #b88e21;

    opacity: .65;

    font-size: 9px;

    font-weight: 700;

}

.ctaV2Milestone small {

    margin-top: 3px;

    color: var(--text);

    opacity: .32;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: .7px;

}


.milestoneA {

    left: 15%;

    bottom: 68px;

}

.milestoneB {

    left: 48%;

    bottom: 130px;

}

.milestoneC {

    right: 7%;

    top: 52px;

    border-color: rgba(184,142,33,.30);

}


/* =========================================================
   KEY
========================================================= */

.ctaV2Key {

    position: absolute;

    z-index: 5;

    right: 18%;

    bottom: 50px;

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    border: 2px solid rgba(184,142,33,.14);

    background: var(--section);

}

.ctaV2Key i {

    color: #b88e21;

    opacity: .55;

    font-size: 11px;

}


/* =========================================================
   LABEL
========================================================= */

.ctaV2Label {

    position: absolute;

    left: 5%;

    bottom: 20px;

}

.ctaV2Label span {

    display: block;

    color: var(--text);

    opacity: .25;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.2px;

}

.ctaV2Label strong {

    display: block;

    margin-top: 5px;

    color: #b88e21;

    opacity: .65;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .8px;

}


/* =========================================================
   BOTTOM JOURNEY
========================================================= */

.houseCtaV2Journey {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 13px;

    margin-top: 38px;

    padding: 22px 25px;

    border-top: 2px solid rgba(184,142,33,.09);

    border-bottom: 2px solid rgba(184,142,33,.09);

}

.houseCtaV2Journey span,
.houseCtaV2Journey strong {

    color: var(--text);

    opacity: .34;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.2px;

}

.houseCtaV2Journey .active,
.houseCtaV2Journey strong {

    color: #b88e21;

    opacity: .72;

}

.houseCtaV2Journey i {

    color: #b88e21;

    opacity: .32;

    font-size: 9px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .houseFinalCtaV2 {

        padding: 90px 0;

    }

    .houseCtaV2Box {

        gap: 40px;

        padding: 50px;

    }

    .houseCtaV2Content h2 {

        font-size: 38px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .houseFinalCtaV2 {

        padding: 70px 0 75px;

    }

    .houseFinalCtaV2 .container {

        width: calc(100% - 30px);

    }


    .houseCtaV2Box {

        grid-template-columns: 1fr;

        gap: 35px;

        min-height: auto;

        padding: 35px 25px;

    }


    .houseCtaV2Content h2 {

        font-size: 33px;

        line-height: 1.1;

        letter-spacing: -1px;

    }


    .houseCtaV2Description {

        font-size: 13px;

        line-height: 1.75;

    }


    .houseCtaV2Buttons {

        flex-direction: column;

        align-items: stretch;

    }


    .houseCtaV2Primary,
    .houseCtaV2Secondary {

        width: 100%;

        min-height: 50px;

    }


    /* visual */

    .houseCtaV2Visual {

        height: 285px;

    }


    .circleOne {

        width: 210px;

        height: 210px;

    }

    .circleTwo {

        width: 125px;

        height: 125px;

        right: 55px;

    }


    .ctaV2Location {

        left: 25%;

        top: 25px;

    }


    .milestoneA {

        left: 8%;

        bottom: 55px;

    }

    .milestoneB {

        left: 43%;

        bottom: 105px;

    }

    .milestoneC {

        right: 5%;

        top: 38px;

    }


    .ctaV2Key {

        right: 17%;

        bottom: 35px;

    }


    .houseCtaV2Journey {

        flex-direction: column;

        gap: 8px;

        margin-top: 25px;

        padding: 23px;

    }

    .houseCtaV2Journey i {

        transform: rotate(90deg);

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .houseCtaV2Box {

        padding: 30px 20px;

    }

    .houseCtaV2Content h2 {

        font-size: 29px;

    }

    .houseCtaV2Visual {

        height: 260px;

    }

    .houseCtaV2Journey span,
    .houseCtaV2Journey strong {

        font-size: 7px;

    }

}

/* CTA Section Ends Here */

/* Dream House Planning Page Ends Here */


/* Financial Planning Starts Here */

/* Hero Section Starts Here */

/* =========================================================
   FINANCIAL PLANNING
   PREMIUM EDITORIAL HERO
========================================================= */

.fpPremiumHero {

    position: relative;

    padding: 100px 0 95px;

    background: var(--section);

    overflow: hidden;

}

.fpPremiumHero .container {

    width: min(1180px, 92%);

    margin: auto;

}


/* =========================================================
   LAYOUT
========================================================= */

.fpPremiumHeroGrid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 85px;

}


/* =========================================================
   LEFT CONTENT
========================================================= */

.fpPremiumHeroContent {

    max-width: 650px;

}


.fpPremiumEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 22px;

}


.fpPremiumEyebrow span {

    width: 30px;

    height: 2px;

    background: #b88e21;

}


.fpPremiumEyebrow p {

    margin: 0;

    color: #b88e21;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.6px;

    text-transform: uppercase;

}


.fpPremiumHeroContent h1 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(44px, 4.5vw, 63px);

    line-height: 1.05;

    letter-spacing: -2px;

    font-weight: 600;

}


.fpPremiumHeroContent h1 strong {

    display: block;

    color: #b88e21;

    font-weight: 600;

}


.fpPremiumLead {

    max-width: 630px;

    margin: 28px 0 0;

    color: var(--text);

    opacity: .53;

    font-size: 14px;

    line-height: 1.85;

}


.fpPremiumLead.secondary {

    margin-top: 13px;

}


/* =========================================================
   BUTTONS
========================================================= */

.fpPremiumActions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 13px;

    margin-top: 32px;

}


.fpPremiumPrimary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    min-height: 51px;

    padding: 0 24px;

    background: #b88e21;

    border: 2px solid #b88e21;

    color: #fff;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    transition: .25s ease;

}


.fpPremiumPrimary i {

    font-size: 10px;

    transition: transform .25s ease;

}


.fpPremiumPrimary:hover {

    background: transparent;

    color: #b88e21;

}


.fpPremiumPrimary:hover i {

    transform: translateX(4px);

}


.fpPremiumSecondary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 51px;

    padding: 0 24px;

    border: 2px solid rgba(184,142,33,.15);

    color: var(--primary);

    text-decoration: none;

    font-size: 12px;

    font-weight: 600;

    transition: .25s ease;

}


.fpPremiumSecondary:hover {

    color: #b88e21;

    border-color: #b88e21;

}


/* =========================================================
   VISUAL AREA
========================================================= */

.fpPremiumVisual {

    position: relative;

    min-height: 520px;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* =========================================================
   MAIN PLAN CARD
========================================================= */

.fpPlanCard {

    position: relative;

    z-index: 2;

    width: min(100%, 500px);

    min-height: 400px;

    padding: 30px;

    border: 2px solid rgba(184,142,33,.16);

    background: var(--section);

    box-shadow:

        22px 22px 0 rgba(184,142,33,.025);

}


/* =========================================================
   HEADER
========================================================= */

.fpPlanHeader {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    padding-bottom: 22px;

    border-bottom: 2px solid rgba(184,142,33,.08);

}


.fpPlanHeader span {

    display: block;

    color: var(--text);

    opacity: .30;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.2px;

}


.fpPlanHeader strong {

    display: block;

    margin-top: 6px;

    color: #b88e21;

    opacity: .65;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .8px;

}


.fpPlanNumber {

    color: #b88e21;

    opacity: .35;

    font-size: 11px;

    font-weight: 700;

}


/* =========================================================
   MAIN MESSAGE
========================================================= */

.fpPlanMain {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 30px 0 20px;

}


.fpPlanMain small {

    color: var(--text);

    opacity: .28;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1px;

}


.fpPlanMain h3 {

    max-width: 280px;

    margin: 9px 0 0;

    color: var(--primary);

    font-size: 28px;

    line-height: 1.12;

    letter-spacing: -.7px;

    font-weight: 600;

}


.fpPlanMain h3 em {

    color: #b88e21;

    font-style: normal;

}


.fpPlanArrow {

    width: 46px;

    height: 46px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid rgba(184,142,33,.15);

}


.fpPlanArrow i {

    color: #b88e21;

    opacity: .65;

    font-size: 12px;

}


/* =========================================================
   CHART
========================================================= */

.fpMiniChart {

    position: relative;

    height: 150px;

    margin-top: 8px;

    overflow: hidden;

}


.fpChartLines {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}


.fpChartLines span {

    width: 100%;

    height: 2px;

    background: rgba(184,142,33,.045);

}


.fpMiniChart svg {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

}


.fpMiniChart path {

    fill: none;

    stroke: #b88e21;

    stroke-width: 2.5;

    opacity: .55;

    stroke-linecap: round;

}


/* =========================================================
   BOTTOM
========================================================= */

.fpPlanBottom {

    display: grid;

    grid-template-columns: 1fr auto;

    align-items: end;

    gap: 20px;

    padding-top: 20px;

    border-top: 2px solid rgba(184,142,33,.08);

}


.fpAllocationTitle span {

    display: block;

    color: var(--text);

    opacity: .27;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1px;

}


.fpAllocationTitle strong {

    display: block;

    margin-top: 5px;

    color: var(--text);

    opacity: .45;

    font-size: 8px;

    letter-spacing: .7px;

}


.fpBars {

    display: flex;

    gap: 5px;

    height: 7px;

    margin-top: 11px;

}


.fpBars span {

    display: block;

    height: 100%;

    background: #b88e21;

    opacity: .35;

}


.barOne {
    width: 34%;
}

.barTwo {
    width: 24%;
    opacity: .24 !important;
}

.barThree {
    width: 18%;
    opacity: .18 !important;
}

.barFour {
    width: 12%;
    opacity: .12 !important;
}


/* =========================================================
   STEPS
========================================================= */

.fpPlanSteps {

    display: flex;

    align-items: center;

    gap: 6px;

}


.fpPlanSteps span,
.fpPlanSteps strong {

    color: var(--text);

    opacity: .25;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: .7px;

}


.fpPlanSteps strong {

    color: #b88e21;

    opacity: .60;

}


.fpPlanSteps i {

    width: 3px;

    height: 3px;

    border-radius: 50%;

    background: #b88e21;

    opacity: .35;

}


/* =========================================================
   FLOATING DETAILS
========================================================= */

.fpPlanTag {

    position: absolute;

    z-index: 4;

    left: -8px;

    top: 95px;

    padding: 12px 15px;

    border: 2px solid rgba(184,142,33,.10);

    background: var(--section);

}


.fpPlanTag span {

    display: block;

    color: var(--text);

    opacity: .27;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 1px;

}


.fpPlanTag strong {

    display: block;

    margin-top: 4px;

    color: #b88e21;

    opacity: .65;

    font-size: 9px;

    letter-spacing: .5px;

}


.fpPlanCorner {

    position: absolute;

    z-index: 4;

    right: 4px;

    bottom: 70px;

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid rgba(184,142,33,.12);

    background: var(--section);

}


.fpPlanCorner span {

    color: #b88e21;

    opacity: .55;

    font-size: 8px;

    font-weight: 700;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .fpPremiumHero {

        padding: 85px 0;

    }

    .fpPremiumHeroGrid {

        gap: 45px;

    }

    .fpPremiumHeroContent h1 {

        font-size: 48px;

    }

    .fpPremiumVisual {

        min-height: 470px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

    .fpPremiumHero {

        padding: 65px 0 75px;

    }

    .fpPremiumHero .container {

        width: calc(100% - 30px);

    }

    .fpPremiumHeroGrid {

        grid-template-columns: 1fr;

        gap: 45px;

    }


    .fpPremiumHeroContent h1 {

        font-size: 36px;

        line-height: 1.08;

        letter-spacing: -1.2px;

    }


    .fpPremiumLead {

        font-size: 13px;

        line-height: 1.78;

    }


    .fpPremiumActions {

        flex-direction: column;

        align-items: stretch;

    }


    .fpPremiumPrimary,
    .fpPremiumSecondary {

        width: 100%;

        min-height: 50px;

    }


    /* visual */

    .fpPremiumVisual {

        min-height: 365px;

    }


    .fpPlanCard {

        width: calc(100% - 20px);

        min-height: 330px;

        padding: 22px;

    }


    .fpPlanMain {

        padding: 23px 0 15px;

    }


    .fpPlanMain h3 {

        font-size: 23px;

    }


    .fpPlanTag {

        left: 0;

        top: 55px;

    }


    .fpPlanCorner {

        right: 0;

        bottom: 48px;

    }


    .fpPlanBottom {

        grid-template-columns: 1fr;

        gap: 12px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .fpPremiumHeroContent h1 {

        font-size: 32px;

    }


    .fpPremiumVisual {

        min-height: 335px;

    }


    .fpPlanCard {

        min-height: 305px;

        padding: 18px;

    }


    .fpPlanMain h3 {

        font-size: 21px;

    }


    .fpPlanArrow {

        width: 40px;

        height: 40px;

    }

}

/* Hero Section Ends Here */

/* Intro Section Starts Here */

/* =========================================================
   FINANCIAL PLANNING INTRODUCTION
========================================================= */

.fpIntro {

    position: relative;

    padding: 105px 0;

    background: var(--section);

    overflow: hidden;

}


.fpIntro .container {

    width: min(1180px, 92%);

    margin: auto;

}


/* =========================================================
   MAIN GRID
========================================================= */

.fpIntroGrid {

    display: grid;

    grid-template-columns: 1fr .92fr;

    align-items: center;

    gap: 85px;

}


/* =========================================================
   LEFT CONTENT
========================================================= */

.fpIntroContent {

    max-width: 650px;

}


.fpIntroEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

}


.fpIntroEyebrow span {

    width: 30px;

    height: 2px;

    background: #b88e21;

}


.fpIntroEyebrow p {

    margin: 0;

    color: #b88e21;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.fpIntroContent h2 {

    margin: 0;

    max-width: 620px;

    color: var(--primary);

    font-size: clamp(40px, 4.2vw, 58px);

    line-height: 1.08;

    letter-spacing: -1.8px;

    font-weight: 600;

}


.fpIntroContent h2 strong {

    display: block;

    color: #b88e21;

    font-weight: 600;

}


.fpIntroText {

    max-width: 620px;

    margin-top: 27px;

}


.fpIntroText p {

    margin: 0;

    color: var(--text);

    opacity: .52;

    font-size: 14px;

    line-height: 1.85;

}


.fpIntroText p + p {

    margin-top: 15px;

}


/* =========================================================
   RIGHT FRAMEWORK
========================================================= */

.fpIntroFramework {

    position: relative;

    padding: 10px 0 0;

}


/* header */

.fpIntroFrameworkHeader {

    padding: 0 0 22px;

    border-bottom: 2px solid rgba(184,142,33,.10);

}


.fpIntroFrameworkHeader span {

    display: block;

    color: var(--text);

    opacity: .25;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.3px;

}


.fpIntroFrameworkHeader strong {

    display: block;

    margin-top: 6px;

    color: #b88e21;

    opacity: .68;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: .8px;

}


/* =========================================================
   FRAMEWORK ITEMS
========================================================= */

.fpIntroItem {

    position: relative;

    display: grid;

    grid-template-columns: 42px 1fr 38px;

    align-items: center;

    gap: 18px;

    padding: 27px 0;

    border-bottom: 2px solid rgba(184,142,33,.08);

    transition: padding .25s ease;

}


.fpIntroItem:hover {

    padding-left: 8px;

    padding-right: 8px;

}


.fpIntroNumber {

    align-self: start;

    color: #b88e21;

    opacity: .52;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .5px;

}


.fpIntroItemContent h3 {

    margin: 0;

    color: var(--primary);

    font-size: 18px;

    line-height: 1.25;

    font-weight: 600;

}


.fpIntroItemContent p {

    max-width: 390px;

    margin: 9px 0 0;

    color: var(--text);

    opacity: .45;

    font-size: 12px;

    line-height: 1.7;

}


.fpIntroArrow {

    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid rgba(184,142,33,.12);

    transition: all .25s ease;

}


.fpIntroArrow i {

    color: #b88e21;

    opacity: .55;

    font-size: 10px;

}


.fpIntroItem:hover .fpIntroArrow {

    border-color: rgba(184,142,33,.35);

    transform: translate(2px,-2px);

}


/* =========================================================
   FOOTER
========================================================= */

.fpIntroFrameworkFooter {

    display: flex;

    align-items: center;

    gap: 10px;

    padding-top: 20px;

}


.fpIntroFrameworkFooter span {

    width: 25px;

    height: 2px;

    background: #b88e21;

    opacity: .45;

}


.fpIntroFrameworkFooter p {

    margin: 0;

    color: var(--text);

    opacity: .27;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.1px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .fpIntro {

        padding: 85px 0;

    }


    .fpIntroGrid {

        gap: 45px;

    }


    .fpIntroContent h2 {

        font-size: 44px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

    .fpIntro {

        padding: 70px 0;

    }


    .fpIntro .container {

        width: calc(100% - 30px);

    }


    .fpIntroGrid {

        grid-template-columns: 1fr;

        gap: 50px;

    }


    .fpIntroContent h2 {

        font-size: 36px;

        line-height: 1.1;

        letter-spacing: -1.1px;

    }


    .fpIntroText {

        margin-top: 22px;

    }


    .fpIntroText p {

        font-size: 13px;

        line-height: 1.78;

    }


    .fpIntroItem {

        grid-template-columns: 34px 1fr 34px;

        gap: 12px;

        padding: 23px 0;

    }


    .fpIntroItem:hover {

        padding-left: 0;

        padding-right: 0;

    }


    .fpIntroItemContent h3 {

        font-size: 16px;

    }


    .fpIntroItemContent p {

        font-size: 11.5px;

        line-height: 1.65;

    }


    .fpIntroArrow {

        width: 32px;

        height: 32px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .fpIntroContent h2 {

        font-size: 32px;

    }


    .fpIntroItem {

        grid-template-columns: 28px 1fr;

    }


    .fpIntroArrow {

        display: none;

    }


    .fpIntroItemContent h3 {

        font-size: 15px;

    }

}

/* Intro Section Ends Here */

/* Matters Section Starts Here */

/* =========================================================
   WHY FINANCIAL PLANNING MATTERS
========================================================= */

.fpWhy {

    position: relative;

    padding: 110px 0;

    background: var(--section);

    overflow: hidden;

}


.fpWhy .container {

    width: min(1180px, 92%);

    margin: auto;

}


/* =========================================================
   TWO COLUMN LAYOUT
========================================================= */

.fpWhyGrid {

    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 100px;

    align-items: start;

}


/* =========================================================
   LEFT INTRO
========================================================= */

.fpWhyIntro {

    position: sticky;

    top: 100px;

}


.fpWhyEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 22px;

}


.fpWhyEyebrow span {

    width: 30px;

    height: 2px;

    background: #b88e21;

}


.fpWhyEyebrow p {

    margin: 0;

    color: #b88e21;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.4px;

    text-transform: uppercase;

}


.fpWhyIntro h2 {

    margin: 0;

    max-width: 510px;

    color: var(--primary);

    font-size: clamp(40px, 4vw, 56px);

    line-height: 1.08;

    letter-spacing: -1.7px;

    font-weight: 600;

}


.fpWhyIntro h2 strong {

    display: block;

    color: #b88e21;

    font-weight: 600;

}


/* =========================================================
   LEFT ACCENT
========================================================= */

.fpWhyAccent {

    display: grid;

    grid-template-columns: 35px 28px 1fr;

    align-items: center;

    gap: 12px;

    max-width: 400px;

    margin-top: 55px;

}


.fpWhyAccent > span {

    color: #b88e21;

    opacity: .55;

    font-size: 9px;

    font-weight: 700;

}


.fpWhyAccent > div {

    width: 28px;

    height: 2px;

    background: #b88e21;

    opacity: .45;

}


.fpWhyAccent p {

    margin: 0;

    color: var(--text);

    opacity: .35;

    font-size: 11px;

    line-height: 1.6;

}


/* =========================================================
   RIGHT LIST
========================================================= */

.fpWhyList {

    width: 100%;

}


/* =========================================================
   ITEM
========================================================= */

.fpWhyItem {

    position: relative;

    display: grid;

    grid-template-columns: 45px 1fr;

    gap: 20px;

    padding: 28px 0 30px;

    border-top: 2px solid rgba(184,142,33,.10);

    transition: padding .25s ease;

}


.fpWhyItem:last-child {

    border-bottom: 2px solid rgba(184,142,33,.10);

}


.fpWhyItem:hover {

    padding-left: 10px;

}


/* =========================================================
   NUMBER
========================================================= */

.fpWhyNumber {

    padding-top: 3px;

    color: #b88e21;

    opacity: .55;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .5px;

}


/* =========================================================
   CONTENT
========================================================= */

.fpWhyContent h3 {

    margin: 0;

    color: var(--primary);

    font-size: 20px;

    line-height: 1.25;

    font-weight: 600;

}


.fpWhyContent p {

    max-width: 580px;

    margin: 9px 0 0;

    color: var(--text);

    opacity: .47;

    font-size: 12.5px;

    line-height: 1.75;

}


/* =========================================================
   GOLD MICRO LINE
========================================================= */

.fpWhyLine {

    position: absolute;

    left: 0;

    bottom: -2px;

    width: 0;

    height: 2px;

    background: #b88e21;

    transition: width .35s ease;

}


.fpWhyItem:hover .fpWhyLine {

    width: 55px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .fpWhy {

        padding: 90px 0;

    }


    .fpWhyGrid {

        grid-template-columns: .85fr 1.15fr;

        gap: 55px;

    }


    .fpWhyIntro h2 {

        font-size: 44px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

    .fpWhy {

        padding: 70px 0;

    }


    .fpWhy .container {

        width: calc(100% - 30px);

    }


    .fpWhyGrid {

        grid-template-columns: 1fr;

        gap: 50px;

    }


    .fpWhyIntro {

        position: static;

    }


    .fpWhyIntro h2 {

        font-size: 36px;

        line-height: 1.1;

        letter-spacing: -1.1px;

    }


    .fpWhyAccent {

        margin-top: 30px;

    }


    .fpWhyItem {

        grid-template-columns: 34px 1fr;

        gap: 12px;

        padding: 23px 0 25px;

    }


    .fpWhyItem:hover {

        padding-left: 0;

    }


    .fpWhyContent h3 {

        font-size: 17px;

    }


    .fpWhyContent p {

        font-size: 11.5px;

        line-height: 1.7;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .fpWhyIntro h2 {

        font-size: 32px;

    }


    .fpWhyItem {

        grid-template-columns: 28px 1fr;

    }


    .fpWhyNumber {

        font-size: 8px;

    }

}

/* Matters Section Ends Here */

/* Approach Section Starts Here */

/* =========================================================
   FINANCIAL PLANNING APPROACH
========================================================= */

.fpApproach {

    position: relative;

    padding: 110px 0 100px;

    background: var(--section);

    overflow: hidden;

}


.fpApproach .container {

    width: min(1180px, 92%);

    margin: auto;

}


/* =========================================================
   HEADER
========================================================= */

.fpApproachHeader {

    max-width: 850px;

    margin-bottom: 65px;

}


.fpApproachEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

}


.fpApproachEyebrow span {

    width: 30px;

    height: 2px;

    background: #b88e21;

}


.fpApproachEyebrow p {

    margin: 0;

    color: #b88e21;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.fpApproachHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.3vw, 58px);

    line-height: 1.08;

    letter-spacing: -1.8px;

    font-weight: 600;

}


.fpApproachHeader h2 strong {

    color: #b88e21;

    font-weight: 600;

}


/* =========================================================
   PROCESS
========================================================= */

.fpApproachProcess {

    display: grid;

    grid-template-columns: 270px 1fr;

    gap: 80px;

    min-height: 430px;

}


/* =========================================================
   LEFT STEPS
========================================================= */

.fpApproachSteps {

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 8px 0;

}


/* vertical progress */

.fpApproachProgress {

    position: absolute;

    left: 21px;

    top: 28px;

    bottom: 28px;

    width: 2px;

    background: rgba(184,142,33,.10);

}


.fpApproachProgress span {

    display: block;

    width: 2px;

    height: 18%;

    background: #b88e21;

    transition: height .4s ease;

}


.fpApproachStep {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 22px;

    min-height: 55px;

    cursor: pointer;

}


.fpApproachStepNumber {

    width: 44px;

    height: 44px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid rgba(184,142,33,.10);

    border-radius: 50%;

    background: var(--section);

    color: var(--text);

    opacity: .30;

    font-size: 9px;

    font-weight: 700;

    transition: all .3s ease;

}


.fpApproachStepTitle {

    color: var(--text);

    opacity: .35;

    font-size: 12px;

    font-weight: 600;

    transition: all .3s ease;

}


.fpApproachStep.active .fpApproachStepNumber {

    border-color: #b88e21;

    color: #b88e21;

    opacity: 1;

    box-shadow: 0 0 0 6px rgba(184,142,33,.035);

}


.fpApproachStep.active .fpApproachStepTitle {

    color: var(--primary);

    opacity: 1;

}


/* =========================================================
   RIGHT DETAIL
========================================================= */

.fpApproachDetails {

    position: relative;

    min-height: 430px;

}


.fpApproachDetail {

    position: absolute;

    inset: 0;

    display: none;

    flex-direction: column;

    justify-content: center;

    padding: 45px 55px;

    border: 2px solid rgba(184,142,33,.11);

    background:

        linear-gradient(
            135deg,
            rgba(184,142,33,.025),
            transparent 65%
        );

}


.fpApproachDetail.active {

    display: flex;

}


/* top */

.fpApproachDetailTop {

    display: flex;

    align-items: center;

    gap: 13px;

}


.fpApproachDetailTop span {

    color: #b88e21;

    font-size: 10px;

    font-weight: 700;

}


.fpApproachDetailTop p {

    margin: 0;

    color: var(--text);

    opacity: .25;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.2px;

}


/* heading */

.fpApproachDetail h3 {

    margin: 18px 0 0;

    color: var(--primary);

    font-size: clamp(35px, 4vw, 52px);

    line-height: 1;

    letter-spacing: -1.5px;

    font-weight: 600;

}


.fpApproachDetail > p {

    max-width: 590px;

    margin: 18px 0 0;

    color: var(--text);

    opacity: .48;

    font-size: 14px;

    line-height: 1.85;

}


/* bottom meta */

.fpApproachDetailMeta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 35px;

    padding-top: 20px;

    border-top: 2px solid rgba(184,142,33,.08);

}


.fpApproachDetailMeta > span {

    color: var(--text);

    opacity: .25;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1px;

}


.fpApproachDetailMeta > div {

    display: flex;

    gap: 5px;

}


.fpApproachDetailMeta i {

    width: 22px;

    height: 2px;

    background: rgba(184,142,33,.12);

}


.fpApproachDetailMeta i:first-child {

    background: #b88e21;

}


/* =========================================================
   BOTTOM JOURNEY
========================================================= */

.fpApproachBottom {

    margin-top: 55px;

}


.fpApproachBottomLine {

    display: block;

    width: 100%;

    height: 2px;

    background: rgba(184,142,33,.08);

}


.fpApproachBottomSteps {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 14px;

    padding-top: 22px;

}


.fpApproachBottomSteps span,
.fpApproachBottomSteps strong {

    color: var(--text);

    opacity: .28;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1px;

}


.fpApproachBottomSteps strong {

    color: #b88e21;

    opacity: .70;

}


.fpApproachBottomSteps i {

    width: 4px;

    height: 4px;

    border-radius: 50%;

    background: #b88e21;

    opacity: .25;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .fpApproach {

        padding: 90px 0;

    }


    .fpApproachProcess {

        grid-template-columns: 220px 1fr;

        gap: 45px;

    }


    .fpApproachDetail {

        padding: 40px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

    .fpApproach {

        padding: 70px 0;

    }


    .fpApproach .container {

        width: calc(100% - 30px);

    }


    .fpApproachHeader {

        margin-bottom: 45px;

    }


    .fpApproachHeader h2 {

        font-size: 36px;

        line-height: 1.1;

        letter-spacing: -1.1px;

    }


    .fpApproachProcess {

        display: block;

        min-height: auto;

    }


    /* steps become horizontal scroll */

    .fpApproachSteps {

        display: flex;

        flex-direction: row;

        justify-content: flex-start;

        gap: 10px;

        overflow-x: auto;

        padding: 5px 0 18px;

        scrollbar-width: none;

    }


    .fpApproachSteps::-webkit-scrollbar {

        display: none;

    }


    .fpApproachProgress {

        display: none;

    }


    .fpApproachStep {

        flex: 0 0 auto;

        min-height: auto;

        gap: 7px;

        padding: 0;

    }


    .fpApproachStepNumber {

        width: 38px;

        height: 38px;

        font-size: 8px;

    }


    .fpApproachStepTitle {

        display: none;

    }


    .fpApproachDetails {

        min-height: 370px;

        margin-top: 12px;

    }


    .fpApproachDetail {

        padding: 30px 25px;

    }


    .fpApproachDetail h3 {

        font-size: 34px;

    }


    .fpApproachDetail > p {

        font-size: 13px;

        line-height: 1.75;

    }


    .fpApproachBottom {

        margin-top: 40px;

    }


    .fpApproachBottomSteps {

        gap: 8px;

        line-height: 1.8;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .fpApproachHeader h2 {

        font-size: 32px;

    }


    .fpApproachDetail {

        padding: 26px 20px;

    }


    .fpApproachDetail h3 {

        font-size: 31px;

    }


    .fpApproachDetail > p {

        font-size: 12px;

    }


    .fpApproachDetailMeta {

        margin-top: 25px;

    }

}

.fpApproachDetail {
    animation: fpApproachFade .35s ease;
}

@keyframes fpApproachFade {

    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

/* Approach Section Ends Here */

/* Strategies Section Starts Here */

/* =========================================================
   FINANCIAL PLANNING STRATEGIES
========================================================= */

.fpStrategies {

    position: relative;

    padding: 110px 0 100px;

    background: var(--section);

    overflow: hidden;

}

.fpStrategies .container {

    width: min(1180px, 92%);

    margin: auto;

}


/* =========================================================
   HEADER
========================================================= */

.fpStrategiesHeader {

    max-width: 850px;

    margin-bottom: 60px;

}


.fpStrategiesEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

}


.fpStrategiesEyebrow span {

    width: 30px;

    height: 2px;

    background: #b88e21;

}


.fpStrategiesEyebrow p {

    margin: 0;

    color: #b88e21;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.fpStrategiesHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.3vw, 58px);

    line-height: 1.08;

    letter-spacing: -1.8px;

    font-weight: 600;

}


.fpStrategiesHeader h2 strong {

    color: #b88e21;

    font-weight: 600;

}


/* =========================================================
   GRID
========================================================= */

.fpStrategiesGrid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 18px;

}


/* =========================================================
   STRATEGY
========================================================= */

.fpStrategy {

    position: relative;

    min-height: 355px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 28px;

    border: 2px solid rgba(184,142,33,.11);

    background: var(--section);

    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease;

    overflow: hidden;

}


.fpStrategy::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 0;

    height: 3px;

    background: #b88e21;

    transition: width .35s ease;

}


.fpStrategy:hover {

    transform: translateY(-7px);

    border-color: rgba(184,142,33,.27);

}


.fpStrategy:hover::before {

    width: 100%;

}


/* =========================================================
   TOP
========================================================= */

.fpStrategyTop {

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.fpStrategyNumber {

    color: #b88e21;

    opacity: .58;

    font-size: 11px;

    font-weight: 700;

}


.fpStrategyLabel {

    color: var(--text);

    opacity: .25;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.2px;

}


/* =========================================================
   CONTENT
========================================================= */

.fpStrategyContent {

    margin-top: auto;

    padding-top: 45px;

}


.fpStrategyContent h3 {

    max-width: 330px;

    margin: 0;

    color: var(--primary);

    font-size: 23px;

    line-height: 1.18;

    letter-spacing: -.4px;

    font-weight: 600;

}


.fpStrategyContent p {

    max-width: 350px;

    margin: 14px 0 0;

    color: var(--text);

    opacity: .46;

    font-size: 12px;

    line-height: 1.75;

}


/* =========================================================
   FOOTER
========================================================= */

.fpStrategyFooter {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 35px;

}


.fpStrategyFooter span {

    color: #b88e21;

    opacity: .42;

    font-size: 7px;

    font-weight: 700;

}


.fpStrategyFooter div {

    flex: 1;

    height: 2px;

    background: rgba(184,142,33,.07);

}


.fpStrategyFooter i {

    width: 30px;

    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid rgba(184,142,33,.11);

    color: #b88e21;

    opacity: .55;

    font-size: 8px;

    transition: all .3s ease;

}


.fpStrategy:hover .fpStrategyFooter i {

    transform: translate(3px,-3px);

    border-color: rgba(184,142,33,.3);

}


/* =========================================================
   OFFSET
========================================================= */

.strategyOffset {

    margin-top: 35px;

}


/* =========================================================
   BOTTOM
========================================================= */

.fpStrategiesBottom {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-top: 50px;

}


.fpStrategiesBottom span {

    width: 28px;

    height: 2px;

    background: #b88e21;

    opacity: .45;

}


.fpStrategiesBottom p {

    margin: 0;

    color: var(--text);

    opacity: .27;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.1px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .fpStrategies {

        padding: 90px 0;

    }


    .fpStrategiesGrid {

        grid-template-columns: repeat(2, 1fr);

    }


    .strategyOffset {

        margin-top: 0;

    }


    .fpStrategy {

        min-height: 330px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

    .fpStrategies {

        padding: 70px 0;

    }


    .fpStrategies .container {

        width: calc(100% - 30px);

    }


    .fpStrategiesHeader {

        margin-bottom: 40px;

    }


    .fpStrategiesHeader h2 {

        font-size: 36px;

        line-height: 1.1;

        letter-spacing: -1.1px;

    }


    .fpStrategiesGrid {

        grid-template-columns: 1fr;

        gap: 14px;

    }


    .fpStrategy {

        min-height: 300px;

        padding: 24px;

    }


    .strategyOffset {

        margin-top: 0;

    }


    .fpStrategyContent {

        padding-top: 35px;

    }


    .fpStrategyContent h3 {

        font-size: 21px;

    }


    .fpStrategyContent p {

        font-size: 11.5px;

        line-height: 1.7;

    }


    .fpStrategiesBottom {

        margin-top: 35px;

        justify-content: flex-start;

    }


    .fpStrategiesBottom p {

        line-height: 1.6;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .fpStrategiesHeader h2 {

        font-size: 32px;

    }


    .fpStrategy {

        min-height: 280px;

        padding: 21px;

    }


    .fpStrategyContent h3 {

        font-size: 19px;

    }

}

/* Strategies Section Ends Here */

/* Who Section Starts Here */

/* =========================================================
   WHO IS FINANCIAL PLANNING FOR?
========================================================= */

.fpWho {

    position: relative;

    padding: 110px 0 100px;

    background: var(--section);

    overflow: hidden;

}


.fpWho .container {

    width: min(1180px, 92%);

    margin: auto;

}


/* =========================================================
   MAIN GRID
========================================================= */

.fpWhoGrid {

    display: grid;

    grid-template-columns: .82fr 1.18fr;

    gap: 90px;

    align-items: start;

}


/* =========================================================
   LEFT INTRO
========================================================= */

.fpWhoIntro {

    position: sticky;

    top: 100px;

}


.fpWhoEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 21px;

}


.fpWhoEyebrow span {

    width: 30px;

    height: 2px;

    background: #b88e21;

}


.fpWhoEyebrow p {

    margin: 0;

    color: #b88e21;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.4px;

    text-transform: uppercase;

}


.fpWhoIntro h2 {

    max-width: 500px;

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4vw, 56px);

    line-height: 1.07;

    letter-spacing: -1.7px;

    font-weight: 600;

}


.fpWhoIntro h2 strong {

    display: block;

    color: #b88e21;

    font-weight: 600;

}


.fpWhoIntroText {

    max-width: 430px;

    margin: 25px 0 0;

    color: var(--text);

    opacity: .45;

    font-size: 13px;

    line-height: 1.8;

}


/* =========================================================
   LEFT MARKER
========================================================= */

.fpWhoMarker {

    display: grid;

    grid-template-columns: 35px 30px 1fr;

    align-items: center;

    gap: 11px;

    max-width: 350px;

    margin-top: 55px;

}


.fpWhoMarker > span {

    color: #b88e21;

    opacity: .55;

    font-size: 9px;

    font-weight: 700;

}


.fpWhoMarker > div {

    width: 30px;

    height: 2px;

    background: #b88e21;

    opacity: .45;

}


.fpWhoMarker p {

    margin: 0;

    color: var(--text);

    opacity: .27;

    font-size: 7px;

    line-height: 1.7;

    font-weight: 700;

    letter-spacing: .9px;

}


/* =========================================================
   PROFILE LIST
========================================================= */

.fpWhoProfiles {

    width: 100%;

}


.fpWhoProfile {

    position: relative;

    display: grid;

    grid-template-columns: 48px 1fr 40px;

    align-items: center;

    gap: 18px;

    padding: 28px 0 30px;

    border-top: 2px solid rgba(184,142,33,.09);

    transition: padding .25s ease;

}


.fpWhoProfile:last-child {

    border-bottom: 2px solid rgba(184,142,33,.09);

}


.fpWhoProfile:hover {

    padding-left: 10px;

}


/* =========================================================
   NUMBER
========================================================= */

.fpWhoNumber {

    align-self: start;

    padding-top: 4px;

    color: #b88e21;

    opacity: .50;

    font-size: 9px;

    font-weight: 700;

}


/* =========================================================
   CONTENT
========================================================= */

.fpWhoProfileContent h3 {

    margin: 0;

    color: var(--primary);

    font-size: 20px;

    line-height: 1.25;

    font-weight: 600;

}


.fpWhoProfileContent p {

    max-width: 590px;

    margin: 9px 0 0;

    color: var(--text);

    opacity: .45;

    font-size: 12.5px;

    line-height: 1.75;

}


/* =========================================================
   ARROW
========================================================= */

.fpWhoProfileArrow {

    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid rgba(184,142,33,.11);

    transition: all .25s ease;

}


.fpWhoProfileArrow i {

    color: #b88e21;

    opacity: .52;

    font-size: 9px;

}


.fpWhoProfile:hover .fpWhoProfileArrow {

    border-color: rgba(184,142,33,.30);

    transform: translate(3px,-3px);

}


/* =========================================================
   GOLD HOVER LINE
========================================================= */

.fpWhoProfile::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -2px;

    width: 0;

    height: 2px;

    background: #b88e21;

    transition: width .3s ease;

}


.fpWhoProfile:hover::after {

    width: 55px;

}


/* =========================================================
   BOTTOM
========================================================= */

.fpWhoBottom {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    margin-top: 55px;

}


.fpWhoBottom span {

    width: 27px;

    height: 2px;

    background: #b88e21;

    opacity: .45;

}


.fpWhoBottom p {

    margin: 0;

    color: var(--text);

    opacity: .25;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.1px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .fpWho {

        padding: 90px 0;

    }


    .fpWhoGrid {

        grid-template-columns: .85fr 1.15fr;

        gap: 50px;

    }


    .fpWhoIntro h2 {

        font-size: 44px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

    .fpWho {

        padding: 70px 0;

    }


    .fpWho .container {

        width: calc(100% - 30px);

    }


    .fpWhoGrid {

        grid-template-columns: 1fr;

        gap: 48px;

    }


    .fpWhoIntro {

        position: static;

    }


    .fpWhoIntro h2 {

        font-size: 36px;

        line-height: 1.1;

        letter-spacing: -1.1px;

    }


    .fpWhoIntroText {

        font-size: 12.5px;

        line-height: 1.75;

    }


    .fpWhoMarker {

        margin-top: 30px;

    }


    .fpWhoProfile {

        grid-template-columns: 34px 1fr 34px;

        gap: 12px;

        padding: 23px 0 25px;

    }


    .fpWhoProfile:hover {

        padding-left: 0;

    }


    .fpWhoProfileContent h3 {

        font-size: 17px;

    }


    .fpWhoProfileContent p {

        font-size: 11.5px;

        line-height: 1.7;

    }


    .fpWhoProfileArrow {

        width: 32px;

        height: 32px;

    }


    .fpWhoBottom {

        justify-content: flex-start;

        margin-top: 40px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .fpWhoIntro h2 {

        font-size: 32px;

    }


    .fpWhoProfile {

        grid-template-columns: 28px 1fr;

    }


    .fpWhoProfileArrow {

        display: none;

    }


    .fpWhoProfileContent h3 {

        font-size: 16px;

    }

}

/* Who Section Ends Here */

/* CTA Section Starts Here */

/* =========================================================
   FINANCIAL PLANNING — SIMPLE FINAL CTA
========================================================= */

.fpFinalSimple {

    position: relative;

    padding: 115px 0 70px;

    background: var(--section);

    overflow: hidden;

}


.fpFinalSimple .container {

    width: min(1180px, 92%);

    margin: auto;

}


/* =========================================================
   MAIN
========================================================= */

.fpFinalSimpleInner {

    position: relative;

    max-width: 980px;

    margin: 0 auto;

    text-align: center;

}


/* =========================================================
   EYEBROW
========================================================= */

.fpFinalSimpleEyebrow {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    margin-bottom: 23px;

}


.fpFinalSimpleEyebrow span {

    width: 30px;

    height: 2px;

    background: #b88e21;

}


.fpFinalSimpleEyebrow p {

    margin: 0;

    color: #b88e21;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.6px;

    text-transform: uppercase;

}


/* =========================================================
   HEADING
========================================================= */

.fpFinalSimpleInner h2 {

    max-width: 850px;

    margin: 0 auto;

    color: var(--primary);

    font-size: clamp(42px, 5vw, 66px);

    line-height: 1.04;

    letter-spacing: -2.4px;

    font-weight: 600;

}


.fpFinalSimpleInner h2 strong {

    color: #b88e21;

    font-weight: 600;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.fpFinalSimpleDescription {

    max-width: 690px;

    margin: 27px auto 0;

    color: var(--text);

    opacity: .48;

    font-size: 13px;

    line-height: 1.85;

}


/* =========================================================
   BUTTONS
========================================================= */

.fpFinalSimpleButtons {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-top: 32px;

}


.fpFinalSimplePrimary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    min-height: 52px;

    padding: 0 25px;

    background: #b88e21;

    border: 2px solid #b88e21;

    color: #fff;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    transition: .25s ease;

}


.fpFinalSimplePrimary i {

    font-size: 9px;

    transition: transform .25s ease;

}


.fpFinalSimplePrimary:hover {

    background: transparent;

    color: #b88e21;

}


.fpFinalSimplePrimary:hover i {

    transform: translateX(4px);

}


.fpFinalSimpleSecondary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 52px;

    padding: 0 25px;

    border: 2px solid rgba(184,142,33,.15);

    color: var(--primary);

    text-decoration: none;

    font-size: 11px;

    font-weight: 600;

    transition: .25s ease;

}


.fpFinalSimpleSecondary:hover {

    color: #b88e21;

    border-color: #b88e21;

}


/* =========================================================
   ABSTRACT COMPASS VISUAL
========================================================= */

.fpFinalSimpleVisual {

    position: relative;

    width: 230px;

    height: 230px;

    margin: 65px auto 0;

}


/* =========================================================
   COMPASS
========================================================= */

.fpCompass {

    position: relative;

    width: 170px;

    height: 170px;

    margin: auto;

}


.fpCompassRing {

    position: absolute;

    top: 50%;

    left: 50%;

    border: 2px solid rgba(184,142,33,.10);

    border-radius: 50%;

    transform: translate(-50%, -50%);

}


.ringOne {

    width: 170px;

    height: 170px;

}


.ringTwo {

    width: 112px;

    height: 112px;

    border-color: rgba(184,142,33,.16);

}


/* =========================================================
   CENTER
========================================================= */

.fpCompassCenter {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 12px;

    height: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #b88e21;

    border-radius: 50%;

    transform: translate(-50%, -50%);

}


.fpCompassCenter span {

    width: 4px;

    height: 4px;

    background: var(--section);

    border-radius: 50%;

}


/* =========================================================
   CROSS LINES
========================================================= */

.fpCompassLine {

    position: absolute;

    background: rgba(184,142,33,.10);

}


.lineHorizontal {

    top: 50%;

    left: 0;

    width: 100%;

    height: 2px;

    transform: translateY(-50%);

}


.lineVertical {

    top: 0;

    left: 50%;

    width: 2px;

    height: 100%;

    transform: translateX(-50%);

}


/* =========================================================
   DOTS
========================================================= */

.fpCompassDot {

    position: absolute;

    width: 7px;

    height: 7px;

    background: var(--section);

    border: 2px solid #b88e21;

    border-radius: 50%;

}


.dotTop {

    top: -4px;

    left: 50%;

    transform: translateX(-50%);

}


.dotRight {

    top: 50%;

    right: -4px;

    transform: translateY(-50%);

}


.dotBottom {

    bottom: -4px;

    left: 50%;

    transform: translateX(-50%);

}


.dotLeft {

    top: 50%;

    left: -4px;

    transform: translateY(-50%);

}


/* =========================================================
   CENTER ARROW
========================================================= */

.fpCompassArrow {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--section);

    border: 2px solid rgba(184,142,33,.16);

    transform: translate(-50%, -50%);

}


.fpCompassArrow i {

    color: #b88e21;

    opacity: .65;

    font-size: 11px;

}


/* =========================================================
   LABEL
========================================================= */

.fpCompassLabel {

    position: absolute;

    left: 50%;

    bottom: -2px;

    width: max-content;

    transform: translateX(-50%);

}


.fpCompassLabel span {

    display: block;

    color: var(--text);

    opacity: .22;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.3px;

}


.fpCompassLabel strong {

    display: block;

    margin-top: 5px;

    color: #b88e21;

    opacity: .55;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: .8px;

}


/* =========================================================
   BOTTOM PROCESS
========================================================= */

.fpFinalSimpleBottom {

    margin-top: 45px;

}


.fpBottomLine {

    display: block;

    width: 100%;

    height: 2px;

    background: rgba(184,142,33,.08);

}


.fpBottomSequence {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 21px;

}


.fpBottomSequence > div {

    display: flex;

    align-items: center;

    gap: 8px;

}


.fpBottomSequence small {

    color: var(--text);

    opacity: .18;

    font-size: 7px;

    font-weight: 700;

}


.fpBottomSequence span {

    color: var(--text);

    opacity: .30;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1px;

}


.fpBottomSequence .active span {

    color: #b88e21;

    opacity: .7;

}


.fpBottomSequence i {

    flex: 1;

    max-width: 80px;

    height: 2px;

    background: rgba(184,142,33,.08);

}


/* =========================================================
   HOVER DETAIL
========================================================= */

.fpCompass {

    transition: transform .5s ease;

}


.fpFinalSimpleVisual:hover .fpCompass {

    transform: rotate(8deg);

}


.fpFinalSimpleVisual:hover .fpCompassArrow {

    transform: translate(-50%, -50%) rotate(-8deg);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .fpFinalSimple {

        padding: 90px 0 65px;

    }


    .fpFinalSimpleInner h2 {

        font-size: 50px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

    .fpFinalSimple {

        padding: 70px 0 50px;

    }


    .fpFinalSimple .container {

        width: calc(100% - 30px);

    }


    .fpFinalSimpleInner h2 {

        font-size: 37px;

        line-height: 1.08;

        letter-spacing: -1.2px;

    }


    .fpFinalSimpleDescription {

        font-size: 12px;

        line-height: 1.78;

    }


    .fpFinalSimpleButtons {

        flex-direction: column;

        align-items: stretch;

    }


    .fpFinalSimplePrimary,
    .fpFinalSimpleSecondary {

        width: 100%;

    }


    .fpFinalSimpleVisual {

        margin-top: 50px;

    }


    .fpFinalSimpleBottom {

        margin-top: 35px;

    }


    .fpBottomSequence {

        justify-content: flex-start;

        gap: 10px;

        overflow-x: auto;

        padding-bottom: 5px;

        scrollbar-width: none;

    }


    .fpBottomSequence::-webkit-scrollbar {

        display: none;

    }


    .fpBottomSequence > div {

        flex: 0 0 auto;

    }


    .fpBottomSequence i {

        flex: 0 0 20px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .fpFinalSimpleInner h2 {

        font-size: 33px;

    }


    .fpFinalSimpleVisual {

        width: 210px;

        height: 215px;

    }


    .fpCompass {

        transform: scale(.9);

    }

}

/* CTA Section Ends Here */

/* Financial Planning Ends Here */


/* Asset Allocation Page Starts Here */

/* Hero Section Starts Here */

/* =========================================================
   ASSET ALLOCATION HERO
========================================================= */

.assetHero {

    position: relative;

    padding: 105px 0 100px;

    background: var(--section);

    overflow: hidden;

}


.assetHero .container {

    width: min(1180px, 92%);

    margin: auto;

}


/* =========================================================
   MAIN GRID
========================================================= */

.assetHeroGrid {

    display: grid;

    grid-template-columns: 1.02fr .98fr;

    align-items: center;

    gap: 75px;

    min-height: 620px;

}


/* =========================================================
   LEFT CONTENT
========================================================= */

.assetHeroContent {

    max-width: 650px;

}


.assetHeroEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 22px;

}


.assetHeroEyebrow span {

    width: 31px;

    height: 2px;

    background: #b88e21;

}


.assetHeroEyebrow p {

    margin: 0;

    color: #b88e21;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.6px;

    text-transform: uppercase;

}


.assetHeroContent h1 {

    margin: 0;

    max-width: 650px;

    color: var(--primary);

    font-size: clamp(46px, 5vw, 68px);

    line-height: 1.02;

    letter-spacing: -2.6px;

    font-weight: 600;

}


.assetHeroContent h1 strong {

    display: block;

    color: #b88e21;

    font-weight: 600;

}


.assetHeroDescription {

    max-width: 610px;

    margin: 27px 0 0;

    color: var(--text);

    opacity: .50;

    font-size: 13px;

    line-height: 1.85;

}


.assetHeroDescription.secondary {

    margin-top: 14px;

}


/* =========================================================
   BUTTONS
========================================================= */

.assetHeroButtons {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 32px;

}


.assetHeroPrimary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    min-height: 53px;

    padding: 0 25px;

    background: #b88e21;

    border: 2px solid #b88e21;

    color: #fff;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    transition: .25s ease;

}


.assetHeroPrimary i {

    font-size: 9px;

    transition: transform .25s ease;

}


.assetHeroPrimary:hover {

    background: transparent;

    color: #b88e21;

}


.assetHeroPrimary:hover i {

    transform: translateX(4px);

}


.assetHeroSecondary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 53px;

    padding: 0 25px;

    border: 2px solid rgba(184,142,33,.14);

    color: var(--primary);

    text-decoration: none;

    font-size: 11px;

    font-weight: 600;

    transition: .25s ease;

}


.assetHeroSecondary:hover {

    color: #b88e21;

    border-color: #b88e21;

}


/* =========================================================
   RIGHT VISUAL FRAME
========================================================= */

.assetHeroVisual {

    position: relative;

    width: 100%;

}


.assetVisualFrame {

    position: relative;

    width: 100%;

    min-height: 500px;

    border: 2px solid rgba(184,142,33,.10);

    overflow: hidden;

}


/* subtle grid */

.assetVisualFrame::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(184,142,33,.035) 2px,
            transparent 2px
        ),

        linear-gradient(
            90deg,
            rgba(184,142,33,.035) 2px,
            transparent 2px
        );

    background-size: 48px 48px;

    opacity: .65;

    mask-image: radial-gradient(
        circle at center,
        black 10%,
        transparent 78%
    );

}


/* =========================================================
   TOP LABEL
========================================================= */

.assetVisualTop {

    position: relative;

    z-index: 5;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 21px 24px;

    border-bottom: 2px solid rgba(184,142,33,.07);

}


.assetVisualTop span {

    color: var(--text);

    opacity: .24;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.3px;

}


.assetVisualTop strong {

    color: #b88e21;

    opacity: .55;

    font-size: 8px;

    font-weight: 700;

}


/* =========================================================
   BALANCE AREA
========================================================= */

.assetBalance {

    position: relative;

    height: 405px;

}


/* =========================================================
   CONNECTION LINES
========================================================= */

.assetConnection {

    position: absolute;

    height: 2px;

    background: rgba(184,142,33,.12);

    transform-origin: left center;

}


.connectionOne {

    width: 145px;

    left: 50%;

    top: 50%;

    transform: rotate(-32deg);

}


.connectionTwo {

    width: 145px;

    left: 50%;

    top: 50%;

    transform: rotate(32deg);

}


.connectionThree {

    width: 125px;

    left: 50%;

    top: 50%;

    transform: rotate(148deg);

}


.connectionFour {

    width: 125px;

    left: 50%;

    top: 50%;

    transform: rotate(-148deg);

}


/* =========================================================
   CENTRAL CORE
========================================================= */

.assetBalanceCore {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 76px;

    height: 76px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid rgba(184,142,33,.24);

    border-radius: 50%;

    background: var(--section);

    transform: translate(-50%, -50%);

    z-index: 4;

}


.assetBalanceCore::before {

    content: "";

    position: absolute;

    width: 94px;

    height: 94px;

    border: 1px dashed rgba(184,142,33,.10);

    border-radius: 50%;

}


.assetBalanceCore span {

    width: 13px;

    height: 13px;

    border-radius: 50%;

    background: #b88e21;

    box-shadow: 0 0 0 9px rgba(184,142,33,.06);

}


/* =========================================================
   INVESTMENT BLOCKS
========================================================= */

.assetBlock {

    position: absolute;

    z-index: 5;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    width: 145px;

    height: 95px;

    padding: 14px 15px;

    border: 2px solid rgba(184,142,33,.12);

    background: var(--section);

    transition:

        transform .3s ease,

        border-color .3s ease;

}


.assetBlock:hover {

    border-color: rgba(184,142,33,.32);

    transform: translateY(-4px);

}


.assetBlock small {

    color: #b88e21;

    opacity: .55;

    font-size: 7px;

    font-weight: 700;

}


.assetBlock strong {

    color: var(--primary);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .7px;

}


.assetBlock em {

    color: #b88e21;

    opacity: .65;

    font-size: 13px;

    font-style: normal;

    font-weight: 600;

}


/* positions */

.assetBlockOne {

    top: 58px;

    left: 35px;

}


.assetBlockTwo {

    top: 58px;

    right: 35px;

}


.assetBlockThree {

    bottom: 55px;

    left: 35px;

}


.assetBlockFour {

    bottom: 55px;

    right: 35px;

}


/* =========================================================
   CENTER LABEL
========================================================= */

.assetBalanceLabel {

    position: absolute;

    top: calc(50% + 53px);

    left: 50%;

    z-index: 6;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 4px;

    transform: translateX(-50%);

}


.assetBalanceLabel span {

    color: var(--text);

    opacity: .23;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.assetBalanceLabel strong {

    color: #b88e21;

    opacity: .58;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: .7px;

}


/* =========================================================
   BOTTOM LABEL
========================================================= */

.assetVisualBottom {

    position: relative;

    z-index: 5;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 18px 20px;

    border-top: 2px solid rgba(184,142,33,.07);

}


.assetVisualBottom span,
.assetVisualBottom strong {

    color: var(--text);

    opacity: .22;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 1px;

}


.assetVisualBottom strong {

    color: #b88e21;

    opacity: .60;

}


.assetVisualBottom i {

    width: 3px;

    height: 3px;

    border-radius: 50%;

    background: #b88e21;

    opacity: .3;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .assetHero {

        padding: 85px 0;

    }


    .assetHeroGrid {

        gap: 45px;

    }


    .assetHeroContent h1 {

        font-size: 49px;

    }


    .assetVisualFrame {

        min-height: 460px;

    }


    .assetBalance {

        height: 365px;

    }


    .assetBlock {

        width: 125px;

        height: 88px;

    }


    .assetBlockOne,
    .assetBlockThree {

        left: 22px;

    }


    .assetBlockTwo,
    .assetBlockFour {

        right: 22px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

    .assetHero {

        padding: 65px 0 70px;

    }


    .assetHero .container {

        width: calc(100% - 30px);

    }


    .assetHeroGrid {

        grid-template-columns: 1fr;

        gap: 50px;

        min-height: auto;

    }


    .assetHeroContent h1 {

        font-size: 38px;

        line-height: 1.07;

        letter-spacing: -1.3px;

    }


    .assetHeroDescription {

        font-size: 12px;

        line-height: 1.78;

    }


    .assetHeroButtons {

        flex-direction: column;

        align-items: stretch;

    }


    .assetHeroPrimary,
    .assetHeroSecondary {

        width: 100%;

    }


    .assetVisualFrame {

        min-height: 440px;

    }


    .assetBalance {

        height: 350px;

    }


    .assetBlock {

        width: 115px;

        height: 82px;

        padding: 11px;

    }


    .assetBlockOne,
    .assetBlockThree {

        left: 13px;

    }


    .assetBlockTwo,
    .assetBlockFour {

        right: 13px;

    }


    .assetBlock strong {

        font-size: 7px;

    }


    .assetBlock em {

        font-size: 11px;

    }


    .assetBalanceCore {

        width: 65px;

        height: 65px;

    }


    .assetBalanceCore::before {

        width: 82px;

        height: 82px;

    }


    .connectionOne,
    .connectionTwo {

        width: 110px;

    }


    .connectionThree,
    .connectionFour {

        width: 100px;

    }


    .assetVisualBottom {

        gap: 8px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .assetHeroContent h1 {

        font-size: 34px;

    }


    .assetVisualFrame {

        min-height: 400px;

    }


    .assetBalance {

        height: 315px;

    }


    .assetBlock {

        width: 100px;

        height: 76px;

    }


    .assetBlockOne,
    .assetBlockThree {

        left: 8px;

    }


    .assetBlockTwo,
    .assetBlockFour {

        right: 8px;

    }


    .assetBalanceCore {

        width: 58px;

        height: 58px;

    }


    .assetBalanceCore::before {

        width: 73px;

        height: 73px;

    }


    .assetBalanceLabel {

        top: calc(50% + 45px);

    }

}

/* Hero Section Ends Here */

/* Intro Section Starts Here */

/* =========================================================
   ASSET ALLOCATION INTRODUCTION
========================================================= */

.assetIntro {

    position: relative;

    padding: 105px 0 95px;

    background: var(--section);

    overflow: hidden;

}


.assetIntro .container {

    width: min(1180px, 92%);

    margin: auto;

}


/* =========================================================
   MAIN GRID
========================================================= */

.assetIntroGrid {

    display: grid;

    grid-template-columns: 1fr .9fr;

    gap: 90px;

    align-items: start;

}


/* =========================================================
   LEFT CONTENT
========================================================= */

.assetIntroContent {

    max-width: 650px;

}


.assetIntroEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

}


.assetIntroEyebrow span {

    width: 30px;

    height: 2px;

    background: #b88e21;

}


.assetIntroEyebrow p {

    margin: 0;

    color: #b88e21;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.assetIntroContent h2 {

    max-width: 650px;

    margin: 0;

    color: var(--primary);

    font-size: clamp(39px, 4.2vw, 57px);

    line-height: 1.07;

    letter-spacing: -1.7px;

    font-weight: 600;

}


.assetIntroContent h2 strong {

    color: #b88e21;

    font-weight: 600;

}


.assetIntroLine {

    width: 45px;

    height: 2px;

    margin: 28px 0 24px;

    background: #b88e21;

    opacity: .55;

}


.assetIntroContent > p {

    max-width: 620px;

    margin: 0 0 17px;

    color: var(--text);

    opacity: .47;

    font-size: 13px;

    line-height: 1.85;

}


/* =========================================================
   RIGHT HIGHLIGHTS
========================================================= */

.assetIntroHighlights {

    padding-top: 8px;

}


/* =========================================================
   VISUAL
========================================================= */

.assetIntroVisual {

    position: relative;

    height: 150px;

    margin-bottom: 12px;

    border: 2px solid rgba(184,142,33,.09);

    overflow: hidden;

}


.assetIntroVisual::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(184,142,33,.035) 2px,
            transparent 2px
        ),

        linear-gradient(
            90deg,
            rgba(184,142,33,.035) 2px,
            transparent 2px
        );

    background-size: 40px 40px;

    opacity: .5;

}


/* =========================================================
   BALANCE MOTIF
========================================================= */

.assetIntroBalance {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 170px;

    height: 90px;

    transform: translate(-50%, -50%);

}


.assetBalanceLine {

    position: absolute;

    background: rgba(184,142,33,.13);

}


.assetBalanceLine.horizontal {

    top: 50%;

    left: 0;

    width: 100%;

    height: 2px;

    transform: translateY(-50%);

}


.assetBalanceLine.vertical {

    top: 0;

    left: 50%;

    width: 2px;

    height: 100%;

    transform: translateX(-50%);

}


.assetBalanceCircle {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid rgba(184,142,33,.23);

    border-radius: 50%;

    background: var(--section);

    transform: translate(-50%, -50%);

}


.assetBalanceCircle::before {

    content: "";

    position: absolute;

    width: 62px;

    height: 62px;

    border: 1px dashed rgba(184,142,33,.10);

    border-radius: 50%;

}


.assetBalanceCircle span {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #b88e21;

}


/* =========================================================
   VISUAL DOTS
========================================================= */

.assetBalanceDot {

    position: absolute;

    width: 7px;

    height: 7px;

    border: 2px solid #b88e21;

    border-radius: 50%;

    background: var(--section);

}


.dotA {

    top: 8px;

    left: 50%;

    transform: translateX(-50%);

}


.dotB {

    bottom: 8px;

    left: 50%;

    transform: translateX(-50%);

}


.dotC {

    top: 50%;

    right: -3px;

    transform: translateY(-50%);

}


.assetIntroVisualLabel {

    position: absolute;

    left: 20px;

    bottom: 17px;

    z-index: 3;

}


.assetIntroVisualLabel span {

    display: block;

    color: var(--text);

    opacity: .22;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 1.2px;

}


.assetIntroVisualLabel strong {

    display: block;

    margin-top: 4px;

    color: #b88e21;

    opacity: .58;

    font-size: 8px;

    letter-spacing: .7px;

}


/* =========================================================
   HIGHLIGHT ROW
========================================================= */

.assetIntroHighlight {

    position: relative;

    display: grid;

    grid-template-columns: 38px 1fr 35px;

    gap: 16px;

    align-items: start;

    padding: 25px 0 26px;

    border-top: 2px solid rgba(184,142,33,.09);

    transition: padding .25s ease;

}


.assetIntroHighlight:last-child {

    border-bottom: 2px solid rgba(184,142,33,.09);

}


.assetIntroHighlight:hover {

    padding-left: 8px;

}


/* =========================================================
   NUMBER
========================================================= */

.assetHighlightNumber {

    padding-top: 3px;

    color: #b88e21;

    opacity: .52;

    font-size: 8px;

    font-weight: 700;

}


/* =========================================================
   CONTENT
========================================================= */

.assetHighlightContent h3 {

    margin: 0;

    color: var(--primary);

    font-size: 19px;

    line-height: 1.25;

    font-weight: 600;

}


.assetHighlightContent p {

    max-width: 470px;

    margin: 8px 0 0;

    color: var(--text);

    opacity: .43;

    font-size: 11.5px;

    line-height: 1.7;

}


/* =========================================================
   ARROW
========================================================= */

.assetHighlightArrow {

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid rgba(184,142,33,.11);

    transition: .25s ease;

}


.assetHighlightArrow i {

    color: #b88e21;

    opacity: .52;

    font-size: 8px;

}


.assetIntroHighlight:hover .assetHighlightArrow {

    border-color: rgba(184,142,33,.30);

    transform: translate(3px,-3px);

}


/* =========================================================
   BOTTOM
========================================================= */

.assetIntroBottom {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    margin-top: 55px;

}


.assetIntroBottom > span {

    width: 28px;

    height: 2px;

    background: #b88e21;

    opacity: .45;

}


.assetIntroBottom p {

    margin: 0;

    color: var(--text);

    opacity: .25;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .assetIntro {

        padding: 85px 0;

    }


    .assetIntroGrid {

        gap: 50px;

    }


    .assetIntroContent h2 {

        font-size: 44px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

    .assetIntro {

        padding: 70px 0;

    }


    .assetIntro .container {

        width: calc(100% - 30px);

    }


    .assetIntroGrid {

        grid-template-columns: 1fr;

        gap: 45px;

    }


    .assetIntroContent h2 {

        font-size: 36px;

        line-height: 1.09;

        letter-spacing: -1.1px;

    }


    .assetIntroContent > p {

        font-size: 12px;

        line-height: 1.78;

    }


    .assetIntroVisual {

        height: 135px;

    }


    .assetIntroHighlight {

        grid-template-columns: 30px 1fr 32px;

        gap: 12px;

        padding: 22px 0 23px;

    }


    .assetIntroHighlight:hover {

        padding-left: 0;

    }


    .assetHighlightContent h3 {

        font-size: 17px;

    }


    .assetHighlightContent p {

        font-size: 11px;

        line-height: 1.7;

    }


    .assetIntroBottom {

        justify-content: flex-start;

        margin-top: 38px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .assetIntroContent h2 {

        font-size: 32px;

    }


    .assetIntroHighlight {

        grid-template-columns: 25px 1fr;

    }


    .assetHighlightArrow {

        display: none;

    }

}

/* Intro Section Ends Here */

/* Matters Section Starts Here */

/* =========================================================
   WHY ASSET ALLOCATION MATTERS
========================================================= */

.assetWhy {

    position: relative;

    padding: 110px 0 95px;

    background: var(--section);

    overflow: hidden;

}


.assetWhy .container {

    width: min(1180px, 92%);

    margin: auto;

}


/* =========================================================
   MAIN EDITORIAL GRID
========================================================= */

.assetWhyGrid {

    display: grid;

    grid-template-columns: .85fr 1.15fr;

    gap: 95px;

    align-items: start;

}


/* =========================================================
   LEFT SIDE
========================================================= */

.assetWhyIntro {

    position: sticky;

    top: 90px;

}


.assetWhyEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

}


.assetWhyEyebrow span {

    width: 30px;

    height: 2px;

    background: #b88e21;

}


.assetWhyEyebrow p {

    margin: 0;

    color: #b88e21;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.assetWhyIntro h2 {

    max-width: 520px;

    margin: 0;

    color: var(--primary);

    font-size: clamp(39px, 4.1vw, 56px);

    line-height: 1.07;

    letter-spacing: -1.7px;

    font-weight: 600;

}


.assetWhyIntro h2 strong {

    color: #b88e21;

    font-weight: 600;

}


.assetWhyLead {

    max-width: 450px;

    margin: 25px 0 0;

    color: var(--text);

    opacity: .45;

    font-size: 13px;

    line-height: 1.8;

}


/* =========================================================
   ABSTRACT VISUAL
========================================================= */

.assetWhyVisual {

    position: relative;

    width: 100%;

    max-width: 430px;

    height: 245px;

    margin-top: 48px;

    border: 2px solid rgba(184,142,33,.09);

    overflow: hidden;

}


.assetWhyVisualGrid {

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(184,142,33,.035) 2px,
            transparent 2px
        ),

        linear-gradient(
            90deg,
            rgba(184,142,33,.035) 2px,
            transparent 2px
        );

    background-size: 42px 42px;

    opacity: .6;

}


/* =========================================================
   AXIS
========================================================= */

.assetWhyAxis {

    position: absolute;

    background: rgba(184,142,33,.10);

}


.axisHorizontal {

    width: 78%;

    height: 2px;

    left: 11%;

    top: 50%;

}


.axisVertical {

    width: 2px;

    height: 72%;

    top: 14%;

    left: 50%;

}


/* =========================================================
   CORE
========================================================= */

.assetWhyCore {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 62px;

    height: 62px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid rgba(184,142,33,.22);

    border-radius: 50%;

    background: var(--section);

    transform: translate(-50%, -50%);

}


.assetWhyCore::before {

    content: "";

    position: absolute;

    width: 82px;

    height: 82px;

    border: 1px dashed rgba(184,142,33,.10);

    border-radius: 50%;

}


.assetWhyCore span {

    width: 10px;

    height: 10px;

    background: #b88e21;

    border-radius: 50%;

    box-shadow: 0 0 0 8px rgba(184,142,33,.05);

}


/* =========================================================
   ORBS
========================================================= */

.assetWhyOrb {

    position: absolute;

    width: 8px;

    height: 8px;

    border: 2px solid #b88e21;

    border-radius: 50%;

    background: var(--section);

}


.orbOne {

    top: 28px;

    left: 25%;

}


.orbTwo {

    top: 42px;

    right: 20%;

}


.orbThree {

    bottom: 28px;

    left: 22%;

}


.orbFour {

    bottom: 38px;

    right: 25%;

}


/* =========================================================
   VISUAL LABEL
========================================================= */

.assetWhyVisualText {

    position: absolute;

    bottom: 18px;

    left: 20px;

}


.assetWhyVisualText span {

    display: block;

    color: var(--text);

    opacity: .21;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 1.2px;

}


.assetWhyVisualText strong {

    display: block;

    margin-top: 4px;

    color: #b88e21;

    opacity: .58;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: .7px;

}


/* =========================================================
   RIGHT LIST
========================================================= */

.assetWhyList {

    width: 100%;

}


.assetWhyItem {

    position: relative;

    display: grid;

    grid-template-columns: 42px 1fr 20px;

    gap: 17px;

    align-items: start;

    padding: 27px 0 28px;

    border-top: 2px solid rgba(184,142,33,.09);

    transition: padding .25s ease;

}


.assetWhyItem:last-child {

    border-bottom: 2px solid rgba(184,142,33,.09);

}


.assetWhyItem:hover {

    padding-left: 9px;

}


/* =========================================================
   NUMBER
========================================================= */

.assetWhyNumber {

    padding-top: 4px;

    color: #b88e21;

    opacity: .50;

    font-size: 8px;

    font-weight: 700;

}


/* =========================================================
   CONTENT
========================================================= */

.assetWhyItemContent h3 {

    margin: 0;

    color: var(--primary);

    font-size: 20px;

    line-height: 1.25;

    font-weight: 600;

}


.assetWhyItemContent p {

    max-width: 580px;

    margin: 8px 0 0;

    color: var(--text);

    opacity: .44;

    font-size: 12px;

    line-height: 1.75;

}


/* =========================================================
   MARKER
========================================================= */

.assetWhyMarker {

    display: flex;

    align-items: flex-start;

    justify-content: flex-end;

    padding-top: 6px;

}


.assetWhyMarker span {

    width: 7px;

    height: 7px;

    border: 2px solid rgba(184,142,33,.35);

    border-radius: 50%;

    transition: all .25s ease;

}


.assetWhyItem:hover .assetWhyMarker span {

    background: #b88e21;

    border-color: #b88e21;

    box-shadow: 0 0 0 5px rgba(184,142,33,.06);

}


/* =========================================================
   BOTTOM
========================================================= */

.assetWhyBottom {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    margin-top: 55px;

}


.assetWhyBottom span {

    width: 28px;

    height: 2px;

    background: #b88e21;

    opacity: .45;

}


.assetWhyBottom p {

    margin: 0;

    color: var(--text);

    opacity: .25;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .assetWhy {

        padding: 85px 0;

    }


    .assetWhyGrid {

        gap: 55px;

    }


    .assetWhyIntro h2 {

        font-size: 44px;

    }


    .assetWhyVisual {

        height: 210px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

    .assetWhy {

        padding: 70px 0;

    }


    .assetWhy .container {

        width: calc(100% - 30px);

    }


    .assetWhyGrid {

        grid-template-columns: 1fr;

        gap: 45px;

    }


    .assetWhyIntro {

        position: static;

    }


    .assetWhyIntro h2 {

        font-size: 36px;

        line-height: 1.09;

        letter-spacing: -1.1px;

    }


    .assetWhyLead {

        font-size: 12px;

        line-height: 1.75;

    }


    .assetWhyVisual {

        max-width: none;

        height: 190px;

        margin-top: 35px;

    }


    .assetWhyItem {

        grid-template-columns: 31px 1fr 15px;

        gap: 12px;

        padding: 22px 0 23px;

    }


    .assetWhyItem:hover {

        padding-left: 0;

    }


    .assetWhyItemContent h3 {

        font-size: 17px;

    }


    .assetWhyItemContent p {

        font-size: 11px;

        line-height: 1.7;

    }


    .assetWhyBottom {

        justify-content: flex-start;

        margin-top: 38px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .assetWhyIntro h2 {

        font-size: 32px;

    }


    .assetWhyVisual {

        height: 175px;

    }


    .assetWhyItem {

        grid-template-columns: 25px 1fr;

    }


    .assetWhyMarker {

        display: none;

    }

}

/* Matters Section Ends Here */

/* Approach Section Starts Here */

/* =========================================================
   ASSET ALLOCATION APPROACH
========================================================= */

.assetApproach {

    position: relative;

    padding: 110px 0 95px;

    background: var(--section);

    overflow: hidden;

}


.assetApproach .container {

    width: min(1180px, 92%);

    margin: auto;

}


/* =========================================================
   HEADER
========================================================= */

.assetApproachHeader {

    max-width: 850px;

    margin-bottom: 55px;

}


.assetApproachEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

}


.assetApproachEyebrow span {

    width: 30px;

    height: 2px;

    background: #b88e21;

}


.assetApproachEyebrow p {

    margin: 0;

    color: #b88e21;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.assetApproachHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.4vw, 59px);

    line-height: 1.06;

    letter-spacing: -1.8px;

    font-weight: 600;

}


.assetApproachHeader h2 strong {

    color: #b88e21;

    font-weight: 600;

}


.assetApproachHeader > p {

    max-width: 650px;

    margin: 20px 0 0;

    color: var(--text);

    opacity: .43;

    font-size: 12.5px;

    line-height: 1.8;

}


/* =========================================================
   FRAMEWORK
========================================================= */

.assetFramework {

    position: relative;

    padding: 35px 0 0;

}


/* =========================================================
   TOP LABELS
========================================================= */

.assetFrameworkLabels {

    display: grid;

    grid-template-columns: 1fr 180px 1fr;

    align-items: center;

    max-width: 760px;

    margin: 0 auto;

    text-align: center;

}


.assetFrameworkLabels > span {

    color: var(--text);

    opacity: .25;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.3px;

}


.assetFrameworkLabels > span:last-child {

    color: #b88e21;

    opacity: .55;

}


.assetFrameworkCenterLabel {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.assetFrameworkCenterLabel small {

    color: var(--text);

    opacity: .22;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.assetFrameworkCenterLabel strong {

    color: #b88e21;

    opacity: .65;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .8px;

}


/* =========================================================
   VISUAL
========================================================= */

.assetFrameworkVisual {

    position: relative;

    width: min(760px, 100%);

    height: 150px;

    margin: 10px auto 0;

}


/* main horizontal balance */

.frameworkHorizontal {

    position: absolute;

    left: 4%;

    right: 4%;

    top: 50%;

    height: 2px;

    background: rgba(184,142,33,.14);

    transform: translateY(-50%);

}


/* central vertical */

.frameworkVertical {

    position: absolute;

    left: 50%;

    top: 12px;

    width: 2px;

    height: calc(100% - 24px);

    background: rgba(184,142,33,.12);

    transform: translateX(-50%);

}


/* =========================================================
   CENTRAL BALANCE
========================================================= */

.frameworkCenter {

    position: absolute;

    top: 50%;

    left: 50%;

    z-index: 4;

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid rgba(184,142,33,.25);

    border-radius: 50%;

    background: var(--section);

    transform: translate(-50%, -50%);

}


.frameworkCenter span {

    width: 10px;

    height: 10px;

    background: #b88e21;

    border-radius: 50%;

    box-shadow:

        0 0 0 7px rgba(184,142,33,.06);

}


/* =========================================================
   RINGS
========================================================= */

.frameworkRing {

    position: absolute;

    top: 50%;

    left: 50%;

    border: 1px dashed rgba(184,142,33,.08);

    border-radius: 50%;

    transform: translate(-50%, -50%);

}


.ringOuter {

    width: 105px;

    height: 105px;

}


.ringInner {

    width: 75px;

    height: 75px;

}


/* =========================================================
   SIDE NODES
========================================================= */

.frameworkNode {

    position: absolute;

    top: 50%;

    z-index: 3;

    width: 9px;

    height: 9px;

    border: 2px solid #b88e21;

    border-radius: 50%;

    background: var(--section);

    transform: translateY(-50%);

}


.nodeLeft {

    left: 4%;

}


.nodeRight {

    right: 4%;

}


/* =========================================================
   SIX APPROACH STEPS
========================================================= */

.assetApproachSteps {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    border-top: 2px solid rgba(184,142,33,.09);

    border-left: 2px solid rgba(184,142,33,.09);

}


.assetApproachStep {

    position: relative;

    min-height: 190px;

    display: flex;

    flex-direction: column;

    padding: 25px 27px;

    border-right: 2px solid rgba(184,142,33,.09);

    border-bottom: 2px solid rgba(184,142,33,.09);

    transition:

        background .25s ease,

        transform .25s ease;

}


.assetApproachStep:hover {

    background: rgba(184,142,33,.025);

}


/* =========================================================
   STEP NUMBER
========================================================= */

.assetApproachNumber {

    color: #b88e21;

    opacity: .55;

    font-size: 8px;

    font-weight: 700;

}


/* =========================================================
   STEP CONTENT
========================================================= */

.assetApproachStep h3 {

    margin: 35px 0 0;

    color: var(--primary);

    font-size: 20px;

    line-height: 1.2;

    font-weight: 600;

}


.assetApproachStep p {

    max-width: 320px;

    margin: 10px 0 0;

    color: var(--text);

    opacity: .42;

    font-size: 11.5px;

    line-height: 1.7;

}


/* =========================================================
   STEP ACCENT
========================================================= */

.assetApproachStep::after {

    content: "";

    position: absolute;

    left: 27px;

    bottom: 0;

    width: 0;

    height: 2px;

    background: #b88e21;

    transition: width .3s ease;

}


.assetApproachStep:hover::after {

    width: 45px;

}


/* =========================================================
   BOTTOM PROCESS
========================================================= */

.assetApproachBottom {

    margin-top: 48px;

}


.approachBottomLine {

    display: block;

    width: 100%;

    height: 2px;

    background: rgba(184,142,33,.08);

}


.approachSequence {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 20px;

}


.approachSequence span,
.approachSequence strong {

    color: var(--text);

    opacity: .28;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1px;

    white-space: nowrap;

}


.approachSequence strong {

    color: #b88e21;

    opacity: .65;

}


.approachSequence i {

    width: 28px;

    height: 2px;

    background: rgba(184,142,33,.10);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .assetApproach {

        padding: 85px 0;

    }


    .assetApproachSteps {

        grid-template-columns: repeat(2, 1fr);

    }


    .assetFrameworkLabels {

        max-width: 650px;

    }


    .assetApproachStep {

        min-height: 205px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

    .assetApproach {

        padding: 70px 0;

    }


    .assetApproach .container {

        width: calc(100% - 30px);

    }


    .assetApproachHeader {

        margin-bottom: 38px;

    }


    .assetApproachHeader h2 {

        font-size: 36px;

        line-height: 1.08;

        letter-spacing: -1.1px;

    }


    .assetApproachHeader > p {

        font-size: 12px;

        line-height: 1.75;

    }


    .assetFramework {

        padding-top: 20px;

    }


    .assetFrameworkLabels {

        grid-template-columns: 1fr 130px 1fr;

    }


    .assetFrameworkVisual {

        height: 120px;

    }


    .frameworkCenter {

        width: 50px;

        height: 50px;

    }


    .ringOuter {

        width: 90px;

        height: 90px;

    }


    .ringInner {

        width: 65px;

        height: 65px;

    }


    .assetApproachSteps {

        grid-template-columns: 1fr;

    }


    .assetApproachStep {

        min-height: auto;

        padding: 23px 21px 25px;

    }


    .assetApproachStep h3 {

        margin-top: 22px;

        font-size: 18px;

    }


    .assetApproachStep p {

        font-size: 11px;

    }


    .approachSequence {

        justify-content: flex-start;

        gap: 10px;

        overflow-x: auto;

        padding-bottom: 5px;

        scrollbar-width: none;

    }


    .approachSequence::-webkit-scrollbar {

        display: none;

    }


    .approachSequence > * {

        flex: 0 0 auto;

    }


    .approachSequence i {

        width: 18px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .assetApproachHeader h2 {

        font-size: 32px;

    }


    .assetFrameworkLabels {

        grid-template-columns: 1fr 110px 1fr;

    }


    .assetFrameworkLabels > span {

        font-size: 6px;

    }


    .assetApproachStep {

        padding: 21px 18px 23px;

    }

}

/* Approach Section Ends Here */

/* Strategies Section Starts Here */

/* =========================================================
   ASSET ALLOCATION STRATEGIES
========================================================= */

.assetStrategies {

    position: relative;

    padding: 110px 0 95px;

    background: var(--section);

    overflow: hidden;

}


.assetStrategies .container {

    width: min(1180px, 92%);

    margin: auto;

}


/* =========================================================
   HEADER
========================================================= */

.assetStrategiesHeader {

    max-width: 800px;

    margin-bottom: 55px;

}


.assetStrategiesEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

}


.assetStrategiesEyebrow span {

    width: 30px;

    height: 2px;

    background: #b88e21;

}


.assetStrategiesEyebrow p {

    margin: 0;

    color: #b88e21;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.assetStrategiesHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.5vw, 59px);

    line-height: 1.06;

    letter-spacing: -1.8px;

    font-weight: 600;

}


.assetStrategiesHeader h2 strong {

    color: #b88e21;

    font-weight: 600;

}


.assetStrategiesHeader > p {

    max-width: 650px;

    margin: 20px 0 0;

    color: var(--text);

    opacity: .43;

    font-size: 12.5px;

    line-height: 1.8;

}


/* =========================================================
   STRATEGY LIST
========================================================= */

.assetStrategiesList {

    border-top: 2px solid rgba(184,142,33,.09);

}


/* =========================================================
   STRATEGY ITEM
========================================================= */

.assetStrategyItem {

    position: relative;

    display: grid;

    grid-template-columns: 90px 1fr 110px;

    gap: 35px;

    align-items: center;

    min-height: 170px;

    padding: 30px 0;

    border-bottom: 2px solid rgba(184,142,33,.09);

    transition:

        padding .3s ease,

        background .3s ease;

}


.assetStrategyItem:hover {

    padding-left: 15px;

}


/* =========================================================
   NUMBER
========================================================= */

.assetStrategyNumber {

    align-self: start;

    padding-top: 4px;

    color: #b88e21;

    opacity: .42;

    font-size: 34px;

    line-height: 1;

    font-weight: 500;

    letter-spacing: -1px;

}


/* =========================================================
   MAIN CONTENT
========================================================= */

.assetStrategyMain {

    max-width: 690px;

}


.assetStrategyTitle {

    display: flex;

    align-items: center;

    gap: 13px;

}


.assetStrategyMiniLine {

    width: 24px;

    height: 2px;

    flex: 0 0 auto;

    background: #b88e21;

    opacity: .55;

}


.assetStrategyTitle h3 {

    margin: 0;

    color: var(--primary);

    font-size: 25px;

    line-height: 1.2;

    font-weight: 600;

    letter-spacing: -.3px;

}


.assetStrategyMain > p {

    max-width: 650px;

    margin: 12px 0 0;

    color: var(--text);

    opacity: .43;

    font-size: 12px;

    line-height: 1.75;

}


/* =========================================================
   RIGHT INDICATOR
========================================================= */

.assetStrategyIndicator {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 12px;

}


.indicatorDot {

    width: 12px;

    height: 12px;

    border: 2px solid rgba(184,142,33,.38);

    border-radius: 50%;

    transition: .3s ease;

}


.indicatorLines {

    display: flex;

    flex-direction: column;

    gap: 5px;

    width: 38px;

}


.indicatorLines i {

    display: block;

    height: 2px;

    background: rgba(184,142,33,.12);

}


.indicatorLines i:nth-child(1) {

    width: 100%;

}


.indicatorLines i:nth-child(2) {

    width: 70%;

}


.indicatorLines i:nth-child(3) {

    width: 42%;

}


.assetStrategyItem:hover .indicatorDot {

    background: #b88e21;

    border-color: #b88e21;

    box-shadow: 0 0 0 6px rgba(184,142,33,.06);

}


/* =========================================================
   FOOTER
========================================================= */

.assetStrategiesFooter {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-top: 52px;

}


.assetStrategiesFooterLine {

    width: 30px;

    height: 2px;

    background: #b88e21;

    opacity: .45;

}


.assetStrategiesFooter p {

    margin: 0;

    color: var(--text);

    opacity: .26;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.1px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .assetStrategies {

        padding: 85px 0;

    }


    .assetStrategyItem {

        grid-template-columns: 70px 1fr 80px;

        gap: 25px;

    }


    .assetStrategyTitle h3 {

        font-size: 22px;

    }


    .assetStrategyNumber {

        font-size: 30px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

    .assetStrategies {

        padding: 70px 0;

    }


    .assetStrategies .container {

        width: calc(100% - 30px);

    }


    .assetStrategiesHeader {

        margin-bottom: 38px;

    }


    .assetStrategiesHeader h2 {

        font-size: 36px;

        line-height: 1.08;

        letter-spacing: -1.1px;

    }


    .assetStrategiesHeader > p {

        font-size: 12px;

        line-height: 1.75;

    }


    .assetStrategyItem {

        grid-template-columns: 42px 1fr;

        gap: 15px;

        min-height: auto;

        padding: 25px 0;

    }


    .assetStrategyItem:hover {

        padding-left: 0;

    }


    .assetStrategyNumber {

        font-size: 23px;

    }


    .assetStrategyTitle {

        gap: 9px;

    }


    .assetStrategyMiniLine {

        width: 18px;

    }


    .assetStrategyTitle h3 {

        font-size: 19px;

    }


    .assetStrategyMain > p {

        font-size: 11px;

        line-height: 1.7;

    }


    .assetStrategyIndicator {

        display: none;

    }


    .assetStrategiesFooter {

        justify-content: flex-start;

        margin-top: 38px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .assetStrategiesHeader h2 {

        font-size: 32px;

    }


    .assetStrategyItem {

        grid-template-columns: 34px 1fr;

        gap: 12px;

    }


    .assetStrategyNumber {

        font-size: 20px;

    }


    .assetStrategyTitle h3 {

        font-size: 17px;

    }

}

/* Strategies Section Ends Here */

/* Who Section Starts Here */

/* =========================================================
   ASSET ALLOCATION — WHO IS IT FOR
========================================================= */

.assetAudience {

    position: relative;

    padding: 110px 0 95px;

    background: var(--section);

    overflow: hidden;

}


.assetAudience .container {

    width: min(1180px, 92%);

    margin: auto;

}


/* =========================================================
   HEADER
========================================================= */

.assetAudienceHeader {

    max-width: 820px;

    margin-bottom: 58px;

}


.assetAudienceEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

}


.assetAudienceEyebrow span {

    width: 30px;

    height: 2px;

    background: #b88e21;

}


.assetAudienceEyebrow p {

    margin: 0;

    color: #b88e21;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.assetAudienceHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.5vw, 59px);

    line-height: 1.06;

    letter-spacing: -1.8px;

    font-weight: 600;

}


.assetAudienceHeader h2 strong {

    color: #b88e21;

    font-weight: 600;

}


.assetAudienceHeader > p {

    max-width: 690px;

    margin: 20px 0 0;

    color: var(--text);

    opacity: .43;

    font-size: 12.5px;

    line-height: 1.8;

}


/* =========================================================
   LIST
========================================================= */

.assetAudienceList {

    border-top: 2px solid rgba(184,142,33,.09);

}


/* =========================================================
   PROFILE
========================================================= */

.assetAudienceItem {

    position: relative;

    display: grid;

    grid-template-columns: 85px 1fr 110px;

    gap: 35px;

    align-items: center;

    min-height: 155px;

    padding: 28px 0;

    border-bottom: 2px solid rgba(184,142,33,.09);

    transition:

        padding .3s ease,

        background .3s ease;

}


.assetAudienceItem:hover {

    padding-left: 14px;

}


/* =========================================================
   NUMBER
========================================================= */

.assetAudienceNumber {

    align-self: start;

    padding-top: 3px;

    color: #b88e21;

    opacity: .40;

    font-size: 32px;

    line-height: 1;

    font-weight: 500;

    letter-spacing: -1px;

}


/* =========================================================
   TITLE
========================================================= */

.assetAudienceTitle {

    display: flex;

    align-items: center;

    gap: 13px;

}


.assetAudienceTitle > span {

    width: 24px;

    height: 2px;

    background: #b88e21;

    opacity: .55;

}


.assetAudienceTitle h3 {

    margin: 0;

    color: var(--primary);

    font-size: 24px;

    line-height: 1.2;

    font-weight: 600;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.assetAudienceProfile > p {

    max-width: 670px;

    margin: 10px 0 0;

    color: var(--text);

    opacity: .43;

    font-size: 12px;

    line-height: 1.75;

}


/* =========================================================
   TAG
========================================================= */

.assetAudienceTag {

    justify-self: end;

    min-width: 76px;

    padding: 9px 10px;

    border: 2px solid rgba(184,142,33,.10);

    color: #b88e21;

    opacity: .55;

    text-align: center;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 1px;

    transition: .25s ease;

}


.assetAudienceItem:hover .assetAudienceTag {

    opacity: .9;

    border-color: rgba(184,142,33,.28);

}


/* =========================================================
   BOTTOM
========================================================= */

.assetAudienceBottom {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    margin-top: 52px;

}


.assetAudienceBottom > span {

    width: 29px;

    height: 2px;

    background: #b88e21;

    opacity: .45;

}


.assetAudienceBottom p {

    margin: 0;

    color: var(--text);

    opacity: .25;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .assetAudience {

        padding: 85px 0;

    }


    .assetAudienceItem {

        grid-template-columns: 65px 1fr 90px;

        gap: 25px;

    }


    .assetAudienceNumber {

        font-size: 28px;

    }


    .assetAudienceTitle h3 {

        font-size: 21px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

    .assetAudience {

        padding: 70px 0;

    }


    .assetAudience .container {

        width: calc(100% - 30px);

    }


    .assetAudienceHeader {

        margin-bottom: 40px;

    }


    .assetAudienceHeader h2 {

        font-size: 36px;

        line-height: 1.08;

        letter-spacing: -1.1px;

    }


    .assetAudienceHeader > p {

        font-size: 12px;

        line-height: 1.75;

    }


    .assetAudienceItem {

        grid-template-columns: 38px 1fr;

        gap: 14px;

        min-height: auto;

        padding: 25px 0;

    }


    .assetAudienceItem:hover {

        padding-left: 0;

    }


    .assetAudienceNumber {

        font-size: 22px;

    }


    .assetAudienceTitle {

        gap: 9px;

    }


    .assetAudienceTitle > span {

        width: 18px;

    }


    .assetAudienceTitle h3 {

        font-size: 18px;

    }


    .assetAudienceProfile > p {

        font-size: 11px;

        line-height: 1.7;

    }


    .assetAudienceTag {

        display: none;

    }


    .assetAudienceBottom {

        justify-content: flex-start;

        margin-top: 38px;

        overflow: hidden;

    }


    .assetAudienceBottom p {

        white-space: nowrap;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .assetAudienceHeader h2 {

        font-size: 32px;

    }


    .assetAudienceItem {

        grid-template-columns: 30px 1fr;

        gap: 11px;

    }


    .assetAudienceNumber {

        font-size: 19px;

    }


    .assetAudienceTitle h3 {

        font-size: 17px;

    }

}

/* Who Section Ends Here */

/* CTA Section Starts Here */

/* =========================================================
   ASSET ALLOCATION — FINAL CTA
========================================================= */

.aaFinalCta {

    position: relative;

    padding: 110px 0 65px;

    background: var(--section);

    overflow: hidden;

}


.aaFinalCta .container {

    width: min(1180px, 92%);

    margin: auto;

}


/* =========================================================
   MAIN
========================================================= */

.aaFinalCtaInner {

    display: grid;

    grid-template-columns: 1.15fr .85fr;

    align-items: center;

    gap: 90px;

    min-height: 430px;

}


/* =========================================================
   CONTENT
========================================================= */

.aaFinalCtaContent {

    max-width: 700px;

}


.aaFinalCtaEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 22px;

}


.aaFinalCtaEyebrow span {

    width: 30px;

    height: 2px;

    background: #b88e21;

}


.aaFinalCtaEyebrow p {

    margin: 0;

    color: #b88e21;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.aaFinalCtaContent h2 {

    max-width: 700px;

    margin: 0;

    color: var(--primary);

    font-size: clamp(42px, 4.6vw, 62px);

    line-height: 1.05;

    letter-spacing: -2px;

    font-weight: 600;

}


.aaFinalCtaContent h2 strong {

    color: #b88e21;

    font-weight: 600;

}


.aaFinalCtaContent > p {

    max-width: 630px;

    margin: 25px 0 0;

    color: var(--text);

    opacity: .45;

    font-size: 13px;

    line-height: 1.85;

}


/* =========================================================
   BUTTONS
========================================================= */

.aaFinalCtaButtons {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;

    margin-top: 32px;

}


.aaFinalCtaPrimary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    min-height: 53px;

    padding: 0 25px;

    background: #b88e21;

    border: 2px solid #b88e21;

    color: #fff;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    transition: .25s ease;

}


.aaFinalCtaPrimary i {

    font-size: 9px;

    transition: transform .25s ease;

}


.aaFinalCtaPrimary:hover {

    background: transparent;

    color: #b88e21;

}


.aaFinalCtaPrimary:hover i {

    transform: translateX(4px);

}


.aaFinalCtaSecondary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 53px;

    padding: 0 25px;

    border: 2px solid rgba(184,142,33,.14);

    color: var(--primary);

    text-decoration: none;

    font-size: 11px;

    font-weight: 600;

    transition: .25s ease;

}


.aaFinalCtaSecondary:hover {

    color: #b88e21;

    border-color: #b88e21;

}


/* =========================================================
   MINIMAL VISUAL
========================================================= */

.aaFinalCtaVisual {

    position: relative;

    min-height: 350px;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* =========================================================
   VERY FAINT GRID
========================================================= */

.aaFinalCtaVisual::before {

    content: "";

    position: absolute;

    inset: 10%;

    background-image:

        linear-gradient(
            rgba(184,142,33,.035) 2px,
            transparent 2px
        ),

        linear-gradient(
            90deg,
            rgba(184,142,33,.035) 2px,
            transparent 2px
        );

    background-size: 45px 45px;

    opacity: .35;

    mask-image: radial-gradient(
        circle,
        black 10%,
        transparent 72%
    );

}


/* =========================================================
   BALANCE SYMBOL
========================================================= */

.aaBalance {

    position: relative;

    width: 220px;

    height: 220px;

}


/* faint square frame */

.aaBalanceFrame {

    position: absolute;

    inset: 20px;

    border: 2px solid rgba(184,142,33,.055);

}


/* =========================================================
   CROSS LINES
========================================================= */

.aaBalanceLine {

    position: absolute;

    background: rgba(184,142,33,.12);

}


.aaHorizontal {

    left: 20px;

    right: 20px;

    top: 50%;

    height: 2px;

    transform: translateY(-50%);

}


.aaVertical {

    top: 20px;

    bottom: 20px;

    left: 50%;

    width: 2px;

    transform: translateX(-50%);

}


/* =========================================================
   NODES
========================================================= */

.aaBalanceNode {

    position: absolute;

    width: 10px;

    height: 10px;

    border: 2px solid rgba(184,142,33,.45);

    border-radius: 50%;

    background: var(--section);

    z-index: 3;

}


.aaNodeTop {

    top: 15px;

    left: 50%;

    transform: translateX(-50%);

}


.aaNodeRight {

    right: 15px;

    top: 50%;

    transform: translateY(-50%);

}


.aaNodeBottom {

    bottom: 15px;

    left: 50%;

    transform: translateX(-50%);

}


.aaNodeLeft {

    left: 15px;

    top: 50%;

    transform: translateY(-50%);

}


/* =========================================================
   CENTER
========================================================= */

.aaBalanceCenter {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 64px;

    height: 64px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid rgba(184,142,33,.20);

    border-radius: 50%;

    background: var(--section);

    transform: translate(-50%, -50%);

    z-index: 4;

}


.aaBalanceCenter::before {

    content: "";

    position: absolute;

    width: 82px;

    height: 82px;

    border: 1px dashed rgba(184,142,33,.08);

    border-radius: 50%;

}


.aaBalanceCenter span {

    width: 11px;

    height: 11px;

    background: #b88e21;

    border-radius: 50%;

    box-shadow:

        0 0 0 8px rgba(184,142,33,.055);

}


/* =========================================================
   LABEL
========================================================= */

.aaBalanceLabel {

    position: absolute;

    left: 50%;

    bottom: 7px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 4px;

    transform: translateX(-50%);

}


.aaBalanceLabel span {

    color: var(--text);

    opacity: .20;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 1.3px;

}


.aaBalanceLabel strong {

    color: #b88e21;

    opacity: .55;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: .8px;

}


/* =========================================================
   BOTTOM PROCESS
========================================================= */

.aaFinalCtaProcess {

    margin-top: 45px;

}


.aaProcessLine {

    width: 100%;

    height: 2px;

    background: rgba(184,142,33,.08);

}


.aaProcessItems {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 20px;

}


.aaProcessItems > div {

    display: flex;

    align-items: center;

    gap: 8px;

}


.aaProcessItems small {

    color: var(--text);

    opacity: .18;

    font-size: 7px;

    font-weight: 700;

}


.aaProcessItems span {

    color: var(--text);

    opacity: .30;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1px;

    white-space: nowrap;

}


.aaProcessItems .active span {

    color: #b88e21;

    opacity: .68;

}


.aaProcessItems i {

    flex: 1;

    max-width: 70px;

    height: 2px;

    background: rgba(184,142,33,.09);

}


/* =========================================================
   SUBTLE INTERACTION
========================================================= */

.aaBalance {

    transition: transform .5s ease;

}


.aaFinalCtaVisual:hover .aaBalance {

    transform: scale(1.025);

}


.aaFinalCtaVisual:hover .aaBalanceCenter span {

    box-shadow:

        0 0 0 8px rgba(184,142,33,.055),

        0 0 18px rgba(184,142,33,.12);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .aaFinalCta {

        padding: 85px 0 60px;

    }


    .aaFinalCtaInner {

        gap: 45px;

    }


    .aaFinalCtaContent h2 {

        font-size: 48px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

    .aaFinalCta {

        padding: 70px 0 50px;

    }


    .aaFinalCta .container {

        width: calc(100% - 30px);

    }


    .aaFinalCtaInner {

        grid-template-columns: 1fr;

        gap: 30px;

        min-height: auto;

    }


    .aaFinalCtaContent h2 {

        font-size: 36px;

        line-height: 1.08;

        letter-spacing: -1.1px;

    }


    .aaFinalCtaContent > p {

        font-size: 12px;

        line-height: 1.78;

    }


    .aaFinalCtaButtons {

        flex-direction: column;

        align-items: stretch;

    }


    .aaFinalCtaPrimary,
    .aaFinalCtaSecondary {

        width: 100%;

    }


    .aaFinalCtaVisual {

        min-height: 280px;

    }


    .aaBalance {

        width: 190px;

        height: 190px;

    }


    .aaBalanceFrame {

        inset: 17px;

    }


    .aaHorizontal {

        left: 17px;

        right: 17px;

    }


    .aaVertical {

        top: 17px;

        bottom: 17px;

    }


    .aaNodeTop {

        top: 12px;

    }


    .aaNodeRight {

        right: 12px;

    }


    .aaNodeBottom {

        bottom: 12px;

    }


    .aaNodeLeft {

        left: 12px;

    }


    .aaBalanceCenter {

        width: 56px;

        height: 56px;

    }


    .aaBalanceCenter::before {

        width: 72px;

        height: 72px;

    }


    .aaFinalCtaProcess {

        margin-top: 30px;

    }


    .aaProcessItems {

        justify-content: flex-start;

        gap: 10px;

        overflow-x: auto;

        padding-bottom: 5px;

        scrollbar-width: none;

    }


    .aaProcessItems::-webkit-scrollbar {

        display: none;

    }


    .aaProcessItems > div {

        flex: 0 0 auto;

    }


    .aaProcessItems i {

        flex: 0 0 18px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .aaFinalCtaContent h2 {

        font-size: 32px;

    }


    .aaFinalCtaVisual {

        min-height: 250px;

    }


    .aaBalance {

        width: 170px;

        height: 170px;

    }

}

/* CTA Section Ends Here */

/* Asset Allocation Page Ends Here */


/* Cashflow Management Page Starts Here */

/* Hero Section Starts Here */

/* =========================================================
   CASH FLOW MANAGEMENT — HERO
========================================================= */

.cashHero {

    position: relative;

    min-height: 720px;

    display: flex;

    align-items: center;

    padding: 100px 0 70px;

    background: var(--section);

    overflow: hidden;

}


.cashHero .container {

    width: min(1200px, 92%);

    margin: auto;

}


/* =========================================================
   MAIN GRID
========================================================= */

.cashHeroGrid {

    display: grid;

    grid-template-columns: 1.05fr .95fr;

    align-items: center;

    gap: 75px;

}


/* =========================================================
   LEFT CONTENT
========================================================= */

.cashHeroContent {

    max-width: 690px;

}


.cashHeroEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 21px;

}


.cashHeroEyebrow span {

    width: 31px;

    height: 2px;

    background: #b88e21;

}


.cashHeroEyebrow p {

    margin: 0;

    color: #b88e21;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.6px;

    text-transform: uppercase;

}


.cashHeroContent h1 {

    max-width: 720px;

    margin: 0;

    color: var(--primary);

    font-size: clamp(46px, 5vw, 69px);

    line-height: 1.03;

    letter-spacing: -2.4px;

    font-weight: 600;

}


.cashHeroContent h1 strong {

    display: block;

    color: #b88e21;

    font-weight: 600;

}


.cashHeroDescription {

    max-width: 650px;

    margin: 25px 0 0;

    color: var(--text);

    opacity: .48;

    font-size: 13px;

    line-height: 1.85;

}


.cashHeroDescription.secondary {

    margin-top: 14px;

}


/* =========================================================
   BUTTONS
========================================================= */

.cashHeroButtons {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;

    margin-top: 32px;

}


.cashHeroPrimary {

    min-height: 54px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    padding: 0 25px;

    background: #b88e21;

    border: 2px solid #b88e21;

    color: #fff;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    transition: .25s ease;

}


.cashHeroPrimary i {

    font-size: 9px;

    transition: transform .25s ease;

}


.cashHeroPrimary:hover {

    background: transparent;

    color: #b88e21;

}


.cashHeroPrimary:hover i {

    transform: translateX(4px);

}


.cashHeroSecondary {

    min-height: 54px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0 25px;

    border: 2px solid rgba(184,142,33,.14);

    color: var(--primary);

    text-decoration: none;

    font-size: 11px;

    font-weight: 600;

    transition: .25s ease;

}


.cashHeroSecondary:hover {

    border-color: #b88e21;

    color: #b88e21;

}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.cashHeroVisual {

    position: relative;

    min-height: 455px;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* =========================================================
   FAINT GRID
========================================================= */

.cashFlowGrid {

    position: absolute;

    inset: 5%;

    background-image:

        linear-gradient(
            rgba(184,142,33,.035) 2px,
            transparent 2px
        ),

        linear-gradient(
            90deg,
            rgba(184,142,33,.035) 2px,
            transparent 2px
        );

    background-size: 42px 42px;

    opacity: .65;

    mask-image: radial-gradient(
        ellipse at center,
        black 15%,
        transparent 76%
    );

}


/* =========================================================
   FLOW SYSTEM
========================================================= */

.cashFlowSystem {

    position: relative;

    width: 430px;

    height: 350px;

}


/* =========================================================
   MAIN HORIZONTAL FLOW
========================================================= */

.cashFlowMainLine {

    position: absolute;

    left: 48px;

    right: 60px;

    top: 50%;

    height: 2px;

    background: rgba(184,142,33,.12);

}


/* =========================================================
   CENTRAL CORE
========================================================= */

.cashFlowCore {

    position: absolute;

    left: 50%;

    top: 50%;

    width: 72px;

    height: 72px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid rgba(184,142,33,.24);

    border-radius: 50%;

    background: var(--section);

    transform: translate(-50%, -50%);

    z-index: 5;

}


.cashFlowCore::before {

    content: "";

    position: absolute;

    width: 94px;

    height: 94px;

    border: 1px dashed rgba(184,142,33,.09);

    border-radius: 50%;

}


.cashFlowCore span {

    width: 11px;

    height: 11px;

    border-radius: 50%;

    background: #b88e21;

    box-shadow:

        0 0 0 8px rgba(184,142,33,.055);

}


/* =========================================================
   SOURCE
========================================================= */

.cashFlowSource {

    position: absolute;

    left: 0;

    top: 50%;

    display: flex;

    align-items: center;

    gap: 11px;

    transform: translateY(-50%);

}


.cashNode {

    width: 13px;

    height: 13px;

    border: 2px solid #b88e21;

    border-radius: 50%;

    background: var(--section);

}


.cashFlowSource small,
.cashFlowDestination small {

    display: block;

    color: var(--text);

    opacity: .23;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.cashFlowSource strong {

    display: block;

    margin-top: 3px;

    color: #b88e21;

    opacity: .65;

    font-size: 8px;

    letter-spacing: .7px;

}


/* =========================================================
   OUTGOING PATHS
========================================================= */

.cashFlowPath {

    position: absolute;

    height: 2px;

    background: rgba(184,142,33,.11);

    transform-origin: left center;

}


/* upper */

.pathOne {

    width: 130px;

    left: 58%;

    top: 50%;

    transform: rotate(-28deg);

}


/* center */

.pathTwo {

    width: 130px;

    left: 58%;

    top: 50%;

}


/* lower */

.pathThree {

    width: 130px;

    left: 58%;

    top: 50%;

    transform: rotate(28deg);

}


/* =========================================================
   DESTINATIONS
========================================================= */

.cashFlowDestination {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 9px;

}


.cashFlowDestination span {

    width: 9px;

    height: 9px;

    border: 2px solid rgba(184,142,33,.40);

    border-radius: 50%;

    background: var(--section);

}


.destinationOne {

    top: 62px;

    right: 0;

}


.destinationTwo {

    top: 50%;

    right: 0;

    transform: translateY(-50%);

}


.destinationThree {

    bottom: 62px;

    right: 0;

}


/* =========================================================
   ARROWS
========================================================= */

.cashFlowArrow {

    position: absolute;

    z-index: 4;

    color: #b88e21;

    opacity: .35;

    font-size: 10px;

}


.arrowOne {

    top: 34%;

    right: 83px;

    transform: rotate(-28deg);

}


.arrowTwo {

    top: calc(50% - 6px);

    right: 80px;

}


.arrowThree {

    bottom: 34%;

    right: 83px;

    transform: rotate(28deg);

}


/* =========================================================
   VISUAL LABEL
========================================================= */

.cashHeroVisualLabel {

    position: absolute;

    left: 50%;

    bottom: 22px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 4px;

    transform: translateX(-50%);

}


.cashHeroVisualLabel span {

    color: var(--text);

    opacity: .20;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 1.3px;

}


.cashHeroVisualLabel strong {

    color: #b88e21;

    opacity: .55;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: .8px;

}


/* =========================================================
   BOTTOM PROCESS
========================================================= */

.cashHeroProcess {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 65px;

    padding-top: 20px;

    border-top: 2px solid rgba(184,142,33,.08);

}


.cashProcessItem {

    display: flex;

    align-items: center;

    gap: 8px;

}


.cashProcessItem span {

    color: var(--text);

    opacity: .18;

    font-size: 7px;

    font-weight: 700;

}


.cashProcessItem strong {

    color: var(--text);

    opacity: .27;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1px;

}


.cashProcessItem.active strong {

    color: #b88e21;

    opacity: .65;

}


.cashHeroProcess > i {

    width: 55px;

    height: 2px;

    background: rgba(184,142,33,.08);

}


/* =========================================================
   SUBTLE VISUAL MOVEMENT
========================================================= */

.cashFlowCore {

    transition: transform .4s ease;

}


.cashHeroVisual:hover .cashFlowCore {

    transform: translate(-50%, -50%) scale(1.04);

}


.cashHeroVisual:hover .cashFlowCore span {

    box-shadow:

        0 0 0 8px rgba(184,142,33,.055),

        0 0 18px rgba(184,142,33,.10);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .cashHero {

        padding: 90px 0 65px;

    }


    .cashHeroGrid {

        gap: 45px;

    }


    .cashHeroContent h1 {

        font-size: 52px;

    }


    .cashFlowSystem {

        transform: scale(.9);

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

    .cashHero {

        min-height: auto;

        padding: 70px 0 50px;

    }


    .cashHero .container {

        width: calc(100% - 30px);

    }


    .cashHeroGrid {

        grid-template-columns: 1fr;

        gap: 35px;

    }


    .cashHeroContent h1 {

        font-size: 37px;

        line-height: 1.08;

        letter-spacing: -1.2px;

    }


    .cashHeroDescription {

        font-size: 12px;

        line-height: 1.78;

    }


    .cashHeroButtons {

        flex-direction: column;

        align-items: stretch;

    }


    .cashHeroPrimary,
    .cashHeroSecondary {

        width: 100%;

    }


    .cashHeroVisual {

        min-height: 320px;

    }


    .cashFlowSystem {

        width: 330px;

        height: 280px;

        transform: scale(.9);

    }


    .cashHeroVisualLabel {

        bottom: 5px;

    }


    .cashHeroProcess {

        margin-top: 35px;

        justify-content: flex-start;

        gap: 10px;

        overflow-x: auto;

        scrollbar-width: none;

    }


    .cashHeroProcess::-webkit-scrollbar {

        display: none;

    }


    .cashProcessItem {

        flex: 0 0 auto;

    }


    .cashHeroProcess > i {

        flex: 0 0 18px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .cashHeroContent h1 {

        font-size: 33px;

    }


    .cashFlowSystem {

        width: 300px;

        transform: scale(.82);

    }


    .cashHeroVisual {

        min-height: 290px;

    }

}

/* Hero Section Ends Here */

/* Intro Section Starts Here */

/* =========================================================
   CASH FLOW MANAGEMENT — INTRODUCTION
========================================================= */

.cashIntro {

    position: relative;

    padding: 105px 0 95px;

    background: var(--section);

    overflow: hidden;

}


.cashIntro .container {

    width: min(1180px, 92%);

    margin: auto;

}


/* =========================================================
   MAIN GRID
========================================================= */

.cashIntroGrid {

    display: grid;

    grid-template-columns: 1fr .92fr;

    gap: 90px;

    align-items: start;

}


/* =========================================================
   LEFT CONTENT
========================================================= */

.cashIntroContent {

    max-width: 650px;

}


.cashIntroEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

}


.cashIntroEyebrow span {

    width: 30px;

    height: 2px;

    background: #b88e21;

}


.cashIntroEyebrow p {

    margin: 0;

    color: #b88e21;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.cashIntroContent h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.2vw, 57px);

    line-height: 1.07;

    letter-spacing: -1.7px;

    font-weight: 600;

}


.cashIntroContent h2 strong {

    color: #b88e21;

    font-weight: 600;

}


.cashIntroAccent {

    width: 45px;

    height: 2px;

    margin: 27px 0 24px;

    background: #b88e21;

    opacity: .55;

}


.cashIntroContent > p {

    max-width: 620px;

    margin: 0 0 17px;

    color: var(--text);

    opacity: .45;

    font-size: 13px;

    line-height: 1.85;

}


/* =========================================================
   RIGHT SIDE
========================================================= */

.cashIntroSide {

    padding-top: 5px;

}


/* =========================================================
   ABSTRACT VISUAL
========================================================= */

.cashIntroVisual {

    position: relative;

    height: 170px;

    margin-bottom: 5px;

    border: 2px solid rgba(184,142,33,.08);

    overflow: hidden;

}


.cashIntroGridLines {

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(184,142,33,.035) 2px,
            transparent 2px
        ),

        linear-gradient(
            90deg,
            rgba(184,142,33,.035) 2px,
            transparent 2px
        );

    background-size: 38px 38px;

    opacity: .55;

}


/* =========================================================
   FLOW LINE
========================================================= */

.cashIntroFlowLine {

    position: absolute;

    left: 18%;

    right: 18%;

    top: 50%;

    height: 2px;

    background: rgba(184,142,33,.11);

    transform: translateY(-50%);

}


.cashIntroFlowLine::before,
.cashIntroFlowLine::after {

    content: "";

    position: absolute;

    top: 50%;

    width: 7px;

    height: 7px;

    border-top: 2px solid rgba(184,142,33,.25);

    border-right: 2px solid rgba(184,142,33,.25);

}


.cashIntroFlowLine::before {

    left: 27%;

    transform: translateY(-50%) rotate(45deg);

}


.cashIntroFlowLine::after {

    right: 25%;

    transform: translateY(-50%) rotate(45deg);

}


/* =========================================================
   CENTER
========================================================= */

.cashIntroCore {

    position: absolute;

    left: 50%;

    top: 50%;

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid rgba(184,142,33,.20);

    border-radius: 50%;

    background: var(--section);

    transform: translate(-50%, -50%);

}


.cashIntroCore::before {

    content: "";

    position: absolute;

    width: 70px;

    height: 70px;

    border: 1px dashed rgba(184,142,33,.08);

    border-radius: 50%;

}


.cashIntroCore span {

    width: 9px;

    height: 9px;

    background: #b88e21;

    border-radius: 50%;

    box-shadow:

        0 0 0 7px rgba(184,142,33,.05);

}


/* =========================================================
   NODES
========================================================= */

.cashIntroNode {

    position: absolute;

    width: 8px;

    height: 8px;

    border: 2px solid rgba(184,142,33,.34);

    border-radius: 50%;

    background: var(--section);

}


.nodeTop {

    top: 25px;

    left: 50%;

    transform: translateX(-50%);

}


.nodeBottom {

    bottom: 25px;

    left: 50%;

    transform: translateX(-50%);

}


.nodeLeft {

    left: 14%;

    top: 50%;

    transform: translateY(-50%);

}


.nodeRight {

    right: 14%;

    top: 50%;

    transform: translateY(-50%);

}


/* =========================================================
   VISUAL LABEL
========================================================= */

.cashIntroVisualLabel {

    position: absolute;

    left: 18px;

    bottom: 17px;

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.cashIntroVisualLabel small {

    color: var(--text);

    opacity: .20;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 1.2px;

}


.cashIntroVisualLabel strong {

    color: #b88e21;

    opacity: .55;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: .7px;

}


/* =========================================================
   HIGHLIGHTS
========================================================= */

.cashIntroHighlights {

    border-top: 2px solid rgba(184,142,33,.08);

}


.cashIntroHighlight {

    display: grid;

    grid-template-columns: 40px 1fr 10px;

    gap: 15px;

    align-items: start;

    padding: 24px 0 25px;

    border-bottom: 2px solid rgba(184,142,33,.08);

    transition: padding .25s ease;

}


.cashIntroHighlight:hover {

    padding-left: 8px;

}


/* =========================================================
   NUMBER
========================================================= */

.cashIntroNumber {

    padding-top: 3px;

    color: #b88e21;

    opacity: .50;

    font-size: 8px;

    font-weight: 700;

}


/* =========================================================
   HIGHLIGHT CONTENT
========================================================= */

.cashIntroHighlightContent h3 {

    margin: 0;

    color: var(--primary);

    font-size: 19px;

    line-height: 1.25;

    font-weight: 600;

}


.cashIntroHighlightContent p {

    max-width: 480px;

    margin: 8px 0 0;

    color: var(--text);

    opacity: .43;

    font-size: 11.5px;

    line-height: 1.7;

}


/* =========================================================
   MARKER
========================================================= */

.cashIntroMarker {

    width: 7px;

    height: 7px;

    margin-top: 6px;

    border: 2px solid rgba(184,142,33,.32);

    border-radius: 50%;

    transition: .25s ease;

}


.cashIntroHighlight:hover .cashIntroMarker {

    background: #b88e21;

    border-color: #b88e21;

    box-shadow:

        0 0 0 5px rgba(184,142,33,.05);

}


/* =========================================================
   BOTTOM
========================================================= */

.cashIntroBottom {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    margin-top: 52px;

}


.cashIntroBottom span {

    width: 28px;

    height: 2px;

    background: #b88e21;

    opacity: .45;

}


.cashIntroBottom p {

    margin: 0;

    color: var(--text);

    opacity: .25;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .cashIntro {

        padding: 85px 0;

    }


    .cashIntroGrid {

        gap: 55px;

    }


    .cashIntroContent h2 {

        font-size: 44px;

    }


    .cashIntroVisual {

        height: 150px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

    .cashIntro {

        padding: 70px 0;

    }


    .cashIntro .container {

        width: calc(100% - 30px);

    }


    .cashIntroGrid {

        grid-template-columns: 1fr;

        gap: 40px;

    }


    .cashIntroContent h2 {

        font-size: 36px;

        line-height: 1.09;

        letter-spacing: -1.1px;

    }


    .cashIntroContent > p {

        font-size: 12px;

        line-height: 1.78;

    }


    .cashIntroVisual {

        height: 145px;

    }


    .cashIntroHighlight {

        grid-template-columns: 31px 1fr 8px;

        gap: 12px;

        padding: 22px 0 23px;

    }


    .cashIntroHighlight:hover {

        padding-left: 0;

    }


    .cashIntroHighlightContent h3 {

        font-size: 17px;

    }


    .cashIntroHighlightContent p {

        font-size: 11px;

        line-height: 1.7;

    }


    .cashIntroBottom {

        justify-content: flex-start;

        margin-top: 38px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .cashIntroContent h2 {

        font-size: 32px;

    }


    .cashIntroHighlight {

        grid-template-columns: 26px 1fr;

    }


    .cashIntroMarker {

        display: none;

    }

}

/* Intro Section Ends Here */

/* Matters Section Starts Here */

/* =========================================================
   CASH FLOW MANAGEMENT — WHY IT MATTERS
========================================================= */

.cashWhy {

    position: relative;

    padding: 110px 0 95px;

    background: var(--section);

    overflow: hidden;

}


.cashWhy .container {

    width: min(1180px, 92%);

    margin: auto;

}


/* =========================================================
   MAIN EDITORIAL GRID
========================================================= */

.cashWhyGrid {

    display: grid;

    grid-template-columns: .85fr 1.15fr;

    gap: 95px;

    align-items: start;

}


/* =========================================================
   LEFT
========================================================= */

.cashWhyIntro {

    position: sticky;

    top: 90px;

}


.cashWhyEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

}


.cashWhyEyebrow span {

    width: 30px;

    height: 2px;

    background: #b88e21;

}


.cashWhyEyebrow p {

    margin: 0;

    color: #b88e21;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.cashWhyIntro h2 {

    max-width: 520px;

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.2vw, 57px);

    line-height: 1.06;

    letter-spacing: -1.7px;

    font-weight: 600;

}


.cashWhyIntro h2 strong {

    color: #b88e21;

    font-weight: 600;

}


.cashWhyLead {

    max-width: 470px;

    margin: 24px 0 0;

    color: var(--text);

    opacity: .44;

    font-size: 13px;

    line-height: 1.8;

}


/* =========================================================
   VISUAL
========================================================= */

.cashWhyVisual {

    position: relative;

    width: 100%;

    max-width: 430px;

    height: 230px;

    margin-top: 45px;

    border: 2px solid rgba(184,142,33,.08);

    overflow: hidden;

}


.cashWhyGridLines {

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(184,142,33,.035) 2px,
            transparent 2px
        ),

        linear-gradient(
            90deg,
            rgba(184,142,33,.035) 2px,
            transparent 2px
        );

    background-size: 40px 40px;

    opacity: .55;

}


/* =========================================================
   FLOW LINES
========================================================= */

.cashWhyFlow {

    position: absolute;

    background: rgba(184,142,33,.11);

}


.flowHorizontal {

    left: 12%;

    right: 12%;

    top: 50%;

    height: 2px;

}


.flowVertical {

    top: 17%;

    bottom: 17%;

    left: 50%;

    width: 2px;

}


/* =========================================================
   CORE
========================================================= */

.cashWhyCore {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid rgba(184,142,33,.21);

    border-radius: 50%;

    background: var(--section);

    transform: translate(-50%, -50%);

    z-index: 4;

}


.cashWhyCore::before {

    content: "";

    position: absolute;

    width: 78px;

    height: 78px;

    border: 1px dashed rgba(184,142,33,.08);

    border-radius: 50%;

}


.cashWhyCore span {

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: #b88e21;

    box-shadow:

        0 0 0 8px rgba(184,142,33,.05);

}


/* =========================================================
   NODES
========================================================= */

.cashWhyNode {

    position: absolute;

    width: 9px;

    height: 9px;

    border: 2px solid rgba(184,142,33,.35);

    border-radius: 50%;

    background: var(--section);

    z-index: 3;

}


.nodeIncome {

    left: 12%;

    top: 50%;

    transform: translateY(-50%);

}


.nodeSavings {

    top: 17%;

    left: 50%;

    transform: translateX(-50%);

}


.nodeInvestment {

    right: 12%;

    top: 50%;

    transform: translateY(-50%);

}


.nodeGoals {

    bottom: 17%;

    left: 50%;

    transform: translateX(-50%);

}


/* =========================================================
   LABEL
========================================================= */

.cashWhyLabel {

    position: absolute;

    left: 18px;

    bottom: 17px;

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.cashWhyLabel small {

    color: var(--text);

    opacity: .20;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 1.2px;

}


.cashWhyLabel strong {

    color: #b88e21;

    opacity: .55;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: .7px;

}


/* =========================================================
   RIGHT LIST
========================================================= */

.cashWhyList {

    width: 100%;

    border-top: 2px solid rgba(184,142,33,.08);

}


.cashWhyItem {

    display: grid;

    grid-template-columns: 42px 1fr 12px;

    gap: 17px;

    align-items: start;

    padding: 27px 0 28px;

    border-bottom: 2px solid rgba(184,142,33,.08);

    transition: padding .25s ease;

}


.cashWhyItem:hover {

    padding-left: 9px;

}


/* =========================================================
   NUMBER
========================================================= */

.cashWhyNumber {

    padding-top: 4px;

    color: #b88e21;

    opacity: .48;

    font-size: 8px;

    font-weight: 700;

}


/* =========================================================
   CONTENT
========================================================= */

.cashWhyContent h3 {

    margin: 0;

    color: var(--primary);

    font-size: 20px;

    line-height: 1.25;

    font-weight: 600;

}


.cashWhyContent p {

    max-width: 590px;

    margin: 8px 0 0;

    color: var(--text);

    opacity: .43;

    font-size: 12px;

    line-height: 1.75;

}


/* =========================================================
   MARKER
========================================================= */

.cashWhyMarker {

    padding-top: 6px;

}


.cashWhyMarker span {

    display: block;

    width: 7px;

    height: 7px;

    border: 2px solid rgba(184,142,33,.32);

    border-radius: 50%;

    transition: .25s ease;

}


.cashWhyItem:hover .cashWhyMarker span {

    background: #b88e21;

    border-color: #b88e21;

    box-shadow:

        0 0 0 5px rgba(184,142,33,.05);

}


/* =========================================================
   BOTTOM
========================================================= */

.cashWhyBottom {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    margin-top: 54px;

}


.cashWhyBottom > span {

    width: 29px;

    height: 2px;

    background: #b88e21;

    opacity: .45;

}


.cashWhyBottom p {

    margin: 0;

    color: var(--text);

    opacity: .24;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .cashWhy {

        padding: 85px 0;

    }


    .cashWhyGrid {

        gap: 55px;

    }


    .cashWhyIntro h2 {

        font-size: 44px;

    }


    .cashWhyVisual {

        height: 205px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

    .cashWhy {

        padding: 70px 0;

    }


    .cashWhy .container {

        width: calc(100% - 30px);

    }


    .cashWhyGrid {

        grid-template-columns: 1fr;

        gap: 40px;

    }


    .cashWhyIntro {

        position: static;

    }


    .cashWhyIntro h2 {

        font-size: 36px;

        line-height: 1.09;

        letter-spacing: -1.1px;

    }


    .cashWhyLead {

        font-size: 12px;

        line-height: 1.76;

    }


    .cashWhyVisual {

        max-width: none;

        height: 185px;

        margin-top: 32px;

    }


    .cashWhyItem {

        grid-template-columns: 31px 1fr 8px;

        gap: 12px;

        padding: 22px 0 23px;

    }


    .cashWhyItem:hover {

        padding-left: 0;

    }


    .cashWhyContent h3 {

        font-size: 17px;

    }


    .cashWhyContent p {

        font-size: 11px;

        line-height: 1.7;

    }


    .cashWhyBottom {

        justify-content: flex-start;

        margin-top: 38px;

    }


    .cashWhyBottom p {

        white-space: nowrap;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .cashWhyIntro h2 {

        font-size: 32px;

    }


    .cashWhyItem {

        grid-template-columns: 26px 1fr;

    }


    .cashWhyMarker {

        display: none;

    }

}

/* Matters Section Ends Here */

/* Approach Section Starts Here */

/* =========================================================
   CASH FLOW MANAGEMENT — APPROACH
========================================================= */

.cashApproach {

    position: relative;

    padding: 110px 0 95px;

    background: var(--section);

    overflow: hidden;

}


.cashApproach .container {

    width: min(1180px, 92%);

    margin: auto;

}


/* =========================================================
   HEADER
========================================================= */

.cashApproachHeader {

    max-width: 800px;

    margin-bottom: 55px;

}


.cashApproachEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

}


.cashApproachEyebrow span {

    width: 30px;

    height: 2px;

    background: #b88e21;

}


.cashApproachEyebrow p {

    margin: 0;

    color: #b88e21;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.cashApproachHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.5vw, 59px);

    line-height: 1.06;

    letter-spacing: -1.8px;

    font-weight: 600;

}


.cashApproachHeader h2 strong {

    color: #b88e21;

    font-weight: 600;

}


.cashApproachHeader > p {

    max-width: 650px;

    margin: 20px 0 0;

    color: var(--text);

    opacity: .43;

    font-size: 12.5px;

    line-height: 1.8;

}


/* =========================================================
   CONTROL FRAMEWORK
========================================================= */

.cashControl {

    position: relative;

    width: 100%;

    height: 410px;

    margin-bottom: 55px;

    border: 2px solid rgba(184,142,33,.08);

    overflow: hidden;

}


/* =========================================================
   FAINT GRID
========================================================= */

.cashControlGrid {

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(184,142,33,.032) 2px,
            transparent 2px
        ),

        linear-gradient(
            90deg,
            rgba(184,142,33,.032) 2px,
            transparent 2px
        );

    background-size: 42px 42px;

    opacity: .55;

}


/* =========================================================
   MAIN VERTICAL FLOW
========================================================= */

.cashControlVertical {

    position: absolute;

    top: 52px;

    bottom: 55px;

    left: 50%;

    width: 2px;

    background: rgba(184,142,33,.11);

    transform: translateX(-50%);

}


/* =========================================================
   SOURCE / ORGANISE / FUTURE
========================================================= */

.cashControlSource,
.cashControlOrganise,
.cashControlFuture {

    position: absolute;

    left: 50%;

    display: flex;

    align-items: center;

    gap: 11px;

    z-index: 5;

    transform: translateX(-50%);

}


.cashControlSource {

    top: 27px;

}


.cashControlOrganise {

    top: 105px;

}


.cashControlFuture {

    bottom: 27px;

}


.cashControlSource > div,
.cashControlOrganise > div,
.cashControlFuture > div {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.cashControlSource small,
.cashControlOrganise small,
.cashControlFuture small {

    color: var(--text);

    opacity: .20;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 1px;

}


.cashControlSource strong,
.cashControlOrganise strong,
.cashControlFuture strong {

    color: #b88e21;

    opacity: .62;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: .7px;

}


.cashControlNode {

    width: 10px;

    height: 10px;

    border: 2px solid rgba(184,142,33,.42);

    border-radius: 50%;

    background: var(--section);

}


/* =========================================================
   CORE
========================================================= */

.cashControlCore {

    position: absolute;

    left: 50%;

    top: 50%;

    z-index: 8;

    width: 88px;

    height: 88px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid rgba(184,142,33,.22);

    border-radius: 50%;

    background: var(--section);

    transform: translate(-50%, -50%);

}


.cashControlCore::before {

    content: "";

    position: absolute;

    width: 112px;

    height: 112px;

    border: 1px dashed rgba(184,142,33,.08);

    border-radius: 50%;

}


.cashControlCore span {

    width: 11px;

    height: 11px;

    border-radius: 50%;

    background: #b88e21;

    box-shadow:

        0 0 0 9px rgba(184,142,33,.055);

}


.cashControlCore small {

    position: absolute;

    bottom: -28px;

    color: var(--text);

    opacity: .20;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 1.2px;

}


/* =========================================================
   BRANCHES
========================================================= */

.cashControlBranches {

    position: absolute;

    left: 50%;

    top: 50%;

    width: 610px;

    height: 180px;

    transform: translate(-50%, -50%);

}


/* =========================================================
   BRANCH ITEM
========================================================= */

.cashBranch {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 9px;

}


.cashBranchLine {

    position: absolute;

    height: 2px;

    background: rgba(184,142,33,.10);

}


/* LEFT */

.branchNeeds {

    left: 0;

    top: 50%;

    transform: translateY(-50%);

}


.branchNeeds .cashBranchLine {

    width: 175px;

    right: -175px;

}


.branchNeeds .cashBranchNode {

    order: 2;

}


/* CENTER / SAVINGS */

.branchSavings {

    left: 50%;

    top: 0;

    transform: translateX(-50%);

}


.branchSavings .cashBranchLine {

    width: 2px;

    height: 90px;

    left: 50%;

    top: 100%;

}


/* RIGHT */

.branchInvestments {

    right: 0;

    top: 50%;

    transform: translateY(-50%);

}


.branchInvestments .cashBranchLine {

    width: 175px;

    left: -175px;

}


.cashBranchNode {

    width: 9px;

    height: 9px;

    border: 2px solid rgba(184,142,33,.34);

    border-radius: 50%;

    background: var(--section);

    flex: 0 0 auto;

}


.cashBranch strong {

    color: var(--text);

    opacity: .30;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1px;

    white-space: nowrap;

}


/* =========================================================
   ARROWS
========================================================= */

.cashControlArrow {

    position: absolute;

    z-index: 6;

    color: #b88e21;

    opacity: .35;

    font-size: 11px;

}


.arrowDownOne {

    top: 77px;

    left: calc(50% + 5px);

}


.arrowDownTwo {

    bottom: 70px;

    left: calc(50% + 5px);

}


/* =========================================================
   SIX STEPS
========================================================= */

.cashApproachSteps {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    border-top: 2px solid rgba(184,142,33,.08);

    border-left: 2px solid rgba(184,142,33,.08);

}


.cashApproachStep {

    position: relative;

    min-height: 190px;

    padding: 25px 27px;

    border-right: 2px solid rgba(184,142,33,.08);

    border-bottom: 2px solid rgba(184,142,33,.08);

    transition: background .25s ease;

}


.cashApproachStep:hover {

    background: rgba(184,142,33,.022);

}


.cashApproachNumber {

    color: #b88e21;

    opacity: .48;

    font-size: 8px;

    font-weight: 700;

}


.cashApproachStepContent h3 {

    margin: 32px 0 0;

    color: var(--primary);

    font-size: 21px;

    line-height: 1.2;

    font-weight: 600;

}


.cashApproachStepContent p {

    max-width: 320px;

    margin: 10px 0 0;

    color: var(--text);

    opacity: .42;

    font-size: 11.5px;

    line-height: 1.72;

}


/* GOLD HOVER ACCENT */

.cashApproachStep::after {

    content: "";

    position: absolute;

    left: 27px;

    bottom: 0;

    width: 0;

    height: 2px;

    background: #b88e21;

    transition: width .3s ease;

}


.cashApproachStep:hover::after {

    width: 45px;

}


/* =========================================================
   BOTTOM PROCESS
========================================================= */

.cashApproachBottom {

    margin-top: 48px;

}


.cashApproachBottomLine {

    display: block;

    width: 100%;

    height: 2px;

    background: rgba(184,142,33,.08);

}


.cashApproachSequence {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 20px;

}


.cashApproachSequence span,
.cashApproachSequence strong {

    color: var(--text);

    opacity: .28;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1px;

    white-space: nowrap;

}


.cashApproachSequence strong {

    color: #b88e21;

    opacity: .65;

}


.cashApproachSequence i {

    width: 28px;

    height: 2px;

    background: rgba(184,142,33,.09);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .cashApproach {

        padding: 85px 0;

    }


    .cashControl {

        height: 380px;

    }


    .cashControlBranches {

        width: 520px;

    }


    .branchNeeds .cashBranchLine,
    .branchInvestments .cashBranchLine {

        width: 140px;

    }


    .branchNeeds .cashBranchLine {

        right: -140px;

    }


    .branchInvestments .cashBranchLine {

        left: -140px;

    }


    .cashApproachSteps {

        grid-template-columns: repeat(2, 1fr);

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

    .cashApproach {

        padding: 70px 0;

    }


    .cashApproach .container {

        width: calc(100% - 30px);

    }


    .cashApproachHeader {

        margin-bottom: 38px;

    }


    .cashApproachHeader h2 {

        font-size: 36px;

        line-height: 1.08;

        letter-spacing: -1.1px;

    }


    .cashApproachHeader > p {

        font-size: 12px;

        line-height: 1.75;

    }


    /* -----------------------------------------
       MOBILE CONTROL FRAMEWORK
    ----------------------------------------- */

    .cashControl {

        height: 480px;

        margin-bottom: 40px;

    }


    .cashControlVertical {

        top: 48px;

        bottom: 48px;

    }


    .cashControlSource {

        top: 23px;

    }


    .cashControlOrganise {

        top: 95px;

    }


    .cashControlFuture {

        bottom: 23px;

    }


    .cashControlBranches {

        width: 100%;

        height: 190px;

    }


    .branchNeeds {

        left: 12px;

    }


    .branchInvestments {

        right: 12px;

    }


    .branchSavings {

        top: 0;

    }


    .branchNeeds .cashBranchLine,
    .branchInvestments .cashBranchLine {

        width: 90px;

    }


    .branchNeeds .cashBranchLine {

        right: -90px;

    }


    .branchInvestments .cashBranchLine {

        left: -90px;

    }


    .cashBranch strong {

        font-size: 6px;

    }


    .cashControlCore {

        width: 68px;

        height: 68px;

    }


    .cashControlCore::before {

        width: 88px;

        height: 88px;

    }


    .cashControlCore small {

        bottom: -23px;

    }


    .cashApproachSteps {

        grid-template-columns: 1fr;

    }


    .cashApproachStep {

        min-height: auto;

        padding: 23px 21px 25px;

    }


    .cashApproachStepContent h3 {

        margin-top: 21px;

        font-size: 18px;

    }


    .cashApproachStepContent p {

        font-size: 11px;

        line-height: 1.7;

    }


    .cashApproachSequence {

        justify-content: flex-start;

        gap: 10px;

        overflow-x: auto;

        padding-bottom: 5px;

        scrollbar-width: none;

    }


    .cashApproachSequence::-webkit-scrollbar {

        display: none;

    }


    .cashApproachSequence > * {

        flex: 0 0 auto;

    }


    .cashApproachSequence i {

        width: 18px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .cashApproachHeader h2 {

        font-size: 32px;

    }


    .cashControl {

        height: 450px;

    }


    .cashControlBranches {

        height: 180px;

    }


    .branchNeeds {

        left: 6px;

    }


    .branchInvestments {

        right: 6px;

    }


    .branchNeeds .cashBranchLine,
    .branchInvestments .cashBranchLine {

        width: 70px;

    }


    .branchNeeds .cashBranchLine {

        right: -70px;

    }


    .branchInvestments .cashBranchLine {

        left: -70px;

    }


    .cashBranch strong {

        font-size: 5.5px;

        letter-spacing: .7px;

    }


    .cashApproachStep {

        padding: 21px 18px 23px;

    }

}

/* Approach Section Ends Here */

/* Strategy Section Starts Here */

/* =========================================================
   CASH FLOW MANAGEMENT — STRATEGIES
========================================================= */

.cashStrategy {

    position: relative;

    padding: 110px 0 95px;

    background: var(--section);

    overflow: hidden;

}


.cashStrategy .container {

    width: min(1180px, 92%);

    margin: auto;

}


/* =========================================================
   HEADER
========================================================= */

.cashStrategyHeader {

    max-width: 760px;

    margin-bottom: 58px;

}


.cashStrategyEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

}


.cashStrategyEyebrow span {

    width: 30px;

    height: 2px;

    background: #b88e21;

}


.cashStrategyEyebrow p {

    margin: 0;

    color: #b88e21;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.cashStrategyHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.5vw, 60px);

    line-height: 1.05;

    letter-spacing: -1.8px;

    font-weight: 600;

}


.cashStrategyHeader h2 strong {

    color: #b88e21;

    font-weight: 600;

}


.cashStrategyHeader > p {

    max-width: 650px;

    margin: 21px 0 0;

    color: var(--text);

    opacity: .43;

    font-size: 12.5px;

    line-height: 1.8;

}


/* =========================================================
   STRATEGY GRID
========================================================= */

.cashStrategyGrid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    border-top: 2px solid rgba(184,142,33,.08);

    border-left: 2px solid rgba(184,142,33,.08);

}


/* =========================================================
   LARGE EDITORIAL ITEM
========================================================= */

.cashStrategyItem {

    position: relative;

    min-height: 305px;

    padding: 31px 34px 30px;

    border-right: 2px solid rgba(184,142,33,.08);

    border-bottom: 2px solid rgba(184,142,33,.08);

    overflow: hidden;

    transition:

        background .3s ease,

        padding .3s ease;

}


.cashStrategyItem:hover {

    background: rgba(184,142,33,.018);

    padding-left: 39px;

}


/* =========================================================
   TOP NUMBER SYSTEM
========================================================= */

.cashStrategyTop {

    display: flex;

    align-items: center;

    width: 100%;

}


.cashStrategyNumber {

    color: #b88e21;

    opacity: .52;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .5px;

}


.cashStrategyLine {

    flex: 1;

    height: 2px;

    margin-left: 14px;

    background: rgba(184,142,33,.07);

}


.cashStrategyDot {

    width: 8px;

    height: 8px;

    margin-left: 12px;

    border: 2px solid rgba(184,142,33,.30);

    border-radius: 50%;

    background: var(--section);

    transition: .3s ease;

}


.cashStrategyItem:hover .cashStrategyDot {

    background: #b88e21;

    border-color: #b88e21;

    box-shadow:

        0 0 0 6px rgba(184,142,33,.045);

}


/* =========================================================
   CONTENT
========================================================= */

.cashStrategyContent {

    max-width: 470px;

    margin-top: 55px;

}


.cashStrategyContent h3 {

    margin: 0;

    color: var(--primary);

    font-size: 25px;

    line-height: 1.2;

    letter-spacing: -.4px;

    font-weight: 600;

}


.cashStrategyContent p {

    max-width: 450px;

    margin: 13px 0 0;

    color: var(--text);

    opacity: .42;

    font-size: 12px;

    line-height: 1.78;

}


/* =========================================================
   INDEX
========================================================= */

.cashStrategyIndex {

    position: absolute;

    right: 34px;

    bottom: 27px;

    color: var(--text);

    opacity: .14;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 1.2px;

}


/* =========================================================
   BOTTOM GOLD ACCENT
========================================================= */

.cashStrategyItem::after {

    content: "";

    position: absolute;

    left: 34px;

    bottom: 0;

    width: 0;

    height: 2px;

    background: #b88e21;

    transition: width .35s ease;

}


.cashStrategyItem:hover::after {

    width: 55px;

}


/* =========================================================
   BOTTOM STATEMENT
========================================================= */

.cashStrategyBottom {

    margin-top: 48px;

}


.cashStrategyBottomLine {

    width: 100%;

    height: 2px;

    background: rgba(184,142,33,.08);

}


.cashStrategyBottom p {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin: 20px 0 0;

    color: var(--text);

    opacity: .25;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1px;

}


.cashStrategyBottom p span {

    color: #b88e21;

    opacity: .55;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .cashStrategy {

        padding: 85px 0;

    }


    .cashStrategyHeader h2 {

        font-size: 47px;

    }


    .cashStrategyItem {

        min-height: 285px;

        padding: 28px;

    }


    .cashStrategyContent {

        margin-top: 48px;

    }


    .cashStrategyContent h3 {

        font-size: 22px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

    .cashStrategy {

        padding: 70px 0;

    }


    .cashStrategy .container {

        width: calc(100% - 30px);

    }


    .cashStrategyHeader {

        margin-bottom: 38px;

    }


    .cashStrategyHeader h2 {

        font-size: 36px;

        line-height: 1.08;

        letter-spacing: -1.1px;

    }


    .cashStrategyHeader > p {

        font-size: 12px;

        line-height: 1.75;

    }


    /* One premium section at a time */

    .cashStrategyGrid {

        grid-template-columns: 1fr;

    }


    .cashStrategyItem {

        min-height: 250px;

        padding: 24px 21px 28px;

    }


    .cashStrategyItem:hover {

        padding-left: 21px;

    }


    .cashStrategyContent {

        margin-top: 42px;

    }


    .cashStrategyContent h3 {

        font-size: 20px;

    }


    .cashStrategyContent p {

        font-size: 11px;

        line-height: 1.72;

    }


    .cashStrategyIndex {

        right: 21px;

        bottom: 22px;

    }


    .cashStrategyItem::after {

        left: 21px;

    }


    .cashStrategyBottom {

        margin-top: 36px;

        overflow: hidden;

    }


    .cashStrategyBottom p {

        justify-content: flex-start;

        width: max-content;

        gap: 9px;

        font-size: 6px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .cashStrategyHeader h2 {

        font-size: 32px;

    }


    .cashStrategyItem {

        min-height: 235px;

        padding: 22px 18px 26px;

    }


    .cashStrategyContent {

        margin-top: 38px;

    }


    .cashStrategyContent h3 {

        font-size: 18px;

    }


    .cashStrategyIndex {

        right: 18px;

    }


    .cashStrategyItem::after {

        left: 18px;

    }

}

/* Strategy Section Ends Here */

/* Who Section Starts Here */

/* =========================================================
   CASH FLOW MANAGEMENT — WHO IS IT FOR
========================================================= */

.cashAudience {

    position: relative;

    padding: 110px 0 95px;

    background: var(--section);

    overflow: hidden;

}


.cashAudience .container {

    width: min(1180px, 92%);

    margin: auto;

}


/* =========================================================
   HEADER
========================================================= */

.cashAudienceHeader {

    max-width: 790px;

    margin-bottom: 65px;

}


.cashAudienceEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

}


.cashAudienceEyebrow span {

    width: 30px;

    height: 2px;

    background: #b88e21;

}


.cashAudienceEyebrow p {

    margin: 0;

    color: #b88e21;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.cashAudienceHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.5vw, 60px);

    line-height: 1.05;

    letter-spacing: -1.8px;

    font-weight: 600;

}


.cashAudienceHeader h2 strong {

    color: #b88e21;

    font-weight: 600;

}


.cashAudienceHeader > p {

    max-width: 650px;

    margin: 21px 0 0;

    color: var(--text);

    opacity: .43;

    font-size: 12.5px;

    line-height: 1.8;

}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.cashAudienceLayout {

    display: grid;

    grid-template-columns: 110px 1fr;

    gap: 45px;

}


/* =========================================================
   LEFT RAIL
========================================================= */

.cashAudienceRail {

    position: relative;

    min-height: 100%;

}


.cashAudienceRailLine {

    position: absolute;

    top: 5px;

    bottom: 5px;

    left: 50%;

    width: 2px;

    background: rgba(184,142,33,.09);

    transform: translateX(-50%);

}


/* =========================================================
   RAIL DOTS
========================================================= */

.cashAudienceRailDot {

    position: absolute;

    left: 50%;

    width: 9px;

    height: 9px;

    border: 2px solid rgba(184,142,33,.30);

    border-radius: 50%;

    background: var(--section);

    transform: translateX(-50%);

    z-index: 2;

}


.dot01 { top: 3%; }
.dot02 { top: 20%; }
.dot03 { top: 37%; }
.dot04 { top: 54%; }
.dot05 { top: 71%; }
.dot06 { top: 88%; }


/* =========================================================
   RAIL LABEL
========================================================= */

.cashAudienceRailLabel {

    position: absolute;

    left: 50%;

    bottom: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 4px;

    transform: translateX(-50%);

    white-space: nowrap;

}


.cashAudienceRailLabel span {

    color: var(--text);

    opacity: .18;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 1.2px;

}


.cashAudienceRailLabel strong {

    color: #b88e21;

    opacity: .55;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: .8px;

}


/* =========================================================
   PROFILE LIST
========================================================= */

.cashAudienceProfiles {

    border-top: 2px solid rgba(184,142,33,.08);

}


/* =========================================================
   PROFILE
========================================================= */

.cashAudienceProfile {

    position: relative;

    display: grid;

    grid-template-columns: 55px 1fr 45px;

    gap: 25px;

    align-items: center;

    min-height: 150px;

    padding: 25px 10px 25px 0;

    border-bottom: 2px solid rgba(184,142,33,.08);

    transition:

        background .3s ease,

        padding .3s ease;

}


.cashAudienceProfile:hover {

    background: rgba(184,142,33,.018);

    padding-left: 12px;

}


/* =========================================================
   NUMBER
========================================================= */

.cashAudienceNumber {

    align-self: start;

    padding-top: 4px;

    color: #b88e21;

    opacity: .48;

    font-size: 10px;

    font-weight: 700;

}


/* =========================================================
   TAG
========================================================= */

.cashAudienceTag {

    display: inline-block;

    margin-bottom: 8px;

    color: #b88e21;

    opacity: .45;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 1.15px;

}


/* =========================================================
   CONTENT
========================================================= */

.cashAudienceProfileContent h3 {

    margin: 0;

    color: var(--primary);

    font-size: 24px;

    line-height: 1.2;

    letter-spacing: -.3px;

    font-weight: 600;

}


.cashAudienceProfileContent p {

    max-width: 680px;

    margin: 9px 0 0;

    color: var(--text);

    opacity: .42;

    font-size: 12px;

    line-height: 1.75;

}


/* =========================================================
   ARROW
========================================================= */

.cashAudienceArrow {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid rgba(184,142,33,.09);

    border-radius: 50%;

    color: #b88e21;

    opacity: .35;

    transition:

        opacity .25s ease,

        border-color .25s ease,

        transform .25s ease;

}


.cashAudienceArrow i {

    font-size: 8px;

}


.cashAudienceProfile:hover .cashAudienceArrow {

    opacity: .75;

    border-color: rgba(184,142,33,.30);

    transform: translateX(4px);

}


/* =========================================================
   BOTTOM
========================================================= */

.cashAudienceBottom {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    margin-top: 55px;

}


.cashAudienceBottom > span {

    width: 29px;

    height: 2px;

    background: #b88e21;

    opacity: .45;

}


.cashAudienceBottom p {

    margin: 0;

    color: var(--text);

    opacity: .24;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .cashAudience {

        padding: 85px 0;

    }


    .cashAudienceLayout {

        grid-template-columns: 75px 1fr;

        gap: 30px;

    }


    .cashAudienceProfile {

        grid-template-columns: 45px 1fr 40px;

        gap: 18px;

    }


    .cashAudienceProfileContent h3 {

        font-size: 21px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

    .cashAudience {

        padding: 70px 0;

    }


    .cashAudience .container {

        width: calc(100% - 30px);

    }


    .cashAudienceHeader {

        margin-bottom: 40px;

    }


    .cashAudienceHeader h2 {

        font-size: 36px;

        line-height: 1.08;

        letter-spacing: -1.1px;

    }


    .cashAudienceHeader > p {

        font-size: 12px;

        line-height: 1.75;

    }


    /* Remove desktop rail */

    .cashAudienceLayout {

        display: block;

    }


    .cashAudienceRail {

        display: none;

    }


    .cashAudienceProfile {

        grid-template-columns: 32px 1fr;

        gap: 13px;

        min-height: auto;

        padding: 23px 0 25px;

    }


    .cashAudienceProfile:hover {

        padding-left: 0;

    }


    .cashAudienceNumber {

        padding-top: 3px;

        font-size: 8px;

    }


    .cashAudienceTag {

        margin-bottom: 7px;

        font-size: 5.5px;

    }


    .cashAudienceProfileContent h3 {

        font-size: 19px;

        line-height: 1.25;

    }


    .cashAudienceProfileContent p {

        font-size: 11px;

        line-height: 1.7;

    }


    .cashAudienceArrow {

        display: none;

    }


    .cashAudienceBottom {

        justify-content: flex-start;

        margin-top: 38px;

    }


    .cashAudienceBottom p {

        white-space: nowrap;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .cashAudienceHeader h2 {

        font-size: 32px;

    }


    .cashAudienceProfile {

        grid-template-columns: 27px 1fr;

        gap: 11px;

    }


    .cashAudienceProfileContent h3 {

        font-size: 18px;

    }

}

/* Who Section Ends Here */

/* CTA Section Starts Here */

/* =========================================================
   CASH FLOW MANAGEMENT — FINAL CTA
========================================================= */

.cashFinalCta {

    position: relative;

    padding: 110px 0 65px;

    background: var(--section);

    overflow: hidden;

}


.cashFinalCta .container {

    width: min(1180px, 92%);

    margin: auto;

}


/* =========================================================
   MAIN
========================================================= */

.cashFinalCtaInner {

    display: grid;

    grid-template-columns: 1.12fr .88fr;

    align-items: center;

    gap: 85px;

    min-height: 430px;

}


/* =========================================================
   CONTENT
========================================================= */

.cashFinalCtaContent {

    max-width: 700px;

}


.cashFinalCtaEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 21px;

}


.cashFinalCtaEyebrow span {

    width: 30px;

    height: 2px;

    background: #b88e21;

}


.cashFinalCtaEyebrow p {

    margin: 0;

    color: #b88e21;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.cashFinalCtaContent h2 {

    max-width: 700px;

    margin: 0;

    color: var(--primary);

    font-size: clamp(42px, 4.7vw, 62px);

    line-height: 1.05;

    letter-spacing: -2px;

    font-weight: 600;

}


.cashFinalCtaContent h2 strong {

    color: #b88e21;

    font-weight: 600;

}


.cashFinalCtaContent > p {

    max-width: 650px;

    margin: 25px 0 0;

    color: var(--text);

    opacity: .44;

    font-size: 13px;

    line-height: 1.85;

}


/* =========================================================
   BUTTONS
========================================================= */

.cashFinalCtaButtons {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;

    margin-top: 32px;

}


.cashFinalCtaPrimary {

    min-height: 53px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    padding: 0 25px;

    background: #b88e21;

    border: 2px solid #b88e21;

    color: #fff;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    transition: .25s ease;

}


.cashFinalCtaPrimary i {

    font-size: 9px;

    transition: transform .25s ease;

}


.cashFinalCtaPrimary:hover {

    background: transparent;

    color: #b88e21;

}


.cashFinalCtaPrimary:hover i {

    transform: translateX(4px);

}


.cashFinalCtaSecondary {

    min-height: 53px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0 25px;

    border: 2px solid rgba(184,142,33,.14);

    color: var(--primary);

    text-decoration: none;

    font-size: 11px;

    font-weight: 600;

    transition: .25s ease;

}


.cashFinalCtaSecondary:hover {

    color: #b88e21;

    border-color: #b88e21;

}


/* =========================================================
   VISUAL
========================================================= */

.cashFinalCtaVisual {

    position: relative;

    min-height: 350px;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* =========================================================
   FAINT GRID
========================================================= */

.cashCtaGrid {

    position: absolute;

    inset: 8%;

    background-image:

        linear-gradient(
            rgba(184,142,33,.03) 2px,
            transparent 2px
        ),

        linear-gradient(
            90deg,
            rgba(184,142,33,.03) 2px,
            transparent 2px
        );

    background-size: 45px 45px;

    opacity: .55;

    mask-image: radial-gradient(
        circle,
        black 12%,
        transparent 72%
    );

}


/* =========================================================
   SYMBOL
========================================================= */

.cashCtaSymbol {

    position: relative;

    width: 210px;

    height: 210px;

}


/* =========================================================
   MAIN LINES
========================================================= */

.cashCtaVertical {

    position: absolute;

    top: 15px;

    bottom: 15px;

    left: 50%;

    width: 2px;

    background: rgba(184,142,33,.11);

    transform: translateX(-50%);

}


.cashCtaHorizontal {

    position: absolute;

    left: 15px;

    right: 15px;

    top: 50%;

    height: 2px;

    background: rgba(184,142,33,.11);

    transform: translateY(-50%);

}


/* =========================================================
   BRANCHES
========================================================= */

.cashCtaBranch {

    position: absolute;

    width: 58px;

    height: 2px;

    top: 50%;

    background: rgba(184,142,33,.10);

}


.branchLeft {

    left: 50%;

    transform-origin: right center;

    transform: translate(-100%, -50%) rotate(-25deg);

}


.branchRight {

    left: 50%;

    transform-origin: left center;

    transform: translateY(-50%) rotate(25deg);

}


/* =========================================================
   CENTER
========================================================= */

.cashCtaCenter {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 62px;

    height: 62px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid rgba(184,142,33,.20);

    border-radius: 50%;

    background: var(--section);

    transform: translate(-50%, -50%);

    z-index: 5;

}


.cashCtaCenter::before {

    content: "";

    position: absolute;

    width: 82px;

    height: 82px;

    border: 1px dashed rgba(184,142,33,.08);

    border-radius: 50%;

}


.cashCtaCenter span {

    width: 11px;

    height: 11px;

    border-radius: 50%;

    background: #b88e21;

    box-shadow:

        0 0 0 8px rgba(184,142,33,.05);

}


/* =========================================================
   NODES
========================================================= */

.cashCtaNode {

    position: absolute;

    width: 9px;

    height: 9px;

    border: 2px solid rgba(184,142,33,.32);

    border-radius: 50%;

    background: var(--section);

    z-index: 4;

}


.nodeTop {

    top: 10px;

    left: 50%;

    transform: translateX(-50%);

}


.nodeLeft {

    left: 9px;

    top: 50%;

    transform: translateY(-50%);

}


.nodeRight {

    right: 9px;

    top: 50%;

    transform: translateY(-50%);

}


.nodeBottom {

    bottom: 10px;

    left: 50%;

    transform: translateX(-50%);

}


/* =========================================================
   LABEL
========================================================= */

.cashCtaVisualLabel {

    position: absolute;

    left: 50%;

    bottom: 10px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 4px;

    transform: translateX(-50%);

}


.cashCtaVisualLabel span {

    color: var(--text);

    opacity: .18;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 1.2px;

}


.cashCtaVisualLabel strong {

    color: #b88e21;

    opacity: .55;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: .8px;

}


/* =========================================================
   BOTTOM PROCESS
========================================================= */

.cashFinalCtaProcess {

    margin-top: 45px;

}


.cashCtaProcessLine {

    width: 100%;

    height: 2px;

    background: rgba(184,142,33,.08);

}


.cashCtaProcessItems {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 20px;

}


.cashCtaProcessItems > div {

    display: flex;

    align-items: center;

    gap: 8px;

}


.cashCtaProcessItems small {

    color: var(--text);

    opacity: .18;

    font-size: 7px;

    font-weight: 700;

}


.cashCtaProcessItems span {

    color: var(--text);

    opacity: .28;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1px;

}


.cashCtaProcessItems .active span {

    color: #b88e21;

    opacity: .65;

}


.cashCtaProcessItems i {

    width: 55px;

    height: 2px;

    background: rgba(184,142,33,.08);

}


/* =========================================================
   SUBTLE HOVER
========================================================= */

.cashCtaSymbol {

    transition: transform .45s ease;

}


.cashFinalCtaVisual:hover .cashCtaSymbol {

    transform: scale(1.025);

}


.cashFinalCtaVisual:hover .cashCtaCenter span {

    box-shadow:

        0 0 0 8px rgba(184,142,33,.05),

        0 0 18px rgba(184,142,33,.11);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .cashFinalCta {

        padding: 85px 0 60px;

    }


    .cashFinalCtaInner {

        gap: 45px;

    }


    .cashFinalCtaContent h2 {

        font-size: 48px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

    .cashFinalCta {

        padding: 70px 0 50px;

    }


    .cashFinalCta .container {

        width: calc(100% - 30px);

    }


    .cashFinalCtaInner {

        grid-template-columns: 1fr;

        gap: 25px;

        min-height: auto;

    }


    .cashFinalCtaContent h2 {

        font-size: 36px;

        line-height: 1.08;

        letter-spacing: -1.1px;

    }


    .cashFinalCtaContent > p {

        font-size: 12px;

        line-height: 1.78;

    }


    .cashFinalCtaButtons {

        flex-direction: column;

        align-items: stretch;

    }


    .cashFinalCtaPrimary,
    .cashFinalCtaSecondary {

        width: 100%;

    }


    .cashFinalCtaVisual {

        min-height: 275px;

    }


    .cashCtaSymbol {

        width: 180px;

        height: 180px;

    }


    .cashCtaCenter {

        width: 55px;

        height: 55px;

    }


    .cashCtaCenter::before {

        width: 72px;

        height: 72px;

    }


    .cashCtaProcessItems {

        justify-content: flex-start;

        gap: 10px;

        overflow-x: auto;

        padding-bottom: 5px;

        scrollbar-width: none;

    }


    .cashCtaProcessItems::-webkit-scrollbar {

        display: none;

    }


    .cashCtaProcessItems > div {

        flex: 0 0 auto;

    }


    .cashCtaProcessItems i {

        flex: 0 0 18px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .cashFinalCtaContent h2 {

        font-size: 32px;

    }


    .cashFinalCtaVisual {

        min-height: 250px;

    }


    .cashCtaSymbol {

        width: 165px;

        height: 165px;

    }

}

/* CTA Section Ends Here */

/* Cashflow Management Page Ends Here */


/* Goal Based Investment Allocation Page Starts Here */

/* Hero Section Starts Here */

/* =========================================================
   GOAL-BASED INVESTMENT ALLOCATION — HERO
========================================================= */

.goalHero {

    position: relative;

    min-height: 720px;

    display: flex;

    align-items: center;

    padding: 90px 0;

    background: var(--section);

    overflow: hidden;

}


.goalHero .container {

    width: min(1180px, 92%);

    margin: auto;

}


/* =========================================================
   MAIN GRID
========================================================= */

.goalHeroGrid {

    display: grid;

    grid-template-columns: 1.08fr .92fr;

    align-items: center;

    gap: 85px;

}


/* =========================================================
   LEFT CONTENT
========================================================= */

.goalHeroContent {

    max-width: 680px;

}


.goalHeroEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 21px;

}


.goalHeroEyebrow span {

    width: 32px;

    height: 2px;

    background: #b88e21;

}


.goalHeroEyebrow p {

    margin: 0;

    color: #b88e21;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.6px;

    text-transform: uppercase;

}


.goalHeroContent h1 {

    max-width: 690px;

    margin: 0;

    color: var(--primary);

    font-size: clamp(48px, 5.2vw, 70px);

    line-height: 1.02;

    letter-spacing: -2.6px;

    font-weight: 600;

}


.goalHeroContent h1 strong {

    display: block;

    color: #b88e21;

    font-weight: 600;

}


.goalHeroDescription {

    max-width: 620px;

    margin: 27px 0 0;

    color: var(--text);

    opacity: .44;

    font-size: 13px;

    line-height: 1.85;

}


/* =========================================================
   BUTTONS
========================================================= */

.goalHeroButtons {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;

    margin-top: 34px;

}


.goalHeroPrimary {

    min-height: 54px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    padding: 0 25px;

    background: #b88e21;

    border: 2px solid #b88e21;

    color: #fff;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    transition: .25s ease;

}


.goalHeroPrimary i {

    font-size: 9px;

    transition: transform .25s ease;

}


.goalHeroPrimary:hover {

    background: transparent;

    color: #b88e21;

}


.goalHeroPrimary:hover i {

    transform: translateX(4px);

}


.goalHeroSecondary {

    min-height: 54px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0 25px;

    border: 2px solid rgba(184,142,33,.14);

    color: var(--primary);

    text-decoration: none;

    font-size: 11px;

    font-weight: 600;

    transition: .25s ease;

}


.goalHeroSecondary:hover {

    color: #b88e21;

    border-color: #b88e21;

}


/* =========================================================
   IDENTITY LINE
========================================================= */

.goalHeroIdentity {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 45px;

}


.goalHeroIdentity > span {

    width: 25px;

    height: 2px;

    background: #b88e21;

    opacity: .45;

}


.goalHeroIdentity p {

    margin: 0;

    color: var(--text);

    opacity: .22;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.15px;

}


.goalHeroIdentity b {

    padding: 0 7px;

    color: #b88e21;

    opacity: .65;

}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.goalHeroVisual {

    position: relative;

    min-height: 510px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}


/* =========================================================
   FAINT GRID
========================================================= */

.goalHeroGridLines {

    position: absolute;

    inset: 5%;

    background-image:

        linear-gradient(
            rgba(184,142,33,.032) 2px,
            transparent 2px
        ),

        linear-gradient(
            90deg,
            rgba(184,142,33,.032) 2px,
            transparent 2px
        );

    background-size: 44px 44px;

    opacity: .55;

    mask-image: radial-gradient(
        circle at center,
        black 15%,
        transparent 72%
    );

}


/* =========================================================
   ALLOCATION SYSTEM
========================================================= */

.goalAllocation {

    position: relative;

    width: 360px;

    height: 410px;

}


/* =========================================================
   MAIN GOAL POINT
========================================================= */

.goalMain {

    position: absolute;

    top: 12px;

    left: 50%;

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid rgba(184,142,33,.18);

    border-radius: 50%;

    background: var(--section);

    transform: translateX(-50%);

    z-index: 6;

}


.goalMain::before {

    content: "";

    position: absolute;

    width: 74px;

    height: 74px;

    border: 1px dashed rgba(184,142,33,.08);

    border-radius: 50%;

}


.goalTarget {

    position: relative;

    width: 20px;

    height: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid rgba(184,142,33,.50);

    border-radius: 50%;

}


.goalTarget::before {

    content: "";

    position: absolute;

    width: 9px;

    height: 9px;

    border: 2px solid rgba(184,142,33,.40);

    border-radius: 50%;

}


.goalTarget i {

    width: 4px;

    height: 4px;

    border-radius: 50%;

    background: #b88e21;

}


/* =========================================================
   MAIN PATH
========================================================= */

.goalMainLine {

    position: absolute;

    top: 64px;

    left: 50%;

    width: 2px;

    height: 118px;

    background: rgba(184,142,33,.11);

    transform: translateX(-50%);

}


/* =========================================================
   ALLOCATION POINT
========================================================= */

.goalAllocationPoint {

    position: absolute;

    top: 178px;

    left: 50%;

    width: 62px;

    height: 62px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid rgba(184,142,33,.20);

    border-radius: 50%;

    background: var(--section);

    transform: translateX(-50%);

    z-index: 5;

}


.goalAllocationPoint::before {

    content: "";

    position: absolute;

    width: 82px;

    height: 82px;

    border: 1px dashed rgba(184,142,33,.07);

    border-radius: 50%;

}


.goalAllocationPoint span {

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: #b88e21;

    box-shadow:

        0 0 0 8px rgba(184,142,33,.05);

}


/* =========================================================
   THREE BRANCHES
========================================================= */

.goalBranch {

    position: absolute;

    top: 209px;

    height: 2px;

    background: rgba(184,142,33,.10);

    transform-origin: left center;

}


.goalBranchLeft {

    left: 50%;

    width: 105px;

    transform: rotate(155deg);

}


.goalBranchCenter {

    left: 50%;

    width: 90px;

    transform: rotate(90deg);

}


.goalBranchRight {

    left: 50%;

    width: 105px;

    transform: rotate(25deg);

}


/* =========================================================
   NODES
========================================================= */

.goalNode {

    position: absolute;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

    z-index: 4;

}


.goalNode span {

    width: 11px;

    height: 11px;

    border: 2px solid rgba(184,142,33,.34);

    border-radius: 50%;

    background: var(--section);

}


.goalNode small {

    color: var(--text);

    opacity: .25;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;

}


.goalNodeLeft {

    left: 53px;

    top: 294px;

}


.goalNodeCenter {

    left: 50%;

    top: 305px;

    transform: translateX(-50%);

}


.goalNodeRight {

    right: 53px;

    top: 294px;

}


/* =========================================================
   FUTURE
========================================================= */

.goalFutureLine {

    position: absolute;

    top: 322px;

    left: 50%;

    width: 2px;

    height: 58px;

    background: rgba(184,142,33,.09);

    transform: translateX(-50%);

}


.goalFuture {

    position: absolute;

    bottom: 2px;

    left: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 9px;

    transform: translateX(-50%);

}


.goalFuture > span {

    width: 10px;

    height: 10px;

    border: 2px solid rgba(184,142,33,.35);

    border-radius: 50%;

    background: var(--section);

}


.goalFuture small {

    color: #b88e21;

    opacity: .55;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.2px;

}


/* =========================================================
   VISUAL LABEL
========================================================= */

.goalHeroVisualLabel {

    position: absolute;

    right: 12px;

    bottom: 20px;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 4px;

}


.goalHeroVisualLabel span {

    color: var(--text);

    opacity: .17;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 1.2px;

}


.goalHeroVisualLabel strong {

    color: #b88e21;

    opacity: .52;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: .8px;

}


/* =========================================================
   SUBTLE MOTION
========================================================= */

.goalAllocationPoint span {

    animation: goalPulse 3s ease-in-out infinite;

}


@keyframes goalPulse {

    0%,
    100% {

        box-shadow:

            0 0 0 8px rgba(184,142,33,.05);

    }

    50% {

        box-shadow:

            0 0 0 13px rgba(184,142,33,.025);

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .goalHero {

        min-height: auto;

        padding: 80px 0;

    }


    .goalHeroGrid {

        gap: 45px;

    }


    .goalHeroContent h1 {

        font-size: 50px;

    }


    .goalHeroVisual {

        min-height: 440px;

    }


    .goalAllocation {

        transform: scale(.9);

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

    .goalHero {

        padding: 70px 0 60px;

    }


    .goalHero .container {

        width: calc(100% - 30px);

    }


    .goalHeroGrid {

        grid-template-columns: 1fr;

        gap: 30px;

    }


    .goalHeroContent h1 {

        font-size: 38px;

        line-height: 1.07;

        letter-spacing: -1.2px;

    }


    .goalHeroDescription {

        font-size: 12px;

        line-height: 1.78;

    }


    .goalHeroButtons {

        flex-direction: column;

        align-items: stretch;

    }


    .goalHeroPrimary,
    .goalHeroSecondary {

        width: 100%;

    }


    .goalHeroIdentity {

        margin-top: 30px;

    }


    .goalHeroVisual {

        min-height: 390px;

    }


    .goalAllocation {

        transform: scale(.78);

    }


    .goalHeroVisualLabel {

        right: 5px;

        bottom: 8px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .goalHeroContent h1 {

        font-size: 34px;

    }


    .goalHeroVisual {

        min-height: 350px;

    }


    .goalAllocation {

        transform: scale(.70);

    }


    .goalHeroIdentity p {

        font-size: 8px;

    }

}

/* Hero Section Ends Here */

/* Intro Section Starts Here */

/* =========================================================
   GOAL-BASED INVESTMENT ALLOCATION
   INTRODUCTION — SIMPLE EDITORIAL
========================================================= */

.goalIntroSimple {

    position: relative;

    padding: 110px 0;

    background: var(--section);

    overflow: hidden;

}


.goalIntroSimple .container {

    width: min(1160px, 92%);

    margin: auto;

}


/* =========================================================
   MAIN GRID
========================================================= */

.goalIntroSimpleGrid {

    display: grid;

    grid-template-columns: 1.15fr .85fr;

    gap: 110px;

    align-items: start;

}


/* =========================================================
   LEFT CONTENT
========================================================= */

.goalIntroSimpleContent {

    max-width: 680px;

}


.goalIntroSimpleEyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

}


.goalIntroSimpleEyebrow span {

    width: 28px;

    height: 2px;

    background: #b88e21;

}


.goalIntroSimpleEyebrow p {

    margin: 0;

    color: #b88e21;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.goalIntroSimpleContent h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.3vw, 57px);

    line-height: 1.06;

    letter-spacing: -1.7px;

    font-weight: 600;

}


.goalIntroSimpleContent h2 strong {

    display: block;

    color: #b88e21;

    font-weight: 600;

}


.goalIntroSimpleRule {

    width: 38px;

    height: 2px;

    margin: 28px 0 25px;

    background: #b88e21;

    opacity: .55;

}


.goalIntroSimpleContent > p {

    max-width: 640px;

    margin: 0 0 17px;

    color: var(--text);

    opacity: .44;

    font-size: 13px;

    line-height: 1.85;

}


/* =========================================================
   RIGHT POINTS
========================================================= */

.goalIntroSimplePoints {

    position: relative;

    padding-left: 32px;

}


.goalIntroSimplePoints::before {

    content: "";

    position: absolute;

    left: 0;

    top: 4px;

    bottom: 70px;

    width: 2px;

    background: rgba(184,142,33,.09);

}


/* =========================================================
   POINT
========================================================= */

.goalIntroSimplePoint {

    position: relative;

    display: grid;

    grid-template-columns: 34px 1fr;

    gap: 18px;

    padding: 4px 0 32px;

}


.goalIntroSimplePoint:not(:first-child) {

    padding-top: 32px;

    border-top: 2px solid rgba(184,142,33,.07);

}


/* =========================================================
   NUMBER
========================================================= */

.goalPointNumber {

    position: relative;

    z-index: 2;

    width: 27px;

    height: 27px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid rgba(184,142,33,.18);

    border-radius: 50%;

    background: var(--section);

    color: #b88e21;

    font-size: 7px;

    font-weight: 700;

}


/* =========================================================
   TEXT
========================================================= */

.goalPointText h3 {

    margin: 2px 0 0;

    color: var(--primary);

    font-size: 20px;

    line-height: 1.25;

    font-weight: 600;

}


.goalPointText p {

    max-width: 400px;

    margin: 9px 0 0;

    color: var(--text);

    opacity: .42;

    font-size: 11.5px;

    line-height: 1.75;

}


/* =========================================================
   SIGNATURE
========================================================= */

.goalIntroSimpleSignature {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 12px;

    padding-top: 27px;

    border-top: 2px solid rgba(184,142,33,.07);

}


.goalIntroSimpleSignature > span {

    width: 22px;

    height: 2px;

    background: #b88e21;

    opacity: .45;

}


.goalIntroSimpleSignature p {

    margin: 0;

    color: var(--text);

    opacity: .25;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;

}


.goalIntroSimpleSignature strong {

    color: #b88e21;

    opacity: .8;

    font-weight: 700;

}


/* =========================================================
   HOVER
========================================================= */

.goalIntroSimplePoint {

    transition: transform .25s ease;

}


.goalIntroSimplePoint:hover {

    transform: translateX(5px);

}


.goalIntroSimplePoint:hover .goalPointNumber {

    border-color: rgba(184,142,33,.40);

    background: rgba(184,142,33,.025);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .goalIntroSimple {

        padding: 85px 0;

    }


    .goalIntroSimpleGrid {

        gap: 60px;

    }


    .goalIntroSimpleContent h2 {

        font-size: 45px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

    .goalIntroSimple {

        padding: 70px 0;

    }


    .goalIntroSimple .container {

        width: calc(100% - 30px);

    }


    .goalIntroSimpleGrid {

        grid-template-columns: 1fr;

        gap: 42px;

    }


    .goalIntroSimpleContent h2 {

        font-size: 36px;

        line-height: 1.08;

        letter-spacing: -1.1px;

    }


    .goalIntroSimpleContent > p {

        font-size: 12px;

        line-height: 1.78;

    }


    .goalIntroSimplePoints {

        padding-left: 25px;

    }


    .goalIntroSimplePoints::before {

        bottom: 65px;

    }


    .goalIntroSimplePoint {

        grid-template-columns: 30px 1fr;

        gap: 13px;

        padding-bottom: 27px;

    }


    .goalIntroSimplePoint:not(:first-child) {

        padding-top: 27px;

    }


    .goalPointNumber {

        width: 24px;

        height: 24px;

        font-size: 6px;

    }


    .goalPointText h3 {

        font-size: 18px;

    }


    .goalPointText p {

        font-size: 11px;

        line-height: 1.7;

    }


    .goalIntroSimplePoint:hover {

        transform: none;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .goalIntroSimpleContent h2 {

        font-size: 32px;

    }


    .goalIntroSimplePoints {

        padding-left: 21px;

    }


    .goalPointText h3 {

        font-size: 17px;

    }

}

/* Intro Section Ends Here */

/* Matters Section Starts Here */

/* =========================================================
   GOAL-BASED INVESTMENT ALLOCATION
   WHY IT MATTERS
========================================================= */

.goalWhy {

    position: relative;

    padding: 110px 0 95px;

    background: var(--section);

    overflow: hidden;

}


.goalWhy .container {

    width: min(1160px, 92%);

    margin: auto;

}


/* =========================================================
   HEADER
========================================================= */

.goalWhyHeader {

    max-width: 760px;

    margin-bottom: 60px;

}


.goalWhyEyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

}


.goalWhyEyebrow span {

    width: 30px;

    height: 2px;

    background: #b88e21;

}


.goalWhyEyebrow p {

    margin: 0;

    color: #b88e21;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.4px;

    text-transform: uppercase;

}


.goalWhyHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.3vw, 58px);

    line-height: 1.06;

    letter-spacing: -1.7px;

    font-weight: 600;

}


.goalWhyHeader h2 strong {

    display: block;

    color: #b88e21;

    font-weight: 600;

}


/* =========================================================
   MAIN GRID
========================================================= */

.goalWhyGrid {

    display: grid;

    grid-template-columns: .78fr 1.22fr;

    gap: 85px;

    align-items: center;

}


/* =========================================================
   VISUAL
========================================================= */

.goalWhyVisual {

    position: relative;

    min-height: 500px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.goalWhyVisualInner {

    position: relative;

    width: 330px;

    height: 330px;

}


/* =========================================================
   CENTRAL POINT
========================================================= */

.goalWhyCenter {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 62px;

    height: 62px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid rgba(184,142,33,.18);

    border-radius: 50%;

    background: var(--section);

    transform: translate(-50%, -50%);

    z-index: 5;

}


.goalWhyCenter::before {

    content: "";

    position: absolute;

    width: 86px;

    height: 86px;

    border: 1px dashed rgba(184,142,33,.07);

    border-radius: 50%;

}


.goalWhyCenter span {

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: #b88e21;

    box-shadow:

        0 0 0 8px rgba(184,142,33,.045);

}


/* =========================================================
   CONNECTING LINES
========================================================= */

.goalWhyConnector {

    position: absolute;

    left: 50%;

    top: 50%;

    width: 105px;

    height: 2px;

    background: rgba(184,142,33,.09);

    transform-origin: left center;

}


.connectorOne {

    transform: rotate(-90deg);

}


.connectorTwo {

    transform: rotate(145deg);

}


.connectorThree {

    transform: rotate(35deg);

}


/* =========================================================
   NODES
========================================================= */

.goalWhyNode {

    position: absolute;

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid rgba(184,142,33,.15);

    border-radius: 50%;

    background: var(--section);

}


.goalWhyNode span {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: rgba(184,142,33,.35);

}


.nodeTop {

    top: 8px;

    left: 50%;

    transform: translateX(-50%);

}


.nodeLeft {

    left: 12px;

    bottom: 40px;

}


.nodeRight {

    right: 12px;

    bottom: 40px;

}


.nodeBottom {

    bottom: 5px;

    left: 50%;

    transform: translateX(-50%);

}


/* =========================================================
   VERY FAINT OUTER LINES
========================================================= */

.goalWhyLine {

    position: absolute;

    background: rgba(184,142,33,.035);

}


.lineTop {

    width: 1px;

    height: 70px;

    left: 50%;

    top: 0;

}


.lineLeft {

    width: 70px;

    height: 1px;

    left: 0;

    top: 72%;

}


.lineRight {

    width: 70px;

    height: 1px;

    right: 0;

    top: 72%;

}


.lineBottom {

    width: 1px;

    height: 45px;

    left: 50%;

    bottom: 0;

}


/* =========================================================
   VISUAL CAPTION
========================================================= */

.goalWhyVisualCaption {

    position: absolute;

    bottom: 15px;

    left: 50%;

    color: var(--text);

    opacity: .20;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.2px;

    transform: translateX(-50%);

    white-space: nowrap;

}


/* =========================================================
   ITEMS
========================================================= */

.goalWhyItems {

    border-top: 2px solid rgba(184,142,33,.08);

}


.goalWhyItem {

    display: grid;

    grid-template-columns: 42px 1fr;

    gap: 18px;

    padding: 22px 0;

    border-bottom: 2px solid rgba(184,142,33,.08);

    transition: padding .25s ease;

}


.goalWhyItem:hover {

    padding-left: 8px;

}


/* =========================================================
   NUMBER
========================================================= */

.goalWhyNumber {

    padding-top: 3px;

    color: #b88e21;

    opacity: .50;

    font-size: 9px;

    font-weight: 700;

}


/* =========================================================
   TEXT
========================================================= */

.goalWhyText h3 {

    margin: 0;

    color: var(--primary);

    font-size: 20px;

    line-height: 1.25;

    font-weight: 600;

}


.goalWhyText p {

    max-width: 600px;

    margin: 8px 0 0;

    color: var(--text);

    opacity: .42;

    font-size: 12px;

    line-height: 1.72;

}


/* =========================================================
   BOTTOM
========================================================= */

.goalWhyBottom {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin-top: 55px;

}


.goalWhyBottom > span {

    width: 27px;

    height: 2px;

    background: #b88e21;

    opacity: .45;

}


.goalWhyBottom p {

    margin: 0;

    color: var(--text);

    opacity: .23;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;

}


.goalWhyBottom b {

    padding: 0 7px;

    color: #b88e21;

    opacity: .7;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .goalWhy {

        padding: 85px 0;

    }


    .goalWhyGrid {

        gap: 50px;

    }


    .goalWhyHeader h2 {

        font-size: 45px;

    }


    .goalWhyVisualInner {

        transform: scale(.85);

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

    .goalWhy {

        padding: 70px 0;

    }


    .goalWhy .container {

        width: calc(100% - 30px);

    }


    .goalWhyHeader {

        margin-bottom: 42px;

    }


    .goalWhyHeader h2 {

        font-size: 36px;

        line-height: 1.08;

        letter-spacing: -1.1px;

    }


    .goalWhyGrid {

        grid-template-columns: 1fr;

        gap: 40px;

    }


    .goalWhyVisual {

        min-height: 270px;

        order: 2;

    }


    .goalWhyItems {

        order: 1;

    }


    .goalWhyVisualInner {

        transform: scale(.72);

    }


    .goalWhyVisualCaption {

        bottom: 0;

    }


    .goalWhyItem {

        grid-template-columns: 31px 1fr;

        gap: 12px;

        padding: 21px 0;

    }


    .goalWhyItem:hover {

        padding-left: 0;

    }


    .goalWhyText h3 {

        font-size: 18px;

    }


    .goalWhyText p {

        font-size: 10px;

        line-height: 1.7;

    }


    .goalWhyBottom {

        justify-content: flex-start;

        margin-top: 38px;

        overflow: hidden;

    }


    .goalWhyBottom p {

        white-space: nowrap;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .goalWhyHeader h2 {

        font-size: 32px;

    }


    .goalWhyVisual {

        min-height: 245px;

    }


    .goalWhyVisualInner {

        transform: scale(.62);

    }


    .goalWhyText h3 {

        font-size: 17px;

    }


    .goalWhyText p {

        font-size: 9px;

    }

}

/* Matters Section Ends Here */

/* Approach Section Starts Here */

/* =========================================================
   GOAL-BASED INVESTMENT ALLOCATION
   APPROACH — GOAL ALLOCATION FRAMEWORK
========================================================= */

.goalApproach {

    position: relative;

    padding: 110px 0 95px;

    background: var(--section);

    overflow: hidden;

}


.goalApproach .container {

    width: min(1160px, 92%);

    margin: auto;

}


/* =========================================================
   HEADER
========================================================= */

.goalApproachHeader {

    max-width: 780px;

    margin-bottom: 70px;

}


.goalApproachEyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

}


.goalApproachEyebrow span {

    width: 30px;

    height: 2px;

    background: #b88e21;

}


.goalApproachEyebrow p {

    margin: 0;

    color: #b88e21;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.4px;

    text-transform: uppercase;

}


.goalApproachHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.4vw, 58px);

    line-height: 1.06;

    letter-spacing: -1.8px;

    font-weight: 600;

}


.goalApproachHeader h2 strong {

    display: block;

    color: #b88e21;

    font-weight: 600;

}


.goalApproachHeader > p {

    max-width: 650px;

    margin: 20px 0 0;

    color: var(--text);

    opacity: .42;

    font-size: 12px;

    line-height: 1.8;

}


/* =========================================================
   FRAMEWORK
========================================================= */

.goalFramework {

    position: relative;

    width: 620px;

    height: 760px;

    margin: 0 auto 75px;

}


/* =========================================================
   MAIN VERTICAL LINES
========================================================= */

.goalFrameworkMainLine {

    position: absolute;

    left: 50%;

    width: 2px;

    background: rgba(184,142,33,.10);

    transform: translateX(-50%);

}


.lineGoal {

    top: 55px;

    height: 70px;

}


.lineTimeline {

    top: 225px;

    height: 65px;

}


.lineInvestment {

    top: 500px;

    height: 80px;

}


.lineProgress {

    top: 650px;

    height: 62px;

}


/* =========================================================
   FINANCIAL GOAL
========================================================= */

.goalFrameworkGoal {

    position: absolute;

    top: 0;

    left: 50%;

    display: flex;

    align-items: center;

    gap: 16px;

    transform: translateX(-50%);

}


.goalFrameworkGoal > small {

    position: absolute;

    left: -38px;

    top: 18px;

    color: #b88e21;

    opacity: .55;

    font-size: 9px;

    font-weight: 700;

}


.goalFrameworkGoalPoint {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid rgba(184,142,33,.18);

    border-radius: 50%;

    background: var(--section);

}


.goalFrameworkGoalPoint span {

    width: 9px;

    height: 9px;

    border-radius: 50%;

    background: #b88e21;

}


.goalFrameworkGoalText {

    position: absolute;

    left: 68px;

    top: 7px;

    width: 150px;

}


.goalFrameworkGoalText strong {

    display: block;

    color: var(--primary);

    font-size: 9px;

    letter-spacing: 1px;

}


.goalFrameworkGoalText p {

    margin: 6px 0 0;

    color: var(--text);

    opacity: .35;

    font-size: 9px;

    line-height: 1.5;

}


/* =========================================================
   TIMELINE
========================================================= */

.goalFrameworkTimeline {

    position: absolute;

    top: 125px;

    left: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 7px;

    transform: translateX(-50%);

}


.goalFrameworkTinyDot {

    width: 8px;

    height: 8px;

    border: 2px solid rgba(184,142,33,.25);

    border-radius: 50%;

    background: var(--section);

}


.goalFrameworkTimeline strong {

    color: var(--primary);

    font-size: 9px;

    letter-spacing: 1px;

}


.goalFrameworkTimeline small {

    color: var(--text);

    opacity: .32;

    font-size: 9px;

}


/* =========================================================
   CENTRAL ALLOCATION
========================================================= */

.goalFrameworkAllocation {

    position: absolute;

    top: 285px;

    left: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

    transform: translateX(-50%);

}


.goalAllocationRing {

    width: 86px;

    height: 86px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid rgba(184,142,33,.18);

    border-radius: 50%;

    background: var(--section);

}


.goalAllocationRing::before {

    content: "";

    position: absolute;

    width: 112px;

    height: 112px;

    border: 1px dashed rgba(184,142,33,.07);

    border-radius: 50%;

}


.goalAllocationRing span {

    width: 13px;

    height: 13px;

    border-radius: 50%;

    background: #b88e21;

    box-shadow:

        0 0 0 9px rgba(184,142,33,.045);

}


.goalFrameworkAllocation strong {

    color: var(--primary);

    font-size: 10px;

    letter-spacing: 1.2px;

}


.goalFrameworkAllocation small {

    color: var(--text);

    opacity: .32;

    font-size: 9px;

}


/* =========================================================
   THREE BRANCHES
========================================================= */

.goalFrameworkBranch {

    position: absolute;

    top: 329px;

    left: 50%;

    width: 145px;

    height: 2px;

    background: rgba(184,142,33,.09);

    transform-origin: left center;

}


.branchGrowth {

    transform: rotate(155deg);

}


.branchBalance {

    width: 90px;

    transform: rotate(90deg);

}


.branchStability {

    transform: rotate(25deg);

}


/* =========================================================
   ALLOCATION NODES
========================================================= */

.goalFrameworkNode {

    position: absolute;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 9px;

}


.goalFrameworkNode span {

    width: 13px;

    height: 13px;

    border: 2px solid rgba(184,142,33,.30);

    border-radius: 50%;

    background: var(--section);

}


.goalFrameworkNode strong {

    color: var(--text);

    opacity: .30;

    font-size: 9px;

    letter-spacing: 1px;

}


.frameworkGrowth {

    left: 110px;

    top: 415px;

}


.frameworkBalance {

    left: 50%;

    top: 435px;

    transform: translateX(-50%);

}


.frameworkStability {

    right: 110px;

    top: 415px;

}


/* =========================================================
   INVESTMENT
========================================================= */

.goalFrameworkInvestment {

    position: absolute;

    top: 580px;

    left: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

    transform: translateX(-50%);

}


.goalFrameworkInvestment span {

    width: 32px;

    height: 32px;

    border: 2px solid rgba(184,142,33,.20);

    border-radius: 50%;

    background: var(--section);

}


.goalFrameworkInvestment span::after {

    content: "";

    display: block;

    width: 7px;

    height: 7px;

    margin: 10px auto;

    border-radius: 50%;

    background: rgba(184,142,33,.55);

}


.goalFrameworkInvestment strong,
.goalFrameworkProgress strong {

    color: var(--primary);

    font-size: 9px;

    letter-spacing: 1px;

}


/* =========================================================
   PROGRESS
========================================================= */

.goalFrameworkProgress {

    position: absolute;

    bottom: 0;

    left: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

    transform: translateX(-50%);

}


.goalFrameworkProgress span {

    width: 38px;

    height: 38px;

    border: 2px solid rgba(184,142,33,.25);

    border-radius: 50%;

    background: var(--section);

}


.goalFrameworkProgress span::after {

    content: "";

    display: block;

    width: 9px;

    height: 9px;

    margin: 12px auto;

    border-radius: 50%;

    background: #b88e21;

}


/* =========================================================
   DETAIL GRID
========================================================= */

.goalApproachDetails {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    border-top: 2px solid rgba(184,142,33,.08);

    border-left: 2px solid rgba(184,142,33,.08);

}


.goalApproachItem {

    min-height: 220px;

    padding: 27px 28px;

    border-right: 2px solid rgba(184,142,33,.08);

    border-bottom: 2px solid rgba(184,142,33,.08);

    transition: background .25s ease;

}


.goalApproachItem:hover {

    background: rgba(184,142,33,.015);

}


.goalApproachNumber {

    margin-bottom: 22px;

    color: #b88e21;

    opacity: .48;

    font-size: 9px;

    font-weight: 700;

}


.goalApproachItem > div > span {

    color: #b88e21;

    opacity: .50;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.goalApproachItem h3 {

    margin: 6px 0 0;

    color: var(--primary);

    font-size: 21px;

    line-height: 1.2;

    font-weight: 600;

}


.goalApproachItem p {

    margin: 11px 0 0;

    color: var(--text);

    opacity: .42;

    font-size: 11px;

    line-height: 1.72;

}


/* =========================================================
   BOTTOM
========================================================= */

.goalApproachBottom {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    margin-top: 50px;

}


.goalApproachBottom > span {

    width: 28px;

    height: 2px;

    background: #b88e21;

    opacity: .45;

}


.goalApproachBottom p {

    margin: 0;

    color: var(--text);

    opacity: .24;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;

}


.goalApproachBottom b {

    padding: 0 7px;

    color: #b88e21;

    opacity: .7;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .goalApproach {

        padding: 85px 0;

    }


    .goalFramework {

        transform: scale(.88);

        transform-origin: top center;

        margin-bottom: 0;

    }


    .goalApproachDetails {

        margin-top: -75px;

    }


    .goalApproachItem {

        padding: 23px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

    .goalApproach {

        padding: 70px 0;

    }


    .goalApproach .container {

        width: calc(100% - 30px);

    }


    .goalApproachHeader {

        margin-bottom: 45px;

    }


    .goalApproachHeader h2 {

        font-size: 36px;

        line-height: 1.08;

        letter-spacing: -1.1px;

    }


    .goalApproachHeader > p {

        font-size: 11px;

        line-height: 1.75;

    }


    /* Simplified mobile framework */

    .goalFramework {

        width: 100%;

        height: 650px;

        transform: none;

        margin-bottom: 45px;

    }


    .goalFrameworkGoalText {

        left: 58px;

        width: 125px;

    }


    .goalFrameworkGoalText strong {

        font-size: 9px;

    }


    .goalFrameworkGoalText p {

        font-size: 9px;

    }


    .goalFrameworkBranch {

        width: 100px;

    }


    .frameworkGrowth {

        left: 5%;

    }


    .frameworkStability {

        right: 5%;

    }


    .goalApproachDetails {

        grid-template-columns: 1fr;

        margin-top: 0;

    }


    .goalApproachItem {

        min-height: auto;

        padding: 23px 20px 25px;

    }


    .goalApproachItem h3 {

        font-size: 19px;

    }


    .goalApproachItem p {

        font-size: 10px;

    }


    .goalApproachBottom {

        justify-content: flex-start;

        overflow: hidden;

    }


    .goalApproachBottom p {

        white-space: nowrap;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .goalApproachHeader h2 {

        font-size: 32px;

    }


    .goalFramework {

        height: 610px;

    }


    .goalFrameworkGoalText {

        left: 52px;

    }


    .goalFrameworkGoalText p {

        display: none;

    }


    .goalFrameworkNode strong {

        font-size: 9px;

    }


    .goalApproachItem h3 {

        font-size: 18px;

    }

}

/* Approach Section Ends Here */

/* Strategies Section Starts Here */

/* =========================================================
   GOAL-BASED INVESTMENT ALLOCATION
   STRATEGIES
========================================================= */

.goalStrategies {

    position: relative;

    padding: 110px 0 95px;

    background: var(--section);

    overflow: hidden;

}


.goalStrategies .container {

    width: min(1160px, 92%);

    margin: auto;

}


/* =========================================================
   HEADER
========================================================= */

.goalStrategiesHeader {

    max-width: 780px;

    margin-bottom: 60px;

}


.goalStrategiesEyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

}


.goalStrategiesEyebrow span {

    width: 30px;

    height: 2px;

    background: #b88e21;

}


.goalStrategiesEyebrow p {

    margin: 0;

    color: #b88e21;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.4px;

    text-transform: uppercase;

}


.goalStrategiesHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.3vw, 58px);

    line-height: 1.06;

    letter-spacing: -1.8px;

    font-weight: 600;

}


.goalStrategiesHeader h2 strong {

    display: block;

    color: #b88e21;

    font-weight: 600;

}


.goalStrategiesHeader > p {

    max-width: 660px;

    margin: 20px 0 0;

    color: var(--text);

    opacity: .42;

    font-size: 12px;

    line-height: 1.8;

}


/* =========================================================
   STRATEGY LIST
========================================================= */

.goalStrategiesList {

    border-top: 2px solid rgba(184,142,33,.08);

}


/* =========================================================
   STRATEGY
========================================================= */

.goalStrategy {

    position: relative;

    display: grid;

    grid-template-columns: 50px 100px 1fr 130px;

    align-items: center;

    gap: 30px;

    min-height: 175px;

    padding: 25px 0;

    border-bottom: 2px solid rgba(184,142,33,.08);

    transition:

        background .3s ease,

        padding .3s ease;

}


.goalStrategy:hover {

    padding-left: 12px;

    background: rgba(184,142,33,.015);

}


/* =========================================================
   NUMBER
========================================================= */

.goalStrategyNumber {

    align-self: start;

    padding-top: 6px;

    color: #b88e21;

    opacity: .48;

    font-size: 9px;

    font-weight: 700;

}


/* =========================================================
   MINI VISUAL
========================================================= */

.goalStrategyVisual {

    position: relative;

    width: 80px;

    height: 80px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.goalStrategyRing {

    position: relative;

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid rgba(184,142,33,.16);

    border-radius: 50%;

    background: var(--section);

    z-index: 2;

}


.goalStrategyRing::before {

    content: "";

    position: absolute;

    width: 68px;

    height: 68px;

    border: 1px dashed rgba(184,142,33,.07);

    border-radius: 50%;

}


.goalStrategyRing i {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #b88e21;

}


.goalStrategyPath {

    position: absolute;

    left: 0;

    right: 0;

    top: 50%;

    height: 2px;

    background: rgba(184,142,33,.07);

}


/* =========================================================
   CONTENT
========================================================= */

.goalStrategyContent {

    max-width: 650px;

}


.goalStrategyLabel {

    display: block;

    margin-bottom: 7px;

    color: #b88e21;

    opacity: .48;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.goalStrategyContent h3 {

    margin: 0;

    color: var(--primary);

    font-size: 24px;

    line-height: 1.2;

    letter-spacing: -.4px;

    font-weight: 600;

}


.goalStrategyContent p {

    max-width: 650px;

    margin: 10px 0 0;

    color: var(--text);

    opacity: .42;

    font-size: 11.5px;

    line-height: 1.75;

}


/* =========================================================
   INDEX
========================================================= */

.goalStrategyIndex {

    justify-self: end;

    color: var(--text);

    opacity: .16;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.2px;

    text-align: right;

}


/* =========================================================
   BOTTOM
========================================================= */

.goalStrategiesBottom {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    margin-top: 50px;

}


.goalStrategiesBottom > span {

    width: 28px;

    height: 2px;

    background: #b88e21;

    opacity: .45;

}


.goalStrategiesBottom p {

    margin: 0;

    color: var(--text);

    opacity: .23;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;

}


.goalStrategiesBottom b {

    padding: 0 7px;

    color: #b88e21;

    opacity: .7;

}


/* =========================================================
   HOVER DETAIL
========================================================= */

.goalStrategy::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -2px;

    width: 0;

    height: 2px;

    background: #b88e21;

    transition: width .3s ease;

}


.goalStrategy:hover::after {

    width: 55px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .goalStrategies {

        padding: 85px 0;

    }


    .goalStrategy {

        grid-template-columns: 40px 85px 1fr 100px;

        gap: 22px;

    }


    .goalStrategyContent h3 {

        font-size: 21px;

    }


    .goalStrategyContent p {

        font-size: 10.5px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

    .goalStrategies {

        padding: 70px 0;

    }


    .goalStrategies .container {

        width: calc(100% - 30px);

    }


    .goalStrategiesHeader {

        margin-bottom: 40px;

    }


    .goalStrategiesHeader h2 {

        font-size: 36px;

        line-height: 1.08;

        letter-spacing: -1.1px;

    }


    .goalStrategiesHeader > p {

        font-size: 11px;

        line-height: 1.75;

    }


    .goalStrategy {

        grid-template-columns: 31px 1fr;

        gap: 13px;

        min-height: auto;

        padding: 25px 0 27px;

    }


    .goalStrategy:hover {

        padding-left: 0;

    }


    .goalStrategyNumber {

        padding-top: 3px;

    }


    .goalStrategyVisual {

        display: none;

    }


    .goalStrategyContent {

        max-width: none;

    }


    .goalStrategyLabel {

        font-size: 9px;

    }


    .goalStrategyContent h3 {

        font-size: 19px;

        line-height: 1.25;

    }


    .goalStrategyContent p {

        font-size: 10px;

        line-height: 1.72;

    }


    .goalStrategyIndex {

        display: none;

    }


    .goalStrategiesBottom {

        justify-content: flex-start;

        overflow: hidden;

        margin-top: 38px;

    }


    .goalStrategiesBottom p {

        white-space: nowrap;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .goalStrategiesHeader h2 {

        font-size: 32px;

    }


    .goalStrategyContent h3 {

        font-size: 18px;

    }


    .goalStrategyContent p {

        font-size: 9px;

    }

}

/* Strategies Section Ends Here */

/* Who Section Starts Here */

/* =========================================================
   GOAL-BASED INVESTMENT ALLOCATION
   WHO IS IT FOR?
========================================================= */

.goalAudience {

    position: relative;

    padding: 110px 0 95px;

    background: var(--section);

    overflow: hidden;

}


.goalAudience .container {

    width: min(1160px, 92%);

    margin: auto;

}


/* =========================================================
   HEADER
========================================================= */

.goalAudienceHeader {

    max-width: 780px;

    margin-bottom: 58px;

}


.goalAudienceEyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

}


.goalAudienceEyebrow span {

    width: 30px;

    height: 2px;

    background: #b88e21;

}


.goalAudienceEyebrow p {

    margin: 0;

    color: #b88e21;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.4px;

    text-transform: uppercase;

}


.goalAudienceHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.3vw, 58px);

    line-height: 1.06;

    letter-spacing: -1.8px;

    font-weight: 600;

}


.goalAudienceHeader h2 strong {

    display: block;

    color: #b88e21;

    font-weight: 600;

}


/* =========================================================
   GRID
========================================================= */

.goalAudienceGrid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    border-top: 2px solid rgba(184,142,33,.08);

    border-left: 2px solid rgba(184,142,33,.08);

}


/* =========================================================
   PROFILE
========================================================= */

.goalAudienceItem {

    position: relative;

    min-height: 265px;

    padding: 30px 34px;

    border-right: 2px solid rgba(184,142,33,.08);

    border-bottom: 2px solid rgba(184,142,33,.08);

    transition:

        background .25s ease,

        transform .25s ease;

}


.goalAudienceItem:hover {

    background: rgba(184,142,33,.015);

}


/* =========================================================
   TOP LINE
========================================================= */

.goalAudienceTop {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 30px;

}


.goalAudienceNumber {

    color: #b88e21;

    opacity: .48;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .5px;

}


.goalAudienceDot {

    width: 9px;

    height: 9px;

    border: 2px solid rgba(184,142,33,.25);

    border-radius: 50%;

    transition: .25s ease;

}


.goalAudienceItem:hover .goalAudienceDot {

    background: #b88e21;

    border-color: #b88e21;

    box-shadow:

        0 0 0 6px rgba(184,142,33,.045);

}


/* =========================================================
   CONTENT
========================================================= */

.goalAudienceContent {

    max-width: 480px;

}


.goalAudienceLabel {

    display: block;

    margin-bottom: 7px;

    color: #b88e21;

    opacity: .48;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.goalAudienceContent h3 {

    margin: 0;

    color: var(--primary);

    font-size: 24px;

    line-height: 1.2;

    letter-spacing: -.4px;

    font-weight: 600;

}


.goalAudienceContent p {

    max-width: 455px;

    margin: 11px 0 0;

    color: var(--text);

    opacity: .42;

    font-size: 11.5px;

    line-height: 1.75;

}


/* =========================================================
   SMALL ACCENT
========================================================= */

.goalAudienceItem::after {

    content: "";

    position: absolute;

    left: 34px;

    bottom: 0;

    width: 0;

    height: 2px;

    background: #b88e21;

    transition: width .3s ease;

}


.goalAudienceItem:hover::after {

    width: 42px;

}


/* =========================================================
   BOTTOM
========================================================= */

.goalAudienceBottom {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    margin-top: 50px;

}


.goalAudienceBottom > span {

    width: 28px;

    height: 2px;

    background: #b88e21;

    opacity: .45;

}


.goalAudienceBottom p {

    margin: 0;

    color: var(--text);

    opacity: .23;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;

}


.goalAudienceBottom strong {

    color: #b88e21;

    opacity: .75;

    font-weight: 700;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .goalAudience {

        padding: 85px 0;

    }


    .goalAudienceHeader h2 {

        font-size: 45px;

    }


    .goalAudienceItem {

        padding: 27px 26px;

        min-height: 250px;

    }


    .goalAudienceContent h3 {

        font-size: 21px;

    }


    .goalAudienceContent p {

        font-size: 10.5px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

    .goalAudience {

        padding: 70px 0;

    }


    .goalAudience .container {

        width: calc(100% - 30px);

    }


    .goalAudienceHeader {

        margin-bottom: 42px;

    }


    .goalAudienceHeader h2 {

        font-size: 36px;

        line-height: 1.08;

        letter-spacing: -1.1px;

    }


    .goalAudienceGrid {

        grid-template-columns: 1fr;

    }


    .goalAudienceItem {

        min-height: auto;

        padding: 25px 21px 28px;

    }


    .goalAudienceTop {

        margin-bottom: 22px;

    }


    .goalAudienceContent h3 {

        font-size: 19px;

    }


    .goalAudienceContent p {

        font-size: 10px;

        line-height: 1.72;

    }


    .goalAudienceItem::after {

        left: 21px;

    }


    .goalAudienceBottom {

        justify-content: flex-start;

        overflow: hidden;

        margin-top: 38px;

    }


    .goalAudienceBottom p {

        white-space: nowrap;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .goalAudienceHeader h2 {

        font-size: 32px;

    }


    .goalAudienceContent h3 {

        font-size: 18px;

    }


    .goalAudienceContent p {

        font-size: 9px;

    }

}

/* Who Section Ends Here */

/* CTA Section Starts Here */

/* =========================================================
   GOAL-BASED INVESTMENT ALLOCATION
   CLEAN FINAL CTA
========================================================= */

.goalCtaClean {

    position: relative;

    padding: 100px 0 55px;

    background: var(--section);

    overflow: hidden;

}


.goalCtaClean .container {

    width: min(1160px, 92%);

    margin: auto;

}


/* =========================================================
   CTA BOX
========================================================= */

.goalCtaCleanBox {

    position: relative;

    min-height: 470px;

    display: flex;

    align-items: center;

    padding: 75px 85px;

    border: 1px solid rgba(184,142,33,.10);

    background: var(--section);

}


/* =========================================================
   LEFT CONTENT
========================================================= */

.goalCtaCleanContent {

    max-width: 770px;

}


.goalCtaCleanEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 22px;

}


.goalCtaCleanEyebrow span {

    width: 30px;

    height: 2px;

    background: #b88e21;

}


.goalCtaCleanEyebrow p {

    margin: 0;

    color: #b88e21;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.goalCtaCleanContent h2 {

    max-width: 760px;

    margin: 0;

    color: var(--primary);

    font-size: clamp(42px, 4.6vw, 62px);

    line-height: 1.04;

    letter-spacing: -2px;

    font-weight: 600;

}


.goalCtaCleanContent h2 strong {

    display: block;

    color: #b88e21;

    font-weight: 600;

}


.goalCtaCleanDescription {

    max-width: 650px;

    margin: 25px 0 0;

    color: var(--text);

    opacity: .42;

    font-size: 12px;

    line-height: 1.85;

}


/* =========================================================
   ACTIONS
========================================================= */

.goalCtaCleanActions {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 34px;

    flex-wrap: wrap;

}


.goalCtaCleanPrimary {

    min-height: 54px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    padding: 0 25px;

    background: #b88e21;

    border: 1px solid #b88e21;

    color: #fff;

    text-decoration: none;

    font-size: 10px;

    font-weight: 700;

    transition: .25s ease;

}


.goalCtaCleanPrimary i {

    font-size: 9px;

    transition: transform .25s ease;

}


.goalCtaCleanPrimary:hover {

    background: transparent;

    color: #b88e21;

}


.goalCtaCleanPrimary:hover i {

    transform: translateX(4px);

}


.goalCtaCleanSecondary {

    min-height: 54px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0 25px;

    border: 1px solid rgba(184,142,33,.15);

    color: var(--primary);

    text-decoration: none;

    font-size: 10px;

    font-weight: 600;

    transition: .25s ease;

}


.goalCtaCleanSecondary:hover {

    color: #b88e21;

    border-color: #b88e21;

}


/* =========================================================
   VERY SIMPLE SIDE TYPOGRAPHY
========================================================= */

.goalCtaCleanSide {

    position: absolute;

    right: 65px;

    top: 50%;

    width: 110px;

    transform: translateY(-50%);

    opacity: .65;

}


.goalCtaCleanSideLine {

    display: block;

    width: 100%;

    height: 1px;

    background: rgba(184,142,33,.12);

}


.goalCtaCleanSide p {

    margin: 18px 0;

    color: var(--text);

    opacity: .18;

    font-size: 9px;

    font-weight: 700;

    line-height: 1.8;

    letter-spacing: 1.4px;

}


.goalCtaCleanSide p strong {

    color: #b88e21;

    opacity: .75;

    font-weight: 700;

}


.goalCtaCleanSideLine.bottom {

    width: 55%;

}


/* =========================================================
   BOTTOM
========================================================= */

.goalCtaCleanBottom {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    margin-top: 30px;

}


.goalCtaCleanBottom span {

    width: 27px;

    height: 2px;

    background: #b88e21;

    opacity: .45;

}


.goalCtaCleanBottom p {

    margin: 0;

    color: var(--text);

    opacity: .20;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.2px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .goalCtaClean {

        padding: 85px 0 50px;

    }


    .goalCtaCleanBox {

        padding: 60px;

    }


    .goalCtaCleanContent h2 {

        font-size: 47px;

    }


    .goalCtaCleanSide {

        right: 40px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

    .goalCtaClean {

        padding: 70px 0 45px;

    }


    .goalCtaClean .container {

        width: calc(100% - 30px);

    }


    .goalCtaCleanBox {

        min-height: auto;

        padding: 45px 23px;

    }


    .goalCtaCleanContent h2 {

        font-size: 36px;

        line-height: 1.08;

        letter-spacing: -1.2px;

    }


    .goalCtaCleanDescription {

        font-size: 11px;

        line-height: 1.8;

    }


    .goalCtaCleanActions {

        flex-direction: column;

        align-items: stretch;

    }


    .goalCtaCleanPrimary,
    .goalCtaCleanSecondary {

        width: 100%;

    }


    .goalCtaCleanSide {

        display: none;

    }


    .goalCtaCleanBottom {

        justify-content: flex-start;

        overflow: hidden;

    }


    .goalCtaCleanBottom p {

        white-space: nowrap;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .goalCtaCleanBox {

        padding: 38px 19px;

    }


    .goalCtaCleanContent h2 {

        font-size: 32px;

    }


    .goalCtaCleanDescription {

        font-size: 9px;

    }

}

/* CTA Section Ends Here */

/* Goal Based Investment Allocation Page Ends Here */


/* Investment Portfolio Page Starts Here */

/* Hero Section Starts Here */

/* =========================================================
   INVESTMENT PORTFOLIO HERO
   FULLY RESPONSIVE VERSION
========================================================= */

.investmentPortfolioHero {
    position: relative;
    min-height: 720px;
    display: flex;
    align-items: center;
    padding: 90px 0 70px;
    background: var(--section);
    overflow: hidden;
}

.investmentPortfolioHero .container {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.investmentPortfolioHeroInner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr);
    align-items: center;
    gap: clamp(40px, 7vw, 90px);
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.investmentPortfolioHeroContent {
    width: 100%;
    max-width: 680px;
    min-width: 0;
}

.investmentPortfolioHeroPrefix {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 22px;
}

.investmentPortfolioHeroPrefix span {
    width: 32px;
    height: 2px;
    flex: 0 0 32px;
    background: #c59a32;
}

.investmentPortfolioHeroPrefix p {
    margin: 0;
    color: #c59a32;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.investmentPortfolioHeroContent h1 {
    max-width: 680px;
    margin: 0;
    color: var(--primary);
    font-size: clamp(40px, 5vw, 68px);
    line-height: 1.04;
    letter-spacing: clamp(-1.5px, -.2vw, -2.5px);
    font-weight: 600;
}

.investmentPortfolioHeroContent h1 strong {
    display: block;
    color: #c59a32;
    font-weight: 600;
}

.investmentPortfolioHeroText {
    max-width: 625px;
    margin: 27px 0 0;
    color: var(--text);
    opacity: .68;
    font-size: clamp(11px, 1vw, 12.5px);
    line-height: 1.85;
}


/* =========================================================
   BUTTONS
========================================================= */

.investmentPortfolioHeroButtons {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 34px;
}

.investmentPortfolioHeroBtn,
.investmentPortfolioHeroBtnAlt {
    min-height: 54px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal;
}

.investmentPortfolioHeroBtn {
    gap: 13px;
    padding: 0 25px;
    background: #c59a32;
    border: 1px solid #c59a32;
    color: #fff;
    text-decoration: none;
    font-size: 10px;
    font-weight: 700;
    transition: .25s ease;
}

.investmentPortfolioHeroBtn i {
    font-size: 9px;
    flex: 0 0 auto;
    transition: transform .25s ease;
}

.investmentPortfolioHeroBtn:hover {
    background: transparent;
    color: #c59a32;
}

.investmentPortfolioHeroBtn:hover i {
    transform: translateX(4px);
}

.investmentPortfolioHeroBtnAlt {
    padding: 0 25px;
    border: 1px solid rgba(197,154,50,.30);
    color: var(--primary);
    text-decoration: none;
    font-size: 10px;
    font-weight: 600;
    transition: .25s ease;
}

.investmentPortfolioHeroBtnAlt:hover {
    color: #c59a32;
    border-color: #c59a32;
}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.investmentPortfolioHeroVisual {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 490px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* =========================================================
   BACKGROUND GRID
========================================================= */

.portfolioBackdropGrid {
    position: absolute;
    width: min(430px, 100%);
    aspect-ratio: 1;
    background-image:
        linear-gradient(
            rgba(197,154,50,.07) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(197,154,50,.07) 1px,
            transparent 1px
        );
    background-size: 43px 43px;
    opacity: .75;
    mask-image: radial-gradient(
        circle,
        black 20%,
        transparent 76%
    );
}


/* =========================================================
   COMPOSITION
========================================================= */

.portfolioComposition {
    position: relative;
    width: min(450px, 100%);
    aspect-ratio: 1 / 1;
}


/* =========================================================
   MAIN PANEL
========================================================= */

.portfolioPanel {
    position: absolute;
    left: 7.8%;
    top: 12.2%;
    width: 76.7%;
    height: 77.8%;
    padding: clamp(18px, 2vw, 25px);
    box-sizing: border-box;
    border: 1px solid rgba(197,154,50,.34);
    background: var(--section);
    box-shadow:
        18px 18px 0 rgba(197,154,50,.035),
        0 20px 60px rgba(0,0,0,.04);
}


/* =========================================================
   PANEL HEADER
========================================================= */

.portfolioPanelHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 17px;
    border-bottom: 1px solid rgba(197,154,50,.16);
}

.portfolioPanelTitle {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.portfolioLiveDot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #c59a32;
}

.portfolioPanelTitle p {
    margin: 0;
    color: var(--primary);
    opacity: .60;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.1px;
    white-space: nowrap;
}

.portfolioPanelNumber {
    color: var(--primary);
    opacity: .35;
    font-size: 9px;
    font-weight: 700;
    flex: 0 0 auto;
}


/* =========================================================
   PANEL CONTENT
========================================================= */

.portfolioPanelContent {
    position: relative;
    height: calc(100% - 83px);
    min-height: 180px;
}


/* =========================================================
   ASSET BLOCKS
========================================================= */

.portfolioAsset {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    padding: 9px;
    box-sizing: border-box;
    border: 1px solid rgba(197,154,50,.20);
    background: rgba(197,154,50,.025);
}

.assetNumber {
    color: #c59a32;
    font-size: 9px;
    font-weight: 700;
    flex: 0 0 auto;
}

.assetLine {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 20px;
    flex: 0 0 auto;
}

.assetLine i {
    display: block;
    width: 4px;
    background: rgba(197,154,50,.48);
}

.assetLine i:nth-child(1) {
    height: 8px;
}

.assetLine i:nth-child(2) {
    height: 14px;
}

.assetLine i:nth-child(3) {
    height: 19px;
}

.assetLine i:nth-child(4) {
    height: 12px;
}

.assetLabel {
    color: var(--primary);
    opacity: .55;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .7px;
    white-space: nowrap;
}


/* =========================================================
   ASSET POSITIONS
========================================================= */

.assetOne {
    left: 3%;
    top: 10%;
    width: 45%;
    height: 27%;
}

.assetTwo {
    right: 3%;
    top: 10%;
    width: 45%;
    height: 27%;
}

.assetThree {
    left: 3%;
    bottom: 10%;
    width: 45%;
    height: 27%;
}

.assetFour {
    right: 3%;
    bottom: 10%;
    width: 45%;
    height: 27%;
}


/* =========================================================
   CENTER
========================================================= */

.portfolioCenter {
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(55px, 7vw, 70px);
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid rgba(197,154,50,.45);
    background: var(--section);
    transform: translate(-50%, -50%);
    z-index: 5;
}

.portfolioCenter::before {
    content: "";
    position: absolute;
    width: 122%;
    height: 122%;
    border: 1px solid rgba(197,154,50,.13);
}

.portfolioCenter span {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: #c59a32;
}

.portfolioCenter p {
    margin: 0;
    color: var(--primary);
    opacity: .65;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .7px;
}


/* =========================================================
   PANEL FOOTER
========================================================= */

.portfolioPanelFooter {
    position: absolute;
    left: clamp(18px, 2vw, 25px);
    right: clamp(18px, 2vw, 25px);
    bottom: 17px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.portfolioPanelFooter > span {
    width: 23px;
    height: 2px;
    flex: 0 0 23px;
    background: #c59a32;
}

.portfolioPanelFooter p {
    margin: 0;
    color: var(--primary);
    opacity: .48;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
}

.portfolioPanelFooter strong {
    color: #c59a32;
    opacity: 1;
}


/* =========================================================
   SIDE CARD
========================================================= */

.portfolioSideCard {
    position: absolute;
    right: 0;
    top: 22%;
    width: 27%;
    min-height: 110px;
    padding: 17px;
    box-sizing: border-box;
    border: 1px solid rgba(197,154,50,.27);
    background: var(--section);
    box-shadow: 8px 8px 0 rgba(197,154,50,.025);
    z-index: 6;
}

.sideCardNumber {
    color: #c59a32;
    font-size: 9px;
    font-weight: 700;
}

.portfolioSideCard p {
    margin: 18px 0 0;
    color: var(--primary);
    opacity: .55;
    font-size: 9px;
    line-height: 1.7;
    letter-spacing: .8px;
}

.portfolioSideCard strong {
    color: #c59a32;
    opacity: 1;
}


/* =========================================================
   GOLD ACCENT
========================================================= */

.portfolioGoldAccent {
    position: absolute;
    right: 9%;
    bottom: 15%;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #c59a32;
    box-shadow:
        0 0 0 8px rgba(197,154,50,.07),
        0 0 0 17px rgba(197,154,50,.035);
}


/* =========================================================
   BOTTOM IDENTITY
========================================================= */

.investmentPortfolioHeroBottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin-top: 55px;
}

.investmentPortfolioHeroBottom > span {
    width: 28px;
    height: 2px;
    flex: 0 0 28px;
    background: #c59a32;
}

.investmentPortfolioHeroBottom p {
    margin: 0;
    color: var(--text);
    opacity: .42;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
}

.investmentPortfolioHeroBottom b {
    padding: 0 7px;
    color: #c59a32;
}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1100px) {

    .investmentPortfolioHero .container {
        width: min(100% - 40px, 1080px);
    }

    .investmentPortfolioHeroInner {
        grid-template-columns: minmax(0, 1fr) minmax(330px, .85fr);
        gap: 45px;
    }

    .investmentPortfolioHeroContent h1 {
        font-size: clamp(42px, 5.1vw, 58px);
    }

    .portfolioComposition {
        width: min(400px, 100%);
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 850px) {

    .investmentPortfolioHero {
        min-height: auto;
        padding: 75px 0 60px;
    }

    .investmentPortfolioHeroInner {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .investmentPortfolioHeroContent {
        max-width: 760px;
    }

    .investmentPortfolioHeroContent h1 {
        max-width: 720px;
        font-size: clamp(42px, 7vw, 58px);
    }

    .investmentPortfolioHeroText {
        max-width: 680px;
    }

    .investmentPortfolioHeroVisual {
        width: min(100%, 560px);
        min-height: 450px;
        margin: 0 auto;
    }

    .portfolioComposition {
        width: min(450px, 90vw);
    }

    .investmentPortfolioHeroBottom {
        margin-top: 35px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .investmentPortfolioHero {
        padding: 60px 0 45px;
    }

    .investmentPortfolioHero .container {
        width: calc(100% - 30px);
    }

    .investmentPortfolioHeroInner {
        gap: 35px;
    }

    .investmentPortfolioHeroPrefix {
        margin-bottom: 18px;
    }

    .investmentPortfolioHeroContent h1 {
        font-size: clamp(34px, 10vw, 45px);
        line-height: 1.07;
        letter-spacing: -1.3px;
    }

    .investmentPortfolioHeroText {
        margin-top: 21px;
        font-size: 11px;
        line-height: 1.78;
    }

    .investmentPortfolioHeroButtons {
        flex-direction: column;
        align-items: stretch;
        gap: 9px;
        margin-top: 27px;
    }

    .investmentPortfolioHeroBtn,
    .investmentPortfolioHeroBtnAlt {
        width: 100%;
        min-height: 52px;
        padding: 0 18px;
    }

    .investmentPortfolioHeroVisual {
        width: 100%;
        min-height: 370px;
    }

    .portfolioBackdropGrid {
        width: min(390px, 100%);
    }

    .portfolioComposition {
        width: min(390px, 100%);
    }

    .portfolioPanel {
        left: 5%;
        top: 10%;
        width: 78%;
        height: 80%;
        padding: 18px;
    }

    .portfolioPanelTitle p {
        font-size: 9px;
        letter-spacing: .7px;
    }

    .portfolioSideCard {
        right: 0;
        top: 22%;
        width: 29%;
        min-height: 92px;
        padding: 12px;
    }

    .portfolioSideCard p {
        margin-top: 12px;
        font-size: 9px;
    }

    .portfolioPanelContent {
        min-height: 160px;
    }

    .portfolioPanelFooter {
        left: 18px;
        right: 18px;
        bottom: 13px;
    }

    .portfolioPanelFooter p {
        font-size: 9px;
    }

    .investmentPortfolioHeroBottom {
        margin-top: 28px;
        justify-content: flex-start;
        overflow: hidden;
    }

    .investmentPortfolioHeroBottom p {
        white-space: nowrap;
        font-size: 9px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

    .investmentPortfolioHero {
        padding-top: 52px;
    }

    .investmentPortfolioHeroContent h1 {
        font-size: 34px;
    }

    .investmentPortfolioHeroText {
        font-size: 10px;
    }

    .investmentPortfolioHeroVisual {
        min-height: 325px;
    }

    .portfolioComposition {
        width: 350px;
        max-width: 100%;
    }

    .portfolioPanel {
        left: 3%;
        top: 9%;
        width: 78%;
        height: 82%;
        padding: 14px;
    }

    .portfolioPanelHeader {
        padding-bottom: 12px;
    }

    .portfolioPanelTitle {
        gap: 6px;
    }

    .portfolioPanelTitle p {
        font-size: 9px;
    }

    .portfolioPanelContent {
        height: calc(100% - 65px);
        min-height: 140px;
    }

    .portfolioAsset {
        padding: 6px;
        gap: 4px;
    }

    .assetNumber {
        font-size: 9px;
    }

    .assetLabel {
        font-size: 9px;
        letter-spacing: .3px;
    }

    .assetLine {
        gap: 2px;
        transform: scale(.8);
        transform-origin: center;
    }

    .assetOne,
    .assetTwo,
    .assetThree,
    .assetFour {
        height: 28%;
    }

    .portfolioCenter {
        width: 55px;
    }

    .portfolioCenter p {
        font-size: 9px;
    }

    .portfolioSideCard {
        width: 27%;
        min-height: 78px;
        padding: 9px;
    }

    .portfolioSideCard p {
        margin-top: 9px;
        font-size: 9px;
        line-height: 1.45;
    }

    .portfolioGoldAccent {
        width: 8px;
        height: 8px;
    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 360px) {

    .investmentPortfolioHero .container {
        width: calc(100% - 24px);
    }

    .investmentPortfolioHeroContent h1 {
        font-size: 31px;
    }

    .investmentPortfolioHeroText {
        font-size: 9px;
    }

    .investmentPortfolioHeroVisual {
        min-height: 290px;
    }

    .portfolioComposition {
        width: 315px;
    }

    .portfolioPanel {
        padding: 12px;
    }

    .portfolioPanelTitle p {
        font-size: 9px;
    }

    .portfolioSideCard {
        padding: 7px;
    }

    .portfolioSideCard p {
        font-size: 9px;
    }

    .investmentPortfolioHeroBottom p {
        font-size: 9px;
    }

}

/* Hero Section Ends Here */

/* Intro Section Starts Here */

/* =========================================================
   INVESTMENT PORTFOLIO INTRODUCTION
========================================================= */

.portfolioIntro {

    position: relative;

    padding: 110px 0;

    background: var(--section);

    overflow: hidden;

}


.portfolioIntro .container {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   MAIN GRID
========================================================= */

.portfolioIntroGrid {

    display: grid;

    grid-template-columns: minmax(0, 1.08fr) minmax(350px, .92fr);

    gap: clamp(60px, 8vw, 115px);

    align-items: start;

}


/* =========================================================
   LEFT CONTENT
========================================================= */

.portfolioIntroMain {

    max-width: 700px;

}


.portfolioIntroEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 22px;

}


.portfolioIntroEyebrow span {

    width: 31px;

    height: 2px;

    flex: 0 0 31px;

    background: #c59a32;

}


.portfolioIntroEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.portfolioIntroMain h2 {

    max-width: 700px;

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.5vw, 60px);

    line-height: 1.06;

    letter-spacing: -2px;

    font-weight: 600;

}


.portfolioIntroMain h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


.portfolioIntroText {

    max-width: 650px;

    margin-top: 31px;

}


.portfolioIntroText p {

    margin: 0 0 19px;

    color: var(--text);

    opacity: .68;

    font-size: 12px;

    line-height: 1.9;

}


.portfolioIntroText p:last-child {

    margin-bottom: 0;

}


/* =========================================================
   RIGHT HIGHLIGHTS
========================================================= */

.portfolioIntroHighlights {

    position: relative;

    padding-top: 8px;

}


/* =========================================================
   HIGHLIGHT
========================================================= */

.portfolioHighlight {

    position: relative;

    display: grid;

    grid-template-columns: 48px minmax(0, 1fr);

    gap: 20px;

    padding: 27px 0;

    border-top: 1px solid rgba(197,154,50,.28);

}


.portfolioHighlight:last-child {

    border-bottom: 1px solid rgba(197,154,50,.28);

}


/* =========================================================
   NUMBER
========================================================= */

.portfolioHighlightNumber {

    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(197,154,50,.42);

    color: #c59a32;

    font-size: 9px;

    font-weight: 700;

}


/* =========================================================
   HIGHLIGHT CONTENT
========================================================= */

.portfolioHighlightContent h3 {

    margin: 1px 0 9px;

    color: var(--primary);

    font-size: 17px;

    line-height: 1.3;

    font-weight: 600;

}


.portfolioHighlightContent p {

    max-width: 430px;

    margin: 0;

    color: var(--text);

    opacity: .66;

    font-size: 11px;

    line-height: 1.8;

}


/* =========================================================
   SUBTLE RIGHT ACCENT
========================================================= */

.portfolioIntroHighlights::after {

    content: "";

    position: absolute;

    right: -35px;

    top: 25px;

    width: 75px;

    height: 75px;

    border-top: 1px solid rgba(197,154,50,.22);

    border-right: 1px solid rgba(197,154,50,.22);

    pointer-events: none;

}


/* =========================================================
   BOTTOM
========================================================= */

.portfolioIntroBottom {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 11px;

    margin-top: 55px;

}


.portfolioIntroBottom > span {

    width: 27px;

    height: 2px;

    flex: 0 0 27px;

    background: #c59a32;

}


.portfolioIntroBottom p {

    margin: 0;

    color: var(--text);

    opacity: .43;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.2px;

}


.portfolioIntroBottom b {

    padding: 0 7px;

    color: #c59a32;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .portfolioIntroGrid {

        grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);

        gap: 55px;

    }

    .portfolioIntroMain h2 {

        font-size: clamp(39px, 5vw, 53px);

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 820px) {

    .portfolioIntro {

        padding: 85px 0;

    }

    .portfolioIntroGrid {

        grid-template-columns: 1fr;

        gap: 55px;

    }

    .portfolioIntroMain {

        max-width: 760px;

    }

    .portfolioIntroMain h2 {

        max-width: 720px;

        font-size: clamp(40px, 7vw, 55px);

    }

    .portfolioIntroText {

        max-width: 700px;

    }

    .portfolioIntroHighlights {

        max-width: 760px;

    }

    .portfolioIntroHighlights::after {

        right: 0;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .portfolioIntro {

        padding: 70px 0;

    }

    .portfolioIntro .container {

        width: calc(100% - 30px);

    }

    .portfolioIntroGrid {

        gap: 42px;

    }

    .portfolioIntroEyebrow {

        margin-bottom: 18px;

    }

    .portfolioIntroMain h2 {

        font-size: clamp(34px, 10vw, 43px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }

    .portfolioIntroText {

        margin-top: 24px;

    }

    .portfolioIntroText p {

        font-size: 11px;

        line-height: 1.82;

        margin-bottom: 17px;

    }

    .portfolioHighlight {

        grid-template-columns: 42px minmax(0, 1fr);

        gap: 15px;

        padding: 23px 0;

    }

    .portfolioHighlightNumber {

        width: 34px;

        height: 34px;

    }

    .portfolioHighlightContent h3 {

        font-size: 15px;

        line-height: 1.35;

    }

    .portfolioHighlightContent p {

        font-size: 10px;

        line-height: 1.75;

    }

    .portfolioIntroHighlights::after {

        width: 50px;

        height: 50px;

        right: 0;

        top: 15px;

    }

    .portfolioIntroBottom {

        margin-top: 38px;

        overflow: hidden;

    }

    .portfolioIntroBottom p {

        white-space: nowrap;

        font-size: 9px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .portfolioIntro {

        padding: 60px 0;

    }

    .portfolioIntroMain h2 {

        font-size: 33px;

    }

    .portfolioIntroText p {

        font-size: 9px;

    }

    .portfolioHighlight {

        grid-template-columns: 38px minmax(0, 1fr);

        gap: 13px;

    }

    .portfolioHighlightNumber {

        width: 32px;

        height: 32px;

    }

    .portfolioHighlightContent h3 {

        font-size: 14px;

    }

    .portfolioHighlightContent p {

        font-size: 9px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .portfolioIntro .container {

        width: calc(100% - 24px);

    }

    .portfolioIntroMain h2 {

        font-size: 31px;

    }

    .portfolioHighlight {

        grid-template-columns: 34px minmax(0, 1fr);

        gap: 10px;

    }

    .portfolioHighlightNumber {

        width: 30px;

        height: 30px;

    }

}

/* Intro Section Ends Here */

/* Why Section Starts Here */

/* =========================================================
   WHY INVESTMENT PORTFOLIO MANAGEMENT MATTERS
========================================================= */

.portfolioWhy {

    position: relative;

    padding: 115px 0 100px;

    background: var(--section);

    overflow: hidden;

}


.portfolioWhy .container {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   HEADER
========================================================= */

.portfolioWhyHeader {

    max-width: 850px;

    margin-bottom: 70px;

}


.portfolioWhyEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 22px;

}


.portfolioWhyEyebrow span {

    width: 32px;

    height: 2px;

    flex: 0 0 32px;

    background: #c59a32;

}


.portfolioWhyEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.portfolioWhyHeader h2 {

    max-width: 850px;

    margin: 0;

    color: var(--primary);

    font-size: clamp(42px, 5vw, 64px);

    line-height: 1.05;

    letter-spacing: -2.2px;

    font-weight: 600;

}


.portfolioWhyHeader h2 strong {

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   MAIN EDITORIAL LAYOUT
========================================================= */

.portfolioWhyLayout {

    display: grid;

    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);

    column-gap: clamp(35px, 6vw, 80px);

    align-items: stretch;

}


/* =========================================================
   COLUMNS
========================================================= */

.portfolioWhyColumn {

    display: flex;

    flex-direction: column;

}


/* =========================================================
   ITEM
========================================================= */

.portfolioWhyItem {

    display: grid;

    grid-template-columns: 48px minmax(0, 1fr);

    gap: 20px;

    min-height: 170px;

    padding: 27px 0;

    border-top: 1px solid rgba(197,154,50,.28);

}


.portfolioWhyColumn .portfolioWhyItem:last-child {

    border-bottom: 1px solid rgba(197,154,50,.28);

}


/* =========================================================
   NUMBER
========================================================= */

.portfolioWhyNumber {

    width: 37px;

    height: 37px;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    border: 1px solid rgba(197,154,50,.45);

    color: #c59a32;

    font-size: 9px;

    font-weight: 700;

}


/* =========================================================
   ITEM CONTENT
========================================================= */

.portfolioWhyContent {

    min-width: 0;

}


.portfolioWhyContent h3 {

    margin: 0 0 10px;

    color: var(--primary);

    font-size: 18px;

    line-height: 1.3;

    font-weight: 600;

}


.portfolioWhyContent p {

    max-width: 430px;

    margin: 0;

    color: var(--text);

    opacity: .68;

    font-size: 11px;

    line-height: 1.85;

}


/* =========================================================
   CENTER DIVIDER
========================================================= */

.portfolioWhyDivider {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}


.portfolioWhyDividerLine {

    width: 1px;

    height: 82%;

    background: rgba(197,154,50,.24);

}


.portfolioWhyDivider span {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #c59a32;

    box-shadow:

        0 0 0 6px rgba(197,154,50,.07);

    flex: 0 0 7px;

}


.portfolioWhyDivider span:first-child {

    margin-bottom: -1px;

}


.portfolioWhyDivider span:last-child {

    margin-top: -1px;

}


/* =========================================================
   BOTTOM STATEMENT
========================================================= */

.portfolioWhyBottom {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-top: 65px;

}


.portfolioWhyBottomLine {

    width: 28px;

    height: 2px;

    flex: 0 0 28px;

    background: #c59a32;

}


.portfolioWhyBottom p {

    margin: 0;

    color: var(--text);

    opacity: .45;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.3px;

    text-align: center;

}


.portfolioWhyBottom span {

    padding: 0 7px;

    color: #c59a32;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .portfolioWhy {

        padding: 95px 0 85px;

    }

    .portfolioWhyHeader {

        margin-bottom: 55px;

    }

    .portfolioWhyLayout {

        column-gap: 40px;

    }

    .portfolioWhyHeader h2 {

        font-size: clamp(40px, 5.5vw, 56px);

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 820px) {

    .portfolioWhy {

        padding: 80px 0;

    }

    .portfolioWhyLayout {

        grid-template-columns: 1fr;

        gap: 0;

    }

    .portfolioWhyDivider {

        display: none;

    }

    .portfolioWhyColumn {

        width: 100%;

    }

    .portfolioWhyColumn:first-child {

        border-bottom: 0;

    }

    .portfolioWhyHeader {

        margin-bottom: 45px;

    }

    .portfolioWhyHeader h2 {

        font-size: clamp(39px, 7vw, 54px);

    }

    .portfolioWhyItem {

        min-height: auto;

        padding: 25px 0;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .portfolioWhy {

        padding: 70px 0;

    }

    .portfolioWhy .container {

        width: calc(100% - 30px);

    }

    .portfolioWhyHeader {

        margin-bottom: 35px;

    }

    .portfolioWhyEyebrow {

        margin-bottom: 18px;

    }

    .portfolioWhyHeader h2 {

        font-size: clamp(34px, 10vw, 43px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }

    .portfolioWhyItem {

        grid-template-columns: 40px minmax(0, 1fr);

        gap: 15px;

        padding: 22px 0;

    }

    .portfolioWhyNumber {

        width: 34px;

        height: 34px;

    }

    .portfolioWhyContent h3 {

        margin-bottom: 8px;

        font-size: 15px;

    }

    .portfolioWhyContent p {

        font-size: 10px;

        line-height: 1.78;

    }

    .portfolioWhyBottom {

        justify-content: flex-start;

        margin-top: 38px;

        overflow: hidden;

    }

    .portfolioWhyBottom p {

        white-space: nowrap;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .portfolioWhy {

        padding: 60px 0;

    }

    .portfolioWhy .container {

        width: calc(100% - 26px);

    }

    .portfolioWhyHeader h2 {

        font-size: 33px;

    }

    .portfolioWhyItem {

        grid-template-columns: 36px minmax(0, 1fr);

        gap: 12px;

    }

    .portfolioWhyNumber {

        width: 31px;

        height: 31px;

    }

    .portfolioWhyContent h3 {

        font-size: 14px;

    }

    .portfolioWhyContent p {

        font-size: 9px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .portfolioWhy .container {

        width: calc(100% - 22px);

    }

    .portfolioWhyHeader h2 {

        font-size: 30px;

    }

    .portfolioWhyContent p {

        font-size: 9px;

    }

}

/* Why Section Ends Here */

/* Approach Section Starts Here */

/* =========================================================
   INVESTMENT PORTFOLIO APPROACH
========================================================= */

.portfolioApproach {

    position: relative;

    padding: 115px 0 105px;

    background: var(--section);

    overflow: hidden;

}


.portfolioApproach .container {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   HEADER
========================================================= */

.portfolioApproachHeader {

    max-width: 820px;

    margin-bottom: 65px;

}


.portfolioApproachEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 22px;

}


.portfolioApproachEyebrow span {

    width: 32px;

    height: 2px;

    flex: 0 0 32px;

    background: #c59a32;

}


.portfolioApproachEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.portfolioApproachHeader h2 {

    max-width: 800px;

    margin: 0;

    color: var(--primary);

    font-size: clamp(42px, 5vw, 63px);

    line-height: 1.05;

    letter-spacing: -2.2px;

    font-weight: 600;

}


.portfolioApproachHeader h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


.portfolioApproachIntro {

    max-width: 690px;

    margin: 25px 0 0;

    color: var(--text);

    opacity: .67;

    font-size: 12px;

    line-height: 1.85;

}


/* =========================================================
   SIX STAGES
========================================================= */

.portfolioApproachStages {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    border-top: 1px solid rgba(197,154,50,.28);

    border-left: 1px solid rgba(197,154,50,.28);

}


/* =========================================================
   STAGE
========================================================= */

.portfolioApproachStage {

    min-height: 235px;

    padding: 28px 30px 30px;

    box-sizing: border-box;

    border-right: 1px solid rgba(197,154,50,.28);

    border-bottom: 1px solid rgba(197,154,50,.28);

    transition:

        background .25s ease,

        transform .25s ease;

}


.portfolioApproachStage:hover {

    background: rgba(197,154,50,.025);

}


/* =========================================================
   STAGE TOP
========================================================= */

.portfolioApproachStageTop {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 29px;

}


.portfolioApproachStageTop span {

    color: #c59a32;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;

}


.portfolioApproachStageTop i {

    display: block;

    width: 28px;

    height: 1px;

    background: rgba(197,154,50,.48);

}


/* =========================================================
   STAGE CONTENT
========================================================= */

.portfolioApproachStage h3 {

    margin: 0 0 11px;

    color: var(--primary);

    font-size: 19px;

    line-height: 1.3;

    font-weight: 600;

}


.portfolioApproachStage p {

    max-width: 310px;

    margin: 0;

    color: var(--text);

    opacity: .67;

    font-size: 11px;

    line-height: 1.82;

}


/* =========================================================
   MINIMAL PORTFOLIO COMPOSITION
========================================================= */

.portfolioCompositionMinimal {

    position: relative;

    width: min(720px, 100%);

    min-height: 270px;

    margin: 85px auto 0;

    padding: 28px 35px;

    box-sizing: border-box;

    border-top: 1px solid rgba(197,154,50,.32);

    border-bottom: 1px solid rgba(197,154,50,.32);

}


/* =========================================================
   COMPOSITION TITLE
========================================================= */

.portfolioCompositionTitle {

    display: flex;

    align-items: center;

    gap: 10px;

}


.portfolioCompositionTitle span {

    width: 25px;

    height: 2px;

    background: #c59a32;

}


.portfolioCompositionTitle p {

    margin: 0;

    color: var(--primary);

    opacity: .55;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.3px;

}


/* =========================================================
   STRUCTURE
========================================================= */

.portfolioCompositionStructure {

    position: relative;

    height: 145px;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    align-items: end;

    gap: 25px;

    margin-top: 20px;

}


/* =========================================================
   COMPOSITION ITEMS
========================================================= */

.portfolioCompositionItem {

    position: relative;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(197,154,50,.32);

    background: var(--section);

}


.portfolioCompositionItem span {

    color: var(--primary);

    opacity: .65;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;

}


.portfolioCompositionMain {

    position: absolute;

    left: 50%;

    top: 0;

    width: 145px;

    transform: translateX(-50%);

    border-color: rgba(197,154,50,.55);

}


.portfolioCompositionMain span {

    color: #c59a32;

    opacity: 1;

}


/* =========================================================
   CONNECTING LINES
========================================================= */

.portfolioCompositionConnector {

    position: absolute;

    top: 52px;

    width: 1px;

    height: 50px;

    background: rgba(197,154,50,.38);

}


.connectorOne {

    left: 23%;

    transform: rotate(31deg);

    transform-origin: top center;

}


.connectorTwo {

    left: 50%;

}


.connectorThree {

    right: 23%;

    transform: rotate(-31deg);

    transform-origin: top center;

}


/* =========================================================
   FOOTER
========================================================= */

.portfolioCompositionFooter {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    margin-top: 8px;

}


.portfolioCompositionFooter span {

    width: 22px;

    height: 2px;

    background: #c59a32;

}


.portfolioCompositionFooter p {

    margin: 0;

    color: var(--primary);

    opacity: .52;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.2px;

}


/* =========================================================
   BOTTOM PROCESS LINE
========================================================= */

.portfolioApproachBottom {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    margin-top: 55px;

}


.portfolioApproachBottom > span {

    width: 28px;

    height: 2px;

    flex: 0 0 28px;

    background: #c59a32;

}


.portfolioApproachBottom p {

    margin: 0;

    color: var(--text);

    opacity: .46;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;

    text-align: center;

}


.portfolioApproachBottom b {

    padding: 0 6px;

    color: #c59a32;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .portfolioApproach {

        padding: 95px 0 85px;

    }


    .portfolioApproachStages {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }


    .portfolioApproachHeader h2 {

        font-size: clamp(40px, 5.5vw, 56px);

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 760px) {

    .portfolioApproach {

        padding: 80px 0;

    }


    .portfolioApproach .container {

        width: calc(100% - 30px);

    }


    .portfolioApproachHeader {

        margin-bottom: 45px;

    }


    .portfolioApproachHeader h2 {

        font-size: clamp(38px, 8vw, 52px);

    }


    .portfolioApproachIntro {

        font-size: 11px;

        line-height: 1.8;

    }


    .portfolioApproachStages {

        grid-template-columns: 1fr;

    }


    .portfolioApproachStage {

        min-height: auto;

        padding: 25px 22px 28px;

    }


    .portfolioApproachStageTop {

        margin-bottom: 22px;

    }


    .portfolioApproachStage h3 {

        font-size: 17px;

    }


    .portfolioApproachStage p {

        max-width: 600px;

        font-size: 10px;

    }


    .portfolioCompositionMinimal {

        margin-top: 55px;

        padding: 25px 20px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .portfolioApproach {

        padding: 70px 0;

    }


    .portfolioApproachHeader h2 {

        font-size: clamp(34px, 10vw, 44px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }


    .portfolioApproachIntro {

        margin-top: 21px;

        font-size: 10px;

    }


    .portfolioApproachStage {

        padding: 23px 18px 25px;

    }


    .portfolioApproachStage h3 {

        font-size: 16px;

    }


    .portfolioApproachStage p {

        font-size: 10px;

        line-height: 1.75;

    }


    .portfolioCompositionMinimal {

        min-height: 245px;

        margin-top: 45px;

        padding: 23px 14px;

    }


    .portfolioCompositionStructure {

        gap: 8px;

    }


    .portfolioCompositionMain {

        width: 125px;

    }


    .portfolioCompositionItem {

        height: 46px;

    }


    .portfolioCompositionItem span {

        font-size: 9px;

        letter-spacing: .6px;

    }


    .connectorOne {

        left: 22%;

    }


    .connectorThree {

        right: 22%;

    }


    .portfolioApproachBottom {

        justify-content: flex-start;

        overflow: hidden;

        margin-top: 38px;

    }


    .portfolioApproachBottom p {

        white-space: nowrap;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .portfolioApproach {

        padding: 60px 0;

    }


    .portfolioApproach .container {

        width: calc(100% - 26px);

    }


    .portfolioApproachHeader h2 {

        font-size: 33px;

    }


    .portfolioApproachIntro {

        font-size: 9px;

    }


    .portfolioApproachStage {

        padding: 21px 15px 23px;

    }


    .portfolioApproachStage h3 {

        font-size: 15px;

    }


    .portfolioApproachStage p {

        font-size: 9px;

    }


    .portfolioCompositionMinimal {

        min-height: 220px;

        padding: 20px 10px;

    }


    .portfolioCompositionMain {

        width: 110px;

    }


    .portfolioCompositionItem {

        height: 42px;

    }


    .portfolioCompositionItem span {

        font-size: 9px;

    }


    .portfolioCompositionStructure {

        margin-top: 16px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .portfolioApproach .container {

        width: calc(100% - 22px);

    }


    .portfolioApproachHeader h2 {

        font-size: 30px;

    }


    .portfolioApproachStage p {

        font-size: 9px;

    }


    .portfolioCompositionMinimal {

        min-height: 205px;

    }


    .portfolioCompositionItem span {

        font-size: 9px;

        letter-spacing: .2px;

    }

}

/* Approach Section Ends Here */

/* Startegies Section Starts Here */

/* =========================================================
   INVESTMENT PORTFOLIO STRATEGIES
========================================================= */

.portfolioStrategies {

    position: relative;

    padding: 115px 0 100px;

    background: var(--section);

    overflow: hidden;

}


.portfolioStrategies .container {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   HEADER
========================================================= */

.portfolioStrategiesHeader {

    max-width: 850px;

    margin-bottom: 65px;

}


.portfolioStrategiesEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 22px;

}


.portfolioStrategiesEyebrow span {

    width: 32px;

    height: 2px;

    flex: 0 0 32px;

    background: #c59a32;

}


.portfolioStrategiesEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.portfolioStrategiesHeader h2 {

    max-width: 850px;

    margin: 0;

    color: var(--primary);

    font-size: clamp(42px, 5vw, 63px);

    line-height: 1.05;

    letter-spacing: -2.2px;

    font-weight: 600;

}


.portfolioStrategiesHeader h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   STRATEGY LIST
========================================================= */

.portfolioStrategiesList {

    border-top: 1px solid rgba(197,154,50,.32);

}


/* =========================================================
   STRATEGY ROW
========================================================= */

.portfolioStrategy {

    display: grid;

    grid-template-columns: 70px minmax(260px, .8fr) minmax(320px, 1fr);

    align-items: center;

    gap: 35px;

    min-height: 155px;

    padding: 28px 0;

    box-sizing: border-box;

    border-bottom: 1px solid rgba(197,154,50,.32);

    transition:

        padding .25s ease,

        background .25s ease;

}


.portfolioStrategy:hover {

    padding-left: 16px;

    padding-right: 16px;

    background: rgba(197,154,50,.025);

}


/* =========================================================
   NUMBER
========================================================= */

.portfolioStrategyNumber {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    border: 1px solid rgba(197,154,50,.46);

    color: #c59a32;

    font-size: 9px;

    font-weight: 700;

}


/* =========================================================
   TITLE
========================================================= */

.portfolioStrategyTitle h3 {

    margin: 0;

    color: var(--primary);

    font-size: 21px;

    line-height: 1.3;

    font-weight: 600;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.portfolioStrategyText {

    border-left: 1px solid rgba(197,154,50,.28);

    padding-left: 30px;

}


.portfolioStrategyText p {

    max-width: 480px;

    margin: 0;

    color: var(--text);

    opacity: .68;

    font-size: 11px;

    line-height: 1.85;

}


/* =========================================================
   BOTTOM
========================================================= */

.portfolioStrategiesBottom {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    margin-top: 55px;

}


.portfolioStrategiesBottom > span {

    width: 28px;

    height: 2px;

    flex: 0 0 28px;

    background: #c59a32;

}


.portfolioStrategiesBottom p {

    margin: 0;

    color: var(--text);

    opacity: .44;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.2px;

}


.portfolioStrategiesBottom b {

    padding: 0 7px;

    color: #c59a32;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .portfolioStrategies {

        padding: 90px 0 80px;

    }


    .portfolioStrategy {

        grid-template-columns: 58px minmax(220px, .8fr) minmax(280px, 1fr);

        gap: 25px;

    }


    .portfolioStrategyTitle h3 {

        font-size: 18px;

    }


    .portfolioStrategyText {

        padding-left: 22px;

    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 760px) {

    .portfolioStrategies {

        padding: 80px 0;

    }


    .portfolioStrategies .container {

        width: calc(100% - 30px);

    }


    .portfolioStrategiesHeader {

        margin-bottom: 45px;

    }


    .portfolioStrategiesHeader h2 {

        font-size: clamp(38px, 8vw, 52px);

    }


    .portfolioStrategy {

        grid-template-columns: 48px minmax(0, 1fr);

        gap: 20px;

        padding: 27px 0;

    }


    .portfolioStrategy:hover {

        padding-left: 8px;

        padding-right: 8px;

    }


    .portfolioStrategyNumber {

        width: 38px;

        height: 38px;

    }


    .portfolioStrategyTitle {

        align-self: center;

    }


    .portfolioStrategyTitle h3 {

        font-size: 18px;

    }


    .portfolioStrategyText {

        grid-column: 2;

        padding-left: 0;

        padding-top: 0;

        border-left: 0;

    }


    .portfolioStrategyText p {

        max-width: 650px;

        font-size: 10px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .portfolioStrategies {

        padding: 70px 0;

    }


    .portfolioStrategiesHeader h2 {

        font-size: clamp(34px, 10vw, 43px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }


    .portfolioStrategy {

        grid-template-columns: 39px minmax(0, 1fr);

        gap: 14px;

        padding: 24px 0;

    }


    .portfolioStrategyNumber {

        width: 33px;

        height: 33px;

    }


    .portfolioStrategyTitle h3 {

        font-size: 15px;

        line-height: 1.35;

    }


    .portfolioStrategyText p {

        font-size: 10px;

        line-height: 1.75;

    }


    .portfolioStrategyText {

        padding-top: 3px;

    }


    .portfolioStrategiesBottom {

        justify-content: flex-start;

        margin-top: 38px;

        overflow: hidden;

    }


    .portfolioStrategiesBottom p {

        white-space: nowrap;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .portfolioStrategies {

        padding: 60px 0;

    }


    .portfolioStrategies .container {

        width: calc(100% - 26px);

    }


    .portfolioStrategiesHeader h2 {

        font-size: 33px;

    }


    .portfolioStrategy {

        grid-template-columns: 35px minmax(0, 1fr);

        gap: 11px;

    }


    .portfolioStrategyNumber {

        width: 30px;

        height: 30px;

    }


    .portfolioStrategyTitle h3 {

        font-size: 14px;

    }


    .portfolioStrategyText p {

        font-size: 9px;

    }

}

/* Startegies Section Ends Here */

/* Who Section Starts Here */

/* =========================================================
   WHO IS INVESTMENT PORTFOLIO MANAGEMENT FOR
========================================================= */

.portfolioWho {

    position: relative;

    padding: 115px 0 100px;

    background: var(--section);

    overflow: hidden;

}


.portfolioWho .container {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   HEADER
========================================================= */

.portfolioWhoHeader {

    max-width: 850px;

    margin-bottom: 65px;

}


.portfolioWhoEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 22px;

}


.portfolioWhoEyebrow span {

    width: 32px;

    height: 2px;

    flex: 0 0 32px;

    background: #c59a32;

}


.portfolioWhoEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.portfolioWhoHeader h2 {

    max-width: 850px;

    margin: 0;

    color: var(--primary);

    font-size: clamp(42px, 5vw, 63px);

    line-height: 1.05;

    letter-spacing: -2.2px;

    font-weight: 600;

}


.portfolioWhoHeader h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   PROFILE LIST
========================================================= */

.portfolioWhoList {

    border-top: 1px solid rgba(197,154,50,.32);

}


/* =========================================================
   PROFILE ROW
========================================================= */

.portfolioWhoProfile {

    display: grid;

    grid-template-columns: 70px minmax(0, 1fr) 55px;

    align-items: center;

    gap: 30px;

    min-height: 150px;

    padding: 27px 0;

    box-sizing: border-box;

    border-bottom: 1px solid rgba(197,154,50,.32);

    transition:

        padding .25s ease,

        background .25s ease;

}


.portfolioWhoProfile:hover {

    padding-left: 16px;

    padding-right: 16px;

    background: rgba(197,154,50,.025);

}


/* =========================================================
   NUMBER
========================================================= */

.portfolioWhoNumber {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    border: 1px solid rgba(197,154,50,.46);

    color: #c59a32;

    font-size: 9px;

    font-weight: 700;

}


/* =========================================================
   CONTENT
========================================================= */

.portfolioWhoProfileContent {

    min-width: 0;

}


.portfolioWhoProfileContent h3 {

    margin: 0 0 9px;

    color: var(--primary);

    font-size: 21px;

    line-height: 1.3;

    font-weight: 600;

}


.portfolioWhoProfileContent p {

    max-width: 690px;

    margin: 0;

    color: var(--text);

    opacity: .67;

    font-size: 11px;

    line-height: 1.8;

}


/* =========================================================
   RIGHT MARK
========================================================= */

.portfolioWhoProfileMark {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(197,154,50,.18);

}


.portfolioWhoProfileMark span {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #c59a32;

    box-shadow:

        0 0 0 7px rgba(197,154,50,.07);

}


/* =========================================================
   BOTTOM
========================================================= */

.portfolioWhoBottom {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    margin-top: 55px;

}


.portfolioWhoBottom > span {

    width: 28px;

    height: 2px;

    flex: 0 0 28px;

    background: #c59a32;

}


.portfolioWhoBottom p {

    margin: 0;

    color: var(--text);

    opacity: .44;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.2px;

    text-align: center;

}


.portfolioWhoBottom b {

    padding: 0 7px;

    color: #c59a32;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .portfolioWho {

        padding: 95px 0 85px;

    }

    .portfolioWhoHeader h2 {

        font-size: clamp(40px, 5.5vw, 56px);

    }

    .portfolioWhoProfile {

        grid-template-columns: 60px minmax(0, 1fr) 45px;

        gap: 24px;

    }

    .portfolioWhoProfileMark {

        width: 45px;

        height: 45px;

    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 760px) {

    .portfolioWho {

        padding: 80px 0;

    }

    .portfolioWho .container {

        width: calc(100% - 30px);

    }

    .portfolioWhoHeader {

        margin-bottom: 45px;

    }

    .portfolioWhoHeader h2 {

        font-size: clamp(38px, 8vw, 52px);

    }

    .portfolioWhoProfile {

        grid-template-columns: 48px minmax(0, 1fr);

        gap: 20px;

        min-height: auto;

        padding: 26px 0;

    }

    .portfolioWhoProfile:hover {

        padding-left: 8px;

        padding-right: 8px;

    }

    .portfolioWhoNumber {

        width: 38px;

        height: 38px;

    }

    .portfolioWhoProfileContent h3 {

        font-size: 18px;

    }

    .portfolioWhoProfileContent p {

        max-width: 650px;

        font-size: 10px;

        line-height: 1.78;

    }

    .portfolioWhoProfileMark {

        display: none;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .portfolioWho {

        padding: 70px 0;

    }

    .portfolioWhoHeader h2 {

        font-size: clamp(34px, 10vw, 43px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }

    .portfolioWhoProfile {

        grid-template-columns: 39px minmax(0, 1fr);

        gap: 14px;

        padding: 23px 0;

    }

    .portfolioWhoNumber {

        width: 33px;

        height: 33px;

    }

    .portfolioWhoProfileContent h3 {

        margin-bottom: 8px;

        font-size: 15px;

        line-height: 1.35;

    }

    .portfolioWhoProfileContent p {

        font-size: 10px;

        line-height: 1.75;

    }

    .portfolioWhoBottom {

        justify-content: flex-start;

        margin-top: 38px;

        overflow: hidden;

    }

    .portfolioWhoBottom p {

        white-space: nowrap;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .portfolioWho {

        padding: 60px 0;

    }

    .portfolioWho .container {

        width: calc(100% - 26px);

    }

    .portfolioWhoHeader h2 {

        font-size: 33px;

    }

    .portfolioWhoProfile {

        grid-template-columns: 35px minmax(0, 1fr);

        gap: 11px;

        padding: 21px 0;

    }

    .portfolioWhoNumber {

        width: 30px;

        height: 30px;

    }

    .portfolioWhoProfileContent h3 {

        font-size: 14px;

    }

    .portfolioWhoProfileContent p {

        font-size: 9px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .portfolioWho .container {

        width: calc(100% - 22px);

    }

    .portfolioWhoHeader h2 {

        font-size: 30px;

    }

    .portfolioWhoProfileContent p {

        font-size: 9px;

    }

}

/* Who Section Ends Here */

/* CTA Section Starts Here */

/* =========================================================
   INVESTMENT PORTFOLIO FINAL CTA
========================================================= */

.portfolioFinalCta {

    position: relative;

    padding: 120px 0 90px;

    background: var(--section);

    overflow: hidden;

}


.portfolioFinalCta .container {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   MAIN CTA LAYOUT
========================================================= */

.portfolioFinalCtaLayout {

    display: grid;

    grid-template-columns: 250px 1px minmax(0, 1fr);

    column-gap: clamp(45px, 7vw, 90px);

    align-items: stretch;

}


/* =========================================================
   LEFT EDITORIAL
========================================================= */

.portfolioFinalCtaEditorial {

    position: relative;

    min-height: 390px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}


.portfolioFinalCtaLabel {

    display: flex;

    align-items: center;

    gap: 11px;

}


.portfolioFinalCtaLabel span {

    width: 32px;

    height: 2px;

    flex: 0 0 32px;

    background: #c59a32;

}


.portfolioFinalCtaLabel p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


/* =========================================================
   TYPOGRAPHIC DETAIL
========================================================= */

.portfolioFinalCtaDetail {

    display: flex;

    flex-direction: column;

    gap: 13px;

}


.portfolioFinalCtaDetail span {

    color: var(--primary);

    opacity: .28;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;

}


.portfolioFinalCtaDetail span:nth-child(2) {

    color: #c59a32;

    opacity: .75;

}


/* =========================================================
   VERTICAL DIVIDER
========================================================= */

.portfolioFinalCtaDivider {

    width: 1px;

    min-height: 390px;

    background: rgba(197,154,50,.30);

}


/* =========================================================
   RIGHT CONTENT
========================================================= */

.portfolioFinalCtaContent {

    max-width: 760px;

    align-self: center;

}


.portfolioFinalCtaContent h2 {

    max-width: 760px;

    margin: 0;

    color: var(--primary);

    font-size: clamp(42px, 5vw, 64px);

    line-height: 1.05;

    letter-spacing: -2.3px;

    font-weight: 600;

}


.portfolioFinalCtaContent h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


.portfolioFinalCtaContent > p {

    max-width: 680px;

    margin: 28px 0 0;

    color: var(--text);

    opacity: .68;

    font-size: 12px;

    line-height: 1.9;

}


/* =========================================================
   BUTTONS
========================================================= */

.portfolioFinalCtaButtons {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;

    margin-top: 34px;

}


.portfolioFinalCtaPrimary,
.portfolioFinalCtaSecondary {

    min-height: 54px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    text-decoration: none;

    transition:

        background .25s ease,

        border-color .25s ease,

        color .25s ease,

        transform .25s ease;

}


.portfolioFinalCtaPrimary {

    gap: 13px;

    padding: 0 25px;

    background: #c59a32;

    border: 1px solid #c59a32;

    color: #fff;

    font-size: 10px;

    font-weight: 700;

}


.portfolioFinalCtaPrimary i {

    font-size: 9px;

    transition: transform .25s ease;

}


.portfolioFinalCtaPrimary:hover {

    background: transparent;

    color: #c59a32;

}


.portfolioFinalCtaPrimary:hover i {

    transform: translateX(4px);

}


.portfolioFinalCtaSecondary {

    padding: 0 25px;

    border: 1px solid rgba(197,154,50,.32);

    color: var(--primary);

    font-size: 10px;

    font-weight: 600;

}


.portfolioFinalCtaSecondary:hover {

    color: #c59a32;

    border-color: #c59a32;

}


/* =========================================================
   BOTTOM LINE
========================================================= */

.portfolioFinalCtaBottom {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    margin-top: 75px;

}


.portfolioFinalCtaBottom > span {

    width: 28px;

    height: 2px;

    flex: 0 0 28px;

    background: #c59a32;

}


.portfolioFinalCtaBottom p {

    margin: 0;

    color: var(--text);

    opacity: .45;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.1px;

    text-align: center;

}


.portfolioFinalCtaBottom b {

    padding: 0 6px;

    color: #c59a32;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .portfolioFinalCta {

        padding: 100px 0 80px;

    }


    .portfolioFinalCtaLayout {

        grid-template-columns: 200px 1px minmax(0, 1fr);

        column-gap: 45px;

    }


    .portfolioFinalCtaContent h2 {

        font-size: clamp(40px, 5.5vw, 56px);

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 780px) {

    .portfolioFinalCta {

        padding: 85px 0 70px;

    }


    .portfolioFinalCta .container {

        width: calc(100% - 30px);

    }


    .portfolioFinalCtaLayout {

        grid-template-columns: 1fr;

        gap: 35px;

    }


    .portfolioFinalCtaEditorial {

        min-height: auto;

        display: block;

    }


    .portfolioFinalCtaDetail {

        display: flex;

        flex-direction: row;

        flex-wrap: wrap;

        gap: 10px 25px;

        margin-top: 25px;

    }


    .portfolioFinalCtaDivider {

        display: none;

    }


    .portfolioFinalCtaContent {

        max-width: 800px;

        padding-top: 10px;

        border-top: 1px solid rgba(197,154,50,.28);

    }


    .portfolioFinalCtaContent h2 {

        padding-top: 30px;

        font-size: clamp(39px, 7vw, 54px);

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .portfolioFinalCta {

        padding: 70px 0 55px;

    }


    .portfolioFinalCtaContent h2 {

        font-size: clamp(34px, 10vw, 43px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }


    .portfolioFinalCtaContent > p {

        margin-top: 22px;

        font-size: 10px;

        line-height: 1.8;

    }


    .portfolioFinalCtaButtons {

        flex-direction: column;

        align-items: stretch;

        gap: 9px;

        margin-top: 27px;

    }


    .portfolioFinalCtaPrimary,
    .portfolioFinalCtaSecondary {

        width: 100%;

        min-height: 52px;

        padding: 0 18px;

        text-align: center;

    }


    .portfolioFinalCtaBottom {

        justify-content: flex-start;

        margin-top: 42px;

        overflow: hidden;

    }


    .portfolioFinalCtaBottom p {

        white-space: nowrap;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .portfolioFinalCta {

        padding: 60px 0 50px;

    }


    .portfolioFinalCta .container {

        width: calc(100% - 26px);

    }


    .portfolioFinalCtaContent h2 {

        font-size: 33px;

    }


    .portfolioFinalCtaContent > p {

        font-size: 9px;

    }


    .portfolioFinalCtaDetail span {

        font-size: 9px;

    }


    .portfolioFinalCtaBottom p {

        font-size: 9px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .portfolioFinalCta .container {

        width: calc(100% - 22px);

    }


    .portfolioFinalCtaContent h2 {

        font-size: 30px;

    }

}

/* CTA Section Ends Here */

/* Investment Portfolio Page Ends Here */


/* Insurance Policies Page Starts Here */

/* Hero Section Starts Here */

/* =========================================================
   INSURANCE HERO
========================================================= */

.insuranceHero {

    position: relative;

    width: 100%;

    padding: 100px 0 65px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


/* =========================================================
   CONTAINER
========================================================= */

.insuranceHeroContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

    display: grid;

    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);

    align-items: center;

    gap: clamp(45px, 7vw, 90px);

}


/* =========================================================
   LEFT CONTENT
========================================================= */

.insuranceHeroContent {

    width: 100%;

    max-width: 680px;

}


.insuranceHeroEyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 22px;

}


.insuranceHeroEyebrow span {

    display: block;

    width: 32px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.insuranceHeroEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.6px;

    text-transform: uppercase;

}


/* =========================================================
   HEADING
========================================================= */

.insuranceHeroContent h1 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(42px, 5vw, 64px);

    line-height: 1.05;

    letter-spacing: -2px;

    font-weight: 600;

}


.insuranceHeroContent h1 strong {

    display: block;

    margin-top: 2px;

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   TEXT
========================================================= */

.insuranceHeroText {

    max-width: 650px;

    margin-top: 27px;

}


.insuranceHeroText p {

    margin: 0 0 16px;

    color: var(--text);

    opacity: .72;

    font-size: 12px;

    line-height: 1.85;

}


.insuranceHeroText p:last-child {

    margin-bottom: 0;

}


/* =========================================================
   ACTIONS
========================================================= */

.insuranceHeroActions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 11px;

    margin-top: 32px;

}


.insuranceHeroBtn {

    min-height: 53px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    text-decoration: none;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease;

}


.insuranceHeroBtnPrimary {

    gap: 13px;

    padding: 0 24px;

    background: #c59a32;

    border: 1px solid #c59a32;

    color: #fff;

    font-size: 10px;

    font-weight: 700;

}


.insuranceHeroBtnPrimary i {

    font-size: 9px;

    transition: transform .25s ease;

}


.insuranceHeroBtnPrimary:hover {

    background: transparent;

    color: #c59a32;

}


.insuranceHeroBtnPrimary:hover i {

    transform: translateX(4px);

}


.insuranceHeroBtnSecondary {

    padding: 0 24px;

    border: 1px solid rgba(197,154,50,.42);

    color: var(--primary);

    font-size: 10px;

    font-weight: 600;

}


.insuranceHeroBtnSecondary:hover {

    color: #c59a32;

    border-color: #c59a32;

}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.insuranceHeroVisual {

    position: relative;

    width: 100%;

    max-width: 500px;

    min-height: 420px;

    margin-left: auto;

    padding: 52px 52px 48px;

    box-sizing: border-box;

    border: 1px solid rgba(197,154,50,.42);

    background: var(--section);

    display: flex;

    flex-direction: column;

    justify-content: center;

}


/* subtle offset edge */

.insuranceHeroVisual::before {

    content: "";

    position: absolute;

    left: 14px;

    top: 14px;

    width: 100%;

    height: 100%;

    border: 1px solid rgba(197,154,50,.10);

    pointer-events: none;

}


/* =========================================================
   LABEL
========================================================= */

.insuranceVisualLabel {

    color: var(--primary);

    font-size: 20px;

    line-height: 1.3;

    font-weight: 600;

    letter-spacing: 2.5px;

}


.insuranceVisualDivider {

    width: 42px;

    height: 2px;

    margin: 18px 0 28px;

    background: #c59a32;

}


/* =========================================================
   ROWS
========================================================= */

.insuranceVisualRows {

    width: 100%;

    border-top: 1px solid rgba(197,154,50,.24);

}


.insuranceVisualRow {

    min-height: 62px;

    display: grid;

    grid-template-columns: 42px minmax(0, 1fr);

    align-items: center;

    gap: 14px;

    border-bottom: 1px solid rgba(197,154,50,.24);

}


.insuranceVisualNumber {

    color: #c59a32;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;

}


.insuranceVisualName {

    color: var(--primary);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

}


/* =========================================================
   FOOTER
========================================================= */

.insuranceVisualFooter {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-top: 27px;

    color: var(--primary);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.2px;

}


.insuranceVisualDot {

    width: 7px;

    height: 7px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #c59a32;

    box-shadow: 0 0 0 6px rgba(197,154,50,.08);

}


/* =========================================================
   CORNER ACCENT
========================================================= */

.insuranceVisualCorner {

    position: absolute;

    right: -1px;

    bottom: -1px;

    width: 42px;

    height: 42px;

    border-right: 2px solid #c59a32;

    border-bottom: 2px solid #c59a32;

}


/* =========================================================
   BOTTOM LINE
========================================================= */

.insuranceHeroBottom {

    width: min(1180px, calc(100% - 48px));

    margin: 60px auto 0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    overflow: hidden;

}


.insuranceHeroBottom > span {

    width: 28px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.insuranceHeroBottom p {

    margin: 0;

    color: var(--text);

    opacity: .48;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1.1px;

    white-space: nowrap;

}


.insuranceHeroBottom b {

    padding: 0 6px;

    color: #c59a32;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .insuranceHero {

        padding: 85px 0 60px;

    }

    .insuranceHeroContainer {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(320px, .82fr);

        gap: 45px;

    }

    .insuranceHeroContent h1 {

        font-size: clamp(40px, 5.5vw, 57px);

    }

    .insuranceHeroVisual {

        min-height: 390px;

        padding: 42px 40px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 820px) {

    .insuranceHero {

        padding: 75px 0 55px;

    }

    .insuranceHeroContainer {

        grid-template-columns: 1fr;

        gap: 55px;

    }

    .insuranceHeroContent {

        max-width: 760px;

    }

    .insuranceHeroContent h1 {

        font-size: clamp(42px, 7vw, 57px);

    }

    .insuranceHeroText {

        max-width: 720px;

    }

    .insuranceHeroVisual {

        width: 100%;

        max-width: 560px;

        min-height: 400px;

        margin: 0;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .insuranceHero {

        padding: 60px 0 45px;

    }

    .insuranceHeroContainer {

        width: calc(100% - 30px);

        gap: 38px;

    }

    .insuranceHeroEyebrow {

        margin-bottom: 18px;

    }

    .insuranceHeroContent h1 {

        font-size: clamp(34px, 10vw, 44px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }

    .insuranceHeroText {

        margin-top: 22px;

    }

    .insuranceHeroText p {

        font-size: 10px;

        line-height: 1.8;

    }

    .insuranceHeroActions {

        flex-direction: column;

        align-items: stretch;

        margin-top: 27px;

        gap: 9px;

    }

    .insuranceHeroBtn {

        width: 100%;

        min-height: 52px;

    }

    .insuranceHeroVisual {

        max-width: none;

        min-height: 350px;

        padding: 38px 25px;

    }

    .insuranceHeroVisual::before {

        left: 8px;

        top: 8px;

    }

    .insuranceVisualLabel {

        font-size: 18px;

    }

    .insuranceVisualRow {

        min-height: 57px;

    }

    .insuranceHeroBottom {

        width: calc(100% - 30px);

        margin-top: 35px;

        justify-content: flex-start;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .insuranceHero {

        padding: 52px 0 40px;

    }

    .insuranceHeroContainer {

        width: calc(100% - 26px);

    }

    .insuranceHeroContent h1 {

        font-size: 33px;

    }

    .insuranceHeroText p {

        font-size: 9px;

    }

    .insuranceHeroVisual {

        min-height: 325px;

        padding: 32px 19px;

    }

    .insuranceVisualLabel {

        font-size: 16px;

        letter-spacing: 2px;

    }

    .insuranceVisualDivider {

        margin: 14px 0 22px;

    }

    .insuranceVisualRow {

        min-height: 52px;

        grid-template-columns: 35px minmax(0, 1fr);

    }

    .insuranceVisualName {

        font-size: 9px;

    }

    .insuranceHeroBottom {

        width: calc(100% - 26px);

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .insuranceHeroContainer {

        width: calc(100% - 22px);

    }

    .insuranceHeroContent h1 {

        font-size: 30px;

    }

    .insuranceHeroVisual {

        min-height: 300px;

        padding: 28px 16px;

    }

    .insuranceVisualLabel {

        font-size: 14px;

    }

    .insuranceVisualRow {

        min-height: 48px;

    }

    .insuranceVisualFooter {

        font-size: 9px;

    }

    .insuranceHeroBottom {

        width: calc(100% - 22px);

    }

}

/* Hero Section Ends Here */

/* Intro Section Starts Here */

/* =========================================================
   INSURANCE INTRODUCTION
========================================================= */

.insuranceIntro {

    position: relative;

    width: 100%;

    padding: 110px 0 95px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.insuranceIntroContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(350px, .92fr);

    align-items: start;

    gap: clamp(55px, 8vw, 110px);

}


/* =========================================================
   LEFT MAIN CONTENT
========================================================= */

.insuranceIntroMain {

    max-width: 680px;

}


.insuranceIntroEyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 21px;

}


.insuranceIntroEyebrow span {

    width: 31px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.insuranceIntroEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


/* =========================================================
   HEADING
========================================================= */

.insuranceIntroMain h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.7vw, 60px);

    line-height: 1.07;

    letter-spacing: -2px;

    font-weight: 600;

}


.insuranceIntroMain h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   TEXT
========================================================= */

.insuranceIntroContent {

    max-width: 650px;

    margin-top: 29px;

}


.insuranceIntroContent p {

    margin: 0 0 17px;

    color: var(--text);

    opacity: .70;

    font-size: 12px;

    line-height: 1.88;

}


.insuranceIntroContent p:last-child {

    margin-bottom: 0;

}


/* =========================================================
   RIGHT HIGHLIGHTS
========================================================= */

.insuranceIntroHighlights {

    width: 100%;

    border-top: 1px solid rgba(197,154,50,.32);

}


/* =========================================================
   HIGHLIGHT
========================================================= */

.insuranceIntroHighlight {

    display: grid;

    grid-template-columns: 42px minmax(0, 1fr);

    gap: 24px;

    padding: 28px 0 30px;

    border-bottom: 1px solid rgba(197,154,50,.32);

}


.insuranceIntroHighlightNumber {

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    border: 1px solid rgba(197,154,50,.48);

    color: #c59a32;

    font-size: 9px;

    font-weight: 700;

}


.insuranceIntroHighlightContent {

    min-width: 0;

}


.insuranceIntroHighlightContent h3 {

    margin: 2px 0 10px;

    color: var(--primary);

    font-size: 19px;

    line-height: 1.35;

    font-weight: 600;

}


.insuranceIntroHighlightContent p {

    max-width: 390px;

    margin: 0;

    color: var(--text);

    opacity: .67;

    font-size: 11px;

    line-height: 1.82;

}


/* =========================================================
   BOTTOM IDENTITY
========================================================= */

.insuranceIntroBottom {

    width: min(1180px, calc(100% - 48px));

    margin: 70px auto 0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

}


.insuranceIntroBottom > span {

    width: 28px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.insuranceIntroBottom p {

    margin: 0;

    color: var(--text);

    opacity: .44;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.insuranceIntroBottom b {

    padding: 0 7px;

    color: #c59a32;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .insuranceIntro {

        padding: 90px 0 80px;

    }

    .insuranceIntroContainer {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(320px, .85fr);

        gap: 55px;

    }

    .insuranceIntroMain h2 {

        font-size: clamp(39px, 5.2vw, 54px);

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

    .insuranceIntro {

        padding: 80px 0 70px;

    }

    .insuranceIntroContainer {

        grid-template-columns: 1fr;

        gap: 55px;

    }

    .insuranceIntroMain {

        max-width: 760px;

    }

    .insuranceIntroMain h2 {

        font-size: clamp(40px, 7vw, 55px);

    }

    .insuranceIntroContent {

        max-width: 720px;

    }

    .insuranceIntroHighlights {

        max-width: 720px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .insuranceIntro {

        padding: 65px 0 55px;

    }

    .insuranceIntroContainer {

        width: calc(100% - 30px);

        gap: 40px;

    }

    .insuranceIntroEyebrow {

        margin-bottom: 18px;

    }

    .insuranceIntroMain h2 {

        font-size: clamp(34px, 10vw, 44px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }

    .insuranceIntroContent {

        margin-top: 22px;

    }

    .insuranceIntroContent p {

        font-size: 10px;

        line-height: 1.8;

    }

    .insuranceIntroHighlight {

        grid-template-columns: 37px minmax(0, 1fr);

        gap: 15px;

        padding: 23px 0 25px;

    }

    .insuranceIntroHighlightNumber {

        width: 31px;

        height: 31px;

    }

    .insuranceIntroHighlightContent h3 {

        margin-top: 0;

        font-size: 16px;

    }

    .insuranceIntroHighlightContent p {

        font-size: 10px;

        line-height: 1.75;

    }

    .insuranceIntroBottom {

        width: calc(100% - 30px);

        margin-top: 38px;

        justify-content: flex-start;

        overflow: hidden;

    }

    .insuranceIntroBottom p {

        white-space: nowrap;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .insuranceIntro {

        padding: 55px 0 48px;

    }

    .insuranceIntroContainer {

        width: calc(100% - 26px);

    }

    .insuranceIntroMain h2 {

        font-size: 33px;

    }

    .insuranceIntroContent p {

        font-size: 9px;

    }

    .insuranceIntroHighlight {

        grid-template-columns: 34px minmax(0, 1fr);

        gap: 12px;

    }

    .insuranceIntroHighlightNumber {

        width: 29px;

        height: 29px;

    }

    .insuranceIntroHighlightContent h3 {

        font-size: 15px;

    }

    .insuranceIntroHighlightContent p {

        font-size: 9px;

    }

    .insuranceIntroBottom {

        width: calc(100% - 26px);

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .insuranceIntroContainer {

        width: calc(100% - 22px);

    }

    .insuranceIntroMain h2 {

        font-size: 30px;

    }

    .insuranceIntroHighlightContent p {

        font-size: 9px;

    }

    .insuranceIntroBottom {

        width: calc(100% - 22px);

    }

}

/* Intro Section Ends Here */

/* Matters Section Starts Here */

/* =========================================================
   WHY INSURANCE PLANNING MATTERS
========================================================= */

.insuranceWhy {

    position: relative;

    width: 100%;

    padding: 115px 0 95px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.insuranceWhyContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(330px, .85fr)
        minmax(0, 1.15fr);

    align-items: start;

    gap: clamp(55px, 8vw, 110px);

}


/* =========================================================
   LEFT HEADING
========================================================= */

.insuranceWhyHeading {

    position: sticky;

    top: 80px;

    max-width: 500px;

}


.insuranceWhyEyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 22px;

}


.insuranceWhyEyebrow span {

    width: 31px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.insuranceWhyEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.insuranceWhyHeading h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.5vw, 58px);

    line-height: 1.07;

    letter-spacing: -2px;

    font-weight: 600;

}


.insuranceWhyHeading h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   LEFT STATEMENT
========================================================= */

.insuranceWhyStatement {

    display: grid;

    grid-template-columns: 2px minmax(0, 1fr);

    gap: 18px;

    margin-top: 38px;

    max-width: 430px;

}


.insuranceWhyStatement > span {

    width: 2px;

    background: #c59a32;

}


.insuranceWhyStatement p {

    margin: 0;

    color: var(--text);

    opacity: .58;

    font-size: 11px;

    line-height: 1.8;

}


/* =========================================================
   RIGHT BENEFITS
========================================================= */

.insuranceWhyBenefits {

    width: 100%;

    border-top: 1px solid rgba(197,154,50,.32);

}


/* =========================================================
   BENEFIT
========================================================= */

.insuranceWhyBenefit {

    display: grid;

    grid-template-columns: 42px minmax(0, 1fr);

    gap: 22px;

    padding: 27px 0 29px;

    border-bottom: 1px solid rgba(197,154,50,.32);

}


.insuranceWhyNumber {

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    border: 1px solid rgba(197,154,50,.48);

    color: #c59a32;

    font-size: 9px;

    line-height: 1;

    font-weight: 700;

}


.insuranceWhyBenefit h3 {

    margin: 1px 0 9px;

    color: var(--primary);

    font-size: 19px;

    line-height: 1.35;

    font-weight: 600;

}


.insuranceWhyBenefit p {

    max-width: 600px;

    margin: 0;

    color: var(--text);

    opacity: .67;

    font-size: 11px;

    line-height: 1.82;

}


/* =========================================================
   BOTTOM
========================================================= */

.insuranceWhyBottom {

    width: min(1180px, calc(100% - 48px));

    margin: 70px auto 0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

}


.insuranceWhyBottom > span {

    width: 28px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.insuranceWhyBottom p {

    margin: 0;

    color: var(--text);

    opacity: .43;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1.2px;

}


.insuranceWhyBottom b {

    padding: 0 7px;

    color: #c59a32;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .insuranceWhy {

        padding: 90px 0 80px;

    }

    .insuranceWhyContainer {

        grid-template-columns:
            minmax(280px, .8fr)
            minmax(0, 1.2fr);

        gap: 55px;

    }

    .insuranceWhyHeading h2 {

        font-size: clamp(38px, 5vw, 52px);

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

    .insuranceWhy {

        padding: 80px 0 70px;

    }

    .insuranceWhyContainer {

        grid-template-columns: 1fr;

        gap: 50px;

    }

    .insuranceWhyHeading {

        position: static;

        max-width: 760px;

    }

    .insuranceWhyHeading h2 {

        font-size: clamp(40px, 7vw, 55px);

    }

    .insuranceWhyStatement {

        max-width: 650px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .insuranceWhy {

        padding: 65px 0 55px;

    }

    .insuranceWhyContainer {

        width: calc(100% - 30px);

        gap: 38px;

    }

    .insuranceWhyEyebrow {

        margin-bottom: 18px;

    }

    .insuranceWhyHeading h2 {

        font-size: clamp(34px, 10vw, 44px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }

    .insuranceWhyStatement {

        margin-top: 25px;

        grid-template-columns: 2px minmax(0, 1fr);

        gap: 14px;

    }

    .insuranceWhyStatement p {

        font-size: 10px;

        line-height: 1.75;

    }

    .insuranceWhyBenefit {

        grid-template-columns: 36px minmax(0, 1fr);

        gap: 14px;

        padding: 23px 0 25px;

    }

    .insuranceWhyNumber {

        width: 31px;

        height: 31px;

    }

    .insuranceWhyBenefit h3 {

        margin-top: 0;

        font-size: 16px;

    }

    .insuranceWhyBenefit p {

        font-size: 10px;

        line-height: 1.75;

    }

    .insuranceWhyBottom {

        width: calc(100% - 30px);

        margin-top: 38px;

        justify-content: flex-start;

        overflow: hidden;

    }

    .insuranceWhyBottom p {

        white-space: nowrap;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .insuranceWhy {

        padding: 55px 0 48px;

    }

    .insuranceWhyContainer {

        width: calc(100% - 26px);

    }

    .insuranceWhyHeading h2 {

        font-size: 33px;

    }

    .insuranceWhyStatement p {

        font-size: 9px;

    }

    .insuranceWhyBenefit {

        grid-template-columns: 34px minmax(0, 1fr);

        gap: 12px;

    }

    .insuranceWhyNumber {

        width: 29px;

        height: 29px;

    }

    .insuranceWhyBenefit h3 {

        font-size: 15px;

    }

    .insuranceWhyBenefit p {

        font-size: 9px;

    }

    .insuranceWhyBottom {

        width: calc(100% - 26px);

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .insuranceWhyContainer {

        width: calc(100% - 22px);

    }

    .insuranceWhyHeading h2 {

        font-size: 30px;

    }

    .insuranceWhyBenefit p {

        font-size: 9px;

    }

    .insuranceWhyBottom {

        width: calc(100% - 22px);

    }

}

/* Matters Section Ends Here */

/* Approach Section Starts Here */

/* =========================================================
   INSURANCE PLANNING APPROACH
========================================================= */

.insuranceApproach {

    position: relative;

    width: 100%;

    padding: 115px 0 90px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.insuranceApproachContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(350px, .88fr);

    align-items: start;

    gap: clamp(55px, 8vw, 105px);

}


/* =========================================================
   LEFT MAIN
========================================================= */

.insuranceApproachMain {

    min-width: 0;

}


.insuranceApproachEyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 21px;

}


.insuranceApproachEyebrow span {

    width: 31px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.insuranceApproachEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


/* =========================================================
   HEADING
========================================================= */

.insuranceApproachMain h2 {

    max-width: 700px;

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.7vw, 60px);

    line-height: 1.06;

    letter-spacing: -2px;

    font-weight: 600;

}


.insuranceApproachMain h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   INTRO
========================================================= */

.insuranceApproachIntro {

    max-width: 650px;

    margin: 26px 0 0;

    color: var(--text);

    opacity: .64;

    font-size: 11px;

    line-height: 1.82;

}


/* =========================================================
   APPROACH LIST
========================================================= */

.insuranceApproachList {

    margin-top: 48px;

    border-top: 1px solid rgba(197,154,50,.32);

}


.insuranceApproachItem {

    display: grid;

    grid-template-columns: 42px minmax(0, 1fr);

    gap: 21px;

    padding: 23px 0 25px;

    border-bottom: 1px solid rgba(197,154,50,.32);

}


.insuranceApproachNumber {

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    border: 1px solid rgba(197,154,50,.48);

    color: #c59a32;

    font-size: 9px;

    line-height: 1;

    font-weight: 700;

}


.insuranceApproachItemContent {

    min-width: 0;

}


.insuranceApproachItemContent h3 {

    margin: 0 0 7px;

    color: var(--primary);

    font-size: 18px;

    line-height: 1.35;

    font-weight: 600;

}


.insuranceApproachItemContent p {

    max-width: 620px;

    margin: 0;

    color: var(--text);

    opacity: .65;

    font-size: 10px;

    line-height: 1.78;

}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.insuranceApproachVisual {

    position: sticky;

    top: 70px;

    width: 100%;

    min-height: 480px;

    box-sizing: border-box;

    padding: 30px;

    border: 1px solid rgba(197,154,50,.38);

    background: var(--section);

}


/* subtle offset */

.insuranceApproachVisual::before {

    content: "";

    position: absolute;

    top: 12px;

    left: 12px;

    width: 100%;

    height: 100%;

    border: 1px solid rgba(197,154,50,.09);

    pointer-events: none;

}


/* =========================================================
   VISUAL TOP
========================================================= */

.insuranceApproachVisualTop {

    position: relative;

    z-index: 1;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom: 20px;

    border-bottom: 1px solid rgba(197,154,50,.20);

}


.insuranceApproachVisualTop span {

    color: var(--text);

    opacity: .42;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.2px;

}


.insuranceApproachVisualTop span:first-child {

    color: #c59a32;

    opacity: .8;

}


/* =========================================================
   VISUAL CONTENT
========================================================= */

.insuranceApproachVisualContent {

    position: relative;

    z-index: 1;

    min-height: 330px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


/* =========================================================
   SECURITY
========================================================= */

.insuranceApproachSecurity {

    color: var(--primary);

    font-size: clamp(18px, 2.2vw, 26px);

    line-height: 1.3;

    font-weight: 600;

    letter-spacing: 2px;

}


/* =========================================================
   RULE
========================================================= */

.insuranceApproachRule {

    width: 42px;

    height: 2px;

    margin: 18px 0 25px;

    background: #c59a32;

}


/* =========================================================
   CATEGORIES
========================================================= */

.insuranceApproachCategories {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid rgba(197,154,50,.24);

    border-bottom: 1px solid rgba(197,154,50,.24);

}


.insuranceApproachCategories > div {

    min-height: 82px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 8px;

    padding: 12px 14px;

    box-sizing: border-box;

}


.insuranceApproachCategories > div + div {

    border-left: 1px solid rgba(197,154,50,.24);

}


.insuranceApproachCategories span {

    color: #c59a32;

    font-size: 9px;

    font-weight: 700;

}


.insuranceApproachCategories strong {

    color: var(--primary);

    font-size: 9px;

    line-height: 1.4;

    letter-spacing: 1.1px;

}


/* =========================================================
   PROTECTION
========================================================= */

.insuranceApproachProtection {

    display: flex;

    align-items: center;

    gap: 12px;

    margin: 28px 0;

}


.insuranceApproachProtection span {

    width: 8px;

    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #c59a32;

    box-shadow:

        0 0 0 7px rgba(197,154,50,.07);

}


.insuranceApproachProtection strong {

    color: #c59a32;

    font-size: 11px;

    line-height: 1.4;

    letter-spacing: 1.5px;

}


/* =========================================================
   GOALS
========================================================= */

.insuranceApproachGoals {

    width: fit-content;

    padding: 11px 15px;

    border: 1px solid rgba(197,154,50,.27);

    color: var(--primary);

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.2px;

}


/* =========================================================
   VISUAL BOTTOM
========================================================= */

.insuranceApproachVisualBottom {

    position: relative;

    z-index: 1;

    display: flex;

    align-items: center;

    gap: 10px;

    padding-top: 20px;

    border-top: 1px solid rgba(197,154,50,.20);

}


.insuranceApproachVisualBottom > span {

    width: 24px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.insuranceApproachVisualBottom p {

    margin: 0;

    color: var(--text);

    opacity: .42;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;

}


.insuranceApproachVisualBottom b {

    padding: 0 5px;

    color: #c59a32;

}


/* =========================================================
   BOTTOM PROCESS
========================================================= */

.insuranceApproachBottom {

    width: min(1180px, calc(100% - 48px));

    margin: 65px auto 0;

    padding-top: 25px;

    border-top: 1px solid rgba(197,154,50,.20);

    text-align: center;

}


.insuranceApproachBottom p {

    margin: 0;

    color: var(--text);

    opacity: .48;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.insuranceApproachBottom b {

    padding: 0 7px;

    color: #c59a32;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .insuranceApproach {

        padding: 90px 0 80px;

    }

    .insuranceApproachContainer {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(320px, .82fr);

        gap: 55px;

    }

    .insuranceApproachMain h2 {

        font-size: clamp(38px, 5vw, 54px);

    }

    .insuranceApproachVisual {

        min-height: 450px;

        padding: 26px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

    .insuranceApproach {

        padding: 80px 0 70px;

    }

    .insuranceApproachContainer {

        grid-template-columns: 1fr;

        gap: 50px;

    }

    .insuranceApproachMain h2 {

        font-size: clamp(40px, 7vw, 55px);

    }

    .insuranceApproachIntro {

        max-width: 720px;

    }

    .insuranceApproachVisual {

        position: relative;

        top: auto;

        max-width: 700px;

        min-height: 430px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .insuranceApproach {

        padding: 65px 0 55px;

    }

    .insuranceApproachContainer {

        width: calc(100% - 30px);

        gap: 40px;

    }

    .insuranceApproachEyebrow {

        margin-bottom: 18px;

    }

    .insuranceApproachMain h2 {

        font-size: clamp(34px, 10vw, 44px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }

    .insuranceApproachIntro {

        margin-top: 21px;

        font-size: 10px;

        line-height: 1.78;

    }

    .insuranceApproachList {

        margin-top: 35px;

    }

    .insuranceApproachItem {

        grid-template-columns: 35px minmax(0, 1fr);

        gap: 14px;

        padding: 22px 0 24px;

    }

    .insuranceApproachNumber {

        width: 30px;

        height: 30px;

    }

    .insuranceApproachItemContent h3 {

        font-size: 16px;

        margin-bottom: 7px;

    }

    .insuranceApproachItemContent p {

        font-size: 9px;

        line-height: 1.78;

    }

    .insuranceApproachVisual {

        min-height: 360px;

        padding: 22px 18px;

    }

    .insuranceApproachVisual::before {

        top: 7px;

        left: 7px;

    }

    .insuranceApproachVisualContent {

        min-height: 270px;

    }

    .insuranceApproachSecurity {

        font-size: 18px;

        letter-spacing: 1.7px;

    }

    .insuranceApproachCategories > div {

        min-height: 65px;

        padding: 8px;

    }

    .insuranceApproachCategories strong {

        font-size: 9px;

        letter-spacing: .6px;

    }

    .insuranceApproachProtection {

        margin: 21px 0;

    }

    .insuranceApproachGoals {

        padding: 9px 11px;

    }

    .insuranceApproachBottom {

        width: calc(100% - 30px);

        margin-top: 38px;

        overflow: hidden;

        text-align: left;

    }

    .insuranceApproachBottom p {

        white-space: nowrap;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .insuranceApproach {

        padding: 55px 0 48px;

    }

    .insuranceApproachContainer {

        width: calc(100% - 26px);

    }

    .insuranceApproachMain h2 {

        font-size: 33px;

    }

    .insuranceApproachIntro {

        font-size: 9px;

    }

    .insuranceApproachVisual {

        min-height: 335px;

        padding: 19px 15px;

    }

    .insuranceApproachVisualTop span {

        font-size: 9px;

    }

    .insuranceApproachSecurity {

        font-size: 16px;

    }

    .insuranceApproachCategories > div {

        min-height: 60px;

        padding: 7px 6px;

    }

    .insuranceApproachCategories span {

        font-size: 9px;

    }

    .insuranceApproachCategories strong {

        font-size: 9px;

    }

    .insuranceApproachVisualBottom p {

        font-size: 9px;

    }

    .insuranceApproachBottom {

        width: calc(100% - 26px);

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .insuranceApproachContainer {

        width: calc(100% - 22px);

    }

    .insuranceApproachMain h2 {

        font-size: 30px;

    }

    .insuranceApproachVisual {

        min-height: 315px;

        padding: 17px 12px;

    }

    .insuranceApproachSecurity {

        font-size: 14px;

        letter-spacing: 1.4px;

    }

    .insuranceApproachCategories > div {

        min-height: 56px;

        padding: 6px 4px;

    }

    .insuranceApproachProtection strong {

        font-size: 9px;

    }

    .insuranceApproachBottom {

        width: calc(100% - 22px);

    }

}

/* Approach Section Ends Here */

/* Strategies Section Starts Here */

/* =========================================================
   INSURANCE STRATEGIES
========================================================= */

.insuranceStrategies {

    position: relative;

    width: 100%;

    padding: 115px 0 95px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.insuranceStrategiesContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   HEADER
========================================================= */

.insuranceStrategiesHeader {

    max-width: 850px;

    margin-bottom: 62px;

}


.insuranceStrategiesEyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 21px;

}


.insuranceStrategiesEyebrow span {

    width: 31px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.insuranceStrategiesEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.insuranceStrategiesHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.8vw, 61px);

    line-height: 1.06;

    letter-spacing: -2px;

    font-weight: 600;

}


.insuranceStrategiesHeader h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   GRID
========================================================= */

.insuranceStrategiesGrid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    border-top: 1px solid rgba(197,154,50,.34);

    border-left: 1px solid rgba(197,154,50,.34);

}


/* =========================================================
   STRATEGY
========================================================= */

.insuranceStrategy {

    position: relative;

    min-height: 315px;

    display: flex;

    flex-direction: column;

    padding: 30px 32px 27px;

    box-sizing: border-box;

    border-right: 1px solid rgba(197,154,50,.34);

    border-bottom: 1px solid rgba(197,154,50,.34);

    transition:

        background .25s ease,

        transform .25s ease;

}


.insuranceStrategy:hover {

    background: rgba(197,154,50,.025);

}


/* =========================================================
   TOP
========================================================= */

.insuranceStrategyTop {

    display: flex;

    align-items: center;

    gap: 15px;

}


.insuranceStrategyNumber {

    color: #c59a32;

    font-size: 10px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: 1px;

}


.insuranceStrategyLine {

    width: 42px;

    height: 1px;

    background: rgba(197,154,50,.40);

}


/* =========================================================
   CONTENT
========================================================= */

.insuranceStrategyContent {

    max-width: 510px;

    margin-top: 45px;

}


.insuranceStrategyContent h3 {

    margin: 0 0 14px;

    color: var(--primary);

    font-size: 23px;

    line-height: 1.25;

    letter-spacing: -.3px;

    font-weight: 600;

}


.insuranceStrategyContent p {

    margin: 0;

    color: var(--text);

    opacity: .67;

    font-size: 11px;

    line-height: 1.82;

}


/* =========================================================
   KEYWORD
========================================================= */

.insuranceStrategyKeyword {

    margin-top: auto;

    padding-top: 25px;

    color: #c59a32;

    opacity: .62;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.2px;

}


/* =========================================================
   BOTTOM
========================================================= */

.insuranceStrategiesBottom {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    margin-top: 65px;

}


.insuranceStrategiesBottom > span {

    width: 28px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.insuranceStrategiesBottom p {

    margin: 0;

    color: var(--text);

    opacity: .44;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.insuranceStrategiesBottom b {

    padding: 0 7px;

    color: #c59a32;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .insuranceStrategies {

        padding: 90px 0 80px;

    }

    .insuranceStrategiesHeader h2 {

        font-size: clamp(38px, 5vw, 54px);

    }

    .insuranceStrategy {

        min-height: 300px;

        padding: 27px 27px 24px;

    }

    .insuranceStrategyContent {

        margin-top: 38px;

    }

    .insuranceStrategyContent h3 {

        font-size: 21px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 760px) {

    .insuranceStrategies {

        padding: 80px 0 70px;

    }

    .insuranceStrategiesContainer {

        width: calc(100% - 30px);

    }

    .insuranceStrategiesHeader {

        margin-bottom: 45px;

    }

    .insuranceStrategiesHeader h2 {

        font-size: clamp(40px, 7vw, 54px);

    }

    .insuranceStrategiesGrid {

        grid-template-columns: 1fr;

    }

    .insuranceStrategy {

        min-height: 275px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .insuranceStrategies {

        padding: 65px 0 55px;

    }

    .insuranceStrategiesContainer {

        width: calc(100% - 30px);

    }

    .insuranceStrategiesEyebrow {

        margin-bottom: 18px;

    }

    .insuranceStrategiesHeader {

        margin-bottom: 35px;

    }

    .insuranceStrategiesHeader h2 {

        font-size: clamp(34px, 10vw, 44px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }

    .insuranceStrategy {

        min-height: auto;

        padding: 25px 21px 23px;

    }

    .insuranceStrategyContent {

        margin-top: 29px;

    }

    .insuranceStrategyContent h3 {

        margin-bottom: 10px;

        font-size: 17px;

    }

    .insuranceStrategyContent p {

        font-size: 10px;

        line-height: 1.78;

    }

    .insuranceStrategyKeyword {

        padding-top: 22px;

    }

    .insuranceStrategiesBottom {

        margin-top: 40px;

        justify-content: flex-start;

        overflow: hidden;

    }

    .insuranceStrategiesBottom p {

        white-space: nowrap;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .insuranceStrategies {

        padding: 55px 0 48px;

    }

    .insuranceStrategiesContainer {

        width: calc(100% - 26px);

    }

    .insuranceStrategiesHeader h2 {

        font-size: 33px;

    }

    .insuranceStrategy {

        padding: 22px 17px 21px;

    }

    .insuranceStrategyContent {

        margin-top: 26px;

    }

    .insuranceStrategyContent h3 {

        font-size: 15px;

    }

    .insuranceStrategyContent p {

        font-size: 9px;

    }

    .insuranceStrategyKeyword {

        font-size: 9px;

    }

    .insuranceStrategiesBottom {

        margin-top: 35px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .insuranceStrategiesContainer {

        width: calc(100% - 22px);

    }

    .insuranceStrategiesHeader h2 {

        font-size: 30px;

    }

    .insuranceStrategy {

        padding: 20px 14px;

    }

    .insuranceStrategyContent h3 {

        font-size: 14px;

    }

    .insuranceStrategyContent p {

        font-size: 9px;

    }

    .insuranceStrategiesBottom p {

        font-size: 9px;

    }

}

/* Strategies Section Ends Here */

/* Who Section Starts Here */

/* =========================================================
   WHO IS INSURANCE PLANNING FOR
========================================================= */

.insuranceWho {

    position: relative;

    width: 100%;

    padding: 115px 0 95px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.insuranceWhoContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   HEADER
========================================================= */

.insuranceWhoHeader {

    max-width: 820px;

    margin-bottom: 62px;

}


.insuranceWhoEyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 21px;

}


.insuranceWhoEyebrow span {

    width: 31px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.insuranceWhoEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.insuranceWhoHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(42px, 5vw, 62px);

    line-height: 1.05;

    letter-spacing: -2.1px;

    font-weight: 600;

}


.insuranceWhoHeader h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   PROFILE LIST
========================================================= */

.insuranceWhoList {

    border-top: 1px solid rgba(197,154,50,.34);

}


/* =========================================================
   PROFILE ITEM
========================================================= */

.insuranceWhoItem {

    display: grid;

    grid-template-columns: 55px minmax(0, 1fr) 125px;

    align-items: center;

    gap: 30px;

    min-height: 150px;

    padding: 25px 0;

    box-sizing: border-box;

    border-bottom: 1px solid rgba(197,154,50,.34);

    transition:

        background .25s ease,

        padding .25s ease;

}


.insuranceWhoItem:hover {

    padding-left: 14px;

    padding-right: 14px;

    background: rgba(197,154,50,.025);

}


/* =========================================================
   NUMBER
========================================================= */

.insuranceWhoNumber {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    border: 1px solid rgba(197,154,50,.48);

    color: #c59a32;

    font-size: 9px;

    font-weight: 700;

}


/* =========================================================
   CONTENT
========================================================= */

.insuranceWhoContent {

    min-width: 0;

}


.insuranceWhoContent h3 {

    margin: 0 0 9px;

    color: var(--primary);

    font-size: 21px;

    line-height: 1.3;

    font-weight: 600;

}


.insuranceWhoContent p {

    max-width: 700px;

    margin: 0;

    color: var(--text);

    opacity: .67;

    font-size: 11px;

    line-height: 1.8;

}


/* =========================================================
   TAG
========================================================= */

.insuranceWhoTag {

    justify-self: end;

    width: 105px;

    padding: 9px 8px;

    box-sizing: border-box;

    border: 1px solid rgba(197,154,50,.25);

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1px;

    text-align: center;

}


/* =========================================================
   BOTTOM
========================================================= */

.insuranceWhoBottom {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    margin-top: 65px;

}


.insuranceWhoBottom > span {

    width: 28px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.insuranceWhoBottom p {

    margin: 0;

    color: var(--text);

    opacity: .43;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.insuranceWhoBottom b {

    padding: 0 6px;

    color: #c59a32;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .insuranceWho {

        padding: 90px 0 80px;

    }

    .insuranceWhoHeader h2 {

        font-size: clamp(40px, 5.5vw, 56px);

    }

    .insuranceWhoItem {

        grid-template-columns: 50px minmax(0, 1fr) 110px;

        gap: 23px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 760px) {

    .insuranceWho {

        padding: 80px 0 70px;

    }

    .insuranceWhoContainer {

        width: calc(100% - 30px);

    }

    .insuranceWhoHeader {

        margin-bottom: 45px;

    }

    .insuranceWhoHeader h2 {

        font-size: clamp(40px, 7vw, 54px);

    }

    .insuranceWhoItem {

        grid-template-columns: 45px minmax(0, 1fr);

        gap: 20px;

        min-height: auto;

        padding: 25px 0;

    }

    .insuranceWhoTag {

        display: none;

    }

    .insuranceWhoItem:hover {

        padding-left: 7px;

        padding-right: 7px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .insuranceWho {

        padding: 65px 0 55px;

    }

    .insuranceWhoContainer {

        width: calc(100% - 30px);

    }

    .insuranceWhoEyebrow {

        margin-bottom: 18px;

    }

    .insuranceWhoHeader {

        margin-bottom: 36px;

    }

    .insuranceWhoHeader h2 {

        font-size: clamp(34px, 10vw, 44px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }

    .insuranceWhoItem {

        grid-template-columns: 35px minmax(0, 1fr);

        gap: 14px;

        padding: 23px 0 25px;

    }

    .insuranceWhoNumber {

        width: 30px;

        height: 30px;

    }

    .insuranceWhoContent h3 {

        margin-bottom: 8px;

        font-size: 16px;

        line-height: 1.35;

    }

    .insuranceWhoContent p {

        font-size: 10px;

        line-height: 1.78;

    }

    .insuranceWhoBottom {

        justify-content: flex-start;

        margin-top: 40px;

        overflow: hidden;

    }

    .insuranceWhoBottom p {

        white-space: nowrap;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .insuranceWho {

        padding: 55px 0 48px;

    }

    .insuranceWhoContainer {

        width: calc(100% - 26px);

    }

    .insuranceWhoHeader h2 {

        font-size: 33px;

    }

    .insuranceWhoItem {

        grid-template-columns: 34px minmax(0, 1fr);

        gap: 12px;

    }

    .insuranceWhoNumber {

        width: 29px;

        height: 29px;

    }

    .insuranceWhoContent h3 {

        font-size: 15px;

    }

    .insuranceWhoContent p {

        font-size: 9px;

        line-height: 1.75;

    }

    .insuranceWhoBottom {

        margin-top: 35px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .insuranceWhoContainer {

        width: calc(100% - 22px);

    }

    .insuranceWhoHeader h2 {

        font-size: 30px;

    }

    .insuranceWhoContent p {

        font-size: 9px;

    }

    .insuranceWhoBottom p {

        font-size: 9px;

    }

}

/* Who Section Ends Here */

/* CTA Section Starts Here */

/* =========================================================
   INSURANCE FINAL CTA
========================================================= */

.insuranceFinalCta {

    position: relative;

    width: 100%;

    padding: 120px 0 90px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


/* =========================================================
   CONTAINER
========================================================= */

.insuranceFinalCtaContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        240px
        1px
        minmax(0, 1fr);

    align-items: stretch;

    column-gap: clamp(45px, 7vw, 90px);

}


/* =========================================================
   LEFT EDITORIAL
========================================================= */

.insuranceFinalCtaEditorial {

    min-height: 380px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}


.insuranceFinalCtaPrefix {

    display: flex;

    align-items: center;

    gap: 11px;

}


.insuranceFinalCtaPrefix span {

    width: 32px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.insuranceFinalCtaPrefix p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


/* =========================================================
   TYPOGRAPHIC DETAILS
========================================================= */

.insuranceFinalCtaDetails {

    display: flex;

    flex-direction: column;

    gap: 13px;

}


.insuranceFinalCtaDetails span {

    color: var(--primary);

    opacity: .30;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 2px;

}


.insuranceFinalCtaDetails span:nth-child(2) {

    color: #c59a32;

    opacity: .70;

}


/* =========================================================
   VERTICAL DIVIDER
========================================================= */

.insuranceFinalCtaDivider {

    width: 1px;

    min-height: 380px;

    background: rgba(197,154,50,.30);

}


/* =========================================================
   RIGHT CONTENT
========================================================= */

.insuranceFinalCtaContent {

    max-width: 760px;

    align-self: center;

}


.insuranceFinalCtaContent h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(42px, 5vw, 63px);

    line-height: 1.05;

    letter-spacing: -2.2px;

    font-weight: 600;

}


.insuranceFinalCtaContent h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


.insuranceFinalCtaContent > p {

    max-width: 690px;

    margin: 28px 0 0;

    color: var(--text);

    opacity: .68;

    font-size: 12px;

    line-height: 1.88;

}


/* =========================================================
   BUTTONS
========================================================= */

.insuranceFinalCtaButtons {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 11px;

    margin-top: 34px;

}


.insuranceFinalCtaPrimary,
.insuranceFinalCtaSecondary {

    min-height: 54px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    text-decoration: none;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease;

}


/* PRIMARY */

.insuranceFinalCtaPrimary {

    gap: 13px;

    padding: 0 25px;

    background: #c59a32;

    border: 1px solid #c59a32;

    color: #fff;

    font-size: 10px;

    line-height: 1.4;

    font-weight: 700;

}


.insuranceFinalCtaPrimary i {

    font-size: 9px;

    transition: transform .25s ease;

}


.insuranceFinalCtaPrimary:hover {

    background: transparent;

    color: #c59a32;

}


.insuranceFinalCtaPrimary:hover i {

    transform: translateX(4px);

}


/* SECONDARY */

.insuranceFinalCtaSecondary {

    padding: 0 25px;

    border: 1px solid rgba(197,154,50,.34);

    color: var(--primary);

    font-size: 10px;

    line-height: 1.4;

    font-weight: 600;

}


.insuranceFinalCtaSecondary:hover {

    color: #c59a32;

    border-color: #c59a32;

}


/* =========================================================
   BOTTOM LINE
========================================================= */

.insuranceFinalCtaBottom {

    width: min(1180px, calc(100% - 48px));

    margin: 72px auto 0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

}


.insuranceFinalCtaBottom > span {

    width: 28px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.insuranceFinalCtaBottom p {

    margin: 0;

    color: var(--text);

    opacity: .44;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1.1px;

    text-align: center;

}


.insuranceFinalCtaBottom b {

    padding: 0 6px;

    color: #c59a32;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .insuranceFinalCta {

        padding: 95px 0 75px;

    }

    .insuranceFinalCtaContainer {

        grid-template-columns:
            200px
            1px
            minmax(0, 1fr);

        column-gap: 45px;

    }

    .insuranceFinalCtaContent h2 {

        font-size: clamp(40px, 5.5vw, 56px);

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 780px) {

    .insuranceFinalCta {

        padding: 85px 0 65px;

    }

    .insuranceFinalCtaContainer {

        grid-template-columns: 1fr;

        gap: 34px;

    }

    .insuranceFinalCtaEditorial {

        min-height: auto;

    }

    .insuranceFinalCtaDetails {

        flex-direction: row;

        flex-wrap: wrap;

        gap: 10px 25px;

        margin-top: 25px;

    }

    .insuranceFinalCtaDivider {

        display: none;

    }

    .insuranceFinalCtaContent {

        max-width: 800px;

        padding-top: 30px;

        border-top: 1px solid rgba(197,154,50,.30);

    }

    .insuranceFinalCtaContent h2 {

        font-size: clamp(40px, 7vw, 54px);

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .insuranceFinalCta {

        padding: 65px 0 50px;

    }

    .insuranceFinalCtaContainer {

        width: calc(100% - 30px);

        gap: 27px;

    }

    .insuranceFinalCtaDetails {

        gap: 9px 20px;

    }

    .insuranceFinalCtaContent {

        padding-top: 25px;

    }

    .insuranceFinalCtaContent h2 {

        font-size: clamp(34px, 10vw, 44px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }

    .insuranceFinalCtaContent > p {

        margin-top: 21px;

        font-size: 10px;

        line-height: 1.8;

    }

    .insuranceFinalCtaButtons {

        flex-direction: column;

        align-items: stretch;

        gap: 9px;

        margin-top: 27px;

    }

    .insuranceFinalCtaPrimary,
    .insuranceFinalCtaSecondary {

        width: 100%;

        min-height: 52px;

        padding: 0 18px;

    }

    .insuranceFinalCtaBottom {

        width: calc(100% - 30px);

        margin-top: 40px;

        justify-content: flex-start;

        overflow: hidden;

    }

    .insuranceFinalCtaBottom p {

        white-space: nowrap;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .insuranceFinalCta {

        padding: 55px 0 45px;

    }

    .insuranceFinalCtaContainer {

        width: calc(100% - 26px);

    }

    .insuranceFinalCtaContent h2 {

        font-size: 33px;

    }

    .insuranceFinalCtaContent > p {

        font-size: 9px;

    }

    .insuranceFinalCtaBottom {

        width: calc(100% - 26px);

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .insuranceFinalCtaContainer {

        width: calc(100% - 22px);

    }

    .insuranceFinalCtaContent h2 {

        font-size: 30px;

    }

    .insuranceFinalCtaBottom {

        width: calc(100% - 22px);

    }

}

/* CTA Section Ends Here */

/* Insurance Policies Page Ends Here */


/* Wealth Basket Page Starts Here */

/* Hero Section Starts Here */

/* =========================================================
   WEALTH BASKET HERO — EDITORIAL VERSION
========================================================= */

.wbHero {

    position: relative;

    width: 100%;

    min-height: 720px;

    display: flex;

    align-items: center;

    padding: 95px 0;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


/* =========================================================
   MAIN WRAPPER
========================================================= */

.wbHeroWrap {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(400px, .95fr);

    align-items: center;

    gap: clamp(60px, 8vw, 110px);

}


/* =========================================================
   LEFT CONTENT
========================================================= */

.wbHeroLeft {

    max-width: 700px;

    min-width: 0;

}


.wbHeroPrefix {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 22px;

}


.wbHeroPrefix span {

    width: 32px;

    height: 2px;

    background: #c59a32;

    flex-shrink: 0;

}


.wbHeroPrefix p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.6px;

    text-transform: uppercase;

}


/* =========================================================
   HEADING
========================================================= */

.wbHeroLeft h1 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(42px, 5vw, 65px);

    line-height: 1.04;

    letter-spacing: -2.4px;

    font-weight: 600;

}


.wbHeroLeft h1 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   TEXT
========================================================= */

.wbHeroText {

    max-width: 650px;

    margin: 27px 0 0;

    color: var(--text);

    opacity: .70;

    font-size: 12px;

    line-height: 1.88;

}


.wbHeroText + .wbHeroText {

    margin-top: 14px;

}


/* =========================================================
   BUTTONS
========================================================= */

.wbHeroButtons {

    display: flex;

    flex-wrap: wrap;

    gap: 11px;

    margin-top: 34px;

}


.wbHeroBtn {

    min-height: 54px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    padding: 0 24px;

    text-decoration: none;

    font-size: 10px;

    line-height: 1.4;

    font-weight: 700;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease;

}


.wbHeroBtnPrimary {

    gap: 13px;

    background: #c59a32;

    border: 1px solid #c59a32;

    color: #fff;

}


.wbHeroBtnPrimary i {

    font-size: 9px;

    transition: transform .25s ease;

}


.wbHeroBtnPrimary:hover {

    background: transparent;

    color: #c59a32;

}


.wbHeroBtnPrimary:hover i {

    transform: translateX(4px);

}


.wbHeroBtnSecondary {

    border: 1px solid rgba(197,154,50,.40);

    color: var(--primary);

}


.wbHeroBtnSecondary:hover {

    border-color: #c59a32;

    color: #c59a32;

}


/* =========================================================
   RIGHT EDITORIAL AREA
========================================================= */

.wbHeroRight {

    min-width: 0;

}


.wbHeroEditorial {

    position: relative;

    min-height: 515px;

    padding: 28px 30px;

    box-sizing: border-box;

    border-left: 1px solid rgba(197,154,50,.40);

    display: flex;

    flex-direction: column;

}


/* =========================================================
   TOP META
========================================================= */

.wbHeroTopMeta {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-bottom: 18px;

    border-bottom: 1px solid rgba(197,154,50,.18);

}


.wbHeroTopMeta span {

    color: var(--text);

    opacity: .42;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.wbHeroTopMeta span:first-child {

    color: #c59a32;

    opacity: .78;

}


/* =========================================================
   WORDMARK
========================================================= */

.wbHeroWordmark {

    position: relative;

    margin-top: 75px;

}


.wbHeroGhost {

    position: absolute;

    top: -43px;

    left: -4px;

    color: var(--text);

    opacity: .035;

    font-size: clamp(70px, 9vw, 125px);

    line-height: 1;

    letter-spacing: -6px;

    font-weight: 700;

    white-space: nowrap;

    pointer-events: none;

}


.wbHeroMainWord {

    position: relative;

    color: var(--primary);

    font-size: clamp(48px, 6vw, 76px);

    line-height: .95;

    letter-spacing: -3px;

    font-weight: 600;

}


.wbHeroGoldWord {

    position: relative;

    margin-top: 7px;

    color: #c59a32;

    font-size: clamp(48px, 6vw, 76px);

    line-height: .95;

    letter-spacing: -3px;

    font-weight: 600;

}


/* =========================================================
   GOLD ACCENT
========================================================= */

.wbHeroAccentLine {

    width: 55px;

    height: 2px;

    margin-top: 30px;

    background: #c59a32;

}


/* =========================================================
   SMALL DESCRIPTION
========================================================= */

.wbHeroDescription {

    margin-top: 27px;

    max-width: 310px;

}


.wbHeroDescription span {

    display: block;

    margin-bottom: 8px;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.2px;

}


.wbHeroDescription p {

    margin: 0;

    color: var(--text);

    opacity: .56;

    font-size: 10px;

    line-height: 1.75;

}


/* =========================================================
   KEYWORDS
========================================================= */

.wbHeroKeywords {

    display: flex;

    flex-wrap: wrap;

    gap: 9px 22px;

    margin-top: 27px;

}


.wbHeroKeywords span {

    color: var(--text);

    opacity: .38;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.wbHeroKeywords span:first-child {

    color: #c59a32;

    opacity: .72;

}


/* =========================================================
   BOTTOM META
========================================================= */

.wbHeroBottomMeta {

    margin-top: auto;

    padding-top: 20px;

    border-top: 1px solid rgba(197,154,50,.18);

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;

}


.wbHeroBottomMeta span {

    color: var(--text);

    opacity: .40;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: .9px;

}


.wbHeroBottomMeta span:first-child {

    color: #c59a32;

    opacity: .75;

}


.wbHeroBottomMeta b {

    color: #c59a32;

    opacity: .75;

    font-size: 9px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .wbHero {

        min-height: auto;

        padding: 90px 0;

    }

    .wbHeroWrap {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(350px, .9fr);

        gap: 55px;

    }

    .wbHeroLeft h1 {

        font-size: clamp(40px, 5.5vw, 57px);

    }

    .wbHeroEditorial {

        min-height: 475px;

        padding: 25px;

    }

}


/* =========================================================
   TABLET / STACK
========================================================= */

@media (max-width: 800px) {

    .wbHero {

        padding: 80px 0 70px;

    }

    .wbHeroWrap {

        grid-template-columns: 1fr;

        gap: 55px;

    }

    .wbHeroLeft {

        max-width: 760px;

    }

    .wbHeroLeft h1 {

        font-size: clamp(40px, 7vw, 55px);

    }

    .wbHeroRight {

        max-width: 700px;

    }

    .wbHeroEditorial {

        min-height: 460px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .wbHero {

        padding: 65px 0 55px;

    }

    .wbHeroWrap {

        width: calc(100% - 30px);

        gap: 42px;

    }

    .wbHeroPrefix {

        margin-bottom: 18px;

    }

    .wbHeroLeft h1 {

        font-size: clamp(34px, 10vw, 44px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }

    .wbHeroText {

        margin-top: 21px;

        font-size: 10px;

        line-height: 1.8;

    }

    .wbHeroText + .wbHeroText {

        margin-top: 12px;

    }

    .wbHeroButtons {

        flex-direction: column;

        align-items: stretch;

        margin-top: 27px;

        gap: 9px;

    }

    .wbHeroBtn {

        width: 100%;

        min-height: 52px;

    }

    .wbHeroEditorial {

        min-height: 405px;

        padding: 20px;

        border-left: 1px solid rgba(197,154,50,.40);

    }

    .wbHeroWordmark {

        margin-top: 55px;

    }

    .wbHeroGhost {

        top: -28px;

        font-size: 72px;

        letter-spacing: -4px;

    }

    .wbHeroMainWord,
    .wbHeroGoldWord {

        font-size: 48px;

        letter-spacing: -2px;

    }

    .wbHeroAccentLine {

        margin-top: 24px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .wbHero {

        padding: 55px 0 48px;

    }

    .wbHeroWrap {

        width: calc(100% - 26px);

    }

    .wbHeroLeft h1 {

        font-size: 33px;

    }

    .wbHeroText {

        font-size: 9px;

    }

    .wbHeroEditorial {

        min-height: 370px;

        padding: 17px;

    }

    .wbHeroMainWord,
    .wbHeroGoldWord {

        font-size: 42px;

    }

    .wbHeroGhost {

        font-size: 62px;

    }

    .wbHeroDescription p {

        font-size: 9px;

    }

}


/* =========================================================
   VERY SMALL
========================================================= */

@media (max-width: 340px) {

    .wbHeroWrap {

        width: calc(100% - 22px);

    }

    .wbHeroLeft h1 {

        font-size: 30px;

    }

    .wbHeroEditorial {

        min-height: 345px;

        padding: 15px;

    }

    .wbHeroMainWord,
    .wbHeroGoldWord {

        font-size: 37px;

    }

    .wbHeroGhost {

        font-size: 54px;

    }

}

/* Hero Section Ends Here */

/* Intro Section Starts Here */

/* =========================================================
   WEALTH BASKET INTRODUCTION
========================================================= */

.wealthBasketIntro {

    position: relative;

    width: 100%;

    padding: 110px 0 90px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.wealthBasketIntroContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(350px, .92fr);

    align-items: start;

    gap: clamp(55px, 8vw, 105px);

}


/* =========================================================
   LEFT EDITORIAL
========================================================= */

.wealthBasketIntroMain {

    max-width: 690px;

    min-width: 0;

}


.wealthBasketIntroEyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 21px;

}


.wealthBasketIntroEyebrow span {

    width: 31px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.wealthBasketIntroEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


/* =========================================================
   HEADING
========================================================= */

.wealthBasketIntroMain h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.7vw, 60px);

    line-height: 1.06;

    letter-spacing: -2px;

    font-weight: 600;

}


.wealthBasketIntroMain h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   BODY CONTENT
========================================================= */

.wealthBasketIntroContent {

    max-width: 650px;

    margin-top: 29px;

}


.wealthBasketIntroContent p {

    margin: 0 0 17px;

    color: var(--text);

    opacity: .69;

    font-size: 12px;

    line-height: 1.88;

}


.wealthBasketIntroContent p:last-child {

    margin-bottom: 0;

}


/* =========================================================
   RIGHT HIGHLIGHTS
========================================================= */

.wealthBasketIntroHighlights {

    width: 100%;

    border-top: 1px solid rgba(197,154,50,.34);

}


/* =========================================================
   HIGHLIGHT ROW
========================================================= */

.wealthBasketIntroHighlight {

    display: grid;

    grid-template-columns: 42px minmax(0, 1fr);

    gap: 22px;

    padding: 27px 0 29px;

    border-bottom: 1px solid rgba(197,154,50,.34);

}


.wealthBasketIntroNumber {

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    border: 1px solid rgba(197,154,50,.48);

    color: #c59a32;

    font-size: 9px;

    line-height: 1;

    font-weight: 700;

}


/* =========================================================
   HIGHLIGHT CONTENT
========================================================= */

.wealthBasketIntroHighlightContent {

    min-width: 0;

}


.wealthBasketIntroHighlightTop {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 9px;

}


.wealthBasketIntroHighlightTop h3 {

    margin: 0;

    color: var(--primary);

    font-size: 19px;

    line-height: 1.35;

    font-weight: 600;

}


.wealthBasketIntroHighlightTop span {

    flex-shrink: 0;

    padding-top: 3px;

    color: #c59a32;

    opacity: .58;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1px;

}


.wealthBasketIntroHighlightContent p {

    max-width: 430px;

    margin: 0;

    color: var(--text);

    opacity: .66;

    font-size: 11px;

    line-height: 1.82;

}


/* =========================================================
   BOTTOM IDENTITY
========================================================= */

.wealthBasketIntroBottom {

    width: min(1180px, calc(100% - 48px));

    margin: 68px auto 0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

}


.wealthBasketIntroBottom > span {

    width: 28px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.wealthBasketIntroBottom p {

    margin: 0;

    color: var(--text);

    opacity: .44;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.wealthBasketIntroBottom b {

    padding: 0 7px;

    color: #c59a32;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .wealthBasketIntro {

        padding: 90px 0 80px;

    }

    .wealthBasketIntroContainer {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(320px, .85fr);

        gap: 55px;

    }

    .wealthBasketIntroMain h2 {

        font-size: clamp(38px, 5vw, 54px);

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

    .wealthBasketIntro {

        padding: 80px 0 70px;

    }

    .wealthBasketIntroContainer {

        grid-template-columns: 1fr;

        gap: 50px;

    }

    .wealthBasketIntroMain {

        max-width: 760px;

    }

    .wealthBasketIntroMain h2 {

        font-size: clamp(40px, 7vw, 55px);

    }

    .wealthBasketIntroContent {

        max-width: 720px;

    }

    .wealthBasketIntroHighlights {

        max-width: 720px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .wealthBasketIntro {

        padding: 65px 0 55px;

    }

    .wealthBasketIntroContainer {

        width: calc(100% - 30px);

        gap: 40px;

    }

    .wealthBasketIntroEyebrow {

        margin-bottom: 18px;

    }

    .wealthBasketIntroMain h2 {

        font-size: clamp(34px, 10vw, 44px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }

    .wealthBasketIntroContent {

        margin-top: 22px;

    }

    .wealthBasketIntroContent p {

        font-size: 10px;

        line-height: 1.8;

    }

    .wealthBasketIntroHighlight {

        grid-template-columns: 36px minmax(0, 1fr);

        gap: 14px;

        padding: 23px 0 25px;

    }

    .wealthBasketIntroNumber {

        width: 31px;

        height: 31px;

    }

    .wealthBasketIntroHighlightTop {

        display: block;

        margin-bottom: 8px;

    }

    .wealthBasketIntroHighlightTop h3 {

        font-size: 16px;

    }

    .wealthBasketIntroHighlightTop span {

        display: block;

        margin-top: 7px;

        padding-top: 0;

    }

    .wealthBasketIntroHighlightContent p {

        font-size: 10px;

        line-height: 1.75;

    }

    .wealthBasketIntroBottom {

        width: calc(100% - 30px);

        margin-top: 38px;

        justify-content: flex-start;

        overflow: hidden;

    }

    .wealthBasketIntroBottom p {

        white-space: nowrap;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .wealthBasketIntro {

        padding: 55px 0 48px;

    }

    .wealthBasketIntroContainer {

        width: calc(100% - 26px);

    }

    .wealthBasketIntroMain h2 {

        font-size: 33px;

    }

    .wealthBasketIntroContent p {

        font-size: 9px;

    }

    .wealthBasketIntroHighlight {

        grid-template-columns: 34px minmax(0, 1fr);

        gap: 12px;

    }

    .wealthBasketIntroNumber {

        width: 29px;

        height: 29px;

    }

    .wealthBasketIntroHighlightTop h3 {

        font-size: 15px;

    }

    .wealthBasketIntroHighlightContent p {

        font-size: 9px;

    }

    .wealthBasketIntroBottom {

        width: calc(100% - 26px);

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .wealthBasketIntroContainer {

        width: calc(100% - 22px);

    }

    .wealthBasketIntroMain h2 {

        font-size: 30px;

    }

    .wealthBasketIntroHighlightContent p {

        font-size: 9px;

    }

    .wealthBasketIntroBottom {

        width: calc(100% - 22px);

    }

}

/* Intro Section Ends Here */

/* Matters Section Starts Here */

/* =========================================================
   WEALTH BASKET — WHY IT MATTERS
========================================================= */

.wealthBasketWhy {

    position: relative;

    width: 100%;

    padding: 115px 0 90px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.wealthBasketWhyContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, .82fr)
        minmax(0, 1.18fr);

    align-items: start;

    gap: clamp(60px, 9vw, 120px);

}


/* =========================================================
   LEFT EDITORIAL
========================================================= */

.wealthBasketWhyIntro {

    position: relative;

    max-width: 500px;

    padding-left: 28px;

    box-sizing: border-box;

}


/* GOLD VERTICAL ACCENT */

.wealthBasketWhyAccent {

    position: absolute;

    left: 0;

    top: 3px;

    width: 2px;

    height: 135px;

    background: #c59a32;

    opacity: .85;

}


/* EYEBROW */

.wealthBasketWhyEyebrow {

    margin-bottom: 21px;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


/* HEADING */

.wealthBasketWhyIntro h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.6vw, 59px);

    line-height: 1.06;

    letter-spacing: -2px;

    font-weight: 600;

}


.wealthBasketWhyIntro h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


/* INTRO TEXT */

.wealthBasketWhyIntro > p {

    max-width: 430px;

    margin: 28px 0 0;

    color: var(--text);

    opacity: .64;

    font-size: 11px;

    line-height: 1.85;

}


/* =========================================================
   RIGHT LIST
========================================================= */

.wealthBasketWhyList {

    width: 100%;

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    border-top: 1px solid rgba(197,154,50,.34);

}


/* =========================================================
   ITEM
========================================================= */

.wealthBasketWhyItem {

    position: relative;

    min-height: 185px;

    padding: 27px 28px 27px 0;

    box-sizing: border-box;

    border-bottom: 1px solid rgba(197,154,50,.30);

}


.wealthBasketWhyItem:nth-child(odd) {

    padding-right: 30px;

    border-right: 1px solid rgba(197,154,50,.25);

}


.wealthBasketWhyItem:nth-child(even) {

    padding-left: 30px;

}


/* =========================================================
   NUMBER
========================================================= */

.wealthBasketWhyNumber {

    margin-bottom: 20px;

    color: #c59a32;

    opacity: .75;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1px;

}


/* =========================================================
   CONTENT
========================================================= */

.wealthBasketWhyContent h3 {

    margin: 0 0 9px;

    color: var(--primary);

    font-size: 18px;

    line-height: 1.35;

    font-weight: 600;

}


.wealthBasketWhyContent p {

    max-width: 360px;

    margin: 0;

    color: var(--text);

    opacity: .64;

    font-size: 10px;

    line-height: 1.82;

}


/* =========================================================
   SUBTLE HOVER
========================================================= */

.wealthBasketWhyItem {

    transition:
        background .25s ease,
        padding .25s ease;

}


.wealthBasketWhyItem:hover {

    background: rgba(197,154,50,.025);

}


/* =========================================================
   BOTTOM
========================================================= */

.wealthBasketWhyBottom {

    width: min(1180px, calc(100% - 48px));

    margin: 70px auto 0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

}


.wealthBasketWhyBottom > span {

    width: 29px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.wealthBasketWhyBottom p {

    margin: 0;

    color: var(--text);

    opacity: .40;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.wealthBasketWhyBottom b {

    padding: 0 7px;

    color: #c59a32;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .wealthBasketWhy {

        padding: 90px 0 80px;

    }

    .wealthBasketWhyContainer {

        gap: 55px;

    }

    .wealthBasketWhyIntro h2 {

        font-size: clamp(38px, 5vw, 53px);

    }

    .wealthBasketWhyItem {

        min-height: 175px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

    .wealthBasketWhy {

        padding: 80px 0 70px;

    }

    .wealthBasketWhyContainer {

        grid-template-columns: 1fr;

        gap: 55px;

    }

    .wealthBasketWhyIntro {

        max-width: 700px;

    }

    .wealthBasketWhyIntro h2 {

        font-size: clamp(40px, 7vw, 55px);

    }

    .wealthBasketWhyIntro > p {

        max-width: 600px;

    }

    .wealthBasketWhyList {

        max-width: 720px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .wealthBasketWhy {

        padding: 65px 0 55px;

    }

    .wealthBasketWhyContainer {

        width: calc(100% - 30px);

        gap: 42px;

    }

    .wealthBasketWhyIntro {

        padding-left: 21px;

    }

    .wealthBasketWhyAccent {

        height: 110px;

    }

    .wealthBasketWhyEyebrow {

        margin-bottom: 18px;

    }

    .wealthBasketWhyIntro h2 {

        font-size: clamp(34px, 10vw, 44px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }

    .wealthBasketWhyIntro > p {

        margin-top: 21px;

        font-size: 10px;

        line-height: 1.8;

    }


    /* SINGLE COLUMN */

    .wealthBasketWhyList {

        grid-template-columns: 1fr;

    }


    .wealthBasketWhyItem,
    .wealthBasketWhyItem:nth-child(odd),
    .wealthBasketWhyItem:nth-child(even) {

        min-height: auto;

        padding: 23px 0 25px;

        border-right: 0;

        border-bottom: 1px solid rgba(197,154,50,.30);

    }


    .wealthBasketWhyNumber {

        margin-bottom: 10px;

    }

    .wealthBasketWhyContent h3 {

        font-size: 16px;

        line-height: 1.35;

    }

    .wealthBasketWhyContent p {

        max-width: 600px;

        font-size: 10px;

        line-height: 1.78;

    }

    .wealthBasketWhyBottom {

        width: calc(100% - 30px);

        margin-top: 40px;

        justify-content: flex-start;

        overflow: hidden;

    }

    .wealthBasketWhyBottom p {

        white-space: nowrap;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .wealthBasketWhy {

        padding: 55px 0 48px;

    }

    .wealthBasketWhyContainer {

        width: calc(100% - 26px);

    }

    .wealthBasketWhyIntro {

        padding-left: 18px;

    }

    .wealthBasketWhyAccent {

        height: 95px;

    }

    .wealthBasketWhyIntro h2 {

        font-size: 33px;

    }

    .wealthBasketWhyIntro > p {

        font-size: 9px;

    }

    .wealthBasketWhyContent h3 {

        font-size: 15px;

    }

    .wealthBasketWhyContent p {

        font-size: 9px;

        line-height: 1.75;

    }

    .wealthBasketWhyBottom {

        width: calc(100% - 26px);

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .wealthBasketWhyContainer {

        width: calc(100% - 22px);

    }

    .wealthBasketWhyIntro h2 {

        font-size: 30px;

    }

    .wealthBasketWhyBottom {

        width: calc(100% - 22px);

    }

}

/* Matters Section Ends Here */

/* Approach Section Starts Here */

/* =========================================================
   WEALTH BASKET APPROACH
========================================================= */

.wbApproach {

    position: relative;

    width: 100%;

    padding: 115px 0 90px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.wbApproachContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   HEADER
========================================================= */

.wbApproachHeader {

    max-width: 850px;

    margin-bottom: 62px;

}


.wbApproachEyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 21px;

}


.wbApproachEyebrow span {

    width: 31px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.wbApproachEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.wbApproachHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.8vw, 60px);

    line-height: 1.06;

    letter-spacing: -2px;

    font-weight: 600;

}


.wbApproachHeader h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   MAIN
========================================================= */

.wbApproachMain {

    display: grid;

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(310px, .75fr);

    gap: clamp(50px, 7vw, 95px);

    align-items: stretch;

}


/* =========================================================
   SIX STEPS
========================================================= */

.wbApproachSteps {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    border-top: 1px solid rgba(197,154,50,.34);

    border-left: 1px solid rgba(197,154,50,.18);

}


.wbApproachStep {

    min-width: 0;

    min-height: 205px;

    padding: 25px 28px 28px;

    box-sizing: border-box;

    border-right: 1px solid rgba(197,154,50,.25);

    border-bottom: 1px solid rgba(197,154,50,.30);

    transition: background .25s ease;

}


.wbApproachStep:hover {

    background: rgba(197,154,50,.025);

}


/* =========================================================
   STEP TOP
========================================================= */

.wbApproachStepTop {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 23px;

}


.wbApproachStepTop span {

    color: #c59a32;

    opacity: .78;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1px;

}


.wbApproachStepTop small {

    color: var(--text);

    opacity: .34;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1px;

}


/* =========================================================
   STEP CONTENT
========================================================= */

.wbApproachStep h3 {

    margin: 0 0 10px;

    color: var(--primary);

    font-size: 21px;

    line-height: 1.3;

    font-weight: 600;

}


.wbApproachStep p {

    max-width: 430px;

    margin: 0;

    color: var(--text);

    opacity: .64;

    font-size: 10px;

    line-height: 1.82;

}


/* =========================================================
   RIGHT TYPOGRAPHIC VISUAL
========================================================= */

.wbApproachVisual {

    position: relative;

    min-width: 0;

    display: flex;

    align-items: stretch;

}


.wbApproachVisualInner {

    position: relative;

    width: 100%;

    min-height: 100%;

    padding: 28px;

    box-sizing: border-box;

    border: 1px solid rgba(197,154,50,.30);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;

}


/* subtle framing */

.wbApproachVisualInner::before {

    content: "";

    position: absolute;

    top: 9px;

    left: 9px;

    right: -9px;

    bottom: -9px;

    border: 1px solid rgba(197,154,50,.08);

    pointer-events: none;

}


/* =========================================================
   VISUAL META
========================================================= */

.wbApproachVisualMeta {

    position: relative;

    z-index: 2;

    color: #c59a32;

    opacity: .70;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.1px;

}


/* =========================================================
   WORDMARK
========================================================= */

.wbApproachWordmark {

    position: relative;

    z-index: 2;

    margin-top: 75px;

}


.wbApproachWordmark span,
.wbApproachWordmark strong {

    display: block;

    font-size: clamp(43px, 5vw, 67px);

    line-height: .92;

    letter-spacing: -2.5px;

    font-weight: 600;

}


.wbApproachWordmark span {

    color: var(--primary);

}


.wbApproachWordmark strong {

    margin-top: 5px;

    color: #c59a32;

}


/* =========================================================
   RULE
========================================================= */

.wbApproachRule {

    position: relative;

    z-index: 2;

    width: 55px;

    height: 2px;

    margin-top: 30px;

    background: #c59a32;

}


/* =========================================================
   TERMS
========================================================= */

.wbApproachTerms {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-top: 28px;

}


.wbApproachTerms span {

    color: var(--text);

    opacity: .34;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.4px;

}


.wbApproachTerms span.gold {

    color: #c59a32;

    opacity: .75;

}


/* =========================================================
   VISUAL TEXT
========================================================= */

.wbApproachVisualText {

    position: relative;

    z-index: 2;

    max-width: 300px;

    margin: auto 0 0;

    padding-top: 25px;

    border-top: 1px solid rgba(197,154,50,.20);

    color: var(--text);

    opacity: .42;

    font-size: 9px;

    line-height: 1.7;

    font-weight: 700;

    letter-spacing: 1px;

}


.wbApproachVisualText b {

    color: #c59a32;

    padding: 0 5px;

}


/* =========================================================
   BOTTOM PROCESS
========================================================= */

.wbApproachBottom {

    margin-top: 68px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

}


.wbApproachBottom > span {

    width: 29px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.wbApproachBottom p {

    margin: 0;

    color: var(--text);

    opacity: .42;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1px;

    text-align: center;

}


.wbApproachBottom b {

    padding: 0 6px;

    color: #c59a32;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .wbApproach {

        padding: 90px 0 80px;

    }

    .wbApproachMain {

        grid-template-columns:
            minmax(0, 1.35fr)
            minmax(290px, .75fr);

        gap: 50px;

    }

    .wbApproachStep {

        padding: 23px 22px 25px;

    }

    .wbApproachWordmark span,
    .wbApproachWordmark strong {

        font-size: 47px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

    .wbApproach {

        padding: 80px 0 70px;

    }

    .wbApproachHeader {

        margin-bottom: 48px;

    }

    .wbApproachMain {

        grid-template-columns: 1fr;

        gap: 45px;

    }

    .wbApproachVisual {

        max-width: 650px;

        min-height: 400px;

    }

    .wbApproachVisualInner {

        min-height: 430px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .wbApproach {

        padding: 65px 0 55px;

    }

    .wbApproachContainer {

        width: calc(100% - 30px);

    }

    .wbApproachEyebrow {

        margin-bottom: 18px;

    }

    .wbApproachHeader h2 {

        font-size: clamp(34px, 10vw, 44px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }


    /* ONE COLUMN STEPS */

    .wbApproachSteps {

        grid-template-columns: 1fr;

    }

    .wbApproachStep {

        min-height: auto;

        padding: 22px 18px 25px;

    }

    .wbApproachStepTop {

        margin-bottom: 17px;

    }

    .wbApproachStep h3 {

        font-size: 17px;

    }

    .wbApproachStep p {

        font-size: 10px;

        line-height: 1.78;

    }


    /* VISUAL */

    .wbApproachVisual {

        min-height: 370px;

    }

    .wbApproachVisualInner {

        min-height: 370px;

        padding: 20px;

    }

    .wbApproachWordmark {

        margin-top: 48px;

    }

    .wbApproachWordmark span,
    .wbApproachWordmark strong {

        font-size: 43px;

    }

    .wbApproachTerms {

        gap: 10px;

    }

    .wbApproachBottom {

        margin-top: 40px;

        justify-content: flex-start;

        overflow: hidden;

    }

    .wbApproachBottom p {

        white-space: nowrap;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .wbApproach {

        padding: 55px 0 48px;

    }

    .wbApproachContainer {

        width: calc(100% - 26px);

    }

    .wbApproachHeader h2 {

        font-size: 33px;

    }

    .wbApproachStep {

        padding: 20px 15px 23px;

    }

    .wbApproachStep h3 {

        font-size: 15px;

    }

    .wbApproachStep p {

        font-size: 9px;

    }

    .wbApproachVisualInner {

        min-height: 345px;

        padding: 17px;

    }

    .wbApproachWordmark span,
    .wbApproachWordmark strong {

        font-size: 38px;

    }

    .wbApproachTerms span {

        font-size: 9px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .wbApproachContainer {

        width: calc(100% - 22px);

    }

    .wbApproachHeader h2 {

        font-size: 30px;

    }

    .wbApproachVisualInner {

        min-height: 325px;

    }

    .wbApproachWordmark span,
    .wbApproachWordmark strong {

        font-size: 34px;

    }

}

/* Approach Section Ends Here */

/* Strategies Section Starts Here */

/* =========================================================
   WEALTH BASKET STRATEGIES
========================================================= */

.wbStrategies {

    position: relative;

    width: 100%;

    padding: 115px 0 90px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.wbStrategiesContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   HEADER
========================================================= */

.wbStrategiesHeader {

    max-width: 800px;

    margin-bottom: 65px;

}


.wbStrategiesEyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 21px;

}


.wbStrategiesEyebrow span {

    width: 31px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.wbStrategiesEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.wbStrategiesHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.8vw, 60px);

    line-height: 1.06;

    letter-spacing: -2px;

    font-weight: 600;

}


.wbStrategiesHeader h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   GRID
========================================================= */

.wbStrategiesGrid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    border-top: 1px solid rgba(197,154,50,.34);

    border-left: 1px solid rgba(197,154,50,.15);

}


/* =========================================================
   STRATEGY ITEM
========================================================= */

.wbStrategyItem {

    position: relative;

    min-height: 275px;

    padding: 30px 34px 34px;

    box-sizing: border-box;

    border-right: 1px solid rgba(197,154,50,.27);

    border-bottom: 1px solid rgba(197,154,50,.30);

    transition: background .25s ease;

}


.wbStrategyItem:hover {

    background: rgba(197,154,50,.025);

}


/* =========================================================
   TOP
========================================================= */

.wbStrategyTop {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 42px;

}


.wbStrategyNumber {

    color: #c59a32;

    font-size: 10px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.wbStrategyCategory {

    color: var(--text);

    opacity: .34;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.2px;

}


/* =========================================================
   TITLE
========================================================= */

.wbStrategyItem h3 {

    max-width: 500px;

    margin: 0 0 13px;

    color: var(--primary);

    font-size: 23px;

    line-height: 1.28;

    letter-spacing: -.3px;

    font-weight: 600;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.wbStrategyItem p {

    max-width: 500px;

    margin: 0;

    color: var(--text);

    opacity: .64;

    font-size: 11px;

    line-height: 1.82;

}


/* =========================================================
   BOTTOM
========================================================= */

.wbStrategiesBottom {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    margin-top: 68px;

}


.wbStrategiesBottom > span {

    width: 29px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.wbStrategiesBottom p {

    margin: 0;

    color: var(--text);

    opacity: .40;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.wbStrategiesBottom b {

    padding: 0 7px;

    color: #c59a32;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .wbStrategies {

        padding: 90px 0 80px;

    }

    .wbStrategyItem {

        min-height: 265px;

        padding: 27px 28px 30px;

    }

    .wbStrategyItem h3 {

        font-size: 21px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 760px) {

    .wbStrategies {

        padding: 80px 0 70px;

    }

    .wbStrategiesHeader {

        margin-bottom: 48px;

    }

    .wbStrategiesHeader h2 {

        font-size: clamp(40px, 7vw, 55px);

    }

    .wbStrategyItem {

        min-height: 250px;

    }

    .wbStrategyTop {

        margin-bottom: 32px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .wbStrategies {

        padding: 65px 0 55px;

    }

    .wbStrategiesContainer {

        width: calc(100% - 30px);

    }

    .wbStrategiesEyebrow {

        margin-bottom: 18px;

    }

    .wbStrategiesHeader {

        margin-bottom: 40px;

    }

    .wbStrategiesHeader h2 {

        font-size: clamp(34px, 10vw, 44px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }


    /* ONE COLUMN */

    .wbStrategiesGrid {

        grid-template-columns: 1fr;

    }


    .wbStrategyItem {

        min-height: auto;

        padding: 24px 19px 28px;

    }


    .wbStrategyTop {

        margin-bottom: 25px;

    }


    .wbStrategyNumber {

        font-size: 9px;

    }


    .wbStrategyItem h3 {

        margin-bottom: 10px;

        font-size: 17px;

        line-height: 1.35;

    }


    .wbStrategyItem p {

        font-size: 10px;

        line-height: 1.78;

    }


    .wbStrategiesBottom {

        margin-top: 40px;

        justify-content: flex-start;

        overflow: hidden;

    }


    .wbStrategiesBottom p {

        white-space: nowrap;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .wbStrategies {

        padding: 55px 0 48px;

    }

    .wbStrategiesContainer {

        width: calc(100% - 26px);

    }

    .wbStrategiesHeader h2 {

        font-size: 33px;

    }

    .wbStrategyItem {

        padding: 21px 15px 24px;

    }

    .wbStrategyItem h3 {

        font-size: 15px;

    }

    .wbStrategyItem p {

        font-size: 9px;

        line-height: 1.75;

    }

    .wbStrategyCategory {

        font-size: 9px;

    }

    .wbStrategiesBottom {

        margin-top: 35px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .wbStrategiesContainer {

        width: calc(100% - 22px);

    }

    .wbStrategiesHeader h2 {

        font-size: 30px;

    }

    .wbStrategyItem h3 {

        font-size: 15px;

    }

    .wbStrategyItem p {

        font-size: 9px;

    }

}

/* Strategies Section Ends Here */

/* Who Section Starts Here */

/* =========================================================
   WEALTH BASKET — WHO IS IT FOR
========================================================= */

.wbAudience {

    position: relative;

    width: 100%;

    padding: 115px 0 90px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.wbAudienceContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   HEADER
========================================================= */

.wbAudienceHeader {

    max-width: 820px;

    margin-bottom: 65px;

}


.wbAudienceEyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 21px;

}


.wbAudienceEyebrow span {

    width: 31px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.wbAudienceEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.wbAudienceHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.8vw, 60px);

    line-height: 1.06;

    letter-spacing: -2px;

    font-weight: 600;

}


.wbAudienceHeader h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   LIST
========================================================= */

.wbAudienceList {

    width: 100%;

    border-top: 1px solid rgba(197,154,50,.34);

}


/* =========================================================
   ITEM
========================================================= */

.wbAudienceItem {

    position: relative;

    display: grid;

    grid-template-columns: 70px minmax(0, 1fr) 120px;

    align-items: center;

    gap: 30px;

    min-height: 145px;

    padding: 25px 0;

    box-sizing: border-box;

    border-bottom: 1px solid rgba(197,154,50,.30);

    transition:
        padding .25s ease,
        background .25s ease;

}


.wbAudienceItem:hover {

    padding-left: 12px;

    padding-right: 12px;

    background: rgba(197,154,50,.025);

}


/* =========================================================
   NUMBER
========================================================= */

.wbAudienceNumber {

    color: #c59a32;

    opacity: .82;

    font-size: 11px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.2px;

}


/* =========================================================
   CONTENT
========================================================= */

.wbAudienceContent {

    min-width: 0;

}


.wbAudienceContent h3 {

    margin: 0 0 9px;

    color: var(--primary);

    font-size: 22px;

    line-height: 1.3;

    letter-spacing: -.2px;

    font-weight: 600;

}


.wbAudienceContent p {

    max-width: 690px;

    margin: 0;

    color: var(--text);

    opacity: .63;

    font-size: 10px;

    line-height: 1.82;

}


/* =========================================================
   CATEGORY LABEL
========================================================= */

.wbAudienceLabel {

    justify-self: end;

    color: var(--text);

    opacity: .30;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.2px;

    text-align: right;

}


.wbAudienceItem:hover .wbAudienceLabel {

    color: #c59a32;

    opacity: .72;

}


/* =========================================================
   BOTTOM DETAIL
========================================================= */

.wbAudienceBottom {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    margin-top: 68px;

}


.wbAudienceBottom > span {

    width: 29px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.wbAudienceBottom p {

    margin: 0;

    color: var(--text);

    opacity: .40;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.wbAudienceBottom b {

    padding: 0 7px;

    color: #c59a32;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .wbAudience {

        padding: 90px 0 80px;

    }

    .wbAudienceItem {

        grid-template-columns: 60px minmax(0, 1fr) 100px;

        gap: 24px;

    }

    .wbAudienceContent h3 {

        font-size: 20px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

    .wbAudience {

        padding: 80px 0 70px;

    }

    .wbAudienceHeader {

        margin-bottom: 48px;

    }

    .wbAudienceHeader h2 {

        font-size: clamp(40px, 7vw, 55px);

    }

    .wbAudienceItem {

        grid-template-columns: 55px minmax(0, 1fr);

        gap: 20px;

        min-height: 135px;

    }

    .wbAudienceLabel {

        display: none;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .wbAudience {

        padding: 65px 0 55px;

    }

    .wbAudienceContainer {

        width: calc(100% - 30px);

    }

    .wbAudienceEyebrow {

        margin-bottom: 18px;

    }

    .wbAudienceHeader {

        margin-bottom: 40px;

    }

    .wbAudienceHeader h2 {

        font-size: clamp(34px, 10vw, 44px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }


    /* MOBILE ITEM */

    .wbAudienceItem {

        grid-template-columns: 38px minmax(0, 1fr);

        align-items: start;

        gap: 14px;

        min-height: auto;

        padding: 24px 0 27px;

    }


    .wbAudienceItem:hover {

        padding-left: 0;

        padding-right: 0;

        background: transparent;

    }


    .wbAudienceNumber {

        padding-top: 3px;

        font-size: 9px;

    }


    .wbAudienceContent h3 {

        margin-bottom: 8px;

        font-size: 17px;

        line-height: 1.35;

    }


    .wbAudienceContent p {

        font-size: 10px;

        line-height: 1.78;

    }


    .wbAudienceBottom {

        margin-top: 40px;

        justify-content: flex-start;

        overflow: hidden;

    }


    .wbAudienceBottom p {

        white-space: nowrap;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .wbAudience {

        padding: 55px 0 48px;

    }

    .wbAudienceContainer {

        width: calc(100% - 26px);

    }

    .wbAudienceHeader h2 {

        font-size: 33px;

    }

    .wbAudienceItem {

        grid-template-columns: 34px minmax(0, 1fr);

        gap: 12px;

        padding: 21px 0 24px;

    }

    .wbAudienceContent h3 {

        font-size: 15px;

    }

    .wbAudienceContent p {

        font-size: 9px;

        line-height: 1.75;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .wbAudienceContainer {

        width: calc(100% - 22px);

    }

    .wbAudienceHeader h2 {

        font-size: 30px;

    }

    .wbAudienceItem {

        grid-template-columns: 31px minmax(0, 1fr);

        gap: 10px;

    }

    .wbAudienceContent h3 {

        font-size: 15px;

    }

    .wbAudienceContent p {

        font-size: 9px;

    }

}

/* Who Section Ends Here */

/* CTA Section Starts Here */

/* =========================================================
   WEALTH BASKET — FINAL CTA
========================================================= */

.wbFinalCta {

    position: relative;

    width: 100%;

    padding: 115px 0 80px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.wbFinalCtaContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(300px, .65fr);

    gap: clamp(55px, 9vw, 120px);

    align-items: center;

}


/* =========================================================
   LEFT CONTENT
========================================================= */

.wbFinalCtaContent {

    max-width: 800px;

    min-width: 0;

}


.wbFinalCtaEyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 22px;

}


.wbFinalCtaEyebrow span {

    width: 31px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.wbFinalCtaEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.6px;

    text-transform: uppercase;

}


/* =========================================================
   HEADING
========================================================= */

.wbFinalCtaContent h2 {

    margin: 0;

    max-width: 800px;

    color: var(--primary);

    font-size: clamp(40px, 4.8vw, 61px);

    line-height: 1.05;

    letter-spacing: -2px;

    font-weight: 600;

}


.wbFinalCtaContent h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.wbFinalCtaDescription {

    max-width: 680px;

    margin: 28px 0 0;

    color: var(--text);

    opacity: .66;

    font-size: 11px;

    line-height: 1.88;

}


/* =========================================================
   BUTTONS
========================================================= */

.wbFinalCtaButtons {

    display: flex;

    flex-wrap: wrap;

    gap: 11px;

    margin-top: 34px;

}


.wbFinalCtaPrimary,
.wbFinalCtaSecondary {

    min-height: 54px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    padding: 0 24px;

    text-decoration: none;

    font-size: 10px;

    line-height: 1.4;

    font-weight: 700;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease;

}


.wbFinalCtaPrimary {

    gap: 13px;

    color: #fff;

    background: #c59a32;

    border: 1px solid #c59a32;

}


.wbFinalCtaPrimary i {

    font-size: 9px;

    transition: transform .25s ease;

}


.wbFinalCtaPrimary:hover {

    color: #c59a32;

    background: transparent;

}


.wbFinalCtaPrimary:hover i {

    transform: translateX(4px);

}


.wbFinalCtaSecondary {

    color: var(--primary);

    border: 1px solid rgba(197,154,50,.40);

}


.wbFinalCtaSecondary:hover {

    color: #c59a32;

    border-color: #c59a32;

}


/* =========================================================
   RIGHT EDITORIAL PANEL
========================================================= */

.wbFinalCtaVisual {

    position: relative;

    min-height: 430px;

    display: flex;

    align-items: stretch;

}


.wbFinalCtaDivider {

    width: 1px;

    flex-shrink: 0;

    background: rgba(197,154,50,.42);

}


.wbFinalCtaEditorial {

    position: relative;

    width: 100%;

    padding: 10px 0 10px 31px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

}


/* =========================================================
   META
========================================================= */

.wbFinalCtaMeta {

    color: #c59a32;

    opacity: .68;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.1px;

}


/* =========================================================
   TYPOGRAPHIC WORDS
========================================================= */

.wbFinalCtaWords {

    margin-top: 70px;

    display: flex;

    flex-direction: column;

    gap: 10px;

}


.wbFinalCtaWords span {

    color: var(--text);

    opacity: .32;

    font-size: clamp(22px, 3vw, 34px);

    line-height: 1;

    letter-spacing: 1.2px;

    font-weight: 600;

}


.wbFinalCtaWords span.gold {

    color: #c59a32;

    opacity: .82;

}


/* =========================================================
   SMALL LINE
========================================================= */

.wbFinalCtaSmallLine {

    width: 48px;

    height: 2px;

    margin-top: 29px;

    background: #c59a32;

}


/* =========================================================
   STATEMENT
========================================================= */

.wbFinalCtaStatement {

    margin: auto 0 0;

    padding-top: 24px;

    border-top: 1px solid rgba(197,154,50,.20);

    color: var(--text);

    opacity: .40;

    font-size: 9px;

    line-height: 1.75;

    font-weight: 700;

    letter-spacing: 1px;

}


/* =========================================================
   BOTTOM LINE
========================================================= */

.wbFinalCtaBottom {

    width: min(1180px, calc(100% - 48px));

    margin: 75px auto 0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

}


.wbFinalCtaBottom > span {

    width: 29px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.wbFinalCtaBottom p {

    margin: 0;

    color: var(--text);

    opacity: .42;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.wbFinalCtaBottom b {

    padding: 0 7px;

    color: #c59a32;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .wbFinalCta {

        padding: 90px 0 75px;

    }

    .wbFinalCtaContainer {

        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(280px, .8fr);

        gap: 60px;

    }

    .wbFinalCtaContent h2 {

        font-size: clamp(38px, 5vw, 54px);

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

    .wbFinalCta {

        padding: 80px 0 65px;

    }

    .wbFinalCtaContainer {

        grid-template-columns: 1fr;

        gap: 50px;

    }

    .wbFinalCtaContent {

        max-width: 760px;

    }

    .wbFinalCtaContent h2 {

        font-size: clamp(40px, 7vw, 55px);

    }

    .wbFinalCtaVisual {

        max-width: 620px;

        min-height: 390px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .wbFinalCta {

        padding: 65px 0 55px;

    }

    .wbFinalCtaContainer {

        width: calc(100% - 30px);

        gap: 42px;

    }

    .wbFinalCtaEyebrow {

        margin-bottom: 18px;

    }

    .wbFinalCtaContent h2 {

        font-size: clamp(34px, 10vw, 44px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }

    .wbFinalCtaDescription {

        margin-top: 21px;

        font-size: 10px;

        line-height: 1.8;

    }


    /* BUTTONS */

    .wbFinalCtaButtons {

        flex-direction: column;

        align-items: stretch;

        gap: 9px;

        margin-top: 27px;

    }

    .wbFinalCtaPrimary,
    .wbFinalCtaSecondary {

        width: 100%;

        min-height: 52px;

    }


    /* EDITORIAL SIDE */

    .wbFinalCtaVisual {

        min-height: 355px;

        max-width: none;

    }

    .wbFinalCtaEditorial {

        padding-left: 20px;

    }

    .wbFinalCtaWords {

        margin-top: 50px;

        gap: 9px;

    }

    .wbFinalCtaWords span {

        font-size: 24px;

    }


    /* BOTTOM */

    .wbFinalCtaBottom {

        width: calc(100% - 30px);

        margin-top: 42px;

        justify-content: flex-start;

        overflow: hidden;

    }

    .wbFinalCtaBottom p {

        white-space: nowrap;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .wbFinalCta {

        padding: 55px 0 48px;

    }

    .wbFinalCtaContainer {

        width: calc(100% - 26px);

    }

    .wbFinalCtaContent h2 {

        font-size: 33px;

    }

    .wbFinalCtaDescription {

        font-size: 9px;

    }

    .wbFinalCtaVisual {

        min-height: 325px;

    }

    .wbFinalCtaEditorial {

        padding-left: 17px;

    }

    .wbFinalCtaWords span {

        font-size: 21px;

    }

    .wbFinalCtaStatement {

        font-size: 9px;

    }

    .wbFinalCtaBottom {

        width: calc(100% - 26px);

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .wbFinalCtaContainer {

        width: calc(100% - 22px);

    }

    .wbFinalCtaContent h2 {

        font-size: 30px;

    }

    .wbFinalCtaVisual {

        min-height: 300px;

    }

    .wbFinalCtaWords span {

        font-size: 19px;

    }

    .wbFinalCtaBottom {

        width: calc(100% - 22px);

    }

}

/* CTA Section Ends Here */

/* Wealth Basket Page Ends Here */


/* Targeted Investment Page Starts Here */

/* Hero Section Starts Here */

/* =========================================================
   TARGETED INVESTMENT HERO
========================================================= */

.targetedHero {

    position: relative;

    width: 100%;

    min-height: 730px;

    display: flex;

    align-items: center;

    padding: 100px 0;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


/* =========================================================
   CONTAINER
========================================================= */

.targetedHeroContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(390px, .92fr);

    align-items: center;

    gap: clamp(60px, 8vw, 110px);

}


/* =========================================================
   LEFT CONTENT
========================================================= */

.targetedHeroContent {

    max-width: 700px;

    min-width: 0;

}


/* =========================================================
   EYEBROW
========================================================= */

.targetedHeroEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 22px;

}


.targetedHeroEyebrow span {

    width: 32px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.targetedHeroEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.6px;

    text-transform: uppercase;

}


/* =========================================================
   HEADING
========================================================= */

.targetedHeroContent h1 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(42px, 5vw, 64px);

    line-height: 1.04;

    letter-spacing: -2.4px;

    font-weight: 600;

}


.targetedHeroContent h1 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.targetedHeroDescription {

    max-width: 660px;

    margin: 27px 0 0;

    color: var(--text);

    opacity: .70;

    font-size: 12px;

    line-height: 1.88;

}


.targetedHeroDescription + .targetedHeroDescription {

    margin-top: 14px;

}


/* =========================================================
   BUTTONS
========================================================= */

.targetedHeroButtons {

    display: flex;

    flex-wrap: wrap;

    gap: 11px;

    margin-top: 34px;

}


.targetedHeroPrimary,
.targetedHeroSecondary {

    min-height: 54px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    padding: 0 24px;

    text-decoration: none;

    font-size: 10px;

    line-height: 1.4;

    font-weight: 700;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease;

}


.targetedHeroPrimary {

    gap: 13px;

    color: #fff;

    background: #c59a32;

    border: 1px solid #c59a32;

}


.targetedHeroPrimary i {

    font-size: 9px;

    transition: transform .25s ease;

}


.targetedHeroPrimary:hover {

    color: #c59a32;

    background: transparent;

}


.targetedHeroPrimary:hover i {

    transform: translateX(4px);

}


.targetedHeroSecondary {

    color: var(--primary);

    border: 1px solid rgba(197,154,50,.42);

}


.targetedHeroSecondary:hover {

    color: #c59a32;

    border-color: #c59a32;

}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.targetedHeroVisual {

    min-width: 0;

    width: 100%;

}


.targetedHeroFrame {

    position: relative;

    min-height: 510px;

    padding: 28px 30px;

    box-sizing: border-box;

    border-left: 1px solid rgba(197,154,50,.48);

    border-top: 1px solid rgba(197,154,50,.14);

    border-bottom: 1px solid rgba(197,154,50,.14);

    display: flex;

    flex-direction: column;

    overflow: hidden;

}


/* subtle geometric frame */

.targetedHeroFrame::before {

    content: "";

    position: absolute;

    top: 10px;

    left: 10px;

    right: -10px;

    bottom: -10px;

    border: 1px solid rgba(197,154,50,.07);

    pointer-events: none;

}


/* =========================================================
   META
========================================================= */

.targetedHeroMeta {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding-bottom: 18px;

    border-bottom: 1px solid rgba(197,154,50,.22);

}


.targetedHeroMeta span {

    color: var(--text);

    opacity: .48;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.targetedHeroMeta span:first-child {

    color: #c59a32;

    opacity: .78;

}


/* =========================================================
   TYPOGRAPHY
========================================================= */

.targetedHeroTypography {

    position: relative;

    z-index: 2;

    margin-top: 82px;

}


.targetedHeroGhost {

    position: absolute;

    top: -52px;

    left: -5px;

    color: var(--text);

    opacity: .045;

    font-size: clamp(70px, 9vw, 125px);

    line-height: 1;

    letter-spacing: -6px;

    font-weight: 700;

    white-space: nowrap;

    pointer-events: none;

}


.targetedHeroWord {

    position: relative;

    color: var(--primary);

    font-size: clamp(45px, 5.5vw, 72px);

    line-height: .95;

    letter-spacing: -3px;

    font-weight: 600;

}


.targetedHeroGoldWord {

    position: relative;

    margin-top: 7px;

    color: #c59a32;

    font-size: clamp(45px, 5.5vw, 72px);

    line-height: .95;

    letter-spacing: -3px;

    font-weight: 600;

}


/* =========================================================
   GOLD RULE
========================================================= */

.targetedHeroRule {

    position: relative;

    z-index: 2;

    width: 58px;

    height: 2px;

    margin-top: 31px;

    background: #c59a32;

}


/* =========================================================
   KEYWORDS
========================================================= */

.targetedHeroKeywords {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-top: 28px;

}


.targetedHeroKeywords span {

    color: var(--text);

    opacity: .36;

    font-size: 10px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.3px;

}


.targetedHeroKeywords span.active {

    color: #c59a32;

    opacity: .82;

}


/* =========================================================
   FOOTER
========================================================= */

.targetedHeroFooter {

    position: relative;

    z-index: 2;

    margin-top: auto;

    padding-top: 22px;

    border-top: 1px solid rgba(197,154,50,.22);

}


.targetedHeroFooter > span {

    display: block;

    margin-bottom: 11px;

    color: #c59a32;

    opacity: .72;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.targetedHeroFooter p {

    margin: 0;

    color: var(--text);

    opacity: .38;

    font-size: 9px;

    line-height: 1.6;

    font-weight: 700;

    letter-spacing: .8px;

}


.targetedHeroFooter b {

    padding: 0 5px;

    color: #c59a32;

    opacity: .8;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .targetedHero {

        min-height: auto;

        padding: 90px 0;

    }

    .targetedHeroContainer {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(350px, .9fr);

        gap: 55px;

    }

    .targetedHeroContent h1 {

        font-size: clamp(40px, 5.5vw, 57px);

    }

    .targetedHeroFrame {

        min-height: 480px;

        padding: 25px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

    .targetedHero {

        padding: 80px 0 70px;

    }

    .targetedHeroContainer {

        grid-template-columns: 1fr;

        gap: 55px;

    }

    .targetedHeroContent {

        max-width: 760px;

    }

    .targetedHeroContent h1 {

        font-size: clamp(40px, 7vw, 55px);

    }

    .targetedHeroVisual {

        max-width: 700px;

    }

    .targetedHeroFrame {

        min-height: 460px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .targetedHero {

        padding: 65px 0 55px;

    }

    .targetedHeroContainer {

        width: calc(100% - 30px);

        gap: 42px;

    }

    .targetedHeroEyebrow {

        margin-bottom: 18px;

    }

    .targetedHeroContent h1 {

        font-size: clamp(34px, 10vw, 44px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }

    .targetedHeroDescription {

        margin-top: 21px;

        font-size: 10px;

        line-height: 1.8;

    }

    .targetedHeroDescription + .targetedHeroDescription {

        margin-top: 12px;

    }


    /* BUTTONS */

    .targetedHeroButtons {

        flex-direction: column;

        align-items: stretch;

        gap: 9px;

        margin-top: 27px;

    }

    .targetedHeroPrimary,
    .targetedHeroSecondary {

        width: 100%;

        min-height: 52px;

    }


    /* VISUAL */

    .targetedHeroFrame {

        min-height: 405px;

        padding: 20px;

    }

    .targetedHeroTypography {

        margin-top: 58px;

    }

    .targetedHeroGhost {

        top: -32px;

        font-size: 70px;

        letter-spacing: -4px;

    }

    .targetedHeroWord,
    .targetedHeroGoldWord {

        font-size: 46px;

        letter-spacing: -2px;

    }

    .targetedHeroRule {

        margin-top: 25px;

    }

    .targetedHeroKeywords {

        gap: 10px;

        margin-top: 24px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .targetedHero {

        padding: 55px 0 48px;

    }

    .targetedHeroContainer {

        width: calc(100% - 26px);

    }

    .targetedHeroContent h1 {

        font-size: 33px;

    }

    .targetedHeroDescription {

        font-size: 9px;

    }

    .targetedHeroFrame {

        min-height: 370px;

        padding: 17px;

    }

    .targetedHeroWord,
    .targetedHeroGoldWord {

        font-size: 40px;

    }

    .targetedHeroGhost {

        font-size: 61px;

    }

    .targetedHeroFooter p {

        font-size: 9px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .targetedHeroContainer {

        width: calc(100% - 22px);

    }

    .targetedHeroContent h1 {

        font-size: 30px;

    }

    .targetedHeroFrame {

        min-height: 345px;

        padding: 15px;

    }

    .targetedHeroWord,
    .targetedHeroGoldWord {

        font-size: 35px;

    }

    .targetedHeroGhost {

        font-size: 53px;

    }

}

/* Hero Section Ends Here */

/* Intro Section Starts Here */

/* =========================================================
   TARGETED INVESTMENT — INTRODUCTION
========================================================= */

.targetedIntro {

    position: relative;

    width: 100%;

    padding: 115px 0 100px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.targetedIntroContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(350px, .85fr);

    gap: clamp(65px, 9vw, 125px);

    align-items: start;

}


/* =========================================================
   LEFT EDITORIAL CONTENT
========================================================= */

.targetedIntroMain {

    max-width: 720px;

    min-width: 0;

}


.targetedIntroEyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 21px;

}


.targetedIntroEyebrow span {

    width: 31px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.targetedIntroEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.targetedIntroMain h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(39px, 4.5vw, 57px);

    line-height: 1.07;

    letter-spacing: -2px;

    font-weight: 600;

}


.targetedIntroMain h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   COPY
========================================================= */

.targetedIntroCopy {

    max-width: 680px;

    margin-top: 31px;

}


.targetedIntroCopy p {

    margin: 0;

    color: var(--text);

    opacity: .67;

    font-size: 11px;

    line-height: 1.9;

}


.targetedIntroCopy p + p {

    margin-top: 17px;

}


/* =========================================================
   RIGHT HIGHLIGHTS
========================================================= */

.targetedIntroHighlights {

    width: 100%;

    border-top: 1px solid rgba(197,154,50,.35);

}


.targetedIntroHighlight {

    padding: 27px 0 29px;

    border-bottom: 1px solid rgba(197,154,50,.28);

}


/* =========================================================
   TOP ROW
========================================================= */

.targetedIntroHighlightTop {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 25px;

}


.targetedIntroNumber {

    color: #c59a32;

    opacity: .85;

    font-size: 10px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.targetedIntroCategory {

    color: var(--text);

    opacity: .34;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.2px;

}


/* =========================================================
   HIGHLIGHT TITLE
========================================================= */

.targetedIntroHighlight h3 {

    margin: 0 0 10px;

    color: var(--primary);

    font-size: 20px;

    line-height: 1.32;

    letter-spacing: -.2px;

    font-weight: 600;

}


/* =========================================================
   HIGHLIGHT DESCRIPTION
========================================================= */

.targetedIntroHighlight p {

    max-width: 510px;

    margin: 0;

    color: var(--text);

    opacity: .61;

    font-size: 10px;

    line-height: 1.82;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .targetedIntro {

        padding: 90px 0 80px;

    }

    .targetedIntroContainer {

        grid-template-columns:
            minmax(0, 1.05fr)
            minmax(310px, .95fr);

        gap: 60px;

    }

    .targetedIntroMain h2 {

        font-size: clamp(38px, 5vw, 52px);

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

    .targetedIntro {

        padding: 80px 0 70px;

    }

    .targetedIntroContainer {

        grid-template-columns: 1fr;

        gap: 55px;

    }

    .targetedIntroMain {

        max-width: 760px;

    }

    .targetedIntroMain h2 {

        font-size: clamp(40px, 7vw, 55px);

    }

    .targetedIntroHighlights {

        max-width: 700px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .targetedIntro {

        padding: 65px 0 55px;

    }

    .targetedIntroContainer {

        width: calc(100% - 30px);

        gap: 42px;

    }

    .targetedIntroEyebrow {

        margin-bottom: 18px;

    }

    .targetedIntroMain h2 {

        font-size: clamp(34px, 10vw, 44px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }

    .targetedIntroCopy {

        margin-top: 22px;

    }

    .targetedIntroCopy p {

        font-size: 10px;

        line-height: 1.8;

    }

    .targetedIntroCopy p + p {

        margin-top: 14px;

    }


    /* HIGHLIGHTS */

    .targetedIntroHighlight {

        padding: 22px 0 25px;

    }

    .targetedIntroHighlightTop {

        margin-bottom: 19px;

    }

    .targetedIntroHighlight h3 {

        font-size: 17px;

        line-height: 1.35;

    }

    .targetedIntroHighlight p {

        font-size: 10px;

        line-height: 1.78;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .targetedIntro {

        padding: 55px 0 48px;

    }

    .targetedIntroContainer {

        width: calc(100% - 26px);

    }

    .targetedIntroMain h2 {

        font-size: 33px;

    }

    .targetedIntroCopy p {

        font-size: 9px;

        line-height: 1.78;

    }

    .targetedIntroHighlight {

        padding: 20px 0 23px;

    }

    .targetedIntroHighlight h3 {

        font-size: 15px;

    }

    .targetedIntroHighlight p {

        font-size: 9px;

        line-height: 1.75;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .targetedIntroContainer {

        width: calc(100% - 22px);

    }

    .targetedIntroMain h2 {

        font-size: 30px;

    }

    .targetedIntroHighlight h3 {

        font-size: 15px;

    }

    .targetedIntroHighlight p {

        font-size: 9px;

    }

}

/* Intro Section Ends Here */

/* Matters Section Starts Here */

/* =========================================================
   TARGETED INVESTMENT — WHY IT MATTERS
========================================================= */

.targetedWhy {

    position: relative;

    width: 100%;

    padding: 115px 0 100px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.targetedWhyContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(300px, .78fr)
        minmax(0, 1.22fr);

    gap: clamp(60px, 9vw, 125px);

    align-items: start;

}


/* =========================================================
   LEFT COLUMN
========================================================= */

.targetedWhyIntro {

    position: sticky;

    top: 80px;

    max-width: 470px;

    padding-left: 28px;

    border-left: 1px solid rgba(197,154,50,.55);

    box-sizing: border-box;

}


.targetedWhyEyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 21px;

}


.targetedWhyEyebrow span {

    width: 28px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.targetedWhyEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.targetedWhyIntro h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(38px, 4.3vw, 56px);

    line-height: 1.07;

    letter-spacing: -2px;

    font-weight: 600;

}


.targetedWhyIntro h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   ACCENT
========================================================= */

.targetedWhyAccent {

    width: 52px;

    height: 2px;

    margin-top: 30px;

    background: #c59a32;

}


/* =========================================================
   STATEMENT
========================================================= */

.targetedWhyStatement {

    max-width: 390px;

    margin: 23px 0 0;

    color: var(--text);

    opacity: .61;

    font-size: 10px;

    line-height: 1.85;

}


/* =========================================================
   TAG
========================================================= */

.targetedWhyTag {

    display: inline-block;

    margin-top: 35px;

    padding-top: 14px;

    border-top: 1px solid rgba(197,154,50,.22);

    color: var(--text);

    opacity: .35;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1.2px;

}


/* =========================================================
   RIGHT LIST
========================================================= */

.targetedWhyList {

    width: 100%;

    border-top: 1px solid rgba(197,154,50,.35);

}


/* =========================================================
   ITEM
========================================================= */

.targetedWhyItem {

    display: grid;

    grid-template-columns: 48px minmax(0, 1fr);

    gap: 22px;

    padding: 27px 0 29px;

    border-bottom: 1px solid rgba(197,154,50,.27);

    box-sizing: border-box;

    transition: padding .25s ease, background .25s ease;

}


.targetedWhyItem:hover {

    padding-left: 10px;

    padding-right: 10px;

    background: rgba(197,154,50,.025);

}


/* =========================================================
   NUMBER
========================================================= */

.targetedWhyNumber {

    padding-top: 3px;

    color: #c59a32;

    opacity: .82;

    font-size: 10px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.1px;

}


/* =========================================================
   CONTENT
========================================================= */

.targetedWhyContent {

    min-width: 0;

}


.targetedWhyContent h3 {

    margin: 0 0 9px;

    color: var(--primary);

    font-size: 20px;

    line-height: 1.32;

    letter-spacing: -.2px;

    font-weight: 600;

}


.targetedWhyContent p {

    max-width: 650px;

    margin: 0;

    color: var(--text);

    opacity: .62;

    font-size: 10px;

    line-height: 1.82;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .targetedWhy {

        padding: 90px 0 80px;

    }

    .targetedWhyContainer {

        grid-template-columns:
            minmax(280px, .75fr)
            minmax(0, 1.25fr);

        gap: 60px;

    }

    .targetedWhyIntro h2 {

        font-size: clamp(36px, 5vw, 51px);

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

    .targetedWhy {

        padding: 80px 0 70px;

    }

    .targetedWhyContainer {

        grid-template-columns: 1fr;

        gap: 50px;

    }

    .targetedWhyIntro {

        position: relative;

        top: auto;

        max-width: 760px;

    }

    .targetedWhyIntro h2 {

        font-size: clamp(40px, 7vw, 55px);

    }

    .targetedWhyList {

        max-width: 760px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .targetedWhy {

        padding: 65px 0 55px;

    }

    .targetedWhyContainer {

        width: calc(100% - 30px);

        gap: 40px;

    }

    .targetedWhyIntro {

        padding-left: 19px;

    }

    .targetedWhyEyebrow {

        margin-bottom: 18px;

    }

    .targetedWhyIntro h2 {

        font-size: clamp(34px, 10vw, 44px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }

    .targetedWhyStatement {

        font-size: 10px;

        line-height: 1.8;

    }

    .targetedWhyTag {

        margin-top: 27px;

    }


    /* LIST */

    .targetedWhyItem {

        grid-template-columns: 35px minmax(0, 1fr);

        gap: 14px;

        padding: 22px 0 25px;

    }

    .targetedWhyItem:hover {

        padding-left: 0;

        padding-right: 0;

        background: transparent;

    }

    .targetedWhyNumber {

        font-size: 9px;

    }

    .targetedWhyContent h3 {

        font-size: 17px;

        line-height: 1.35;

    }

    .targetedWhyContent p {

        font-size: 10px;

        line-height: 1.78;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .targetedWhy {

        padding: 55px 0 48px;

    }

    .targetedWhyContainer {

        width: calc(100% - 26px);

    }

    .targetedWhyIntro {

        padding-left: 16px;

    }

    .targetedWhyIntro h2 {

        font-size: 33px;

    }

    .targetedWhyStatement {

        font-size: 9px;

    }

    .targetedWhyContent h3 {

        font-size: 15px;

    }

    .targetedWhyContent p {

        font-size: 9px;

        line-height: 1.75;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .targetedWhyContainer {

        width: calc(100% - 22px);

    }

    .targetedWhyIntro h2 {

        font-size: 30px;

    }

    .targetedWhyContent h3 {

        font-size: 15px;

    }

    .targetedWhyContent p {

        font-size: 9px;

    }

}

/* Matters Section Ends Here */

/* Approach Section Starts Here */

/* =========================================================
   TARGETED INVESTMENT — APPROACH
========================================================= */

.targetedApproach {

    position: relative;

    width: 100%;

    padding: 115px 0 90px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.targetedApproachContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(320px, .8fr);

    gap: clamp(60px, 8vw, 105px);

    align-items: start;

}


/* =========================================================
   LEFT CONTENT
========================================================= */

.targetedApproachContent {

    min-width: 0;

}


.targetedApproachEyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 21px;

}


.targetedApproachEyebrow span {

    width: 31px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.targetedApproachEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.targetedApproachContent > h2 {

    max-width: 760px;

    margin: 0 0 52px;

    color: var(--primary);

    font-size: clamp(39px, 4.5vw, 57px);

    line-height: 1.06;

    letter-spacing: -2px;

    font-weight: 600;

}


.targetedApproachContent > h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   SIX STEPS
========================================================= */

.targetedApproachSteps {

    width: 100%;

    border-top: 1px solid rgba(197,154,50,.35);

}


/* =========================================================
   STEP
========================================================= */

.targetedApproachStep {

    display: grid;

    grid-template-columns: 115px minmax(0, 1fr);

    gap: 25px;

    padding: 25px 0 27px;

    border-bottom: 1px solid rgba(197,154,50,.27);

    box-sizing: border-box;

    transition:
        padding .25s ease,
        background .25s ease;

}


.targetedApproachStep:hover {

    padding-left: 10px;

    padding-right: 10px;

    background: rgba(197,154,50,.025);

}


/* =========================================================
   STEP META
========================================================= */

.targetedApproachStepMeta {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 12px;

}


.targetedApproachStepMeta span {

    color: #c59a32;

    opacity: .84;

    font-size: 10px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.targetedApproachStepMeta small {

    color: var(--text);

    opacity: .32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1px;

}


/* =========================================================
   STEP BODY
========================================================= */

.targetedApproachStepBody {

    min-width: 0;

}


.targetedApproachStepBody h3 {

    margin: 0 0 8px;

    color: var(--primary);

    font-size: 20px;

    line-height: 1.3;

    font-weight: 600;

}


.targetedApproachStepBody p {

    max-width: 570px;

    margin: 0;

    color: var(--text);

    opacity: .62;

    font-size: 10px;

    line-height: 1.82;

}


/* =========================================================
   RIGHT TYPOGRAPHIC PANEL
========================================================= */

.targetedApproachVisual {

    position: sticky;

    top: 75px;

    min-width: 0;

}


.targetedApproachVisualInner {

    position: relative;

    min-height: 625px;

    padding: 28px;

    box-sizing: border-box;

    border-left: 1px solid rgba(197,154,50,.48);

    border-top: 1px solid rgba(197,154,50,.14);

    border-bottom: 1px solid rgba(197,154,50,.14);

    display: flex;

    flex-direction: column;

    overflow: hidden;

}


/* subtle offset frame */

.targetedApproachVisualInner::before {

    content: "";

    position: absolute;

    top: 10px;

    left: 10px;

    right: -10px;

    bottom: -10px;

    border: 1px solid rgba(197,154,50,.07);

    pointer-events: none;

}


/* =========================================================
   VISUAL META
========================================================= */

.targetedApproachVisualMeta {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding-bottom: 18px;

    border-bottom: 1px solid rgba(197,154,50,.22);

}


.targetedApproachVisualMeta span {

    color: var(--text);

    opacity: .40;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.targetedApproachVisualMeta span:first-child {

    color: #c59a32;

    opacity: .75;

}


/* =========================================================
   LARGE TYPOGRAPHY
========================================================= */

.targetedApproachTypography {

    position: relative;

    z-index: 2;

    margin-top: 85px;

}


.targetedApproachLargeWord {

    display: block;

    color: var(--primary);

    font-size: clamp(48px, 5.5vw, 75px);

    line-height: .92;

    letter-spacing: -3.5px;

    font-weight: 600;

}


.targetedApproachGoldWord {

    display: block;

    margin-top: 7px;

    color: #c59a32;

    font-size: clamp(48px, 5.5vw, 75px);

    line-height: .92;

    letter-spacing: -3.5px;

    font-weight: 600;

}


/* =========================================================
   LINE
========================================================= */

.targetedApproachLine {

    position: relative;

    z-index: 2;

    width: 55px;

    height: 2px;

    margin-top: 31px;

    background: #c59a32;

}


/* =========================================================
   KEYWORDS
========================================================= */

.targetedApproachKeywords {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-top: 29px;

}


.targetedApproachKeywords span {

    color: var(--text);

    opacity: .34;

    font-size: 10px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.2px;

}


.targetedApproachKeywords span.gold {

    color: #c59a32;

    opacity: .80;

}


/* =========================================================
   STATEMENT
========================================================= */

.targetedApproachStatement {

    position: relative;

    z-index: 2;

    margin-top: auto;

    padding-top: 23px;

    border-top: 1px solid rgba(197,154,50,.21);

}


.targetedApproachStatement p {

    margin: 0;

    color: var(--text);

    opacity: .40;

    font-size: 9px;

    line-height: 1.75;

    font-weight: 700;

    letter-spacing: 1px;

}


/* =========================================================
   BOTTOM PROCESS
========================================================= */

.targetedApproachBottom {

    width: min(1180px, calc(100% - 48px));

    margin: 70px auto 0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

}


.targetedApproachBottom > span {

    width: 29px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.targetedApproachBottom p {

    margin: 0;

    color: var(--text);

    opacity: .40;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1px;

    text-align: center;

}


.targetedApproachBottom b {

    padding: 0 6px;

    color: #c59a32;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .targetedApproach {

        padding: 90px 0 80px;

    }

    .targetedApproachContainer {

        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(300px, .85fr);

        gap: 55px;

    }

    .targetedApproachContent > h2 {

        font-size: clamp(37px, 5vw, 52px);

    }

    .targetedApproachStep {

        grid-template-columns: 95px minmax(0, 1fr);

    }

    .targetedApproachVisualInner {

        min-height: 590px;

        padding: 24px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

    .targetedApproach {

        padding: 80px 0 70px;

    }

    .targetedApproachContainer {

        grid-template-columns: 1fr;

        gap: 50px;

    }

    .targetedApproachContent > h2 {

        font-size: clamp(40px, 7vw, 55px);

        margin-bottom: 45px;

    }

    .targetedApproachVisual {

        position: relative;

        top: auto;

        max-width: 700px;

    }

    .targetedApproachVisualInner {

        min-height: 460px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .targetedApproach {

        padding: 65px 0 55px;

    }

    .targetedApproachContainer {

        width: calc(100% - 30px);

        gap: 42px;

    }

    .targetedApproachEyebrow {

        margin-bottom: 18px;

    }

    .targetedApproachContent > h2 {

        font-size: clamp(34px, 10vw, 44px);

        line-height: 1.08;

        letter-spacing: -1.2px;

        margin-bottom: 35px;

    }


    /* STEPS */

    .targetedApproachStep {

        grid-template-columns: 38px minmax(0, 1fr);

        gap: 14px;

        padding: 22px 0 25px;

    }

    .targetedApproachStep:hover {

        padding-left: 0;

        padding-right: 0;

        background: transparent;

    }

    .targetedApproachStepMeta {

        display: block;

    }

    .targetedApproachStepMeta small {

        display: none;

    }

    .targetedApproachStepMeta span {

        font-size: 9px;

    }

    .targetedApproachStepBody h3 {

        font-size: 17px;

        line-height: 1.35;

    }

    .targetedApproachStepBody p {

        font-size: 10px;

        line-height: 1.78;

    }


    /* VISUAL */

    .targetedApproachVisualInner {

        min-height: 405px;

        padding: 20px;

    }

    .targetedApproachTypography {

        margin-top: 58px;

    }

    .targetedApproachLargeWord,
    .targetedApproachGoldWord {

        font-size: 46px;

        letter-spacing: -2px;

    }

    .targetedApproachLine {

        margin-top: 25px;

    }

    .targetedApproachKeywords {

        gap: 10px;

        margin-top: 23px;

    }

    .targetedApproachKeywords span {

        font-size: 9px;

    }


    /* BOTTOM */

    .targetedApproachBottom {

        width: calc(100% - 30px);

        margin-top: 40px;

        justify-content: flex-start;

        overflow: hidden;

    }

    .targetedApproachBottom p {

        white-space: nowrap;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .targetedApproach {

        padding: 55px 0 48px;

    }

    .targetedApproachContainer {

        width: calc(100% - 26px);

    }

    .targetedApproachContent > h2 {

        font-size: 33px;

    }

    .targetedApproachStep {

        grid-template-columns: 34px minmax(0, 1fr);

        gap: 12px;

    }

    .targetedApproachStepBody h3 {

        font-size: 15px;

    }

    .targetedApproachStepBody p {

        font-size: 9px;

        line-height: 1.75;

    }

    .targetedApproachVisualInner {

        min-height: 370px;

        padding: 17px;

    }

    .targetedApproachLargeWord,
    .targetedApproachGoldWord {

        font-size: 40px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .targetedApproachContainer {

        width: calc(100% - 22px);

    }

    .targetedApproachContent > h2 {

        font-size: 30px;

    }

    .targetedApproachVisualInner {

        min-height: 345px;

        padding: 15px;

    }

    .targetedApproachLargeWord,
    .targetedApproachGoldWord {

        font-size: 35px;

    }

}

/* Approach Section Ends Here */

/* Strategies Section Starts Here */

/* =========================================================
   TARGETED INVESTMENT — STRATEGIES
========================================================= */

.targetedStrategies {

    position: relative;

    width: 100%;

    padding: 115px 0 90px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.targetedStrategiesContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   HEADER
========================================================= */

.targetedStrategiesHeader {

    max-width: 820px;

    margin-bottom: 65px;

}


.targetedStrategiesEyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 21px;

}


.targetedStrategiesEyebrow span {

    width: 31px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.targetedStrategiesEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.targetedStrategiesHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.8vw, 60px);

    line-height: 1.06;

    letter-spacing: -2px;

    font-weight: 600;

}


.targetedStrategiesHeader h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   GRID
========================================================= */

.targetedStrategiesGrid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    border-top: 1px solid rgba(197,154,50,.36);

    border-left: 1px solid rgba(197,154,50,.14);

}


/* =========================================================
   STRATEGY ITEM
========================================================= */

.targetedStrategyItem {

    position: relative;

    min-height: 300px;

    padding: 31px 34px 35px;

    box-sizing: border-box;

    border-right: 1px solid rgba(197,154,50,.27);

    border-bottom: 1px solid rgba(197,154,50,.30);

    display: flex;

    flex-direction: column;

    transition:
        background .25s ease,
        padding .25s ease;

}


.targetedStrategyItem:hover {

    background: rgba(197,154,50,.025);

    padding-left: 40px;

}


/* =========================================================
   TOP ROW
========================================================= */

.targetedStrategyTop {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 55px;

}


.targetedStrategyNumber {

    color: #c59a32;

    opacity: .84;

    font-size: 10px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.targetedStrategyCategory {

    max-width: 190px;

    color: var(--text);

    opacity: .34;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1.15px;

    text-align: right;

}


/* =========================================================
   BODY
========================================================= */

.targetedStrategyBody {

    margin-top: auto;

    max-width: 530px;

}


.targetedStrategyBody h3 {

    margin: 0 0 13px;

    color: var(--primary);

    font-size: 23px;

    line-height: 1.28;

    letter-spacing: -.3px;

    font-weight: 600;

}


.targetedStrategyBody p {

    margin: 0;

    color: var(--text);

    opacity: .63;

    font-size: 11px;

    line-height: 1.82;

}


/* =========================================================
   BOTTOM
========================================================= */

.targetedStrategiesBottom {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    margin-top: 68px;

}


.targetedStrategiesBottom > span {

    width: 29px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.targetedStrategiesBottom p {

    margin: 0;

    color: var(--text);

    opacity: .40;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.targetedStrategiesBottom b {

    padding: 0 7px;

    color: #c59a32;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .targetedStrategies {

        padding: 90px 0 80px;

    }

    .targetedStrategyItem {

        min-height: 285px;

        padding: 28px 28px 32px;

    }

    .targetedStrategyItem:hover {

        padding-left: 33px;

    }

    .targetedStrategyBody h3 {

        font-size: 21px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 760px) {

    .targetedStrategies {

        padding: 80px 0 70px;

    }

    .targetedStrategiesHeader {

        margin-bottom: 48px;

    }

    .targetedStrategiesHeader h2 {

        font-size: clamp(40px, 7vw, 55px);

    }

    .targetedStrategyItem {

        min-height: 270px;

    }

    .targetedStrategyTop {

        margin-bottom: 40px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .targetedStrategies {

        padding: 65px 0 55px;

    }

    .targetedStrategiesContainer {

        width: calc(100% - 30px);

    }

    .targetedStrategiesEyebrow {

        margin-bottom: 18px;

    }

    .targetedStrategiesHeader {

        margin-bottom: 40px;

    }

    .targetedStrategiesHeader h2 {

        font-size: clamp(34px, 10vw, 44px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }


    /* SINGLE COLUMN */

    .targetedStrategiesGrid {

        grid-template-columns: 1fr;

    }


    .targetedStrategyItem {

        min-height: auto;

        padding: 24px 19px 29px;

    }


    .targetedStrategyItem:hover {

        padding-left: 19px;

        padding-right: 19px;

        background: transparent;

    }


    .targetedStrategyTop {

        margin-bottom: 29px;

    }


    .targetedStrategyNumber {

        font-size: 9px;

    }


    .targetedStrategyCategory {

        max-width: 170px;

        font-size: 9px;

    }


    .targetedStrategyBody h3 {

        margin-bottom: 10px;

        font-size: 17px;

        line-height: 1.35;

    }


    .targetedStrategyBody p {

        font-size: 10px;

        line-height: 1.78;

    }


    /* BOTTOM */

    .targetedStrategiesBottom {

        margin-top: 40px;

        justify-content: flex-start;

        overflow: hidden;

    }

    .targetedStrategiesBottom p {

        white-space: nowrap;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .targetedStrategies {

        padding: 55px 0 48px;

    }

    .targetedStrategiesContainer {

        width: calc(100% - 26px);

    }

    .targetedStrategiesHeader h2 {

        font-size: 33px;

    }

    .targetedStrategyItem {

        padding: 21px 15px 25px;

    }

    .targetedStrategyItem:hover {

        padding-left: 15px;

        padding-right: 15px;

    }

    .targetedStrategyTop {

        margin-bottom: 25px;

    }

    .targetedStrategyBody h3 {

        font-size: 15px;

    }

    .targetedStrategyBody p {

        font-size: 9px;

        line-height: 1.75;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .targetedStrategiesContainer {

        width: calc(100% - 22px);

    }

    .targetedStrategiesHeader h2 {

        font-size: 30px;

    }

    .targetedStrategyItem {

        padding-left: 13px;

        padding-right: 13px;

    }

    .targetedStrategyItem:hover {

        padding-left: 13px;

        padding-right: 13px;

    }

    .targetedStrategyBody h3 {

        font-size: 15px;

    }

    .targetedStrategyBody p {

        font-size: 9px;

    }

}

/* Strategies Section Ends Here */

/* Who Section Starts Here */

/* =========================================================
   TARGETED INVESTMENT — WHO IS IT FOR
========================================================= */

.targetedAudience {

    position: relative;

    width: 100%;

    padding: 115px 0 100px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.targetedAudienceContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(300px, .72fr)
        minmax(0, 1.28fr);

    gap: clamp(65px, 9vw, 125px);

    align-items: start;

}


/* =========================================================
   LEFT INTRO
========================================================= */

.targetedAudienceIntro {

    position: sticky;

    top: 80px;

    max-width: 440px;

    padding-left: 28px;

    border-left: 1px solid rgba(197,154,50,.52);

    box-sizing: border-box;

}


.targetedAudienceEyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 21px;

}


.targetedAudienceEyebrow span {

    width: 28px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.targetedAudienceEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.targetedAudienceIntro h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(38px, 4.2vw, 55px);

    line-height: 1.07;

    letter-spacing: -2px;

    font-weight: 600;

}


.targetedAudienceIntro h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   ACCENT
========================================================= */

.targetedAudienceAccent {

    width: 50px;

    height: 2px;

    margin-top: 30px;

    background: #c59a32;

}


/* =========================================================
   STATEMENT
========================================================= */

.targetedAudienceStatement {

    max-width: 385px;

    margin: 23px 0 0;

    color: var(--text);

    opacity: .60;

    font-size: 10px;

    line-height: 1.85;

}


/* =========================================================
   RIGHT LIST
========================================================= */

.targetedAudienceList {

    width: 100%;

    border-top: 1px solid rgba(197,154,50,.35);

}


/* =========================================================
   LIST ITEM
========================================================= */

.targetedAudienceItem {

    display: grid;

    grid-template-columns:
        40px
        minmax(0, 1fr)
        125px;

    column-gap: 24px;

    align-items: start;

    padding: 27px 0 29px;

    border-bottom: 1px solid rgba(197,154,50,.27);

    box-sizing: border-box;

    transition:
        padding .25s ease,
        background .25s ease;

}


.targetedAudienceItem:hover {

    padding-left: 10px;

    padding-right: 10px;

    background: rgba(197,154,50,.025);

}


/* =========================================================
   NUMBER
========================================================= */

.targetedAudienceNumber {

    padding-top: 3px;

    color: #c59a32;

    opacity: .84;

    font-size: 10px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.1px;

}


/* =========================================================
   CONTENT
========================================================= */

.targetedAudienceContent {

    min-width: 0;

}


.targetedAudienceContent h3 {

    margin: 0 0 9px;

    color: var(--primary);

    font-size: 20px;

    line-height: 1.32;

    letter-spacing: -.2px;

    font-weight: 600;

}


.targetedAudienceContent p {

    max-width: 600px;

    margin: 0;

    color: var(--text);

    opacity: .61;

    font-size: 10px;

    line-height: 1.82;

}


/* =========================================================
   CATEGORY
========================================================= */

.targetedAudienceCategory {

    padding-top: 4px;

    color: var(--text);

    opacity: .32;

    font-size: 9px;

    line-height: 1.45;

    font-weight: 700;

    letter-spacing: 1.2px;

    text-align: right;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .targetedAudience {

        padding: 90px 0 80px;

    }

    .targetedAudienceContainer {

        grid-template-columns:
            minmax(270px, .72fr)
            minmax(0, 1.28fr);

        gap: 60px;

    }

    .targetedAudienceIntro h2 {

        font-size: clamp(36px, 5vw, 51px);

    }

    .targetedAudienceItem {

        grid-template-columns:
            35px
            minmax(0, 1fr)
            110px;

        column-gap: 18px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

    .targetedAudience {

        padding: 80px 0 70px;

    }

    .targetedAudienceContainer {

        grid-template-columns: 1fr;

        gap: 50px;

    }

    .targetedAudienceIntro {

        position: relative;

        top: auto;

        max-width: 760px;

    }

    .targetedAudienceIntro h2 {

        font-size: clamp(40px, 7vw, 55px);

    }

    .targetedAudienceList {

        max-width: 760px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .targetedAudience {

        padding: 65px 0 55px;

    }

    .targetedAudienceContainer {

        width: calc(100% - 30px);

        gap: 40px;

    }

    .targetedAudienceIntro {

        padding-left: 19px;

    }

    .targetedAudienceEyebrow {

        margin-bottom: 18px;

    }

    .targetedAudienceIntro h2 {

        font-size: clamp(34px, 10vw, 44px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }

    .targetedAudienceStatement {

        font-size: 10px;

        line-height: 1.8;

    }


    /* LIST */

    .targetedAudienceItem {

        grid-template-columns:
            35px
            minmax(0, 1fr);

        column-gap: 14px;

        padding: 22px 0 25px;

    }


    .targetedAudienceItem:hover {

        padding-left: 0;

        padding-right: 0;

        background: transparent;

    }


    .targetedAudienceNumber {

        font-size: 9px;

    }


    .targetedAudienceContent h3 {

        font-size: 17px;

        line-height: 1.35;

    }


    .targetedAudienceContent p {

        font-size: 10px;

        line-height: 1.78;

    }


    /* CATEGORY MOVES BELOW CONTENT */

    .targetedAudienceCategory {

        grid-column: 2;

        padding-top: 10px;

        text-align: left;

        font-size: 9px;

        opacity: .40;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .targetedAudience {

        padding: 55px 0 48px;

    }

    .targetedAudienceContainer {

        width: calc(100% - 26px);

    }

    .targetedAudienceIntro {

        padding-left: 16px;

    }

    .targetedAudienceIntro h2 {

        font-size: 33px;

    }

    .targetedAudienceStatement {

        font-size: 9px;

    }

    .targetedAudienceItem {

        grid-template-columns:
            32px
            minmax(0, 1fr);

        column-gap: 12px;

        padding: 20px 0 23px;

    }

    .targetedAudienceContent h3 {

        font-size: 15px;

    }

    .targetedAudienceContent p {

        font-size: 9px;

        line-height: 1.75;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .targetedAudienceContainer {

        width: calc(100% - 22px);

    }

    .targetedAudienceIntro h2 {

        font-size: 30px;

    }

    .targetedAudienceContent h3 {

        font-size: 15px;

    }

    .targetedAudienceContent p {

        font-size: 9px;

    }

}

/* Who Section Ends Here */

/* CTA Section Starts Here */

/* =========================================================
   TARGETED INVESTMENT — FINAL CTA
========================================================= */

.targetedCta {

    position: relative;

    width: 100%;

    padding: 120px 0 85px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.targetedCtaContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(340px, .85fr);

    gap: clamp(65px, 9vw, 125px);

    align-items: center;

}


/* =========================================================
   LEFT CONTENT
========================================================= */

.targetedCtaContent {

    min-width: 0;

    max-width: 730px;

}


.targetedCtaEyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 23px;

}


.targetedCtaEyebrow span {

    width: 32px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.targetedCtaEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.6px;

    text-transform: uppercase;

}


/* =========================================================
   HEADING
========================================================= */

.targetedCtaContent h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(42px, 5vw, 64px);

    line-height: 1.04;

    letter-spacing: -2.4px;

    font-weight: 600;

}


.targetedCtaContent h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.targetedCtaDescription {

    max-width: 690px;

    margin-top: 30px;

}


.targetedCtaDescription p {

    margin: 0;

    color: var(--text);

    opacity: .67;

    font-size: 11px;

    line-height: 1.88;

}


.targetedCtaDescription p + p {

    margin-top: 15px;

}


/* =========================================================
   BUTTONS
========================================================= */

.targetedCtaButtons {

    display: flex;

    flex-wrap: wrap;

    gap: 11px;

    margin-top: 35px;

}


.targetedCtaPrimary,
.targetedCtaSecondary {

    min-height: 55px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    padding: 0 25px;

    text-decoration: none;

    font-size: 10px;

    line-height: 1.4;

    font-weight: 700;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease;

}


.targetedCtaPrimary {

    gap: 13px;

    color: #fff;

    background: #c59a32;

    border: 1px solid #c59a32;

}


.targetedCtaPrimary i {

    font-size: 9px;

    transition: transform .25s ease;

}


.targetedCtaPrimary:hover {

    color: #c59a32;

    background: transparent;

}


.targetedCtaPrimary:hover i {

    transform: translateX(4px);

}


.targetedCtaSecondary {

    color: var(--primary);

    border: 1px solid rgba(197,154,50,.42);

}


.targetedCtaSecondary:hover {

    color: #c59a32;

    border-color: #c59a32;

}


/* =========================================================
   RIGHT EDITORIAL PANEL
========================================================= */

.targetedCtaVisual {

    min-width: 0;

    width: 100%;

}


.targetedCtaVisualInner {

    min-height: 475px;

    padding: 30px;

    box-sizing: border-box;

    border-left: 1px solid rgba(197,154,50,.55);

    display: flex;

    flex-direction: column;

}


/* =========================================================
   META
========================================================= */

.targetedCtaMeta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding-bottom: 18px;

    border-bottom: 1px solid rgba(197,154,50,.22);

}


.targetedCtaMeta span {

    color: var(--text);

    opacity: .38;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.2px;

}


.targetedCtaMeta span:first-child {

    color: #c59a32;

    opacity: .78;

}


/* =========================================================
   TYPOGRAPHIC WORDS
========================================================= */

.targetedCtaWords {

    display: flex;

    flex-direction: column;

    gap: 15px;

    margin-top: 58px;

}


.targetedCtaWords span {

    color: var(--text);

    opacity: .31;

    font-size: clamp(18px, 2vw, 25px);

    line-height: 1.15;

    font-weight: 600;

    letter-spacing: -.4px;

}


.targetedCtaWords span.targetedCtaGoldWord {

    color: #c59a32;

    opacity: .95;

    font-size: clamp(29px, 3.1vw, 40px);

    letter-spacing: -1px;

}


/* =========================================================
   STATEMENT
========================================================= */

.targetedCtaStatement {

    margin-top: auto;

    padding-top: 25px;

    border-top: 1px solid rgba(197,154,50,.22);

}


.targetedCtaStatementLine {

    width: 45px;

    height: 2px;

    margin-bottom: 17px;

    background: #c59a32;

}


.targetedCtaStatement p {

    margin: 0;

    color: var(--text);

    opacity: .44;

    font-size: 9px;

    line-height: 1.8;

    font-weight: 700;

    letter-spacing: 1px;

}


/* =========================================================
   BOTTOM LINE
========================================================= */

.targetedCtaBottom {

    width: min(1180px, calc(100% - 48px));

    margin: 72px auto 0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

}


.targetedCtaBottom > span {

    width: 30px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.targetedCtaBottom p {

    margin: 0;

    color: var(--text);

    opacity: .42;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1px;

    text-align: center;

}


.targetedCtaBottom b {

    padding: 0 7px;

    color: #c59a32;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .targetedCta {

        padding: 90px 0 75px;

    }

    .targetedCtaContainer {

        grid-template-columns:
            minmax(0, 1.1fr)
            minmax(300px, .9fr);

        gap: 60px;

    }

    .targetedCtaContent h2 {

        font-size: clamp(40px, 5.5vw, 57px);

    }

    .targetedCtaVisualInner {

        min-height: 450px;

        padding: 25px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

    .targetedCta {

        padding: 80px 0 65px;

    }

    .targetedCtaContainer {

        grid-template-columns: 1fr;

        gap: 55px;

    }

    .targetedCtaContent {

        max-width: 760px;

    }

    .targetedCtaContent h2 {

        font-size: clamp(40px, 7vw, 55px);

    }

    .targetedCtaVisual {

        max-width: 700px;

    }

    .targetedCtaVisualInner {

        min-height: 430px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .targetedCta {

        padding: 65px 0 55px;

    }

    .targetedCtaContainer {

        width: calc(100% - 30px);

        gap: 42px;

    }

    .targetedCtaEyebrow {

        margin-bottom: 19px;

    }

    .targetedCtaContent h2 {

        font-size: clamp(34px, 10vw, 44px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }

    .targetedCtaDescription {

        margin-top: 23px;

    }

    .targetedCtaDescription p {

        font-size: 10px;

        line-height: 1.8;

    }

    .targetedCtaDescription p + p {

        margin-top: 13px;

    }


    /* BUTTONS */

    .targetedCtaButtons {

        flex-direction: column;

        align-items: stretch;

        gap: 9px;

        margin-top: 27px;

    }

    .targetedCtaPrimary,
    .targetedCtaSecondary {

        width: 100%;

        min-height: 52px;

    }


    /* VISUAL */

    .targetedCtaVisualInner {

        min-height: 395px;

        padding: 20px;

    }

    .targetedCtaWords {

        gap: 12px;

        margin-top: 42px;

    }

    .targetedCtaWords span {

        font-size: 18px;

    }

    .targetedCtaWords span.targetedCtaGoldWord {

        font-size: 29px;

    }

    .targetedCtaStatement {

        padding-top: 20px;

    }


    /* BOTTOM */

    .targetedCtaBottom {

        width: calc(100% - 30px);

        margin-top: 40px;

        justify-content: flex-start;

        overflow: hidden;

    }

    .targetedCtaBottom p {

        white-space: nowrap;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .targetedCta {

        padding: 55px 0 48px;

    }

    .targetedCtaContainer {

        width: calc(100% - 26px);

    }

    .targetedCtaContent h2 {

        font-size: 33px;

    }

    .targetedCtaDescription p {

        font-size: 9px;

        line-height: 1.78;

    }

    .targetedCtaVisualInner {

        min-height: 365px;

        padding: 17px;

    }

    .targetedCtaWords {

        margin-top: 36px;

    }

    .targetedCtaWords span {

        font-size: 16px;

    }

    .targetedCtaWords span.targetedCtaGoldWord {

        font-size: 26px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .targetedCtaContainer {

        width: calc(100% - 22px);

    }

    .targetedCtaContent h2 {

        font-size: 30px;

    }

    .targetedCtaVisualInner {

        min-height: 340px;

        padding: 15px;

    }

    .targetedCtaWords span {

        font-size: 15px;

    }

    .targetedCtaWords span.targetedCtaGoldWord {

        font-size: 24px;

    }

}

/* CTA Section Ends Here */

/* Targeted Investment Page Ends Here */


/* Tax Optimization Page Starts Here */

/* Hero Section Starts Here */

/* =========================================================
   TAX OPTIMIZATION — HERO
========================================================= */

.taxHero {

    position: relative;

    width: 100%;

    min-height: 720px;

    padding: 110px 0 75px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.taxHeroContainer {

    width: min(1180px, calc(100% - 48px));

    min-height: 535px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(340px, .88fr);

    gap: clamp(65px, 8vw, 115px);

    align-items: center;

}


/* =========================================================
   LEFT CONTENT
========================================================= */

.taxHeroContent {

    min-width: 0;

    max-width: 720px;

}


.taxHeroEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 22px;

}


.taxHeroEyebrow span {

    width: 32px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.taxHeroEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.6px;

    text-transform: uppercase;

}


/* =========================================================
   HEADING
========================================================= */

.taxHeroContent h1 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(43px, 5vw, 65px);

    line-height: 1.04;

    letter-spacing: -2.6px;

    font-weight: 600;

}


.taxHeroContent h1 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.taxHeroDescription {

    max-width: 680px;

    margin-top: 30px;

}


.taxHeroDescription p {

    margin: 0;

    color: var(--text);

    opacity: .68;

    font-size: 11px;

    line-height: 1.88;

}


.taxHeroDescription p + p {

    margin-top: 15px;

}


/* =========================================================
   BUTTONS
========================================================= */

.taxHeroButtons {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 34px;

}


.taxHeroPrimary,
.taxHeroSecondary {

    min-height: 54px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    padding: 0 24px;

    text-decoration: none;

    font-size: 10px;

    line-height: 1.4;

    font-weight: 700;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease;

}


.taxHeroPrimary {

    gap: 13px;

    color: #fff;

    background: #c59a32;

    border: 1px solid #c59a32;

}


.taxHeroPrimary i {

    font-size: 9px;

    transition: transform .25s ease;

}


.taxHeroPrimary:hover {

    color: #c59a32;

    background: transparent;

}


.taxHeroPrimary:hover i {

    transform: translateX(4px);

}


.taxHeroSecondary {

    color: var(--primary);

    border: 1px solid rgba(197,154,50,.43);

}


.taxHeroSecondary:hover {

    color: #c59a32;

    border-color: #c59a32;

}


/* =========================================================
   BOTTOM PROCESS META
========================================================= */

.taxHeroBottomMeta {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 38px;

}


.taxHeroBottomMeta span {

    color: var(--text);

    opacity: .35;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.15px;

}


.taxHeroBottomMeta span:nth-of-type(3) {

    color: #c59a32;

    opacity: .85;

}


.taxHeroBottomMeta b {

    color: #c59a32;

    opacity: .65;

    font-size: 9px;

    font-weight: 500;

}


/* =========================================================
   RIGHT EDITORIAL VISUAL
========================================================= */

.taxHeroVisual {

    min-width: 0;

    width: 100%;

}


.taxHeroVisualInner {

    position: relative;

    min-height: 535px;

    padding: 28px 30px;

    box-sizing: border-box;

    border-left: 1px solid rgba(197,154,50,.56);

    border-top: 1px solid rgba(197,154,50,.13);

    border-bottom: 1px solid rgba(197,154,50,.13);

    display: flex;

    flex-direction: column;

    overflow: hidden;

}


/* subtle secondary editorial line */

.taxHeroVisualInner::before {

    content: "";

    position: absolute;

    top: 12px;

    left: 12px;

    right: -12px;

    bottom: -12px;

    border: 1px solid rgba(197,154,50,.07);

    pointer-events: none;

}


/* =========================================================
   TOP META
========================================================= */

.taxHeroVisualMeta {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding-bottom: 18px;

    border-bottom: 1px solid rgba(197,154,50,.22);

}


.taxHeroVisualMeta span {

    color: var(--text);

    opacity: .36;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.taxHeroVisualMeta span:first-child {

    color: #c59a32;

    opacity: .82;

}


/* =========================================================
   LARGE TYPOGRAPHY
========================================================= */

.taxHeroTypography {

    position: relative;

    z-index: 2;

    margin-top: 78px;

}


.taxHeroTax {

    display: block;

    color: var(--primary);

    font-size: clamp(70px, 8vw, 112px);

    line-height: .84;

    letter-spacing: -5px;

    font-weight: 600;

}


.taxHeroStrategy {

    display: block;

    margin-top: 10px;

    color: var(--text);

    opacity: .40;

    font-size: clamp(34px, 4vw, 54px);

    line-height: .95;

    letter-spacing: -2px;

    font-weight: 500;

}


/* =========================================================
   ACCENT
========================================================= */

.taxHeroAccent {

    position: relative;

    z-index: 2;

    width: 54px;

    height: 2px;

    margin-top: 30px;

    background: #c59a32;

}


/* =========================================================
   KEYWORDS
========================================================= */

.taxHeroKeywords {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 11px;

    margin-top: 28px;

}


.taxHeroKeywords span {

    color: var(--text);

    opacity: .32;

    font-size: 10px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.25px;

}


.taxHeroKeywords span.taxHeroGold {

    color: #c59a32;

    opacity: .92;

}


/* =========================================================
   BOTTOM EDITORIAL DETAIL
========================================================= */

.taxHeroEditorial {

    position: relative;

    z-index: 2;

    margin-top: auto;

    padding-top: 22px;

    border-top: 1px solid rgba(197,154,50,.21);

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 20px;

}


.taxHeroEditorial > span {

    color: var(--text);

    opacity: .28;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1px;

}


.taxHeroEditorial p {

    margin: 0;

    color: var(--text);

    opacity: .38;

    font-size: 9px;

    line-height: 1.75;

    font-weight: 700;

    letter-spacing: 1px;

    text-align: right;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .taxHero {

        padding: 90px 0 70px;

    }

    .taxHeroContainer {

        grid-template-columns:
            minmax(0, 1.1fr)
            minmax(300px, .9fr);

        gap: 55px;

    }

    .taxHeroContent h1 {

        font-size: clamp(40px, 5.5vw, 58px);

    }

    .taxHeroVisualInner {

        min-height: 500px;

        padding: 25px;

    }

    .taxHeroTax {

        font-size: clamp(65px, 8vw, 95px);

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

    .taxHero {

        min-height: auto;

        padding: 80px 0 65px;

    }

    .taxHeroContainer {

        grid-template-columns: 1fr;

        gap: 55px;

    }

    .taxHeroContent {

        max-width: 760px;

    }

    .taxHeroContent h1 {

        font-size: clamp(40px, 7vw, 55px);

    }

    .taxHeroVisual {

        max-width: 700px;

    }

    .taxHeroVisualInner {

        min-height: 455px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .taxHero {

        padding: 65px 0 55px;

    }

    .taxHeroContainer {

        width: calc(100% - 30px);

        gap: 42px;

    }

    .taxHeroEyebrow {

        margin-bottom: 18px;

    }

    .taxHeroContent h1 {

        font-size: clamp(34px, 10vw, 44px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }

    .taxHeroDescription {

        margin-top: 23px;

    }

    .taxHeroDescription p {

        font-size: 10px;

        line-height: 1.8;

    }

    .taxHeroDescription p + p {

        margin-top: 13px;

    }


    /* BUTTONS */

    .taxHeroButtons {

        flex-direction: column;

        align-items: stretch;

        margin-top: 27px;

        gap: 9px;

    }

    .taxHeroPrimary,
    .taxHeroSecondary {

        width: 100%;

        min-height: 52px;

    }


    /* PROCESS */

    .taxHeroBottomMeta {

        gap: 6px;

        margin-top: 29px;

    }

    .taxHeroBottomMeta span,
    .taxHeroBottomMeta b {

        font-size: 9px;

    }


    /* VISUAL */

    .taxHeroVisualInner {

        min-height: 405px;

        padding: 20px;

    }

    .taxHeroTypography {

        margin-top: 55px;

    }

    .taxHeroTax {

        font-size: clamp(58px, 18vw, 82px);

        letter-spacing: -3px;

    }

    .taxHeroStrategy {

        font-size: clamp(29px, 9vw, 42px);

        letter-spacing: -1.5px;

    }

    .taxHeroAccent {

        margin-top: 25px;

    }

    .taxHeroKeywords {

        margin-top: 23px;

        gap: 10px;

    }

    .taxHeroKeywords span {

        font-size: 9px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .taxHero {

        padding: 55px 0 48px;

    }

    .taxHeroContainer {

        width: calc(100% - 26px);

    }

    .taxHeroContent h1 {

        font-size: 33px;

    }

    .taxHeroDescription p {

        font-size: 9px;

        line-height: 1.78;

    }

    .taxHeroVisualInner {

        min-height: 370px;

        padding: 17px;

    }

    .taxHeroTypography {

        margin-top: 45px;

    }

    .taxHeroTax {

        font-size: 55px;

    }

    .taxHeroStrategy {

        font-size: 28px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .taxHeroContainer {

        width: calc(100% - 22px);

    }

    .taxHeroContent h1 {

        font-size: 30px;

    }

    .taxHeroVisualInner {

        min-height: 345px;

        padding: 15px;

    }

    .taxHeroTax {

        font-size: 49px;

    }

    .taxHeroStrategy {

        font-size: 25px;

    }

}

/* Hero Section Ends Here */

/* Intro Section Starts Here */

/* =========================================================
   TAX OPTIMIZATION — INTRODUCTION
========================================================= */

.taxIntro {

    position: relative;

    width: 100%;

    padding: 110px 0 105px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.taxIntroContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(350px, .88fr);

    gap: clamp(70px, 9vw, 125px);

    align-items: start;

}


/* =========================================================
   LEFT CONTENT
========================================================= */

.taxIntroContent {

    min-width: 0;

    max-width: 720px;

}


.taxIntroEyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 21px;

}


.taxIntroEyebrow span {

    width: 30px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.taxIntroEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.45px;

    text-transform: uppercase;

}


/* =========================================================
   HEADING
========================================================= */

.taxIntroContent h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(39px, 4.5vw, 58px);

    line-height: 1.06;

    letter-spacing: -2px;

    font-weight: 600;

}


.taxIntroContent h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   TEXT
========================================================= */

.taxIntroText {

    max-width: 690px;

    margin-top: 30px;

}


.taxIntroText p {

    margin: 0;

    color: var(--text);

    opacity: .66;

    font-size: 11px;

    line-height: 1.9;

}


.taxIntroText p + p {

    margin-top: 16px;

}


/* =========================================================
   RIGHT HIGHLIGHTS
========================================================= */

.taxIntroHighlights {

    width: 100%;

    border-top: 1px solid rgba(197,154,50,.34);

}


/* =========================================================
   HIGHLIGHT
========================================================= */

.taxIntroHighlight {

    padding: 25px 0 27px;

    border-bottom: 1px solid rgba(197,154,50,.27);

    box-sizing: border-box;

}


.taxIntroHighlightTop {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 20px;

}


/* =========================================================
   NUMBER
========================================================= */

.taxIntroNumber {

    color: #c59a32;

    opacity: .88;

    font-size: 10px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.15px;

}


/* =========================================================
   CATEGORY
========================================================= */

.taxIntroCategory {

    color: #c59a32;

    opacity: .62;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.35px;

}


/* =========================================================
   TITLE
========================================================= */

.taxIntroHighlight h3 {

    margin: 0 0 10px;

    color: var(--primary);

    font-size: 21px;

    line-height: 1.32;

    letter-spacing: -.25px;

    font-weight: 600;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.taxIntroHighlight p {

    max-width: 540px;

    margin: 0;

    color: var(--text);

    opacity: .61;

    font-size: 10px;

    line-height: 1.82;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .taxIntro {

        padding: 90px 0 85px;

    }

    .taxIntroContainer {

        grid-template-columns:
            minmax(0, 1.08fr)
            minmax(300px, .92fr);

        gap: 60px;

    }

    .taxIntroContent h2 {

        font-size: clamp(37px, 5vw, 52px);

    }

    .taxIntroHighlight h3 {

        font-size: 19px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

    .taxIntro {

        padding: 80px 0 75px;

    }

    .taxIntroContainer {

        grid-template-columns: 1fr;

        gap: 55px;

    }

    .taxIntroContent {

        max-width: 760px;

    }

    .taxIntroContent h2 {

        font-size: clamp(40px, 7vw, 55px);

    }

    .taxIntroHighlights {

        max-width: 760px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .taxIntro {

        padding: 65px 0 58px;

    }

    .taxIntroContainer {

        width: calc(100% - 30px);

        gap: 42px;

    }

    .taxIntroEyebrow {

        margin-bottom: 18px;

    }

    .taxIntroContent h2 {

        font-size: clamp(34px, 10vw, 44px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }

    .taxIntroText {

        margin-top: 23px;

    }

    .taxIntroText p {

        font-size: 10px;

        line-height: 1.82;

    }

    .taxIntroText p + p {

        margin-top: 13px;

    }


    /* HIGHLIGHTS */

    .taxIntroHighlight {

        padding: 22px 0 24px;

    }

    .taxIntroHighlightTop {

        margin-bottom: 17px;

    }

    .taxIntroNumber {

        font-size: 9px;

    }

    .taxIntroCategory {

        font-size: 9px;

    }

    .taxIntroHighlight h3 {

        font-size: 17px;

        line-height: 1.35;

    }

    .taxIntroHighlight p {

        font-size: 10px;

        line-height: 1.78;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .taxIntro {

        padding: 55px 0 50px;

    }

    .taxIntroContainer {

        width: calc(100% - 26px);

    }

    .taxIntroContent h2 {

        font-size: 33px;

    }

    .taxIntroText p {

        font-size: 9px;

        line-height: 1.78;

    }

    .taxIntroHighlight {

        padding: 20px 0 22px;

    }

    .taxIntroHighlight h3 {

        font-size: 15px;

    }

    .taxIntroHighlight p {

        font-size: 9px;

        line-height: 1.75;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .taxIntroContainer {

        width: calc(100% - 22px);

    }

    .taxIntroContent h2 {

        font-size: 30px;

    }

    .taxIntroHighlight h3 {

        font-size: 15px;

    }

    .taxIntroHighlight p {

        font-size: 9px;

    }

}

/* Intro Section Ends Here */

/* Matters Section Starts Here */

/* =========================================================
   TAX OPTIMIZATION — WHY IT MATTERS
========================================================= */

.taxWhy {

    position: relative;

    width: 100%;

    padding: 115px 0 105px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.taxWhyContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(300px, .72fr)
        minmax(0, 1.28fr);

    gap: clamp(65px, 9vw, 125px);

    align-items: start;

}


/* =========================================================
   LEFT EDITORIAL AREA
========================================================= */

.taxWhyIntro {

    position: sticky;

    top: 80px;

    max-width: 440px;

    padding-left: 28px;

    border-left: 1px solid rgba(197,154,50,.58);

    box-sizing: border-box;

}


.taxWhyEyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 21px;

}


.taxWhyEyebrow span {

    width: 30px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.taxWhyEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


/* =========================================================
   HEADING
========================================================= */

.taxWhyIntro h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(38px, 4.2vw, 55px);

    line-height: 1.07;

    letter-spacing: -2px;

    font-weight: 600;

}


.taxWhyIntro h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   ACCENT
========================================================= */

.taxWhyAccent {

    width: 50px;

    height: 2px;

    margin-top: 30px;

    background: #c59a32;

}


/* =========================================================
   SUPPORTING STATEMENT
========================================================= */

.taxWhyStatement {

    max-width: 385px;

    margin: 23px 0 0;

    color: var(--text);

    opacity: .58;

    font-size: 10px;

    line-height: 1.85;

}


/* =========================================================
   SIDE META
========================================================= */

.taxWhySideMeta {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 35px;

    color: var(--text);

    opacity: .30;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.taxWhySideMeta span {

    color: #c59a32;

    opacity: .8;

}


/* =========================================================
   RIGHT LIST
========================================================= */

.taxWhyList {

    width: 100%;

    border-top: 1px solid rgba(197,154,50,.35);

}


/* =========================================================
   ITEM
========================================================= */

.taxWhyItem {

    display: grid;

    grid-template-columns:
        48px
        minmax(0, 1fr);

    column-gap: 24px;

    padding: 27px 0 29px;

    border-bottom: 1px solid rgba(197,154,50,.27);

    box-sizing: border-box;

    transition:
        padding .25s ease,
        background .25s ease;

}


.taxWhyItem:hover {

    padding-left: 10px;

    padding-right: 10px;

    background: rgba(197,154,50,.025);

}


/* =========================================================
   NUMBER
========================================================= */

.taxWhyNumber {

    padding-top: 3px;

    color: #c59a32;

    opacity: .86;

    font-size: 10px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.15px;

}


/* =========================================================
   CONTENT
========================================================= */

.taxWhyContent {

    min-width: 0;

}


.taxWhyContent h3 {

    margin: 0 0 9px;

    color: var(--primary);

    font-size: 20px;

    line-height: 1.32;

    letter-spacing: -.2px;

    font-weight: 600;

}


.taxWhyContent p {

    max-width: 650px;

    margin: 0;

    color: var(--text);

    opacity: .62;

    font-size: 10px;

    line-height: 1.82;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .taxWhy {

        padding: 90px 0 85px;

    }

    .taxWhyContainer {

        grid-template-columns:
            minmax(270px, .72fr)
            minmax(0, 1.28fr);

        gap: 60px;

    }

    .taxWhyIntro h2 {

        font-size: clamp(36px, 5vw, 51px);

    }

    .taxWhyItem {

        grid-template-columns:
            40px
            minmax(0, 1fr);

        column-gap: 19px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

    .taxWhy {

        padding: 80px 0 75px;

    }

    .taxWhyContainer {

        grid-template-columns: 1fr;

        gap: 50px;

    }

    .taxWhyIntro {

        position: relative;

        top: auto;

        max-width: 760px;

    }

    .taxWhyIntro h2 {

        font-size: clamp(40px, 7vw, 55px);

    }

    .taxWhyList {

        max-width: 760px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .taxWhy {

        padding: 65px 0 58px;

    }

    .taxWhyContainer {

        width: calc(100% - 30px);

        gap: 40px;

    }

    .taxWhyIntro {

        padding-left: 19px;

    }

    .taxWhyEyebrow {

        margin-bottom: 18px;

    }

    .taxWhyIntro h2 {

        font-size: clamp(34px, 10vw, 44px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }

    .taxWhyStatement {

        font-size: 10px;

        line-height: 1.8;

    }

    .taxWhySideMeta {

        margin-top: 27px;

    }


    /* LIST */

    .taxWhyItem {

        grid-template-columns:
            35px
            minmax(0, 1fr);

        column-gap: 14px;

        padding: 22px 0 25px;

    }


    .taxWhyItem:hover {

        padding-left: 0;

        padding-right: 0;

        background: transparent;

    }


    .taxWhyNumber {

        font-size: 9px;

    }


    .taxWhyContent h3 {

        font-size: 17px;

        line-height: 1.35;

    }


    .taxWhyContent p {

        font-size: 10px;

        line-height: 1.78;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .taxWhy {

        padding: 55px 0 50px;

    }

    .taxWhyContainer {

        width: calc(100% - 26px);

    }

    .taxWhyIntro {

        padding-left: 16px;

    }

    .taxWhyIntro h2 {

        font-size: 33px;

    }

    .taxWhyStatement {

        font-size: 9px;

    }

    .taxWhyItem {

        grid-template-columns:
            32px
            minmax(0, 1fr);

        column-gap: 12px;

        padding: 20px 0 23px;

    }

    .taxWhyContent h3 {

        font-size: 15px;

    }

    .taxWhyContent p {

        font-size: 9px;

        line-height: 1.75;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .taxWhyContainer {

        width: calc(100% - 22px);

    }

    .taxWhyIntro h2 {

        font-size: 30px;

    }

    .taxWhyContent h3 {

        font-size: 15px;

    }

    .taxWhyContent p {

        font-size: 9px;

    }

}

/* Matters Section Ends Here */

/* Approach Section Starts Here */

/* =========================================================
   TAX OPTIMIZATION — APPROACH
========================================================= */

.taxApproach {

    position: relative;

    width: 100%;

    padding: 120px 0 105px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.taxApproachContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(300px, .72fr)
        minmax(0, 1.28fr);

    gap: clamp(65px, 8vw, 115px);

    align-items: start;

}


/* =========================================================
   LEFT EDITORIAL AREA
========================================================= */

.taxApproachIntro {

    position: sticky;

    top: 80px;

    max-width: 445px;

    padding-left: 29px;

    border-left: 1px solid rgba(197,154,50,.58);

    box-sizing: border-box;

}


.taxApproachEyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 21px;

}


.taxApproachEyebrow span {

    width: 30px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.taxApproachEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


/* =========================================================
   HEADING
========================================================= */

.taxApproachIntro h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(38px, 4.3vw, 56px);

    line-height: 1.06;

    letter-spacing: -2px;

    font-weight: 600;

}


.taxApproachIntro h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   RULE
========================================================= */

.taxApproachRule {

    width: 50px;

    height: 2px;

    margin-top: 30px;

    background: #c59a32;

}


/* =========================================================
   STATEMENT
========================================================= */

.taxApproachStatement {

    max-width: 390px;

    margin: 23px 0 0;

    color: var(--text);

    opacity: .59;

    font-size: 10px;

    line-height: 1.85;

}


/* =========================================================
   META
========================================================= */

.taxApproachMeta {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 34px;

    color: var(--text);

    opacity: .31;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.2px;

}


.taxApproachMeta span {

    color: #c59a32;

    opacity: .85;

}


/* =========================================================
   RIGHT AREA
========================================================= */

.taxApproachRight {

    min-width: 0;

}


/* =========================================================
   TYPOGRAPHIC COMPOSITION
========================================================= */

.taxApproachTypography {

    padding: 5px 0 37px;

    border-bottom: 1px solid rgba(197,154,50,.28);

}


.taxApproachMainTitle {

    display: block;

    color: var(--primary);

    font-size: clamp(48px, 6vw, 78px);

    line-height: .92;

    letter-spacing: -4px;

    font-weight: 600;

}


/* =========================================================
   KEYWORDS
========================================================= */

.taxApproachKeywords {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 8px 22px;

    margin-top: 25px;

}


.taxApproachKeywords span {

    color: var(--text);

    opacity: .34;

    font-size: 10px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1.25px;

}


.taxApproachKeywords span.taxApproachGold {

    color: #c59a32;

    opacity: .94;

}


/* =========================================================
   APPROACH LIST
========================================================= */

.taxApproachList {

    width: 100%;

    border-top: 1px solid rgba(197,154,50,.20);

}


/* =========================================================
   ITEM
========================================================= */

.taxApproachItem {

    display: grid;

    grid-template-columns:
        48px
        minmax(0, 1fr);

    column-gap: 23px;

    padding: 25px 0 27px;

    border-bottom: 1px solid rgba(197,154,50,.27);

    box-sizing: border-box;

    transition:
        padding .25s ease,
        background .25s ease;

}


.taxApproachItem:hover {

    padding-left: 10px;

    padding-right: 10px;

    background: rgba(197,154,50,.025);

}


/* =========================================================
   NUMBER
========================================================= */

.taxApproachNumber {

    padding-top: 3px;

    color: #c59a32;

    opacity: .86;

    font-size: 10px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.1px;

}


/* =========================================================
   CONTENT
========================================================= */

.taxApproachContent {

    min-width: 0;

}


.taxApproachContent h3 {

    margin: 0 0 8px;

    color: var(--primary);

    font-size: 20px;

    line-height: 1.3;

    letter-spacing: -.2px;

    font-weight: 600;

}


.taxApproachContent p {

    max-width: 650px;

    margin: 0;

    color: var(--text);

    opacity: .61;

    font-size: 10px;

    line-height: 1.82;

}


/* =========================================================
   BOTTOM MESSAGE
========================================================= */

.taxApproachBottom {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 34px;

}


.taxApproachBottomLine {

    width: 35px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.taxApproachBottom p {

    margin: 0;

    color: var(--text);

    opacity: .39;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1px;

}


.taxApproachBottom p span {

    padding: 0 7px;

    color: #c59a32;

    opacity: .9;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .taxApproach {

        padding: 90px 0 85px;

    }

    .taxApproachContainer {

        grid-template-columns:
            minmax(270px, .72fr)
            minmax(0, 1.28fr);

        gap: 60px;

    }

    .taxApproachIntro h2 {

        font-size: clamp(36px, 5vw, 51px);

    }

    .taxApproachMainTitle {

        font-size: clamp(44px, 6.5vw, 67px);

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

    .taxApproach {

        padding: 80px 0 75px;

    }

    .taxApproachContainer {

        grid-template-columns: 1fr;

        gap: 50px;

    }

    .taxApproachIntro {

        position: relative;

        top: auto;

        max-width: 760px;

    }

    .taxApproachIntro h2 {

        font-size: clamp(40px, 7vw, 55px);

    }

    .taxApproachRight {

        max-width: 760px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .taxApproach {

        padding: 65px 0 58px;

    }

    .taxApproachContainer {

        width: calc(100% - 30px);

        gap: 40px;

    }

    .taxApproachIntro {

        padding-left: 19px;

    }

    .taxApproachEyebrow {

        margin-bottom: 18px;

    }

    .taxApproachIntro h2 {

        font-size: clamp(34px, 10vw, 44px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }

    .taxApproachStatement {

        font-size: 10px;

        line-height: 1.8;

    }


    /* TYPOGRAPHIC HEADER */

    .taxApproachTypography {

        padding-bottom: 29px;

    }

    .taxApproachMainTitle {

        font-size: clamp(42px, 13vw, 60px);

        letter-spacing: -2.5px;

    }

    .taxApproachKeywords {

        gap: 8px 15px;

        margin-top: 20px;

    }

    .taxApproachKeywords span {

        font-size: 9px;

    }


    /* LIST */

    .taxApproachItem {

        grid-template-columns:
            35px
            minmax(0, 1fr);

        column-gap: 14px;

        padding: 22px 0 24px;

    }


    .taxApproachItem:hover {

        padding-left: 0;

        padding-right: 0;

        background: transparent;

    }


    .taxApproachNumber {

        font-size: 9px;

    }


    .taxApproachContent h3 {

        font-size: 17px;

        line-height: 1.35;

    }


    .taxApproachContent p {

        font-size: 10px;

        line-height: 1.78;

    }


    /* BOTTOM */

    .taxApproachBottom {

        margin-top: 29px;

    }

    .taxApproachBottom p {

        font-size: 9px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .taxApproach {

        padding: 55px 0 50px;

    }

    .taxApproachContainer {

        width: calc(100% - 26px);

    }

    .taxApproachIntro {

        padding-left: 16px;

    }

    .taxApproachIntro h2 {

        font-size: 33px;

    }

    .taxApproachStatement {

        font-size: 9px;

    }

    .taxApproachMainTitle {

        font-size: 41px;

        letter-spacing: -2px;

    }

    .taxApproachKeywords {

        gap: 7px 12px;

    }

    .taxApproachItem {

        grid-template-columns:
            32px
            minmax(0, 1fr);

        column-gap: 12px;

        padding: 20px 0 22px;

    }

    .taxApproachContent h3 {

        font-size: 15px;

    }

    .taxApproachContent p {

        font-size: 9px;

        line-height: 1.75;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .taxApproachContainer {

        width: calc(100% - 22px);

    }

    .taxApproachIntro h2 {

        font-size: 30px;

    }

    .taxApproachMainTitle {

        font-size: 36px;

    }

    .taxApproachContent h3 {

        font-size: 15px;

    }

    .taxApproachContent p {

        font-size: 9px;

    }

}

/* Approach Section Ends Here */

/* Strategies Section Starts Here */

/* =========================================================
   TAX OPTIMIZATION — STRATEGIES
========================================================= */

.taxStrategies {

    position: relative;

    width: 100%;

    padding: 120px 0 115px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.taxStrategiesContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   HEADER
========================================================= */

.taxStrategiesHeader {

    max-width: 760px;

    margin-bottom: 72px;

}


.taxStrategiesEyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 21px;

}


.taxStrategiesEyebrow span {

    width: 30px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.taxStrategiesEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


/* =========================================================
   HEADING
========================================================= */

.taxStrategiesHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(42px, 5vw, 64px);

    line-height: 1.04;

    letter-spacing: -2.5px;

    font-weight: 600;

}


.taxStrategiesHeader h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   HEADER DESCRIPTION
========================================================= */

.taxStrategiesIntro {

    max-width: 650px;

    margin: 25px 0 0;

    color: var(--text);

    opacity: .61;

    font-size: 10px;

    line-height: 1.85;

}


/* =========================================================
   2 × 3 GRID
========================================================= */

.taxStrategiesGrid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    column-gap: 70px;

    row-gap: 0;

    border-top: 1px solid rgba(197,154,50,.34);

}


/* =========================================================
   STRATEGY ITEM
========================================================= */

.taxStrategyItem {

    position: relative;

    min-width: 0;

    min-height: 300px;

    padding: 31px 0 38px;

    border-bottom: 1px solid rgba(197,154,50,.27);

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    transition:
        padding .25s ease,
        background .25s ease;

}


/* Vertical dividing line */

.taxStrategyItem:nth-child(odd) {

    padding-right: 35px;

    border-right: 1px solid rgba(197,154,50,.18);

}


.taxStrategyItem:nth-child(even) {

    padding-left: 35px;

}


/* =========================================================
   TOP META
========================================================= */

.taxStrategyTop {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 45px;

}


/* =========================================================
   NUMBER
========================================================= */

.taxStrategyNumber {

    color: #c59a32;

    opacity: .88;

    font-size: 11px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.2px;

}


/* =========================================================
   CATEGORY
========================================================= */

.taxStrategyCategory {

    color: #c59a32;

    opacity: .65;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.15px;

    text-align: right;

}


/* =========================================================
   BODY
========================================================= */

.taxStrategyBody {

    max-width: 500px;

    margin-top: auto;

}


/* =========================================================
   STRATEGY TITLE
========================================================= */

.taxStrategyBody h3 {

    margin: 0 0 15px;

    color: var(--primary);

    font-size: 23px;

    line-height: 1.28;

    letter-spacing: -.45px;

    font-weight: 600;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.taxStrategyBody p {

    max-width: 500px;

    margin: 0;

    color: var(--text);

    opacity: .61;

    font-size: 10.5px;

    line-height: 1.85;

}


/* =========================================================
   SUBTLE HOVER
========================================================= */

.taxStrategyItem:hover {

    padding-top: 36px;

    background: rgba(197,154,50,.018);

}


.taxStrategyItem:nth-child(odd):hover {

    padding-left: 8px;

}


.taxStrategyItem:nth-child(even):hover {

    padding-left: 43px;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .taxStrategies {

        padding: 95px 0 90px;

    }

    .taxStrategiesHeader {

        margin-bottom: 60px;

    }

    .taxStrategiesHeader h2 {

        font-size: clamp(40px, 5.5vw, 57px);

    }

    .taxStrategiesGrid {

        column-gap: 45px;

    }

    .taxStrategyItem {

        min-height: 285px;

    }

    .taxStrategyItem:nth-child(odd) {

        padding-right: 23px;

    }

    .taxStrategyItem:nth-child(even) {

        padding-left: 23px;

    }

    .taxStrategyBody h3 {

        font-size: 21px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

    .taxStrategies {

        padding: 80px 0 75px;

    }

    .taxStrategiesHeader {

        margin-bottom: 50px;

    }

    .taxStrategiesHeader h2 {

        font-size: clamp(39px, 7vw, 54px);

    }

    .taxStrategiesGrid {

        column-gap: 30px;

    }

    .taxStrategyItem {

        min-height: 280px;

    }

    .taxStrategyItem:nth-child(odd) {

        padding-right: 17px;

    }

    .taxStrategyItem:nth-child(even) {

        padding-left: 17px;

    }

    .taxStrategyBody h3 {

        font-size: 20px;

    }

    .taxStrategyBody p {

        font-size: 10px;

    }

}


/* =========================================================
   MOBILE — SINGLE COLUMN
========================================================= */

@media (max-width: 600px) {

    .taxStrategies {

        padding: 65px 0 58px;

    }

    .taxStrategiesContainer {

        width: calc(100% - 30px);

    }

    .taxStrategiesHeader {

        margin-bottom: 40px;

    }

    .taxStrategiesEyebrow {

        margin-bottom: 18px;

    }

    .taxStrategiesHeader h2 {

        font-size: clamp(34px, 10vw, 44px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }

    .taxStrategiesIntro {

        margin-top: 22px;

        font-size: 10px;

        line-height: 1.8;

    }


    /* SINGLE COLUMN */

    .taxStrategiesGrid {

        grid-template-columns: 1fr;

        column-gap: 0;

    }


    .taxStrategyItem {

        min-height: auto;

        padding: 25px 0 28px;

    }


    /* Remove desktop vertical divider */

    .taxStrategyItem:nth-child(odd) {

        padding-right: 0;

        border-right: none;

    }


    .taxStrategyItem:nth-child(even) {

        padding-left: 0;

    }


    .taxStrategyTop {

        margin-bottom: 32px;

    }


    .taxStrategyNumber {

        font-size: 10px;

    }


    .taxStrategyCategory {

        font-size: 9px;

        max-width: 55%;

    }


    .taxStrategyBody {

        margin-top: 0;

        max-width: 650px;

    }


    .taxStrategyBody h3 {

        font-size: 19px;

        line-height: 1.34;

        margin-bottom: 11px;

    }


    .taxStrategyBody p {

        font-size: 10px;

        line-height: 1.8;

    }


    /* Disable hover movement on mobile */

    .taxStrategyItem:hover,

    .taxStrategyItem:nth-child(odd):hover,

    .taxStrategyItem:nth-child(even):hover {

        padding-left: 0;

        padding-right: 0;

        padding-top: 25px;

        background: transparent;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .taxStrategies {

        padding: 55px 0 50px;

    }

    .taxStrategiesContainer {

        width: calc(100% - 26px);

    }

    .taxStrategiesHeader h2 {

        font-size: 33px;

    }

    .taxStrategiesIntro {

        font-size: 9px;

        line-height: 1.78;

    }

    .taxStrategyItem {

        padding: 22px 0 25px;

    }

    .taxStrategyTop {

        margin-bottom: 27px;

    }

    .taxStrategyNumber {

        font-size: 9px;

    }

    .taxStrategyCategory {

        font-size: 9px;

        letter-spacing: .8px;

    }

    .taxStrategyBody h3 {

        font-size: 17px;

    }

    .taxStrategyBody p {

        font-size: 9px;

        line-height: 1.76;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .taxStrategiesContainer {

        width: calc(100% - 22px);

    }

    .taxStrategiesHeader h2 {

        font-size: 30px;

    }

    .taxStrategyBody h3 {

        font-size: 15px;

    }

    .taxStrategyBody p {

        font-size: 9px;

    }

}

/* Strategies Section Ends Here */

/* Who Section Starts Here */

/* =========================================================
   TAX OPTIMIZATION — WHO IS IT FOR
========================================================= */

.taxAudience {

    position: relative;

    width: 100%;

    padding: 120px 0 115px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.taxAudienceContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   HEADER
========================================================= */

.taxAudienceHeader {

    max-width: 760px;

    margin-bottom: 70px;

}


.taxAudienceEyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 21px;

}


.taxAudienceEyebrow span {

    width: 30px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.taxAudienceEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


/* =========================================================
   HEADING
========================================================= */

.taxAudienceHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(42px, 5vw, 63px);

    line-height: 1.04;

    letter-spacing: -2.5px;

    font-weight: 600;

}


.taxAudienceHeader h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   INTRO
========================================================= */

.taxAudienceIntro {

    max-width: 650px;

    margin: 25px 0 0;

    color: var(--text);

    opacity: .60;

    font-size: 10px;

    line-height: 1.85;

}


/* =========================================================
   EDITORIAL LIST
========================================================= */

.taxAudienceList {

    width: 100%;

    border-top: 1px solid rgba(197,154,50,.38);

}


/* =========================================================
   LIST ITEM
========================================================= */

.taxAudienceItem {

    display: grid;

    grid-template-columns:
        55px
        minmax(0, 1fr)
        180px;

    column-gap: 28px;

    align-items: start;

    padding: 31px 0 33px;

    border-bottom: 1px solid rgba(197,154,50,.27);

    box-sizing: border-box;

    transition:
        padding .25s ease,
        background .25s ease;

}


.taxAudienceItem:hover {

    padding-left: 12px;

    padding-right: 12px;

    background: rgba(197,154,50,.018);

}


/* =========================================================
   NUMBER
========================================================= */

.taxAudienceNumber {

    padding-top: 4px;

    color: #c59a32;

    opacity: .88;

    font-size: 11px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.2px;

}


/* =========================================================
   MAIN CONTENT
========================================================= */

.taxAudienceMain {

    min-width: 0;

}


.taxAudienceMain h3 {

    margin: 0 0 10px;

    color: var(--primary);

    font-size: 22px;

    line-height: 1.3;

    letter-spacing: -.3px;

    font-weight: 600;

}


.taxAudienceMain p {

    max-width: 670px;

    margin: 0;

    color: var(--text);

    opacity: .61;

    font-size: 10.5px;

    line-height: 1.85;

}


/* =========================================================
   CATEGORY
========================================================= */

.taxAudienceCategory {

    padding-top: 5px;

    color: #c59a32;

    opacity: .66;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1.15px;

    text-align: right;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .taxAudience {

        padding: 95px 0 90px;

    }

    .taxAudienceHeader {

        margin-bottom: 60px;

    }

    .taxAudienceHeader h2 {

        font-size: clamp(40px, 5.5vw, 57px);

    }

    .taxAudienceItem {

        grid-template-columns:
            45px
            minmax(0, 1fr)
            155px;

        column-gap: 20px;

    }

    .taxAudienceMain h3 {

        font-size: 20px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

    .taxAudience {

        padding: 80px 0 75px;

    }

    .taxAudienceHeader {

        margin-bottom: 50px;

    }

    .taxAudienceHeader h2 {

        font-size: clamp(39px, 7vw, 54px);

    }

    .taxAudienceItem {

        grid-template-columns:
            40px
            minmax(0, 1fr)
            130px;

        column-gap: 17px;

        padding: 27px 0 29px;

    }

    .taxAudienceMain h3 {

        font-size: 19px;

    }

    .taxAudienceMain p {

        font-size: 10px;

    }

    .taxAudienceCategory {

        font-size: 9px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .taxAudience {

        padding: 65px 0 58px;

    }

    .taxAudienceContainer {

        width: calc(100% - 30px);

    }

    .taxAudienceHeader {

        margin-bottom: 40px;

    }

    .taxAudienceEyebrow {

        margin-bottom: 18px;

    }

    .taxAudienceHeader h2 {

        font-size: clamp(34px, 10vw, 44px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }

    .taxAudienceIntro {

        margin-top: 22px;

        font-size: 10px;

        line-height: 1.8;

    }


    /* MOBILE EDITORIAL LIST */

    .taxAudienceItem {

        display: grid;

        grid-template-columns:
            35px
            minmax(0, 1fr);

        column-gap: 14px;

        padding: 24px 0 27px;

    }


    .taxAudienceItem:hover {

        padding-left: 0;

        padding-right: 0;

        background: transparent;

    }


    .taxAudienceNumber {

        font-size: 9px;

    }


    .taxAudienceMain h3 {

        font-size: 18px;

        line-height: 1.34;

        margin-bottom: 10px;

    }


    .taxAudienceMain p {

        font-size: 10px;

        line-height: 1.8;

    }


    /* Category moves under content */

    .taxAudienceCategory {

        grid-column: 2;

        padding-top: 13px;

        text-align: left;

        font-size: 9px;

        line-height: 1.4;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .taxAudience {

        padding: 55px 0 50px;

    }

    .taxAudienceContainer {

        width: calc(100% - 26px);

    }

    .taxAudienceHeader h2 {

        font-size: 33px;

    }

    .taxAudienceIntro {

        font-size: 9px;

        line-height: 1.78;

    }

    .taxAudienceItem {

        grid-template-columns:
            32px
            minmax(0, 1fr);

        column-gap: 12px;

        padding: 21px 0 24px;

    }

    .taxAudienceMain h3 {

        font-size: 16px;

    }

    .taxAudienceMain p {

        font-size: 9px;

        line-height: 1.76;

    }

    .taxAudienceCategory {

        font-size: 9px;

        padding-top: 11px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .taxAudienceContainer {

        width: calc(100% - 22px);

    }

    .taxAudienceHeader h2 {

        font-size: 30px;

    }

    .taxAudienceMain h3 {

        font-size: 15px;

    }

    .taxAudienceMain p {

        font-size: 9px;

    }

}

/* Who Section Ends Here */

/* CTA Section Starts Here */

/* =========================================================
   TAX OPTIMIZATION — FINAL CTA
========================================================= */

.taxCta {

    position: relative;

    width: 100%;

    padding: 120px 0 105px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.taxCtaContainer {

    width: min(1180px, calc(100% - 48px));

    min-height: 510px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(340px, .85fr);

    gap: clamp(65px, 9vw, 120px);

    align-items: center;

}


/* =========================================================
   LEFT CONTENT
========================================================= */

.taxCtaContent {

    min-width: 0;

    max-width: 720px;

}


.taxCtaEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 22px;

}


.taxCtaEyebrow span {

    width: 32px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.taxCtaEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.55px;

    text-transform: uppercase;

}


/* =========================================================
   HEADING
========================================================= */

.taxCtaContent h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.8vw, 61px);

    line-height: 1.05;

    letter-spacing: -2.3px;

    font-weight: 600;

}


.taxCtaContent h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.taxCtaDescription {

    max-width: 680px;

    margin-top: 29px;

}


.taxCtaDescription p {

    margin: 0;

    color: var(--text);

    opacity: .64;

    font-size: 11px;

    line-height: 1.88;

}


.taxCtaDescription p + p {

    margin-top: 15px;

}


/* =========================================================
   BUTTONS
========================================================= */

.taxCtaButtons {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 34px;

}


.taxCtaPrimary,
.taxCtaSecondary {

    min-height: 54px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    padding: 0 24px;

    text-decoration: none;

    font-size: 10px;

    line-height: 1.4;

    font-weight: 700;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease;

}


.taxCtaPrimary {

    gap: 13px;

    color: #fff;

    background: #c59a32;

    border: 1px solid #c59a32;

}


.taxCtaPrimary i {

    font-size: 9px;

    transition: transform .25s ease;

}


.taxCtaPrimary:hover {

    color: #c59a32;

    background: transparent;

}


.taxCtaPrimary:hover i {

    transform: translateX(4px);

}


.taxCtaSecondary {

    color: var(--primary);

    border: 1px solid rgba(197,154,50,.43);

}


.taxCtaSecondary:hover {

    color: #c59a32;

    border-color: #c59a32;

}


/* =========================================================
   BOTTOM PROCESS
========================================================= */

.taxCtaBottom {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 35px;

}


.taxCtaBottom span {

    color: var(--text);

    opacity: .34;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.15px;

}


.taxCtaBottom span:nth-of-type(3) {

    color: #c59a32;

    opacity: .85;

}


.taxCtaBottom b {

    color: #c59a32;

    opacity: .65;

    font-size: 9px;

    font-weight: 500;

}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.taxCtaVisual {

    min-width: 0;

    width: 100%;

}


.taxCtaVisualInner {

    position: relative;

    min-height: 510px;

    padding: 29px 30px;

    box-sizing: border-box;

    border-left: 1px solid rgba(197,154,50,.58);

    display: flex;

    flex-direction: column;

    overflow: hidden;

}


/* subtle editorial edge */

.taxCtaVisualInner::after {

    content: "";

    position: absolute;

    top: 0;

    right: 0;

    width: 1px;

    height: 42%;

    background: rgba(197,154,50,.10);

}


/* =========================================================
   META
========================================================= */

.taxCtaMeta {

    display: flex;

    align-items: center;

    gap: 8px;

    padding-bottom: 18px;

    border-bottom: 1px solid rgba(197,154,50,.24);

}


.taxCtaMeta span {

    color: var(--text);

    opacity: .32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.15px;

}


.taxCtaMeta .taxCtaMetaGold {

    color: #c59a32;

    opacity: .86;

}


/* =========================================================
   KEYWORDS
========================================================= */

.taxCtaKeywords {

    display: flex;

    flex-direction: column;

    gap: 13px;

    margin-top: 45px;

}


.taxCtaKeywords span {

    color: var(--text);

    opacity: .32;

    font-size: 10px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.4px;

}


.taxCtaKeywords span.taxCtaGold {

    color: #c59a32;

    opacity: .96;

}


/* =========================================================
   STATEMENT
========================================================= */

.taxCtaStatement {

    display: flex;

    align-items: flex-start;

    gap: 17px;

    margin-top: auto;

    margin-bottom: 35px;

}


.taxCtaStatementLine {

    width: 2px;

    min-height: 92px;

    flex-shrink: 0;

    background: #c59a32;

}


.taxCtaStatement p {

    margin: 0;

    color: var(--primary);

    font-size: clamp(17px, 1.8vw, 23px);

    line-height: 1.38;

    letter-spacing: -.3px;

    font-weight: 600;

}


/* =========================================================
   BOTTOM DETAIL
========================================================= */

.taxCtaVisualBottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding-top: 19px;

    border-top: 1px solid rgba(197,154,50,.22);

}


.taxCtaVisualBottom span {

    color: var(--text);

    opacity: .27;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.2px;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .taxCta {

        padding: 95px 0 85px;

    }

    .taxCtaContainer {

        grid-template-columns:
            minmax(0, 1.1fr)
            minmax(300px, .9fr);

        gap: 55px;

    }

    .taxCtaContent h2 {

        font-size: clamp(38px, 5vw, 55px);

    }

    .taxCtaVisualInner {

        min-height: 475px;

        padding: 25px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

    .taxCta {

        padding: 80px 0 75px;

    }

    .taxCtaContainer {

        grid-template-columns: 1fr;

        gap: 55px;

    }

    .taxCtaContent {

        max-width: 760px;

    }

    .taxCtaContent h2 {

        font-size: clamp(40px, 7vw, 55px);

    }

    .taxCtaVisual {

        max-width: 700px;

    }

    .taxCtaVisualInner {

        min-height: 440px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .taxCta {

        padding: 65px 0 58px;

    }

    .taxCtaContainer {

        width: calc(100% - 30px);

        gap: 42px;

    }

    .taxCtaEyebrow {

        margin-bottom: 18px;

    }

    .taxCtaContent h2 {

        font-size: clamp(34px, 10vw, 44px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }

    .taxCtaDescription {

        margin-top: 23px;

    }

    .taxCtaDescription p {

        font-size: 10px;

        line-height: 1.8;

    }

    .taxCtaDescription p + p {

        margin-top: 13px;

    }


    /* BUTTONS */

    .taxCtaButtons {

        flex-direction: column;

        align-items: stretch;

        gap: 9px;

        margin-top: 27px;

    }

    .taxCtaPrimary,
    .taxCtaSecondary {

        width: 100%;

        min-height: 52px;

    }


    /* PROCESS */

    .taxCtaBottom {

        gap: 6px;

        margin-top: 29px;

    }

    .taxCtaBottom span,
    .taxCtaBottom b {

        font-size: 9px;

    }


    /* RIGHT */

    .taxCtaVisualInner {

        min-height: 410px;

        padding: 21px;

    }

    .taxCtaKeywords {

        margin-top: 36px;

        gap: 11px;

    }

    .taxCtaKeywords span {

        font-size: 9px;

    }

    .taxCtaStatement {

        gap: 13px;

        margin-bottom: 28px;

    }

    .taxCtaStatementLine {

        min-height: 82px;

    }

    .taxCtaStatement p {

        font-size: 17px;

        line-height: 1.4;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .taxCta {

        padding: 55px 0 50px;

    }

    .taxCtaContainer {

        width: calc(100% - 26px);

    }

    .taxCtaContent h2 {

        font-size: 33px;

    }

    .taxCtaDescription p {

        font-size: 9px;

        line-height: 1.78;

    }

    .taxCtaVisualInner {

        min-height: 385px;

        padding: 18px;

    }

    .taxCtaKeywords {

        margin-top: 31px;

    }

    .taxCtaStatement p {

        font-size: 15px;

    }

    .taxCtaStatementLine {

        min-height: 74px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .taxCtaContainer {

        width: calc(100% - 22px);

    }

    .taxCtaContent h2 {

        font-size: 30px;

    }

    .taxCtaVisualInner {

        min-height: 360px;

        padding: 15px;

    }

    .taxCtaStatement p {

        font-size: 15px;

    }

}

/* CTA Section Ends Here */

/* Tax Optimization Page Ends Here */


/* Estate Planning Page Starts Here */

/* Hero Section Starts Here */

/* =========================================================
   ESTATE PLANNING — HERO
========================================================= */

.estateHero {

    position: relative;

    width: 100%;

    min-height: 720px;

    padding: 105px 0 90px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


/* =========================================================
   CONTAINER
========================================================= */

.estateHeroContainer {

    width: min(1180px, calc(100% - 48px));

    min-height: 525px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(350px, .88fr);

    gap: clamp(65px, 9vw, 120px);

    align-items: center;

}


/* =========================================================
   LEFT CONTENT
========================================================= */

.estateHeroContent {

    min-width: 0;

    max-width: 700px;

}


/* =========================================================
   EYEBROW
========================================================= */

.estateHeroEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 22px;

}


.estateHeroEyebrow span {

    width: 32px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.estateHeroEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.55px;

    text-transform: uppercase;

}


/* =========================================================
   MAIN HEADING
========================================================= */

.estateHeroContent h1 {

    max-width: 720px;

    margin: 0;

    color: var(--primary);

    font-size: clamp(44px, 5.2vw, 67px);

    line-height: 1.02;

    letter-spacing: -2.8px;

    font-weight: 600;

}


/* Gold editorial line */

.estateHeroContent h1 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   DIVIDER
========================================================= */

.estateHeroDivider {

    width: 48px;

    height: 2px;

    margin-top: 30px;

    background: #c59a32;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.estateHeroDescription {

    max-width: 665px;

    margin-top: 25px;

}


.estateHeroDescription p {

    margin: 0;

    color: var(--text);

    opacity: .64;

    font-size: 11px;

    line-height: 1.88;

}


.estateHeroDescription p + p {

    margin-top: 14px;

}


/* =========================================================
   BUTTONS
========================================================= */

.estateHeroButtons {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 32px;

}


.estateHeroPrimary,
.estateHeroSecondary {

    min-height: 54px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    padding: 0 24px;

    text-decoration: none;

    font-size: 10px;

    line-height: 1.4;

    font-weight: 700;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease;

}


.estateHeroPrimary {

    gap: 13px;

    color: #fff;

    background: #c59a32;

    border: 1px solid #c59a32;

}


.estateHeroPrimary i {

    font-size: 9px;

    transition: transform .25s ease;

}


.estateHeroPrimary:hover {

    color: #c59a32;

    background: transparent;

}


.estateHeroPrimary:hover i {

    transform: translateX(4px);

}


.estateHeroSecondary {

    color: var(--primary);

    border: 1px solid rgba(197,154,50,.45);

}


.estateHeroSecondary:hover {

    color: #c59a32;

    border-color: #c59a32;

}


/* =========================================================
   BOTTOM IDENTITY
========================================================= */

.estateHeroBottom {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 33px;

}


.estateHeroBottom span {

    color: var(--text);

    opacity: .34;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.15px;

}


.estateHeroBottom span:nth-of-type(4) {

    color: #c59a32;

    opacity: .82;

}


.estateHeroBottom b {

    color: #c59a32;

    opacity: .60;

    font-size: 9px;

    font-weight: 500;

}


/* =========================================================
   RIGHT EDITORIAL VISUAL
========================================================= */

.estateHeroVisual {

    min-width: 0;

    width: 100%;

}


.estateHeroVisualInner {

    position: relative;

    min-height: 525px;

    padding: 30px 31px;

    box-sizing: border-box;

    border-left: 1px solid rgba(197,154,50,.62);

    display: flex;

    flex-direction: column;

    overflow: hidden;

}


/* Subtle geometric framing */

.estateHeroVisualInner::before {

    content: "";

    position: absolute;

    top: 0;

    right: 0;

    width: 52%;

    height: 1px;

    background: rgba(197,154,50,.22);

}


.estateHeroVisualInner::after {

    content: "";

    position: absolute;

    right: 0;

    bottom: 0;

    width: 1px;

    height: 34%;

    background: rgba(197,154,50,.12);

}


/* =========================================================
   META
========================================================= */

.estateHeroMeta {

    display: flex;

    align-items: center;

    gap: 8px;

    padding-bottom: 18px;

    border-bottom: 1px solid rgba(197,154,50,.25);

}


.estateHeroMeta span {

    color: var(--text);

    opacity: .32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.2px;

}


.estateHeroMeta .estateHeroMetaGold {

    color: #c59a32;

    opacity: .90;

}


/* =========================================================
   LEGACY
========================================================= */

.estateHeroLegacy {

    margin-top: 48px;

}


.estateHeroLegacy span {

    display: block;

    color: var(--primary);

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(58px, 7.2vw, 92px);

    line-height: .86;

    letter-spacing: -4px;

    font-weight: 500;

}


/* =========================================================
   KEYWORDS
========================================================= */

.estateHeroKeywords {

    display: flex;

    flex-direction: column;

    gap: 13px;

    margin-top: 31px;

    padding-left: 3px;

}


.estateHeroKeywords span {

    color: var(--text);

    opacity: .31;

    font-size: 10px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.4px;

}


.estateHeroKeywords .estateHeroGold {

    color: #c59a32;

    opacity: .95;

}


/* =========================================================
   STATEMENT
========================================================= */

.estateHeroStatement {

    display: flex;

    align-items: flex-start;

    gap: 16px;

    margin-top: auto;

    margin-bottom: 32px;

}


.estateHeroStatementRule {

    width: 2px;

    min-height: 91px;

    flex-shrink: 0;

    background: #c59a32;

}


.estateHeroStatement p {

    margin: 0;

    color: var(--primary);

    font-size: clamp(17px, 1.8vw, 23px);

    line-height: 1.38;

    letter-spacing: -.25px;

    font-weight: 600;

}


/* =========================================================
   BOTTOM DETAIL
========================================================= */

.estateHeroVisualBottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding-top: 18px;

    border-top: 1px solid rgba(197,154,50,.22);

}


.estateHeroVisualBottom span {

    color: var(--text);

    opacity: .26;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.2px;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .estateHero {

        min-height: auto;

        padding: 90px 0 80px;

    }

    .estateHeroContainer {

        grid-template-columns:
            minmax(0, 1.08fr)
            minmax(310px, .92fr);

        gap: 55px;

    }

    .estateHeroContent h1 {

        font-size: clamp(40px, 5.5vw, 57px);

    }

    .estateHeroVisualInner {

        min-height: 500px;

        padding: 26px;

    }

    .estateHeroLegacy span {

        font-size: clamp(55px, 7vw, 76px);

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

    .estateHero {

        padding: 80px 0 75px;

    }

    .estateHeroContainer {

        grid-template-columns: 1fr;

        gap: 55px;

    }

    .estateHeroContent {

        max-width: 760px;

    }

    .estateHeroContent h1 {

        font-size: clamp(40px, 7vw, 55px);

    }

    .estateHeroVisual {

        max-width: 700px;

    }

    .estateHeroVisualInner {

        min-height: 460px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .estateHero {

        padding: 65px 0 58px;

    }

    .estateHeroContainer {

        width: calc(100% - 30px);

        gap: 42px;

    }

    .estateHeroEyebrow {

        margin-bottom: 18px;

    }

    .estateHeroContent h1 {

        font-size: clamp(34px, 10vw, 44px);

        line-height: 1.08;

        letter-spacing: -1.3px;

    }

    .estateHeroDivider {

        margin-top: 24px;

    }

    .estateHeroDescription {

        margin-top: 21px;

    }

    .estateHeroDescription p {

        font-size: 10px;

        line-height: 1.8;

    }

    .estateHeroDescription p + p {

        margin-top: 13px;

    }


    /* BUTTONS */

    .estateHeroButtons {

        flex-direction: column;

        align-items: stretch;

        gap: 9px;

        margin-top: 27px;

    }

    .estateHeroPrimary,
    .estateHeroSecondary {

        width: 100%;

        min-height: 52px;

    }


    /* BOTTOM IDENTITY */

    .estateHeroBottom {

        gap: 6px;

        margin-top: 28px;

    }

    .estateHeroBottom span,
    .estateHeroBottom b {

        font-size: 9px;

    }


    /* RIGHT */

    .estateHeroVisualInner {

        min-height: 405px;

        padding: 21px;

    }

    .estateHeroLegacy {

        margin-top: 38px;

    }

    .estateHeroLegacy span {

        font-size: clamp(52px, 17vw, 68px);

        letter-spacing: -2.5px;

    }

    .estateHeroKeywords {

        margin-top: 25px;

        gap: 10px;

    }

    .estateHeroKeywords span {

        font-size: 9px;

    }

    .estateHeroStatement {

        gap: 13px;

        margin-bottom: 26px;

    }

    .estateHeroStatementRule {

        min-height: 77px;

    }

    .estateHeroStatement p {

        font-size: 16px;

        line-height: 1.4;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .estateHero {

        padding: 55px 0 50px;

    }

    .estateHeroContainer {

        width: calc(100% - 26px);

    }

    .estateHeroContent h1 {

        font-size: 33px;

    }

    .estateHeroDescription p {

        font-size: 9px;

        line-height: 1.78;

    }

    .estateHeroVisualInner {

        min-height: 380px;

        padding: 18px;

    }

    .estateHeroLegacy span {

        font-size: 51px;

    }

    .estateHeroStatement p {

        font-size: 15px;

    }

    .estateHeroStatementRule {

        min-height: 70px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .estateHeroContainer {

        width: calc(100% - 22px);

    }

    .estateHeroContent h1 {

        font-size: 30px;

    }

    .estateHeroVisualInner {

        min-height: 355px;

        padding: 15px;

    }

    .estateHeroLegacy span {

        font-size: 45px;

    }

    .estateHeroStatement p {

        font-size: 15px;

    }

}

/* Hero Section Ends Here */

/* Intro Section Starts Here */

/* =========================================================
   ESTATE PLANNING — INTRODUCTION
========================================================= */

.estateIntro {

    position: relative;

    width: 100%;

    padding: 115px 0 105px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.estateIntroContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(300px, .92fr)
        minmax(0, 1.08fr);

    gap: clamp(70px, 9vw, 125px);

    align-items: start;

}


/* =========================================================
   LEFT EDITORIAL CONTENT
========================================================= */

.estateIntroContent {

    max-width: 510px;

    padding-left: 28px;

    border-left: 1px solid rgba(197,154,50,.56);

    box-sizing: border-box;

}


.estateIntroEyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 21px;

}


.estateIntroEyebrow span {

    width: 30px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.estateIntroEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


/* =========================================================
   HEADING
========================================================= */

.estateIntroContent h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(38px, 4.3vw, 55px);

    line-height: 1.06;

    letter-spacing: -2px;

    font-weight: 600;

}


.estateIntroContent h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   GOLD RULE
========================================================= */

.estateIntroRule {

    width: 50px;

    height: 2px;

    margin-top: 30px;

    background: #c59a32;

}


/* =========================================================
   BODY TEXT
========================================================= */

.estateIntroText {

    max-width: 500px;

    margin-top: 24px;

}


.estateIntroText p {

    margin: 0;

    color: var(--text);

    opacity: .62;

    font-size: 10.5px;

    line-height: 1.88;

}


.estateIntroText p + p {

    margin-top: 14px;

}


/* =========================================================
   LEFT META
========================================================= */

.estateIntroMeta {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 31px;

}


.estateIntroMeta span {

    color: var(--text);

    opacity: .31;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.15px;

}


.estateIntroMeta span:nth-of-type(2) {

    color: #c59a32;

    opacity: .72;

}


.estateIntroMeta b {

    color: #c59a32;

    opacity: .65;

    font-size: 7px;

    font-weight: 500;

}


/* =========================================================
   RIGHT HIGHLIGHTS
========================================================= */

.estateIntroHighlights {

    width: 100%;

    border-top: 1px solid rgba(197,154,50,.32);

}


/* =========================================================
   HIGHLIGHT
========================================================= */

.estateIntroHighlight {

    padding: 27px 0 29px;

    border-bottom: 1px solid rgba(197,154,50,.27);

    box-sizing: border-box;

    transition:
        padding .25s ease,
        background .25s ease;

}


.estateIntroHighlight:hover {

    padding-left: 10px;

    padding-right: 10px;

    background: rgba(197,154,50,.018);

}


/* =========================================================
   TOP META
========================================================= */

.estateIntroHighlightTop {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 20px;

}


.estateIntroNumber {

    color: #c59a32;

    opacity: .88;

    font-size: 10px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.15px;

}


.estateIntroCategory {

    color: #c59a32;

    opacity: .62;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.1px;

    text-align: right;

}


/* =========================================================
   HIGHLIGHT TITLE
========================================================= */

.estateIntroHighlight h3 {

    margin: 0 0 9px;

    color: var(--primary);

    font-size: 21px;

    line-height: 1.3;

    letter-spacing: -.25px;

    font-weight: 600;

}


/* =========================================================
   HIGHLIGHT DESCRIPTION
========================================================= */

.estateIntroHighlight p {

    max-width: 620px;

    margin: 0;

    color: var(--text);

    opacity: .61;

    font-size: 10px;

    line-height: 1.82;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .estateIntro {

        padding: 90px 0 85px;

    }

    .estateIntroContainer {

        grid-template-columns:
            minmax(270px, .9fr)
            minmax(0, 1.1fr);

        gap: 60px;

    }

    .estateIntroContent h2 {

        font-size: clamp(36px, 5vw, 51px);

    }

    .estateIntroHighlight h3 {

        font-size: 20px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

    .estateIntro {

        padding: 80px 0 75px;

    }

    .estateIntroContainer {

        grid-template-columns: 1fr;

        gap: 50px;

    }

    .estateIntroContent {

        max-width: 760px;

    }

    .estateIntroContent h2 {

        font-size: clamp(40px, 7vw, 55px);

    }

    .estateIntroHighlights {

        max-width: 760px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .estateIntro {

        padding: 65px 0 58px;

    }

    .estateIntroContainer {

        width: calc(100% - 30px);

        gap: 40px;

    }

    .estateIntroContent {

        padding-left: 19px;

    }

    .estateIntroEyebrow {

        margin-bottom: 18px;

    }

    .estateIntroContent h2 {

        font-size: clamp(34px, 10vw, 44px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }

    .estateIntroRule {

        margin-top: 24px;

    }

    .estateIntroText {

        margin-top: 21px;

    }

    .estateIntroText p {

        font-size: 10px;

        line-height: 1.8;

    }

    .estateIntroText p + p {

        margin-top: 13px;

    }


    /* HIGHLIGHTS */

    .estateIntroHighlight {

        padding: 23px 0 26px;

    }

    .estateIntroHighlight:hover {

        padding-left: 0;

        padding-right: 0;

        background: transparent;

    }

    .estateIntroHighlightTop {

        margin-bottom: 17px;

    }

    .estateIntroNumber {

        font-size: 9px;

    }

    .estateIntroCategory {

        font-size: 9px;

    }

    .estateIntroHighlight h3 {

        font-size: 18px;

        line-height: 1.35;

    }

    .estateIntroHighlight p {

        font-size: 10px;

        line-height: 1.78;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .estateIntro {

        padding: 55px 0 50px;

    }

    .estateIntroContainer {

        width: calc(100% - 26px);

    }

    .estateIntroContent {

        padding-left: 16px;

    }

    .estateIntroContent h2 {

        font-size: 33px;

    }

    .estateIntroText p {

        font-size: 9px;

        line-height: 1.76;

    }

    .estateIntroHighlight {

        padding: 21px 0 24px;

    }

    .estateIntroHighlight h3 {

        font-size: 16px;

    }

    .estateIntroHighlight p {

        font-size: 9px;

        line-height: 1.75;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .estateIntroContainer {

        width: calc(100% - 22px);

    }

    .estateIntroContent h2 {

        font-size: 30px;

    }

    .estateIntroHighlight h3 {

        font-size: 15px;

    }

    .estateIntroHighlight p {

        font-size: 9px;

    }

}

/* Intro Section Ends Here */

/* Matters Section Starts Here */

/* =========================================================
   ESTATE PLANNING — WHY IT MATTERS
========================================================= */

.estateWhy {

    position: relative;

    width: 100%;

    padding: 120px 0 110px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.estateWhyContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(300px, .72fr)
        minmax(0, 1.28fr);

    gap: clamp(65px, 9vw, 125px);

    align-items: start;

}


/* =========================================================
   LEFT EDITORIAL AREA
========================================================= */

.estateWhyIntro {

    position: sticky;

    top: 80px;

    max-width: 440px;

    padding-left: 29px;

    border-left: 1px solid rgba(197,154,50,.58);

    box-sizing: border-box;

}


.estateWhyEyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 21px;

}


.estateWhyEyebrow span {

    width: 30px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.estateWhyEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


/* =========================================================
   HEADING
========================================================= */

.estateWhyIntro h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(38px, 4.3vw, 55px);

    line-height: 1.06;

    letter-spacing: -2px;

    font-weight: 600;

}


.estateWhyIntro h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   GOLD ACCENT
========================================================= */

.estateWhyRule {

    width: 50px;

    height: 2px;

    margin-top: 30px;

    background: #c59a32;

}


/* =========================================================
   STATEMENT
========================================================= */

.estateWhyStatement {

    max-width: 390px;

    margin: 23px 0 0;

    color: var(--text);

    opacity: .59;

    font-size: 10px;

    line-height: 1.85;

}


/* =========================================================
   META
========================================================= */

.estateWhyMeta {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 34px;

}


.estateWhyMeta span {

    color: var(--text);

    opacity: .31;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.estateWhyMeta span:last-child {

    color: #c59a32;

    opacity: .76;

}


.estateWhyMeta b {

    color: #c59a32;

    opacity: .65;

    font-size: 9px;

    font-weight: 500;

}


/* =========================================================
   RIGHT LIST
========================================================= */

.estateWhyList {

    width: 100%;

    border-top: 1px solid rgba(197,154,50,.35);

}


/* =========================================================
   LIST ITEM
========================================================= */

.estateWhyItem {

    display: grid;

    grid-template-columns:
        48px
        minmax(0, 1fr);

    column-gap: 24px;

    padding: 27px 0 29px;

    border-bottom: 1px solid rgba(197,154,50,.27);

    box-sizing: border-box;

    transition:
        padding .25s ease,
        background .25s ease;

}


.estateWhyItem:hover {

    padding-left: 10px;

    padding-right: 10px;

    background: rgba(197,154,50,.018);

}


/* =========================================================
   NUMBER
========================================================= */

.estateWhyNumber {

    padding-top: 3px;

    color: #c59a32;

    opacity: .87;

    font-size: 10px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.15px;

}


/* =========================================================
   CONTENT
========================================================= */

.estateWhyContent {

    min-width: 0;

}


.estateWhyContent h3 {

    margin: 0 0 9px;

    color: var(--primary);

    font-size: 20px;

    line-height: 1.32;

    letter-spacing: -.2px;

    font-weight: 600;

}


.estateWhyContent p {

    max-width: 660px;

    margin: 0;

    color: var(--text);

    opacity: .61;

    font-size: 10px;

    line-height: 1.82;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .estateWhy {

        padding: 95px 0 90px;

    }

    .estateWhyContainer {

        grid-template-columns:
            minmax(270px, .72fr)
            minmax(0, 1.28fr);

        gap: 60px;

    }

    .estateWhyIntro h2 {

        font-size: clamp(36px, 5vw, 51px);

    }

    .estateWhyItem {

        grid-template-columns:
            42px
            minmax(0, 1fr);

        column-gap: 20px;

    }

    .estateWhyContent h3 {

        font-size: 19px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

    .estateWhy {

        padding: 80px 0 75px;

    }

    .estateWhyContainer {

        grid-template-columns: 1fr;

        gap: 50px;

    }

    .estateWhyIntro {

        position: relative;

        top: auto;

        max-width: 760px;

    }

    .estateWhyIntro h2 {

        font-size: clamp(40px, 7vw, 55px);

    }

    .estateWhyList {

        max-width: 760px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .estateWhy {

        padding: 65px 0 58px;

    }

    .estateWhyContainer {

        width: calc(100% - 30px);

        gap: 40px;

    }

    .estateWhyIntro {

        padding-left: 19px;

    }

    .estateWhyEyebrow {

        margin-bottom: 18px;

    }

    .estateWhyIntro h2 {

        font-size: clamp(34px, 10vw, 44px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }

    .estateWhyRule {

        margin-top: 24px;

    }

    .estateWhyStatement {

        margin-top: 21px;

        font-size: 10px;

        line-height: 1.8;

    }

    .estateWhyMeta {

        margin-top: 27px;

    }


    /* LIST */

    .estateWhyItem {

        grid-template-columns:
            35px
            minmax(0, 1fr);

        column-gap: 14px;

        padding: 22px 0 25px;

    }


    .estateWhyItem:hover {

        padding-left: 0;

        padding-right: 0;

        background: transparent;

    }


    .estateWhyNumber {

        font-size: 9px;

    }


    .estateWhyContent h3 {

        font-size: 17px;

        line-height: 1.35;

    }


    .estateWhyContent p {

        font-size: 10px;

        line-height: 1.78;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .estateWhy {

        padding: 55px 0 50px;

    }

    .estateWhyContainer {

        width: calc(100% - 26px);

    }

    .estateWhyIntro {

        padding-left: 16px;

    }

    .estateWhyIntro h2 {

        font-size: 33px;

    }

    .estateWhyStatement {

        font-size: 9px;

        line-height: 1.76;

    }

    .estateWhyItem {

        grid-template-columns:
            32px
            minmax(0, 1fr);

        column-gap: 12px;

        padding: 20px 0 23px;

    }

    .estateWhyContent h3 {

        font-size: 15px;

    }

    .estateWhyContent p {

        font-size: 9px;

        line-height: 1.75;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .estateWhyContainer {

        width: calc(100% - 22px);

    }

    .estateWhyIntro h2 {

        font-size: 30px;

    }

    .estateWhyContent h3 {

        font-size: 15px;

    }

    .estateWhyContent p {

        font-size: 9px;

    }

}

/* Matters Section Ends Here */

/* Approach Section Starts Here */

/* =========================================================
   ESTATE PLANNING — APPROACH
========================================================= */

.estateApproach {

    position: relative;

    width: 100%;

    padding: 120px 0 110px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.estateApproachContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(330px, .78fr)
        minmax(0, 1.22fr);

    gap: clamp(65px, 9vw, 125px);

    align-items: start;

}


/* =========================================================
   LEFT VISUAL
========================================================= */

.estateApproachVisual {

    min-width: 0;

}


.estateApproachVisualInner {

    position: sticky;

    top: 80px;

    min-height: 620px;

    padding: 30px 30px 28px;

    box-sizing: border-box;

    border-left: 1px solid rgba(197,154,50,.60);

    display: flex;

    flex-direction: column;

    overflow: hidden;

}


/* subtle editorial framing */

.estateApproachVisualInner::before {

    content: "";

    position: absolute;

    top: 0;

    right: 0;

    width: 55%;

    height: 1px;

    background: rgba(197,154,50,.23);

}


.estateApproachVisualInner::after {

    content: "";

    position: absolute;

    right: 0;

    bottom: 0;

    width: 1px;

    height: 35%;

    background: rgba(197,154,50,.12);

}


/* =========================================================
   META
========================================================= */

.estateApproachMeta {

    display: flex;

    align-items: center;

    gap: 8px;

    padding-bottom: 18px;

    border-bottom: 1px solid rgba(197,154,50,.25);

}


.estateApproachMeta span {

    color: var(--text);

    opacity: .32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.15px;

}


.estateApproachMeta .estateApproachMetaGold {

    color: #c59a32;

    opacity: .90;

}


/* =========================================================
   ESTATE TYPOGRAPHY
========================================================= */

.estateApproachWord {

    margin-top: 55px;

}


.estateApproachWord span {

    display: block;

    color: var(--primary);

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(65px, 7vw, 95px);

    line-height: .86;

    letter-spacing: -4px;

    font-weight: 500;

}


/* =========================================================
   KEYWORDS
========================================================= */

.estateApproachKeywords {

    display: flex;

    flex-direction: column;

    gap: 13px;

    margin-top: 40px;

    padding-left: 3px;

}


.estateApproachKeywords span {

    color: var(--text);

    opacity: .30;

    font-size: 10px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.4px;

}


.estateApproachKeywords .estateApproachGold {

    color: #c59a32;

    opacity: .96;

}


/* =========================================================
   STATEMENT
========================================================= */

.estateApproachStatement {

    display: flex;

    align-items: flex-start;

    gap: 16px;

    margin-top: auto;

}


.estateApproachStatementRule {

    width: 2px;

    min-height: 82px;

    flex-shrink: 0;

    background: #c59a32;

}


.estateApproachStatement p {

    margin: 0;

    color: var(--primary);

    font-size: clamp(17px, 1.7vw, 22px);

    line-height: 1.42;

    letter-spacing: -.25px;

    font-weight: 600;

}


/* =========================================================
   RIGHT CONTENT
========================================================= */

.estateApproachContent {

    min-width: 0;

}


.estateApproachEyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 21px;

}


.estateApproachEyebrow span {

    width: 30px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.estateApproachEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


/* =========================================================
   HEADING
========================================================= */

.estateApproachContent h2 {

    max-width: 650px;

    margin: 0;

    color: var(--primary);

    font-size: clamp(38px, 4.3vw, 55px);

    line-height: 1.06;

    letter-spacing: -2px;

    font-weight: 600;

}


.estateApproachContent h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   LIST
========================================================= */

.estateApproachList {

    margin-top: 43px;

    border-top: 1px solid rgba(197,154,50,.35);

}


/* =========================================================
   ITEM
========================================================= */

.estateApproachItem {

    display: grid;

    grid-template-columns:
        46px
        minmax(0, 1fr);

    column-gap: 22px;

    padding: 26px 0 28px;

    border-bottom: 1px solid rgba(197,154,50,.26);

    box-sizing: border-box;

    transition:
        padding .25s ease,
        background .25s ease;

}


.estateApproachItem:hover {

    padding-left: 10px;

    padding-right: 10px;

    background: rgba(197,154,50,.018);

}


/* =========================================================
   NUMBER
========================================================= */

.estateApproachNumber {

    padding-top: 3px;

    color: #c59a32;

    opacity: .88;

    font-size: 10px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.15px;

}


/* =========================================================
   ITEM CONTENT
========================================================= */

.estateApproachItemContent {

    min-width: 0;

}


.estateApproachItemContent h3 {

    margin: 0 0 9px;

    color: var(--primary);

    font-size: 20px;

    line-height: 1.3;

    letter-spacing: -.2px;

    font-weight: 600;

}


.estateApproachItemContent p {

    max-width: 660px;

    margin: 0;

    color: var(--text);

    opacity: .61;

    font-size: 10px;

    line-height: 1.82;

}


/* =========================================================
   BOTTOM LINE
========================================================= */

.estateApproachBottom {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 30px;

}


.estateApproachBottom span {

    color: var(--text);

    opacity: .32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.estateApproachBottom span:nth-of-type(1) {

    color: #c59a32;

    opacity: .86;

}


.estateApproachBottom b {

    color: #c59a32;

    opacity: .60;

    font-size: 9px;

    font-weight: 500;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .estateApproach {

        padding: 95px 0 90px;

    }

    .estateApproachContainer {

        grid-template-columns:
            minmax(290px, .76fr)
            minmax(0, 1.24fr);

        gap: 60px;

    }

    .estateApproachVisualInner {

        min-height: 590px;

        padding: 26px;

    }

    .estateApproachWord span {

        font-size: clamp(58px, 7vw, 78px);

    }

    .estateApproachContent h2 {

        font-size: clamp(36px, 5vw, 51px);

    }

    .estateApproachItem {

        grid-template-columns:
            40px
            minmax(0, 1fr);

        column-gap: 19px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

    .estateApproach {

        padding: 80px 0 75px;

    }

    .estateApproachContainer {

        grid-template-columns: 1fr;

        gap: 50px;

    }

    .estateApproachVisualInner {

        position: relative;

        top: auto;

        min-height: 475px;

        max-width: 760px;

    }

    .estateApproachWord {

        margin-top: 45px;

    }

    .estateApproachContent {

        max-width: 760px;

    }

    .estateApproachContent h2 {

        font-size: clamp(40px, 7vw, 55px);

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .estateApproach {

        padding: 65px 0 58px;

    }

    .estateApproachContainer {

        width: calc(100% - 30px);

        gap: 40px;

    }


    /* VISUAL */

    .estateApproachVisualInner {

        min-height: 405px;

        padding: 21px;

    }

    .estateApproachWord {

        margin-top: 36px;

    }

    .estateApproachWord span {

        font-size: clamp(52px, 17vw, 68px);

        letter-spacing: -2.5px;

    }

    .estateApproachKeywords {

        margin-top: 28px;

        gap: 10px;

    }

    .estateApproachKeywords span {

        font-size: 9px;

    }

    .estateApproachStatement {

        gap: 13px;

    }

    .estateApproachStatementRule {

        min-height: 74px;

    }

    .estateApproachStatement p {

        font-size: 16px;

        line-height: 1.4;

    }


    /* CONTENT */

    .estateApproachEyebrow {

        margin-bottom: 18px;

    }

    .estateApproachContent h2 {

        font-size: clamp(34px, 10vw, 44px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }

    .estateApproachList {

        margin-top: 32px;

    }

    .estateApproachItem {

        grid-template-columns:
            34px
            minmax(0, 1fr);

        column-gap: 13px;

        padding: 22px 0 25px;

    }

    .estateApproachItem:hover {

        padding-left: 0;

        padding-right: 0;

        background: transparent;

    }

    .estateApproachNumber {

        font-size: 9px;

    }

    .estateApproachItemContent h3 {

        font-size: 17px;

        line-height: 1.35;

    }

    .estateApproachItemContent p {

        font-size: 10px;

        line-height: 1.78;

    }

    .estateApproachBottom {

        margin-top: 26px;

        gap: 6px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .estateApproach {

        padding: 55px 0 50px;

    }

    .estateApproachContainer {

        width: calc(100% - 26px);

    }

    .estateApproachVisualInner {

        min-height: 380px;

        padding: 18px;

    }

    .estateApproachWord span {

        font-size: 51px;

    }

    .estateApproachStatement p {

        font-size: 15px;

    }

    .estateApproachStatementRule {

        min-height: 69px;

    }

    .estateApproachContent h2 {

        font-size: 33px;

    }

    .estateApproachItem {

        grid-template-columns:
            31px
            minmax(0, 1fr);

        column-gap: 11px;

        padding: 20px 0 23px;

    }

    .estateApproachItemContent h3 {

        font-size: 15px;

    }

    .estateApproachItemContent p {

        font-size: 9px;

        line-height: 1.75;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .estateApproachContainer {

        width: calc(100% - 22px);

    }

    .estateApproachVisualInner {

        min-height: 355px;

        padding: 15px;

    }

    .estateApproachWord span {

        font-size: 45px;

    }

    .estateApproachContent h2 {

        font-size: 30px;

    }

    .estateApproachItemContent h3 {

        font-size: 15px;

    }

    .estateApproachItemContent p {

        font-size: 9px;

    }

}

/* Approach Section Ends Here */

/* Strategies Section Starts Here */

/* =========================================================
   ESTATE PLANNING — STRATEGIES
========================================================= */

.estateStrategies {

    position: relative;

    width: 100%;

    padding: 120px 0 115px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.estateStrategiesContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   HEADER
========================================================= */

.estateStrategiesHeader {

    max-width: 760px;

    margin-bottom: 58px;

}


.estateStrategiesEyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 21px;

}


.estateStrategiesEyebrow span {

    width: 30px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.estateStrategiesEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.estateStrategiesHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.8vw, 60px);

    line-height: 1.05;

    letter-spacing: -2.3px;

    font-weight: 600;

}


.estateStrategiesHeader h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   GRID
========================================================= */

.estateStrategiesGrid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    column-gap: 55px;

    border-top: 1px solid rgba(197,154,50,.36);

}


/* =========================================================
   STRATEGY ITEM
========================================================= */

.estateStrategyItem {

    min-width: 0;

    min-height: 285px;

    padding: 29px 0 34px;

    border-bottom: 1px solid rgba(197,154,50,.27);

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    transition:
        padding .25s ease,
        background .25s ease;

}


/*
   Keep the 2 × 3 grid visually balanced.
   Every item gets equal vertical breathing room.
*/

.estateStrategyItem:hover {

    padding-left: 10px;

    padding-right: 10px;

    background: rgba(197,154,50,.018);

}


/* =========================================================
   TOP META
========================================================= */

.estateStrategyTop {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 25px;

}


.estateStrategyNumber {

    color: #c59a32;

    opacity: .90;

    font-size: 11px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.2px;

}


.estateStrategyCategory {

    color: #c59a32;

    opacity: .65;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.05px;

    text-align: right;

}


/* =========================================================
   BODY
========================================================= */

.estateStrategyBody {

    max-width: 500px;

    margin-top: auto;

    padding-top: 52px;

}


.estateStrategyBody h3 {

    margin: 0 0 12px;

    color: var(--primary);

    font-size: 23px;

    line-height: 1.28;

    letter-spacing: -.35px;

    font-weight: 600;

}


.estateStrategyBody p {

    margin: 0;

    color: var(--text);

    opacity: .61;

    font-size: 10.5px;

    line-height: 1.85;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .estateStrategies {

        padding: 95px 0 90px;

    }

    .estateStrategiesHeader {

        margin-bottom: 48px;

    }

    .estateStrategiesHeader h2 {

        font-size: clamp(38px, 5.3vw, 53px);

    }

    .estateStrategiesGrid {

        column-gap: 40px;

    }

    .estateStrategyItem {

        min-height: 275px;

    }

    .estateStrategyBody {

        padding-top: 45px;

    }

    .estateStrategyBody h3 {

        font-size: 21px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

    .estateStrategies {

        padding: 80px 0 75px;

    }

    .estateStrategiesHeader {

        max-width: 700px;

        margin-bottom: 42px;

    }

    .estateStrategiesHeader h2 {

        font-size: clamp(40px, 7vw, 55px);

    }

    .estateStrategiesGrid {

        column-gap: 30px;

    }

    .estateStrategyItem {

        min-height: 260px;

    }

    .estateStrategyBody {

        padding-top: 38px;

    }

}


/* =========================================================
   MOBILE — SINGLE COLUMN
========================================================= */

@media (max-width: 600px) {

    .estateStrategies {

        padding: 65px 0 58px;

    }

    .estateStrategiesContainer {

        width: calc(100% - 30px);

    }

    .estateStrategiesHeader {

        margin-bottom: 35px;

    }

    .estateStrategiesEyebrow {

        margin-bottom: 18px;

    }

    .estateStrategiesHeader h2 {

        font-size: clamp(34px, 10vw, 44px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }


    /* SINGLE COLUMN */

    .estateStrategiesGrid {

        grid-template-columns: 1fr;

        column-gap: 0;

    }


    .estateStrategyItem {

        min-height: auto;

        padding: 23px 0 28px;

    }


    .estateStrategyItem:hover {

        padding-left: 0;

        padding-right: 0;

        background: transparent;

    }


    .estateStrategyTop {

        gap: 15px;

    }


    .estateStrategyNumber {

        font-size: 9px;

    }


    .estateStrategyCategory {

        font-size: 9px;

        line-height: 1.45;

    }


    .estateStrategyBody {

        max-width: 100%;

        margin-top: 0;

        padding-top: 27px;

    }


    .estateStrategyBody h3 {

        margin-bottom: 9px;

        font-size: 18px;

        line-height: 1.35;

    }


    .estateStrategyBody p {

        font-size: 10px;

        line-height: 1.78;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .estateStrategies {

        padding: 55px 0 50px;

    }

    .estateStrategiesContainer {

        width: calc(100% - 26px);

    }

    .estateStrategiesHeader h2 {

        font-size: 33px;

    }

    .estateStrategyItem {

        padding: 21px 0 25px;

    }

    .estateStrategyBody {

        padding-top: 24px;

    }

    .estateStrategyBody h3 {

        font-size: 16px;

    }

    .estateStrategyBody p {

        font-size: 9px;

        line-height: 1.76;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .estateStrategiesContainer {

        width: calc(100% - 22px);

    }

    .estateStrategiesHeader h2 {

        font-size: 30px;

    }

    .estateStrategyCategory {

        font-size: 9px;

    }

    .estateStrategyBody h3 {

        font-size: 15px;

    }

    .estateStrategyBody p {

        font-size: 9px;

    }

}

/* Strategies Section Ends Here */

/* Who Section Starts Here */

/* =========================================================
   ESTATE PLANNING — WHO IS IT FOR
========================================================= */

.estateWho {

    position: relative;

    width: 100%;

    padding: 120px 0 115px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.estateWhoContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   HEADER
========================================================= */

.estateWhoHeader {

    max-width: 760px;

    margin-bottom: 58px;

}


.estateWhoEyebrow {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 21px;

}


.estateWhoEyebrow span {

    width: 30px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.estateWhoEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.estateWhoHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.8vw, 60px);

    line-height: 1.05;

    letter-spacing: -2.3px;

    font-weight: 600;

}


.estateWhoHeader h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   LIST
========================================================= */

.estateWhoList {

    width: 100%;

    border-top: 1px solid rgba(197,154,50,.36);

}


/* =========================================================
   ITEM
========================================================= */

.estateWhoItem {

    display: grid;

    grid-template-columns:
        52px
        minmax(0, 1fr)
        minmax(150px, .32fr);

    column-gap: 28px;

    align-items: start;

    padding: 28px 0 30px;

    border-bottom: 1px solid rgba(197,154,50,.27);

    box-sizing: border-box;

    transition:
        padding .25s ease,
        background .25s ease;

}


.estateWhoItem:hover {

    padding-left: 12px;

    padding-right: 12px;

    background: rgba(197,154,50,.018);

}


/* =========================================================
   NUMBER
========================================================= */

.estateWhoNumber {

    padding-top: 3px;

    color: #c59a32;

    opacity: .88;

    font-size: 11px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.15px;

}


/* =========================================================
   MAIN CONTENT
========================================================= */

.estateWhoMain {

    min-width: 0;

    max-width: 650px;

}


.estateWhoMain h3 {

    margin: 0 0 9px;

    color: var(--primary);

    font-size: 21px;

    line-height: 1.3;

    letter-spacing: -.25px;

    font-weight: 600;

}


.estateWhoMain p {

    max-width: 640px;

    margin: 0;

    color: var(--text);

    opacity: .61;

    font-size: 10.5px;

    line-height: 1.82;

}


/* =========================================================
   CATEGORY
========================================================= */

.estateWhoCategory {

    padding-top: 5px;

    color: #c59a32;

    opacity: .68;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1.05px;

    text-align: right;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .estateWho {

        padding: 95px 0 90px;

    }

    .estateWhoHeader {

        margin-bottom: 48px;

    }

    .estateWhoHeader h2 {

        font-size: clamp(38px, 5.3vw, 53px);

    }

    .estateWhoItem {

        grid-template-columns:
            45px
            minmax(0, 1fr)
            minmax(130px, .3fr);

        column-gap: 22px;

    }

    .estateWhoMain h3 {

        font-size: 20px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

    .estateWho {

        padding: 80px 0 75px;

    }

    .estateWhoHeader {

        margin-bottom: 42px;

    }

    .estateWhoHeader h2 {

        font-size: clamp(40px, 7vw, 55px);

    }

    .estateWhoItem {

        grid-template-columns:
            40px
            minmax(0, 1fr)
            minmax(115px, .32fr);

        column-gap: 18px;

        padding: 25px 0 27px;

    }

    .estateWhoCategory {

        font-size: 9px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .estateWho {

        padding: 65px 0 58px;

    }

    .estateWhoContainer {

        width: calc(100% - 30px);

    }

    .estateWhoHeader {

        margin-bottom: 34px;

    }

    .estateWhoEyebrow {

        margin-bottom: 18px;

    }

    .estateWhoHeader h2 {

        font-size: clamp(34px, 10vw, 44px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }


    /* SINGLE COLUMN EDITORIAL LIST */

    .estateWhoItem {

        display: grid;

        grid-template-columns:
            35px
            minmax(0, 1fr);

        column-gap: 14px;

        padding: 23px 0 27px;

    }


    .estateWhoItem:hover {

        padding-left: 0;

        padding-right: 0;

        background: transparent;

    }


    .estateWhoNumber {

        font-size: 9px;

    }


    .estateWhoMain {

        max-width: none;

    }


    .estateWhoMain h3 {

        font-size: 18px;

        line-height: 1.35;

    }


    .estateWhoMain p {

        font-size: 10px;

        line-height: 1.78;

    }


    /*
       Category moves BELOW the description
    */

    .estateWhoCategory {

        grid-column: 2;

        padding-top: 14px;

        text-align: left;

        font-size: 9px;

        line-height: 1.4;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .estateWho {

        padding: 55px 0 50px;

    }

    .estateWhoContainer {

        width: calc(100% - 26px);

    }

    .estateWhoHeader h2 {

        font-size: 33px;

    }

    .estateWhoItem {

        grid-template-columns:
            32px
            minmax(0, 1fr);

        column-gap: 12px;

        padding: 21px 0 24px;

    }

    .estateWhoMain h3 {

        font-size: 16px;

    }

    .estateWhoMain p {

        font-size: 9px;

        line-height: 1.76;

    }

    .estateWhoCategory {

        font-size: 9px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .estateWhoContainer {

        width: calc(100% - 22px);

    }

    .estateWhoHeader h2 {

        font-size: 30px;

    }

    .estateWhoItem {

        grid-template-columns:
            30px
            minmax(0, 1fr);

        column-gap: 10px;

    }

    .estateWhoMain h3 {

        font-size: 15px;

    }

    .estateWhoMain p {

        font-size: 9px;

    }

}

/* Who Section Ends Here */

/* CTA Section Starts Here */

/* =========================================================
   ESTATE PLANNING — FINAL CTA
========================================================= */

.estateFinalCta {

    position: relative;

    width: 100%;

    padding: 120px 0 105px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.estateFinalCtaContainer {

    width: min(1180px, calc(100% - 48px));

    min-height: 510px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(340px, .85fr);

    gap: clamp(65px, 9vw, 120px);

    align-items: center;

}


/* =========================================================
   LEFT CONTENT
========================================================= */

.estateFinalCtaContent {

    min-width: 0;

    max-width: 720px;

}


.estateFinalCtaEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 22px;

}


.estateFinalCtaEyebrow span {

    width: 32px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.estateFinalCtaEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.55px;

    text-transform: uppercase;

}


/* =========================================================
   HEADING
========================================================= */

.estateFinalCtaContent h2 {

    max-width: 720px;

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.8vw, 61px);

    line-height: 1.05;

    letter-spacing: -2.3px;

    font-weight: 600;

}


.estateFinalCtaContent h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   GOLD RULE
========================================================= */

.estateFinalCtaRule {

    width: 48px;

    height: 2px;

    margin-top: 30px;

    background: #c59a32;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.estateFinalCtaDescription {

    max-width: 680px;

    margin-top: 25px;

}


.estateFinalCtaDescription p {

    margin: 0;

    color: var(--text);

    opacity: .63;

    font-size: 11px;

    line-height: 1.88;

}


/* =========================================================
   BUTTONS
========================================================= */

.estateFinalCtaButtons {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 33px;

}


.estateFinalCtaPrimary,
.estateFinalCtaSecondary {

    min-height: 54px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    padding: 0 24px;

    text-decoration: none;

    font-size: 10px;

    line-height: 1.4;

    font-weight: 700;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease;

}


.estateFinalCtaPrimary {

    gap: 13px;

    color: #fff;

    background: #c59a32;

    border: 1px solid #c59a32;

}


.estateFinalCtaPrimary i {

    font-size: 9px;

    transition: transform .25s ease;

}


.estateFinalCtaPrimary:hover {

    color: #c59a32;

    background: transparent;

}


.estateFinalCtaPrimary:hover i {

    transform: translateX(4px);

}


.estateFinalCtaSecondary {

    color: var(--primary);

    border: 1px solid rgba(197,154,50,.45);

}


.estateFinalCtaSecondary:hover {

    color: #c59a32;

    border-color: #c59a32;

}


/* =========================================================
   BOTTOM PROCESS
========================================================= */

.estateFinalCtaBottom {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 34px;

}


.estateFinalCtaBottom span {

    color: var(--text);

    opacity: .33;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.15px;

}


.estateFinalCtaBottom span:last-child {

    color: #c59a32;

    opacity: .84;

}


.estateFinalCtaBottom b {

    color: #c59a32;

    opacity: .60;

    font-size: 9px;

    font-weight: 500;

}


/* =========================================================
   RIGHT EDITORIAL AREA
========================================================= */

.estateFinalCtaVisual {

    min-width: 0;

    width: 100%;

}


.estateFinalCtaVisualInner {

    position: relative;

    min-height: 510px;

    padding: 29px 30px;

    box-sizing: border-box;

    border-left: 1px solid rgba(197,154,50,.60);

    display: flex;

    flex-direction: column;

    overflow: hidden;

}


/* subtle editorial framing */

.estateFinalCtaVisualInner::before {

    content: "";

    position: absolute;

    top: 0;

    right: 0;

    width: 50%;

    height: 1px;

    background: rgba(197,154,50,.20);

}


.estateFinalCtaVisualInner::after {

    content: "";

    position: absolute;

    right: 0;

    bottom: 0;

    width: 1px;

    height: 32%;

    background: rgba(197,154,50,.11);

}


/* =========================================================
   META
========================================================= */

.estateFinalCtaMeta {

    display: flex;

    align-items: center;

    gap: 8px;

    padding-bottom: 18px;

    border-bottom: 1px solid rgba(197,154,50,.24);

}


.estateFinalCtaMeta span {

    color: var(--text);

    opacity: .32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.15px;

}


.estateFinalCtaMeta .estateFinalCtaMetaGold {

    color: #c59a32;

    opacity: .88;

}


/* =========================================================
   KEYWORDS
========================================================= */

.estateFinalCtaKeywords {

    display: flex;

    flex-direction: column;

    gap: 13px;

    margin-top: 43px;

}


.estateFinalCtaKeywords span {

    color: var(--text);

    opacity: .32;

    font-size: 10px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.4px;

}


.estateFinalCtaKeywords .estateFinalCtaGold {

    color: #c59a32;

    opacity: .96;

}


/* =========================================================
   EDITORIAL STATEMENT
========================================================= */

.estateFinalCtaStatement {

    display: flex;

    align-items: flex-start;

    gap: 17px;

    margin-top: auto;

    margin-bottom: 34px;

}


.estateFinalCtaStatementRule {

    width: 2px;

    min-height: 112px;

    flex-shrink: 0;

    background: #c59a32;

}


.estateFinalCtaStatement p {

    margin: 0;

    color: var(--primary);

    font-size: clamp(17px, 1.8vw, 23px);

    line-height: 1.38;

    letter-spacing: -.3px;

    font-weight: 600;

}


/* =========================================================
   BOTTOM DETAIL
========================================================= */

.estateFinalCtaVisualBottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding-top: 18px;

    border-top: 1px solid rgba(197,154,50,.21);

}


.estateFinalCtaVisualBottom span {

    color: var(--text);

    opacity: .27;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.2px;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .estateFinalCta {

        padding: 95px 0 85px;

    }

    .estateFinalCtaContainer {

        grid-template-columns:
            minmax(0, 1.1fr)
            minmax(300px, .9fr);

        gap: 55px;

    }

    .estateFinalCtaContent h2 {

        font-size: clamp(38px, 5vw, 55px);

    }

    .estateFinalCtaVisualInner {

        min-height: 475px;

        padding: 25px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

    .estateFinalCta {

        padding: 80px 0 75px;

    }

    .estateFinalCtaContainer {

        grid-template-columns: 1fr;

        gap: 55px;

    }

    .estateFinalCtaContent {

        max-width: 760px;

    }

    .estateFinalCtaContent h2 {

        font-size: clamp(40px, 7vw, 55px);

    }

    .estateFinalCtaVisual {

        max-width: 700px;

    }

    .estateFinalCtaVisualInner {

        min-height: 440px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .estateFinalCta {

        padding: 65px 0 58px;

    }

    .estateFinalCtaContainer {

        width: calc(100% - 30px);

        gap: 42px;

    }

    .estateFinalCtaEyebrow {

        margin-bottom: 18px;

    }

    .estateFinalCtaContent h2 {

        font-size: clamp(34px, 10vw, 44px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }

    .estateFinalCtaRule {

        margin-top: 24px;

    }

    .estateFinalCtaDescription {

        margin-top: 21px;

    }

    .estateFinalCtaDescription p {

        font-size: 10px;

        line-height: 1.8;

    }


    /* BUTTONS */

    .estateFinalCtaButtons {

        flex-direction: column;

        align-items: stretch;

        gap: 9px;

        margin-top: 27px;

    }

    .estateFinalCtaPrimary,
    .estateFinalCtaSecondary {

        width: 100%;

        min-height: 52px;

    }


    /* PROCESS */

    .estateFinalCtaBottom {

        gap: 6px;

        margin-top: 28px;

    }


    /* RIGHT */

    .estateFinalCtaVisualInner {

        min-height: 410px;

        padding: 21px;

    }

    .estateFinalCtaKeywords {

        margin-top: 36px;

        gap: 11px;

    }

    .estateFinalCtaKeywords span {

        font-size: 9px;

    }

    .estateFinalCtaStatement {

        gap: 13px;

        margin-bottom: 28px;

    }

    .estateFinalCtaStatementRule {

        min-height: 100px;

    }

    .estateFinalCtaStatement p {

        font-size: 16px;

        line-height: 1.4;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .estateFinalCta {

        padding: 55px 0 50px;

    }

    .estateFinalCtaContainer {

        width: calc(100% - 26px);

    }

    .estateFinalCtaContent h2 {

        font-size: 33px;

    }

    .estateFinalCtaDescription p {

        font-size: 9px;

        line-height: 1.76;

    }

    .estateFinalCtaVisualInner {

        min-height: 385px;

        padding: 18px;

    }

    .estateFinalCtaKeywords {

        margin-top: 31px;

    }

    .estateFinalCtaStatement p {

        font-size: 15px;

    }

    .estateFinalCtaStatementRule {

        min-height: 91px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .estateFinalCtaContainer {

        width: calc(100% - 22px);

    }

    .estateFinalCtaContent h2 {

        font-size: 30px;

    }

    .estateFinalCtaVisualInner {

        min-height: 360px;

        padding: 15px;

    }

    .estateFinalCtaStatement p {

        font-size: 15px;

    }

}

/* CTA Section Ends Here */

/* Estate Planning Page Ends Here */


/* SIP Calculator Page Starts Here */

/* Hero Section Starts Here */

/* =========================================================
   INVESTMENT CALCULATOR — HERO
========================================================= */

.investmentCalcHero {

    position: relative;

    width: 100%;

    padding: 105px 0 95px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.investmentCalcHeroContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(430px, .82fr);

    gap: clamp(55px, 8vw, 110px);

    align-items: center;

}


/* =========================================================
   LEFT CONTENT
========================================================= */

.investmentCalcHeroContent {

    min-width: 0;

    max-width: 670px;

}


/* =========================================================
   PREFIX
========================================================= */

.investmentCalcHeroPrefix {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 22px;

}


.investmentCalcHeroPrefix span {

    width: 32px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.investmentCalcHeroPrefix p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.55px;

    text-transform: uppercase;

}


/* =========================================================
   HEADING
========================================================= */

.investmentCalcHeroContent h1 {

    max-width: 690px;

    margin: 0;

    color: var(--primary);

    font-size: clamp(44px, 5vw, 66px);

    line-height: 1.02;

    letter-spacing: -2.7px;

    font-weight: 600;

}


.investmentCalcHeroContent h1 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.investmentCalcHeroDescription {

    max-width: 630px;

    margin: 27px 0 0;

    color: var(--text);

    opacity: .64;

    font-size: 11px;

    line-height: 1.9;

}


/* =========================================================
   SUPPORTING TEXT
========================================================= */

.investmentCalcHeroSupport {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 25px;

}


.investmentCalcHeroSupportLine {

    width: 24px;

    height: 1px;

    flex-shrink: 0;

    background: #c59a32;

}


.investmentCalcHeroSupport span:last-child {

    color: var(--primary);

    opacity: .66;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.15px;

    text-transform: uppercase;

}


/* =========================================================
   BUTTONS
========================================================= */

.investmentCalcHeroButtons {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 32px;

}


.investmentCalcHeroPrimary,
.investmentCalcHeroSecondary {

    min-height: 54px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    padding: 0 23px;

    text-decoration: none;

    font-size: 10px;

    line-height: 1.4;

    font-weight: 700;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;

}


.investmentCalcHeroPrimary {

    gap: 13px;

    color: #fff;

    background: #c59a32;

    border: 1px solid #c59a32;

}


.investmentCalcHeroPrimary i {

    font-size: 9px;

    transition: transform .25s ease;

}


.investmentCalcHeroPrimary:hover {

    color: #c59a32;

    background: transparent;

}


.investmentCalcHeroPrimary:hover i {

    transform: translateX(4px);

}


.investmentCalcHeroSecondary {

    color: var(--primary);

    border: 1px solid rgba(197,154,50,.48);

}


.investmentCalcHeroSecondary:hover {

    color: #c59a32;

    border-color: #c59a32;

}


/* =========================================================
   DISCLAIMER
========================================================= */

.investmentCalcHeroDisclaimer {

    max-width: 570px;

    margin: 20px 0 0;

    color: var(--text);

    opacity: .38;

    font-size: 9px;

    line-height: 1.65;

}


/* =========================================================
   CALCULATOR TOOL
========================================================= */

.investmentCalcHeroTool {

    position: relative;

    min-width: 0;

}


.investmentCalcHeroToolInner {

    position: relative;

    width: 100%;

    padding: 27px;

    box-sizing: border-box;

    background: var(--section);

    border: 1px solid rgba(197,154,50,.32);

    box-shadow:
        0 20px 60px rgba(0,0,0,.08);

}


/* subtle editorial corner */

.investmentCalcHeroToolInner::before {

    content: "";

    position: absolute;

    top: -1px;

    left: 28px;

    width: 70px;

    height: 2px;

    background: #c59a32;

}


/* =========================================================
   TOOL HEADER
========================================================= */

.investmentCalcHeroToolHeader {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    padding-bottom: 20px;

    border-bottom: 1px solid rgba(197,154,50,.22);

}


.investmentCalcHeroToolEyebrow {

    display: block;

    margin-bottom: 7px;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.25px;

}


.investmentCalcHeroToolHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: 24px;

    line-height: 1.25;

    letter-spacing: -.4px;

    font-weight: 600;

}


.investmentCalcHeroToolNumber {

    color: #c59a32;

    opacity: .75;

    font-size: 10px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1px;

}


/* =========================================================
   MODE SWITCH
========================================================= */

.investmentCalcHeroMode {

    display: grid;

    grid-template-columns: 1fr 1fr;

    margin-top: 22px;

    padding: 4px;

    background: rgba(197,154,50,.055);

    border: 1px solid rgba(197,154,50,.20);

}


.investmentCalcHeroModeBtn {

    min-height: 42px;

    padding: 0 10px;

    color: var(--text);

    opacity: .48;

    background: transparent;

    border: 0;

    cursor: pointer;

    font-family: inherit;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.15px;

    transition:
        color .25s ease,
        opacity .25s ease,
        background .25s ease;

}


.investmentCalcHeroModeBtn.active {

    color: #fff;

    opacity: 1;

    background: #c59a32;

}


/* =========================================================
   FIELDS
========================================================= */

.investmentCalcHeroFields {

    display: flex;

    flex-direction: column;

    gap: 22px;

    margin-top: 25px;

}


.investmentCalcHeroField {

    width: 100%;

}


.investmentCalcHeroFieldTop {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 10px;

}


.investmentCalcHeroFieldTop label {

    color: var(--text);

    opacity: .58;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 600;

}


.investmentCalcHeroFieldTop span {

    color: var(--primary);

    font-size: 12px;

    line-height: 1.4;

    font-weight: 700;

}


/* =========================================================
   FAKE SLIDER
========================================================= */

.investmentCalcHeroFakeSlider {

    position: relative;

    width: 100%;

    height: 3px;

    background: rgba(197,154,50,.16);

}


.investmentCalcHeroFakeSlider span {

    position: absolute;

    top: 50%;

    left: 0;

    width: 45%;

    height: 3px;

    transform: translateY(-50%);

    background: #c59a32;

}


.investmentCalcHeroFakeSlider span::after {

    content: "";

    position: absolute;

    top: 50%;

    right: -5px;

    width: 10px;

    height: 10px;

    transform: translateY(-50%);

    border-radius: 50%;

    background: #c59a32;

    box-shadow: 0 0 0 3px rgba(197,154,50,.12);

}


/* =========================================================
   RESULT
========================================================= */

.investmentCalcHeroResult {

    margin-top: 27px;

    padding: 22px 0 0;

    border-top: 1px solid rgba(197,154,50,.25);

}


.investmentCalcHeroResultLabel {

    color: #c59a32;

    opacity: .78;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.25px;

}


.investmentCalcHeroResultValue {

    margin-top: 7px;

    color: var(--primary);

    font-size: clamp(30px, 3vw, 39px);

    line-height: 1.1;

    letter-spacing: -1.3px;

    font-weight: 700;

}


/* =========================================================
   RESULT META
========================================================= */

.investmentCalcHeroResultMeta {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

    margin-top: 21px;

}


.investmentCalcHeroResultMeta div {

    min-width: 0;

    padding-left: 12px;

    border-left: 1px solid rgba(197,154,50,.45);

}


.investmentCalcHeroResultMeta span {

    display: block;

    color: var(--text);

    opacity: .38;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: .9px;

}


.investmentCalcHeroResultMeta strong {

    display: block;

    margin-top: 5px;

    color: var(--primary);

    font-size: 12px;

    line-height: 1.4;

    font-weight: 700;

}


/* =========================================================
   TOOL FOOTER
========================================================= */

.investmentCalcHeroToolFooter {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-top: 25px;

    padding-top: 16px;

    border-top: 1px solid rgba(197,154,50,.18);

}


.investmentCalcHeroToolFooter span {

    color: var(--text);

    opacity: .30;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: .95px;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .investmentCalcHero {

        padding: 90px 0 80px;

    }

    .investmentCalcHeroContainer {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(380px, .88fr);

        gap: 55px;

    }

    .investmentCalcHeroContent h1 {

        font-size: clamp(40px, 5.2vw, 57px);

    }

    .investmentCalcHeroToolInner {

        padding: 23px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

    .investmentCalcHero {

        padding: 78px 0 70px;

    }

    .investmentCalcHeroContainer {

        grid-template-columns: 1fr;

        gap: 48px;

    }

    .investmentCalcHeroContent {

        max-width: 760px;

    }

    .investmentCalcHeroContent h1 {

        font-size: clamp(42px, 8vw, 58px);

    }

    .investmentCalcHeroDescription {

        max-width: 700px;

    }

    .investmentCalcHeroTool {

        width: 100%;

        max-width: 700px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .investmentCalcHero {

        padding: 62px 0 55px;

    }

    .investmentCalcHeroContainer {

        width: calc(100% - 30px);

        gap: 38px;

    }


    /* LEFT */

    .investmentCalcHeroPrefix {

        margin-bottom: 18px;

    }

    .investmentCalcHeroContent h1 {

        font-size: clamp(34px, 10.5vw, 46px);

        line-height: 1.07;

        letter-spacing: -1.4px;

    }

    .investmentCalcHeroDescription {

        margin-top: 21px;

        font-size: 10px;

        line-height: 1.8;

    }

    .investmentCalcHeroSupport {

        margin-top: 21px;

    }

    .investmentCalcHeroButtons {

        flex-direction: column;

        align-items: stretch;

        margin-top: 27px;

    }

    .investmentCalcHeroPrimary,
    .investmentCalcHeroSecondary {

        width: 100%;

        min-height: 52px;

    }

    .investmentCalcHeroDisclaimer {

        margin-top: 16px;

        font-size: 9px;

    }


    /* TOOL */

    .investmentCalcHeroToolInner {

        padding: 19px;

    }

    .investmentCalcHeroToolHeader h2 {

        font-size: 21px;

    }

    .investmentCalcHeroFields {

        gap: 20px;

    }

    .investmentCalcHeroResultValue {

        font-size: 31px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .investmentCalcHero {

        padding: 53px 0 48px;

    }

    .investmentCalcHeroContainer {

        width: calc(100% - 26px);

    }

    .investmentCalcHeroContent h1 {

        font-size: 33px;

        letter-spacing: -1px;

    }

    .investmentCalcHeroDescription {

        font-size: 9px;

        line-height: 1.78;

    }

    .investmentCalcHeroToolInner {

        padding: 17px;

    }

    .investmentCalcHeroToolHeader h2 {

        font-size: 19px;

    }

    .investmentCalcHeroResultValue {

        font-size: 28px;

    }

    .investmentCalcHeroResultMeta {

        gap: 12px;

    }

    .investmentCalcHeroResultMeta strong {

        font-size: 11px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .investmentCalcHeroContainer {

        width: calc(100% - 22px);

    }

    .investmentCalcHeroContent h1 {

        font-size: 30px;

    }

    .investmentCalcHeroToolInner {

        padding: 14px;

    }

    .investmentCalcHeroFieldTop {

        gap: 8px;

    }

    .investmentCalcHeroFieldTop span {

        font-size: 11px;

    }

    .investmentCalcHeroResultValue {

        font-size: 26px;

    }

}

/* Hero Section Ends Here */

/* Calc Section Starts Here */

/* =========================================================
   SIP & LUMPSUM CALCULATOR
========================================================= */

.sipCalculatorSection {

    width: 100%;

    padding: 110px 0 115px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.sipCalculatorContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   HEADING
========================================================= */

.sipCalculatorHeading {

    max-width: 720px;

    margin-bottom: 45px;

}


.sipCalculatorEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

}


.sipCalculatorEyebrow span {

    width: 32px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.sipCalculatorEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.sipCalculatorHeading h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(38px, 4.5vw, 56px);

    line-height: 1.06;

    letter-spacing: -2px;

    font-weight: 600;

}


.sipCalculatorHeading > p {

    max-width: 650px;

    margin: 22px 0 0;

    color: var(--text);

    opacity: .62;

    font-size: 11px;

    line-height: 1.85;

}


/* =========================================================
   MAIN CALCULATOR
========================================================= */

.sipCalculatorBox {

    width: 100%;

    background: var(--section);

    border: 1px solid rgba(197,154,50,.28);

    box-shadow:
        0 22px 65px rgba(0,0,0,.075);

    box-sizing: border-box;

}


/* =========================================================
   TOP BAR
========================================================= */

.sipCalculatorTop {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    padding: 22px 28px;

    border-bottom: 1px solid rgba(197,154,50,.22);

}


.sipCalculatorTopMeta {

    display: flex;

    align-items: center;

    gap: 12px;

}


.sipCalculatorTopMeta span {

    color: var(--primary);

    opacity: .58;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.15px;

}


.sipCalculatorTopMeta small {

    padding-left: 12px;

    border-left: 1px solid rgba(197,154,50,.35);

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1px;

}


/* =========================================================
   TOGGLE
========================================================= */

.sipCalculatorToggle {

    display: grid;

    grid-template-columns: 1fr 1fr;

    width: 230px;

    padding: 4px;

    background: rgba(197,154,50,.055);

    border: 1px solid rgba(197,154,50,.22);

}


.sipCalcMode {

    min-height: 40px;

    padding: 0 18px;

    border: 0;

    background: transparent;

    color: var(--text);

    opacity: .42;

    cursor: pointer;

    font-family: inherit;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.2px;

    transition:
        background .25s ease,
        color .25s ease,
        opacity .25s ease;

}


.sipCalcMode.active {

    color: #fff;

    opacity: 1;

    background: #c59a32;

}


/* =========================================================
   BODY
========================================================= */

.sipCalculatorBody {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

}


/* =========================================================
   INPUT SIDE
========================================================= */

.sipCalculatorInputs {

    padding: 35px 36px 38px;

    border-right: 1px solid rgba(197,154,50,.20);

}


.sipCalculatorInputsHeader {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding-bottom: 20px;

    border-bottom: 1px solid rgba(197,154,50,.18);

}


.sipCalculatorInputsHeader > span {

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.sipCalculatorReset {

    padding: 0;

    border: 0;

    background: transparent;

    color: var(--accent);

    opacity: .42;

    cursor: pointer;

    font-family: inherit;

    font-size: 16px;

    line-height: 1.4;

    font-weight: bolder;

    text-decoration: underline;

    text-underline-offset: 3px;

    transition:
        color .2s ease,
        opacity .2s ease;

}


.sipCalculatorReset:hover {

    color: #c59a32;

    opacity: 1;

}


/* =========================================================
   FIELD
========================================================= */

.sipCalculatorField {

    padding: 28px 0;

    border-bottom: 1px solid rgba(197,154,50,.15);

}


.sipCalculatorFieldHeader {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

}


.sipCalculatorFieldHeader label {

    color: var(--text);

    opacity: .62;

    font-size: 10px;

    line-height: 1.4;

    font-weight: 600;

}


.sipCalculatorNumber {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 4px;

    min-width: 130px;

    padding-bottom: 5px;

    border-bottom: 1px solid rgba(197,154,50,.45);

}


.sipCalculatorNumber span {

    color: #c59a32;

    font-size: 11px;

    line-height: 1.4;

    font-weight: 700;

}


.sipCalculatorNumber input {

    width: 105px;

    padding: 0;

    border: 0;

    outline: none;

    background: transparent;

    color: var(--primary);

    text-align: right;

    font-family: inherit;

    font-size: 16px;

    line-height: 1.4;

    font-weight: 700;

}


.sipCalculatorNumber input:focus {

    color: #c59a32;

}


/* =========================================================
   RANGE
========================================================= */

.sipCalculatorRangeWrap {

    position: relative;

    width: 100%;

    margin-top: 21px;

}


.sipCalculatorRange {

    width: 100%;

    height: 4px;

    margin: 0;

    padding: 0;

    appearance: none;

    -webkit-appearance: none;

    background: linear-gradient(
        to right,
        #c59a32 0%,
        #c59a32 25%,
        rgba(197,154,50,.14) 25%,
        rgba(197,154,50,.14) 100%
    );

    border-radius: 0;

    outline: none;

    cursor: pointer;

}


/* Chrome / Edge / Safari */

.sipCalculatorRange::-webkit-slider-thumb {

    width: 14px;

    height: 14px;

    appearance: none;

    -webkit-appearance: none;

    border: 2px solid #c59a32;

    border-radius: 50%;

    background: var(--section);

    box-shadow:
        0 0 0 4px rgba(197,154,50,.12);

    cursor: grab;

}


.sipCalculatorRange::-webkit-slider-thumb:active {

    cursor: grabbing;

}


/* Firefox */

.sipCalculatorRange::-moz-range-thumb {

    width: 12px;

    height: 12px;

    border: 2px solid #c59a32;

    border-radius: 50%;

    background: var(--section);

    box-shadow:
        0 0 0 4px rgba(197,154,50,.12);

    cursor: grab;

}


.sipCalculatorRange::-moz-range-progress {

    height: 4px;

    background: #c59a32;

}


/* =========================================================
   RANGE META
========================================================= */

.sipCalculatorRangeMeta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-top: 9px;

}


.sipCalculatorRangeMeta span {

    color: var(--text);

    opacity: .30;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 600;

}


.sipCalculatorRangeMeta span:last-child {

    color: #c59a32;

    opacity: .58;

}


/* =========================================================
   INPUT NOTE
========================================================= */

.sipCalculatorInputNote {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-top: 23px;

}


.sipCalculatorInputNote > span {

    width: 5px;

    height: 5px;

    margin-top: 5px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #c59a32;

}


.sipCalculatorInputNote p {

    margin: 0;

    color: var(--text);

    opacity: .37;

    font-size: 9px;

    line-height: 1.65;

}


/* =========================================================
   RESULTS SIDE
========================================================= */

.sipCalculatorResults {

    padding: 35px 36px 38px;

    min-width: 0;

}


/* =========================================================
   RESULTS HEADER
========================================================= */

.sipCalculatorResultsHeader {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding-bottom: 20px;

    border-bottom: 1px solid rgba(197,154,50,.18);

}


.sipCalculatorResultsHeader > span:first-child {

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.sipCalculatorLive {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    color: var(--text);

    opacity: .42;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: .9px;

}


.sipCalculatorLive::before {

    content: "";

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background: #c59a32;

}


/* =========================================================
   FUTURE VALUE
========================================================= */

.sipCalculatorFutureValue {

    padding: 32px 0 28px;

    border-bottom: 1px solid rgba(197,154,50,.18);

}


.sipCalculatorFutureValue > span {

    display: block;

    color: var(--text);

    opacity: .48;

    font-size: 10px;

    line-height: 1.4;

    font-weight: 600;

}


.sipCalculatorFutureValue strong {

    display: block;

    margin-top: 9px;

    color: var(--primary);

    font-size: clamp(35px, 4vw, 52px);

    line-height: 1.08;

    letter-spacing: -2px;

    font-weight: 700;

}


/* =========================================================
   RESULT STATS
========================================================= */

.sipCalculatorResultStats {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 24px;

    padding: 24px 0 30px;

    border-bottom: 1px solid rgba(197,154,50,.18);

}


.sipCalculatorStat {

    padding-left: 13px;

    border-left: 2px solid rgba(197,154,50,.55);

}


.sipCalculatorStat span {

    display: block;

    color: var(--text);

    opacity: .39;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: .85px;

    text-transform: uppercase;

}


.sipCalculatorStat strong {

    display: block;

    margin-top: 7px;

    color: var(--primary);

    font-size: 17px;

    line-height: 1.4;

    font-weight: 700;

}


/* =========================================================
   BREAKDOWN
========================================================= */

.sipCalculatorBreakdown {

    padding-top: 27px;

}


.sipCalculatorBreakdownHeading {

    margin-bottom: 20px;

}


.sipCalculatorBreakdownHeading span {

    color: var(--primary);

    opacity: .63;

    font-size: 10px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

}


.sipCalculatorBreakdownItem {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 14px 0;

    border-bottom: 1px solid rgba(197,154,50,.13);

}


.sipCalculatorBreakdownItem span {

    color: var(--text);

    opacity: .43;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 600;

    text-transform: uppercase;

}


.sipCalculatorBreakdownItem strong {

    color: var(--primary);

    font-size: 13px;

    line-height: 1.4;

    font-weight: 700;

}


.sipCalculatorOperator,
.sipCalculatorEquals {

    width: 100%;

    padding: 7px 0;

    color: #c59a32;

    text-align: center;

    font-size: 13px;

    line-height: 1.4;

    font-weight: 500;

}


.sipCalculatorBreakdownFinal {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: 4px;

    padding: 17px 0 0;

}


.sipCalculatorBreakdownFinal span {

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: .9px;

    text-transform: uppercase;

}


.sipCalculatorBreakdownFinal strong {

    color: #c59a32;

    font-size: 20px;

    line-height: 1.4;

    font-weight: 700;

}


/* =========================================================
   RESULT NOTE
========================================================= */

.sipCalculatorResultNote {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-top: 25px;

    padding-top: 18px;

    border-top: 1px solid rgba(197,154,50,.13);

}


.sipCalculatorResultNote > span {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 14px;

    height: 14px;

    flex-shrink: 0;

    border: 1px solid rgba(197,154,50,.45);

    border-radius: 50%;

    color: #c59a32;

    font-size: 9px;

    line-height: 1;

    font-weight: 700;

}


.sipCalculatorResultNote p {

    margin: 0;

    color: var(--text);

    opacity: .35;

    font-size: 9px;

    line-height: 1.65;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .sipCalculatorSection {

        padding: 90px 0;

    }

    .sipCalculatorBody {

        grid-template-columns: 1fr;

    }

    .sipCalculatorInputs {

        border-right: 0;

        border-bottom: 1px solid rgba(197,154,50,.20);

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .sipCalculatorSection {

        padding: 68px 0;

    }

    .sipCalculatorContainer {

        width: calc(100% - 30px);

    }


    /* HEADING */

    .sipCalculatorHeading {

        margin-bottom: 30px;

    }

    .sipCalculatorHeading h2 {

        font-size: clamp(34px, 10vw, 45px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }

    .sipCalculatorHeading > p {

        margin-top: 19px;

        font-size: 10px;

        line-height: 1.8;

    }


    /* TOP */

    .sipCalculatorTop {

        flex-direction: column;

        align-items: stretch;

        padding: 18px;

        gap: 17px;

    }

    .sipCalculatorToggle {

        width: 100%;

    }


    /* INPUTS */

    .sipCalculatorInputs,
    .sipCalculatorResults {

        padding: 25px 19px 28px;

    }

    .sipCalculatorField {

        padding: 24px 0;

    }

    .sipCalculatorFieldHeader {

        align-items: flex-start;

    }

    .sipCalculatorFieldHeader label {

        font-size: 9px;

        max-width: 45%;

    }

    .sipCalculatorNumber {

        min-width: 120px;

    }

    .sipCalculatorNumber input {

        font-size: 14px;

    }


    /* RESULTS */

    .sipCalculatorFutureValue {

        padding: 28px 0 24px;

    }

    .sipCalculatorFutureValue strong {

        font-size: 34px;

        letter-spacing: -1.2px;

    }

    .sipCalculatorResultStats {

        gap: 14px;

        padding: 21px 0 25px;

    }

    .sipCalculatorStat {

        padding-left: 10px;

    }

    .sipCalculatorStat strong {

        font-size: 14px;

    }

    .sipCalculatorBreakdown {

        padding-top: 24px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .sipCalculatorSection {

        padding: 57px 0;

    }

    .sipCalculatorContainer {

        width: calc(100% - 26px);

    }

    .sipCalculatorHeading h2 {

        font-size: 33px;

    }

    .sipCalculatorHeading > p {

        font-size: 9px;

    }

    .sipCalculatorInputs,
    .sipCalculatorResults {

        padding-left: 16px;

        padding-right: 16px;

    }

    .sipCalculatorTop {

        padding: 16px;

    }

    .sipCalculatorResultStats {

        grid-template-columns: 1fr;

        gap: 18px;

    }

    .sipCalculatorFutureValue strong {

        font-size: 29px;

    }

}


/* =========================================================
   VERY SMALL
========================================================= */

@media (max-width: 340px) {

    .sipCalculatorContainer {

        width: calc(100% - 22px);

    }

    .sipCalculatorHeading h2 {

        font-size: 30px;

    }

    .sipCalculatorNumber {

        min-width: 105px;

    }

    .sipCalculatorNumber input {

        width: 82px;

        font-size: 13px;

    }

    .sipCalculatorFutureValue strong {

        font-size: 27px;

    }

}

/* Calc Section Ends Here */

/* Charts Section Starts Here */

/* =========================================================
   5. INVESTMENT GROWTH CHART
========================================================= */

.investmentGrowthSection {

    width: 100%;

    padding: 105px 0 110px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.investmentGrowthContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   HEADER
========================================================= */

.investmentGrowthHeader {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 50px;

    margin-bottom: 42px;

}


.investmentGrowthHeaderContent {

    max-width: 720px;

}


.investmentGrowthEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

}


.investmentGrowthEyebrow span {

    width: 32px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.investmentGrowthEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.45px;

    text-transform: uppercase;

}


.investmentGrowthHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(38px, 4.5vw, 56px);

    line-height: 1.06;

    letter-spacing: -2px;

    font-weight: 600;

}


.investmentGrowthHeader h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


.investmentGrowthHeaderContent > p {

    max-width: 660px;

    margin: 21px 0 0;

    color: var(--text);

    opacity: .61;

    font-size: 11px;

    line-height: 1.85;

}


/* =========================================================
   MODE INDICATOR
========================================================= */

.investmentGrowthMode {

    min-width: 145px;

    padding: 15px 17px;

    border-left: 2px solid #c59a32;

    border-top: 1px solid rgba(197,154,50,.20);

    border-bottom: 1px solid rgba(197,154,50,.20);

}


.investmentGrowthMode span {

    display: block;

    color: var(--text);

    opacity: .34;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1px;

}


.investmentGrowthMode strong {

    display: block;

    margin-top: 5px;

    color: #c59a32;

    font-size: 15px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1px;

}


/* =========================================================
   CHART BOX
========================================================= */

.investmentGrowthBox {

    width: 100%;

    padding: 30px 31px 0;

    box-sizing: border-box;

    background: var(--section);

    border: 1px solid rgba(197,154,50,.27);

    box-shadow:
        0 20px 60px rgba(0,0,0,.065);

}


/* =========================================================
   CHART TOP
========================================================= */

.investmentGrowthTop {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    padding-bottom: 22px;

    border-bottom: 1px solid rgba(197,154,50,.18);

}


.investmentGrowthMeta {

    display: block;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.15px;

}


.investmentGrowthTop h3 {

    margin: 6px 0 0;

    color: var(--primary);

    font-size: 20px;

    line-height: 1.35;

    font-weight: 600;

}


/* =========================================================
   LEGEND
========================================================= */

.investmentGrowthLegend {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 18px;

}


.investmentGrowthLegendItem {

    display: flex;

    align-items: center;

    gap: 7px;

}


.investmentGrowthLegendItem > span:last-child {

    color: var(--text);

    opacity: .48;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 600;

}


.growthLegendDot {

    width: 7px;

    height: 7px;

    flex-shrink: 0;

    border-radius: 50%;

}


.growthLegendDot.invested {

    background: rgba(197,154,50,.45);

}


.growthLegendDot.future {

    background: #c59a32;

}


/* =========================================================
   CHART
========================================================= */

.investmentGrowthChartWrap {

    position: relative;

    width: 100%;

    height: 440px;

    padding: 28px 5px 12px;

    box-sizing: border-box;

}


#investmentGrowthChart {

    width: 100% !important;

    height: 100% !important;

}


/* =========================================================
   FOOTER STATS
========================================================= */

.investmentGrowthFooter {

    display: grid;

    grid-template-columns:
        1fr
        1fr
        1fr
        1.25fr;

    border-top: 1px solid rgba(197,154,50,.18);

}


.investmentGrowthFooter > div {

    min-width: 0;

    padding: 19px 17px;

    border-right: 1px solid rgba(197,154,50,.15);

}


.investmentGrowthFooter > div:first-child {

    padding-left: 0;

}


.investmentGrowthFooter > div:last-child {

    border-right: 0;

}


.investmentGrowthFooter span {

    display: block;

    color: var(--text);

    opacity: .32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: .85px;

}


.investmentGrowthFooter strong {

    display: block;

    margin-top: 6px;

    color: var(--primary);

    font-size: 13px;

    line-height: 1.4;

    font-weight: 700;

}


.investmentGrowthFooter > div:last-child strong {

    color: #c59a32;

}


/* =========================================================
   DISCLAIMER
========================================================= */

.investmentGrowthDisclaimer {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    max-width: 760px;

    margin-top: 19px;

}


.investmentGrowthDisclaimer > span {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 14px;

    height: 14px;

    flex-shrink: 0;

    border: 1px solid rgba(197,154,50,.45);

    border-radius: 50%;

    color: #c59a32;

    font-size: 9px;

    line-height: 1;

    font-weight: 700;

}


.investmentGrowthDisclaimer p {

    margin: 0;

    color: var(--text);

    opacity: .34;

    font-size: 9px;

    line-height: 1.65;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 850px) {

    .investmentGrowthSection {

        padding: 85px 0 90px;

    }

    .investmentGrowthHeader {

        align-items: flex-start;

        flex-direction: column;

        gap: 28px;

    }

    .investmentGrowthMode {

        min-width: 160px;

    }

    .investmentGrowthChartWrap {

        height: 390px;

    }

    .investmentGrowthFooter {

        grid-template-columns: 1fr 1fr;

    }

    .investmentGrowthFooter > div {

        border-bottom: 1px solid rgba(197,154,50,.15);

    }

    .investmentGrowthFooter > div:nth-child(2) {

        border-right: 0;

    }

    .investmentGrowthFooter > div:nth-child(3) {

        padding-left: 0;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .investmentGrowthSection {

        padding: 68px 0 70px;

    }

    .investmentGrowthContainer {

        width: calc(100% - 30px);

    }

    .investmentGrowthHeader {

        margin-bottom: 30px;

    }

    .investmentGrowthHeader h2 {

        font-size: clamp(34px, 10vw, 45px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }

    .investmentGrowthHeaderContent > p {

        margin-top: 18px;

        font-size: 10px;

        line-height: 1.8;

    }


    /* CHART BOX */

    .investmentGrowthBox {

        padding: 21px 17px 0;

    }

    .investmentGrowthTop {

        align-items: flex-start;

        flex-direction: column;

        gap: 17px;

    }

    .investmentGrowthLegend {

        justify-content: flex-start;

        gap: 12px;

    }

    .investmentGrowthChartWrap {

        height: 330px;

        padding: 20px 0 8px;

    }


    /* FOOTER */

    .investmentGrowthFooter {

        grid-template-columns: 1fr 1fr;

    }

    .investmentGrowthFooter > div {

        padding: 15px 9px;

    }

    .investmentGrowthFooter > div:first-child {

        padding-left: 0;

    }

    .investmentGrowthFooter strong {

        font-size: 11px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .investmentGrowthSection {

        padding: 57px 0 60px;

    }

    .investmentGrowthContainer {

        width: calc(100% - 26px);

    }

    .investmentGrowthHeader h2 {

        font-size: 33px;

    }

    .investmentGrowthHeaderContent > p {

        font-size: 9px;

    }

    .investmentGrowthBox {

        padding-left: 14px;

        padding-right: 14px;

    }

    .investmentGrowthChartWrap {

        height: 285px;

    }

    .investmentGrowthFooter {

        grid-template-columns: 1fr;

    }

    .investmentGrowthFooter > div {

        padding-left: 0;

        border-right: 0;

    }

}


/* =========================================================
   VERY SMALL
========================================================= */

@media (max-width: 340px) {

    .investmentGrowthContainer {

        width: calc(100% - 22px);

    }

    .investmentGrowthHeader h2 {

        font-size: 30px;

    }

    .investmentGrowthChartWrap {

        height: 260px;

    }

}

/* Charts Section Ends Here */

/* Important Section Starts Here */

/* =========================================================
   13. IMPORTANT THINGS TO REMEMBER
========================================================= */

.calculatorImportantSection {

    width: 100%;

    padding: 110px 0 115px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.calculatorImportantContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   HEADER
========================================================= */

.calculatorImportantHeader {

    max-width: 820px;

    margin-bottom: 65px;

}


.calculatorImportantEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

}


.calculatorImportantEyebrow span {

    width: 32px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.calculatorImportantEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.4px;

    text-transform: uppercase;

}


.calculatorImportantHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(38px, 4.5vw, 57px);

    line-height: 1.06;

    letter-spacing: -2px;

    font-weight: 600;

}


.calculatorImportantHeader h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   MAIN CONTENT
========================================================= */

.calculatorImportantContent {

    display: grid;

    grid-template-columns:
        minmax(280px, .72fr)
        minmax(0, 1.28fr);

    gap: 85px;

    align-items: start;

}


/* =========================================================
   LEFT INTRO
========================================================= */

.calculatorImportantIntro {

    position: relative;

    padding-top: 5px;

}


.calculatorImportantNumber {

    display: block;

    margin-bottom: 25px;

    color: #c59a32;

    font-size: 48px;

    line-height: 1;

    font-weight: 500;

    letter-spacing: -2px;

}


.calculatorImportantLead {

    max-width: 400px;

    margin: 0;

    color: var(--primary);

    font-size: 17px;

    line-height: 1.65;

    font-weight: 500;

}


.calculatorImportantRule {

    width: 48px;

    height: 1px;

    margin: 30px 0;

    background: #c59a32;

}


.calculatorImportantSmall {

    max-width: 385px;

    margin: 0;

    color: var(--text);

    opacity: .47;

    font-size: 10px;

    line-height: 1.8;

}


/* =========================================================
   RIGHT LIST
========================================================= */

.calculatorImportantList {

    width: 100%;

    border-top: 1px solid rgba(197,154,50,.24);

}


/* =========================================================
   ITEM
========================================================= */

.calculatorImportantItem {

    display: grid;

    grid-template-columns: 165px minmax(0, 1fr);

    gap: 30px;

    padding: 27px 0 29px;

    border-bottom: 1px solid rgba(197,154,50,.18);

}


.calculatorImportantItemTop {

    display: flex;

    flex-direction: column;

    gap: 11px;

}


.calculatorImportantItemNumber {

    color: #c59a32;

    font-size: 11px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: .8px;

}


.calculatorImportantCategory {

    max-width: 145px;

    color: var(--text);

    opacity: .32;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: .8px;

}


/* =========================================================
   ITEM CONTENT
========================================================= */

.calculatorImportantItemContent h3 {

    margin: 0;

    color: var(--primary);

    font-size: 21px;

    line-height: 1.35;

    font-weight: 600;

}


.calculatorImportantItemContent p {

    max-width: 570px;

    margin: 9px 0 0;

    color: var(--text);

    opacity: .53;

    font-size: 10px;

    line-height: 1.8;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .calculatorImportantSection {

        padding: 90px 0;

    }


    .calculatorImportantContent {

        grid-template-columns: 1fr;

        gap: 50px;

    }


    .calculatorImportantIntro {

        display: grid;

        grid-template-columns: auto minmax(0, 1fr);

        column-gap: 28px;

        align-items: start;

    }


    .calculatorImportantNumber {

        grid-row: span 2;

        margin: 0;

    }


    .calculatorImportantLead {

        max-width: 650px;

    }


    .calculatorImportantRule {

        margin: 22px 0;

    }


    .calculatorImportantSmall {

        max-width: 650px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .calculatorImportantSection {

        padding: 70px 0 75px;

    }


    .calculatorImportantContainer {

        width: calc(100% - 30px);

    }


    .calculatorImportantHeader {

        margin-bottom: 40px;

    }


    .calculatorImportantHeader h2 {

        font-size: clamp(34px, 10vw, 45px);

        line-height: 1.08;

        letter-spacing: -1.2px;

    }


    .calculatorImportantContent {

        gap: 38px;

    }


    .calculatorImportantIntro {

        display: block;

    }


    .calculatorImportantNumber {

        margin-bottom: 18px;

        font-size: 38px;

    }


    .calculatorImportantLead {

        max-width: 100%;

        font-size: 15px;

        line-height: 1.65;

    }


    .calculatorImportantRule {

        margin: 24px 0;

    }


    .calculatorImportantSmall {

        max-width: 100%;

        font-size: 9px;

        line-height: 1.75;

    }


    /* LIST */

    .calculatorImportantItem {

        display: block;

        padding: 24px 0 26px;

    }


    .calculatorImportantItemTop {

        display: flex;

        flex-direction: row;

        align-items: center;

        justify-content: space-between;

        gap: 15px;

        margin-bottom: 12px;

    }


    .calculatorImportantCategory {

        max-width: none;

        text-align: right;

    }


    .calculatorImportantItemContent h3 {

        font-size: 18px;

        line-height: 1.4;

    }


    .calculatorImportantItemContent p {

        font-size: 9px;

        line-height: 1.8;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .calculatorImportantSection {

        padding: 58px 0 62px;

    }


    .calculatorImportantContainer {

        width: calc(100% - 26px);

    }


    .calculatorImportantHeader h2 {

        font-size: 33px;

    }


    .calculatorImportantHeader {

        margin-bottom: 34px;

    }


    .calculatorImportantLead {

        font-size: 14px;

    }


    .calculatorImportantItemContent h3 {

        font-size: 17px;

    }

}


/* =========================================================
   VERY SMALL
========================================================= */

@media (max-width: 340px) {

    .calculatorImportantContainer {

        width: calc(100% - 22px);

    }


    .calculatorImportantHeader h2 {

        font-size: 30px;

    }


    .calculatorImportantItemTop {

        align-items: flex-start;

        flex-direction: column;

        gap: 5px;

    }


    .calculatorImportantCategory {

        text-align: left;

    }

}

/* Important Section Ends Here */

/* CTA Section Starts Here */

/* =========================================================
   15. FINAL CTA — INVESTMENT CALCULATOR
========================================================= */

.investmentCalculatorCta {

    position: relative;

    width: 100%;

    padding: 120px 0 55px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.investmentCalculatorCtaContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   MAIN GRID
========================================================= */

.investmentCalculatorCtaGrid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, .85fr);

    gap: 90px;

    align-items: center;

}


/* =========================================================
   LEFT CONTENT
========================================================= */

.investmentCalculatorCtaContent {

    min-width: 0;

}


.investmentCalculatorCtaEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 22px;

}


.investmentCalculatorCtaEyebrow span {

    width: 34px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.investmentCalculatorCtaEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


/* =========================================================
   HEADING
========================================================= */

.investmentCalculatorCtaContent h2 {

    max-width: 760px;

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 5vw, 64px);

    line-height: 1.04;

    letter-spacing: -2.4px;

    font-weight: 600;

}


.investmentCalculatorCtaContent h2 strong {

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.investmentCalculatorCtaDescription {

    max-width: 670px;

    margin: 25px 0 0;

    color: var(--text);

    opacity: .58;

    font-size: 11px;

    line-height: 1.9;

}


/* =========================================================
   BUTTONS
========================================================= */

.investmentCalculatorCtaButtons {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 35px;

}


.investmentCalculatorCtaPrimary,
.investmentCalculatorCtaSecondary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 48px;

    padding: 0 21px;

    box-sizing: border-box;

    font-family: inherit;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: .8px;

    text-decoration: none;

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease,
        border-color .25s ease;

}


.investmentCalculatorCtaPrimary {

    gap: 18px;

    color: #fff;

    background: #c59a32;

    border: 1px solid #c59a32;

}


.investmentCalculatorCtaPrimary span {

    font-size: 13px;

    line-height: 1;

}


.investmentCalculatorCtaSecondary {

    color: var(--primary);

    border: 1px solid rgba(197,154,50,.40);

    background: transparent;

}


.investmentCalculatorCtaPrimary:hover,
.investmentCalculatorCtaSecondary:hover {

    transform: translateY(-2px);

}


.investmentCalculatorCtaSecondary:hover {

    color: #c59a32;

    border-color: #c59a32;

}


/* =========================================================
   RIGHT TYPOGRAPHIC AREA
========================================================= */

.investmentCalculatorCtaVisual {

    position: relative;

    min-height: 440px;

    padding-left: 38px;

    border-left: 1px solid rgba(197,154,50,.35);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}


.investmentCalculatorCtaMeta {

    padding-bottom: 22px;

    border-bottom: 1px solid rgba(197,154,50,.18);

}


.investmentCalculatorCtaMeta span {

    color: var(--text);

    opacity: .38;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.1px;

}


/* =========================================================
   WORDS
========================================================= */

.investmentCalculatorCtaWords {

    display: flex;

    flex-direction: column;

    gap: 2px;

    padding: 32px 0;

}


.investmentCalculatorCtaWords span {

    display: block;

    color: var(--primary);

    opacity: .26;

    font-size: clamp(17px, 2vw, 24px);

    line-height: 1.45;

    font-weight: 600;

    letter-spacing: 1.7px;

}


.investmentCalculatorCtaWords .goldWord {

    color: #c59a32;

    opacity: 1;

}


/* =========================================================
   EDITORIAL STATEMENT
========================================================= */

.investmentCalculatorCtaStatement {

    padding-top: 27px;

    border-top: 1px solid rgba(197,154,50,.18);

}


.investmentCalculatorCtaStatement p {

    margin: 0 0 11px;

    color: var(--primary);

    font-size: 13px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1.5px;

}


.investmentCalculatorCtaStatement p:last-child {

    margin-bottom: 0;

    color: var(--text);

    opacity: .45;

}


/* =========================================================
   BOTTOM LINE
========================================================= */

.investmentCalculatorCtaBottom {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 95px;

    padding-top: 22px;

    border-top: 1px solid rgba(197,154,50,.18);

}


.investmentCalculatorCtaBottom span {

    color: var(--text);

    opacity: .38;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.25px;

}


.investmentCalculatorCtaBottom span:last-child {

    color: #c59a32;

    opacity: 1;

}


.investmentCalculatorCtaBottom i {

    color: #c59a32;

    opacity: .65;

    font-size: 11px;

    line-height: 1;

    font-style: normal;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .investmentCalculatorCta {

        padding: 90px 0 45px;

    }


    .investmentCalculatorCtaGrid {

        grid-template-columns: 1fr;

        gap: 60px;

    }


    .investmentCalculatorCtaVisual {

        min-height: auto;

        padding-left: 28px;

    }


    .investmentCalculatorCtaWords {

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 4px 25px;

    }


    .investmentCalculatorCtaStatement {

        padding-top: 23px;

    }


    .investmentCalculatorCtaBottom {

        margin-top: 65px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .investmentCalculatorCta {

        padding: 70px 0 35px;

    }


    .investmentCalculatorCtaContainer {

        width: calc(100% - 30px);

    }


    .investmentCalculatorCtaGrid {

        gap: 48px;

    }


    .investmentCalculatorCtaContent h2 {

        font-size: clamp(35px, 10vw, 46px);

        line-height: 1.07;

        letter-spacing: -1.3px;

    }


    .investmentCalculatorCtaDescription {

        margin-top: 20px;

        font-size: 10px;

        line-height: 1.8;

    }


    .investmentCalculatorCtaButtons {

        align-items: stretch;

        flex-direction: column;

        margin-top: 28px;

    }


    .investmentCalculatorCtaPrimary,
    .investmentCalculatorCtaSecondary {

        width: 100%;

        min-height: 50px;

    }


    .investmentCalculatorCtaVisual {

        min-height: auto;

        padding-left: 20px;

    }


    .investmentCalculatorCtaWords {

        grid-template-columns: 1fr;

        padding: 25px 0;

        gap: 1px;

    }


    .investmentCalculatorCtaWords span {

        font-size: 18px;

    }


    .investmentCalculatorCtaStatement p {

        font-size: 11px;

        line-height: 1.55;

    }


    .investmentCalculatorCtaBottom {

        justify-content: flex-start;

        gap: 9px;

        margin-top: 52px;

    }


    .investmentCalculatorCtaBottom span {

        font-size: 9px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .investmentCalculatorCta {

        padding: 58px 0 30px;

    }


    .investmentCalculatorCtaContainer {

        width: calc(100% - 26px);

    }


    .investmentCalculatorCtaContent h2 {

        font-size: 34px;

    }


    .investmentCalculatorCtaVisual {

        padding-left: 17px;

    }


    .investmentCalculatorCtaWords span {

        font-size: 17px;

    }


    .investmentCalculatorCtaBottom {

        gap: 7px;

    }

}


/* =========================================================
   VERY SMALL
========================================================= */

@media (max-width: 340px) {

    .investmentCalculatorCtaContainer {

        width: calc(100% - 22px);

    }


    .investmentCalculatorCtaContent h2 {

        font-size: 31px;

    }


    .investmentCalculatorCtaBottom {

        align-items: flex-start;

        flex-direction: column;

        gap: 7px;

    }


    .investmentCalculatorCtaBottom i {

        display: none;

    }

}

/* CTA Section Ends Here */

/* SIP Calculator Page Ends Here */


/* Products Page Starts Here */

/* Hero Section Starts Here */

/* =========================================================
   PRODUCTS HERO SECTION
========================================================= */

.productsHero {

    position: relative;

    width: 100%;

    min-height: 760px;

    padding: 120px 0 85px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.productsHeroContainer {

    width: min(1200px, calc(100% - 48px));

    margin: 0 auto;

}


.productsHeroGrid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(430px, .95fr);

    gap: 90px;

    align-items: center;

}


/* =========================================================
   LEFT CONTENT
========================================================= */

.productsHeroContent {

    min-width: 0;

}


/* =========================================================
   EYEBROW
========================================================= */

.productsHeroEyebrow {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 25px;

}


.productsHeroEyebrowLine {

    width: 35px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.productsHeroEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.6px;

    text-transform: uppercase;

}


/* =========================================================
   HEADING
========================================================= */

.productsHeroContent h1 {

    max-width: 720px;

    margin: 0;

    color: var(--primary);

    font-size: clamp(44px, 5vw, 68px);

    line-height: 1.02;

    letter-spacing: -2.7px;

    font-weight: 600;

}


.productsHeroContent h1 span {

    display: block;

    color: #c59a32;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.productsHeroDescription {

    max-width: 660px;

    margin-top: 28px;

}


.productsHeroDescription p {

    margin: 0 0 13px;

    color: var(--text);

    opacity: .58;

    font-size: 11px;

    line-height: 1.85;

}


.productsHeroDescription p:last-child {

    margin-bottom: 0;

}


/* =========================================================
   CATEGORIES
========================================================= */

.productsHeroCategories {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 27px;

}


.productsHeroCategories span {

    color: var(--text);

    opacity: .42;

    font-size: 8px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.productsHeroCategories i {

    width: 3px;

    height: 3px;

    border-radius: 50%;

    background: #c59a32;

    opacity: .75;

}


/* =========================================================
   BUTTONS
========================================================= */

.productsHeroButtons {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 35px;

}


.productsHeroPrimaryBtn,
.productsHeroSecondaryBtn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 49px;

    padding: 0 21px;

    box-sizing: border-box;

    font-family: inherit;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: .8px;

    text-decoration: none;

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease,
        border-color .25s ease;

}


.productsHeroPrimaryBtn {

    gap: 18px;

    color: #fff;

    background: #c59a32;

    border: 1px solid #c59a32;

}


.productsHeroPrimaryBtn span {

    font-size: 13px;

    line-height: 1;

}


.productsHeroSecondaryBtn {

    color: var(--primary);

    background: transparent;

    border: 1px solid rgba(197,154,50,.40);

}


.productsHeroPrimaryBtn:hover,
.productsHeroSecondaryBtn:hover {

    transform: translateY(-2px);

}


.productsHeroSecondaryBtn:hover {

    color: #c59a32;

    border-color: #c59a32;

}


/* =========================================================
   IDENTITY
========================================================= */

.productsHeroIdentity {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 55px;

    padding-top: 18px;

    border-top: 1px solid rgba(197,154,50,.16);

}


.productsHeroIdentity span {

    color: var(--text);

    opacity: .30;

    font-size: 8px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.productsHeroIdentity span:first-child {

    color: #c59a32;

    opacity: 1;

}


.productsHeroIdentity i {

    color: #c59a32;

    opacity: .55;

    font-size: 10px;

    line-height: 1;

    font-style: normal;

}


/* =========================================================
   RIGHT PRODUCT INDEX
========================================================= */

.productsHeroIndex {

    position: relative;

    min-width: 0;

    display: grid;

    grid-template-columns: 1px minmax(0, 1fr);

    gap: 31px;

}


.productsHeroIndexRule {

    width: 1px;

    min-height: 545px;

    background:
        linear-gradient(
            to bottom,
            rgba(197,154,50,.60),
            rgba(197,154,50,.10)
        );

}


.productsHeroIndexContent {

    min-width: 0;

}


/* =========================================================
   INDEX HEADER
========================================================= */

.productsHeroIndexHeader {

    display: flex;

    align-items: baseline;

    justify-content: space-between;

    gap: 20px;

    padding-bottom: 19px;

    border-bottom: 1px solid rgba(197,154,50,.22);

}


.productsHeroIndexMeta {

    color: var(--text);

    opacity: .35;

    font-size: 8px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.productsHeroIndexTitle {

    color: #c59a32;

    font-size: 10px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.7px;

}


/* =========================================================
   PRODUCT LIST
========================================================= */

.productsHeroList {

    width: 100%;

}


.productsHeroProduct {

    position: relative;

    display: grid;

    grid-template-columns: 40px minmax(0, 1fr) auto;

    align-items: center;

    gap: 20px;

    min-height: 62px;

    padding: 5px 0;

    color: inherit;

    text-decoration: none;

    border-bottom: 1px solid rgba(197,154,50,.14);

    transition:
        padding .25s ease,
        background .25s ease;

}


.productsHeroProductNumber {

    color: #c59a32;

    opacity: .75;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: .8px;

}


.productsHeroProductName {

    color: var(--primary);

    font-size: 14px;

    line-height: 1.4;

    font-weight: 600;

    letter-spacing: .6px;

    transition:
        color .25s ease,
        letter-spacing .25s ease;

}


.productsHeroProductCategory {

    color: var(--text);

    opacity: .28;

    font-size: 7px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: .9px;

    text-align: right;

    white-space: nowrap;

}


.productsHeroProduct:hover {

    padding-left: 8px;

}


.productsHeroProduct:hover .productsHeroProductName {

    color: #c59a32;

    letter-spacing: 1px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .productsHero {

        padding: 95px 0 75px;

    }


    .productsHeroGrid {

        grid-template-columns: 1fr;

        gap: 70px;

    }


    .productsHeroContent h1 {

        max-width: 800px;

    }


    .productsHeroIndex {

        max-width: 720px;

    }


    .productsHeroIndexRule {

        min-height: 500px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .productsHero {

        min-height: auto;

        padding: 70px 0 55px;

    }


    .productsHeroContainer {

        width: calc(100% - 30px);

    }


    .productsHeroGrid {

        gap: 52px;

    }


    .productsHeroEyebrow {

        margin-bottom: 19px;

    }


    .productsHeroContent h1 {

        font-size: clamp(36px, 10.5vw, 48px);

        line-height: 1.06;

        letter-spacing: -1.4px;

    }


    .productsHeroDescription {

        margin-top: 20px;

    }


    .productsHeroDescription p {

        font-size: 10px;

        line-height: 1.8;

    }


    .productsHeroCategories {

        margin-top: 22px;

        gap: 8px;

    }


    .productsHeroCategories span {

        font-size: 7px;

    }


    .productsHeroButtons {

        align-items: stretch;

        flex-direction: column;

        margin-top: 28px;

    }


    .productsHeroPrimaryBtn,
    .productsHeroSecondaryBtn {

        width: 100%;

        min-height: 51px;

    }


    .productsHeroIdentity {

        gap: 7px;

        margin-top: 39px;

    }


    .productsHeroIdentity span {

        font-size: 7px;

    }


    /* PRODUCT INDEX */

    .productsHeroIndex {

        grid-template-columns: 1px minmax(0, 1fr);

        gap: 17px;

    }


    .productsHeroIndexRule {

        min-height: 100%;

    }


    .productsHeroIndexHeader {

        align-items: flex-start;

        flex-direction: column;

        gap: 6px;

        padding-bottom: 15px;

    }


    .productsHeroIndexTitle {

        font-size: 9px;

    }


    .productsHeroProduct {

        grid-template-columns: 29px minmax(0, 1fr);

        gap: 12px;

        min-height: 58px;

    }


    .productsHeroProductNumber {

        font-size: 8px;

    }


    .productsHeroProductName {

        font-size: 12px;

    }


    .productsHeroProductCategory {

        display: none;

    }


    .productsHeroProduct:hover {

        padding-left: 4px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .productsHero {

        padding: 58px 0 48px;

    }


    .productsHeroContainer {

        width: calc(100% - 26px);

    }


    .productsHeroContent h1 {

        font-size: 34px;

    }


    .productsHeroDescription p {

        font-size: 9px;

    }


    .productsHeroProductName {

        font-size: 11px;

    }


    .productsHeroIndex {

        gap: 14px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .productsHeroContainer {

        width: calc(100% - 22px);

    }


    .productsHeroContent h1 {

        font-size: 31px;

    }


    .productsHeroIdentity {

        align-items: flex-start;

        flex-direction: column;

        gap: 5px;

    }


    .productsHeroIdentity i {

        display: none;

    }

}

/* Hero Section Ends Here */

/* Intro Section Starts Here */

/* =========================================================
   2. PRODUCTS INTRODUCTION
========================================================= */

.productsIntro {

    width: 100%;

    padding: 115px 0 120px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.productsIntroContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


.productsIntroGrid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(390px, .92fr);

    gap: 105px;

    align-items: start;

}


/* =========================================================
   LEFT EDITORIAL CONTENT
========================================================= */

.productsIntroContent {

    min-width: 0;

    padding-right: 10px;

}


/* =========================================================
   EYEBROW
========================================================= */

.productsIntroEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 23px;

}


.productsIntroEyebrow span {

    width: 34px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.productsIntroEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.45px;

    text-transform: uppercase;

}


/* =========================================================
   HEADING
========================================================= */

.productsIntroContent h2 {

    max-width: 700px;

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.6vw, 58px);

    line-height: 1.05;

    letter-spacing: -2px;

    font-weight: 600;

}


.productsIntroContent h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   BODY TEXT
========================================================= */

.productsIntroText {

    max-width: 650px;

    margin-top: 30px;

}


.productsIntroText p {

    margin: 0 0 17px;

    color: var(--text);

    opacity: .58;

    font-size: 11px;

    line-height: 1.9;

}


.productsIntroText p:last-child {

    margin-bottom: 0;

}


/* =========================================================
   BOTTOM META
========================================================= */

.productsIntroBottomMeta {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 38px;

    padding-top: 18px;

    border-top: 1px solid rgba(197,154,50,.17);

}


.productsIntroBottomMeta span {

    color: var(--text);

    opacity: .31;

    font-size: 8px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.productsIntroBottomMeta span:first-child {

    color: #c59a32;

    opacity: 1;

}


.productsIntroBottomMeta i {

    color: #c59a32;

    opacity: .45;

    font-size: 9px;

    line-height: 1;

    font-style: normal;

}


/* =========================================================
   RIGHT HIGHLIGHTS
========================================================= */

.productsIntroHighlights {

    width: 100%;

    border-top: 1px solid rgba(197,154,50,.25);

}


/* =========================================================
   HIGHLIGHT
========================================================= */

.productsIntroHighlight {

    display: grid;

    grid-template-columns: 105px minmax(0, 1fr);

    gap: 27px;

    padding: 27px 0 29px;

    border-bottom: 1px solid rgba(197,154,50,.18);

}


/* =========================================================
   NUMBER + CATEGORY
========================================================= */

.productsIntroHighlightTop {

    display: flex;

    flex-direction: column;

    gap: 9px;

}


.productsIntroNumber {

    color: #c59a32;

    font-size: 11px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: .8px;

}


.productsIntroCategory {

    color: var(--text);

    opacity: .30;

    font-size: 8px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1px;

}


/* =========================================================
   HIGHLIGHT BODY
========================================================= */

.productsIntroHighlightBody h3 {

    margin: 0;

    color: var(--primary);

    font-size: 21px;

    line-height: 1.35;

    font-weight: 600;

}


.productsIntroHighlightBody p {

    max-width: 480px;

    margin: 9px 0 0;

    color: var(--text);

    opacity: .52;

    font-size: 10px;

    line-height: 1.8;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .productsIntro {

        padding: 90px 0 95px;

    }


    .productsIntroGrid {

        grid-template-columns: 1fr;

        gap: 65px;

    }


    .productsIntroContent {

        padding-right: 0;

    }


    .productsIntroContent h2 {

        max-width: 800px;

    }


    .productsIntroText {

        max-width: 750px;

    }


    .productsIntroHighlights {

        max-width: 800px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .productsIntro {

        padding: 70px 0 75px;

    }


    .productsIntroContainer {

        width: calc(100% - 30px);

    }


    .productsIntroGrid {

        gap: 45px;

    }


    .productsIntroEyebrow {

        margin-bottom: 19px;

    }


    .productsIntroContent h2 {

        font-size: clamp(34px, 10vw, 45px);

        line-height: 1.08;

        letter-spacing: -1.3px;

    }


    .productsIntroText {

        margin-top: 21px;

    }


    .productsIntroText p {

        font-size: 10px;

        line-height: 1.8;

        margin-bottom: 14px;

    }


    .productsIntroBottomMeta {

        margin-top: 28px;

        gap: 8px;

    }


    .productsIntroBottomMeta span {

        font-size: 7px;

    }


    /* HIGHLIGHTS */

    .productsIntroHighlight {

        grid-template-columns: 52px minmax(0, 1fr);

        gap: 17px;

        padding: 22px 0 24px;

    }


    .productsIntroHighlightTop {

        gap: 6px;

    }


    .productsIntroNumber {

        font-size: 9px;

    }


    .productsIntroCategory {

        font-size: 7px;

        letter-spacing: .7px;

    }


    .productsIntroHighlightBody h3 {

        font-size: 18px;

    }


    .productsIntroHighlightBody p {

        font-size: 9px;

        line-height: 1.8;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .productsIntro {

        padding: 58px 0 62px;

    }


    .productsIntroContainer {

        width: calc(100% - 26px);

    }


    .productsIntroContent h2 {

        font-size: 33px;

    }


    .productsIntroText p {

        font-size: 9px;

    }


    .productsIntroHighlight {

        grid-template-columns: 1fr;

        gap: 11px;

    }


    .productsIntroHighlightTop {

        flex-direction: row;

        align-items: center;

        justify-content: space-between;

    }


    .productsIntroCategory {

        text-align: right;

    }


    .productsIntroHighlightBody h3 {

        font-size: 17px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .productsIntroContainer {

        width: calc(100% - 22px);

    }


    .productsIntroContent h2 {

        font-size: 30px;

    }


    .productsIntroBottomMeta {

        align-items: flex-start;

        flex-direction: column;

        gap: 5px;

    }


    .productsIntroBottomMeta i {

        display: none;

    }

}

/* Intro Section Ends Here */

/* Products Section Starts Here */

/* =========================================================
   3. EXPLORE OUR PRODUCT RANGE
========================================================= */

.productRange {

    width: 100%;

    padding: 125px 0 130px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.productRangeContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   SECTION HEADER
========================================================= */

.productRangeHeader {

    max-width: 820px;

    margin-bottom: 75px;

}


.productRangeEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 22px;

}


.productRangeEyebrow span {

    width: 35px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.productRangeEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.productRangeHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(42px, 5vw, 62px);

    line-height: 1.04;

    letter-spacing: -2.3px;

    font-weight: 600;

}


.productRangeHeader h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


.productRangeIntro {

    max-width: 680px;

    margin: 25px 0 0;

    color: var(--text);

    opacity: .55;

    font-size: 11px;

    line-height: 1.85;

}


/* =========================================================
   PRODUCT ITEM
========================================================= */

.productRangeItem {

    position: relative;

    padding: 58px 0 62px;

    border-top: 1px solid rgba(197,154,50,.25);

}


.productRangeItem:last-child {

    border-bottom: 1px solid rgba(197,154,50,.25);

}


/* =========================================================
   PRODUCT HEADER
========================================================= */

.productRangeItemHeader {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    margin-bottom: 39px;

}


.productRangeNumber {

    color: #c59a32;

    font-size: 14px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1px;

}


.productRangeCategory {

    color: var(--text);

    opacity: .35;

    font-size: 8px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.2px;

    text-align: right;

}


/* =========================================================
   MAIN PRODUCT AREA
========================================================= */

.productRangeMain {

    display: grid;

    grid-template-columns:
        minmax(0, .95fr)
        minmax(0, 1.05fr);

    gap: 75px;

    align-items: start;

}


.productRangeTitle {

    min-width: 0;

}


.productRangeKicker {

    margin: 0 0 11px;

    color: #c59a32;

    font-size: 8px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.25px;

}


.productRangeTitle h3 {

    max-width: 620px;

    margin: 0;

    color: var(--primary);

    font-size: clamp(30px, 3.2vw, 43px);

    line-height: 1.08;

    letter-spacing: -1.4px;

    font-weight: 600;

}


.productRangeLead {

    max-width: 570px;

    margin: 19px 0 0;

    color: var(--text);

    opacity: .68;

    font-size: 13px;

    line-height: 1.75;

}


.productRangeDetails {

    padding-top: 4px;

}


.productRangeDetails > p {

    max-width: 570px;

    margin: 0 0 17px;

    color: var(--text);

    opacity: .53;

    font-size: 12px;

    line-height: 1.85;

}


/* =========================================================
   LABEL
========================================================= */

.productRangeLabel {

    display: block;

    margin-bottom: 14px;

    color: var(--text);

    opacity: .32;

    font-size: 13px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.1px;

}


/* =========================================================
   TWO COLUMN CONTENT
========================================================= */

.productRangeColumns {

    display: grid;

    grid-template-columns:
        minmax(220px, .75fr)
        minmax(0, 1.25fr);

    gap: 70px;

    margin-top: 58px;

    padding-top: 32px;

    border-top: 1px solid rgba(197,154,50,.13);

}


.productRangeList {

    margin: 0;

    padding: 0;

    list-style: none;

}


.productRangeList li {

    position: relative;

    padding: 7px 0 7px 15px;

    color: var(--text);

    opacity: .58;

    font-size: 11px;

    line-height: 1.55;

}


.productRangeList li::before {

    content: "";

    position: absolute;

    left: 0;

    top: 14px;

    width: 4px;

    height: 1px;

    background: #c59a32;

}


/* =========================================================
   MINI LIST
========================================================= */

.productRangeMiniList {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 25px 35px;

}


.productRangeMiniList > div {

    padding-top: 3px;

}


.productRangeMiniList strong,
.productRangeNcdGrid strong,
.productRangeInsuranceGrid strong,
.productRangeAif strong {

    display: block;

    margin-bottom: 7px;

    color: var(--primary);

    font-size: 14px;

    line-height: 1.4;

    font-weight: 600;

}


.productRangeMiniList p,
.productRangeNcdGrid p,
.productRangeInsuranceGrid p,
.productRangeAif p {

    margin: 0;

    color: var(--text);

    opacity: .48;

    font-size: 11px;

    line-height: 1.75;

}


/* =========================================================
   FOOTER
========================================================= */

.productRangeFooter {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;

    margin-top: 48px;

    padding-top: 22px;

    border-top: 1px solid rgba(197,154,50,.15);

}


.productRangeFooter > p {

    max-width: 670px;

    margin: 0;

    color: var(--text);

    opacity: .36;

    font-size: 11px;

    line-height: 1.75;

}


.productRangeLink {

    display: inline-flex;

    align-items: center;

    gap: 17px;

    flex-shrink: 0;

    color: var(--primary);

    font-size: 14px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: .8px;

    text-decoration: none;

    transition:
        color .25s ease,
        transform .25s ease;

}


.productRangeLink span {

    color: #c59a32;

    font-size: 13px;

}


.productRangeLink:hover {

    color: #c59a32;

    transform: translateX(3px);

}


/* =========================================================
   INSURANCE
========================================================= */

.productRangeSubcategories {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

}


.productRangeSubcategories span {

    padding: 8px 10px;

    color: var(--text);

    opacity: .55;

    border: 1px solid rgba(197,154,50,.15);

    font-size: 8px;

    line-height: 1.3;

}


.productRangeInsuranceGrid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 0;

    margin-top: 58px;

    border-top: 1px solid rgba(197,154,50,.13);

    border-left: 1px solid rgba(197,154,50,.13);

}


.productRangeInsuranceGrid > div {

    padding: 27px 25px;

    border-right: 1px solid rgba(197,154,50,.13);

    border-bottom: 1px solid rgba(197,154,50,.13);

}


.productRangeConsiderations {

    margin-top: 40px;

    padding-top: 24px;

    border-top: 1px solid rgba(197,154,50,.13);

}


.productRangeConsiderations > div {

    display: flex;

    flex-wrap: wrap;

    gap: 9px;

}


.productRangeConsiderations > div span {

    color: var(--text);

    opacity: .45;

    font-size: 8px;

    line-height: 1.4;

}


/* =========================================================
   PMS / AIF
========================================================= */

.productRangeFeature {

    padding: 0 0 21px;

    margin-bottom: 21px;

    border-bottom: 1px solid rgba(197,154,50,.13);

}


.productRangeFeature:last-child {

    margin-bottom: 0;

}


.productRangePmsGrid {

    display: grid;

    grid-template-columns: .8fr 1.2fr;

    gap: 75px;

    margin-top: 58px;

    padding-top: 32px;

    border-top: 1px solid rgba(197,154,50,.13);

}


.productRangeAif {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 22px;

}


/* =========================================================
   NCD
========================================================= */

.productRangeNcdGrid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 0;

    margin-top: 58px;

    border-top: 1px solid rgba(197,154,50,.13);

    border-left: 1px solid rgba(197,154,50,.13);

}


.productRangeNcdGrid > div {

    min-height: 150px;

    padding: 26px 23px;

    border-right: 1px solid rgba(197,154,50,.13);

    border-bottom: 1px solid rgba(197,154,50,.13);

}


.productRangeNotice {

    display: grid;

    grid-template-columns: 170px minmax(0, 1fr);

    gap: 25px;

    margin-top: 32px;

    padding: 21px 0;

    border-top: 1px solid rgba(197,154,50,.15);

    border-bottom: 1px solid rgba(197,154,50,.15);

}


.productRangeNotice > span {

    color: #c59a32;

    font-size: 8px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1px;

}


.productRangeNotice p {

    max-width: 650px;

    margin: 0;

    color: var(--text);

    opacity: .48;

    font-size: 9px;

    line-height: 1.8;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .productRange {

        padding: 95px 0 100px;

    }


    .productRangeMain {

        grid-template-columns: 1fr;

        gap: 35px;

    }


    .productRangeColumns {

        grid-template-columns: 1fr;

        gap: 45px;

    }


    .productRangePmsGrid {

        grid-template-columns: 1fr;

        gap: 45px;

    }


    .productRangeInsuranceGrid {

        grid-template-columns: 1fr 1fr;

    }


    .productRangeAif {

        grid-template-columns: 1fr;

    }


    .productRangeNcdGrid {

        grid-template-columns: 1fr 1fr;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .productRange {

        padding: 70px 0 75px;

    }


    .productRangeContainer {

        width: calc(100% - 30px);

    }


    .productRangeHeader {

        margin-bottom: 50px;

    }


    .productRangeHeader h2 {

        font-size: clamp(34px, 10vw, 45px);

        line-height: 1.07;

        letter-spacing: -1.3px;

    }


    .productRangeIntro {

        margin-top: 19px;

        font-size: 10px;

        line-height: 1.8;

    }


    /* PRODUCT */

    .productRangeItem {

        padding: 42px 0 45px;

    }


    .productRangeItemHeader {

        align-items: flex-start;

        margin-bottom: 30px;

    }


    .productRangeNumber {

        font-size: 11px;

    }


    .productRangeCategory {

        max-width: 170px;

        font-size: 7px;

        line-height: 1.5;

    }


    .productRangeMain {

        gap: 27px;

    }


    .productRangeKicker {

        font-size: 7px;

    }


    .productRangeTitle h3 {

        font-size: clamp(28px, 8vw, 37px);

        line-height: 1.08;

        letter-spacing: -1px;

    }


    .productRangeLead {

        margin-top: 16px;

        font-size: 11px;

        line-height: 1.75;

    }


    .productRangeDetails > p {

        font-size: 11px;

        line-height: 1.8;

    }


    /* COLUMNS */

    .productRangeColumns {

        margin-top: 38px;

        padding-top: 25px;

        gap: 35px;

    }


    .productRangeLabel {

        margin-bottom: 11px;

        font-size: 7px;

    }


    .productRangeList li {

        font-size: 11px;

        padding-top: 6px;

        padding-bottom: 6px;

    }


    .productRangeList li::before {

        top: 13px;

    }


    .productRangeMiniList {

        grid-template-columns: 1fr;

        gap: 21px;

    }


    .productRangeMiniList strong,
    .productRangeNcdGrid strong,
    .productRangeInsuranceGrid strong,
    .productRangeAif strong {

        font-size: 14px;

    }


    .productRangeMiniList p,
    .productRangeNcdGrid p,
    .productRangeInsuranceGrid p,
    .productRangeAif p {

        font-size: 11px;

        line-height: 1.75;

    }


    /* INSURANCE */

    .productRangeInsuranceGrid {

        grid-template-columns: 1fr;

        margin-top: 38px;

    }


    .productRangeInsuranceGrid > div {

        padding: 23px 19px;

    }


    .productRangeSubcategories {

        gap: 6px;

    }


    .productRangeSubcategories span {

        font-size: 7px;

        padding: 7px 8px;

    }


    .productRangeConsiderations {

        margin-top: 30px;

    }


    /* PMS */

    .productRangePmsGrid {

        margin-top: 38px;

        padding-top: 25px;

    }


    /* NCD */

    .productRangeNcdGrid {

        grid-template-columns: 1fr;

        margin-top: 38px;

    }


    .productRangeNcdGrid > div {

        min-height: auto;

        padding: 23px 19px;

    }


    /* NOTICE */

    .productRangeNotice {

        grid-template-columns: 1fr;

        gap: 10px;

        margin-top: 25px;

        padding: 19px 0;

    }


    .productRangeNotice p {

        font-size: 8px;

        line-height: 1.8;

    }


    /* FOOTER */

    .productRangeFooter {

        align-items: flex-start;

        flex-direction: column;

        gap: 22px;

        margin-top: 32px;

    }


    .productRangeFooter > p {

        font-size: 10px;

    }


    .productRangeLink {

        font-size: 8px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .productRange {

        padding: 58px 0 62px;

    }


    .productRangeContainer {

        width: calc(100% - 26px);

    }


    .productRangeHeader h2 {

        font-size: 33px;

    }


    .productRangeItem {

        padding: 38px 0 40px;

    }


    .productRangeCategory {

        max-width: 145px;

        font-size: 6.5px;

    }


    .productRangeTitle h3 {

        font-size: 27px;

    }


    .productRangeLead {

        font-size: 10px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .productRangeContainer {

        width: calc(100% - 22px);

    }


    .productRangeHeader h2 {

        font-size: 30px;

    }


    .productRangeItemHeader {

        flex-direction: column;

        gap: 8px;

    }


    .productRangeCategory {

        text-align: left;

    }


    .productRangeTitle h3 {

        font-size: 25px;

    }

}

/* Products Section Ends Here */

/* Category Section Starts Here */

/* =========================================================
   4. PRODUCT CATEGORIES
========================================================= */

.productCategories {

    width: 100%;

    padding: 120px 0 125px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.productCategoriesContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   SECTION HEADER
========================================================= */

.productCategoriesHeader {

    max-width: 760px;

    margin-bottom: 70px;

}


.productCategoriesEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 22px;

}


.productCategoriesEyebrow span {

    width: 35px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.productCategoriesEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.productCategoriesHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(42px, 5vw, 62px);

    line-height: 1.04;

    letter-spacing: -2.3px;

    font-weight: 600;

}


.productCategoriesHeader h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   CATEGORY ROW
========================================================= */

.productCategoryRow {

    display: grid;

    grid-template-columns: 90px minmax(0, 1fr);

    gap: 42px;

    padding: 37px 0 40px;

    border-top: 1px solid rgba(197,154,50,.19);

    transition:
        padding-left .3s ease,
        background .3s ease;

}


.productCategoryRow:last-child {

    border-bottom: 1px solid rgba(197,154,50,.19);

}


/* =========================================================
   NUMBER
========================================================= */

.productCategoryNumber {

    padding-top: 5px;

    color: #c59a32;

    font-size: 12px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1px;

}


/* =========================================================
   MAIN CONTENT
========================================================= */

.productCategoryContent {

    display: grid;

    grid-template-columns: minmax(260px, .75fr) minmax(0, 1.25fr);

    gap: 65px;

    align-items: start;

}


/* =========================================================
   TITLE
========================================================= */

.productCategoryTitle {

    position: relative;

}


.productCategoryLabel {

    display: block;

    margin-bottom: 9px;

    color: #c59a32;

    font-size: 8px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.25px;

}


.productCategoryTitle h3 {

    margin: 0;

    color: var(--primary);

    font-size: 27px;

    line-height: 1.2;

    letter-spacing: -.7px;

    font-weight: 600;

}


/* =========================================================
   DETAILS
========================================================= */

.productCategoryDetails {

    padding-top: 4px;

}


.productCategoryProducts {

    margin: 0 0 11px;

    color: var(--primary);

    opacity: .72;

    font-size: 11px;

    line-height: 1.6;

    font-weight: 600;

}


.productCategoryDescription {

    max-width: 610px;

    margin: 0;

    color: var(--text);

    opacity: .5;

    font-size: 10px;

    line-height: 1.85;

}


/* =========================================================
   SUBTLE HOVER
========================================================= */

.productCategoryRow:hover {

    padding-left: 8px;

}


.productCategoryRow:hover .productCategoryTitle h3 {

    color: #c59a32;

    transition: color .25s ease;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .productCategories {

        padding: 95px 0 100px;

    }


    .productCategoryContent {

        grid-template-columns: 1fr;

        gap: 17px;

    }


    .productCategoryTitle h3 {

        font-size: 25px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .productCategories {

        padding: 70px 0 75px;

    }


    .productCategoriesContainer {

        width: calc(100% - 30px);

    }


    .productCategoriesHeader {

        margin-bottom: 48px;

    }


    .productCategoriesHeader h2 {

        font-size: clamp(34px, 10vw, 45px);

        line-height: 1.07;

        letter-spacing: -1.3px;

    }


    /* ---------------------------------------------
       SINGLE COLUMN EDITORIAL ROW
    ---------------------------------------------- */

    .productCategoryRow {

        grid-template-columns: 42px minmax(0, 1fr);

        gap: 17px;

        padding: 28px 0 30px;

    }


    .productCategoryNumber {

        padding-top: 2px;

        font-size: 9px;

    }


    .productCategoryContent {

        display: block;

    }


    .productCategoryTitle {

        margin-bottom: 17px;

    }


    .productCategoryLabel {

        margin-bottom: 7px;

        font-size: 7px;

    }


    .productCategoryTitle h3 {

        font-size: 22px;

        letter-spacing: -.4px;

    }


    .productCategoryProducts {

        margin-bottom: 9px;

        font-size: 9px;

        line-height: 1.7;

    }


    .productCategoryDescription {

        font-size: 9px;

        line-height: 1.8;

    }


    .productCategoryRow:hover {

        padding-left: 0;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .productCategories {

        padding: 58px 0 62px;

    }


    .productCategoriesContainer {

        width: calc(100% - 26px);

    }


    .productCategoriesHeader h2 {

        font-size: 33px;

    }


    .productCategoryRow {

        grid-template-columns: 35px minmax(0, 1fr);

        gap: 13px;

        padding: 25px 0 27px;

    }


    .productCategoryTitle h3 {

        font-size: 20px;

    }


    .productCategoryProducts {

        font-size: 8px;

    }


    .productCategoryDescription {

        font-size: 8px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .productCategoriesContainer {

        width: calc(100% - 22px);

    }


    .productCategoriesHeader h2 {

        font-size: 30px;

    }


    .productCategoryRow {

        grid-template-columns: 1fr;

        gap: 9px;

    }


    .productCategoryNumber {

        padding: 0;

    }

}

/* Category Section Ends Here */

/* Choose Section Starts Here */

/* =========================================================
   5. CHOOSING THE RIGHT PRODUCT
========================================================= */

.choosingProduct {

    width: 100%;

    padding: 120px 0 125px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.choosingProductContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


.choosingProductGrid {

    display: grid;

    grid-template-columns:
        minmax(0, .95fr)
        minmax(430px, 1.05fr);

    gap: 105px;

    align-items: start;

}


/* =========================================================
   LEFT EDITORIAL AREA
========================================================= */

.choosingProductIntro {

    position: sticky;

    top: 100px;

    min-width: 0;

}


.choosingProductEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 23px;

}


.choosingProductEyebrow span {

    width: 35px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.choosingProductEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.45px;

    text-transform: uppercase;

}


.choosingProductIntro h2 {

    max-width: 650px;

    margin: 0;

    color: var(--primary);

    font-size: clamp(40px, 4.5vw, 57px);

    line-height: 1.06;

    letter-spacing: -2px;

    font-weight: 600;

}


.choosingProductIntro h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


.choosingProductDescription {

    max-width: 590px;

    margin: 30px 0 0;

    color: var(--text);

    opacity: .53;

    font-size: 11px;

    line-height: 1.9;

}


/* =========================================================
   BOTTOM EDITORIAL STATEMENT
========================================================= */

.choosingProductStatement {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 43px;

    padding-top: 20px;

    border-top: 1px solid rgba(197,154,50,.18);

}


.choosingProductStatement span,
.choosingProductStatement strong {

    font-size: 8px;

    line-height: 1.4;

    letter-spacing: 1.1px;

    font-weight: 700;

}


.choosingProductStatement span {

    color: var(--text);

    opacity: .35;

}


.choosingProductStatement i {

    color: #c59a32;

    opacity: .7;

    font-size: 12px;

    font-style: normal;

}


.choosingProductStatement strong {

    color: #c59a32;

}


/* =========================================================
   RIGHT EDITORIAL LIST
========================================================= */

.choosingProductList {

    width: 100%;

    border-top: 1px solid rgba(197,154,50,.23);

}


/* =========================================================
   INDIVIDUAL CONSIDERATION
========================================================= */

.choosingProductItem {

    display: grid;

    grid-template-columns: 58px minmax(0, 1fr);

    gap: 25px;

    min-height: 125px;

    padding: 26px 0 28px;

    border-bottom: 1px solid rgba(197,154,50,.16);

}


.choosingProductNumber {

    padding-top: 2px;

    color: #c59a32;

    font-size: 11px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: .8px;

}


.choosingProductItemContent {

    min-width: 0;

}


.choosingProductItemContent > span {

    display: block;

    margin-bottom: 8px;

    color: var(--text);

    opacity: .30;

    font-size: 7px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.15px;

}


.choosingProductItemContent h3 {

    margin: 0;

    color: var(--primary);

    font-size: 20px;

    line-height: 1.35;

    font-weight: 600;

}


.choosingProductItemContent p {

    max-width: 510px;

    margin: 7px 0 0;

    color: var(--text);

    opacity: .48;

    font-size: 10px;

    line-height: 1.75;

}


/* =========================================================
   SUBTLE HOVER
========================================================= */

.choosingProductItem {

    transition:
        padding-left .25s ease;

}


.choosingProductItem:hover {

    padding-left: 7px;

}


.choosingProductItem:hover
.choosingProductItemContent h3 {

    color: #c59a32;

    transition: color .25s ease;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .choosingProduct {

        padding: 95px 0 100px;

    }


    .choosingProductGrid {

        grid-template-columns: 1fr;

        gap: 60px;

    }


    .choosingProductIntro {

        position: relative;

        top: auto;

    }


    .choosingProductDescription {

        max-width: 760px;

    }


    .choosingProductList {

        max-width: 850px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .choosingProduct {

        padding: 70px 0 75px;

    }


    .choosingProductContainer {

        width: calc(100% - 30px);

    }


    .choosingProductGrid {

        gap: 45px;

    }


    .choosingProductEyebrow {

        margin-bottom: 19px;

    }


    .choosingProductIntro h2 {

        font-size: clamp(34px, 10vw, 45px);

        line-height: 1.08;

        letter-spacing: -1.3px;

    }


    .choosingProductDescription {

        margin-top: 22px;

        font-size: 10px;

        line-height: 1.8;

    }


    .choosingProductStatement {

        margin-top: 29px;

        gap: 9px;

    }


    .choosingProductStatement span,
    .choosingProductStatement strong {

        font-size: 7px;

    }


    /* RIGHT LIST */

    .choosingProductItem {

        grid-template-columns: 40px minmax(0, 1fr);

        gap: 14px;

        min-height: auto;

        padding: 23px 0 25px;

    }


    .choosingProductNumber {

        font-size: 9px;

    }


    .choosingProductItemContent > span {

        margin-bottom: 6px;

        font-size: 6.5px;

    }


    .choosingProductItemContent h3 {

        font-size: 18px;

        line-height: 1.3;

    }


    .choosingProductItemContent p {

        margin-top: 6px;

        font-size: 9px;

        line-height: 1.8;

    }


    .choosingProductItem:hover {

        padding-left: 0;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .choosingProduct {

        padding: 58px 0 62px;

    }


    .choosingProductContainer {

        width: calc(100% - 26px);

    }


    .choosingProductIntro h2 {

        font-size: 33px;

    }


    .choosingProductDescription {

        font-size: 9px;

    }


    .choosingProductItem {

        grid-template-columns: 34px minmax(0, 1fr);

        gap: 12px;

        padding: 21px 0 23px;

    }


    .choosingProductItemContent h3 {

        font-size: 17px;

    }


    .choosingProductItemContent p {

        font-size: 8px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .choosingProductContainer {

        width: calc(100% - 22px);

    }


    .choosingProductIntro h2 {

        font-size: 30px;

    }


    .choosingProductItem {

        grid-template-columns: 1fr;

        gap: 7px;

    }

}

/* Choose Section Ends Here */

/* Comparison Section Starts Here */

/* =========================================================
   6. PRODUCT COMPARISON / EVALUATION
========================================================= */

.productComparison {

    width: 100%;

    padding: 120px 0 125px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.productComparisonContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   HEADER
========================================================= */

.productComparisonHeader {

    max-width: 790px;

    margin-bottom: 65px;

}


.productComparisonEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 22px;

}


.productComparisonEyebrow span {

    width: 35px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.productComparisonEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.45px;

    text-transform: uppercase;

}


.productComparisonHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(42px, 5vw, 62px);

    line-height: 1.04;

    letter-spacing: -2.3px;

    font-weight: 600;

}


.productComparisonHeader h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


.productComparisonIntro {

    max-width: 690px;

    margin: 25px 0 0;

    color: var(--text);

    opacity: .53;

    font-size: 11px;

    line-height: 1.9;

}


/* =========================================================
   TABLE WRAPPER
========================================================= */

.productComparisonTableWrapper {

    width: 100%;

    overflow-x: auto;

    border-top: 1px solid rgba(197,154,50,.25);

}


/* =========================================================
   TABLE
========================================================= */

.productComparisonTable {

    width: 100%;

    border-collapse: collapse;

    table-layout: fixed;

}


.productComparisonTable th {

    padding: 18px 22px;

    color: var(--text);

    opacity: .32;

    font-size: 8px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.2px;

    text-align: left;

    text-transform: uppercase;

    border-bottom: 1px solid rgba(197,154,50,.18);

}


.productComparisonTable th:first-child {

    width: 31%;

}


.productComparisonTable th:nth-child(2) {

    width: 29%;

}


.productComparisonTable th:nth-child(3) {

    width: 40%;

}


/* =========================================================
   TABLE ROWS
========================================================= */

.productComparisonTable tbody tr {

    transition:
        background .25s ease;

}


.productComparisonTable tbody tr:hover {

    background: rgba(197,154,50,.025);

}


.productComparisonTable td {

    padding: 25px 22px;

    color: var(--text);

    opacity: .56;

    font-size: 10px;

    line-height: 1.7;

    vertical-align: middle;

    border-bottom: 1px solid rgba(197,154,50,.13);

}


.productComparisonTable td:not(:last-child) {

    border-right: 1px solid rgba(197,154,50,.08);

}


/* =========================================================
   PRODUCT NAME
========================================================= */

.comparisonProductName {

    display: flex;

    align-items: center;

    gap: 18px;

}


.comparisonProductName span {

    color: #c59a32;

    opacity: 1;

    font-size: 8px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: .7px;

}


.comparisonProductName strong {

    color: var(--primary);

    opacity: 1;

    font-size: 13px;

    line-height: 1.4;

    font-weight: 600;

}


/* =========================================================
   PRIMARY ROLE
========================================================= */

.productComparisonTable td:nth-child(2) {

    color: var(--primary);

    opacity: .65;

    font-weight: 500;

}


/* =========================================================
   BOTTOM MESSAGE
========================================================= */

.productComparisonBottom {

    margin-top: 40px;

}


.productComparisonBottomLine {

    width: 100%;

    height: 1px;

    background: rgba(197,154,50,.14);

}


.productComparisonBottomContent {

    display: grid;

    grid-template-columns: 190px minmax(0, 1fr);

    gap: 35px;

    padding: 23px 0 0;

}


.productComparisonBottomContent span {

    color: #c59a32;

    font-size: 8px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.productComparisonBottomContent p {

    max-width: 670px;

    margin: 0;

    color: var(--text);

    opacity: .4;

    font-size: 9px;

    line-height: 1.8;

}


/* =========================================================
   SEQUENCE
========================================================= */

.productComparisonSequence {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 11px;

    margin-top: 27px;

}


.productComparisonSequence span,
.productComparisonSequence strong {

    color: var(--text);

    opacity: .3;

    font-size: 8px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.productComparisonSequence strong {

    color: #c59a32;

    opacity: 1;

}


.productComparisonSequence i {

    color: #c59a32;

    opacity: .55;

    font-size: 10px;

    font-style: normal;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .productComparison {

        padding: 95px 0 100px;

    }


    .productComparisonTable th,
    .productComparisonTable td {

        padding-left: 17px;

        padding-right: 17px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .productComparison {

        padding: 70px 0 75px;

    }


    .productComparisonContainer {

        width: calc(100% - 30px);

    }


    .productComparisonHeader {

        margin-bottom: 45px;

    }


    .productComparisonHeader h2 {

        font-size: clamp(34px, 10vw, 45px);

        line-height: 1.07;

        letter-spacing: -1.3px;

    }


    .productComparisonIntro {

        margin-top: 20px;

        font-size: 10px;

        line-height: 1.8;

    }


    /* ---------------------------------------------
       TURN TABLE INTO EDITORIAL LIST
    ---------------------------------------------- */

    .productComparisonTableWrapper {

        overflow: visible;

        border-top: 1px solid rgba(197,154,50,.25);

    }


    .productComparisonTable {

        display: block;

        width: 100%;

    }


    .productComparisonTable thead {

        display: none;

    }


    .productComparisonTable tbody {

        display: block;

        width: 100%;

    }


    .productComparisonTable tr {

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 18px 25px;

        padding: 24px 0 26px;

        border-bottom: 1px solid rgba(197,154,50,.15);

    }


    .productComparisonTable td {

        display: block;

        padding: 0;

        border: 0 !important;

    }


    /* Product spans entire row */

    .productComparisonTable td:first-child {

        grid-column: 1 / -1;

    }


    .comparisonProductName {

        gap: 13px;

    }


    .comparisonProductName span {

        font-size: 7px;

    }


    .comparisonProductName strong {

        font-size: 17px;

    }


    /* Label before role + consideration */

    .productComparisonTable td:nth-child(2)::before,
    .productComparisonTable td:nth-child(3)::before {

        display: block;

        margin-bottom: 7px;

        color: var(--text);

        opacity: .28;

        font-size: 6.5px;

        line-height: 1.4;

        font-weight: 700;

        letter-spacing: 1px;

    }


    .productComparisonTable td:nth-child(2)::before {

        content: "PRIMARY ROLE";

    }


    .productComparisonTable td:nth-child(3)::before {

        content: "TYPICAL CONSIDERATION";

    }


    .productComparisonTable td:nth-child(2) {

        color: var(--primary);

        opacity: .7;

        font-size: 9px;

        line-height: 1.7;

    }


    .productComparisonTable td:nth-child(3) {

        font-size: 9px;

        line-height: 1.7;

    }


    /* BOTTOM */

    .productComparisonBottom {

        margin-top: 30px;

    }


    .productComparisonBottomContent {

        grid-template-columns: 1fr;

        gap: 10px;

        padding-top: 19px;

    }


    .productComparisonBottomContent span {

        font-size: 7px;

    }


    .productComparisonBottomContent p {

        font-size: 8px;

        line-height: 1.8;

    }


    .productComparisonSequence {

        justify-content: flex-start;

        gap: 8px;

        margin-top: 23px;

    }


    .productComparisonSequence span,
    .productComparisonSequence strong {

        font-size: 7px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .productComparison {

        padding: 58px 0 62px;

    }


    .productComparisonContainer {

        width: calc(100% - 26px);

    }


    .productComparisonHeader h2 {

        font-size: 33px;

    }


    .productComparisonIntro {

        font-size: 9px;

    }


    .productComparisonTable tr {

        gap: 16px;

        padding: 22px 0 24px;

    }


    .comparisonProductName strong {

        font-size: 16px;

    }


    .productComparisonTable td:nth-child(2),
    .productComparisonTable td:nth-child(3) {

        font-size: 8px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .productComparisonContainer {

        width: calc(100% - 22px);

    }


    .productComparisonHeader h2 {

        font-size: 30px;

    }


    .productComparisonTable tr {

        grid-template-columns: 1fr;

        gap: 17px;

    }


    .productComparisonTable td:nth-child(2),
    .productComparisonTable td:nth-child(3) {

        width: 100%;

    }


    .productComparisonSequence {

        flex-wrap: wrap;

    }

}

/* Comparison Section Ends Here */

/* Who Section Starts Here */

/* =========================================================
   7. WHO ARE THESE PRODUCTS FOR?
========================================================= */

.productsFor {

    width: 100%;

    padding: 120px 0 125px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.productsForContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   HEADER
========================================================= */

.productsForHeader {

    max-width: 780px;

    margin-bottom: 68px;

}


.productsForEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 22px;

}


.productsForEyebrow span {

    width: 35px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.productsForEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.45px;

    text-transform: uppercase;

}


.productsForHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(42px, 5vw, 62px);

    line-height: 1.04;

    letter-spacing: -2.3px;

    font-weight: 600;

}


.productsForHeader h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   EDITORIAL LIST
========================================================= */

.productsForList {

    width: 100%;

    border-top: 1px solid rgba(197,154,50,.23);

}


/* =========================================================
   ITEM
========================================================= */

.productsForItem {

    display: grid;

    grid-template-columns: 75px minmax(0, 1fr) 205px;

    gap: 35px;

    align-items: start;

    padding: 32px 0 34px;

    border-bottom: 1px solid rgba(197,154,50,.15);

    transition:
        padding-left .25s ease,
        background .25s ease;

}


.productsForItem:hover {

    padding-left: 8px;

}


/* =========================================================
   NUMBER
========================================================= */

.productsForNumber {

    padding-top: 3px;

    color: #c59a32;

    font-size: 11px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: .8px;

}


/* =========================================================
   MAIN CONTENT
========================================================= */

.productsForMain {

    min-width: 0;

}


.productsForMain h3 {

    margin: 0;

    color: var(--primary);

    font-size: 22px;

    line-height: 1.3;

    letter-spacing: -.45px;

    font-weight: 600;

    transition: color .25s ease;

}


.productsForMain p {

    max-width: 650px;

    margin: 8px 0 0;

    color: var(--text);

    opacity: .48;

    font-size: 10px;

    line-height: 1.8;

}


/* =========================================================
   CATEGORY
========================================================= */

.productsForCategory {

    padding-top: 5px;

    color: #c59a32;

    font-size: 8px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1.05px;

    text-align: right;

}


.productsForItem:hover
.productsForMain h3 {

    color: #c59a32;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .productsFor {

        padding: 95px 0 100px;

    }


    .productsForItem {

        grid-template-columns: 55px minmax(0, 1fr) 170px;

        gap: 25px;

    }


    .productsForMain h3 {

        font-size: 20px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .productsFor {

        padding: 70px 0 75px;

    }


    .productsForContainer {

        width: calc(100% - 30px);

    }


    .productsForHeader {

        margin-bottom: 48px;

    }


    .productsForHeader h2 {

        font-size: clamp(34px, 10vw, 45px);

        line-height: 1.07;

        letter-spacing: -1.3px;

    }


    /* ---------------------------------------------
       SINGLE COLUMN EDITORIAL LIST
    ---------------------------------------------- */

    .productsForItem {

        display: grid;

        grid-template-columns: 40px minmax(0, 1fr);

        gap: 14px;

        padding: 25px 0 27px;

    }


    .productsForItem:hover {

        padding-left: 0;

    }


    .productsForNumber {

        padding-top: 2px;

        font-size: 9px;

    }


    .productsForMain h3 {

        font-size: 18px;

        line-height: 1.3;

    }


    .productsForMain p {

        margin-top: 7px;

        font-size: 9px;

        line-height: 1.8;

    }


    /* Category moves below description */

    .productsForCategory {

        grid-column: 2;

        padding-top: 3px;

        font-size: 7px;

        text-align: left;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .productsFor {

        padding: 58px 0 62px;

    }


    .productsForContainer {

        width: calc(100% - 26px);

    }


    .productsForHeader h2 {

        font-size: 33px;

    }


    .productsForItem {

        grid-template-columns: 34px minmax(0, 1fr);

        gap: 12px;

        padding: 22px 0 24px;

    }


    .productsForMain h3 {

        font-size: 17px;

    }


    .productsForMain p {

        font-size: 8px;

    }


    .productsForCategory {

        font-size: 6.5px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .productsForContainer {

        width: calc(100% - 22px);

    }


    .productsForHeader h2 {

        font-size: 30px;

    }


    .productsForItem {

        grid-template-columns: 1fr;

        gap: 8px;

    }


    .productsForCategory {

        grid-column: auto;

    }

}

/* Who Section Ends Here */

/* Why Section Starts Here */

/* =========================================================
   8. WHY CHOOSE MONEY RICH FINSERV
========================================================= */

.whyChooseMRF {

    width: 100%;

    padding: 120px 0 125px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.whyChooseMRFContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   SECTION HEADER
========================================================= */

.whyChooseMRFHeader {

    max-width: 950px;

    margin-bottom: 75px;

}


.whyChooseMRFEyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 23px;

}


.whyChooseMRFEyebrow span {

    width: 35px;

    height: 2px;

    flex-shrink: 0;

    background: #c59a32;

}


.whyChooseMRFEyebrow p {

    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.45px;

    text-transform: uppercase;

}


.whyChooseMRFHeader h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(38px, 4.7vw, 59px);

    line-height: 1.06;

    letter-spacing: -2.1px;

    font-weight: 600;

}


.whyChooseMRFHeader h2 strong {

    color: #c59a32;

    font-weight: 600;

}


/* =========================================================
   FOUR COLUMN GRID
========================================================= */

.whyChooseMRFGrid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    border-top: 1px solid rgba(197,154,50,.22);

    border-bottom: 1px solid rgba(197,154,50,.16);

}


/* =========================================================
   INDIVIDUAL ITEM
========================================================= */

.whyChooseMRFItem {

    min-width: 0;

    min-height: 330px;

    padding: 27px 28px 35px;

    border-right: 1px solid rgba(197,154,50,.13);

    transition:
        background .3s ease,
        padding-top .3s ease;

}


.whyChooseMRFItem:first-child {

    padding-left: 0;

}


.whyChooseMRFItem:last-child {

    padding-right: 0;

    border-right: none;

}


/* =========================================================
   TOP METADATA
========================================================= */

.whyChooseMRFTop {

    display: flex;

    flex-direction: column;

    gap: 15px;

}


.whyChooseMRFNumber {

    color: #c59a32;

    font-size: 12px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: .8px;

}


.whyChooseMRFCategory {

    color: var(--text);

    opacity: .30;

    font-size: 7px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1.1px;

}


/* =========================================================
   CONTENT
========================================================= */

.whyChooseMRFContent {

    margin-top: 90px;

}


.whyChooseMRFContent h3 {

    margin: 0;

    color: var(--primary);

    font-size: 21px;

    line-height: 1.3;

    letter-spacing: -.45px;

    font-weight: 600;

    transition: color .25s ease;

}


.whyChooseMRFContent p {

    max-width: 245px;

    margin: 12px 0 0;

    color: var(--text);

    opacity: .48;

    font-size: 9.5px;

    line-height: 1.85;

}


/* =========================================================
   HOVER
========================================================= */

.whyChooseMRFItem:hover {

    background: rgba(197,154,50,.025);

    padding-top: 34px;

}


.whyChooseMRFItem:hover
.whyChooseMRFContent h3 {

    color: #c59a32;

}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .whyChooseMRFItem {

        padding-left: 20px;

        padding-right: 20px;

    }


    .whyChooseMRFContent {

        margin-top: 70px;

    }


    .whyChooseMRFContent h3 {

        font-size: 19px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 850px) {

    .whyChooseMRF {

        padding: 95px 0 100px;

    }


    .whyChooseMRFGrid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }


    .whyChooseMRFItem {

        min-height: 285px;

        border-bottom: 1px solid rgba(197,154,50,.13);

    }


    .whyChooseMRFItem:nth-child(2) {

        border-right: none;

    }


    .whyChooseMRFItem:nth-child(3),
    .whyChooseMRFItem:nth-child(4) {

        border-bottom: none;

    }


    .whyChooseMRFItem:first-child,
    .whyChooseMRFItem:nth-child(3) {

        padding-left: 0;

    }


    .whyChooseMRFItem:nth-child(2),
    .whyChooseMRFItem:last-child {

        padding-right: 0;

    }


    .whyChooseMRFContent {

        margin-top: 65px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .whyChooseMRF {

        padding: 70px 0 75px;

    }


    .whyChooseMRFContainer {

        width: calc(100% - 30px);

    }


    .whyChooseMRFHeader {

        margin-bottom: 48px;

    }


    .whyChooseMRFHeader h2 {

        font-size: clamp(34px, 10vw, 45px);

        line-height: 1.07;

        letter-spacing: -1.3px;

    }


    /* ---------------------------------------------
       SINGLE COLUMN
    ---------------------------------------------- */

    .whyChooseMRFGrid {

        grid-template-columns: 1fr;

    }


    .whyChooseMRFItem,
    .whyChooseMRFItem:first-child,
    .whyChooseMRFItem:nth-child(2),
    .whyChooseMRFItem:nth-child(3),
    .whyChooseMRFItem:last-child {

        min-height: auto;

        padding: 27px 0 29px;

        border-right: none;

        border-bottom: 1px solid rgba(197,154,50,.15);

    }


    .whyChooseMRFItem:last-child {

        border-bottom: none;

    }


    .whyChooseMRFTop {

        flex-direction: row;

        align-items: center;

        justify-content: space-between;

        gap: 15px;

    }


    .whyChooseMRFNumber {

        font-size: 9px;

    }


    .whyChooseMRFCategory {

        font-size: 6.5px;

        text-align: right;

    }


    .whyChooseMRFContent,
    .whyChooseMRFItem:hover .whyChooseMRFContent {

        margin-top: 27px;

    }


    .whyChooseMRFContent h3 {

        font-size: 19px;

    }


    .whyChooseMRFContent p {

        max-width: 600px;

        margin-top: 8px;

        font-size: 9px;

        line-height: 1.8;

    }


    .whyChooseMRFItem:hover {

        padding-top: 27px;

        background: transparent;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .whyChooseMRF {

        padding: 58px 0 62px;

    }


    .whyChooseMRFContainer {

        width: calc(100% - 26px);

    }


    .whyChooseMRFHeader h2 {

        font-size: 33px;

    }


    .whyChooseMRFItem,
    .whyChooseMRFItem:first-child,
    .whyChooseMRFItem:nth-child(2),
    .whyChooseMRFItem:nth-child(3),
    .whyChooseMRFItem:last-child {

        padding: 24px 0 26px;

    }


    .whyChooseMRFTop {

        align-items: flex-start;

    }


    .whyChooseMRFCategory {

        max-width: 145px;

    }


    .whyChooseMRFContent,
    .whyChooseMRFItem:hover .whyChooseMRFContent {

        margin-top: 24px;

    }


    .whyChooseMRFContent h3 {

        font-size: 18px;

    }


    .whyChooseMRFContent p {

        font-size: 8px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .whyChooseMRFContainer {

        width: calc(100% - 22px);

    }


    .whyChooseMRFHeader h2 {

        font-size: 30px;

    }


    .whyChooseMRFTop {

        flex-direction: column;

        align-items: flex-start;

        gap: 8px;

    }


    .whyChooseMRFCategory {

        text-align: left;

    }

}

/* Why Section Ends Here */

/* CTA Section Starts Here */

/* =========================================================
   9. PRODUCT SELECTION CTA
========================================================= */

.productSelectionCTA {

    width: 100%;

    padding: 85px 0 90px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.productSelectionCTAContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   MAIN CTA STRUCTURE
========================================================= */

.productSelectionCTAInner {

    display: grid;

    grid-template-columns: 3px minmax(0, 1fr) 240px;

    gap: 48px;

    align-items: center;

    min-height: 280px;

}


/* =========================================================
   GOLD VERTICAL RULE
========================================================= */

.productSelectionCTARule {

    width: 1px;

    height: 190px;

    justify-self: center;

    background: #c59a32;

    opacity: .8;

}


/* =========================================================
   MAIN CONTENT
========================================================= */

.productSelectionCTAContent {

    max-width: 720px;

}


.productSelectionCTAEyebrow {

    margin-bottom: 19px;

}


.productSelectionCTAEyebrow span {

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.45px;

    text-transform: uppercase;

}


.productSelectionCTAContent h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(38px, 4.3vw, 55px);

    line-height: 1.07;

    letter-spacing: -1.9px;

    font-weight: 600;

}


.productSelectionCTAContent h2 strong {

    display: block;

    color: #c59a32;

    font-weight: 600;

}


.productSelectionCTAContent > p {

    max-width: 680px;

    margin: 23px 0 0;

    color: var(--text);

    opacity: .5;

    font-size: 10.5px;

    line-height: 1.9;

}


/* =========================================================
   BUTTONS
========================================================= */

.productSelectionCTAActions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 13px;

    margin-top: 30px;

}


.productSelectionCTAActions .themeBtn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    min-height: 47px;

    padding: 0 23px;

    text-decoration: none;

}


.productSelectionCTAActions .themeBtn span,
.productSelectionSecondaryBtn span {

    font-size: 13px;

    transition: transform .25s ease;

}


.productSelectionCTAActions .themeBtn:hover span,
.productSelectionSecondaryBtn:hover span {

    transform: translateX(4px);

}


.productSelectionSecondaryBtn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    min-height: 47px;

    padding: 0 23px;

    color: var(--primary);

    border: 1px solid rgba(197,154,50,.32);

    text-decoration: none;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: .5px;

    transition:
        background .25s ease,
        border-color .25s ease;

}


.productSelectionSecondaryBtn:hover {

    border-color: #c59a32;

    background: rgba(197,154,50,.04);

}


/* =========================================================
   RIGHT TYPOGRAPHIC DETAIL
========================================================= */

.productSelectionCTADetail {

    align-self: center;

    padding-left: 30px;

    border-left: 1px solid rgba(197,154,50,.13);

}


.productSelectionCTADetail > span {

    display: block;

    margin-bottom: 23px;

    color: var(--text);

    opacity: .28;

    font-size: 7px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.25px;

}


.productSelectionCTATerms {

    display: flex;

    flex-direction: column;

    gap: 10px;

}


.productSelectionCTATerms strong {

    color: var(--primary);

    opacity: .55;

    font-size: 11px;

    line-height: 1.4;

    font-weight: 600;

    letter-spacing: 1.3px;

}


.productSelectionCTATerms strong:first-child {

    color: #c59a32;

    opacity: 1;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .productSelectionCTA {

        padding: 75px 0 80px;

    }


    .productSelectionCTAInner {

        grid-template-columns: 2px minmax(0, 1fr);

        gap: 35px;

    }


    .productSelectionCTADetail {

        grid-column: 2;

        padding-left: 0;

        padding-top: 22px;

        border-left: none;

        border-top: 1px solid rgba(197,154,50,.13);

    }


    .productSelectionCTATerms {

        flex-direction: row;

        flex-wrap: wrap;

        gap: 10px 25px;

    }


    .productSelectionCTARule {

        height: 250px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .productSelectionCTA {

        padding: 62px 0 65px;

    }


    .productSelectionCTAContainer {

        width: calc(100% - 30px);

    }


    .productSelectionCTAInner {

        display: grid;

        grid-template-columns: 2px minmax(0, 1fr);

        gap: 20px;

        min-height: auto;

    }


    .productSelectionCTARule {

        height: 100%;

        min-height: 330px;

    }


    .productSelectionCTAContent {

        max-width: none;

    }


    .productSelectionCTAEyebrow {

        margin-bottom: 15px;

    }


    .productSelectionCTAEyebrow span {

        font-size: 7px;

        letter-spacing: 1.15px;

    }


    .productSelectionCTAContent h2 {

        font-size: clamp(31px, 9vw, 40px);

        line-height: 1.08;

        letter-spacing: -1.1px;

    }


    .productSelectionCTAContent > p {

        margin-top: 19px;

        font-size: 9px;

        line-height: 1.85;

    }


    /* BUTTONS STACK */

    .productSelectionCTAActions {

        align-items: stretch;

        flex-direction: column;

        gap: 9px;

        margin-top: 25px;

    }


    .productSelectionCTAActions .themeBtn,
    .productSelectionSecondaryBtn {

        width: 100%;

        min-height: 45px;

        box-sizing: border-box;

        padding: 0 17px;

        font-size: 8px;

    }


    /* TYPOGRAPHIC DETAIL */

    .productSelectionCTADetail {

        grid-column: 2;

        padding-top: 21px;

        margin-top: 3px;

    }


    .productSelectionCTADetail > span {

        margin-bottom: 14px;

        font-size: 6px;

    }


    .productSelectionCTATerms {

        gap: 8px 18px;

    }


    .productSelectionCTATerms strong {

        font-size: 8px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .productSelectionCTA {

        padding: 53px 0 57px;

    }


    .productSelectionCTAContainer {

        width: calc(100% - 26px);

    }


    .productSelectionCTAInner {

        gap: 16px;

    }


    .productSelectionCTARule {

        min-height: 350px;

    }


    .productSelectionCTAContent h2 {

        font-size: 30px;

    }


    .productSelectionCTAContent > p {

        font-size: 8px;

    }


    .productSelectionCTAActions .themeBtn,
    .productSelectionSecondaryBtn {

        min-height: 43px;

        font-size: 7.5px;

    }


    .productSelectionCTATerms strong {

        font-size: 7px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .productSelectionCTAContainer {

        width: calc(100% - 22px);

    }


    .productSelectionCTAContent h2 {

        font-size: 28px;

    }


    .productSelectionCTATerms {

        flex-direction: column;

        gap: 7px;

    }

}

/* CTA Section Ends Here */

/* Products Page Ends Here */


/* Blogs Page Starts Here */

/* Hero Section Starts Here */

/* =========================================================
   FINANCIAL JOURNAL HERO
========================================================= */

.journalHero {

    width: 100%;

    background: var(--section);

    color: var(--primary);

    overflow: hidden;

}


.journalHeroContainer {

    width: min(1280px, calc(100% - 60px));

    margin: 0 auto;

}


/* =========================================================
   PUBLICATION MASTHEAD
========================================================= */

.journalMasthead {

    display: grid;

    grid-template-columns: 1fr auto 1fr;

    align-items: center;

    min-height: 58px;

    border-bottom: 1px solid rgba(197,154,50,.16);

}


.journalBrand {

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.4px;

    color: var(--primary);

}


.journalEdition {

    font-family: Georgia, "Times New Roman", serif;

    font-size: 10px;

    letter-spacing: 2px;

    opacity: .45;

    text-align: center;

}


.journalIssue {

    color: #c59a32;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.2px;

    text-align: right;

}


/* =========================================================
   MAIN HERO
========================================================= */

.journalHeroMain {

    display: grid;

    grid-template-columns: minmax(400px, .95fr) minmax(400px, 1.05fr);

    gap: 80px;

    align-items: end;

    padding: 105px 0 95px;

}


/* =========================================================
   GIANT TITLE
========================================================= */

.journalTitle {

    position: relative;

}


.journalTitle > span {

    display: block;

    margin-left: 7px;

    margin-bottom: 4px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(20px, 2vw, 29px);

    line-height: 1;

    letter-spacing: 5px;

    font-weight: 400;

    opacity: .48;

}


.journalTitle h1 {

    margin: 0;

    font-family: Georgia, "Times New Roman", serif;

    /* font-size: clamp(95px, 12vw, 170px); */
    font-size: clamp(95px, 12vw, 125px);

    line-height: .76;

    letter-spacing: -8px;

    font-weight: 400;

    color: var(--primary);

}


.journalTitleLine {

    width: 115px;

    height: 2px;

    margin-top: 35px;

    background: #c59a32;

}


/* =========================================================
   HERO COPY
========================================================= */

.journalHeroCopy {

    max-width: 600px;

    padding-bottom: 3px;

}


.journalEyebrow {

    margin-bottom: 20px;

    color: #c59a32;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.journalHeroCopy h2 {

    max-width: 600px;

    margin: 0;

    font-size: clamp(36px, 4.1vw, 55px);

    line-height: 1.05;

    letter-spacing: -1.9px;

    font-weight: 600;

}


.journalHeroCopy p {

    max-width: 570px;

    margin: 25px 0 0;

    color: var(--text);

    opacity: .53;

    font-size: 10.5px;

    line-height: 1.9;

}


.journalHeroCopy .journalHeroSecondary {

    margin-top: 11px;

    opacity: .38;

}


/* =========================================================
   ACTIONS
========================================================= */

.journalHeroActions {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;

    margin-top: 31px;

}


.journalHeroActions .themeBtn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    min-height: 48px;

    padding: 0 23px;

    text-decoration: none;

}


.journalHeroActions .themeBtn span,
.journalConsultBtn span {

    transition: transform .25s ease;

}


.journalHeroActions .themeBtn:hover span,
.journalConsultBtn:hover span {

    transform: translate(3px, -3px);

}


.journalConsultBtn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    min-height: 48px;

    padding: 0 23px;

    border: 1px solid rgba(197,154,50,.3);

    color: var(--primary);

    text-decoration: none;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .5px;

}


/* =========================================================
   BOTTOM EDITORIAL STRIP
========================================================= */

.journalHeroBottom {

    display: grid;

    grid-template-columns: 1.25fr 1fr .85fr;

    border-top: 1px solid rgba(197,154,50,.18);

}


.journalFeatured,
.journalTopics,
.journalPhilosophy {

    min-height: 185px;

    padding: 27px 30px 28px;

    box-sizing: border-box;

}


.journalFeatured {

    padding-left: 0;

    border-right: 1px solid rgba(197,154,50,.13);

}


.journalTopics {

    border-right: 1px solid rgba(197,154,50,.13);

}


/* =========================================================
   FEATURED
========================================================= */

.journalSmallLabel {

    margin-bottom: 22px;

    color: #c59a32;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.2px;

}


.journalFeatured h3 {

    max-width: 430px;

    margin: 0;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 21px;

    line-height: 1.28;

    font-weight: 400;

    letter-spacing: -.3px;

}


.journalReadLink {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 19px;

    color: var(--primary);

    font-size: 7px;

    font-weight: 700;

    letter-spacing: .7px;

    text-decoration: none;

}


.journalReadLink span {

    color: #c59a32;

    font-size: 11px;

}


/* =========================================================
   TOPICS
========================================================= */

.journalTopicsHeader {

    margin-bottom: 16px;

    color: var(--text);

    opacity: .3;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.2px;

}


.journalTopicList {

    display: grid;

    grid-template-columns: 1fr 1fr;

}


.journalTopicList a {

    display: flex;

    align-items: center;

    gap: 12px;

    min-height: 31px;

    color: var(--primary);

    text-decoration: none;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: .7px;

    transition: color .2s ease;

}


.journalTopicList a:hover {

    color: #c59a32;

}


.journalTopicList span {

    color: #c59a32;

    font-size: 6px;

    opacity: .7;

}


/* =========================================================
   PHILOSOPHY
========================================================= */

.journalPhilosophy {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}


.journalPhilosophy > span {

    color: var(--text);

    opacity: .27;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.2px;

}


.journalPhilosophy strong {

    font-family: Georgia, "Times New Roman", serif;

    font-size: 17px;

    line-height: 1;

    font-weight: 400;

}


.journalPhilosophy strong:first-of-type {

    color: #c59a32;

}


.journalPhilosophy i {

    display: none;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .journalHeroContainer {

        width: min(100% - 40px, 800px);

    }


    .journalHeroMain {

        grid-template-columns: 1fr;

        gap: 60px;

        padding: 85px 0 75px;

    }


    .journalTitle h1 {

        font-size: clamp(90px, 18vw, 145px);

    }


    .journalHeroCopy {

        max-width: 700px;

    }


    .journalHeroBottom {

        grid-template-columns: 1fr 1fr;

    }


    .journalFeatured {

        grid-column: 1 / -1;

        border-right: none;

        border-bottom: 1px solid rgba(197,154,50,.13);

        padding-left: 0;

    }


    .journalTopics {

        border-right: 1px solid rgba(197,154,50,.13);

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .journalHeroContainer {

        width: calc(100% - 30px);

    }


    .journalMasthead {

        min-height: 50px;

    }


    .journalBrand {

        font-size: 6px;

        letter-spacing: 1px;

    }


    .journalEdition {

        font-size: 7px;

        letter-spacing: 1.2px;

    }


    .journalIssue {

        font-size: 5.5px;

    }


    .journalHeroMain {

        gap: 43px;

        padding: 62px 0 60px;

    }


    .journalTitle > span {

        margin-left: 3px;

        font-size: 15px;

        letter-spacing: 3px;

    }


    .journalTitle h1 {

        font-size: clamp(64px, 19vw, 100px);

        letter-spacing: -4px;

    }


    .journalTitleLine {

        width: 70px;

        margin-top: 25px;

    }


    .journalEyebrow {

        font-size: 6px;

        letter-spacing: 1px;

    }


    .journalHeroCopy h2 {

        font-size: clamp(31px, 9vw, 42px);

        line-height: 1.07;

        letter-spacing: -1.1px;

    }


    .journalHeroCopy p {

        margin-top: 19px;

        font-size: 9px;

        line-height: 1.85;

    }


    .journalHeroActions {

        flex-direction: column;

        align-items: stretch;

        margin-top: 25px;

    }


    .journalHeroActions .themeBtn,
    .journalConsultBtn {

        width: 100%;

        min-height: 45px;

        box-sizing: border-box;

        font-size: 7.5px;

    }


    /* ---------------------------------------------
       BOTTOM AREA
    ---------------------------------------------- */

    .journalHeroBottom {

        display: block;

    }


    .journalFeatured,
    .journalTopics,
    .journalPhilosophy {

        min-height: auto;

        padding: 27px 0;

        border-right: none;

        border-bottom: 1px solid rgba(197,154,50,.13);

    }


    .journalFeatured h3 {

        font-size: 19px;

    }


    .journalTopics {

        padding-left: 0;

    }


    .journalTopicList {

        grid-template-columns: 1fr 1fr;

    }


    .journalPhilosophy {

        border-bottom: none;

        display: block;

    }


    .journalPhilosophy > span {

        display: block;

        margin-bottom: 20px;

    }


    .journalPhilosophy strong {

        margin-right: 10px;

        font-size: 15px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .journalHeroContainer {

        width: calc(100% - 26px);

    }


    .journalHeroMain {

        padding: 54px 0 52px;

    }


    .journalTitle h1 {

        font-size: 61px;

    }


    .journalHeroCopy h2 {

        font-size: 29px;

    }


    .journalHeroCopy p {

        font-size: 8px;

    }


    .journalFeatured h3 {

        font-size: 18px;

    }


    .journalTopicList a {

        font-size: 7px;

    }

}

/* Hero Section Ends Here */

/* Latest Insights Starts Here */

/* =========================================================
   3. LATEST FINANCIAL INSIGHTS
========================================================= */

.latestInsights {

    width: 100%;

    padding: 125px 0 130px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.latestInsightsContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   INTRO
========================================================= */

.latestInsightsIntro {

    display: grid;

    grid-template-columns: 260px minmax(0, 1fr);

    gap: 65px;

    margin-bottom: 75px;

}


.latestInsightsLabel {

    display: flex;

    align-items: center;

    gap: 10px;

    padding-top: 9px;

}


.latestInsightsLabel span {

    width: 30px;

    height: 1px;

    background: #c59a32;

}


.latestInsightsLabel p {

    margin: 0;

    color: #c59a32;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.35px;

    text-transform: uppercase;

}


.latestInsightsHeading {

    max-width: 760px;

}


.latestInsightsHeading h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(44px, 5vw, 64px);

    line-height: 1;

    letter-spacing: -2.5px;

    font-weight: 600;

}


.latestInsightsHeading h2 em {

    display: block;

    color: #c59a32;

    font-family: Georgia, "Times New Roman", serif;

    font-weight: 400;

    font-style: italic;

    letter-spacing: -2px;

}


.latestInsightsHeading p {

    max-width: 580px;

    margin: 25px 0 0;

    color: var(--text);

    opacity: .48;

    font-size: 10px;

    line-height: 1.9;

}


/* =========================================================
   ARTICLE LIST
========================================================= */

.latestInsightsList {

    border-top: 1px solid rgba(197,154,50,.2);

}


/* =========================================================
   ARTICLE
========================================================= */

.latestInsightArticle {

    display: grid;

    grid-template-columns: 115px minmax(0, 1fr);

    gap: 45px;

    padding: 42px 0 44px;

    border-bottom: 1px solid rgba(197,154,50,.14);

    transition:
        padding-left .3s ease,
        background .3s ease;

}


.latestInsightArticle:hover {

    padding-left: 10px;

}


/* =========================================================
   NUMBER
========================================================= */

.latestInsightNumber {

    padding-top: 3px;

    color: #c59a32;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 32px;

    line-height: 1;

    font-weight: 400;

    letter-spacing: -1px;

}


/* =========================================================
   ARTICLE CONTENT
========================================================= */

.latestInsightMain {

    max-width: 820px;

}


/* =========================================================
   META
========================================================= */

.latestInsightMeta {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 17px;

}


.latestInsightMeta span {

    color: var(--text);

    opacity: .38;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.latestInsightMeta span:first-child {

    color: #c59a32;

    opacity: 1;

}


.latestInsightMeta i {

    color: #c59a32;

    opacity: .4;

    font-size: 7px;

    font-style: normal;

}


/* =========================================================
   TITLE
========================================================= */

.latestInsightMain h3 {

    max-width: 720px;

    margin: 0;

    color: var(--primary);

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(27px, 3vw, 38px);

    line-height: 1.12;

    letter-spacing: -.8px;

    font-weight: 400;

    transition: color .25s ease;

}


.latestInsightArticle:hover
.latestInsightMain h3 {

    color: #c59a32;

}


/* =========================================================
   EXCERPT
========================================================= */

.latestInsightMain > p {

    max-width: 610px;

    margin: 15px 0 0;

    color: var(--text);

    opacity: .43;

    font-size: 9.5px;

    line-height: 1.85;

}


/* =========================================================
   ARTICLE FOOTER
========================================================= */

.latestInsightBottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    max-width: 610px;

    margin-top: 23px;

}


.latestInsightBottom time {

    color: var(--text);

    opacity: .27;

    font-size: 6.5px;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.latestInsightBottom a {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: var(--primary);

    text-decoration: none;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: .7px;

}


.latestInsightBottom a span {

    color: #c59a32;

    font-size: 11px;

    transition: transform .25s ease;

}


.latestInsightBottom a:hover span {

    transform: translate(3px, -3px);

}


/* =========================================================
   VIEW ALL
========================================================= */

.latestInsightsFooter {

    display: flex;

    justify-content: flex-end;

    padding-top: 30px;

}


.latestInsightsViewAll {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: var(--primary);

    text-decoration: none;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .8px;

    text-transform: uppercase;

}


.latestInsightsViewAll span {

    color: #c59a32;

    font-size: 13px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 850px) {

    .latestInsights {

        padding: 100px 0 105px;

    }


    .latestInsightsIntro {

        grid-template-columns: 190px minmax(0, 1fr);

        gap: 40px;

    }


    .latestInsightArticle {

        grid-template-columns: 70px minmax(0, 1fr);

        gap: 30px;

    }


    .latestInsightNumber {

        font-size: 27px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .latestInsights {

        padding: 70px 0 75px;

    }


    .latestInsightsContainer {

        width: calc(100% - 30px);

    }


    .latestInsightsIntro {

        display: block;

        margin-bottom: 48px;

    }


    .latestInsightsLabel {

        margin-bottom: 21px;

        padding-top: 0;

    }


    .latestInsightsHeading h2 {

        font-size: clamp(36px, 10vw, 46px);

        line-height: 1.02;

        letter-spacing: -1.5px;

    }


    .latestInsightsHeading h2 em {

        letter-spacing: -1px;

    }


    .latestInsightsHeading p {

        margin-top: 18px;

        font-size: 9px;

        line-height: 1.85;

    }


    /* ---------------------------------------------
       ARTICLE
    ---------------------------------------------- */

    .latestInsightArticle {

        display: grid;

        grid-template-columns: 38px minmax(0, 1fr);

        gap: 15px;

        padding: 29px 0 31px;

    }


    .latestInsightArticle:hover {

        padding-left: 0;

    }


    .latestInsightNumber {

        padding-top: 2px;

        font-size: 22px;

    }


    .latestInsightMeta {

        gap: 7px;

        margin-bottom: 12px;

    }


    .latestInsightMeta span {

        font-size: 6px;

        letter-spacing: .85px;

    }


    .latestInsightMain h3 {

        font-size: 24px;

        line-height: 1.12;

        letter-spacing: -.4px;

    }


    .latestInsightMain > p {

        margin-top: 11px;

        font-size: 8.5px;

        line-height: 1.8;

    }


    .latestInsightBottom {

        margin-top: 18px;

    }


    .latestInsightBottom time {

        font-size: 5.5px;

    }


    .latestInsightBottom a {

        font-size: 6.5px;

    }


    .latestInsightsFooter {

        justify-content: flex-start;

        padding-top: 25px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .latestInsights {

        padding: 58px 0 62px;

    }


    .latestInsightsContainer {

        width: calc(100% - 26px);

    }


    .latestInsightsHeading h2 {

        font-size: 34px;

    }


    .latestInsightArticle {

        grid-template-columns: 31px minmax(0, 1fr);

        gap: 12px;

        padding: 25px 0 27px;

    }


    .latestInsightNumber {

        font-size: 19px;

    }


    .latestInsightMeta span {

        font-size: 5.5px;

    }


    .latestInsightMain h3 {

        font-size: 21px;

    }


    .latestInsightMain > p {

        font-size: 8px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .latestInsightsContainer {

        width: calc(100% - 22px);

    }


    .latestInsightArticle {

        grid-template-columns: 1fr;

        gap: 9px;

    }


    .latestInsightNumber {

        font-size: 17px;

    }

}

/* Latest Insights Ends Here */

/* CTA Section Starts Here */

/* =========================================================
   10. FINAL CTA — BLOG PAGE
========================================================= */

.blogFinalCTA {

    width: 100%;

    padding: 115px 0 45px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.blogFinalCTAContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   MAIN CTA FRAME
========================================================= */

.blogFinalCTAFrame {

    display: grid;

    grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);

    gap: 90px;

    align-items: center;

    min-height: 390px;

    padding: 65px 0 65px 55px;

    border-left: 1px solid rgba(197,154,50,.6);

    border-top: 1px solid rgba(197,154,50,.13);

    border-bottom: 1px solid rgba(197,154,50,.13);

    box-sizing: border-box;

}


/* =========================================================
   LEFT CONTENT
========================================================= */

.blogFinalCTAContent {

    max-width: 700px;

}


.blogFinalCTAPrefix {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 22px;

}


.blogFinalCTAPrefix span {

    width: 30px;

    height: 1px;

    background: #c59a32;

}


.blogFinalCTAPrefix p {

    margin: 0;

    color: #c59a32;

    font-size: 8px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.35px;

    text-transform: uppercase;

}


.blogFinalCTAContent h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(43px, 5vw, 65px);

    line-height: 1.02;

    letter-spacing: -2.4px;

    font-weight: 600;

}


.blogFinalCTAContent h2 em {

    display: block;

    color: #c59a32;

    font-family: Georgia, "Times New Roman", serif;

    font-weight: 400;

    font-style: italic;

    letter-spacing: -1.8px;

}


.blogFinalCTADescription {

    max-width: 630px;

    margin: 24px 0 0;

    color: var(--text);

    opacity: .48;

    font-size: 10px;

    line-height: 1.9;

}


/* =========================================================
   BUTTONS
========================================================= */

.blogFinalCTAActions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 31px;

}


.blogFinalCTAActions .themeBtn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    min-height: 48px;

    padding: 0 23px;

    text-decoration: none;

}


.blogFinalCTAActions .themeBtn span,
.blogFinalCTASecondary span {

    transition: transform .25s ease;

}


.blogFinalCTAActions .themeBtn:hover span,
.blogFinalCTASecondary:hover span {

    transform: translate(3px, -3px);

}


.blogFinalCTASecondary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    min-height: 48px;

    padding: 0 23px;

    border: 1px solid rgba(197,154,50,.3);

    color: var(--primary);

    text-decoration: none;

    font-size: 8px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: .5px;

    transition:
        border-color .25s ease,
        background .25s ease;

}


.blogFinalCTASecondary:hover {

    border-color: #c59a32;

    background: rgba(197,154,50,.035);

}


/* =========================================================
   RIGHT EDITORIAL BLOCK
========================================================= */

.blogFinalCTARight {

    min-height: 285px;

    padding-left: 48px;

    border-left: 1px solid rgba(197,154,50,.14);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}


.blogFinalCTAEdition {

    color: var(--text);

    opacity: .27;

    font-size: 7px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.2px;

}


/* =========================================================
   WORD LIST
========================================================= */

.blogFinalCTAWords {

    display: flex;

    flex-direction: column;

    gap: 7px;

    margin-top: 30px;

}


.blogFinalCTAWords span,
.blogFinalCTAWords strong {

    color: var(--primary);

    opacity: .34;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 24px;

    line-height: 1;

    font-weight: 400;

    letter-spacing: -.5px;

}


.blogFinalCTAWords strong {

    color: #c59a32;

    opacity: 1;

    font-size: 32px;

}


/* =========================================================
   EDITORIAL STATEMENT
========================================================= */

.blogFinalCTAStatement {

    margin-top: 35px;

}


.blogFinalCTAStatement p {

    margin: 0;

    color: var(--primary);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 13px;

    line-height: 1.45;

    letter-spacing: .3px;

}


.blogFinalCTAStatement p:nth-child(2) {

    color: #c59a32;

}


.blogFinalCTAStatement p:last-child {

    margin-top: 7px;

    opacity: .45;

}


/* =========================================================
   BOTTOM JOURNAL LINE
========================================================= */

.blogFinalCTABottom {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 9px;

    padding-top: 24px;

}


.blogFinalCTABottom span,
.blogFinalCTABottom strong {

    color: var(--text);

    opacity: .3;

    font-size: 6.5px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.blogFinalCTABottom strong {

    color: #c59a32;

    opacity: 1;

}


.blogFinalCTABottom i {

    color: #c59a32;

    opacity: .4;

    font-size: 8px;

    font-style: normal;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .blogFinalCTA {

        padding: 95px 0 40px;

    }


    .blogFinalCTAFrame {

        grid-template-columns: minmax(0, 1fr) 250px;

        gap: 45px;

        padding-left: 40px;

    }


    .blogFinalCTAContent h2 {

        font-size: clamp(38px, 5vw, 53px);

    }


    .blogFinalCTARight {

        padding-left: 30px;

    }


    .blogFinalCTAWords span,
    .blogFinalCTAWords strong {

        font-size: 21px;

    }


    .blogFinalCTAWords strong {

        font-size: 28px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .blogFinalCTA {

        padding: 70px 0 35px;

    }


    .blogFinalCTAContainer {

        width: calc(100% - 30px);

    }


    .blogFinalCTAFrame {

        display: block;

        min-height: auto;

        padding: 48px 0 48px 22px;

    }


    .blogFinalCTAContent {

        max-width: none;

    }


    .blogFinalCTAContent h2 {

        font-size: clamp(34px, 10vw, 46px);

        line-height: 1.05;

        letter-spacing: -1.3px;

    }


    .blogFinalCTADescription {

        margin-top: 20px;

        font-size: 9px;

        line-height: 1.85;

    }


    .blogFinalCTAActions {

        flex-direction: column;

        align-items: stretch;

        margin-top: 26px;

        gap: 8px;

    }


    .blogFinalCTAActions .themeBtn,
    .blogFinalCTASecondary {

        width: 100%;

        min-height: 45px;

        box-sizing: border-box;

        font-size: 7.5px;

    }


    /* ---------------------------------------------
       RIGHT EDITORIAL AREA
    ---------------------------------------------- */

    .blogFinalCTARight {

        min-height: auto;

        margin-top: 45px;

        padding: 30px 0 0;

        border-left: none;

        border-top: 1px solid rgba(197,154,50,.14);

    }


    .blogFinalCTAEdition {

        font-size: 6px;

    }


    .blogFinalCTAWords {

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 13px 20px;

        margin-top: 24px;

    }


    .blogFinalCTAWords span,
    .blogFinalCTAWords strong {

        font-size: 20px;

    }


    .blogFinalCTAWords strong {

        font-size: 27px;

    }


    .blogFinalCTAStatement {

        margin-top: 30px;

    }


    .blogFinalCTAStatement p {

        font-size: 12px;

    }


    .blogFinalCTABottom {

        justify-content: flex-start;

        flex-wrap: wrap;

        gap: 6px;

        padding-top: 21px;

    }


    .blogFinalCTABottom span,
    .blogFinalCTABottom strong {

        font-size: 5.5px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .blogFinalCTA {

        padding: 58px 0 30px;

    }


    .blogFinalCTAContainer {

        width: calc(100% - 26px);

    }


    .blogFinalCTAFrame {

        padding-left: 18px;

    }


    .blogFinalCTAContent h2 {

        font-size: 32px;

    }


    .blogFinalCTADescription {

        font-size: 8px;

    }


    .blogFinalCTAWords span,
    .blogFinalCTAWords strong {

        font-size: 18px;

    }


    .blogFinalCTAWords strong {

        font-size: 24px;

    }


    .blogFinalCTAStatement p {

        font-size: 11px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .blogFinalCTAContainer {

        width: calc(100% - 22px);

    }


    .blogFinalCTAFrame {

        padding-left: 15px;

    }


    .blogFinalCTAContent h2 {

        font-size: 29px;

    }


    .blogFinalCTAWords {

        grid-template-columns: 1fr;

    }


    .blogFinalCTABottom {

        flex-direction: column;

        align-items: flex-start;

    }


    .blogFinalCTABottom i {

        display: none;

    }

}

/* CTA Section Ends Here */

/* Blogs Page Ends Here */


/* Blogs-1 Page Starts Here */

/* Hero Section Starts Here */

/* =========================================================
   BLOG ARTICLE HERO
========================================================= */

.articleHero {

    width: 100%;

    padding: 85px 0 70px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.articleHeroContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   TOP META
========================================================= */

.articleHeroTop {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom: 22px;

    border-bottom: 1px solid rgba(197,154,50,.15);

}


.articleHeroCategory {

    display: flex;

    align-items: center;

    gap: 9px;

}


.articleHeroCategory span {

    color: var(--text);

    opacity: .38;

    font-size: 8px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.articleHeroCategory span:first-child {

    color: #c59a32;

    opacity: 1;

}


.articleHeroCategory i {

    color: #c59a32;

    opacity: .45;

    font-size: 8px;

    font-style: normal;

}


.articleHeroPublication {

    color: var(--text);

    opacity: .25;

    font-size: 8.5px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.15px;

}


.articleHeroPublication span {

    margin: 0 6px;

    color: #c59a32;

    opacity: .7;

}


/* =========================================================
   MAIN GRID
========================================================= */

.articleHeroGrid {

    display: grid;

    grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr);

    gap: 95px;

    padding: 90px 0 80px;

}


/* =========================================================
   LEFT CONTENT
========================================================= */

.articleHeroContent {

    max-width: 760px;

}


.articleHeroIndex {

    margin-bottom: 23px;

    color: #c59a32;

    font-size: 7px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.3px;

}


.articleHeroContent h1 {

    max-width: 760px;

    margin: 0;

    color: var(--primary);

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(52px, 6vw, 78px);

    line-height: 1.02;

    letter-spacing: -3px;

    font-weight: 400;

}


/* =========================================================
   INTRO
========================================================= */

.articleHeroIntro {

    max-width: 650px;

    margin-top: 32px;

    padding-left: 22px;

    border-left: 1px solid rgba(197,154,50,.35);

}


.articleHeroIntro p {

    margin: 0;

    color: var(--text);

    opacity: .53;

    font-size: 12.5px;

    line-height: 1.95;

}


.articleHeroIntro p + p {

    margin-top: 13px;

    opacity: .38;

}


/* =========================================================
   ARTICLE META
========================================================= */

.articleHeroMeta {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: 31px;

}


.articleHeroMeta time,
.articleHeroMeta strong {

    color: var(--text);

    opacity: .3;

    font-size: 8.5px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.articleHeroMeta strong {

    color: #c59a32;

    opacity: 1;

}


.articleHeroMeta span {

    width: 24px;

    height: 1px;

    background: rgba(197,154,50,.4);

}


/* =========================================================
   TOPIC TAGS
========================================================= */

.articleHeroTopics {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 27px;

}


.articleHeroTopics span {

    padding: 6px 9px;

    border: 1px solid rgba(197,154,50,.16);

    color: var(--text);

    opacity: .38;

    font-size: 7px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: .9px;

}


/* =========================================================
   RIGHT EDITORIAL VISUAL
========================================================= */

.articleHeroVisual {

    position: relative;

    min-height: 475px;

    padding: 38px 35px;

    border-left: 1px solid rgba(197,154,50,.2);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    box-sizing: border-box;

}


.articleHeroVisual::before {

    content: "";

    position: absolute;

    top: 0;

    left: -1px;

    width: 1px;

    height: 105px;

    background: #c59a32;

}


/* =========================================================
   BIG NUMBER
========================================================= */

.articleHeroVisualNumber {

    color: var(--primary);

    opacity: .12;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(90px, 10vw, 145px);

    line-height: .7;

    letter-spacing: -7px;

}


/* =========================================================
   STATEMENT
========================================================= */

.articleHeroStatement {

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.articleHeroStatement span {

    color: var(--primary);

    opacity: .38;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(27px, 3vw, 39px);

    line-height: 1;

    letter-spacing: -1px;

}


.articleHeroStatement strong {

    color: #c59a32;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(38px, 4vw, 52px);

    line-height: .9;

    font-weight: 400;

}


/* =========================================================
   VISUAL LINE
========================================================= */

.articleHeroVisualLine {

    width: 100%;

    height: 1px;

    background: rgba(197,154,50,.18);

}


/* =========================================================
   VISUAL CAPTION
========================================================= */

.articleHeroVisualCaption {

    max-width: 250px;

    color: var(--text);

    opacity: .27;

    font-size: 8.5px;

    line-height: 1.7;

    font-weight: 700;

    letter-spacing: 1px;

}


/* =========================================================
   BOTTOM MARKER
========================================================= */

.articleHeroBottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 18px;

    border-top: 1px solid rgba(197,154,50,.12);

}


.articleHeroBottom span {

    color: var(--text);

    opacity: .22;

    font-size: 8px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1px;

}


.articleHeroBottom span:last-child {

    color: #c59a32;

    opacity: .7;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .articleHero {

        padding: 70px 0 60px;

    }


    .articleHeroGrid {

        grid-template-columns: minmax(0, 1.1fr) minmax(260px, .7fr);

        gap: 55px;

        padding: 70px 0 65px;

    }


    .articleHeroContent h1 {

        font-size: clamp(45px, 6vw, 63px);

        letter-spacing: -2px;

    }


    .articleHeroVisual {

        min-height: 400px;

        padding: 30px 25px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .articleHero {

        padding: 55px 0 50px;

    }


    .articleHeroContainer {

        width: calc(100% - 30px);

    }


    .articleHeroTop {

        align-items: flex-start;

        flex-direction: column;

        gap: 10px;

        padding-bottom: 18px;

    }


    .articleHeroPublication {

        font-size: 8.5px;

    }


    .articleHeroGrid {

        display: block;

        padding: 52px 0 45px;

    }


    .articleHeroContent h1 {

        font-size: clamp(39px, 11vw, 55px);

        line-height: 1.04;

        letter-spacing: -1.5px;

    }


    .articleHeroIntro {

        margin-top: 24px;

        padding-left: 16px;

    }


    .articleHeroIntro p {

        font-size: 11px;

        line-height: 1.85;

    }


    .articleHeroMeta {

        margin-top: 24px;

    }


    .articleHeroTopics {

        margin-top: 21px;

    }


    /* ---------------------------------------------
       RIGHT EDITORIAL BLOCK
    ---------------------------------------------- */

    .articleHeroVisual {

        min-height: 350px;

        margin-top: 55px;

        padding: 28px 20px;

        border-left: none;

        border-top: 1px solid rgba(197,154,50,.16);

    }


    .articleHeroVisual::before {

        top: -1px;

        left: 0;

        width: 75px;

        height: 1px;

    }


    .articleHeroVisualNumber {

        font-size: 90px;

        letter-spacing: -4px;

    }


    .articleHeroStatement span {

        font-size: 27px;

    }


    .articleHeroStatement strong {

        font-size: 38px;

    }


    .articleHeroBottom {

        align-items: flex-start;

        flex-direction: column;

        gap: 7px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .articleHero {

        padding: 48px 0 43px;

    }


    .articleHeroContainer {

        width: calc(100% - 26px);

    }


    .articleHeroGrid {

        padding-top: 45px;

    }


    .articleHeroContent h1 {

        font-size: 36px;

        letter-spacing: -1px;

    }


    .articleHeroIntro p {

        font-size: 9px;

    }


    .articleHeroTopics span {

        font-size: 6.5px;

    }


    .articleHeroVisual {

        min-height: 320px;

    }


    .articleHeroStatement span {

        font-size: 24px;

    }


    .articleHeroStatement strong {

        font-size: 34px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .articleHeroContainer {

        width: calc(100% - 22px);

    }


    .articleHeroContent h1 {

        font-size: 33px;

    }


    .articleHeroTopics {

        flex-direction: column;

        align-items: flex-start;

    }


    .articleHeroVisual {

        min-height: 290px;

    }

}

/* Hero Section Ends Here */

/* Main Section Starts Here */

 /* =========================================================
    2. MAIN ARTICLE
========================================================= */

.articleMain {

    width: 100%;

    padding: 125px 0 135px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.articleMainContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   ARTICLE SECTION HEADER
========================================================= */

.articleMainHeader {

    display: grid;

    grid-template-columns: 150px minmax(0, 760px);

    gap: 55px;

    margin-bottom: 75px;

}


.articleMainSectionNo {

    color: #c59a32;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 58px;

    line-height: 1;

    letter-spacing: -2px;

}


.articleMainHeaderContent {

    max-width: 760px;

}


.articleMainKicker {

    display: block;

    margin-bottom: 20px;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.4px;

}


.articleMainHeaderContent h2 {

    margin: 0;

    color: var(--primary);

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(42px, 5vw, 66px);

    line-height: 1.05;

    letter-spacing: -2.4px;

    font-weight: 400;

}


.articleMainHeaderRule {

    width: 95px;

    height: 1px;

    margin-top: 29px;

    background: #c59a32;

}


/* =========================================================
   READING AREA
========================================================= */

.articleReadingArea {

    width: min(720px, 100%);

    margin-left: 205px;

}


/* =========================================================
   BODY TEXT
========================================================= */

.articleReadingArea p {

    margin: 0 0 21px;

    color: var(--text);

    opacity: .62;

    font-size: 17px;

    line-height: 1.9;

    font-weight: 400;

}


.articleReadingArea .articleLead {

    margin-bottom: 27px;

    color: var(--primary);

    opacity: .78;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 21px;

    line-height: 1.7;

}


/* =========================================================
   ARTICLE POINT
========================================================= */

.articlePoint {

    display: grid;

    grid-template-columns: 115px minmax(0, 1fr);

    gap: 35px;

    margin-top: 90px;

    padding-top: 28px;

    border-top: 1px solid rgba(197,154,50,.17);

}


.articlePointMeta {

    display: flex;

    flex-direction: column;

    gap: 11px;

}


.articlePointMeta span {

    color: #c59a32;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 31px;

    line-height: 1;

}


.articlePointMeta small {

    color: var(--text);

    opacity: .32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.15px;

}


.articlePointContent h3 {

    margin: 0 0 24px;

    color: var(--primary);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 32px;

    line-height: 1.15;

    letter-spacing: -.7px;

    font-weight: 400;

}


.articlePointContent p {

    margin-bottom: 19px;

    font-size: 16px;

    line-height: 1.9;

    opacity: .58;

}


/* =========================================================
   END MARK
========================================================= */

.articleEndMark {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 95px;

}


.articleEndMark span {

    width: 45px;

    height: 1px;

    background: rgba(197,154,50,.4);

}


.articleEndMark strong {

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.3px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .articleMain {

        padding: 100px 0 110px;

    }


    .articleMainHeader {

        grid-template-columns: 90px minmax(0, 1fr);

        gap: 35px;

        margin-bottom: 60px;

    }


    .articleMainSectionNo {

        font-size: 48px;

    }


    .articleReadingArea {

        margin-left: 125px;

        width: min(650px, calc(100% - 125px));

    }


    .articlePoint {

        grid-template-columns: 85px minmax(0, 1fr);

        gap: 25px;

    }


    .articlePointContent h3 {

        font-size: 29px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .articleMain {

        padding: 75px 0 85px;

    }


    .articleMainContainer {

        width: calc(100% - 30px);

    }


    .articleMainHeader {

        display: block;

        margin-bottom: 48px;

    }


    .articleMainSectionNo {

        margin-bottom: 19px;

        font-size: 42px;

    }


    .articleMainKicker {

        font-size: 9px;

        margin-bottom: 15px;

    }


    .articleMainHeaderContent h2 {

        font-size: clamp(35px, 9.8vw, 48px);

        line-height: 1.07;

        letter-spacing: -1.2px;

    }


    .articleReadingArea {

        width: 100%;

        margin-left: 0;

    }


    .articleReadingArea p {

        font-size: 16px;

        line-height: 1.85;

        margin-bottom: 20px;

    }


    .articleReadingArea .articleLead {

        font-size: 19px;

        line-height: 1.7;

    }


    .articlePoint {

        display: block;

        margin-top: 65px;

        padding-top: 23px;

    }


    .articlePointMeta {

        display: flex;

        flex-direction: row;

        align-items: center;

        gap: 12px;

        margin-bottom: 20px;

    }


    .articlePointMeta span {

        font-size: 25px;

    }


    .articlePointMeta small {

        font-size: 9px;

    }


    .articlePointContent h3 {

        margin-bottom: 18px;

        font-size: 28px;

        line-height: 1.18;

    }


    .articlePointContent p {

        font-size: 15px;

        line-height: 1.85;

    }


    .articleEndMark {

        margin-top: 70px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .articleMain {

        padding: 62px 0 70px;

    }


    .articleMainContainer {

        width: calc(100% - 26px);

    }


    .articleMainHeaderContent h2 {

        font-size: 33px;

    }


    .articleReadingArea p {

        font-size: 15px;

    }


    .articleReadingArea .articleLead {

        font-size: 18px;

    }


    .articlePoint {

        margin-top: 55px;

    }


    .articlePointContent h3 {

        font-size: 25px;

    }


    .articlePointContent p {

        font-size: 15px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .articleMainContainer {

        width: calc(100% - 22px);

    }


    .articleMainHeaderContent h2 {

        font-size: 31px;

    }


    .articleReadingArea p {

        font-size: 15px;

    }


    .articlePointContent h3 {

        font-size: 23px;

    }

}

/* Main Section Ends Here */

/* Key Section Starts Here */

/* =========================================================
   3. KEY CONSIDERATIONS BEFORE YOU INVEST
========================================================= */

.investmentConsiderations {

    width: 100%;

    padding: 135px 0 145px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.investmentConsiderationsContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   HEADER
========================================================= */

.investmentConsiderationsHeader {

    display: grid;

    grid-template-columns: 150px minmax(0, 760px);

    gap: 55px;

    margin-bottom: 85px;

}


.investmentConsiderationsNumber {

    color: #c59a32;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 58px;

    line-height: 1;

    letter-spacing: -2px;

}


.investmentConsiderationsHeading {

    max-width: 760px;

}


.investmentConsiderationsHeading > span {

    display: block;

    margin-bottom: 20px;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.4px;

}


.investmentConsiderationsHeading h2 {

    margin: 0;

    color: var(--primary);

    font-size: clamp(45px, 5.2vw, 68px);

    line-height: 1;

    letter-spacing: -2.7px;

    font-weight: 600;

}


.investmentConsiderationsHeading h2 em {

    display: block;

    color: #c59a32;

    font-family: Georgia, "Times New Roman", serif;

    font-weight: 400;

    font-style: italic;

    letter-spacing: -2px;

}


.investmentConsiderationsHeading p {

    max-width: 610px;

    margin: 27px 0 0;

    color: var(--text);

    opacity: .5;

    font-size: 10px;

    line-height: 1.9;

}


/* =========================================================
   CONSIDERATION LIST
========================================================= */

.investmentConsiderationsList {

    border-top: 1px solid rgba(197,154,50,.2);

}


/* =========================================================
   INDIVIDUAL CONSIDERATION
========================================================= */

.investmentConsideration {

    display: grid;

    grid-template-columns: 150px minmax(0, 690px);

    gap: 55px;

    padding: 42px 0 46px;

    border-bottom: 1px solid rgba(197,154,50,.14);

    transition: padding-left .3s ease;

}


.investmentConsideration:hover {

    padding-left: 12px;

}


/* =========================================================
   NUMBER
========================================================= */

.investmentConsiderationNumber {

    padding-top: 3px;

    color: var(--primary);

    opacity: .24;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 31px;

    line-height: 1;

    letter-spacing: -1px;

    transition: color .25s ease,
                opacity .25s ease;

}


.investmentConsideration:hover
.investmentConsiderationNumber {

    color: #c59a32;

    opacity: 1;

}


/* =========================================================
   CONTENT
========================================================= */

.investmentConsiderationContent {

    max-width: 690px;

}


.investmentConsiderationCategory {

    display: block;

    margin-bottom: 14px;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.2px;

}


.investmentConsiderationContent h3 {

    max-width: 650px;

    margin: 0;

    color: var(--primary);

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(28px, 3vw, 39px);

    line-height: 1.12;

    letter-spacing: -.8px;

    font-weight: 400;

}


.investmentConsiderationContent p {

    max-width: 610px;

    margin: 16px 0 0;

    color: var(--text);

    opacity: .5;

    font-size: 16px;

    line-height: 1.85;

}


/* =========================================================
   BOTTOM STATEMENT
========================================================= */

.investmentConsiderationsStatement {

    display: grid;

    grid-template-columns: 80px minmax(0, 1fr);

    column-gap: 28px;

    margin-top: 110px;

}


.investmentStatementRule {

    width: 1px;

    min-height: 235px;

    background: #c59a32;

}


.investmentConsiderationsStatement p {

    margin: 0;

    color: var(--primary);

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(37px, 5vw, 64px);

    line-height: 1.03;

    letter-spacing: -2px;

    font-weight: 400;

}


.investmentConsiderationsStatement p strong {

    color: #c59a32;

    font-weight: 400;

}


.investmentStatementMeta {

    grid-column: 2;

    margin-top: 25px;

    color: var(--text);

    opacity: .25;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.2px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .investmentConsiderations {

        padding: 105px 0 115px;

    }


    .investmentConsiderationsHeader {

        grid-template-columns: 85px minmax(0, 1fr);

        gap: 35px;

        margin-bottom: 65px;

    }


    .investmentConsiderationsNumber {

        font-size: 48px;

    }


    .investmentConsideration {

        grid-template-columns: 85px minmax(0, 1fr);

        gap: 30px;

    }


    .investmentConsiderationContent h3 {

        font-size: 31px;

    }


    .investmentConsiderationsStatement {

        grid-template-columns: 45px minmax(0, 1fr);

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .investmentConsiderations {

        padding: 75px 0 85px;

    }


    .investmentConsiderationsContainer {

        width: calc(100% - 30px);

    }


    .investmentConsiderationsHeader {

        display: block;

        margin-bottom: 48px;

    }


    .investmentConsiderationsNumber {

        margin-bottom: 20px;

        font-size: 42px;

    }


    .investmentConsiderationsHeading > span {

        font-size: 9px;

        margin-bottom: 15px;

    }


    .investmentConsiderationsHeading h2 {

        font-size: clamp(36px, 10vw, 48px);

        line-height: 1.03;

        letter-spacing: -1.5px;

    }


    .investmentConsiderationsHeading h2 em {

        letter-spacing: -1px;

    }


    .investmentConsiderationsHeading p {

        margin-top: 20px;

        font-size: 9px;

        line-height: 1.85;

    }


    /* ---------------------------------------------
       CONSIDERATIONS
    ---------------------------------------------- */

    .investmentConsideration {

        display: block;

        padding: 31px 0 34px;

    }


    .investmentConsideration:hover {

        padding-left: 0;

    }


    .investmentConsiderationNumber {

        display: inline-block;

        margin: 0 0 15px;

        font-size: 25px;

    }


    .investmentConsiderationCategory {

        display: inline-block;

        margin-left: 10px;

        margin-bottom: 15px;

        font-size: 9px;

        vertical-align: 3px;

    }


    .investmentConsiderationContent h3 {

        font-size: 27px;

        line-height: 1.14;

    }


    .investmentConsiderationContent p {

        margin-top: 13px;

        font-size: 15px;

        line-height: 1.85;

    }


    /* ---------------------------------------------
       STATEMENT
    ---------------------------------------------- */

    .investmentConsiderationsStatement {

        display: block;

        margin-top: 70px;

        padding-left: 20px;

        border-left: 1px solid #c59a32;

    }


    .investmentStatementRule {

        display: none;

    }


    .investmentConsiderationsStatement p {

        font-size: clamp(32px, 9vw, 43px);

        line-height: 1.04;

        letter-spacing: -1.2px;

    }


    .investmentStatementMeta {

        margin-top: 23px;

        font-size: 9px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .investmentConsiderations {

        padding: 62px 0 70px;

    }


    .investmentConsiderationsContainer {

        width: calc(100% - 26px);

    }


    .investmentConsiderationsHeading h2 {

        font-size: 34px;

    }


    .investmentConsiderationContent h3 {

        font-size: 25px;

    }


    .investmentConsiderationContent p {

        font-size: 15px;

    }


    .investmentConsiderationsStatement p {

        font-size: 31px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .investmentConsiderationsContainer {

        width: calc(100% - 22px);

    }


    .investmentConsiderationCategory {

        display: block;

        margin-left: 0;

    }


    .investmentConsiderationsStatement p {

        font-size: 29px;

    }

}

/* Key Section Ends Here */

/* CTA Section Starts Here */

/* =========================================================
   4. FINAL ARTICLE CTA + RELATED INSIGHTS
========================================================= */

.articleFinal {

    width: 100%;

    padding: 125px 0 50px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.articleFinalContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   MAIN GRID
========================================================= */

.articleFinalGrid {

    display: grid;

    grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr);

    gap: 90px;

    padding: 65px 0 75px;

    border-top: 1px solid rgba(197,154,50,.16);

    border-bottom: 1px solid rgba(197,154,50,.16);

}


/* =========================================================
   LEFT CTA
========================================================= */

.articleFinalContent {

    max-width: 700px;

}


.articleFinalPrefix {

    display: block;

    margin-bottom: 21px;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.4px;

}


.articleFinalContent h2 {

    margin: 0;

    color: var(--primary);

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(44px, 5vw, 67px);

    line-height: 1.02;

    letter-spacing: -2.5px;

    font-weight: 400;

}


.articleFinalContent h2 em {

    display: block;

    color: #c59a32;

    font-weight: 400;

    font-style: italic;

}


.articleFinalDescription {

    max-width: 610px;

    margin: 28px 0 0;

    color: var(--text);

    opacity: .55;

    font-size: 16px;

    line-height: 1.9;

}


.articleFinalDescription + .articleFinalDescription {

    margin-top: 16px;

    opacity: .42;

}


/* =========================================================
   BUTTONS
========================================================= */

.articleFinalActions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 34px;

}


.articleFinalActions .themeBtn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    min-height: 49px;

    padding: 0 23px;

    text-decoration: none;

    box-sizing: border-box;

}


.articleFinalActions .themeBtn span,
.articleFinalSecondary span {

    transition: transform .25s ease;

}


.articleFinalActions .themeBtn:hover span,
.articleFinalSecondary:hover span {

    transform: translate(3px, -3px);

}


.articleFinalSecondary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    min-height: 49px;

    padding: 0 23px;

    border: 1px solid rgba(197,154,50,.3);

    color: var(--primary);

    text-decoration: none;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: .5px;

    transition:
        border-color .25s ease,
        background .25s ease;

}


.articleFinalSecondary:hover {

    border-color: #c59a32;

    background: rgba(197,154,50,.035);

}


/* =========================================================
   RELATED INSIGHTS
========================================================= */

.articleRelated {

    padding-left: 45px;

    border-left: 1px solid rgba(197,154,50,.17);

}


.articleRelatedTop {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    padding-bottom: 17px;

    border-bottom: 1px solid rgba(197,154,50,.15);

}


.articleRelatedTop span {

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.3px;

}


.articleRelatedTop small {

    color: var(--text);

    opacity: .25;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: .8px;

}


/* =========================================================
   RELATED LIST
========================================================= */

.articleRelatedList {

    width: 100%;

}


.articleRelatedItem {

    display: grid;

    grid-template-columns: 42px minmax(0, 1fr);

    gap: 17px;

    padding: 27px 0 29px;

    border-bottom: 1px solid rgba(197,154,50,.13);

    color: inherit;

    text-decoration: none;

    transition: padding-left .25s ease;

}


.articleRelatedItem:hover {

    padding-left: 7px;

}


.articleRelatedNumber {

    color: var(--primary);

    opacity: .25;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 23px;

    line-height: 1;

}


.articleRelatedContent {

    min-width: 0;

}


.articleRelatedMeta {

    display: flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 11px;

}


.articleRelatedMeta span {

    color: var(--text);

    opacity: .32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1px;

}


.articleRelatedMeta span:first-child {

    color: #c59a32;

    opacity: 1;

}


.articleRelatedMeta i {

    color: #c59a32;

    opacity: .5;

    font-size: 9px;

    font-style: normal;

}


.articleRelatedContent h3 {

    margin: 0;

    color: var(--primary);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 21px;

    line-height: 1.25;

    letter-spacing: -.3px;

    font-weight: 400;

}


.articleRelatedLink {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 17px;

    color: var(--primary);

    opacity: .45;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: .6px;

    transition: color .25s ease,
                opacity .25s ease;

}


.articleRelatedItem:hover .articleRelatedLink {

    color: #c59a32;

    opacity: 1;

}


.articleRelatedLink span {

    color: #c59a32;

}


/* =========================================================
   BOTTOM LINE
========================================================= */

.articleFinalBottom {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 10px;

    padding-top: 22px;

}


.articleFinalBottom span,
.articleFinalBottom strong {

    color: var(--text);

    opacity: .28;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.articleFinalBottom strong {

    color: #c59a32;

    opacity: 1;

}


.articleFinalBottom i {

    color: #c59a32;

    opacity: .45;

    font-size: 9px;

    font-style: normal;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .articleFinal {

        padding: 100px 0 45px;

    }


    .articleFinalGrid {

        grid-template-columns: minmax(0, 1fr) 300px;

        gap: 50px;

    }


    .articleFinalContent h2 {

        font-size: clamp(40px, 5.5vw, 56px);

    }


    .articleRelated {

        padding-left: 30px;

    }


    .articleRelatedContent h3 {

        font-size: 19px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .articleFinal {

        padding: 75px 0 35px;

    }


    .articleFinalContainer {

        width: calc(100% - 30px);

    }


    .articleFinalGrid {

        display: block;

        padding: 48px 0 50px;

    }


    .articleFinalContent h2 {

        font-size: clamp(36px, 10vw, 48px);

        line-height: 1.05;

        letter-spacing: -1.2px;

    }


    .articleFinalDescription {

        margin-top: 21px;

        font-size: 15px;

        line-height: 1.85;

    }


    .articleFinalDescription + .articleFinalDescription {

        margin-top: 13px;

    }


    .articleFinalActions {

        flex-direction: column;

        align-items: stretch;

        margin-top: 28px;

        gap: 8px;

    }


    .articleFinalActions .themeBtn,
    .articleFinalSecondary {

        width: 100%;

        min-height: 47px;

    }


    /* ---------------------------------------------
       RELATED ARTICLES
    ---------------------------------------------- */

    .articleRelated {

        margin-top: 55px;

        padding: 32px 0 0;

        border-left: none;

        border-top: 1px solid rgba(197,154,50,.17);

    }


    .articleRelatedTop {

        flex-direction: column;

        gap: 8px;

    }


    .articleRelatedTop span {

        font-size: 9px;

    }


    .articleRelatedTop small {

        font-size: 9px;

    }


    .articleRelatedItem {

        grid-template-columns: 36px minmax(0, 1fr);

        gap: 14px;

        padding: 24px 0 26px;

    }


    .articleRelatedItem:hover {

        padding-left: 0;

    }


    .articleRelatedNumber {

        font-size: 21px;

    }


    .articleRelatedContent h3 {

        font-size: 19px;

        line-height: 1.3;

    }


    .articleRelatedMeta span {

        font-size: 9px;

    }


    .articleRelatedLink {

        font-size: 9px;

    }


    /* ---------------------------------------------
       BOTTOM
    ---------------------------------------------- */

    .articleFinalBottom {

        justify-content: flex-start;

        flex-wrap: wrap;

        gap: 7px;

    }


    .articleFinalBottom span,
    .articleFinalBottom strong {

        font-size: 9px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .articleFinal {

        padding: 62px 0 30px;

    }


    .articleFinalContainer {

        width: calc(100% - 26px);

    }


    .articleFinalContent h2 {

        font-size: 34px;

    }


    .articleFinalDescription {

        font-size: 15px;

    }


    .articleRelatedContent h3 {

        font-size: 18px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .articleFinalContainer {

        width: calc(100% - 22px);

    }


    .articleFinalContent h2 {

        font-size: 32px;

    }


    .articleFinalBottom {

        flex-direction: column;

        align-items: flex-start;

    }


    .articleFinalBottom i {

        display: none;

    }

}

/* CTA Section Ends Here */

/* Blogs-1 Page Ends Here */


/* Blogs-2 Page Starts Here */

/* Hero Section Starts Here */

/* =========================================================
   BLOG ARTICLE HERO — TAX PLANNING
========================================================= */

.taxArticleHero {

    width: 100%;

    padding: 85px 0 70px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.taxArticleHeroContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   TOP META
========================================================= */

.taxArticleHeroTop {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom: 22px;

    border-bottom: 1px solid rgba(197,154,50,.15);

}


.taxArticleHeroCategory {

    display: flex;

    align-items: center;

    gap: 9px;

}


.taxArticleHeroCategory span {

    color: var(--text);

    opacity: .38;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.taxArticleHeroCategory span:first-child {

    color: #c59a32;

    opacity: 1;

}


.taxArticleHeroCategory i {

    color: #c59a32;

    opacity: .45;

    font-size: 9px;

    font-style: normal;

}


.taxArticleHeroPublication {

    color: var(--text);

    opacity: .25;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.15px;

}


.taxArticleHeroPublication span {

    margin: 0 6px;

    color: #c59a32;

    opacity: .7;

}


/* =========================================================
   MAIN HERO GRID
========================================================= */

.taxArticleHeroGrid {

    display: grid;

    grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr);

    gap: 95px;

    padding: 90px 0 80px;

}


/* =========================================================
   LEFT CONTENT
========================================================= */

.taxArticleHeroContent {

    max-width: 760px;

}


.taxArticleHeroIndex {

    margin-bottom: 23px;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.3px;

}


.taxArticleHeroContent h1 {

    max-width: 760px;

    margin: 0;

    color: var(--primary);

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(49px, 5.8vw, 76px);

    line-height: 1.02;

    letter-spacing: -2.8px;

    font-weight: 400;

}


/* =========================================================
   INTRO
========================================================= */

.taxArticleHeroIntro {

    max-width: 650px;

    margin-top: 32px;

    padding-left: 22px;

    border-left: 1px solid rgba(197,154,50,.35);

}


.taxArticleHeroIntro p {

    margin: 0;

    color: var(--text);

    opacity: .53;

    font-size: 16px;

    line-height: 1.9;

}


.taxArticleHeroIntro p + p {

    margin-top: 14px;

    opacity: .38;

}


/* =========================================================
   ARTICLE META
========================================================= */

.taxArticleHeroMeta {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: 31px;

}


.taxArticleHeroMeta time,
.taxArticleHeroMeta strong {

    color: var(--text);

    opacity: .3;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.taxArticleHeroMeta strong {

    color: #c59a32;

    opacity: 1;

}


.taxArticleHeroMeta > span {

    width: 24px;

    height: 1px;

    background: rgba(197,154,50,.4);

}


/* =========================================================
   TOPIC TAGS
========================================================= */

.taxArticleHeroTopics {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 27px;

}


.taxArticleHeroTopics span {

    padding: 7px 10px;

    border: 1px solid rgba(197,154,50,.16);

    color: var(--text);

    opacity: .38;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: .9px;

}


/* =========================================================
   RIGHT EDITORIAL COMPOSITION
========================================================= */

.taxArticleHeroVisual {

    position: relative;

    min-height: 500px;

    padding: 38px 35px;

    border-left: 1px solid rgba(197,154,50,.18);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    box-sizing: border-box;

}


.taxArticleHeroVisual::before {

    content: "";

    position: absolute;

    top: 0;

    left: -1px;

    width: 1px;

    height: 110px;

    background: #c59a32;

}


/* =========================================================
   LARGE NUMBER
========================================================= */

.taxArticleHeroNumber {

    color: var(--primary);

    opacity: .10;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(100px, 11vw, 155px);

    line-height: .7;

    letter-spacing: -8px;

}


/* =========================================================
   EFFICIENCY / ALIGNMENT
========================================================= */

.taxArticleHeroWords {

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.taxArticleHeroWords span {

    color: #c59a32;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(29px, 3.2vw, 43px);

    line-height: 1;

    letter-spacing: -1.1px;

}


.taxArticleHeroWords i {

    color: var(--text);

    opacity: .25;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 25px;

    line-height: 1;

    font-style: normal;

}


.taxArticleHeroWords strong {

    color: var(--primary);

    opacity: .34;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(29px, 3.2vw, 43px);

    line-height: 1;

    letter-spacing: -1.1px;

    font-weight: 400;

}


/* =========================================================
   DIVIDER
========================================================= */

.taxArticleHeroDivider {

    width: 100%;

    height: 1px;

    background: rgba(197,154,50,.17);

}


/* =========================================================
   SMALL METADATA
========================================================= */

.taxArticleHeroSmallType {

    color: var(--text);

    opacity: .28;

    font-size: 9px;

    line-height: 1.6;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.taxArticleHeroSmallType span {

    margin: 0 6px;

    color: #c59a32;

    opacity: .6;

}


/* =========================================================
   PLAN WITH PURPOSE
========================================================= */

.taxArticleHeroBottomText {

    display: flex;

    flex-direction: column;

    color: var(--primary);

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(31px, 3.5vw, 47px);

    line-height: .95;

    letter-spacing: -1px;

}


.taxArticleHeroBottomText span {

    padding-left: 28px;

    color: var(--text);

    opacity: .25;

    font-size: 17px;

    line-height: 1.4;

    letter-spacing: 1px;

}


/* =========================================================
   BOTTOM MARKER
========================================================= */

.taxArticleHeroBottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 19px;

    border-top: 1px solid rgba(197,154,50,.12);

}


.taxArticleHeroBottom > span {

    color: var(--text);

    opacity: .22;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1px;

}


.taxArticleHeroBottom > div {

    display: flex;

    align-items: center;

    gap: 9px;

}


.taxArticleHeroBottom > div span,
.taxArticleHeroBottom > div strong {

    color: var(--text);

    opacity: .28;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1px;

}


.taxArticleHeroBottom > div strong {

    color: #c59a32;

    opacity: 1;

}


.taxArticleHeroBottom i {

    color: #c59a32;

    opacity: .45;

    font-size: 9px;

    font-style: normal;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .taxArticleHero {

        padding: 70px 0 60px;

    }


    .taxArticleHeroGrid {

        grid-template-columns: minmax(0, 1.1fr) minmax(260px, .7fr);

        gap: 55px;

        padding: 70px 0 65px;

    }


    .taxArticleHeroContent h1 {

        font-size: clamp(43px, 5.8vw, 61px);

        letter-spacing: -2px;

    }


    .taxArticleHeroVisual {

        min-height: 420px;

        padding: 30px 25px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .taxArticleHero {

        padding: 55px 0 50px;

    }


    .taxArticleHeroContainer {

        width: calc(100% - 30px);

    }


    .taxArticleHeroTop {

        align-items: flex-start;

        flex-direction: column;

        gap: 10px;

        padding-bottom: 18px;

    }


    .taxArticleHeroGrid {

        display: block;

        padding: 52px 0 45px;

    }


    .taxArticleHeroContent h1 {

        font-size: clamp(37px, 10.5vw, 53px);

        line-height: 1.04;

        letter-spacing: -1.3px;

    }


    .taxArticleHeroIntro {

        margin-top: 25px;

        padding-left: 16px;

    }


    .taxArticleHeroIntro p {

        font-size: 15px;

        line-height: 1.85;

    }


    .taxArticleHeroMeta {

        margin-top: 24px;

    }


    .taxArticleHeroTopics {

        margin-top: 21px;

    }


    /* ---------------------------------------------
       RIGHT COMPOSITION
    ---------------------------------------------- */

    .taxArticleHeroVisual {

        min-height: 390px;

        margin-top: 55px;

        padding: 30px 20px;

        border-left: none;

        border-top: 1px solid rgba(197,154,50,.16);

    }


    .taxArticleHeroVisual::before {

        top: -1px;

        left: 0;

        width: 75px;

        height: 1px;

    }


    .taxArticleHeroNumber {

        font-size: 95px;

        letter-spacing: -5px;

    }


    .taxArticleHeroWords span,
    .taxArticleHeroWords strong {

        font-size: 29px;

    }


    .taxArticleHeroBottomText {

        font-size: 32px;

    }


    .taxArticleHeroBottomText span {

        font-size: 15px;

    }


    .taxArticleHeroBottom {

        align-items: flex-start;

        flex-direction: column;

        gap: 13px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .taxArticleHero {

        padding: 48px 0 43px;

    }


    .taxArticleHeroContainer {

        width: calc(100% - 26px);

    }


    .taxArticleHeroContent h1 {

        font-size: 35px;

    }


    .taxArticleHeroIntro p {

        font-size: 15px;

    }


    .taxArticleHeroTopics span {

        font-size: 9px;

    }


    .taxArticleHeroVisual {

        min-height: 350px;

    }


    .taxArticleHeroWords span,
    .taxArticleHeroWords strong {

        font-size: 26px;

    }


    .taxArticleHeroBottomText {

        font-size: 29px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .taxArticleHeroContainer {

        width: calc(100% - 22px);

    }


    .taxArticleHeroContent h1 {

        font-size: 33px;

    }


    .taxArticleHeroTopics {

        flex-direction: column;

        align-items: flex-start;

    }


    .taxArticleHeroVisual {

        min-height: 320px;

    }


    .taxArticleHeroBottom > div {

        flex-wrap: wrap;

    }

}

/* Hero Section Ends Here */

/* Main Section Starts Here */

/* =========================================================
   2. MAIN ARTICLE — TAX PLANNING
========================================================= */

.taxArticleMain {

    width: 100%;

    padding: 125px 0 135px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.taxArticleMainContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   SECTION HEADER
========================================================= */

.taxArticleMainHeader {

    display: grid;

    grid-template-columns: 150px minmax(0, 760px);

    gap: 55px;

    margin-bottom: 75px;

}


.taxArticleMainNumber {

    color: #c59a32;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 58px;

    line-height: 1;

    letter-spacing: -2px;

}


.taxArticleMainHeaderContent {

    max-width: 760px;

}


.taxArticleMainKicker {

    display: block;

    margin-bottom: 20px;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.35px;

}


.taxArticleMainHeaderContent h2 {

    margin: 0;

    color: var(--primary);

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(41px, 4.8vw, 63px);

    line-height: 1.05;

    letter-spacing: -2.2px;

    font-weight: 400;

}


.taxArticleMainRule {

    width: 95px;

    height: 1px;

    margin-top: 29px;

    background: #c59a32;

}


/* =========================================================
   READING AREA
========================================================= */

.taxArticleReadingArea {

    width: min(720px, 100%);

    margin-left: 205px;

}


/* =========================================================
   ARTICLE BODY
========================================================= */

.taxArticleReadingArea p {

    margin: 0 0 21px;

    color: var(--text);

    opacity: .62;

    font-size: 17px;

    line-height: 1.9;

    font-weight: 400;

}


.taxArticleReadingArea .taxArticleLead {

    margin-bottom: 27px;

    color: var(--primary);

    opacity: .78;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 21px;

    line-height: 1.7;

}


/* =========================================================
   ARTICLE POINT
========================================================= */

.taxArticlePoint {

    display: grid;

    grid-template-columns: 115px minmax(0, 1fr);

    gap: 35px;

    margin-top: 90px;

    padding-top: 28px;

    border-top: 1px solid rgba(197,154,50,.17);

}


/* =========================================================
   POINT META
========================================================= */

.taxArticlePointMeta {

    display: flex;

    flex-direction: column;

    gap: 11px;

}


.taxArticlePointMeta span {

    color: #c59a32;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 31px;

    line-height: 1;

}


.taxArticlePointMeta small {

    color: var(--text);

    opacity: .32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.15px;

}


/* =========================================================
   POINT CONTENT
========================================================= */

.taxArticlePointContent {

    max-width: 690px;

}


.taxArticlePointContent h3 {

    margin: 0 0 24px;

    color: var(--primary);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 32px;

    line-height: 1.15;

    letter-spacing: -.7px;

    font-weight: 400;

}


.taxArticlePointContent p {

    margin-bottom: 19px;

    font-size: 16px;

    line-height: 1.9;

    opacity: .58;

}


/* =========================================================
   END MARK
========================================================= */

.taxArticleEndMark {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 95px;

}


.taxArticleEndMark span {

    width: 45px;

    height: 1px;

    background: rgba(197,154,50,.4);

}


.taxArticleEndMark strong {

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.25px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .taxArticleMain {

        padding: 100px 0 110px;

    }


    .taxArticleMainHeader {

        grid-template-columns: 90px minmax(0, 1fr);

        gap: 35px;

        margin-bottom: 60px;

    }


    .taxArticleMainNumber {

        font-size: 48px;

    }


    .taxArticleReadingArea {

        margin-left: 125px;

        width: min(650px, calc(100% - 125px));

    }


    .taxArticlePoint {

        grid-template-columns: 85px minmax(0, 1fr);

        gap: 25px;

    }


    .taxArticlePointContent h3 {

        font-size: 29px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .taxArticleMain {

        padding: 75px 0 85px;

    }


    .taxArticleMainContainer {

        width: calc(100% - 30px);

    }


    .taxArticleMainHeader {

        display: block;

        margin-bottom: 48px;

    }


    .taxArticleMainNumber {

        margin-bottom: 19px;

        font-size: 42px;

    }


    .taxArticleMainKicker {

        font-size: 9px;

        margin-bottom: 15px;

    }


    .taxArticleMainHeaderContent h2 {

        font-size: clamp(34px, 9.5vw, 47px);

        line-height: 1.07;

        letter-spacing: -1.2px;

    }


    .taxArticleReadingArea {

        width: 100%;

        margin-left: 0;

    }


    .taxArticleReadingArea p {

        font-size: 16px;

        line-height: 1.85;

        margin-bottom: 20px;

    }


    .taxArticleReadingArea .taxArticleLead {

        font-size: 19px;

        line-height: 1.7;

    }


    /* ---------------------------------------------
       ARTICLE POINT
    ---------------------------------------------- */

    .taxArticlePoint {

        display: block;

        margin-top: 65px;

        padding-top: 23px;

    }


    .taxArticlePointMeta {

        display: flex;

        flex-direction: row;

        align-items: center;

        gap: 12px;

        margin-bottom: 20px;

    }


    .taxArticlePointMeta span {

        font-size: 25px;

    }


    .taxArticlePointMeta small {

        font-size: 9px;

    }


    .taxArticlePointContent h3 {

        margin-bottom: 18px;

        font-size: 28px;

        line-height: 1.18;

    }


    .taxArticlePointContent p {

        font-size: 15px;

        line-height: 1.85;

    }


    /* ---------------------------------------------
       END MARK
    ---------------------------------------------- */

    .taxArticleEndMark {

        margin-top: 70px;

        align-items: flex-start;

        flex-direction: column;

        gap: 12px;

    }


    .taxArticleEndMark span {

        width: 45px;

    }


    .taxArticleEndMark strong {

        font-size: 9px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .taxArticleMain {

        padding: 62px 0 70px;

    }


    .taxArticleMainContainer {

        width: calc(100% - 26px);

    }


    .taxArticleMainHeaderContent h2 {

        font-size: 33px;

    }


    .taxArticleReadingArea p {

        font-size: 15px;

    }


    .taxArticleReadingArea .taxArticleLead {

        font-size: 18px;

    }


    .taxArticlePoint {

        margin-top: 55px;

    }


    .taxArticlePointContent h3 {

        font-size: 25px;

    }


    .taxArticlePointContent p {

        font-size: 15px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .taxArticleMainContainer {

        width: calc(100% - 22px);

    }


    .taxArticleMainHeaderContent h2 {

        font-size: 31px;

    }


    .taxArticlePointContent h3 {

        font-size: 23px;

    }

}

/* Main Section Ends Here */

/* Key Section Starts Here */

/* =========================================================
   3. KEY TAX PLANNING CONSIDERATIONS
========================================================= */

.taxConsiderations {

    width: 100%;

    padding: 140px 0 150px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.taxConsiderationsContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   HEADER
========================================================= */

.taxConsiderationsHeader {

    display: grid;

    grid-template-columns: 170px minmax(0, 760px);

    gap: 60px;

    padding-bottom: 90px;

    border-bottom: 1px solid rgba(197,154,50,.16);

}


.taxConsiderationsHeaderMeta {

    display: flex;

    flex-direction: column;

    gap: 13px;

    padding-top: 4px;

}


.taxConsiderationsHeaderMeta span {

    color: #c59a32;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 56px;

    line-height: 1;

    letter-spacing: -2px;

}


.taxConsiderationsHeaderMeta small {

    color: var(--text);

    opacity: .28;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.taxConsiderationsHeaderContent {

    position: relative;

    padding-left: 28px;

    border-left: 1px solid rgba(197,154,50,.25);

}


.taxConsiderationsHeaderContent::before {

    content: "";

    position: absolute;

    left: -1px;

    top: 0;

    width: 1px;

    height: 75px;

    background: #c59a32;

}


.taxConsiderationsKicker {

    display: block;

    margin-bottom: 18px;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.35px;

}


.taxConsiderationsHeaderContent h2 {

    margin: 0;

    color: var(--primary);

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(47px, 5.3vw, 70px);

    line-height: 1.02;

    letter-spacing: -2.7px;

    font-weight: 400;

}


.taxConsiderationsHeaderContent h2 em {

    color: #c59a32;

    font-style: italic;

    font-weight: 400;

}


.taxConsiderationsHeaderContent p {

    max-width: 670px;

    margin: 27px 0 0;

    color: var(--text);

    opacity: .53;

    font-size: 16px;

    line-height: 1.9;

}


.taxConsiderationsHeaderContent p + p {

    margin-top: 13px;

    opacity: .38;

}


/* =========================================================
   CONSIDERATIONS LIST
========================================================= */

.taxConsiderationsList {

    margin-left: 230px;

    width: min(820px, calc(100% - 230px));

}


/* =========================================================
   ITEM
========================================================= */

.taxConsiderationItem {

    display: grid;

    grid-template-columns: 100px minmax(0, 1fr);

    gap: 40px;

    padding: 43px 0 45px;

    border-bottom: 1px solid rgba(197,154,50,.14);

}


.taxConsiderationItem:first-child {

    padding-top: 48px;

}


/* =========================================================
   NUMBER
========================================================= */

.taxConsiderationNumber {

    color: var(--primary);

    opacity: .19;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 34px;

    line-height: 1;

    letter-spacing: -1px;

}


/* =========================================================
   CATEGORY
========================================================= */

.taxConsiderationCategory {

    margin-bottom: 12px;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.15px;

}


/* =========================================================
   TITLE
========================================================= */

.taxConsiderationMain h3 {

    margin: 0;

    color: var(--primary);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 31px;

    line-height: 1.15;

    letter-spacing: -.7px;

    font-weight: 400;

}


/* =========================================================
   QUESTION
========================================================= */

.taxConsiderationMain h4 {

    margin: 12px 0 14px;

    color: var(--primary);

    opacity: .62;

    font-size: 15px;

    line-height: 1.5;

    font-weight: 600;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.taxConsiderationMain p {

    max-width: 680px;

    margin: 0;

    color: var(--text);

    opacity: .48;

    font-size: 15px;

    line-height: 1.85;

}


/* =========================================================
   BOTTOM STATEMENT
========================================================= */

.taxConsiderationsStatement {

    display: grid;

    grid-template-columns: 230px minmax(0, 1fr);

    gap: 60px;

    padding-top: 115px;

}


.taxConsiderationsStatementMeta {

    display: flex;

    align-items: flex-start;

    gap: 13px;

    padding-top: 10px;

}


.taxConsiderationsStatementMeta span {

    width: 38px;

    height: 1px;

    margin-top: 5px;

    background: #c59a32;

}


.taxConsiderationsStatementMeta small {

    color: var(--text);

    opacity: .28;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1px;

}


.taxConsiderationsStatementText {

    padding-left: 28px;

    border-left: 1px solid rgba(197,154,50,.2);

}


.taxConsiderationsStatementText span {

    display: block;

    color: var(--primary);

    opacity: .82;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(42px, 5vw, 68px);

    line-height: .98;

    letter-spacing: -2.5px;

    font-weight: 400;

}


.taxConsiderationsStatementText span:nth-child(2) {

    opacity: .68;

}


.taxConsiderationsStatementText span:nth-child(3) {

    opacity: .72;

}


.taxConsiderationsStatementText span:nth-child(4) {

    opacity: .48;

}


.taxConsiderationsStatementText em {

    color: #c59a32;

    font-style: normal;

    opacity: 1;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .taxConsiderations {

        padding: 110px 0 120px;

    }


    .taxConsiderationsHeader {

        grid-template-columns: 100px minmax(0, 1fr);

        gap: 35px;

        padding-bottom: 65px;

    }


    .taxConsiderationsHeaderMeta span {

        font-size: 47px;

    }


    .taxConsiderationsHeaderContent h2 {

        font-size: clamp(42px, 5.5vw, 59px);

    }


    .taxConsiderationsList {

        margin-left: 135px;

        width: calc(100% - 135px);

    }


    .taxConsiderationsStatement {

        grid-template-columns: 135px minmax(0, 1fr);

        gap: 35px;

    }


    .taxConsiderationsStatementText span {

        font-size: clamp(38px, 5vw, 57px);

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .taxConsiderations {

        padding: 78px 0 90px;

    }


    .taxConsiderationsContainer {

        width: calc(100% - 30px);

    }


    /* ---------------------------------------------
       HEADER
    ---------------------------------------------- */

    .taxConsiderationsHeader {

        display: block;

        padding-bottom: 50px;

    }


    .taxConsiderationsHeaderMeta {

        flex-direction: row;

        align-items: center;

        gap: 15px;

        margin-bottom: 25px;

    }


    .taxConsiderationsHeaderMeta span {

        font-size: 40px;

    }


    .taxConsiderationsHeaderMeta small {

        max-width: 190px;

    }


    .taxConsiderationsHeaderContent {

        padding-left: 18px;

    }


    .taxConsiderationsHeaderContent h2 {

        font-size: clamp(35px, 10vw, 49px);

        line-height: 1.05;

        letter-spacing: -1.4px;

    }


    .taxConsiderationsHeaderContent p {

        margin-top: 22px;

        font-size: 15px;

        line-height: 1.85;

    }


    /* ---------------------------------------------
       LIST
    ---------------------------------------------- */

    .taxConsiderationsList {

        width: 100%;

        margin-left: 0;

    }


    .taxConsiderationItem {

        display: block;

        padding: 34px 0 36px;

    }


    .taxConsiderationItem:first-child {

        padding-top: 38px;

    }


    .taxConsiderationNumber {

        margin-bottom: 17px;

        font-size: 28px;

    }


    .taxConsiderationCategory {

        margin-bottom: 10px;

        font-size: 9px;

    }


    .taxConsiderationMain h3 {

        font-size: 27px;

        line-height: 1.18;

    }


    .taxConsiderationMain h4 {

        margin: 11px 0 13px;

        font-size: 15px;

        line-height: 1.5;

    }


    .taxConsiderationMain p {

        font-size: 15px;

        line-height: 1.85;

    }


    /* ---------------------------------------------
       STATEMENT
    ---------------------------------------------- */

    .taxConsiderationsStatement {

        display: block;

        padding-top: 75px;

    }


    .taxConsiderationsStatementMeta {

        padding-top: 0;

        margin-bottom: 25px;

    }


    .taxConsiderationsStatementText {

        padding-left: 18px;

    }


    .taxConsiderationsStatementText span {

        font-size: clamp(36px, 10vw, 50px);

        line-height: 1;

        letter-spacing: -1.3px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .taxConsiderations {

        padding: 65px 0 75px;

    }


    .taxConsiderationsContainer {

        width: calc(100% - 26px);

    }


    .taxConsiderationsHeaderContent h2 {

        font-size: 34px;

    }


    .taxConsiderationMain h3 {

        font-size: 25px;

    }


    .taxConsiderationMain h4 {

        font-size: 15px;

    }


    .taxConsiderationMain p {

        font-size: 15px;

    }


    .taxConsiderationsStatementText span {

        font-size: 34px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .taxConsiderationsContainer {

        width: calc(100% - 22px);

    }


    .taxConsiderationsHeaderContent h2 {

        font-size: 32px;

    }


    .taxConsiderationMain h3 {

        font-size: 23px;

    }


    .taxConsiderationsStatementText span {

        font-size: 31px;

    }

}

/* Key Section Ends Here */

/* CTA Section Starts Here */

/* =========================================================
   4. FINAL ARTICLE CTA + RELATED INSIGHTS
========================================================= */

.taxArticleFinal {

    width: 100%;

    padding: 125px 0 50px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.taxArticleFinalContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   MAIN GRID
========================================================= */

.taxArticleFinalGrid {

    display: grid;

    grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr);

    gap: 90px;

    padding: 65px 0 75px;

    border-top: 1px solid rgba(197,154,50,.16);

    border-bottom: 1px solid rgba(197,154,50,.16);

}


/* =========================================================
   LEFT CTA
========================================================= */

.taxArticleFinalContent {

    max-width: 700px;

}


.taxArticleFinalPrefix {

    display: block;

    margin-bottom: 21px;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.4px;

}


.taxArticleFinalContent h2 {

    margin: 0;

    color: var(--primary);

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(44px, 5vw, 67px);

    line-height: 1.02;

    letter-spacing: -2.5px;

    font-weight: 400;

}


.taxArticleFinalContent h2 em {

    display: block;

    color: #c59a32;

    font-weight: 400;

    font-style: italic;

}


.taxArticleFinalDescription {

    max-width: 610px;

    margin: 28px 0 0;

    color: var(--text);

    opacity: .55;

    font-size: 16px;

    line-height: 1.9;

}


.taxArticleFinalDescription + .taxArticleFinalDescription {

    margin-top: 16px;

    opacity: .42;

}


/* =========================================================
   CTA BUTTONS
========================================================= */

.taxArticleFinalActions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 34px;

}


.taxArticleFinalActions .themeBtn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    min-height: 49px;

    padding: 0 23px;

    text-decoration: none;

    box-sizing: border-box;

}


.taxArticleFinalActions .themeBtn span,
.taxArticleFinalSecondary span {

    transition: transform .25s ease;

}


.taxArticleFinalActions .themeBtn:hover span,
.taxArticleFinalSecondary:hover span {

    transform: translate(3px, -3px);

}


.taxArticleFinalSecondary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    min-height: 49px;

    padding: 0 23px;

    border: 1px solid rgba(197,154,50,.3);

    color: var(--primary);

    text-decoration: none;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: .5px;

    transition:
        border-color .25s ease,
        background .25s ease;

}


.taxArticleFinalSecondary:hover {

    border-color: #c59a32;

    background: rgba(197,154,50,.035);

}


/* =========================================================
   RELATED INSIGHTS
========================================================= */

.taxArticleRelated {

    padding-left: 45px;

    border-left: 1px solid rgba(197,154,50,.17);

}


.taxArticleRelatedTop {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    padding-bottom: 17px;

    border-bottom: 1px solid rgba(197,154,50,.15);

}


.taxArticleRelatedTop > span {

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.3px;

}


.taxArticleRelatedTop small {

    color: var(--text);

    opacity: .25;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: .8px;

}


/* =========================================================
   RELATED LIST
========================================================= */

.taxArticleRelatedList {

    width: 100%;

}


.taxArticleRelatedItem {

    display: grid;

    grid-template-columns: 42px minmax(0, 1fr);

    gap: 17px;

    padding: 27px 0 29px;

    border-bottom: 1px solid rgba(197,154,50,.13);

    color: inherit;

    text-decoration: none;

    transition: padding-left .25s ease;

}


.taxArticleRelatedItem:hover {

    padding-left: 7px;

}


/* =========================================================
   NUMBER
========================================================= */

.taxArticleRelatedNumber {

    color: var(--primary);

    opacity: .25;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 23px;

    line-height: 1;

}


/* =========================================================
   CONTENT
========================================================= */

.taxArticleRelatedContent {

    min-width: 0;

}


.taxArticleRelatedMeta {

    display: flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 11px;

}


.taxArticleRelatedMeta span {

    color: var(--text);

    opacity: .32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1px;

}


.taxArticleRelatedMeta span:first-child {

    color: #c59a32;

    opacity: 1;

}


.taxArticleRelatedMeta i {

    color: #c59a32;

    opacity: .5;

    font-size: 9px;

    font-style: normal;

}


.taxArticleRelatedContent h3 {

    margin: 0;

    color: var(--primary);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 21px;

    line-height: 1.25;

    letter-spacing: -.3px;

    font-weight: 400;

}


.taxArticleRelatedContent p {

    margin: 13px 0 0;

    color: var(--text);

    opacity: .42;

    font-size: 13px;

    line-height: 1.75;

}


.taxArticleRelatedLink {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 17px;

    color: var(--primary);

    opacity: .45;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: .6px;

    transition:
        color .25s ease,
        opacity .25s ease;

}


.taxArticleRelatedItem:hover .taxArticleRelatedLink {

    color: #c59a32;

    opacity: 1;

}


.taxArticleRelatedLink span {

    color: #c59a32;

}


/* =========================================================
   BOTTOM EDITORIAL LINE
========================================================= */

.taxArticleFinalBottom {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 10px;

    padding-top: 22px;

}


.taxArticleFinalBottom span,
.taxArticleFinalBottom strong {

    color: var(--text);

    opacity: .28;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.1px;

}


.taxArticleFinalBottom strong {

    color: #c59a32;

    opacity: 1;

}


.taxArticleFinalBottom i {

    color: #c59a32;

    opacity: .45;

    font-size: 9px;

    font-style: normal;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .taxArticleFinal {

        padding: 100px 0 45px;

    }


    .taxArticleFinalGrid {

        grid-template-columns: minmax(0, 1fr) 300px;

        gap: 50px;

    }


    .taxArticleFinalContent h2 {

        font-size: clamp(40px, 5.5vw, 56px);

    }


    .taxArticleRelated {

        padding-left: 30px;

    }


    .taxArticleRelatedContent h3 {

        font-size: 19px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .taxArticleFinal {

        padding: 75px 0 35px;

    }


    .taxArticleFinalContainer {

        width: calc(100% - 30px);

    }


    .taxArticleFinalGrid {

        display: block;

        padding: 48px 0 50px;

    }


    .taxArticleFinalContent h2 {

        font-size: clamp(36px, 10vw, 48px);

        line-height: 1.05;

        letter-spacing: -1.2px;

    }


    .taxArticleFinalDescription {

        margin-top: 21px;

        font-size: 15px;

        line-height: 1.85;

    }


    .taxArticleFinalDescription
    + .taxArticleFinalDescription {

        margin-top: 13px;

    }


    .taxArticleFinalActions {

        flex-direction: column;

        align-items: stretch;

        margin-top: 28px;

        gap: 8px;

    }


    .taxArticleFinalActions .themeBtn,
    .taxArticleFinalSecondary {

        width: 100%;

        min-height: 47px;

    }


    /* ---------------------------------------------
       RELATED ARTICLES
    ---------------------------------------------- */

    .taxArticleRelated {

        margin-top: 55px;

        padding: 32px 0 0;

        border-left: none;

        border-top: 1px solid rgba(197,154,50,.17);

    }


    .taxArticleRelatedTop {

        flex-direction: column;

        gap: 8px;

    }


    .taxArticleRelatedItem {

        grid-template-columns: 36px minmax(0, 1fr);

        gap: 14px;

        padding: 24px 0 26px;

    }


    .taxArticleRelatedItem:hover {

        padding-left: 0;

    }


    .taxArticleRelatedNumber {

        font-size: 21px;

    }


    .taxArticleRelatedContent h3 {

        font-size: 19px;

        line-height: 1.3;

    }


    .taxArticleRelatedContent p {

        font-size: 13px;

        line-height: 1.75;

    }


    .taxArticleRelatedLink {

        font-size: 9px;

    }


    /* ---------------------------------------------
       BOTTOM LINE
    ---------------------------------------------- */

    .taxArticleFinalBottom {

        justify-content: flex-start;

        flex-wrap: wrap;

        gap: 7px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .taxArticleFinal {

        padding: 62px 0 30px;

    }


    .taxArticleFinalContainer {

        width: calc(100% - 26px);

    }


    .taxArticleFinalContent h2 {

        font-size: 34px;

    }


    .taxArticleFinalDescription {

        font-size: 15px;

    }


    .taxArticleRelatedContent h3 {

        font-size: 18px;

    }


    .taxArticleRelatedContent p {

        font-size: 13px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .taxArticleFinalContainer {

        width: calc(100% - 22px);

    }


    .taxArticleFinalContent h2 {

        font-size: 32px;

    }


    .taxArticleFinalBottom {

        flex-direction: column;

        align-items: flex-start;

    }


    .taxArticleFinalBottom i {

        display: none;

    }

}

/* CTA Section Ends Here */

/* Blogs-2 Page Ends Here */


/* Blogs-3 Page Starts Here */

/* Hero Section Starts Here */

/* =========================================================
   BLOG ARTICLE HERO — RETIREMENT
========================================================= */

.retirementArticleHero {

    width: 100%;

    min-height: 720px;

    padding: 120px 0 105px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.retirementArticleHeroContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


.retirementArticleHeroGrid {

    display: grid;

    grid-template-columns: minmax(0, 1.1fr) minmax(380px, .9fr);

    gap: 90px;

    align-items: center;

}


/* =========================================================
   LEFT CONTENT
========================================================= */

.retirementArticleHeroContent {

    max-width: 700px;

}


.retirementArticleHeroCategory {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 25px;

}


.retirementArticleHeroCategory span {

    color: var(--text);

    opacity: .48;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.15px;

}


.retirementArticleHeroCategory span:first-child {

    color: #c59a32;

    opacity: 1;

}


.retirementArticleHeroCategory i {

    color: #c59a32;

    opacity: .5;

    font-size: 9px;

    font-style: normal;

}


.retirementArticleHeroContent h1 {

    max-width: 680px;

    margin: 0;

    color: var(--primary);

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(52px, 6vw, 78px);

    line-height: .98;

    letter-spacing: -3px;

    font-weight: 400;

}


.retirementArticleHeroIntro {

    max-width: 650px;

    margin-top: 35px;

}


.retirementArticleHeroIntro p {

    margin: 0 0 18px;

    color: var(--text);

    opacity: .55;

    font-size: 16px;

    line-height: 1.9;

}


.retirementArticleHeroIntro p + p {

    opacity: .4;

}


/* =========================================================
   ARTICLE META
========================================================= */

.retirementArticleHeroMeta {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: 35px;

}


.retirementArticleHeroMeta span {

    color: var(--text);

    opacity: .3;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1px;

}


.retirementArticleHeroMeta .metaDivider {

    width: 28px;

    height: 1px;

    background: #c59a32;

    opacity: .45;

}


/* =========================================================
   RIGHT EDITORIAL VISUAL
========================================================= */

.retirementArticleHeroVisual {

    position: relative;

    min-height: 500px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 50px 0 50px 55px;

    border-left: 1px solid rgba(197,154,50,.18);

}


.retirementArticleHeroVisual::before {

    content: "";

    position: absolute;

    left: -1px;

    top: 55px;

    width: 1px;

    height: 110px;

    background: #c59a32;

}


/* =========================================================
   EDITORIAL NUMBER
========================================================= */

.retirementHeroEditorialNumber {

    position: absolute;

    top: 0;

    right: 0;

    color: var(--primary);

    opacity: .08;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 115px;

    line-height: .8;

    letter-spacing: -6px;

}


/* =========================================================
   TIME / PREPARATION
========================================================= */

.retirementHeroWords {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 1px;

    color: var(--primary);

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(37px, 4vw, 57px);

    line-height: .98;

    letter-spacing: -1.8px;

    font-weight: 400;

}


.retirementGoldWord {

    color: #c59a32;

}


.retirementSlash {

    margin: 4px 0 5px 30px;

    color: #c59a32;

    opacity: .55;

    font-family: Arial, sans-serif;

    font-size: 20px;

    line-height: 1;

}


/* =========================================================
   LONG-TERM COMPOSITION
========================================================= */

.retirementHeroFuture {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    margin-top: 55px;

    padding-left: 50px;

}


.retirementHeroFuture span {

    color: var(--primary);

    opacity: .3;

    font-size: 10px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 3px;

}


.retirementHeroFuture .retirementFutureAccent {

    color: var(--primary);

    opacity: .55;

}


/* =========================================================
   SMALL META
========================================================= */

.retirementHeroMeta {

    margin-top: 55px;

    color: var(--text);

    opacity: .3;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.15px;

}


/* =========================================================
   LINE
========================================================= */

.retirementHeroLine {

    width: 100%;

    height: 1px;

    margin-top: 24px;

    background: rgba(197,154,50,.14);

}


/* =========================================================
   IDENTITY
========================================================= */

.retirementHeroIdentity {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 17px;

}


.retirementHeroIdentity span {

    color: var(--text);

    opacity: .25;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: .9px;

}


.retirementHeroIdentity i {

    color: #c59a32;

    opacity: .4;

    font-size: 9px;

    font-style: normal;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .retirementArticleHero {

        min-height: auto;

        padding: 100px 0 90px;

    }


    .retirementArticleHeroGrid {

        grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr);

        gap: 55px;

    }


    .retirementArticleHeroContent h1 {

        font-size: clamp(46px, 6vw, 65px);

    }


    .retirementArticleHeroVisual {

        padding-left: 40px;

    }


    .retirementHeroWords {

        font-size: 42px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .retirementArticleHero {

        padding: 70px 0 75px;

    }


    .retirementArticleHeroContainer {

        width: calc(100% - 30px);

    }


    .retirementArticleHeroGrid {

        display: block;

    }


    /* ---------------------------------------------
       LEFT
    ---------------------------------------------- */

    .retirementArticleHeroContent {

        max-width: none;

    }


    .retirementArticleHeroCategory {

        margin-bottom: 20px;

    }


    .retirementArticleHeroContent h1 {

        font-size: clamp(40px, 11vw, 55px);

        line-height: 1.02;

        letter-spacing: -1.8px;

    }


    .retirementArticleHeroIntro {

        margin-top: 27px;

    }


    .retirementArticleHeroIntro p {

        font-size: 15px;

        line-height: 1.85;

    }


    .retirementArticleHeroMeta {

        margin-top: 27px;

    }


    /* ---------------------------------------------
       RIGHT VISUAL
    ---------------------------------------------- */

    .retirementArticleHeroVisual {

        min-height: 410px;

        margin-top: 70px;

        padding: 55px 0 30px 25px;

        border-left: 1px solid rgba(197,154,50,.2);

    }


    .retirementArticleHeroVisual::before {

        top: 45px;

        height: 85px;

    }


    .retirementHeroEditorialNumber {

        top: 5px;

        right: 0;

        font-size: 85px;

    }


    .retirementHeroWords {

        font-size: 40px;

        letter-spacing: -1.2px;

    }


    .retirementSlash {

        margin-left: 22px;

    }


    .retirementHeroFuture {

        margin-top: 45px;

        padding-left: 30px;

    }


    .retirementHeroFuture span {

        font-size: 9px;

        letter-spacing: 2.5px;

    }


    .retirementHeroMeta {

        margin-top: 45px;

    }


    .retirementHeroIdentity {

        gap: 7px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .retirementArticleHero {

        padding: 60px 0 65px;

    }


    .retirementArticleHeroContainer {

        width: calc(100% - 26px);

    }


    .retirementArticleHeroContent h1 {

        font-size: 38px;

    }


    .retirementArticleHeroIntro p {

        font-size: 15px;

    }


    .retirementArticleHeroVisual {

        margin-top: 60px;

        min-height: 380px;

        padding-left: 20px;

    }


    .retirementHeroWords {

        font-size: 35px;

    }


    .retirementHeroFuture {

        padding-left: 22px;

    }


    .retirementHeroEditorialNumber {

        font-size: 72px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .retirementArticleHeroContainer {

        width: calc(100% - 22px);

    }


    .retirementArticleHeroContent h1 {

        font-size: 35px;

    }


    .retirementHeroWords {

        font-size: 32px;

    }


    .retirementHeroIdentity {

        flex-direction: column;

        align-items: flex-start;

        gap: 5px;

    }


    .retirementHeroIdentity i {

        display: none;

    }

}

/* Hero Section Ends Here */

/* Main Section Starts Here */

/* =========================================================
   2. MAIN ARTICLE — RETIREMENT
========================================================= */

.retirementArticleMain {

    width: 100%;

    padding: 135px 0 145px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.retirementArticleMainContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   SECTION HEADER
========================================================= */

.retirementArticleMainHeader {

    display: grid;

    grid-template-columns: 150px minmax(0, 760px);

    gap: 55px;

    margin-bottom: 78px;

}


.retirementArticleMainNumber {

    color: #c59a32;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 58px;

    line-height: 1;

    letter-spacing: -2px;

}


.retirementArticleMainHeaderContent {

    max-width: 760px;

}


.retirementArticleMainKicker {

    display: block;

    margin-bottom: 20px;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.35px;

}


.retirementArticleMainHeaderContent h2 {

    margin: 0;

    color: var(--primary);

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(42px, 4.9vw, 64px);

    line-height: 1.04;

    letter-spacing: -2.3px;

    font-weight: 400;

}


.retirementArticleMainRule {

    width: 95px;

    height: 1px;

    margin-top: 30px;

    background: #c59a32;

}


/* =========================================================
   ARTICLE READING AREA
========================================================= */

.retirementArticleReadingArea {

    width: min(720px, 100%);

    margin-left: 205px;

}


/* =========================================================
   OPENING CONTENT
========================================================= */

.retirementArticleReadingArea p {

    margin: 0 0 21px;

    color: var(--text);

    opacity: .58;

    font-size: 17px;

    line-height: 1.9;

    font-weight: 400;

}


.retirementArticleReadingArea .retirementArticleLead {

    margin-bottom: 27px;

    color: var(--primary);

    opacity: .78;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 21px;

    line-height: 1.7;

}


/* =========================================================
   ARTICLE POINT
========================================================= */

.retirementArticlePoint {

    display: grid;

    grid-template-columns: 115px minmax(0, 1fr);

    gap: 35px;

    margin-top: 90px;

    padding-top: 28px;

    border-top: 1px solid rgba(197,154,50,.17);

}


.retirementArticlePointContent {

    max-width: 690px;

}


/* =========================================================
   POINT META
========================================================= */

.retirementArticlePointMeta {

    display: flex;

    flex-direction: column;

    gap: 11px;

}


.retirementArticlePointMeta span {

    color: #c59a32;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 31px;

    line-height: 1;

}


.retirementArticlePointMeta small {

    color: var(--text);

    opacity: .32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.1px;

}


/* =========================================================
   POINT TITLE
========================================================= */

.retirementArticlePointContent h3 {

    margin: 0 0 24px;

    color: var(--primary);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 32px;

    line-height: 1.15;

    letter-spacing: -.7px;

    font-weight: 400;

}


/* =========================================================
   POINT BODY
========================================================= */

.retirementArticlePointContent p {

    margin-bottom: 19px;

    color: var(--text);

    opacity: .52;

    font-size: 16px;

    line-height: 1.9;

}


/* =========================================================
   END MARK
========================================================= */

.retirementArticleEndMark {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 95px;

}


.retirementArticleEndMark span {

    width: 45px;

    height: 1px;

    background: rgba(197,154,50,.4);

}


.retirementArticleEndMark strong {

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.25px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .retirementArticleMain {

        padding: 105px 0 115px;

    }


    .retirementArticleMainHeader {

        grid-template-columns: 90px minmax(0, 1fr);

        gap: 35px;

        margin-bottom: 60px;

    }


    .retirementArticleMainNumber {

        font-size: 48px;

    }


    .retirementArticleMainHeaderContent h2 {

        font-size: clamp(40px, 5.5vw, 58px);

    }


    .retirementArticleReadingArea {

        margin-left: 125px;

        width: min(650px, calc(100% - 125px));

    }


    .retirementArticlePoint {

        grid-template-columns: 85px minmax(0, 1fr);

        gap: 25px;

    }


    .retirementArticlePointContent h3 {

        font-size: 29px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .retirementArticleMain {

        padding: 78px 0 88px;

    }


    .retirementArticleMainContainer {

        width: calc(100% - 30px);

    }


    /* ---------------------------------------------
       HEADER
    ---------------------------------------------- */

    .retirementArticleMainHeader {

        display: block;

        margin-bottom: 48px;

    }


    .retirementArticleMainNumber {

        margin-bottom: 19px;

        font-size: 42px;

    }


    .retirementArticleMainKicker {

        margin-bottom: 15px;

        font-size: 9px;

    }


    .retirementArticleMainHeaderContent h2 {

        font-size: clamp(34px, 9.5vw, 47px);

        line-height: 1.07;

        letter-spacing: -1.2px;

    }


    /* ---------------------------------------------
       READING AREA
    ---------------------------------------------- */

    .retirementArticleReadingArea {

        width: 100%;

        margin-left: 0;

    }


    .retirementArticleReadingArea p {

        font-size: 16px;

        line-height: 1.85;

        margin-bottom: 20px;

    }


    .retirementArticleReadingArea .retirementArticleLead {

        font-size: 19px;

        line-height: 1.7;

    }


    /* ---------------------------------------------
       ARTICLE POINT
    ---------------------------------------------- */

    .retirementArticlePoint {

        display: block;

        margin-top: 65px;

        padding-top: 23px;

    }


    .retirementArticlePointMeta {

        flex-direction: row;

        align-items: center;

        gap: 12px;

        margin-bottom: 20px;

    }


    .retirementArticlePointMeta span {

        font-size: 25px;

    }


    .retirementArticlePointMeta small {

        font-size: 9px;

    }


    .retirementArticlePointContent h3 {

        margin-bottom: 18px;

        font-size: 28px;

        line-height: 1.18;

    }


    .retirementArticlePointContent p {

        font-size: 15px;

        line-height: 1.85;

    }


    /* ---------------------------------------------
       END MARK
    ---------------------------------------------- */

    .retirementArticleEndMark {

        margin-top: 70px;

        align-items: flex-start;

        flex-direction: column;

        gap: 12px;

    }


    .retirementArticleEndMark span {

        width: 45px;

    }


    .retirementArticleEndMark strong {

        font-size: 9px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .retirementArticleMain {

        padding: 64px 0 72px;

    }


    .retirementArticleMainContainer {

        width: calc(100% - 26px);

    }


    .retirementArticleMainHeaderContent h2 {

        font-size: 33px;

    }


    .retirementArticleReadingArea p {

        font-size: 15px;

    }


    .retirementArticleReadingArea .retirementArticleLead {

        font-size: 18px;

    }


    .retirementArticlePoint {

        margin-top: 55px;

    }


    .retirementArticlePointContent h3 {

        font-size: 25px;

    }


    .retirementArticlePointContent p {

        font-size: 15px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .retirementArticleMainContainer {

        width: calc(100% - 22px);

    }


    .retirementArticleMainHeaderContent h2 {

        font-size: 31px;

    }


    .retirementArticlePointContent h3 {

        font-size: 23px;

    }

}

/* Main Section Ends Here */

/* Key Section Starts Here */

/* =========================================================
   3. KEY RETIREMENT PLANNING CONSIDERATIONS
========================================================= */

.retirementConsiderations {

    width: 100%;

    padding: 140px 0 155px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.retirementConsiderationsContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   SECTION HEADER
========================================================= */

.retirementConsiderationsHeader {

    display: grid;

    grid-template-columns: 170px minmax(0, 760px);

    gap: 60px;

    padding-bottom: 90px;

    border-bottom: 1px solid rgba(197,154,50,.16);

}


.retirementConsiderationsHeaderMeta {

    display: flex;

    flex-direction: column;

    gap: 13px;

    padding-top: 4px;

}


.retirementConsiderationsHeaderMeta span {

    color: #c59a32;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 56px;

    line-height: 1;

    letter-spacing: -2px;

}


.retirementConsiderationsHeaderMeta small {

    max-width: 125px;

    color: var(--text);

    opacity: .28;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1px;

}


.retirementConsiderationsHeaderContent {

    position: relative;

    padding-left: 28px;

    border-left: 1px solid rgba(197,154,50,.24);

}


.retirementConsiderationsHeaderContent::before {

    content: "";

    position: absolute;

    left: -1px;

    top: 0;

    width: 1px;

    height: 78px;

    background: #c59a32;

}


.retirementConsiderationsKicker {

    display: block;

    margin-bottom: 18px;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.35px;

}


.retirementConsiderationsHeaderContent h2 {

    margin: 0;

    color: var(--primary);

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(47px, 5.3vw, 70px);

    line-height: 1.02;

    letter-spacing: -2.7px;

    font-weight: 400;

}


.retirementConsiderationsHeaderContent h2 em {

    color: #c59a32;

    font-style: italic;

    font-weight: 400;

}


.retirementConsiderationsHeaderContent p {

    max-width: 680px;

    margin: 28px 0 0;

    color: var(--text);

    opacity: .53;

    font-size: 16px;

    line-height: 1.9;

}


.retirementConsiderationsHeaderContent p + p {

    margin-top: 14px;

    opacity: .39;

}


/* =========================================================
   CONSIDERATIONS LIST
========================================================= */

.retirementConsiderationsList {

    width: min(820px, calc(100% - 230px));

    margin-left: 230px;

}


/* =========================================================
   INDIVIDUAL CONSIDERATION
========================================================= */

.retirementConsiderationItem {

    display: grid;

    grid-template-columns: 100px minmax(0, 1fr);

    gap: 40px;

    padding: 43px 0 45px;

    border-bottom: 1px solid rgba(197,154,50,.14);

}


.retirementConsiderationItem:first-child {

    padding-top: 48px;

}


/* =========================================================
   NUMBER
========================================================= */

.retirementConsiderationNumber {

    color: var(--primary);

    opacity: .18;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 34px;

    line-height: 1;

    letter-spacing: -1px;

}


/* =========================================================
   CATEGORY
========================================================= */

.retirementConsiderationCategory {

    margin-bottom: 12px;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.15px;

}


/* =========================================================
   TITLE
========================================================= */

.retirementConsiderationMain h3 {

    margin: 0;

    color: var(--primary);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 31px;

    line-height: 1.15;

    letter-spacing: -.7px;

    font-weight: 400;

}


/* =========================================================
   QUESTION
========================================================= */

.retirementConsiderationMain h4 {

    margin: 12px 0 14px;

    color: var(--primary);

    opacity: .62;

    font-size: 15px;

    line-height: 1.5;

    font-weight: 600;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.retirementConsiderationMain p {

    max-width: 680px;

    margin: 0;

    color: var(--text);

    opacity: .47;

    font-size: 15px;

    line-height: 1.85;

}


/* =========================================================
   BOTTOM EDITORIAL STATEMENT
========================================================= */

.retirementConsiderationsStatement {

    display: grid;

    grid-template-columns: 230px minmax(0, 1fr);

    gap: 60px;

    padding-top: 115px;

}


.retirementConsiderationsStatementMeta {

    display: flex;

    align-items: flex-start;

    gap: 13px;

    padding-top: 10px;

}


.retirementConsiderationsStatementMeta span {

    width: 38px;

    height: 1px;

    margin-top: 5px;

    background: #c59a32;

}


.retirementConsiderationsStatementMeta small {

    max-width: 145px;

    color: var(--text);

    opacity: .28;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1px;

}


.retirementConsiderationsStatementText {

    padding-left: 28px;

    border-left: 1px solid rgba(197,154,50,.2);

}


.retirementConsiderationsStatementText span {

    display: block;

    color: var(--primary);

    opacity: .82;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(42px, 5vw, 68px);

    line-height: .98;

    letter-spacing: -2.5px;

    font-weight: 400;

}


.retirementConsiderationsStatementText span:nth-child(2) {

    opacity: .73;

}


.retirementConsiderationsStatementText span:nth-child(3) {

    opacity: .6;

}


.retirementConsiderationsStatementText span:nth-child(4) {

    opacity: .55;

}


.retirementConsiderationsStatementText span:nth-child(5) {

    opacity: .45;

}


.retirementStatementGap {

    height: 38px;

}


.retirementConsiderationsStatementText
.retirementGoldStatement {

    color: #c59a32;

    opacity: 1;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .retirementConsiderations {

        padding: 110px 0 120px;

    }


    .retirementConsiderationsHeader {

        grid-template-columns: 100px minmax(0, 1fr);

        gap: 35px;

        padding-bottom: 65px;

    }


    .retirementConsiderationsHeaderMeta span {

        font-size: 47px;

    }


    .retirementConsiderationsHeaderContent h2 {

        font-size: clamp(42px, 5.5vw, 59px);

    }


    .retirementConsiderationsList {

        width: calc(100% - 135px);

        margin-left: 135px;

    }


    .retirementConsiderationsStatement {

        grid-template-columns: 135px minmax(0, 1fr);

        gap: 35px;

    }


    .retirementConsiderationsStatementText span {

        font-size: clamp(38px, 5vw, 57px);

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .retirementConsiderations {

        padding: 78px 0 90px;

    }


    .retirementConsiderationsContainer {

        width: calc(100% - 30px);

    }


    /* ---------------------------------------------
       HEADER
    ---------------------------------------------- */

    .retirementConsiderationsHeader {

        display: block;

        padding-bottom: 50px;

    }


    .retirementConsiderationsHeaderMeta {

        flex-direction: row;

        align-items: center;

        gap: 15px;

        margin-bottom: 25px;

    }


    .retirementConsiderationsHeaderMeta span {

        font-size: 40px;

    }


    .retirementConsiderationsHeaderMeta small {

        max-width: 220px;

    }


    .retirementConsiderationsHeaderContent {

        padding-left: 18px;

    }


    .retirementConsiderationsHeaderContent h2 {

        font-size: clamp(35px, 10vw, 49px);

        line-height: 1.05;

        letter-spacing: -1.4px;

    }


    .retirementConsiderationsHeaderContent p {

        margin-top: 22px;

        font-size: 15px;

        line-height: 1.85;

    }


    /* ---------------------------------------------
       LIST
    ---------------------------------------------- */

    .retirementConsiderationsList {

        width: 100%;

        margin-left: 0;

    }


    .retirementConsiderationItem {

        display: block;

        padding: 34px 0 36px;

    }


    .retirementConsiderationItem:first-child {

        padding-top: 38px;

    }


    .retirementConsiderationNumber {

        margin-bottom: 17px;

        font-size: 28px;

    }


    .retirementConsiderationCategory {

        margin-bottom: 10px;

        font-size: 9px;

    }


    .retirementConsiderationMain h3 {

        font-size: 27px;

        line-height: 1.18;

    }


    .retirementConsiderationMain h4 {

        margin: 11px 0 13px;

        font-size: 15px;

        line-height: 1.5;

    }


    .retirementConsiderationMain p {

        font-size: 15px;

        line-height: 1.85;

    }


    /* ---------------------------------------------
       STATEMENT
    ---------------------------------------------- */

    .retirementConsiderationsStatement {

        display: block;

        padding-top: 75px;

    }


    .retirementConsiderationsStatementMeta {

        padding-top: 0;

        margin-bottom: 25px;

    }


    .retirementConsiderationsStatementText {

        padding-left: 18px;

    }


    .retirementConsiderationsStatementText span {

        font-size: clamp(36px, 10vw, 50px);

        line-height: 1;

        letter-spacing: -1.3px;

    }


    .retirementStatementGap {

        height: 28px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .retirementConsiderations {

        padding: 65px 0 75px;

    }


    .retirementConsiderationsContainer {

        width: calc(100% - 26px);

    }


    .retirementConsiderationsHeaderContent h2 {

        font-size: 34px;

    }


    .retirementConsiderationMain h3 {

        font-size: 25px;

    }


    .retirementConsiderationMain h4 {

        font-size: 15px;

    }


    .retirementConsiderationMain p {

        font-size: 15px;

    }


    .retirementConsiderationsStatementText span {

        font-size: 34px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .retirementConsiderationsContainer {

        width: calc(100% - 22px);

    }


    .retirementConsiderationsHeaderContent h2 {

        font-size: 32px;

    }


    .retirementConsiderationMain h3 {

        font-size: 23px;

    }


    .retirementConsiderationsStatementText span {

        font-size: 31px;

    }

}

/* Key Section Ends Here */

/* CTA Section Starts Here */

/* =========================================================
   4. FINAL ARTICLE CTA + RELATED INSIGHTS
========================================================= */

.retirementArticleEnding {

    width: 100%;

    padding: 125px 0 135px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.retirementArticleEndingContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   FINAL CTA
========================================================= */

.retirementArticleCTA {

    display: grid;

    grid-template-columns: minmax(0, 1fr) minmax(350px, .72fr);

    gap: 90px;

    padding: 75px 0 90px;

    border-top: 1px solid rgba(197,154,50,.16);

    border-bottom: 1px solid rgba(197,154,50,.16);

}


/* =========================================================
   CTA CONTENT
========================================================= */

.retirementArticleCTAContent {

    max-width: 700px;

}


.retirementArticleCTAPrefix {

    display: block;

    margin-bottom: 23px;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.4px;

}


.retirementArticleCTAContent h2 {

    max-width: 700px;

    margin: 0;

    color: var(--primary);

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(45px, 5.3vw, 68px);

    line-height: 1.03;

    letter-spacing: -2.5px;

    font-weight: 400;

}


.retirementArticleCTAContent p {

    max-width: 650px;

    margin: 28px 0 0;

    color: var(--text);

    opacity: .53;

    font-size: 16px;

    line-height: 1.9;

}


.retirementArticleCTAContent p + p {

    margin-top: 15px;

    opacity: .4;

}


/* =========================================================
   CTA BUTTONS
========================================================= */

.retirementArticleCTAActions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 36px;

}


.retirementPrimaryBtn,
.retirementSecondaryBtn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 48px;

    padding: 0 23px;

    text-decoration: none;

    font-size: 10px;

    line-height: 1.3;

    font-weight: 700;

    letter-spacing: .55px;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease,
        border-color .3s ease;

    box-sizing: border-box;

}


.retirementPrimaryBtn {

    color: #fff;

    background: #c59a32;

    border: 1px solid #c59a32;

}


.retirementSecondaryBtn {

    color: var(--primary);

    background: transparent;

    border: 1px solid rgba(197,154,50,.32);

}


.retirementPrimaryBtn:hover,
.retirementSecondaryBtn:hover {

    transform: translateY(-2px);

}


/* =========================================================
   RIGHT CTA DETAIL
========================================================= */

.retirementArticleCTADetail {

    position: relative;

    min-height: 430px;

    padding: 20px 0 20px 45px;

    border-left: 1px solid rgba(197,154,50,.2);

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.retirementArticleCTADetail::before {

    content: "";

    position: absolute;

    left: -1px;

    top: 0;

    width: 1px;

    height: 95px;

    background: #c59a32;

}


/* =========================================================
   CTA INDEX
========================================================= */

.retirementArticleCTAIndex {

    position: absolute;

    top: 0;

    right: 0;

    color: var(--text);

    opacity: .27;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.1px;

}


/* =========================================================
   CTA WORDS
========================================================= */

.retirementArticleCTAWords {

    display: flex;

    flex-direction: column;

    gap: 3px;

    color: var(--primary);

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(30px, 3.5vw, 47px);

    line-height: .98;

    letter-spacing: -1.4px;

}


.retirementArticleCTAWords span {

    opacity: .35;

}


.retirementArticleCTAWords .retirementCTAAccent {

    color: #c59a32;

    opacity: 1;

}


/* =========================================================
   CTA STATEMENT
========================================================= */

.retirementArticleCTAStatement {

    display: flex;

    flex-direction: column;

    margin-top: 50px;

}


.retirementArticleCTAStatement span {

    color: var(--primary);

    opacity: .42;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 16px;

    line-height: 1.15;

    letter-spacing: 2.3px;

}


.retirementArticleCTAStatement .retirementCTAStatementGold {

    color: #c59a32;

    opacity: 1;

}


/* =========================================================
   CTA RULE
========================================================= */

.retirementArticleCTARule {

    width: 70px;

    height: 1px;

    margin-top: 34px;

    background: #c59a32;

    opacity: .45;

}


.retirementArticleCTAMeta {

    margin-top: 17px;

    color: var(--text);

    opacity: .25;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1px;

}


/* =========================================================
   RELATED INSIGHTS
========================================================= */

.retirementRelatedInsights {

    padding-top: 105px;

}


.retirementRelatedHeader {

    display: flex;

    align-items: center;

    gap: 30px;

    margin-bottom: 30px;

}


.retirementRelatedHeader span {

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.4px;

    white-space: nowrap;

}


.retirementRelatedHeader div {

    flex: 1;

    height: 1px;

    background: rgba(197,154,50,.14);

}


/* =========================================================
   RELATED LIST
========================================================= */

.retirementRelatedList {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    border-top: 1px solid rgba(197,154,50,.14);

}


/* =========================================================
   RELATED ARTICLE
========================================================= */

.retirementRelatedArticle {

    display: flex;

    flex-direction: column;

    min-height: 390px;

    padding: 30px 28px 30px 0;

    border-right: 1px solid rgba(197,154,50,.14);

    box-sizing: border-box;

}


.retirementRelatedArticle + .retirementRelatedArticle {

    padding-left: 28px;

}


.retirementRelatedArticle:last-child {

    border-right: none;

    padding-right: 0;

}


.retirementRelatedNumber {

    color: var(--primary);

    opacity: .17;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 35px;

    line-height: 1;

    margin-bottom: 38px;

}


.retirementRelatedContent {

    display: flex;

    flex-direction: column;

    flex: 1;

}


.retirementRelatedCategory {

    margin-bottom: 16px;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1px;

}


.retirementRelatedContent h3 {

    margin: 0;

    color: var(--primary);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 27px;

    line-height: 1.16;

    letter-spacing: -.6px;

    font-weight: 400;

}


.retirementRelatedContent p {

    margin: 19px 0 0;

    color: var(--text);

    opacity: .45;

    font-size: 14px;

    line-height: 1.8;

}


.retirementRelatedContent a {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    width: fit-content;

    margin-top: auto;

    padding-top: 28px;

    color: var(--primary);

    text-decoration: none;

    font-size: 10px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: .5px;

}


.retirementRelatedContent a span {

    color: #c59a32;

    transition: transform .25s ease;

}


.retirementRelatedContent a:hover span {

    transform: translateX(4px);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .retirementArticleEnding {

        padding: 100px 0 110px;

    }


    .retirementArticleCTA {

        grid-template-columns: minmax(0, 1fr) minmax(300px, .7fr);

        gap: 55px;

    }


    .retirementArticleCTAContent h2 {

        font-size: clamp(40px, 5.5vw, 58px);

    }


    .retirementArticleCTADetail {

        padding-left: 35px;

    }


    .retirementArticleCTAWords {

        font-size: 37px;

    }


    .retirementRelatedContent h3 {

        font-size: 24px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .retirementArticleEnding {

        padding: 75px 0 85px;

    }


    .retirementArticleEndingContainer {

        width: calc(100% - 30px);

    }


    /* ---------------------------------------------
       CTA
    ---------------------------------------------- */

    .retirementArticleCTA {

        display: block;

        padding: 55px 0 65px;

    }


    .retirementArticleCTAPrefix {

        margin-bottom: 18px;

    }


    .retirementArticleCTAContent h2 {

        font-size: clamp(35px, 10vw, 49px);

        line-height: 1.06;

        letter-spacing: -1.4px;

    }


    .retirementArticleCTAContent p {

        font-size: 15px;

        line-height: 1.85;

    }


    .retirementArticleCTAActions {

        align-items: stretch;

        flex-direction: column;

        margin-top: 30px;

    }


    .retirementPrimaryBtn,
    .retirementSecondaryBtn {

        width: 100%;

        min-height: 48px;

    }


    /* ---------------------------------------------
       RIGHT DETAIL
    ---------------------------------------------- */

    .retirementArticleCTADetail {

        min-height: 390px;

        margin-top: 70px;

        padding: 55px 0 30px 22px;

    }


    .retirementArticleCTAIndex {

        top: 0;

        right: 0;

    }


    .retirementArticleCTAWords {

        font-size: 36px;

    }


    .retirementArticleCTAStatement {

        margin-top: 40px;

    }


    .retirementArticleCTAStatement span {

        font-size: 15px;

    }


    /* ---------------------------------------------
       RELATED
    ---------------------------------------------- */

    .retirementRelatedInsights {

        padding-top: 70px;

    }


    .retirementRelatedList {

        display: block;

    }


    .retirementRelatedArticle {

        min-height: auto;

        padding: 30px 0 38px;

        border-right: none;

        border-bottom: 1px solid rgba(197,154,50,.14);

    }


    .retirementRelatedArticle + .retirementRelatedArticle {

        padding-left: 0;

    }


    .retirementRelatedArticle:last-child {

        padding-right: 0;

        border-bottom: none;

    }


    .retirementRelatedNumber {

        margin-bottom: 22px;

        font-size: 30px;

    }


    .retirementRelatedContent h3 {

        font-size: 27px;

    }


    .retirementRelatedContent p {

        font-size: 15px;

        line-height: 1.85;

    }


    .retirementRelatedContent a {

        margin-top: 25px;

        padding-top: 0;

        font-size: 10px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .retirementArticleEnding {

        padding: 65px 0 75px;

    }


    .retirementArticleEndingContainer {

        width: calc(100% - 26px);

    }


    .retirementArticleCTAContent h2 {

        font-size: 34px;

    }


    .retirementArticleCTAContent p {

        font-size: 15px;

    }


    .retirementArticleCTADetail {

        min-height: 360px;

        padding-left: 18px;

    }


    .retirementArticleCTAWords {

        font-size: 32px;

    }


    .retirementArticleRelatedArticle {

        padding-top: 27px;

    }


    .retirementRelatedContent h3 {

        font-size: 25px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .retirementArticleEndingContainer {

        width: calc(100% - 22px);

    }


    .retirementArticleCTAContent h2 {

        font-size: 32px;

    }


    .retirementArticleCTAWords {

        font-size: 29px;

    }


    .retirementRelatedContent h3 {

        font-size: 23px;

    }

}

/* CTA Section Ends Here */

/* Blogs-3 Page Ends Here */


/* Blogs-4 Page Starts Here */

/* Hero Section Starts Here */

/* =========================================================
   BLOG ARTICLE HERO — STRUCTURED WEALTH
========================================================= */

.wealthStrategyHero {

    width: 100%;

    min-height: 720px;

    padding: 120px 0 105px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.wealthStrategyHeroContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


.wealthStrategyHeroGrid {

    display: grid;

    grid-template-columns: minmax(0, 1.1fr) minmax(380px, .9fr);

    gap: 90px;

    align-items: center;

}


/* =========================================================
   LEFT ARTICLE CONTENT
========================================================= */

.wealthStrategyHeroContent {

    max-width: 700px;

}


.wealthStrategyHeroCategory {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 25px;

}


.wealthStrategyHeroCategory span {

    color: var(--text);

    opacity: .46;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.15px;

}


.wealthStrategyHeroCategory span:first-child {

    color: #c59a32;

    opacity: 1;

}


.wealthStrategyHeroCategory i {

    color: #c59a32;

    opacity: .5;

    font-size: 9px;

    font-style: normal;

}


.wealthStrategyHeroContent h1 {

    max-width: 720px;

    margin: 0;

    color: var(--primary);

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(48px, 5.7vw, 74px);

    line-height: .99;

    letter-spacing: -2.8px;

    font-weight: 400;

}


.wealthStrategyHeroIntro {

    max-width: 655px;

    margin-top: 35px;

}


.wealthStrategyHeroIntro p {

    margin: 0 0 18px;

    color: var(--text);

    opacity: .54;

    font-size: 16px;

    line-height: 1.9;

}


.wealthStrategyHeroIntro p + p {

    opacity: .4;

}


/* =========================================================
   ARTICLE META
========================================================= */

.wealthStrategyHeroMeta {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: 35px;

}


.wealthStrategyHeroMeta span {

    color: var(--text);

    opacity: .3;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1px;

}


.wealthMetaDivider {

    width: 28px;

    height: 1px;

    background: #c59a32;

    opacity: .45;

}


/* =========================================================
   RIGHT EDITORIAL VISUAL
========================================================= */

.wealthStrategyHeroVisual {

    position: relative;

    min-height: 500px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 50px 0 50px 55px;

    border-left: 1px solid rgba(197,154,50,.18);

}


.wealthStrategyHeroVisual::before {

    content: "";

    position: absolute;

    left: -1px;

    top: 55px;

    width: 1px;

    height: 115px;

    background: #c59a32;

}


/* =========================================================
   EDITORIAL NUMBER
========================================================= */

.wealthStrategyHeroNumber {

    position: absolute;

    top: 0;

    right: 0;

    color: var(--primary);

    opacity: .08;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 115px;

    line-height: .8;

    letter-spacing: -6px;

}


/* =========================================================
   STRUCTURE / DISCIPLINE
========================================================= */

.wealthStrategyStructure {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 2px;

    color: var(--primary);

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(38px, 4vw, 57px);

    line-height: .98;

    letter-spacing: -1.7px;

    font-weight: 400;

}


.wealthStructureGold {

    color: #c59a32;

}


.wealthStructureSlash {

    margin: 5px 0 5px 30px;

    color: #c59a32;

    opacity: .5;

    font-family: Arial, sans-serif;

    font-size: 20px;

    line-height: 1;

}


/* =========================================================
   LONG-TERM WEALTH CREATION
========================================================= */

.wealthStrategyLongTerm {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    margin-top: 55px;

    padding-left: 50px;

}


.wealthStrategyLongTerm span {

    color: var(--primary);

    opacity: .3;

    font-size: 10px;

    line-height: 1.45;

    font-weight: 700;

    letter-spacing: 3px;

}


.wealthStrategyLongTerm .wealthCreationWord {

    opacity: .55;

}


/* =========================================================
   SMALL META
========================================================= */

.wealthStrategyMeta {

    margin-top: 55px;

    color: var(--text);

    opacity: .28;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.15px;

}


/* =========================================================
   HORIZONTAL RULE
========================================================= */

.wealthStrategyRule {

    width: 100%;

    height: 1px;

    margin-top: 24px;

    background: rgba(197,154,50,.14);

}


/* =========================================================
   IDENTITY
========================================================= */

.wealthStrategyIdentity {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 17px;

}


.wealthStrategyIdentity span {

    color: var(--text);

    opacity: .25;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: .9px;

}


.wealthStrategyIdentity i {

    color: #c59a32;

    opacity: .4;

    font-size: 9px;

    font-style: normal;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .wealthStrategyHero {

        min-height: auto;

        padding: 100px 0 90px;

    }


    .wealthStrategyHeroGrid {

        grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr);

        gap: 55px;

    }


    .wealthStrategyHeroContent h1 {

        font-size: clamp(44px, 6vw, 64px);

    }


    .wealthStrategyHeroVisual {

        padding-left: 40px;

    }


    .wealthStrategyStructure {

        font-size: 43px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .wealthStrategyHero {

        padding: 70px 0 75px;

    }


    .wealthStrategyHeroContainer {

        width: calc(100% - 30px);

    }


    .wealthStrategyHeroGrid {

        display: block;

    }


    /* ---------------------------------------------
       LEFT CONTENT
    ---------------------------------------------- */

    .wealthStrategyHeroContent {

        max-width: none;

    }


    .wealthStrategyHeroCategory {

        margin-bottom: 20px;

    }


    .wealthStrategyHeroContent h1 {

        font-size: clamp(39px, 10.8vw, 54px);

        line-height: 1.02;

        letter-spacing: -1.7px;

    }


    .wealthStrategyHeroIntro {

        margin-top: 27px;

    }


    .wealthStrategyHeroIntro p {

        font-size: 15px;

        line-height: 1.85;

    }


    .wealthStrategyHeroMeta {

        margin-top: 27px;

    }


    /* ---------------------------------------------
       RIGHT VISUAL
    ---------------------------------------------- */

    .wealthStrategyHeroVisual {

        min-height: 420px;

        margin-top: 70px;

        padding: 55px 0 30px 25px;

        border-left: 1px solid rgba(197,154,50,.2);

    }


    .wealthStrategyHeroVisual::before {

        top: 45px;

        height: 85px;

    }


    .wealthStrategyHeroNumber {

        top: 5px;

        right: 0;

        font-size: 85px;

    }


    .wealthStrategyStructure {

        font-size: 39px;

        letter-spacing: -1px;

    }


    .wealthStructureSlash {

        margin-left: 22px;

    }


    .wealthStrategyLongTerm {

        margin-top: 45px;

        padding-left: 30px;

    }


    .wealthStrategyLongTerm span {

        font-size: 9px;

        letter-spacing: 2.5px;

    }


    .wealthStrategyMeta {

        margin-top: 45px;

    }


    .wealthStrategyIdentity {

        gap: 7px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .wealthStrategyHero {

        padding: 60px 0 65px;

    }


    .wealthStrategyHeroContainer {

        width: calc(100% - 26px);

    }


    .wealthStrategyHeroContent h1 {

        font-size: 37px;

    }


    .wealthStrategyHeroIntro p {

        font-size: 15px;

    }


    .wealthStrategyHeroVisual {

        min-height: 390px;

        margin-top: 60px;

        padding-left: 20px;

    }


    .wealthStrategyStructure {

        font-size: 34px;

    }


    .wealthStrategyLongTerm {

        padding-left: 22px;

    }


    .wealthStrategyHeroNumber {

        font-size: 72px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .wealthStrategyHeroContainer {

        width: calc(100% - 22px);

    }


    .wealthStrategyHeroContent h1 {

        font-size: 34px;

    }


    .wealthStrategyStructure {

        font-size: 31px;

    }


    .wealthStrategyIdentity {

        flex-direction: column;

        align-items: flex-start;

        gap: 5px;

    }


    .wealthStrategyIdentity i {

        display: none;

    }

}

/* Hero Section Ends Here */

/* Main Section Starts Here */

/* =========================================================
   2. MAIN ARTICLE — STRUCTURED WEALTH
========================================================= */

.wealthStrategyArticle {

    width: 100%;

    padding: 135px 0 145px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.wealthStrategyArticleContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   SECTION HEADER
========================================================= */

.wealthStrategyArticleHeader {

    display: grid;

    grid-template-columns: 150px minmax(0, 760px);

    gap: 55px;

    margin-bottom: 78px;

}


.wealthStrategyArticleHeaderMeta {

    display: flex;

    flex-direction: column;

    gap: 13px;

    padding-top: 4px;

}


.wealthStrategyArticleHeaderMeta span {

    color: #c59a32;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 56px;

    line-height: 1;

    letter-spacing: -2px;

}


.wealthStrategyArticleHeaderMeta small {

    max-width: 125px;

    color: var(--text);

    opacity: .28;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1px;

}


.wealthStrategyArticleHeaderContent {

    max-width: 760px;

    padding-left: 28px;

    border-left: 1px solid rgba(197,154,50,.22);

    position: relative;

}


.wealthStrategyArticleHeaderContent::before {

    content: "";

    position: absolute;

    left: -1px;

    top: 0;

    width: 1px;

    height: 80px;

    background: #c59a32;

}


.wealthStrategyArticleKicker {

    display: block;

    margin-bottom: 19px;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.35px;

}


.wealthStrategyArticleHeaderContent h2 {

    margin: 0;

    color: var(--primary);

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(47px, 5.2vw, 69px);

    line-height: 1.02;

    letter-spacing: -2.5px;

    font-weight: 400;

}


.wealthStrategyArticleHeaderRule {

    width: 90px;

    height: 1px;

    margin-top: 31px;

    background: #c59a32;

}


/* =========================================================
   ARTICLE READING AREA
========================================================= */

.wealthStrategyArticleReading {

    width: min(720px, 100%);

    margin-left: 205px;

}


/* =========================================================
   OPENING CONTENT
========================================================= */

.wealthStrategyArticleReading p {

    margin: 0 0 21px;

    color: var(--text);

    opacity: .56;

    font-size: 17px;

    line-height: 1.9;

}


.wealthStrategyArticleReading
.wealthStrategyArticleLead {

    margin-bottom: 27px;

    color: var(--primary);

    opacity: .78;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 21px;

    line-height: 1.7;

}


/* =========================================================
   ARTICLE POINT
========================================================= */

.wealthStrategyArticlePoint {

    display: grid;

    grid-template-columns: 115px minmax(0, 1fr);

    gap: 35px;

    margin-top: 90px;

    padding-top: 28px;

    border-top: 1px solid rgba(197,154,50,.16);

}


.wealthStrategyArticlePointContent {

    max-width: 690px;

}


/* =========================================================
   POINT META
========================================================= */

.wealthStrategyArticlePointMeta {

    display: flex;

    flex-direction: column;

    gap: 11px;

}


.wealthStrategyArticlePointMeta span {

    color: #c59a32;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 31px;

    line-height: 1;

}


.wealthStrategyArticlePointMeta small {

    color: var(--text);

    opacity: .3;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.1px;

}


/* =========================================================
   SUBSECTION TITLE
========================================================= */

.wealthStrategyArticlePointContent h3 {

    margin: 0 0 24px;

    color: var(--primary);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 32px;

    line-height: 1.15;

    letter-spacing: -.7px;

    font-weight: 400;

}


/* =========================================================
   SUBSECTION BODY
========================================================= */

.wealthStrategyArticlePointContent p {

    margin-bottom: 19px;

    color: var(--text);

    opacity: .51;

    font-size: 16px;

    line-height: 1.9;

}


/* =========================================================
   EDITORIAL CLOSING
========================================================= */

.wealthStrategyArticleClosing {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 95px;

}


.wealthStrategyArticleClosing span {

    width: 45px;

    height: 1px;

    background: rgba(197,154,50,.4);

}


.wealthStrategyArticleClosing strong {

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.25px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .wealthStrategyArticle {

        padding: 105px 0 115px;

    }


    .wealthStrategyArticleHeader {

        grid-template-columns: 90px minmax(0, 1fr);

        gap: 35px;

        margin-bottom: 60px;

    }


    .wealthStrategyArticleHeaderMeta span {

        font-size: 48px;

    }


    .wealthStrategyArticleHeaderContent h2 {

        font-size: clamp(41px, 5.5vw, 58px);

    }


    .wealthStrategyArticleReading {

        width: min(650px, calc(100% - 125px));

        margin-left: 125px;

    }


    .wealthStrategyArticlePoint {

        grid-template-columns: 85px minmax(0, 1fr);

        gap: 25px;

    }


    .wealthStrategyArticlePointContent h3 {

        font-size: 29px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .wealthStrategyArticle {

        padding: 78px 0 88px;

    }


    .wealthStrategyArticleContainer {

        width: calc(100% - 30px);

    }


    /* ---------------------------------------------
       HEADER
    ---------------------------------------------- */

    .wealthStrategyArticleHeader {

        display: block;

        margin-bottom: 48px;

    }


    .wealthStrategyArticleHeaderMeta {

        flex-direction: row;

        align-items: center;

        gap: 15px;

        margin-bottom: 23px;

    }


    .wealthStrategyArticleHeaderMeta span {

        font-size: 41px;

    }


    .wealthStrategyArticleHeaderMeta small {

        max-width: 220px;

    }


    .wealthStrategyArticleHeaderContent {

        padding-left: 18px;

    }


    .wealthStrategyArticleHeaderContent h2 {

        font-size: clamp(35px, 9.7vw, 48px);

        line-height: 1.06;

        letter-spacing: -1.3px;

    }


    .wealthStrategyArticleKicker {

        margin-bottom: 15px;

    }


    /* ---------------------------------------------
       READING
    ---------------------------------------------- */

    .wealthStrategyArticleReading {

        width: 100%;

        margin-left: 0;

    }


    .wealthStrategyArticleReading p {

        font-size: 16px;

        line-height: 1.85;

    }


    .wealthStrategyArticleReading
    .wealthStrategyArticleLead {

        font-size: 19px;

        line-height: 1.7;

    }


    /* ---------------------------------------------
       POINTS
    ---------------------------------------------- */

    .wealthStrategyArticlePoint {

        display: block;

        margin-top: 65px;

        padding-top: 23px;

    }


    .wealthStrategyArticlePointMeta {

        flex-direction: row;

        align-items: center;

        gap: 12px;

        margin-bottom: 20px;

    }


    .wealthStrategyArticlePointMeta span {

        font-size: 25px;

    }


    .wealthStrategyArticlePointMeta small {

        font-size: 9px;

    }


    .wealthStrategyArticlePointContent h3 {

        margin-bottom: 18px;

        font-size: 28px;

        line-height: 1.18;

    }


    .wealthStrategyArticlePointContent p {

        font-size: 15px;

        line-height: 1.85;

    }


    /* ---------------------------------------------
       CLOSING
    ---------------------------------------------- */

    .wealthStrategyArticleClosing {

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;

        margin-top: 70px;

    }


    .wealthStrategyArticleClosing strong {

        font-size: 9px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .wealthStrategyArticle {

        padding: 65px 0 75px;

    }


    .wealthStrategyArticleContainer {

        width: calc(100% - 26px);

    }


    .wealthStrategyArticleHeaderContent h2 {

        font-size: 34px;

    }


    .wealthStrategyArticleReading p {

        font-size: 15px;

    }


    .wealthStrategyArticleReading
    .wealthStrategyArticleLead {

        font-size: 18px;

    }


    .wealthStrategyArticlePoint {

        margin-top: 55px;

    }


    .wealthStrategyArticlePointContent h3 {

        font-size: 25px;

    }


    .wealthStrategyArticlePointContent p {

        font-size: 15px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .wealthStrategyArticleContainer {

        width: calc(100% - 22px);

    }


    .wealthStrategyArticleHeaderContent h2 {

        font-size: 32px;

    }


    .wealthStrategyArticlePointContent h3 {

        font-size: 23px;

    }

}

/* Main Section Ends Here */

/* Key Section Starts Here */

/* =========================================================
   3. KEY WEALTH-BUILDING CONSIDERATIONS
========================================================= */

.wealthConsiderations {

    width: 100%;

    padding: 145px 0 155px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.wealthConsiderationsContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   HEADER
========================================================= */

.wealthConsiderationsHeader {

    display: grid;

    grid-template-columns: 150px minmax(0, 820px);

    gap: 55px;

    margin-bottom: 95px;

}


.wealthConsiderationsHeaderNumber {

    color: #c59a32;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 62px;

    line-height: 1;

    letter-spacing: -2px;

}


.wealthConsiderationsHeaderContent {

    position: relative;

    padding-left: 30px;

    border-left: 1px solid rgba(197,154,50,.2);

}


.wealthConsiderationsHeaderContent::before {

    content: "";

    position: absolute;

    top: 0;

    left: -1px;

    width: 1px;

    height: 100px;

    background: #c59a32;

}


.wealthConsiderationsKicker {

    display: block;

    margin-bottom: 20px;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.35px;

}


.wealthConsiderationsHeaderContent h2 {

    max-width: 800px;

    margin: 0;

    color: var(--primary);

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(48px, 5.3vw, 70px);

    line-height: 1.01;

    letter-spacing: -2.6px;

    font-weight: 400;

}


.wealthConsiderationsHeaderContent p {

    max-width: 690px;

    margin: 30px 0 0;

    color: var(--text);

    opacity: .52;

    font-size: 17px;

    line-height: 1.9;

}


.wealthConsiderationsHeaderContent p + p {

    margin-top: 14px;

    opacity: .4;

}


/* =========================================================
   CONSIDERATION LIST
========================================================= */

.wealthConsiderationsList {

    width: min(100%, 1000px);

    margin-left: 150px;

    border-top: 1px solid rgba(197,154,50,.17);

}


/* =========================================================
   EACH CONSIDERATION
========================================================= */

.wealthConsiderationItem {

    display: grid;

    grid-template-columns: 100px minmax(0, 1fr);

    gap: 45px;

    padding: 40px 0 44px;

    border-bottom: 1px solid rgba(197,154,50,.15);

}


.wealthConsiderationIndex {

    color: #c59a32;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 34px;

    line-height: 1;

    letter-spacing: -1px;

    padding-top: 3px;

}


.wealthConsiderationBody {

    position: relative;

    padding-right: 150px;

}


.wealthConsiderationCategory {

    position: absolute;

    top: 3px;

    right: 0;

    color: var(--text);

    opacity: .3;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.1px;

    text-align: right;

}


.wealthConsiderationBody h3 {

    max-width: 650px;

    margin: 0 0 19px;

    color: var(--primary);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 29px;

    line-height: 1.18;

    letter-spacing: -.7px;

    font-weight: 400;

}


.wealthConsiderationBody p {

    max-width: 700px;

    margin: 0 0 15px;

    color: var(--text);

    opacity: .49;

    font-size: 15px;

    line-height: 1.85;

}


.wealthConsiderationBody p:last-child {

    margin-bottom: 0;

}


/* =========================================================
   BOTTOM STATEMENT
========================================================= */

.wealthConsiderationsStatement {

    position: relative;

    display: grid;

    grid-template-columns: 150px minmax(0, 1fr);

    column-gap: 55px;

    margin-top: 125px;

    padding-top: 75px;

    border-top: 1px solid rgba(197,154,50,.17);

}


/* =========================================================
   LABEL
========================================================= */

.wealthStatementLabel {

    padding-top: 7px;

    color: var(--text);

    opacity: .28;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1px;

}


/* =========================================================
   MAIN STATEMENT
========================================================= */

.wealthStatementText {

    display: flex;

    flex-direction: column;

}


.wealthStatementText span {

    color: var(--primary);

    opacity: .38;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(38px, 4.8vw, 63px);

    line-height: 1;

    letter-spacing: -2px;

}


.wealthStatementText span:first-child {

    opacity: .8;

}


.wealthStatementText span:last-child {

    opacity: .65;

}


/* =========================================================
   CONTINUATION
========================================================= */

.wealthStatementContinuation {

    grid-column: 2;

    display: flex;

    flex-direction: column;

    margin-top: 42px;

}


.wealthStatementContinuation span {

    color: var(--primary);

    opacity: .35;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(31px, 3.7vw, 49px);

    line-height: 1.04;

    letter-spacing: -1.4px;

}


.wealthStatementContinuation .wealthStatementGold {

    color: #c59a32;

    opacity: 1;

}


/* =========================================================
   TAKEAWAY
========================================================= */

.wealthStatementTakeaway {

    grid-column: 2;

    display: flex;

    align-items: flex-start;

    gap: 22px;

    max-width: 690px;

    margin-top: 55px;

}


.wealthTakeawayLine {

    flex: 0 0 55px;

    width: 55px;

    height: 1px;

    margin-top: 11px;

    background: #c59a32;

    opacity: .55;

}


.wealthStatementTakeaway p {

    margin: 0;

    color: var(--text);

    opacity: .4;

    font-size: 14px;

    line-height: 1.8;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .wealthConsiderations {

        padding: 110px 0 120px;

    }


    .wealthConsiderationsHeader {

        grid-template-columns: 90px minmax(0, 1fr);

        gap: 35px;

        margin-bottom: 70px;

    }


    .wealthConsiderationsHeaderNumber {

        font-size: 51px;

    }


    .wealthConsiderationsHeaderContent h2 {

        font-size: clamp(42px, 5.8vw, 60px);

    }


    .wealthConsiderationsList {

        margin-left: 125px;

        width: calc(100% - 125px);

    }


    .wealthConsiderationItem {

        grid-template-columns: 75px minmax(0, 1fr);

        gap: 28px;

    }


    .wealthConsiderationBody {

        padding-right: 125px;

    }


    .wealthConsiderationBody h3 {

        font-size: 27px;

    }


    .wealthConsiderationsStatement {

        grid-template-columns: 125px minmax(0, 1fr);

        column-gap: 35px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .wealthConsiderations {

        padding: 80px 0 90px;

    }


    .wealthConsiderationsContainer {

        width: calc(100% - 30px);

    }


    /* ---------------------------------------------
       HEADER
    ---------------------------------------------- */

    .wealthConsiderationsHeader {

        display: block;

        margin-bottom: 55px;

    }


    .wealthConsiderationsHeaderNumber {

        margin-bottom: 20px;

        font-size: 45px;

    }


    .wealthConsiderationsHeaderContent {

        padding-left: 20px;

    }


    .wealthConsiderationsHeaderContent h2 {

        font-size: clamp(36px, 10vw, 50px);

        line-height: 1.05;

        letter-spacing: -1.4px;

    }


    .wealthConsiderationsHeaderContent p {

        font-size: 15px;

        line-height: 1.85;

    }


    /* ---------------------------------------------
       LIST
    ---------------------------------------------- */

    .wealthConsiderationsList {

        width: 100%;

        margin-left: 0;

    }


    .wealthConsiderationItem {

        display: block;

        padding: 30px 0 35px;

    }


    .wealthConsiderationIndex {

        margin-bottom: 17px;

        font-size: 27px;

    }


    .wealthConsiderationBody {

        padding-right: 0;

    }


    .wealthConsiderationCategory {

        position: static;

        margin-bottom: 13px;

        text-align: left;

    }


    .wealthConsiderationBody h3 {

        margin-bottom: 16px;

        font-size: 27px;

        line-height: 1.18;

    }


    .wealthConsiderationBody p {

        font-size: 15px;

        line-height: 1.85;

    }


    /* ---------------------------------------------
       STATEMENT
    ---------------------------------------------- */

    .wealthConsiderationsStatement {

        display: block;

        margin-top: 75px;

        padding-top: 50px;

    }


    .wealthStatementLabel {

        margin-bottom: 32px;

    }


    .wealthStatementText span {

        font-size: clamp(34px, 9vw, 46px);

        line-height: 1.02;

        letter-spacing: -1.2px;

    }


    .wealthStatementContinuation {

        margin-top: 35px;

    }


    .wealthStatementContinuation span {

        font-size: clamp(29px, 7.8vw, 39px);

        letter-spacing: -1px;

    }


    .wealthStatementTakeaway {

        margin-top: 40px;

        gap: 16px;

    }


    .wealthTakeawayLine {

        flex-basis: 35px;

        width: 35px;

    }


    .wealthStatementTakeaway p {

        font-size: 14px;

        line-height: 1.8;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .wealthConsiderations {

        padding: 65px 0 75px;

    }


    .wealthConsiderationsContainer {

        width: calc(100% - 26px);

    }


    .wealthConsiderationsHeaderContent h2 {

        font-size: 34px;

    }


    .wealthConsiderationsHeaderContent p {

        font-size: 15px;

    }


    .wealthConsiderationBody h3 {

        font-size: 25px;

    }


    .wealthConsiderationBody p {

        font-size: 15px;

    }


    .wealthStatementText span {

        font-size: 32px;

    }


    .wealthStatementContinuation span {

        font-size: 28px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .wealthConsiderationsContainer {

        width: calc(100% - 22px);

    }


    .wealthConsiderationsHeaderContent h2 {

        font-size: 32px;

    }


    .wealthConsiderationBody h3 {

        font-size: 23px;

    }


    .wealthStatementText span {

        font-size: 30px;

    }


    .wealthStatementContinuation span {

        font-size: 26px;

    }

}

/* Key Section Ends Here */

/* CTA Section Starts Here */

/* =========================================================
   4. FINAL ARTICLE CTA + RELATED INSIGHTS
   BUILDING WEALTH ARTICLE
========================================================= */

.wealthArticleEnding {

    width: 100%;

    padding: 130px 0 140px;

    background: var(--section);

    overflow: hidden;

    box-sizing: border-box;

}


.wealthArticleEndingContainer {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

}


/* =========================================================
   FINAL CTA
========================================================= */

.wealthArticleFinalCTA {

    display: grid;

    grid-template-columns: minmax(0, 1fr) minmax(350px, .72fr);

    gap: 90px;

    padding: 78px 0 90px;

    border-top: 1px solid rgba(197,154,50,.16);

    border-bottom: 1px solid rgba(197,154,50,.16);

}


/* =========================================================
   LEFT CTA CONTENT
========================================================= */

.wealthArticleCTAContent {

    max-width: 700px;

}


.wealthArticleCTAPrefix {

    display: block;

    margin-bottom: 23px;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.4px;

}


.wealthArticleCTAContent h2 {

    max-width: 700px;

    margin: 0;

    color: var(--primary);

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(45px, 5.2vw, 68px);

    line-height: 1.03;

    letter-spacing: -2.5px;

    font-weight: 400;

}


.wealthArticleCTAContent p {

    max-width: 655px;

    margin: 29px 0 0;

    color: var(--text);

    opacity: .53;

    font-size: 16px;

    line-height: 1.9;

}


.wealthArticleCTAContent p + p {

    margin-top: 15px;

    opacity: .4;

}


/* =========================================================
   CTA ACTIONS
========================================================= */

.wealthArticleCTAActions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 36px;

}


.wealthArticlePrimaryBtn,
.wealthArticleSecondaryBtn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 48px;

    padding: 0 23px;

    text-decoration: none;

    font-size: 10px;

    line-height: 1.3;

    font-weight: 700;

    letter-spacing: .55px;

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease;

    box-sizing: border-box;

}


.wealthArticlePrimaryBtn {

    color: #fff;

    background: #c59a32;

    border: 1px solid #c59a32;

}


.wealthArticleSecondaryBtn {

    color: var(--primary);

    background: transparent;

    border: 1px solid rgba(197,154,50,.32);

}


.wealthArticlePrimaryBtn:hover,
.wealthArticleSecondaryBtn:hover {

    transform: translateY(-2px);

}


/* =========================================================
   RIGHT EDITORIAL DETAIL
========================================================= */

.wealthArticleCTADetail {

    position: relative;

    min-height: 440px;

    padding: 30px 0 25px 45px;

    border-left: 1px solid rgba(197,154,50,.2);

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.wealthArticleCTADetail::before {

    content: "";

    position: absolute;

    left: -1px;

    top: 0;

    width: 1px;

    height: 105px;

    background: #c59a32;

}


/* =========================================================
   CTA INDEX
========================================================= */

.wealthArticleCTAIndex {

    position: absolute;

    top: 0;

    right: 0;

    color: var(--text);

    opacity: .27;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.1px;

}


/* =========================================================
   TYPOGRAPHIC WORD STACK
========================================================= */

.wealthArticleCTAWords {

    display: flex;

    flex-direction: column;

    gap: 4px;

    color: var(--primary);

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(31px, 3.5vw, 47px);

    line-height: .98;

    letter-spacing: -1.3px;

}


.wealthArticleCTAWords span {

    opacity: .3;

}


.wealthArticleCTAWords .wealthGoldWord {

    color: #c59a32;

    opacity: 1;

}


/* =========================================================
   CTA STATEMENT
========================================================= */

.wealthArticleCTAStatement {

    display: flex;

    flex-direction: column;

    margin-top: 52px;

}


.wealthArticleCTAStatement span {

    color: var(--primary);

    opacity: .38;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 16px;

    line-height: 1.15;

    letter-spacing: 2.5px;

}


.wealthArticleCTAStatement .wealthCTAStatementGold {

    color: #c59a32;

    opacity: 1;

}


/* =========================================================
   DETAIL RULE
========================================================= */

.wealthArticleCTARule {

    width: 72px;

    height: 1px;

    margin-top: 34px;

    background: #c59a32;

    opacity: .45;

}


.wealthArticleCTAMeta {

    margin-top: 17px;

    color: var(--text);

    opacity: .25;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1px;

}


/* =========================================================
   RELATED INSIGHTS
========================================================= */

.wealthRelatedInsights {

    padding-top: 105px;

}


.wealthRelatedHeader {

    display: flex;

    align-items: center;

    gap: 30px;

    margin-bottom: 30px;

}


.wealthRelatedHeader > span {

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.4px;

    white-space: nowrap;

}


.wealthRelatedHeaderLine {

    flex: 1;

    height: 1px;

    background: rgba(197,154,50,.14);

}


/* =========================================================
   RELATED ARTICLES
========================================================= */

.wealthRelatedList {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    border-top: 1px solid rgba(197,154,50,.14);

}


.wealthRelatedArticle {

    display: flex;

    flex-direction: column;

    min-height: 395px;

    padding: 30px 28px 30px 0;

    border-right: 1px solid rgba(197,154,50,.14);

    box-sizing: border-box;

}


.wealthRelatedArticle + .wealthRelatedArticle {

    padding-left: 28px;

}


.wealthRelatedArticle:last-child {

    padding-right: 0;

    border-right: none;

}


/* =========================================================
   ARTICLE NUMBER
========================================================= */

.wealthRelatedNumber {

    margin-bottom: 38px;

    color: var(--primary);

    opacity: .15;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 35px;

    line-height: 1;

}


/* =========================================================
   ARTICLE CONTENT
========================================================= */

.wealthRelatedContent {

    display: flex;

    flex-direction: column;

    flex: 1;

}


.wealthRelatedCategory {

    margin-bottom: 16px;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1px;

}


.wealthRelatedContent h3 {

    margin: 0;

    color: var(--primary);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 27px;

    line-height: 1.17;

    letter-spacing: -.6px;

    font-weight: 400;

}


.wealthRelatedContent p {

    margin: 19px 0 0;

    color: var(--text);

    opacity: .45;

    font-size: 14px;

    line-height: 1.8;

}


.wealthRelatedContent a {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    width: fit-content;

    margin-top: auto;

    padding-top: 28px;

    color: var(--primary);

    text-decoration: none;

    font-size: 10px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: .5px;

}


.wealthRelatedContent a span {

    color: #c59a32;

    transition: transform .25s ease;

}


.wealthRelatedContent a:hover span {

    transform: translateX(4px);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .wealthArticleEnding {

        padding: 105px 0 115px;

    }


    .wealthArticleFinalCTA {

        grid-template-columns: minmax(0, 1fr) minmax(300px, .7fr);

        gap: 55px;

    }


    .wealthArticleCTAContent h2 {

        font-size: clamp(40px, 5.5vw, 58px);

    }


    .wealthArticleCTADetail {

        padding-left: 35px;

    }


    .wealthArticleCTAWords {

        font-size: 37px;

    }


    .wealthRelatedContent h3 {

        font-size: 24px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .wealthArticleEnding {

        padding: 75px 0 85px;

    }


    .wealthArticleEndingContainer {

        width: calc(100% - 30px);

    }


    /* ---------------------------------------------
       CTA
    ---------------------------------------------- */

    .wealthArticleFinalCTA {

        display: block;

        padding: 55px 0 65px;

    }


    .wealthArticleCTAPrefix {

        margin-bottom: 18px;

    }


    .wealthArticleCTAContent h2 {

        font-size: clamp(35px, 10vw, 49px);

        line-height: 1.06;

        letter-spacing: -1.4px;

    }


    .wealthArticleCTAContent p {

        font-size: 15px;

        line-height: 1.85;

    }


    .wealthArticleCTAActions {

        flex-direction: column;

        align-items: stretch;

        margin-top: 30px;

    }


    .wealthArticlePrimaryBtn,
    .wealthArticleSecondaryBtn {

        width: 100%;

        min-height: 48px;

    }


    /* ---------------------------------------------
       RIGHT DETAIL
    ---------------------------------------------- */

    .wealthArticleCTADetail {

        min-height: 410px;

        margin-top: 70px;

        padding: 55px 0 30px 22px;

    }


    .wealthArticleCTAIndex {

        top: 0;

        right: 0;

    }


    .wealthArticleCTAWords {

        font-size: 34px;

    }


    .wealthArticleCTAStatement {

        margin-top: 43px;

    }


    .wealthArticleCTAStatement span {

        font-size: 15px;

    }


    /* ---------------------------------------------
       RELATED
    ---------------------------------------------- */

    .wealthRelatedInsights {

        padding-top: 70px;

    }


    .wealthRelatedList {

        display: block;

    }


    .wealthRelatedArticle {

        min-height: auto;

        padding: 30px 0 38px;

        border-right: none;

        border-bottom: 1px solid rgba(197,154,50,.14);

    }


    .wealthRelatedArticle + .wealthRelatedArticle {

        padding-left: 0;

    }


    .wealthRelatedArticle:last-child {

        padding-right: 0;

        border-bottom: none;

    }


    .wealthRelatedNumber {

        margin-bottom: 22px;

        font-size: 30px;

    }


    .wealthRelatedContent h3 {

        font-size: 27px;

    }


    .wealthRelatedContent p {

        font-size: 15px;

        line-height: 1.85;

    }


    .wealthRelatedContent a {

        margin-top: 25px;

        padding-top: 0;

        font-size: 10px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .wealthArticleEnding {

        padding: 65px 0 75px;

    }


    .wealthArticleEndingContainer {

        width: calc(100% - 26px);

    }


    .wealthArticleCTAContent h2 {

        font-size: 34px;

    }


    .wealthArticleCTAContent p {

        font-size: 15px;

    }


    .wealthArticleCTADetail {

        min-height: 380px;

        padding-left: 18px;

    }


    .wealthArticleCTAWords {

        font-size: 31px;

    }


    .wealthRelatedContent h3 {

        font-size: 25px;

    }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .wealthArticleEndingContainer {

        width: calc(100% - 22px);

    }


    .wealthArticleCTAContent h2 {

        font-size: 32px;

    }


    .wealthArticleCTAWords {

        font-size: 28px;

    }


    .wealthRelatedContent h3 {

        font-size: 23px;

    }

}

/* CTA Section Ends Here */

/* Blogs-4 Page Ends Here */


/* Contact Us Page Starts Here */

/* Hero Section Starts Here */

/* =========================================================
   CONTACT HERO
   MONEY RICH FINSERV
========================================================= */

.contactHero {
    position: relative;

    width: 100%;

    background: var(--section);

    color: var(--primary);

    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.contactHeroContainer {
    width: min(1280px, calc(100% - 60px));

    margin: 0 auto;
}


/* =========================================================
   TOP META
========================================================= */

.contactHeroTop {
    display: grid;

    grid-template-columns: 1fr 1fr 1fr;

    align-items: center;

    min-height: 58px;

    border-bottom: 1px solid rgba(197,154,50,.16);
}

.contactHeroTop span {
    color: var(--text);

    opacity: .42;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1.15px;
}

.contactHeroTop span:nth-child(2) {
    text-align: center;

    color: #c59a32;

    opacity: 1;
}

.contactHeroTop span:last-child {
    text-align: right;
}


/* =========================================================
   MAIN GRID
========================================================= */

.contactHeroGrid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(430px, .85fr);

    gap: 80px;

    padding: 90px 0 85px;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.contactHeroContent {
    max-width: 700px;

    align-self: center;
}


/* =========================================================
   EYEBROW
========================================================= */

.contactHeroEyebrow {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 25px;
}

.contactHeroEyebrow span {
    width: 40px;

    height: 1px;

    background: #c59a32;
}

.contactHeroEyebrow p {
    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1.4px;

    text-transform: uppercase;
}


/* =========================================================
   HEADING
========================================================= */

.contactHeroContent h1 {
    max-width: 720px;

    margin: 0;

    color: var(--primary);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(
        48px,
        5.5vw,
        75px
    );

    line-height: 1.01;

    letter-spacing: -2.8px;

    font-weight: 400;
}

.contactHeroContent h1 em {
    display: block;

    color: #c59a32;

    font-style: normal;

    font-weight: 400;
}


/* =========================================================
   LEAD
========================================================= */

.contactHeroLead {
    max-width: 610px;

    margin: 32px 0 0;

    color: var(--text);

    opacity: .62;

    font-size: 10.5px;

    line-height: 1.9;
}


/* =========================================================
   SECONDARY TEXT
========================================================= */

.contactHeroSecondaryText {
    max-width: 570px;

    margin: 16px 0 0;

    padding-left: 14px;

    border-left: 1px solid rgba(197,154,50,.4);

    color: var(--text);

    opacity: .45;

    font-size: 10px;

    line-height: 1.85;
}


/* =========================================================
   TOPICS
========================================================= */

.contactHeroTopics {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 27px;
}

.contactHeroTopics span {
    color: var(--text);

    opacity: .5;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: .9px;
}

.contactHeroTopics span:not(:last-child)::after {
    content: "·";

    margin-left: 10px;

    color: #c59a32;
}


/* =========================================================
   ACTIONS
========================================================= */

.contactHeroActions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 32px;
}


/* =========================================================
   PRIMARY
========================================================= */

.contactHeroPrimary {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    min-height: 48px;

    padding: 0 23px;

    background: var(--primary);

    border: 1px solid var(--primary);

    color: var(--section);

    text-decoration: none;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: .6px;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .3s ease;
}

.contactHeroPrimary span {
    color: #c59a32;

    font-size: 13px;

    transition: transform .3s ease;
}

.contactHeroPrimary:hover {
    background: #c59a32;

    border-color: #c59a32;

    color: #fff;

    transform: translateY(-2px);
}

.contactHeroPrimary:hover span {
    color: #fff;

    transform: translate(3px, -3px);
}


/* =========================================================
   SECONDARY
========================================================= */

.contactHeroSecondary {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    min-height: 48px;

    padding: 0 21px;

    border: 1px solid rgba(197,154,50,.3);

    color: var(--primary);

    text-decoration: none;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: .6px;

    transition:
        color .3s ease,
        border-color .3s ease,
        background .3s ease;
}

.contactHeroSecondary span {
    color: #c59a32;

    font-size: 12px;
}

.contactHeroSecondary:hover {
    color: #c59a32;

    border-color: rgba(197,154,50,.6);

    background: rgba(197,154,50,.035);
}


/* =========================================================
   DISCLAIMER
========================================================= */

.contactHeroDisclaimer {
    margin: 18px 0 0;

    color: var(--text);

    opacity: .32;

    font-size: 9px;

    line-height: 1.7;
}


/* =========================================================
   RIGHT CONTACT PANEL
========================================================= */

.contactHeroPanel {
    position: relative;

    min-height: 560px;

    padding: 32px 32px 25px;

    border: 1px solid rgba(197,154,50,.18);

    background:
        linear-gradient(
            145deg,
            rgba(197,154,50,.035),
            transparent 55%
        );

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;
}


/* =========================================================
   PANEL NUMBER
========================================================= */

.contactHeroPanelNumber {
    position: absolute;

    top: -24px;

    right: 5px;

    color: #c59a32;

    opacity: .10;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 155px;

    line-height: 1;

    letter-spacing: -10px;

    pointer-events: none;
}


/* =========================================================
   PANEL HEADER
========================================================= */

.contactHeroPanelHeader {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    padding-bottom: 25px;

    border-bottom: 1px solid rgba(197,154,50,.16);
}

.contactHeroPanelHeader > div span {
    color: var(--text);

    opacity: .38;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1.1px;
}

.contactHeroPanelHeader h2 {
    margin: 9px 0 0;

    color: var(--primary);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 42px;

    line-height: 1;

    font-weight: 400;

    letter-spacing: -1.5px;
}

.contactHeroPanelMark {
    color: #c59a32;

    font-size: 22px;

    line-height: 1;
}


/* =========================================================
   PANEL MESSAGE
========================================================= */

.contactHeroPanelMessage {
    position: relative;

    z-index: 2;

    padding: 28px 0 30px;
}

.contactHeroPanelMessage p {
    margin: 0;

    color: var(--text);

    opacity: .45;

    font-size: 10px;

    line-height: 1.7;
}

.contactHeroPanelMessage strong {
    display: block;

    margin-top: 6px;

    color: var(--primary);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 27px;

    line-height: 1.15;

    font-weight: 400;
}


/* =========================================================
   CONTACT ROUTES
========================================================= */

.contactHeroRoutes {
    position: relative;

    z-index: 2;

    border-top: 1px solid rgba(197,154,50,.13);
}


/* =========================================================
   SINGLE ROUTE
========================================================= */

.contactHeroRoute {
    display: grid;

    grid-template-columns:
        35px
        1fr
        25px;

    gap: 14px;

    align-items: center;

    min-height: 82px;

    border-bottom: 1px solid rgba(197,154,50,.13);

    transition:
        padding-left .3s ease,
        background .3s ease;
}

.contactHeroRoute:hover {
    padding-left: 7px;

    background: rgba(197,154,50,.035);
}

.contactHeroRouteNumber {
    color: #c59a32;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: .7px;
}

.contactHeroRouteContent span {
    display: block;

    margin-bottom: 5px;

    color: var(--text);

    opacity: .35;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: .8px;
}

.contactHeroRouteContent strong {
    color: var(--primary);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 15px;

    line-height: 1.3;

    font-weight: 400;
}

.contactHeroRouteArrow {
    color: #c59a32;

    font-size: 15px;

    text-align: right;
}


/* =========================================================
   PANEL FOOTER
========================================================= */

.contactHeroPanelFooter {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding-top: 19px;
}

.contactHeroPanelFooter span,
.contactHeroPanelFooter strong {
    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: .8px;
}

.contactHeroPanelFooter span {
    color: var(--text);

    opacity: .3;
}

.contactHeroPanelFooter strong {
    color: #c59a32;

    text-align: right;
}


/* =========================================================
   BOTTOM STATEMENT
========================================================= */

.contactHeroBottom {
    display: grid;

    grid-template-columns: .8fr 1.2fr;

    align-items: center;

    min-height: 92px;

    border-top: 1px solid rgba(197,154,50,.18);
}


/* =========================================================
   BOTTOM STATEMENT
========================================================= */

.contactHeroBottomStatement {
    display: flex;

    align-items: baseline;

    gap: 11px;
}

.contactHeroBottomStatement > span {
    color: #c59a32;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1px;
}

.contactHeroBottomStatement strong {
    color: var(--primary);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 20px;

    line-height: 1;

    font-weight: 400;
}

.contactHeroBottomStatement p {
    margin: 0;

    color: var(--text);

    opacity: .4;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: .8px;
}


/* =========================================================
   BOTTOM META
========================================================= */

.contactHeroBottomMeta {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    flex-wrap: wrap;

    gap: 9px;
}

.contactHeroBottomMeta span {
    color: var(--text);

    opacity: .35;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: .7px;
}

.contactHeroBottomMeta i {
    color: #c59a32;

    font-size: 9px;

    font-style: normal;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .contactHeroContainer {
        width: min(100% - 45px, 1100px);
    }

    .contactHeroGrid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(370px, .85fr);

        gap: 50px;

        padding: 75px 0 70px;
    }

    .contactHeroContent h1 {
        font-size: clamp(
            43px,
            6vw,
            64px
        );
    }

    .contactHeroPanel {
        min-height: 540px;

        padding: 28px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 850px) {

    .contactHeroTop {
        grid-template-columns: 1fr 1fr;
    }

    .contactHeroTop span:nth-child(2) {
        display: none;
    }

    .contactHeroTop span:last-child {
        text-align: right;
    }

    .contactHeroGrid {
        grid-template-columns: 1fr;

        gap: 55px;

        padding: 70px 0 65px;
    }

    .contactHeroContent {
        max-width: 720px;
    }

    .contactHeroPanel {
        min-height: 510px;

        max-width: 650px;
    }

    .contactHeroBottom {
        grid-template-columns: 1fr;

        gap: 18px;

        padding: 22px 0;
    }

    .contactHeroBottomMeta {
        justify-content: flex-start;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .contactHeroContainer {
        width: calc(100% - 30px);
    }


    /* TOP */

    .contactHeroTop {
        min-height: 48px;
    }

    .contactHeroTop span {
        font-size: 9px;

        letter-spacing: .7px;
    }


    /* MAIN */

    .contactHeroGrid {
        gap: 43px;

        padding: 55px 0 52px;
    }


    /* EYEBROW */

    .contactHeroEyebrow {
        gap: 9px;

        margin-bottom: 20px;
    }

    .contactHeroEyebrow span {
        width: 28px;
    }

    .contactHeroEyebrow p {
        font-size: 9px;

        letter-spacing: 1px;
    }


    /* HEADING */

    .contactHeroContent h1 {
        font-size: clamp(
            36px,
            10vw,
            50px
        );

        line-height: 1.04;

        letter-spacing: -1.5px;
    }


    /* TEXT */

    .contactHeroLead {
        margin-top: 24px;

        font-size: 9px;

        line-height: 1.9;
    }

    .contactHeroSecondaryText {
        margin-top: 12px;

        font-size: 9px;

        line-height: 1.8;
    }


    /* TOPICS */

    .contactHeroTopics {
        gap: 7px;

        margin-top: 22px;
    }

    .contactHeroTopics span {
        font-size: 9px;
    }

    .contactHeroTopics span:not(:last-child)::after {
        margin-left: 7px;
    }


    /* BUTTONS */

    .contactHeroActions {
        flex-direction: column;

        align-items: stretch;

        gap: 9px;

        margin-top: 26px;
    }

    .contactHeroPrimary,
    .contactHeroSecondary {
        width: 100%;

        box-sizing: border-box;

        min-height: 46px;
    }


    /* DISCLAIMER */

    .contactHeroDisclaimer {
        font-size: 9px;

        line-height: 1.75;
    }


    /* PANEL */

    .contactHeroPanel {
        min-height: 505px;

        padding: 23px 20px 20px;
    }

    .contactHeroPanelNumber {
        top: -8px;

        right: 0;

        font-size: 105px;
    }


    /* PANEL HEADER */

    .contactHeroPanelHeader {
        padding-bottom: 20px;
    }

    .contactHeroPanelHeader h2 {
        font-size: 34px;
    }


    /* MESSAGE */

    .contactHeroPanelMessage {
        padding: 23px 0;
    }

    .contactHeroPanelMessage strong {
        font-size: 23px;
    }


    /* ROUTES */

    .contactHeroRoute {
        grid-template-columns:
            27px
            1fr
            18px;

        gap: 9px;

        min-height: 76px;
    }

    .contactHeroRouteContent span {
        font-size: 9px;
    }

    .contactHeroRouteContent strong {
        font-size: 13px;
    }

    .contactHeroRouteArrow {
        font-size: 13px;
    }


    /* PANEL FOOTER */

    .contactHeroPanelFooter {
        flex-direction: column;

        align-items: flex-start;

        gap: 8px;
    }

    .contactHeroPanelFooter strong {
        text-align: left;
    }


    /* BOTTOM */

    .contactHeroBottom {
        min-height: auto;

        gap: 17px;

        padding: 20px 0;
    }

    .contactHeroBottomStatement {
        flex-wrap: wrap;

        gap: 7px;
    }

    .contactHeroBottomStatement strong {
        font-size: 18px;
    }

    .contactHeroBottomMeta {
        justify-content: flex-start;

        gap: 7px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .contactHeroContainer {
        width: calc(100% - 24px);
    }

    .contactHeroContent h1 {
        font-size: 34px;
    }

    .contactHeroPanel {
        padding-left: 16px;

        padding-right: 16px;
    }

    .contactHeroPanelHeader h2 {
        font-size: 31px;
    }

    .contactHeroRouteContent strong {
        font-size: 12px;
    }

}

/* Hero Section Ends Here */

/* Intro Section Starts Here */

/* =========================================================
   CONTACT INTRODUCTION
   MONEY RICH FINSERV
========================================================= */

.contactIntro {
    position: relative;

    width: 100%;

    background: var(--section);

    color: var(--primary);

    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.contactIntroContainer {
    width: min(1280px, calc(100% - 60px));

    margin: 0 auto;
}


/* =========================================================
   MAIN GRID
========================================================= */

.contactIntroGrid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(420px, .75fr);

    gap: 100px;

    padding: 120px 0;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.contactIntroContent {
    max-width: 700px;

    align-self: start;
}


/* =========================================================
   EYEBROW
========================================================= */

.contactIntroEyebrow {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 27px;
}

.contactIntroEyebrow span {
    width: 42px;

    height: 1px;

    background: #c59a32;
}

.contactIntroEyebrow p {
    margin: 0;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1.3px;

    text-transform: uppercase;
}


/* =========================================================
   HEADING
========================================================= */

.contactIntroContent h2 {
    max-width: 720px;

    margin: 0;

    color: var(--primary);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(
        43px,
        5vw,
        68px
    );

    line-height: 1.04;

    letter-spacing: -2.4px;

    font-weight: 400;
}

.contactIntroContent h2 em {
    display: block;

    color: #c59a32;

    font-style: normal;
}


/* =========================================================
   TEXT
========================================================= */

.contactIntroText {
    max-width: 620px;

    margin-top: 35px;
}

.contactIntroText p {
    margin: 0 0 16px;

    color: var(--text);

    opacity: .58;

    font-size: 10.5px;

    line-height: 1.9;
}

.contactIntroText p:first-child {
    color: var(--primary);

    opacity: .85;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 18px;

    line-height: 1.45;
}

.contactIntroText p:nth-last-child(1) {
    margin-bottom: 0;
}


/* =========================================================
   EDITORIAL STATEMENT
========================================================= */

.contactIntroStatement {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 42px;

    padding-top: 20px;

    border-top: 1px solid rgba(197,154,50,.18);
}

.contactIntroStatement span {
    color: var(--text);

    opacity: .32;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: .9px;
}

.contactIntroStatement strong {
    color: var(--primary);

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: .7px;
}

.contactIntroStatement i {
    color: #c59a32;

    font-size: 13px;

    font-style: normal;
}


/* =========================================================
   RIGHT — STEPS
========================================================= */

.contactIntroSteps {
    position: relative;

    border-top: 1px solid rgba(197,154,50,.18);
}


/* =========================================================
   STEP
========================================================= */

.contactIntroStep {
    position: relative;

    padding: 30px 0 29px;

    border-bottom: 1px solid rgba(197,154,50,.16);

    transition:
        padding-left .3s ease,
        background .3s ease;
}

.contactIntroStep:hover {
    padding-left: 12px;
}


/* =========================================================
   STEP HEADER
========================================================= */

.contactIntroStepHeader {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 25px;
}

.contactIntroStepNumber {
    color: #c59a32;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 24px;

    line-height: 1;

    font-weight: 400;
}

.contactIntroStepCategory {
    color: var(--text);

    opacity: .4;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1.2px;
}


/* =========================================================
   STEP BODY
========================================================= */

.contactIntroStepBody {
    max-width: 470px;
}

.contactIntroStepBody h3 {
    margin: 0 0 11px;

    color: var(--primary);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 27px;

    line-height: 1.18;

    letter-spacing: -.6px;

    font-weight: 400;
}

.contactIntroStepBody p {
    margin: 0;

    color: var(--text);

    opacity: .52;

    font-size: 10px;

    line-height: 1.85;
}


/* =========================================================
   STEP FOOTER
========================================================= */

.contactIntroStepFooter {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: 27px;
}

.contactIntroStepFooter span {
    color: var(--text);

    opacity: .27;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: .8px;
}

.contactIntroStepFooter span:last-child {
    color: #c59a32;

    opacity: .8;
}


/* =========================================================
   LAST STEP
========================================================= */

.contactIntroStepLast {
    padding-bottom: 31px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .contactIntroContainer {
        width: min(100% - 45px, 1100px);
    }

    .contactIntroGrid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(360px, .8fr);

        gap: 65px;

        padding: 95px 0;
    }

    .contactIntroContent h2 {
        font-size: clamp(
            40px,
            5.7vw,
            60px
        );
    }

}


/* =========================================================
   TABLET / STACK
========================================================= */

@media (max-width: 850px) {

    .contactIntroGrid {
        grid-template-columns: 1fr;

        gap: 70px;

        padding: 85px 0;
    }

    .contactIntroContent {
        max-width: 760px;
    }

    .contactIntroSteps {
        max-width: 700px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .contactIntroContainer {
        width: calc(100% - 30px);
    }

    .contactIntroGrid {
        gap: 52px;

        padding: 70px 0;
    }


    /* EYEBROW */

    .contactIntroEyebrow {
        gap: 9px;

        margin-bottom: 20px;
    }

    .contactIntroEyebrow span {
        width: 28px;
    }


    /* HEADING */

    .contactIntroContent h2 {
        font-size: clamp(
            36px,
            10vw,
            50px
        );

        line-height: 1.05;

        letter-spacing: -1.5px;
    }


    /* TEXT */

    .contactIntroText {
        margin-top: 27px;
    }

    .contactIntroText p {
        margin-bottom: 14px;

        font-size: 9px;

        line-height: 1.9;
    }

    .contactIntroText p:first-child {
        font-size: 16px;

        line-height: 1.45;
    }


    /* STATEMENT */

    .contactIntroStatement {
        gap: 8px;

        margin-top: 30px;

        padding-top: 17px;
    }

    .contactIntroStatement span,
    .contactIntroStatement strong {
        font-size: 9px;
    }


    /* STEPS */

    .contactIntroStep {
        padding: 25px 0;
    }

    .contactIntroStep:hover {
        padding-left: 5px;
    }

    .contactIntroStepHeader {
        margin-bottom: 21px;
    }

    .contactIntroStepNumber {
        font-size: 21px;
    }

    .contactIntroStepBody h3 {
        font-size: 23px;

        line-height: 1.2;
    }

    .contactIntroStepBody p {
        font-size: 9px;

        line-height: 1.85;
    }

    .contactIntroStepFooter {
        margin-top: 22px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .contactIntroContainer {
        width: calc(100% - 24px);
    }

    .contactIntroContent h2 {
        font-size: 34px;
    }

    .contactIntroText p:first-child {
        font-size: 15px;
    }

    .contactIntroStepBody h3 {
        font-size: 21px;
    }

}

/* Intro Section Ends Here */

/* Forms Section Starts Here */

/* =========================================================
   CONTACT / CONSULTATION FORM
   MONEY RICH FINSERV
========================================================= */

.contactFormSection {
    position: relative;
    width: 100%;
    background: var(--section);
    color: var(--primary);
    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.contactFormContainer {
    width: min(1280px, calc(100% - 60px));
    margin: 0 auto;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.contactFormHeader {
    max-width: 800px;
    padding: 115px 0 72px;
}


/* =========================================================
   EYEBROW
========================================================= */

.contactFormEyebrow {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 27px;
}

.contactFormEyebrow span {
    width: 44px;
    height: 1px;
    background: #c59a32;
}

.contactFormEyebrow p {
    margin: 0;
    color: #c59a32;
    font-size: 10px;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: 1.35px;
    text-transform: uppercase;
}


/* =========================================================
   HEADER HEADING
========================================================= */

.contactFormHeader h2 {
    margin: 0;
    color: var(--primary);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(46px, 5.3vw, 70px);
    line-height: 1.02;
    letter-spacing: -2.5px;
    font-weight: 400;
}

.contactFormHeader h2 em {
    color: #c59a32;
    font-style: normal;
}


/* =========================================================
   HEADER DESCRIPTION
========================================================= */

.contactFormHeaderDescription {
    max-width: 640px;
    margin: 29px 0 0;
    color: var(--text);
    opacity: .65;
    font-size: 12px;
    line-height: 1.9;
}


/* =========================================================
   MAIN FORM LAYOUT
========================================================= */

.contactFormLayout {
    display: grid;

    grid-template-columns:
        minmax(290px, .56fr)
        minmax(0, 1.44fr);

    gap: 85px;

    padding-bottom: 120px;
}


/* =========================================================
   LEFT ASIDE
========================================================= */

.contactFormAside {
    position: relative;

    min-height: 720px;

    padding-right: 40px;

    border-right: 1px solid rgba(197,154,50,.22);

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    overflow: hidden;
}


/* =========================================================
   LARGE EDITORIAL NUMBER
========================================================= */

.contactFormAsideNumber {
    position: absolute;

    top: -38px;
    right: 0;

    color: #c59a32;
    opacity: .08;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 155px;
    line-height: 1;

    letter-spacing: -11px;

    pointer-events: none;
}


/* =========================================================
   ASIDE CONTENT
========================================================= */

.contactFormAsideContent {
    position: relative;
    z-index: 2;

    padding-top: 10px;
}

.contactFormAsideLabel {
    display: block;

    margin-bottom: 17px;

    color: #c59a32;

    font-size: 10px;
    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1.15px;
}

.contactFormAsideContent h3 {
    max-width: 350px;

    margin: 0;

    color: var(--primary);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 40px;
    line-height: 1.08;

    letter-spacing: -1.4px;

    font-weight: 400;
}

.contactFormAsideContent h3 strong {
    display: block;

    color: #c59a32;

    font-weight: 400;
}

.contactFormAsideContent p {
    max-width: 350px;

    margin: 25px 0 0;

    color: var(--text);

    opacity: .58;

    font-size: 11px;
    line-height: 1.9;
}


/* =========================================================
   PROCESS
========================================================= */

.contactFormProcess {
    position: relative;

    z-index: 2;

    max-width: 350px;

    margin-top: 60px;
}

.contactFormProcessItem {
    display: grid;

    grid-template-columns: 38px 1fr;

    gap: 14px;

    align-items: center;
}

.contactFormProcessItem span {
    color: #c59a32;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 20px;

    line-height: 1;
}

.contactFormProcessItem p {
    margin: 0;

    color: var(--primary);

    font-size: 11px;

    line-height: 1.55;

    font-weight: 600;
}

.contactFormProcessLine {
    width: 1px;

    height: 29px;

    margin: 7px 0 7px 18px;

    background: rgba(197,154,50,.25);
}


/* =========================================================
   ASIDE FOOTER
========================================================= */

.contactFormAsideFooter {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 9px;

    padding-top: 21px;

    border-top: 1px solid rgba(197,154,50,.18);
}

.contactFormAsideFooter span,
.contactFormAsideFooter strong {
    font-size: 10px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: .85px;
}

.contactFormAsideFooter span {
    color: var(--text);

    opacity: .38;
}

.contactFormAsideFooter strong {
    color: #c59a32;
}


/* =========================================================
   FORM WRAPPER
========================================================= */

.contactFormWrapper {
    min-width: 0;
}


/* =========================================================
   FORM
========================================================= */

.contactForm {
    width: 100%;
}


/* =========================================================
   TWO COLUMN FIELD ROW
========================================================= */

.contactFormRow {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 55px;
}


/* =========================================================
   FIELD
========================================================= */

.contactFormField {
    position: relative;

    min-width: 0;

    margin-bottom: 47px;
}


/* =========================================================
   FIELD LABEL
========================================================= */

.contactFormField label {
    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 14px;

    color: var(--primary);

    opacity: .72;

    font-size: 11px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1.15px;

    cursor: text;
}

.contactFormField label span {
    color: #c59a32;

    opacity: 1;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 15px;

    font-weight: 400;

    letter-spacing: 0;
}


/* =========================================================
   INPUT / SELECT / TEXTAREA
========================================================= */

.contactFormField input,
.contactFormField select,
.contactFormField textarea {
    display: block;

    width: 100%;

    box-sizing: border-box;

    padding: 13px 0 16px;

    border: 0;

    border-bottom: 1px solid rgba(197,154,50,.32);

    border-radius: 0;

    outline: none;

    background: transparent;

    color: var(--primary);

    font-family: inherit;

    font-size: 12px;

    line-height: 1.65;

    font-weight: 400;

    transition:
        border-color .3s ease,
        color .3s ease,
        padding-left .3s ease;
}


/* =========================================================
   PLACEHOLDER
========================================================= */

.contactFormField input::placeholder,
.contactFormField textarea::placeholder {
    color: var(--primary);

    opacity: .52;

    font-size: 12px;
}


/* =========================================================
   FOCUS
========================================================= */

.contactFormField input:focus,
.contactFormField select:focus,
.contactFormField textarea:focus {
    border-bottom-color: #c59a32;

    color: var(--primary);
}


/* =========================================================
   SELECT
========================================================= */

.contactFormSelectWrap {
    position: relative;
}

.contactFormSelectWrap::after {
    content: "↓";

    position: absolute;

    right: 0;

    bottom: 17px;

    color: #c59a32;

    font-size: 13px;

    line-height: 1;

    pointer-events: none;
}

.contactFormField select {
    appearance: none;

    -webkit-appearance: none;

    padding-right: 35px;

    cursor: pointer;
}

.contactFormField select option {
    background: var(--section);

    color: var(--primary);

    font-size: 12px;
}


/* =========================================================
   TEXTAREA
========================================================= */

.contactFormField textarea {
    min-height: 155px;

    padding-top: 13px;

    resize: vertical;

    line-height: 1.85;
}


/* =========================================================
   FULL WIDTH FIELD
========================================================= */

.contactFormFullField {
    width: 100%;
}


/* =========================================================
   CONSENT
========================================================= */

.contactFormConsent {
    margin-top: 5px;

    padding: 23px 0;

    border-top: 1px solid rgba(197,154,50,.18);

    border-bottom: 1px solid rgba(197,154,50,.18);
}

.contactFormCheckbox {
    display: flex;

    align-items: flex-start;

    gap: 13px;

    cursor: pointer;
}


/* =========================================================
   HIDDEN CHECKBOX
========================================================= */

.contactFormCheckbox input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;

    pointer-events: none;
}


/* =========================================================
   CHECKBOX
========================================================= */

.contactFormCheckmark {
    flex: 0 0 15px;

    width: 15px;
    height: 15px;

    margin-top: 2px;

    border: 1px solid rgba(197,154,50,.5);

    position: relative;

    transition:
        background .25s ease,
        border-color .25s ease;
}

.contactFormCheckbox input:checked + .contactFormCheckmark {
    background: #c59a32;

    border-color: #c59a32;
}

.contactFormCheckbox input:checked + .contactFormCheckmark::after {
    content: "";

    position: absolute;

    left: 4px;
    top: 1px;

    width: 5px;
    height: 9px;

    border: solid #fff;

    border-width: 0 1px 1px 0;

    transform: rotate(45deg);
}


/* =========================================================
   CONSENT TEXT
========================================================= */

.contactFormConsentText {
    max-width: 700px;

    color: var(--text);

    opacity: .58;

    font-size: 10px;

    line-height: 1.8;
}


/* =========================================================
   SUBMIT AREA
========================================================= */

.contactFormSubmitArea {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;

    padding-top: 31px;
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.contactFormSubmit {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 16px;

    min-height: 53px;

    padding: 0 27px;

    border: 1px solid var(--primary);

    background: var(--primary);

    color: var(--section);

    font-family: inherit;

    font-size: 10px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: .7px;

    cursor: pointer;

    transition:
        background .3s ease,
        border-color .3s ease,
        color .3s ease,
        transform .3s ease;
}

.contactFormSubmit span {
    color: #c59a32;

    font-size: 14px;

    transition: transform .3s ease;
}

.contactFormSubmit:hover {
    background: #c59a32;

    border-color: #c59a32;

    color: #fff;

    transform: translateY(-2px);
}

.contactFormSubmit:hover span {
    color: #fff;

    transform: translate(3px, -3px);
}


/* =========================================================
   DIRECT CONSULTATION
========================================================= */

.contactFormDirect {
    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 6px;

    text-align: right;
}

.contactFormDirect span {
    color: var(--text);

    opacity: .42;

    font-size: 10px;

    line-height: 1.5;
}

.contactFormDirect a {
    color: var(--primary);

    text-decoration: none;

    font-size: 10px;

    line-height: 1.5;

    font-weight: 700;

    transition: color .3s ease;
}

.contactFormDirect a strong {
    margin-left: 7px;

    color: #c59a32;

    font-size: 13px;
}

.contactFormDirect a:hover {
    color: #c59a32;
}


/* =========================================================
   FORM FOOTER
========================================================= */

.contactFormFooter {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: 30px;

    padding-top: 18px;

    border-top: 1px solid rgba(197,154,50,.14);
}

.contactFormFooter span {
    color: var(--text);

    opacity: .3;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: .8px;
}

.contactFormFooter span:last-child {
    text-align: right;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .contactFormContainer {
        width: min(100% - 45px, 1100px);
    }

    .contactFormLayout {
        grid-template-columns:
            minmax(250px, .55fr)
            minmax(0, 1.45fr);

        gap: 60px;
    }

    .contactFormRow {
        gap: 35px;
    }

    .contactFormHeader h2 {
        font-size: clamp(
            43px,
            5.8vw,
            63px
        );
    }

}


/* =========================================================
   TABLET STACK
========================================================= */

@media (max-width: 850px) {

    .contactFormHeader {
        padding-top: 90px;

        padding-bottom: 55px;
    }

    .contactFormLayout {
        grid-template-columns: 1fr;

        gap: 65px;

        padding-bottom: 90px;
    }

    .contactFormAside {
        min-height: auto;

        padding-right: 0;

        padding-bottom: 38px;

        border-right: 0;

        border-bottom: 1px solid rgba(197,154,50,.22);
    }

    .contactFormAsideContent h3 {
        max-width: 500px;
    }

    .contactFormAsideContent p {
        max-width: 600px;
    }

    .contactFormProcess {
        display: grid;

        grid-template-columns: 1fr 1fr 1fr;

        gap: 25px;

        max-width: 100%;

        margin-top: 42px;
    }

    .contactFormProcessLine {
        display: none;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .contactFormContainer {
        width: calc(100% - 30px);
    }


    /* HEADER */

    .contactFormHeader {
        padding: 70px 0 45px;
    }

    .contactFormEyebrow {
        gap: 9px;

        margin-bottom: 20px;
    }

    .contactFormEyebrow span {
        width: 29px;
    }

    .contactFormEyebrow p {
        font-size: 9px;
    }

    .contactFormHeader h2 {
        font-size: clamp(
            36px,
            10vw,
            50px
        );

        line-height: 1.05;

        letter-spacing: -1.5px;
    }

    .contactFormHeaderDescription {
        margin-top: 23px;

        font-size: 10px;

        line-height: 1.9;
    }


    /* LAYOUT */

    .contactFormLayout {
        gap: 48px;

        padding-bottom: 70px;
    }


    /* ASIDE */

    .contactFormAside {
        padding-bottom: 30px;
    }

    .contactFormAsideNumber {
        top: -17px;

        font-size: 110px;
    }

    .contactFormAsideContent h3 {
        font-size: 32px;

        line-height: 1.1;
    }

    .contactFormAsideContent p {
        margin-top: 19px;

        font-size: 10px;

        line-height: 1.85;
    }


    /* PROCESS */

    .contactFormProcess {
        display: flex;

        flex-direction: column;

        gap: 0;

        margin-top: 33px;
    }

    .contactFormProcessItem {
        grid-template-columns: 31px 1fr;
    }

    .contactFormProcessItem span {
        font-size: 18px;
    }

    .contactFormProcessItem p {
        font-size: 10px;
    }

    .contactFormProcessLine {
        display: block;

        height: 20px;

        margin: 5px 0 5px 15px;
    }


    /* FORM ROW */

    .contactFormRow {
        grid-template-columns: 1fr;

        gap: 0;
    }


    /* FIELDS */

    .contactFormField {
        margin-bottom: 35px;
    }

    .contactFormField label {
        gap: 9px;

        margin-bottom: 11px;

        font-size: 10px;
    }

    .contactFormField label span {
        font-size: 14px;
    }

    .contactFormField input,
    .contactFormField select,
    .contactFormField textarea {
        padding: 12px 0 14px;

        font-size: 11px;

        line-height: 1.65;
    }

    .contactFormField input::placeholder,
    .contactFormField textarea::placeholder {
        font-size: 11px;

        opacity: .5;
    }


    /* SELECT */

    .contactFormSelectWrap::after {
        bottom: 15px;

        font-size: 12px;
    }


    /* TEXTAREA */

    .contactFormField textarea {
        min-height: 135px;
    }


    /* CONSENT */

    .contactFormConsent {
        padding: 19px 0;
    }

    .contactFormConsentText {
        font-size: 9px;

        line-height: 1.75;
    }


    /* SUBMIT */

    .contactFormSubmitArea {
        flex-direction: column;

        align-items: stretch;

        gap: 23px;

        padding-top: 25px;
    }

    .contactFormSubmit {
        width: 100%;

        min-height: 50px;

        font-size: 10px;
    }

    .contactFormDirect {
        align-items: flex-start;

        text-align: left;
    }

    .contactFormDirect span,
    .contactFormDirect a {
        font-size: 9px;
    }


    /* FOOTER */

    .contactFormFooter {
        flex-direction: column;

        align-items: flex-start;

        gap: 8px;
    }

    .contactFormFooter span:last-child {
        text-align: left;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .contactFormContainer {
        width: calc(100% - 24px);
    }

    .contactFormHeader h2 {
        font-size: 34px;
    }

    .contactFormAsideContent h3 {
        font-size: 29px;
    }

    .contactFormField label {
        font-size: 10px;
    }

    .contactFormField input,
    .contactFormField select,
    .contactFormField textarea {
        font-size: 11px;
    }

}

/* Forms Section Ends Here */

/* Expect Section Starts Here */

/* =========================================================
   CONTACT — WHAT TO EXPECT
   MONEY RICH FINSERV
========================================================= */

.contactExpect {
    position: relative;

    width: 100%;

    background: var(--section);

    color: var(--primary);

    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.contactExpectContainer {
    width: min(1280px, calc(100% - 60px));

    margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.contactExpectHeader {
    max-width: 820px;

    padding: 120px 0 78px;
}


/* =========================================================
   EYEBROW
========================================================= */

.contactExpectEyebrow {
    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 27px;
}

.contactExpectEyebrow span {
    width: 44px;

    height: 1px;

    background: #c59a32;
}

.contactExpectEyebrow p {
    margin: 0;

    color: #c59a32;

    font-size: 10px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1.3px;

    text-transform: uppercase;
}


/* =========================================================
   HEADER HEADING
========================================================= */

.contactExpectHeader h2 {
    margin: 0;

    color: var(--primary);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(
        46px,
        5.3vw,
        70px
    );

    line-height: 1.03;

    letter-spacing: -2.5px;

    font-weight: 400;
}

.contactExpectHeader h2 em {
    color: #c59a32;

    font-style: normal;
}


/* =========================================================
   HEADER DESCRIPTION
========================================================= */

.contactExpectDescription {
    max-width: 650px;

    margin: 28px 0 0;

    color: var(--text);

    opacity: .62;

    font-size: 12px;

    line-height: 1.9;
}


/* =========================================================
   FOUR STAGES
========================================================= */

.contactExpectStages {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    border-top: 1px solid rgba(197,154,50,.22);

    border-bottom: 1px solid rgba(197,154,50,.22);
}


/* =========================================================
   INDIVIDUAL STAGE
========================================================= */

.contactExpectStage {
    position: relative;

    min-height: 370px;

    padding: 32px 38px 29px 0;

    border-right: 1px solid rgba(197,154,50,.18);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    transition:
        padding-left .3s ease,
        background .3s ease;
}

.contactExpectStage:not(:first-child) {
    padding-left: 38px;
}

.contactExpectStage:hover {
    background: rgba(197,154,50,.025);

    padding-top: 37px;
}

.contactExpectStage:last-child {
    border-right: 0;
}


/* =========================================================
   STAGE TOP
========================================================= */

.contactExpectStageTop {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;
}

.contactExpectNumber {
    color: #c59a32;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 30px;

    line-height: 1;

    font-weight: 400;
}

.contactExpectLabel {
    color: var(--text);

    opacity: .38;

    font-size: 10px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1.2px;
}


/* =========================================================
   STAGE CONTENT
========================================================= */

.contactExpectStageContent {
    max-width: 245px;

    margin-top: 50px;
}

.contactExpectStageContent h3 {
    margin: 0 0 16px;

    color: var(--primary);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 31px;

    line-height: 1.1;

    letter-spacing: -.8px;

    font-weight: 400;
}

.contactExpectStageContent p {
    margin: 0;

    color: var(--text);

    opacity: .58;

    font-size: 11px;

    line-height: 1.9;
}


/* =========================================================
   STAGE META
========================================================= */

.contactExpectStageMeta {
    color: #c59a32;

    opacity: .62;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: .9px;
}


/* =========================================================
   BOTTOM STATEMENT
========================================================= */

.contactExpectStatement {
    display: grid;

    grid-template-columns: 1px minmax(0, 1fr) auto;

    gap: 38px;

    align-items: end;

    padding: 75px 0 115px;
}


/* =========================================================
   STATEMENT RULE
========================================================= */

.contactExpectStatementRule {
    width: 1px;

    height: 150px;

    background: #c59a32;
}


/* =========================================================
   STATEMENT CONTENT
========================================================= */

.contactExpectStatementContent {
    max-width: 760px;
}

.contactExpectStatementContent > span {
    display: block;

    margin-bottom: 19px;

    color: var(--text);

    opacity: .35;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1px;
}

.contactExpectStatementContent h3 {
    margin: 0;

    color: var(--primary);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(
        28px,
        3.2vw,
        45px
    );

    line-height: 1.12;

    letter-spacing: -1.3px;

    font-weight: 400;
}

.contactExpectStatementContent h3 em {
    color: #c59a32;

    font-style: normal;
}


/* =========================================================
   STATEMENT META
========================================================= */

.contactExpectStatementMeta {
    display: flex;

    align-items: center;

    gap: 10px;

    padding-bottom: 3px;

    white-space: nowrap;
}

.contactExpectStatementMeta span,
.contactExpectStatementMeta strong {
    color: var(--text);

    opacity: .32;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: .7px;
}

.contactExpectStatementMeta i {
    color: #c59a32;

    font-size: 11px;

    font-style: normal;
}

.contactExpectStatementMeta strong {
    color: #c59a32;

    opacity: .8;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .contactExpectContainer {
        width: min(100% - 45px, 1100px);
    }

    .contactExpectStages {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .contactExpectStage {
        min-height: 320px;

        padding: 30px 30px 27px 0;
    }

    .contactExpectStage:not(:first-child) {
        padding-left: 30px;
    }

    .contactExpectStage:nth-child(2) {
        border-right: 0;
    }

    .contactExpectStage:nth-child(-n+2) {
        border-bottom: 1px solid rgba(197,154,50,.18);
    }

    .contactExpectStageContent {
        max-width: 300px;
    }

    .contactExpectStatement {
        grid-template-columns: 1px minmax(0, 1fr);

        gap: 30px;
    }

    .contactExpectStatementMeta {
        grid-column: 2;

        padding-bottom: 0;

        margin-top: 25px;
    }

}


/* =========================================================
   TABLET / SMALL
========================================================= */

@media (max-width: 750px) {

    .contactExpectHeader {
        padding-top: 90px;

        padding-bottom: 60px;
    }

    .contactExpectStages {
        grid-template-columns: 1fr;
    }

    .contactExpectStage,
    .contactExpectStage:not(:first-child) {
        min-height: auto;

        padding: 29px 0;

        border-right: 0;

        border-bottom: 1px solid rgba(197,154,50,.18);
    }

    .contactExpectStage:last-child {
        border-bottom: 0;
    }

    .contactExpectStage:hover {
        padding-top: 33px;

        padding-left: 5px;
    }

    .contactExpectStageContent {
        max-width: 560px;

        margin-top: 35px;

        margin-bottom: 35px;
    }

    .contactExpectStageContent h3 {
        font-size: 28px;
    }

    .contactExpectStatement {
        padding: 60px 0 90px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .contactExpectContainer {
        width: calc(100% - 30px);
    }


    /* HEADER */

    .contactExpectHeader {
        padding: 70px 0 45px;
    }

    .contactExpectEyebrow {
        gap: 9px;

        margin-bottom: 20px;
    }

    .contactExpectEyebrow span {
        width: 29px;
    }

    .contactExpectEyebrow p {
        font-size: 9px;
    }

    .contactExpectHeader h2 {
        font-size: clamp(
            36px,
            10vw,
            50px
        );

        line-height: 1.05;

        letter-spacing: -1.5px;
    }

    .contactExpectDescription {
        margin-top: 22px;

        font-size: 10px;

        line-height: 1.9;
    }


    /* STAGES */

    .contactExpectStage,
    .contactExpectStage:not(:first-child) {
        padding: 25px 0;
    }

    .contactExpectStage:hover {
        padding-top: 29px;

        padding-left: 4px;
    }

    .contactExpectNumber {
        font-size: 24px;
    }

    .contactExpectLabel {
        font-size: 9px;
    }

    .contactExpectStageContent {
        margin-top: 31px;

        margin-bottom: 31px;
    }

    .contactExpectStageContent h3 {
        margin-bottom: 11px;

        font-size: 25px;
    }

    .contactExpectStageContent p {
        font-size: 10px;

        line-height: 1.85;
    }

    .contactExpectStageMeta {
        font-size: 9px;
    }


    /* STATEMENT */

    .contactExpectStatement {
        grid-template-columns: 1px minmax(0, 1fr);

        gap: 20px;

        padding: 50px 0 70px;
    }

    .contactExpectStatementRule {
        height: 155px;
    }

    .contactExpectStatementContent > span {
        font-size: 9px;

        margin-bottom: 14px;
    }

    .contactExpectStatementContent h3 {
        font-size: clamp(
            24px,
            7vw,
            32px
        );

        line-height: 1.14;

        letter-spacing: -.8px;
    }

    .contactExpectStatementMeta {
        grid-column: 2;

        flex-wrap: wrap;

        gap: 7px;

        margin-top: 21px;
    }

    .contactExpectStatementMeta span,
    .contactExpectStatementMeta strong {
        font-size: 9px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .contactExpectContainer {
        width: calc(100% - 24px);
    }

    .contactExpectHeader h2 {
        font-size: 34px;
    }

    .contactExpectStageContent h3 {
        font-size: 23px;
    }

    .contactExpectStatement {
        gap: 16px;
    }

    .contactExpectStatementContent h3 {
        font-size: 23px;
    }

}

/* Expect Section Ends Here */

/* Connect Section Starts Here */

/* =========================================================
   CONTACT — VISIT / CONNECT
   MONEY RICH FINSERV
========================================================= */

.contactConnect {
    position: relative;

    width: 100%;

    background: var(--section);

    color: var(--primary);

    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.contactConnectContainer {
    width: min(1280px, calc(100% - 60px));

    margin: 0 auto;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.contactConnectHeader {
    max-width: 850px;

    padding: 120px 0 70px;
}


/* =========================================================
   EYEBROW
========================================================= */

.contactConnectEyebrow {
    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 27px;
}

.contactConnectEyebrow span {
    width: 44px;

    height: 1px;

    background: #c59a32;
}

.contactConnectEyebrow p {
    margin: 0;

    color: #c59a32;

    font-size: 10px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1.3px;

    text-transform: uppercase;
}


/* =========================================================
   HEADING
========================================================= */

.contactConnectHeader h2 {
    margin: 0;

    color: var(--primary);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(
        45px,
        5.2vw,
        70px
    );

    line-height: 1.03;

    letter-spacing: -2.4px;

    font-weight: 400;
}

.contactConnectHeader h2 em {
    color: #c59a32;

    font-style: normal;
}


/* =========================================================
   MAIN GRID
========================================================= */

.contactConnectGrid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(390px, .85fr);

    gap: 85px;

    padding-bottom: 105px;
}


/* =========================================================
   LEFT OPTIONS
========================================================= */

.contactConnectOptions {
    border-top: 1px solid rgba(197,154,50,.22);
}


/* =========================================================
   OPTION
========================================================= */

.contactConnectOption {
    display: grid;

    grid-template-columns: 70px minmax(0, 1fr) auto;

    gap: 28px;

    align-items: center;

    min-height: 190px;

    padding: 30px 0;

    border-bottom: 1px solid rgba(197,154,50,.18);

    transition:
        padding-left .3s ease,
        background .3s ease;
}

.contactConnectOption:hover {
    padding-left: 10px;
}


/* =========================================================
   OPTION TOP / NUMBER
========================================================= */

.contactConnectOptionTop {
    display: flex;

    flex-direction: column;

    gap: 10px;

    align-self: start;
}

.contactConnectNumber {
    color: #c59a32;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 25px;

    line-height: 1;

    font-weight: 400;
}

.contactConnectType {
    color: var(--text);

    opacity: .38;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1px;
}


/* =========================================================
   OPTION BODY
========================================================= */

.contactConnectOptionBody {
    min-width: 0;
}

.contactConnectOptionBody h3 {
    margin: 0 0 12px;

    color: var(--primary);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 28px;

    line-height: 1.15;

    letter-spacing: -.6px;

    font-weight: 400;
}


/* =========================================================
   PHONE / EMAIL
========================================================= */

.contactConnectValue {
    display: inline-block;

    color: var(--text);

    opacity: .6;

    font-size: 11px;

    line-height: 1.6;

    text-decoration: none;

    transition:
        color .3s ease,
        opacity .3s ease;
}

.contactConnectValue:hover {
    color: #c59a32;

    opacity: 1;
}


/* =========================================================
   ADDRESS
========================================================= */

.contactConnectAddress {
    margin: 0;

    color: var(--text);

    opacity: .56;

    font-size: 11px;

    line-height: 1.8;
}


/* =========================================================
   ACTION
========================================================= */

.contactConnectAction {
    display: inline-flex;

    align-items: center;

    gap: 11px;

    color: var(--primary);

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: .6px;

    text-decoration: none;

    white-space: nowrap;

    transition: color .3s ease;
}

.contactConnectAction span {
    color: #c59a32;

    font-size: 13px;

    transition: transform .3s ease;
}

.contactConnectAction:hover {
    color: #c59a32;
}

.contactConnectAction:hover span {
    transform: translate(3px, -3px);
}


/* =========================================================
   RIGHT LOCATION PANEL
========================================================= */

.contactConnectPanel {
    position: relative;

    min-height: 570px;

    padding: 38px 40px 32px;

    border: 1px solid rgba(197,154,50,.2);

    background:
        linear-gradient(
            135deg,
            rgba(197,154,50,.045),
            transparent 50%
        );

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;
}


/* =========================================================
   PANEL DECORATIVE RULE
========================================================= */

.contactConnectPanel::before {
    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 2px;

    height: 115px;

    background: #c59a32;
}


/* =========================================================
   PANEL NUMBER
========================================================= */

.contactConnectPanelNumber {
    color: #c59a32;

    opacity: .12;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 85px;

    line-height: .8;

    letter-spacing: -5px;
}


/* =========================================================
   PANEL TOP
========================================================= */

.contactConnectPanelTop {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 25px;
}

.contactConnectPanelEyebrow {
    display: block;

    margin-bottom: 12px;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1.15px;
}

.contactConnectPanelTop h3 {
    margin: 0;

    color: var(--primary);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 42px;

    line-height: 1;

    letter-spacing: -1px;

    font-weight: 400;
}


/* =========================================================
   PANEL DETAILS
========================================================= */

.contactConnectPanelDetails {
    margin: 55px 0 45px;

    border-top: 1px solid rgba(197,154,50,.17);
}


/* =========================================================
   PANEL ITEM
========================================================= */

.contactConnectPanelItem {
    display: grid;

    grid-template-columns: 105px minmax(0, 1fr);

    gap: 25px;

    padding: 20px 0;

    border-bottom: 1px solid rgba(197,154,50,.13);
}

.contactConnectPanelItem > span {
    color: var(--text);

    opacity: .36;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: .9px;
}

.contactConnectPanelItem p,
.contactConnectPanelItem a {
    margin: 0;

    color: var(--primary);

    font-size: 10px;

    line-height: 1.8;

    text-decoration: none;

    transition: color .3s ease;
}

.contactConnectPanelItem a:hover {
    color: #c59a32;
}


/* =========================================================
   PANEL FOOTER
========================================================= */

.contactConnectPanelFooter {
    display: flex;

    flex-direction: column;

    gap: 8px;

    padding-top: 20px;

    border-top: 1px solid rgba(197,154,50,.16);
}

.contactConnectPanelFooter span,
.contactConnectPanelFooter strong {
    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: .75px;
}

.contactConnectPanelFooter span {
    color: var(--text);

    opacity: .3;
}

.contactConnectPanelFooter strong {
    color: #c59a32;

    opacity: .75;
}


/* =========================================================
   BOTTOM EDITORIAL STRIP
========================================================= */

.contactConnectBottom {
    display: grid;

    grid-template-columns: 1px minmax(0, 1fr) auto;

    gap: 35px;

    align-items: center;

    padding: 35px 0 100px;
}


/* =========================================================
   GOLD LINE
========================================================= */

.contactConnectBottomLine {
    width: 1px;

    height: 75px;

    background: #c59a32;
}


/* =========================================================
   BOTTOM CONTENT
========================================================= */

.contactConnectBottomContent {
    max-width: 620px;
}

.contactConnectBottomContent > span {
    display: block;

    margin-bottom: 10px;

    color: var(--text);

    opacity: .32;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1px;
}

.contactConnectBottomContent p {
    margin: 0;

    color: var(--primary);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 22px;

    line-height: 1.3;

    font-weight: 400;
}

.contactConnectBottomContent strong {
    color: #c59a32;

    font-weight: 400;
}


/* =========================================================
   BOTTOM SEQUENCE
========================================================= */

.contactConnectBottomSequence {
    display: flex;

    align-items: center;

    gap: 10px;

    white-space: nowrap;
}

.contactConnectBottomSequence span,
.contactConnectBottomSequence strong {
    color: var(--text);

    opacity: .32;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: .7px;
}

.contactConnectBottomSequence i {
    color: #c59a32;

    font-size: 11px;

    font-style: normal;
}

.contactConnectBottomSequence strong {
    color: #c59a32;

    opacity: .8;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .contactConnectContainer {
        width: min(100% - 45px, 1100px);
    }

    .contactConnectGrid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(350px, .8fr);

        gap: 55px;
    }

    .contactConnectOption {
        grid-template-columns:
            55px minmax(0, 1fr) auto;

        gap: 20px;
    }

    .contactConnectOptionBody h3 {
        font-size: 25px;
    }

    .contactConnectPanel {
        padding: 32px;
    }

}


/* =========================================================
   TABLET STACK
========================================================= */

@media (max-width: 850px) {

    .contactConnectHeader {
        padding-top: 90px;

        padding-bottom: 55px;
    }

    .contactConnectGrid {
        grid-template-columns: 1fr;

        gap: 55px;

        padding-bottom: 75px;
    }

    .contactConnectPanel {
        min-height: 500px;

        max-width: 700px;
    }

    .contactConnectBottom {
        grid-template-columns:
            1px minmax(0, 1fr);

        gap: 28px;
    }

    .contactConnectBottomSequence {
        grid-column: 2;

        margin-top: 10px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .contactConnectContainer {
        width: calc(100% - 30px);
    }


    /* HEADER */

    .contactConnectHeader {
        padding: 70px 0 45px;
    }

    .contactConnectEyebrow {
        gap: 9px;

        margin-bottom: 20px;
    }

    .contactConnectEyebrow span {
        width: 29px;
    }

    .contactConnectEyebrow p {
        font-size: 9px;
    }

    .contactConnectHeader h2 {
        font-size: clamp(
            36px,
            10vw,
            50px
        );

        line-height: 1.05;

        letter-spacing: -1.5px;
    }


    /* GRID */

    .contactConnectGrid {
        gap: 42px;

        padding-bottom: 55px;
    }


    /* OPTIONS */

    .contactConnectOption {
        grid-template-columns:
            42px minmax(0, 1fr);

        gap: 16px;

        min-height: auto;

        padding: 27px 0;
    }

    .contactConnectOption:hover {
        padding-left: 4px;
    }

    .contactConnectOptionTop {
        gap: 8px;
    }

    .contactConnectNumber {
        font-size: 21px;
    }

    .contactConnectType {
        font-size: 9px;
    }

    .contactConnectOptionBody h3 {
        margin-bottom: 9px;

        font-size: 23px;
    }

    .contactConnectValue,
    .contactConnectAddress {
        font-size: 10px;
    }

    .contactConnectAction {
        grid-column: 2;

        justify-self: start;

        margin-top: -2px;

        font-size: 9px;
    }


    /* PANEL */

    .contactConnectPanel {
        min-height: auto;

        padding: 29px 23px 25px;
    }

    .contactConnectPanelNumber {
        font-size: 65px;
    }

    .contactConnectPanelTop h3 {
        font-size: 34px;
    }

    .contactConnectPanelDetails {
        margin: 38px 0 35px;
    }

    .contactConnectPanelItem {
        grid-template-columns:
            85px minmax(0, 1fr);

        gap: 15px;

        padding: 17px 0;
    }

    .contactConnectPanelItem p,
    .contactConnectPanelItem a {
        font-size: 9px;

        line-height: 1.75;
    }


    /* BOTTOM */

    .contactConnectBottom {
        grid-template-columns: 1px minmax(0, 1fr);

        gap: 19px;

        padding: 25px 0 70px;
    }

    .contactConnectBottomLine {
        height: 100px;
    }

    .contactConnectBottomContent p {
        font-size: 19px;
    }

    .contactConnectBottomSequence {
        flex-wrap: wrap;

        gap: 7px;

        margin-top: 8px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .contactConnectContainer {
        width: calc(100% - 24px);
    }

    .contactConnectHeader h2 {
        font-size: 34px;
    }

    .contactConnectOptionBody h3 {
        font-size: 21px;
    }

    .contactConnectPanel {
        padding: 25px 19px 22px;
    }

    .contactConnectPanelItem {
        grid-template-columns: 75px minmax(0, 1fr);

        gap: 12px;
    }

}

/* Connect Section Ends Here */

/* CTA Section Starts Here */

/* =========================================================
   CONTACT FINAL CTA
   MONEY RICH FINSERV
========================================================= */

.contactFinalCTA {
    position: relative;

    width: 100%;

    background: var(--section);

    color: var(--primary);

    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.contactFinalCTAContainer {
    width: min(1280px, calc(100% - 60px));

    margin: 0 auto;
}


/* =========================================================
   TOP LABEL
========================================================= */

.contactFinalCTATop {
    display: flex;

    align-items: center;

    gap: 14px;

    padding-top: 110px;

    margin-bottom: 62px;
}

.contactFinalCTALine {
    width: 48px;

    height: 1px;

    background: #c59a32;
}

.contactFinalCTATop p {
    margin: 0;

    color: #c59a32;

    font-size: 10px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1.35px;
}


/* =========================================================
   MAIN GRID
========================================================= */

.contactFinalCTAGrid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(310px, .65fr);

    gap: 100px;

    padding-bottom: 105px;
}


/* =========================================================
   MAIN CONTENT
========================================================= */

.contactFinalCTAContent {
    max-width: 790px;
}


/* =========================================================
   HEADING
========================================================= */

.contactFinalCTAContent h2 {
    margin: 0;

    color: var(--primary);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(
        46px,
        5.5vw,
        74px
    );

    line-height: 1.02;

    letter-spacing: -2.8px;

    font-weight: 400;
}

.contactFinalCTAContent h2 em {
    color: #c59a32;

    font-style: normal;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.contactFinalCTADescription {
    max-width: 650px;

    margin: 34px 0 0;

    color: var(--text);

    opacity: .64;

    font-size: 12px;

    line-height: 1.95;
}


/* =========================================================
   SECONDARY TEXT
========================================================= */

.contactFinalCTASecondaryText {
    max-width: 620px;

    margin: 17px 0 0;

    color: var(--primary);

    opacity: .72;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 17px;

    line-height: 1.5;
}


/* =========================================================
   ACTIONS
========================================================= */

.contactFinalCTAActions {
    display: flex;

    align-items: center;

    gap: 25px;

    margin-top: 38px;
}


/* =========================================================
   PRIMARY BUTTON
========================================================= */

.contactFinalCTAPrimary {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 16px;

    min-height: 48px;

    padding: 0 23px;

    background: #c59a32;

    color: #fff;

    font-size: 10px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: .4px;

    text-decoration: none;

    transition:
        background .3s ease,
        transform .3s ease;
}

.contactFinalCTAPrimary span {
    font-size: 14px;

    transition: transform .3s ease;
}

.contactFinalCTAPrimary:hover {
    background: #ad8428;

    transform: translateY(-2px);
}

.contactFinalCTAPrimary:hover span {
    transform: translate(3px, -3px);
}


/* =========================================================
   SECONDARY BUTTON
========================================================= */

.contactFinalCTASecondary {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding-bottom: 7px;

    border-bottom: 1px solid rgba(197,154,50,.45);

    color: var(--primary);

    font-size: 10px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: .4px;

    text-decoration: none;

    transition:
        color .3s ease,
        border-color .3s ease;
}

.contactFinalCTASecondary span {
    color: #c59a32;

    font-size: 13px;
}

.contactFinalCTASecondary:hover {
    color: #c59a32;

    border-color: #c59a32;
}


/* =========================================================
   RIGHT CONVERSATION INDEX
========================================================= */

.contactFinalCTAIndex {
    align-self: start;

    border-top: 1px solid rgba(197,154,50,.24);

    border-bottom: 1px solid rgba(197,154,50,.24);
}


/* =========================================================
   INDEX HEADER
========================================================= */

.contactFinalCTAIndexHeader {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding: 18px 0;

    border-bottom: 1px solid rgba(197,154,50,.15);
}

.contactFinalCTAIndexHeader span,
.contactFinalCTAIndexHeader strong {
    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: .9px;
}

.contactFinalCTAIndexHeader span {
    color: var(--text);

    opacity: .4;
}

.contactFinalCTAIndexHeader strong {
    color: #c59a32;

    opacity: .8;
}


/* =========================================================
   INDEX LIST
========================================================= */

.contactFinalCTAIndexList {
    padding: 7px 0;
}


/* =========================================================
   INDEX ITEM
========================================================= */

.contactFinalCTAIndexItem {
    display: grid;

    grid-template-columns: 40px 1fr;

    align-items: center;

    gap: 17px;

    min-height: 62px;

    border-bottom: 1px solid rgba(197,154,50,.11);
}

.contactFinalCTAIndexItem:last-child {
    border-bottom: 0;
}

.contactFinalCTAIndexItem span {
    color: #c59a32;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 16px;

    line-height: 1;
}

.contactFinalCTAIndexItem strong {
    color: var(--primary);

    font-size: 14px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1.1px;
}

.contactFinalCTAIndexItem .goldWord {
    color: #c59a32;
}


/* =========================================================
   INDEX DETAIL
========================================================= */

.contactFinalCTAIndexDetail {
    padding: 25px 0 28px;

    border-top: 1px solid rgba(197,154,50,.15);
}

.contactFinalCTAIndexDetail > span {
    display: block;

    margin-bottom: 9px;

    color: var(--text);

    opacity: .32;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: .9px;
}

.contactFinalCTAIndexDetail p {
    max-width: 220px;

    margin: 0;

    color: var(--primary);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 18px;

    line-height: 1.3;
}

.contactFinalCTAIndexDetail strong {
    color: #c59a32;

    font-weight: 400;
}


/* =========================================================
   STATEMENT
========================================================= */

.contactFinalCTAStatement {
    display: grid;

    grid-template-columns: 1px minmax(0, 1fr);

    gap: 35px;

    padding: 82px 0 85px;

    border-top: 1px solid rgba(197,154,50,.18);
}


/* =========================================================
   STATEMENT RULE
========================================================= */

.contactFinalCTAStatementRule {
    width: 1px;

    height: 185px;

    background: #c59a32;
}


/* =========================================================
   STATEMENT CONTENT
========================================================= */

.contactFinalCTAStatementContent {
    max-width: 800px;
}

.contactFinalCTAStatementContent > span {
    display: block;

    margin-bottom: 18px;

    color: var(--text);

    opacity: .32;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1px;
}

.contactFinalCTAStatementContent h3 {
    margin: 0;

    color: var(--primary);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(
        31px,
        4vw,
        53px
    );

    line-height: 1.08;

    letter-spacing: -1.6px;

    font-weight: 400;
}

.contactFinalCTAStatementContent h3 em {
    color: #c59a32;

    font-style: normal;
}


/* =========================================================
   BOTTOM SEQUENCE
========================================================= */

.contactFinalCTABottom {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    padding: 25px 0 95px;

    border-top: 1px solid rgba(197,154,50,.14);
}

.contactFinalCTABottom span,
.contactFinalCTABottom strong {
    color: var(--text);

    opacity: .35;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: .8px;
}

.contactFinalCTABottom i {
    color: #c59a32;

    font-size: 11px;

    font-style: normal;
}

.contactFinalCTABottom strong {
    color: #c59a32;

    opacity: .85;
}


/* =========================================================
   MOBILE BREAK
========================================================= */

.contactFinalCTAMobileBreak {
    display: none;
}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

    .contactFinalCTAContainer {
        width: min(100% - 45px, 1100px);
    }

    .contactFinalCTAGrid {
        gap: 60px;
    }

    .contactFinalCTAContent h2 {
        font-size: clamp(
            43px,
            6vw,
            64px
        );
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 850px) {

    .contactFinalCTATop {
        padding-top: 85px;

        margin-bottom: 50px;
    }

    .contactFinalCTAGrid {
        grid-template-columns: 1fr;

        gap: 60px;

        padding-bottom: 75px;
    }

    .contactFinalCTAIndex {
        max-width: 620px;
    }

    .contactFinalCTAStatement {
        padding-top: 65px;

        padding-bottom: 70px;
    }

    .contactFinalCTABottom {
        justify-content: flex-start;

        flex-wrap: wrap;

        padding-bottom: 75px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .contactFinalCTAContainer {
        width: calc(100% - 30px);
    }


    /* TOP */

    .contactFinalCTATop {
        padding-top: 70px;

        margin-bottom: 38px;

        gap: 9px;
    }

    .contactFinalCTALine {
        width: 30px;
    }

    .contactFinalCTATop p {
        font-size: 9px;

        letter-spacing: 1px;
    }


    /* MAIN */

    .contactFinalCTAGrid {
        gap: 48px;

        padding-bottom: 55px;
    }

    .contactFinalCTAContent h2 {
        font-size: clamp(
            35px,
            9.5vw,
            48px
        );

        line-height: 1.04;

        letter-spacing: -1.5px;
    }

    .contactFinalCTADescription {
        margin-top: 24px;

        font-size: 10px;

        line-height: 1.9;
    }

    .contactFinalCTASecondaryText {
        margin-top: 14px;

        font-size: 15px;

        line-height: 1.45;
    }


    /* BUTTONS */

    .contactFinalCTAActions {
        flex-direction: column;

        align-items: flex-start;

        gap: 19px;

        margin-top: 30px;
    }

    .contactFinalCTAPrimary {
        min-height: 46px;

        padding: 0 19px;

        font-size: 9px;
    }

    .contactFinalCTASecondary {
        font-size: 9px;
    }


    /* INDEX */

    .contactFinalCTAIndexHeader {
        padding: 15px 0;
    }

    .contactFinalCTAIndexItem {
        min-height: 55px;

        grid-template-columns: 35px 1fr;

        gap: 13px;
    }

    .contactFinalCTAIndexItem span {
        font-size: 14px;
    }

    .contactFinalCTAIndexItem strong {
        font-size: 11px;

        letter-spacing: .9px;
    }

    .contactFinalCTAIndexDetail {
        padding: 21px 0 24px;
    }

    .contactFinalCTAIndexDetail p {
        font-size: 16px;
    }


    /* STATEMENT */

    .contactFinalCTAStatement {
        grid-template-columns: 1px minmax(0, 1fr);

        gap: 19px;

        padding: 52px 0 58px;
    }

    .contactFinalCTAStatementRule {
        height: 175px;
    }

    .contactFinalCTAStatementContent > span {
        font-size: 9px;

        margin-bottom: 14px;
    }

    .contactFinalCTAStatementContent h3 {
        font-size: clamp(
            25px,
            7vw,
            34px
        );

        line-height: 1.12;

        letter-spacing: -.8px;
    }

    .contactFinalCTAMobileBreak {
        display: block;
    }


    /* BOTTOM */

    .contactFinalCTABottom {
        justify-content: flex-start;

        gap: 7px;

        padding: 20px 0 65px;
    }

    .contactFinalCTABottom span,
    .contactFinalCTABottom strong {
        font-size: 9px;
    }

    .contactFinalCTABottom i {
        font-size: 10px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .contactFinalCTAContainer {
        width: calc(100% - 24px);
    }

    .contactFinalCTAContent h2 {
        font-size: 33px;
    }

    .contactFinalCTAStatementContent h3 {
        font-size: 23px;
    }

    .contactFinalCTAIndexItem strong {
        font-size: 10px;
    }

}

/* CTA Section Ends Here */

/* Contact Us Page Ends Here */


/* Privacy Policy Page Starts Here */

/* Policy Section Starts Here */

/* =========================================================
   MONEY RICH FINSERV
   PRIVACY POLICY
========================================================= */

.privacyPolicy {
    position: relative;

    width: 100%;

    background: var(--section);

    color: var(--primary);

    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.privacyPolicyContainer {
    width: min(1200px, calc(100% - 60px));

    margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.privacyPolicyHeader {
    padding: 115px 0 80px;

    border-bottom: 1px solid rgba(197,154,50,.18);
}


/* =========================================================
   EYEBROW
========================================================= */

.privacyPolicyEyebrow {
    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 55px;
}

.privacyPolicyEyebrow span {
    width: 45px;

    height: 1px;

    background: #c59a32;
}

.privacyPolicyEyebrow p {
    margin: 0;

    color: #c59a32;

    font-size: 10px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1.25px;

    text-transform: uppercase;
}


/* =========================================================
   HEADER GRID
========================================================= */

.privacyPolicyHeaderGrid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        280px;

    gap: 70px;

    align-items: end;
}


/* =========================================================
   TITLE
========================================================= */

.privacyPolicyTitle > span {
    display: block;

    margin-bottom: 18px;

    color: var(--text);

    opacity: .32;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1.1px;
}

.privacyPolicyTitle h1 {
    margin: 0;

    color: var(--primary);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(
        65px,
        8vw,
        108px
    );

    line-height: .88;

    letter-spacing: -4px;

    font-weight: 400;
}

.privacyPolicyTitle h1 em {
    color: #c59a32;

    font-style: normal;
}


/* =========================================================
   HEADER META
========================================================= */

.privacyPolicyHeaderMeta {
    padding-bottom: 5px;

    border-left: 1px solid rgba(197,154,50,.3);

    padding-left: 25px;
}

.privacyPolicyHeaderMeta span {
    display: block;

    margin-bottom: 40px;

    color: var(--text);

    opacity: .35;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: .8px;
}

.privacyPolicyHeaderMeta strong {
    display: block;

    margin-bottom: 7px;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: .9px;
}

.privacyPolicyHeaderMeta p {
    margin: 0;

    color: var(--primary);

    font-size: 10px;

    line-height: 1.5;

    font-weight: 600;

    letter-spacing: .5px;
}


/* =========================================================
   INTRO
========================================================= */

.privacyPolicyIntro {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 60px;

    max-width: 900px;

    margin-top: 65px;
}

.privacyPolicyIntro p {
    margin: 0;

    color: var(--text);

    opacity: .62;

    font-size: 12px;

    line-height: 1.95;
}


/* =========================================================
   POLICY CONTENT
========================================================= */

.privacyPolicyContent {
    border-bottom: 1px solid rgba(197,154,50,.18);
}


/* =========================================================
   POLICY BLOCK
========================================================= */

.privacyPolicyBlock {
    display: grid;

    grid-template-columns: 100px minmax(0, 760px);

    gap: 45px;

    padding: 65px 0;

    border-bottom: 1px solid rgba(197,154,50,.13);
}

.privacyPolicyBlock:last-child {
    border-bottom: 0;
}


/* =========================================================
   NUMBER
========================================================= */

.privacyPolicyNumber {
    color: #c59a32;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 30px;

    line-height: 1;

    font-weight: 400;
}


/* =========================================================
   CONTENT LABEL
========================================================= */

.privacyPolicyBlockContent > span {
    display: block;

    margin-bottom: 16px;

    color: #c59a32;

    opacity: .7;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1px;
}


/* =========================================================
   CONTENT HEADING
========================================================= */

.privacyPolicyBlockContent h2 {
    margin: 0 0 23px;

    color: var(--primary);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(
        28px,
        3vw,
        39px
    );

    line-height: 1.12;

    letter-spacing: -1px;

    font-weight: 400;
}


/* =========================================================
   PARAGRAPHS
========================================================= */

.privacyPolicyBlockContent p {
    max-width: 760px;

    margin: 0 0 17px;

    color: var(--text);

    opacity: .62;

    font-size: 11px;

    line-height: 1.95;
}

.privacyPolicyBlockContent p:last-of-type {
    margin-bottom: 0;
}


/* =========================================================
   CONTACT LINK
========================================================= */

.privacyPolicyContactLink {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 27px;

    padding-bottom: 8px;

    border-bottom: 1px solid rgba(197,154,50,.5);

    color: var(--primary);

    font-size: 10px;

    line-height: 1.5;

    font-weight: 700;

    text-decoration: none;

    transition:
        color .3s ease,
        border-color .3s ease;
}

.privacyPolicyContactLink span {
    color: #c59a32;

    font-size: 13px;

    transition: transform .3s ease;
}

.privacyPolicyContactLink:hover {
    color: #c59a32;

    border-color: #c59a32;
}

.privacyPolicyContactLink:hover span {
    transform: translate(3px, -3px);
}


/* =========================================================
   CLOSING
========================================================= */

.privacyPolicyClosing {
    display: grid;

    grid-template-columns:
        1px minmax(0, 1fr) auto;

    gap: 35px;

    align-items: end;

    padding: 90px 0 110px;
}


/* =========================================================
   CLOSING RULE
========================================================= */

.privacyPolicyClosingRule {
    width: 1px;

    height: 165px;

    background: #c59a32;
}


/* =========================================================
   CLOSING CONTENT
========================================================= */

.privacyPolicyClosingContent {
    max-width: 700px;
}

.privacyPolicyClosingContent > span {
    display: block;

    margin-bottom: 17px;

    color: var(--text);

    opacity: .32;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1px;
}

.privacyPolicyClosingContent h3 {
    margin: 0 0 22px;

    color: var(--primary);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(
        31px,
        4vw,
        51px
    );

    line-height: 1.08;

    letter-spacing: -1.5px;

    font-weight: 400;
}

.privacyPolicyClosingContent h3 em {
    color: #c59a32;

    font-style: normal;
}

.privacyPolicyClosingContent p {
    max-width: 600px;

    margin: 0;

    color: var(--text);

    opacity: .48;

    font-size: 10px;

    line-height: 1.85;
}


/* =========================================================
   CLOSING META
========================================================= */

.privacyPolicyClosingMeta {
    display: flex;

    align-items: center;

    gap: 10px;

    white-space: nowrap;
}

.privacyPolicyClosingMeta span,
.privacyPolicyClosingMeta strong {
    color: var(--text);

    opacity: .3;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: .7px;
}

.privacyPolicyClosingMeta i {
    color: #c59a32;

    font-size: 11px;

    font-style: normal;
}

.privacyPolicyClosingMeta strong {
    color: #c59a32;

    opacity: .8;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .privacyPolicyContainer {
        width: min(100% - 45px, 900px);
    }

    .privacyPolicyHeaderGrid {
        grid-template-columns:
            minmax(0, 1fr)
            230px;

        gap: 45px;
    }

    .privacyPolicyIntro {
        gap: 35px;
    }

    .privacyPolicyBlock {
        grid-template-columns:
            70px minmax(0, 1fr);

        gap: 30px;
    }

}


/* =========================================================
   TABLET / STACK
========================================================= */

@media (max-width: 750px) {

    .privacyPolicyHeader {
        padding-top: 85px;

        padding-bottom: 65px;
    }

    .privacyPolicyEyebrow {
        margin-bottom: 40px;
    }

    .privacyPolicyHeaderGrid {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .privacyPolicyHeaderMeta {
        max-width: 300px;
    }

    .privacyPolicyHeaderMeta span {
        margin-bottom: 20px;
    }

    .privacyPolicyIntro {
        grid-template-columns: 1fr;

        gap: 20px;

        margin-top: 45px;
    }

    .privacyPolicyBlock {
        padding: 50px 0;
    }

    .privacyPolicyClosing {
        grid-template-columns:
            1px minmax(0, 1fr);

        gap: 28px;
    }

    .privacyPolicyClosingMeta {
        grid-column: 2;

        margin-top: 5px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .privacyPolicyContainer {
        width: calc(100% - 30px);
    }


    /* HEADER */

    .privacyPolicyHeader {
        padding: 70px 0 50px;
    }

    .privacyPolicyEyebrow {
        gap: 9px;

        margin-bottom: 32px;
    }

    .privacyPolicyEyebrow span {
        width: 30px;
    }

    .privacyPolicyEyebrow p {
        font-size: 9px;
    }

    .privacyPolicyTitle > span {
        font-size: 9px;

        margin-bottom: 14px;
    }

    .privacyPolicyTitle h1 {
        font-size: clamp(
            54px,
            16vw,
            78px
        );

        letter-spacing: -3px;
    }

    .privacyPolicyHeaderMeta {
        padding-left: 18px;
    }

    .privacyPolicyHeaderMeta span {
        font-size: 9px;
    }

    .privacyPolicyIntro {
        margin-top: 38px;

        gap: 17px;
    }

    .privacyPolicyIntro p {
        font-size: 10px;

        line-height: 1.9;
    }


    /* POLICY BLOCKS */

    .privacyPolicyBlock {
        grid-template-columns: 45px minmax(0, 1fr);

        gap: 15px;

        padding: 42px 0;
    }

    .privacyPolicyNumber {
        font-size: 22px;
    }

    .privacyPolicyBlockContent > span {
        margin-bottom: 12px;

        font-size: 9px;
    }

    .privacyPolicyBlockContent h2 {
        margin-bottom: 18px;

        font-size: 25px;

        line-height: 1.13;
    }

    .privacyPolicyBlockContent p {
        font-size: 10px;

        line-height: 1.9;

        margin-bottom: 14px;
    }

    .privacyPolicyContactLink {
        font-size: 9px;

        margin-top: 22px;
    }


    /* CLOSING */

    .privacyPolicyClosing {
        grid-template-columns:
            1px minmax(0, 1fr);

        gap: 19px;

        padding: 60px 0 75px;
    }

    .privacyPolicyClosingRule {
        height: 160px;
    }

    .privacyPolicyClosingContent > span {
        font-size: 9px;
    }

    .privacyPolicyClosingContent h3 {
        font-size: clamp(
            26px,
            7.5vw,
            34px
        );

        line-height: 1.1;

        letter-spacing: -.8px;
    }

    .privacyPolicyClosingContent p {
        font-size: 9px;

        line-height: 1.8;
    }

    .privacyPolicyClosingMeta {
        flex-wrap: wrap;

        gap: 7px;

        margin-top: 5px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .privacyPolicyContainer {
        width: calc(100% - 24px);
    }

    .privacyPolicyTitle h1 {
        font-size: 52px;
    }

    .privacyPolicyBlock {
        grid-template-columns: 38px minmax(0, 1fr);

        gap: 12px;
    }

    .privacyPolicyBlockContent h2 {
        font-size: 23px;
    }

    .privacyPolicyClosingContent h3 {
        font-size: 24px;
    }

}

/* Policy Section Ends Here */

/* Privacy Policy Page Ends Here */


/* Terms & Conditions Page Starts Here */

/* Terms & Conditions Section Starts Here */

/* =========================================================
   MONEY RICH FINSERV
   TERMS & CONDITIONS
========================================================= */

.termsPolicy {
    position: relative;

    width: 100%;

    background: var(--section);

    color: var(--primary);

    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.termsPolicyContainer {
    width: min(1200px, calc(100% - 60px));

    margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.termsPolicyHeader {
    padding: 115px 0 80px;

    border-bottom: 1px solid rgba(197,154,50,.18);
}


/* =========================================================
   EYEBROW
========================================================= */

.termsPolicyEyebrow {
    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 55px;
}

.termsPolicyEyebrow span {
    width: 45px;

    height: 1px;

    background: #c59a32;
}

.termsPolicyEyebrow p {
    margin: 0;

    color: #c59a32;

    font-size: 10px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1.25px;

    text-transform: uppercase;
}


/* =========================================================
   HEADER GRID
========================================================= */

.termsPolicyHeaderGrid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        280px;

    gap: 70px;

    align-items: end;
}


/* =========================================================
   TITLE
========================================================= */

.termsPolicyTitle > span {
    display: block;

    margin-bottom: 18px;

    color: var(--text);

    opacity: .32;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1.1px;
}

.termsPolicyTitle h1 {
    margin: 0;

    color: var(--primary);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(
        62px,
        7.8vw,
        104px
    );

    line-height: .88;

    letter-spacing: -4px;

    font-weight: 400;
}

.termsPolicyTitle h1 em {
    color: #c59a32;

    font-style: normal;
}


/* =========================================================
   HEADER META
========================================================= */

.termsPolicyHeaderMeta {
    padding-bottom: 5px;

    padding-left: 25px;

    border-left: 1px solid rgba(197,154,50,.3);
}

.termsPolicyHeaderMeta span {
    display: block;

    margin-bottom: 40px;

    color: var(--text);

    opacity: .35;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: .8px;
}

.termsPolicyHeaderMeta strong {
    display: block;

    margin-bottom: 7px;

    color: #c59a32;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: .9px;
}

.termsPolicyHeaderMeta p {
    margin: 0;

    color: var(--primary);

    font-size: 10px;

    line-height: 1.5;

    font-weight: 600;

    letter-spacing: .5px;
}


/* =========================================================
   INTRO
========================================================= */

.termsPolicyIntro {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 60px;

    max-width: 900px;

    margin-top: 65px;
}

.termsPolicyIntro p {
    margin: 0;

    color: var(--text);

    opacity: .62;

    font-size: 12px;

    line-height: 1.95;
}


/* =========================================================
   CONTENT
========================================================= */

.termsPolicyContent {
    border-bottom: 1px solid rgba(197,154,50,.18);
}


/* =========================================================
   POLICY BLOCK
========================================================= */

.termsPolicyBlock {
    display: grid;

    grid-template-columns:
        100px minmax(0, 760px);

    gap: 45px;

    padding: 65px 0;

    border-bottom: 1px solid rgba(197,154,50,.13);
}

.termsPolicyBlock:last-child {
    border-bottom: 0;
}


/* =========================================================
   NUMBER
========================================================= */

.termsPolicyNumber {
    color: #c59a32;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 30px;

    line-height: 1;

    font-weight: 400;
}


/* =========================================================
   LABEL
========================================================= */

.termsPolicyBlockContent > span {
    display: block;

    margin-bottom: 16px;

    color: #c59a32;

    opacity: .7;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1px;
}


/* =========================================================
   HEADING
========================================================= */

.termsPolicyBlockContent h2 {
    margin: 0 0 23px;

    color: var(--primary);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(
        28px,
        3vw,
        39px
    );

    line-height: 1.12;

    letter-spacing: -1px;

    font-weight: 400;
}


/* =========================================================
   PARAGRAPHS
========================================================= */

.termsPolicyBlockContent p {
    max-width: 760px;

    margin: 0 0 17px;

    color: var(--text);

    opacity: .62;

    font-size: 11px;

    line-height: 1.95;
}

.termsPolicyBlockContent p:last-of-type {
    margin-bottom: 0;
}


/* =========================================================
   CONTACT LINK
========================================================= */

.termsPolicyContactLink {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 27px;

    padding-bottom: 8px;

    border-bottom: 1px solid rgba(197,154,50,.5);

    color: var(--primary);

    font-size: 10px;

    line-height: 1.5;

    font-weight: 700;

    text-decoration: none;

    transition:
        color .3s ease,
        border-color .3s ease;
}

.termsPolicyContactLink span {
    color: #c59a32;

    font-size: 13px;

    transition: transform .3s ease;
}

.termsPolicyContactLink:hover {
    color: #c59a32;

    border-color: #c59a32;
}

.termsPolicyContactLink:hover span {
    transform: translate(3px, -3px);
}


/* =========================================================
   CLOSING
========================================================= */

.termsPolicyClosing {
    display: grid;

    grid-template-columns:
        1px minmax(0, 1fr) auto;

    gap: 35px;

    align-items: end;

    padding: 90px 0 110px;
}


/* =========================================================
   GOLD RULE
========================================================= */

.termsPolicyClosingRule {
    width: 1px;

    height: 165px;

    background: #c59a32;
}


/* =========================================================
   CLOSING CONTENT
========================================================= */

.termsPolicyClosingContent {
    max-width: 700px;
}

.termsPolicyClosingContent > span {
    display: block;

    margin-bottom: 17px;

    color: var(--text);

    opacity: .32;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 1px;
}

.termsPolicyClosingContent h3 {
    margin: 0 0 22px;

    color: var(--primary);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(
        31px,
        4vw,
        51px
    );

    line-height: 1.08;

    letter-spacing: -1.5px;

    font-weight: 400;
}

.termsPolicyClosingContent h3 em {
    color: #c59a32;

    font-style: normal;
}

.termsPolicyClosingContent p {
    max-width: 600px;

    margin: 0;

    color: var(--text);

    opacity: .48;

    font-size: 10px;

    line-height: 1.85;
}


/* =========================================================
   CLOSING META
========================================================= */

.termsPolicyClosingMeta {
    display: flex;

    align-items: center;

    gap: 10px;

    white-space: nowrap;
}

.termsPolicyClosingMeta span,
.termsPolicyClosingMeta strong {
    color: var(--text);

    opacity: .3;

    font-size: 9px;

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: .7px;
}

.termsPolicyClosingMeta i {
    color: #c59a32;

    font-size: 11px;

    font-style: normal;
}

.termsPolicyClosingMeta strong {
    color: #c59a32;

    opacity: .8;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .termsPolicyContainer {
        width: min(100% - 45px, 900px);
    }

    .termsPolicyHeaderGrid {
        grid-template-columns:
            minmax(0, 1fr)
            230px;

        gap: 45px;
    }

    .termsPolicyIntro {
        gap: 35px;
    }

    .termsPolicyBlock {
        grid-template-columns:
            70px minmax(0, 1fr);

        gap: 30px;
    }

}


/* =========================================================
   TABLET STACK
========================================================= */

@media (max-width: 750px) {

    .termsPolicyHeader {
        padding-top: 85px;

        padding-bottom: 65px;
    }

    .termsPolicyEyebrow {
        margin-bottom: 40px;
    }

    .termsPolicyHeaderGrid {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .termsPolicyHeaderMeta {
        max-width: 300px;
    }

    .termsPolicyHeaderMeta span {
        margin-bottom: 20px;
    }

    .termsPolicyIntro {
        grid-template-columns: 1fr;

        gap: 20px;

        margin-top: 45px;
    }

    .termsPolicyBlock {
        padding: 50px 0;
    }

    .termsPolicyClosing {
        grid-template-columns:
            1px minmax(0, 1fr);

        gap: 28px;
    }

    .termsPolicyClosingMeta {
        grid-column: 2;

        margin-top: 5px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .termsPolicyContainer {
        width: calc(100% - 30px);
    }


    /* HEADER */

    .termsPolicyHeader {
        padding: 70px 0 50px;
    }

    .termsPolicyEyebrow {
        gap: 9px;

        margin-bottom: 32px;
    }

    .termsPolicyEyebrow span {
        width: 30px;
    }

    .termsPolicyEyebrow p {
        font-size: 9px;
    }

    .termsPolicyTitle > span {
        font-size: 9px;

        margin-bottom: 14px;
    }

    .termsPolicyTitle h1 {
        font-size: clamp(
            52px,
            15vw,
            76px
        );

        line-height: .9;

        letter-spacing: -3px;
    }

    .termsPolicyHeaderMeta {
        padding-left: 18px;
    }

    .termsPolicyHeaderMeta span {
        font-size: 9px;
    }

    .termsPolicyIntro {
        margin-top: 38px;

        gap: 17px;
    }

    .termsPolicyIntro p {
        font-size: 10px;

        line-height: 1.9;
    }


    /* CONTENT */

    .termsPolicyBlock {
        grid-template-columns:
            45px minmax(0, 1fr);

        gap: 15px;

        padding: 42px 0;
    }

    .termsPolicyNumber {
        font-size: 22px;
    }

    .termsPolicyBlockContent > span {
        margin-bottom: 12px;

        font-size: 9px;
    }

    .termsPolicyBlockContent h2 {
        margin-bottom: 18px;

        font-size: 25px;

        line-height: 1.13;
    }

    .termsPolicyBlockContent p {
        font-size: 10px;

        line-height: 1.9;

        margin-bottom: 14px;
    }

    .termsPolicyContactLink {
        font-size: 9px;

        margin-top: 22px;
    }


    /* CLOSING */

    .termsPolicyClosing {
        grid-template-columns:
            1px minmax(0, 1fr);

        gap: 19px;

        padding: 60px 0 75px;
    }

    .termsPolicyClosingRule {
        height: 160px;
    }

    .termsPolicyClosingContent > span {
        font-size: 9px;
    }

    .termsPolicyClosingContent h3 {
        font-size: clamp(
            26px,
            7.5vw,
            34px
        );

        line-height: 1.1;

        letter-spacing: -.8px;
    }

    .termsPolicyClosingContent p {
        font-size: 9px;

        line-height: 1.8;
    }

    .termsPolicyClosingMeta {
        flex-wrap: wrap;

        gap: 7px;

        margin-top: 5px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .termsPolicyContainer {
        width: calc(100% - 24px);
    }

    .termsPolicyTitle h1 {
        font-size: 50px;
    }

    .termsPolicyBlock {
        grid-template-columns:
            38px minmax(0, 1fr);

        gap: 12px;
    }

    .termsPolicyBlockContent h2 {
        font-size: 23px;
    }

    .termsPolicyClosingContent h3 {
        font-size: 24px;
    }

}

/* Terms & Conditions Section Ends Here */

/* Terms & Conditions Page Ends Here */