html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    font-family: 'Segoe UI', sans-serif;
}

main {
    padding: 0 !important;
}

.container,
.container-fluid {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}

.hero-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-image: url('/images/cove.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.15);
}

.header {
    position: absolute;
    top: 20px;
    right: 30px;
    z-index: 100;
}
.header-right {
    width: 100%;
    margin: 0;
}

.menu {
    justify-content: center;
}

.logo-box {
    width: 280px;
    height: 180px;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(3px);
}

.logo {
    width: 220px;
    max-width: 90%;
}

.header-right {
    flex: 1;
    margin-left: 50px;
}

.top-links {
    text-align: right;
    margin-bottom: 25px;
}

    .top-links a {
        color: white;
        text-decoration: none;
        margin-left: 20px;
        font-size: 18px;
    }

.menu {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
    flex-wrap: nowrap;
}

    .menu a {
        color: #fff;
        text-decoration: none;
        padding: 14px 35px;
        min-width: 180px;
        text-align: center;
        /* Glass Effect */
        background: rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255,255,255,0.35);
        border-radius: 18px;
        font-size: 18px;
        font-weight: 600;
        box-shadow: 0 8px 32px rgba(0,0,0,0.15), inset 0 1px 1px rgba(255,255,255,0.25);
        transition: all .35s ease;
    }

        .menu a:hover {
            transform: translateY(-3px);
            background: rgba(255,255,255,0.18);
            border-color: rgba(255,255,255,0.6);
            box-shadow: 0 12px 35px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.4);
        }

        .menu a.active {
            background: rgba(255,255,255,0.92);
            color: #000;
            border: 1px solid rgba(255,255,255,0.9);
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }
.site-logo {
    position: relative;
    top: 20px;
    left: 20px;
    width: 320px;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255,255,255,0.10);
    border: 2px solid rgba(255,255,255,0.8);
    border-radius: 25px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 9999;
}

    .site-logo img {
        max-width: 250px;
        max-height: 120px;
        width: auto;
        height: auto;
    }


.ox-contact-section {
    background: #02180d;
    padding: 80px 0;
    font-family: 'Poppins',sans-serif;
}

.ox-contact-container {
    width: 1200px;
    margin: auto;
    display: flex;
    gap: 25px;
}

/* LEFT */

.ox-contact-left {
    width: 35%;
    background: rgba(12,40,20,.45);
    border: 1px solid rgba(132,255,110,.25);
    border-radius: 20px;
    backdrop-filter: blur(18px);
    overflow: hidden;
    box-shadow: 0 0 35px rgba(103,255,90,.15);
}

.ox-contact-image {
    width: 100%;
    height: 520px;
    object-fit: cover;
    display: block;
}

.ox-contact-bottom {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #7fd85b;
    font-size: 15px;
}

.ox-circle-btn {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(90deg,#58ff5f,#b4ff4f);
    color: #08200f;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(109,255,72,.5);
}

/* RIGHT */

.ox-contact-right {
    flex: 1;
    background: rgba(10,35,20,.45);
    border-radius: 20px;
    padding: 35px;
    backdrop-filter: blur(18px);
    border: 1px solid rgba(120,255,110,.25);
    box-shadow: 0 0 35px rgba(70,255,90,.15);
}

.ox-contact-row {
    display: flex;
    gap: 20px;
}

.ox-input-group {
    flex: 1;
    margin-bottom: 22px;
}

    .ox-input-group label {
        display: block;
        color: #baff96;
        margin-bottom: 10px;
        font-size: 14px;
    }

    .ox-input-group input,
    .ox-input-group select,
    .ox-input-group textarea {
        width: 100%;
        background: rgba(255,255,255,.03);
        border: 1px solid rgba(138,255,106,.15);
        border-radius: 10px;
        padding: 15px;
        color: white;
        font-size: 14px;
        outline: none;
        transition: .3s;
        box-sizing: border-box;
    }

    .ox-input-group textarea {
        resize: none;
        height: 150px;
    }

        .ox-input-group input:focus,
        .ox-input-group select:focus,
        .ox-input-group textarea:focus {
            border-color: #74ff54;
            box-shadow: 0 0 18px rgba(90,255,70,.35);
        }

.ox-contact-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #8cbf84;
    margin-bottom: 28px;
    font-size: 13px;
}

    .ox-contact-checkbox input {
        accent-color: #72ff54;
    }

.ox-send-btn {
    width: 100%;
    height: 60px;
    border: none;
    border-radius: 40px;
    background: linear-gradient(90deg,#58ff5f,#b8ff4f);
    color: #103010;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    transition: .3s;
    box-shadow: 0 0 30px rgba(96,255,76,.5);
}

    .ox-send-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 0 40px rgba(110,255,60,.8);
    }

@media(max-width:992px) {

    .ox-contact-container {
        width: 95%;
        flex-direction: column;
    }

    .ox-contact-left {
        width: 100%;
    }

    .ox-contact-row {
        flex-direction: column;
    }
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-top: 120px;
    color: white;
}

    .hero-content h3 {
        font-size: 55px;
        color: #d4df4d;
        font-family: cursive;
        margin-bottom: 0;
    }

    .hero-content h1 {
        font-size: 140px;
        margin: 0;
        letter-spacing: 4px;
        font-weight: bold;
    }

    .hero-content h2 {
        font-size: 45px;
        letter-spacing: 15px;
        color: #d4df4d;
        margin-top: -20px;
    }

    .hero-content p {
        font-size: 28px;
        margin-top: 25px;
    }



.group-intro {
    position: relative;
    padding: 120px 50px;
    background: radial-gradient(circle at 20% 20%, rgba(0,255,120,.15), transparent 30%), radial-gradient(circle at 80% 80%, rgba(0,150,255,.15), transparent 30%), linear-gradient(135deg,#07141d,#0b2c1f,#05131b);
    overflow: hidden;
}

    .group-intro::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
        background-size: 50px 50px;
        opacity: .25;
    }

.container-custom {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: auto;
}

.section-header {
    text-align: center;
    color: white;
    margin-bottom: 80px;
}

    .section-header h2 {
        font-size: 56px;
        margin-bottom: 25px;
        font-weight: 700;
    }

    .section-header p {
        max-width: 950px;
        margin: auto;
        font-size: 22px;
        line-height: 1.8;
background: linear-gradient(
    135deg,
    #03140E 0%,
    #083522 25%,
    #0D5A39 55%,
    #496D2C 85%,
    #6E8536 100%
);
    }






/*====================================================
    OXIAURA GROUP - COMPANIES SECTION
====================================================*/

.companies-section {
    position: relative;
    overflow: hidden;
    padding: 40px 0 80px;
    background: linear-gradient( 135deg, #03140E 0%, #083522 25%, #0D5A39 55%, #496D2C 85%, #6E8536 100% );
}

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

    .companies-section::before {
        content: "";
        position: absolute;
        width: 650px;
        height: 650px;
        top: -250px;
        left: -180px;
        border-radius: 50%;
        background: rgba(0,255,170,.08);
        filter: blur(120px);
    }

    .companies-section::after {
        content: "";
        position: absolute;
        width: 700px;
        height: 700px;
        right: -220px;
        bottom: -300px;
        border-radius: 50%;
        background: rgba(0,180,255,.08);
        filter: blur(150px);
    }

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

.background-pattern {
    position: absolute;
    inset: 0;
    opacity: .05;
    background-image: radial-gradient(circle at 25px 25px, rgba(255,255,255,.4) 2px, transparent 2px);
    background-size: 80px 80px;
    pointer-events: none;
}

/*====================================================
KEEP CONTENT ABOVE BACKGROUND
====================================================*/

.companies-section .container {
    position: relative;
    z-index: 10;
}

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

.company-card {
    position: relative;
    height: 430px;
    overflow: hidden;
    border-radius: 30px;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: .45s;
    background: #111;
    box-shadow: 0 20px 45px rgba(0,0,0,.35);
}

    /*====================================================
3D HOVER
====================================================*/

    .company-card:hover {
        transform: perspective(1000px) rotateX(5deg) rotateY(-5deg) translateY(-12px) scale(1.02);
        box-shadow: 0 40px 80px rgba(0,0,0,.45);
    }

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

.card-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 1s;
}

.company-card:hover .card-bg {
    transform: scale(1.12);
}

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

Only affects the cards.
====================================================*/

.card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(0,0,0,.88), rgba(0,0,0,.40), rgba(0,0,0,.05) );
}

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

.shine {
    position: absolute;
    top: -160%;
    left: -60%;
    width: 45%;
    height: 320%;
    background: linear-gradient( 90deg, transparent, rgba(255,255,255,.30), transparent);
    transform: rotate(25deg);
    transition: 1.2s;
}

.company-card:hover .shine {
    left: 170%;
}

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

.card-content {
    position: absolute;
    left: 25px;
    right: 25px;
    bottom: 25px;
    display: flex;
    align-items: flex-end;
    z-index: 5;
}

/*====================================================
GLASS LOGO PANEL
====================================================*/

.logo-panel {
    width: 165px;
    height: 165px;
    border-radius: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.35);
    box-shadow: 0 18px 35px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.4);
}

    .logo-panel img {
        width: 110px;
        max-height: 110px;
    }

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

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

.group-company-info {
    position: absolute;
    left: 40px;
    bottom: 40px;
    z-index: 10;
}

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

    .group-company-info h2 {
        margin: 0 0 18px;
        color: #ffffff;
        font-size: 40px;
        font-family: "Cormorant Garamond", serif;
        font-weight: 700;
        letter-spacing: 1px;
        line-height: 1.1;
        text-shadow: 0 4px 20px rgba(0,0,0,.45);
    }

.companies-container {
    max-width: 1600px;
    margin: 0 auto;
    padding-left: 40px;
    padding-right: 40px;

}

    .companies-container .row {
        margin-left: 0;
        margin-right: 0;
    }
/*====================================================
BUTTON
====================================================*/

.visit-btn {
    display: inline-block;
    padding: 15px 35px;
    border-radius: 12px;
    text-decoration: none;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(180deg,#18bf52,#0b8735);
    box-shadow: 0 0 18px rgba(0,255,120,.45);
    transition: .35s;
}

    .visit-btn:hover {
        color: #fff;
        transform: translateY(-3px);
        background: linear-gradient(180deg,#22dd63,#12a241);
        box-shadow: 0 0 30px rgba(0,255,120,.8), 0 0 70px rgba(0,255,120,.45);
    }


.section-heading {
    text-align: center;
    margin-bottom: 70px;
}

.section-subtitle {
    color: #d5d5d5;
    font-size: 15px;
    letter-spacing: 10px;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 18px;
}

.section-heading h2 {
    font-size: 62px;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    line-height: 1.1;
}

    .section-heading h2 span {
        color: #A7CF3A;
    }




.plantation-row {
    display: flex;
    justify-content: center;
    margin-bottom: 70px;
}

    .plantation-row .col-xl-5 {
        max-width: 42%;
        flex: 0 0 42%;
    }

.featured-card {
    height: 500px;
    border-radius: 35px;
    box-shadow: 0 30px 70px rgba(0,0,0,.45);
}

    .featured-card .logo-panel {
        width: 180px;
        height: 180px;
    }

        .featured-card .logo-panel img {
            width: 120px;
            max-height: 120px;
        }

    .featured-card .company-info h2 {
        font-size: 42px;
    }

    .featured-card:hover {
        transform: perspective(1200px) rotateX(4deg) rotateY(-3deg) translateY(-10px) scale(1.02);
    }



/*====================================================
    9 CARD GRID
====================================================*/

.companies-grid {
    max-width: 1550px;
    margin: 0 auto;
    transform: translateX(80px);
}



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

    .companies-grid .col-lg-4 {
        margin-bottom: 20px;
    }



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

    .companies-grid .company-card {
        height: 250px;
    }



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

@media(max-width:1400px) {

    .plantation-row .col-xl-5 {
        max-width: 55%;
        flex: 0 0 55%;
    }

    .companies-grid {
        transform: none;
        max-width: 1200px;
    }
}



@media(max-width:992px) {

    .plantation-row .col-xl-5 {
        max-width: 80%;
        flex: 0 0 80%;
    }

    .featured-card {
        height: 320px !important;
    }

    .companies-grid {
        transform: none;
    }
}



@media(max-width:768px) {

    .plantation-row .col-xl-5 {
        max-width: 100%;
        flex: 0 0 100%;
    }

    .featured-card {
        height: 250px;
    }
}


/*=========================================
DIVIDER
=========================================*/

.heading-divider {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 18px;
    gap: 18px;
}

    .heading-divider span {
        width: 75px;
        height: 2px;
        background: #5E8E29;
    }

    .heading-divider i {
        color: #8CBF26;
        font-size: 22px;
    }

.management-section {
    position: relative;
    padding: 90px 0 120px;
    background: transparent;
}


/*==================================================
GLASS PANEL
==================================================*/

.management-glass {
    width: 92%;
    max-width: 1700px;
    margin: auto;
    position: relative;
    overflow: hidden;
    border-radius: 40px;
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12);
}
    .management-glass::before {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        left: -180px;
        top: -150px;
        border-radius: 50%;
        background: rgba(0,255,120,.12);
        filter: blur(120px);
    }

    .management-glass::after {
        content: "";
        position: absolute;
        width: 450px;
        height: 450px;
        right: -180px;
        bottom: -180px;
        border-radius: 50%;
        background: rgba(0,180,255,.10);
        filter: blur(120px);
    }

.management-title {
    position: relative;
    z-index: 5;
    text-align: center;
    padding-top: 70px;
    padding-bottom: 40px;
}

    .management-title .section-subtitle {
        color: #cfd9d2;
        letter-spacing: 7px;
        font-size: 14px;
        margin-bottom: 18px;
    }

    .management-title h2 {
        font-size: 58px;
        font-weight: 800;
        color: white;
    }

    .management-title span {
        color: #9fda36;
    }

.management-image {
    display: block;
    width: 100%;
    position: relative;
    z-index: 3;
}

.management-glass {
    transition: .45s;
}

    .management-glass:hover {
        transform: translateY(-10px);
        box-shadow: 0 40px 100px rgba(0,0,0,.55), 0 0 50px rgba(0,255,120,.15);
    }


    .management-glass .shine {
        position: absolute;
        top: -150%;
        left: -60%;
        width: 40%;
        height: 350%;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.25), transparent);
        transform: rotate(25deg);
        transition: 1.2s;
    }

    .management-glass:hover .shine {
        left: 170%;
    }

.group-banner {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #061f19;
}

    .group-banner img {
        width: 100%;
        height: auto;
        display: block;
    }
.company-strip {
    width: 100%;
    overflow: hidden;
    padding: 15px 0;
    background: linear-gradient( 90deg, #0B5E2B 0%, #146B2D 35%, #1806DE 65%, #0B5E2B 100% );
    border-top: 1px solid rgba(255,255,255,.15);
    border-bottom: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 10px 30px rgba(0,0,0,.40);
}
.strip-track {
    display: flex;
    width: max-content;
    /* Continuous movement */
    animation: scroll-left 30s linear infinite;
}

    .strip-track:hover {
        animation-play-state: paused;
    }

.strip-item {
  
  
    color: #ffffff;
    font-weight: 600;
}
    .strip-item i {
        font-size: 22px;
        color: #d4df4d;
    }

@keyframes scroll-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.btn-main {
    display: inline-block;
    margin-top: 30px;
    padding: 18px 45px;
    background: #76b82a;
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-size: 22px;
    font-weight: bold;
}

    .btn-main:hover {
        background: #5f981d;
    }
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

.oxiaura-footer {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at top,#163f08 0%,#061407 35%,#010502 100%);
    color: #fff;
    padding-top: 170px;
    font-family: 'Poppins',sans-serif;
}

.oxiaura-footer-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(circle at 50% 0%,rgba(80,255,80,.20),transparent 40%), radial-gradient(circle at 20% 20%,rgba(40,255,40,.08),transparent 35%), radial-gradient(circle at 80% 10%,rgba(80,255,80,.10),transparent 30%);
}

.oxiaura-footer .oxiaura-container {
    width: 95% !important;
    max-width: none !important;
    margin-left: 4% !important;
    margin-right: 4% !important;
    box-sizing: border-box;
}

.oxiaura-footer-wave {
    position: absolute;
    top: -3px;
    left: 0;
    width: 100%;
    height: 170px;
    overflow: hidden;
    z-index: 2;
}

.oxiaura-wave-line {
    position: absolute;
    left: -5%;
    width: 110%;
    bottom: 15px;
    height: 160px;
    border-bottom: 4px solid #88ff33;
    border-radius: 0 0 50% 50%;
    box-shadow: 0 0 15px #7dff3c,0 0 35px #4cff00,0 0 60px rgba(100,255,0,.6);
}

.oxiaura-leaf-circle {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid #90ff3f;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #baff7d;
    font-size: 28px;
    background: rgba(0,0,0,.55);
}

.oxiaura-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

    .oxiaura-particles::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(#90ff3f 1px,transparent 2px);
        background-size: 120px 120px;
        animation: oxiauraParticlesMove 22s linear infinite;
    }

    .oxiaura-particles::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(#fff 1px,transparent 2px);
        background-size: 60px 60px;
        opacity: .18;
        animation: oxiauraTwinkle 5s ease-in-out infinite alternate;
    }

@keyframes oxiauraParticlesMove {
    from {
        transform: translateY(0)
    }

    to {
        transform: translateY(80px)
    }
}

@keyframes oxiauraTwinkle {
    from {
        opacity: .1
    }

    to {
        opacity: .35
    }
}

.oxiaura-footer-title {
    position: relative;
    font-size: 30px;
    font-weight: 700;
    color: #c7ff7b;
    margin-bottom: 35px;
    text-transform: uppercase;
}

    .oxiaura-footer-title::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -10px;
        width: 50px;
        height: 3px;
        background: #8aff33;
    }
oxiaura-footer-logo {
    margin-bottom: 30px;
    text-align: left;
}

.oxiaura-footer-logo img {
    width: 290px;
    max-width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 0 10px rgba(110,255,80,.45)) drop-shadow(0 0 30px rgba(60,255,60,.25));
    transition: all .35s ease;
}

    .oxiaura-footer-logo img:hover {
        transform: scale(1.03);
        filter: drop-shadow(0 0 15px rgba(120,255,100,.70)) drop-shadow(0 0 45px rgba(60,255,60,.45));
    }


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

.oxiaura-company-text {
    margin-top: 20px;
    margin-bottom: 40px;
    color: #d8d8d8;
    font-size: 17px;
    line-height: 34px;
    font-weight: 300;
    letter-spacing: .3px;
}


/*=====================================================
    SOCIAL ICONS CONTAINER
======================================================*/

.oxiaura-social-icons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 25px;
}


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

    .oxiaura-social-icons a {
        width: 62px;
        height: 62px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        font-size: 24px;
        color: #ffffff;
        background: rgba(255,255,255,.04);
        border: 1px solid rgba(120,255,80,.55);
        backdrop-filter: blur(18px);
        transition: all .35s ease;
        box-shadow: inset 0 0 15px rgba(90,255,0,.08), 0 0 18px rgba(60,255,0,.15);
    }


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

        .oxiaura-social-icons a:hover {
            transform: translateY(-6px);
            color: #071206;
            background: #73ff22;
            border-color: #8dff53;
            box-shadow: 0 0 18px #77ff33, 0 0 45px #55ff00, 0 0 70px rgba(80,255,0,.30);
        }


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

    .oxiaura-social-icons i {
        transition: all .35s ease;
    }

    .oxiaura-social-icons a:hover i {
        transform: rotate(8deg) scale(1.1);
    }


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

.oxiaura-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}


    /*=====================================================
    QUICK LINK ITEM
======================================================*/

    .oxiaura-footer-links li {
        margin-bottom: 20px;
    }


        /*=====================================================
    QUICK LINK
======================================================*/

        .oxiaura-footer-links li a {
            display: flex;
            align-items: center;
            gap: 14px;
            text-decoration: none;
            color: #efefef;
            font-size: 19px;
            font-weight: 400;
            transition: all .35s ease;
        }


            /*=====================================================
    QUICK LINK ICON
======================================================*/

            .oxiaura-footer-links li a i {
                color: #82ff3c;
                font-size: 15px;
                transition: all .35s ease;
            }


            /*=====================================================
    QUICK LINK HOVER
======================================================*/

            .oxiaura-footer-links li a:hover {
                padding-left: 12px;
                color: #98ff58;
            }


                .oxiaura-footer-links li a:hover i {
                    transform: translateX(6px);
                    color: #b5ff83;
                }


            /*=====================================================
    ACTIVE LINK (OPTIONAL)
======================================================*/

            .oxiaura-footer-links li a.oxiaura-active {
                color: #8fff54;
                font-weight: 600;
            }


                .oxiaura-footer-links li a.oxiaura-active i {
                    color: #8fff54;
                }


/*=====================================================
    SMALL DEVICES
======================================================*/

@media (max-width:991px) {

    .oxiaura-footer-logo {
        text-align: center;
    }

        .oxiaura-footer-logo img {
            margin: auto;
        }

    .oxiaura-company-text {
        text-align: center;
    }

    .oxiaura-social-icons {
        justify-content: center;
    }

    .oxiaura-footer-links {
        text-align: center;
    }

        .oxiaura-footer-links li a {
            justify-content: center;
        }
}


@media (max-width:576px) {

    .oxiaura-footer-logo img {
        width: 220px;
    }

    .oxiaura-company-text {
        font-size: 16px;
        line-height: 30px;
    }

    .oxiaura-social-icons {
        gap: 12px;
    }

        .oxiaura-social-icons a {
            width: 50px;
            height: 50px;
            font-size: 20px;
        }

    .oxiaura-footer-links li {
        margin-bottom: 15px;
    }

        .oxiaura-footer-links li a {
            font-size: 17px;
        }
}

/*=====================================================
    OXIAURA CONTACT BOX
======================================================*/

.oxiaura-contact-box {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 22px;
    margin-bottom: 22px;
    border-radius: 20px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(120,255,60,.18);
    backdrop-filter: blur(20px);
    transition: all .35s ease;
    box-shadow: inset 0 0 18px rgba(80,255,0,.05);
}

    .oxiaura-contact-box:hover {
        transform: translateY(-5px);
        border-color: #70ff2e;
        box-shadow: 0 0 18px rgba(70,255,0,.35), 0 0 50px rgba(70,255,0,.15);
    }


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

.oxiaura-contact-icon {
    width: 64px;
    height: 64px;
    min-width: 64px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(110,255,40,.08);
    border: 1px solid rgba(120,255,70,.45);
    color: #95ff58;
    font-size: 28px;
    transition: all .35s ease;
    box-shadow: 0 0 12px rgba(90,255,0,.35);
}

.oxiaura-contact-box:hover .oxiaura-contact-icon {
    background: #78ff2e;
    color: #041004;
    transform: rotate(10deg) scale(1.08);
}


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

.oxiaura-contact-box div:last-child {
    color: #f2f2f2;
    font-size: 17px;
    line-height: 30px;
}


/*=====================================================
    NEWSLETTER TEXT
======================================================*/

.oxiaura-newsletter-text {
    color: #d8d8d8;
    font-size: 18px;
    line-height: 34px;
    margin-bottom: 28px;
}


/*=====================================================
    SUBSCRIBE BOX
======================================================*/

.oxiaura-subscribe-box {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 66px;
    padding: 0 22px;
    margin-bottom: 22px;
    border-radius: 18px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(120,255,60,.18);
    backdrop-filter: blur(20px);
    transition: all .35s ease;
}

    .oxiaura-subscribe-box:hover {
        border-color: #7eff32;
        box-shadow: 0 0 20px rgba(80,255,0,.28);
    }

    .oxiaura-subscribe-box i {
        font-size: 22px;
        color: #8fff52;
    }

    .oxiaura-subscribe-box input {
        flex: 1;
        border: none;
        outline: none;
        background: transparent;
        color: #ffffff;
        font-size: 18px;
    }

        .oxiaura-subscribe-box input::placeholder {
            color: #bfbfbf;
        }


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

.oxiaura-subscribe-btn {
    width: 100%;
    height: 68px;
    border: none;
    border-radius: 18px;
    cursor: pointer;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #ffffff;
    background: linear-gradient(180deg,#92ff36,#56cf16);
    transition: all .35s ease;
    box-shadow: 0 0 25px rgba(100,255,0,.40);
}

    .oxiaura-subscribe-btn i {
        margin-left: 14px;
        transition: all .35s ease;
    }

    .oxiaura-subscribe-btn:hover {
        transform: translateY(-4px);
        box-shadow: 0 0 20px #88ff44, 0 0 45px #66ff00, 0 0 70px rgba(120,255,40,.35);
    }

        .oxiaura-subscribe-btn:hover i {
            transform: translateX(6px);
        }


/*=====================================================
    PRIVACY
======================================================*/

.oxiaura-privacy {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    color: #cfcfcf;
    font-size: 15px;
}

    .oxiaura-privacy i {
        color: #73ff2a;
        font-size: 18px;
        text-shadow: 0 0 10px #6eff2c;
    }


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

.oxiaura-footer-top > .col-lg-2,
.oxiaura-footer-top > .col-lg-3,
.oxiaura-footer-top > .col-lg-4 {
    position: relative;
}

    .oxiaura-footer-top > .col-lg-2::before,
    .oxiaura-footer-top > .col-lg-3::before,
    .oxiaura-footer-top > .col-lg-4::before {
        content: "";
        position: absolute;
        left: -18px;
        top: 0;
        width: 1px;
        height: 100%;
        background: rgba(150,255,150,.12);
    }


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

@media (max-width:991px) {

    .oxiaura-contact-box {
        text-align: left;
    }

    .oxiaura-footer-top > .col-lg-2::before,
    .oxiaura-footer-top > .col-lg-3::before,
    .oxiaura-footer-top > .col-lg-4::before {
        display: none;
    }
}

@media (max-width:576px) {

    .oxiaura-contact-box {
        padding: 16px;
    }

    .oxiaura-contact-icon {
        width: 54px;
        height: 54px;
        min-width: 54px;
        font-size: 22px;
    }

    .oxiaura-contact-box div:last-child {
        font-size: 15px;
        line-height: 26px;
    }

    .oxiaura-subscribe-box {
        height: 58px;
    }

    .oxiaura-subscribe-btn {
        height: 58px;
        font-size: 18px;
    }
}
/*=====================================================
    OXIAURA OUR COMPANIES
======================================================*/

.oxiaura-companies-section {
    margin-top: 80px;
}

    .oxiaura-companies-section h2 {
        position: relative;
        text-align: center;
        margin-bottom: 45px;
        color: #b8ff6d;
        font-size: 34px;
        font-weight: 700;
        letter-spacing: 2px;
    }

        .oxiaura-companies-section h2::before,
        .oxiaura-companies-section h2::after {
            content: "";
            position: absolute;
            top: 50%;
            width: 120px;
            height: 2px;
            background: rgba(120,255,60,.45);
            box-shadow: 0 0 12px #66ff00;
        }

        .oxiaura-companies-section h2::before {
            right: 55%;
            margin-right: 35px;
        }

        .oxiaura-companies-section h2::after {
            left: 55%;
            margin-left: 35px;
        }



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

.oxiaura-company-card {
    height: 160px;
    border-radius: 22px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(120,255,60,.20);
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    cursor: pointer;
    transition: all .35s ease;
    box-shadow: inset 0 0 18px rgba(90,255,0,.06);
}

    .oxiaura-company-card:hover {
        transform: translateY(-8px);
        border-color: #7fff39;
        box-shadow: 0 0 20px rgba(120,255,30,.45), 0 0 55px rgba(80,255,0,.22);
    }

    .oxiaura-company-card i {
        font-size: 42px;
        margin-bottom: 18px;
        color: #9dff58;
        text-shadow: 0 0 15px #6cff00;
    }

    .oxiaura-company-card span {
        color: #ffffff;
        font-size: 19px;
        line-height: 30px;
        font-weight: 500;
    }



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

.oxiaura-footer-bottom {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 25px;
    margin-top: 80px;
    padding: 35px 0;
    border-top: 1px solid rgba(120,255,80,.18);
}

    .oxiaura-footer-bottom > div {
        color: #d7d7d7;
        font-size: 17px;
    }



/*=====================================================
    FOOTER MENU
======================================================*/

.oxiaura-footer-menu {
    display: flex;
    gap: 35px;
    flex-wrap: wrap;
}

    .oxiaura-footer-menu a {
        color: #dddddd;
        text-decoration: none;
        transition: all .35s ease;
    }

        .oxiaura-footer-menu a:hover {
            color: #90ff50;
        }



/*=====================================================
    CENTER LEAF
======================================================*/

.oxiaura-bottom-leaf {
    position: absolute;
    left: 50%;
    top: -24px;
    transform: translateX(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0b120a;
    border: 1px solid #72ff2d;
    color: #9dff58;
    font-size: 26px;
    box-shadow: 0 0 15px #76ff29, 0 0 45px rgba(80,255,0,.35);
    animation: oxiauraLeafGlow 3s ease-in-out infinite;
}



/*=====================================================
    LEAF GLOW
======================================================*/

@keyframes oxiauraLeafGlow {

    0% {
        transform: translateX(-50%) scale(1);
        box-shadow: 0 0 15px #76ff29, 0 0 35px rgba(80,255,0,.30);
    }

    50% {
        transform: translateX(-50%) scale(1.12);
        box-shadow: 0 0 20px #99ff55, 0 0 60px rgba(120,255,60,.55);
    }

    100% {
        transform: translateX(-50%) scale(1);
    }
}



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

.oxiaura-company-card,
.oxiaura-social-icons a,
.oxiaura-contact-box {
    animation: oxiauraFloatCard 7s ease-in-out infinite;
}

@keyframes oxiauraFloatCard {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }

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



/*=====================================================
    SMOOTH TRANSITIONS
======================================================*/

.oxiaura-footer * {
    transition: background .35s, color .35s, border-color .35s, transform .35s, box-shadow .35s;
}



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

@media(max-width:1200px) {

    .oxiaura-company-card {
        height: 180px;
    }
}

@media(max-width:991px) {

    .oxiaura-footer {
        padding-top: 130px;
    }

    .oxiaura-footer-top {
        text-align: center;
    }

    .oxiaura-footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .oxiaura-footer-menu {
        justify-content: center;
    }

    .oxiaura-bottom-leaf {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin: 20px auto;
    }
}

@media(max-width:768px) {

    .oxiaura-company-card {
        height: 160px;
    }

        .oxiaura-company-card span {
            font-size: 17px;
        }
}

@media(max-width:576px) {

    .oxiaura-footer {
        padding-top: 90px;
    }

    .oxiaura-footer-menu {
        flex-direction: column;
        gap: 12px;
    }
}



/*=====================================================
    OPTIONAL FOOTER SCROLLBAR
======================================================*/

.oxiaura-footer::-webkit-scrollbar {
    width: 10px;
}

.oxiaura-footer::-webkit-scrollbar-track {
    background: #041004;
}

.oxiaura-footer::-webkit-scrollbar-thumb {
    background: #5eff1d;
    border-radius: 20px;
}

    .oxiaura-footer::-webkit-scrollbar-thumb:hover {
        background: #8cff43;
    }

@media(max-width:992px) {
    .header {
        flex-direction: column;
    }

    .header-right {
        margin-left: 0;
        margin-top: 20px;
    }

    .menu {
        flex-wrap: wrap;
    }

    .hero-content h1 {
        font-size: 80px;
    }

    .hero-content h3 {
        font-size: 35px;
    }

    .hero-content p {
        font-size: 20px;
    }

   

}


/* OXIAURA PREMIUM STYLE - PART 1 */
:root {
    --pl-bg: #0b120d;
    --pl-gold: #d8b15b;
    --pl-green: #5e9c58;
    --pl-white: #fff;
    --pl-text: #d6d8d2;
    --pl-glass: rgba(255,255,255,.08);
    --pl-border: rgba(255,255,255,.12);
}

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

html {
    scroll-behavior: smooth
}

body {
    font-family: Poppins,sans-serif;
    background: var(--pl-bg);
    color: var(--pl-white);
    overflow-x: hidden
}

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

ul {
    list-style: none
}

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

.pl-container {
    width: min(92%,1600px);
    margin: auto
}

.pl-hero {
    position: relative;
    min-height: 100vh;
    background: linear-gradient(rgba(7,10,7,.55),rgba(7,10,7,.82)),url('../images/back2.png') center/cover no-repeat;
    overflow: hidden
}

.pl-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%,rgba(118,183,92,.18),transparent 30%)
}

.pl-header {
    position: relative;
    z-index: 20;
    padding: 28px 0
}

.pl-navbar {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90px;
    background: linear-gradient( 90deg, #8d7335 0%, #b08a3c 10%, #6e5a2d 22%, #203021 45%, #0f1712 70%, #070c09 100%);
}

.pl-logo {
    position: absolute;
    left:-20px;
    top: 80%;
    transform: translateY(-50%);
}

    .pl-logo img {
        height: 200px;
        transform: scale(1.9);
        transform-origin: left center;
    }

.pl-nav-icons {
    position: absolute;
    right: 35px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 14px;
}

.pl-menu {
    display: flex;
    gap: 42px;
}
  
    .pl-menu a {
        color: #eef2ec;
        font-size: 15px;
        font-weight: 500;
        position: relative;
        transition: .35s
    }

        .pl-menu a:hover, .pl-menu .pl-active {
            color: var(--pl-gold)
        }

        .pl-menu a::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -8px;
            width: 0;
            height: 2px;
            background: var(--pl-gold);
            transition: .35s
        }

        .pl-menu a:hover::after, .pl-menu .pl-active::after {
            width: 100%
        }



.pl-icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pl-glass);
    border: 1px solid var(--pl-border);
    backdrop-filter: blur(12px)
}

.pl-gold {
    background: linear-gradient(135deg,#d9b35d,#c69735);
    color: #111
}

.pl-leaf {
    position: absolute;
    opacity: .22
}

.pl-leaf1 {
    top: 10%;
    left: 4%;
    width: 90px
}

.pl-leaf2 {
    top: 14%;
    right: 6%;
    width: 70px
}

.pl-leaf3 {
    bottom: 12%;
    left: 10%;
    width: 82px
}

.pl-leaf4 {
    bottom: 8%;
    right: 14%;
    width: 64px
}

/*====================================================
 OXIAURA PREMIUM STYLE - PART 2
 Hero Content / Cards / Statistics
====================================================*/

.pl-hero-content {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 70px;
    padding: 80px 0 60px;
}

.pl-hero-left {
    width: 48%;
}

.pl-sub-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: 50px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
    color: var(--pl-gold);
    letter-spacing: 2px;
    font-size: 13px;
    margin-bottom: 28px;
}

.pl-hero-left h1 {
    font-family: 'Cormorant Garamond',serif;
    font-size: 84px;
    line-height: 1.05;
    font-weight: 700;
    margin-bottom: 18px;
}

    .pl-hero-left h1 span {
        color: var(--pl-gold);
    }

.pl-hero-line {
    width: 120px;
    height: 4px;
    border-radius: 10px;
    background: var(--pl-gold);
    margin: 30px 0;
}

.pl-hero-left p {
    color: var(--pl-text);
    font-size: 17px;
    line-height: 1.9;
    max-width: 620px;
    margin-bottom: 40px;
}

.pl-main-btn {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 18px 34px;
    border-radius: 60px;
    background: linear-gradient(135deg,#4b8e4b,#73b56b);
    color: #fff;
    font-weight: 600;
    transition: .35s;
    box-shadow: 0 20px 45px rgba(0,0,0,.35);
}

    .pl-main-btn span {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #fff;
        color: #222;
    }

    .pl-main-btn:hover {
        transform: translateY(-5px);
    }

.pl-stats {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-top: 60px;
}

.pl-stat-box {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pl-stat-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(14px);
    color: var(--pl-gold);
    font-size: 24px;
}

.pl-stat-box h3 {
    font-size: 34px;
}

.pl-stat-box p {
    color: #bfc5bc;
    font-size: 14px;
}

.pl-stat-divider {
    width: 1px;
    height: 70px;
    background: rgba(255,255,255,.12);
}

.pl-hero-right {
    width: 52%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 22px;
    position: relative;
    margin-top: -150px;
}

.pl-image-card {
    overflow: hidden;
    position: relative;
    border-radius: 34px;
    border: 2px solid rgba(216,177,91,.30);
    box-shadow: 0 25px 60px rgba(0,0,0,.45);
}

    .pl-image-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: .6s;
    }

    .pl-image-card:hover img {
        transform: scale(1.08);
    }

.pl-small-card {
    width: 210px;
    height: 300px;
    margin-bottom: 140px;
}

.pl-large-card {
    width: 360px;
    height: 620px;
}

.pl-bottom-card {
    width: 220px;
    height: 320px;
    margin-top: 120px;
    top: -120px;
}

.pl-card-content {
    position: absolute;
    left: 35px;
    right: 35px;
    bottom: 35px;
    color: #fff;
}

.pl-card-subtitle {
    display: inline-block;
    color: var(--pl-gold);
    letter-spacing: 2px;
    font-size: 12px;
    margin-bottom: 12px;
}

.pl-card-content h2 {
    font-family: 'Cormorant Garamond',serif;
    font-size: 42px;
    margin-bottom: 14px;
}

.pl-card-content p {
    line-height: 1.8;
    color: #ececec;
    margin-bottom: 22px;
}

.pl-card-btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 40px;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(12px);
    color: #fff;
    transition: .35s;
}

    .pl-card-btn:hover {
        background: var(--pl-gold);
        color: #111;
    }
/*====================================================
 OXIAURA PREMIUM STYLE - PART 3
 Features / Animations / Responsive
====================================================*/
.pl-hidden {
    opacity: 0;
    transform: translateY(70px);
    transition: all .9s ease;
}

.pl-show {
    opacity: 1;
    transform: translateY(0);
}

.pl-main-btn,
.pl-card-btn {
    position: relative;
    overflow: hidden;
}

.pl-ripple {
    position: absolute;
    width: 15px;
    height: 15px;
    background: rgba(255,255,255,.55);
    border-radius: 50%;
    transform: translate(-50%,-50%);
    animation: plRipple .7s linear;
}

@keyframes plRipple {
    from {
        width: 10px;
        height: 10px;
        opacity: .8;
    }

    to {
        width: 350px;
        height: 350px;
        opacity: 0;
    }
}
.pl-features {
    position: relative;
    z-index: 5;
    margin: 90px auto 40px;
    padding: 35px 40px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 24px;
    border-radius: 32px;
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 25px 60px rgba(0,0,0,.35);
}

.pl-feature {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.pl-feature-icon {
    width: 64px;
    height: 64px;
    min-width: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,#4b8f4b,#74b66c);
    color: #fff;
    font-size: 24px;
    box-shadow: 0 12px 28px rgba(75,143,75,.35);
}

.pl-feature h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #fff;
}

.pl-feature p {
    color: #cfd4cf;
    line-height: 1.8;
    font-size: 15px;
}

.pl-feature-divider {
    width: 1px;
    background: rgba(255,255,255,.08);
}

@keyframes plFloatY {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-20px)
    }

    100% {
        transform: translateY(0)
    }
}

.pl-leaf1, .pl-leaf2, .pl-leaf3, .pl-leaf4 {
    animation: plFloatY 8s ease-in-out infinite;
}

.pl-leaf2 {
    animation-delay: 1s
}

.pl-leaf3 {
    animation-delay: 2s
}

.pl-leaf4 {
    animation-delay: 3s
}

.pl-image-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,rgba(0,0,0,.55),transparent 45%);
    pointer-events: none;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #111;
}

::-webkit-scrollbar-thumb {
    background: #5b9656;
    border-radius: 30px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #d8b15b;
    }

::selection {
    background: #5b9656;
    color: #fff;
}

@media (max-width:1200px) {

    .pl-hero-content {
        flex-direction: column;
    }

    .pl-hero-left,
    .pl-hero-right {
        width: 100%;
    }

    .pl-features {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width:992px) {

    .pl-navbar {
        flex-direction: column;
        gap: 20px;
    }

    .pl-menu {
        flex-wrap: wrap;
        justify-content: center;
        gap: 18px;
    }

    .pl-hero-left h1 {
        font-size: 60px;
    }

    .pl-hero-right {
        flex-direction: column;
        align-items: center;
    }

    .pl-small-card,
    .pl-large-card,
    .pl-bottom-card {
        width: 100%;
        max-width: 420px;
        height: auto;
        margin: 0;
    }

    .pl-stats {
        flex-direction: column;
        align-items: flex-start;
    }

    .pl-stat-divider {
        display: none;
    }
}

@media (max-width:768px) {

    .pl-features {
        grid-template-columns: 1fr;
        padding: 28px;
    }

    .pl-feature-divider {
        display: none;
    }

    .pl-hero-left h1 {
        font-size: 46px;
    }

    .pl-main-btn {
        width: 100%;
        justify-content: center;
    }
}
/*====================================================
 OXIAURA RESPONSIVE.CSS
 Phase 2 - Responsive Layout
====================================================*/

/* Large desktops */
@media (min-width:1600px) {
    .pl-container {
        max-width: 1600px
    }

    .pl-hero-left h1 {
        font-size: 96px
    }

    .pl-large-card {
        width: 400px;
        height: 680px
    }
}

/* Laptops */
@media (max-width:1400px) {
    .pl-container {
        width: 94%
    }

    .pl-menu {
        gap: 24px
    }

    .pl-hero-left h1 {
        font-size: 72px
    }

    .pl-large-card {
        width: 330px;
        height: 580px
    }

    .pl-small-card {
        width: 190px;
        height: 240px
    }

    .pl-bottom-card {
        width: 200px;
        height: 270px
    }
}

/* Tablets */
@media (max-width:1024px) {
    .pl-navbar {
        flex-wrap: wrap;
        gap: 18px;
        border-radius: 28px
    }

    .pl-menu {
        flex-wrap: wrap;
        justify-content: center
    }

    .pl-hero-content {
        flex-direction: column;
        padding-top: 50px
    }

    .pl-hero-left, .pl-hero-right {
        width: 100%;
        text-align: center
    }

    .pl-sub-title {
        justify-content: center
    }

    .pl-hero-line {
        margin: 25px auto
    }

    .pl-hero-left p {
        margin: 0 auto 35px
    }

    .pl-main-btn {
        margin: auto
    }

    .pl-stats {
        justify-content: center;
        flex-wrap: wrap
    }

    .pl-hero-right {
        margin-top: 50px
    }
}

/* Mobile */
@media (max-width:768px) {
    .pl-header {
        padding: 16px 0
    }

    .pl-navbar {
        padding: 18px
    }

    .pl-logo img {
        height: 48px
    }

    .pl-menu {
        gap: 14px
    }

        .pl-menu a {
            font-size: 14px
        }

    .pl-nav-icons {
        display: none
    }

    .pl-hero-left h1 {
        font-size: 48px
    }

    .pl-hero-left p {
        font-size: 15px
    }

    .pl-main-btn {
        width: 100%;
        justify-content: center
    }

    .pl-hero-right {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }

    .pl-small-card,
    .pl-large-card,
    .pl-bottom-card {
        width: 100%;
        max-width: 360px;
        height: auto;
        margin: 0;
    }

    .pl-card-content {
        left: 20px;
        right: 20px;
        bottom: 20px;
    }

        .pl-card-content h2 {
            font-size: 34px
        }

    .pl-features {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 24px;
    }

    .pl-feature-divider {
        display: none
    }
}

/* Small phones */
@media (max-width:480px) {
    .pl-container {
        width: 92%
    }

    .pl-hero-left h1 {
        font-size: 38px
    }

    .pl-sub-title {
        font-size: 11px;
        padding: 10px 18px;
    }

    .pl-main-btn {
        padding: 15px 24px;
        font-size: 15px;
    }

    .pl-stat-box {
        width: 100%;
        justify-content: center;
    }

    .pl-stat-icon {
        width: 56px;
        height: 56px;
        font-size: 20px;
    }

    .pl-card-content h2 {
        font-size: 28px
    }

    .pl-card-content p {
        font-size: 14px
    }
}
/*====================================================
 OXIAURA - animation.css
 Premium Animations & Micro Interactions
====================================================*/

/* Fade Up */
@keyframes plFadeUp {
    from {
        opacity: 0;
        transform: translateY(60px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In */
@keyframes plFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Floating */
@keyframes plFloat {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-18px);
    }

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

/* Slow Rotate */
@keyframes plRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Glow Pulse */
@keyframes plGlow {
    0%,100% {
        box-shadow: 0 0 0 rgba(216,177,91,.2);
    }

    50% {
        box-shadow: 0 0 20px rgba(216,177,91,.35), 0 0 50px rgba(94,156,88,.25);
    }
}

/* Background shimmer */
@keyframes plShimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* Hero entrance */
.pl-hero-left {
    animation: plFadeUp .9s ease both;
}

.pl-hero-right {
    animation: plFadeUp 1.2s ease both;
}

.pl-sub-title,
.pl-main-btn,
.pl-stats {
    animation: plFadeIn 1.5s ease both;
}

/* Floating cards */
.pl-small-card {
    animation: plFloat 6s ease-in-out infinite;
}

.pl-large-card {
    animation: plFloat 8s ease-in-out infinite;
}

.pl-bottom-card {
    animation: plFloat 7s ease-in-out infinite;
}

/* Leaves */
.pl-leaf1 {
    animation: plFloat 9s ease-in-out infinite;
}

.pl-leaf2 {
    animation: plFloat 8s ease-in-out infinite reverse;
}

.pl-leaf3 {
    animation: plFloat 10s ease-in-out infinite;
}

.pl-leaf4 {
    animation: plFloat 7s ease-in-out infinite reverse;
}

/* Button */
.pl-main-btn,
.pl-card-btn {
    transition: transform .35s, box-shadow .35s, background .35s;
}

    .pl-main-btn:hover,
    .pl-card-btn:hover {
        transform: translateY(-6px) scale(1.03);
        box-shadow: 0 18px 45px rgba(0,0,0,.35);
    }

/* Navigation */
.pl-navbar {
    transition: .4s;
}

    .pl-navbar:hover {
        box-shadow: 0 10px 40px rgba(0,0,0,.35), 0 0 30px rgba(94,156,88,.12);
    }

/* Icons */
.pl-icon-circle {
    transition: .35s;
}

    .pl-icon-circle:hover {
        transform: translateY(-5px) rotate(8deg);
    }

/* Cards */
.pl-image-card {
    transition: transform .45s, box-shadow .45s;
}

    .pl-image-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 35px 80px rgba(0,0,0,.45);
    }

/* Card glow */
.pl-large-card {
    animation: plFloat 8s ease-in-out infinite, plGlow 5s ease-in-out infinite;
}

/* Feature cards */
.pl-feature {
    transition: transform .35s, background .35s;
    border-radius: 20px;
}

    .pl-feature:hover {
        transform: translateY(-8px);
        background: rgba(255,255,255,.05);
    }

/* Logo */
.pl-logo img {
    transition: .5s;
}

.pl-logo:hover img {
    transform: scale(1.05);
}

/* Decorative shimmer */
.pl-main-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( 120deg, transparent, rgba(255,255,255,.35), transparent );
    background-size: 200% 100%;
    animation: plShimmer 3s linear infinite;
    border-radius: inherit;
    pointer-events: none;
}


/*=========================================================
    FEATURED PLANTATION
=========================================================*/

.featured-plantation {
    position: relative;
    width: 100%;
    padding: 140px 0;
    background: url('../images/back3.png') center center / cover no-repeat;
    overflow: hidden;
}

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

.featured-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, rgba(4, 10, 7, .92) 0%, rgba(4, 10, 7, .82) 35%, rgba(4, 10, 7, .45) 65%, rgba(4, 10, 7, .18) 100% );
}

    /* Golden sunlight */

    .featured-overlay::after {
        content: "";
        position: absolute;
        top: -180px;
        left: 42%;
        width: 700px;
        height: 700px;
        background: radial-gradient( circle, rgba(210,170,70,.22), transparent 70% );
    }

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

.featured-content {
    position: relative;
    z-index: 10;
    width: 92%;
    max-width: 1650px;
    margin: auto;
    min-height: 900px;
    display: flex;
    align-items: center;
    border: 1px solid rgba(200,170,90,.45);
    border-radius: 35px;
    padding: 90px;
    backdrop-filter: blur(3px);
    box-shadow: 0 30px 70px rgba(0,0,0,.45);
}
.company-name {
    color: #67B85D;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(103,184,93,.18);
}
/*=========================================================
    TEXT
=========================================================*/

.featured-text {
    width: 45%;
}

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

.section-tag {
    display: inline-block;
    color: #C8A14D;
    font-size: 14px;
    letter-spacing: 5px;
    text-transform: uppercase;
    margin-bottom: 30px;
    position: relative;
}

    .section-tag::after {
        content: "";
        display: block;
        width: 110px;
        height: 2px;
        margin-top: 18px;
        background: #C8A14D;
    }

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

.featured-text h2 {
    font-size: 110px;
    line-height: .95;
    color: #C8A14D;
    font-family: "Cormorant Garamond", serif;
    font-weight: 500;
    margin-bottom: 20px;
}

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

.featured-text h3 {
    color: white;
    font-size: 55px;
    font-family: "Cormorant Garamond", serif;
    font-weight: 400;
    margin-bottom: 35px;
}

/*=========================================================
    PARAGRAPH
=========================================================*/

.featured-text p {
    color: rgba(255,255,255,.88);
    font-size: 20px;
    line-height: 2;
    margin-bottom: 25px;
    max-width: 650px;
    font-family: 'Poppins', sans-serif;
}

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

.featured-btn {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    margin-top: 25px;
    padding: 18px 40px;
    border: 1px solid #C8A14D;
    border-radius: 60px;
    color: #C8A14D;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
    font-weight: 500;
    transition: .45s;
    backdrop-filter: blur(10px);
}

    .featured-btn::after {
        content: "→";
        transition: .35s;
    }

    .featured-btn:hover {
        background: #C8A14D;
        color: #08120D;
        transform: translateY(-6px);
        box-shadow: 0 15px 35px rgba(200,161,77,.35);
    }

        .featured-btn:hover::after {
            transform: translateX(8px);
        }

/*=========================================================
    GOLD BORDER GLOW
=========================================================*/

.featured-content::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 35px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 0 50px rgba(200,161,77,.08);
    pointer-events: none;
}

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

@media(max-width:1200px) {

    .featured-content {
        padding: 70px;
        min-height: auto;
    }

    .featured-text {
        width: 60%;
    }

        .featured-text h2 {
            font-size: 80px;
        }

        .featured-text h3 {
            font-size: 42px;
        }
}

@media(max-width:992px) {

    .featured-content {
        padding: 60px;
    }

    .featured-text {
        width: 100%;
    }

        .featured-text h2 {
            font-size: 65px;
        }

        .featured-text h3 {
            font-size: 34px;
        }

        .featured-text p {
            font-size: 18px;
        }
}

@media(max-width:768px) {

    .featured-plantation {
        padding: 90px 0;
    }

    .featured-content {
        padding: 40px;
        border-radius: 20px;
    }

    .featured-text h2 {
        font-size: 50px;
    }

    .featured-text h3 {
        font-size: 28px;
    }

    .featured-text p {
        font-size: 16px;
        line-height: 1.8;
    }

    .featured-btn {
        padding: 15px 30px;
        font-size: 13px;
    }
}



/*=========================================================
                OXIAURA LUXURY FOOTER
=========================================================*/

.oxiaura-footer {


    position:relative;

    width:100%;
    overflow:hidden;

    background:
        linear-gradient(
            rgba(5,12,8,.45),
            rgba(5,12,8,.55)
        ),
        url("../images/back5.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;
}

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

.footer-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient( circle at 80% 20%, rgba(200,161,77,.18), transparent 45% ), radial-gradient( circle at 10% 90%, rgba(60,120,70,.12), transparent 50% ), linear-gradient( rgba(5,12,8,.18), rgba(5,12,8,.28) );
    pointer-events: none;
}

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

.oxiaura-container {
    position: relative;
    z-index: 5;
    width: 92%;
    max-width: 1650px;
    margin: auto;
}

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

.footer-top {
    display: grid;
    grid-template-columns: 1.2fr 1fr .9fr;
    gap: 90px;
    padding-top: -20px;
    padding-bottom: 70px;
}

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

.footer-column {
    position: relative;
}

    /* gold separator */

    .footer-column:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 0;
        right: -45px;
        width: 1px;
        height: 100%;
        background: linear-gradient( transparent, rgba(200,161,77,.65), transparent);
    }

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

.footer-company {
    padding-right: 30px;
}

.footer-logo {
    width: 340px;
    max-width: 100%;
    margin-bottom: 45px;
    display: block;
}

.footer-about {
    color: rgba(255,255,255,.88);
    font-size: 20px;
    line-height: 2;
    max-width: 520px;
    font-family: 'Poppins',sans-serif;
}

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

.footer-contact h3,
.footer-links h3 {
    color: #d7b36a;
    font-size: 34px;
    font-weight: 400;
    margin-bottom: 18px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: "Cormorant Garamond",serif;
}

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

.footer-title-divider {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 45px;
}

    .footer-title-divider span {
        width: 80px;
        height: 1px;
        background: #b88d3d;
    }

    .footer-title-divider i {
        color: #c8a14d;
        font-size: 18px;
    }

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

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    margin-bottom: 32px;
}

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

.icon-box {
    width: 68px;
    height: 68px;
    min-width: 68px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient( 135deg, rgba(62,98,40,.95), rgba(34,59,25,.92));
    border: 1px solid rgba(200,161,77,.25);
    box-shadow: 0 10px 25px rgba(0,0,0,.35);
}

    .icon-box i {
        color: #d7b36a;
        font-size: 26px;
    }

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

.contact-item p {
    margin: 0;
    color: #f2f2f2;
    font-size: 20px;
    line-height: 1.8;
    font-family: 'Cormorant Garamond',serif;
}

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

.footer-social {
    display: flex;
    gap: 18px;
    margin-top: 45px;
}

    .footer-social a {
        width: 58px;
        height: 58px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        text-decoration: none;
        color: #d7b36a;
        border: 1px solid rgba(200,161,77,.35);
        background: rgba(255,255,255,.03);
        backdrop-filter: blur(8px);
        transition: .4s;
    }

        .footer-social a i {
            font-size: 20px;
        }

        .footer-social a:hover {
            background: #c8a14d;
            color: #07120c;
            transform: translateY(-6px);
            box-shadow: 0 15px 35px rgba(200,161,77,.35);
        }

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

.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 20px;
}

.footer-links a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: #ececec;
    font-size: 19px;
    letter-spacing: .5px;
    transition: .35s;
}

    .footer-links a i {
        color: #b88d3d;
        transition: .35s;
    }

    .footer-links a:hover {
        color: #d7b36a;
        padding-left: 12px;
    }

        .footer-links a:hover i {
            transform: translateX(8px);
            color: #d7b36a;
        }

/*=========================================================
                MIDDLE SECTION
=========================================================*/

.footer-middle {
    position: relative;
    padding: 70px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    border-top: 1px solid rgba(200,161,77,.20);
    border-bottom: 1px solid rgba(200,161,77,.20);
}

    .footer-middle::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 220px;
        height: 1px;
        background: #c8a14d;
    }

.footer-middle-icon {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 28px;
    background: linear-gradient( 135deg, rgba(62,98,40,.95), rgba(34,59,25,.92));
    border: 1px solid rgba(200,161,77,.35);
}

    .footer-middle-icon i {
        color: #d7b36a;
        font-size: 34px;
    }

.footer-middle h2 {
    color: #ffffff;
    font-size: 46px;
    font-weight: 400;
    margin-bottom: 18px;
    font-family: "Cormorant Garamond",serif;
}

.footer-middle p {
    color: #c8a14d;
    font-size: 22px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
}

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

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 35px 0;
    color: rgba(255,255,255,.70);
    font-size: 16px;
}

.footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 18px;
}

    .footer-bottom-links a {
        color: rgba(255,255,255,.75);
        text-decoration: none;
        transition: .35s;
    }

        .footer-bottom-links a:hover {
            color: #d7b36a;
        }

    .footer-bottom-links span {
        color: rgba(255,255,255,.40);
    }

.footer-bottom i {
    color: #d7b36a;
    margin-left: 6px;
}

/*=========================================================
                DECORATIVE GLOW
=========================================================*/

.oxiaura-footer::before {
    content: "";
    position: absolute;
    top: -180px;
    right: -120px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200,161,77,.10), transparent 70%);
    pointer-events: none;
}

.oxiaura-footer::after {
    content: "";
    position: absolute;
    bottom: -200px;
    left: -150px;
    width: 550px;
    height: 550px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(55,110,60,.12), transparent 70%);
    pointer-events: none;
}

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

.footer-column {
    animation: fadeUp 1s ease forwards;
}

.footer-company {
    animation-delay: .2s;
}

.footer-contact {
    animation-delay: .4s;
}

.footer-links {
    animation-delay: .6s;
}

@keyframes fadeUp {

    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*=========================================================
                GLASS EFFECT
=========================================================*/

.footer-column {
    background: rgba(255,255,255,.015);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.04);
    border-radius: 24px;
    padding: 35px;
    transition: .45s;
}

    .footer-column:hover {
        transform: translateY(-8px);
        border-color: rgba(200,161,77,.28);
        box-shadow: 0 20px 45px rgba(0,0,0,.28), 0 0 30px rgba(200,161,77,.08);
    }

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

.footer-logo {
    transition: .5s;
}

    .footer-logo:hover {
        transform: scale(1.04);
    }

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

.icon-box {
    transition: .45s;
}

.contact-item:hover .icon-box {
    background: linear-gradient( 135deg, #c8a14d, #8e6d2d);
    transform: rotate(8deg) scale(1.08);
}

    .contact-item:hover .icon-box i {
        color: #08120d;
    }

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

.footer-contact h3,
.footer-links h3 {
    transition: .35s;
}

.footer-column:hover h3 {
    color: #f3cf84;
}

/*=========================================================
                MIDDLE SECTION
=========================================================*/

.footer-middle {
    transition: .5s;
}

    .footer-middle:hover {
        background: rgba(255,255,255,.015);
    }

.footer-middle-icon {
    transition: .45s;
}

.footer-middle:hover .footer-middle-icon {
    transform: rotate(360deg);
}

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

.footer-bottom {
    transition: .35s;
}

    .footer-bottom a {
        position: relative;
    }

        .footer-bottom a::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -6px;
            width: 0;
            height: 1px;
            background: #d7b36a;
            transition: .35s;
        }

        .footer-bottom a:hover::after {
            width: 100%;
        }

/*=========================================================
                SHIMMER LINE
=========================================================*/

.footer-middle::after {
    content: "";
    position: absolute;
    left: -50%;
    top: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient( 90deg, transparent, rgba(255,255,255,.08), transparent);
    transform: skewX(-25deg);
    animation: shine 9s infinite;
}

@keyframes shine {

    100% {
        left: 160%;
    }
}

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

@media(max-width:1200px) {

    .footer-top {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .footer-column {
        padding: 30px;
    }

        .footer-column::after {
            display: none;
        }

    .footer-about {
        max-width: 100%;
    }

    .footer-middle h2 {
        font-size: 36px;
    }
}

@media(max-width:992px) {

    .footer-middle {
        padding: 55px 20px;
    }

        .footer-middle h2 {
            font-size: 30px;
            line-height: 1.3;
        }

        .footer-middle p {
            font-size: 18px;
        }

    .footer-bottom {
        flex-direction: column;
        gap: 18px;
        text-align: center;
    }

    .footer-bottom-links {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media(max-width:768px) {

    .oxiaura-footer {
        background-position: center;
    }

    .footer-top {
        padding-top: 70px;
        padding-bottom: 50px;
        gap: 30px;
    }

    .footer-column {
        padding: 25px;
        border-radius: 18px;
    }

    .footer-logo {
        width: 220px;
    }

    .footer-about {
        font-size: 16px;
        line-height: 1.8;
    }

    .footer-contact h3,
    .footer-links h3 {
        font-size: 26px;
    }

    .contact-item {
        gap: 15px;
        margin-bottom: 22px;
    }

    .icon-box {
        width: 52px;
        height: 52px;
        min-width: 52px;
    }

        .icon-box i {
            font-size: 20px;
        }

    .contact-item p {
        font-size: 17px;
        line-height: 1.6;
    }

    .footer-links a {
        font-size: 17px;
    }

    .footer-middle {
        padding: 45px 15px;
    }

    .footer-middle-icon {
        width: 65px;
        height: 65px;
    }

        .footer-middle-icon i {
            font-size: 28px;
        }

    .footer-middle h2 {
        font-size: 24px;
    }

    .footer-middle p {
        font-size: 15px;
        letter-spacing: 1px;
    }

    .footer-social {
        justify-content: center;
    }

    .footer-bottom {
        padding: 25px 0;
        font-size: 14px;
    }
}

@media(max-width:480px) {

    .oxiaura-container {
        width: 94%;
    }

    .footer-column {
        padding: 20px;
    }

    .footer-logo {
        width: 180px;
    }

    .footer-about {
        font-size: 15px;
    }

    .footer-middle h2 {
        font-size: 20px;
    }

    .footer-middle p {
        font-size: 14px;
    }

    .footer-social {
        gap: 12px;
    }

        .footer-social a {
            width: 46px;
            height: 46px;
        }

            .footer-social a i {
                font-size: 17px;
            }
}



.pl-features-section {
    position: relative;
    padding: 120px 0;
    background: linear-gradient( rgba(6,12,8,.45), rgba(6,12,8,.55) ), url("../images/back6.png") center center / cover no-repeat;
    overflow: hidden;
}

    /* Decorative Glow */

    .pl-features-section::before {
        content: "";
        position: absolute;
        top: -250px;
        right: -200px;
        width: 700px;
        height: 700px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(200,161,77,.10), transparent 70%);
    }

    .pl-features-section::after {
        content: "";
        position: absolute;
        bottom: -250px;
        left: -200px;
        width: 650px;
        height: 650px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(60,120,70,.10), transparent 70%);
    }

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

.pl-container {
    position: relative;
    z-index: 5;
    width: 92%;
    max-width: 1600px;
    margin: auto;
}

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

.pl-section-title {
    text-align: center;
    margin-bottom: 80px;
}

    .pl-section-title span {
        color: #C8A14D;
        letter-spacing: 5px;
        text-transform: uppercase;
        font-size: 14px;
    }

    .pl-section-title h2 {
        color: #fff;
        font-size: 70px;
        margin: 20px 0;
        font-weight: 500;
        font-family: "Cormorant Garamond",serif;
    }

    .pl-section-title p {
        max-width: 780px;
        margin: auto;
        color: rgba(255,255,255,.78);
        font-size: 20px;
        line-height: 2;
    }

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

.pl-features-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 35px;
}

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

.pl-card {
    position: relative;
    padding: 45px 35px;
    border-radius: 28px;
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(200,161,77,.15);
    transition: .45s;
    overflow: hidden;
}

    .pl-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg,#C8A14D,#6DBE5E);
        transform: scaleX(0);
        transition: .45s;
        transform-origin: left;
    }

    .pl-card:hover {
        transform: translateY(-12px);
        border-color: rgba(200,161,77,.45);
        box-shadow: 0 25px 60px rgba(0,0,0,.45), 0 0 30px rgba(200,161,77,.12);
    }

        .pl-card:hover::before {
            transform: scaleX(1);
        }

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

.pl-number {
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 70px;
    font-family: "Cormorant Garamond",serif;
    color: rgba(200,161,77,.08);
    font-weight: 700;
}

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

.pl-icon {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 35px;
    background: linear-gradient(135deg,#4A8C43,#6DBE5E);
    box-shadow: 0 0 25px rgba(90,180,90,.25);
    transition: .45s;
}

    .pl-icon i {
        color: #fff;
        font-size: 34px;
    }

.pl-card:hover .pl-icon {
    transform: rotate(10deg) scale(1.08);
}

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

.pl-card h3 {
    color: #fff;
    font-size: 30px;
    margin-bottom: 20px;
    font-family: "Cormorant Garamond",serif;
    transition: .35s;
}

.pl-card:hover h3 {
    color: #C8A14D;
}

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

.pl-card p {
    color: rgba(255,255,255,.75);
    font-size: 17px;
    line-height: 1.9;
}

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

@media(max-width:1200px) {

    .pl-features-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:768px) {

    .pl-features-section {
        padding: 80px 0;
    }

    .pl-section-title h2 {
        font-size: 48px;
    }

    .pl-section-title p {
        font-size: 17px;
    }

    .pl-features-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .pl-card {
        padding: 35px 28px;
    }

    .pl-number {
        font-size: 55px;
    }

    .pl-icon {
        width: 70px;
        height: 70px;
    }

        .pl-icon i {
            font-size: 28px;
        }

    .pl-card h3 {
        font-size: 26px;
    }
}

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

.about-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: url("../back7.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

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

.about-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, rgba(5,12,8,.92) 0%, rgba(5,12,8,.80) 35%, rgba(5,12,8,.45) 65%, rgba(5,12,8,.18) 100% );
}

    /* Golden Light */

    .about-overlay::after {
        content: "";
        position: absolute;
        top: -220px;
        right: -120px;
        width: 700px;
        height: 700px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(200,161,77,.18), transparent 72% );
    }

/*=========================================================
                DECORATIVE LEAVES
=========================================================*/

.about-leaf {
    position: absolute;
    opacity: .14;
    pointer-events: none;
    animation: aboutFloat 10s ease-in-out infinite;
}

.about-leaf1 {
    width: 220px;
    top: 100px;
    left: -50px;
}

.about-leaf2 {
    width: 170px;
    right: 4%;
    top: 150px;
    animation-delay: 2s;
}

.about-leaf3 {
    width: 260px;
    bottom: 80px;
    left: 40%;
    animation-delay: 4s;
}

.about-leaf4 {
    width: 180px;
    bottom: 40px;
    right: -30px;
    animation-delay: 6s;
}

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

.about-container {
    position: relative;
    z-index: 5;
    width: 92%;
    max-width: 1650px;
    margin: auto;
}

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

.about-content {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 80px;
    padding-top: 130px;
    padding-bottom: 80px;
}

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

.about-text {
    position: relative;
    z-index: 5;
}

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

.about-image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*=========================================================
                HERO IMAGE BOX
=========================================================*/

.about-image-box {
    position: relative;
    width: 100%;
    max-width: 620px;
    border-radius: 40px;
    overflow: hidden;
    border: 1px solid rgba(200,161,77,.25);
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(8px);
    box-shadow: 0 40px 80px rgba(0,0,0,.45);
}

    .about-image-box img {
        display: block;
        width: 100%;
        height: 760px;
        object-fit: cover;
        transition: .8s;
    }

    .about-image-box:hover img {
        transform: scale(1.06);
    }

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

    .about-image-box::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 40px;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 0 60px rgba(200,161,77,.10);
        pointer-events: none;
    }

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

.about-light {
    position: absolute;
    width: 700px;
    height: 700px;
    bottom: -280px;
    left: -200px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(60,130,70,.12), transparent 72% );
}

/*=========================================================
                FLOAT ANIMATION
=========================================================*/

@keyframes aboutFloat {

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

    50% {
        transform: translateY(-18px) rotate(6deg);
    }

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


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

.about-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 90px;
    z-index: 999;
    transition: .45s;
    display: flex;
    align-items: center;
}

.about-container {
    width: 92%;
    max-width: 1680px;
    margin: auto;
}

/*=========================================================
                    NAVBAR
=========================================================*/
.about-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

/* Gold area behind logo */
.about-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 35px;
    height: 90px;
    background: linear-gradient( 135deg, #d7b36a 0%, #c8a14d 40%, #a97f2c 100% );
    border-radius: 0 45px 45px 0;
    box-shadow: 0 10px 25px rgba(200,161,77,.30);
}

    .about-logo img {
        height: 150px;
        width: auto;
        transform: scale(1.4);
        transform-origin: left center;
    }

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

.about-menu {
    display: flex;
    align-items: center;
    gap: 38px;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .about-menu li {
        position: relative;
    }

    .about-menu a {
        position: relative;
        color: #ffffff;
        text-decoration: none;
        font-size: 15px;
        font-weight: 500;
        letter-spacing: .5px;
        transition: .35s;
    }

        /*=========================================================
                    HOVER EFFECT
=========================================================*/

        .about-menu a::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -12px;
            width: 0;
            height: 2px;
            background: #C8A14D;
            transition: .35s;
        }

        .about-menu a:hover {
            color: #C8A14D;
        }

            .about-menu a:hover::after {
                width: 100%;
            }

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

.about-active {
    color: #C8A14D !important;
}

    .about-active::after {
        width: 100% !important;
    }

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

.about-nav-right {
    display: flex;
    align-items: center;
    gap: 18px;
}

/*=========================================================
                    SEARCH BOX
=========================================================*/

.about-search {
    position: relative;
    display: flex;
    align-items: center;
}

    .about-search input {
        width: 240px;
        height: 48px;
        border-radius: 50px;
        border: 1px solid rgba(200,161,77,.65);
        background: rgba(6,20,12,.40);
        backdrop-filter: blur(18px);
        color: #ffffff;
        padding: 0 60px 0 22px;
        outline: none;
        transition: .35s;
        font-size: 15px;
    }

        .about-search input::placeholder {
            color: rgba(255,255,255,.65);
        }

        .about-search input:focus {
            border-color: #d7b36a;
            box-shadow: 0 0 25px rgba(200,161,77,.18);
        }

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

    .about-search button {
        position: absolute;
        right: 5px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        color: #08120D;
        background: #C8A14D;
        transition: .35s;
    }

        .about-search button:hover {
            background: #dcb96b;
            transform: rotate(8deg) scale(1.05);
        }

        .about-search button i {
            font-size: 15px;
        }

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

.about-user {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #C8A14D;
    color: #08120D;
    transition: .35s;
}

    .about-user:hover {
        transform: translateY(-3px);
        background: #dcb96b;
        box-shadow: 0 10px 25px rgba(200,161,77,.35);
    }

    .about-user i {
        font-size: 17px;
    }

/*=========================================================
                HEADER GLASS EFFECT
=========================================================*/

.about-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( 180deg, rgba(2,10,6,.35), rgba(2,10,6,0) );
    z-index: -1;
    pointer-events: none;
}

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

@media (max-width:1200px) {

    .about-menu {
        gap: 24px;
    }

    .about-search input {
        width: 190px;
    }
}

@media (max-width:992px) {

    .about-menu {
        display: none;
    }

    .about-search {
        display: none;
    }

    .about-logo img {
        height: 52px;
    }
}

@media (max-width:768px) {

    .about-header {
        padding: 18px 0;
    }

    .about-user {
        width: 42px;
        height: 42px;
    }

    .about-logo img {
        height: 46px;
    }
}

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

.about-hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: url('../images/about-bg.jpg') center center/cover no-repeat;
    display: flex;
    align-items: center;
}

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

.about-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, rgba(3,12,8,.94) 0%, rgba(4,16,10,.88) 40%, rgba(4,16,10,.60) 70%, rgba(4,16,10,.35) 100%);
}

    /* Golden Light */

    .about-overlay::after {
        content: "";
        position: absolute;
        right: -120px;
        top: -150px;
        width: 650px;
        height: 650px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(200,161,77,.14), transparent 70%);
    }

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

.about-hero-content {
    position: relative;
    z-index: 20;
    min-height: 100vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 90px;
    padding-top: 120px;
}

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

.about-left {
    width: 47%;
}

.about-subtitle {
    display: inline-block;
    color: #C8A14D;
    font-size: 15px;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.about-line {
    width: 80px;
    height: 2px;
    background: #C8A14D;
    margin-bottom: 30px;
}

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

.about-left h1 {
    font-family: "Cormorant Garamond", serif;
    color: #C8A14D;
    font-size: 84px;
    line-height: 1;
    font-weight: 500;
    margin-bottom: 35px;
}

    .about-left h1 span {
        color: #ffffff;
    }

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

.about-left p {
    max-width: 600px;
    color: rgba(255,255,255,.88);
    font-size: 20px;
    line-height: 2;
    margin-bottom: 45px;
}

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

.about-btn {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 18px 42px;
    border-radius: 60px;
    text-decoration: none;
    background: linear-gradient( 135deg, #C8A14D, #a57a28);
    color: white;
    font-size: 15px;
    letter-spacing: 2px;
    transition: .4s;
}

    .about-btn:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 35px rgba(200,161,77,.35);
    }

    .about-btn i {
        transition: .35s;
    }

    .about-btn:hover i {
        transform: translateX(8px);
    }

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

.about-right {
    width: 53%;
    display: flex;
    justify-content: flex-end;
}

.about-image-box {
    width: 100%;
    max-width: 720px;
    border-radius: 40px;
    border: 1px solid rgba(200,161,77,.45);
    overflow: hidden;
    position: relative;
    box-shadow: 0 35px 70px rgba(0,0,0,.45);
}

    .about-image-box::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 40px;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 0 50px rgba(200,161,77,.06);
        pointer-events: none;
    }

    .about-image-box img {
        width: 100%;
        display: block;
        transition: 1.2s;
    }

    .about-image-box:hover img {
        transform: scale(1.06);
    }

/*=========================================================
                GOLD LEAF
=========================================================*/

.about-decoration {
    position: absolute;
    left: 47%;
    top: 52%;
    transform: translate(-50%,-50%);
    opacity: .22;
    z-index: 5;
}

    .about-decoration img {
        width: 220px;
    }

/*=========================================================
                    LEAVES
=========================================================*/

.about-leaf {
    position: absolute;
    opacity: .18;
    pointer-events: none;
}

.about-leaf1 {
    left: -40px;
    bottom: 30px;
    width: 240px;
}

.about-leaf2 {
    right: -40px;
    top: 120px;
    width: 240px;
}

.about-leaf3 {
    right: 180px;
    bottom: -50px;
    width: 180px;
}

.about-leaf4 {
    left: 40%;
    top: 180px;
    width: 160px;
    opacity: .10;
}

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

.about-left {
    animation: aboutFadeLeft 1.2s ease;
}

.about-right {
    animation: aboutFadeRight 1.4s ease;
}

@keyframes aboutFadeLeft {

    from {
        opacity: 0;
        transform: translateX(-80px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes aboutFadeRight {

    from {
        opacity: 0;
        transform: translateX(80px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

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

@media(max-width:1200px) {

    .about-left h1 {
        font-size: 70px;
    }

    .about-left p {
        font-size: 18px;
    }
}

@media(max-width:992px) {

    .about-hero-content {
        flex-direction: column;
        text-align: center;
        gap: 60px;
        padding: 170px 0 80px;
    }

    .about-left,
    .about-right {
        width: 100%;
    }

    .about-line {
        margin: auto auto 30px;
    }

    .about-left p {
        margin: auto auto 40px;
    }

    .about-decoration {
        display: none;
    }
}

@media(max-width:768px) {

    .about-left h1 {
        font-size: 52px;
    }

    .about-left p {
        font-size: 17px;
        line-height: 1.8;
    }

    .about-btn {
        padding: 16px 34px;
    }

    .about-image-box {
        border-radius: 22px;
    }
}

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

.about-story {
    position: relative;
    padding: 120px 0;
    background: linear-gradient(180deg, #08130d 0%, #09170e 50%, #07120b 100%);
    overflow: hidden;
}

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

    .about-story::before {
        content: "";
        position: absolute;
        top: -180px;
        right: -180px;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(200,161,77,.12), transparent 70%);
        pointer-events: none;
    }

    .about-story::after {
        content: "";
        position: absolute;
        bottom: -220px;
        left: -220px;
        width: 520px;
        height: 520px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(74,128,72,.12), transparent 70%);
        pointer-events: none;
    }

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

.about-container {
    width: 92%;
    max-width: 1650px;
    margin: auto;
}

.about-story .about-container {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 80px;
}

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

.about-story-image {
    position: relative;
}

    .about-story-image img {
        width: 100%;
        display: block;
        border-radius: 32px;
        border: 1px solid rgba(200,161,77,.35);
        box-shadow: 0 30px 70px rgba(0,0,0,.45);
        transition: .6s;
        position: relative;
        margin-top: -70px;
        height:700px;
    }

    .about-story-image:hover img {
        transform: scale(1.02);
    }

.about-story-glow {
    position: absolute;
    inset: 0;
    border-radius: 32px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 0 45px rgba(200,161,77,.10);
    pointer-events: none;
}

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

.about-story-content {
    position: relative;
    z-index: 5;
}

/*=========================================================
    SECTION TAG
=========================================================*/

.about-section-tag {
    display: inline-block;
    color: #C8A14D;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 14px;
    margin-bottom: 25px;
    position: relative;
}

    .about-section-tag::after {
        content: "";
        display: block;
        width: 110px;
        height: 2px;
        background: #C8A14D;
        margin-top: 15px;
    }

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

.about-story-content h2 {
    font-family: "Cormorant Garamond",serif;
    color: #ffffff;
    font-size: 68px;
    line-height: 1.05;
    font-weight: 500;
    margin-bottom: 35px;
}

    .about-story-content h2 span {
        color: #C8A14D;
    }

/*=========================================================
    PARAGRAPH
=========================================================*/

.about-story-content p {
    color: rgba(255,255,255,.82);
    font-size: 18px;
    line-height: 2;
    margin-bottom: 25px;
}

.about-story-content strong {
    color: #C8A14D;
    font-weight: 600;
}

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

.about-story-features {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 25px;
    margin: 50px 0;
}

.about-story-feature {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 25px;
    border-radius: 22px;
    border: 1px solid rgba(200,161,77,.20);
    background: linear-gradient( 135deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
    transition: .45s;
}

    .about-story-feature:hover {
        transform: translateY(-8px);
        border-color: rgba(200,161,77,.45);
        box-shadow: 0 18px 45px rgba(0,0,0,.30);
    }

.about-story-icon {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient( 135deg, rgba(65,118,57,.95), rgba(40,75,35,.95));
    border: 1px solid rgba(200,161,77,.35);
}

    .about-story-icon i {
        color: #C8A14D;
        font-size: 28px;
    }

.about-story-feature h4 {
    color: #ffffff;
    font-size: 22px;
    margin-bottom: 12px;
    font-family: "Cormorant Garamond",serif;
    font-weight: 600;
}

.about-story-feature p {
    margin: 0;
    color: rgba(255,255,255,.72);
    font-size: 15px;
    line-height: 1.8;
}

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

.about-story-btn {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 18px 38px;
    border-radius: 60px;
    text-decoration: none;
    color: #C8A14D;
    border: 1px solid #C8A14D;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 13px;
    font-weight: 600;
    transition: .4s;
    background: rgba(255,255,255,.03);
    backdrop-filter: blur(10px);
}

    .about-story-btn i {
        transition: .35s;
    }

    .about-story-btn:hover {
        background: #C8A14D;
        color: #08120d;
        transform: translateY(-5px);
        box-shadow: 0 20px 45px rgba(200,161,77,.30);
    }

        .about-story-btn:hover i {
            transform: translateX(8px);
        }


/*=========================================================
    RESPONSIVE - 1400px
=========================================================*/

@media (max-width:1400px) {

    .about-story {
        padding: 100px 0;
    }

        .about-story .about-container {
            gap: 60px;
        }

    .about-story-content h2 {
        font-size: 58px;
    }

    .about-story-content p {
        font-size: 17px;
    }
}


/*=========================================================
    RESPONSIVE - 1200px
=========================================================*/

@media (max-width:1200px) {

    .about-story {
        padding: 90px 0;
    }

        .about-story .about-container {
            grid-template-columns: 1fr;
            gap: 60px;
        }

    .about-story-image {
        order: 1;
    }

    .about-story-content {
        order: 2;
    }

        .about-story-content h2 {
            font-size: 54px;
        }

    .about-story-features {
        grid-template-columns: repeat(2,1fr);
    }
}


/*=========================================================
    RESPONSIVE - 992px
=========================================================*/

@media (max-width:992px) {

    .about-story {
        padding: 80px 0;
    }

        .about-story .about-container {
            gap: 50px;
        }

    .about-story-content {
        text-align: center;
    }

    .about-section-tag {
        display: inline-block;
    }

        .about-section-tag::after {
            margin-left: auto;
            margin-right: auto;
        }

    .about-story-content h2 {
        font-size: 46px;
        line-height: 1.1;
    }

    .about-story-content p {
        font-size: 16px;
        line-height: 1.9;
    }

    .about-story-features {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .about-story-feature {
        text-align: left;
    }

    .about-story-btn {
        margin: auto;
    }
}


/*=========================================================
    RESPONSIVE - 768px
=========================================================*/

@media (max-width:768px) {

    .about-story {
        padding: 70px 0;
    }

    .about-container {
        width: 94%;
    }

    .about-story-image img {
        border-radius: 22px;
    }

    .about-story-glow {
        border-radius: 22px;
    }

    .about-story-content h2 {
        font-size: 38px;
    }

    .about-story-content p {
        font-size: 15px;
        line-height: 1.8;
    }

    .about-story-features {
        margin: 35px 0;
    }

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

    .about-story-icon {
        width: 60px;
        height: 60px;
    }

        .about-story-icon i {
            font-size: 22px;
        }

    .about-story-feature h4 {
        font-size: 20px;
    }

    .about-story-btn {
        width: 100%;
        justify-content: center;
        padding: 16px 25px;
        font-size: 12px;
    }
}


/*=========================================================
    RESPONSIVE - 576px
=========================================================*/

@media (max-width:576px) {

    .about-story {
        padding: 60px 0;
    }

    .about-story-content h2 {
        font-size: 32px;
    }

    .about-section-tag {
        font-size: 12px;
        letter-spacing: 3px;
    }

        .about-section-tag::after {
            width: 80px;
        }

    .about-story-feature {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 25px 20px;
    }

    .about-story-icon {
        margin-bottom: 10px;
    }

    .about-story-feature h4 {
        font-size: 22px;
    }

    .about-story-feature p {
        font-size: 14px;
    }
}


/*=========================================================
    RESPONSIVE - 400px
=========================================================*/

@media (max-width:400px) {

    .about-story {
        padding: 50px 0;
    }

    .about-container {
        width: 95%;
    }

    .about-story-content h2 {
        font-size: 28px;
    }

    .about-story-content p {
        font-size: 14px;
    }

    .about-story-feature {
        padding: 20px 18px;
    }

    .about-story-btn {
        padding: 15px 20px;
        font-size: 11px;
        letter-spacing: 1px;
    }
}


/*=========================================================
    ABOUT VISION • MISSION • VALUES
=========================================================*/

.about-vmv {
    position: relative;
    padding: 40px 0 90px;
    overflow: hidden;
}

    /* Decorative Glow */

    .about-vmv::before {
        content: "";
        position: absolute;
        left: -180px;
        top: -120px;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(200,161,77,.10), transparent 72%);
        pointer-events: none;
    }

    .about-vmv::after {
        content: "";
        position: absolute;
        right: -200px;
        bottom: -150px;
        width: 450px;
        height: 450px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(75,130,70,.14), transparent 72%);
        pointer-events: none;
    }

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

.about-vmv-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 28px;
}

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

.about-vmv-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 38px;
    border-radius: 26px;
    background: linear-gradient( 135deg, rgba(18,34,20,.78), rgba(8,18,10,.82));
    border: 1px solid rgba(200,161,77,.32);
    backdrop-filter: blur(14px);
    overflow: hidden;
    transition: .45s;
}

    .about-vmv-card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 26px;
        background: linear-gradient( 140deg, rgba(255,255,255,.05), transparent 45%);
        pointer-events: none;
    }

    .about-vmv-card:hover {
        transform: translateY(-10px);
        border-color: #C8A14D;
        box-shadow: 0 25px 60px rgba(0,0,0,.40), 0 0 35px rgba(200,161,77,.18);
    }

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

.about-vmv-icon {
    width: 86px;
    height: 86px;
    min-width: 86px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: linear-gradient( 135deg, rgba(60,92,44,.95), rgba(24,42,20,.95));
    border: 1px solid rgba(200,161,77,.35);
    box-shadow: inset 0 0 18px rgba(255,255,255,.04), 0 0 30px rgba(200,161,77,.12);
    transition: .45s;
}

.about-vmv-card:hover .about-vmv-icon {
    transform: rotate(10deg) scale(1.08);
    box-shadow: 0 0 40px rgba(200,161,77,.28);
}

.about-vmv-icon i {
    font-size: 38px;
    color: #C8A14D;
}

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

.about-vmv-content {
    flex: 1;
}

    .about-vmv-content h3 {
        color: #C8A14D;
        font-size: 40px;
        font-family: "Cormorant Garamond",serif;
        font-weight: 500;
        margin-bottom: 20px;
    }

    .about-vmv-content p {
        color: rgba(255,255,255,.82);
        font-size: 17px;
        line-height: 1.9;
        margin: 0;
    }

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

    .about-vmv-content ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .about-vmv-content li {
        position: relative;
        padding-left: 24px;
        margin-bottom: 14px;
        color: rgba(255,255,255,.88);
        font-size: 17px;
        line-height: 1.8;
    }

        .about-vmv-content li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 12px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #C8A14D;
            box-shadow: 0 0 10px rgba(200,161,77,.6);
        }

/*=========================================================
    HOVER ACCENT
=========================================================*/

.about-vmv-card::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 3px;
    background: #C8A14D;
    transition: .45s;
}

.about-vmv-card:hover::after {
    width: 100%;
}

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

@media(max-width:1200px) {

    .about-vmv-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:992px) {

    .about-vmv {
        padding: 60px 0;
    }

    .about-vmv-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .about-vmv-card {
        padding: 34px;
    }

    .about-vmv-content h3 {
        font-size: 34px;
    }
}

@media(max-width:768px) {

    .about-vmv-card {
        flex-direction: column;
        text-align: center;
        align-items: center;
        padding: 30px 24px;
    }

    .about-vmv-content {
        text-align: center;
    }

        .about-vmv-content h3 {
            font-size: 30px;
        }

        .about-vmv-content p {
            font-size: 16px;
        }

        .about-vmv-content li {
            padding-left: 0;
        }

            .about-vmv-content li::before {
                display: none;
            }

    .about-vmv-icon {
        width: 78px;
        height: 78px;
        min-width: 78px;
    }

        .about-vmv-icon i {
            font-size: 34px;
        }
}


/*=========================================================
    ABOUT LEADERSHIP SECTION
=========================================================*/

.about-leadership {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
}

    /* Background Glow */

    .about-leadership::before {
        content: "";
        position: absolute;
        top: -220px;
        left: -180px;
        width: 520px;
        height: 520px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(200,161,77,.10), transparent 72%);
        pointer-events: none;
    }

    .about-leadership::after {
        content: "";
        position: absolute;
        right: -180px;
        bottom: -220px;
        width: 520px;
        height: 520px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(70,130,75,.14), transparent 72%);
        pointer-events: none;
    }

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

.about-section-heading {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 80px;
}

    .about-section-heading span {
        display: inline-block;
        color: #C8A14D;
        text-transform: uppercase;
        letter-spacing: 4px;
        font-size: 14px;
        margin-bottom: 18px;
        position: relative;
    }

        .about-section-heading span::after {
            content: "";
            display: block;
            width: 90px;
            height: 2px;
            margin: 15px auto 0;
            background: #C8A14D;
        }

    .about-section-heading h2 {
        color: #ffffff;
        font-size: 58px;
        font-family: "Cormorant Garamond",serif;
        font-weight: 500;
        margin-bottom: 20px;
    }

    .about-section-heading p {
        color: rgba(255,255,255,.80);
        font-size: 19px;
        line-height: 1.9;
    }

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

.about-leadership-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 45px;
}

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

.about-leader-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 45px;
    border-radius: 30px;
    background: linear-gradient( 135deg, rgba(17,35,20,.82), rgba(7,18,10,.88));
    border: 1px solid rgba(200,161,77,.30);
    backdrop-filter: blur(15px);
    overflow: hidden;
    transition: .45s;
}

    .about-leader-card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 30px;
        background: linear-gradient( 135deg, rgba(255,255,255,.05), transparent 45%);
        pointer-events: none;
    }

    .about-leader-card:hover {
        transform: translateY(-10px);
        border-color: #C8A14D;
        box-shadow: 0 25px 60px rgba(0,0,0,.45), 0 0 40px rgba(200,161,77,.16);
    }

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

.about-leader-image {
    flex-shrink: 0;
}

    .about-leader-image img {
        width: 250px;
        display: block;
        transition: .5s;
        filter: drop-shadow(0 25px 40px rgba(0,0,0,.45));
    }

.about-leader-card:hover img {
    transform: scale(1.04);
}

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

.about-leader-content {
    flex: 1;
}

.about-leader-role {
    display: inline-block;
    color: #67B85D;
    font-size: 15px;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 12px;
    font-weight: 600;
}

.about-leader-content h3 {
    color: #C8A14D;
    font-size: 42px;
    font-family: "Cormorant Garamond",serif;
    font-weight: 500;
    margin-bottom: 18px;
}

.about-leader-content p {
    color: rgba(255,255,255,.82);
    font-size: 17px;
    line-height: 1.9;
    margin-bottom: 28px;
}

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

.about-social {
    display: flex;
    gap: 15px;
}

    .about-social a {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        color: #C8A14D;
        border: 1px solid rgba(200,161,77,.35);
        background: rgba(255,255,255,.03);
        transition: .35s;
    }

        .about-social a:hover {
            background: #C8A14D;
            color: #08120D;
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(200,161,77,.35);
        }

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

@media(max-width:1400px) {

    .about-leader-card {
        gap: 30px;
        padding: 38px;
    }

    .about-leader-image img {
        width: 220px;
    }
}

@media(max-width:1200px) {

    .about-leadership-grid {
        grid-template-columns: 1fr;
    }

    .about-leader-card {
        max-width: 900px;
        margin: auto;
    }
}

@media(max-width:768px) {

    .about-leadership {
        padding: 90px 0;
    }

    .about-section-heading h2 {
        font-size: 42px;
    }

    .about-section-heading p {
        font-size: 17px;
    }

    .about-leader-card {
        flex-direction: column;
        text-align: center;
        padding: 35px 25px;
    }

    .about-leader-image img {
        width: 210px;
    }

    .about-leader-content h3 {
        font-size: 34px;
    }

    .about-social {
        justify-content: center;
    }
}

@media(max-width:480px) {

    .about-section-heading h2 {
        font-size: 34px;
    }

    .about-leader-image img {
        width: 180px;
    }

    .about-leader-content h3 {
        font-size: 30px;
    }

    .about-leader-content p {
        font-size: 16px;
    }

    .about-social a {
        width: 42px;
        height: 42px;
    }
}

/*=========================================================
            PRODUCTS PAGE - PART 1C-1A
            Global • Header • Hero Background
=========================================================*/

/*=========================================================
                    GOOGLE FONTS
=========================================================*/

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

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

:root {
    --primary: #07150C;
    --secondary: #0D2215;
    --gold: #C8A14D;
    --gold-light: #E2C578;
    --green: #2E8B57;
    --white: #ffffff;
    --text: #D8DDD8;
    --radius: 30px;
    --transition: .45s;
    --shadow: 0 20px 50px rgba(0,0,0,.35);
}

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

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

html {
    scroll-behavior: smooth;
}

body {
    background: #07150C;
    color: #fff;
    font-family: 'Poppins',sans-serif;
    overflow-x: hidden;
}

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

.products-container {
    width: 92%;
    max-width: 1680px;
    margin: auto;
    position: relative;
    z-index: 5;
}

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

.products-hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: url("../images/products-bg.png") center center / cover no-repeat;
}

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

.products-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, rgba(3,12,7,.88) 0%, rgba(3,12,7,.82) 35%, rgba(3,12,7,.55) 65%, rgba(3,12,7,.35) 100%);
}

/*=========================================================
                    GOLD LIGHT
=========================================================*/

.products-gradient {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

    .products-gradient::before {
        content: "";
        position: absolute;
        top: -200px;
        right: -100px;
        width: 700px;
        height: 700px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(200,161,77,.18), transparent 70%);
    }

    .products-gradient::after {
        content: "";
        position: absolute;
        bottom: -220px;
        left: -120px;
        width: 650px;
        height: 650px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(50,110,55,.20), transparent 70%);
    }

/*=========================================================
                    DECORATIVE LEAVES
=========================================================*/

.products-leaf {
    position: absolute;
    pointer-events: none;
    opacity: .18;
    animation: leafFloat 10s ease-in-out infinite;
}

.products-leaf1 {
    width: 220px;
    top: 120px;
    left: -60px;
}

.products-leaf2 {
    width: 180px;
    right: 3%;
    top: 160px;
}

.products-leaf3 {
    width: 140px;
    bottom: 90px;
    left: 45%;
}

@keyframes leafFloat {

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

    50% {
        transform: translateY(-20px) rotate(8deg);
    }

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

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

.products-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 28px 0;
}

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

.products-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

.products-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 14px 26px;
    border-radius: 70px;
    background: linear-gradient( 135deg, rgba(200,161,77,.22), rgba(200,161,77,.10));
    border: 1px solid rgba(200,161,77,.35);
    backdrop-filter: blur(16px);
    transition: var(--transition);
}

    .products-logo img {
        height: 72px;
        width: auto;
        transition: var(--transition);
    }

    .products-logo:hover {
        transform: translateY(-3px);
        box-shadow: 0 20px 40px rgba(200,161,77,.20);
    }

        .products-logo:hover img {
            transform: scale(1.05);
        }


/*=========================================================
            PRODUCTS PAGE - PART 1C-1B
            Navigation • Hero Layout • Typography
=========================================================*/

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

.products-menu {
    display: flex;
    align-items: center;
    gap: 42px;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .products-menu li {
        position: relative;
    }

    .products-menu a {
        position: relative;
        text-decoration: none;
        color: #ffffff;
        font-size: 15px;
        font-weight: 500;
        letter-spacing: .5px;
        transition: .35s;
    }

        .products-menu a::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -12px;
            width: 0;
            height: 2px;
            background: var(--gold);
            transition: .35s;
        }

        .products-menu a:hover {
            color: var(--gold);
        }

            .products-menu a:hover::after {
                width: 100%;
            }

.products-active {
    color: var(--gold) !important;
}

    .products-active::after {
        width: 100% !important;
    }

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

.products-nav-right {
    display: flex;
    align-items: center;
    gap: 18px;
}

/*=========================================================
                    SEARCH
=========================================================*/

.products-search {
    position: relative;
}

    .products-search input {
        width: 245px;
        height: 50px;
        border-radius: 50px;
        border: 1px solid rgba(200,161,77,.45);
        background: rgba(255,255,255,.05);
        backdrop-filter: blur(16px);
        color: #fff;
        outline: none;
        padding-left: 22px;
        padding-right: 58px;
        font-size: 15px;
        transition: .35s;
    }

        .products-search input::placeholder {
            color: rgba(255,255,255,.60);
        }

        .products-search input:focus {
            border-color: var(--gold);
            box-shadow: 0 0 18px rgba(200,161,77,.18);
        }

    .products-search button {
        position: absolute;
        top: 5px;
        right: 5px;
        width: 40px;
        height: 40px;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        color: #08140c;
        background: linear-gradient( 135deg, var(--gold-light), var(--gold));
        transition: .35s;
    }

        .products-search button:hover {
            transform: rotate(12deg);
        }

/*=========================================================
                    USER
=========================================================*/

.products-user {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: #07140C;
    text-decoration: none;
    background: linear-gradient( 135deg, var(--gold-light), var(--gold));
    transition: .35s;
}

    .products-user:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 30px rgba(200,161,77,.35);
    }

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

.products-hero-grid {
    position: relative;
    z-index: 20;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 90px;
    align-items: center;
    min-height: 100vh;
    padding-top: 140px;
    padding-bottom: 110px;
}

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

.products-content {
    max-width: 700px;
}

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

.products-tag {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    color: var(--gold);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 30px;
}

    .products-tag::after {
        content: "";
        width: 80px;
        height: 2px;
        background: var(--gold);
    }

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

.products-content h1 {
    font-family: "Cormorant Garamond",serif;
    font-size: 86px;
    line-height: .95;
    font-weight: 600;
    margin-bottom: 28px;
    color: #fff;
}

    .products-content h1 span {
        display: block;
        margin-top: 12px;
        color: var(--gold);
    }

/*=========================================================
                    PARAGRAPH
=========================================================*/

.products-content p {
    max-width: 620px;
    color: rgba(255,255,255,.82);
    font-size: 19px;
    line-height: 2;
    margin-bottom: 45px;
}

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

.products-buttons {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 55px;
}

.products-btn {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 18px 38px;
    border-radius: 60px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    color: #08140c;
    background: linear-gradient( 135deg, var(--gold-light), var(--gold));
    transition: .4s;
    box-shadow: 0 18px 35px rgba(200,161,77,.25);
}

    .products-btn:hover {
        transform: translateY(-5px);
        box-shadow: 0 25px 50px rgba(200,161,77,.40);
    }

    .products-btn i {
        transition: .35s;
    }

    .products-btn:hover i {
        transform: translateX(6px);
    }

.products-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 36px;
    border-radius: 60px;
    border: 1px solid rgba(200,161,77,.45);
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(14px);
    color: #fff;
    text-decoration: none;
    transition: .35s;
}

    .products-btn-outline:hover {
        background: rgba(200,161,77,.14);
        border-color: var(--gold);
    }

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

.products-stats {
    display: flex;
    gap: 60px;
    margin-top: 25px;
}

.products-stat {
    position: relative;
}

    .products-stat:not(:last-child)::after {
        content: "";
        position: absolute;
        right: -30px;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 48px;
        background: rgba(255,255,255,.15);
    }

    .products-stat h3 {
        font-size: 42px;
        font-family: "Cormorant Garamond",serif;
        color: var(--gold);
        margin-bottom: 6px;
    }

    .products-stat span {
        color: rgba(255,255,255,.70);
        font-size: 14px;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

/*=========================================================
            PRODUCTS PAGE - PART 1C-1C
      Hero Showcase • Floating Cards • Animations
=========================================================*/

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

.products-showcase {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 720px;
}

/*=========================================================
                    GOLD GLOW
=========================================================*/

.products-glow {
    position: absolute;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200,161,77,.28), rgba(200,161,77,.08) 45%, transparent 75%);
    filter: blur(10px);
    animation: glowPulse 6s ease-in-out infinite;
    z-index: 0;
}

@keyframes glowPulse {

    0% {
        transform: scale(1);
        opacity: .7;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: .7;
    }
}

/*=========================================================
                    MAIN PRODUCT IMAGE
=========================================================*/

.products-main-image {
    position: relative;
    width: 100%;
    max-width: 700px;
    z-index: 5;
    animation: heroFloat 6s ease-in-out infinite;
    filter: drop-shadow(0 50px 70px rgba(0,0,0,.45));
    transition: .5s;
}

    .products-main-image:hover {
        transform: scale(1.03);
    }

@keyframes heroFloat {

    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-18px);
    }

    100% {
        transform: translateY(0px);
    }
}

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

.products-badge {
    position: absolute;
    top: 80px;
    right: 20px;
    width: 210px;
    padding: 20px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(8,22,12,.78);
    backdrop-filter: blur(22px);
    border: 1px solid rgba(200,161,77,.35);
    box-shadow: 0 25px 50px rgba(0,0,0,.35);
    z-index: 20;
}

.badge-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient( 135deg, var(--gold-light), var(--gold));
    color: #06120a;
    font-size: 22px;
    flex-shrink: 0;
}

.products-badge strong {
    display: block;
    font-size: 18px;
    color: #fff;
    margin-bottom: 5px;
}

.products-badge span {
    color: rgba(255,255,255,.75);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

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

.products-card {
    position: absolute;
    left: 0;
    bottom: 100px;
    width: 260px;
    padding: 24px;
    border-radius: 26px;
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(200,161,77,.28);
    display: flex;
    align-items: center;
    gap: 18px;
    box-shadow: 0 25px 60px rgba(0,0,0,.30);
    z-index: 20;
}

.card-icon {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    background: linear-gradient( 135deg, var(--gold-light), var(--gold));
    color: #07140C;
    flex-shrink: 0;
}

.products-card h4 {
    font-family: "Cormorant Garamond",serif;
    font-size: 28px;
    color: #fff;
    margin-bottom: 4px;
}

.products-card p {
    color: rgba(255,255,255,.72);
    font-size: 14px;
}

/*=========================================================
                    SCROLL INDICATOR
=========================================================*/

.products-scroll {
    position: absolute;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 50;
}

    .products-scroll span {
        color: rgba(255,255,255,.65);
        font-size: 13px;
        letter-spacing: 3px;
        text-transform: uppercase;
    }

.products-scroll-line {
    width: 2px;
    height: 60px;
    border-radius: 10px;
    background: rgba(255,255,255,.20);
    position: relative;
    overflow: hidden;
}

    .products-scroll-line::before {
        content: "";
        position: absolute;
        left: 0;
        top: -25px;
        width: 100%;
        height: 25px;
        background: var(--gold);
        animation: scrollMove 2s linear infinite;
    }

@keyframes scrollMove {

    from {
        top: -25px;
    }

    to {
        top: 60px;
    }
}

/*=========================================================
                    HERO FADE IN
=========================================================*/

.products-content {
    animation: fadeLeft 1s ease;
}

.products-showcase {
    animation: fadeRight 1.2s ease;
}

@keyframes fadeLeft {

    from {
        opacity: 0;
        transform: translateX(-60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeRight {

    from {
        opacity: 0;
        transform: translateX(60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

@media(max-width:1200px) {

    .products-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 60px;
    }

    .products-content {
        margin: auto;
    }

    .products-buttons {
        justify-content: center;
    }

    .products-stats {
        justify-content: center;
    }

    .products-showcase {
        min-height: 550px;
    }

    .products-card {
        left: 50%;
        transform: translateX(-50%);
        bottom: 20px;
    }

    .products-badge {
        right: 40px;
    }
}

@media(max-width:768px) {

    .products-main-image {
        max-width: 95%;
    }

    .products-card {
        position: relative;
        left: auto;
        bottom: auto;
        transform: none;
        margin-top: 25px;
        width: 100%;
    }

    .products-badge {
        position: absolute;
        top: 20px;
        right: 10px;
        width: 180px;
        padding: 16px;
    }

    .products-content h1 {
        font-size: 58px;
    }

    .products-buttons {
        flex-direction: column;
    }

    .products-stats {
        flex-direction: column;
        gap: 30px;
    }

    .products-scroll {
        display: none;
    }
}

/*=========================================================
            PRODUCTS PAGE - PART 1C-2
            Premium Category Cards
=========================================================*/

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

.products-categories {
    position: relative;
    margin-top: -140px;
    z-index: 100;
    padding-bottom: 120px;
}

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

.products-section-title {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 70px;
}

    .products-section-title span {
        display: inline-block;
        color: var(--gold);
        font-size: 14px;
        letter-spacing: 4px;
        text-transform: uppercase;
        margin-bottom: 18px;
    }

    .products-section-title h2 {
        font-family: "Cormorant Garamond",serif;
        font-size: 64px;
        font-weight: 600;
        color: #fff;
        margin-bottom: 20px;
    }

    .products-section-title p {
        color: rgba(255,255,255,.75);
        font-size: 18px;
        line-height: 1.9;
    }

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

.products-category-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 35px;
}

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

.products-category-card {
    position: relative;
    overflow: hidden;
    padding: 45px 35px;
    border-radius: 32px;
    background: linear-gradient( 180deg, rgba(18,45,24,.92), rgba(8,18,12,.95));
    border: 1px solid rgba(200,161,77,.22);
    backdrop-filter: blur(18px);
    transition: .45s;
    box-shadow: 0 25px 60px rgba(0,0,0,.28);
}

    /*=========================================================
                GOLD TOP LINE
=========================================================*/

    .products-category-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient( 90deg, transparent, var(--gold), transparent);
    }

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

    .products-category-card::after {
        content: "";
        position: absolute;
        top: -150px;
        right: -150px;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(200,161,77,.18), transparent 70%);
        transition: .5s;
    }

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

    .products-category-card:hover {
        transform: translateY(-15px);
        border-color: rgba(200,161,77,.55);
        box-shadow: 0 35px 70px rgba(0,0,0,.45);
    }

        .products-category-card:hover::after {
            transform: scale(1.3);
        }

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

.products-category-icon {
    width: 88px;
    height: 88px;
    border-radius: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 28px;
    font-size: 34px;
    color: #07150C;
    background: linear-gradient( 135deg, var(--gold-light), var(--gold));
    box-shadow: 0 15px 35px rgba(200,161,77,.28);
    transition: .45s;
}

.products-category-card:hover
.products-category-icon {
    transform: rotate(-8deg) scale(1.08);
}

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

.products-category-number {
    position: absolute;
    top: 28px;
    right: 30px;
    font-family: "Cormorant Garamond",serif;
    font-size: 42px;
    color: rgba(200,161,77,.18);
    font-weight: 700;
}

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

.products-category-card h3 {
    font-family: "Cormorant Garamond",serif;
    font-size: 34px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 18px;
}

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

.products-category-card p {
    color: rgba(255,255,255,.72);
    line-height: 1.9;
    font-size: 15px;
    margin-bottom: 30px;
}

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

.products-category-card a {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: var(--gold);
    font-weight: 600;
    transition: .35s;
}

    .products-category-card a i {
        transition: .35s;
    }

.products-category-card:hover a {
    color: var(--gold-light);
}

    .products-category-card:hover a i {
        transform: translateX(8px);
    }

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

.products-category-card .shine {
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient( 120deg, transparent, rgba(255,255,255,.16), transparent);
    transform: skewX(-25deg);
}

.products-category-card:hover .shine {
    animation: cardShine 1s;
}

@keyframes cardShine {

    from {
        left: -120%;
    }

    to {
        left: 150%;
    }
}

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

@media(max-width:1400px) {

    .products-category-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:768px) {

    .products-categories {
        margin-top: -80px;
        padding-bottom: 80px;
    }

    .products-section-title h2 {
        font-size: 46px;
    }

    .products-section-title p {
        font-size: 16px;
    }

    .products-category-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .products-category-card {
        padding: 35px 28px;
    }

    .products-category-icon {
        width: 72px;
        height: 72px;
        font-size: 28px;
    }

    .products-category-card h3 {
        font-size: 28px;
    }

    .products-category-number {
        font-size: 34px;
    }
}

/*=========================================================
            PRO FEATURED PRODUCTS
=========================================================*/

.pro-featured {
    padding: 120px 0;
    background: #07150C;
}

.pro-heading {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 70px;
}

    .pro-heading span {
        color: #C8A14D;
        letter-spacing: 4px;
        text-transform: uppercase;
        font-size: 14px;
    }

    .pro-heading h2 {
        font-family: "Cormorant Garamond",serif;
        color: #fff;
        font-size: 62px;
        margin: 18px 0;
    }

    .pro-heading p {
        color: #BFC6BF;
        line-height: 1.9;
        font-size: 18px;
    }

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

.pro-card {
    background: #0D2314;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid rgba(200,161,77,.25);
    transition: .45s;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

    .pro-card:hover {
        transform: translateY(-12px);
        border-color: #C8A14D;
        box-shadow: 0 35px 80px rgba(0,0,0,.5);
    }

.pro-image {
    position: relative;
    height: 300px;
    overflow: hidden;
}

    .pro-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: .6s;
    }

.pro-card:hover .pro-image img {
    transform: scale(1.08);
}

.pro-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(5,15,8,.55), transparent 60% );
}

.pro-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg,#E2C578,#C8A14D);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #07150C;
    font-size: 22px;
    z-index: 2;
}

.pro-content {
    padding: 30px;
}

    .pro-content h3 {
        font-family: "Cormorant Garamond",serif;
        font-size: 38px;
        color: #fff;
        margin-bottom: 8px;
    }

    .pro-content h4 {
        color: #C8A14D;
        font-size: 20px;
        font-weight: 500;
        margin-bottom: 18px;
    }

.pro-stars {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
}

    .pro-stars i {
        color: #FFD54A;
    }

.pro-content p {
    color: #D5DDD5;
    line-height: 1.9;
    margin-bottom: 28px;
    font-size: 15px;
}

.pro-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #C8A14D;
    text-decoration: none;
    font-weight: 600;
    transition: .35s;
}

    .pro-btn i {
        transition: .35s;
    }

    .pro-btn:hover {
        color: #E2C578;
    }

        .pro-btn:hover i {
            transform: translateX(6px);
        }

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

@media(max-width:1100px) {

    .pro-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:768px) {

    .pro-grid {
        grid-template-columns: 1fr;
    }

    .pro-heading h2 {
        font-size: 42px;
    }

    .pro-image {
        height: 240px;
    }

    .pro-content {
        padding: 24px;
    }

        .pro-content h3 {
            font-size: 30px;
        }
}

/*=========================================================
                FRUIT COLLECTION
=========================================================*/

.fruit-section {
    position: relative;
    padding: 130px 0;
    background: #06130C;
    overflow: hidden;
}

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

    .fruit-section::before {
        content: "";
        position: absolute;
        width: 750px;
        height: 750px;
        left: -260px;
        top: -220px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(200,161,77,.10), transparent 70%);
    }

    .fruit-section::after {
        content: "";
        position: absolute;
        width: 650px;
        height: 650px;
        right: -220px;
        bottom: -180px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(52,140,70,.12), transparent 70%);
    }

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

.fruit-heading {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 80px;
    position: relative;
    z-index: 5;
}

    .fruit-heading span {
        display: inline-block;
        color: #C8A14D;
        letter-spacing: 4px;
        text-transform: uppercase;
        font-size: 14px;
        margin-bottom: 18px;
    }

    .fruit-heading h2 {
        font-family: "Cormorant Garamond", serif;
        font-size: 62px;
        color: #fff;
        margin-bottom: 20px;
        font-weight: 600;
    }

    .fruit-heading p {
        color: rgba(255,255,255,.75);
        font-size: 18px;
        line-height: 1.9;
    }

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

.fruit-grid {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 35px;
    align-items: stretch;
}

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

.fruit-large {
    position: relative;
    border-radius: 35px;
    overflow: hidden;
    min-height: 700px;
    border: 1px solid rgba(200,161,77,.25);
    box-shadow: 0 30px 80px rgba(0,0,0,.40);
    transition: .5s;
}

    .fruit-large:hover {
        transform: translateY(-10px);
        box-shadow: 0 45px 100px rgba(0,0,0,.50);
    }

    .fruit-large img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: .8s;
    }

    .fruit-large:hover img {
        transform: scale(1.08);
    }

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

.fruit-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 60px;
    background: linear-gradient( to top, rgba(4,15,8,.92), rgba(4,15,8,.55), transparent);
}

    .fruit-overlay span {
        display: inline-block;
        color: #C8A14D;
        font-size: 14px;
        letter-spacing: 3px;
        text-transform: uppercase;
        margin-bottom: 15px;
    }

    .fruit-overlay h3 {
        font-family: "Cormorant Garamond", serif;
        font-size: 64px;
        color: #fff;
        margin-bottom: 20px;
    }

    .fruit-overlay p {
        color: rgba(255,255,255,.82);
        font-size: 17px;
        line-height: 1.9;
        max-width: 520px;
        margin-bottom: 35px;
    }

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

.fruit-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 34px;
    border-radius: 60px;
    text-decoration: none;
    color: #07140C;
    font-weight: 600;
    background: linear-gradient( 135deg, #E2C578, #C8A14D);
    transition: .35s;
}

    .fruit-btn:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 35px rgba(200,161,77,.35);
    }

    .fruit-btn i {
        transition: .35s;
    }

    .fruit-btn:hover i {
        transform: translateX(6px);
    }

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

.fruit-small-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

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

.fruit-card {
    position: relative;
    height: 213px;
    overflow: hidden;
    border-radius: 30px;
    border: 1px solid rgba(200,161,77,.25);
    background: #102515;
    transition: .4s;
    box-shadow: 0 20px 45px rgba(0,0,0,.35);
}

    .fruit-card:hover {
        transform: translateY(-8px);
        border-color: rgba(200,161,77,.55);
    }

    .fruit-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: .7s;
    }

    .fruit-card:hover img {
        transform: scale(1.08);
    }

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

.fruit-card-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 25px;
    background: linear-gradient( to top, rgba(5,14,8,.92), transparent);
}

    .fruit-card-content h4 {
        font-family: "Cormorant Garamond", serif;
        font-size: 34px;
        color: #fff;
        margin-bottom: 8px;
    }

    .fruit-card-content span {
        color: #C8A14D;
        font-size: 14px;
        letter-spacing: 2px;
        text-transform: uppercase;
    }

/*=========================================================
                HOVER SHINE
=========================================================*/

.fruit-card::after,
.fruit-large::after {
    content: "";
    position: absolute;
    top: 0;
    left: -130%;
    width: 70%;
    height: 100%;
    transform: skewX(-25deg);
    background: linear-gradient( 120deg, transparent, rgba(255,255,255,.12), transparent);
}

.fruit-card:hover::after,
.fruit-large:hover::after {
    animation: fruitShine 1s;
}

@keyframes fruitShine {

    from {
        left: -130%;
    }

    to {
        left: 150%;
    }
}

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

@media(max-width:1200px) {

    .fruit-grid {
        grid-template-columns: 1fr;
    }

    .fruit-large {
        min-height: 550px;
    }
}

@media(max-width:768px) {

    .fruit-section {
        padding: 90px 0;
    }

    .fruit-heading h2 {
        font-size: 46px;
    }

    .fruit-heading p {
        font-size: 16px;
    }

    .fruit-overlay {
        padding: 35px;
    }

        .fruit-overlay h3 {
            font-size: 42px;
        }

        .fruit-overlay p {
            font-size: 15px;
        }

    .fruit-large {
        min-height: 420px;
    }

    .fruit-card {
        height: 220px;
    }

    .fruit-card-content h4 {
        font-size: 28px;
    }
}

/*=========================================
            WHY CHOOSE
==========================================*/

.pro-why {
    padding: 90px 0;
    position: relative;
}

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

.why-container {
    width: 92%; /* change this */
    max-width: 1600px;
    margin: auto;
    /* Optional */
    /* padding:0 40px; */
}

.pro-title {
    text-align: center;
    margin-bottom: 55px;
}

    .pro-title span {
        display: inline-flex;
        align-items: center;
        gap: 18px;
        color: var(--gold);
        font-family: "Cormorant Garamond",serif;
        font-size: 34px;
        letter-spacing: 1px;
    }

        .pro-title span::before,
        .pro-title span::after {
            content: "";
            width: 130px;
            height: 1px;
            background: rgba(201,162,78,.45);
        }

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

.pro-why-grid {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    border: 1px solid rgba(201,162,78,.28);
    border-radius: 26px;
    overflow: hidden;
    background: linear-gradient( 180deg, rgba(9,28,15,.95), rgba(4,15,8,.98) );
}

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

.pro-why-card {
    padding: 38px 22px;
    text-align: center;
    position: relative;
    transition: .35s;
}

    .pro-why-card:not(:last-child) {
        border-right: 1px solid rgba(201,162,78,.18);
    }

    .pro-why-card:hover {
        background: rgba(201,162,78,.05);
    }

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

.pro-why-icon {
    width: 82px;
    height: 82px;
    margin: auto;
    margin-bottom: 24px;
    border-radius: 50%;
    border: 2px solid var(--gold);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--gold);
    font-size: 34px;
    transition: .35s;
}

.pro-why-card:hover .pro-why-icon {
    background: linear-gradient( 135deg, var(--gold-light), var(--gold) );
    color: #07140C;
    transform: translateY(-6px);
}

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

.pro-why-card h3 {
    color: #fff;
    font-family: "Cormorant Garamond",serif;
    font-size: 33px;
    line-height: 1.15;
    font-weight: 500;
    margin-bottom: 18px;
}

    /*=========================================
            GOLD DIVIDER
==========================================*/

    .pro-why-card h3::after {
        content: "";
        display: block;
        width: 55px;
        height: 2px;
        margin: 18px auto 0;
        background: var(--gold);
    }

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

.pro-why-card p {
    color: rgba(255,255,255,.75);
    font-size: 15px;
    line-height: 1.8;
}

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

.pro-why-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient( 90deg, transparent, var(--gold), transparent );
    opacity: 0;
    transition: .35s;
}

.pro-why-card:hover::before {
    opacity: 1;
}

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

@media(max-width:1400px) {

    .pro-why-grid {
        grid-template-columns: repeat(3,1fr);
    }

    .pro-why-card:nth-child(3) {
        border-right: none;
    }
}

@media(max-width:768px) {

    .pro-title span {
        font-size: 26px;
    }

        .pro-title span::before,
        .pro-title span::after {
            display: none;
        }

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

    .pro-why-card {
        border-right: none !important;
        border-bottom: 1px solid rgba(201,162,78,.18);
    }

        .pro-why-card:last-child {
            border-bottom: none;
        }
}



/*=========================================================
                    PLC VARIABLES
=========================================================*/

:root {
    --plc-gold: #C8A14D;
    --plc-gold-light: #E3C46E;
    --plc-dark: #07140C;
    --plc-glass: rgba(255,255,255,.05);
    --plc-border: rgba(200,161,77,.20);
}


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

.plc-header {
    position: absolute;
    top: 25px;
    left: 0;
    width: 100%;
    z-index: 999;
}


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

.plc-container {
    width: 92%;
    max-width: 1680px;
    margin: auto;
}


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

.plc-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 30px;
    border-radius: 80px;
    background: rgba(7,20,12,.45);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(200,161,77,.18);
    box-shadow: 0 20px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}


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

.plc-logo {
    display: flex;
    align-items: center;
}

    .plc-logo img {
        width: 190px;
        transition: .35s;
    }

    .plc-logo:hover img {
        transform: scale(1.05);
    }


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

.plc-menu {
    display: flex;
    gap: 42px;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .plc-menu a {
        position: relative;
        color: #fff;
        text-decoration: none;
        font-size: 15px;
        font-weight: 500;
        transition: .35s;
    }

        .plc-menu a::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: -8px;
            transform: translateX(-50%);
            width: 0;
            height: 2px;
            background: var(--plc-gold);
            transition: .35s;
        }

        .plc-menu a:hover {
            color: var(--plc-gold);
        }

            .plc-menu a:hover::after {
                width: 100%;
            }


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

.plc-active {
    color: var(--plc-gold) !important;
}

    .plc-active::after {
        width: 100% !important;
    }


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

.plc-right {
    display: flex;
    align-items: center;
    gap: 18px;
}


/*=========================================================
                    SEARCH
=========================================================*/

.plc-search {
    display: flex;
    align-items: center;
    width: 270px;
    height: 52px;
    border-radius: 60px;
    overflow: hidden;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(200,161,77,.25);
}

    .plc-search input {
        flex: 1;
        height: 100%;
        border: none;
        outline: none;
        padding: 0 22px;
        background: none;
        color: #fff;
        font-size: 14px;
    }

        .plc-search input::placeholder {
            color: rgba(255,255,255,.55);
        }

    .plc-search button {
        width: 60px;
        height: 52px;
        border: none;
        cursor: pointer;
        background: linear-gradient( 135deg, var(--plc-gold-light), var(--plc-gold) );
        color: #07140C;
        font-size: 18px;
        transition: .35s;
    }

        .plc-search button:hover {
            filter: brightness(1.08);
        }


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

.plc-user {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #07140C;
    background: linear-gradient( 135deg, var(--plc-gold-light), var(--plc-gold) );
    font-size: 18px;
    transition: .35s;
}

    .plc-user:hover {
        transform: translateY(-4px);
        box-shadow: 0 15px 35px rgba(200,161,77,.35);
    }

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

.plc-hero {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(rgba(6,18,10,.90),rgba(6,18,10,.95)), url("../images/contact-bg.jpg") center/cover;
}

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

.plc-hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(200,161,77,.12), transparent 45%), radial-gradient(circle at bottom right, rgba(22,90,55,.18), transparent 45%);
}

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

.plc-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 90px;
    align-items: center;
    min-height: 100vh;
    padding-top: 140px;
    padding-bottom: -50px;
}

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

.plc-content {
    max-width: 650px;
    padding-left: 40px;
    margin-top: -80px;
}

.plc-tag {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    color: var(--plc-gold);
    letter-spacing: 4px;
    font-size: 14px;
    margin-bottom: 28px;
}

    .plc-tag::after {
        content: "";
        width: 70px;
        height: 2px;
        background: var(--plc-gold);
    }

.plc-content h1 {
    font-family: "Cormorant Garamond",serif;
    font-size: 88px;
    line-height: .95;
    color: #fff;
    margin-bottom: 25px;
}

    .plc-content h1 span {
        color: var(--plc-gold);
        display: block;
    }

.plc-content p {
    color: rgba(255,255,255,.78);
    font-size: 18px;
    line-height: 2;
    margin-bottom: 40px;
}

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

.plc-buttons {
    display: flex;
    gap: 20px;
    margin-bottom: 60px;
}

.plc-btn {
    padding: 18px 40px;
    border-radius: 60px;
    color: #07140C;
    background: linear-gradient(135deg,var(--plc-gold-light),var(--plc-gold));
    font-weight: 600;
}

.plc-btn-outline {
    padding: 18px 40px;
    border-radius: 60px;
    border: 1px solid rgba(200,161,77,.35);
    color: #fff;
    backdrop-filter: blur(15px);
}

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

.plc-stats {
    display: flex;
    gap: 60px;
}

.plc-stat h2 {
    color: var(--plc-gold);
    font-size: 46px;
    font-family: "Cormorant Garamond",serif;
}

.plc-stat span {
    color: rgba(255,255,255,.70);
    font-size: 14px;
    text-transform: uppercase;
}

/*=========================================================
                    RIGHT SIDE
=========================================================*/
.plc-card-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

    .plc-card-content span {
        color: #ffffff;
        font-size: 18px;
        font-family: "Cormorant Garamond",serif;
    }

    .plc-card-content h4 {
        margin: 0;
        color: #fff;
        font-size: 18px;
        font-weight: 600;
    }

    .plc-card-content p {
        margin: 0;
        color: rgba(255,255,255,.75);
        font-size: 14px;
    }
.plc-showcase {
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 720px;
    margin: auto;
    overflow: visible;
}
.plc-card-inner {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px;
    border-radius: 24px;
    background: rgba(8,22,13,.90);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    height: 100%;
}

.plc-main-image {
    width: 560px;
    max-width: 100%;
    display: block;
    margin: auto;
    position: relative;
    z-index: 5;
}

.plc-showcase {
    overflow: visible;
}


.plc-container {
    overflow: visible;
}
/*=========================================================
                    FLOATING CARDS
=========================================================*/
/*=========================================================
        PREMIUM FLOATING CARD
=========================================================*/

.plc-floating-card {
    position: absolute;
    width: 320px;
    min-height: 110px;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 22px 24px;
    box-sizing: border-box;
    border-radius: 28px;
    background: rgba(8,22,13,.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 2px solid rgba(214,180,84,.85);
    box-shadow: 0 15px 40px rgba(0,0,0,.35), 0 0 30px rgba(214,180,84,.18);
    transition: .35s ease;
    overflow: hidden;
}

    .plc-floating-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 25px 55px rgba(0,0,0,.45), 0 0 40px rgba(214,180,84,.30);
    }

/*=========================
        CARD 1
=========================*/
.plc-card-1 {
    top: 8%;
    left: -8%;
}

.plc-card-2 {
    top: 52%;
    right: 3%;
}


.plc-card-1 {
    animation: plcFloat1 5s ease-in-out infinite;
}

.plc-card-2 {
    animation: plcFloat2 6s ease-in-out infinite;
}

.plc-card-3 {
    animation: plcFloat3 5.5s ease-in-out infinite;
}

.plc-card-4 {
    animation: plcFloat4 6.5s ease-in-out infinite;
}

@keyframes plcFloat1 {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

@keyframes plcFloat2 {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(12px);
    }
}

@keyframes plcFloat3 {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

@keyframes plcFloat4 {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(10px);
    }
}
@media (max-width:768px) {

    .plc-showcase {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .plc-floating-card {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        width: 100%;
        max-width: 340px;
    }
}
/*=========================================================
                CONTACT SECTION
=========================================================*/

.plc-contact-section {
    padding: 60px 0;
    background: #06120A;
}

.plc-section-title {
    text-align: center;
    max-width: 760px;
    margin: auto;
    margin-bottom: 70px;
}

    .plc-section-title span {
        color: var(--plc-gold);
        letter-spacing: 4px;
        text-transform: uppercase;
    }

    .plc-section-title h2 {
        font-family: "Cormorant Garamond",serif;
        font-size: 65px;
        color: #fff;
        margin: 20px 0;
    }

        .plc-section-title h2 span {
            display: block;
            color: var(--plc-gold);
        }

    .plc-section-title p {
        color: rgba(255,255,255,.75);
        line-height: 2;
    }

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

.plc-contact-grid {
    display: grid;
    grid-template-columns: 430px 1fr;
    gap: 60px;
}
@media (max-width:991px) {

    .plc-showcase {
        max-width: 500px;
        margin-top: 60px;
    }

    .plc-floating-card {
        width: 190px;
        padding: 14px;
    }

    .plc-card-icon {
        width: 64px;
        height: 64px;
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 18px;
        background: linear-gradient( 135deg, #F7E39A, #D8B454 );
        color: #07140C;
        font-size: 24px;
    }
    .plc-card h4 {
        font-size: 18px;
    }

    .plc-card p {
        font-size: 13px;
    }
}
@media (max-width:768px) {

    .plc-showcase {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .plc-floating-card {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        max-width: 330px;
    }
}

/*=========================================================
                INFO CARDS
=========================================================*/

.plc-info-card {
    display: flex;
    gap: 22px;
    padding: 30px;
    margin-bottom: 25px;
    border-radius: 25px;
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(200,161,77,.20);
    transition: .35s;
}

    .plc-info-card:hover {
        transform: translateY(-8px);
        border-color: var(--plc-gold);
    }

.plc-info-icon {
    width: 70px;
    height: 70px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient( 135deg, var(--plc-gold-light), var(--plc-gold));
    color: #07140C;
    font-size: 25px;
}

.plc-info-card h3 {
    color: #fff;
    margin-bottom: 8px;
    font-size: 24px;
    font-family: "Cormorant Garamond",serif;
}

.plc-info-card p {
    color: rgba(255,255,255,.75);
    line-height: 1.9;
}

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

.plc-contact-form {
    padding: 45px;
    border-radius: 35px;
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(200,161,77,.22);
}

.plc-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.plc-input {
    position: relative;
    margin-bottom: 28px;
}

    .plc-input input,
    .plc-input textarea {
        width: 100%;
        border: none;
        outline: none;
        border-radius: 18px;
        padding: 20px;
        background: #0A1B11;
        color: #fff;
        border: 1px solid rgba(255,255,255,.08);
        font-size: 15px;
    }

.plc-message textarea {
    min-height: 180px;
    resize: none;
}

.plc-input label {
    position: absolute;
    left: 20px;
    top: 18px;
    color: rgba(255,255,255,.55);
    pointer-events: none;
    transition: .3s;
}

.plc-input input:focus,
.plc-input textarea:focus {
    border-color: var(--plc-gold);
}

    .plc-input input:focus + label,
    .plc-input input:valid + label,
    .plc-input textarea:focus + label,
    .plc-input textarea:valid + label {
        top: -12px;
        left: 16px;
        background: #06120A;
        padding: 0 8px;
        color: var(--plc-gold);
        font-size: 13px;
    }

.plc-submit {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 42px;
    border: none;
    border-radius: 60px;
    cursor: pointer;
    background: linear-gradient( 135deg, var(--plc-gold-light), var(--plc-gold));
    color: #07140C;
    font-weight: 600;
    font-size: 15px;
    transition: .35s;
}

    .plc-submit:hover {
        transform: translateY(-5px);
        box-shadow: 0 18px 40px rgba(200,161,77,.35);
    }

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

@media(max-width:1100px) {

    .plc-contact-grid {
        grid-template-columns: 1fr;
    }
}

@media(max-width:768px) {

    .plc-row {
        grid-template-columns: 1fr;
    }

    .plc-section-title h2 {
        font-size: 46px;
    }

    .plc-contact-form {
        padding: 30px;
    }
}



/*=========================================================
                PART 5 - CONTACT INFO CARDS
=========================================================*/

.pplc-contact-cards {
    position: relative;
    padding: 110px 0;
    overflow: hidden;
}

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

    .pplc-contact-cards::before {
        content: "";
        position: absolute;
        width: 700px;
        height: 700px;
        top: -250px;
        left: -220px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(214,180,84,.08), transparent 70%);
        pointer-events: none;
    }

    .pplc-contact-cards::after {
        content: "";
        position: absolute;
        width: 650px;
        height: 650px;
        right: -200px;
        bottom: -250px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(33,92,54,.12), transparent 70%);
        pointer-events: none;
    }
/*=========================================================
                CONTACT FORM BACKGROUND IMAGE
=========================================================*/

.pplc-contact-section {
    position: relative;
    overflow: hidden;
    padding: 120px 0;
    background-image: url('../images/contact-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

    .pplc-contact-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(3,18,10,.78);
        z-index: 1;
    }

    .pplc-contact-section::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 180deg, rgba(2,14,7,.90), rgba(5,22,12,.94) );
        z-index: -1;
    }

.pplc-contact-wrapper {
    position: relative;
    z-index: 5;
}
/*=========================================================
                GRID
=========================================================*/

.pplc-contact-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 30px;
    max-width: 1600px;
    width: 92%;
    margin: 0 auto;
}

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

.pplc-contact-card {
    position: relative;
    padding: 45px 30px;
    border-radius: 28px;
    text-align: center;
    overflow: hidden;
    background: linear-gradient( 180deg, rgba(14,37,21,.95), rgba(7,20,12,.98));
    border: 1px solid rgba(214,180,84,.25);
    backdrop-filter: blur(16px);
    transition: .45s;
    box-shadow: 0 20px 45px rgba(0,0,0,.28);
}

    .pplc-contact-card:hover {
        transform: translateY(-12px);
        border-color: #D8B454;
        box-shadow: 0 30px 70px rgba(0,0,0,.45);
    }

    /*=========================================================
                GOLD TOP LINE
=========================================================*/

    .pplc-contact-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient( 90deg, transparent, #D8B454, transparent);
    }

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

    .pplc-contact-card::after {
        content: "";
        position: absolute;
        top: 0;
        left: -150%;
        width: 70%;
        height: 100%;
        background: linear-gradient( 120deg, transparent, rgba(255,255,255,.12), transparent);
        transform: skewX(-25deg);
    }

    .pplc-contact-card:hover::after {
        animation: pplcShine .9s;
    }

@keyframes pplcShine {

    from {
        left: -150%;
    }

    to {
        left: 150%;
    }
}

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

.pplc-contact-icon {
    width: 82px;
    height: 82px;
    margin: 0 auto 28px;
    border-radius: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient( 135deg, #F8E6A3, #D8B454);
    color: #07140C;
    font-size: 30px;
    box-shadow: 0 15px 35px rgba(214,180,84,.35);
    transition: .4s;
}

.pplc-contact-card:hover .pplc-contact-icon {
    transform: rotate(-8deg) scale(1.08);
}

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

.pplc-contact-card h3 {
    font-family: "Cormorant Garamond",serif;
    font-size: 34px;
    color: #fff;
    margin-bottom: 15px;
    font-weight: 600;
}

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

.pplc-contact-card p {
    color: rgba(255,255,255,.72);
    font-size: 15px;
    line-height: 1.9;
    margin-bottom: 24px;
}

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

.pplc-contact-card a,
.pplc-contact-card span {
    color: #D8B454;
    text-decoration: none;
    font-weight: 600;
    font-size: 17px;
    transition: .35s;
}

    .pplc-contact-card a:hover {
        color: #F8E6A3;
    }

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

@media(max-width:1200px) {

    .pplc-contact-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:768px) {

    .pplc-contact-cards {
        padding: 80px 0;
    }

    .pplc-contact-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .pplc-contact-card {
        padding: 35px 25px;
    }

        .pplc-contact-card h3 {
            font-size: 30px;
        }
}

/*=========================================================
                GOOGLE MAP SECTION
=========================================================*/

.pplc-map-section {
    padding-top: 40px;
    padding-bottom: 120px;
}

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

.pplc-map-heading {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 70px;
}

    .pplc-map-heading span {
        display: inline-block;
        color: #D8B454;
        text-transform: uppercase;
        letter-spacing: 4px;
        font-size: 14px;
        margin-bottom: 18px;
    }

    .pplc-map-heading h2 {
        font-family: "Cormorant Garamond",serif;
        font-size: 62px;
        color: #fff;
        margin-bottom: 22px;
    }

        .pplc-map-heading h2 span {
            display: block;
            color: #D8B454;
        }

    .pplc-map-heading p {
        color: rgba(255,255,255,.75);
        font-size: 18px;
        line-height: 1.9;
    }

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

.pplc-map-wrapper {
    position: relative;
    width: 92%;
    max-width: 1600px;
    margin: auto;
    border-radius: 34px;
    overflow: hidden;
    border: 1px solid rgba(214,180,84,.30);
    box-shadow: 0 35px 70px rgba(0,0,0,.40);
}

    /*=========================================================
                GOOGLE MAP
=========================================================*/

    .pplc-map-wrapper iframe {
        display: block;
        width: 100%;
        height: 620px;
        border: none;
        filter: grayscale(30%) contrast(1.05) saturate(.9);
    }

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

.pplc-map-card {
    position: absolute;
    left: 40px;
    bottom: 40px;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px 28px;
    border-radius: 24px;
    background: rgba(7,20,12,.92);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(214,180,84,.30);
    box-shadow: 0 20px 50px rgba(0,0,0,.35);
}

.pplc-map-icon {
    width: 70px;
    height: 70px;
    border-radius: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient( 135deg, #F7E39A, #D8B454 );
    color: #07140C;
    font-size: 28px;
}

.pplc-map-card h3 {
    font-family: "Cormorant Garamond",serif;
    font-size: 30px;
    color: #fff;
    margin-bottom: 8px;
}

.pplc-map-card p {
    color: rgba(255,255,255,.75);
    line-height: 1.8;
}

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

.pplc-map-wrapper:hover {
    transform: translateY(-6px);
    transition: .4s;
}

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

@media(max-width:992px) {

    .pplc-map-heading h2 {
        font-size: 48px;
    }

    .pplc-map-wrapper iframe {
        height: 520px;
    }
}

@media(max-width:768px) {

    .pplc-map-section {
        padding: 80px 0;
    }

    .pplc-map-wrapper {
        width: 100%;
        border-radius: 24px;
    }

        .pplc-map-wrapper iframe {
            height: 420px;
        }

    .pplc-map-card {
        position: relative;
        left: auto;
        bottom: auto;
        margin: 20px;
    }
}

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

.career-header {
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    z-index: 999;
}

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

.career-nav-wrapper {
    width: 92%;
    max-width: 1650px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 28px;
    border-radius: 70px;
    background: rgba(8,28,15,.55);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(216,180,84,.18);
    box-shadow: 0 20px 45px rgba(0,0,0,.25);
}

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

.career-logo img {
    height: 58px;
}

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

.career-nav ul {
    display: flex;
    list-style: none;
    gap: 42px;
    margin: 0;
    padding: 0;
}

.career-nav a {
    color: #fff;
    text-decoration: none;
    font-size: 17px;
    font-weight: 500;
    transition: .35s;
    position: relative;
}

    .career-nav a:hover {
        color: #D8B454;
    }

.career-active {
    color: #D8B454 !important;
}

    .career-active::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -12px;
        width: 100%;
        height: 2px;
        background: #D8B454;
    }

/*=========================================================
                    SEARCH
=========================================================*/

.career-search {
    display: flex;
    align-items: center;
    overflow: hidden;
    border-radius: 40px;
    border: 1px solid rgba(216,180,84,.25);
    background: rgba(255,255,255,.05);
}

    .career-search input {
        width: 240px;
        padding: 14px 22px;
        border: none;
        outline: none;
        background: none;
        color: #fff;
        font-size: 15px;
    }

        .career-search input::placeholder {
            color: rgba(255,255,255,.55);
        }

    .career-search button {
        width: 68px;
        height: 52px;
        border: none;
        cursor: pointer;
        color: #08150C;
        font-size: 20px;
        background: linear-gradient( 135deg, #F7E39A, #D8B454);
    }

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

.career-user {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #08150C;
    text-decoration: none;
    font-size: 22px;
    background: linear-gradient( 135deg, #F7E39A, #D8B454);
    transition: .35s;
}

    .career-user:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 25px rgba(216,180,84,.35);
    }

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

@media(max-width:1200px) {

    .career-nav {
        display: none;
    }
}

@media(max-width:768px) {

    .career-nav-wrapper {
        width: 95%;
        padding: 15px 18px;
    }

    .career-search {
        display: none;
    }
}

/*=========================================================
                    PART 2A
            VARIABLES & HERO LAYOUT
=========================================================*/

:root {
    --career-bg: #04170D;
    --career-bg2: #071F12;
    --career-card: #0B2316;
    --career-card2: #102C1B;
    --career-gold: #D8B454;
    --career-gold-light: #F7E39A;
    --career-white: #FFFFFF;
    --career-text: rgba(255,255,255,.76);
    --career-border: rgba(216,180,84,.18);
    --career-shadow: 0 35px 70px rgba(0,0,0,.35);
}

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

.career-hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding-top: 180px;
    padding-bottom: 120px;
    background: radial-gradient(circle at top left, rgba(216,180,84,.08), transparent 35%), radial-gradient(circle at bottom right, rgba(35,92,58,.22), transparent 45%), linear-gradient( 180deg, var(--career-bg), #03120A 55%, var(--career-bg2));
}

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

.career-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, rgba(3,15,9,.55), rgba(3,15,9,.18));
    pointer-events: none;
}

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

.career-container {
    position: relative;
    z-index: 5;
    width: 92%;
    max-width: 1650px;
    margin: auto;
}

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

.career-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 90px;
}

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

.career-content {
    position: relative;
}

/*=========================================================
                    RIGHT SHOWCASE
=========================================================*/

.career-showcase {
    position: relative;
    height: 760px;
    display: flex;
    justify-content: center;
    align-items: center;
}

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

.career-glow {
    position: absolute;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(216,180,84,.22), transparent 70%);
    filter: blur(12px);
}

/*=========================================================
                    RINGS
=========================================================*/

.career-ring {
    position: absolute;
    border: 1px dashed rgba(216,180,84,.22);
    border-radius: 50%;
}

.ring1 {
    width: 520px;
    height: 520px;
}

.ring2 {
    width: 700px;
    height: 700px;
}

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

.career-image {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 640px;
    animation: careerFloat 6s ease-in-out infinite;
    filter: drop-shadow(0 35px 45px rgba(0,0,0,.45));
}

/*=========================================================
                    FLOATING ANIMATION
=========================================================*/

@keyframes careerFloat {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }

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

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

.career-hero::before {
    content: "";
    position: absolute;
    top: -260px;
    left: -260px;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(216,180,84,.08), transparent 70%);
}

.career-hero::after {
    content: "";
    position: absolute;
    right: -250px;
    bottom: -250px;
    width: 720px;
    height: 720px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(46,140,74,.12), transparent 70%);
}

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

@media(max-width:1200px) {

    .career-grid {
        grid-template-columns: 1fr;
        gap: 70px;
    }

    .career-showcase {
        height: 650px;
    }
}

@media(max-width:768px) {

    .career-hero {
        padding-top: 150px;
        padding-bottom: 80px;
    }

    .career-container {
        width: 94%;
    }

    .career-showcase {
        height: 520px;
    }

    .career-image {
        max-width: 420px;
    }

    .ring1 {
        width: 340px;
        height: 340px;
    }

    .ring2 {
        width: 450px;
        height: 450px;
    }
}

/*=========================================================
                    PART 2B
            LEFT CONTENT & BUTTONS
=========================================================*/

/*=========================================================
                    SUBTITLE
=========================================================*/

.career-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    color: var(--career-gold);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 5px;
    text-transform: uppercase;
    margin-bottom: 28px;
}

    .career-subtitle::after {
        content: "";
        width: 90px;
        height: 2px;
        background: linear-gradient( 90deg, var(--career-gold), transparent);
    }

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

.career-content h1 {
    font-family: "Cormorant Garamond",serif;
    font-size: clamp(58px,6vw,94px);
    line-height: 1.02;
    color: var(--career-white);
    font-weight: 700;
    margin-bottom: 30px;
}

    .career-content h1 span {
        display: block;
        margin-top: 12px;
        color: var(--career-gold);
    }

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

.career-content p {
    max-width: 680px;
    color: var(--career-text);
    font-size: 20px;
    line-height: 1.9;
    margin-bottom: 45px;
}

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

.career-buttons {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 75px;
}

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

.career-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 42px;
    border-radius: 60px;
    text-decoration: none;
    color: #07140C;
    font-weight: 700;
    background: linear-gradient( 135deg, var(--career-gold-light), var(--career-gold));
    box-shadow: 0 18px 40px rgba(216,180,84,.28);
    transition: .4s;
}

    .career-btn-primary:hover {
        transform: translateY(-5px);
        box-shadow: 0 28px 55px rgba(216,180,84,.40);
    }

    .career-btn-primary i {
        transition: .35s;
    }

    .career-btn-primary:hover i {
        transform: translateX(5px);
    }

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

.career-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 210px;
    padding: 18px 36px;
    border-radius: 60px;
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    border: 1px solid rgba(216,180,84,.45);
    background: rgba(255,255,255,.03);
    backdrop-filter: blur(15px);
    transition: .4s;
}

    .career-btn-outline:hover {
        background: rgba(216,180,84,.12);
        border-color: var(--career-gold);
        transform: translateY(-5px);
    }

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

.career-stats {
    display: flex;
    gap: 55px;
    flex-wrap: wrap;
}

    .career-stats > div {
        position: relative;
        padding-right: 55px;
    }

        .career-stats > div:not(:last-child)::after {
            content: "";
            position: absolute;
            top: 12px;
            right: 0;
            width: 1px;
            height: 65px;
            background: rgba(216,180,84,.30);
        }

    .career-stats h3 {
        font-family: "Cormorant Garamond",serif;
        font-size: 52px;
        color: var(--career-gold);
        margin-bottom: 8px;
        font-weight: 700;
    }

    .career-stats span {
        color: rgba(255,255,255,.75);
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 14px;
    }

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

@media(max-width:992px) {

    .career-content {
        text-align: center;
    }

    .career-subtitle {
        justify-content: center;
    }

    .career-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .career-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }

    .career-stats {
        justify-content: center;
    }
}

@media(max-width:768px) {

    .career-content h1 {
        font-size: 58px;
    }

    .career-content p {
        font-size: 17px;
    }

    .career-buttons {
        flex-direction: column;
        gap: 18px;
    }

    .career-btn-primary,
    .career-btn-outline {
        width: 100%;
        max-width: 340px;
    }

    .career-stats {
        gap: 35px;
    }

        .career-stats > div {
            padding-right: 0;
            text-align: center;
        }

            .career-stats > div::after {
                display: none;
            }
}

/*=========================================================
                    PART 2C
        RIGHT SHOWCASE • FLOATING CARDS
=========================================================*/

/*=========================================================
                    SHOWCASE
=========================================================*/

.career-showcase {
    position: relative;
    height: 760px;
    display: flex;
    justify-content: center;
    align-items: center;
}

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

.career-image {
    position: relative;
    z-index: 20;
    width: 100%;
    max-width: 620px;
    object-fit: contain;
    animation: careerFloat 6s ease-in-out infinite;
    filter: drop-shadow(0 35px 45px rgba(0,0,0,.45));
}

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

.career-glow {
    position: absolute;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(216,180,84,.20), transparent 70%);
    filter: blur(20px);
}

/*=========================================================
                    RINGS
=========================================================*/

.career-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px dashed rgba(216,180,84,.18);
}

.ring1 {
    width: 520px;
    height: 520px;
}

.ring2 {
    width: 700px;
    height: 700px;
}

/*=========================================================
                    FLOATING CARDS
=========================================================*/

.career-card {
    position: absolute;
    width: 290px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px;
    border-radius: 24px;
    background: rgba(9,28,17,.82);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(216,180,84,.30);
    box-shadow: 0 20px 45px rgba(0,0,0,.30);
    z-index: 50;
    transition: .35s;
}

    .career-card:hover {
        transform: translateY(-8px);
        border-color: var(--career-gold);
        box-shadow: 0 30px 60px rgba(0,0,0,.45);
    }

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

.career-icon {
    width: 68px;
    height: 68px;
    border-radius: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    background: linear-gradient( 135deg, var(--career-gold-light), var(--career-gold));
    color: #06140C;
    font-size: 28px;
}

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

.career-card h4 {
    font-family: "Cormorant Garamond",serif;
    color: #fff;
    font-size: 28px;
    margin: 0 0 6px;
}

.career-card p {
    margin: 0;
    color: rgba(255,255,255,.72);
    font-size: 15px;
    line-height: 1.6;
}

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

.career-card-1 {
    top: 12%;
    left: -2%;
}

.career-card-2 {
    top: 52%;
    right: -4%;
}

.career-card-3 {
    bottom: 6%;
    left: 5%;
}

/*=========================================================
                    SCROLL INDICATOR
=========================================================*/

.career-scroll {
    position: absolute;
    left: 50%;
    bottom: 35px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 100;
}

    .career-scroll span {
        color: rgba(255,255,255,.60);
        font-size: 13px;
        letter-spacing: 4px;
    }

.career-mouse {
    width: 26px;
    height: 48px;
    border-radius: 20px;
    border: 2px solid rgba(255,255,255,.30);
    position: relative;
}

    .career-mouse::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 8px;
        width: 4px;
        height: 8px;
        border-radius: 50px;
        background: var(--career-gold);
        transform: translateX(-50%);
        animation: scrollMove 2s infinite;
    }

@keyframes scrollMove {

    0% {
        opacity: 0;
        top: 8px;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        top: 26px;
    }
}

/*=========================================================
                    FLOAT ANIMATION
=========================================================*/

@keyframes careerFloat {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-14px);
    }

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

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

@media(max-width:1200px) {

    .career-showcase {
        height: 650px;
    }

    .career-card {
        width: 250px;
        padding: 18px;
    }

        .career-card h4 {
            font-size: 24px;
        }
}

@media(max-width:992px) {

    .career-showcase {
        margin-top: 40px;
        height: 620px;
    }

    .career-card-1 {
        left: 2%;
    }

    .career-card-2 {
        right: 2%;
    }

    .career-card-3 {
        left: 8%;
    }
}

@media(max-width:768px) {

    .career-showcase {
        height: auto;
        padding-bottom: 120px;
    }

    .career-image {
        max-width: 420px;
    }

    .career-card {
        position: relative;
        width: 100%;
        max-width: 340px;
        margin: 20px auto;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
    }

    .career-scroll {
        display: none;
    }
}

/*=========================================================
                PART 3A
        WHY JOIN OXIAURA PREMIUM CSS
=========================================================*/

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

.career-why {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    background: radial-gradient(circle at left top, rgba(216,180,84,.05), transparent 35%), radial-gradient(circle at right bottom, rgba(31,90,55,.15), transparent 40%), linear-gradient( 180deg, #05180F, #071F12);
}

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

.career-section-title {
    max-width: 850px;
    margin: 0 auto 80px;
    text-align: center;
}

    .career-section-title span {
        display: inline-flex;
        align-items: center;
        gap: 18px;
        color: var(--career-gold);
        text-transform: uppercase;
        letter-spacing: 4px;
        font-size: 15px;
        font-weight: 600;
    }

        .career-section-title span::before,
        .career-section-title span::after {
            content: "";
            width: 60px;
            height: 2px;
            background: linear-gradient( 90deg, transparent, var(--career-gold));
        }

        .career-section-title span::after {
            background: linear-gradient( 90deg, var(--career-gold), transparent);
        }

    .career-section-title h2 {
        margin: 25px 0;
        font-size: 58px;
        font-family: "Cormorant Garamond",serif;
        color: #fff;
        line-height: 1.15;
    }

        .career-section-title h2 span {
            display: block;
            margin-top: 8px;
            color: var(--career-gold);
            letter-spacing: 0;
            text-transform: none;
            font-size: inherit;
        }

    .career-section-title p {
        color: rgba(255,255,255,.72);
        line-height: 1.9;
        font-size: 18px;
    }

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

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

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

.career-feature-card {
    position: relative;
    overflow: hidden;
    padding: 45px 35px;
    border-radius: 28px;
    background: linear-gradient( 145deg, rgba(15,40,25,.92), rgba(8,24,15,.95));
    border: 1px solid rgba(216,180,84,.18);
    backdrop-filter: blur(20px);
    transition: .45s;
    box-shadow: 0 25px 55px rgba(0,0,0,.22);
}

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

    .career-feature-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient( 90deg, transparent, var(--career-gold), transparent);
    }

    /*=========================================================
                GOLD GLOW
=========================================================*/

    .career-feature-card::after {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        right: -90px;
        top: -90px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(216,180,84,.12), transparent 70%);
        transition: .5s;
    }

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

    .career-feature-card:hover {
        transform: translateY(-12px);
        border-color: rgba(216,180,84,.55);
        box-shadow: 0 35px 70px rgba(0,0,0,.35);
    }

        .career-feature-card:hover::after {
            transform: scale(1.3);
        }

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

.career-feature-icon {
    width: 82px;
    height: 82px;
    border-radius: 24px;
    margin-bottom: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 34px;
    color: #06130B;
    background: linear-gradient( 135deg, var(--career-gold-light), var(--career-gold));
    box-shadow: 0 18px 35px rgba(216,180,84,.25);
}

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

.career-feature-card h3 {
    color: #fff;
    font-size: 28px;
    margin-bottom: 18px;
    font-family: "Cormorant Garamond",serif;
}

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

.career-feature-card p {
    color: rgba(255,255,255,.72);
    line-height: 1.9;
    font-size: 16px;
}

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

.career-feature-card:hover .career-feature-icon {
    transform: rotate(-8deg) scale(1.08);
    transition: .45s;
}

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

.career-feature-card {
    animation: careerFade .8s ease both;
}

    .career-feature-card:nth-child(2) {
        animation-delay: .15s;
    }

    .career-feature-card:nth-child(3) {
        animation-delay: .3s;
    }

    .career-feature-card:nth-child(4) {
        animation-delay: .45s;
    }

    .career-feature-card:nth-child(5) {
        animation-delay: .6s;
    }

    .career-feature-card:nth-child(6) {
        animation-delay: .75s;
    }

@keyframes careerFade {

    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@media(max-width:1200px) {

    .career-feature-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:768px) {

    .career-why {
        padding: 90px 0;
    }

    .career-section-title {
        margin-bottom: 55px;
    }

        .career-section-title h2 {
            font-size: 42px;
        }

    .career-feature-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .career-feature-card {
        padding: 35px 28px;
    }

    .career-feature-icon {
        width: 72px;
        height: 72px;
        font-size: 28px;
    }

    .career-feature-card h3 {
        font-size: 24px;
    }
}

@media(max-width:480px) {

    .career-section-title h2 {
        font-size: 36px;
    }

    .career-section-title p {
        font-size: 16px;
    }
}


/*=========================================================
                PART 4A
        AVAILABLE OPPORTUNITIES
=========================================================*/

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

.career-jobs {
    position: relative;
    padding: 120px 0;
    background: radial-gradient(circle at top right, rgba(216,180,84,.06), transparent 35%), radial-gradient(circle at bottom left, rgba(20,90,55,.16), transparent 40%), linear-gradient( 180deg, #04140C, #071B11);
    overflow: hidden;
}

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

.career-jobs-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 70px;
    gap: 30px;
}

.career-small-title {
    display: inline-block;
    color: var(--career-gold);
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
}

.career-jobs-header h2 {
    font-family: "Cormorant Garamond",serif;
    font-size: 58px;
    line-height: 1.15;
    color: #fff;
}

    .career-jobs-header h2 span {
        color: var(--career-gold);
    }

.career-job-count {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient( 145deg, rgba(15,38,24,.95), rgba(6,18,11,.95));
    border: 1px solid rgba(216,180,84,.35);
    box-shadow: 0 25px 50px rgba(0,0,0,.28);
}

    .career-job-count span {
        font-size: 58px;
        color: var(--career-gold);
        font-family: "Cormorant Garamond",serif;
    }

    .career-job-count p {
        margin-top: 8px;
        color: rgba(255,255,255,.72);
        text-align: center;
    }

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

.career-job-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 45px;
}

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

.career-job-card {
    overflow: hidden;
    border-radius: 30px;
    background: linear-gradient( 145deg, rgba(14,36,22,.94), rgba(7,20,12,.96));
    border: 1px solid rgba(216,180,84,.18);
    backdrop-filter: blur(18px);
    transition: .45s;
    box-shadow: 0 20px 55px rgba(0,0,0,.22);
}

    .career-job-card:hover {
        transform: translateY(-12px);
        border-color: rgba(216,180,84,.55);
        box-shadow: 0 40px 70px rgba(0,0,0,.38);
    }

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

.career-job-image {
    position: relative;
    overflow: hidden;
    height: 290px;
}

    .career-job-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 15%;
    }

.career-job-card:hover img {
    transform: scale(1.08);
}

.career-job-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(4,16,9,.82), rgba(4,16,9,.12));
}

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

.career-job-type {
    position: absolute;
    top: 22px;
    right: 22px;
    padding: 10px 22px;
    border-radius: 40px;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: linear-gradient( 135deg, var(--career-gold-light), var(--career-gold));
    color: #06140C;
    font-weight: 700;
}

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

.career-job-content {
    padding: 35px;
}

.career-job-location {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--career-gold);
    font-size: 15px;
    margin-bottom: 18px;
}

.career-job-content h3 {
    color: #fff;
    font-size: 34px;
    font-family: "Cormorant Garamond",serif;
    margin-bottom: 18px;
}

.career-job-content p {
    color: rgba(255,255,255,.72);
    line-height: 1.9;
    margin-bottom: 25px;
}

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

.career-job-content ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.career-job-content li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    margin-bottom: 14px;
}

    .career-job-content li i {
        color: var(--career-gold);
    }

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

.career-apply-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
    padding: 15px 32px;
    border-radius: 60px;
    text-decoration: none;
    font-weight: 600;
    color: #07140C;
    background: linear-gradient( 135deg, var(--career-gold-light), var(--career-gold));
    transition: .35s;
    box-shadow: 0 18px 35px rgba(216,180,84,.22);
}

    .career-apply-btn:hover {
        transform: translateX(8px);
        box-shadow: 0 25px 45px rgba(216,180,84,.35);
    }

    .career-apply-btn i {
        transition: .35s;
    }

    .career-apply-btn:hover i {
        transform: translateX(6px);
    }

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

@media(max-width:1200px) {

    .career-job-grid {
        gap: 30px;
    }
}

@media(max-width:992px) {

    .career-jobs-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .career-job-grid {
        grid-template-columns: 1fr;
    }

    .career-job-count {
        width: 150px;
        height: 150px;
    }
}

@media(max-width:768px) {

    .career-jobs {
        padding: 90px 0;
    }

    .career-jobs-header h2 {
        font-size: 42px;
    }

    .career-job-image {
        height: 240px;
    }

    .career-job-content {
        padding: 28px;
    }

        .career-job-content h3 {
            font-size: 28px;
        }
}

@media(max-width:480px) {

    .career-job-count {
        width: 120px;
        height: 120px;
    }

        .career-job-count span {
            font-size: 42px;
        }

    .career-job-image {
        height: 220px;
    }

    .career-job-content {
        padding: 22px;
    }

    .career-apply-btn {
        width: 100%;
        justify-content: center;
    }
}



/*==========================================================
    OXIAURA COSMETICS & WELLNESS
    Premium Luxury Theme
    Part 2A
==========================================================*/


/*==========================================================
    GOOGLE FONTS
==========================================================*/

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


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

:root {
    --bu-gold: #D7B15B;
    --bu-gold-light: #F6E7B2;
    --bu-gold-dark: #8D6424;
    --bu-emerald: #0F5B42;
    --bu-forest: #08160F;
    --bu-green: #123D2C;
    --bu-maroon: #5C1020;
    --bu-white: #ffffff;
    --bu-text: #EAE7DF;
    --bu-muted: #B8B4A7;
    --bu-glass: rgba(8,18,13,.35);
    --bu-border: rgba(255,214,120,.14);
    --bu-shadow: 0 30px 70px rgba(0,0,0,.55);
    --bu-transition: .45s ease;
}


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

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter',sans-serif;
    background: #07110b;
    color: var(--bu-text);
    overflow-x: hidden;
    line-height: 1.6;
}


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

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #08110b;
}

::-webkit-scrollbar-thumb {
    border-radius: 20px;
    background: linear-gradient( 180deg, #D8B86B, #88611E);
}

    ::-webkit-scrollbar-thumb:hover {
        background: #E8C97E;
    }


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

::selection {
    background: #D7B15B;
    color: #08120D;
}


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

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


/*==========================================================
    IMAGES
==========================================================*/

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


/*==========================================================
    MAIN PAGE
==========================================================*/

.bu-page {
    width: 100%;
    overflow: hidden;
    background: radial-gradient(circle at top left, rgba(215,177,91,.10), transparent 35%), radial-gradient(circle at bottom right, rgba(10,90,65,.25), transparent 45%), #07110B;
}


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

.bu-hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;

}

.bu-hero-bg {
    position: absolute;
    inset: 0;
    background-image: url("../images/bubak.png");
    background-size: contain;
    background-repeat: no-repeat;
    /* Move image upward */
    background-position: center 35%;
    z-index: 1;
}

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

.bu-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, rgba(4,8,6,.82)0%, rgba(5,10,7,.60)30%, rgba(5,10,7,.20)65%, rgba(5,10,7,.05)100%);
    z-index: 2;
}


    /*==========================================================
    EXTRA GOLD GLOW
==========================================================*/

    .bu-overlay::before {
        content: "";
        position: absolute;
        width: 800px;
        height: 800px;
        left: -250px;
        top: -200px;
        background: radial-gradient(circle, rgba(255,214,120,.18), transparent 70%);
        filter: blur(90px);
    }


    /*==========================================================
    CINEMATIC VIGNETTE
==========================================================*/

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


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

.bu-container {
    width: 92%;
    max-width: 1650px;
    margin: auto;
    position: relative;
    z-index: 5;
}


/*==========================================================
    PARTICLES
==========================================================*/

.bu-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 3;
    pointer-events: none;
}


    /*==========================================================
    PARTICLE STYLE
==========================================================*/

    .bu-particles span {
        position: absolute;
        display: block;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #EAC66D;
        box-shadow: 0 0 12px #EAC66D, 0 0 28px rgba(234,198,109,.65);
        opacity: .45;
    }


        /*==========================================================
    PARTICLE POSITIONS
==========================================================*/

        .bu-particles span:nth-child(1) {
            left: 8%;
            top: 82%;
            animation: buParticle1 12s linear infinite;
        }

        .bu-particles span:nth-child(2) {
            left: 18%;
            top: 65%;
            animation: buParticle2 16s linear infinite;
        }

        .bu-particles span:nth-child(3) {
            left: 32%;
            top: 90%;
            animation: buParticle3 20s linear infinite;
        }

        .bu-particles span:nth-child(4) {
            left: 45%;
            top: 75%;
            animation: buParticle2 18s linear infinite;
        }

        .bu-particles span:nth-child(5) {
            left: 62%;
            top: 88%;
            animation: buParticle1 15s linear infinite;
        }

        .bu-particles span:nth-child(6) {
            left: 74%;
            top: 60%;
            animation: buParticle3 17s linear infinite;
        }

        .bu-particles span:nth-child(7) {
            left: 84%;
            top: 80%;
            animation: buParticle2 21s linear infinite;
        }

        .bu-particles span:nth-child(8) {
            left: 94%;
            top: 70%;
            animation: buParticle1 13s linear infinite;
        }


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

@keyframes buZoom {

    from {
        transform: scale(1.02);
    }

    to {
        transform: scale(1.08);
    }
}


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

@keyframes buParticle1 {

    from {
        transform: translateY(0);
        opacity: 0;
    }

    20% {
        opacity: .55;
    }

    to {
        transform: translateY(-900px) translateX(40px);
        opacity: 0;
    }
}

@keyframes buParticle2 {

    from {
        transform: translateY(0);
        opacity: 0;
    }

    30% {
        opacity: .65;
    }

    to {
        transform: translateY(-850px) translateX(-35px);
        opacity: 0;
    }
}

@keyframes buParticle3 {

    from {
        transform: translateY(0);
        opacity: 0;
    }

    15% {
        opacity: .45;
    }

    to {
        transform: translateY(-950px) translateX(25px);
        opacity: 0;
    }
}

/*==========================================================
    PART 2B
    PREMIUM GLASS NAVBAR
==========================================================*/


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

.bu-navbar {
    display: flex;
    justify-content: center;
    align-items: center;
}
    /*==========================================================
    NAVBAR SCROLL
==========================================================*/

    .bu-navbar.bu-scrolled {
        height: 72px;
        top: 18px;
        background: rgba(6,14,10,.88);
        border-color: rgba(215,177,91,.28);
        box-shadow: 0 18px 55px rgba(0,0,0,.55);
    }


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

.bu-logo {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}


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

    .bu-logo img {
        width: 190px;
    height: 190px;
    object-fit: contain;
        filter: drop-shadow(0 0 12px rgba(215,177,91,.45));
        transition: .4s;
    }

    .bu-logo:hover img {
        transform: rotate(-6deg) scale(1.05);
    }


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

.bu-logo-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

    .bu-logo-text h3 {
        font-family: 'Cormorant Garamond',serif;
        font-size: 33px;
        font-weight: 700;
        letter-spacing: 2px;
        line-height: 1;
        background: linear-gradient( 180deg, #FFF4CF, #D9B25B, #94671F);
        -webkit-background-clip: text;
        color: transparent;
    }

    .bu-logo-text span {
        margin-top: 3px;
        font-size: 11px;
        letter-spacing: 3px;
        color: #d8cba7;
        text-transform: uppercase;
    }


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

.bu-menu {
    display: flex;
    align-items: center;
    gap: 48px;
}


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

    .bu-menu a {
        position: relative;
        color: #ECE8DB;
        font-size: 14px;
        letter-spacing: 1.8px;
        text-transform: uppercase;
        transition: .35s;
    }


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

        .bu-menu a::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: -14px;
            transform: translateX(-50%);
            width: 0;
            height: 2px;
            border-radius: 5px;
            background: linear-gradient( 90deg, #F8E6B0, #D8B15B, #8A6424);
            transition: .35s;
        }


        /*==========================================================
    MENU HOVER
==========================================================*/

        .bu-menu a:hover {
            color: #F7E4B0;
        }

            .bu-menu a:hover::after {
                width: 34px;
            }


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

        .bu-menu a.active {
            color: #F7E4B0;
        }

            .bu-menu a.active::after {
                width: 36px;
            }


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

.bu-discover {
    position: relative;
    overflow: hidden;
    width: 180px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 60px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #F8EBC6;
    border: 1px solid rgba(215,177,91,.35);
    background: linear-gradient( 180deg, rgba(24,45,34,.95), rgba(10,18,13,.95));
    transition: .45s;
}


    /*==========================================================
    SHIMMER
==========================================================*/

    .bu-discover::before {
        content: "";
        position: absolute;
        top: -50%;
        left: -140%;
        width: 70%;
        height: 220%;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.45), transparent);
        transform: rotate(20deg);
    }


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

    .bu-discover:hover {
        transform: translateY(-3px);
        color: #08110B;
        background: linear-gradient( 180deg, #F8E8BA, #D7B15B);
        box-shadow: 0 10px 35px rgba(215,177,91,.45);
    }


        /*==========================================================
    SHIMMER ANIMATION
==========================================================*/

        .bu-discover:hover::before {
            animation: buShimmer .9s linear;
        }


/*==========================================================
    SHIMMER KEYFRAMES
==========================================================*/

@keyframes buShimmer {

    from {
        left: -140%;
    }

    to {
        left: 180%;
    }
}


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

.bu-navbar {
    animation: buNavbarIn 1.2s ease;
}

@keyframes buNavbarIn {

    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}


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

@media(max-width:1200px) {

    .bu-menu {
        gap: 28px;
    }

    .bu-discover {
        width: 155px;
    }
}

@media(max-width:992px) {

    .bu-menu {
        display: none;
    }

    .bu-navbar {
        padding: 0 25px;
    }
}

@media(max-width:768px) {

    .bu-navbar {
        width: 95%;
        height: 74px;
        top: 15px;
        border-radius: 50px;
    }

    .bu-logo img {
        width: 50px;
        height: 50px;
    }

    .bu-logo-text h3 {
        font-size: 25px;
    }

    .bu-logo-text span {
        font-size: 9px;
        letter-spacing: 2px;
    }

    .bu-discover {
        width: 130px;
        height: 46px;
        font-size: 11px;
    }
}

/*==========================================================
    PART 2C-1
    HERO CONTENT
==========================================================*/


/*==========================================================
    HERO CONTENT WRAPPER
==========================================================*/

.bu-hero-content {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 20;
    padding-top: 120px;
    padding-bottom: 140px;
    position: relative;
    z-index: 20;
}


/*==========================================================
    LEFT PANEL
==========================================================*/

.bu-left {
    position: relative;
    width: 48%;
    max-width: 760px;
    padding: 55px;
    border-radius: 38px;
    background: rgba(8,18,13,.22);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(255,230,170,.10);
    box-shadow: 0 40px 100px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
    overflow: hidden;
    position: relative;
    z-index: 20;
}


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

    .bu-left::before {
        content: "";
        position: absolute;
        top: -120px;
        right: -120px;
        width: 280px;
        height: 280px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255,235,170,.15), transparent 70%);
        filter: blur(35px);
    }


    /*==========================================================
    SUBTLE GOLD LINE
==========================================================*/

    .bu-left::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 3px;
        height: 100%;
        background: linear-gradient( to bottom, transparent, #D7B15B, transparent);
    }


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

.bu-small-line {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 35px;
}


    /*==========================================================
    GOLD LINE
==========================================================*/

    .bu-small-line span {
        width: 80px;
        height: 2px;
        border-radius: 20px;
        background: linear-gradient( 90deg, #FFF2C8, #D7B15B, transparent);
    }


    /*==========================================================
    SMALL TEXT
==========================================================*/

    .bu-small-line p {
        color: #E8D6A4;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 4px;
        font-weight: 500;
    }


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

.bu-left h1 {
    font-family: "Cormorant Garamond",serif;
    font-size: 6.4rem;
    line-height: .9;
    font-weight: 500;
    margin-bottom: 34px;
    letter-spacing: -1px;
    background: linear-gradient( 180deg, #FFF8E3 0%, #E7C979 45%, #A57422 100%);
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: 0 4px 20px rgba(0,0,0,.35);
}


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

.bu-description {
    max-width: 620px;
    color: #D7D6CF;
    font-size: 18px;
    line-height: 36px;
    font-weight: 300;
    margin-bottom: 48px;
}


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

.bu-buttons {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 60px;
}


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

.bu-btn-primary {
    position: relative;
    overflow: hidden;
    padding: 18px 42px;
    border-radius: 60px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #08120D;
    background: linear-gradient( 180deg, #FFF2C8, #D7B15B);
    box-shadow: 0 12px 30px rgba(215,177,91,.30);
    transition: all .4s ease;
}


    /*==========================================================
    GOLD SHIMMER
==========================================================*/

    .bu-btn-primary::before {
        content: "";
        position: absolute;
        top: -60%;
        left: -150%;
        width: 60%;
        height: 240%;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.65), transparent);
        transform: rotate(22deg);
    }


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

    .bu-btn-primary:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 40px rgba(215,177,91,.45);
    }


        /*==========================================================
    SHIMMER
==========================================================*/

        .bu-btn-primary:hover::before {
            animation: buPrimaryShimmer .9s linear;
        }


@keyframes buPrimaryShimmer {

    from {
        left: -150%;
    }

    to {
        left: 180%;
    }
}


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

.bu-btn-video {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #ECE6D7;
    font-size: 15px;
    letter-spacing: 1px;
    transition: .35s;
}


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

.bu-play {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(215,177,91,.35);
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(10px);
    color: #D7B15B;
    transition: .4s;
}


/*==========================================================
    PLAY HOVER
==========================================================*/

.bu-btn-video:hover .bu-play {
    transform: scale(1.08);
    background: #D7B15B;
    color: #08120D;
    box-shadow: 0 0 30px rgba(215,177,91,.40);
}


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

.bu-left {
    animation: buHeroFade 1.2s ease;
}


@keyframes buHeroFade {

    from {
        opacity: 0;
        transform: translateY(60px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/*==========================================================
    MOBILE HERO HEIGHT FIX
==========================================================*/

@media (max-width:768px) {

    .bu-container {
        width: 94%;
        margin: 0 auto;
        padding: 0;
    }

    .bu-hero-content {
        min-height: auto;
        height: auto;
        padding-top: 100px;
        padding-bottom: 40px;
        display: block;
    }

    .bu-left {
        width: 100%;
        padding: 24px 20px;
        margin: 0;
    }

    .bu-description {
        margin-bottom: 25px;
    }

    .bu-buttons {
        margin-bottom: 30px;
    }

    .bu-features {
        margin-top: 25px;
    }
}
@media (max-width:768px) {

    .bu-feature {
        padding: 16px;
        min-height: 90px;
    }

        .bu-feature span {
            font-size: 14px;
            line-height: 20px;
        }
}
@media (max-width:768px) {

    .bu-hero-content {
        display: block;
        min-height: auto !important;
        height: auto !important;
        padding: 110px 0 40px;
    }

    .bu-left {
        width: 100%;
        height: 1100px !important;
        min-height: auto !important;
        padding: 24px 20px;
    }

    .bu-right {
        display: none;
    }

    .bu-container {
        height: auto !important;
        min-height: auto !important;
    }
}
/*==========================================================
    PART 2C-2A
    FEATURES & STATISTICS
==========================================================*/


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

.bu-features {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 22px;
    margin-top: 10px;
    margin-bottom: 55px;
}


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

.bu-feature {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 24px;
    border-radius: 22px;
    background: rgba(255,255,255,.045);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,214,120,.10);
    transition: all .45s ease;
    overflow: hidden;
}


    /*==========================================================
    GOLD SHINE
==========================================================*/

    .bu-feature::before {
        content: "";
        position: absolute;
        left: -120%;
        top: 0;
        width: 80%;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.18), transparent);
        transition: .8s;
    }


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

    .bu-feature:hover {
        transform: translateY(-8px);
        border-color: rgba(215,177,91,.35);
        box-shadow: 0 20px 45px rgba(0,0,0,.35), 0 0 35px rgba(215,177,91,.12);
        background: rgba(255,255,255,.06);
    }


        .bu-feature:hover::before {
            left: 150%;
        }


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

.bu-icon {
    width: 58px;
    height: 58px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 24px;
    color: #F6E6B0;
    background: linear-gradient( 180deg, rgba(215,177,91,.20), rgba(255,255,255,.04));
    border: 1px solid rgba(255,214,120,.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 20px rgba(0,0,0,.25);
    transition: .45s;
}


.bu-feature:hover .bu-icon {
    transform: rotate(-8deg) scale(1.08);
    box-shadow: 0 0 22px rgba(215,177,91,.35);
}


/*==========================================================
    FEATURE TEXT
==========================================================*/

.bu-feature span {
    font-size: 15px;
    font-weight: 500;
    color: #F2EFE8;
    letter-spacing: .5px;
}


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

.bu-stats {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
}


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

.bu-stat {
    flex: 1;
    min-width: 170px;
    position: relative;
    padding: 28px 22px;
    text-align: center;
    border-radius: 28px;
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,214,120,.12);
    transition: all .45s ease;
    overflow: hidden;
}


    /*==========================================================
    GOLD BORDER
==========================================================*/

    .bu-stat::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 28px;
        padding: 1px;
        background: linear-gradient( 135deg, rgba(255,214,120,.45), transparent, rgba(255,214,120,.18));
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }


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

    .bu-stat h2 {
        font-family: "Cormorant Garamond",serif;
        font-size: 58px;
        font-weight: 600;
        line-height: 1;
        margin-bottom: 10px;
        background: linear-gradient( 180deg, #FFF6D6, #D7B15B, #9E6E26);
        -webkit-background-clip: text;
        color: transparent;
    }


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

    .bu-stat span {
        display: block;
        color: #D9D6CD;
        font-size: 14px;
        letter-spacing: 2px;
        text-transform: uppercase;
    }


    /*==========================================================
    STAT HOVER
==========================================================*/

    .bu-stat:hover {
        transform: translateY(-10px);
        border-color: rgba(215,177,91,.35);
        box-shadow: 0 30px 60px rgba(0,0,0,.40), 0 0 45px rgba(215,177,91,.15);
    }


    /*==========================================================
    FLOAT ANIMATION
==========================================================*/

    .bu-stat:nth-child(1) {
        animation: buFloat 7s ease-in-out infinite;
    }

    .bu-stat:nth-child(2) {
        animation: buFloat 8.5s ease-in-out infinite;
    }

    .bu-stat:nth-child(3) {
        animation: buFloat 9.5s ease-in-out infinite;
    }


@keyframes buFloat {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }

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


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

@media(max-width:1100px) {

    .bu-features {
        grid-template-columns: 1fr;
    }

    .bu-stats {
        justify-content: center;
    }
}


@media(max-width:768px) {

    .bu-feature {
        padding: 18px;
    }

    .bu-icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .bu-stat {
        min-width: 100%;
    }

        .bu-stat h2 {
            font-size: 46px;
        }
}

/*==========================================================
    PART 2C-2B-1
    RIGHT HERO LAYOUT
==========================================================*/


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

.bu-right {
    position: absolute;
    right: 0;
    top: 0;
    width: 52%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    pointer-events: none;
    z-index: 8;
}


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

.bu-product-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}


/*==========================================================
    MAIN PRODUCT IMAGE
==========================================================*/

.bu-products {
    position: absolute;
    right: -70px;
    bottom: -25px;
    width: 920px;
    max-width: none;
    z-index: 15;
    user-select: none;
    pointer-events: none;
    filter: drop-shadow(0 35px 80px rgba(0,0,0,.45)) drop-shadow(0 12px 30px rgba(215,177,91,.10));
    transition: transform .8s ease, filter .8s ease;
}


/*==========================================================
    PRODUCT HOVER
==========================================================*/

.bu-right:hover .bu-products {
    transform: translateY(-8px) scale(1.015);
}


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

.bu-products {
    transform-origin: center bottom;
}


/*==========================================================
    PRODUCT LAYER
==========================================================*/

.bu-product-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}


    /*==========================================================
    GOLD HALO
==========================================================*/

    .bu-product-layer::before {
        content: "";
        position: absolute;
        width: 720px;
        height: 720px;
        right: 120px;
        bottom: 60px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(215,177,91,.22), rgba(215,177,91,.08), transparent 72%);
        filter: blur(80px);
        z-index: 1;
    }


    /*==========================================================
    EMERALD LIGHT
==========================================================*/

    .bu-product-layer::after {
        content: "";
        position: absolute;
        width: 520px;
        height: 520px;
        right: 60px;
        bottom: 0;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(15,91,66,.30), transparent 70%);
        filter: blur(90px);
    }


/*==========================================================
    PRODUCT BASE SHADOW
==========================================================*/

.bu-product-shadow {
    position: absolute;
    width: 620px;
    height: 80px;
    right: 120px;
    bottom: 5px;
    border-radius: 50%;
    background: radial-gradient( ellipse, rgba(0,0,0,.42), transparent 75%);
    filter: blur(18px);
    opacity: .85;
}


/*==========================================================
    PRODUCT FADE
==========================================================*/

.bu-products {
    animation: buProductsReveal 1.6s ease;
}


@keyframes buProductsReveal {

    from {
        opacity: 0;
        transform: translateX(120px) scale(.92);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}


/*==========================================================
    PRODUCT PARALLAX READY
==========================================================*/

.bu-product-wrapper {
    will-change: transform;
}


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

@media(max-width:1500px) {

    .bu-products {
        width: 840px;
        right: -60px;
    }
}


@media(max-width:1300px) {

    .bu-right {
        width: 50%;
    }

    .bu-products {
        width: 760px;
        right: -40px;
        bottom: -10px;
    }
}


@media(max-width:1100px) {

    .bu-right {
        position: relative;
        width: 100%;
        height: 520px;
        margin-top: 40px;
        justify-content: center;
    }

    .bu-products {
        position: relative;
        width: 620px;
        right: auto;
        bottom: auto;
    }

    .bu-product-shadow {
        left: 50%;
        transform: translateX(-50%);
        right: auto;
        width: 420px;
    }
}


@media(max-width:768px) {

    .bu-right {
        height: 420px;
    }

    .bu-products {
        width: 95%;
        max-width: 500px;
    }

    .bu-product-layer::before {
        width: 360px;
        height: 360px;
        right: 50%;
        transform: translateX(50%);
    }
}

/*==========================================================
    PART 2C-2B-2
    CINEMATIC LIGHTING & LUXURY EFFECTS
==========================================================*/


/*==========================================================
    HERO LIGHT LAYERS
==========================================================*/

.bu-hero::before {
    content: "";
    position: absolute;
    top: -260px;
    left: -180px;
    width: 900px;
    height: 900px;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,225,150,.18) 0%, rgba(255,205,120,.10) 30%, rgba(255,190,90,.05) 55%, transparent 75%);
    filter: blur(90px);
    animation: buSunGlow 14s ease-in-out infinite alternate;
    z-index: 2;
}


/*==========================================================
    RIGHT GOLD GLOW
==========================================================*/

.bu-hero::after {
    content: "";
    position: absolute;
    right: -180px;
    bottom: -100px;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(215,177,91,.22), rgba(215,177,91,.10), transparent 72%);
    filter: blur(80px);
    animation: buGoldGlow 10s ease-in-out infinite;
    z-index: 2;
}


/*==========================================================
    GOLD LIGHT RAYS
==========================================================*/

.bu-light-rays {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 3;
}

    .bu-light-rays::before {
        content: "";
        position: absolute;
        top: -150px;
        left: -100px;
        width: 900px;
        height: 900px;
        background: conic-gradient( from 40deg, rgba(255,225,150,.18), transparent 15%, rgba(255,225,150,.05), transparent 32%, rgba(255,225,150,.08), transparent 45%, rgba(255,225,150,.04), transparent);
        filter: blur(50px);
        transform: rotate(-18deg);
        opacity: .55;
    }


/*==========================================================
    LUXURY VIGNETTE
==========================================================*/

.bu-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    background: radial-gradient(circle, transparent 45%, rgba(0,0,0,.18)70%, rgba(0,0,0,.55)100%);
}


/*==========================================================
    AMBIENT GREEN GLOW
==========================================================*/

.bu-ambient {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 650px;
    height: 500px;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(18,110,74,.20), rgba(18,110,74,.08), transparent 75%);
    filter: blur(70px);
    animation: buAmbient 12s ease-in-out infinite alternate;
}


/*==========================================================
    GOLD DUST
==========================================================*/

.bu-gold-dust {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

    .bu-gold-dust span {
        position: absolute;
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: #E7C979;
        box-shadow: 0 0 8px rgba(231,201,121,.9), 0 0 18px rgba(231,201,121,.5);
        opacity: .35;
    }

        /* Random positions */

        .bu-gold-dust span:nth-child(1) {
            left: 58%;
            top: 76%;
        }

        .bu-gold-dust span:nth-child(2) {
            left: 67%;
            top: 62%;
        }

        .bu-gold-dust span:nth-child(3) {
            left: 72%;
            top: 80%;
        }

        .bu-gold-dust span:nth-child(4) {
            left: 81%;
            top: 68%;
        }

        .bu-gold-dust span:nth-child(5) {
            left: 90%;
            top: 74%;
        }

        .bu-gold-dust span:nth-child(6) {
            left: 76%;
            top: 55%;
        }

        .bu-gold-dust span:nth-child(7) {
            left: 86%;
            top: 48%;
        }

        .bu-gold-dust span:nth-child(8) {
            left: 63%;
            top: 88%;
        }

    .bu-gold-dust span {
        animation: buDust 12s linear infinite;
    }


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

@keyframes buSunGlow {

    from {
        transform: scale(1);
        opacity: .65;
    }

    to {
        transform: scale(1.08);
        opacity: .95;
    }
}

@keyframes buGoldGlow {

    0% {
        transform: scale(1);
        opacity: .45;
    }

    50% {
        transform: scale(1.08);
        opacity: .75;
    }

    100% {
        transform: scale(1);
        opacity: .45;
    }
}

@keyframes buAmbient {

    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-18px);
    }
}

@keyframes buDust {

    from {
        transform: translateY(0);
        opacity: 0;
    }

    20% {
        opacity: .55;
    }

    to {
        transform: translateY(-220px) translateX(18px);
        opacity: 0;
    }
}

/*==========================================================
    PART 2C-2B-3
    WATER REFLECTION & LUXURY ATMOSPHERE
==========================================================*/


/*==========================================================
    WATER SURFACE
==========================================================*/

.bu-water {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 220px;
    overflow: hidden;
    pointer-events: none;
    z-index: 4;
}


    /*==========================================================
    REFLECTION SHIMMER
==========================================================*/

    .bu-water::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 180deg, rgba(255,255,255,0), rgba(255,255,255,.03), rgba(215,177,91,.08), rgba(255,255,255,.02), rgba(0,0,0,.15) );
        mix-blend-mode: screen;
        animation: buWaterShimmer 8s ease-in-out infinite;
    }


    /*==========================================================
    GOLD REFLECTION
==========================================================*/

    .bu-water::after {
        content: "";
        position: absolute;
        left: 55%;
        bottom: 0;
        width: 600px;
        height: 200px;
        transform: translateX(-50%);
        background: radial-gradient( ellipse, rgba(215,177,91,.16), rgba(215,177,91,.08), transparent 70% );
        filter: blur(40px);
    }


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

.bu-ripple {
    position: absolute;
    left: 72%;
    bottom: 55px;
    width: 240px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.08);
    transform: translateX(-50%);
    animation: buRipple 6s linear infinite;
}


    .bu-ripple:nth-child(2) {
        animation-delay: 2s;
    }


    .bu-ripple:nth-child(3) {
        animation-delay: 4s;
    }


/*==========================================================
    WATER MIST
==========================================================*/

.bu-mist {
    position: absolute;
    left: 50%;
    bottom: 85px;
    width: 900px;
    height: 160px;
    transform: translateX(-50%);
    pointer-events: none;
    background: radial-gradient( ellipse, rgba(255,255,255,.08), rgba(255,255,255,.03), transparent 70% );
    filter: blur(45px);
    animation: buMist 9s ease-in-out infinite;
}


/*==========================================================
    FLOATING FOG
==========================================================*/

.bu-fog {
    position: absolute;
    bottom: 40px;
    left: -5%;
    width: 110%;
    height: 120px;
    pointer-events: none;
    background: linear-gradient( 180deg, transparent, rgba(255,255,255,.04), rgba(255,255,255,.02), transparent );
    filter: blur(30px);
    animation: buFogMove 18s linear infinite;
}


/*==========================================================
    WATER HIGHLIGHT
==========================================================*/

.bu-water-highlight {
    position: absolute;
    left: 62%;
    bottom: 90px;
    width: 320px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient( ellipse, rgba(255,255,255,.25), transparent );
    filter: blur(8px);
    animation: buHighlight 4s ease-in-out infinite;
}


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

@keyframes buWaterShimmer {

    0% {
        transform: translateX(-30px);
        opacity: .25;
    }

    50% {
        transform: translateX(30px);
        opacity: .55;
    }

    100% {
        transform: translateX(-30px);
        opacity: .25;
    }
}


@keyframes buRipple {

    from {
        transform: translateX(-50%) scale(.2);
        opacity: .45;
    }

    to {
        transform: translateX(-50%) scale(2.8);
        opacity: 0;
    }
}


@keyframes buMist {

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

    50% {
        transform: translateX(-48%) translateY(-6px);
    }

    100% {
        transform: translateX(-50%) translateY(0);
    }
}


@keyframes buFogMove {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-120px);
    }
}


@keyframes buHighlight {

    0% {
        opacity: .25;
    }

    50% {
        opacity: .8;
    }

    100% {
        opacity: .25;
    }
}

/*==========================================================
    PART 2C-2B-4
    LUXURY DECORATIVE ELEMENTS
==========================================================*/


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

.bu-decoration {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 5;
}


/*==========================================================
    FLOATING LEAVES
==========================================================*/

.bu-leaf {
    position: absolute;
    opacity: .12;
    filter: blur(.3px) drop-shadow(0 8px 20px rgba(0,0,0,.35));
    animation: buLeafFloat 16s ease-in-out infinite;
}


/* LEFT LEAF */

.bu-leaf-left {
    width: 240px;
    top: 130px;
    left: -70px;
    transform: rotate(-18deg);
}


/* TOP RIGHT */

.bu-leaf-top {
    width: 170px;
    top: 60px;
    right: 180px;
    transform: rotate(28deg);
}


/* BOTTOM RIGHT */

.bu-leaf-bottom {
    width: 280px;
    bottom: 40px;
    right: -80px;
    transform: rotate(-12deg);
}


/*==========================================================
    GOLD ORBS
==========================================================*/

.bu-orb {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,240,180,.95), rgba(215,177,91,.35), transparent 75%);
    filter: blur(14px);
    animation: buOrbPulse 7s ease-in-out infinite;
}


/* SMALL */

.bu-orb-one {
    width: 90px;
    height: 90px;
    left: 18%;
    top: 18%;
}


/* MEDIUM */

.bu-orb-two {
    width: 130px;
    height: 130px;
    right: 18%;
    top: 22%;
    animation-delay: 2s;
}


/* LARGE */

.bu-orb-three {
    width: 180px;
    height: 180px;
    right: 8%;
    bottom: 18%;
    animation-delay: 4s;
}


/*==========================================================
    LENS FLARE
==========================================================*/

.bu-lens {
    position: absolute;
    left: 52%;
    top: 90px;
    width: 600px;
    height: 4px;
    transform: rotate(-18deg);
    background: linear-gradient( 90deg, transparent, rgba(255,245,210,.95), rgba(215,177,91,.70), transparent);
    filter: blur(2px);
    opacity: .45;
    animation: buLens 8s ease-in-out infinite;
}


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

.bu-spark {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #F6E6B0;
    box-shadow: 0 0 10px #F6E6B0, 0 0 30px rgba(246,230,176,.75);
    animation: buSpark 5s linear infinite;
}

    .bu-spark:nth-child(1) {
        left: 58%;
        top: 24%;
    }

    .bu-spark:nth-child(2) {
        left: 63%;
        top: 36%;
    }

    .bu-spark:nth-child(3) {
        left: 71%;
        top: 30%;
    }

    .bu-spark:nth-child(4) {
        left: 77%;
        top: 44%;
    }

    .bu-spark:nth-child(5) {
        left: 83%;
        top: 26%;
    }

    .bu-spark:nth-child(6) {
        left: 90%;
        top: 38%;
    }


/*==========================================================
    LIGHT BLOOM
==========================================================*/

.bu-light-bloom {
    position: absolute;
    right: 130px;
    top: 140px;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,240,190,.16), rgba(255,220,150,.08), transparent 72%);
    filter: blur(65px);
    animation: buBloom 9s ease-in-out infinite;
}


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

@keyframes buLeafFloat {

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

    50% {
        transform: translateY(-18px) rotate(-13deg);
    }

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


@keyframes buOrbPulse {

    0% {
        transform: scale(1);
        opacity: .25;
    }

    50% {
        transform: scale(1.12);
        opacity: .6;
    }

    100% {
        transform: scale(1);
        opacity: .25;
    }
}


@keyframes buLens {

    0% {
        opacity: .15;
        transform: translateX(-40px) rotate(-18deg);
    }

    50% {
        opacity: .7;
        transform: translateX(40px) rotate(-18deg);
    }

    100% {
        opacity: .15;
        transform: translateX(-40px) rotate(-18deg);
    }
}


@keyframes buSpark {

    from {
        transform: translateY(0);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    to {
        transform: translateY(-110px);
        opacity: 0;
    }
}


@keyframes buBloom {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}

/*==========================================================
    PART 2C-2B-5
    FINAL HERO ANIMATIONS & RESPONSIVE
==========================================================*/


/*==========================================================
    HERO ENTRANCE ANIMATIONS
==========================================================*/

.bu-small-line {
    animation: buFadeUp .8s ease forwards;
}



.bu-description {
    opacity: 0;
    animation: buFadeUp 1s .45s ease forwards;
}

.bu-buttons {
    opacity: 0;
    animation: buFadeUp 1s .65s ease forwards;
}

.bu-features {
    opacity: 0;
    animation: buFadeUp 1s .85s ease forwards;
}

.bu-stats {
    opacity: 0;
    animation: buFadeUp 1s 1.05s ease forwards;
}

.bu-bottom-bar {
    opacity: 0;
    animation: buFadeUp 1s 1.2s ease forwards;
}


/*==========================================================
    FLOATING HERO CONTENT
==========================================================*/

.bu-left {
    animation: buHeroFloat 10s ease-in-out infinite, buGlassAppear 1.2s ease;
}

@keyframes buHeroFloat {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

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


/*==========================================================
    HERO IMAGE FLOAT
==========================================================*/

.bu-hero-bg {
    animation: buZoom 20s ease-in-out infinite alternate, buBackgroundFloat 14s ease-in-out infinite;
}

@keyframes buBackgroundFloat {

    0% {
        transform: scale(1.02) translateY(0);
    }

    50% {
        transform: scale(1.05) translateY(-12px);
    }

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


/*==========================================================
    GLASS APPEAR
==========================================================*/

@keyframes buGlassAppear {

    from {
        opacity: 0;
        transform: translateY(60px) scale(.95);
    }

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


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

@keyframes buFadeUp {

    from {
        opacity: 0;
        transform: translateY(45px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/*==========================================================
    PREMIUM HOVERS
==========================================================*/

.bu-feature,
.bu-stat,
.bu-btn-primary,
.bu-discover {
    will-change: transform;
}

    .bu-feature:hover {
        transform: translateY(-10px) scale(1.02);
    }

    .bu-stat:hover {
        transform: translateY(-12px) scale(1.03);
    }

    .bu-btn-primary:hover {
        transform: translateY(-5px) scale(1.02);
    }

    .bu-discover:hover {
        transform: translateY(-5px) scale(1.03);
    }


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

.bu-hero-bg {
    image-rendering: auto;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}


/*==========================================================
    PERFORMANCE
==========================================================*/

.bu-overlay,
.bu-light-rays,
.bu-vignette,
.bu-decoration,
.bu-water,
.bu-particles {
    will-change: transform,opacity;
}


/*==========================================================
    LARGE DESKTOP
==========================================================*/

@media(min-width:1800px) {

    .bu-container {
        max-width: 1750px;
    }

    .bu-left {
        max-width: 820px;
    }

        .bu-left h1 {
            font-size: 7rem;
        }
}


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

@media(max-width:1400px) {

    .bu-left {
        width: 54%;
        padding: 45px;
    }

        .bu-left h1 {
            font-size: 5.3rem;
        }

    .bu-description {
        font-size: 17px;
        line-height: 32px;
    }
}


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

@media(max-width:1100px) {

    .bu-hero-content {
        flex-direction: column;
        justify-content: center;
        gap: 50px;
        text-align: center;
    }

    .bu-left {
        width: 100%;
        max-width: 820px;
    }

    .bu-small-line {
        justify-content: center;
    }

    .bu-buttons {
        justify-content: center;
    }

    .bu-features {
        grid-template-columns: repeat(2,1fr);
    }

    .bu-stats {
        justify-content: center;
    }

    .bu-bottom-bar {
        flex-wrap: wrap;
        gap: 20px;
        padding: 20px;
    }
}


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

@media(max-width:768px) {

    .bu-hero {
        min-height: auto;
        padding-bottom: 120px;
    }

    .bu-left {
        padding: 30px;
        border-radius: 24px;
    }

        .bu-left h1 {
            font-size: 3.3rem;
            line-height: 1;
        }

    .bu-description {
        font-size: 15px;
        line-height: 28px;
    }

    .bu-buttons {
        flex-direction: column;
        align-items: center;
    }

    .bu-btn-primary {
        width: 100%;
        text-align: center;
    }

    .bu-btn-video {
        justify-content: center;
    }

    .bu-features {
        grid-template-columns: 1fr;
    }

    .bu-stat {
        min-width: 100%;
    }

    .bu-bottom-bar {
        border-radius: 25px 25px 0 0;
    }
}


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

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

    * {
        animation: none !important;
        transition: none !important;
    }
}

/*==========================================================
    PART 2D-1
    LUXURY BOTTOM GLASS INFORMATION BAR
==========================================================*/


/*==========================================================
    GLASS BAR
==========================================================*/

.bu-bottom-bar {
    position: absolute;
    left: 50%;
    bottom: 35px;
    transform: translateX(-50%);
    width: 92%;
    max-width: 1650px;
    min-height: 120px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 22px;
    padding: 22px;
    border-radius: 32px;
    overflow: hidden;
    z-index: 25;
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    background: linear-gradient( 135deg, rgba(255,255,255,.08), rgba(255,255,255,.03) );
    border: 1px solid rgba(215,177,91,.18);
    box-shadow: 0 30px 80px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
}


    /*==========================================================
    GLASS BORDER GLOW
==========================================================*/

    .bu-bottom-bar::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient( 135deg, rgba(255,255,255,.35), rgba(215,177,91,.28), rgba(16,92,66,.25), rgba(255,255,255,.08) );
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }


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

    .bu-bottom-bar::after {
        content: "";
        position: absolute;
        top: 0;
        left: -25%;
        width: 150%;
        height: 55px;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.08), transparent );
        opacity: .65;
    }


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

.bu-bottom-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px;
    border-radius: 24px;
    overflow: hidden;
    transition: transform .45s, background .45s, border-color .45s, box-shadow .45s;
    background: linear-gradient( 180deg, rgba(255,255,255,.06), rgba(255,255,255,.02) );
    border: 1px solid rgba(255,255,255,.06);
}


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

    .bu-bottom-item:hover {
        transform: translateY(-10px);
        background: linear-gradient( 180deg, rgba(18,82,58,.30), rgba(8,30,20,.40) );
        border-color: rgba(215,177,91,.30);
        box-shadow: 0 18px 45px rgba(0,0,0,.30), 0 0 35px rgba(215,177,91,.12);
    }


    /*==========================================================
    GOLD LIGHT
==========================================================*/

    .bu-bottom-item::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient( circle at top left, rgba(215,177,91,.12), transparent 60% );
        opacity: 0;
        transition: .5s;
    }


    .bu-bottom-item:hover::before {
        opacity: 1;
    }


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

.bu-bottom-icon {
    width: 72px;
    height: 72px;
    min-width: 72px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 22px;
    background: linear-gradient( 180deg, rgba(255,255,255,.08), rgba(255,255,255,.02) );
    border: 1px solid rgba(215,177,91,.22);
    color: #D7B15B;
    transition: .45s;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 20px rgba(0,0,0,.22);
}


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

    .bu-bottom-icon svg {
        width: 34px;
        height: 34px;
        color: inherit;
        transition: .45s;
    }


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

.bu-bottom-item:hover .bu-bottom-icon {
    transform: rotate(-8deg) scale(1.08);
    background: linear-gradient( 135deg, rgba(215,177,91,.22), rgba(255,255,255,.10) );
    box-shadow: 0 0 28px rgba(215,177,91,.25);
}


    .bu-bottom-item:hover .bu-bottom-icon svg {
        transform: scale(1.12);
    }


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

.bu-bottom-item h4 {
    margin: 0 0 6px;
    font-family: "Cormorant Garamond",serif;
    font-size: 1.35rem;
    font-weight: 600;
    color: #F4E3B0;
    letter-spacing: .6px;
}


.bu-bottom-item p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.7;
    color: rgba(255,255,255,.72);
}


/*==========================================================
    GOLD ACCENT LINE
==========================================================*/

.bu-bottom-item .bu-accent {
    position: absolute;
    left: 22px;
    bottom: 14px;
    width: 0;
    height: 2px;
    border-radius: 10px;
    background: linear-gradient( 90deg, #D7B15B, #F5E8BA );
    transition: .55s;
}


.bu-bottom-item:hover .bu-accent {
    width: 120px;
}


/*==========================================================
    PREMIUM DIVIDER
==========================================================*/

.bu-bottom-item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -11px;
    top: 20%;
    width: 1px;
    height: 60%;
    background: linear-gradient( transparent, rgba(215,177,91,.25), transparent );
}


/*==========================================================
    GLASS DEPTH
==========================================================*/

.bu-bottom-item {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/*==========================================================
    PART 2D-2
    PREMIUM SHIMMER & LIGHT EFFECTS
==========================================================*/


/*==========================================================
    GLOBAL SHIMMER
==========================================================*/

.bu-shimmer {
    position: relative;
    overflow: hidden;
}

    .bu-shimmer::before {
        content: "";
        position: absolute;
        top: 0;
        left: -180%;
        width: 70%;
        height: 100%;
        background: linear-gradient( 115deg, transparent 0%, rgba(255,255,255,.02) 20%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.04) 80%, transparent 100% );
        transform: skewX(-28deg);
        transition: none;
    }

    .bu-shimmer:hover::before {
        animation: buShimmerSweep 1.6s ease;
    }


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

.bu-btn-primary {
    position: relative;
    overflow: hidden;
}

    .bu-btn-primary::before {
        content: "";
        position: absolute;
        top: -40%;
        left: -140%;
        width: 60%;
        height: 180%;
        transform: rotate(24deg);
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.45), transparent );
    }

    .bu-btn-primary:hover::before {
        animation: buButtonShine 1.3s ease;
    }


/*==========================================================
    DISCOVER BUTTON SHIMMER
==========================================================*/

.bu-discover {
    position: relative;
    overflow: hidden;
}

    .bu-discover::before {
        content: "";
        position: absolute;
        top: 0;
        left: -160%;
        width: 70%;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.28), transparent );
        transform: skewX(-30deg);
    }

    .bu-discover:hover::before {
        animation: buButtonShine 1.2s ease;
    }


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

.bu-feature {
    position: relative;
    overflow: hidden;
}

    .bu-feature::after {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0;
        background: linear-gradient( 120deg, transparent, rgba(215,177,91,.14), transparent );
        transition: .5s;
    }

    .bu-feature:hover::after {
        opacity: 1;
        animation: buFeatureGlow 2.5s linear infinite;
    }


/*==========================================================
    STAT CARD SHIMMER
==========================================================*/

.bu-stat {
    position: relative;
    overflow: hidden;
}

    .bu-stat::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0;
        background: radial-gradient( circle at top, rgba(215,177,91,.22), transparent 70% );
        transition: .4s;
    }

    .bu-stat:hover::before {
        opacity: 1;
    }


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

.bu-bottom-item {
    overflow: hidden;
}

    .bu-bottom-item::after {
        content: "";
        position: absolute;
        top: 0;
        left: -160%;
        width: 60%;
        height: 100%;
        transform: skewX(-28deg);
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.22), transparent );
    }

    .bu-bottom-item:hover::after {
        animation: buGlassSweep 1.7s ease;
    }


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

.bu-bottom-icon {
    position: relative;
}

    .bu-bottom-icon::before {
        content: "";
        position: absolute;
        inset: -10px;
        border-radius: 24px;
        background: radial-gradient( circle, rgba(215,177,91,.18), transparent );
        opacity: 0;
        transition: .45s;
    }

.bu-bottom-item:hover .bu-bottom-icon::before {
    opacity: 1;
}


/*==========================================================
    GOLD TEXT SHIMMER
==========================================================*/

.bu-left h1 {
    background-size: 220% auto;
}

.bu-left:hover h1 {
    animation: buGoldText 5s linear infinite;
}


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

.bu-navbar {
    position: relative;
    overflow: hidden;
}

    .bu-navbar::after {
        content: "";
        position: absolute;
        top: 0;
        left: -200%;
        width: 45%;
        height: 100%;
        transform: skewX(-30deg);
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.08), transparent );
    }

    .bu-navbar:hover::after {
        animation: buNavSweep 2s ease;
    }


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

@keyframes buShimmerSweep {

    from {
        left: -180%;
    }

    to {
        left: 220%;
    }
}

@keyframes buButtonShine {

    from {
        left: -160%;
    }

    to {
        left: 220%;
    }
}

@keyframes buGlassSweep {

    from {
        left: -160%;
    }

    to {
        left: 220%;
    }
}

@keyframes buNavSweep {

    from {
        left: -200%;
    }

    to {
        left: 220%;
    }
}

@keyframes buFeatureGlow {

    from {
        transform: translateX(-120%);
    }

    to {
        transform: translateX(220%);
    }
}

@keyframes buGoldText {

    from {
        background-position: 0% center;
    }

    to {
        background-position: 220% center;
    }
}


/*==========================================================
    SOFT GOLD PULSE
==========================================================*/

@keyframes buGoldPulse {

    0%,100% {
        box-shadow: 0 0 0 rgba(215,177,91,0);
    }

    50% {
        box-shadow: 0 0 35px rgba(215,177,91,.18);
    }
}

.bu-btn-primary:hover,
.bu-discover:hover {
    animation: buGoldPulse 2s ease-in-out infinite;
}
/*==========================================================
    HIDE BOTTOM GLASS BAR ON MOBILE
==========================================================*/

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

    .bu-bottom-bar {
        display: none !important;
    }
}
@media screen and (max-width: 768px) {

    .bu-bottom-bar {
        display: none !important;
    }

    .bu-hero-content {
        padding-bottom: 40px !important;
        min-height: auto;
    }
}
/*==========================================================
    PART 2D-3
    PREMIUM RESPONSIVE DESIGN
==========================================================*/


/*==========================================================
    LARGE DESKTOP (1920px+)
==========================================================*/

@media (min-width:1920px) {

    .bu-container {
        max-width: 1780px;
    }

    .bu-left {
        max-width: 760px;
    }

        .bu-left h1 {
            font-size: 7rem;
            line-height: .95;
        }

    .bu-description {
        max-width: 640px;
        font-size: 19px;
    }
}


/*==========================================================
    DESKTOP (1600px)
==========================================================*/

@media (max-width:1600px) {

    .bu-container {
        width: 92%;
    }

    .bu-left {
        max-width: 700px;
    }

        .bu-left h1 {
            font-size: 5.8rem;
        }

    .bu-bottom-bar {
        width: 94%;
    }
}


/*==========================================================
    LAPTOP (1400px)
==========================================================*/

@media (max-width:1400px) {

    .bu-navbar {
        width: 95%;
        padding: 15px 28px;
    }

    .bu-left {
        max-width: 620px;
    }

        .bu-left h1 {
            font-size: 5rem;
        }

    .bu-description {
        font-size: 17px;
        line-height: 32px;
    }

    .bu-feature {
        padding: 18px;
    }
}


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

@media (max-width:1200px) {

    .bu-hero-content {
        gap: 40px;
    }

    .bu-left {
        max-width: 560px;
    }

        .bu-left h1 {
            font-size: 4.3rem;
        }

    .bu-buttons {
        gap: 18px;
    }

    .bu-features {
        grid-template-columns: repeat(2,1fr);
    }

    .bu-bottom-bar {
        grid-template-columns: repeat(2,1fr);
    }
}


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

@media (max-width:992px) {

    .bu-navbar {
        width: 96%;
        border-radius: 22px;
        padding: 14px 22px;
    }

    .bu-menu {
        display: none;
    }

    .bu-discover {
        display: none;
    }

    .bu-hero {
        padding-top: 130px;
    }

    .bu-hero-content {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .bu-left {
        width: 100%;
        max-width: 760px;
    }

    .bu-small-line {
        justify-content: center;
    }

    .bu-buttons {
        justify-content: center;
    }

    .bu-features {
        width: 100%;
    }

    .bu-stats {
        justify-content: center;
    }

    .bu-right {
        width: 100%;
        min-height: 380px;
    }

    .bu-bottom-bar {
        position: relative;
        margin: 70px auto 30px;
        bottom: auto;
        left: auto;
        transform: none;
    }
}


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

@media (max-width:768px) {

    .bu-hero {
        min-height: auto;
        padding-bottom: 120px;
    }

    .bu-left {
        padding: 35px;
        border-radius: 28px;
    }

        .bu-left h1 {
            font-size: 3.4rem;
        }

    .bu-description {
        font-size: 15px;
        line-height: 29px;
    }

    .bu-buttons {
        flex-direction: column;
        width: 100%;
    }

    .bu-btn-primary,
    .bu-btn-video {
        width: 100%;
        justify-content: center;
    }

    .bu-features {
        grid-template-columns: 1fr;
    }

    .bu-feature {
        width: 100%;
    }

    .bu-stats {
        flex-direction: column;
        gap: 18px;
    }

    .bu-stat {
        width: 100%;
    }

    .bu-bottom-bar {
        grid-template-columns: 1fr;
        border-radius: 28px;
    }

    .bu-bottom-item {
        padding: 20px;
    }

    .bu-scroll {
        display: none;
    }
}


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

@media (max-width:576px) {

    .bu-navbar {
        width: 94%;
        padding: 12px 18px;
    }

    .bu-logo img {
        width: 42px;
    }

    .bu-logo h3 {
        font-size: 1.2rem;
    }

    .bu-logo span {
        font-size: .72rem;
    }

    .bu-left {
        padding: 26px;
    }

        .bu-left h1 {
            font-size: 2.8rem;
        }

    .bu-small-line p {
        font-size: .82rem;
        letter-spacing: 2px;
    }

    .bu-description {
        font-size: 14px;
    }

    .bu-btn-primary,
    .bu-btn-video {
        padding: 16px 24px;
        font-size: 14px;
    }

    .bu-play {
        width: 54px;
        height: 54px;
    }

    .bu-play-svg {
        width: 24px;
        height: 24px;
    }

    .bu-bottom-item {
        gap: 15px;
    }

    .bu-bottom-icon {
        width: 60px;
        height: 60px;
        min-width: 60px;
    }

        .bu-bottom-icon svg {
            width: 28px;
            height: 28px;
        }
}


/*==========================================================
    EXTRA SMALL DEVICES
==========================================================*/

@media (max-width:420px) {

    .bu-left h1 {
        font-size: 2.3rem;
    }

    .bu-description {
        font-size: 13px;
        line-height: 26px;
    }

    .bu-feature span {
        font-size: 14px;
    }

    .bu-stat h2 {
        font-size: 2rem;
    }

    .bu-bottom-item h4 {
        font-size: 1.05rem;
    }

    .bu-bottom-item p {
        font-size: .82rem;
    }
}


/*==========================================================
    LANDSCAPE MOBILE HEIGHT
==========================================================*/

@media (max-height:700px) {

    .bu-hero {
        min-height: 900px;
    }
}


/*==========================================================
    HIGH DPI DISPLAYS
==========================================================*/

@media (-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi) {

    .bu-hero-bg {
        image-rendering: auto;
    }
}


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

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

    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/*==========================================================
    PART 2D-4
    LUXURY SCROLL ANIMATIONS
==========================================================*/


/*==========================================================
    BASE ANIMATION STATE
==========================================================*/

.bu-reveal {
    opacity: 0;
    visibility: hidden;
    will-change: transform, opacity;
    transition: transform 1.1s cubic-bezier(.22,.61,.36,1), opacity 1.1s cubic-bezier(.22,.61,.36,1), visibility 0s linear 1.1s;
}


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

    .bu-reveal.bu-visible {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition-delay: 0s;
    }


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

.bu-fade-up {
    transform: translate3d(0,70px,0);
}


/*==========================================================
    FADE DOWN
==========================================================*/

.bu-fade-down {
    transform: translate3d(0,-70px,0);
}


/*==========================================================
    FADE LEFT
==========================================================*/

.bu-fade-left {
    transform: translate3d(-90px,0,0);
}


/*==========================================================
    FADE RIGHT
==========================================================*/

.bu-fade-right {
    transform: translate3d(90px,0,0);
}


/*==========================================================
    ZOOM
==========================================================*/

.bu-zoom {
    transform: scale(.86);
}


/*==========================================================
    ZOOM LARGE
==========================================================*/

.bu-zoom-large {
    transform: scale(.75);
}


/*==========================================================
    ROTATE
==========================================================*/

.bu-rotate {
    transform: perspective(1000px) rotateX(16deg) scale(.92);
}


/*==========================================================
    FLOAT
==========================================================*/

.bu-float {
    transform: translateY(60px) scale(.96);
}


/*==========================================================
    BLUR REVEAL
==========================================================*/

.bu-blur {
    filter: blur(18px);
}


    .bu-blur.bu-visible {
        filter: blur(0);
        transition: filter 1.2s ease, opacity 1.2s ease, transform 1.2s ease;
    }


/*==========================================================
    STAGGER DELAYS
==========================================================*/

.bu-delay-1 {
    transition-delay: .10s;
}

.bu-delay-2 {
    transition-delay: .20s;
}

.bu-delay-3 {
    transition-delay: .30s;
}

.bu-delay-4 {
    transition-delay: .40s;
}

.bu-delay-5 {
    transition-delay: .50s;
}

.bu-delay-6 {
    transition-delay: .60s;
}

.bu-delay-7 {
    transition-delay: .70s;
}

.bu-delay-8 {
    transition-delay: .80s;
}


/*==========================================================
    HOVER FLOAT
==========================================================*/

.bu-hover-float {
    transition: transform .45s ease, box-shadow .45s ease;
}

    .bu-hover-float:hover {
        transform: translateY(-10px);
    }


/*==========================================================
    GOLD GLOW
==========================================================*/

.bu-hover-glow {
    transition: box-shadow .45s, border-color .45s;
}

    .bu-hover-glow:hover {
        box-shadow: 0 18px 45px rgba(0,0,0,.28), 0 0 35px rgba(215,177,91,.22);
    }


/*==========================================================
    IMAGE PARALLAX READY
==========================================================*/

.bu-parallax {
    will-change: transform;
    transition: transform .18s linear;
}


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

.bu-left h1 {
    animation: buTitleReveal 1.6s cubic-bezier(.22,.61,.36,1);
}


@keyframes buTitleReveal {

    from {
        opacity: 0;
        transform: translateY(70px) scale(.96);
    }

    to {
        opacity: 1;
        transform: none;
    }
}


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

.bu-description {
    animation: buFade 2s .25s both;
}


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

.bu-buttons {
    animation: buFade 2s .45s both;
}


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

.bu-feature {
    animation: buFade 2s .65s both;
}


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

.bu-stat {
    animation: buFade 2s .85s both;
}


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

.bu-bottom-bar {
    animation: buBottomReveal 1.8s .95s both;
}


@keyframes buBottomReveal {

    from {
        opacity: 0;
        transform: translate(-50%,70px);
    }

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


/*==========================================================
    SCROLL INDICATOR
==========================================================*/

.bu-scroll {
    animation: buFade 2s 1.4s both;
}


/*==========================================================
    UNIVERSAL FADE
==========================================================*/

@keyframes buFade {

    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}


/*==========================================================
    SECTION TRANSITIONS
==========================================================*/

section {
    position: relative;
    z-index: 1;
}


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

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

    .bu-reveal,
    .bu-visible,
    .bu-left h1,
    .bu-description,
    .bu-buttons,
    .bu-feature,
    .bu-stat,
    .bu-bottom-bar,
    .bu-scroll {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}


/*==========================================================
    PART 2D-5
    PREMIUM UTILITY CLASSES
==========================================================*/


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

.bu-container {
    width: min(92%,1650px);
    margin-inline: auto;
    position: relative;
    z-index: 2;
}


/*==========================================================
    SECTION SPACING
==========================================================*/

.bu-section {
    position: relative;
    padding: 140px 0;
    overflow: hidden;
}

.bu-section-sm {
    padding: 90px 0;
}

.bu-section-lg {
    padding: 180px 0;
}


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

.bu-bg-dark {
    background: #06110C;
}

.bu-bg-forest {
    background: linear-gradient( 180deg, #07130D, #0B1E15, #07130D );
}

.bu-bg-glass {
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}


/*==========================================================
    DISPLAY
==========================================================*/

.bu-flex {
    display: flex;
}

.bu-grid {
    display: grid;
}

.bu-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

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


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

.bu-grid-2 {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 40px;
}

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

.bu-grid-4 {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 30px;
}


/*==========================================================
    GLASS PANEL
==========================================================*/

.bu-glass {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    background: linear-gradient( 135deg, rgba(255,255,255,.08), rgba(255,255,255,.02) );
    border: 1px solid rgba(215,177,91,.18);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    box-shadow: 0 20px 60px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08);
}


/*==========================================================
    GLASS HOVER
==========================================================*/

.bu-glass-hover {
    transition: transform .45s, box-shadow .45s, border-color .45s;
}

    .bu-glass-hover:hover {
        transform: translateY(-10px);
        border-color: rgba(215,177,91,.35);
        box-shadow: 0 25px 60px rgba(0,0,0,.40), 0 0 40px rgba(215,177,91,.15);
    }


/*==========================================================
    GOLD TEXT
==========================================================*/

.bu-gold {
    background: linear-gradient( 135deg, #FDF3CF, #D7B15B, #FFF7DE );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/*==========================================================
    HEADINGS
==========================================================*/

.bu-title {
    font-family: "Cormorant Garamond",serif;
    font-size: 4rem;
    font-weight: 600;
    line-height: 1.1;
    color: #F4E5BC;
}

.bu-subtitle {
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #D7B15B;
}


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

.bu-text {
    color: rgba(255,255,255,.75);
    line-height: 1.9;
}

.bu-text-center {
    text-align: center;
}


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

.bu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-decoration: none;
    cursor: pointer;
}

.bu-rounded {
    border-radius: 999px;
}

.bu-radius {
    border-radius: 30px;
}


/*==========================================================
    SHADOWS
==========================================================*/

.bu-shadow {
    box-shadow: 0 18px 45px rgba(0,0,0,.30);
}

.bu-shadow-lg {
    box-shadow: 0 40px 100px rgba(0,0,0,.40);
}

.bu-shadow-gold {
    box-shadow: 0 0 35px rgba(215,177,91,.18);
}


/*==========================================================
    BORDERS
==========================================================*/

.bu-border {
    border: 1px solid rgba(255,255,255,.08);
}

.bu-border-gold {
    border: 1px solid rgba(215,177,91,.22);
}


/*==========================================================
    OVERFLOW
==========================================================*/

.bu-hidden {
    overflow: hidden;
}

.bu-relative {
    position: relative;
}

.bu-absolute {
    position: absolute;
}


/*==========================================================
    SPACING
==========================================================*/

.bu-mt-1 {
    margin-top: 10px;
}

.bu-mt-2 {
    margin-top: 20px;
}

.bu-mt-3 {
    margin-top: 30px;
}

.bu-mt-4 {
    margin-top: 40px;
}

.bu-mt-5 {
    margin-top: 60px;
}

.bu-mb-1 {
    margin-bottom: 10px;
}

.bu-mb-2 {
    margin-bottom: 20px;
}

.bu-mb-3 {
    margin-bottom: 30px;
}

.bu-mb-4 {
    margin-bottom: 40px;
}

.bu-mb-5 {
    margin-bottom: 60px;
}

.bu-p-1 {
    padding: 10px;
}

.bu-p-2 {
    padding: 20px;
}

.bu-p-3 {
    padding: 30px;
}

.bu-p-4 {
    padding: 40px;
}

.bu-p-5 {
    padding: 60px;
}


/*==========================================================
    DIVIDERS
==========================================================*/

.bu-divider {
    width: 120px;
    height: 2px;
    margin: 30px auto;
    background: linear-gradient( 90deg, transparent, #D7B15B, transparent );
}


/*==========================================================
    BLUR HELPERS
==========================================================*/

.bu-blur-sm {
    backdrop-filter: blur(10px);
}

.bu-blur-md {
    backdrop-filter: blur(20px);
}

.bu-blur-lg {
    backdrop-filter: blur(35px);
}


/*==========================================================
    GOLD GLOW
==========================================================*/

.bu-glow {
    position: relative;
}

    .bu-glow::before {
        content: "";
        position: absolute;
        inset: -25px;
        border-radius: inherit;
        background: radial-gradient( circle, rgba(215,177,91,.16), transparent 70% );
        opacity: 0;
        transition: .45s;
        z-index: -1;
    }

    .bu-glow:hover::before {
        opacity: 1;
    }


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

.bu-img {
    display: block;
    width: 100%;
    height: auto;
}

.bu-img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/*==========================================================
    Z-INDEX
==========================================================*/

.bu-z1 {
    z-index: 1;
}

.bu-z2 {
    z-index: 2;
}

.bu-z3 {
    z-index: 3;
}

.bu-z10 {
    z-index: 10;
}

.bu-z20 {
    z-index: 20;
}


/*==========================================================
    CURSOR
==========================================================*/

.bu-pointer {
    cursor: pointer;
}


/*==========================================================
    TRANSITIONS
==========================================================*/

.bu-transition {
    transition: all .45s ease;
}


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

.bu-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}


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

.bu-about {
    position: relative;
    margin-top: 10px; /* Adjust this value */
    margin-bottom: 10px;
    background: linear-gradient(180deg, #06110C, #08150E, #06110C);
}


.bu-about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: center;
}


/* IMAGE */

.bu-about-image {
    position: relative;
}

    .bu-about-image img {
        width: 100%;
        border-radius: 35px;
        border: 1px solid rgba(215,177,91,.15);
        box-shadow: 0 40px 90px rgba(0,0,0,.45);
    }


/* CONTENT */

.bu-section-tag {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 30px;
}

    .bu-section-tag span {
        width: 80px;
        height: 2px;
        background: linear-gradient(90deg, #FFF6D8, #D7B15B, transparent);
    }

    .bu-section-tag p {
        color: #D7B15B;
        letter-spacing: 4px;
        text-transform: uppercase;
        font-size: 13px;
    }


.bu-about-content h2 {
    font-family: "Cormorant Garamond",serif;
    font-size: 64px;
    color: #FFF4D2;
    line-height: 1.05;
    margin-bottom: 35px;
}

    .bu-about-content h2 span {
        background: linear-gradient(180deg, #FFF8E8, #D7B15B);
        -webkit-background-clip: text;
        color: transparent;
    }


.bu-about-content p {
    color: rgba(255,255,255,.75);
    line-height: 2;
    font-size: 18px;
    margin-bottom: 28px;
}


/* FEATURE LIST */

.bu-about-features {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 18px;
    margin: 45px 0;
}

    .bu-about-features div {
        padding: 18px 22px;
        border-radius: 18px;
        background: rgba(255,255,255,.04);
        border: 1px solid rgba(215,177,91,.12);
        color: #F1E7C4;
    }


/* BUTTON */

.bu-about-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 42px;
    border-radius: 60px;
    background: linear-gradient(180deg, #FFF3D1, #D7B15B);
    color: #07120D;
    font-weight: 600;
    letter-spacing: 2px;
    transition: .4s;
}

    .bu-about-btn:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 45px rgba(215,177,91,.35);
    }


/*======================================
PRODUCTS
======================================*/

.
.lux-products {
    position: relative;
    padding: 140px 6%;
    background: radial-gradient(circle at top left, rgba(216,177,91,.08), transparent 40%), radial-gradient(circle at bottom right, rgba(40,120,80,.12), transparent 45%), #06130d;
    overflow: hidden;
}

/* soft luxury glow layer */
.lux-glow {
    position: absolute;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(216,177,91,.12), transparent 60%);
    top: -300px;
    right: -250px;
    filter: blur(10px);
    pointer-events: none;
}

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

.lux-header {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 90px;
}

.lux-small-title {
    color: #D8B15B;
    font-size: 12px;
    letter-spacing: 6px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 18px;
}

.lux-header h2 {
    color: #fff;
    font-weight: 300;
    font-size: clamp(32px, 5vw, 60px);
    line-height: 1.2;
    margin-bottom: 20px;
}

.lux-header p {
    color: #b9c7bb;
    font-size: clamp(14px, 2vw, 18px);
    line-height: 1.8;
}

/* ===============================
   GRID (ULTRA RESPONSIVE)
================================ */

.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 👈 exactly 3 per row */
    gap: 35px;
    max-width: 1400px;
    margin: auto;
    align-items: stretch;
}

/* ===============================
   CARD DESIGN (LUXURY GLASS)
================================ */

.product-card {
    position: relative;
    background: rgba(18,38,28,.55);
    border: 1px solid rgba(216,177,91,.12);
    border-radius: 28px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    /* More room for the larger image */
    padding: 35px 30px 40px;
    transition: .45s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
    /* soft shine overlay */
    .product-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 145deg, rgba(255,255,255,.08), transparent 60% );
        opacity: 0;
        transition: 0.5s ease;
    }

    /* luxury hover */
    .product-card:hover {
        transform: translateY(-12px);
        border-color: rgba(216,177,91,.6);
        box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 40px rgba(216,177,91,.08);
    }

        .product-card:hover::before {
            opacity: 1;
        }

/* ===============================
   IMAGE (FLOAT EFFECT)
================================ */

}

.product-image img {
    width: 270px;
    
    width: 240px; /* Increased from 160px */

    max-width: 100%;
    height: auto;
    object-fit: contain;
    transition: .6s ease;
    filter: drop-shadow(0 28px 35px rgba(0,0,0,.45));
}

.product-card:hover img {
    transform: scale(1.12) translateY(-12px);
}

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

.category {
    display: block;
    margin-top: 10px; /* Text starts lower */

    margin-bottom: 12px;
    color: #D8B15B;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.product-card h3 {
    margin: 0 0 14px;
    font-size: 24px;
    font-weight: 400;
    color: #fff;
}

.product-card p {
    margin-bottom: 28px;
    line-height: 1.8;
    color: #b8c2b8;
}

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

.product-card a {
    margin-top: auto; /* Button stays aligned at bottom */

    display: inline-block;
    color: #D8B15B;
    text-decoration: none;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: .35s;
}

.product-card:hover a {
    letter-spacing: 3px;
}
}

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

/* tablets */
@media (max-width: 992px) {
    .lux-products {
        padding: 110px 5%;
    }
}

/* mobile large */
@media (max-width: 768px) {
    .lux-header {
        margin-bottom: 60px;
    }

    .product-card {
        padding: 35px 22px;
    }
}

/* mobile small */
@media (max-width: 480px) {
    .lux-products {
        padding: 90px 5%;
    }

    .product-image {
        height: 180px;
    }

        .product-image img {
            width: 140px;
        }

    .product-card h3 {
        font-size: 20px;
    }
}

/* tablet */
@media (max-width: 992px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }
}

/* mobile */
@media (max-width: 600px) {
    .products-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }
}


/*==========================================================
    ABOUT SECTION - MOBILE RESPONSIVE
==========================================================*/

@media (max-width: 768px) {

    .bu-about {
        margin-top: -80px;
        position: relative;
        z-index: 5;
    }

        .bu-about .bu-container {
            width: 100%;
            max-width: 100%;
            padding: 0 20px;
            box-sizing: border-box;
        }

    .bu-about-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 40px;
        text-align: center;
    }

    /* Image */

    .bu-about-image {
        width: 100%;
        display: flex;
        justify-content: center;
    }

        .bu-about-image img {
            width: 90%;
            max-width: 380px;
            height: auto;
            display: block;
        }

    /* Content */

    .bu-about-content {
        width: 100%;
        max-width: 100%;
        text-align: center;
        padding: 0;
    }

    /* Section Tag */

    .bu-section-tag {
        justify-content: center;
        margin-bottom: 20px;
    }

        .bu-section-tag span {
            width: 60px;
        }

    /* Heading */

    .bu-about-content h2 {
        font-size: 2.2rem;
        line-height: 1.2;
        margin-bottom: 20px;
    }

    /* Paragraphs */

    .bu-about-content p {
        font-size: 16px;
        line-height: 1.8;
        margin-bottom: 18px;
    }

    /* Features */

    .bu-about-features {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
        margin: 35px 0;
        justify-items: center;
    }

        .bu-about-features div {
            width: 100%;
            max-width: 320px;
            text-align: center;
            padding: 14px 18px;
        }

    /* Button */

    .bu-about-btn {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 300px;
        margin: 10px auto 0;
        padding: 16px 28px;
    }
}
/* ==================================================
   OXIAURA PHILOSOPHY SECTION
   PART 2A
   Background + Layout + Typography
================================================== */



.philosophy-section {
    background: linear-gradient( rgba(18,42,30,.35), rgba(18,42,30,.45) ), url("../images/philosophy-bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

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

.philosophy-container {
    width: 92%;
    max-width: 1600px;
    margin: auto;
    position: relative;
    z-index: 5;
}



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

.bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 180deg, rgba(0,0,0,.15), rgba(0,0,0,.25) );
    z-index: 1;
    pointer-events: none;
}



/* ==================================
   GOLDEN CIRCLE
================================== */

.bg-circle {
    position: absolute;
    width: 1100px;
    height: 1100px;
    border-radius: 50%;
    left: 50%;
    top: 120px;
    transform: translateX(-50%);
    border: 1px solid rgba(216,177,91,.10);
    z-index: 1;
    pointer-events: none;
}



    .bg-circle::before {
        content: "";
        position: absolute;
        inset: 70px;
        border-radius: 50%;
        border: 1px solid rgba(216,177,91,.08);
    }



    .bg-circle::after {
        content: "";
        position: absolute;
        inset: 140px;
        border-radius: 50%;
        border: 1px solid rgba(216,177,91,.05);
    }



/* ==================================
   LIGHT BEAM
================================== */

.light-beam {
    position: absolute;
    width: 900px;
    height: 900px;
    left: -250px;
    top: -250px;
    background: radial-gradient( ellipse at center, rgba(255,240,200,.18), rgba(255,240,200,.05) 30%, transparent 70% );
    filter: blur(40px);
    transform: rotate(-25deg);
    z-index: 2;
    pointer-events: none;
}



/* ==================================
   FLOATING PARTICLES
================================== */

.floating-particle {
    position: absolute;
    border-radius: 50%;
    background: #d8b15b;
    box-shadow: 0 0 12px rgba(216,177,91,.8), 0 0 25px rgba(216,177,91,.35);
    z-index: 3;
}

.p1 {
    width: 7px;
    height: 7px;
    top: 180px;
    left: 15%;
}

.p2 {
    width: 10px;
    height: 10px;
    top: 340px;
    right: 20%;
}

.p3 {
    width: 6px;
    height: 6px;
    top: 550px;
    left: 28%;
}

.p4 {
    width: 8px;
    height: 8px;
    top: 740px;
    right: 30%;
}



/* ==================================
   LEAVES
================================== */

.leaf {
    position: absolute;
    z-index: 2;
    opacity: .55;
    pointer-events: none;
    filter: drop-shadow( 0 0 20px rgba(216,177,91,.08) );
}



.leaf-left-top {
    width: 260px;
    left: -40px;
    top: 260px;
    transform: rotate(-12deg);
}



.leaf-left-bottom {
    width: 320px;
    left: -80px;
    bottom: 180px;
    transform: rotate(8deg);
}



.leaf-right-top {
    width: 260px;
    right: -20px;
    top: 120px;
    transform: rotate(10deg);
}



.leaf-right-bottom {
    width: 300px;
    right: -60px;
    bottom: 120px;
    transform: rotate(-12deg);
}



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

.section-heading {
    max-width: 900px;
    margin: 0 auto 100px;
    text-align: center;
    position: relative;
    z-index: 5;
}



.sub-title {
    display: block;
    color: #d8b15b;
    font-size: 13px;
    letter-spacing: 7px;
    text-transform: uppercase;
    margin-bottom: 24px;
}



/* ==================================
   GOLD DIVIDER
================================== */

.gold-divider {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 35px;
}



    .gold-divider span {
        width: 120px;
        height: 1px;
        background: linear-gradient( 90deg, transparent, #d8b15b, transparent );
        position: relative;
    }



        .gold-divider span::before {
            content: "✦";
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            background: #040b08;
            padding: 0 10px;
            color: #d8b15b;
            font-size: 14px;
        }



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

.section-heading h2 {
    color: #ffffff;
    font-family: "Cormorant Garamond", serif;
    font-weight: 300;
    font-size: clamp( 52px, 7vw, 88px );
    line-height: 1.08;
    letter-spacing: -1px;
    margin-bottom: 30px;
    text-shadow: 0 0 20px rgba(255,255,255,.04);
}



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

.section-heading p {
    max-width: 760px;
    margin: auto;
    color: #b8c2ba;
    font-size: 20px;
    line-height: 1.9;
    font-weight: 300;
}



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

.philosophy-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 60px;
    align-items: stretch;
    position: relative;
    z-index: 5;
}



/* ==================================
   QUOTE SECTION
================================== */

.quote-box {
    margin-top: 90px;
    text-align: center;
    color: #d8b15b;
    position: relative;
    z-index: 5;
}



.quote-mark {
    font-size: 38px;
    opacity: .8;
}



.quote-box p {
    font-family: "Cormorant Garamond", serif;
    font-size: 34px;
    line-height: 1.4;
    margin: 10px 0;
    font-style: italic;
}



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

.company-name {
    text-align: center;
    margin-top: 35px;
    color: #d8b15b;
    letter-spacing: 12px;
    font-size: 22px;
    font-weight: 300;
    position: relative;
    z-index: 5;
}
/*=========================================================
    PART 2B
    VISION & MISSION GLASS CARDS
==========================================================*/

.philosophy-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(420px,1fr));
    gap: 70px;
    margin-top: 90px;
    margin-bottom: 100px;
    z-index: 5;
}


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

.glass-card {
    position: relative;
    overflow: hidden;
    padding: 65px 55px 60px;
    border-radius: 36px;
    background: linear-gradient( 180deg, rgba(255,255,255,.07), rgba(255,255,255,.025) );
    border: 1px solid rgba(216,177,91,.22);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    transition: .55s cubic-bezier(.22,.61,.36,1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 40px 80px rgba(0,0,0,.45);
}


    /*==========================
 GOLD BORDER GLOW
===========================*/

    .glass-card::before {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: 36px;
        padding: 1px;
        background: linear-gradient( 135deg, rgba(216,177,91,.8), rgba(216,177,91,.15), rgba(216,177,91,.65) );
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: .45;
        pointer-events: none;
    }


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

    .glass-card::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 120px;
        background: linear-gradient( 180deg, rgba(255,255,255,.12), transparent );
        opacity: .7;
    }


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

.glass-glow {
    position: absolute;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(216,177,91,.18), transparent 70%);
    left: 50%;
    top: -180px;
    transform: translateX(-50%);
    pointer-events: none;
}


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

.icon-circle {
    width: 92px;
    height: 92px;
    margin: auto;
    margin-bottom: 35px;
    border-radius: 50%;
    border: 1px solid rgba(216,177,91,.45);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #D8B15B;
    background: radial-gradient(circle, rgba(216,177,91,.12), rgba(255,255,255,.02));
    box-shadow: inset 0 0 25px rgba(216,177,91,.08), 0 0 35px rgba(216,177,91,.08);
}


    .icon-circle svg {
        width: 42px;
        height: 42px;
    }


/*=========================================================
 DECORATIVE LINE
==========================================================*/

.card-line {
    width: 70px;
    height: 2px;
    margin: auto;
    margin-bottom: 28px;
    background: linear-gradient( 90deg, transparent, #D8B15B, transparent);
}


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

.glass-card h3 {
    color: #D8B15B;
    text-align: center;
    font-size: 34px;
    font-family: "Cormorant Garamond",serif;
    font-weight: 500;
    letter-spacing: 2px;
    margin-bottom: 22px;
}


/*=========================================================
 SMALL DIVIDER
==========================================================*/

.small-divider {
    width: 90px;
    height: 1px;
    margin: auto;
    margin-bottom: 32px;
    background: linear-gradient( 90deg, transparent, rgba(216,177,91,.85), transparent);
}


/*=========================================================
 PARAGRAPH
==========================================================*/

.glass-card p {
    color: #ECE8DC;
    font-size: 18px;
    line-height: 2.1;
    text-align: center;
    font-weight: 300;
    max-width: 430px;
    margin: auto;
}


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

.glass-card:hover {
    transform: translateY(-18px) scale(1.02);
    border-color: rgba(216,177,91,.65);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 45px 100px rgba(0,0,0,.55), 0 0 70px rgba(216,177,91,.12);
}


    .glass-card:hover .icon-circle {
        transform: scale(1.08);
        transition: .5s;
        box-shadow: 0 0 45px rgba(216,177,91,.28);
    }


    .glass-card:hover .glass-glow {
        opacity: 1;
    }


/*=========================================================
 QUOTE
==========================================================*/

.quote-box {
    text-align: center;
    margin-top: 40px;
    color: #D8B15B;
}


    .quote-box p {
        font-family: "Cormorant Garamond",serif;
        font-size: 34px;
        font-style: italic;
        line-height: 1.6;
        color: #E8DDC8;
    }


.quote-mark {
    font-size: 60px;
    color: #D8B15B;
    opacity: .8;
}


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

.company-name {
    margin-top: 25px;
    text-align: center;
    letter-spacing: 10px;
    color: #D8B15B;
    font-size: 22px;
    font-family: "Cormorant Garamond",serif;
    font-weight: 600;
}

/*=========================================================
    PART 2C
    RESPONSIVE + LUXURY ANIMATIONS
==========================================================*/


/*=========================================================
    FLOATING PARTICLES
==========================================================*/

.floating-particle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(216,177,91,.9), rgba(216,177,91,.15));
    animation: particleFloat 12s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
    filter: blur(.3px);
}

.p1 {
    width: 8px;
    height: 8px;
    left: 10%;
    top: 15%;
    animation-delay: 0s;
}

.p2 {
    width: 12px;
    height: 12px;
    right: 18%;
    top: 25%;
    animation-delay: 2s;
}

.p3 {
    width: 7px;
    height: 7px;
    left: 25%;
    bottom: 18%;
    animation-delay: 4s;
}

.p4 {
    width: 10px;
    height: 10px;
    right: 8%;
    bottom: 10%;
    animation-delay: 6s;
}



/*=========================================================
    GOLD CIRCLE
==========================================================*/

.bg-circle {
    animation: rotateGlow 40s linear infinite;
    transform-origin: center;
}



/*=========================================================
    LIGHT BEAM
==========================================================*/

.light-beam {
    animation: lightPulse 8s ease-in-out infinite;
}



/*=========================================================
    LEAVES
==========================================================*/

.leaf {
    animation: leafFloat 9s ease-in-out infinite;
    opacity: .18;
}

.leaf-right-top {
    animation-delay: 1s;
}

.leaf-left-bottom {
    animation-delay: 3s;
}

.leaf-right-bottom {
    animation-delay: 5s;
}



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

.glass-card {
    cursor: pointer;
}

    .glass-card:hover {
        transform: translateY(-14px) scale(1.02);
    }



        .glass-card:hover .icon-circle {
            transform: scale(1.08) rotate(8deg);
        }



        .glass-card:hover h3 {
            color: #f3d188;
        }



        .glass-card:hover .card-line {
            width: 110px;
        }



        .glass-card:hover .small-divider {
            width: 120px;
        }



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

.company-name {
    position: relative;
}



    .company-name::after {
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -18px;
        width: 80px;
        height: 2px;
        background: linear-gradient( 90deg, transparent, #D8B15B, transparent);
    }



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

.section-heading {
    animation: fadeUp 1s ease;
}



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

.glass-card {
    animation: fadeUp 1s ease both;
}

    .glass-card:nth-child(2) {
        animation-delay: .25s;
    }



/*=========================================================
    KEYFRAMES
==========================================================*/

@keyframes particleFloat {

    0%,100% {
        transform: translateY(0) translateX(0);
        opacity: .4;
    }

    25% {
        transform: translateY(-25px) translateX(8px);
        opacity: 1;
    }

    50% {
        transform: translateY(-50px) translateX(-10px);
        opacity: .8;
    }

    75% {
        transform: translateY(-20px) translateX(5px);
        opacity: .5;
    }
}



@keyframes rotateGlow {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}



@keyframes lightPulse {

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

    50% {
        opacity: .7;
        transform: translateX(-50%) scale(1.05);
    }
}



@keyframes leafFloat {

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

    50% {
        transform: translateY(-15px) rotate(3deg);
    }
}



@keyframes fadeUp {

    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}



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

@media(max-width:1100px) {

    .philosophy-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .glass-card {
        max-width: 750px;
        margin: auto;
    }

    .section-heading h2 {
        font-size: 52px;
    }
}



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

@media(max-width:768px) {

    .philosophy-section {
        padding: 100px 0;
    }

    .section-heading {
        margin-bottom: 60px;
    }

        .section-heading h2 {
            font-size: 40px;
            line-height: 1.2;
        }

        .section-heading p {
            font-size: 17px;
            width: 90%;
        }

    .glass-card {
        padding: 45px 28px;
        border-radius: 28px;
    }

        .glass-card h3 {
            font-size: 28px;
        }

        .glass-card p {
            font-size: 16px;
            line-height: 1.9;
        }

    .icon-circle {
        width: 72px;
        height: 72px;
    }

        .icon-circle svg {
            width: 34px;
            height: 34px;
        }

    .quote-box p {
        font-size: 28px;
    }

    .company-name {
        font-size: 18px;
        letter-spacing: 6px;
    }
}



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

@media(max-width:480px) {

    .section-heading h2 {
        font-size: 34px;
    }

    .section-heading p {
        font-size: 15px;
    }

    .glass-card {
        padding: 40px 22px;
    }

        .glass-card p {
            font-size: 15px;
        }

    .quote-box p {
        font-size: 24px;
    }

    .bg-circle {
        width: 500px;
        height: 500px;
    }
}



/*=========================================================
    PERFORMANCE
==========================================================*/

.glass-card,
.icon-circle,
.leaf,
.bg-circle,
.light-beam {
    will-change: transform;
    backface-visibility: hidden;
    transform-style: preserve-3d;


}

/*==============================================================
    OXIAURA PREMIUM FOOTER
    PART 2A.1
    Background • Layout • Header
==============================================================*/


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

.buf-footer {
    position: relative;
    overflow: hidden;
    padding: 170px 0 60px;
    background: linear-gradient( 180deg, #183E2F 0%, #10291F 35%, #0A1C15 70%, #050B08 100% );
    isolation: isolate;
}


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

    .buf-footer::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( rgba(8,18,13,.45), rgba(4,8,6,.70) ), url("../images/footer/footer-bg.webp");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        opacity: .95;
        z-index: -3;
    }


    /*========================
    EMERALD AMBIENT LIGHT
========================*/

    .buf-footer::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 180px;
        transform: translateX(-50%);
        width: 1300px;
        height: 1300px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(70,140,92,.22), rgba(40,90,60,.10), transparent 72%);
        filter: blur(60px);
        z-index: -2;
    }



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

.buf-container {
    position: relative;
    width: 92%;
    max-width: 1650px;
    margin: auto;
    z-index: 10;
}



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

.buf-divider {
    position: relative;
    margin-bottom: 75px;
    height: 90px;
}



    .buf-divider::before {
        content: "";
        position: absolute;
        left: 0;
        top: 25px;
        width: 100%;
        height: 2px;
        border-radius: 50px;
        background: linear-gradient( 90deg, transparent, rgba(216,177,91,.95), transparent);
        box-shadow: 0 0 25px rgba(216,177,91,.30);
    }



.buf-divider-dot {
    position: absolute;
    left: 50%;
    top: 18px;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #D8B15B;
    box-shadow: 0 0 20px rgba(216,177,91,.90), 0 0 55px rgba(216,177,91,.45);
}



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

.buf-header {
    max-width: 900px;
    margin: auto;
    text-align: center;
    margin-bottom: 90px;
}



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

.buf-small-title {
    display: inline-block;
    margin-bottom: 22px;
    color: #D8B15B;
    font-size: 13px;
    font-family: "Poppins",sans-serif;
    letter-spacing: 5px;
    text-transform: uppercase;
}



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

.buf-header h2 {
    margin: 0;
    font-family: "Cormorant Garamond",serif;
    font-size: 78px;
    font-weight: 600;
    line-height: 1.08;
    color: #F4EFE3;
    text-shadow: 0 10px 35px rgba(0,0,0,.35);
}



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

.buf-header p {
    margin: 35px auto 0;
    max-width: 760px;
    color: #C6D0C8;
    font-size: 18px;
    line-height: 2;
    font-weight: 300;
}



/*========================
    MAIN PANEL
========================*/

.buf-panel {
    position: relative;
    padding: 70px;
    border-radius: 40px;
}



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

.buf-brand {
    text-align: center;
    margin-bottom: 70px;
}



.buf-logo {
    width: 90px;
    margin-bottom: 25px;
}



.buf-brand h3 {
    margin: 0;
    color: #D8B15B;
    font-family: "Cormorant Garamond",serif;
    font-size: 68px;
    font-weight: 600;
    letter-spacing: 10px;
}



.buf-brand span {
    display: block;
    margin-top: 14px;
    color: #D3D6CF;
    font-size: 15px;
    letter-spacing: 6px;
    text-transform: uppercase;
}



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

.buf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.4fr;
    gap: 55px;
}



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

.buf-bottom {
    margin-top: 70px;
    padding-top: 35px;
    border-top: 1px solid rgba(216,177,91,.18);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}



    .buf-bottom p {
        color: #BEC6BF;
        font-size: 15px;
        letter-spacing: 1px;
    }



.buf-bottom-links {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}



    .buf-bottom-links a {
        color: #D8B15B;
        text-decoration: none;
        transition: .35s;
        font-size: 15px;
    }



    .buf-bottom-links span {
        color: rgba(216,177,91,.35);
    }



    .buf-bottom-links a:hover {
        color: #FFFFFF;
    }

/*==============================================================
    OXIAURA PREMIUM FOOTER
    PART 2A.2
    Glass Panel • Decorative Effects
==============================================================*/


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

.buf-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 0%, rgba(255,223,145,.12), transparent 30%), radial-gradient(circle at 20% 65%, rgba(70,140,92,.14), transparent 40%), radial-gradient(circle at 80% 65%, rgba(70,140,92,.10), transparent 45%);
    z-index: 0;
}


/*==============================================================
SPOTLIGHT
==============================================================*/

.buf-light {
    position: absolute;
    top: -280px;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 900px;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,230,180,.20), rgba(255,230,180,.05), transparent 72%);
    filter: blur(45px);
    animation: bufLight 8s ease-in-out infinite;
}


/*==============================================================
GLASS PANEL
==============================================================*/

.buf-panel {
    position: relative;
    overflow: hidden;
    padding: 80px;
    border-radius: 42px;
    background: linear-gradient( 180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
    border: 1px solid rgba(216,177,91,.18);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 35px 90px rgba(0,0,0,.35);
}


    /*==============================================================
GOLD BORDER
==============================================================*/

    .buf-panel::before {
        content: "";
        position: absolute;
        inset: 0;
        padding: 1px;
        border-radius: 42px;
        background: linear-gradient( 135deg, rgba(216,177,91,.65), rgba(216,177,91,.10), rgba(216,177,91,.45));
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }


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

    .buf-panel::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 140px;
        background: linear-gradient( 180deg, rgba(255,255,255,.08), transparent);
    }


/*==============================================================
INNER GLOW
==============================================================*/

.buf-panel-glow {
    position: absolute;
    inset: -100px;
    background: radial-gradient(circle, rgba(216,177,91,.10), transparent 70%);
    filter: blur(80px);
    pointer-events: none;
}


/*==============================================================
FLOATING GLOWS
==============================================================*/

.buf-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: .45;
    pointer-events: none;
}

.buf-glow-left {
    width: 380px;
    height: 380px;
    left: -120px;
    top: 120px;
    background: rgba(216,177,91,.25);
    animation: bufGlow 10s ease-in-out infinite;
}

.buf-glow-right {
    width: 480px;
    height: 480px;
    right: -140px;
    bottom: -80px;
    background: rgba(40,120,70,.28);
    animation: bufGlow 12s ease-in-out infinite reverse;
}


/*==============================================================
BOTANICAL LEAVES
==============================================================*/

.buf-leaf {
    position: absolute;
    pointer-events: none;
    opacity: .82;
    filter: drop-shadow(0 10px 30px rgba(0,0,0,.45));
}

.buf-leaf-left {
    width: 260px;
    left: -40px;
    top: 140px;
    animation: bufLeaf 8s ease-in-out infinite;
}

.buf-leaf-right {
    width: 260px;
    right: -40px;
    bottom: 120px;
    animation: bufLeaf 8s ease-in-out infinite reverse;
}


/*==============================================================
PARTICLES
==============================================================*/

.buf-particle {
    position: absolute;
    border-radius: 50%;
    background: #D8B15B;
    box-shadow: 0 0 18px rgba(216,177,91,.8);
    animation: bufParticle 12s linear infinite;
}

.buf-p1 {
    width: 5px;
    height: 5px;
    left: 10%;
    top: 25%;
}

.buf-p2 {
    width: 8px;
    height: 8px;
    left: 85%;
    top: 35%;
    animation-delay: 3s;
}

.buf-p3 {
    width: 6px;
    height: 6px;
    left: 25%;
    bottom: 20%;
    animation-delay: 6s;
}

.buf-p4 {
    width: 10px;
    height: 10px;
    right: 8%;
    bottom: 15%;
    animation-delay: 8s;
}


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

@keyframes bufGlow {

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

    50% {
        transform: scale(1.15);
    }
}


@keyframes bufLeaf {

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

    50% {
        transform: translateY(-12px) rotate(3deg);
    }
}


@keyframes bufParticle {

    0% {
        transform: translateY(0);
        opacity: .2;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateY(-140px);
        opacity: 0;
    }
}


@keyframes bufLight {

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

    50% {
        transform: translateX(-50%) scale(1.08);
        opacity: .9;
    }
}

/*==============================================================
    OXIAURA PREMIUM FOOTER
    PART 2B.1
    Columns • Typography • Links • Contact
==============================================================*/


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

.buf-column {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
}


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

    .buf-column h4 {
        position: relative;
        margin: 0 0 32px;
        font-family: "Cormorant Garamond",serif;
        font-size: 34px;
        font-weight: 600;
        color: #D8B15B;
        letter-spacing: .5px;
    }


        .buf-column h4::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -14px;
            width: 70px;
            height: 2px;
            border-radius: 20px;
            background: linear-gradient( 90deg, #D8B15B, rgba(216,177,91,0) );
        }


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

    .buf-column ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }


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

    .buf-column li {
        margin-bottom: 18px;
        line-height: 1.8;
    }


        .buf-column li:last-child {
            margin-bottom: 0;
        }


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

    .buf-column a {
        position: relative;
        display: inline-flex;
        align-items: center;
        color: #D3D8D1;
        text-decoration: none;
        font-family: "Poppins",sans-serif;
        font-size: 15px;
        font-weight: 400;
        transition: color .35s, padding-left .35s;
    }


        /* Gold Bullet */

        .buf-column a::before {
            content: "";
            width: 7px;
            height: 7px;
            border-radius: 50%;
            margin-right: 0;
            background: #D8B15B;
            transform: scale(0);
            transition: .35s;
        }


        /* Hover */

        .buf-column a:hover {
            color: #FFFFFF;
            padding-left: 12px;
        }


            .buf-column a:hover::before {
                margin-right: 10px;
                transform: scale(1);
            }


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

.buf-contact {
    display: flex;
    flex-direction: column;
    gap: 22px;
}


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

    .buf-contact li {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        color: #D3D8D1;
        font-size: 15px;
        line-height: 1.8;
    }


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

    .buf-contact i {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        border-radius: 50%;
        color: #D8B15B;
        font-size: 16px;
        background: linear-gradient( 180deg, rgba(255,255,255,.08), rgba(255,255,255,.03) );
        border: 1px solid rgba(216,177,91,.18);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 20px rgba(0,0,0,.18);
        transition: .35s;
    }


    .buf-contact li:hover i {
        transform: translateY(-3px);
        background: #D8B15B;
        color: #082016;
    }


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

.buf-column:not(.buf-newsletter) {
    padding-right: 10px;
}


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

.buf-brand {
    position: relative;
}


    .buf-brand::after {
        content: "";
        display: block;
        width: 180px;
        height: 1px;
        margin: 28px auto 0;
        background: linear-gradient( 90deg, transparent, rgba(216,177,91,.85), transparent );
    }


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

.buf-bottom-links a {
    position: relative;
}


    .buf-bottom-links a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -5px;
        width: 0;
        height: 1px;
        background: #D8B15B;
        transition: width .35s ease;
    }


    .buf-bottom-links a:hover::after {
        width: 100%;
    }


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

.buf-footer ::selection {
    background: #D8B15B;
    color: #08150F;
}


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

.buf-column a:focus-visible {
    outline: 2px solid rgba(216,177,91,.6);
    outline-offset: 4px;
    border-radius: 4px;
}

/*==============================================================
    OXIAURA PREMIUM FOOTER
    PART 2B.2
    Newsletter • Social • Buttons
==============================================================*/


/*==============================================================
NEWSLETTER
==============================================================*/

.buf-newsletter {
    padding-left: 30px;
}

    .buf-newsletter p {
        margin: 0 0 30px;
        color: #C8D0CA;
        font-family: "Poppins",sans-serif;
        font-size: 15px;
        line-height: 1.9;
    }



/*==============================================================
INPUT GROUP
==============================================================*/

.buf-input-group {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 35px;
}



    /*==============================================================
EMAIL INPUT
==============================================================*/

    .buf-input-group input {
        width: 100%;
        height: 64px;
        padding: 0 75px 0 24px;
        border: none;
        outline: none;
        border-radius: 50px;
        color: #ffffff;
        font-size: 15px;
        font-family: "Poppins",sans-serif;
        background: linear-gradient( 180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
        border: 1px solid rgba(216,177,91,.18);
        backdrop-filter: blur(18px);
        transition: .35s;
    }



        .buf-input-group input::placeholder {
            color: #AAB6AE;
        }



        .buf-input-group input:focus {
            border-color: #D8B15B;
            box-shadow: 0 0 0 4px rgba(216,177,91,.10), 0 0 30px rgba(216,177,91,.18);
        }



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

    .buf-input-group button {
        position: absolute;
        right: 7px;
        width: 50px;
        height: 50px;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        color: #07120D;
        font-size: 18px;
        background: linear-gradient( 135deg, #EBC97A, #D8B15B);
        transition: .4s;
        box-shadow: 0 15px 35px rgba(216,177,91,.25);
    }



        .buf-input-group button:hover {
            transform: rotate(18deg) scale(1.08);
        }



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

.buf-social {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}



    .buf-social a {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #D8B15B;
        font-size: 18px;
        background: linear-gradient( 180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
        border: 1px solid rgba(216,177,91,.18);
        transition: .4s;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 25px rgba(0,0,0,.18);
    }



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

        .buf-social a:hover {
            background: #D8B15B;
            color: #082016;
            transform: translateY(-6px) rotate(8deg);
            box-shadow: 0 18px 40px rgba(216,177,91,.35);
        }



/*==============================================================
NEWSLETTER DECORATION
==============================================================*/

.buf-newsletter::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 2px;
    height: 80%;
    background: linear-gradient( 180deg, transparent, rgba(216,177,91,.55), transparent);
}



/*==============================================================
INPUT SHINE
==============================================================*/

.buf-input-group {
    overflow: hidden;
}



    .buf-input-group::before {
        content: "";
        position: absolute;
        top: 0;
        left: -130%;
        width: 45%;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.18), transparent);
        transform: skewX(-25deg);
    }



    .buf-input-group:hover::before {
        animation: bufInputShine .9s ease;
    }



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

.buf-social a i {
    transition: .35s;
}



.buf-social a:hover i {
    transform: scale(1.15);
}



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

.buf-social a:focus,
.buf-input-group input:focus,
.buf-input-group button:focus {
    outline: none;
}



/*==============================================================
KEYFRAMES
==============================================================*/

@keyframes bufInputShine {

    0% {
        left: -120%;
    }

    100% {
        left: 150%;
    }
}



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

@media(max-width:1200px) {

    .buf-newsletter {
        padding-left: 0;
        margin-top: 30px;
    }

        .buf-newsletter::before {
            display: none;
        }
}



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

@media(max-width:768px) {

    .buf-input-group {
        flex-direction: column;
        gap: 15px;
    }

        .buf-input-group input {
            padding: 0 20px;
        }

        .buf-input-group button {
            position: relative;
            right: auto;
            width: 100%;
            height: 56px;
            border-radius: 40px;
        }

    .buf-social {
        justify-content: center;
    }
}
/*==============================================================
    OXIAURA PREMIUM FOOTER
    PART 2C
    Luxury Animations • Responsive • Final Polish
==============================================================*/


/*==============================================================
SMOOTH TRANSITIONS
==============================================================*/

.buf-footer *,
.buf-footer *::before,
.buf-footer *::after {
    transition: background-color .35s ease, color .35s ease, border-color .35s ease, transform .35s ease, opacity .35s ease, box-shadow .35s ease;
}



/*==============================================================
GLASS SHIMMER
==============================================================*/

.buf-panel {
    isolation: isolate;
}

    .buf-panel::after {
        content: "";
        position: absolute;
        top: -40%;
        left: -60%;
        width: 45%;
        height: 180%;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.10), transparent);
        transform: rotate(25deg);
        pointer-events: none;
    }



    .buf-panel:hover::after {
        animation: bufPanelShine 1.5s ease;
    }



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

.buf-header h2 {
    animation: bufFadeUp 1s ease both;
}

.buf-header p {
    animation: bufFadeUp 1.3s ease both;
}

.buf-small-title {
    animation: bufFadeUp .8s ease both;
}



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

.buf-brand {
    animation: bufFadeUp 1.2s ease both;
}

    .buf-brand:hover {
        transform: translateY(-5px);
    }



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

.buf-column {
    animation: bufFadeUp 1s ease both;
}

    .buf-column:nth-child(1) {
        animation-delay: .15s;
    }

    .buf-column:nth-child(2) {
        animation-delay: .30s;
    }

    .buf-column:nth-child(3) {
        animation-delay: .45s;
    }

    .buf-column:nth-child(4) {
        animation-delay: .60s;
    }



/*==============================================================
PARTICLES
==============================================================*/

.buf-particle {
    opacity: .35;
    animation: bufParticleFloat 14s linear infinite, bufParticleGlow 5s ease-in-out infinite;
}



@keyframes bufParticleGlow {

    0%,100% {
        opacity: .25;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.7);
    }
}



@keyframes bufParticleFloat {

    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-180px);
    }
}



/*==============================================================
LEAF MOVEMENT
==============================================================*/

.buf-leaf {
    animation: bufLeafMove 10s ease-in-out infinite;
    transform-origin: center;
}

.buf-leaf-right {
    animation-delay: 4s;
}



@keyframes bufLeafMove {

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

    50% {
        transform: translateY(-12px) rotate(4deg);
    }
}



/*==============================================================
GLOW PULSE
==============================================================*/

.buf-glow {
    animation: bufGlowPulse 10s ease-in-out infinite;
}

.buf-glow-right {
    animation-delay: 5s;
}



@keyframes bufGlowPulse {

    0%,100% {
        transform: scale(1);
        opacity: .45;
    }

    50% {
        transform: scale(1.18);
        opacity: .70;
    }
}



/*==============================================================
LIGHT MOVEMENT
==============================================================*/

.buf-light {
    animation: bufLightMove 8s ease-in-out infinite;
}



@keyframes bufLightMove {

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

    50% {
        transform: translateX(-50%) scale(1.12);
        opacity: .9;
    }
}



/*==============================================================
PANEL SHINE
==============================================================*/

@keyframes bufPanelShine {

    0% {
        left: -70%;
    }

    100% {
        left: 170%;
    }
}



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

@keyframes bufFadeUp {

    from {
        opacity: 0;
        transform: translateY(45px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}



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

.buf-bottom {
    position: relative;
}

    .buf-bottom::before {
        content: "";
        position: absolute;
        top: -1px;
        left: 50%;
        transform: translateX(-50%);
        width: 180px;
        height: 2px;
        background: linear-gradient( 90deg, transparent, #D8B15B, transparent);
    }



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

@media (max-width:1200px) {

    .buf-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 45px;
    }

    .buf-newsletter {
        grid-column: 1/-1;
    }

    .buf-brand h3 {
        font-size: 54px;
        letter-spacing: 6px;
    }

    .buf-header h2 {
        font-size: 60px;
    }
}



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

@media (max-width:768px) {

    .buf-footer {
        padding: 120px 0 50px;
    }

    .buf-panel {
        padding: 45px 30px;
        border-radius: 30px;
    }

    .buf-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .buf-header {
        margin-bottom: 60px;
    }

        .buf-header h2 {
            font-size: 42px;
        }

        .buf-header p {
            font-size: 16px;
            line-height: 1.8;
        }

    .buf-brand h3 {
        font-size: 42px;
        letter-spacing: 4px;
    }

    .buf-brand span {
        font-size: 12px;
        letter-spacing: 2px;
    }

    .buf-bottom {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .buf-bottom-links {
        justify-content: center;
    }

    .buf-leaf {
        display: none;
    }
}



/*==============================================================
SMALL PHONES
==============================================================*/

@media (max-width:480px) {

    .buf-panel {
        padding: 35px 20px;
    }

    .buf-header h2 {
        font-size: 34px;
    }

    .buf-small-title {
        font-size: 11px;
        letter-spacing: 3px;
    }

    .buf-column h4 {
        font-size: 28px;
    }
}



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

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

    .buf-footer * {
        animation: none !important;
        transition: none !important;
    }
}



/*==============================================================
GPU ACCELERATION
==============================================================*/

.buf-panel,
.buf-glow,
.buf-light,
.buf-leaf,
.buf-particle,
.buf-column,
.buf-brand {
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/*==============================================================
    OXIAURA PREMIUM FOOTER
    PART 2D
    Cinematic Luxury Effects
==============================================================*/


/*==============================================================
GOLD NOISE TEXTURE
==============================================================*/

.buf-footer::before {
    background-image: linear-gradient( rgba(8,18,13,.45), rgba(4,8,6,.75) ), url("../images/footer/footer-bg.webp"), radial-gradient(circle at 20% 30%, rgba(255,255,255,.02) 0, transparent 2px), radial-gradient(circle at 70% 60%, rgba(255,255,255,.015) 0, transparent 2px);
}


/*==============================================================
LUXURY VIGNETTE
==============================================================*/

.buf-footer::after {
    box-shadow: inset 0 0 220px rgba(0,0,0,.55);
}


/*==============================================================
PANEL SHADOW
==============================================================*/

.buf-panel {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 40px 90px rgba(0,0,0,.42), 0 0 80px rgba(216,177,91,.05);
}


    /*==============================================================
PANEL HOVER
==============================================================*/

    .buf-panel:hover {
        transform: translateY(-5px);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 60px 110px rgba(0,0,0,.45), 0 0 90px rgba(216,177,91,.08);
    }


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

.buf-logo {
    transition: .45s;
    filter: drop-shadow(0 0 20px rgba(216,177,91,.15));
}

.buf-brand:hover .buf-logo {
    transform: scale(1.05);
    filter: drop-shadow(0 0 40px rgba(216,177,91,.35));
}


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

.buf-brand h3 {
    background: linear-gradient( 90deg, #b98d3f, #f7e1a3, #d8b15b, #b98d3f );
    background-size: 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: bufGoldText 8s linear infinite;
}


@keyframes bufGoldText {

    0% {
        background-position: 0%;
    }

    100% {
        background-position: 300%;
    }
}


/*==============================================================
SOCIAL HOVER GLOW
==============================================================*/

.buf-social a {
    position: relative;
}

    .buf-social a::after {
        content: "";
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(216,177,91,.35), transparent 70%);
        opacity: 0;
        transition: .35s;
    }

    .buf-social a:hover::after {
        opacity: 1;
    }


/*==============================================================
NEWSLETTER PULSE
==============================================================*/

.buf-input-group {
    animation: bufInputPulse 6s ease-in-out infinite;
}

@keyframes bufInputPulse {

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

    50% {
        transform: scale(1.01);
    }
}


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

.buf-bottom {
    position: relative;
}

    .buf-bottom::after {
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -25px;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(216,177,91,.16), transparent 70%);
    }


/*==============================================================
FLOATING DUST
==============================================================*/

.buf-footer {
    animation: bufAmbient 18s ease-in-out infinite;
}

@keyframes bufAmbient {

    0%,100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.03);
    }
}


/*==============================================================
PREMIUM SCROLLBAR
==============================================================*/

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #07110D;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient( 180deg, #86682E, #D8B15B, #86682E);
    border-radius: 30px;
    border: 2px solid #07110D;
}

    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient( 180deg, #D8B15B, #FFE7A5, #D8B15B);
    }


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

::selection {
    background: #D8B15B;
    color: #07110D;
}


/*==============================================================
PERFORMANCE
==============================================================*/

.buf-footer * {
    transform-style: preserve-3d;
    backface-visibility: hidden;



}


/*==============================================================
    OXIAURA LUXURY CONTACT
    PART 2A
    Background • Layout • Container
==============================================================*/


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

.lct-contact {
    position: relative;
    overflow: hidden;
    padding: 160px 0;
    background: url("../images/bucontact-bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    isolation: isolate;
}



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

    .lct-contact::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( rgba(8,18,13,.42), rgba(3,7,5,.62) ), url("../images/contact/contact-bg.webp");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        opacity: .96;
        z-index: -5;
    }



    /*==============================================================
AMBIENT GREEN LIGHT
==============================================================*/

    .lct-contact::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        width: 1500px;
        height: 1500px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(52,126,82,.18), rgba(28,78,52,.08), transparent 72%);
        filter: blur(70px);
        z-index: -4;
    }



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

.lct-container {
    position: relative;
    width: 92%;
    max-width: 1650px;
    margin: auto;
    z-index: 20;
}



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

.lct-grid {
    display: grid;
    grid-template-columns: 470px 1fr;
    gap: 55px;
    align-items: stretch;
}



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

.lct-card {
    position: relative;
}



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

.lct-form-card {
    position: relative;
}



/*==============================================================
GLOWS
==============================================================*/

.lct-glow {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    filter: blur(110px);
    pointer-events: none;
    z-index: -2;
}



.lct-glow-left {
    top: -140px;
    left: -180px;
    background: radial-gradient(circle, rgba(216,177,91,.18), transparent 72%);
}



.lct-glow-right {
    bottom: -220px;
    right: -200px;
    background: radial-gradient(circle, rgba(42,118,76,.30), transparent 72%);
}



/*==============================================================
LIGHT RAY
==============================================================*/

.lct-light {
    position: absolute;
    top: -140px;
    left: -120px;
    width: 900px;
    height: 650px;
    pointer-events: none;
    background: radial-gradient(circle, rgba(255,233,175,.18), transparent 68%);
    transform: rotate(-18deg);
    filter: blur(35px);
    z-index: -2;
}



/*==============================================================
LEAVES
==============================================================*/

.lct-leaf {
    position: absolute;
    pointer-events: none;
    user-select: none;
    opacity: .92;
    z-index: -1;
}



.lct-leaf-left {
    width: 360px;
    left: -70px;
    top: 40px;
}



.lct-leaf-right {
    width: 360px;
    right: -60px;
    top: 0;
}



/*==============================================================
PARTICLES
==============================================================*/

.lct-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(216,177,91,.9) 1px, transparent 2px);
    background-size: 140px 140px;
    opacity: .28;
}



/*==============================================================
GLASS PANEL
==============================================================*/

.lct-card,
.lct-form-card {
    border-radius: 36px;
    background: linear-gradient( 180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    backdrop-filter: blur(26px);
    -webkit-backdrop-filter: blur(26px);
    border: 1px solid rgba(216,177,91,.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 80px rgba(0,0,0,.30);
}



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

.lct-card {
    padding: 55px;
}



.lct-form-card {
    padding: 55px;
}



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

    .lct-card:hover,
    .lct-form-card:hover {
        transform: translateY(-8px);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 40px 90px rgba(0,0,0,.38), 0 0 60px rgba(216,177,91,.08);
    }



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

@media(max-width:1200px) {

    .lct-grid {
        grid-template-columns: 1fr;
    }
}



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

@media(max-width:768px) {

    .lct-contact {
        padding: 110px 0;
    }

    .lct-card,
    .lct-form-card {
        padding: 35px;
        border-radius: 28px;
    }

    .lct-leaf {
        display: none;
    }
}


/*==============================================================
    OXIAURA LUXURY CONTACT
    PART 2A.2
    Header • Brand • Typography
==============================================================*/


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

.lct-header {
    max-width: 900px;
    margin: 0 auto 90px;
    text-align: center;
    position: relative;
    z-index: 5;
}


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

.lct-small-title {
    display: inline-block;
    color: #D8B15B;
    font-family: "Poppins",sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 6px;
    text-transform: uppercase;
    margin-bottom: 24px;
}



/*==============================================================
DECORATIVE DIVIDER
==============================================================*/

.lct-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 32px;
}

    .lct-divider span {
        width: 110px;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(216,177,91,.85), transparent);
    }

    .lct-divider i {
        color: #D8B15B;
        font-size: 22px;
    }



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

.lct-header h2 {
    margin: 0;
    font-family: "Cormorant Garamond",serif;
    font-size: 82px;
    font-weight: 600;
    line-height: 1.05;
    color: #F5F2E9;
    text-shadow: 0 8px 30px rgba(0,0,0,.35);
}



    /*==============================================================
LOVE TEXT
==============================================================*/

    .lct-header h2 span {
        color: #D8B15B;
        font-style: italic;
    }



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

.lct-header p {
    max-width: 760px;
    margin: 35px auto 0;
    color: #D3D8D2;
    font-family: "Poppins",sans-serif;
    font-size: 18px;
    line-height: 2;
    font-weight: 300;
}



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

.lct-brand {
    text-align: center;
    margin-bottom: 45px;
}



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

    .lct-brand img {
        width: 110px;
        margin-bottom: 22px;
        filter: drop-shadow(0 0 20px rgba(216,177,91,.30));
    }



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

    .lct-brand h3 {
        margin: 0;
        font-family: "Cormorant Garamond",serif;
        font-size: 56px;
        font-weight: 600;
        letter-spacing: 7px;
        color: #D8B15B;
    }



    /*==============================================================
TAGLINE
==============================================================*/

    .lct-brand span {
        display: block;
        margin-top: 12px;
        color: #D7D8D4;
        font-family: "Poppins",sans-serif;
        font-size: 13px;
        letter-spacing: 3px;
        text-transform: uppercase;
    }



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

    .lct-brand::after {
        content: "";
        display: block;
        width: 180px;
        height: 2px;
        margin: 28px auto 0;
        border-radius: 20px;
        background: linear-gradient( 90deg, transparent, #D8B15B, transparent);
    }



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

@media(max-width:992px) {

    .lct-header h2 {
        font-size: 60px;
    }

    .lct-brand h3 {
        font-size: 44px;
    }
}



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

@media(max-width:768px) {

    .lct-header {
        margin-bottom: 60px;
    }

    .lct-small-title {
        font-size: 11px;
        letter-spacing: 4px;
    }

    .lct-divider span {
        width: 60px;
    }

    .lct-header h2 {
        font-size: 42px;
        line-height: 1.15;
    }

    .lct-header p {
        font-size: 16px;
        line-height: 1.8;
    }

    .lct-brand img {
        width: 80px;
    }

    .lct-brand h3 {
        font-size: 34px;
        letter-spacing: 3px;
    }
}

/*==============================================================
    OXIAURA LUXURY CONTACT
    PART 2B.1
    Contact Information Cards
==============================================================*/


/*==============================================================
INFO BOX
==============================================================*/

.lct-info-box {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 22px;
    padding: 24px;
    margin-bottom: 22px;
    border-radius: 24px;
    background: linear-gradient( 180deg, rgba(255,255,255,.05), rgba(255,255,255,.02) );
    border: 1px solid rgba(216,177,91,.15);
    transition: transform .4s ease, border-color .4s ease, box-shadow .4s ease;
}



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

    .lct-info-box:hover {
        transform: translateY(-6px);
        border-color: rgba(216,177,91,.45);
        box-shadow: 0 20px 45px rgba(0,0,0,.28), 0 0 35px rgba(216,177,91,.10);
    }



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

.lct-icon {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: linear-gradient( 135deg, rgba(216,177,91,.18), rgba(216,177,91,.06) );
    border: 1px solid rgba(216,177,91,.25);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 30px rgba(0,0,0,.18);
    transition: .4s;
}



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

    .lct-icon i {
        color: #D8B15B;
        font-size: 24px;
    }



.lct-info-box:hover .lct-icon {
    transform: rotate(-8deg) scale(1.08);
    background: #D8B15B;
}



    .lct-info-box:hover .lct-icon i {
        color: #0D2118;
    }



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

.lct-info-box h4 {
    margin: 0 0 8px;
    font-family: "Cormorant Garamond",serif;
    font-size: 28px;
    font-weight: 600;
    color: #F7F2E8;
}



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

.lct-info-box p {
    margin: 0;
    color: #C9D2CB;
    font-family: "Poppins",sans-serif;
    font-size: 15px;
    line-height: 1.9;
}



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

.lct-social-title {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 45px 0 25px;
}



    .lct-social-title span {
        flex: 1;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(216,177,91,.65), transparent );
    }



    .lct-social-title h5 {
        margin: 0;
        color: #D8B15B;
        font-size: 13px;
        font-family: "Poppins",sans-serif;
        letter-spacing: 4px;
        font-weight: 500;
    }



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

.lct-social {
    display: flex;
    gap: 18px;
    justify-content: center;
    flex-wrap: wrap;
}



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

    .lct-social a {
        width: 58px;
        height: 58px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        border-radius: 50%;
        color: #D8B15B;
        font-size: 20px;
        background: linear-gradient( 180deg, rgba(255,255,255,.08), rgba(255,255,255,.03) );
        border: 1px solid rgba(216,177,91,.20);
        transition: .4s;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 30px rgba(0,0,0,.18);
    }



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

        .lct-social a:hover {
            transform: translateY(-8px) rotate(8deg);
            background: #D8B15B;
            color: #0B1C15;
            box-shadow: 0 20px 40px rgba(216,177,91,.35);
        }



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

@media(max-width:992px) {

    .lct-info-box {
        padding: 22px;
    }
}



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

@media(max-width:768px) {

    .lct-info-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .lct-icon {
        margin-bottom: 10px;
    }

    .lct-social {
        justify-content: center;
    }
}

/*==============================================================
    OXIAURA LUXURY CONTACT
    PART 2B.2
    Contact Form • Inputs • Button
==============================================================*/


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

.lct-form-card form {
    display: flex;
    flex-direction: column;
    gap: 30px;
}


/*==============================================================
ROWS
==============================================================*/

.lct-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}


/*==============================================================
FIELD
==============================================================*/

.lct-field {
    display: flex;
    flex-direction: column;
}


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

    .lct-field label {
        margin-bottom: 12px;
        color: #D8B15B;
        font-family: "Poppins",sans-serif;
        font-size: 12px;
        letter-spacing: 3px;
        text-transform: uppercase;
        font-weight: 500;
    }


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

.lct-input {
    position: relative;
    display: flex;
    align-items: center;
}


    /*==============================================================
ICONS
==============================================================*/

    .lct-input i {
        position: absolute;
        left: 22px;
        color: #D8B15B;
        font-size: 17px;
        pointer-events: none;
        transition: .35s;
    }


    /*==============================================================
INPUTS
==============================================================*/

    .lct-input input,
    .lct-input textarea {
        width: 100%;
        border: none;
        outline: none;
        border-radius: 20px;
        background: linear-gradient( 180deg, rgba(255,255,255,.08), rgba(255,255,255,.03) );
        border: 1px solid rgba(216,177,91,.18);
        color: #F4F0E8;
        font-size: 15px;
        font-family: "Poppins",sans-serif;
        transition: .35s;
        box-sizing: border-box;
    }


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

    .lct-input input {
        height: 62px;
        padding: 0 22px 0 58px;
    }


/*==============================================================
TEXTAREA
==============================================================*/

.lct-textarea {
    align-items: flex-start;
}

    .lct-textarea i {
        top: 22px;
    }

    .lct-textarea textarea {
        min-height: 180px;
        resize: vertical;
        padding: 20px 22px 20px 58px;
        line-height: 1.9;
    }


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

.lct-input input::placeholder,
.lct-input textarea::placeholder {
    color: #AEB8B1;
}


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

.lct-input input:focus,
.lct-input textarea:focus {
    border-color: #D8B15B;
    box-shadow: 0 0 0 4px rgba(216,177,91,.10), 0 0 28px rgba(216,177,91,.12);
}


.lct-input:focus-within i {
    color: #FFE3A1;
    transform: scale(1.12);
}


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

.lct-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 260px;
    height: 64px;
    border: none;
    border-radius: 60px;
    cursor: pointer;
    background: linear-gradient( 135deg, #E8C979, #D8B15B );
    color: #0B1C15;
    font-family: "Poppins",sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    transition: .4s;
    box-shadow: 0 18px 35px rgba(216,177,91,.28);
}


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

    .lct-btn::before {
        content: "";
        position: absolute;
        top: 0;
        left: -120%;
        width: 45%;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.45), transparent );
        transform: skewX(-25deg);
    }


    .lct-btn:hover::before {
        animation: lctButtonShine .9s ease;
    }


@keyframes lctButtonShine {

    0% {
        left: -120%;
    }

    100% {
        left: 180%;
    }
}


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

.lct-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 50px rgba(216,177,91,.40);
}


.lct-btn i {
    transition: .35s;
}


.lct-btn:hover i {
    transform: translateX(6px);
}


/*==============================================================
PRIVACY
==============================================================*/

.lct-privacy {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    color: #C8D0CA;
    font-size: 14px;
    line-height: 1.8;
    font-family: "Poppins",sans-serif;
}


    .lct-privacy i {
        color: #D8B15B;
        font-size: 18px;
    }


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

@media(max-width:992px) {

    .lct-row {
        grid-template-columns: 1fr;
    }
}


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

@media(max-width:768px) {

    .lct-btn {
        width: 100%;
    }

    .lct-input input {
        height: 58px;
    }

    .lct-textarea textarea {
        min-height: 150px;
    }

    .lct-privacy {
        align-items: flex-start;
    }
}

/*==============================================================
    OXIAURA LUXURY CONTACT
    PART 2C
    Luxury Animations • Responsive • Final Polish
==============================================================*/


/*==============================================================
SMOOTH TRANSITIONS
==============================================================*/

.lct-contact *,
.lct-contact *::before,
.lct-contact *::after {
    transition: background-color .35s ease, color .35s ease, border-color .35s ease, transform .35s ease, opacity .35s ease, box-shadow .35s ease;
}



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

.lct-header {
    animation: lctFadeUp .8s ease both;
}

.lct-card {
    animation: lctFadeUp 1s ease both;
    animation-delay: .2s;
}

.lct-form-card {
    animation: lctFadeUp 1.2s ease both;
    animation-delay: .4s;
}



@keyframes lctFadeUp {

    from {
        opacity: 0;
        transform: translateY(45px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/*==============================================================
FLOATING GLOW
==============================================================*/

.lct-glow {
    animation: lctGlow 10s ease-in-out infinite;
}

.lct-glow-right {
    animation-delay: 5s;
}



@keyframes lctGlow {

    0%,100% {
        transform: scale(1);
        opacity: .45;
    }

    50% {
        transform: scale(1.18);
        opacity: .85;
    }
}



/*==============================================================
LIGHT MOVEMENT
==============================================================*/

.lct-light {
    animation: lctLightMove 14s ease-in-out infinite;
}



@keyframes lctLightMove {

    0%,100% {
        transform: rotate(-18deg) translateX(0);
    }

    50% {
        transform: rotate(-15deg) translateX(60px);
    }
}



/*==============================================================
FLOATING LEAVES
==============================================================*/

.lct-leaf {
    animation: lctLeafFloat 8s ease-in-out infinite;
    transform-origin: center;
}

.lct-leaf-right {
    animation-delay: 4s;
}



@keyframes lctLeafFloat {

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

    50% {
        transform: translateY(-14px) rotate(4deg);
    }
}



/*==============================================================
GOLD PARTICLES
==============================================================*/

.lct-particles {
    animation: lctParticles 35s linear infinite;
}



@keyframes lctParticles {

    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 -500px;
    }
}



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

.lct-card,
.lct-form-card {
    overflow: hidden;
}



    .lct-card::before,
    .lct-form-card::before {
        content: "";
        position: absolute;
        top: -40%;
        left: -70%;
        width: 40%;
        height: 200%;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.10), transparent );
        transform: rotate(25deg);
        pointer-events: none;
    }



    .lct-card:hover::before,
    .lct-form-card:hover::before {
        animation: lctGlassShine 1.4s ease;
    }



@keyframes lctGlassShine {

    from {
        left: -80%;
    }

    to {
        left: 170%;
    }
}



/*==============================================================
SOCIAL ICON GLOW
==============================================================*/

.lct-social a {
    position: relative;
}



    .lct-social a::after {
        content: "";
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(216,177,91,.35), transparent 70% );
        opacity: 0;
    }



    .lct-social a:hover::after {
        opacity: 1;
    }



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

.lct-btn {
    animation: lctButtonPulse 6s ease-in-out infinite;
}



@keyframes lctButtonPulse {

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

    50% {
        transform: scale(1.02);
    }
}



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

.lct-input:hover input,
.lct-input:hover textarea {
    border-color: rgba(216,177,91,.40);
}



/*==============================================================
CARD BORDER GLOW
==============================================================*/

.lct-card:hover,
.lct-form-card:hover {
    border-color: rgba(216,177,91,.40);
}



/*==============================================================
HEADER TITLE SHIMMER
==============================================================*/

.lct-header h2 {
    background: linear-gradient( 90deg, #ffffff, #fff4d0, #D8B15B, #ffffff );
    background-size: 250%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: lctGoldText 10s linear infinite;
}



@keyframes lctGoldText {

    from {
        background-position: 0%;
    }

    to {
        background-position: 250%;
    }
}



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

@media(max-width:1200px) {

    .lct-header h2 {
        font-size: 64px;
    }
}



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

@media(max-width:768px) {

    .lct-contact {
        padding: 110px 0;
    }

    .lct-header {
        margin-bottom: 60px;
    }

        .lct-header h2 {
            font-size: 42px;
            line-height: 1.15;
        }

        .lct-header p {
            font-size: 16px;
            line-height: 1.8;
        }

    .lct-card,
    .lct-form-card {
        border-radius: 28px;
    }

    .lct-light {
        display: none;
    }

    .lct-leaf {
        display: none;
    }
}



/*==============================================================
SMALL DEVICES
==============================================================*/

@media(max-width:480px) {

    .lct-contact {
        padding: 90px 0;
    }

    .lct-header h2 {
        font-size: 34px;
    }

    .lct-small-title {
        letter-spacing: 3px;
        font-size: 11px;
    }
}



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

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

    .lct-contact * {
        animation: none !important;
        transition: none !important;
    }
}



/*==============================================================
GPU ACCELERATION
==============================================================*/

.lct-card,
.lct-form-card,
.lct-glow,
.lct-light,
.lct-leaf {
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);



}


/*==============================================================

    OXIAURA GLOBAL PLUS
    GLOBAL CSS FOUNDATION
    Part 2A

==============================================================*/


/*==============================================================
    CSS VARIABLES
==============================================================*/

:root {
    /* Brand */

    --glo-primary: #0E6A4C;
    --glo-primary-dark: #0A3E30;
    --glo-primary-light: #2E8C6C;
    /* Gold */

    --glo-gold: #C89B3C;
    --glo-gold-dark: #A9771F;
    --glo-gold-light: #E5C87B;
    /* Accent */

    --glo-maroon: #5A1730;
    --glo-burgundy: #7C1F3A;
    /* Neutrals */

    --glo-white: #FFFFFF;
    --glo-offwhite: #F8F8F5;
    --glo-light: #F4F2EC;
    --glo-border: #E6DFD4;
    --glo-dark: #222222;
    --glo-text: #555555;
    /* Shadows */

    --glo-shadow-sm: 0 8px 18px rgba(0,0,0,.06);
    --glo-shadow-md: 0 15px 35px rgba(0,0,0,.10);
    --glo-shadow-lg: 0 30px 80px rgba(0,0,0,.18);
    /* Radius */

    --glo-radius-sm: 12px;
    --glo-radius-md: 22px;
    --glo-radius-lg: 36px;
    --glo-radius-xl: 48px;
    /* Transition */

    --glo-transition: .35s ease;
}



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

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



html {
    scroll-behavior: smooth;
}



body {
    background: var(--glo-offwhite);
    color: var(--glo-dark);
    font-family: "Poppins",sans-serif;
    font-size: 16px;
    line-height: 1.8;
    overflow-x: hidden;
}



/*==============================================================
    TYPOGRAPHY
==============================================================*/

h1,
h2,
h3,
h4,
h5 {
    color: var(--glo-dark);
    font-family: "Cormorant Garamond",serif;
    font-weight: 700;
    line-height: 1.15;
}



h1 {
    font-size: 72px;
}



h2 {
    font-size: 54px;
}



h3 {
    font-size: 34px;
}



h4 {
    font-size: 26px;
}



p {
    color: var(--glo-text);
}



small {
    display: block;
}



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

a {
    color: inherit;
    text-decoration: none;
    transition: var(--glo-transition);
}



ul {
    list-style: none;
}



/*==============================================================
    IMAGES
==============================================================*/

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



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

section {
    position: relative;
    width: 100%;
}



.glo-section {
    padding: 120px 0;
}



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

.glo-container {
    width: 92%;
    max-width: 1700px;
    margin: auto;
}



.glo-container-sm {
    width: 88%;
    max-width: 1450px;
    margin: auto;
}



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

.glo-grid {
    display: grid;
}



.glo-flex {
    display: flex;
}



/*==============================================================
    SPACING
==============================================================*/

.glo-mt-40 {
    margin-top: 40px;
}



.glo-mt-60 {
    margin-top: 60px;
}



.glo-mt-80 {
    margin-top: 80px;
}



.glo-mb-40 {
    margin-bottom: 40px;
}



.glo-mb-60 {
    margin-bottom: 60px;
}



.glo-mb-80 {
    margin-bottom: 80px;
}



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

.glo-center {
    text-align: center;
}



.glo-left {
    text-align: left;
}



.glo-right {
    text-align: right;
}



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

.glo-light {
    background: var(--glo-offwhite);
}



.glo-white {
    background: #fff;
}



.glo-dark {
    background: linear-gradient( 180deg, #0A3E30, #07281F );
}



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

.glo-subtitle {
    display: inline-block;
    margin-bottom: 16px;
    color: var(--glo-gold);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
}



.glo-title {
    margin-bottom: 20px;
}



.glo-description {
    max-width: 720px;
    color: var(--glo-text);
}



/*==============================================================
    DIVIDER
==============================================================*/

.glo-divider {
    width: 100px;
    height: 3px;
    margin: 30px auto;
    border-radius: 50px;
    background: linear-gradient( 90deg, transparent, var(--glo-gold), transparent );
}



/*==============================================================
    GLASS EFFECT
==============================================================*/

.glo-glass {
    backdrop-filter: blur(20px);
    background: rgba(255,255,255,.45);
    border: 1px solid rgba(255,255,255,.35);
}



/*==============================================================
    SHADOW
==============================================================*/

.glo-shadow {
    box-shadow: var(--glo-shadow-md);
}



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

.glo-hover {
    transition: var(--glo-transition);
}



    .glo-hover:hover {
        transform: translateY(-8px);
    }



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

.glo-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-width: 200px;
    height: 58px;
    padding: 0 34px;
    border-radius: 60px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .4px;
    transition: var(--glo-transition);
    cursor: pointer;
}


/*==============================================================

    OXIAURA GLOBAL PLUS
    PART 2A.1

    Premium Components
    Buttons
    Cards
    Decorations

==============================================================*/


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

.glo-btn-primary {
    color: var(--glo-white);
    border: none;
    background: linear-gradient( 135deg, var(--glo-primary), var(--glo-primary-dark) );
    box-shadow: 0 18px 40px rgba(14,106,76,.28);
}

    .glo-btn-primary:hover {
        transform: translateY(-5px);
        box-shadow: 0 24px 50px rgba(14,106,76,.35);
    }


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

.glo-btn-gold {
    color: #2A2112;
    border: none;
    background: linear-gradient( 135deg, #F5D48C, var(--glo-gold) );
    box-shadow: 0 18px 45px rgba(200,155,60,.35);
}

    .glo-btn-gold:hover {
        transform: translateY(-5px);
    }


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

.glo-btn-maroon {
    color: #ffffff;
    border: none;
    background: linear-gradient( 135deg, var(--glo-maroon), var(--glo-burgundy) );
    box-shadow: 0 18px 45px rgba(90,23,48,.35);
}

    .glo-btn-maroon:hover {
        transform: translateY(-5px);
    }


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

.glo-btn-outline {
    color: var(--glo-primary);
    background: transparent;
    border: 2px solid var(--glo-primary);
}

    .glo-btn-outline:hover {
        color: #fff;
        background: var(--glo-primary);
    }


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

.glo-btn-glass {
    color: #fff;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(18px);
}

    .glo-btn-glass:hover {
        border-color: var(--glo-gold);
        background: rgba(255,255,255,.14);
    }


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

.glo-card {
    position: relative;
    overflow: hidden;
    border-radius: 34px;
    padding: 45px;
    background: rgba(255,255,255,.68);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.55);
    box-shadow: var(--glo-shadow-md);
    transition: var(--glo-transition);
}

    .glo-card:hover {
        transform: translateY(-10px);
        box-shadow: var(--glo-shadow-lg);
    }


/*==============================================================
    GOLD BORDER CARD
==============================================================*/

.glo-card-gold {
    border: 1px solid rgba(200,155,60,.25);
}

    .glo-card-gold::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient( 90deg, transparent, var(--glo-gold), transparent );
    }


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

.glo-card-dark {
    background: linear-gradient( 180deg, #123E31, #08261D );
    color: #fff;
}

    .glo-card-dark p {
        color: rgba(255,255,255,.75);
    }


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

.glo-bg-pattern {
    position: relative;
    overflow: hidden;
}

    .glo-bg-pattern::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: .05;
        background-image: linear-gradient( rgba(200,155,60,.25) 1px, transparent 1px ), linear-gradient( 90deg, rgba(200,155,60,.25) 1px, transparent 1px );
        background-size: 60px 60px;
        pointer-events: none;
    }


/*==============================================================
    GOLD LINE
==============================================================*/

.glo-line {
    width: 140px;
    height: 3px;
    border-radius: 20px;
    background: linear-gradient( 90deg, transparent, var(--glo-gold), transparent );
}


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

.glo-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 22px;
    border-radius: 40px;
    background: rgba(200,155,60,.10);
    border: 1px solid rgba(200,155,60,.25);
    color: var(--glo-gold-dark);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

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


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

.glo-icon-circle {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--glo-gold);
    font-size: 28px;
    background: linear-gradient( 180deg, rgba(255,255,255,.9), rgba(255,255,255,.7) );
    box-shadow: 0 15px 40px rgba(0,0,0,.10);
}


/*==============================================================
    GOLD DOTS
==============================================================*/

.glo-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--glo-gold);
    box-shadow: 0 0 16px rgba(200,155,60,.65);
}


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

.glo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( rgba(255,255,255,.15), rgba(255,255,255,0) );
    pointer-events: none;
}


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

.glo-image {
    overflow: hidden;
    border-radius: 32px;
    box-shadow: var(--glo-shadow-lg);
}

    .glo-image img {
        width: 100%;
        transition: .7s;
    }

    .glo-image:hover img {
        transform: scale(1.08);
    }


/*==============================================================
    LUXURY DIVIDER
==============================================================*/

.glo-divider-luxury {
    width: 180px;
    height: 4px;
    margin: 40px auto;
    border-radius: 50px;
    background: linear-gradient( 90deg, transparent, var(--glo-gold), transparent );
    box-shadow: 0 0 18px rgba(200,155,60,.35);
}

/*==============================================================

    OXIAURA GLOBAL PLUS
    PART 2A.2

    Premium Animations
    Decorative Effects
    Reusable Utilities

==============================================================*/


/*==============================================================
    SECTION SHAPES
==============================================================*/

.glo-shape {
    position: absolute;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}

.glo-shape-circle {
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(200,155,60,.12), transparent 72% );
    filter: blur(45px);
}

.glo-shape-green {
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(14,106,76,.12), transparent 75% );
    filter: blur(60px);
}



/*==============================================================
    GOLD PARTICLES
==============================================================*/

.glo-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

    .glo-particles span {
        position: absolute;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--glo-gold);
        box-shadow: 0 0 14px rgba(200,155,60,.7);
        animation: gloFloatParticle 10s linear infinite;
    }



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

.glo-card::after {
    content: "";
    position: absolute;
    top: -140%;
    left: -45%;
    width: 80px;
    height: 260%;
    background: linear-gradient( rgba(255,255,255,0), rgba(255,255,255,.45), rgba(255,255,255,0) );
    transform: rotate(25deg);
    transition: .9s;
}

.glo-card:hover::after {
    left: 130%;
}



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

.glo-btn {
    position: relative;
    overflow: hidden;
}

    .glo-btn::before {
        content: "";
        position: absolute;
        top: 0;
        left: -120%;
        width: 60%;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.35), transparent );
        transform: skewX(-25deg);
    }

    .glo-btn:hover::before {
        animation: gloButtonSweep .8s linear;
    }



/*==============================================================
    GOLD GLOW
==============================================================*/

.glo-glow {
    box-shadow: 0 0 18px rgba(200,155,60,.25), 0 0 45px rgba(200,155,60,.18);
}



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

.glo-image {
    position: relative;
}

    .glo-image::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 180deg, rgba(0,0,0,0), rgba(0,0,0,.18) );
        opacity: 0;
        transition: .45s;
    }

    .glo-image:hover::before {
        opacity: 1;
    }



/*==============================================================
    CARD BORDER ANIMATION
==============================================================*/

.glo-card {
    isolation: isolate;
}

    .glo-card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient( 135deg, rgba(200,155,60,.55), transparent, rgba(14,106,76,.35) );
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0;
        transition: .45s;
    }

    .glo-card:hover::before {
        opacity: 1;
    }



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

.glo-link {
    position: relative;
    display: inline-block;
}

    .glo-link::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -6px;
        width: 0;
        height: 2px;
        background: var(--glo-gold);
        transform: translateX(-50%);
        transition: .35s;
    }

    .glo-link:hover::after {
        width: 100%;
    }



/*==============================================================
    FLOAT
==============================================================*/

.glo-float {
    animation: gloFloat 6s ease-in-out infinite;
}



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

.glo-pulse {
    animation: gloPulse 3.5s infinite;
}



/*==============================================================
    ROTATE
==============================================================*/

.glo-rotate {
    animation: gloRotate 28s linear infinite;
}



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

.glo-fade-up {
    opacity: 0;
    transform: translateY(45px);
    transition: opacity .9s ease, transform .9s ease;
}

    .glo-fade-up.glo-show {
        opacity: 1;
        transform: none;
    }



/*==============================================================
    FADE LEFT
==============================================================*/

.glo-fade-left {
    opacity: 0;
    transform: translateX(-45px);
    transition: opacity .9s ease, transform .9s ease;
}

    .glo-fade-left.glo-show {
        opacity: 1;
        transform: none;
    }



/*==============================================================
    FADE RIGHT
==============================================================*/

.glo-fade-right {
    opacity: 0;
    transform: translateX(45px);
    transition: opacity .9s ease, transform .9s ease;
}

    .glo-fade-right.glo-show {
        opacity: 1;
        transform: none;
    }



/*==============================================================
    KEYFRAMES
==============================================================*/

@keyframes gloFloat {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-16px);
    }

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



@keyframes gloPulse {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.04);
    }

    100% {
        transform: scale(1);
    }
}



@keyframes gloRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}



@keyframes gloButtonSweep {

    from {
        left: -120%;
    }

    to {
        left: 150%;
    }
}



@keyframes gloFloatParticle {

    0% {
        transform: translateY(20px) scale(.4);
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    80% {
        opacity: .9;
    }

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



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

::selection {
    color: #fff;
    background: var(--glo-gold);
}



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

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #ECE8DF;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient( var(--glo-primary), var(--glo-gold) );
    border-radius: 30px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient( var(--glo-primary-dark), var(--glo-gold-dark) );
    }



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

@media (max-width:1200px) {

    h1 {
        font-size: 58px;
    }

    h2 {
        font-size: 46px;
    }

    .glo-section {
        padding: 100px 0;
    }
}

@media (max-width:768px) {

    h1 {
        font-size: 42px;
    }

    h2 {
        font-size: 34px;
    }

    .glo-section {
        padding: 80px 0;
    }

    .glo-btn {
        min-width: 180px;
    }
}

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

    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/*==============================================================

    OXIAURA GLOBAL PLUS
    PART 2B.1

    HEADER
    NAVIGATION
    LOGO
    MENU

==============================================================*/


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

.glo-header {
    position: fixed;
    top: 22px;
    left: 0;
    width: 100%;
    z-index: 9999;
    transition: top .45s ease, transform .45s ease;

}



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

.glo-navbar {
    height: 80px;
    padding: 0 40px;
    display: flex;
    align-items: center;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}



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

    .glo-navbar .glo-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 92%;
        max-width: 1700px;
        margin: auto;
        padding: 18px 34px;
        border-radius: 80px;
        background: rgba(2,6,12,.95);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        border: 1px solid rgba(212,175,55,.55);
        box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 0 20px rgba(212,175,55,.15), inset 0 1px 0 rgba(255,255,255,.08);
    }

    .glo-navbar.glo-scrolled {
        background: rgba(4,24,19,.96);
        border-color: rgba(200,155,60,.30);
        box-shadow: 0 25px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
    }

/*==============================================================
    STICKY STATE
==============================================================*/

.glo-header.glo-scrolled {
    top: 0;
}



    .glo-header.glo-scrolled

    .glo-navbar

    .glo-container {
        padding: 15px 34px;
        border-radius: 0 0 26px 26px;
        background: rgba(255,255,255,.95);
        border-color: rgba(200,155,60,.18);
        box-shadow: 0 18px 45px rgba(0,0,0,.12);
    }



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

.glo-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}



    .glo-logo img {
        height: 72px;
        width: auto;
        display: block;
    }



.glo-header.glo-scrolled

.glo-logo img {
    width: 175px;
}



.glo-logo:hover img {
    transform: scale(1.04);
}



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

.glo-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 42px;
    margin-left: auto;
    margin-right: auto;
}



    /*==============================================================
    MENU ITEM
==============================================================*/

    .glo-menu li {
        position: relative;
    }



    /*==============================================================
    MENU LINK
==============================================================*/

    .glo-menu a {
        position: relative;
        display: inline-flex;
        align-items: center;
        height: 48px;
        color: #ffffff;
        font-size: 15px;
        font-weight: 500;
        letter-spacing: .4px;
        transition: .35s ease;
    }



        /*==============================================================
    MENU HOVER
==============================================================*/

        .glo-menu a:hover {
            color: var(--glo-gold);
        }



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

        .glo-menu a::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 6px;
            width: 0;
            height: 2px;
            border-radius: 20px;
            background: linear-gradient( 90deg, transparent, var(--glo-gold), transparent );
            transform: translateX(-50%);
            transition: .35s ease;
        }



        .glo-menu a:hover::after,
        .glo-menu a.glo-active::after {
            width: 100%;
        }



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

        .glo-menu a.glo-active {
            color: var(--glo-gold);
        }



/*==============================================================
    STICKY COLORS
==============================================================*/

.glo-header.glo-scrolled

.glo-menu a {
    color: var(--glo-dark);
}



    .glo-header.glo-scrolled

    .glo-menu a:hover {
        color: var(--glo-gold);
    }



    .glo-header.glo-scrolled

    .glo-menu a.glo-active {
        color: var(--glo-gold);
    }



/*==============================================================
    NAVIGATION GLOW
==============================================================*/

.glo-navbar::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 85%;
    height: 120%;
    border-radius: 80px;
    background: radial-gradient( circle, rgba(200,155,60,.08), transparent 72% );
    z-index: -1;
}



/*==============================================================
    HOVER LIGHT
==============================================================*/

.glo-menu li::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transform: translate(-50%,-50%);
    background: rgba(200,155,60,.35);
    filter: blur(18px);
    opacity: 0;
    transition: .35s;
}



.glo-menu li:hover::before {
    opacity: 1;
}



/*==============================================================
    MENU SPACING
==============================================================*/

.glo-menu li {
    padding: 0 2px;
}



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

@media (max-width:1200px) {

    .glo-menu {
        display: none;
    }
}

/*==============================================================

    OXIAURA GLOBAL PLUS
    PART 2B.2

    HEADER ACTIONS
    MOBILE MENU
    RESPONSIVE

==============================================================*/


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

.glo-header-buttons {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}



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

.glo-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    height: 50px;
    padding: 0 28px;
    border-radius: 50px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(20px);
    transition: .35s ease;
}

    .glo-login:hover {
        color: var(--glo-gold);
        border-color: var(--glo-gold);
        background: rgba(255,255,255,.14);
        transform: translateY(-3px);
    }



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

.glo-register {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 170px;
    height: 52px;
    padding: 0 34px;
    border-radius: 50px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .5px;
    background: linear-gradient( 135deg, var(--glo-maroon), var(--glo-burgundy) );
    box-shadow: 0 18px 40px rgba(90,23,48,.30);
    transition: .35s ease;
}

    .glo-register:hover {
        transform: translateY(-4px);
        box-shadow: 0 26px 55px rgba(90,23,48,.40);
    }



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

.glo-toggle {
    width: 56px;
    height: 56px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(20px);
    transition: .35s;
}

    .glo-toggle:hover {
        border-color: var(--glo-gold);
    }



    /*==============================================================
    HAMBURGER
==============================================================*/

    .glo-toggle span {
        position: relative;
        display: block;
        width: 24px;
        height: 2px;
        background: #ffffff;
        transition: .35s;
    }

        .glo-toggle span::before,
        .glo-toggle span::after {
            content: "";
            position: absolute;
            left: 0;
            width: 24px;
            height: 2px;
            background: #ffffff;
            transition: .35s;
        }

        .glo-toggle span::before {
            top: -8px;
        }

        .glo-toggle span::after {
            top: 8px;
        }



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

    .glo-toggle.glo-active span {
        background: transparent;
    }

        .glo-toggle.glo-active span::before {
            top: 0;
            transform: rotate(45deg);
        }

        .glo-toggle.glo-active span::after {
            top: 0;
            transform: rotate(-45deg);
        }



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

.glo-mobile {
    position: fixed;
    top: 0;
    right: -100%;
    width: 340px;
    height: 100vh;
    padding: 120px 45px;
    background: linear-gradient( 180deg, #0A3E30, #08251D );
    transition: .45s ease;
    z-index: 9998;
    overflow-y: auto;
    box-shadow: -15px 0 45px rgba(0,0,0,.18);
}

    .glo-mobile.glo-open {
        right: 0;
    }



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

    .glo-mobile ul {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .glo-mobile a {
        display: block;
        padding: 16px 0;
        color: #ffffff;
        font-size: 18px;
        font-weight: 500;
        border-bottom: 1px solid rgba(255,255,255,.08);
        transition: .35s;
    }

        .glo-mobile a:hover {
            color: var(--glo-gold);
            padding-left: 12px;
        }



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

.glo-mobile-buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 50px;
}

    .glo-mobile-buttons a {
        justify-content: center;
    }



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

.glo-mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    opacity: 0;
    visibility: hidden;
    transition: .35s;
    z-index: 9997;
}

    .glo-mobile-overlay.glo-show {
        opacity: 1;
        visibility: visible;
    }



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

@media(max-width:1200px) {

    .glo-header-buttons {
        display: none;
    }

    .glo-toggle {
        display: flex;
    }
}



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

@media(max-width:768px) {

    .glo-header {
        top: 14px;
    }

    .glo-navbar .glo-container {
        padding: 16px 20px;
        border-radius: 60px;
    }

    .glo-logo img {
        width: 155px;
    }

    .glo-mobile {
        width: 100%;
        padding: 110px 35px;
    }
}



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

@media(max-width:480px) {

    .glo-navbar .glo-container {
        width: 95%;
    }

    .glo-logo img {
        width: 140px;
    }

    .glo-toggle {
        width: 50px;
        height: 50px;
    }
}


/*==============================================================

    OXIAURA GLOBAL PLUS
    PART 2C.2

    HERO LAYOUT
    HERO BACKGROUND
    HERO GRID

==============================================================*/


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

.glo-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient( 135deg, #0A3E30 0%, #0B5641 35%, #0E6A4C 70%, #13593F 100% );
}



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

.glo-hero-background {
    position: absolute;
    inset: 0;
    overflow: hidden;
}



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

    .glo-hero-background::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( rgba(8,22,18,.45), rgba(5,15,12,.72) ), url("../images/glback.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        opacity: .92;
    }



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

.glo-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, rgba(6,18,14,.92) 0%, rgba(7,26,20,.70) 35%, rgba(9,34,26,.30) 70%, rgba(0,0,0,0) 100% );
}



/*==============================================================
    GOLD GRADIENT
==============================================================*/

.glo-hero-gradient {
    position: absolute;
    right: -250px;
    top: -180px;
    width: 850px;
    height: 850px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(200,155,60,.18), rgba(200,155,60,.05), transparent 72% );
    filter: blur(60px);
}



/*==============================================================
    WORLD MAP
==============================================================*/

.glo-hero-world-map {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 58%;
    height: 78%;
    background: url("../images/globalplus/hero/world-map-gold.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: .28;
}



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

.glo-hero-pattern {
    position: absolute;
    inset: 0;
    opacity: .05;
    background-image: linear-gradient( rgba(255,255,255,.12) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.12) 1px, transparent 1px );
    background-size: 70px 70px;
}



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

.glo-hero .glo-container {
    position: relative;
    z-index: 10;
    width: 92%;
    max-width: 1700px;
    margin: auto;
}



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

.glo-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 70px;
    min-height: 100vh;
    padding-top: 120px;
    padding-bottom: 80px;
}



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

.glo-hero-left {
    position: relative;
    z-index: 5;
    max-width: 760px;
}



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

.glo-hero-right {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 760px;
}



/*==============================================================
    PARTICLES
==============================================================*/

.glo-hero-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}



    .glo-hero-particles span {
        position: absolute;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--glo-gold);
        box-shadow: 0 0 14px rgba(200,155,60,.65);
    }



        .glo-hero-particles span:nth-child(1) {
            top: 18%;
            left: 12%;
        }



        .glo-hero-particles span:nth-child(2) {
            top: 28%;
            left: 70%;
        }



        .glo-hero-particles span:nth-child(3) {
            top: 72%;
            left: 18%;
        }



        .glo-hero-particles span:nth-child(4) {
            top: 62%;
            left: 82%;
        }



        .glo-hero-particles span:nth-child(5) {
            top: 45%;
            left: 48%;
        }



        .glo-hero-particles span:nth-child(6) {
            top: 15%;
            left: 88%;
        }



/*==============================================================
    AMBIENT LIGHT
==============================================================*/

.glo-hero::before {
    content: "";
    position: absolute;
    left: -280px;
    bottom: -280px;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(14,106,76,.22), transparent 72% );
    filter: blur(70px);
}



.glo-hero::after {
    content: "";
    position: absolute;
    right: -200px;
    top: -180px;
    width: 650px;
    height: 650px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(200,155,60,.16), transparent 72% );
    filter: blur(80px);
}



/*==============================================================
    HERO DECORATIVE LINE
==============================================================*/

.glo-hero-line {
    width: 180px;
    height: 3px;
    border-radius: 50px;
    background: linear-gradient( 90deg, transparent, var(--glo-gold), transparent );
}



/*==============================================================
    LARGE DESKTOP
==============================================================*/

@media(min-width:1800px) {

    .glo-hero-grid {
        gap: 120px;
    }
}



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

@media(max-width:1400px) {

    .glo-hero-grid {
        gap: 40px;
    }
}



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

@media(max-width:992px) {

    .glo-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
        padding-top: 160px;
        gap: 40px;
    }

    .glo-hero-left {
        margin: auto;
    }

    .glo-hero-right {
        min-height: 520px;
    }

    .glo-hero-world-map {
        width: 100%;
        opacity: .12;
    }
}



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

@media(max-width:768px) {

    .glo-hero {
        min-height: auto;
    }

    .glo-hero-grid {
        padding-top: 140px;
        padding-bottom: 70px;
    }

    .glo-hero-right {
        min-height: 420px;
    }
}


/*==============================================================

    OXIAURA GLOBAL PLUS
    PART 2C.3

    HERO LEFT CONTENT

==============================================================*/


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

.glo-hero-left .glo-badge {
    margin-bottom: 35px;
}



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

.glo-hero-title {
    margin: 0;
    color: #FFFFFF;
    font-size: 82px;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -1px;
    text-shadow: 0 10px 35px rgba(0,0,0,.30);
}



    .glo-hero-title span {
        color: var(--glo-gold);
        position: relative;
    }



        /*==============================================================
    GOLD ACCENT
==============================================================*/

        .glo-hero-title span::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 8px;
            width: 100%;
            height: 10px;
            background: rgba(200,155,60,.15);
            z-index: -1;
        }



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

.glo-hero-description {
    margin-top: 35px;
    max-width: 670px;
    color: rgba(255,255,255,.82);
    font-size: 18px;
    line-height: 2;
    font-weight: 300;
}



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

.glo-hero-buttons {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 55px;
}



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

    .glo-hero-buttons .glo-btn {
        min-width: 230px;
        height: 64px;
        border-radius: 70px;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: .5px;
    }



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

.glo-hero-stats {
    display: flex;
    align-items: flex-start;
    gap: 60px;
    margin-top: 90px;
}



/*==============================================================
    INDIVIDUAL STAT
==============================================================*/

.glo-hero-stat {
    position: relative;
}



    /*==============================================================
    GOLD DIVIDER
==============================================================*/

    .glo-hero-stat:not(:last-child)::after {
        content: "";
        position: absolute;
        right: -30px;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 70px;
        background: linear-gradient( transparent, rgba(200,155,60,.40), transparent );
    }



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

    .glo-hero-stat h3 {
        margin: 0;
        color: #FFFFFF;
        font-size: 48px;
        font-family: "Montserrat",sans-serif;
        font-weight: 700;
        line-height: 1;
    }



    .glo-hero-stat:first-child h3,
    .glo-hero-stat:nth-child(2) h3 {
        color: var(--glo-gold);
    }



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

    .glo-hero-stat p {
        margin-top: 16px;
        color: rgba(255,255,255,.72);
        font-size: 14px;
        line-height: 1.7;
        letter-spacing: 1px;
        text-transform: uppercase;
    }



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

.glo-hero-stat {
    transition: .35s ease;
}



    .glo-hero-stat:hover {
        transform: translateY(-8px);
    }



        .glo-hero-stat:hover h3 {
            color: #FFFFFF;
        }



/*==============================================================
    FADE ANIMATION
==============================================================*/

.glo-hero-left > * {
    animation: gloHeroFade 1s ease forwards;
    opacity: 0;
}



.glo-badge {
    animation-delay: .2s;
}



.glo-hero-title {
    animation-delay: .4s;
}



.glo-hero-description {
    animation-delay: .6s;
}



.glo-hero-buttons {
    animation-delay: .8s;
}



.glo-hero-stats {
    animation-delay: 1s;
}



/*==============================================================
    KEYFRAME
==============================================================*/

@keyframes gloHeroFade {

    from {
        opacity: 0;
        transform: translateY(45px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}



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

@media(max-width:1400px) {

    .glo-hero-title {
        font-size: 70px;
    }
}



@media(max-width:1200px) {

    .glo-hero-title {
        font-size: 60px;
    }

    .glo-hero-stats {
        gap: 35px;
    }
}



@media(max-width:992px) {

    .glo-hero-description {
        margin-left: auto;
        margin-right: auto;
    }

    .glo-hero-buttons {
        justify-content: center;
    }

    .glo-hero-stats {
        justify-content: center;
    }
}



@media(max-width:768px) {

    .glo-hero-title {
        font-size: 46px;
    }

    .glo-hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

        .glo-hero-buttons .glo-btn {
            width: 100%;
        }

    .glo-hero-stats {
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }

    .glo-hero-stat::after {
        display: none;
    }
}



@media(max-width:480px) {

    .glo-hero-title {
        font-size: 38px;
        line-height: 1.15;
    }

    .glo-hero-description {
        font-size: 16px;
    }

    .glo-hero-stat h3 {
        font-size: 38px;
    }
}

/*==============================================================

    OXIAURA GLOBAL PLUS
    PART 2C.4.1

    HERO GLOBE
    ORBITS
    CORE

==============================================================*/


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

.glo-globe {
    position: relative;
    width: 560px;
    height: 560px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
}



    /*==============================================================
    AMBIENT GLOW
==============================================================*/

    .glo-globe::before {
        content: "";
        position: absolute;
        inset: -80px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(200,155,60,.22), rgba(14,106,76,.12), transparent 72% );
        filter: blur(60px);
        animation: gloGlowPulse 6s ease-in-out infinite;
    }



    .glo-globe::after {
        content: "";
        position: absolute;
        width: 760px;
        height: 760px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(14,106,76,.10), transparent 72% );
        filter: blur(90px);
    }



/*==============================================================
    CORE
==============================================================*/


.glo-globe-core {
    position: relative;
    width: 520px;
    height: 520px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: transparent;
    border: none;
    box-shadow: 0 0 80px rgba(200,155,60,.45), 0 0 150px rgba(14,106,76,.30);
    animation: gloFloatCore 7s ease-in-out infinite;
    overflow: visible;
}


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

    .glo-globe-core img {
        width: 620px;
        height: auto;
        object-fit: contain;
        filter: drop-shadow(0 10px 25px rgba(0,0,0,.25)) drop-shadow(0 0 40px rgba(200,155,60,.35));
        transition: .4s;
    }



    /*==============================================================
    INNER GOLD RING
==============================================================*/

    .glo-globe-core::before {
        content: "";
        position: absolute;
        inset: 12px;
        border-radius: 50%;
        border: 1px solid rgba(200,155,60,.35);
    }



    /*==============================================================
    OUTER LIGHT
==============================================================*/

    .glo-globe-core::after {
        content: "";
        position: absolute;
        width: 310px;
        height: 310px;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,.08);
    }



/*==============================================================
    ORBITS
==============================================================*/

.glo-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.14);
}



/*==============================================================
    ORBIT ONE
==============================================================*/

.glo-orbit-one {
    width: 300px;
    height: 300px;
    animation: gloOrbitClockwise 16s linear infinite;
}



/*==============================================================
    ORBIT TWO
==============================================================*/

.glo-orbit-two {
    width: 410px;
    height: 410px;
    border-color: rgba(200,155,60,.22);
    animation: gloOrbitAnti 22s linear infinite;
}



/*==============================================================
    ORBIT THREE
==============================================================*/

.glo-orbit-three {
    width: 520px;
    height: 520px;
    border-color: rgba(255,255,255,.08);
    animation: gloOrbitClockwise 32s linear infinite;
}



/*==============================================================
    GOLD ORBIT DOT
==============================================================*/

.glo-orbit::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -6px;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--glo-gold);
    box-shadow: 0 0 18px rgba(200,155,60,.8);
}



/*==============================================================
    SECOND DOT
==============================================================*/

.glo-orbit::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FFFFFF;
}



/*==============================================================
    HERO RIGHT ALIGNMENT
==============================================================*/

.glo-hero-right {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}



/*==============================================================
    KEYFRAMES
==============================================================*/

@keyframes gloOrbitClockwise {

    from {
        transform: translate(-50%,-50%) rotate(0deg);
    }

    to {
        transform: translate(-50%,-50%) rotate(360deg);
    }
}



@keyframes gloOrbitAnti {

    from {
        transform: translate(-50%,-50%) rotate(360deg);
    }

    to {
        transform: translate(-50%,-50%) rotate(0deg);
    }
}



@keyframes gloGlowPulse {

    0% {
        transform: scale(.95);
        opacity: .55;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }

    100% {
        transform: scale(.95);
        opacity: .55;
    }
}



@keyframes gloFloatCore {

    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-12px);
    }

    100% {
        transform: translateY(0px);
    }
}



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

@media(max-width:1400px) {

    .glo-globe {
        width: 500px;
        height: 500px;
    }
}



@media(max-width:1200px) {

    .glo-globe {
        width: 430px;
        height: 430px;
    }

    .glo-globe-core {
        width: 180px;
        height: 180px;
    }

        .glo-globe-core img {
            width: 120px;
        }

    .glo-orbit-one {
        width: 250px;
        height: 250px;
    }

    .glo-orbit-two {
        width: 340px;
        height: 340px;
    }

    .glo-orbit-three {
        width: 420px;
        height: 420px;
    }
}



@media(max-width:768px) {

    .glo-globe {
        width: 340px;
        height: 340px;
    }

    .glo-globe-core {
        width: 150px;
        height: 150px;
    }

        .glo-globe-core img {
            width: 100px;
        }

    .glo-orbit-one {
        width: 210px;
        height: 210px;
    }

    .glo-orbit-two {
        width: 280px;
        height: 280px;
    }

    .glo-orbit-three {
        width: 340px;
        height: 340px;
    }
}
/*==============================================================

    OXIAURA GLOBAL PLUS
    PART 2C.4.2A

    FLOATING GLASS CARDS

==============================================================*/


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

.glo-floating-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 18px;
    width: 300px;
    padding: 22px 24px;
    border-radius: 26px;
    background: rgba(255,255,255,.10);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 25px 60px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.30);
    overflow: hidden;
    transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease;
}



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

    .glo-floating-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient( 90deg, transparent, var(--glo-gold), transparent );
    }



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

    .glo-floating-card::after {
        content: "";
        position: absolute;
        inset: -60px;
        background: radial-gradient( circle, rgba(200,155,60,.10), transparent 72% );
        opacity: 0;
        transition: .45s;
    }



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

    .glo-floating-card:hover {
        transform: translateY(-10px) scale(1.03);
        border-color: rgba(200,155,60,.35);
        box-shadow: 0 35px 80px rgba(0,0,0,.22), 0 0 35px rgba(200,155,60,.18);
    }



        .glo-floating-card:hover::after {
            opacity: 1;
        }



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

.glo-icon-circle {
    position: relative;
    width: 68px;
    height: 68px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient( 135deg, var(--glo-gold), #E7C26D );
    color: #ffffff;
    font-size: 24px;
    box-shadow: 0 12px 28px rgba(200,155,60,.35);
}



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

    .glo-icon-circle::before {
        content: "";
        position: absolute;
        inset: -10px;
        border-radius: 50%;
        border: 1px solid rgba(200,155,60,.25);
    }



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

.glo-floating-card h4 {
    margin: 0 0 8px;
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}



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

.glo-floating-card p {
    margin: 0;
    color: rgba(255,255,255,.78);
    font-size: 14px;
    line-height: 1.7;
}



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

.glo-card-one {
    top: 30px;
    left: -90px;
    animation: gloCardFloatOne 7s ease-in-out infinite;
}



.glo-card-two {
    top: 210px;
    right: -120px;
    animation: gloCardFloatTwo 8s ease-in-out infinite;
}



.glo-card-three {
    bottom: 40px;
    left: -50px;
    animation: gloCardFloatThree 9s ease-in-out infinite;
}



/*==============================================================
    FLOAT ANIMATION ONE
==============================================================*/

@keyframes gloCardFloatOne {

    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-16px);
    }

    100% {
        transform: translateY(0px);
    }
}



/*==============================================================
    FLOAT ANIMATION TWO
==============================================================*/

@keyframes gloCardFloatTwo {

    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(18px);
    }

    100% {
        transform: translateY(0px);
    }
}



/*==============================================================
    FLOAT ANIMATION THREE
==============================================================*/

@keyframes gloCardFloatThree {

    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-14px);
    }

    100% {
        transform: translateY(0px);
    }
}



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

@media(max-width:1400px) {

    .glo-floating-card {
        width: 270px;
    }
}



@media(max-width:1200px) {

    .glo-card-one {
        left: -30px;
    }

    .glo-card-two {
        right: -30px;
    }

    .glo-card-three {
        left: 0;
    }
}



@media(max-width:992px) {

    .glo-floating-card {
        position: relative;
        width: 100%;
        max-width: 380px;
        margin: 18px auto;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        animation: none;
    }
}



@media(max-width:768px) {

    .glo-floating-card {
        padding: 18px;
        gap: 15px;
    }

    .glo-icon-circle {
        width: 58px;
        height: 58px;
        font-size: 20px;
    }

    .glo-floating-card h4 {
        font-size: 18px;
    }
}

/*==============================================================

    OXIAURA GLOBAL PLUS
    PART 2C.4.2B

    CONNECTION NODES
    GLOW PARTICLES
    HERO EFFECTS

==============================================================*/


/*==============================================================
    CONNECTION POINTS
==============================================================*/

.glo-point {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--glo-gold);
    box-shadow: 0 0 18px rgba(200,155,60,.85), 0 0 40px rgba(200,155,60,.45);
    z-index: 20;
}



    .glo-point::before {
        content: "";
        position: absolute;
        inset: -10px;
        border-radius: 50%;
        border: 1px solid rgba(200,155,60,.25);
        animation: gloPulseRing 3s ease infinite;
    }



/*==============================================================
    POINT POSITIONS
==============================================================*/

.glo-point-1 {
    top: 6%;
    left: 50%;
}



.glo-point-2 {
    top: 27%;
    right: 7%;
}



.glo-point-3 {
    bottom: 22%;
    right: 14%;
}



.glo-point-4 {
    bottom: 8%;
    left: 50%;
}



.glo-point-5 {
    bottom: 30%;
    left: 8%;
}



.glo-point-6 {
    top: 28%;
    left: 10%;
}



/*==============================================================
    CONNECTION LINES
==============================================================*/

.glo-globe {
    isolation: isolate;
}



    .glo-globe .glo-point::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 120px;
        height: 1px;
        transform-origin: left center;
        background: linear-gradient( 90deg, rgba(200,155,60,.65), transparent );
        opacity: .45;
    }



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

    .glo-globe .glo-spark {
        position: absolute;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #ffffff;
        box-shadow: 0 0 10px rgba(255,255,255,.9);
    }



/*==============================================================
    FLOATING LIGHTS
==============================================================*/

.glo-hero-right::before {
    content: "";
    position: absolute;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(255,255,255,.06), transparent 70% );
    animation: gloLightRotate 20s linear infinite;
}



.glo-hero-right::after {
    content: "";
    position: absolute;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    border: 1px dashed rgba(255,255,255,.05);
    animation: gloRotateSlow 55s linear infinite;
}



/*==============================================================
    GOLD PARTICLES
==============================================================*/

.glo-hero-particles span {
    animation: gloParticleFloat 7s ease-in-out infinite;
}



    .glo-hero-particles span:nth-child(2) {
        animation-delay: 1s;
    }



    .glo-hero-particles span:nth-child(3) {
        animation-delay: 2s;
    }



    .glo-hero-particles span:nth-child(4) {
        animation-delay: 3s;
    }



    .glo-hero-particles span:nth-child(5) {
        animation-delay: 4s;
    }



    .glo-hero-particles span:nth-child(6) {
        animation-delay: 5s;
    }



/*==============================================================
    GLASS REFLECTION
==============================================================*/

.glo-floating-card {
    position: absolute;
}



    .glo-floating-card .glo-icon-circle {
        overflow: hidden;
    }



        .glo-floating-card .glo-icon-circle::after {
            content: "";
            position: absolute;
            top: -100%;
            left: -120%;
            width: 80%;
            height: 260%;
            transform: rotate(25deg);
            background: rgba(255,255,255,.35);
            transition: 1s;
        }



    .glo-floating-card:hover

    .glo-icon-circle::after {
        left: 180%;
    }



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

.glo-globe-core {
    animation: gloFloatCore 7s ease-in-out infinite, gloCoreGlow 5s ease-in-out infinite;
}



/*==============================================================
    KEYFRAMES
==============================================================*/

@keyframes gloPulseRing {

    0% {
        transform: scale(.6);
        opacity: 1;
    }

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



@keyframes gloParticleFloat {

    0% {
        transform: translateY(0);
        opacity: .4;
    }

    50% {
        transform: translateY(-22px);
        opacity: 1;
    }

    100% {
        transform: translateY(0);
        opacity: .4;
    }
}



@keyframes gloRotateSlow {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}



@keyframes gloLightRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}



@keyframes gloCoreGlow {

    0% {
        box-shadow: 0 0 50px rgba(200,155,60,.30), inset 0 0 30px rgba(255,255,255,.8);
    }

    50% {
        box-shadow: 0 0 90px rgba(200,155,60,.55), inset 0 0 45px rgba(255,255,255,.95);
    }

    100% {
        box-shadow: 0 0 50px rgba(200,155,60,.30), inset 0 0 30px rgba(255,255,255,.8);
    }
}



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

@media(max-width:992px) {

    .glo-point {
        display: none;
    }

    .glo-hero-right::after {
        display: none;
    }
}



@media(max-width:768px) {

    .glo-hero-right::before {
        width: 320px;
        height: 320px;
    }
}

/*==============================================================

    OXIAURA GLOBAL PLUS
    PART 2C.5

    DECORATIVE EFFECTS
    LIGHT RAYS
    PARALLAX
    PARTICLES
    BACKGROUND GLOWS

==============================================================*/


/*==============================================================
    LIGHT RAYS
==============================================================*/

.glo-light-rays {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}



    .glo-light-rays span {
        position: absolute;
        display: block;
        width: 2px;
        height: 520px;
        background: linear-gradient( to bottom, rgba(255,255,255,0), rgba(255,255,255,.10), rgba(200,155,60,.18), rgba(255,255,255,0) );
        filter: blur(1px);
        transform-origin: top;
        animation: gloRayMove 14s linear infinite;
    }



        .glo-light-rays span:nth-child(1) {
            left: 18%;
            top: -150px;
            transform: rotate(-18deg);
        }



        .glo-light-rays span:nth-child(2) {
            left: 42%;
            top: -180px;
            transform: rotate(-10deg);
            animation-delay: 3s;
        }



        .glo-light-rays span:nth-child(3) {
            left: 74%;
            top: -130px;
            transform: rotate(12deg);
            animation-delay: 6s;
        }



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

.glo-background-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}



    .glo-background-glow::before {
        content: "";
        position: absolute;
        width: 700px;
        height: 700px;
        left: -180px;
        bottom: -220px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(14,106,76,.24), transparent 72% );
        filter: blur(90px);
        animation: gloGlowLeft 10s ease-in-out infinite;
    }



    .glo-background-glow::after {
        content: "";
        position: absolute;
        width: 600px;
        height: 600px;
        right: -120px;
        top: -150px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(200,155,60,.22), transparent 70% );
        filter: blur(80px);
        animation: gloGlowRight 12s ease-in-out infinite;
    }



/*==============================================================
    GOLD GRADIENT ORBS
==============================================================*/

.glo-gold-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
}



.glo-gold-orb-one {
    width: 220px;
    height: 220px;
    top: 18%;
    left: 12%;
    background: rgba(200,155,60,.12);
}



.glo-gold-orb-two {
    width: 180px;
    height: 180px;
    bottom: 10%;
    right: 20%;
    background: rgba(200,155,60,.10);
}



/*==============================================================
    PARALLAX LAYERS
==============================================================*/

.glo-parallax {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}



.glo-parallax-circle {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.08);
}



.glo-parallax-one {
    width: 240px;
    height: 240px;
    left: 10%;
    top: 24%;
}



.glo-parallax-two {
    width: 160px;
    height: 160px;
    right: 12%;
    bottom: 18%;
}



.glo-parallax-three {
    width: 340px;
    height: 340px;
    left: 50%;
    top: 55%;
    transform: translate(-50%,-50%);
}



/*==============================================================
    FLOATING PARTICLES
==============================================================*/

.glo-floating-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 4;
}



    .glo-floating-particles span {
        position: absolute;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--glo-gold);
        box-shadow: 0 0 16px rgba(200,155,60,.65);
        animation: gloParticleRise 10s linear infinite;
    }



        .glo-floating-particles span:nth-child(1) {
            left: 12%;
            bottom: -20px;
        }



        .glo-floating-particles span:nth-child(2) {
            left: 30%;
            bottom: -60px;
            animation-delay: 2s;
        }



        .glo-floating-particles span:nth-child(3) {
            left: 52%;
            bottom: -30px;
            animation-delay: 4s;
        }



        .glo-floating-particles span:nth-child(4) {
            left: 74%;
            bottom: -40px;
            animation-delay: 1s;
        }



        .glo-floating-particles span:nth-child(5) {
            left: 90%;
            bottom: -20px;
            animation-delay: 5s;
        }



/*==============================================================
    GOLD VIGNETTE
==============================================================*/

.glo-hero-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient( circle at center, transparent 55%, rgba(0,0,0,.15) 100% );
    pointer-events: none;
}



/*==============================================================
    KEYFRAMES
==============================================================*/

@keyframes gloRayMove {

    0% {
        opacity: .15;
        transform: translateY(0) rotate(-12deg);
    }

    50% {
        opacity: .45;
    }

    100% {
        opacity: .15;
        transform: translateY(90px) rotate(-12deg);
    }
}



@keyframes gloParticleRise {

    from {
        transform: translateY(0) scale(.7);
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    100% {
        transform: translateY(-900px) scale(1.4);
        opacity: 0;
    }
}



@keyframes gloGlowLeft {

    0% {
        transform: scale(.95);
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(.95);
    }
}



@keyframes gloGlowRight {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(.90);
    }

    100% {
        transform: scale(1);
    }
}



/*==============================================================
    PERFORMANCE
==============================================================*/

.glo-light-rays span,
.glo-floating-particles span,
.glo-globe,
.glo-floating-card,
.glo-orbit {
    will-change: transform,opacity;
}



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

@media(max-width:992px) {

    .glo-light-rays,
    .glo-parallax,
    .glo-gold-orb {
        display: none;
    }
}



@media(max-width:768px) {

    .glo-background-glow::before {
        width: 420px;
        height: 420px;
    }

    .glo-background-glow::after {
        width: 360px;
        height: 360px;
    }
}


/*==============================================================

    OXIAURA GLOBAL PLUS
    PART 2C.6

    HERO RESPONSIVE

==============================================================*/


/*==============================================================
    ULTRA WIDE
    1920px+
==============================================================*/

@media (min-width:1921px) {

    .glo-hero {
        min-height: 100vh;
    }

        .glo-hero .glo-container {
            max-width: 1850px;
        }

    .glo-hero-grid {
        gap: 160px;
    }

    .glo-hero-title {
        font-size: 96px;
    }

    .glo-hero-description {
        max-width: 760px;
        font-size: 20px;
    }

    .glo-globe {
        width: 640px;
        height: 640px;
    }

    .glo-globe-core {
        width: 250px;
        height: 250px;
    }

        .glo-globe-core img {
            width: 170px;
        }

    .glo-orbit-one {
        width: 340px;
        height: 340px;
    }

    .glo-orbit-two {
        width: 470px;
        height: 470px;
    }

    .glo-orbit-three {
        width: 600px;
        height: 600px;
    }
}



/*==============================================================
    LARGE DESKTOP
==============================================================*/

@media (max-width:1600px) {

    .glo-hero-grid {
        gap: 70px;
    }

    .glo-hero-title {
        font-size: 72px;
    }

    .glo-globe {
        width: 520px;
        height: 520px;
    }
}



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

@media (max-width:1400px) {

    .glo-hero {
        padding-top: 40px;
    }

    .glo-hero-title {
        font-size: 64px;
    }

    .glo-hero-description {
        font-size: 17px;
    }

    .glo-floating-card {
        width: 260px;
    }
}



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

@media (max-width:1200px) {

    .glo-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 60px;
        padding-top: 160px;
        padding-bottom: 100px;
    }

    .glo-hero-left {
        max-width: 760px;
        margin: auto;
    }

    .glo-hero-description {
        margin-left: auto;
        margin-right: auto;
    }

    .glo-hero-buttons {
        justify-content: center;
    }

    .glo-hero-stats {
        justify-content: center;
    }

    .glo-hero-right {
        min-height: 620px;
    }
}



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

@media (max-width:992px) {

    .glo-hero {
        padding-top: 30px;
    }

    .glo-hero-title {
        font-size: 56px;
        line-height: 1.12;
    }

    .glo-hero-description {
        font-size: 17px;
    }

    .glo-hero-buttons {
        flex-wrap: wrap;
    }

    .glo-hero-stat h3 {
        font-size: 40px;
    }

    .glo-floating-card {
        max-width: 360px;
    }
}



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

@media (max-width:768px) {

    .glo-hero {
        min-height: auto;
    }

    .glo-hero-grid {
        padding-top: 140px;
        padding-bottom: 80px;
    }

    .glo-hero-title {
        font-size: 44px;
    }

    .glo-hero-description {
        font-size: 16px;
        line-height: 1.9;
    }

    .glo-hero-buttons {
        flex-direction: column;
        width: 100%;
        gap: 18px;
    }

        .glo-hero-buttons .glo-btn {
            width: 100%;
        }

    .glo-hero-stats {
        flex-direction: column;
        align-items: center;
        gap: 35px;
        margin-top: 60px;
    }

    .glo-hero-stat {
        text-align: center;
    }

        .glo-hero-stat::after {
            display: none;
        }

    .glo-hero-right {
        min-height: 420px;
    }
}



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

@media (max-width:576px) {

    .glo-hero-grid {
        padding-top: 120px;
    }

    .glo-hero-title {
        font-size: 36px;
        line-height: 1.2;
    }

    .glo-badge {
        font-size: 12px;
        letter-spacing: 2px;
    }

    .glo-hero-description {
        font-size: 15px;
    }

    .glo-hero-buttons .glo-btn {
        min-width: 100%;
        height: 58px;
    }

    .glo-globe {
        width: 300px;
        height: 300px;
    }

    .glo-globe-core {
        width: 140px;
        height: 140px;
    }

        .glo-globe-core img {
            width: 90px;
        }

    .glo-orbit-one {
        width: 190px;
        height: 190px;
    }

    .glo-orbit-two {
        width: 250px;
        height: 250px;
    }

    .glo-orbit-three {
        width: 300px;
        height: 300px;
    }
}



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

@media (max-width:400px) {

    .glo-hero-title {
        font-size: 30px;
    }

    .glo-hero-description {
        font-size: 14px;
    }

    .glo-globe {
        width: 260px;
        height: 260px;
    }

    .glo-globe-core {
        width: 120px;
        height: 120px;
    }

        .glo-globe-core img {
            width: 80px;
        }

    .glo-orbit-one {
        width: 170px;
        height: 170px;
    }

    .glo-orbit-two {
        width: 220px;
        height: 220px;
    }

    .glo-orbit-three {
        width: 260px;
        height: 260px;
    }
}



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

@media (max-height:650px) {

    .glo-hero {
        min-height: auto;
    }

    .glo-hero-grid {
        padding-top: 120px;
        padding-bottom: 80px;
    }
}



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

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

    .glo-globe,
    .glo-orbit,
    .glo-floating-card,
    .glo-hero-particles span,
    .glo-light-rays span {
        animation: none !important;
        transition: none !important;
    }
}

/*==============================================================
    Hero New GLOBAL PLUS 
==============================================================*/

/* ==========================================
   TABLET & MOBILE
========================================== */

@media (max-width:992px) {

    .glo-hero-grid {
        display: flex;
        flex-direction: column;
        gap: 80px;
        text-align: center;
    }

    .glo-hero-left {
        width: 100%;
        order: 1;
    }

    .glo-hero-right {
        width: 100%;
        order: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        min-height: 520px;
    }
}

@media (max-width:992px) {

    .glo-card-one,
    .glo-card-two,
    .glo-card-three {
        display: none;
    }
}


@media (max-width:768px) {

    .glo-globe {
        width: 260px;
        height: 260px;
    }

    .glo-globe-core {
        width: 120px;
        height: 120px;
    }

        .glo-globe-core img {
            width: 90px;
        }
}

@media (max-width:768px) {

    .glo-hero-left {
        padding-left: 24px;
        padding-right: 24px;
    }
}
@media (max-width:768px) {

    .glo-hero-right {
        min-height: 240px;
        height: 240px;
        margin-top: 0;
        margin-bottom: 0;
        padding: 0;
    }

    .glo-globe {
        width: 260px;
        height: 260px;
    }

    .glo-globe-core {
        width: 120px;
        height: 120px;
    }

        .glo-globe-core img {
            width: 85px;
        }
}
@media (max-width:400px) {

    .glo-hero-right {
        min-height: 260px;
        height: 260px;
    }

    .glo-globe {
        width: 220px;
        height: 220px;
    }
}
.glo-light-rays
.glo-parallax
.glo-gold-orb






/*==============================================================
    ABOUT GLOBAL PLUS
==============================================================*/
.glo-about {
    position: relative;
    padding: 140px 0;
    overflow: hidden;
    background: linear-gradient( rgba(248,248,245,.92), rgba(248,248,245,.92) ), url("../images/glabout.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
}


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

    .glo-about::before {
        content: "";
        position: absolute;
        top: -280px;
        left: -220px;
        width: 650px;
        height: 650px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(14,106,76,.08), transparent 72% );
        filter: blur(70px);
        pointer-events: none;
    }

    .glo-about::after {
        content: "";
        position: absolute;
        right: -180px;
        bottom: -180px;
        width: 520px;
        height: 520px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(200,155,60,.12), transparent 70% );
        filter: blur(70px);
        pointer-events: none;
    }


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

.glo-about-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: center;
}


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

.glo-about-image {
    position: relative;
}

    .glo-about-image img {
        width: 100%;
        display: block;
        border-radius: 34px;
        position: relative;
        z-index: 2;
        object-fit: cover;
        box-shadow: 0 30px 70px rgba(0,0,0,.18);
    }


/*==============================================================
    GOLD FRAME
==============================================================*/

.glo-about-image-border {
    position: absolute;
    inset: -16px;
    border-radius: 40px;
    border: 1px solid rgba(200,155,60,.35);
    z-index: 1;
}

    .glo-about-image-border::before {
        content: "";
        position: absolute;
        inset: 12px;
        border-radius: 30px;
        border: 1px solid rgba(255,255,255,.22);
    }


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

.glo-about-glow {
    position: absolute;
    inset: auto;
    width: 320px;
    height: 320px;
    left: -70px;
    bottom: -70px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(200,155,60,.22), transparent 72% );
    filter: blur(60px);
    z-index: 0;
}


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

.glo-about-content {
    position: relative;
    z-index: 3;
}


/*==============================================================
    SUBTITLE
==============================================================*/

.glo-section-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #5A1025;
    letter-spacing: 3px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 22px;
}

    .glo-section-subtitle::before {
        content: "";
        width: 55px;
        height: 2px;
        background: #C89B3C;
    }


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

.glo-about-content h2 {
    font-family: "Cormorant Garamond",serif;
    font-size: 58px;
    line-height: 1.05;
    color: #C89B3C;
    margin-bottom: 30px;
}


/*==============================================================
    PARAGRAPHS
==============================================================*/

.glo-about-content p {
    font-size: 17px;
    line-height: 1.9;
    color: #555;
    margin-bottom: 24px;
    max-width: 640px;
}

/*==============================================================
    PART 2D.2
    ABOUT FEATURES
==============================================================*/

.glo-about-features {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 26px;
    margin-top: 60px;
    margin-bottom: 70px;
}


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

.glo-feature-card {
    position: relative;
    padding: 36px 28px;
    border-radius: 30px;
    background: rgba(255,255,255,.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(200,155,60,.18);
    overflow: hidden;
    transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease;
    box-shadow: 0 20px 45px rgba(0,0,0,.06);
}


    /*==============================================================
    TOP GOLD LINE
==============================================================*/

    .glo-feature-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient( 90deg, transparent, #C89B3C, transparent );
    }


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

    .glo-feature-card::after {
        content: "";
        position: absolute;
        inset: -80px;
        background: radial-gradient( circle, rgba(200,155,60,.10), transparent 72% );
        opacity: 0;
        transition: .5s;
    }


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

    .glo-feature-card:hover {
        transform: translateY(-12px);
        border-color: rgba(200,155,60,.35);
        box-shadow: 0 30px 70px rgba(0,0,0,.12), 0 0 35px rgba(200,155,60,.12);
    }



        .glo-feature-card:hover::after {
            opacity: 1;
        }



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

.glo-feature-icon {
    width: 72px;
    height: 72px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: linear-gradient( 135deg, #C89B3C, #E5C36A );
    color: #fff;
    font-size: 28px;
    margin-bottom: 28px;
    box-shadow: 0 12px 30px rgba(200,155,60,.35);
}



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

.glo-feature-card h3 {
    font-size: 24px;
    color: #0A3E30;
    margin-bottom: 16px;
    font-family: "Playfair Display",serif;
}



/*==============================================================
    FEATURE TEXT
==============================================================*/

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



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

.glo-about-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    padding: 45px;
    border-radius: 32px;
    background: linear-gradient( 135deg, #0E6A4C, #0A3E30 );
    position: relative;
    overflow: hidden;
}



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

    .glo-about-stats::before {
        content: "";
        position: absolute;
        width: 350px;
        height: 350px;
        right: -120px;
        top: -120px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(255,255,255,.12), transparent 72% );
    }



/*==============================================================
    INDIVIDUAL STAT
==============================================================*/

.glo-stat {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 2;
}



    .glo-stat:not(:last-child)::after {
        content: "";
        position: absolute;
        right: 0;
        top: 15px;
        width: 1px;
        height: 60px;
        background: rgba(255,255,255,.18);
    }



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

    .glo-stat h4 {
        font-size: 54px;
        color: #fff;
        margin-bottom: 10px;
        font-family: "Montserrat",sans-serif;
        font-weight: 700;
    }



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

    .glo-stat span {
        color: rgba(255,255,255,.82);
        font-size: 15px;
        letter-spacing: 1px;
    }



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

.glo-about-image {
    overflow: hidden;
    border-radius: 34px;
}



    .glo-about-image img {
        transition: transform .8s ease;
    }



    .glo-about-image:hover img {
        transform: scale(1.05);
    }



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

@media(max-width:1200px) {

    .glo-about-grid {
        grid-template-columns: 1fr;
        gap: 70px;
    }

    .glo-about-content {
        text-align: center;
    }

        .glo-about-content p {
            margin-left: auto;
            margin-right: auto;
        }
}



@media(max-width:992px) {

    .glo-about-features {
        grid-template-columns: 1fr;
    }

    .glo-about-stats {
        flex-direction: column;
        gap: 40px;
    }

    .glo-stat::after {
        display: none !important;
    }
}



@media(max-width:768px) {

    .glo-about {
        padding: 90px 0;
    }

    .glo-about-content h2 {
        font-size: 42px;
    }

    .glo-about-stats {
        padding: 35px 25px;
    }

    .glo-stat h4 {
        font-size: 42px;
    }
}



@media(max-width:576px) {

    .glo-about-content h2 {
        font-size: 34px;
    }

    .glo-feature-card {
        padding: 28px 22px;
    }

    .glo-feature-icon {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }

    .glo-stat h4 {
        font-size: 36px;
    }
}

/*==============================================================
    BUSINESS CATEGORIES
==============================================================*/

.glo-categories {
    position: relative;
    padding: 140px 0;
    overflow: hidden;
    background: linear-gradient( 180deg, #FAF9F5 0%, #F4F3ED 100% );
}


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

    .glo-categories::before {
        content: "";
        position: absolute;
        top: -220px;
        left: -220px;
        width: 650px;
        height: 650px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(14,106,76,.08), transparent 72% );
        filter: blur(70px);
    }

    .glo-categories::after {
        content: "";
        position: absolute;
        right: -250px;
        bottom: -250px;
        width: 650px;
        height: 650px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(200,155,60,.12), transparent 72% );
        filter: blur(80px);
    }


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

.glo-section-title {
    max-width: 760px;
    margin: 0 auto 80px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.glo-section-tag {
    display: inline-block;
    color: #6B102E;
    letter-spacing: 4px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.glo-section-title h2 {
    font-family: "Cormorant Garamond",serif;
    font-size: 60px;
    line-height: 1.1;
    color: #C89B3C;
    margin-bottom: 24px;
}

.glo-section-title p {
    max-width: 720px;
    margin: auto;
    font-size: 18px;
    line-height: 1.9;
    color: #666;
}


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

.glo-category-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 35px;
    position: relative;
    z-index: 2;
}


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

.glo-category-card {
    position: relative;
    border-radius: 34px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(200,155,60,.15);
    transition: .45s;
    box-shadow: 0 18px 45px rgba(0,0,0,.08);
}

    .glo-category-card:hover {
        transform: translateY(-12px);
        box-shadow: 0 30px 70px rgba(0,0,0,.15), 0 0 35px rgba(200,155,60,.12);
    }


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

.glo-category-image {
    position: relative;
    overflow: hidden;
    height: 250px;
}

    .glo-category-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: 1s;
    }

.glo-category-card:hover .glo-category-image img {
    transform: scale(1.08);
}


/*==============================================================
    IMAGE OVERLAY
==============================================================*/
.glo-category-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( 180deg, transparent, rgba(10,62,48,.15), rgba(10,62,48,.65) );
    z-index: 1;
}
.glo-category-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( 180deg, transparent 35%, rgba(10,62,48,.25) 100% );
}


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

.glo-category-content {
    padding: 55px 35px 35px;
}


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

.glo-category-icon {
    position: absolute;
    left: 35px;
    top: 235px;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: linear-gradient( 135deg, #D6AE55, #C89B3C );
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 28px;
    z-index: 5;
    box-shadow: 0 15px 35px rgba(200,155,60,.35);
}


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

.glo-category-content h3 {
    font-family: "Playfair Display",serif;
    font-size: 28px;
    color: #0A3E30;
    margin-bottom: 18px;
}


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

.glo-category-content p {
    font-size: 15px;
    line-height: 1.9;
    color: #666;
    margin-bottom: 28px;
}


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

.glo-category-content a {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: #0E6A4C;
    font-weight: 600;
    text-decoration: none;
}

    .glo-category-content a i {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #C89B3C;
        color: #fff;
        transition: .4s;
    }

    .glo-category-content a:hover {
        color: #A9771F;
    }

        .glo-category-content a:hover i {
            transform: translateX(8px);
        }


/*==============================================================
    GOLD SHINE
==============================================================*/

.glo-category-card::before {
    content: "";
    position: absolute;
    top: -150%;
    left: -50%;
    width: 60%;
    height: 300%;
    transform: rotate(25deg);
    background: linear-gradient( 90deg, transparent, rgba(255,255,255,.35), transparent );
    transition: 1s;
}

.glo-category-card:hover::before {
    left: 160%;
}


/*==============================================================
    GOLD BORDER
==============================================================*/

.glo-category-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 34px;
    border: 1px solid transparent;
    transition: .4s;
}

.glo-category-card:hover::after {
    border-color: rgba(200,155,60,.35);
}

/*==============================================================
    CATEGORY IMAGE HOVER OVERLAY
==============================================================*/

.glo-category-card:hover .glo-category-image::after {
    background: linear-gradient( 180deg, transparent 10%, rgba(10,62,48,.10) 40%, rgba(10,62,48,.45) 100% );
}

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

.glo-category-card:hover .glo-category-icon {
    transform: rotate(-8deg) scale(1.08);
    box-shadow: 0 18px 35px rgba(200,155,60,.45), 0 0 25px rgba(200,155,60,.35);
}

.glo-category-icon {
    transition: transform .45s ease, box-shadow .45s ease;
}


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

.glo-category-content h3 {
    transition: .35s;
}

.glo-category-card:hover h3 {
    color: #A9771F;
}


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

.glo-category-card {
    isolation: isolate;
}

    .glo-category-card .glo-card-glow {
        display: none;
    }

    .glo-category-card::selection {
        background: transparent;
    }


/*==============================================================
    FLOATING GOLD PARTICLES
==============================================================*/

.glo-categories-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

    .glo-categories-particles span {
        position: absolute;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #C89B3C;
        box-shadow: 0 0 10px rgba(200,155,60,.7);
        animation: gloFloatParticle 12s linear infinite;
    }

        .glo-categories-particles span:nth-child(1) {
            top: 8%;
            left: 12%;
            animation-duration: 13s;
        }

        .glo-categories-particles span:nth-child(2) {
            top: 22%;
            right: 14%;
            animation-duration: 15s;
        }

        .glo-categories-particles span:nth-child(3) {
            bottom: 18%;
            left: 28%;
            animation-duration: 11s;
        }

        .glo-categories-particles span:nth-child(4) {
            bottom: 10%;
            right: 20%;
            animation-duration: 16s;
        }

        .glo-categories-particles span:nth-child(5) {
            top: 55%;
            left: 50%;
            animation-duration: 14s;
        }
.glo-categories {
    position: relative;
    padding: 140px 0;
    overflow: hidden;
    background-image: url("../images/glo-catback.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/*==============================================================
    PARTICLE ANIMATION
==============================================================*/

@keyframes gloFloatParticle {

    0% {
        transform: translateY(40px) scale(.5);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    50% {
        transform: translateY(-40px) scale(1);
    }

    100% {
        transform: translateY(-120px) scale(.2);
        opacity: 0;
    }
}


/*==============================================================
    SECTION ENTRANCE
==============================================================*/

/*==============================================================
    PREMIUM CATEGORY CARD
==============================================================*/

.glo-category-card {
    position: relative;
    overflow: hidden;
    border-radius: 34px;
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(200,155,60,.18);
    transition: .45s;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 18px 45px rgba(0,0,0,.08);
}


    .glo-category-card:hover img {
        transform: scale(1.12);
    }

    .glo-category-card:nth-child(1) {
        animation-delay: .1s;
    }

    .glo-category-card:nth-child(2) {
        animation-delay: .2s;
    }

    .glo-category-card:nth-child(3) {
        animation-delay: .3s;
    }

    .glo-category-card:nth-child(4) {
        animation-delay: .4s;
    }

    .glo-category-card:nth-child(5) {
        animation-delay: .5s;
    }

    .glo-category-card:nth-child(6) {
        animation-delay: .6s;
    }


@keyframes gloFadeUp {

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*==============================================================

    OXIAURA GLOBAL PLUS
    PART 10.2A

    CONTACT SECTION
    LUXURY LAYOUT & BACKGROUND

==============================================================*/


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

.glo-contact {
    position: relative;
    overflow: hidden;
    padding: 140px 0;
    background: radial-gradient(circle at top right, rgba(90,16,37,.28), transparent 35%), radial-gradient(circle at bottom left, rgba(7,71,53,.22), transparent 40%), linear-gradient( 135deg, #02060A 0%, #041611 28%, #0A2A1D 58%, #3B0D1C 100%);
}


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

.glo-contact-bg-shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(120px);
    opacity: .45;
    animation: gloContactFloat 12s ease-in-out infinite;
}


.glo-shape-one {
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(212,175,55,.30), transparent 70%);
    top: -180px;
    right: -140px;
}


.glo-shape-two {
    width: 620px;
    height: 620px;
    background: radial-gradient(circle, rgba(90,16,37,.40), transparent 70%);
    bottom: -240px;
    left: -180px;
    animation-delay: 4s;
}


/*==============================================================
    CENTER GLOW
==============================================================*/

.glo-contact-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 900px;
    height: 900px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.05), transparent 70%);
    pointer-events: none;
}


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

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


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

.glo-contact .glo-section-title {
    max-width: 760px;
    margin: 0 auto 90px;
    text-align: center;
}


/*==============================================================
    SMALL TAG
==============================================================*/

.glo-contact .glo-section-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 26px;
    border-radius: 40px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(212,175,55,.25);
    color: #D4AF37;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 25px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}


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

.glo-contact .glo-section-title h2 {
    font-size: 58px;
    line-height: 1.15;
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 24px;
}


    .glo-contact .glo-section-title h2 span {
        color: #D4AF37;
    }


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

.glo-contact .glo-section-title p {
    max-width: 760px;
    margin: auto;
    color: rgba(255,255,255,.72);
    font-size: 18px;
    line-height: 2;
}


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

.glo-contact-grid {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 50px;
    align-items: start;
}


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

.glo-contact-info {
    position: relative;
}


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

.glo-contact-form-wrapper {
    position: relative;
}


/*==============================================================
    DECORATIVE BORDER
==============================================================*/

.glo-contact-grid::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 40px;
    pointer-events: none;
}


/*==============================================================
    GOLD LINE
==============================================================*/

.glo-contact::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    height: 2px;
    background: linear-gradient( 90deg, transparent, #D4AF37, transparent);
    opacity: .9;
}


/*==============================================================
    MAROON LIGHT
==============================================================*/

.glo-contact::after {
    content: "";
    position: absolute;
    bottom: 80px;
    right: 8%;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(90,16,37,.28), transparent 70%);
    filter: blur(70px);
}


/*==============================================================
    FLOAT ANIMATION
==============================================================*/

@keyframes gloContactFloat {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-35px);
    }

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

/*==============================================================

    OXIAURA GLOBAL PLUS
    PART 10.2B

    CONTACT INFORMATION CARDS

==============================================================*/


/*==============================================================
    CONTACT INFO COLUMN
==============================================================*/

.glo-contact-info {
    display: flex;
    flex-direction: column;
    gap: 28px;
}


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

.glo-contact-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 22px;
    padding: 32px;
    overflow: hidden;
    border-radius: 28px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(212,175,55,.18);
    box-shadow: 0 20px 45px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.10);
    transition: .45s ease;
}


    /*==============================================================
    TOP GOLD LINE
==============================================================*/

    .glo-contact-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 3px;
        background: linear-gradient( 90deg, #D4AF37, #F4D06F, #D4AF37);
        transition: .5s ease;
    }


    /*==============================================================
    MAROON GLOW
==============================================================*/

    .glo-contact-card::after {
        content: "";
        position: absolute;
        width: 180px;
        height: 180px;
        right: -80px;
        bottom: -80px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(90,16,37,.35), transparent 70%);
        opacity: 0;
        transition: .45s ease;
    }


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

    .glo-contact-card:hover {
        transform: translateY(-10px);
        border-color: rgba(212,175,55,.45);
        box-shadow: 0 30px 65px rgba(0,0,0,.45), 0 0 25px rgba(212,175,55,.12);
    }


        .glo-contact-card:hover::before {
            width: 100%;
        }


        .glo-contact-card:hover::after {
            opacity: 1;
        }


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

.glo-contact-icon {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #D4AF37;
    background: linear-gradient( 135deg, rgba(212,175,55,.18), rgba(255,255,255,.08));
    border: 1px solid rgba(212,175,55,.25);
    transition: .45s ease;
}


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

.glo-contact-card:hover .glo-contact-icon {
    transform: rotate(-8deg) scale(1.08);
    background: linear-gradient( 135deg, #D4AF37, #F4D06F);
    color: #08110F;
    box-shadow: 0 0 22px rgba(212,175,55,.45);
}


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

.glo-contact-details {
    flex: 1;
}


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

    .glo-contact-details h4 {
        color: #ffffff;
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 12px;
        transition: .35s ease;
    }


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

    .glo-contact-details p {
        color: rgba(255,255,255,.72);
        font-size: 16px;
        line-height: 1.9;
        transition: .35s ease;
    }


/*==============================================================
    TEXT HOVER
==============================================================*/

.glo-contact-card:hover h4 {
    color: #D4AF37;
}


.glo-contact-card:hover p {
    color: #ffffff;
}


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

.glo-contact-social {
    margin-top: 20px;
    padding: 35px;
    border-radius: 28px;
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(212,175,55,.15);
    text-align: center;
}


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

    .glo-contact-social h5 {
        color: #ffffff;
        font-size: 22px;
        margin-bottom: 28px;
        font-weight: 600;
    }


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

.glo-social-icons {
    display: flex;
    justify-content: center;
    gap: 18px;
}


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

    .glo-social-icons a {
        width: 58px;
        height: 58px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: #D4AF37;
        background: rgba(255,255,255,.08);
        border: 1px solid rgba(212,175,55,.20);
        transition: .4s ease;
    }


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

        .glo-social-icons a:hover {
            transform: translateY(-8px);
            background: #D4AF37;
            color: #08110F;
            border-color: #D4AF37;
            box-shadow: 0 12px 30px rgba(212,175,55,.35);
        }


/*==============================================================
    FADE IN
==============================================================*/

.glo-contact-card,
.glo-contact-social {
    animation: gloCardFade .8s ease both;
}


@keyframes gloCardFade {

    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*==============================================================

    OXIAURA GLOBAL PLUS
    PART 10.2C

    LUXURY CONTACT FORM

==============================================================*/


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

.glo-contact-form-wrapper {
    position: relative;
    padding: 55px;
    border-radius: 34px;
    overflow: hidden;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(26px);
    -webkit-backdrop-filter: blur(26px);
    border: 1px solid rgba(212,175,55,.18);
    box-shadow: 0 30px 70px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.10);
}


    /*==============================================================
    GOLD TOP LINE
==============================================================*/

    .glo-contact-form-wrapper::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient( 90deg, transparent, #D4AF37, #F4D06F, #D4AF37, transparent);
    }


    /*==============================================================
    MAROON GLOW
==============================================================*/

    .glo-contact-form-wrapper::after {
        content: "";
        position: absolute;
        right: -120px;
        top: -120px;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(90,16,37,.35), transparent 70%);
        filter: blur(45px);
        pointer-events: none;
    }


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

.glo-contact-form {
    position: relative;
    z-index: 2;
}


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

.glo-form-group {
    margin-bottom: 24px;
}


/*==============================================================
    TWO COLUMN ROW
==============================================================*/

.glo-form-row {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 24px;
}


/*==============================================================
    INPUTS
==============================================================*/

.glo-form-group input,
.glo-form-group textarea {
    width: 100%;
    padding: 18px 22px;
    border-radius: 18px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    color: #ffffff;
    font-size: 16px;
    font-family: inherit;
    transition: .35s ease;
    outline: none;
}


/*==============================================================
    TEXTAREA
==============================================================*/

.glo-form-group textarea {
    resize: none;
    min-height: 180px;
}


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

    .glo-form-group input::placeholder,
    .glo-form-group textarea::placeholder {
        color: rgba(255,255,255,.45);
    }


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

    .glo-form-group input:focus,
    .glo-form-group textarea:focus {
        border-color: #D4AF37;
        background: rgba(255,255,255,.10);
        box-shadow: 0 0 0 4px rgba(212,175,55,.08), 0 0 25px rgba(212,175,55,.18);
    }


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

    .glo-form-group input:hover,
    .glo-form-group textarea:hover {
        border-color: rgba(212,175,55,.35);
    }


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

.glo-contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 62px;
    margin-top: 8px;
    border: none;
    border-radius: 60px;
    cursor: pointer;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .5px;
    color: #08110F;
    background: linear-gradient( 135deg, #F4D06F, #D4AF37, #C89B3C);
    transition: .45s ease;
    overflow: hidden;
    position: relative;
}


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

    .glo-contact-btn::before {
        content: "";
        position: absolute;
        left: -120%;
        top: 0;
        width: 60%;
        height: 100%;
        transform: skewX(-25deg);
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.6), transparent);
        transition: .8s;
    }


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

    .glo-contact-btn:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 35px rgba(212,175,55,.35);
    }


        .glo-contact-btn:hover::before {
            left: 140%;
        }


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

    .glo-contact-btn i {
        transition: .35s ease;
    }


    .glo-contact-btn:hover i {
        transform: translateX(6px);
    }


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

    .glo-contact-btn span {
        position: relative;
        z-index: 2;
    }


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

.glo-contact-form-wrapper {
    animation: gloFormAppear 1s ease both;
}


@keyframes gloFormAppear {

    from {
        opacity: 0;
        transform: translateY(60px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*==============================================================

    OXIAURA GLOBAL PLUS
    PART 10.2D

    BUTTONS
    HOVER EFFECTS
    ANIMATIONS

==============================================================*/


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

.glo-contact-card,
.glo-contact-form-wrapper,
.glo-contact-social,
.glo-social-icons a,
.glo-contact-btn,
.glo-form-group input,
.glo-form-group textarea {
    transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease, background .45s ease, color .45s ease;
}


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

    .glo-contact-card:hover {
        transform: translateY(-12px) scale(1.015);
    }


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

    .glo-contact-form-wrapper:hover {
        transform: translateY(-8px);
        border-color: rgba(212,175,55,.35);
        box-shadow: 0 35px 80px rgba(0,0,0,.45), 0 0 25px rgba(212,175,55,.12);
    }


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

    .glo-contact-card:hover .glo-contact-icon {
        transform: rotate(-12deg) scale(1.12);
    }


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

    .glo-contact-card:hover h4 {
        letter-spacing: .6px;
    }


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

.glo-contact-social {
    position: relative;
    overflow: hidden;
}


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

    .glo-contact-social::before {
        content: "";
        position: absolute;
        top: 0;
        left: -120%;
        width: 60%;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.22), transparent);
        transform: skewX(-28deg);
        transition: 1s;
    }


    .glo-contact-social:hover::before {
        left: 150%;
    }


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

    .glo-contact-social:hover {
        border-color: rgba(212,175,55,.30);
        transform: translateY(-8px);
    }


/*==============================================================
    SOCIAL ICON ROTATE
==============================================================*/

.glo-social-icons a:hover {
    transform: translateY(-8px) rotate(360deg);
}


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

.glo-contact-btn:active {
    transform: scale(.98);
}


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

.glo-contact-btn {
    position: relative;
    overflow: hidden;
}


    .glo-contact-btn::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 60px;
        border: 1px solid rgba(255,255,255,.25);
        opacity: 0;
        transition: .4s;
    }


    .glo-contact-btn:hover::after {
        opacity: 1;
    }


/*==============================================================
    INPUT ANIMATION
==============================================================*/

.glo-form-group {
    position: relative;
}


    .glo-form-group::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        height: 2px;
        background: #D4AF37;
        transition: .45s;
    }


    .glo-form-group:focus-within::after {
        width: 100%;
    }


/*==============================================================
    GOLD GLOW
==============================================================*/

.glo-contact-card:hover {
    box-shadow: 0 25px 70px rgba(0,0,0,.45), 0 0 18px rgba(212,175,55,.15);
}


/*==============================================================
    FLOATING GLOW
==============================================================*/

.glo-contact-card::after {
    animation: gloGlowMove 8s linear infinite;
}


@keyframes gloGlowMove {

    0% {
        transform: translate(0,0) scale(1);
    }

    50% {
        transform: translate(-20px,-20px) scale(1.15);
    }

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


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

.glo-shape-one {
    animation: gloShapeOne 14s ease-in-out infinite;
}


.glo-shape-two {
    animation: gloShapeTwo 18s ease-in-out infinite;
}


@keyframes gloShapeOne {

    0% {
        transform: translateY(0) translateX(0);
    }

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

    100% {
        transform: translateY(0) translateX(0);
    }
}


@keyframes gloShapeTwo {

    0% {
        transform: translateY(0) translateX(0);
    }

    50% {
        transform: translateY(35px) translateX(-25px);
    }

    100% {
        transform: translateY(0) translateX(0);
    }
}


/*==============================================================
    FADE-UP ANIMATION
==============================================================*/

.glo-contact-card,
.glo-contact-form-wrapper,
.glo-contact-social {
    animation: gloFadeUp .9s ease both;
}


    .glo-contact-card:nth-child(2) {
        animation-delay: .15s;
    }

    .glo-contact-card:nth-child(3) {
        animation-delay: .3s;
    }

    .glo-contact-card:nth-child(4) {
        animation-delay: .45s;
    }

    .glo-contact-card:nth-child(5) {
        animation-delay: .6s;
    }

.glo-contact-social {
    animation-delay: .75s;
}

.glo-contact-form-wrapper {
    animation-delay: .35s;
}


@keyframes gloFadeUp {

    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/*==============================================================

    OXIAURA GLOBAL PLUS
    PART 10.2E

    RESPONSIVE CSS

==============================================================*/


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

@media (max-width:1200px) {

    .glo-contact {
        padding: 120px 0;
    }

    .glo-contact-grid {
        grid-template-columns: 360px 1fr;
        gap: 40px;
    }

    .glo-contact .glo-section-title h2 {
        font-size: 48px;
    }

    .glo-contact-form-wrapper {
        padding: 45px;
    }

    .glo-contact-card {
        padding: 28px;
    }
}


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

@media (max-width:992px) {

    .glo-contact {
        padding: 100px 0;
    }

    .glo-contact-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .glo-contact-info {
        order: 2;
    }

    .glo-contact-form-wrapper {
        order: 1;
    }

    .glo-contact .glo-section-title {
        margin-bottom: 60px;
    }

        .glo-contact .glo-section-title h2 {
            font-size: 42px;
        }

        .glo-contact .glo-section-title p {
            font-size: 17px;
        }

    .glo-contact-card {
        padding: 28px;
    }

    .glo-contact-social {
        padding: 30px;
    }
}


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

@media (max-width:768px) {

    .glo-contact {
        padding: 90px 0;
    }

        .glo-contact .glo-container {
            width: 92%;
            margin: auto;
        }

        .glo-contact .glo-section-title {
            margin-bottom: 50px;
        }

            .glo-contact .glo-section-title h2 {
                font-size: 36px;
                line-height: 1.25;
            }

            .glo-contact .glo-section-title p {
                font-size: 16px;
                line-height: 1.8;
            }

    .glo-contact-form-wrapper {
        padding: 30px 24px;
        border-radius: 26px;
    }

    .glo-form-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .glo-form-group {
        margin-bottom: 20px;
    }

        .glo-form-group input,
        .glo-form-group textarea {
            padding: 16px 18px;
            font-size: 15px;
            border-radius: 14px;
        }

        .glo-form-group textarea {
            min-height: 170px;
        }

    .glo-contact-btn {
        width: 100%;
        height: 58px;
        font-size: 16px;
    }

    .glo-contact-card {
        padding: 24px;
        gap: 18px;
        border-radius: 22px;
    }

    .glo-contact-icon {
        width: 60px;
        height: 60px;
        font-size: 22px;
        border-radius: 18px;
    }

    .glo-contact-details h4 {
        font-size: 20px;
    }

    .glo-contact-details p {
        font-size: 15px;
        line-height: 1.8;
    }

    .glo-contact-social {
        padding: 28px 20px;
        border-radius: 22px;
    }

        .glo-contact-social h5 {
            font-size: 20px;
        }

    .glo-social-icons {
        gap: 14px;
        flex-wrap: wrap;
    }

        .glo-social-icons a {
            width: 52px;
            height: 52px;
            font-size: 18px;
        }

    /* Reduce background effects */

    .glo-contact-bg-shape {
        opacity: .25;
        filter: blur(90px);
    }

    .glo-contact-glow {
        display: none;
    }
}


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

@media (max-width:576px) {

    .glo-contact {
        padding: 80px 0;
    }

        .glo-contact .glo-section-tag {
            font-size: 11px;
            letter-spacing: 2px;
            padding: 8px 18px;
        }

        .glo-contact .glo-section-title h2 {
            font-size: 30px;
        }

        .glo-contact .glo-section-title p {
            font-size: 15px;
        }

    .glo-contact-card {
        flex-direction: column;
        text-align: center;
        align-items: center;
        padding: 22px;
    }

    .glo-contact-icon {
        margin-bottom: 5px;
    }

    .glo-contact-details {
        width: 100%;
    }

        .glo-contact-details h4 {
            margin-bottom: 10px;
        }

    .glo-contact-form-wrapper {
        padding: 24px 18px;
    }

    .glo-form-group input,
    .glo-form-group textarea {
        padding: 15px 16px;
    }

    .glo-contact-btn {
        height: 56px;
        font-size: 15px;
    }
}


/*==============================================================
    EXTRA SMALL DEVICES
==============================================================*/

@media (max-width:400px) {

    .glo-contact .glo-section-title h2 {
        font-size: 26px;
    }

    .glo-contact .glo-section-title p {
        font-size: 14px;
    }

    .glo-contact-card {
        padding: 18px;
    }

    .glo-contact-icon {
        width: 54px;
        height: 54px;
        font-size: 20px;
    }

    .glo-contact-details h4 {
        font-size: 18px;
    }

    .glo-contact-details p {
        font-size: 14px;
    }

    .glo-social-icons a {
        width: 46px;
        height: 46px;
        font-size: 16px;
    }
}

/*==============================================================

    OXIAURA GLOBAL PLUS
    PART 3

    PREMIUM ANIMATIONS
    SCROLL EFFECTS
    INTERACTIONS

==============================================================*/


/*==============================================================
    SECTION FADE
==============================================================*/

.glo-contact {
    animation: gloSectionFade 1.2s ease;
}

@keyframes gloSectionFade {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


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

.glo-section-title {
    animation: gloTitleUp 1s ease both;
}

@keyframes gloTitleUp {

    from {
        opacity: 0;
        transform: translateY(45px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/*==============================================================
    TAG FLOAT
==============================================================*/

.glo-section-tag {
    animation: gloTagFloat 5s ease-in-out infinite;
}

@keyframes gloTagFloat {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}


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

.glo-contact-card {
    will-change: transform;
}

    .glo-contact-card:hover {
        transform: translateY(-12px) scale(1.02);
    }


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

.glo-contact-icon {
    animation: gloIconPulse 3s ease-in-out infinite;
}

@keyframes gloIconPulse {

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

    50% {
        transform: scale(1.08);
    }
}


/*==============================================================
    SOCIAL ICON BOUNCE
==============================================================*/

.glo-social-icons a:hover {
    animation: gloBounce .6s;
}

@keyframes gloBounce {

    0% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    70% {
        transform: translateY(4px);
    }

    100% {
        transform: translateY(-8px);
    }
}


/*==============================================================
    INPUT GLOW
==============================================================*/

.glo-form-group input:focus,
.glo-form-group textarea:focus {
    animation: gloInputGlow .4s ease;
}

@keyframes gloInputGlow {

    from {
        box-shadow: none;
    }

    to {
        box-shadow: 0 0 0 5px rgba(212,175,55,.08), 0 0 30px rgba(212,175,55,.18);
    }
}


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

.glo-contact-btn {
    overflow: hidden;
    position: relative;
}

    .glo-contact-btn::before {
        content: "";
        position: absolute;
        left: -100%;
        top: 0;
        width: 50%;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.55), transparent);
        transform: skewX(-25deg);
    }

    .glo-contact-btn:hover::before {
        animation: gloShimmer .9s linear;
    }

@keyframes gloShimmer {

    from {
        left: -100%;
    }

    to {
        left: 160%;
    }
}


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

.glo-contact-btn:hover {
    transform: translateY(-5px);
}


/*==============================================================
    GOLD LINE
==============================================================*/

.glo-contact::before {
    animation: gloGoldLine 4s linear infinite;
}

@keyframes gloGoldLine {

    0% {
        opacity: .4;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: .4;
    }
}


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

.glo-contact-glow {
    animation: gloGlowPulse 8s ease-in-out infinite;
}

@keyframes gloGlowPulse {

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

    50% {
        transform: translate(-50%,-50%) scale(1.08);
        opacity: .55;
    }
}


/*==============================================================
    MAROON SHAPE
==============================================================*/

.glo-shape-one,
.glo-shape-two {
    animation-duration: 14s;
}


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

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

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto;
    }
}
/*==============================================================

    OXIAURA GLOBAL PLUS
    PART 3

    PREMIUM ANIMATIONS
    SCROLL EFFECTS
    INTERACTIONS

==============================================================*/


/*==============================================================
    SECTION FADE
==============================================================*/

.glo-contact {
    animation: gloSectionFade 1.2s ease;
}

@keyframes gloSectionFade {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


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

.glo-section-title {
    animation: gloTitleUp 1s ease both;
}

@keyframes gloTitleUp {

    from {
        opacity: 0;
        transform: translateY(45px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/*==============================================================
    TAG FLOAT
==============================================================*/

.glo-section-tag {
    animation: gloTagFloat 5s ease-in-out infinite;
}

@keyframes gloTagFloat {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}


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

.glo-contact-card {
    will-change: transform;
}

    .glo-contact-card:hover {
        transform: translateY(-12px) scale(1.02);
    }


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

.glo-contact-icon {
    animation: gloIconPulse 3s ease-in-out infinite;
}

@keyframes gloIconPulse {

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

    50% {
        transform: scale(1.08);
    }
}


/*==============================================================
    SOCIAL ICON BOUNCE
==============================================================*/

.glo-social-icons a:hover {
    animation: gloBounce .6s;
}

@keyframes gloBounce {

    0% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    70% {
        transform: translateY(4px);
    }

    100% {
        transform: translateY(-8px);
    }
}


/*==============================================================
    INPUT GLOW
==============================================================*/

.glo-form-group input:focus,
.glo-form-group textarea:focus {
    animation: gloInputGlow .4s ease;
}

@keyframes gloInputGlow {

    from {
        box-shadow: none;
    }

    to {
        box-shadow: 0 0 0 5px rgba(212,175,55,.08), 0 0 30px rgba(212,175,55,.18);
    }
}


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

.glo-contact-btn {
    overflow: hidden;
    position: relative;
}

    .glo-contact-btn::before {
        content: "";
        position: absolute;
        left: -100%;
        top: 0;
        width: 50%;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.55), transparent);
        transform: skewX(-25deg);
    }

    .glo-contact-btn:hover::before {
        animation: gloShimmer .9s linear;
    }

@keyframes gloShimmer {

    from {
        left: -100%;
    }

    to {
        left: 160%;
    }
}


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

.glo-contact-btn:hover {
    transform: translateY(-5px);
}


/*==============================================================
    GOLD LINE
==============================================================*/

.glo-contact::before {
    animation: gloGoldLine 4s linear infinite;
}

@keyframes gloGoldLine {

    0% {
        opacity: .4;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: .4;
    }
}


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

.glo-contact-glow {
    animation: gloGlowPulse 8s ease-in-out infinite;
}

@keyframes gloGlowPulse {

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

    50% {
        transform: translate(-50%,-50%) scale(1.08);
        opacity: .55;
    }
}


/*==============================================================
    MAROON SHAPE
==============================================================*/

.glo-shape-one,
.glo-shape-two {
    animation-duration: 14s;
}


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

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

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto;
    }
}


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

@media (max-width:768px) {

    .glo-contact-card:hover {
        transform: none;
    }

    .glo-contact-btn:hover {
        transform: none;
    }

    .glo-social-icons a:hover {
        animation: none;
    }

    .glo-contact-glow {
        display: none;
    }
}

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

@media (max-width:768px) {

    .glo-contact-card:hover {
        transform: none;
    }

    .glo-contact-btn:hover {
        transform: none;
    }

    .glo-social-icons a:hover {
        animation: none;
    }

    .glo-contact-glow {
        display: none;
    }
}
/*==============================================================
    LANDSCAPE MOBILE
==============================================================*/

@media (max-height:650px) {

    .glo-contact {
        padding: 70px 0;
    }

    .glo-contact-card {
        padding: 20px;
    }

    .glo-contact-form-wrapper {
        padding: 28px;
    }
}

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

.glo-contact-btn:hover {
    animation: gloButtonPulse 1.4s infinite;
}


@keyframes gloButtonPulse {

    0% {
        box-shadow: 0 0 0 0 rgba(212,175,55,.45);
    }

    70% {
        box-shadow: 0 0 0 18px rgba(212,175,55,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(212,175,55,0);
    }
}
/*==============================================================
    TABLET
==============================================================*/

@media (max-width:1200px) {

    .glo-category-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 30px;
    }

    .glo-section-title h2 {
        font-size: 50px;
    }
}


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

@media (max-width:768px) {

    .glo-categories {
        padding: 90px 0;
    }

    .glo-section-title {
        margin-bottom: 55px;
    }

        .glo-section-title h2 {
            font-size: 38px;
        }

        .glo-section-title p {
            font-size: 16px;
        }

    .glo-category-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .glo-category-image {
        position: relative;
        height: 270px;
        overflow: hidden;
    }
    glo-category-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: 1.2s;
    }


    .glo-category-content {
        padding: 28px;
    }

        .glo-category-content h3 {
            font-size: 24px;
        }
}
@media (max-width:768px) {

    .glo-category-content {
        position: relative;
        padding-top: 55px;
    }

    .glo-category-icon {
        top: -30px;
        left: 25px;
    }
}

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

@media (max-width:480px) {

    .glo-section-title h2 {
        font-size: 32px;
    }

    .glo-category-image {
        height: 210px;
    }

    .glo-category-content {
        padding: 22px;
    }

    .glo-category-icon {
        width: 58px;
        height: 58px;
        font-size: 22px;
    }
}


/*==============================================================
    LARGE DESKTOP
==============================================================*/

@media (min-width:1600px) {

    .glo-category-grid {
        gap: 42px;
    }

    .glo-category-image {
        height: 290px;
    }

    .glo-section-title h2 {
        font-size: 70px;
    }
}
@media (max-width:480px) {

    .glo-category-content {
        padding-top: 50px;
    }

    .glo-category-icon {
        width: 56px;
        height: 56px;
        top: -28px;
        left: 20px;
    }
}

/*==============================================================
    ULTRA WIDE
==============================================================*/

@media (min-width:1920px) {

    .glo-categories {
        padding: 170px 0;
    }

    .glo-category-image {
        height: 320px;
    }
}

/*==============================================================
    WHY JOIN GLOBAL PLUS
==============================================================*/

.glo-whyjoin {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    background: linear-gradient( 135deg, #082E25 0%, #0A3E30 45%, #0E6A4C 100% );
}


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

    .glo-whyjoin::before {
        content: "";
        position: absolute;
        top: -250px;
        left: -250px;
        width: 700px;
        height: 700px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(200,155,60,.18), transparent 70% );
        filter: blur(80px);
    }

    .glo-whyjoin::after {
        content: "";
        position: absolute;
        right: -200px;
        bottom: -200px;
        width: 650px;
        height: 650px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(255,255,255,.05), transparent 72% );
        filter: blur(90px);
    }


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

.glo-whyjoin-wrapper {
    display: grid;
    grid-template-columns: 1.1fr 2fr 1fr;
    gap: 50px;
    align-items: center;
    position: relative;
    z-index: 2;
}


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

.glo-whyjoin-title h2 {
    font-family: "Cormorant Garamond",serif;
    font-size: 58px;
    color: #ffffff;
    line-height: 1.1;
    margin: 18px 0 24px;
}

.glo-whyjoin-title p {
    color: rgba(255,255,255,.82);
    line-height: 1.9;
    font-size: 17px;
}


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

.glo-whyjoin-stats {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 28px;
}


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

.glo-stat-card {
    position: relative;
    padding: 35px 20px;
    border-radius: 28px;
    text-align: center;
    overflow: hidden;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.12);
    transition: .45s;
    box-shadow: 0 15px 35px rgba(0,0,0,.18);
}


    /*==============================================================
    GOLD SHINE
==============================================================*/

    .glo-stat-card::before {
        content: "";
        position: absolute;
        top: -150%;
        left: -50%;
        width: 45%;
        height: 300%;
        transform: rotate(28deg);
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.35), transparent );
    }

    .glo-stat-card:hover::before {
        animation: gloStatShine 1.3s;
    }

@keyframes gloStatShine {

    from {
        left: -50%;
    }

    to {
        left: 170%;
    }
}


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

.glo-stat-card:hover {
    transform: translateY(-10px);
    border-color: rgba(200,155,60,.45);
    box-shadow: 0 25px 60px rgba(0,0,0,.30), 0 0 35px rgba(200,155,60,.22);
}


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

.glo-stat-icon {
    width: 74px;
    height: 74px;
    margin: 0 auto 22px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    color: #fff;
    background: linear-gradient( 135deg, #D8B55A, #B9851E );
    box-shadow: 0 10px 30px rgba(200,155,60,.45);
}


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

.glo-counter {
    font-family: "Montserrat",sans-serif;
    font-size: 36px;
    color: #D8B55A;
    margin-bottom: 10px;
    font-weight: 700;
}


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

.glo-stat-card span {
    display: block;
    color: rgba(255,255,255,.82);
    font-size: 15px;
    line-height: 1.7;
}


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

.glo-join-card {
    position: relative;
    padding: 45px;
    border-radius: 34px;
    overflow: hidden;
    background: linear-gradient( 135deg, #6D1736, #4B1024 );
    color: #fff;
    box-shadow: 0 30px 70px rgba(0,0,0,.35);
}


    .glo-join-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 120deg, rgba(255,255,255,.10), transparent 45% );
    }


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

    .glo-join-card span {
        display: inline-block;
        color: #E6C66A;
        letter-spacing: 3px;
        font-size: 13px;
        text-transform: uppercase;
        margin-bottom: 18px;
    }

    .glo-join-card h3 {
        font-family: "Playfair Display",serif;
        font-size: 38px;
        line-height: 1.2;
        margin-bottom: 18px;
    }

    .glo-join-card p {
        line-height: 1.9;
        color: rgba(255,255,255,.88);
        margin-bottom: 35px;
    }


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

    .glo-join-card .glo-btn {
        background: #D8B55A;
        color: #082E25;
        border: none;
        font-weight: 700;
    }

        .glo-join-card .glo-btn:hover {
            background: #ffffff;
            color: #5A1730;
        }


/*==============================================================
    FLOATING ANIMATION
==============================================================*/

.glo-stat-card {
    animation: gloFloatStats 5s ease-in-out infinite;
}

    .glo-stat-card:nth-child(2) {
        animation-delay: .5s;
    }

    .glo-stat-card:nth-child(3) {
        animation-delay: 1s;
    }

    .glo-stat-card:nth-child(4) {
        animation-delay: 1.5s;
    }

@keyframes gloFloatStats {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}
/*==============================================================
    WHY JOIN
    PREMIUM DECORATION
==============================================================*/

.glo-whyjoin-grid {
    position: relative;
    z-index: 2;
}

/*==============================================================
    GOLD PARTICLES
==============================================================*/

.glo-whyjoin-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

    .glo-whyjoin-particles span {
        position: absolute;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #D6AE55;
        opacity: .7;
        box-shadow: 0 0 12px rgba(214,174,85,.8);
        animation: gloWhyParticle 12s linear infinite;
    }

        .glo-whyjoin-particles span:nth-child(1) {
            left: 8%;
            top: 18%;
        }

        .glo-whyjoin-particles span:nth-child(2) {
            left: 28%;
            top: 70%;
            animation-duration: 16s;
        }

        .glo-whyjoin-particles span:nth-child(3) {
            right: 18%;
            top: 20%;
            animation-duration: 13s;
        }

        .glo-whyjoin-particles span:nth-child(4) {
            right: 8%;
            bottom: 18%;
            animation-duration: 15s;
        }

        .glo-whyjoin-particles span:nth-child(5) {
            left: 52%;
            top: 10%;
            animation-duration: 18s;
        }

@keyframes gloWhyParticle {

    0% {
        transform: translateY(40px);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: translateY(-120px);
        opacity: 0;
    }
}

/*==============================================================
    CARD BORDER GLOW
==============================================================*/

.glo-stat-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 28px;
    border: 1px solid transparent;
    transition: .45s;
}

.glo-stat-card:hover::after {
    border-color: rgba(214,174,85,.45);
}

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

.glo-stat-icon {
    transition: transform .4s ease, box-shadow .4s ease;
}

.glo-stat-card:hover .glo-stat-icon {
    transform: rotate(-8deg) scale(1.08);
    box-shadow: 0 18px 40px rgba(214,174,85,.45);
}

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

.glo-join-card {
    transition: transform .45s ease, box-shadow .45s ease;
}

    .glo-join-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 35px 80px rgba(0,0,0,.40);
    }

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

.glo-whyjoin-title,
.glo-stat-card,
.glo-join-card {
    opacity: 0;
    transform: translateY(50px);
    animation: gloWhyFade .9s ease forwards;
}

    .glo-stat-card:nth-child(1) {
        animation-delay: .2s;
    }

    .glo-stat-card:nth-child(2) {
        animation-delay: .35s;
    }

    .glo-stat-card:nth-child(3) {
        animation-delay: .5s;
    }

    .glo-stat-card:nth-child(4) {
        animation-delay: .65s;
    }

.glo-join-card {
    animation-delay: .8s;
}

@keyframes gloWhyFade {

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@media(max-width:1400px) {

    .glo-whyjoin-wrapper {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .glo-whyjoin-title {
        text-align: center;
        max-width: 760px;
        margin: auto;
    }
}

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

@media(max-width:1100px) {

    .glo-whyjoin-stats {
        grid-template-columns: repeat(2,1fr);
    }
}

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

@media(max-width:768px) {

    .glo-whyjoin {
        padding: 90px 0;
    }

    .glo-whyjoin-title h2 {
        font-size: 42px;
    }

    .glo-whyjoin-title p {
        font-size: 16px;
    }

    .glo-whyjoin-stats {
        gap: 22px;
    }

    .glo-stat-card {
        padding: 30px 20px;
    }

    .glo-counter {
        font-size: 30px;
    }

    .glo-join-card {
        padding: 35px;
    }

        .glo-join-card h3 {
            font-size: 32px;
        }
}

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

@media(max-width:576px) {

    .glo-whyjoin-title h2 {
        font-size: 34px;
    }

    .glo-whyjoin-stats {
        grid-template-columns: 1fr;
    }

    .glo-stat-icon {
        width: 64px;
        height: 64px;
        font-size: 24px;
    }

    .glo-counter {
        font-size: 28px;
    }

    .glo-join-card {
        padding: 28px;
    }

        .glo-join-card h3 {
            font-size: 28px;
        }
}

/*==============================================================
    LARGE DESKTOP
==============================================================*/

@media(min-width:1700px) {

    .glo-whyjoin {
        padding: 150px 0;
    }

    .glo-whyjoin-title h2 {
        font-size: 70px;
    }

    .glo-counter {
        font-size: 46px;
    }
}

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

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

    .glo-stat-card,
    .glo-join-card,
    .glo-whyjoin-title,
    .glo-stat-icon {
        animation: none;
        transition: none;
        transform: none;
    }
}


/*==============================================================
    E-COMMERCE PLATFORM
==============================================================*/

.glo-platform {
    padding-top: 50px;
    padding-bottom: 20px;
    background: #F8F8F5;
}

/*==============================================================*/

.glo-platform-wrapper {
    display: grid;
    grid-template-columns: 3fr 1fr;
    border-radius: 36px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,.12);
    background: #ffffff;
}

/*==============================================================*/

.glo-platform-image {
    overflow: hidden;
    background: #062E25;
}

    .glo-platform-image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

/*==============================================================*/

.glo-platform-content {
    padding: 55px 45px;
    background: linear-gradient( 135deg, #7B1E3D, #56152D );
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/*==============================================================*/

.glo-platform-tag {
    color: #E0BE68;
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 15px;
    font-weight: 600;
}

/*==============================================================*/

.glo-platform-content h2 {
    font-family: "Cormorant Garamond",serif;
    font-size: 46px;
    line-height: 1.15;
    margin-bottom: 22px;
}

/*==============================================================*/

.glo-platform-content p {
    font-size: 16px;
    line-height: 1.9;
    color: rgba(255,255,255,.88);
    margin-bottom: 35px;
}

/*==============================================================*/

.glo-platform-list {
    list-style: none;
    padding: 0;
    margin: 0 0 35px;
}

    .glo-platform-list li {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 18px;
        font-size: 16px;
    }

    .glo-platform-list i {
        color: #E0BE68;
    }

/*==============================================================*/

.glo-platform-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    align-self: flex-start;
    padding: 16px 34px;
    border-radius: 50px;
    text-decoration: none;
    color: #ffffff;
    border: 1px solid rgba(224,190,104,.45);
    background: rgba(255,255,255,.06);
    transition: .35s;
}

    .glo-platform-btn:hover {
        background: #E0BE68;
        color: #56152D;
    }

    .glo-platform-btn i {
        transition: .35s;
    }

    .glo-platform-btn:hover i {
        transform: translateX(6px);
    }

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

@media(max-width:1100px) {

    .glo-platform-wrapper {
        grid-template-columns: 1fr;
    }
}

@media(max-width:768px) {

    .glo-platform {
        padding: 80px 0;
    }

    .glo-platform-content {
        padding: 40px 30px;
    }

        .glo-platform-content h2 {
            font-size: 36px;
        }
}

@media(max-width:480px) {

    .glo-platform-content {
        padding: 30px 24px;
    }

        .glo-platform-content h2 {
            font-size: 30px;
        }
}
/*==============================================================
FOOTER
==============================================================*/

.glob-footer {
    position: relative;
    overflow: hidden;
    padding: 120px 0 35px;
    background: linear-gradient( 180deg, #083328, #06261E);
}

/*==============================================================*/

.glob-footer-glow {
    position: absolute;
    top: -250px;
    left: 50%;
    transform: translateX(-50%);
    width: 1700px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(201,155,60,.25), transparent 70%);
    filter: blur(80px);
}

/*==============================================================*/

.glob-footer-pattern {
    position: absolute;
    inset: 0;
    background: radial-gradient( rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 35px 35px;
    opacity: .4;
}

/*==============================================================*/

.glob-footer-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1.4fr;
    gap: 55px;
}

/*==============================================================*/

.glob-company img {
    width: 230px;
    margin-bottom: 28px;
}

.glob-company p {
    color: rgba(255,255,255,.78);
    line-height: 1.9;
    margin-bottom: 30px;
}

/*==============================================================*/

.glob-social {
    display: flex;
    gap: 15px;
}

    .glob-social a {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        color: #D8B55A;
        border: 1px solid rgba(216,181,90,.25);
        background: rgba(255,255,255,.04);
        transition: .4s;
    }

        .glob-social a:hover {
            transform: translateY(-6px);
            background: #D8B55A;
            color: #083328;
        }

/*==============================================================*/

.glob-links h3,
.glob-newsletter h3 {
    color: #D8B55A;
    margin-bottom: 28px;
    font-size: 28px;
    font-family: "Cormorant Garamond",serif;
}

.glob-links ul {
    list-style: none;
    padding: 0;
}

.glob-links li {
    margin-bottom: 16px;
}

.glob-links a {
    color: rgba(255,255,255,.76);
    text-decoration: none;
    transition: .35s;
}

    .glob-links a:hover {
        color: #D8B55A;
        padding-left: 10px;
    }

/*==============================================================*/

.glob-newsletter {
    padding: 35px;
    border-radius: 30px;
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.10);
}

    .glob-newsletter p {
        color: rgba(255,255,255,.75);
        line-height: 1.8;
        margin-bottom: 25px;
    }

    .glob-newsletter input {
        width: 100%;
        height: 55px;
        border: none;
        outline: none;
        border-radius: 40px;
        padding: 0 22px;
        margin-bottom: 18px;
        background: rgba(255,255,255,.08);
        color: #fff;
    }

        .glob-newsletter input::placeholder {
            color: rgba(255,255,255,.45);
        }

    .glob-newsletter button {
        width: 100%;
        height: 55px;
        border: none;
        border-radius: 40px;
        cursor: pointer;
        color: #fff;
        font-weight: 600;
        background: linear-gradient( 135deg, #C89B3C, #A9771F);
        transition: .35s;
    }

        .glob-newsletter button:hover {
            transform: translateY(-3px);
            box-shadow: 0 18px 40px rgba(201,155,60,.30);
        }

/*==============================================================*/

.glob-bottom {
    position: relative;
    z-index: 2;
    margin-top: 80px;
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid rgba(255,255,255,.08);
}

    .glob-bottom p {
        color: rgba(255,255,255,.55);
    }

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

@media(max-width:1200px) {

    .glob-footer-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:768px) {

    .glob-footer {
        padding: 80px 0 30px;
    }

    .glob-footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .glob-bottom {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}

/*==============================================================
    CONTACT PAGE VARIABLES
==============================================================*/

:root {
    --globe-primary: #0E6A4C;
    --globe-primary-dark: #062E25;
    --globe-gold: #C89B3C;
    --globe-gold-dark: #A9771F;
    --globe-maroon: #6B1D39;
    --globe-white: #FFFFFF;
    --globe-light: #F8F8F5;
    --globe-text: #2E2E2E;
}

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

.globe-contact-hero,
.globe-info,
.globe-form,
.globe-hours,
.globe-map,
.globe-cta {
    position: relative;
    overflow: hidden;
}

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

    .globe-contact-hero .glo-container,
    .globe-info .glo-container,
    .globe-form .glo-container,
    .globe-hours .glo-container,
    .globe-map .glo-container,
    .globe-cta .glo-container {
        position: relative;
        z-index: 5;
    }

/*==============================================================
    SECTION SPACING
==============================================================*/

.globe-info {
    padding: 120px 0;
}

.globe-form {
    padding: 120px 0;
}

.globe-hours {
    padding: 120px 0;
}

.globe-map {
    padding: 0 0 120px;
}

.globe-cta {
    padding: 0 0 140px;
}

/*==============================================================
    SECTION TAG
==============================================================*/

.globe-contact-tag {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 26px;
    border-radius: 50px;
    background: rgba(200,155,60,.10);
    border: 1px solid rgba(200,155,60,.20);
    color: var(--globe-gold);
    font-family: "Montserrat",sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    backdrop-filter: blur(15px);
}

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

.globe-info h2,
.globe-form h2,
.globe-hours h2,
.globe-cta h2 {
    font-family: "Cormorant Garamond",serif;
    font-size: 58px;
    color: var(--globe-primary-dark);
    line-height: 1.1;
    margin-bottom: 20px;
}

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

.globe-info p,
.globe-form p,
.globe-hours p,
.globe-cta p {
    font-family: "Poppins",sans-serif;
    color: #666;
    line-height: 1.9;
}

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

.globe-glass {
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 32px;
}

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

.globe-card {
    background: #fff;
    border-radius: 30px;
    border: 1px solid rgba(200,155,60,.15);
    box-shadow: 0 30px 80px rgba(0,0,0,.08);
    transition: .45s;
}

    .globe-card:hover {
        transform: translateY(-10px);
        border-color: rgba(200,155,60,.35);
        box-shadow: 0 40px 100px rgba(0,0,0,.12), 0 0 30px rgba(200,155,60,.20);
    }

/*==============================================================
    GOLD DIVIDER
==============================================================*/

.globe-divider {
    width: 100px;
    height: 4px;
    border-radius: 20px;
    background: linear-gradient( 90deg, var(--globe-gold), var(--globe-gold-dark) );
}

/*==============================================================
    GOLD GLOW
==============================================================*/

.globe-gold-glow {
    position: absolute;
    width: 550px;
    height: 550px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(200,155,60,.18), transparent 70% );
    filter: blur(90px);
    pointer-events: none;
}

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

.globe-form-image img {
    width: 100%;
    display: block;
    border-radius: 35px;
    object-fit: cover;
}

/*==============================================================
    MAP
==============================================================*/

.globe-map iframe {
    width: 100%;
    height: 600px;
    border: none;
    border-radius: 40px;
    display: block;
}

/*==============================================================
    TRANSITIONS
==============================================================*/

.globe-info-card,
.globe-form-wrapper,
.globe-hour-card,
.globe-cta-card {
    transition: .45s ease;
}

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

@media(max-width:1200px) {

    .globe-info,
    .globe-form,
    .globe-hours {
        padding: 90px 0;
    }
}

@media(max-width:992px) {

    .globe-map iframe {
        height: 450px;
    }
}

@media(max-width:768px) {

    .globe-info,
    .globe-form,
    .globe-hours {
        padding: 70px 0;
    }

    .globe-map {
        padding-bottom: 70px;
    }

    .globe-cta {
        padding-bottom: 80px;
    }

    .globe-map iframe {
        height: 340px;
        border-radius: 25px;
    }

    .globe-info h2,
    .globe-form h2,
    .globe-hours h2,
    .globe-cta h2 {
        font-size: 42px;
    }
}

@media(max-width:576px) {

    .globe-contact-tag {
        font-size: 11px;
        padding: 10px 20px;
        letter-spacing: 2px;
    }

    .globe-info h2,
    .globe-form h2,
    .globe-hours h2,
    .globe-cta h2 {
        font-size: 34px;
    }
}

/*==============================================================
    CONTACT PAGE FOUNDATION
==============================================================*/

:root {
    --gpcon-primary: #0E6A4C;
    --gpcon-primary-dark: #062E25;
    --gpcon-gold: #C89B3C;
    --gpcon-gold-dark: #A9771F;
    --gpcon-maroon: #6D1736;
    --gpcon-white: #FFFFFF;
    --gpcon-light: #F7F8F5;
    --gpcon-text: #4A4A4A;
    --gpcon-shadow: 0 25px 80px rgba(0,0,0,.08);
    --gpcon-radius: 32px;
}

/*==============================================================
    MAIN SECTION
==============================================================*/

.gpcon-section {
    position: relative;
    overflow: hidden;
    background: var(--gpcon-light);
}

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

.gpcon-container {
    position: relative;
    width: 92%;
    max-width: 1600px;
    margin: auto;
}

/*==============================================================
    SECTION SPACING
==============================================================*/

.gpcon-section-padding {
    padding: 140px 0;
}

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

.gpcon-title {
    font-family: "Cormorant Garamond",serif;
    font-size: 68px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--gpcon-primary-dark);
    margin-bottom: 25px;
}

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

.gpcon-subtitle {
    font-family: "Playfair Display",serif;
    font-size: 22px;
    color: var(--gpcon-gold);
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 25px;
}

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

.gpcon-description {
    max-width: 760px;
    font-family: "Poppins",sans-serif;
    font-size: 18px;
    line-height: 1.9;
    color: #666;
}

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

.gpcon-glass {
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 32px;
    box-shadow: var(--gpcon-shadow);
}

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

.gpcon-card {
    background: #fff;
    border-radius: 32px;
    border: 1px solid rgba(200,155,60,.15);
    box-shadow: var(--gpcon-shadow);
    transition: .4s;
}

    .gpcon-card:hover {
        transform: translateY(-8px);
        border-color: rgba(200,155,60,.35);
        box-shadow: 0 35px 90px rgba(0,0,0,.12), 0 0 25px rgba(200,155,60,.15);
    }

/*==============================================================
    GOLD DIVIDER
==============================================================*/

.gpcon-divider {
    width: 110px;
    height: 4px;
    margin: 30px 0;
    border-radius: 50px;
    background: linear-gradient( 90deg, var(--gpcon-gold), var(--gpcon-gold-dark) );
}

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

.gpcon-btn-group {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

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

.gpcon-bg-glow {
    position: absolute;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(200,155,60,.14), transparent 72% );
    filter: blur(100px);
    pointer-events: none;
}

/*==============================================================
    GOLD LINE
==============================================================*/

.gpcon-gold-line {
    position: absolute;
    height: 2px;
    background: linear-gradient( 90deg, transparent, rgba(200,155,60,.5), transparent );
}

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

.gpcon-image {
    position: relative;
    overflow: hidden;
    border-radius: 40px;
}

    .gpcon-image img {
        width: 100%;
        display: block;
        object-fit: cover;
    }

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

.gpcon-fade {
    animation: gpconFade .8s ease forwards;
}

@keyframes gpconFade {

    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@media(max-width:1200px) {

    .gpcon-title {
        font-size: 56px;
    }
}

@media(max-width:992px) {

    .gpcon-section-padding {
        padding: 100px 0;
    }
}

@media(max-width:768px) {

    .gpcon-title {
        font-size: 44px;
    }

    .gpcon-subtitle {
        font-size: 18px;
        letter-spacing: 3px;
    }

    .gpcon-description {
        font-size: 16px;
    }
}

@media(max-width:576px) {

    .gpcon-title {
        font-size: 34px;
    }

    .gpcon-btn-group {
        flex-direction: column;
    }
}

/*==============================================================
    PART 2A.1A
    LUXURY HERO
==============================================================*/

.gpcon-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #041F19;
    isolation: isolate;
}

    /*==============================================================
    HERO BACKGROUND IMAGE
==============================================================*/

    .gpcon-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient( 90deg, rgba(4,31,25,.92), rgba(4,31,25,.82), rgba(4,31,25,.55) ), url("../images/globalplus/contact/contact-hero-bg.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: -5;
    }

/*==============================================================
    WORLD MAP WATERMARK
==============================================================*/

.gpcon-world-map {
    position: absolute;
    inset: 0;
    background-image: url("../images/globalplus/contact/world-map.png");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 65%;
    opacity: .08;
    pointer-events: none;
    z-index: -4;
}

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

.gpcon-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 135deg, rgba(7,48,37,.55), rgba(7,48,37,.18), rgba(0,0,0,0) );
    z-index: -3;
}

/*==============================================================
    GOLD AMBIENT LIGHT
==============================================================*/

.gpcon-gold-light {
    position: absolute;
    top: -220px;
    right: -180px;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(200,155,60,.18), transparent 70% );
    filter: blur(120px);
    pointer-events: none;
    z-index: -2;
}

/*==============================================================
    EMERALD GLOW
==============================================================*/

.gpcon-green-light {
    position: absolute;
    bottom: -260px;
    left: -220px;
    width: 650px;
    height: 650px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(14,106,76,.25), transparent 70% );
    filter: blur(110px);
    pointer-events: none;
    z-index: -2;
}

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

.gpcon-hero .glo-container {
    position: relative;
    width: 92%;
    max-width: 1600px;
    margin: auto;
    z-index: 5;
}

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

.gpcon-hero-wrapper {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 90px;
    min-height: 100vh;
    padding-top: 140px;
    padding-bottom: 90px;
}

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

.gpcon-content {
    position: relative;
    z-index: 10;
}

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

.gpcon-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 700px;
}

    /*==============================================================
    VISUAL BACKDROP
==============================================================*/

    .gpcon-visual::before {
        content: "";
        position: absolute;
        width: 560px;
        height: 560px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(255,255,255,.05), transparent 70% );
        filter: blur(70px);
    }

    /*==============================================================
    GLASS CIRCLE
==============================================================*/

    .gpcon-visual::after {
        content: "";
        position: absolute;
        width: 620px;
        height: 620px;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,.08);
        box-shadow: inset 0 0 60px rgba(255,255,255,.05), 0 0 80px rgba(200,155,60,.08);
    }

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

.gpcon-divider {
    width: 110px;
    height: 4px;
    border-radius: 50px;
    background: linear-gradient( 90deg, #C89B3C, #A9771F );
}

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

.gpcon-content,
.gpcon-visual {
    animation: gpconHeroFade 1s ease forwards;
}

@keyframes gpconHeroFade {

    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@media(max-width:1200px) {

    .gpcon-hero-wrapper {
        gap: 60px;
    }
}

@media(max-width:992px) {

    .gpcon-hero-wrapper {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 70px;
        padding-top: 170px;
    }

    .gpcon-content {
        max-width: 760px;
        margin: auto;
    }

    .gpcon-world-map {
        background-size: 90%;
        background-position: center;
    }
}

@media(max-width:768px) {

    .gpcon-hero {
        min-height: auto;
    }

    .gpcon-hero-wrapper {
        min-height: auto;
        padding-top: 150px;
        padding-bottom: 100px;
    }

    .gpcon-visual {
        min-height: 480px;
    }

        .gpcon-visual::after {
            width: 420px;
            height: 420px;
        }
}

@media(max-width:576px) {

    .gpcon-hero-wrapper {
        gap: 50px;
    }

    .gpcon-visual {
        min-height: 340px;
    }

        .gpcon-visual::after {
            width: 300px;
            height: 300px;
        }
}

/*==============================================================
    PART 2A.1B
    HERO CONTENT
==============================================================*/

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

.gpcon-tag {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 28px;
    border-radius: 50px;
    background: rgba(200,155,60,.10);
    border: 1px solid rgba(200,155,60,.25);
    color: #C89B3C;
    font-family: "Montserrat",sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
    margin-bottom: 30px;
}

    .gpcon-tag::before {
        content: "";
        width: 28px;
        height: 2px;
        background: #C89B3C;
    }

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

.gpcon-title {
    font-family: "Cormorant Garamond",serif;
    font-size: 82px;
    line-height: 1.05;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 28px;
    text-shadow: 0 12px 30px rgba(0,0,0,.25);
}

    .gpcon-title span {
        display: block;
        color: #C89B3C;
    }

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

.gpcon-description {
    max-width: 650px;
    font-family: "Poppins",sans-serif;
    font-size: 19px;
    line-height: 1.9;
    color: rgba(255,255,255,.82);
    margin-bottom: 45px;
}

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

.gpcon-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 70px;
}

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

.gpcon-btn-primary {
    min-width: 210px;
    height: 60px;
    border-radius: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #fff;
    background: linear-gradient( 135deg, #C89B3C, #A9771F );
    font-weight: 600;
    transition: .4s;
    box-shadow: 0 20px 45px rgba(200,155,60,.30);
}

    .gpcon-btn-primary:hover {
        transform: translateY(-4px);
        box-shadow: 0 30px 60px rgba(200,155,60,.45);
    }

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

.gpcon-btn-outline {
    min-width: 210px;
    height: 60px;
    border-radius: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #FFFFFF;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(15px);
    transition: .4s;
}

    .gpcon-btn-outline:hover {
        background: #FFFFFF;
        color: #062E25;
    }

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

.gpcon-stats {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
}

.gpcon-stat {
    position: relative;
    padding-right: 45px;
}

    .gpcon-stat:not(:last-child)::after {
        content: "";
        position: absolute;
        right: 0;
        top: 10px;
        width: 1px;
        height: 55px;
        background: rgba(255,255,255,.12);
    }

    .gpcon-stat h3 {
        font-family: "Cormorant Garamond",serif;
        font-size: 46px;
        color: #C89B3C;
        margin-bottom: 8px;
    }

    .gpcon-stat span {
        font-family: "Poppins",sans-serif;
        font-size: 15px;
        color: rgba(255,255,255,.72);
    }

/*==============================================================
    SCROLL INDICATOR
==============================================================*/

.gpcon-scroll {
    position: absolute;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 20;
}

    .gpcon-scroll span {
        color: #FFFFFF;
        font-size: 12px;
        letter-spacing: 4px;
        text-transform: uppercase;
    }

.gpcon-scroll-line {
    width: 2px;
    height: 70px;
    border-radius: 20px;
    background: linear-gradient( to bottom, #C89B3C, transparent );
    animation: gpconScroll 2s infinite;
}

@keyframes gpconScroll {

    0% {
        opacity: .2;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: .2;
        transform: translateY(12px);
    }
}

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

@media(max-width:1200px) {

    .gpcon-title {
        font-size: 68px;
    }
}

@media(max-width:992px) {

    .gpcon-title {
        font-size: 58px;
    }

    .gpcon-description {
        margin-left: auto;
        margin-right: auto;
    }

    .gpcon-buttons {
        justify-content: center;
    }

    .gpcon-stats {
        justify-content: center;
    }
}

@media(max-width:768px) {

    .gpcon-title {
        font-size: 46px;
    }

    .gpcon-description {
        font-size: 17px;
    }

    .gpcon-buttons {
        flex-direction: column;
        align-items: center;
    }

    .gpcon-btn-primary,
    .gpcon-btn-outline {
        width: 100%;
        max-width: 320px;
    }

    .gpcon-stat {
        padding-right: 0;
    }

        .gpcon-stat::after {
            display: none;
        }
}

@media(max-width:576px) {

    .gpcon-title {
        font-size: 38px;
        line-height: 1.15;
    }

    .gpcon-stats {
        flex-direction: column;
        align-items: center;
        gap: 25px;
        text-align: center;
    }

    .gpcon-scroll {
        display: none;
    }
}

/*==============================================================
    PART 2A.1C
    LUXURY VISUAL
==============================================================*/

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

.gpcon-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 760px;
}

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

.gpcon-image {
    position: relative;
    width: 580px;
    border-radius: 40px;
    overflow: hidden;
    z-index: 5;
    box-shadow: 0 45px 120px rgba(0,0,0,.30);
    animation: gpconImageFloat 7s ease-in-out infinite;
}

    .gpcon-image img {
        width: 100%;
        display: block;
        object-fit: cover;
    }

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

    .gpcon-image::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 40px;
        border: 1px solid rgba(255,255,255,.15);
        pointer-events: none;
    }

    /*==============================================================
    GOLD OUTER FRAME
==============================================================*/

    .gpcon-image::after {
        content: "";
        position: absolute;
        inset: 12px;
        border-radius: 30px;
        border: 1px solid rgba(200,155,60,.25);
    }

/*==============================================================
    GOLD GLOW
==============================================================*/

.gpcon-image-glow {
    position: absolute;
    width: 650px;
    height: 650px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(200,155,60,.22), transparent 72% );
    filter: blur(100px);
    z-index: 1;
}

/*==============================================================
    EMERALD GLOW
==============================================================*/

.gpcon-image-green {
    position: absolute;
    width: 550px;
    height: 550px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(14,106,76,.22), transparent 70% );
    bottom: -100px;
    right: -60px;
    filter: blur(90px);
}

/*==============================================================
    ORBIT RING
==============================================================*/

.gpcon-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.08);
    animation: gpconRotate 24s linear infinite;
}

.gpcon-ring-one {
    width: 640px;
    height: 640px;
}

.gpcon-ring-two {
    width: 760px;
    height: 760px;
    animation-direction: reverse;
    animation-duration: 36s;
}

.gpcon-ring-three {
    width: 880px;
    height: 880px;
    animation-duration: 48s;
}

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

.gpcon-floating {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 26px;
    min-width: 240px;
    border-radius: 24px;
    background: rgba(255,255,255,.78);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.35);
    box-shadow: 0 25px 60px rgba(0,0,0,.12);
    z-index: 10;
    animation: gpconCardFloat 6s ease-in-out infinite;
}

    .gpcon-floating i {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient( 135deg, #0E6A4C, #062E25 );
        color: #fff;
        font-size: 22px;
        flex-shrink: 0;
    }

    .gpcon-floating h4 {
        font-family: "Cormorant Garamond",serif;
        font-size: 26px;
        color: #062E25;
        margin-bottom: 6px;
    }

    .gpcon-floating span {
        font-size: 14px;
        color: #666;
    }

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

.gpcon-one {
    top: 40px;
    left: -90px;
}

.gpcon-two {
    top: 280px;
    right: -90px;
    animation-delay: 2s;
}

.gpcon-three {
    bottom: 30px;
    left: -50px;
    animation-delay: 1s;
}

/*==============================================================
    FLOATING ANIMATION
==============================================================*/

@keyframes gpconImageFloat {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-16px);
    }
}

@keyframes gpconCardFloat {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

@keyframes gpconRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

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

@media(max-width:1200px) {

    .gpcon-image {
        width: 500px;
    }
}

@media(max-width:992px) {

    .gpcon-visual {
        min-height: 620px;
    }

    .gpcon-image {
        width: 460px;
    }

    .gpcon-floating {
        min-width: 220px;
    }
}

@media(max-width:768px) {

    .gpcon-ring {
        display: none;
    }

    .gpcon-floating {
        display: none;
    }

    .gpcon-image {
        width: 100%;
        max-width: 420px;
    }
}

@media(max-width:576px) {

    .gpcon-visual {
        min-height: 420px;
    }

    .gpcon-image {
        border-radius: 28px;
    }
}

/*==============================================================
    PART 2A.1D
    DECORATIVE EFFECTS
==============================================================*/

/*==============================================================
    GOLD LIGHT RAYS
==============================================================*/

.gpcon-light-rays {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

    .gpcon-light-rays::before {
        content: "";
        position: absolute;
        top: -250px;
        right: -150px;
        width: 900px;
        height: 900px;
        background: conic-gradient( from 180deg, transparent, rgba(200,155,60,.10), transparent, rgba(255,255,255,.05), transparent );
        filter: blur(50px);
        animation: gpconRotateSlow 40s linear infinite;
    }

    .gpcon-light-rays::after {
        content: "";
        position: absolute;
        bottom: -350px;
        left: -250px;
        width: 700px;
        height: 700px;
        background: radial-gradient( circle, rgba(14,106,76,.20), transparent 72% );
        filter: blur(90px);
    }

/*==============================================================
    GOLD PARTICLES
==============================================================*/

.gpcon-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

    .gpcon-particles span {
        position: absolute;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #C89B3C;
        box-shadow: 0 0 12px rgba(200,155,60,.8);
        animation: gpconParticles linear infinite;
    }

        /*==============================================================
    PARTICLE POSITIONS
==============================================================*/

        .gpcon-particles span:nth-child(1) {
            top: 12%;
            left: 10%;
            animation-duration: 15s;
        }

        .gpcon-particles span:nth-child(2) {
            top: 25%;
            left: 85%;
            animation-duration: 18s;
        }

        .gpcon-particles span:nth-child(3) {
            top: 45%;
            left: 20%;
            animation-duration: 20s;
        }

        .gpcon-particles span:nth-child(4) {
            top: 62%;
            left: 75%;
            animation-duration: 16s;
        }

        .gpcon-particles span:nth-child(5) {
            top: 78%;
            left: 40%;
            animation-duration: 22s;
        }

        .gpcon-particles span:nth-child(6) {
            top: 18%;
            left: 55%;
            animation-duration: 17s;
        }

        .gpcon-particles span:nth-child(7) {
            top: 88%;
            left: 88%;
            animation-duration: 19s;
        }

        .gpcon-particles span:nth-child(8) {
            top: 70%;
            left: 8%;
            animation-duration: 21s;
        }

/*==============================================================
    GLASS REFLECTION
==============================================================*/

.gpcon-glass-reflection {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 3;
}

    .gpcon-glass-reflection::before {
        content: "";
        position: absolute;
        top: -50%;
        left: -20%;
        width: 40%;
        height: 220%;
        transform: rotate(25deg);
        background: linear-gradient( to right, transparent, rgba(255,255,255,.08), transparent );
        animation: gpconGlassSweep 12s ease-in-out infinite;
    }

/*==============================================================
    GOLD SHIMMER
==============================================================*/

.gpcon-shimmer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

    .gpcon-shimmer::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 120deg, transparent 35%, rgba(200,155,60,.08) 50%, transparent 65% );
        background-size: 300% 100%;
        animation: gpconShimmer 10s linear infinite;
    }

/*==============================================================
    EMERALD MIST
==============================================================*/

.gpcon-mist {
    position: absolute;
    bottom: -150px;
    left: -120px;
    width: 650px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient( ellipse, rgba(14,106,76,.22), transparent 75% );
    filter: blur(90px);
    animation: gpconMist 10s ease-in-out infinite;
}

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

@keyframes gpconParticles {

    from {
        transform: translateY(0);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    to {
        transform: translateY(-120px);
        opacity: 0;
    }
}

@keyframes gpconGlassSweep {

    from {
        transform: translateX(-250%) rotate(25deg);
    }

    to {
        transform: translateX(450%) rotate(25deg);
    }
}

@keyframes gpconRotateSlow {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes gpconShimmer {

    from {
        background-position: -300% 0;
    }

    to {
        background-position: 300% 0;
    }
}

@keyframes gpconMist {

    0%,100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(50px);
    }
}

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

@media(max-width:992px) {

    .gpcon-light-rays {
        opacity: .6;
    }

    .gpcon-particles {
        opacity: .7;
    }
}

@media(max-width:768px) {

    .gpcon-light-rays,
    .gpcon-glass-reflection {
        display: none;
    }

    .gpcon-particles span {
        width: 3px;
        height: 3px;
    }
}

@media(max-width:576px) {

    .gpcon-mist {
        display: none;
    }
}

/*==============================================================
    PART 2A.1E
    ULTRA RESPONSIVE HERO
==============================================================*/


/*==============================================================
    LARGE DESKTOP
    1600px+
==============================================================*/

@media (min-width:1600px) {

    .gpcon-hero-wrapper {
        gap: 120px;
    }

    .gpcon-title {
        font-size: 92px;
    }

    .gpcon-description {
        max-width: 720px;
        font-size: 20px;
    }

    .gpcon-image {
        width: 650px;
    }

    .gpcon-ring-one {
        width: 700px;
        height: 700px;
    }

    .gpcon-ring-two {
        width: 840px;
        height: 840px;
    }

    .gpcon-ring-three {
        width: 980px;
        height: 980px;
    }
}


/*==============================================================
    ULTRA WIDE
    2000px+
==============================================================*/

@media (min-width:2000px) {

    .gpcon-hero {
        min-height: 110vh;
    }

        .gpcon-hero .glo-container {
            max-width: 1800px;
        }

    .gpcon-title {
        font-size: 110px;
    }

    .gpcon-description {
        font-size: 22px;
        max-width: 760px;
    }

    .gpcon-image {
        width: 760px;
    }
}


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

@media (max-width:1400px) {

    .gpcon-hero-wrapper {
        gap: 70px;
    }

    .gpcon-title {
        font-size: 72px;
    }

    .gpcon-image {
        width: 520px;
    }
}


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

@media (max-width:1200px) {

    .gpcon-title {
        font-size: 62px;
    }

    .gpcon-description {
        font-size: 18px;
    }

    .gpcon-image {
        width: 460px;
    }

    .gpcon-floating {
        transform: scale(.90);
    }
}


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

@media (max-width:992px) {

    .gpcon-hero {
        text-align: center;
    }

    .gpcon-hero-wrapper {
        grid-template-columns: 1fr;
        gap: 70px;
        padding-top: 170px;
        padding-bottom: 100px;
    }

    .gpcon-content {
        order: 1;
        max-width: 760px;
        margin: auto;
    }

    .gpcon-visual {
        order: 2;
        min-height: 520px;
    }

    .gpcon-description {
        margin: auto;
    }

    .gpcon-buttons {
        justify-content: center;
    }

    .gpcon-stats {
        justify-content: center;
    }

    .gpcon-floating {
        display: none;
    }
}


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

@media (max-width:768px) {

    .gpcon-hero {
        min-height: auto;
    }

    .gpcon-hero-wrapper {
        padding-top: 140px;
        padding-bottom: 90px;
        gap: 50px;
    }

    .gpcon-title {
        font-size: 48px;
    }

    .gpcon-description {
        font-size: 16px;
        line-height: 1.8;
    }

    .gpcon-buttons {
        flex-direction: column;
        align-items: center;
    }

    .gpcon-btn-primary,
    .gpcon-btn-outline {
        width: 100%;
        max-width: 320px;
    }

    .gpcon-image {
        width: 100%;
        max-width: 400px;
        border-radius: 28px;
    }

    .gpcon-ring {
        display: none;
    }
}


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

@media (max-width:576px) {

    .gpcon-title {
        font-size: 38px;
        line-height: 1.15;
    }

    .gpcon-tag {
        font-size: 11px;
        padding: 10px 20px;
        letter-spacing: 2px;
    }

    .gpcon-description {
        font-size: 15px;
    }

    .gpcon-stat {
        width: 100%;
        text-align: center;
    }

        .gpcon-stat h3 {
            font-size: 34px;
        }

        .gpcon-stat span {
            font-size: 14px;
        }

    .gpcon-stats {
        flex-direction: column;
        gap: 24px;
    }

    .gpcon-scroll {
        display: none;
    }
}


/*==============================================================
    EXTRA SMALL
==============================================================*/

@media (max-width:400px) {

    .gpcon-title {
        font-size: 32px;
    }

    .gpcon-description {
        font-size: 14px;
    }

    .gpcon-image {
        max-width: 320px;
    }
}


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

@media (max-height:600px) and (orientation:landscape) {

    .gpcon-hero {
        min-height: auto;
    }

    .gpcon-hero-wrapper {
        padding-top: 120px;
        padding-bottom: 80px;
    }
}


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

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

    .gpcon-image,
    .gpcon-floating,
    .gpcon-ring,
    .gpcon-particles span,
    .gpcon-light-rays::before,
    .gpcon-glass-reflection::before,
    .gpcon-shimmer::before,
    .gpcon-mist {
        animation: none !important;
    }
}
/*==============================================================
    PART 2
    BEAUTY PRODUCTS
    SECTION & HEADER
==============================================================*/

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

.beauty-products {
    position: relative;
    overflow: hidden;
    padding: 140px 6%;
    background: radial-gradient( circle at top left, rgba(216,177,91,.08), transparent 40% ), radial-gradient( circle at bottom right, rgba(40,120,80,.12), transparent 45% ), #06130d;
}

    /*==============================================================
    TOP GOLD GLOW
==============================================================*/

    .beauty-products::before {
        content: "";
        position: absolute;
        top: -320px;
        right: -260px;
        width: 760px;
        height: 760px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(216,177,91,.10), transparent 68% );
        filter: blur(10px);
        pointer-events: none;
    }

    /*==============================================================
    BOTTOM GREEN GLOW
==============================================================*/

    .beauty-products::after {
        content: "";
        position: absolute;
        bottom: -320px;
        left: -250px;
        width: 720px;
        height: 720px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(50,140,95,.10), transparent 70% );
        filter: blur(15px);
        pointer-events: none;
    }

/*==============================================================
    EXTRA GLOW LAYER
==============================================================*/

.beauty-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

    .beauty-glow::before {
        content: "";
        position: absolute;
        width: 850px;
        height: 850px;
        right: -300px;
        top: -320px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(216,177,91,.12), transparent 65% );
        animation: beautyGlowMove 12s ease-in-out infinite;
    }

    .beauty-glow::after {
        content: "";
        position: absolute;
        width: 650px;
        height: 650px;
        bottom: -260px;
        left: -180px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(32,120,82,.12), transparent 68% );
    }

/*==============================================================
    GLOW ANIMATION
==============================================================*/

@keyframes beautyGlowMove {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(35px);
    }

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

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

.beauty-header {
    position: relative;
    z-index: 5;
    width: 90%;
    max-width: 900px;
    margin: auto;
    text-align: center;
    margin-bottom: 90px;
}

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

.beauty-small-title {
    display: inline-block;
    margin-bottom: 22px;
    color: #D8B15B;
    font-family: "Montserrat",sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 6px;
    text-transform: uppercase;
}

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

.beauty-header h2 {
    margin: 0;
    margin-bottom: 28px;
    color: #ffffff;
    font-family: "Cormorant Garamond",serif;
    font-size: clamp(40px,5vw,64px);
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: .5px;
}

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

.beauty-header p {
    max-width: 720px;
    margin: auto;
    color: #B8C4B8;
    font-family: "Poppins",sans-serif;
    font-size: 17px;
    line-height: 1.9;
}

/*==============================================================
    GOLD DIVIDER
==============================================================*/

.beauty-header::after {
    content: "";
    display: block;
    width: 90px;
    height: 2px;
    margin: 38px auto 0;
    border-radius: 50px;
    background: linear-gradient( 90deg, transparent, #D8B15B, transparent );
}

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

@media(max-width:992px) {

    .beauty-products {
        padding: 120px 5%;
    }

    .beauty-header {
        margin-bottom: 70px;
    }
}

@media(max-width:768px) {

    .beauty-products {
        padding: 100px 5%;
    }

    .beauty-header h2 {
        line-height: 1.2;
    }

    .beauty-header p {
        font-size: 15px;
    }
}

@media(max-width:480px) {

    .beauty-products {
        padding: 90px 5%;
    }

    .beauty-small-title {
        letter-spacing: 4px;
        font-size: 11px;
    }

    .beauty-header {
        margin-bottom: 55px;
    }
}

/*==============================================================
    PART 3
    BEAUTY GRID & LUXURY PRODUCT CARDS
==============================================================*/


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

.beauty-grid {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 1500px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 40px;
}


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

.beauty-card {
    position: relative;
    overflow: hidden;
    padding: 45px 35px;
    border-radius: 32px;
    background: rgba(18,38,28,.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(216,177,91,.12);
    transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease;
}


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

    .beauty-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 180deg, rgba(255,255,255,.08), transparent 45% );
        opacity: 0;
        transition: .45s;
    }


    /*==============================================================
    GOLD BORDER
==============================================================*/

    .beauty-card::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 32px;
        padding: 1px;
        background: linear-gradient( 135deg, rgba(216,177,91,.55), transparent, rgba(216,177,91,.15) );
        opacity: 0;
        transition: .45s;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }


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

    .beauty-card:hover {
        transform: translateY(-14px);
        border-color: rgba(216,177,91,.55);
        box-shadow: 0 35px 80px rgba(0,0,0,.45), 0 0 45px rgba(216,177,91,.12);
    }


        .beauty-card:hover::before {
            opacity: 1;
        }


        .beauty-card:hover::after {
            opacity: 1;
        }


    /*==============================================================
    SHIMMER EFFECT
==============================================================*/

    .beauty-card .beauty-shine {
        position: absolute;
        top: 0;
        left: -140%;
        width: 70%;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.18), transparent );
        transform: skewX(-22deg);
        pointer-events: none;
    }


    .beauty-card:hover .beauty-shine {
        animation: beautyCardShine 1.2s ease;
    }


@keyframes beautyCardShine {

    from {
        left: -140%;
    }

    to {
        left: 180%;
    }
}


/*==============================================================
    CARD CONTENT
==============================================================*/

.beauty-card > * {
    position: relative;
    z-index: 2;
}


/*==============================================================
    CARD BACKGROUND GLOW
==============================================================*/

.beauty-card .beauty-card-glow {
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    right: -100px;
    top: -120px;
    background: radial-gradient( circle, rgba(216,177,91,.08), transparent 70% );
    opacity: 0;
    transition: .45s;
}


.beauty-card:hover .beauty-card-glow {
    opacity: 1;
}


/*==============================================================
    RESPONSIVE
==============================================================*/

@media(max-width:1200px) {

    .beauty-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 32px;
    }
}


@media(max-width:768px) {

    .beauty-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .beauty-card {
        padding: 38px 28px;
        border-radius: 28px;
    }
}


@media(max-width:480px) {

    .beauty-card {
        padding: 32px 24px;
    }
}

/*==============================================================
    PART 4
    PRODUCT IMAGE, TYPOGRAPHY & CONTENT
==============================================================*/


/*==============================================================
    PRODUCT IMAGE
==============================================================*/

.beauty-image {
    position: relative;
    height: 240px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 35px;
}


    /* Soft Glow Behind Product */

    .beauty-image::before {
        content: "";
        position: absolute;
        width: 190px;
        height: 190px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(216,177,91,.18), rgba(216,177,91,.04) 60%, transparent 75% );
        filter: blur(6px);
        transition: .45s;
    }


    /*==============================================================
    PRODUCT IMAGE
==============================================================*/

    .beauty-image img {
        position: relative;
        z-index: 2;
        width: 170px;
        max-width: 100%;
        height: auto;
        object-fit: contain;
        transition: transform .55s ease, filter .55s ease;
        filter: drop-shadow( 0 18px 30px rgba(0,0,0,.35) );
    }


.beauty-card:hover .beauty-image img {
    transform: translateY(-12px) scale(1.08) rotate(-2deg);
    filter: drop-shadow( 0 28px 40px rgba(0,0,0,.45) );
}


.beauty-card:hover .beauty-image::before {
    transform: scale(1.15);
    opacity: 1;
}


/*==============================================================
    CATEGORY
==============================================================*/

.beauty-category {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 8px 18px;
    border-radius: 40px;
    background: rgba(216,177,91,.10);
    border: 1px solid rgba(216,177,91,.18);
    color: #D8B15B;
    font-family: "Montserrat",sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}


    .beauty-category::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #D8B15B;
    }


/*==============================================================
    PRODUCT TITLE
==============================================================*/

.beauty-card h3 {
    margin: 0 0 18px;
    color: #ffffff;
    font-family: "Cormorant Garamond",serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.2;
    transition: .35s;
}


.beauty-card:hover h3 {
    color: #F3D68A;
}


/*==============================================================
    DESCRIPTION
==============================================================*/

.beauty-card p {
    margin: 0;
    color: #B8C4B8;
    font-family: "Poppins",sans-serif;
    font-size: 15px;
    line-height: 1.9;
    transition: .35s;
}


.beauty-card:hover p {
    color: #D5DED5;
}


/*==============================================================
    OPTIONAL BUTTON
==============================================================*/

.beauty-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    color: #D8B15B;
    text-decoration: none;
    font-family: "Montserrat",sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    transition: .35s;
}


    .beauty-button i {
        transition: .35s;
    }


    .beauty-button:hover {
        letter-spacing: 4px;
    }


        .beauty-button:hover i {
            transform: translateX(6px);
        }


/*==============================================================
    IMAGE FLOAT ANIMATION
==============================================================*/

@keyframes beautyFloat {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }

    100% {
        transform: translateY(0);
    }
}


.beauty-image img {
    animation: beautyFloat 5s ease-in-out infinite;
}


/*==============================================================
    RESPONSIVE
==============================================================*/

@media(max-width:992px) {

    .beauty-image {
        height: 220px;
    }

    .beauty-card h3 {
        font-size: 28px;
    }
}


@media(max-width:768px) {

    .beauty-image {
        height: 200px;
    }

        .beauty-image img {
            width: 155px;
        }

    .beauty-card h3 {
        font-size: 26px;
    }
}


@media(max-width:480px) {

    .beauty-image {
        height: 180px;
    }

        .beauty-image img {
            width: 140px;
        }

    .beauty-card h3 {
        font-size: 24px;
    }

    .beauty-card p {
        font-size: 14px;
    }
}
/*==============================================================
    PART 5
    FINAL POLISH & RESPONSIVE
==============================================================*/


/*==============================================================
    SMOOTH ENTRANCE ANIMATION
==============================================================*/

.beauty-card {
    opacity: 0;
    transform: translateY(40px);
    animation: beautyFadeUp .8s ease forwards;
}

    .beauty-card:nth-child(1) {
        animation-delay: .05s;
    }

    .beauty-card:nth-child(2) {
        animation-delay: .10s;
    }

    .beauty-card:nth-child(3) {
        animation-delay: .15s;
    }

    .beauty-card:nth-child(4) {
        animation-delay: .20s;
    }

    .beauty-card:nth-child(5) {
        animation-delay: .25s;
    }

    .beauty-card:nth-child(6) {
        animation-delay: .30s;
    }

    .beauty-card:nth-child(7) {
        animation-delay: .35s;
    }

    .beauty-card:nth-child(8) {
        animation-delay: .40s;
    }

    .beauty-card:nth-child(9) {
        animation-delay: .45s;
    }

@keyframes beautyFadeUp {

    from {
        opacity: 0;
        transform: translateY(45px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/*==============================================================
    CARD BORDER GLOW
==============================================================*/

.beauty-card {
    isolation: isolate;
}

    .beauty-card:hover {
        box-shadow: 0 25px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(216,177,91,.18), 0 0 35px rgba(216,177,91,.10);
    }


/*==============================================================
    IMAGE SHADOW
==============================================================*/

.beauty-image img {
    image-rendering: auto;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}


/*==============================================================
    CARD CONTENT
==============================================================*/

.beauty-card > * {
    position: relative;
    z-index: 5;
}


/*==============================================================
    BEAUTIFUL SCROLLBAR
==============================================================*/

.beauty-products::-webkit-scrollbar {
    width: 8px;
}

.beauty-products::-webkit-scrollbar-track {
    background: #0b1712;
}

.beauty-products::-webkit-scrollbar-thumb {
    background: #D8B15B;
    border-radius: 20px;
}


/*==============================================================
    HOVER TRANSITIONS
==============================================================*/

.beauty-card,
.beauty-card::before,
.beauty-card::after,
.beauty-image img,
.beauty-category,
.beauty-card h3,
.beauty-card p {
    transition: all .45s ease;
}


    /*==============================================================
    FOCUS ACCESSIBILITY
==============================================================*/

    .beauty-card:focus-within {
        outline: 2px solid rgba(216,177,91,.5);
        outline-offset: 4px;
    }


/*==============================================================
    LARGE DESKTOP
==============================================================*/

@media (min-width:1600px) {

    .beauty-grid {
        max-width: 1650px;
        gap: 45px;
    }
}


/*==============================================================
    DESKTOP
==============================================================*/

@media (max-width:1400px) {

    .beauty-grid {
        gap: 35px;
    }
}


/*==============================================================
    TABLET
==============================================================*/

@media (max-width:1200px) {

    .beauty-grid {
        grid-template-columns: repeat(2,1fr);
    }
}


/*==============================================================
    SMALL TABLET
==============================================================*/

@media (max-width:900px) {

    .beauty-products {
        padding: 110px 5%;
    }

    .beauty-grid {
        gap: 28px;
    }
}


/*==============================================================
    MOBILE
==============================================================*/

@media (max-width:768px) {

    .beauty-products {
        padding: 90px 5%;
    }

    .beauty-grid {
        grid-template-columns: 1fr;
    }

    .beauty-card {
        border-radius: 26px;
        padding: 35px 24px;
    }
}


/*==============================================================
    SMALL MOBILE
==============================================================*/

@media (max-width:480px) {

    .beauty-products {
        padding: 70px 18px;
    }

    .beauty-header {
        margin-bottom: 50px;
    }

    .beauty-card {
        padding: 28px 20px;
        border-radius: 22px;
    }

    .beauty-category {
        font-size: 10px;
        letter-spacing: 1.5px;
        padding: 7px 14px;
    }
}


/*==============================================================
    REDUCE MOTION
==============================================================*/

@media (prefers-reduced-motion:reduce) {

    .beauty-card,
    .beauty-image img,
    .beauty-glow::before {
        animation: none;
        transition: none;
    }
}


/*====================================

OXIAURA HOME & LANDS

Luxury Navigation

====================================*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Inter,sans-serif;
    background: #f6f8fb;
}

.land-container {
    width: 92%;
    max-width: 1600px;
    margin: auto;
}

/*========================*/

.land-header {
    position: fixed;
    top: 20px;
    left: 0;
    width: 100%;
    z-index: 999;
    transition: .4s;
}

.land-navbar {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 34px;
    border-radius: 70px;
    background: rgba(255,255,255,.60);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255,255,255,.35);
    box-shadow: 0 20px 60px rgba(10,35,70,.08);
}

/*========================*/

.land-logo img {
    height: 68px;
    display: block;
}

/*========================*/

.land-menu {
    display: flex;
    gap: 50px;
    list-style: none;
}

    .land-menu a {
        text-decoration: none;
        color: #091B39;
        font-size: 15px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .6px;
        position: relative;
        transition: .35s;
    }

        .land-menu a::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -14px;
            width: 0;
            height: 3px;
            background: #E5302E;
            transition: .35s;
        }

        .land-menu a:hover {
            color: #E5302E;
        }

            .land-menu a:hover::after {
                width: 100%;
            }

.land-active {
    color: #E5302E !important;
}

    .land-active::after {
        width: 100% !important;
    }

/*========================*/

.land-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

/*========================*/

.land-phone {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    border-radius: 18px;
    background: white;
    color: #0E4FA8;
    text-decoration: none;
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
    transition: .35s;
}

    .land-phone:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 45px rgba(14,79,168,.15);
    }

/*========================*/

.land-btn {
    padding: 16px 28px;
    background: #E5302E;
    color: white;
    text-decoration: none;
    border-radius: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    transition: .35s;
    box-shadow: 0 18px 45px rgba(229,48,46,.28);
}

    .land-btn:hover {
        transform: translateY(-4px);
        background: #cf2422;
    }

/*========================*/

.land-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: none;
    background: none;
    cursor: pointer;
}

    .land-toggle span {
        display: block;
        height: 3px;
        margin: 7px 0;
        background: #091B39;
        border-radius: 10px;
    }

/*========================*/

.land-header.land-scroll {
    top: 0;
}

    .land-header.land-scroll .land-navbar {
        height: 78px;
        background: rgba(255,255,255,.95);
        border-radius: 0;
        box-shadow: 0 15px 45px rgba(0,0,0,.08);
    }

/*========================*/

@media(max-width:1200px) {

    .land-menu {
        display: none;
    }

    .land-actions {
        display: none;
    }

    .land-toggle {
        display: block;
    }

    .land-navbar {
        padding: 0 24px;
    }
}

@media(max-width:768px) {

    .land-header {
        top: 0;
    }

    .land-navbar {
        height: 80px;
        border-radius: 0;
        padding: 0 18px;
    }

    .land-logo img {
        height: 56px;
    }
}

/*======================================================
OXIAURA HOME & LANDS
Part 2.2 - Premium Hero
Layout & Background
======================================================*/

/*===============================
Hero Section
===============================*/

.land-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 170px 0 120px;
    background-image: url("../images/landhero-bg.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/*===============================
Luxury Overlay
===============================*/

.land-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, rgba(6,18,38,.88) 0%, rgba(8,25,52,.76) 42%, rgba(8,25,52,.38) 72%, rgba(8,25,52,.18) 100%);
    z-index: 1;
}

/* Luxury glow */

.land-hero::before {
    content: "";
    position: absolute;
    width: 700px;
    height: 700px;
    right: -180px;
    top: -120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(14,79,168,.28), transparent 70%);
    filter: blur(70px);
    z-index: 1;
}

.land-hero::after {
    content: "";
    position: absolute;
    width: 550px;
    height: 550px;
    left: -150px;
    bottom: -150px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(229,48,46,.16), transparent 70%);
    filter: blur(70px);
    z-index: 1;
}

/*===============================
Container
===============================*/

.land-hero .land-container {
    position: relative;
    z-index: 5;
}

/*===============================
Grid Layout
===============================*/

.land-hero-wrapper {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    align-items: center;
    gap: 80px;
}

/*===============================
Content
===============================*/

.land-hero-content {
    max-width: 720px;
}

/*===============================
Subtitle
===============================*/

.land-hero-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    border-radius: 50px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.14);
    color: #ffffff;
    letter-spacing: 3px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 32px;
    text-transform: uppercase;
}

    .land-hero-subtitle::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #E5302E;
    }

/*===============================
Title
===============================*/

.land-hero-title {
    font-size: 72px;
    line-height: 1.08;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 25px;
    letter-spacing: -2px;
}

    .land-hero-title span {
        color: #E5302E;
    }

/*===============================
Accent Line
===============================*/

.land-title-line {
    width: 120px;
    height: 5px;
    border-radius: 20px;
    background: linear-gradient( 90deg, #E5302E, #0E4FA8);
    margin-bottom: 35px;
}

/*===============================
Description
===============================*/

.land-hero-description {
    font-size: 18px;
    line-height: 1.9;
    color: rgba(255,255,255,.82);
    max-width: 620px;
    margin-bottom: 50px;
}

/*===============================
Buttons
===============================*/

.land-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

/*===============================
Primary Button
===============================*/

.land-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 36px;
    border-radius: 16px;
    background: #E5302E;
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    transition: .35s;
    box-shadow: 0 20px 40px rgba(229,48,46,.28);
}

    .land-btn-primary:hover {
        transform: translateY(-6px);
        box-shadow: 0 28px 55px rgba(229,48,46,.36);
    }

/*===============================
Secondary Button
===============================*/

.land-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 36px;
    border-radius: 16px;
    text-decoration: none;
    color: #ffffff;
    font-weight: 700;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255,255,255,.18);
    transition: .35s;
}

    .land-btn-secondary:hover {
        background: #0E4FA8;
        transform: translateY(-6px);
    }

/*===============================
Hero Right Side
===============================*/

.land-hero-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 650px;
}

/*===============================
Scroll Indicator
===============================*/

.land-scroll-indicator {
    position: absolute;
    left: 50%;
    bottom: 38px;
    transform: translateX(-50%);
    z-index: 10;
}

    .land-scroll-indicator span {
        display: block;
        width: 34px;
        height: 58px;
        border: 2px solid rgba(255,255,255,.45);
        border-radius: 40px;
        position: relative;
    }

        .land-scroll-indicator span::before {
            content: "";
            position: absolute;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #ffffff;
            left: 50%;
            transform: translateX(-50%);
            top: 10px;
            animation: landScroll 2s infinite;
        }

@keyframes landScroll {

    0% {
        opacity: 0;
        top: 10px;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        top: 34px;
    }
}

/*===============================
Large Desktop
===============================*/

@media(min-width:1800px) {

    .land-hero-title {
        font-size: 84px;
    }

    .land-hero-description {
        font-size: 20px;
    }
}

/*===============================
Tablet
===============================*/

@media(max-width:1200px) {

    .land-hero {
        padding-top: 150px;
    }

    .land-hero-wrapper {
        grid-template-columns: 1fr;
        gap: 70px;
    }

    .land-hero-content {
        max-width: 100%;
    }

    .land-hero-right {
        justify-content: center;
        min-height: auto;
    }

    .land-hero-title {
        font-size: 60px;
    }
}

/*===============================
Mobile
===============================*/

@media(max-width:768px) {

    .land-hero {
        background-attachment: scroll;
        padding: 130px 0 80px;
    }

    .land-hero-title {
        font-size: 42px;
        line-height: 1.15;
    }

    .land-hero-description {
        font-size: 16px;
    }

    .land-hero-buttons {
        flex-direction: column;
    }

    .land-btn-primary,
    .land-btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .land-scroll-indicator {
        display: none;
    }
}
/*======================================================
OXIAURA HOME & LANDS
Part 2.3 - Floating Property Card
======================================================*/

/*==================================
Floating Card
==================================*/

.land-property-card {
    width: 100%;
    max-width: 430px;
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 35px 80px rgba(0,0,0,.18), 0 10px 25px rgba(255,255,255,.18) inset;
    animation: landFloat 6s ease-in-out infinite;
    transition: .45s;
}

    .land-property-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 45px 90px rgba(0,0,0,.22), 0 15px 30px rgba(255,255,255,.25) inset;
    }

/*==================================
Header
==================================*/

.land-card-header {
    padding: 28px 35px;
    background: linear-gradient( 135deg, #0E4FA8, #123D78);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/*==================================
Body
==================================*/

.land-card-body {
    padding: 15px 0;
}

/*==================================
Items
==================================*/

.land-property-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 34px;
    text-decoration: none;
    color: #0E2345;
    transition: .35s;
    border-bottom: 1px solid rgba(0,0,0,.05);
}

    .land-property-item:last-child {
        border-bottom: none;
    }

    .land-property-item:hover {
        background: rgba(14,79,168,.05);
        padding-left: 42px;
    }

/*==================================
Left Side
==================================*/

.land-property-left {
    display: flex;
    align-items: center;
    gap: 18px;
}

    .land-property-left span {
        font-size: 17px;
        font-weight: 600;
    }

/*==================================
Icons
==================================*/

.land-property-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient( 135deg, #0E4FA8, #1B72E8);
    color: #fff;
    font-size: 22px;
    transition: .35s;
    box-shadow: 0 12px 25px rgba(14,79,168,.25);
}

.land-property-item:hover .land-property-icon {
    transform: rotate(-8deg) scale(1.08);
    background: linear-gradient( 135deg, #E5302E, #FF6666);
}

/*==================================
Arrow
==================================*/

.land-property-item i.fa-chevron-right {
    color: #999;
    transition: .35s;
    font-size: 15px;
}

.land-property-item:hover i.fa-chevron-right {
    color: #E5302E;
    transform: translateX(6px);
}

/*==================================
Footer
==================================*/

.land-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 26px 34px;
    background: #fff;
}

    .land-card-footer a {
        text-decoration: none;
        font-weight: 700;
        font-size: 15px;
        color: #0E4FA8;
        letter-spacing: .5px;
    }

    .land-card-footer button {
        width: 55px;
        height: 55px;
        border: none;
        border-radius: 50%;
        background: #E5302E;
        color: #fff;
        cursor: pointer;
        font-size: 18px;
        transition: .35s;
        box-shadow: 0 15px 30px rgba(229,48,46,.25);
    }

        .land-card-footer button:hover {
            transform: rotate(45deg);
            background: #0E4FA8;
        }

/*==================================
Floating Animation
==================================*/

@keyframes landFloat {

    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-16px);
    }

    100% {
        transform: translateY(0px);
    }
}

/*==================================
Luxury Shine
==================================*/

.land-property-card::before {
    content: "";
    position: absolute;
    top: -150px;
    left: -80px;
    width: 220px;
    height: 520px;
    background: linear-gradient( rgba(255,255,255,0), rgba(255,255,255,.35), rgba(255,255,255,0) );
    transform: rotate(25deg);
    pointer-events: none;
    animation: landShine 8s linear infinite;
}

@keyframes landShine {

    0% {
        left: -220px;
    }

    100% {
        left: 520px;
    }
}

/*==================================
Responsive
==================================*/

@media(max-width:992px) {

    .land-property-card {
        max-width: 100%;
    }
}

@media(max-width:768px) {

    .land-property-item {
        padding: 18px 22px;
    }

        .land-property-item:hover {
            padding-left: 26px;
        }

    .land-property-left span {
        font-size: 15px;
    }

    .land-property-icon {
        width: 48px;
        height: 48px;
        font-size: 18px;
        border-radius: 14px;
    }

    .land-card-header {
        padding: 22px 24px;
        font-size: 13px;
    }

    .land-card-footer {
        padding: 20px 24px;
    }

        .land-card-footer button {
            width: 48px;
            height: 48px;
        }
}

/*======================================================
OXIAURA HOME & LANDS
Part 2.4 – Hero Animations & Premium Effects
======================================================*/


/*====================================
Enable Smooth Rendering
====================================*/

.land-hero,
.land-hero * {
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


/*====================================
Hero Background Zoom
====================================*/

.land-hero {
    animation: landHeroZoom 20s ease-in-out infinite alternate;
}

@keyframes landHeroZoom {

    from {
        background-size: 100%;
    }

    to {
        background-size: 108%;
    }
}


/*====================================
Hero Content Animation
====================================*/

.land-hero-subtitle {
    opacity: 0;
    transform: translateY(40px);
    animation: landFadeUp .9s ease forwards;
    animation-delay: .2s;
}

.land-hero-title {
    opacity: 0;
    transform: translateY(45px);
    animation: landFadeUp .9s ease forwards;
    animation-delay: .45s;
}

.land-title-line {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
    animation: landLine .8s ease forwards;
    animation-delay: .8s;
}

.land-hero-description {
    opacity: 0;
    transform: translateY(35px);
    animation: landFadeUp .9s ease forwards;
    animation-delay: 1s;
}

.land-hero-buttons {
    opacity: 0;
    transform: translateY(40px);
    animation: landFadeUp .9s ease forwards;
    animation-delay: 1.25s;
}

.land-property-card {
    opacity: 0;
    transform: translateY(70px);
    animation: landCardEnter 1.2s ease forwards 1.4s, landFloat 6s ease-in-out infinite 2.7s;
}


/*====================================
Fade Animation
====================================*/

@keyframes landFadeUp {

    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes landCardEnter {

    from {
        opacity: 0;
        transform: translateY(80px) scale(.92);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes landLine {

    from {
        opacity: 0;
        transform: scaleX(0);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }
}


/*====================================
Luxury Title Gradient
====================================*/

.land-hero-title span {
    background: linear-gradient( 135deg, #ffffff, #ffd9d8, #E5302E );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/*====================================
Premium Button Hover
====================================*/

.land-btn-primary,
.land-btn-secondary {
    position: relative;
    overflow: hidden;
}

    .land-btn-primary::before,
    .land-btn-secondary::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);
        transition: 1s;
    }

    .land-btn-primary:hover::before,
    .land-btn-secondary:hover::before {
        left: 150%;
    }


    /*====================================
Button Glow
====================================*/

    .land-btn-primary:hover {
        box-shadow: 0 25px 60px rgba(229,48,46,.45);
    }

    .land-btn-secondary:hover {
        box-shadow: 0 25px 60px rgba(14,79,168,.30);
    }


/*====================================
Glass Glow Behind Card
====================================*/

.land-hero-right {
    position: relative;
}

    .land-hero-right::before {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255,255,255,.20), transparent 72%);
        filter: blur(45px);
        z-index: -1;
    }


/*====================================
Floating Decorative Circles
====================================*/

.land-hero::before {
    animation: landGlowMove1 9s ease-in-out infinite alternate;
}

.land-hero::after {
    animation: landGlowMove2 10s ease-in-out infinite alternate;
}

@keyframes landGlowMove1 {

    from {
        transform: translate(0,0);
    }

    to {
        transform: translate(-40px,30px);
    }
}

@keyframes landGlowMove2 {

    from {
        transform: translate(0,0);
    }

    to {
        transform: translate(45px,-30px);
    }
}


/*====================================
Scroll Indicator
====================================*/

.land-scroll-indicator {
    animation: landBounce 2s infinite;
}

@keyframes landBounce {

    0%,100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(10px);
    }
}


/*====================================
Property Item Hover
====================================*/

.land-property-item {
    position: relative;
    overflow: hidden;
}

    .land-property-item::before {
        content: "";
        position: absolute;
        left: -100%;
        top: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(14,79,168,.08), transparent );
        transition: .7s;
    }

    .land-property-item:hover::before {
        left: 100%;
    }


/*====================================
Icon Pulse
====================================*/

.land-property-icon {
    position: relative;
}

    .land-property-icon::after {
        content: "";
        position: absolute;
        inset: -5px;
        border-radius: 20px;
        border: 2px solid rgba(14,79,168,.18);
        animation: landPulse 2.8s infinite;
    }

@keyframes landPulse {

    0% {
        transform: scale(1);
        opacity: .7;
    }

    100% {
        transform: scale(1.25);
        opacity: 0;
    }
}


/*====================================
Text Selection
====================================*/

::selection {
    background: #E5302E;
    color: #ffffff;
}


/*====================================
Responsive Tweaks
====================================*/

@media(max-width:992px) {

    .land-hero {
        animation: none;
    }

    .land-property-card {
        animation: landCardEnter 1s ease forwards;
    }
}

@media(max-width:768px) {

    .land-hero-title {
        letter-spacing: -1px;
    }

    .land-property-icon::after {
        display: none;
    }

    .land-scroll-indicator {
        display: none;
    }
}
/*==================================================
ABOUT SECTION
==================================================*/

.land-about {
    padding: 130px 0;
    background: #faf9f7;

}

.land-about-wrapper {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 90px;
    align-items: center;
}

/* IMAGE */

.land-about-image {
    position: relative;
}

    .land-about-image img {
        width: 100%;
        display: block;
        border-radius: 28px;
        box-shadow: 0 30px 70px rgba(0,0,0,.12);
    }

/*=========================
Statistics Card
==========================*/

.land-about-stats {
    position: absolute;
    left: 40px;
    right: 40px;
    bottom: -45px;
    background: white;
    border-radius: 24px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0,0,0,.12);
}

.land-stat {
    padding: 28px 20px;
    text-align: center;
    border-right: 1px solid #ececec;
}

    .land-stat:last-child {
        border-right: none;
    }

    .land-stat h3 {
        font-size: 40px;
        color: var(--land-red);
        margin-bottom: 8px;
    }

    .land-stat span {
        color: #666;
        font-size: 14px;
        line-height: 1.5;
    }
.land-about .land-about-stats .land-stat h3 {
    color: #EF3B33; /* Replace with your site's exact red if different */
}
/*=========================
CONTENT
==========================*/

.land-about-content {
    padding-top: 40px;
}

.land-title-line {
    width: 80px;
    height: 4px;
    background: var(--land-red);
    margin: 28px 0;
    border-radius: 30px;
}

.land-about .land-text {
    margin-bottom: 28px;
}

.land-signature {
    width: 220px;
    margin: 35px 0;
}

/*=========================
Responsive
==========================*/

@media(max-width:1200px) {

    .land-about-wrapper {
        grid-template-columns: 1fr;
    }

    .land-about-content {
        padding-top: 80px;
    }
}

@media(max-width:768px) {

    .land-about-stats {
        position: relative;
        left: 0;
        right: 0;
        bottom: 0;
        margin-top: 30px;
        grid-template-columns: repeat(2,1fr);
    }

    .land-stat {
        border-bottom: 1px solid #ececec;
    }

        .land-stat:nth-child(2) {
            border-right: none;
        }
}

@media(max-width:550px) {

    .land-about-stats {
        grid-template-columns: 1fr;
    }

    .land-stat {
        border-right: none;
    }
}

/*==================================================
VISION & MISSION
==================================================*/

.land-purpose {
    padding: 140px 0;
    background: #ffffff;
    margin-top: -80px; /* Move section upward */
    padding-top: 0;
}

.land-purpose-header {
    max-width: 820px;
    margin: 0 auto 80px;
    text-align: center;
}

.land-purpose-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 40px;
}

/* Card */

.land-purpose-card {
    background: #fff;
    padding: 60px;
    border-radius: 28px;
    border: 1px solid #ececec;
    position: relative;
    overflow: hidden;
    transition: .45s;
    box-shadow: 0 20px 50px rgba(0,0,0,.06);
}

    .land-purpose-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 5px;
        height: 100%;
        background: linear-gradient( to bottom, var(--land-red), var(--land-blue) );
    }

    .land-purpose-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 35px 70px rgba(0,0,0,.12);
    }

/* Icon */

.land-purpose-icon {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid rgba(27,90,170,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    font-size: 34px;
    color: var(--land-red);
    box-shadow: 0 15px 35px rgba(0,0,0,.08);
}

/* Tag */

.land-purpose-tag {
    display: inline-block;
    color: var(--land-blue);
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 18px;
}

/* Heading */

.land-purpose-card h3 {
    font-size: 34px;
    line-height: 1.3;
    color: #111;
    margin-bottom: 22px;
    font-family: var(--land-heading-font);
}

/* Text */

.land-purpose-card p {
    color: #666;
    line-height: 1.9;
    font-size: 16px;
}

/* Responsive */

@media(max-width:992px) {

    .land-purpose-grid {
        grid-template-columns: 1fr;
    }

    .land-purpose-card {
        padding: 45px;
    }
}

@media(max-width:768px) {

    .land-purpose {
        padding: 100px 0;
    }

    .land-purpose-card {
        padding: 35px;
    }

        .land-purpose-card h3 {
            font-size: 28px;
        }
}
/*==================================================
PREMIUM SERVICES
==================================================*/

.land-services {
    padding: 0px 0;
    background: linear-gradient(to bottom,#ffffff,#f8fbff);
    position: relative;
    overflow: hidden;
    margin-top: -80px; /* Move section upward */
    padding-top: 0;
}

    /* Decorative Background */

    .land-services::before {
        content: "";
        position: absolute;
        width: 700px;
        height: 700px;
        left: -320px;
        top: -220px;
        background: radial-gradient(circle, rgba(229,45,39,.08), transparent 70%);
    }

    .land-services::after {
        content: "";
        position: absolute;
        width: 650px;
        height: 650px;
        right: -300px;
        bottom: -250px;
        background: radial-gradient(circle, rgba(27,90,170,.08), transparent 70%);
    }

/*=========================
Header
=========================*/

.land-services-header {
    max-width: 850px;
    margin: auto;
    text-align: center;
    margin-bottom: 80px;
}

    .land-services-header p {
        max-width: 720px;
        margin: auto;
    }

/*=========================
Grid
=========================*/

.land-services-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 35px;
}

/*=========================
Card
=========================*/

/*=========================================
Luxury Service Card
=========================================*/

.land-service-card {
    position: relative;
    padding: 2px; /* Border thickness */

    border-radius: 32px;
    background: linear-gradient( 135deg, #E53935 0%, #2E6BE6 100% );
    overflow: hidden;
    transition: .5s ease;
    box-shadow: 0 15px 35px rgba(0,0,0,.08);
}

/* White inner card */

.land-service-card-inner {
    position: relative;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 30px;
    padding: 45px;
    height: 100%;
    overflow: hidden;
}

    /* Soft Glow */

    .land-service-card-inner::before {
        content: "";
        position: absolute;
        width: 260px;
        height: 260px;
        right: -120px;
        top: -120px;
        background: radial-gradient( circle, rgba(46,107,230,.08), transparent 70% );
        transition: .5s;
    }


    /* Red + Blue Luxury Border */

    .land-service-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 110px;
        height: 5px;
        background: linear-gradient( 90deg, #ef3d3d, #2d67d8);
        border-radius: 0 0 20px 0;
    }

    /* Hover Glow */

    .land-service-card::after {
        content: "";
        position: absolute;
        width: 250px;
        height: 250px;
        right: -120px;
        top: -120px;
        background: radial-gradient(circle, rgba(40,90,255,.08), transparent 70%);
        transition: .6s;
    }

.land-service-card:hover {
    transform: translateY(-14px);
    box-shadow: 0 35px 70px rgba(0,0,0,.14), 0 15px 40px rgba(46,107,230,.10);
}

        .land-service-card:hover::after {
            transform: scale(1.4);
        }
    .land-service-card:hover .land-service-card-inner::before {
        transform: scale(1.3);
    }
/*=========================
Icon
=========================*/

.land-service-icon {
    width: 88px;
    height: 88px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    background: linear-gradient( 135deg, #ffffff, #eef5ff);
    color: #1d5dcc;
    border: 1px solid rgba(29,93,204,.12);
    box-shadow: 0 18px 35px rgba(0,0,0,.08);
    margin-bottom: 34px;
    transition: .55s;
}

.land-service-card:hover .land-service-icon {
    transform: translateY(-5px) rotate(-6deg);
    background: linear-gradient( 135deg, #ef3d3d, #2d67d8);
    color: white;
}

/*=========================
Typography
=========================*/

..land-service-card h3 {
    font-size: 28px;
    font-weight: 500;
    color: #141414;
    margin-bottom: 18px;
    line-height: 1.3;
}

.land-service-card p {
    color: #666;
    font-size: 15px;
    line-height: 1.9;
}

/*=========================
Responsive
=========================*/

@media(max-width:1100px) {

    .land-services-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:768px) {

    .land-services {
        padding: 100px 0;
    }

    .land-services-grid {
        grid-template-columns: 1fr;
    }

    .land-service-card {
        padding: 35px;
    }

        .land-service-card h3 {
            font-size: 22px;
        }
}

/*======================================================
OXIAURA HOME & LANDS
Part 7.2A - Featured Projects
Layout & Cards
======================================================*/


/*=========================================
Projects Section
=========================================*/

.land-projects {
    position: relative;
    padding: 120px 0;
    background: #f8fafc;
    overflow: hidden;
}

    .land-projects .land-container {
        position: relative;
        z-index: 2;
    }


/*=========================================
Section Header
=========================================*/

.land-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    margin-bottom: 70px;
    flex-wrap: wrap;
}

.land-heading {
    max-width: 650px;
}

.land-subtitle {
    display: inline-block;
    padding: 10px 24px;
    background: rgba(14,79,168,.08);
    color: #0E4FA8;
    border-radius: 40px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.land-heading h2 {
    font-size: 52px;
    line-height: 1.2;
    color: #081C39;
    font-family: "Playfair Display", serif;
    font-weight: 700;
}


/*=========================================
View All Button
=========================================*/

.land-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    padding: 18px 34px;
    border-radius: 60px;
    background: #0E4FA8;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    transition: .35s;
}

    .land-view-btn i {
        font-size: 14px;
    }


/*=========================================
Projects Grid
=========================================*/

.land-project-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 35px;
}


/*=========================================
Project Card
=========================================*/

.land-project-card {
    position: relative;
    background: #ffffff;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 20px 55px rgba(0,0,0,.08);
    transition: .4s;
}


/*=========================================
Image
=========================================*/

.land-project-image {
    position: relative;
    height: 320px;
    overflow: hidden;
}

    .land-project-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: .8s;
    }


/*=========================================
Overlay
=========================================*/

.land-project-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(6,18,38,.75), rgba(6,18,38,.15), transparent );
}


/*=========================================
Content
=========================================*/

.land-project-content {
    padding: 35px;
}

    .land-project-content h3 {
        font-size: 28px;
        color: #081C39;
        font-family: "Playfair Display", serif;
        margin-bottom: 18px;
        line-height: 1.3;
    }

    .land-project-content p {
        color: #666;
        font-size: 15px;
        line-height: 1.9;
    }


/*=========================================
Footer
=========================================*/

.land-project-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 35px;
}

    .land-project-footer span {
        color: #666;
        font-size: 14px;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .land-project-footer strong {
        color: #0E4FA8;
        font-size: 22px;
        font-weight: 700;
    }

    .land-project-footer a {
        width: 58px;
        height: 58px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        background: #E53935;
        color: #fff;
        font-size: 18px;
        transition: .35s;
    }


/*=========================================
Responsive
=========================================*/

@media(max-width:1200px) {

    .land-project-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:768px) {

    .land-section-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .land-heading h2 {
        font-size: 38px;
    }

    .land-project-grid {
        grid-template-columns: 1fr;
    }

    .land-project-image {
        height: 280px;
    }
}

@media(max-width:576px) {

    .land-projects {
        padding: 80px 0;
    }

    .land-project-content {
        padding: 25px;
    }

        .land-project-content h3 {
            font-size: 24px;
        }
}

/*======================================================
OXIAURA HOME & LANDS
Part 7.2B – Premium Styling
======================================================*/


/*====================================
Premium Card Border
====================================*/

.land-project-card {
    border: 1px solid rgba(14,79,168,.10);
    background: #ffffff;
}

    .land-project-card:nth-child(2) {
        border-color: rgba(229,57,53,.15);
    }

    .land-project-card:nth-child(3) {
        border-color: rgba(14,79,168,.12);
    }


    /*====================================
Luxury Top Accent
====================================*/

    .land-project-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background: linear-gradient( 90deg, #0E4FA8 0%, #1E88E5 40%, #E53935 100% );
        z-index: 10;
    }


    /*====================================
Decorative Corner
====================================*/

    .land-project-card::after {
        content: "";
        position: absolute;
        right: -70px;
        top: -70px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: radial-gradient( rgba(14,79,168,.08), transparent 70% );
        pointer-events: none;
    }


/*====================================
Project Badge
====================================*/

.land-project-badge {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 50px;
    background: rgba(255,255,255,.20);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.35);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

    .land-project-badge::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #E53935;
    }


/*====================================
Project Title
====================================*/

.land-project-content h3 {
    transition: .35s;
}

.land-project-card:hover h3 {
    color: #0E4FA8;
}


/*====================================
Description
====================================*/

.land-project-content p {
    color: #6b7280;
}


/*====================================
Price
====================================*/

.land-project-footer strong {
    background: linear-gradient( 135deg, #0E4FA8, #E53935 );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/*====================================
Arrow Button
====================================*/

.land-project-footer a {
    position: relative;
    overflow: hidden;
    background: linear-gradient( 135deg, #E53935, #0E4FA8 );
    box-shadow: 0 15px 35px rgba(14,79,168,.20);
}

    .land-project-footer a i {
        position: relative;
        z-index: 2;
    }


    /*====================================
Button Shine
====================================*/

    .land-project-footer a::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);
        transition: .8s;
    }

.land-project-card:hover .land-project-footer a::before {
    left: 150%;
}


/*====================================
Luxury Bottom Divider
====================================*/

.land-project-content {
    position: relative;
}

    .land-project-content::before {
        content: "";
        position: absolute;
        top: 0;
        left: 35px;
        width: 60px;
        height: 3px;
        border-radius: 10px;
        background: linear-gradient( 90deg, #0E4FA8, #E53935 );
    }


/*====================================
View Button
====================================*/

.land-view-btn {
    position: relative;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(14,79,168,.18);
}

    .land-view-btn::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);
        transition: .8s;
    }

    .land-view-btn:hover::before {
        left: 150%;
    }

    .land-view-btn:hover {
        transform: translateY(-4px);
        background: #E53935;
    }


/*====================================
Premium Shadow
====================================*/

.land-project-card {
    box-shadow: 0 18px 45px rgba(0,0,0,.08), 0 5px 12px rgba(255,255,255,.70) inset;
}


/*====================================
Image Border Radius
====================================*/

.land-project-image img {
    border-bottom: 1px solid rgba(0,0,0,.04);
}


/*====================================
Luxury Background Pattern
====================================*/

.land-projects::before {
    content: "";
    position: absolute;
    top: -250px;
    right: -250px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient( rgba(14,79,168,.05), transparent 70% );
}

.land-projects::after {
    content: "";
    position: absolute;
    bottom: -250px;
    left: -250px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient( rgba(229,57,53,.05), transparent 70% );
}

/*======================================================
OXIAURA HOME & LANDS
Part 7.2C - Responsive CSS
======================================================*/


/*=========================================
4K Displays
=========================================*/

@media (min-width:1800px) {

    .land-projects {
        padding: 150px 0;
    }

    .land-container {
        max-width: 1700px;
    }

    .land-project-grid {
        gap: 45px;
    }

    .land-project-image {
        height: 420px;
    }

    .land-heading h2 {
        font-size: 64px;
    }

    .land-project-content {
        padding: 42px;
    }

        .land-project-content h3 {
            font-size: 34px;
        }

        .land-project-content p {
            font-size: 17px;
        }
}


/*=========================================
Large Desktop
=========================================*/

@media (max-width:1400px) {

    .land-project-grid {
        gap: 28px;
    }

    .land-project-image {
        height: 300px;
    }

    .land-heading h2 {
        font-size: 46px;
    }
}


/*=========================================
Laptop
=========================================*/

@media (max-width:1200px) {

    .land-project-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 30px;
    }

    .land-project-image {
        height: 320px;
    }

    .land-section-header {
        gap: 25px;
    }

    .land-heading h2 {
        font-size: 42px;
    }
}


/*=========================================
Tablet
=========================================*/

@media (max-width:992px) {

    .land-projects {
        padding: 100px 0;
    }

    .land-section-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .land-view-btn {
        margin-top: 10px;
    }

    .land-project-grid {
        grid-template-columns: 1fr;
    }

    .land-project-card {
        max-width: 750px;
        margin: auto;
    }

    .land-project-image {
        height: 380px;
    }

    .land-project-content {
        padding: 30px;
    }
}


/*=========================================
Mobile
=========================================*/

@media (max-width:768px) {

    .land-projects {
        padding: 80px 0;
    }

    .land-heading h2 {
        font-size: 34px;
        line-height: 1.3;
    }

    .land-subtitle {
        font-size: 12px;
        padding: 9px 18px;
    }

    .land-project-image {
        height: 260px;
    }

    .land-project-content {
        padding: 25px;
    }

        .land-project-content h3 {
            font-size: 24px;
        }

        .land-project-content p {
            font-size: 15px;
            line-height: 1.8;
        }

    .land-project-footer {
        margin-top: 25px;
    }

        .land-project-footer strong {
            font-size: 20px;
        }

        .land-project-footer a {
            width: 52px;
            height: 52px;
        }
}


/*=========================================
Small Phones
=========================================*/

@media (max-width:576px) {

    .land-projects {
        padding: 70px 0;
    }

    .land-heading h2 {
        font-size: 30px;
    }

    .land-view-btn {
        width: 100%;
        justify-content: center;
        padding: 16px 22px;
    }

    .land-project-image {
        height: 220px;
    }

    .land-project-content {
        padding: 22px;
    }

        .land-project-content h3 {
            font-size: 22px;
        }

        .land-project-content p {
            font-size: 14px;
        }

    .land-project-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

        .land-project-footer a {
            width: 48px;
            height: 48px;
        }
}
/*=========================================
    HIDE ABOUT STATS ON MOBILE
=========================================*/
@media (max-width:768px) {

    .land-about-stats {
        display: none !important;
    }
}

/*=========================================
Extra Small Devices
=========================================*/

@media (max-width:400px) {

    .land-heading h2 {
        font-size: 26px;
    }

    .land-project-image {
        height: 200px;
    }

    .land-project-content {
        padding: 18px;
    }

        .land-project-content h3 {
            font-size: 20px;
        }

    .land-project-badge {
        top: 15px;
        left: 15px;
        font-size: 11px;
        padding: 8px 14px;
    }
}


/*=========================================
Landscape Mobile
=========================================*/

@media (max-height:600px) and (orientation:landscape) {

    .land-project-image {
        height: 220px;
    }
}

/*======================================================
OXIAURA HOME & LANDS
Part 7.3 – Hover Effects & Animations
======================================================*/


/*=========================================
Smooth GPU Animation
=========================================*/

.land-project-card,
.land-project-image img,
.land-project-overlay,
.land-project-content,
.land-project-badge,
.land-project-footer a {
    transition: all .45s cubic-bezier(.4,0,.2,1);
    will-change: transform;
}


    /*=========================================
Card Lift
=========================================*/

    .land-project-card:hover {
        transform: translateY(-18px);
        box-shadow: 0 35px 80px rgba(7,28,53,.18), 0 15px 35px rgba(14,79,168,.08);
    }


        /*=========================================
Image Zoom
=========================================*/

        .land-project-card:hover .land-project-image img {
            transform: scale(1.12);
        }


/*=========================================
Overlay Animation
=========================================*/

.land-project-overlay {
    opacity: .70;
}

.land-project-card:hover .land-project-overlay {
    opacity: .90;
    background: linear-gradient( to top, rgba(7,28,53,.92), rgba(7,28,53,.45), rgba(7,28,53,.08) );
}


/*=========================================
Premium Shine
=========================================*/

.land-project-image {
    position: relative;
}

    .land-project-image::before {
        content: "";
        position: absolute;
        top: 0;
        left: -120%;
        width: 60%;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.35), transparent );
        transform: skewX(-25deg);
        z-index: 4;
    }

.land-project-card:hover .land-project-image::before {
    left: 170%;
    transition: 1.2s;
}


/*=========================================
Badge Animation
=========================================*/

.land-project-badge {
    transform: translateY(0);
}

.land-project-card:hover .land-project-badge {
    transform: translateY(-6px);
    background: rgba(255,255,255,.28);
    box-shadow: 0 12px 30px rgba(0,0,0,.20);
}


/*=========================================
Title Hover
=========================================*/

.land-project-card:hover h3 {
    color: #0E4FA8;
}


/*=========================================
Description Fade
=========================================*/

.land-project-content p {
    transition: .35s;
}

.land-project-card:hover p {
    color: #555;
}


/*=========================================
Price Hover
=========================================*/

.land-project-card:hover strong {
    letter-spacing: .5px;
}


/*=========================================
Arrow Button
=========================================*/

.land-project-footer a {
    overflow: hidden;
    position: relative;
}

    .land-project-footer a:hover {
        transform: rotate(45deg) scale(1.08);
    }

    .land-project-footer a i {
        transition: .35s;
    }

    .land-project-footer a:hover i {
        transform: rotate(-45deg);
    }


    /*=========================================
Button Glow
=========================================*/

    .land-project-footer a::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        box-shadow: 0 0 35px rgba(14,79,168,.45);
        opacity: 0;
        transition: .4s;
    }

.land-project-card:hover .land-project-footer a::after {
    opacity: 1;
}


/*=========================================
Top Border Animation
=========================================*/

.land-project-card::before {
    background-size: 250%;
    animation: landBorderMove 6s linear infinite;
}

@keyframes landBorderMove {

    from {
        background-position: 0;
    }

    to {
        background-position: 250%;
    }
}


/*=========================================
Blue Circle Glow
=========================================*/

.land-project-card::after {
    transition: .45s;
}

.land-project-card:hover::after {
    transform: scale(1.3);
    opacity: .9;
}


/*=========================================
Content Lift
=========================================*/

.land-project-card:hover .land-project-content {
    transform: translateY(-5px);
}


/*=========================================
Image Blur Background
=========================================*/

.land-project-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( transparent, rgba(0,0,0,.05) );
    opacity: 0;
    transition: .45s;
}

.land-project-card:hover .land-project-image::after {
    opacity: 1;
}


/*=========================================
Footer Divider
=========================================*/

.land-project-footer {
    position: relative;
}

    .land-project-footer::before {
        content: "";
        position: absolute;
        top: -20px;
        left: 0;
        width: 100%;
        height: 1px;
        background: rgba(0,0,0,.06);
    }


/*=========================================
Card Entrance Animation
=========================================*/

.land-project-card {
    opacity: 0;
    transform: translateY(60px);
    animation: landProjectFade .8s ease forwards;
}

    .land-project-card:nth-child(2) {
        animation-delay: .2s;
    }

    .land-project-card:nth-child(3) {
        animation-delay: .4s;
    }

@keyframes landProjectFade {

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/*=========================================
Floating Effect
=========================================*/

.land-project-card:nth-child(2) {
    animation: landProjectFade .8s ease forwards, landFloatProject 5s ease-in-out infinite 1.5s;
}

@keyframes landFloatProject {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}
/*=====================================
CONTACT SECTION
=====================================*/

.land-contact {
    position: relative;
    padding: 140px 8%;
    background: #081528;
    overflow: hidden;
}

.land-contact-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(33,82,180,.20), transparent 40%), radial-gradient(circle at bottom left, rgba(255,58,58,.08), transparent 45%);
}

.land-container {
    max-width: 1400px;
    margin: auto;
    position: relative;
    z-index: 2;
}

/*============================*/

.land-section-header {
    text-align: center;
    margin-bottom: 70px;
}

.land-subtitle {
    display: inline-block;
    color: #ff3d3d;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 20px;
}

.land-section-header h2 {
    font-size: 58px;
    color: #fff;
    font-family: "Cormorant Garamond",serif;
    margin-bottom: 20px;
}

    .land-section-header h2 span {
        color: #ff3d3d;
    }

.land-section-header p {
    color: #d9d9d9;
    max-width: 700px;
    margin: auto;
    line-height: 1.8;
}

/*============================*/

.land-contact-wrapper {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 40px;
}

/*============================*/

.land-contact-info {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.land-info-card {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 30px;
    border-radius: 30px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.12);
    transition: .4s;
}

    .land-info-card:hover {
        transform: translateY(-8px);
        border-color: #ff3d3d;
    }

.land-icon {
    width: 70px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    background: #1e62d0;
    color: #fff;
    font-size: 30px;
    flex-shrink: 0;
}

.land-info-card h4 {
    color: #fff;
    margin-bottom: 8px;
}

.land-info-card p {
    color: #d6d6d6;
    line-height: 1.7;
}

/*============================*/

.land-contact-form {
    padding: 45px;
    border-radius: 35px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255,255,255,.10);
}

.land-input-row {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.land-contact-form input,
.land-contact-form textarea {
    width: 100%;
    padding: 18px 22px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    color: #fff;
    font-size: 15px;
    outline: none;
}

.land-contact-form textarea {
    height: 170px;
    resize: none;
    margin-bottom: 25px;
}

    .land-contact-form input::placeholder,
    .land-contact-form textarea::placeholder {
        color: #bbb;
    }

.land-contact-form button {
    border: none;
    padding: 18px 45px;
    border-radius: 50px;
    background: #ef312b;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: .35s;
}

    .land-contact-form button:hover {
        background: #1e62d0;
        transform: translateY(-3px);
    }

/*============================*/

@media(max-width:992px) {

    .land-contact-wrapper {
        grid-template-columns: 1fr;
    }
}

@media(max-width:768px) {

    .land-contact {
        padding: 90px 6%;
    }

    .land-section-header h2 {
        font-size: 40px;
    }

    .land-input-row {
        grid-template-columns: 1fr;
    }

    .land-contact-form {
        padding: 30px;
    }

    .land-info-card {
        padding: 22px;
    }

    .land-icon {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }
}
#land-projects .land-heading h2 {
    background: linear-gradient(135deg, #0F4DB8, #2D7DFF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
/*=========================================
Disable Heavy Effects On Mobile
=========================================*/

@media(max-width:768px) {

    .land-project-card:hover {
        transform: none;
    }

        .land-project-card:hover .land-project-image img {
            transform: scale(1.03);
        }

    .land-project-image::before {
        display: none;
    }
}
/*==================================
Luxury Footer
==================================*/

.land-footer {
    position: relative;
    background: linear-gradient( 135deg, #04162F 0%, #082A58 55%, #0B3C82 100%);
    color: #fff;
    overflow: hidden;
    padding-top: 90px;
}

    /* Decorative Glow */

    .land-footer::before {
        content: "";
        position: absolute;
        top: -180px;
        left: -180px;
        width: 450px;
        height: 450px;
        border-radius: 50%;
        background: radial-gradient( rgba(229,57,53,.18), transparent 70%);
    }

    .land-footer::after {
        content: "";
        position: absolute;
        right: -200px;
        bottom: -200px;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        background: radial-gradient( rgba(14,79,168,.28), transparent 70%);
    }

/* Top Border */

.land-footer-top-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient( 90deg, #E53935, #0E4FA8, #E53935);
}

/* Grid */

.land-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr 1.4fr;
    gap: 50px;
    position: relative;
    z-index: 2;
}

/* Logo */

.land-footer-logo {
    width: 220px;
    margin-bottom: 25px;
}

.land-footer-about {
    color: rgba(255,255,255,.75);
    line-height: 1.9;
    margin-bottom: 30px;
}

/* Titles */

.land-footer h3 {
    color: #fff;
    font-size: 22px;
    margin-bottom: 28px;
    position: relative;
}

    .land-footer h3::after {
        content: "";
        width: 55px;
        height: 3px;
        margin-top: 12px;
        display: block;
        background: linear-gradient( 90deg, #E53935, #0E4FA8);
    }

/* Lists */

.land-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.land-footer li {
    margin-bottom: 16px;
}

.land-footer a {
    color: rgba(255,255,255,.78);
    text-decoration: none;
    transition: .35s;
}

    .land-footer a:hover {
        color: #fff;
        padding-left: 8px;
    }

/* Contact */

.land-contact li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    line-height: 1.8;
}

.land-contact i {
    color: #E53935;
    margin-top: 5px;
}

/* Social */

.land-social {
    display: flex;
    gap: 14px;
}

    .land-social a {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(255,255,255,.08);
        border: 1px solid rgba(255,255,255,.12);
        color: #fff;
        transition: .35s;
    }

        .land-social a:hover {
            background: #E53935;
            transform: translateY(-6px);
        }

/* Newsletter */

.land-newsletter {
    display: flex;
    margin-top: 20px;
}

    .land-newsletter input {
        flex: 1;
        height: 56px;
        border: none;
        outline: none;
        padding: 0 20px;
        border-radius: 40px 0 0 40px;
        background: rgba(255,255,255,.10);
        color: #fff;
    }

        .land-newsletter input::placeholder {
            color: rgba(255,255,255,.6);
        }

    .land-newsletter button {
        width: 65px;
        border: none;
        border-radius: 0 40px 40px 0;
        cursor: pointer;
        color: #fff;
        background: linear-gradient( 135deg, #E53935, #C62828);
        transition: .35s;
    }

        .land-newsletter button:hover {
            background: #0E4FA8;
        }

/* Bottom */

.land-footer-bottom {
    margin-top: 70px;
    padding: 28px 0;
    border-top: 1px solid rgba(255,255,255,.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    position: relative;
    z-index: 2;
}

    .land-footer-bottom p {
        color: rgba(255,255,255,.65);
    }

    .land-footer-bottom div {
        display: flex;
        gap: 30px;
    }

/* Responsive */

@media(max-width:1200px) {

    .land-footer-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:768px) {

    .land-footer {
        padding-top: 70px;
    }

    .land-footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .land-footer-bottom {
        flex-direction: column;
        text-align: center;
    }

        .land-footer-bottom div {
            justify-content: center;
            flex-wrap: wrap;
        }

    .land-newsletter {
        flex-direction: column;
        gap: 12px;
    }

        .land-newsletter input {
            border-radius: 40px;
        }

        .land-newsletter button {
            width: 100%;
            height: 56px;
            border-radius: 40px;
        }
}

/*=============================================================
    OXIAURA GREEN CIRCLE
    PREMIUM NAVIGATION

    SECTION 1
==============================================================*/


/*=============================================================
    GOOGLE FONT
==============================================================*/

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');


/*=============================================================
    RESET
==============================================================*/

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins',sans-serif;
    background: #08110B;
    color: #ffffff;
    overflow-x: hidden;
    min-height: 100vh;
    line-height: 1.6;
}

img {
    display: block;
    max-width: 100%;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    font-family: inherit;
}


/*=============================================================
    ROOT VARIABLES
==============================================================*/

:root {
    /* Brand */

    --green-primary: #2F8F46;
    --green-dark: #163321;
    --green-light: #5BC56D;
    --gold: #C89E44;
    --gold-light: #E8C873;
    --blue: #1A4F90;
    --blue-light: #4A83E5;
    --white: #FFFFFF;
    --text: #ECECEC;
    --text-light: #BBBBBB;
    --black: #050505;
    /* Layout */

    --green-navbar-height: 88px;
    --green-navbar-radius: 60px;
    --green-container: 1680px;
    /* Glass */

    --green-glass: linear-gradient( 135deg, rgba(10,20,12,.82), rgba(8,8,8,.72) );
    --green-border: rgba(255,255,255,.08);
    /* Shadows */

    --green-shadow: 0 18px 50px rgba(0,0,0,.45);
    --green-blue-shadow: 0 0 35px rgba(26,79,144,.12);
}


/*=============================================================
    HEADER
==============================================================*/

.green-header {
    position: fixed;
    top: 22px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 9999;
    transition: .4s ease;
}


/*=============================================================
    NAVBAR
==============================================================*/

.green-navbar {
    width: 95%;
    max-width: var(--green-container);
    height: var(--green-navbar-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 34px;
    border-radius: var(--green-navbar-radius);
    background: var(--green-glass);
    border: 1px solid var(--green-border);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: var(--green-shadow), var(--green-blue-shadow), inset 0 1px 0 rgba(255,255,255,.05);
    position: relative;
    overflow: hidden;
}


    /*=============================================================
    GLASS HIGHLIGHT
==============================================================*/

    .green-navbar::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.28), transparent );
    }


/*=============================================================
    DESKTOP LAYOUT
==============================================================*/

.green-logo-area {
    width: 220px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.green-logo {
    height: 60px; /* Original size */

    width: auto;
    transition: .35s ease;
}

.green-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.green-nav-list {
    display: flex;
    align-items: center;
    gap: 42px;
}

.green-right-area {
    width: 240px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}


/*=============================================================
    MOBILE PLACEHOLDERS
==============================================================*/

.green-mobile-toggle {
    display: none;
}

.green-mobile-menu {
    display: none;
}

.green-backdrop {
    display: none;
}


/*=============================================================
    LARGE DESKTOP
==============================================================*/

@media(min-width:1800px) {

    .green-navbar {
        max-width: 1780px;
    }
}


/*=============================================================
    LAPTOP
==============================================================*/

@media(max-width:1400px) {

    .green-navbar {
        padding: 0 26px;
    }

    .green-nav-list {
        gap: 32px;
    }
}

/*=============================================================
    SECTION 2
    LOGO • NAVIGATION • HOVER EFFECTS
==============================================================*/


/*=============================================================
    LOGO
==============================================================*/

.green-logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
}

.green-logo {
    height: 60px;
    width: auto;
    transition: transform .35s ease, filter .35s ease;
}

    .green-logo:hover {
        transform: scale(1.05);
        filter: drop-shadow(0 0 12px rgba(200,158,68,.35));
    }


/*=============================================================
    DESKTOP NAVIGATION
==============================================================*/

.green-nav {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.green-nav-list {
    display: flex;
    align-items: center;
    gap: 42px;
}

.green-nav-item {
    position: relative;
}


/*=============================================================
    NAVIGATION LINKS
==============================================================*/

.green-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 88px;
    color: rgba(255,255,255,.90);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
   
}


    /*=============================================================
    GOLD UNDERLINE
==============================================================*/

    .green-nav-link::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 18px;
        transform: translateX(-50%);
        width: 0;
        height: 2px;
        border-radius: 20px;
        background: linear-gradient( 90deg, transparent, var(--gold-light), var(--gold), var(--gold-light), transparent );
     
    }


    /*=============================================================
    GOLD GLOW DOT
==============================================================*/

    .green-nav-link::before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 11px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        transform: translateX(-50%) scale(0);
        background: var(--gold-light);
        box-shadow: 0 0 8px rgba(232,200,115,.85), 0 0 18px rgba(232,200,115,.45);
        
    }


    /*=============================================================
    HOVER EFFECT
==============================================================*/

    .green-nav-link:hover {
        color: var(--gold-light);
        transform: translateY(-2px);
    }

        .green-nav-link:hover::after {
            width: 100%;
        }

        .green-nav-link:hover::before {
            transform: translateX(-50%) scale(1);
        }


/*=============================================================
    ACTIVE LINK
==============================================================*/

.green-active {
    color: var(--gold) !important;
}

    .green-active::after {
        width: 100%;
    }

    .green-active::before {
        transform: translateX(-50%) scale(1);
    }


/*=============================================================
    MENU SPACING
==============================================================*/

.green-nav-list > li {
    display: flex;
    align-items: center;
}


/*=============================================================
    LARGE DESKTOP
==============================================================*/

@media (min-width:1800px) {

    .green-nav-list {
        gap: 55px;
    }
}


/*=============================================================
    LAPTOP
==============================================================*/

@media (max-width:1400px) {

    .green-nav-list {
        gap: 32px;
    }

    .green-nav-link {
        font-size: 13px;
    }
}
/*=============================================================
    SECTION 3
    CTA BUTTON • SHINE • SCROLL STATE
==============================================================*/


/*=============================================================
    RIGHT AREA
==============================================================*/

.green-right-area {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}


/*=============================================================
    CTA BUTTON
==============================================================*/

.green-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 15px 30px;
    min-width: 210px;
    border-radius: 50px;
    overflow: hidden;
    background: linear-gradient( 135deg, rgba(47,143,70,.95), rgba(26,79,144,.90) );
    border: 1px solid rgba(200,158,68,.45);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .5px;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
    cursor: pointer;
}


/*=============================================================
    ICON
==============================================================*/

.green-btn-icon {
    width: 18px;
    height: 18px;
    transition: transform .35s ease;
}


/*=============================================================
    SHINE EFFECT
==============================================================*/

.green-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 45%;
    height: 100%;
    background: linear-gradient( 120deg, transparent, rgba(255,255,255,.45), transparent );
    transform: skewX(-25deg);
}


/*=============================================================
    SHINE ANIMATION
==============================================================*/

.green-btn:hover::before {
    animation: greenShine .8s linear;
}

@keyframes greenShine {

    0% {
        left: -120%;
    }

    100% {
        left: 170%;
    }
}


/*=============================================================
    HOVER
==============================================================*/

.green-btn:hover {
    transform: translateY(-4px);
    border-color: var(--gold);
    background: linear-gradient( 135deg, rgba(63,181,96,.98), rgba(32,104,199,.95) );
}


/*=============================================================
    BUTTON SHADOW
==============================================================*/

.green-btn:hover {
    box-shadow: 0 12px 25px rgba(47,143,70,.28), 0 0 25px rgba(26,79,144,.20), 0 0 18px rgba(200,158,68,.15);
}


    /*=============================================================
    ICON MOVE
==============================================================*/

    .green-btn:hover .green-btn-icon {
        transform: translateX(4px);
    }


/*=============================================================
    ACTIVE CLICK
==============================================================*/

.green-btn:active {
    transform: translateY(-1px);
}


/*=============================================================
    STICKY NAVIGATION
==============================================================*/



/*=============================================================
    TRANSITIONS
==============================================================*/

.green-header,
.green-navbar,
.green-btn,
.green-logo {
    transition: all .35s ease;
}

/*=============================================================
    SECTION 4
    RESPONSIVE NAVIGATION
==============================================================*/


/*=============================================================
    MOBILE TOGGLE BUTTON
==============================================================*/

.green-mobile-toggle {
    display: none;
    width: 52px;
    height: 52px;
    border: none;
    background: transparent;
    cursor: pointer;
    position: relative;
    z-index: 1002;
}

    .green-mobile-toggle span {
        position: absolute;
        left: 12px;
        width: 28px;
        height: 2px;
        background: #ffffff;
        border-radius: 10px;
        transition: .35s ease;
    }

        .green-mobile-toggle span:nth-child(1) {
            top: 17px;
        }

        .green-mobile-toggle span:nth-child(2) {
            top: 25px;
        }

        .green-mobile-toggle span:nth-child(3) {
            top: 33px;
        }


    /*=============================================================
    HAMBURGER ANIMATION
==============================================================*/

    .green-mobile-toggle.green-open span:nth-child(1) {
        transform: rotate(45deg);
        top: 25px;
    }

    .green-mobile-toggle.green-open span:nth-child(2) {
        opacity: 0;
    }

    .green-mobile-toggle.green-open span:nth-child(3) {
        transform: rotate(-45deg);
        top: 25px;
    }


/*=============================================================
    MOBILE MENU
==============================================================*/

.green-mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 360px;
    max-width: 90%;
    height: 100vh;
    background: linear-gradient( 180deg, #08110B, #101010 );
    backdrop-filter: blur(30px);
    transition: right .45s ease;
    z-index: 1001;
    padding: 40px 35px;
    display: flex;
    flex-direction: column;
}

    .green-mobile-menu.green-show {
        right: 0;
    }


/*=============================================================
    MOBILE HEADER
==============================================================*/

.green-mobile-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 45px;
}

.green-mobile-logo {
    height: 55px;
    width: auto;
}

.green-close {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 28px;
    cursor: pointer;
}


/*=============================================================
    MOBILE LINKS
==============================================================*/

.green-mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .green-mobile-nav a {
        padding: 18px 0;
        color: #ffffff;
        font-size: 17px;
        font-weight: 500;
        border-bottom: 1px solid rgba(255,255,255,.08);
        transition: .3s;
    }

        .green-mobile-nav a:hover {
            color: var(--gold);
            padding-left: 10px;
        }


/*=============================================================
    MOBILE BUTTON
==============================================================*/

.green-mobile-bottom {
    margin-top: auto;
}

.green-mobile-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    border-radius: 50px;
    background: linear-gradient( 135deg, var(--green-primary), var(--blue) );
    color: #ffffff;
    font-weight: 600;
}


/*=============================================================
    BACKDROP
==============================================================*/

.green-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: .35s;
    z-index: 1000;
}

    .green-backdrop.green-show {
        opacity: 1;
        visibility: visible;
    }


/*=============================================================
    TABLET
==============================================================*/

@media(max-width:1200px) {

    .green-nav {
        display: none;
    }

    .green-right-area {
        display: none;
    }

    .green-mobile-toggle {
        display: block;
    }
}


/*=============================================================
    MOBILE
==============================================================*/

@media(max-width:768px) {

    .green-header {
        top: 10px;
    }

    .green-navbar {
        width: 96%;
        height: 74px;
        padding: 0 18px;
        border-radius: 24px;
    }

    .green-logo {
        height: 48px;
    }

    .green-mobile-menu {
        width: 100%;
        max-width: 100%;
        padding: 30px;
    }
}


/*=============================================================
    SMALL MOBILE
==============================================================*/

@media(max-width:480px) {

    .green-navbar {
        height: 68px;
    }

    .green-logo {
        height: 42px;
    }

    .green-mobile-nav a {
        font-size: 16px;
    }
}

/*=============================================================
    SECTION 5
    RESPONSIVE & PERFORMANCE
==============================================================*/


/*=============================================================
    1600px - Large Laptop
==============================================================*/

@media (max-width:1600px) {

    .green-navbar {
        width: 96%;
        padding: 0 28px;
    }

    .green-nav-list {
        gap: 34px;
    }

    .green-btn {
        min-width: 190px;
        padding: 14px 26px;
    }
}


/*=============================================================
    1400px - Desktop
==============================================================*/

@media (max-width:1400px) {

    .green-logo-area {
        width: 180px;
    }

    .green-nav-list {
        gap: 28px;
    }

    .green-nav-link {
        font-size: 13px;
        letter-spacing: .8px;
    }
}


/*=============================================================
    1200px - Tablet Landscape
==============================================================*/

@media (max-width:1200px) {

    .green-navbar {
        height: 82px;
        border-radius: 28px;
    }

    .green-nav {
        display: none;
    }

    .green-right-area {
        display: none;
    }

    .green-mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .green-logo {
        height: 54px;
    }
}


/*=============================================================
    992px - Tablet Portrait
==============================================================*/

@media (max-width:992px) {

    .green-header {
        top: 14px;
    }

    .green-navbar {
        width: 95%;
        padding: 0 22px;
    }

    .green-logo {
        height: 50px;
    }
}


/*=============================================================
    768px - Mobile
==============================================================*/

@media (max-width:768px) {

    .green-header {
        top: 10px;
    }

    .green-navbar {
        height: 74px;
        padding: 0 18px;
        border-radius: 22px;
    }

    .green-logo {
        height: 46px;
    }

    .green-mobile-menu {
        width: 100%;
        max-width: 100%;
        padding: 28px;
    }
}


/*=============================================================
    576px - Small Mobile
==============================================================*/

@media (max-width:576px) {

    .green-navbar {
        width: 96%;
        height: 68px;
    }

    .green-logo {
        height: 42px;
    }

    .green-mobile-nav a {
        font-size: 16px;
        padding: 16px 0;
    }

    .green-mobile-btn {
        padding: 15px;
        font-size: 15px;
    }
}


/*=============================================================
    ULTRA WIDE
==============================================================*/

@media (min-width:1921px) {

    .green-navbar {
        max-width: 1850px;
    }

    .green-nav-list {
        gap: 58px;
    }

    .green-nav-link {
        font-size: 15px;
    }

    .green-btn {
        min-width: 220px;
    }
}


/*=============================================================
    2K & 4K Displays
==============================================================*/

@media (min-width:2560px) {

    .green-navbar {
        max-width: 2100px;
        height: 96px;
    }

    .green-logo {
        height: 68px;
    }

    .green-nav-link {
        font-size: 16px;
    }
}


/*=============================================================
    PERFORMANCE OPTIMIZATION
==============================================================*/

.green-navbar,
.green-logo,
.green-nav-link,
.green-btn,
.green-mobile-menu {
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform: translateZ(0);
}


/*=============================================================
    SELECTION
==============================================================*/

::selection {
    background: var(--gold);
    color: #ffffff;
}


/*=============================================================
    SCROLLBAR
==============================================================*/

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #0b0b0b;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient( var(--green-primary), var(--blue) );
    border-radius: 20px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient( var(--gold), var(--green-primary) );
    }

/*=============================================================
    OXIAURA GREEN CIRCLE
    PREMIUM HERO

    SECTION 2
    Layout • Background • Typography
==============================================================*/


/*=============================================================
    HERO SECTION
==============================================================*/

.green-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #08110B;
}


/*=============================================================
    HERO BACKGROUND
==============================================================*/

.green-hero-bg {
    position: absolute;
    inset: 0;
    background-image: url("../images/greenhero-bg.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transform: scale(1.05);
    z-index: 1;
}


/*=============================================================
    DARK OVERLAY
==============================================================*/

.green-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, rgba(6,12,7,.72) 0%, rgba(8,16,10,.45) 35%, rgba(8,16,10,.20) 65%, rgba(6,8,7,.50) 100% );
    z-index: 2;
}


/*=============================================================
    GREEN / GOLD LIGHT
==============================================================*/

.green-hero-gradient {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 18% 35%, rgba(47,143,70,.20), transparent 42%), radial-gradient(circle at 85% 18%, rgba(26,79,144,.14), transparent 35%), radial-gradient(circle at 45% 100%, rgba(200,158,68,.10), transparent 45%);
    z-index: 3;
}


/*=============================================================
    PARTICLES
==============================================================*/

.green-hero-particles {
    position: absolute;
    inset: 0;
    background-image: url("../images/hero/particles.png");
    background-size: cover;
    opacity: .08;
    z-index: 4;
}


/*=============================================================
    CONTAINER
==============================================================*/

.green-hero-container {
    position: relative;
    z-index: 10;
    width: 92%;
    max-width: 1650px;
    margin: auto;
    display: grid;
    grid-template-columns: 58% 42%;
    align-items: center;
    gap: 80px;
    padding-top: 140px;
    padding-bottom: 80px;
}


/*=============================================================
    LEFT CONTENT
==============================================================*/

.green-hero-content {
    max-width: 760px;
}


/*=============================================================
    HERO TAG
==============================================================*/

.green-hero-tag {
    display: inline-flex;
    align-items: center;
    padding: 10px 22px;
    margin-bottom: 30px;
    border-radius: 50px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(200,158,68,.25);
    backdrop-filter: blur(12px);
    color: var(--gold-light);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}


/*=============================================================
    HERO TITLE
==============================================================*/

.green-hero-title {
    font-family: "Cinzel", serif;
    font-size: 72px;
    line-height: 1.08;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 28px;
    text-shadow: 0 10px 30px rgba(0,0,0,.45);
}


    /*=============================================================
    GOLD WORD
==============================================================*/

    .green-hero-title span {
        color: var(--gold);
    }


/*=============================================================
    DESCRIPTION
==============================================================*/

.green-hero-description {
    max-width: 640px;
    color: rgba(255,255,255,.82);
    font-size: 18px;
    line-height: 1.9;
    margin-bottom: 42px;
}


/*=============================================================
    CROPS
==============================================================*/

.green-hero-crops {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 45px;
}


.green-crop {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    border-radius: 40px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(14px);
    color: #ffffff;
    font-size: 15px;
    transition: .35s ease;
}


    .green-crop:hover {
        border-color: var(--gold);
        transform: translateY(-4px);
        background: rgba(47,143,70,.18);
    }


/*=============================================================
    BUTTON AREA
==============================================================*/

.green-hero-buttons {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: -20px;
}

/*=============================================================
    OXIAURA GREEN CIRCLE
    PREMIUM HERO

    SECTION 3
    Buttons • Glass Card • Floating Badges
==============================================================*/


/*=============================================================
    HERO BUTTONS
==============================================================*/

.green-btn-primary,
.green-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    height: 62px;
    padding: 0 38px;
    border-radius: 60px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .6px;
    transition: .35s ease;
    position: relative;
    overflow: hidden;
}


/*=============================================================
    PRIMARY BUTTON
==============================================================*/

.green-btn-primary {
    color: #fff;
    background: linear-gradient( 135deg, var(--green-primary), var(--blue) );
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 15px 40px rgba(46,143,70,.25), 0 0 25px rgba(26,79,144,.18);
}


    /* Shine */

    .green-btn-primary::before {
        content: "";
        position: absolute;
        left: -120%;
        top: 0;
        width: 45%;
        height: 100%;
        background: linear-gradient( 120deg, transparent, rgba(255,255,255,.45), transparent );
        transform: skewX(-25deg);
    }

    .green-btn-primary:hover::before {
        animation: greenHeroShine .8s linear;
    }

@keyframes greenHeroShine {

    from {
        left: -120%;
    }

    to {
        left: 180%;
    }
}

.green-btn-primary:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 45px rgba(46,143,70,.35), 0 0 35px rgba(26,79,144,.25);
}


/*=============================================================
    SECONDARY BUTTON
==============================================================*/

.green-btn-secondary {
    color: #fff;
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.12);
}

    .green-btn-secondary:hover {
        background: rgba(255,255,255,.09);
        border-color: var(--gold);
        transform: translateY(-4px);
    }


/*=============================================================
    HERO RIGHT
==============================================================*/

.green-hero-right {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 650px;
}


/*=============================================================
    PREMIUM GLASS CARD
==============================================================*/

.green-glass-card {
    position: relative;
    width: 420px;
    padding: 40px;
    border-radius: 36px;
    background: linear-gradient( 145deg, rgba(18,28,20,.82), rgba(12,12,12,.74) );
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(24px);
    box-shadow: 0 35px 70px rgba(0,0,0,.45), 0 0 30px rgba(26,79,144,.12);
}


    /* Glass border */

    .green-glass-card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 36px;
        padding: 1px;
        background: linear-gradient( 135deg, rgba(255,255,255,.18), rgba(200,158,68,.20), transparent );
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }


/*=============================================================
    CARD CONTENT
==============================================================*/

.green-card-top {
    color: var(--gold);
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 28px;
}

.green-card-middle h3 {
    font-family: "Cinzel",serif;
    font-size: 34px;
    margin-bottom: 25px;
    color: #fff;
}

.green-card-middle p {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: rgba(255,255,255,.82);
    font-size: 16px;
}

    .green-card-middle p::before {
        content: "✓";
        color: var(--green-light);
        font-weight: bold;
    }

.green-card-bottom {
    margin-top: 40px;
}

.green-card-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 56px;
    border-radius: 50px;
    color: #fff;
    background: linear-gradient( 135deg, var(--gold), #b8842f );
    transition: .35s ease;
}

    .green-card-button:hover {
        transform: translateY(-3px);
    }


/*=============================================================
    FLOATING BADGES
==============================================================*/

.green-floating {
    position: absolute;
    padding: 14px 22px;
    border-radius: 40px;
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.10);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
    animation: greenFloat 6s ease-in-out infinite;
}

.green-floating-one {
    top: 40px;
    left: -40px;
}

.green-floating-two {
    top: 240px;
    right: 40px;
    animation-delay: 2s;
}

.green-floating-three {
    bottom: 40px;
    left: -20px;
    animation-delay: 4s;
}


/*=============================================================
    FLOAT ANIMATION
==============================================================*/

@keyframes greenFloat {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

/*=============================================================
    OXIAURA GREEN CIRCLE
    PREMIUM HERO

    SECTION 4
    ANIMATIONS
==============================================================*/


/*=============================================================
    HERO CONTENT ANIMATION
==============================================================*/

.green-hero-content {
    animation: greenHeroLeft 1.1s ease forwards;
}

.green-hero-right {
    animation: greenHeroRight 1.2s ease forwards;
}


/*=============================================================
    STAGGERED ANIMATION
==============================================================*/

.green-hero-tag {
    animation: greenFadeUp .8s .15s both;
}

.green-hero-title {
    animation: greenFadeUp .9s .30s both;
}

.green-hero-description {
    animation: greenFadeUp .9s .45s both;
}

.green-hero-crops {
    animation: greenFadeUp .9s .60s both;
}

.green-hero-buttons {
    animation: greenFadeUp .9s .75s both;
}


/*=============================================================
    GLASS CARD
==============================================================*/

.green-glass-card {
    animation: greenCardFloat 6s ease-in-out infinite, greenFadeScale 1.2s ease;
}


/*=============================================================
    FLOATING BADGES
==============================================================*/

.green-floating {
    animation: greenBadgeFloat 6s ease-in-out infinite;
}

.green-floating-two {
    animation-delay: 2s;
}

.green-floating-three {
    animation-delay: 4s;
}


/*=============================================================
    SCROLL INDICATOR
==============================================================*/

.green-scroll {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 20;
}

    .green-scroll span {
        color: #ffffff;
        font-size: 12px;
        letter-spacing: 3px;
        text-transform: uppercase;
        opacity: .75;
    }

.green-scroll-line {
    width: 2px;
    height: 70px;
    border-radius: 20px;
    background: linear-gradient( var(--gold), transparent );
    position: relative;
    overflow: hidden;
}

    .green-scroll-line::after {
        content: "";
        position: absolute;
        left: 0;
        top: -18px;
        width: 100%;
        height: 18px;
        background: #ffffff;
        border-radius: 20px;
        animation: greenScroll 2s infinite;
    }


/*=============================================================
    BACKGROUND MOTION
==============================================================*/

.green-hero-bg {
    animation: greenZoom 18s ease-in-out infinite alternate;
}


/*=============================================================
    PARTICLES
==============================================================*/

.green-hero-particles {
    animation: greenParticles 25s linear infinite;
}


/*=============================================================
    HOVER EFFECTS
==============================================================*/

.green-crop:hover {
    transform: translateY(-6px) scale(1.04);
}

.green-glass-card:hover {
    transform: translateY(-8px);
}

.green-btn-primary:hover,
.green-btn-secondary:hover {
    transform: translateY(-4px);
}


/*=============================================================
    KEYFRAMES
==============================================================*/

@keyframes greenFadeUp {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes greenFadeScale {

    from {
        opacity: 0;
        transform: scale(.92);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes greenHeroLeft {

    from {
        opacity: 0;
        transform: translateX(-60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes greenHeroRight {

    from {
        opacity: 0;
        transform: translateX(60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes greenCardFloat {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes greenBadgeFloat {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes greenScroll {

    0% {
        top: -18px;
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        top: 80px;
        opacity: 0;
    }
}

@keyframes greenZoom {

    from {
        transform: scale(1.05);
    }

    to {
        transform: scale(1.12);
    }
}

@keyframes greenParticles {

    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 -1200px;
    }
}


/*=============================================================
    PERFORMANCE
==============================================================*/

.green-hero *,
.green-glass-card,
.green-floating,
.green-btn-primary,
.green-btn-secondary {
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/*=============================================================
    OXIAURA GREEN CIRCLE
    FEATURE STRIP

    SECTION 2
==============================================================*/


/*=============================================================
    SECTION
==============================================================*/

.green-feature-section {
    position: relative;
    margin-top: -55px;
    z-index: 100;
    padding: 0 0 80px;
}


/*=============================================================
    WRAPPER
==============================================================*/

.green-feature-wrapper {
    width: 92%;
    max-width: 1700px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    background: linear-gradient( 135deg, rgba(10,24,13,.96), rgba(8,10,8,.96) );
    border: 1px solid rgba(201,164,70,.28);
    border-radius: 65px;
    overflow: hidden;
    backdrop-filter: blur(18px);
    display: grid;
    grid-template-columns: repeat(4,1fr);
}


/*=============================================================
    ITEM
==============================================================*/

/*=============================================================
    FEATURE ITEM
==============================================================*/

.green-feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 35px 25px;
    min-height: 220px;
    transition: all .35s ease;
    position: relative;
    background: rgba(38,120,60,.12);
    transform: translateY(-6px);
}
    .green-feature-item:hover {
        background: rgba(40,110,55,.12);
        transform: scale(1.08);
        box-shadow: 0 0 25px rgba(201,164,70,.35);
    }
    .green-feature-item:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 20%;
        right: 0;
        width: 1px;
        height: 60%;
        background: rgba(201,164,70,.25);
    }

/*=============================================================
    ICON
==============================================================*/

green-feature-icon {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--gold);
    color: var(--gold);
    font-size: 34px;
    background: rgba(255,255,255,.03);
    transition: .4s;
}

.green-feature-item:hover .green-feature-icon {
    transform: translateY(-5px) rotate(6deg);
    box-shadow: 0 0 20px rgba(201,164,70,.35), 0 0 45px rgba(39,98,56,.18);
}


/*=============================================================
    CONTENT
==============================================================*/
.green-feature-content {
    margin-top: 18px;
}
    .green-feature-content h3 {
        margin-bottom: 10px;
        color: #ffffff;
        font-size: 22px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .8px;
    }

    .green-feature-content p {
        color: rgba(255,255,255,.78);
        font-size: 15px;
        line-height: 1.7;
    }

/*=============================================================
    MOBILE HERO BUTTONS
==============================================================*/

@media (max-width:768px) {

    .green-hero-buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 18px;
        margin-top: 0;
        transform:translateX(50px);
        width: 90%;
    }
    @media (max-width:768px) {

        .green-hero-buttons {
            width: 90%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .green-btn-primary,
        .green-btn-secondary {
            width: 95% !important;
            max-width: 420px !important;
            min-width: 420px !important;
        }
    }
    
}
/*=============================================================
    HERO TAG - MOBILE
==============================================================*/

@media (max-width:768px) {

    .green-hero-tag {
        display: inline-block;
        width: 260px; /* Fixed width forces exactly 2 lines */

        margin: 0 0 28px 0; /* Left aligned */

        padding: 12px 20px;
        text-align: left;
        white-space: normal;
        line-height: 1.5;
        font-size: 12px;
        letter-spacing: .4px;
        border-radius: 50px;
    }
}

/*=============================================================
    HERO TITLE - MOBILE
==============================================================*/

@media (max-width:768px) {

    .green-hero-content {
        width: 100%;
        padding: 0 18px;
    }

    .green-hero-title {
        font-size: 52px;
        line-height: 1.15;
        letter-spacing: -1px;
        margin-bottom: 22px;
        word-break: normal;
    }
}
/*=============================================================
    DIVIDER
==============================================================*/

.green-feature-divider {
    width: 1px;
    height: 180px;
    align-self: center;
    background: linear-gradient( transparent, rgba(201,164,70,.35), transparent );
}


/*=============================================================
    GOLD BORDER EFFECT
==============================================================*/

.green-feature-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 70px;
    pointer-events: none;
    border: 1px solid rgba(201,164,70,.12);
}


/*=============================================================
    HOVER GLOW
==============================================================*/

.green-feature-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient( circle, rgba(201,164,70,.08), transparent 70% );
    opacity: 0;
    transition: .4s;
}

.green-feature-item:hover::after {
    opacity: 1;
}


/*=============================================================
    TABLET
==============================================================*/

@media(max-width:1200px) {

    .green-feature-wrapper {
        grid-template-columns: repeat(2,1fr);
        border-radius: 40px;
    }

    .green-feature-divider {
        display: none;
    }
}


/*=============================================================
    MOBILE
==============================================================*/

@media(max-width:768px) {

    .green-feature-section {
        margin-top: 30px;
    }

    .green-feature-wrapper {
        grid-template-columns: 1fr;
        border-radius: 30px;
    }

    .green-feature-item {
        padding: 25px;
    }

    .green-feature-icon {
        width: 64px;
        height: 64px;
        font-size: 24px;
    }

    .green-feature-content h3 {
        font-size: 18px;
    }

    .green-feature-content p {
        font-size: 14px;
    }
}
/*=============================================================
    OXIAURA GREEN CIRCLE
    FINANCIAL SUPPORT MODULE
    SECTION 2
==============================================================*/


/*=============================================================
    SECTION
==============================================================*/

.green-support-section {
    position: relative;
    padding: 120px 0;
    background: linear-gradient( 180deg, #071108 0%, #0b1510 100% );
    overflow: hidden;
    margin-top: -60px; /* Adjust this value */
}

.green-container {
    width: 92%;
    max-width: 1700px;
    margin: auto;
}


/*=============================================================
    SECTION TITLE
==============================================================*/

.green-section-title {
    text-align: center;
    margin-bottom: 70px;
}

.green-subtitle {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 50px;
    background: rgba(47,143,70,.12);
    border: 1px solid rgba(201,164,70,.25);
    color: var(--gold);
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 22px;
}

.green-section-title h2 {
    color: #ffffff;
    font-size: 54px;
    font-family: "Cinzel",serif;
    font-weight: 700;
    margin-bottom: 25px;
}

.green-title-divider {
    display: flex;
    justify-content: center;
}

    .green-title-divider span {
        width: 120px;
        height: 3px;
        border-radius: 10px;
        background: linear-gradient( 90deg, transparent, var(--gold), transparent );
    }


/*=============================================================
    GRID
==============================================================*/

.green-support-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 40px;
}


/*=============================================================
    CARD
==============================================================*/

.green-support-card {
    position: relative;
    overflow: hidden;
    border-radius: 32px;
    background: linear-gradient( 180deg, rgba(18,28,20,.96), rgba(8,12,9,.98) );
    border: 1px solid rgba(201,164,70,.22);
    transition: .45s ease;
    box-shadow: 0 18px 45px rgba(0,0,0,.35), 0 0 25px rgba(32,104,199,.08);
}

    .green-support-card:hover {
        transform: translateY(-12px);
        box-shadow: 0 30px 70px rgba(0,0,0,.45), 0 0 40px rgba(47,143,70,.18);
    }


/*=============================================================
    IMAGE
==============================================================*/

.green-support-image {
    position: relative;
    height: 300px;
    overflow: hidden;
}

    .green-support-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .6s ease;
    }

.green-support-card:hover .green-support-image img {
    transform: scale(1.08);
}


/*=============================================================
    IMAGE OVERLAY
==============================================================*/

.green-support-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( transparent 45%, rgba(8,12,9,.85) );
}


/*=============================================================
    FLOATING ICON
==============================================================*/

.green-support-icon {
    position: absolute;
    left: 40px;
    top: 265px;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient( 135deg, var(--gold), #b7852d );
    color: #ffffff;
    font-size: 30px;
    border: 5px solid #0b1510;
    transition: .35s ease;
    z-index: 5;
}

.green-support-card:hover .green-support-icon {
    transform: rotate(12deg) scale(1.08);
}


/*=============================================================
    CONTENT
==============================================================*/

.green-support-content {
    padding: 65px 40px 40px;
}

    .green-support-content h3 {
        color: #ffffff;
        font-size: 30px;
        margin-bottom: 20px;
        font-family: "Cinzel",serif;
    }

    .green-support-content p {
        color: rgba(255,255,255,.78);
        font-size: 16px;
        line-height: 1.9;
        margin-bottom: 30px;
    }


/*=============================================================
    BUTTON
==============================================================*/

.green-read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--gold);
    font-size: 15px;
    font-weight: 600;
    transition: .35s ease;
}

    .green-read-more:hover {
        color: #ffffff;
        transform: translateX(8px);
    }


/*=============================================================
    GOLD BORDER EFFECT
==============================================================*/

.green-support-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 32px;
    padding: 1px;
    background: linear-gradient( 135deg, rgba(201,164,70,.30), transparent, rgba(32,104,199,.18) );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}


/*=============================================================
    RESPONSIVE
==============================================================*/

@media(max-width:1200px) {

    .green-support-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:768px) {

    .green-support-section {
        padding: 80px 0;
    }

    .green-section-title h2 {
        font-size: 40px;
    }

    .green-support-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .green-support-content {
        padding: 60px 30px 35px;
    }

    .green-support-icon {
        left: 30px;
    }
}


/*=============================================================
    PERFORMANCE
==============================================================*/

.green-support-card,
.green-support-image img,
.green-support-icon {
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/*==============================================================
    GREEN CROP SHOWCASE
==============================================================*/

.green-crops-section {
    padding: 90px 0;
    position: relative;
    background: #071108;
}

.green-crops-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 28px;
    margin-top: 60px;
}

/*=============================
        CARD
==============================*/

.green-crop-card {
    background: linear-gradient( 180deg, rgba(12,24,15,.98), rgba(7,12,8,.98) );
    border: 1px solid rgba(201,164,70,.28);
    border-radius: 18px;
    overflow: hidden;
    transition: .45s;
    box-shadow: 0 15px 35px rgba(0,0,0,.35);
}

    .green-crop-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 25px 55px rgba(0,0,0,.45), 0 0 25px rgba(201,164,70,.18);
    }

/*=============================
        IMAGE
==============================*/

.green-crop-image {
    height: 230px;
    overflow: hidden;
}

    .green-crop-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: .6s;
    }

.green-crop-card:hover img {
    transform: scale(1.10);
}

/*=============================
        CONTENT
==============================*/

.green-crop-content {
    padding: 28px;
    text-align: center;
}

    .green-crop-content h3 {
        color: #fff;
        font-size: 23px;
        margin-bottom: 12px;
        font-family: "Cinzel",serif;
    }

    .green-crop-content p {
        color: rgba(255,255,255,.72);
        font-size: 15px;
        line-height: 1.8;
    }

/*=============================
        BUTTON
==============================*/

.green-crops-button {
    margin-top: 55px;
    text-align: center;
}

.green-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 40px;
    border-radius: 50px;
    text-decoration: none;
    color: #fff;
    border: 2px solid var(--gold);
    background: rgba(255,255,255,.03);
    transition: .35s;
}

    .green-btn-outline:hover {
        background: var(--gold);
        color: #111;
        transform: translateY(-4px);
    }

    .green-btn-outline i {
        transition: .35s;
    }

    .green-btn-outline:hover i {
        transform: translateX(6px);
    }

/*=============================
        RESPONSIVE
==============================*/

@media(max-width:1200px) {

    .green-crops-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:768px) {

    .green-crops-grid {
        grid-template-columns: 1fr;
    }
}

/*=========================================================
        GREEN SERVICES
=========================================================*/

.green-services-section {
    padding: 100px 0;
    position: relative;
    background: #071108;
    margin-top: -80px;
}

/*=========================
        GRID
==========================*/

.green-services-grid {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 22px;
    margin-top: 60px;
}

/*=========================
        CARD
==========================*/

.green-service-card {
    position: relative;
    text-align: center;
    padding: 45px 25px;
    border-radius: 22px;
    background: linear-gradient( 180deg, rgba(13,25,17,.96), rgba(7,12,8,.98) );
    border: 1px solid rgba(201,164,70,.28);
    transition: .45s;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,.35);
}

    .green-service-card:hover {
        transform: translateY(-10px);
        border-color: rgba(201,164,70,.65);
        box-shadow: 0 25px 60px rgba(0,0,0,.45), 0 0 30px rgba(201,164,70,.20);
    }

/*=========================
        ICON
==========================*/

.green-service-icon {
    width: 95px;
    height: 95px;
    margin: auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    color: var(--gold);
    border: 2px solid rgba(201,164,70,.45);
    background: rgba(255,255,255,.02);
    transition: .45s;
}

.green-service-card:hover .green-service-icon {
    transform: rotate(8deg) scale(1.08);
    background: linear-gradient( 135deg, rgba(34,88,48,.40), rgba(17,40,95,.20) );
}

/*=========================
        TITLE
==========================*/

.green-service-card h3 {
    margin-top: 28px;
    color: #ffffff;
    font-size: 24px;
    font-family: "Cinzel",serif;
    line-height: 1.4;
}

/*=========================
        TEXT
==========================*/

.green-service-card p {
    margin-top: 18px;
    color: rgba(255,255,255,.74);
    line-height: 1.8;
    font-size: 15px;
}

/*=========================
        GOLD LINE
==========================*/

.green-service-card::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 0;
    height: 4px;
    background: var(--gold);
    transition: .4s;
}

.green-service-card:hover::before {
    width: 100%;
}

/*=========================
        RESPONSIVE
==========================*/

@media(max-width:1500px) {

    .green-services-grid {
        grid-template-columns: repeat(3,1fr);
    }
}

@media(max-width:992px) {

    .green-services-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:768px) {

    .green-services-grid {
        grid-template-columns: 1fr;
    }
}
/*=========================================================
    GREEN ABOUT SECTION
=========================================================*/

.green-about-section {
    position: relative;
    overflow: hidden;
    padding: 140px 0;
    background: linear-gradient( 90deg, rgba(4,18,12,.92) 0%, rgba(5,24,18,.86) 40%, rgba(6,30,50,.58) 70%, rgba(6,30,50,.25) 100% ), url("../images/greencircleabout.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/*=========================================================
    OVERLAY
=========================================================*/

.green-about-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(212,175,55,.10), transparent 35%), radial-gradient(circle at bottom left, rgba(32,120,72,.18), transparent 45%);
    pointer-events: none;
}

/*=========================================================
    CONTAINER
=========================================================*/

.green-container {
    width: min(1700px,92%);
    margin: auto;
    position: relative;
    z-index: 2;
}

/*=========================================================
    CONTENT
=========================================================*/

.green-about-content {
    max-width: 760px;
}

/*=========================================================
    TAG
=========================================================*/

.green-about-tag {
    display: inline-block;
    padding: 12px 28px;
    margin-bottom: 30px;
    border-radius: 50px;
    border: 1px solid rgba(212,175,55,.45);
    background: rgba(212,175,55,.10);
    backdrop-filter: blur(12px);
    color: #D4AF37;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/*=========================================================
    TITLE
=========================================================*/

.green-about-content h2 {
    margin: 0;
    color: #ffffff;
    font-family: "Cinzel",serif;
    font-size: 64px;
    line-height: 1.12;
    font-weight: 700;
}

/*=========================================================
    GOLD DIVIDER
=========================================================*/

.green-about-divider {
    width: 120px;
    height: 4px;
    border-radius: 20px;
    margin: 32px 0 40px;
    background: linear-gradient( 90deg, #D4AF37, #F6E6AE, #D4AF37 );
}

/*=========================================================
    PARAGRAPHS
=========================================================*/

.green-about-content p {
    color: rgba(255,255,255,.90);
    font-size: 19px;
    line-height: 2;
    margin-bottom: 25px;
    font-weight: 300;
}

/*=========================================================
    BUTTON
=========================================================*/

.green-about-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 18px;
    padding: 18px 40px;
    border-radius: 60px;
    background: linear-gradient( 135deg, #D4AF37, #F3D879 );
    color: #072012;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 1px;
    transition: .35s;
    box-shadow: 0 15px 35px rgba(212,175,55,.25);
}

    .green-about-btn:hover {
        transform: translateY(-6px);
        box-shadow: 0 25px 45px rgba(212,175,55,.40);
    }

/*=========================================================
    DECORATIVE LEAF
=========================================================*/

.green-about-content::before {
    content: "❋";
    position: absolute;
    top: 10px;
    right: -70px;
    font-size: 100px;
    color: rgba(212,175,55,.08);
}

/*=========================================================
    RESPONSIVE
=========================================================*/

@media(max-width:1200px) {

    .green-about-content h2 {
        font-size: 52px;
    }
}

@media(max-width:992px) {

    .green-about-section {
        padding: 100px 0;
        background-position: 70% center;
    }

    .green-about-content {
        max-width: 100%;
    }

        .green-about-content h2 {
            font-size: 44px;
        }
}

@media(max-width:768px) {

    .green-about-section {
        padding: 80px 0;
        background-position: 75% center;
    }

    .green-about-content h2 {
        font-size: 36px;
    }

    .green-about-content p {
        font-size: 17px;
        line-height: 1.9;
    }

    .green-about-btn {
        padding: 16px 34px;
    }
}

@media(max-width:576px) {

    .green-about-section {
        padding: 70px 0;
    }

    .green-about-content h2 {
        font-size: 30px;
    }

    .green-about-tag {
        font-size: 13px;
        padding: 10px 20px;
    }
}

/*======================================================
GREENPLUS VISION & MISSION
======================================================*/

.greenplus-vision-section {
    padding: 100px 0;
    background: #07120B;
    position: relative;
    overflow: hidden;
}

/*======================================================
CONTAINER
======================================================*/

.greenplus-container {
    width: min(1700px,92%);
    margin: auto;
}

/*======================================================
TITLE
======================================================*/

.greenplus-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    margin-bottom: 55px;
}

.greenplus-line {
    flex: 1;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(214,175,54,.75), transparent);
}

.greenplus-title h2 {
    margin: 0;
    color: #D6AF36;
    font-family: "Cinzel",serif;
    font-size: 38px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/*======================================================
GRID
======================================================*/

.greenplus-vm-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

/*======================================================
CARDS
======================================================*/

.greenplus-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 35px;
    padding: 42px;
    border-radius: 20px;
    border: 2px solid rgba(214,175,54,.45);
    overflow: hidden;
    transition: .45s;
}

    .greenplus-card:hover {
        transform: translateY(-8px);
        border-color: #D6AF36;
        box-shadow: 0 20px 40px rgba(0,0,0,.45), 0 0 30px rgba(214,175,54,.18);
    }

/*======================================================
BACKGROUNDS
======================================================*/

.greenplus-vision-card {
    background: linear-gradient( 135deg, #124322, #0C2E17);
}

.greenplus-mission-card {
    background: linear-gradient( 135deg, #123E74, #0A2343);
}

/*======================================================
ICON
======================================================*/

.greenplus-icon {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 3px solid #D6AF36;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

    .greenplus-icon i {
        font-size: 52px;
        color: #D6AF36;
    }

/*======================================================
TEXT
======================================================*/

.greenplus-content h3 {
    margin: 0 0 15px;
    color: #D6AF36;
    font-family: "Cinzel",serif;
    font-size: 30px;
    font-weight: 700;
}

.greenplus-content p {
    margin: 0;
    color: #F2F2F2;
    font-size: 20px;
    line-height: 1.8;
}

/*======================================================
SHINE EFFECT
======================================================*/

.greenplus-card::before {
    content: "";
    position: absolute;
    top: -150%;
    left: -30%;
    width: 40%;
    height: 350%;
    transform: rotate(25deg);
    background: linear-gradient( 90deg, transparent, rgba(255,255,255,.08), transparent);
    transition: 1s;
}

.greenplus-card:hover::before {
    left: 150%;
}

/*======================================================
GLOW
======================================================*/

.greenplus-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    box-shadow: inset 0 0 25px rgba(255,255,255,.03);
    pointer-events: none;
}

/*======================================================
RESPONSIVE
======================================================*/

@media(max-width:992px) {

    .greenplus-vm-wrapper {
        grid-template-columns: 1fr;
    }
}

@media(max-width:768px) {

    .greenplus-card {
        flex-direction: column;
        text-align: center;
        padding: 35px 25px;
    }

    .greenplus-icon {
        width: 95px;
        height: 95px;
    }

        .greenplus-icon i {
            font-size: 40px;
        }

    .greenplus-title h2 {
        font-size: 28px;
    }

    .greenplus-content h3 {
        font-size: 24px;
    }

    .greenplus-content p {
        font-size: 17px;
    }
}

/*==============================================================
    OXIAURA GREEN CIRCLE
    CONTACT PAGE

    PART 2A – LUXURY CSS
    SECTION LAYOUT & BACKGROUND
==============================================================*/


/*==============================================================
    ROOT VARIABLES
==============================================================*/

:root {
    --green-dark: #07110C;
    --green-primary: #2F8F46;
    --green-light: #4EB56A;
    --blue: #1A6EBB;
    --blue-light: #2C8DDB;
    --gold: #C9A14A;
    --gold-light: #E2C46A;
    --white: #FFFFFF;
    --text-light: rgba(255,255,255,.82);
    --glass: rgba(255,255,255,.05);
    --glass-border: rgba(255,255,255,.12);
}


/*==============================================================
    GLOBAL SECTION
==============================================================*/

.green-contact-hero,
.green-contact-info,
.green-contact-form-section,
.green-support-section,
.green-faq,
.green-contact-cta {
    position: relative;
    overflow: hidden;
}


/*==============================================================
    PAGE BACKGROUND
==============================================================*/

.green-contact-info,
.green-contact-form-section,
.green-support-section,
.green-faq {
    background: radial-gradient(circle at top left, rgba(47,143,70,.08), transparent 45%), radial-gradient(circle at bottom right, rgba(26,110,187,.08), transparent 45%), linear-gradient(180deg, #08120B 0%, #09160D 100%);
}


/*==============================================================
    CONTAINER
==============================================================*/

.green-container {
    width: 92%;
    max-width: 1600px;
    margin: auto;
    position: relative;
    z-index: 5;
}


/*==============================================================
    SECTION SPACING
==============================================================*/

.green-contact-info,
.green-contact-form-section,
.green-support-section,
.green-faq {
    padding: 120px 0;
}


.green-contact-cta {
    padding: 110px 0;
}


/*==============================================================
    HERO
==============================================================*/

.green-contact-hero {
    min-height: 75vh;
    display: flex;
    align-items: center;
    background: #07110C;
}


/*==============================================================
    HERO BACKGROUND
==============================================================*/

.green-contact-bg {
    position: absolute;
    inset: 0;
    background: url("../images/contact/contact-bg.jpg") center center/cover no-repeat;
    transform: scale(1.06);
    z-index: 1;
}


/*==============================================================
    HERO OVERLAY
==============================================================*/

.green-contact-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(5,14,8,.92)0%, rgba(5,14,8,.75)40%, rgba(6,18,10,.35)70%, rgba(5,14,8,.85)100%);
    z-index: 2;
}


/*==============================================================
    HERO LIGHTS
==============================================================*/

.green-contact-gradient {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 18% 40%, rgba(47,143,70,.22), transparent 42%), radial-gradient(circle at 88% 20%, rgba(26,110,187,.18), transparent 38%), radial-gradient(circle at bottom, rgba(201,161,74,.10), transparent 55%);
    z-index: 3;
}


/*==============================================================
    HERO CONTENT
==============================================================*/

.green-contact-container {
    position: relative;
    width: 92%;
    max-width: 1600px;
    margin: auto;
    z-index: 10;
    padding-top: 170px;
    padding-bottom: 120px;
}


/*==============================================================
    CONTENT WIDTH
==============================================================*/

.green-contact-content {
    max-width: 760px;
}


/*==============================================================
    SECTION TITLE
==============================================================*/

.green-section-heading {
    text-align: center;
    margin-bottom: 75px;
}


    .green-section-heading.left {
        text-align: left;
    }


    /*==============================================================
    SUB TITLE
==============================================================*/

    .green-section-heading span {
        display: inline-block;
        padding: 10px 22px;
        border-radius: 40px;
        background: rgba(255,255,255,.05);
        border: 1px solid rgba(201,161,74,.25);
        color: var(--gold-light);
        font-size: 13px;
        letter-spacing: 2px;
        text-transform: uppercase;
        margin-bottom: 22px;
    }


    /*==============================================================
    HEADING
==============================================================*/

    .green-section-heading h2 {
        font-family: "Cinzel",serif;
        font-size: 56px;
        color: #fff;
        margin-bottom: 22px;
        line-height: 1.2;
    }


    /*==============================================================
    DESCRIPTION
==============================================================*/

    .green-section-heading p {
        width: 700px;
        max-width: 100%;
        margin: auto;
        color: var(--text-light);
        font-size: 18px;
        line-height: 1.9;
    }


    /*==============================================================
    GOLD LINE
==============================================================*/

    .green-section-heading::after {
        content: "";
        display: block;
        width: 90px;
        height: 3px;
        margin: 30px auto 0;
        background: linear-gradient(90deg, transparent, var(--gold), transparent);
    }


/*==============================================================
    FLOATING LIGHT
==============================================================*/

.green-contact-info::before,
.green-support-section::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    top: -220px;
    left: -180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47,143,70,.15), transparent 70%);
    pointer-events: none;
}


/*==============================================================
    BLUE LIGHT
==============================================================*/

.green-contact-form-section::after {
    content: "";
    position: absolute;
    right: -220px;
    bottom: -220px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(26,110,187,.16), transparent 70%);
    pointer-events: none;
}


/*==============================================================
    PARTICLES
==============================================================*/

.green-contact-info::after,
.green-support-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../images/hero/particles.png");
    background-size: cover;
    opacity: .05;
    pointer-events: none;
}


/*==============================================================
    GLASS EFFECT
==============================================================*/

.green-glass {
    background: var(--glass);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 20px 60px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
}


/*==============================================================
    PREMIUM TRANSITIONS
==============================================================*/

.green-contact-card,
.green-support-card,
.green-form-box,
.green-map-box,
.green-cta-box {
    transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease, background .45s ease;
}


/*==============================================================
    SMOOTH SCROLL ANIMATION READY
==============================================================*/

.green-contact-card,
.green-support-card,
.green-form-box,
.green-map-box {
    opacity: 1;
    transform: translateY(0);
}

/*==============================================================
    OXIAURA GREEN CIRCLE
    CONTACT PAGE

    PART 2B – CONTACT INFORMATION CARDS
==============================================================*/


/*==============================================================
    CONTACT GRID
==============================================================*/

.green-contact-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 32px;
}


/*==============================================================
    CONTACT CARD
==============================================================*/

.green-contact-card {
    position: relative;
    padding: 45px 35px;
    text-align: center;
    border-radius: 28px;
    overflow: hidden;
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 25px 60px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
    transition: .45s ease;
}


    /*==============================================================
    GOLD BORDER GLOW
==============================================================*/

    .green-contact-card::before {
        content: "";
        position: absolute;
        inset: 0;
        padding: 1px;
        border-radius: 28px;
        background: linear-gradient( 135deg, rgba(201,161,74,.55), rgba(255,255,255,.05), rgba(26,110,187,.45));
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }


    /*==============================================================
    TOP LIGHT
==============================================================*/

    .green-contact-card::after {
        content: "";
        position: absolute;
        top: -100px;
        left: -80px;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(201,161,74,.12), transparent 70%);
        opacity: 0;
        transition: .45s ease;
    }


    /*==============================================================
    HOVER
==============================================================*/

    .green-contact-card:hover {
        transform: translateY(-12px);
        background: rgba(255,255,255,.08);
        border-color: rgba(201,161,74,.30);
        box-shadow: 0 35px 80px rgba(0,0,0,.40), 0 0 40px rgba(201,161,74,.12);
    }


        .green-contact-card:hover::after {
            opacity: 1;
        }


/*==============================================================
    ICON WRAPPER
==============================================================*/

.green-contact-icon {
    width: 88px;
    height: 88px;
    margin: auto auto 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient( 135deg, var(--green-primary), var(--blue));
    box-shadow: 0 18px 40px rgba(47,143,70,.30), 0 0 25px rgba(26,110,187,.18);
    position: relative;
    transition: .45s ease;
}


    /*==============================================================
    ICON GLOW
==============================================================*/

    .green-contact-icon::before {
        content: "";
        position: absolute;
        inset: 6px;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,.18);
    }


    /*==============================================================
    ICON
==============================================================*/

    .green-contact-icon i {
        color: #fff;
        font-size: 34px;
        transition: .35s;
    }


/*==============================================================
    ICON HOVER
==============================================================*/

.green-contact-card:hover
.green-contact-icon {
    transform: rotate(-8deg) scale(1.08);
    box-shadow: 0 25px 55px rgba(47,143,70,.38), 0 0 35px rgba(26,110,187,.28);
}


/*==============================================================
    CARD TITLE
==============================================================*/

.green-contact-card h3 {
    font-family: "Cinzel",serif;
    font-size: 27px;
    color: #ffffff;
    margin-bottom: 18px;
    line-height: 1.3;
}


/*==============================================================
    CARD TEXT
==============================================================*/

.green-contact-card p {
    color: rgba(255,255,255,.78);
    font-size: 16px;
    line-height: 1.9;
}


/*==============================================================
    GOLD LINE
==============================================================*/

.green-contact-card h3::after {
    content: "";
    display: block;
    width: 55px;
    height: 2px;
    margin: 16px auto 0;
    background: linear-gradient( 90deg, transparent, var(--gold), transparent);
}


/*==============================================================
    CARD SHINE
==============================================================*/

.green-contact-card .green-shine {
    position: absolute;
    top: -120%;
    left: -50%;
    width: 80px;
    height: 280%;
    background: linear-gradient( 90deg, transparent, rgba(255,255,255,.15), transparent);
    transform: rotate(25deg);
    transition: .8s;
}


.green-contact-card:hover
.green-shine {
    left: 150%;
}


/*==============================================================
    CARD ACTIVE BORDER
==============================================================*/

.green-contact-card:hover {
    border-color: rgba(201,161,74,.45);
}


/*==============================================================
    FLOATING EFFECT
==============================================================*/

.green-contact-card:nth-child(2) {
    margin-top: 18px;
}

.green-contact-card:nth-child(3) {
    margin-top: 36px;
}

.green-contact-card:nth-child(4) {
    margin-top: 18px;
}


/*==============================================================
    TABLET
==============================================================*/

@media(max-width:1200px) {

    .green-contact-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .green-contact-card:nth-child(2),
    .green-contact-card:nth-child(3),
    .green-contact-card:nth-child(4) {
        margin-top: 0;
    }
}


/*==============================================================
    MOBILE
==============================================================*/

@media(max-width:768px) {

    .green-contact-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .green-contact-card {
        padding: 38px 28px;
    }

    .green-contact-icon {
        width: 76px;
        height: 76px;
    }

        .green-contact-icon i {
            font-size: 28px;
        }

    .green-contact-card h3 {
        font-size: 24px;
    }

    .green-contact-card p {
        font-size: 15px;
    }
}
/*==============================================================
    OXIAURA GREEN CIRCLE
    CONTACT PAGE

    PART 2C – LUXURY CONTACT FORM
==============================================================*/


/*==============================================================
    FORM WRAPPER
==============================================================*/

.green-form-wrapper {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 50px;
    align-items: stretch;
}


/*==============================================================
    FORM BOX
==============================================================*/

.green-form-box {
    position: relative;
    padding: 55px;
    border-radius: 30px;
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 25px 60px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08);
    overflow: hidden;
}


    /*==============================================================
    GOLD BORDER
==============================================================*/

    .green-form-box::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 30px;
        padding: 1px;
        background: linear-gradient( 135deg, rgba(201,161,74,.45), rgba(255,255,255,.05), rgba(26,110,187,.35));
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }


    /*==============================================================
    FORM
==============================================================*/

    .green-form-box form {
        margin-top: 40px;
    }


/*==============================================================
    ROW
==============================================================*/

.green-form-row {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 22px;
    margin-bottom: 22px;
}


/*==============================================================
    INPUTS
==============================================================*/

.green-form-box input,
.green-form-box textarea {
    width: 100%;
    padding: 18px 24px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    color: #ffffff;
    font-size: 15px;
    outline: none;
    transition: .35s ease;
    backdrop-filter: blur(12px);
}


    /*==============================================================
    PLACEHOLDER
==============================================================*/

    .green-form-box input::placeholder,
    .green-form-box textarea::placeholder {
        color: rgba(255,255,255,.55);
    }


/*==============================================================
    TEXTAREA
==============================================================*/

.green-form-box textarea {
    resize: none;
    min-height: 190px;
    margin-bottom: 28px;
}


    /*==============================================================
    INPUT FOCUS
==============================================================*/

    .green-form-box input:focus,
    .green-form-box textarea:focus {
        border-color: var(--gold);
        background: rgba(255,255,255,.08);
        box-shadow: 0 0 0 4px rgba(201,161,74,.12), 0 10px 35px rgba(26,110,187,.15);
    }


/*==============================================================
    SUBMIT BUTTON
==============================================================*/

.green-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 62px;
    border: none;
    cursor: pointer;
    border-radius: 60px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .5px;
    background: linear-gradient( 135deg, var(--green-primary), var(--blue));
    box-shadow: 0 18px 40px rgba(47,143,70,.28), 0 10px 35px rgba(26,110,187,.20);
    transition: .35s ease;
    overflow: hidden;
    position: relative;
}


    /*==============================================================
    BUTTON SHINE
==============================================================*/

    .green-submit-btn::before {
        content: "";
        position: absolute;
        top: 0;
        left: -120%;
        width: 60%;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.35), transparent);
        transform: skewX(-25deg);
        transition: .8s;
    }


    /*==============================================================
    BUTTON HOVER
==============================================================*/

    .green-submit-btn:hover {
        transform: translateY(-5px);
        box-shadow: 0 25px 55px rgba(47,143,70,.35), 0 18px 45px rgba(26,110,187,.25);
    }


        .green-submit-btn:hover::before {
            left: 150%;
        }


    .green-submit-btn i {
        transition: .35s ease;
    }


    .green-submit-btn:hover i {
        transform: translateX(6px);
    }


/*==============================================================
    MAP BOX
==============================================================*/

.green-map-box {
    position: relative;
    min-height: 100%;
    border-radius: 30px;
    overflow: hidden;
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 25px 60px rgba(0,0,0,.30);
}


    /*==============================================================
    MAP BORDER
==============================================================*/

    .green-map-box::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 30px;
        padding: 1px;
        background: linear-gradient( 135deg, rgba(201,161,74,.45), rgba(26,110,187,.35));
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }


    /*==============================================================
    MAP
==============================================================*/

    .green-map-box iframe {
        width: 100%;
        height: 100%;
        min-height: 720px;
        border: none;
        filter: grayscale(15%) saturate(105%) contrast(105%);
    }


    /*==============================================================
    MAP HOVER
==============================================================*/

    .green-map-box:hover {
        transform: translateY(-8px);
        box-shadow: 0 35px 70px rgba(0,0,0,.40);
    }


/*==============================================================
    TABLET
==============================================================*/

@media(max-width:1200px) {

    .green-form-wrapper {
        grid-template-columns: 1fr;
    }

    .green-map-box iframe {
        min-height: 520px;
    }
}


/*==============================================================
    MOBILE
==============================================================*/

@media(max-width:768px) {

    .green-form-box {
        padding: 35px 25px;
    }

    .green-form-row {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .green-form-box textarea {
        min-height: 160px;
    }

    .green-map-box iframe {
        min-height: 350px;
    }
}


/*==============================================================
    SMALL MOBILE
==============================================================*/

@media(max-width:480px) {

    .green-form-box {
        padding: 28px 20px;
    }

    .green-submit-btn {
        height: 58px;
        font-size: 14px;
    }
}
/*==============================================================
    OXIAURA GREEN CIRCLE
    CONTACT PAGE

    PART 2E – FAQ & CTA CSS
==============================================================*/


/*==============================================================
    FAQ SECTION
==============================================================*/

.green-faq {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at top left, rgba(47,143,70,.08), transparent 45%), radial-gradient(circle at bottom right, rgba(26,110,187,.08), transparent 45%), #08120B;
}


/*==============================================================
    FAQ WRAPPER
==============================================================*/

.green-faq-wrapper {
    max-width: 900px;
    margin: 70px auto 0;
}


/*==============================================================
    FAQ ITEM
==============================================================*/

.green-faq-item {
    position: relative;
    margin-bottom: 22px;
    border-radius: 22px;
    overflow: hidden;
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 18px 40px rgba(0,0,0,.28);
    transition: .35s ease;
}


    /*==============================================================
    FAQ BORDER
==============================================================*/

    .green-faq-item::before {
        content: "";
        position: absolute;
        inset: 0;
        padding: 1px;
        border-radius: 22px;
        background: linear-gradient( 135deg, rgba(201,161,74,.45), rgba(255,255,255,.04), rgba(26,110,187,.35));
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }


    /*==============================================================
    FAQ BUTTON
==============================================================*/

    .green-faq-item button {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 28px 35px;
        background: none;
        border: none;
        cursor: pointer;
        color: #ffffff;
        font-size: 18px;
        font-weight: 600;
        text-align: left;
        transition: .35s ease;
    }


        /*==============================================================
    PLUS ICON
==============================================================*/

        .green-faq-item button::after {
            content: "+";
            font-size: 32px;
            color: var(--gold);
            transition: .35s ease;
        }


    /*==============================================================
    FAQ HOVER
==============================================================*/

    .green-faq-item:hover {
        transform: translateY(-6px);
        border-color: rgba(201,161,74,.30);
        box-shadow: 0 28px 55px rgba(0,0,0,.35), 0 0 35px rgba(26,110,187,.12);
    }


        .green-faq-item:hover button {
            color: var(--gold-light);
        }


            .green-faq-item:hover button::after {
                transform: rotate(90deg);
            }


/*==============================================================
    CTA SECTION
==============================================================*/

.green-contact-cta {
    position: relative;
    overflow: hidden;
    padding: 120px 0;
    background: linear-gradient(135deg, #08120B 0%, #0D2416 50%, #0A182A 100%);
}


    /*==============================================================
    CTA GLOW
==============================================================*/

    .green-contact-cta::before {
        content: "";
        position: absolute;
        width: 600px;
        height: 600px;
        top: -250px;
        left: -200px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(47,143,70,.18), transparent 70%);
    }


    .green-contact-cta::after {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        bottom: -220px;
        right: -180px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(26,110,187,.18), transparent 70%);
    }


/*==============================================================
    CTA BOX
==============================================================*/

.green-cta-box {
    position: relative;
    z-index: 2;
    max-width: 1050px;
    margin: auto;
    text-align: center;
    padding: 70px 60px;
    border-radius: 35px;
    overflow: hidden;
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 30px 70px rgba(0,0,0,.35);
}


    /*==============================================================
    CTA BORDER
==============================================================*/

    .green-cta-box::before {
        content: "";
        position: absolute;
        inset: 0;
        padding: 1px;
        border-radius: 35px;
        background: linear-gradient( 135deg, rgba(201,161,74,.60), rgba(255,255,255,.05), rgba(26,110,187,.40));
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }


    /*==============================================================
    CTA TITLE
==============================================================*/

    .green-cta-box h2 {
        font-family: "Cinzel",serif;
        font-size: 54px;
        color: #ffffff;
        margin-bottom: 24px;
        line-height: 1.2;
    }


    /*==============================================================
    CTA DESCRIPTION
==============================================================*/

    .green-cta-box p {
        max-width: 720px;
        margin: 0 auto 40px;
        color: rgba(255,255,255,.82);
        font-size: 18px;
        line-height: 1.9;
    }


    /*==============================================================
    CTA BUTTON
==============================================================*/

    .green-cta-box .green-btn-primary {
        min-width: 250px;
    }


    /*==============================================================
    CTA HOVER
==============================================================*/

    .green-cta-box:hover {
        transform: translateY(-8px);
        box-shadow: 0 40px 80px rgba(0,0,0,.45), 0 0 45px rgba(47,143,70,.18);
    }


/*==============================================================
    TABLET
==============================================================*/

@media(max-width:992px) {

    .green-cta-box {
        padding: 55px 40px;
    }

        .green-cta-box h2 {
            font-size: 42px;
        }
}


/*==============================================================
    MOBILE
==============================================================*/

@media(max-width:768px) {

    .green-faq-item button {
        padding: 22px;
        font-size: 16px;
    }

        .green-faq-item button::after {
            font-size: 28px;
        }

    .green-cta-box {
        padding: 40px 25px;
        border-radius: 25px;
    }

        .green-cta-box h2 {
            font-size: 34px;
        }

        .green-cta-box p {
            font-size: 16px;
            margin-bottom: 30px;
        }

        .green-cta-box .green-btn-primary {
            width: 100%;
            max-width: 320px;
        }
}

/*==============================================================
    OXIAURA GREEN CIRCLE
    CONTACT PAGE

    PART 3 – RESPONSIVE CSS
==============================================================*/


/*==============================================================
    LARGE LAPTOP
==============================================================*/

@media (max-width:1400px) {

    .green-contact-container,
    .green-container {
        width: 94%;
    }

    .green-contact-title {
        font-size: 62px;
    }

    .green-section-heading h2 {
        font-size: 48px;
    }
}



/*==============================================================
    TABLET
==============================================================*/

@media (max-width:1200px) {

    .green-contact-container {
        padding-top: 150px;
        padding-bottom: 90px;
    }

    .green-contact-title {
        font-size: 56px;
    }

    .green-contact-description {
        font-size: 17px;
    }

    .green-contact-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 30px;
    }

    .green-form-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .green-map-box {
        height: 500px;
    }

        .green-map-box iframe {
            min-height: 500px;
        }

    .green-support-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 30px;
    }
}



/*==============================================================
    MOBILE
==============================================================*/

@media (max-width:768px) {

    /*==============================
        SECTION SPACING
    ==============================*/

    .green-contact-info,
    .green-contact-form-section,
    .green-support-section,
    .green-faq,
    .green-contact-cta {
        padding: 80px 0;
    }

    /*==============================
        HERO
    ==============================*/

    .green-contact-hero {
        min-height: auto;
    }

    .green-contact-container {
        padding-top: 130px;
        padding-bottom: 80px;
    }

    .green-contact-content {
        text-align: center;
        margin: auto;
    }

    .green-contact-tag {
        margin: 0 auto 25px;
    }

    .green-contact-title {
        font-size: 42px;
        line-height: 1.2;
    }

    .green-contact-description {
        font-size: 16px;
        line-height: 1.9;
        margin: 25px auto 35px;
    }

    /*==============================
        BUTTONS
    ==============================*/

    .green-contact-buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
    }

        .green-contact-buttons a {
            width: 100%;
            max-width: 320px;
        }

    /*==============================
        HEADINGS
    ==============================*/

    .green-section-heading {
        margin-bottom: 50px;
    }

        .green-section-heading h2 {
            font-size: 34px;
            line-height: 1.3;
        }

        .green-section-heading p {
            font-size: 15px;
            line-height: 1.8;
        }

    /*==============================
        CONTACT CARDS
    ==============================*/

    .green-contact-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .green-contact-card {
        padding: 35px 25px;
        border-radius: 22px;
    }

    .green-contact-icon {
        width: 70px;
        height: 70px;
    }

        .green-contact-icon i {
            font-size: 26px;
        }

    .green-contact-card h3 {
        font-size: 22px;
    }

    .green-contact-card p {
        font-size: 15px;
    }

    /*==============================
        FORM
    ==============================*/

    .green-form-box {
        padding: 30px 22px;
    }

    .green-form-row {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .green-form-box input,
    .green-form-box textarea {
        padding: 16px 18px;
        font-size: 15px;
    }

    .green-submit-btn {
        width: 100%;
    }

    /*==============================
        MAP
    ==============================*/

    .green-map-box {
        height: 350px;
    }

        .green-map-box iframe {
            min-height: 350px;
        }

    /*==============================
        SUPPORT
    ==============================*/

    .green-support-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .green-support-card {
        padding: 35px 25px;
    }

    /*==============================
        FAQ
    ==============================*/

    .green-faq-wrapper {
        margin-top: 40px;
    }

    .green-faq-item button {
        padding: 22px;
        font-size: 16px;
    }

    /*==============================
        CTA
    ==============================*/

    .green-cta-box {
        padding: 40px 25px;
        border-radius: 22px;
    }

        .green-cta-box h2 {
            font-size: 34px;
        }

        .green-cta-box p {
            font-size: 16px;
            margin-bottom: 30px;
        }

        .green-cta-box .green-btn-primary {
            width: 100%;
            max-width: 320px;
        }
}



/*==============================================================
    SMALL MOBILE
==============================================================*/

@media (max-width:480px) {

    .green-contact-container {
        padding-top: 115px;
    }

    .green-contact-title {
        font-size: 34px;
    }

    .green-contact-description {
        font-size: 15px;
    }

    .green-contact-tag {
        font-size: 11px;
        padding: 10px 18px;
        letter-spacing: .6px;
    }

    .green-section-heading span {
        font-size: 11px;
        padding: 10px 18px;
    }

    .green-section-heading h2 {
        font-size: 28px;
    }

    .green-contact-card {
        padding: 30px 20px;
    }

        .green-contact-card h3 {
            font-size: 20px;
        }

    .green-contact-icon {
        width: 65px;
        height: 65px;
    }

        .green-contact-icon i {
            font-size: 24px;
        }

    .green-form-box {
        padding: 25px 18px;
    }

        .green-form-box textarea {
            min-height: 150px;
        }

    .green-submit-btn {
        height: 58px;
        font-size: 14px;
    }

    .green-map-box {
        height: 300px;
    }

        .green-map-box iframe {
            min-height: 300px;
        }

    .green-faq-item button {
        font-size: 15px;
        padding: 20px;
    }

    .green-cta-box {
        padding: 35px 20px;
    }

        .green-cta-box h2 {
            font-size: 26px;
        }

        .green-cta-box p {
            font-size: 15px;
        }
}



/*==============================================================
    LANDSCAPE MOBILE
==============================================================*/

@media (max-height:650px) {

    .green-contact-hero {
        min-height: auto;
    }

    .green-contact-container {
        padding-top: 120px;
        padding-bottom: 70px;
    }
}



/*==============================================================
    TOUCH DEVICES
==============================================================*/

@media (hover:none) {

    .green-contact-card:hover,
    .green-support-card:hover,
    .green-map-box:hover,
    .green-cta-box:hover {
        transform: none;
    }
}



/*==============================================================
    REDUCE MOTION
==============================================================*/

@media (prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}
/*==============================================================
    SMALL MOBILE
==============================================================*/

@media(max-width:480px) {

    .green-cta-box h2 {
        font-size: 28px;
    }

    .green-faq-item button {
        font-size: 15px;
        padding: 20px;
    }
}

/*=========================================================
    GREENPLUS PREMIUM FOOTER
=========================================================*/

.greenplus-footer {
    position: relative;
    background: radial-gradient(circle at top right, rgba(27,78,145,.18), transparent 35%), radial-gradient(circle at bottom left, rgba(40,120,70,.18), transparent 40%), linear-gradient( 180deg, #06110D 0%, #081913 40%, #05120D 100%);
    border-top: 2px solid rgba(212,175,55,.30);
    overflow: hidden;
    margin-top: 120px;
}

/*=========================================================
OVERLAY
=========================================================*/

.greenplus-footer-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 135deg, rgba(255,255,255,.02), transparent 45%), radial-gradient(circle, rgba(255,215,120,.04), transparent 70%);
    pointer-events: none;
}

/*=========================================================
CONTAINER
=========================================================*/

.greenplus-footer-container {
    position: relative;
    z-index: 2;
    width: min(1700px,92%);
    margin: auto;
    padding: 85px 0 70px;
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1.1fr 1.3fr;
    gap: 60px;
}

/*=========================================================
LOGO
=========================================================*/

.greenplus-footer-logo {
    width: 220px;
    margin-bottom: 25px;
}

/*=========================================================
TEXT
=========================================================*/

.greenplus-footer-text {
    color: #D9D9D9;
    font-size: 16px;
    line-height: 1.9;
    margin-bottom: 35px;
}

/*=========================================================
HEADINGS
=========================================================*/

.greenplus-footer-column h3 {
    color: #D6AF36;
    font-size: 25px;
    font-family: "Cinzel",serif;
    margin-bottom: 28px;
    position: relative;
}

    .greenplus-footer-column h3::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -10px;
        width: 55px;
        height: 2px;
        background: #D6AF36;
    }

/*=========================================================
LISTS
=========================================================*/

.greenplus-footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.greenplus-footer-column li {
    margin-bottom: 18px;
    color: #E5E5E5;
    transition: .35s;
}

    .greenplus-footer-column li:hover {
        color: #D6AF36;
        transform: translateX(8px);
    }

.greenplus-footer-column a {
    color: #E5E5E5;
    text-decoration: none;
    transition: .35s;
}

    .greenplus-footer-column a:hover {
        color: #D6AF36;
    }

/*=========================================================
CONTACT
=========================================================*/

.greenplus-contact-list li {
    display: flex;
    align-items: center;
    gap: 15px;
}

.greenplus-contact-list i {
    color: #D6AF36;
    width: 20px;
    text-align: center;
}

/*=========================================================
SOCIAL
=========================================================*/

.greenplus-footer-social {
    display: flex;
    gap: 15px;
}

    .greenplus-footer-social a {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #D6AF36;
        border: 1px solid rgba(214,175,54,.45);
        background: rgba(255,255,255,.03);
        backdrop-filter: blur(14px);
        transition: .4s;
    }

        .greenplus-footer-social a:hover {
            background: #D6AF36;
            color: #05130D;
            transform: translateY(-6px);
            box-shadow: 0 0 18px rgba(214,175,54,.45);
        }

/*=========================================================
NEWSLETTER
=========================================================*/

.greenplus-newsletter {
    display: flex;
    margin-top: 20px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(214,175,54,.30);
    background: rgba(255,255,255,.04);
}

    .greenplus-newsletter input {
        flex: 1;
        border: none;
        outline: none;
        background: transparent;
        padding: 18px;
        color: white;
        font-size: 15px;
    }

        .greenplus-newsletter input::placeholder {
            color: #AAAAAA;
        }

    .greenplus-newsletter button {
        width: 70px;
        border: none;
        cursor: pointer;
        background: linear-gradient( 135deg, #D6AF36, #F6D46C);
        color: #05120D;
        font-size: 18px;
        transition: .35s;
    }

        .greenplus-newsletter button:hover {
            background: linear-gradient( 135deg, #F6D46C, #D6AF36);
        }

/*=========================================================
BOTTOM BAR
=========================================================*/

.greenplus-footer-bottom {
    border-top: 1px solid rgba(214,175,54,.20);
    padding: 28px 4%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #CFCFCF;
    font-size: 15px;
    position: relative;
    z-index: 2;
}

    .greenplus-footer-bottom div {
        display: flex;
        gap: 18px;
        align-items: center;
    }

    .greenplus-footer-bottom a {
        color: #CFCFCF;
        text-decoration: none;
        transition: .3s;
    }

        .greenplus-footer-bottom a:hover {
            color: #D6AF36;
        }

/*=========================================================
HOVER GLOW
=========================================================*/

.greenplus-footer-column {
    transition: .4s;
}

    .greenplus-footer-column:hover {
        transform: translateY(-8px);
    }

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:1500px) {

    .greenplus-footer-container {
        grid-template-columns: repeat(3,1fr);
    }
}

@media(max-width:992px) {

    .greenplus-footer-container {
        grid-template-columns: repeat(2,1fr);
        gap: 45px;
    }
}

@media(max-width:768px) {

    .greenplus-footer-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .greenplus-footer-logo {
        margin: auto auto 25px;
        display: block;
    }

    .greenplus-footer-social {
        justify-content: center;
    }

    .greenplus-contact-list li {
        justify-content: center;
    }

    .greenplus-newsletter {
        max-width: 420px;
        margin: auto;
    }

    .greenplus-footer-bottom {
        flex-direction: column;
        gap: 18px;
        text-align: center;
    }
}

@media(max-width:480px) {

    .greenplus-footer {
        margin-top: 70px;
    }

    .greenplus-footer-container {
        padding: 60px 0 45px;
    }

    .greenplus-footer-column h3 {
        font-size: 22px;
    }
}
/*==================================================
    OLIX HERO
==================================================*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins',sans-serif;
    background: #09090d;
    color: #fff;
}

.olix-hero {
    position: relative;
    min-height: 100vh;
    background: url('/images/greencirclehero.png') center center/cover no-repeat;
    overflow: hidden;
}

.olix-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, rgba(10,8,15,.90) 0%, rgba(42,17,58,.65) 45%, rgba(9,9,13,.55) 100% );
}

.olix-container {
    position: relative;
    z-index: 10;
    width: 1400px;
    max-width: 92%;
    margin: auto;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/*==================================================
    NAVBAR
==================================================*/

.olix-header {
    position: absolute;
    top: 25px;
    left: 0;
    width: 100%;
    z-index: 999;
}

.olix-navbar {
    width: 1400px;
    max-width: 92%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 35px;
    border-radius: 70px;
    backdrop-filter: blur(18px);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
}

.olix-logo img {
    height: 65px;
}

.olix-nav-menu {
    display: flex;
    gap: 40px;
    list-style: none;
}

    .olix-nav-menu a {
        color: #e6d9b8;
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        transition: .35s;
        letter-spacing: .5px;
    }

        .olix-nav-menu a:hover {
            color: #17A673;
        }

.olix-nav-button {
    padding: 15px 34px;
    border-radius: 50px;
    background: #17A673;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: .35s;
}

    .olix-nav-button:hover {
        background: #13845b;
    }

/*==================================================
    LEFT
==================================================*/

.olix-hero-left {
    width: 48%;
}

.olix-small-title {
    display: block;
    margin-bottom: 25px;
    color: #D8B15B;
    font-size: 17px;
    letter-spacing: 3px;
}

.olix-title {
    font-family: 'Cormorant Garamond',serif;
    font-size: 78px;
    line-height: 1.08;
    font-weight: 700;
}

    .olix-title span {
        display: block;
        color: #D8B15B;
    }

.olix-description {
    margin-top: 30px;
    width: 85%;
    font-size: 18px;
    line-height: 34px;
    color: #ddd;
}

/*==================================================
    BUTTONS
==================================================*/

.olix-buttons {
    margin-top: 45px;
    display: flex;
    gap: 20px;
}

.olix-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    height: 60px;
    border-radius: 60px;
    text-decoration: none;
    font-weight: 600;
    transition: .35s;
}

.olix-btn-green {
    background: #17A673;
    color: #fff;
}

.olix-btn-maroon {
    background: #6A1E3A;
    color: #fff;
}

.olix-btn:hover {
    transform: translateY(-5px);
}

/*==================================================
    RIGHT
==================================================*/

.olix-hero-right {
    width: 45%;
    display: flex;
    justify-content: center;
}

.olix-bottle {
    width: 420px;
    animation: olix-float 5s ease-in-out infinite;
    filter: drop-shadow(0 0 35px rgba(139,0,255,.45));
}

/*==================================================
    FLOAT
==================================================*/

@keyframes olix-float {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-18px);
    }

    100% {
        transform: translateY(0);
    }
}

/*==================================================
    RESPONSIVE
==================================================*/

@media(max-width:1100px) {

    .olix-container {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        padding-top: 150px;
    }

    .olix-hero-left {
        width: 100%;
    }

    .olix-description {
        width: 100%;
    }

    .olix-buttons {
        justify-content: center;
    }

    .olix-hero-right {
        width: 100%;
        margin-top: 60px;
    }

    .olix-bottle {
        width: 300px;
    }

    .olix-nav-menu {
        display: none;
    }

    .olix-title {
        font-size: 52px;
    }
}

/*====================================================
    OLIX ABOUT SECTION
=====================================================*/

.olix-about-section {
    position: relative;
    padding: 140px 0 90px;
    overflow: hidden;
    background: radial-gradient(circle at top left, rgba(122,41,160,.18), transparent 38%), radial-gradient(circle at right center, rgba(23,166,115,.08), transparent 35%), linear-gradient( 180deg, #09090d 0%, #120814 45%, #09090d 100%);
}

/*=========================================
    Purple Glow
==========================================*/

.olix-about-glow {
    position: absolute;
    top: -220px;
    left: -180px;
    width: 700px;
    height: 700px;
    background: radial-gradient( circle, rgba(145,66,255,.22), transparent 72% );
    filter: blur(90px);
    pointer-events: none;
    z-index: 1;
}

    .olix-about-glow::before {
        content: "";
        position: absolute;
        width: 380px;
        height: 380px;
        right: -350px;
        top: 300px;
        background: radial-gradient( circle, rgba(23,166,115,.15), transparent 72% );
        filter: blur(70px);
    }

/*=========================================
    Main Container
==========================================*/

.olix-about-container {
    position: relative;
    z-index: 10;
    width: 1400px;
    max-width: 92%;
    margin: auto;
    display: grid;
    grid-template-columns: 520px 1fr;
    align-items: center;
    gap: 70px;
}

/*=========================================
    LEFT COLUMN
==========================================*/

.olix-about-left {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*=========================================
    Image Wrapper
==========================================*/

.olix-about-image-wrapper {
    position: relative;
    width: 100%;
    border-radius: 30px;
    overflow: hidden;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(170,120,255,.18);
    backdrop-filter: blur(18px);
    box-shadow: 0 35px 70px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.05);
}

    /* Glass Highlight */

    .olix-about-image-wrapper::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 135deg, rgba(255,255,255,.12), transparent 30%, transparent 65%, rgba(255,255,255,.04) );
        z-index: 2;
        pointer-events: none;
    }

    /* Border Glow */

    .olix-about-image-wrapper::after {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: 32px;
        background: linear-gradient( 135deg, rgba(147,72,255,.45), rgba(23,166,115,.20), transparent );
        opacity: .35;
        filter: blur(20px);
        z-index: -1;
    }

/*=========================================
    Laboratory Image
==========================================*/

.olix-about-image {
    display: block;
    width: 100%;
    height: 620px;
    object-fit: cover;
    transition: 1.2s ease;
}

.olix-about-image-wrapper:hover
.olix-about-image {
    transform: scale(1.06);
}

/*=========================================
    RIGHT COLUMN
==========================================*/

.olix-about-right {
    position: relative;
    z-index: 5;
    padding-right: 170px;
}

    /* Decorative Divider */

    .olix-about-right::before {
        content: "";
        position: absolute;
        left: -35px;
        top: 15px;
        width: 2px;
        height: 130px;
        background: linear-gradient( to bottom, #17A673, #8c3fff, transparent );
        opacity: .45;
    }

/*=========================================
    DNA Decoration
==========================================*/

.olix-about-dna {
    position: absolute;
    top: 60px;
    right: -120px;
    width: 520px;
    height: 900px;
    background: url('/images/olix/dna.png') center center/contain no-repeat;
    opacity: .35;
    pointer-events: none;
    z-index: 2;
    animation: olix-dnaFloat 9s ease-in-out infinite;
    filter: drop-shadow(0 0 30px rgba(156,83,255,.45));
}

/*=========================================
    Floating Particles
==========================================*/

.olix-about-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient( rgba(184,116,255,.25) 1px, transparent 1px );
    background-size: 70px 70px;
    opacity: .18;
    animation: olix-particles 45s linear infinite;
}

.olix-about-section::after {
    content: "";
    position: absolute;
    right: 8%;
    top: 10%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #9d62ff;
    box-shadow: 0 0 18px #9d62ff, 80px 120px 0 rgba(145,66,255,.65), -100px 280px 0 rgba(23,166,115,.55), 50px 430px 0 rgba(255,255,255,.25);
    opacity: .8;
}

/*=========================================
    Background Blur Circle
==========================================*/

.olix-about-circle {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(120,45,200,.30), transparent 70% );
    right: -140px;
    bottom: -180px;
    filter: blur(60px);
    z-index: 1;
}

/*=========================================
    Animations
==========================================*/

@keyframes olix-dnaFloat {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-18px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes olix-particles {

    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 500px;
    }
}

/*====================================================
    OLIX ABOUT CONTENT
=====================================================*/

/*=========================================
    Section Tag
==========================================*/

.olix-about-tag {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    color: #D8B15B;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
}

    .olix-about-tag::before {
        content: "";
        width: 60px;
        height: 2px;
        background: linear-gradient( 90deg, #17A673, #D8B15B );
        border-radius: 10px;
    }

/*=========================================
    Heading
==========================================*/

.olix-about-title {
    font-family: 'Cormorant Garamond',serif;
    font-size: 68px;
    line-height: 1.08;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 30px;
    letter-spacing: .5px;
}

    .olix-about-title span {
        color: #D8B15B;
    }

/*=========================================
    Description
==========================================*/

.olix-about-text {
    color: #cfcfcf;
    font-size: 17px;
    line-height: 34px;
    margin-bottom: 28px;
    max-width: 720px;
}

    .olix-about-text:last-of-type {
        margin-bottom: 55px;
    }

/*====================================================
    FEATURE CONTAINER
=====================================================*/

.olix-feature-container {
    position: relative;
    z-index: 15;
    width: 1400px;
    max-width: 92%;
    margin: 90px auto 0;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 30px;
}

/*====================================================
    FEATURE CARD
=====================================================*/

.olix-feature-card {
    position: relative;
    padding: 38px;
    border-radius: 26px;
    overflow: hidden;
    background: linear-gradient( 145deg, rgba(255,255,255,.08), rgba(255,255,255,.03) );
    border: 1px solid rgba(180,120,255,.18);
    backdrop-filter: blur(18px);
    transition: .45s ease;
    box-shadow: 0 25px 55px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.06);
}

    /* Premium Border */

    .olix-feature-card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 26px;
        padding: 1px;
        background: linear-gradient( 135deg, rgba(180,120,255,.55), rgba(23,166,115,.45), transparent );
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: .35;
    }

    /* Glass Shine */

    .olix-feature-card::after {
        content: "";
        position: absolute;
        top: -80%;
        left: -30%;
        width: 60%;
        height: 220%;
        background: linear-gradient( rgba(255,255,255,.15), transparent );
        transform: rotate(25deg);
        transition: .8s;
        pointer-events: none;
    }

/*====================================================
    ICON
=====================================================*/

.olix-feature-icon {
    width: 82px;
    height: 82px;
    border-radius: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 28px;
    background: linear-gradient( 135deg, #17A673, #7D2AE8 );
    box-shadow: 0 15px 35px rgba(23,166,115,.35), 0 10px 25px rgba(125,42,232,.25);
}

    .olix-feature-icon img {
        width: 42px;
        height: 42px;
        object-fit: contain;
    }

/*====================================================
    CONTENT
=====================================================*/

.olix-feature-content h3 {
    font-family: 'Cormorant Garamond',serif;
    font-size: 34px;
    color: #ffffff;
    margin-bottom: 18px;
    font-weight: 700;
}

.olix-feature-content p {
    color: #d0d0d0;
    font-size: 16px;
    line-height: 30px;
}

/*====================================================
    Decorative Number
=====================================================*/

.olix-feature-card .olix-feature-number {
    position: absolute;
    top: 28px;
    right: 28px;
    font-family: 'Cormorant Garamond',serif;
    font-size: 64px;
    font-weight: 700;
    color: rgba(255,255,255,.05);
    user-select: none;
}

/*====================================================
    Accent Line
=====================================================*/

.olix-feature-card .olix-feature-line {
    width: 65px;
    height: 4px;
    border-radius: 20px;
    margin: 25px 0;
    background: linear-gradient( 90deg, #17A673, #D8B15B );
}

/*====================================================
    Bottom Decoration
=====================================================*/

.olix-feature-card .olix-feature-dot {
    position: absolute;
    bottom: 25px;
    right: 25px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #17A673;
    box-shadow: 0 0 20px rgba(23,166,115,.65);
}

/*====================================================
    Glass Background Blur
=====================================================*/

.olix-feature-card .olix-card-glow {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient( rgba(125,42,232,.22), transparent );
    top: -120px;
    right: -100px;
    filter: blur(40px);
    pointer-events: none;
}

/*====================================================
    OLIX FEATURE CARD HOVER EFFECTS
=====================================================*/

.olix-feature-card {
    transform: translateY(0);
    cursor: pointer;
    will-change: transform;
}

    .olix-feature-card:hover {
        transform: translateY(-16px);
        border-color: rgba(23,166,115,.45);
        box-shadow: 0 35px 80px rgba(0,0,0,.55), 0 0 35px rgba(125,42,232,.18), 0 0 55px rgba(23,166,115,.15);
    }

        /* Moving Glass Shine */

        .olix-feature-card:hover::after {
            left: 140%;
        }

        /* Premium Border Glow */

        .olix-feature-card:hover::before {
            opacity: .8;
        }

        /* Icon Animation */

        .olix-feature-card:hover .olix-feature-icon {
            transform: rotate(-8deg) scale(1.08);
            box-shadow: 0 18px 40px rgba(23,166,115,.45), 0 15px 35px rgba(125,42,232,.35);
        }

        /* Heading */

        .olix-feature-card:hover h3 {
            color: #D8B15B;
        }

        /* Accent Line */

        .olix-feature-card:hover .olix-feature-line {
            width: 110px;
        }

        /* Glow */

        .olix-feature-card:hover .olix-card-glow {
            transform: scale(1.3);
            opacity: 1;
        }

        /* Dot */

        .olix-feature-card:hover .olix-feature-dot {
            transform: scale(1.4);
        }

/*====================================================
    IMAGE HOVER
=====================================================*/

.olix-about-image-wrapper {
    transition: .6s;
}

    .olix-about-image-wrapper:hover {
        transform: translateY(-10px);
        box-shadow: 0 35px 90px rgba(0,0,0,.55), 0 0 45px rgba(125,42,232,.18);
    }

        .olix-about-image-wrapper:hover::after {
            opacity: .8;
        }

/*====================================================
    TEXT ANIMATIONS
=====================================================*/

.olix-about-tag {
    animation: olixFadeUp .8s ease both;
}

.olix-about-title {
    animation: olixFadeUp .9s ease both;
}

.olix-about-text {
    animation: olixFadeUp 1.1s ease both;
}

/*====================================================
    FLOATING ANIMATIONS
=====================================================*/

.olix-feature-card:nth-child(1) {
    animation: olixCardFloat 7s ease-in-out infinite;
}

.olix-feature-card:nth-child(2) {
    animation: olixCardFloat 8s ease-in-out infinite;
    animation-delay: .6s;
}

.olix-feature-card:nth-child(3) {
    animation: olixCardFloat 7.5s ease-in-out infinite;
    animation-delay: 1s;
}

/*====================================================
    CARD TRANSITIONS
=====================================================*/

.olix-feature-card,
.olix-feature-icon,
.olix-feature-line,
.olix-feature-dot,
.olix-card-glow,
.olix-about-image,
.olix-about-image-wrapper {
    transition: .45s ease;
}

/*====================================================
    RESPONSIVE
=====================================================*/

@media(max-width:1200px) {

    .olix-about-container {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .olix-about-left {
        max-width: 700px;
        margin: auto;
    }

    .olix-about-right {
        padding-right: 0;
        text-align: center;
    }

        .olix-about-right::before {
            display: none;
        }

    .olix-about-title {
        font-size: 56px;
    }

    .olix-about-text {
        max-width: 100%;
    }

    .olix-feature-container {
        grid-template-columns: repeat(2,1fr);
    }

    .olix-about-dna {
        opacity: .15;
    }
}

@media(max-width:992px) {

    .olix-about-section {
        padding: 100px 0;
    }

    .olix-about-title {
        font-size: 46px;
    }

    .olix-about-image {
        height: 500px;
    }

    .olix-feature-container {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .olix-feature-card {
        padding: 30px;
    }

    .olix-feature-content h3 {
        font-size: 30px;
    }

    .olix-feature-content p {
        font-size: 15px;
        line-height: 28px;
    }

    .olix-about-dna {
        display: none;
    }
}

@media(max-width:768px) {

    .olix-about-container {
        max-width: 94%;
    }

    .olix-about-image {
        height: 420px;
    }

    .olix-about-title {
        font-size: 38px;
        line-height: 1.15;
    }

    .olix-about-tag {
        font-size: 13px;
        letter-spacing: 2px;
    }

    .olix-about-text {
        font-size: 16px;
        line-height: 30px;
    }

    .olix-feature-icon {
        width: 72px;
        height: 72px;
    }

        .olix-feature-icon img {
            width: 36px;
            height: 36px;
        }

    .olix-feature-content h3 {
        font-size: 28px;
    }

    .olix-feature-card {
        border-radius: 22px;
    }
}

@media(max-width:576px) {

    .olix-about-section {
        padding: 80px 0;
    }

    .olix-about-title {
        font-size: 32px;
    }

    .olix-about-image {
        height: 340px;
    }

    .olix-feature-card {
        padding: 24px;
    }

    .olix-feature-content h3 {
        font-size: 24px;
    }

    .olix-feature-content p {
        font-size: 14px;
        line-height: 26px;
    }

    .olix-feature-icon {
        width: 65px;
        height: 65px;
    }

    .olix-buttons {
        flex-direction: column;
    }
}

/*====================================================
    KEYFRAMES
=====================================================*/

@keyframes olixCardFloat {

    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-8px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes olixFadeUp {

    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*====================================================
    OLIX NANO TECHNOLOGY SECTION
====================================================*/

.olix-process-section {
    position: relative;
    overflow: hidden;
    padding: 120px 0;
    margin-bottom:-20px;
    background: radial-gradient(circle at left center, rgba(126,52,181,.18), transparent 35%), radial-gradient(circle at right center, rgba(23,166,115,.10), transparent 32%), linear-gradient( 180deg, #09090d 0%, #120814 45%, #09090d 100%);
}

/*==========================================
    Decorative Glow
==========================================*/

.olix-process-glow {
    position: absolute;
    left: -180px;
    top: -120px;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(138,72,255,.28), transparent 72% );
    filter: blur(70px);
    z-index: 1;
    pointer-events: none;
}

    .olix-process-glow::before {
        content: "";
        position: absolute;
        right: -520px;
        top: 260px;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(23,166,115,.18), transparent 70% );
        filter: blur(55px);
    }

/*==========================================
    Main Container
==========================================*/

.olix-process-container {
    position: relative;
    z-index: 10;
    width: 1400px;
    max-width: 92%;
    margin: auto;
    display: grid;
    grid-template-columns: 480px 1fr;
    gap: 80px;
    align-items: center;
}

/*==========================================
    LEFT COLUMN
==========================================*/

.olix-process-left {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/*==========================================
    Image Wrapper
==========================================*/

.olix-process-image-wrapper {
    position: relative;
    width: 105%;
    border-radius: 30px;
    overflow: hidden;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(155,110,255,.18);
    backdrop-filter: blur(20px);
    box-shadow: 0 30px 70px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.05);
}

    /* Glass Shine */

    .olix-process-image-wrapper::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 135deg, rgba(255,255,255,.10), transparent 35%, transparent 70%, rgba(255,255,255,.03) );
        z-index: 2;
        pointer-events: none;
    }

    /* Border Glow */

    .olix-process-image-wrapper::after {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: 32px;
        background: linear-gradient( 135deg, rgba(140,70,255,.45), rgba(23,166,115,.25), transparent );
        opacity: .40;
        filter: blur(18px);
        z-index: -1;
    }

/*==========================================
    Molecule Image
==========================================*/

.olix-process-image {
    display: block;
    width: 100%;
    height: 520px;
    object-fit: cover;
    transition: 1s ease;
}

.olix-process-image-wrapper:hover
.olix-process-image {
    transform: scale(1.05);
}

/*==========================================
    RIGHT COLUMN
==========================================*/

.olix-process-right {
    position: relative;
    z-index: 5;
}

    /* Accent Line */

    .olix-process-right::before {
        content: "";
        position: absolute;
        left: -35px;
        top: 20px;
        width: 2px;
        height: 120px;
        background: linear-gradient( to bottom, #17A673, #8E46FF, transparent );
        opacity: .55;
    }

/*==========================================
    Decorative Particles
==========================================*/

.olix-process-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient( rgba(173,112,255,.22) 1px, transparent 1px );
    background-size: 65px 65px;
    opacity: .15;
    animation: olixProcessParticles 45s linear infinite;
}

/* Floating Light */

.olix-process-section::after {
    content: "";
    position: absolute;
    right: 6%;
    top: 18%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #8E46FF;
    box-shadow: 0 0 18px #8E46FF, 90px 120px 0 rgba(23,166,115,.55), -80px 240px 0 rgba(142,70,255,.55), 60px 400px 0 rgba(255,255,255,.20);
}

/*==========================================
    Ambient Blur
==========================================*/

.olix-process-circle {
    position: absolute;
    right: -150px;
    bottom: -120px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient( rgba(142,70,255,.25), transparent 72% );
    filter: blur(60px);
    z-index: 1;
}

/*==========================================
    Floating Animation
==========================================*/

@keyframes olixProcessParticles {

    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 500px;
    }
}

@keyframes olixProcessFloat {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0);
    }
}

.olix-process-image-wrapper {
    animation: olixProcessFloat 8s ease-in-out infinite;
}

/*====================================================
    OLIX PROCESS TYPOGRAPHY
====================================================*/

/*==========================================
    Section Tag
==========================================*/

.olix-process-tag {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    color: #D8B15B;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    position: relative;
}

    .olix-process-tag::before {
        content: "";
        width: 60px;
        height: 2px;
        border-radius: 20px;
        background: linear-gradient( 90deg, #17A673, #D8B15B );
    }

    .olix-process-tag::after {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #17A673;
        box-shadow: 0 0 15px rgba(23,166,115,.6);
    }

/*==========================================
    Heading
==========================================*/

.olix-process-title {
    font-family: 'Cormorant Garamond',serif;
    font-size: 68px;
    line-height: 1.08;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: .3px;
    margin-bottom: 28px;
    max-width: 720px;
}

    .olix-process-title span {
        color: #D8B15B;
    }

    /* Optional Gradient Version */

    .olix-process-title em {
        font-style: normal;
        background: linear-gradient( 90deg, #D8B15B, #ffffff );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

/*==========================================
    Description
==========================================*/

.olix-process-description {
    max-width: 700px;
    color: #D6D6D6;
    font-size: 17px;
    line-height: 34px;
    font-weight: 400;
    margin-bottom: 0px;
    margin-top:-50px;
}

/*==========================================
    Footer Text
==========================================*/

.olix-process-footer {
    margin-top: 60px;
    max-width: 760px;
}

    .olix-process-footer p {
        color: #BFBFBF;
        font-size: 16px;
        line-height: 32px;
        font-weight: 400;
    }

/*==========================================
    Decorative Divider
==========================================*/

.olix-process-divider {
    width: 120px;
    height: 2px;
    margin: 35px 0;
    border-radius: 20px;
    background: linear-gradient( 90deg, #17A673, #8E46FF, #D8B15B );
}

/*==========================================
    Text Selection
==========================================*/

.olix-process-title::selection,
.olix-process-description::selection {
    background: #8E46FF;
    color: #ffffff;
}

/*==========================================
    Content Wrapper
==========================================*/

.olix-process-content {
    position: relative;
    z-index: 5;
}

/*==========================================
    Content Animation
==========================================*/

.olix-process-tag {
    animation: olixProcessFade .7s ease both;
}

.olix-process-title {
    animation: olixProcessFade .9s ease both;
}

.olix-process-description {
    animation: olixProcessFade 1.1s ease both;
}

.olix-process-footer {
    animation: olixProcessFade 1.3s ease both;
}

/*==========================================
    Hover Effects
==========================================*/

.olix-process-title {
    transition: .4s ease;
}

    .olix-process-title:hover {
        color: #D8B15B;
    }

.olix-process-description {
    transition: .35s ease;
}

    .olix-process-description:hover {
        color: #F2F2F2;
    }

/*==========================================
    Fade Animation
==========================================*/

@keyframes olixProcessFade {

    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*====================================================
    OLIX PROCESS TIMELINE
====================================================*/

/*==========================================
    Timeline Layout
==========================================*/

.olix-process-timeline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 20px;
    margin-bottom: 60px;
    position: relative;
    flex-wrap: nowrap;
}

/*==========================================
    Individual Step
==========================================*/

.olix-process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    flex: 1;
}

/*==========================================
    Premium Glass Circle
==========================================*/

.olix-process-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient( 145deg, rgba(255,255,255,.10), rgba(255,255,255,.03) );
    backdrop-filter: blur(18px);
    border: 1px solid rgba(160,120,255,.22);
    box-shadow: 0 20px 45px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.08);
    transition: .45s ease;
}

    /* Premium Border */

    .olix-process-icon::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        padding: 1px;
        background: linear-gradient( 135deg, rgba(23,166,115,.70), rgba(142,70,255,.70), rgba(216,177,91,.60) );
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: .45;
    }

    /* Glass Shine */

    .olix-process-icon::after {
        content: "";
        position: absolute;
        top: -80%;
        left: -35%;
        width: 55%;
        height: 220%;
        transform: rotate(25deg);
        background: linear-gradient( rgba(255,255,255,.18), transparent );
        transition: .8s ease;
    }

    /*==========================================
    Icon Image
==========================================*/

    .olix-process-icon img {
        width: 42px;
        height: 42px;
        object-fit: contain;
        position: relative;
        z-index: 2;
        transition: .35s ease;
    }

/*==========================================
    Step Title
==========================================*/

.olix-process-step h4 {
    margin-top: 18px;
    font-family: 'Cormorant Garamond',serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff;
    transition: .35s;
}

/*==========================================
    Connecting Arrow
==========================================*/

.olix-process-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 45px;
    font-size: 34px;
    color: #17A673;
    opacity: .8;
    transition: .35s ease;
}

    .olix-process-arrow span {
        display: block;
        filter: drop-shadow(0 0 12px rgba(23,166,115,.45));
    }

/*==========================================
    Hover Effects
==========================================*/

.olix-process-step:hover .olix-process-icon {
    transform: translateY(-10px) scale(1.08);
    border-color: rgba(23,166,115,.45);
    box-shadow: 0 28px 60px rgba(0,0,0,.45), 0 0 30px rgba(23,166,115,.25), 0 0 45px rgba(142,70,255,.18);
}

    .olix-process-step:hover .olix-process-icon::after {
        left: 145%;
    }

.olix-process-step:hover img {
    transform: scale(1.12);
}

.olix-process-step:hover h4 {
    color: #D8B15B;
}

.olix-process-step:hover + .olix-process-arrow {
    color: #D8B15B;
}

/*==========================================
    Active Glow Ring
==========================================*/

.olix-process-step::before {
    content: "";
    position: absolute;
    top: 50px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient( rgba(142,70,255,.22), transparent 70% );
    opacity: 0;
    transform: scale(.8);
    transition: .4s;
    z-index: -1;
}

.olix-process-step:hover::before {
    opacity: 1;
    transform: scale(1.2);
}

/*==========================================
    Responsive
==========================================*/

@media(max-width:992px) {

    .olix-process-timeline {
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
    }

    .olix-process-arrow {
        display: none;
    }

    .olix-process-step {
        flex: 0 0 calc(50% - 20px);
    }
}

@media(max-width:576px) {

    .olix-process-step {
        flex: 0 0 100%;
    }

    .olix-process-icon {
        width: 85px;
        height: 85px;
    }

        .olix-process-icon img {
            width: 36px;
            height: 36px;
        }

    .olix-process-step h4 {
        font-size: 20px;
    }
}
/*====================================================
    OLIX PROCESS TIMELINE
    Timeline Circles • Icons • Arrows
====================================================*/

/*==========================================
    Timeline Layout
==========================================*/

.olix-process-timeline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin: 60px 0;
    position: relative;
}

.olix-process-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

/*==========================================
    Premium Glass Circle
==========================================*/

.olix-process-icon {
    position: relative;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: linear-gradient( 145deg, rgba(255,255,255,.10), rgba(255,255,255,.03) );
    backdrop-filter: blur(22px);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 20px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
    transition: .45s;
}

    /* Gradient Border */

    .olix-process-icon::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        padding: 2px;
        background: linear-gradient( 135deg, #17A673, #8B3DFF, #D8B15B );
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: .45;
    }

    /* Glass Reflection */

    .olix-process-icon::after {
        content: "";
        position: absolute;
        width: 55%;
        height: 200%;
        top: -70%;
        left: -40%;
        transform: rotate(28deg);
        background: linear-gradient( rgba(255,255,255,.18), transparent );
        transition: .8s;
    }

    /*==========================================
    Icon
==========================================*/

    .olix-process-icon img {
        width: 46px;
        height: 46px;
        object-fit: contain;
        position: relative;
        z-index: 2;
        transition: .35s;
    }

/*==========================================
    Step Title
==========================================*/

.olix-process-step h4 {
    margin-top: 18px;
    font-family: 'Cormorant Garamond',serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff;
    transition: .35s;
}

/*==========================================
    Connector Arrow
==========================================*/

.olix-process-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 55px;
    margin-top: 42px;
}

    .olix-process-arrow span {
        font-size: 34px;
        color: #17A673;
        transition: .35s;
        text-shadow: 0 0 10px rgba(23,166,115,.45);
    }

/*==========================================
    Hover Effects
==========================================*/

.olix-process-step:hover .olix-process-icon {
    transform: translateY(-12px) scale(1.08);
    border-color: rgba(23,166,115,.35);
    box-shadow: 0 30px 70px rgba(0,0,0,.50), 0 0 30px rgba(23,166,115,.25), 0 0 45px rgba(139,61,255,.20);
}

    .olix-process-step:hover .olix-process-icon::after {
        left: 140%;
    }

.olix-process-step:hover img {
    transform: scale(1.12);
}

.olix-process-step:hover h4 {
    color: #D8B15B;
}

.olix-process-step:hover::before {
    opacity: 1;
    transform: scale(1.2);
}

/* Glow Behind Circle */

.olix-process-step::before {
    content: "";
    position: absolute;
    top: -5px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: radial-gradient( rgba(139,61,255,.22), transparent 72% );
    opacity: 0;
    transition: .45s;
    z-index: -1;
}

/*==========================================
    Arrow Hover
==========================================*/

.olix-process-step:hover + .olix-process-arrow span {
    color: #D8B15B;
    transform: translateX(4px);
}

/*==========================================
    Responsive
==========================================*/

@media(max-width:992px) {

    .olix-process-timeline {
        flex-wrap: wrap;
        justify-content: center;
        gap: 35px;
    }

    .olix-process-arrow {
        display: none;
    }

    .olix-process-step {
        flex: 0 0 calc(50% - 20px);
    }
}

@media(max-width:576px) {

    .olix-process-step {
        flex: 0 0 100%;
    }

    .olix-process-icon {
        width: 90px;
        height: 90px;
    }

        .olix-process-icon img {
            width: 38px;
            height: 38px;
        }

    .olix-process-step h4 {
        font-size: 20px;
    }
}
/*==========================================================
    OLIX PROCESS
    PART 3.3 – ADVANCED ANIMATIONS
==========================================================*/

/*=========================================
    GLOBAL TRANSITIONS
=========================================*/

.olix-process-step,
.olix-process-icon,
.olix-process-icon img,
.olix-process-step h4,
.olix-process-arrow span,
.olix-process-image,
.olix-process-image-wrapper {
    transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease, color .35s ease, opacity .35s ease;
}

/*=========================================
    IMAGE FLOATING
=========================================*/

.olix-process-image-wrapper {
    animation: olixImageFloat 8s ease-in-out infinite;
}

@keyframes olixImageFloat {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }

    100% {
        transform: translateY(0);
    }
}

/*=========================================
    MOLECULE ROTATION
=========================================*/

.olix-process-image {
    animation: olixRotate 35s linear infinite;
    transform-origin: center;
}

@keyframes olixRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/*=========================================
    TIMELINE FLOAT
=========================================*/

.olix-process-step:nth-child(1) {
    animation: olixStepFloat 7s ease-in-out infinite;
}

.olix-process-step:nth-child(3) {
    animation: olixStepFloat 7.5s ease-in-out infinite;
    animation-delay: .5s;
}

.olix-process-step:nth-child(5) {
    animation: olixStepFloat 8s ease-in-out infinite;
    animation-delay: 1s;
}

.olix-process-step:nth-child(7) {
    animation: olixStepFloat 7.3s ease-in-out infinite;
    animation-delay: 1.5s;
}

.olix-process-step:nth-child(9) {
    animation: olixStepFloat 8.2s ease-in-out infinite;
    animation-delay: 2s;
}

@keyframes olixStepFloat {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

    100% {
        transform: translateY(0);
    }
}

/*=========================================
    ICON PULSE
=========================================*/

.olix-process-icon::before {
    animation: olixBorderPulse 4s ease infinite;
}

@keyframes olixBorderPulse {

    0% {
        opacity: .35;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: .35;
    }
}

/*=========================================
    EMERALD GLOW
=========================================*/

.olix-process-icon::after {
    animation: olixGlassShine 6s linear infinite;
}

@keyframes olixGlassShine {

    0% {
        left: -40%;
    }

    100% {
        left: 140%;
    }
}

/*=========================================
    ARROW ANIMATION
=========================================*/

.olix-process-arrow span {
    animation: olixArrowMove 2s ease infinite;
}

@keyframes olixArrowMove {

    0% {
        transform: translateX(0);
        opacity: .5;
    }

    50% {
        transform: translateX(8px);
        opacity: 1;
    }

    100% {
        transform: translateX(0);
        opacity: .5;
    }
}

/*=========================================
    TITLE GLOW
=========================================*/

.olix-process-title {
    animation: olixTitleGlow 5s ease infinite;
}

@keyframes olixTitleGlow {

    0% {
        text-shadow: 0 0 0 transparent;
    }

    50% {
        text-shadow: 0 0 18px rgba(139,61,255,.25);
    }

    100% {
        text-shadow: 0 0 0 transparent;
    }
}

/*=========================================
    FLOATING PARTICLES
=========================================*/

.olix-process-section::before {
    animation: olixParticlesMove 50s linear infinite;
}

@keyframes olixParticlesMove {

    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 600px;
    }
}

/*=========================================
    HOVER EFFECTS
=========================================*/

.olix-process-step:hover {
    transform: translateY(-15px);
}

    .olix-process-step:hover .olix-process-icon {
        box-shadow: 0 25px 60px rgba(0,0,0,.45), 0 0 25px rgba(23,166,115,.30), 0 0 45px rgba(139,61,255,.20);
    }

    .olix-process-step:hover img {
        transform: scale(1.18) rotate(8deg);
    }

    .olix-process-step:hover h4 {
        color: #D8B15B;
        letter-spacing: .5px;
    }

    .olix-process-step:hover + .olix-process-arrow span {
        color: #D8B15B;
        transform: translateX(10px);
    }

/*=========================================
    FADE UP
=========================================*/

.olix-process-tag {
    animation: olixFadeUp .7s both;
}

.olix-process-title {
    animation: olixFadeUp .9s both;
}

.olix-process-description {
    animation: olixFadeUp 1.1s both;
}

.olix-process-timeline {
    animation: olixFadeUp 1.3s both;
}

.olix-process-footer {
    animation: olixFadeUp 1.5s both;
}

@keyframes olixFadeUp {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*=========================================
    SCROLL REVEAL SUPPORT
=========================================*/

.olix-reveal {
    opacity: 0;
    transform: translateY(70px);
    transition: opacity .8s ease, transform .8s ease;
}

    .olix-reveal.olix-active {
        opacity: 1;
        transform: translateY(0);
    }

/*=========================================
    REDUCED MOTION
=========================================*/

@media (prefers-reduced-motion: reduce) {

    * {
        animation: none !important;
        transition: none !important;
    }
}

/*=========================================
    MOBILE
=========================================*/

@media(max-width:768px) {

    .olix-process-image {
        animation: none;
    }

    .olix-process-step {
        animation: none;
    }

    .olix-process-arrow span {
        animation: none;
    }
}
/*==========================================================
    OLIX
    PART 4.2A – PREMIUM CSS
    LAYOUT & BACKGROUND
==========================================================*/

/*=========================================
    SECTION
=========================================*/

.olix-innovation-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: radial-gradient(circle at top left, rgba(125,45,255,.18) 0%, transparent 42%), radial-gradient(circle at bottom right, rgba(22,170,110,.12) 0%, transparent 38%), linear-gradient( 180deg, #08060E 0%, #0B0713 45%, #07050B 100%);
    padding: 130px 0;
    isolation: isolate;
}

    /*=========================================
    TOP BORDER
=========================================*/

    .olix-innovation-section::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient( 90deg, transparent, rgba(178,97,255,.45), rgba(27,191,129,.25), transparent);
    }

    /*=========================================
    BOTTOM BORDER
=========================================*/

    .olix-innovation-section::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(178,97,255,.20), transparent);
    }

/*=========================================
    PURPLE GLOW
=========================================*/

.olix-innovation-glow {
    position: absolute;
    width: 900px;
    height: 900px;
    left: -320px;
    top: -180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(133,58,255,.22), transparent 72%);
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
}

    /*=========================================
    EMERALD GLOW
=========================================*/

    .olix-innovation-glow::after {
        content: "";
        position: absolute;
        width: 700px;
        height: 700px;
        right: -900px;
        bottom: -120px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(18,175,118,.18), transparent 72%);
        filter: blur(80px);
    }

/*=========================================
    FLOATING PARTICLES
=========================================*/

.olix-innovation-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .45;
    background-image: radial-gradient( rgba(173,104,255,.75) 1px, transparent 1px), radial-gradient( rgba(31,199,134,.55) 1px, transparent 1px);
    background-size: 180px 180px, 260px 260px;
    background-position: 0 0, 90px 110px;
}

/*=========================================
    CONTAINER
=========================================*/

.olix-innovation-container {
    position: relative;
    z-index: 2;
    width: min(92%,1600px);
    margin: auto;
    display: grid;
    grid-template-columns: 48% 40px 52%;
    align-items: center;
    column-gap: 55px;
}

/*=========================================
    LEFT COLUMN
=========================================*/

.olix-innovation-left {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*=========================================
    IMAGE WRAPPER
=========================================*/

.olix-innovation-image-wrapper {
    position: relative;
    width: 100%;
    border-radius: 34px;
    overflow: hidden;
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(182,132,255,.18);
    box-shadow: 0 35px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03), 0 0 50px rgba(119,48,255,.18);
}

/*=========================================
    IMAGE
=========================================*/

.olix-innovation-image {
    display: block;
    width: 100%;
    height: 650px;
    object-fit: cover;
    object-position: center;
    transition: .7s;
}

/*=========================================
    IMAGE OVERLAY
=========================================*/

.olix-innovation-image-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient( to right, rgba(90,22,170,.12), transparent 35%), linear-gradient( to top, rgba(0,0,0,.18), transparent 45%);
}

/*=========================================
    GLASS SHINE
=========================================*/

.olix-innovation-image-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    left: -130%;
    width: 45%;
    height: 100%;
    background: linear-gradient( 120deg, transparent, rgba(255,255,255,.16), transparent);
    transform: skewX(-25deg);
}

/*=========================================
    VERTICAL DIVIDER
=========================================*/

.olix-innovation-divider {
    position: relative;
    width: 40px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    /* Vertical Line */

    .olix-innovation-divider::before {
        content: "";
        position: absolute;
        width: 2px;
        height: 88%;
        background: linear-gradient( to bottom, transparent, rgba(186,133,255,.55), rgba(30,194,132,.45), transparent);
        border-radius: 10px;
    }

/*=========================================
    CENTER GLOW DOT
=========================================*/

.olix-divider-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #D8B15B;
    box-shadow: 0 0 15px rgba(216,177,91,.8), 0 0 35px rgba(216,177,91,.55), 0 0 60px rgba(216,177,91,.35);
    z-index: 2;
}

/*=========================================
    RIGHT COLUMN
=========================================*/

.olix-innovation-right {
    position: relative;
    z-index: 2;
}

/*=========================================
    LEAF DECORATION
=========================================*/

.olix-leaf-decoration {
    position: absolute;
    top: 40px;
    right: -60px;
    width: 260px;
    opacity: .12;
    pointer-events: none;
}

    .olix-leaf-decoration img {
        width: 100%;
        display: block;
    }

/*=========================================
    HOVER
=========================================*/

.olix-innovation-image-wrapper:hover img {
    transform: scale(1.06);
}

.olix-innovation-image-wrapper:hover::after {
    animation: olixGlassSweep 1.6s ease;
}

/*=========================================
    GLASS ANIMATION
=========================================*/

@keyframes olixGlassSweep {

    from {
        left: -120%;
    }

    to {
        left: 150%;
    }
}

/*=========================================
    RESPONSIVE
=========================================*/

@media(max-width:1200px) {

    .olix-innovation-container {
        grid-template-columns: 1fr;
        row-gap: 70px;
    }

    .olix-innovation-divider {
        display: none;
    }

    .olix-leaf-decoration {
        display: none;
    }
}

@media(max-width:768px) {

    .olix-innovation-section {
        padding: 90px 0;
    }

    .olix-innovation-image {
        height: 420px;
    }
}
/*==========================================================
    OLIX
    PART 4.2B – PREMIUM TYPOGRAPHY
==========================================================*/

/*=========================================
    RIGHT CONTENT WRAPPER
=========================================*/

.olix-innovation-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    z-index: 5;
    max-width: 760px;
    transform: translateX(-40px);
}

/*=========================================
    SECTION TAG
=========================================*/

.olix-section-tag {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #D8B15B;
    font-family: 'Montserrat',sans-serif;
}

    /* Decorative line */

    .olix-section-tag::before {
        content: "";
        width: 48px;
        height: 2px;
        border-radius: 10px;
        background: linear-gradient( 90deg, #17A673, #D8B15B);
    }

    .olix-section-tag::after {
        content: "";
        position: absolute;
        left: 55px;
        bottom: -8px;
        width: 100%;
        height: 1px;
        background: linear-gradient( 90deg, rgba(216,177,91,.35), transparent);
    }

/*=========================================
    MAIN TITLE
=========================================*/

.olix-section-title {
    margin: 0;
    margin-bottom: 28px;
    font-family: 'Cormorant Garamond',serif;
    font-size: 58px;
    line-height: 1.08;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: .4px;
    text-shadow: 0 5px 20px rgba(0,0,0,.35);
}

    /* Green Highlight */

    .olix-section-title span {
        display: block;
        margin-top: 8px;
        color: #17A673;
        background: linear-gradient( 90deg, #17A673, #6EF3C2);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

/*=========================================
    DESCRIPTION
=========================================*/

.olix-section-description {
    max-width: 690px;
    margin: 0;
    margin-bottom: 55px;
    color: rgba(255,255,255,.78);
    font-size: 18px;
    line-height: 34px;
    font-weight: 400;
    letter-spacing: .25px;
    font-family: 'Poppins',sans-serif;
}

/*=========================================
    FEATURE GRID
=========================================*/

.olix-feature-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 22px;
    margin-top: 8px;
}

/*=========================================
    FEATURE TITLE
=========================================*/

.olix-feature-card h4 {
    margin: 18px 0 0;
    color: #ffffff;
    text-align: center;
    font-family: 'Poppins',sans-serif;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.45;
    transition: .4s;
}

    /* Second Line */

    .olix-feature-card h4 span {
        display: block;
        margin-top: 6px;
        color: #d8d8d8;
        font-size: 17px;
        font-weight: 400;
    }

    /*=========================================
    TEXT SELECTION
=========================================*/

    .olix-section-title::selection,
    .olix-section-description::selection,
    .olix-feature-card h4::selection {
        background: #17A673;
        color: #ffffff;
    }

/*=========================================
    SPACING
=========================================*/

.olix-section-title + .olix-section-description {
    margin-top: -4px;
}

.olix-section-description + .olix-feature-grid {
    margin-top: 10px;
}

/*=========================================
    LARGE DESKTOP
=========================================*/

@media(min-width:1700px) {

    .olix-section-title {
        font-size: 66px;
    }

    .olix-section-description {
        font-size: 19px;
        line-height: 36px;
    }
}

/*=========================================
    LAPTOP
=========================================*/

@media(max-width:1400px) {

    .olix-section-title {
        font-size: 50px;
    }

    .olix-feature-grid {
        gap: 18px;
    }
}

/*=========================================
    TABLET
=========================================*/

@media(max-width:1200px) {

    .olix-innovation-right {
        max-width: 100%;
    }

    .olix-section-title {
        font-size: 46px;
    }

    .olix-section-description {
        max-width: 100%;
    }

    .olix-feature-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 20px;
    }
}

/*=========================================
    MOBILE
=========================================*/

@media(max-width:768px) {

    .olix-section-tag {
        font-size: 12px;
        letter-spacing: 3px;
    }

    .olix-section-title {
        font-size: 38px;
        line-height: 1.18;
    }

    .olix-section-description {
        font-size: 16px;
        line-height: 30px;
        margin-bottom: 40px;
    }

    .olix-feature-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

/*=========================================
    SMALL MOBILE
=========================================*/

@media(max-width:480px) {

    .olix-section-title {
        font-size: 32px;
    }

    .olix-section-description {
        font-size: 15px;
        line-height: 28px;
    }
}

/*==========================================================
    OLIX
    PART 4.2C – PREMIUM FEATURE CARDS
==========================================================*/

/*=========================================
    FEATURE GRID
=========================================*/

.olix-feature-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 22px;
    width: 100%;
    margin-top: 20px;
}

/*=========================================
    FEATURE CARD
=========================================*/

.olix-feature-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    min-height: 285px;
    padding: 38px 26px;
    overflow: hidden;
    border-radius: 28px;
    cursor: pointer;
    background: linear-gradient( 180deg, rgba(82,28,118,.28), rgba(12,10,20,.82));
    border: 1px solid rgba(175,120,255,.20);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 25px 70px rgba(0,0,0,.45), inset 0 1px 1px rgba(255,255,255,.08), inset 0 -1px 0 rgba(255,255,255,.03);
    transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease;
}

    /*=========================================
    GLASS SHINE
=========================================*/

    .olix-feature-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: -120%;
        width: 50%;
        height: 100%;
        background: linear-gradient( 120deg, transparent, rgba(255,255,255,.18), transparent );
        transform: skewX(-25deg);
        transition: 1s;
    }

    /*=========================================
    INNER BORDER
=========================================*/

    .olix-feature-card::after {
        content: "";
        position: absolute;
        inset: 10px;
        border-radius: 20px;
        border: 1px solid rgba(255,255,255,.05);
        pointer-events: none;
    }

/*=========================================
    ICON WRAPPER
=========================================*/

.olix-feature-icon {
    position: relative;
    width: 96px;
    height: 96px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 28px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(25,180,120,.22), rgba(105,38,170,.18));
    border: 1px solid rgba(25,180,120,.35);
    box-shadow: 0 0 35px rgba(25,180,120,.22), inset 0 0 18px rgba(255,255,255,.05);
    transition: .45s;
}

    /*=========================================
    ICON GLOW RING
=========================================*/

    .olix-feature-icon::before {
        content: "";
        position: absolute;
        inset: -10px;
        border-radius: 50%;
        border: 1px solid rgba(23,166,115,.22);
        opacity: 0;
        transition: .45s;
    }

    /*=========================================
    ICON
=========================================*/

    .olix-feature-icon img {
        width: 54px;
        height: 54px;
        object-fit: contain;
        transition: .45s;
        filter: drop-shadow(0 0 12px rgba(23,166,115,.45));
    }

/*=========================================
    CARD TITLE
=========================================*/

.olix-feature-card h4 {
    color: #ffffff;
    font-size: 20px;
    line-height: 1.45;
    font-weight: 600;
    margin: 0;
    transition: .35s;
}

    .olix-feature-card h4 span {
        display: block;
        margin-top: 8px;
        font-size: 17px;
        color: #dddddd;
        font-weight: 400;
    }

/*=========================================
    HOVER
=========================================*/

.olix-feature-card:hover {
    transform: translateY(-12px) scale(1.03);
    border-color: rgba(23,166,115,.45);
    box-shadow: 0 35px 80px rgba(0,0,0,.55), 0 0 35px rgba(23,166,115,.18), 0 0 70px rgba(125,65,255,.15);
}

    .olix-feature-card:hover::before {
        left: 160%;
    }

    .olix-feature-card:hover .olix-feature-icon {
        transform: scale(1.08);
        background: radial-gradient(circle, rgba(23,166,115,.38), rgba(125,65,255,.22));
        box-shadow: 0 0 45px rgba(23,166,115,.35), inset 0 0 18px rgba(255,255,255,.08);
    }

        .olix-feature-card:hover .olix-feature-icon::before {
            opacity: 1;
            transform: scale(1.12);
        }

    .olix-feature-card:hover img {
        transform: scale(1.15) rotate(6deg);
    }

    .olix-feature-card:hover h4 {
        color: #D8B15B;
    }

/*=========================================
    ACTIVE CARD
=========================================*/

.olix-feature-card:active {
    transform: scale(.98);
}

/*=========================================
    FLOATING LIGHT
=========================================*/

.olix-feature-card .olix-card-light {
    position: absolute;
    width: 170px;
    height: 170px;
    right: -70px;
    top: -70px;
    border-radius: 50%;
    background: radial-gradient( rgba(23,166,115,.18), transparent 70% );
    pointer-events: none;
}

/*=========================================
    CARD FOOTER LINE
=========================================*/

.olix-feature-card .olix-card-line {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 55%;
    height: 2px;
    border-radius: 5px;
    background: linear-gradient( 90deg, transparent, #17A673, transparent );
}

/*=========================================
    RESPONSIVE
=========================================*/

@media(max-width:1200px) {

    .olix-feature-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:768px) {

    .olix-feature-grid {
        grid-template-columns: 1fr;
    }

    .olix-feature-card {
        min-height: 240px;
        padding: 35px 24px;
    }

    .olix-feature-icon {
        width: 82px;
        height: 82px;
    }

        .olix-feature-icon img {
            width: 46px;
            height: 46px;
        }

    .olix-feature-card h4 {
        font-size: 18px;
    }

        .olix-feature-card h4 span {
            font-size: 15px;
        }
}
/*==============================
        OLIX FOOTER
===============================*/

.olix-footer {
    position: relative;
    background: radial-gradient(circle at left, rgba(126,48,180,.20), transparent 35%), radial-gradient(circle at right, rgba(22,170,110,.15), transparent 35%), linear-gradient(180deg,#09060F,#120816);
    padding: 80px 0 25px;
    overflow: hidden;
    color: #fff;
    font-family: 'Poppins',sans-serif;
}

/*==============================*/

.olix-footer-glow {
    position: absolute;
    width: 550px;
    height: 550px;
    background: radial-gradient(circle, rgba(126,48,180,.22), transparent 70%);
    top: -250px;
    left: -200px;
    filter: blur(80px);
}

/*==============================*/

.olix-footer-container {
    width: min(92%,1450px);
    margin: auto;
    position: relative;
    z-index: 2;
}

/*==============================*/

.olix-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1.4fr;
    gap: 45px;
    padding-bottom: 45px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

/*==============================*/

.olix-footer-logo {
    width: 180px;
    margin-bottom: 18px;
}

/*==============================*/

.olix-footer-column h3 {
    color: #D8B15B;
    margin-bottom: 22px;
    font-size: 19px;
    font-weight: 600;
}

/*==============================*/

.olix-footer-text {
    color: #C8C8C8;
    line-height: 28px;
    font-size: 15px;
}

/*==============================*/

.olix-footer-column ul {
    list-style: none;
    padding: 0;
}

.olix-footer-column li {
    margin: 14px 0;
}

.olix-footer-column a {
    color: #E6E6E6;
    text-decoration: none;
    transition: .35s;
}

    .olix-footer-column a:hover {
        color: #17A673;
        padding-left: 8px;
    }

/*==============================*/

.olix-footer-column p {
    margin: 12px 0;
    color: #D2D2D2;
}

/*==============================*/

.olix-newsletter {
    display: flex;
    margin-top: 20px;
    border-radius: 50px;
    overflow: hidden;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
}

    .olix-newsletter input {
        flex: 1;
        padding: 15px 18px;
        border: none;
        background: none;
        color: #fff;
        outline: none;
    }

        .olix-newsletter input::placeholder {
            color: #aaa;
        }

    .olix-newsletter button {
        width: 60px;
        border: none;
        background: linear-gradient(135deg,#17A673,#0F7C56);
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        transition: .35s;
    }

        .olix-newsletter button:hover {
            background: linear-gradient(135deg,#D8B15B,#B88B2A);
        }

/*==============================*/

.olix-social {
    display: flex;
    gap: 14px;
    margin-top: 25px;
}

    .olix-social a {
        width: 42px;
        height: 42px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.08);
        color: #fff;
        transition: .35s;
    }

        .olix-social a:hover {
            transform: translateY(-6px);
            background: #17A673;
            box-shadow: 0 0 18px rgba(23,166,115,.45);
        }

/*==============================*/

.olix-footer-bottom {
    text-align: center;
    padding-top: 28px;
    color: #999;
    font-size: 14px;
    letter-spacing: .5px;
}

/*==============================
        RESPONSIVE
===============================*/

@media(max-width:1100px) {

    .olix-footer-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:768px) {

    .olix-footer-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .olix-newsletter {
        flex-direction: column;
        border-radius: 18px;
    }

        .olix-newsletter button {
            width: 100%;
            height: 55px;
        }
}

/*==========================================================
    OXIAURA GROUP
    PART 1.3A.1 – NAVIGATION LAYOUT & GLASSMORPHISM
==========================================================*/

/*==========================================================
    ROOT COLORS
==========================================================*/

:root {
    --groupp-green: #2EB872;
    --groupp-green-light: #59E19B;
    --groupp-gold: #D8B15B;
    --groupp-gold-light: #F6D88D;
    --groupp-blue: #2F6BFF;
    --groupp-blue-light: #59A8FF;
    --groupp-dark: #07140F;
    --groupp-dark2: #0E1E17;
    --groupp-white: #FFFFFF;
    --groupp-transition: .45s cubic-bezier(.22,.61,.36,1);
}

/*==========================================================
    HEADER
==========================================================*/

.groupp-header {
    position: fixed;
    top: 22px;
    left: 0;
    width: 100%;
    z-index: 9999;
    padding: 0 35px;
    pointer-events: none;
    transition: .4s;
}

/*==========================================================
    NAVBAR
==========================================================*/

.groupp-navbar {
    position: relative;
    width: 100%;
    max-width: 1600px;
    margin: auto;
    min-height: 92px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 34px;
    border-radius: 28px;
    pointer-events: auto;
    overflow: hidden;
    background: linear-gradient( 135deg, rgba(7,20,15,.78), rgba(10,28,20,.55));
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 30px 70px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.08);
    transition: var(--groupp-transition);
}

    /*==========================================================
    TOP GOLD LINE
==========================================================*/

    .groupp-navbar::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient( 90deg, transparent, var(--groupp-gold), transparent);
    }

    /*==========================================================
    GREEN GLOW
==========================================================*/

    .groupp-navbar::after {
        content: "";
        position: absolute;
        width: 300px;
        height: 300px;
        top: -180px;
        left: -150px;
        border-radius: 50%;
        background: radial-gradient( rgba(46,184,114,.18), transparent 70%);
        filter: blur(20px);
        pointer-events: none;
    }

/*==========================================================
    LOGO
==========================================================*/

.groupp-logo {
    display: flex;
    align-items: center;
    gap: 18px;
    text-decoration: none;
    flex-shrink: 0;
    z-index: 5;
}

/*==========================================================
    LOGO IMAGE
==========================================================*/

.groupp-logo-image {
    width: 62px;
    height: 62px;
    object-fit: contain;
    transition: var(--groupp-transition);
}

.groupp-logo:hover .groupp-logo-image {
    transform: rotate(-8deg) scale(1.08);
}

/*==========================================================
    LOGO TEXT
==========================================================*/

.groupp-logo-text {
    display: flex;
    flex-direction: column;
}

    .groupp-logo-text h2 {
        margin: 0;
        font-size: 28px;
        font-weight: 700;
        letter-spacing: 3px;
        color: var(--groupp-white);
        font-family: "Cormorant Garamond",serif;
        line-height: 1;
    }

    .groupp-logo-text span {
        margin-top: 5px;
        color: var(--groupp-gold);
        letter-spacing: 7px;
        font-size: 11px;
        text-transform: uppercase;
    }

/*==========================================================
    RIGHT SIDE
==========================================================*/

.groupp-nav-right {
    display: flex;
    align-items: center;
    gap: 18px;
}

/*==========================================================
    SEARCH BUTTON
==========================================================*/

.groupp-search-btn {
    width: 52px;
    height: 52px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    color: #ffffff;
    cursor: pointer;
    transition: var(--groupp-transition);
}

    .groupp-search-btn:hover {
        transform: translateY(-4px);
        color: var(--groupp-gold);
        border-color: rgba(216,177,91,.45);
        box-shadow: 0 0 25px rgba(216,177,91,.18);
    }

/*==========================================================
    CTA BUTTON
==========================================================*/

.groupp-cta-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 28px;
    border-radius: 60px;
    overflow: hidden;
    text-decoration: none;
    color: #ffffff;
    font-weight: 600;
    border: 1px solid rgba(216,177,91,.35);
    background: linear-gradient( 135deg, rgba(216,177,91,.18), rgba(46,184,114,.15));
    transition: var(--groupp-transition);
}

    .groupp-cta-btn svg {
        width: 18px;
        height: 18px;
        stroke: currentColor;
    }

    .groupp-cta-btn::before {
        content: "";
        position: absolute;
        top: 0;
        left: -130%;
        width: 50%;
        height: 100%;
        transform: skewX(-25deg);
        background: linear-gradient( transparent, rgba(255,255,255,.35), transparent);
        transition: 1s;
    }

    .groupp-cta-btn:hover::before {
        left: 160%;
    }

    .groupp-cta-btn:hover {
        transform: translateY(-4px);
        color: #fff;
        border-color: var(--groupp-gold);
        box-shadow: 0 15px 40px rgba(216,177,91,.25);
    }

/*==========================================================
    MOBILE BUTTON
==========================================================*/

.groupp-mobile-toggle {
    display: none;
    width: 50px;
    height: 50px;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

    .groupp-mobile-toggle span {
        width: 28px;
        height: 2px;
        background: #fff;
        transition: .35s;
    }

/*==========================================================
    SCROLLED NAVBAR
==========================================================*/

.groupp-header.groupp-scrolled {
    top: 10px;
}

    .groupp-header.groupp-scrolled .groupp-navbar {
        min-height: 82px;
        background: rgba(5,18,14,.94);
        border-color: rgba(216,177,91,.15);
        box-shadow: 0 25px 60px rgba(0,0,0,.55);
    }

/*==========================================================
    OXIAURA GROUP
    PART 1.3A.2 – MENU, HOVER EFFECTS & RESPONSIVE NAVIGATION
==========================================================*/

/*==========================================================
    NAVIGATION MENU
==========================================================*/

.groupp-nav-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    flex: 1;
}

/*==========================================================
    NAVIGATION ITEM
==========================================================*/

.groupp-nav-item {
    position: relative;
}

/*==========================================================
    NAVIGATION LINK
==========================================================*/

.groupp-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 18px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .5px;
    text-decoration: none;
    border-radius: 14px;
    transition: var(--groupp-transition);
    overflow: hidden;
}

    /*==========================================================
    BACKGROUND HOVER
==========================================================*/

    .groupp-nav-link::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 14px;
        background: linear-gradient( 135deg, rgba(46,184,114,.12), rgba(216,177,91,.10));
        opacity: 0;
        transform: scale(.9);
        transition: var(--groupp-transition);
    }

    .groupp-nav-link:hover::before {
        opacity: 1;
        transform: scale(1);
    }

    /*==========================================================
    GOLD UNDERLINE
==========================================================*/

    .groupp-nav-link::after {
        content: "";
        position: absolute;
        left: 18px;
        right: 18px;
        bottom: 10px;
        height: 2px;
        border-radius: 20px;
        background: linear-gradient( 90deg, transparent, var(--groupp-gold), transparent);
        transform: scaleX(0);
        transform-origin: center;
        transition: .35s ease;
    }

    .groupp-nav-link:hover::after {
        transform: scaleX(1);
    }

/*==========================================================
    ACTIVE MENU
==========================================================*/

.groupp-active {
    color: var(--groupp-gold-light);
}

    .groupp-active::after {
        transform: scaleX(1);
    }

    .groupp-active::before {
        opacity: 1;
    }

/*==========================================================
    TEXT COLOR HOVER
==========================================================*/

.groupp-nav-link:hover {
    color: var(--groupp-gold-light);
    transform: translateY(-2px);
}

/*==========================================================
    SEARCH BUTTON
==========================================================*/

.groupp-search-btn svg {
    transition: .35s;
}

.groupp-search-btn:hover svg {
    transform: scale(1.15) rotate(-8deg);
}

/*==========================================================
    CTA BUTTON
==========================================================*/

.groupp-cta-btn {
    white-space: nowrap;
}

    .groupp-cta-btn svg {
        transition: .35s;
    }

    .groupp-cta-btn:hover svg {
        transform: translateX(6px);
    }

/*==========================================================
    HAMBURGER
==========================================================*/

.groupp-mobile-toggle {
    position: relative;
    z-index: 1001;
}

    .groupp-mobile-toggle span {
        display: block;
        width: 28px;
        height: 2px;
        border-radius: 10px;
        background: #ffffff;
        transition: .35s;
    }

        .groupp-mobile-toggle span:nth-child(2) {
            width: 22px;
        }

    .groupp-mobile-toggle:hover span {
        background: var(--groupp-gold);
    }

/*==========================================================
    LARGE SCREEN
==========================================================*/

@media (max-width:1200px) {

    .groupp-nav-link {
        padding: 14px 14px;
        font-size: 14px;
    }

    .groupp-navbar {
        padding: 0 24px;
    }
}

/*==========================================================
    TABLET
==========================================================*/

@media (max-width:992px) {

    .groupp-mobile-toggle {
        display: flex;
    }

    .groupp-nav-right {
        display: none;
    }

    .groupp-nav-menu {
        position: absolute;
        top: 110px;
        left: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        padding: 30px;
        border-radius: 24px;
        background: linear-gradient( 180deg, rgba(8,20,15,.97), rgba(8,26,18,.97));
        backdrop-filter: blur(30px);
        border: 1px solid rgba(255,255,255,.08);
        box-shadow: 0 30px 80px rgba(0,0,0,.45);
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px);
        transition: .45s;
    }

        .groupp-nav-menu.groupp-open {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

    .groupp-nav-item {
        width: 100%;
    }

    .groupp-nav-link {
        width: 100%;
        padding: 18px;
        justify-content: center;
        font-size: 16px;
    }
}

/*==========================================================
    MOBILE
==========================================================*/

@media (max-width:768px) {

    .groupp-header {
        padding: 0 18px;
    }

    .groupp-navbar {
        min-height: 78px;
        padding: 0 20px;
        border-radius: 20px;
    }

    .groupp-logo-image {
        width: 48px;
        height: 48px;
    }

    .groupp-logo-text h2 {
        font-size: 22px;
    }

    .groupp-logo-text span {
        font-size: 9px;
        letter-spacing: 5px;
    }

    .groupp-nav-menu {
        top: 92px;
        padding: 25px;
    }
}

/*==========================================================
    SMALL MOBILE
==========================================================*/

@media (max-width:480px) {

    .groupp-navbar {
        padding: 0 16px;
    }

    .groupp-logo {
        gap: 12px;
    }

    .groupp-logo-image {
        width: 42px;
        height: 42px;
    }

    .groupp-logo-text h2 {
        font-size: 18px;
    }

    .groupp-logo-text span {
        font-size: 8px;
        letter-spacing: 4px;
    }

    .groupp-nav-link {
        font-size: 15px;
        padding: 16px;
    }
}

/*==========================================================
    ACCESSIBILITY
==========================================================*/

.groupp-nav-link:focus-visible,
.groupp-search-btn:focus-visible,
.groupp-cta-btn:focus-visible,
.groupp-mobile-toggle:focus-visible {
    outline: 2px solid var(--groupp-gold);
    outline-offset: 4px;
    border-radius: 12px;
}

/*==========================================================
    REDUCED MOTION
==========================================================*/

@media (prefers-reduced-motion:reduce) {

    .groupp-nav-link,
    .groupp-search-btn,
    .groupp-cta-btn,
    .groupp-mobile-toggle span {
        transition: none;
    }
}

/*==========================================================
    OXIAURA GROUP
    PART 1.3B.1 – HERO SECTION LAYOUT & BACKGROUND
==========================================================*/

/*==========================================================
    HERO SECTION
==========================================================*/

.groupp-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 170px 0 170px;
    background: #07140f;
}

/*==========================================================
    HERO BACKGROUND
==========================================================*/

.groupp-hero-bg {
    position: absolute;
    inset: 0;
    background-image: url("../images/grouphero.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 1;
    transform: scale(1.02);
}

/*==========================================================
    DARK OVERLAY
==========================================================*/

.groupp-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient( 90deg, rgba(5,18,12,.88) 0%, rgba(5,18,12,.72) 22%, rgba(5,18,12,.35) 45%, rgba(5,18,12,.15) 65%, rgba(5,18,12,.55) 100%);
}

/*==========================================================
    TOP GRADIENT
==========================================================*/

.groupp-hero::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 220px;
    z-index: 3;
    background: linear-gradient( to bottom, rgba(4,10,8,.95), transparent );
}

/*==========================================================
    BOTTOM GRADIENT
==========================================================*/

.groupp-hero::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 220px;
    z-index: 3;
    background: linear-gradient( to top, #07140f, transparent );
}

/*==========================================================
    MAIN CONTAINER
==========================================================*/

.groupp-container {
    width: min(92%,1550px);
    margin: auto;
    position: relative;
    z-index: 10;
}

/*==========================================================
    HERO GRID
==========================================================*/

.groupp-hero-content {
    display: grid;
    grid-template-columns: 48% 52%;
    align-items: center;
    gap: 40px;
    min-height: 700px;
}

/*==========================================================
    LEFT CONTENT
==========================================================*/

.groupp-hero-left {
    max-width: 700px;
    position: relative;
    z-index: 20;
}

/*==========================================================
    RIGHT SIDE
==========================================================*/

.groupp-hero-right {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 650px;
}

/*==========================================================
    FLOATING BADGE
==========================================================*/

.groupp-hero-badge {
    position: absolute;
    right: 30px;
    bottom: 90px;
    padding: 18px 30px;
    border-radius: 60px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 20px 45px rgba(0,0,0,.30);
}

    .groupp-hero-badge span {
        color: #ffffff;
        font-size: 14px;
        letter-spacing: 2px;
        text-transform: uppercase;
    }

/*==========================================================
    GREEN GLOW
==========================================================*/

.groupp-hero-bg::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    left: -220px;
    top: 100px;
    border-radius: 50%;
    background: radial-gradient( rgba(46,184,114,.30), transparent 70% );
    filter: blur(60px);
}

/*==========================================================
    BLUE GLOW
==========================================================*/

.groupp-hero-bg::after {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    right: -180px;
    top: 160px;
    border-radius: 50%;
    background: radial-gradient( rgba(47,107,255,.18), transparent 70% );
    filter: blur(70px);
}

/*==========================================================
    FLOATING LEAVES
==========================================================*/

.groupp-floating-leaf {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 5;
    opacity: .30;
    pointer-events: none;
}

.groupp-leaf-1 {
    width: 70px;
    height: 70px;
    top: 20%;
    left: 8%;
    background-image: url("../images/hero/leaf.png");
}

.groupp-leaf-2 {
    width: 45px;
    height: 45px;
    bottom: 22%;
    left: 18%;
    background-image: url("../images/hero/leaf.png");
}

.groupp-leaf-3 {
    width: 65px;
    height: 65px;
    top: 18%;
    right: 10%;
    background-image: url("../images/hero/leaf.png");
}

/*==========================================================
    BACKGROUND LIGHT
==========================================================*/

.groupp-hero-light {
    position: absolute;
    width: 800px;
    height: 800px;
    right: -250px;
    top: -180px;
    border-radius: 50%;
    background: radial-gradient( rgba(216,177,91,.08), transparent 70% );
    filter: blur(80px);
    z-index: 2;
}

/*==========================================================
    RESPONSIVE
==========================================================*/

@media (max-width:1200px) {

    .groupp-hero {
        padding: 160px 0 140px;
    }

    .groupp-hero-content {
        grid-template-columns: 1fr;
        gap: 60px;
        text-align: center;
    }

    .groupp-hero-left {
        margin: auto;
    }

    .groupp-hero-right {
        justify-content: center;
        min-height: 320px;
    }

    .groupp-hero-badge {
        position: relative;
        right: auto;
        bottom: auto;
    }
}

@media (max-width:992px) {

    .groupp-hero {
        min-height: auto;
        padding: 150px 0 120px;
    }

    .groupp-hero-content {
        min-height: auto;
    }

    .groupp-hero-overlay {
        background: linear-gradient( 180deg, rgba(6,18,12,.88), rgba(6,18,12,.65), rgba(6,18,12,.80) );
    }
}

@media (max-width:768px) {

    .groupp-container {
        width: 94%;
    }

    .groupp-hero {
        padding: 130px 0 100px;
    }

    .groupp-hero-badge {
        padding: 15px 22px;
    }

        .groupp-hero-badge span {
            font-size: 12px;
            letter-spacing: 1px;
        }

    .groupp-leaf-1,
    .groupp-leaf-2,
    .groupp-leaf-3 {
        display: none;
    }
}

@media (max-width:576px) {

    .groupp-hero {
        padding: 120px 0 90px;
    }

    .groupp-hero-bg {
        background-position: 70% center;
    }

    .groupp-hero-right {
        display: none;
    }
}

/*==========================================================
    OXIAURA GROUP
    PART 1.3B.2 – HERO CONTENT, BUTTONS,
    STATISTICS & INDUSTRY STRIP
==========================================================*/

/*==========================================================
    HERO TAG
==========================================================*/

.groupp-tag {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    margin-bottom: 30px;
    border-radius: 50px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(216,177,91,.25);
    backdrop-filter: blur(20px);
    color: var(--groupp-gold);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

    .groupp-tag::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--groupp-green);
        box-shadow: 0 0 15px rgba(46,184,114,.8);
    }

/*==========================================================
    HERO TITLE
==========================================================*/

.groupp-title {
    margin: 0 0 28px;
    font-family: "Cormorant Garamond",serif;
    font-size: 72px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -1px;
}

.groupp-title-white {
    color: #ffffff;
}

.groupp-title-gold {
    background: linear-gradient( 90deg, #f8e6a4, #d8b15b, #f5d57a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/*==========================================================
    DESCRIPTION
==========================================================*/

.groupp-description {
    max-width: 620px;
    margin-bottom: 45px;
    color: rgba(255,255,255,.82);
    font-size: 18px;
    line-height: 34px;
}

/*==========================================================
    BUTTONS
==========================================================*/

.groupp-hero-buttons {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 70px;
    margin-top: -30px;
}

.groupp-primary-btn,
.groupp-secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-decoration: none;
    transition: .4s ease;
    font-weight: 600;
}

.groupp-primary-btn {
    padding: 18px 34px;
    border-radius: 60px;
    color: #fff;
    background: linear-gradient( 135deg, var(--groupp-green), #15844d);
    box-shadow: 0 20px 40px rgba(46,184,114,.25);
}

    .groupp-primary-btn:hover {
        transform: translateY(-5px);
        box-shadow: 0 25px 55px rgba(46,184,114,.35);
    }

    .groupp-primary-btn svg {
        width: 18px;
        height: 18px;
        stroke: #fff;
        fill: none;
        stroke-width: 2;
    }

.groupp-secondary-btn {
    padding: 18px 34px;
    border-radius: 60px;
    color: #fff;
    border: 1px solid rgba(216,177,91,.35);
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(18px);
}

    .groupp-secondary-btn:hover {
        background: rgba(255,255,255,.12);
        border-color: var(--groupp-gold);
        transform: translateY(-5px);
    }

/*==========================================================
    STATISTICS
==========================================================*/

.groupp-stats {
    display: flex;
    align-items: center;
    gap: 55px;
}

.groupp-stat {
    position: relative;
}

    .groupp-stat:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 10px;
        right: -28px;
        width: 1px;
        height: 55px;
        background: rgba(255,255,255,.15);
    }

    .groupp-stat h3 {
        margin: 0 0 8px;
        color: var(--groupp-green-light);
        font-size: 42px;
        font-weight: 700;
    }

    .groupp-stat span {
        color: rgba(255,255,255,.72);
        font-size: 15px;
        letter-spacing: .5px;
    }

/*==========================================================
    INDUSTRY STRIP
==========================================================*/

.groupp-industries-strip {
    position: absolute;
    left: 50%;
    bottom: 35px;
    transform: translateX(-50%);
    width: min(94%,1500px);
    padding: 20px;
    border-radius: 28px;
    background: rgba(8,22,16,.78);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 25px 60px rgba(0,0,0,.35);
    z-index: 20;
}

.groupp-strip-container {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: 18px;
}

.groupp-strip-item {
    text-align: center;
    padding: 18px 14px;
    border-radius: 18px;
    transition: .35s;
}

    .groupp-strip-item:hover {
        background: rgba(255,255,255,.06);
        transform: translateY(-8px);
    }

    .groupp-strip-item img {
        width: 52px;
        height: 52px;
        object-fit: contain;
        margin-bottom: 14px;
    }

    .groupp-strip-item h4 {
        margin: 0 0 8px;
        color: #ffffff;
        font-size: 16px;
        font-weight: 600;
    }

    .groupp-strip-item p {
        margin: 0;
        color: rgba(255,255,255,.65);
        font-size: 13px;
        line-height: 20px;
    }

/*==========================================================
    SCROLL INDICATOR
==========================================================*/

.groupp-scroll-down {
    position: absolute;
    left: 50%;
    bottom: 160px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    text-decoration: none;
    z-index: 30;
}

    .groupp-scroll-down span {
        font-size: 12px;
        letter-spacing: 2px;
        text-transform: uppercase;
    }

.groupp-scroll-mouse {
    width: 30px;
    height: 48px;
    border: 2px solid rgba(255,255,255,.35);
    border-radius: 30px;
    position: relative;
}

.groupp-scroll-wheel {
    position: absolute;
    left: 50%;
    top: 8px;
    transform: translateX(-50%);
    width: 5px;
    height: 10px;
    border-radius: 20px;
    background: var(--groupp-gold);
}

/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:1200px) {

    .groupp-title {
        font-size: 58px;
    }

    .groupp-description {
        margin-left: auto;
        margin-right: auto;
    }

    .groupp-hero-buttons {
        justify-content: center;
    }

    .groupp-stats {
        justify-content: center;
    }

    .groupp-strip-container {
        grid-template-columns: repeat(4,1fr);
    }
}

@media(max-width:992px) {

    .groupp-title {
        font-size: 48px;
    }

    .groupp-stats {
        flex-wrap: wrap;
        gap: 30px;
    }

    .groupp-stat::after {
        display: none;
    }

    .groupp-strip-container {
        grid-template-columns: repeat(3,1fr);
    }
}

@media(max-width:768px) {

    .groupp-title {
        font-size: 40px;
    }

    .groupp-description {
        font-size: 16px;
        line-height: 30px;
    }

    .groupp-hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .groupp-primary-btn,
    .groupp-secondary-btn {
        width: 100%;
    }

    .groupp-strip-container {
        grid-template-columns: repeat(2,1fr);
    }

    .groupp-scroll-down {
        display: none;
    }
}

@media(max-width:576px) {

    .groupp-title {
        font-size: 34px;
    }

    .groupp-tag {
        font-size: 11px;
        padding: 12px 20px;
    }

    .groupp-strip-container {
        grid-template-columns: 1fr;
    }

    .groupp-stats {
        flex-direction: column;
        text-align: center;
    }
}
/*==========================================================
    OXIAURA GROUP
    PART 1.3C.1 – HERO ANIMATIONS & KEYFRAMES
==========================================================*/

/*==========================================================
    HERO CONTENT ANIMATION
==========================================================*/

.groupp-tag {
    opacity: 0;
    animation: grouppFadeUp .8s ease forwards;
}

.groupp-title {
    opacity: 0;
    animation: grouppFadeUp 1s ease forwards;
    animation-delay: .2s;
}

.groupp-description {
    opacity: 0;
    animation: grouppFadeUp 1.2s ease forwards;
    animation-delay: .4s;
}

.groupp-hero-buttons {
    opacity: 0;
    animation: grouppFadeUp 1.3s ease forwards;
    animation-delay: .6s;
}

.groupp-stats {
    opacity: 0;
    animation: grouppFadeUp 1.4s ease forwards;
    animation-delay: .8s;
}

.groupp-hero-badge {
    opacity: 0;
    animation: grouppFadeRight 1.3s ease forwards;
    animation-delay: 1s;
}

.groupp-industries-strip {
    opacity: 0;
    animation: grouppFadeBottom 1.5s ease forwards;
    animation-delay: 1.2s;
}

/*==========================================================
    HERO BACKGROUND
==========================================================*/

.groupp-hero-bg {
    animation: grouppHeroZoom 14s ease-in-out infinite alternate;
}

/*==========================================================
    FLOATING LEAVES
==========================================================*/

.groupp-leaf-1 {
    animation: grouppLeafOne 8s ease-in-out infinite;
}

.groupp-leaf-2 {
    animation: grouppLeafTwo 10s ease-in-out infinite;
}

.groupp-leaf-3 {
    animation: grouppLeafThree 12s ease-in-out infinite;
}

/*==========================================================
    GLOW EFFECTS
==========================================================*/

.groupp-hero-bg::before {
    animation: grouppGlowGreen 8s ease-in-out infinite;
}

.groupp-hero-bg::after {
    animation: grouppGlowBlue 10s ease-in-out infinite;
}

/*==========================================================
    TAG PULSE
==========================================================*/

.groupp-tag::before {
    animation: grouppPulse 2.5s infinite;
}

/*==========================================================
    BUTTONS
==========================================================*/

.groupp-primary-btn,
.groupp-secondary-btn {
    position: relative;
    overflow: hidden;
}

    .groupp-primary-btn::before,
    .groupp-secondary-btn::before {
        content: "";
        position: absolute;
        left: -120%;
        top: 0;
        width: 50%;
        height: 100%;
        transform: skewX(-25deg);
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.45), transparent );
    }

    .groupp-primary-btn:hover::before,
    .groupp-secondary-btn:hover::before {
        animation: grouppButtonShine .9s forwards;
    }

    /*==========================================================
    BUTTON HOVER
==========================================================*/

    .groupp-primary-btn:hover {
        transform: translateY(-6px) scale(1.02);
    }

    .groupp-secondary-btn:hover {
        transform: translateY(-6px);
    }

/*==========================================================
    STATISTICS
==========================================================*/

.groupp-stat {
    transition: .35s;
}

    .groupp-stat:hover {
        transform: translateY(-8px);
    }

        .groupp-stat:hover h3 {
            color: var(--groupp-gold);
        }

/*==========================================================
    INDUSTRY CARDS
==========================================================*/

.groupp-strip-item {
    position: relative;
    overflow: hidden;
}

    .groupp-strip-item::before {
        content: "";
        position: absolute;
        left: -120%;
        top: 0;
        width: 50%;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.18), transparent );
        transform: skewX(-25deg);
    }

    .groupp-strip-item:hover::before {
        animation: grouppButtonShine .9s forwards;
    }

    .groupp-strip-item img {
        transition: .4s;
    }

    .groupp-strip-item:hover img {
        transform: scale(1.12) rotate(6deg);
    }

/*==========================================================
    SCROLL INDICATOR
==========================================================*/

.groupp-scroll-wheel {
    animation: grouppScrollWheel 2s infinite;
}

/*==========================================================
    BADGE
==========================================================*/

.groupp-hero-badge {
    transition: .4s;
}

    .groupp-hero-badge:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 60px rgba(0,0,0,.35);
    }

/*==========================================================
    KEYFRAMES
==========================================================*/

@keyframes grouppFadeUp {

    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes grouppFadeRight {

    0% {
        opacity: 0;
        transform: translateX(60px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes grouppFadeBottom {

    0% {
        opacity: 0;
        transform: translateY(80px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes grouppHeroZoom {

    0% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1.10);
    }
}

@keyframes grouppLeafOne {

    0%,100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-18px) rotate(8deg);
    }
}

@keyframes grouppLeafTwo {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(16px) rotate(-10deg);
    }
}

@keyframes grouppLeafThree {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-22px) rotate(10deg);
    }
}

@keyframes grouppGlowGreen {

    0%,100% {
        opacity: .25;
        transform: scale(1);
    }

    50% {
        opacity: .45;
        transform: scale(1.15);
    }
}

@keyframes grouppGlowBlue {

    0%,100% {
        opacity: .18;
        transform: scale(1);
    }

    50% {
        opacity: .35;
        transform: scale(1.12);
    }
}

@keyframes grouppPulse {

    0% {
        box-shadow: 0 0 0 0 rgba(46,184,114,.6);
    }

    70% {
        box-shadow: 0 0 0 14px rgba(46,184,114,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(46,184,114,0);
    }
}

@keyframes grouppButtonShine {

    0% {
        left: -120%;
    }

    100% {
        left: 170%;
    }
}

@keyframes grouppScrollWheel {

    0% {
        top: 8px;
        opacity: 1;
    }

    100% {
        top: 26px;
        opacity: 0;
    }
}
/*==========================================================
    OXIAURA GROUP
    PART 1.3C.2 – ADVANCED RESPONSIVE & ACCESSIBILITY
==========================================================*/

/*==========================================================
    ULTRA WIDE SCREENS
==========================================================*/

@media (min-width:1800px) {

    .groupp-container {
        max-width: 1700px;
    }

    .groupp-title {
        font-size: 92px;
    }

    .groupp-description {
        font-size: 21px;
        line-height: 40px;
    }

    .groupp-hero-content {
        gap: 90px;
    }

    .groupp-industries-strip {
        max-width: 1650px;
    }
}

/*==========================================================
    LARGE DESKTOP
==========================================================*/

@media (max-width:1600px) {

    .groupp-container {
        width: 94%;
    }

    .groupp-title {
        font-size: 76px;
    }

    .groupp-description {
        max-width: 600px;
    }
}

/*==========================================================
    LAPTOP
==========================================================*/

@media (max-width:1400px) {

    .groupp-title {
        font-size: 68px;
    }

    .groupp-description {
        font-size: 17px;
    }

    .groupp-stats {
        gap: 40px;
    }

    .groupp-strip-container {
        gap: 14px;
    }
}

/*==========================================================
    SMALL LAPTOP
==========================================================*/

@media (max-width:1200px) {

    .groupp-hero {
        text-align: center;
    }

    .groupp-title {
        font-size: 58px;
    }

    .groupp-description {
        margin: auto;
    }

    .groupp-hero-buttons {
        justify-content: center;
    }

    .groupp-stats {
        justify-content: center;
    }

    .groupp-industries-strip {
        position: relative;
        bottom: auto;
        margin-top: 80px;
        transform: none;
        left: auto;
    }
}

/*==========================================================
    TABLET
==========================================================*/

@media (max-width:992px) {

    .groupp-hero {
        padding-top: 150px;
    }

    .groupp-title {
        font-size: 48px;
    }

    .groupp-description {
        font-size: 16px;
    }

    .groupp-stats {
        flex-wrap: wrap;
        gap: 30px;
    }

    .groupp-strip-container {
        grid-template-columns: repeat(3,1fr);
    }
}

/*==========================================================
    MOBILE
==========================================================*/

@media (max-width:768px) {

    .groupp-title {
        font-size: 40px;
        line-height: 1.15;
    }

    .groupp-description {
        font-size: 15px;
        line-height: 30px;
    }

    .groupp-tag {
        padding: 12px 20px;
        font-size: 11px;
    }

    .groupp-hero-buttons {
        flex-direction: column;
        width: 100%;
    }

    .groupp-primary-btn,
    .groupp-secondary-btn {
        width: 100%;
    }

    .groupp-stats {
        flex-direction: column;
        gap: 20px;
    }

    .groupp-stat::after {
        display: none;
    }

    .groupp-strip-container {
        grid-template-columns: repeat(2,1fr);
    }
}

/*==========================================================
    SMALL MOBILE
==========================================================*/

@media (max-width:576px) {

    .groupp-header {
        top: 10px;
    }

    .groupp-title {
        font-size: 34px;
    }

    .groupp-description {
        font-size: 14px;
        line-height: 28px;
    }

    .groupp-strip-container {
        grid-template-columns: 1fr;
    }

    .groupp-strip-item {
        padding: 20px;
    }

    .groupp-scroll-down {
        display: none;
    }
}

/*==========================================================
    EXTRA SMALL DEVICES
==========================================================*/

@media (max-width:360px) {

    .groupp-title {
        font-size: 30px;
    }

    .groupp-tag {
        font-size: 10px;
    }

    .groupp-description {
        font-size: 13px;
    }

    .groupp-primary-btn,
    .groupp-secondary-btn {
        padding: 16px 24px;
        font-size: 14px;
    }
}

/*==========================================================
    LANDSCAPE MOBILE
==========================================================*/

@media (max-height:650px) and (orientation:landscape) {

    .groupp-hero {
        min-height: auto;
        padding: 140px 0 80px;
    }

    .groupp-industries-strip {
        position: relative;
        margin-top: 60px;
    }

    .groupp-scroll-down {
        display: none;
    }
}

/*==========================================================
    TOUCH DEVICES
==========================================================*/

@media (hover:none) {

    .groupp-primary-btn:hover,
    .groupp-secondary-btn:hover,
    .groupp-strip-item:hover,
    .groupp-stat:hover,
    .groupp-nav-link:hover {
        transform: none;
    }
}

/*==========================================================
    HIGH DPI DISPLAYS
==========================================================*/

@media (-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi) {

    .groupp-logo-image,
    .groupp-strip-item img {
        image-rendering: auto;
    }
}

/*==========================================================
    REDUCED MOTION
==========================================================*/

@media (prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/*==========================================================
    KEYBOARD ACCESSIBILITY
==========================================================*/

.groupp-nav-link:focus-visible,
.groupp-primary-btn:focus-visible,
.groupp-secondary-btn:focus-visible,
.groupp-cta-btn:focus-visible,
.groupp-search-btn:focus-visible,
.groupp-mobile-toggle:focus-visible {
    outline: 3px solid var(--groupp-gold);
    outline-offset: 4px;
    border-radius: 12px;
}

/*==========================================================
    TEXT SELECTION
==========================================================*/

::selection {
    background: var(--groupp-green);
    color: #ffffff;
}

::-moz-selection {
    background: var(--groupp-green);
    color: #ffffff;
}

/*==========================================================
    SMOOTH SCROLLING
==========================================================*/

html {
    scroll-behavior: smooth;
}

/*==========================================================
    CUSTOM SCROLLBAR
==========================================================*/

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #08120d;
}

::-webkit-scrollbar-thumb {
    border-radius: 30px;
    background: linear-gradient( 180deg, var(--groupp-green), var(--groupp-gold) );
}

    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient( 180deg, var(--groupp-green-light), var(--groupp-gold-light) );
    }

/*==========================================================
    IMAGE OPTIMIZATION
==========================================================*/

img {
    max-width: 100%;
    display: block;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
}

/*==========================================================
    BUTTON IMPROVEMENTS
==========================================================*/

button {
    font: inherit;
    cursor: pointer;
}

    button:disabled {
        opacity: .6;
        cursor: not-allowed;
    }

/*==========================================================
    LINK TRANSITIONS
==========================================================*/

a {
    transition: color .35s ease, background .35s ease, border-color .35s ease, transform .35s ease;
}

/*==========================================================
    END OF PART 1.3C.2


==========================================================*/


/*=========================================================
    OXIAURA SOFT LINK (PVT) LTD.
    PART 1.3A.1
    NAVIGATION LAYOUT & VARIABLES
==========================================================*/

/*=========================================================
    GOOGLE FONTS
=========================================================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/*=========================================================
    ROOT VARIABLES
=========================================================*/

:root {
    /* Brand Colors */

    --soft-primary: #0F6FFF;
    --soft-primary-dark: #084CC8;
    --soft-primary-light: #4DA8FF;
    --soft-orange: #FF8F1F;
    --soft-orange-light: #FFB347;
    --soft-gold: #D8B15A;
    --soft-gold-light: #F6D88B;
    --soft-dark: #040A16;
    --soft-dark-2: #091325;
    --soft-dark-3: #0F1D36;
    --soft-white: #FFFFFF;
    --soft-text: #D7E0EF;
    --soft-text-light: #A8B6CC;
    /* Glass */

    --soft-glass: rgba(255,255,255,.08);
    --soft-glass-border: rgba(255,255,255,.10);
    /* Shadows */

    --soft-shadow-lg: 0 25px 70px rgba(0,0,0,.30);
    --soft-shadow-md: 0 15px 40px rgba(0,0,0,.22);
    --soft-shadow-sm: 0 8px 18px rgba(0,0,0,.16);
    /* Radius */

    --soft-radius-xl: 70px;
    --soft-radius-lg: 26px;
    --soft-radius-md: 18px;
    --soft-radius-sm: 12px;
    /* Animation */

    --soft-transition: .45s cubic-bezier(.22,1,.36,1);
    /* Container */

    --soft-container: 1400px;
}

/*=========================================================
    RESET
=========================================================*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter',sans-serif;
    background: var(--soft-dark);
    color: var(--soft-white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
}

button {
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
}

/*=========================================================
    CONTAINER
=========================================================*/

.soft-container {
    width: min(var(--soft-container),92%);
    margin: auto;
}

/*=========================================================
    HEADER
=========================================================*/

.soft-header {
    position: fixed;
    top: 26px;
    left: 0;
    width: 100%;
    z-index: 9999;
    pointer-events: none;
}

/*=========================================================
    NAVIGATION
=========================================================*/

.soft-navbar {
    width: min(1420px,94%);
    height: 86px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px 0 28px;
    border-radius: 80px;
    pointer-events: auto;
    position: relative;
    overflow: hidden;
    background: linear-gradient( 135deg, rgba(255,255,255,.10), rgba(255,255,255,.05) );
    border: 1px solid var(--soft-glass-border);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: var(--soft-shadow-lg);
    transition: var(--soft-transition);
}

    /*=========================================================
    GLASS SHINE
=========================================================*/

    .soft-navbar::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 120deg, transparent 0%, rgba(255,255,255,.10) 40%, transparent 75% );
        opacity: .65;
        pointer-events: none;
    }

    /*=========================================================
    BOTTOM GLOW
=========================================================*/

    .soft-navbar::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -80px;
        transform: translateX(-50%);
        width: 70%;
        height: 140px;
        border-radius: 50%;
        background: radial-gradient( rgba(15,111,255,.18), transparent 72% );
        filter: blur(35px);
        pointer-events: none;
    }

/*=========================================================
    LOGO
=========================================================*/

.soft-logo {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

    .soft-logo img {
        width: 56px;
        height: 56px;
        object-fit: contain;
        transition: var(--soft-transition);
    }

.soft-logo-text {
    display: flex;
    flex-direction: column;
}

.soft-logo-title {
    font-family: 'Space Grotesk',sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .8px;
    color: #ffffff;
}

.soft-logo-subtitle {
    margin-top: 2px;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--soft-gold);
}

/*=========================================================
    MENU
=========================================================*/

.soft-menu {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .soft-menu li {
        position: relative;
    }

        .soft-menu li a {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 48px;
            padding: 0 18px;
            border-radius: 40px;
            color: var(--soft-text);
            font-size: 15px;
            font-weight: 500;
            transition: var(--soft-transition);
        }

/*=========================================================
    RIGHT SECTION
=========================================================*/

.soft-nav-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

/*=========================================================
    SEARCH BUTTON
=========================================================*/

.soft-search-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    transition: var(--soft-transition);
}

/*=========================================================
    CTA BUTTON
=========================================================*/

.soft-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 28px;
    border-radius: 60px;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient( 135deg, var(--soft-primary), var(--soft-orange) );
    box-shadow: 0 15px 35px rgba(15,111,255,.35);
    transition: var(--soft-transition);
}

    .soft-nav-btn svg {
        transition: var(--soft-transition);
    }

/*=========================================================
    MOBILE MENU BUTTON
=========================================================*/

.soft-menu-toggle {
    display: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.08);
}

    .soft-menu-toggle span {
        width: 22px;
        height: 2px;
        border-radius: 10px;
        background: #ffffff;
    }

/*=========================================================
    SCROLLED STATE
=========================================================*/

.soft-header.soft-scrolled .soft-navbar {
    height: 78px;
    background: rgba(4,10,22,.92);
    border-color: rgba(255,255,255,.08);
    backdrop-filter: blur(30px);
}

/*=========================================================
    SELECTION
=========================================================*/

::selection {
    background: var(--soft-primary);
    color: #ffffff;
}

/*=========================================================
    END OF PART 1.3A.1
=========================================================*/
/*=========================================================
    OXIAURA SOFT LINK
    PART 1.3A.2
    LOGO • MENU • CTA BUTTON STYLING
==========================================================*/

/*=========================================================
    LOGO
==========================================================*/

.soft-logo {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 10;
    transition: var(--soft-transition);
}

    .soft-logo:hover {
        transform: translateY(-2px);
    }

    .soft-logo img {
        width: 58px;
        height: 58px;
        object-fit: contain;
        transition: all .45s ease;
        filter: drop-shadow(0 8px 18px rgba(15,111,255,.25));
    }

    .soft-logo:hover img {
        transform: rotate(-6deg) scale(1.08);
        filter: drop-shadow(0 15px 30px rgba(15,111,255,.45));
    }

/*=========================================================
    LOGO TEXT
==========================================================*/

.soft-logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.soft-logo-title {
    font-family: 'Space Grotesk',sans-serif;
    font-size: 23px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 1px;
    transition: var(--soft-transition);
}

.soft-logo-subtitle {
    margin-top: 3px;
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--soft-gold);
    transition: var(--soft-transition);
}

.soft-logo:hover .soft-logo-title {
    color: var(--soft-primary-light);
}

.soft-logo:hover .soft-logo-subtitle {
    color: var(--soft-orange);
}

/*=========================================================
    MENU
==========================================================*/

.soft-menu {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .soft-menu li {
        position: relative;
    }

        .soft-menu li a {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 48px;
            padding: 0 20px;
            border-radius: 40px;
            color: var(--soft-text);
            font-size: 15px;
            font-weight: 500;
            letter-spacing: .3px;
            transition: all .4s ease;
            overflow: hidden;
        }

            /*=========================================================
    MENU BACKGROUND
==========================================================*/

            .soft-menu li a::before {
                content: "";
                position: absolute;
                inset: 0;
                border-radius: 40px;
                background: linear-gradient( 135deg, rgba(15,111,255,.16), rgba(255,143,31,.12) );
                opacity: 0;
                transition: .35s;
            }

            .soft-menu li a:hover::before,
            .soft-menu li a.soft-active::before {
                opacity: 1;
            }

            .soft-menu li a:hover,
            .soft-menu li a.soft-active {
                color: #ffffff;
            }

            /*=========================================================
    MENU UNDERLINE
==========================================================*/

            .soft-menu li a::after {
                content: "";
                position: absolute;
                left: 50%;
                bottom: 8px;
                transform: translateX(-50%);
                width: 0;
                height: 2px;
                border-radius: 10px;
                background: linear-gradient( 90deg, var(--soft-primary), var(--soft-orange) );
                transition: all .35s ease;
            }

            .soft-menu li a:hover::after,
            .soft-menu li a.soft-active::after {
                width: 28px;
            }

/*=========================================================
    RIGHT SIDE
==========================================================*/

.soft-nav-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

/*=========================================================
    SEARCH BUTTON
==========================================================*/

.soft-search-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    color: #ffffff;
    transition: all .4s ease;
}

    .soft-search-btn:hover {
        background: rgba(15,111,255,.18);
        border-color: rgba(15,111,255,.35);
        transform: translateY(-3px);
    }

    .soft-search-btn svg {
        transition: .4s;
    }

    .soft-search-btn:hover svg {
        transform: rotate(12deg) scale(1.1);
    }

/*=========================================================
    CTA BUTTON
==========================================================*/

.soft-nav-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 54px;
    padding: 0 30px;
    border-radius: 60px;
    overflow: hidden;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .5px;
    color: #ffffff;
    background: linear-gradient( 135deg, var(--soft-primary), var(--soft-orange) );
    background-size: 220%;
    transition: all .45s ease;
    box-shadow: 0 18px 40px rgba(15,111,255,.35);
}

    /*=========================================================
    BUTTON SHINE
==========================================================*/

    .soft-nav-btn::before {
        content: "";
        position: absolute;
        left: -130%;
        top: 0;
        width: 55%;
        height: 100%;
        transform: skewX(-28deg);
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.45), transparent );
    }

    .soft-nav-btn:hover::before {
        animation: softNavShine .8s forwards;
    }

    /*=========================================================
    CTA HOVER
==========================================================*/

    .soft-nav-btn:hover {
        transform: translateY(-4px);
        background-position: right;
        box-shadow: 0 25px 50px rgba(15,111,255,.45);
    }

    .soft-nav-btn svg {
        transition: .35s;
    }

    .soft-nav-btn:hover svg {
        transform: translateX(6px);
    }

    /*=========================================================
    BUTTON GLOW
==========================================================*/

    .soft-nav-btn::after {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: 60px;
        background: linear-gradient( 90deg, rgba(15,111,255,.22), rgba(255,143,31,.18) );
        filter: blur(14px);
        z-index: -1;
    }

/*=========================================================
    KEYFRAMES
==========================================================*/

@keyframes softNavShine {

    0% {
        left: -130%;
    }

    100% {
        left: 170%;
    }
}

/*=========================================================
    END OF PART 1.3A.2
==========================================================*/
/*=========================================================
    OXIAURA SOFT LINK (PVT) LTD.
    PART 1.3A.3
    HOVER EFFECTS & ACTIVE STATES
==========================================================*/

/*=========================================================
    MENU LINK TRANSITIONS
==========================================================*/

.soft-menu li {
    position: relative;
    overflow: visible;
}

    .soft-menu li a {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        transition: color .35s ease, transform .35s ease, background .35s ease, box-shadow .35s ease;
    }

        /*=========================================================
    GLASS BACKGROUND
==========================================================*/

        .soft-menu li a::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 60px;
            background: linear-gradient( 135deg, rgba(15,111,255,.18), rgba(255,143,31,.16) );
            transform: scale(.75);
            opacity: 0;
            transition: all .35s ease;
            z-index: -2;
        }

        /*=========================================================
    GLOW
==========================================================*/

        .soft-menu li a::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 8px;
            transform: translateX(-50%);
            width: 0;
            height: 3px;
            border-radius: 20px;
            background: linear-gradient( 90deg, var(--soft-primary), var(--soft-orange), var(--soft-gold) );
            transition: .35s;
        }

    /*=========================================================
    HOVER
==========================================================*/

    .soft-menu li:hover > a {
        color: #ffffff;
        transform: translateY(-2px);
    }

        .soft-menu li:hover > a::before {
            opacity: 1;
            transform: scale(1);
        }

        .soft-menu li:hover > a::after {
            width: 34px;
        }

    /*=========================================================
    ACTIVE LINK
==========================================================*/

    .soft-menu li a.soft-active {
        color: #ffffff;
        background: linear-gradient( 135deg, rgba(15,111,255,.18), rgba(255,143,31,.14) );
        box-shadow: 0 12px 30px rgba(15,111,255,.15);
    }

        .soft-menu li a.soft-active::before {
            opacity: 1;
            transform: scale(1);
        }

        .soft-menu li a.soft-active::after {
            width: 34px;
        }

    /*=========================================================
    GOLD TOP LINE
==========================================================*/

    .soft-menu li a span {
        position: relative;
        z-index: 2;
    }

    .soft-menu li a .soft-link-line {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%) scaleX(0);
        width: 70%;
        height: 2px;
        border-radius: 20px;
        background: linear-gradient( 90deg, transparent, var(--soft-gold), transparent );
        transition: .4s;
    }

    .soft-menu li:hover .soft-link-line,
    .soft-menu li a.soft-active .soft-link-line {
        transform: translateX(-50%) scaleX(1);
    }

    /*=========================================================
    RIPPLE EFFECT
==========================================================*/

    .soft-menu li a .soft-ripple {
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgba(255,255,255,.25);
        transform: scale(0);
        pointer-events: none;
    }

    .soft-menu li:hover .soft-ripple {
        animation: softRipple .8s ease-out;
    }

/*=========================================================
    SEARCH BUTTON
==========================================================*/

.soft-search-btn {
    overflow: hidden;
    position: relative;
}

    .soft-search-btn::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: radial-gradient( rgba(255,255,255,.18), transparent 70% );
        opacity: 0;
        transition: .35s;
    }

    .soft-search-btn:hover {
        color: #ffffff;
        background: linear-gradient( 135deg, rgba(15,111,255,.18), rgba(255,143,31,.12) );
        border-color: rgba(15,111,255,.35);
        transform: translateY(-3px) rotate(5deg);
    }

        .soft-search-btn:hover::before {
            opacity: 1;
        }

        .soft-search-btn:hover svg {
            transform: scale(1.1);
        }

/*=========================================================
    CTA BUTTON
==========================================================*/

.soft-nav-btn {
    position: relative;
    overflow: hidden;
}

    .soft-nav-btn span {
        position: relative;
        z-index: 5;
    }

    .soft-nav-btn svg {
        position: relative;
        z-index: 5;
    }

    .soft-nav-btn:hover {
        transform: translateY(-5px);
        box-shadow: 0 25px 60px rgba(15,111,255,.35);
    }

    .soft-nav-btn:active {
        transform: scale(.97);
    }

/*=========================================================
    LOGO
==========================================================*/

.soft-logo {
    transition: .45s;
}

    .soft-logo:hover {
        transform: translateY(-3px);
    }

        .soft-logo:hover .soft-logo-title {
            color: var(--soft-primary-light);
        }

        .soft-logo:hover .soft-logo-subtitle {
            color: var(--soft-orange);
        }

        .soft-logo:hover img {
            transform: rotate(-5deg) scale(1.06);
        }

/*=========================================================
    NAVBAR
==========================================================*/

.soft-navbar {
    transition: .45s;
}

    .soft-navbar:hover {
        border-color: rgba(255,255,255,.15);
        box-shadow: 0 25px 70px rgba(0,0,0,.35);
    }

/*=========================================================
    SCROLL STATE
==========================================================*/

.soft-header.soft-scrolled .soft-navbar {
    background: rgba(4,10,22,.90);
    border-color: rgba(255,255,255,.08);
    backdrop-filter: blur(35px);
}

.soft-header.soft-scrolled .soft-nav-btn {
    height: 50px;
}

.soft-header.soft-scrolled .soft-menu li a {
    height: 44px;
}

/*=========================================================
    FOCUS STATES
==========================================================*/

.soft-menu li a:focus-visible,
.soft-nav-btn:focus-visible,
.soft-search-btn:focus-visible {
    outline: 2px solid var(--soft-primary);
    outline-offset: 4px;
}

/*=========================================================
    KEYFRAMES
==========================================================*/

@keyframes softRipple {

    0% {
        transform: scale(0);
        opacity: .6;
    }

    100% {
        transform: scale(18);
        opacity: 0;
    }
}

/*=========================================================
    REDUCED MOTION
==========================================================*/

@media(prefers-reduced-motion:reduce) {

    .soft-menu li a,
    .soft-nav-btn,
    .soft-search-btn,
    .soft-logo {
        transition: none;
        animation: none;
    }
}

/*=========================================================
    END OF PART 1.3A.3
==========================================================*/

/*==========================================================
    OXIAURA SOFT LINK (PVT) LTD.
    PART 1.3A.4
    MOBILE NAVIGATION & RESPONSIVE
==========================================================*/

/*==========================================================
    MOBILE MENU TOGGLE
==========================================================*/

.soft-menu-toggle {
    display: none;
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.12);
    transition: all .4s ease;
}

    .soft-menu-toggle:hover {
        background: rgba(15,111,255,.18);
        border-color: rgba(15,111,255,.35);
        transform: rotate(90deg);
    }

    .soft-menu-toggle span {
        width: 24px;
        height: 2px;
        border-radius: 20px;
        background: #ffffff;
        transition: all .35s ease;
    }

    /*==========================================================
    TOGGLE ACTIVE
==========================================================*/

    .soft-menu-toggle.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .soft-menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .soft-menu-toggle.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

/*==========================================================
    LARGE DEVICES
==========================================================*/

@media(max-width:1400px) {

    .soft-navbar {
        width: 96%;
        padding: 0 20px;
    }

    .soft-menu {
        gap: 2px;
    }

        .soft-menu li a {
            padding: 0 16px;
            font-size: 14px;
        }
}

/*==========================================================
    LAPTOP
==========================================================*/

@media(max-width:1200px) {

    .soft-navbar {
        height: 82px;
    }

    .soft-logo-title {
        font-size: 20px;
    }

    .soft-logo-subtitle {
        font-size: 10px;
    }

    .soft-menu li a {
        padding: 0 14px;
        font-size: 14px;
    }

    .soft-nav-btn {
        padding: 0 24px;
    }
}

/*==========================================================
    TABLET
==========================================================*/

@media(max-width:992px) {

    .soft-navbar {
        height: 80px;
        padding: 0 18px;
    }

    .soft-menu-toggle {
        display: flex;
    }

    .soft-menu {
        position: absolute;
        top: 105%;
        left: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 30px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-20px);
        transition: all .4s ease;
        border-radius: 30px;
        background: rgba(5,10,25,.95);
        backdrop-filter: blur(35px);
        border: 1px solid rgba(255,255,255,.08);
        box-shadow: 0 25px 60px rgba(0,0,0,.35);
    }

        .soft-menu.active {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .soft-menu li {
            width: 100%;
        }

            .soft-menu li a {
                width: 100%;
                height: 56px;
                justify-content: center;
                font-size: 16px;
                border-radius: 18px;
            }

    .soft-nav-right {
        margin-left: auto;
        margin-right: 15px;
    }
}

/*==========================================================
    MOBILE
==========================================================*/

@media(max-width:768px) {

    .soft-header {
        top: 15px;
    }

    .soft-navbar {
        height: 74px;
        border-radius: 22px;
        padding: 0 16px;
    }

    .soft-logo img {
        width: 46px;
        height: 46px;
    }

    .soft-logo-title {
        font-size: 18px;
    }

    .soft-logo-subtitle {
        font-size: 9px;
        letter-spacing: 2px;
    }

    .soft-search-btn {
        display: none;
    }

    .soft-nav-btn {
        height: 46px;
        padding: 0 20px;
        font-size: 14px;
    }

    .soft-menu {
        padding: 24px;
    }

        .soft-menu li a {
            height: 52px;
            font-size: 15px;
        }
}

/*==========================================================
    SMALL MOBILE
==========================================================*/

@media(max-width:576px) {

    .soft-navbar {
        height: 70px;
        padding: 0 14px;
    }

    .soft-logo-text {
        display: none;
    }

    .soft-nav-btn {
        display: none;
    }

    .soft-menu-toggle {
        width: 48px;
        height: 48px;
    }

    .soft-menu {
        top: 95px;
        padding: 20px;
    }

        .soft-menu li a {
            height: 50px;
            font-size: 15px;
        }
}

/*==========================================================
    EXTRA SMALL
==========================================================*/

@media(max-width:420px) {

    .soft-navbar {
        width: 95%;
    }

    .soft-menu {
        padding: 16px;
    }

        .soft-menu li a {
            font-size: 14px;
            height: 48px;
        }
}

/*==========================================================
    LANDSCAPE MOBILE
==========================================================*/

@media(max-height:600px) {

    .soft-menu {
        max-height: 70vh;
        overflow-y: auto;
    }
}

/*==========================================================
    MOBILE MENU ANIMATION
==========================================================*/

.soft-menu li {
    opacity: 0;
    transform: translateY(15px);
    transition: all .4s ease;
}

.soft-menu.active li {
    opacity: 1;
    transform: translateY(0);
}

    .soft-menu.active li:nth-child(1) {
        transition-delay: .05s;
    }

    .soft-menu.active li:nth-child(2) {
        transition-delay: .10s;
    }

    .soft-menu.active li:nth-child(3) {
        transition-delay: .15s;
    }

    .soft-menu.active li:nth-child(4) {
        transition-delay: .20s;
    }

    .soft-menu.active li:nth-child(5) {
        transition-delay: .25s;
    }

    .soft-menu.active li:nth-child(6) {
        transition-delay: .30s;
    }

    .soft-menu.active li:nth-child(7) {
        transition-delay: .35s;
    }

/*==========================================================
    TOUCH DEVICES
==========================================================*/

@media(hover:none) {

    .soft-menu li a:hover {
        transform: none;
    }

    .soft-nav-btn:hover {
        transform: none;
    }

    .soft-search-btn:hover {
        transform: none;
    }
}

/*==========================================================
    REDUCED MOTION
==========================================================*/

@media(prefers-reduced-motion:reduce) {

    .soft-menu,
    .soft-menu li,
    .soft-menu-toggle,
    .soft-navbar {
        transition: none !important;
        animation: none !important;
    }
}

/*==========================================================
    END OF PART 1.3A.4
==========================================================*/

/*==========================================================
    OXIAURA SOFT LINK (PVT) LTD.
    PART 1.3A.5
    SCROLL EFFECTS • ANIMATIONS • ACCESSIBILITY
==========================================================*/

/*==========================================================
    NAVBAR DEFAULT TRANSITION
==========================================================*/

.soft-header {
    transition: top .45s ease, transform .45s ease, opacity .45s ease;
}

.soft-navbar {
    transition: background .45s ease, border-color .45s ease, box-shadow .45s ease, height .45s ease, transform .45s ease;
}

/*==========================================================
    SCROLLED NAVBAR
==========================================================*/

.soft-header.soft-scrolled .soft-navbar {
    height: 76px;
    background: rgba(4,10,20,.92);
    border-color: rgba(255,255,255,.12);
    backdrop-filter: blur(35px);
    -webkit-backdrop-filter: blur(35px);
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

/*==========================================================
    NAVBAR HIDE
==========================================================*/

.soft-header.soft-hidden {
    transform: translateY(-140%);
}

/*==========================================================
    NAVBAR SHOW
==========================================================*/

.soft-header.soft-show {
    transform: translateY(0);
}

/*==========================================================
    LOGO ANIMATION
==========================================================*/

.soft-logo {
    animation: softLogoAppear 1s ease forwards;
}

    .soft-logo img {
        transition: transform .45s ease, filter .45s ease;
    }

    .soft-logo:hover img {
        transform: rotate(-8deg) scale(1.08);
        filter: drop-shadow( 0 12px 30px rgba(15,111,255,.35) );
    }

/*==========================================================
    MENU ENTRANCE
==========================================================*/

.soft-menu li {
    opacity: 0;
    transform: translateY(-15px);
    animation: softMenuFade .6s forwards;
}

    .soft-menu li:nth-child(1) {
        animation-delay: .15s;
    }

    .soft-menu li:nth-child(2) {
        animation-delay: .25s;
    }

    .soft-menu li:nth-child(3) {
        animation-delay: .35s;
    }

    .soft-menu li:nth-child(4) {
        animation-delay: .45s;
    }

    .soft-menu li:nth-child(5) {
        animation-delay: .55s;
    }

    .soft-menu li:nth-child(6) {
        animation-delay: .65s;
    }

    .soft-menu li:nth-child(7) {
        animation-delay: .75s;
    }

/*==========================================================
    CTA BUTTON
==========================================================*/

.soft-nav-btn {
    position: relative;
    overflow: hidden;
}

    .soft-nav-btn::before {
        content: "";
        position: absolute;
        top: 0;
        left: -140%;
        width: 60%;
        height: 100%;
        transform: skewX(-25deg);
        background: linear-gradient( transparent, rgba(255,255,255,.35), transparent );
    }

    .soft-nav-btn:hover::before {
        animation: softButtonShine .8s forwards;
    }

/*==========================================================
    SEARCH BUTTON
==========================================================*/

.soft-search-btn {
    transition: all .4s ease;
}

    .soft-search-btn:hover {
        transform: rotate(10deg) scale(1.08);
    }

/*==========================================================
    NAVBAR GLOW
==========================================================*/

.soft-navbar::after {
    animation: softGlowPulse 6s ease-in-out infinite;
}

/*==========================================================
    ACTIVE LINK
==========================================================*/

.soft-menu a.soft-active {
    color: #ffffff;
    font-weight: 600;
}

    .soft-menu a.soft-active::after {
        width: 32px;
    }

/*==========================================================
    KEYFRAMES
==========================================================*/

@keyframes softMenuFade {

    0% {
        opacity: 0;
        transform: translateY(-15px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes softLogoAppear {

    0% {
        opacity: 0;
        transform: translateX(-30px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes softButtonShine {

    0% {
        left: -140%;
    }

    100% {
        left: 170%;
    }
}

@keyframes softGlowPulse {

    0%,100% {
        opacity: .35;
        transform: translateX(-50%) scale(.9);
    }

    50% {
        opacity: .9;
        transform: translateX(-50%) scale(1.1);
    }
}

/*==========================================================
    KEYBOARD ACCESSIBILITY
==========================================================*/

.soft-menu a:focus-visible,
.soft-nav-btn:focus-visible,
.soft-search-btn:focus-visible,
.soft-menu-toggle:focus-visible {
    outline: 3px solid var(--soft-primary);
    outline-offset: 4px;
    border-radius: 12px;
}

/*==========================================================
    TEXT SELECTION
==========================================================*/

::selection {
    background: var(--soft-primary);
    color: #ffffff;
}

::-moz-selection {
    background: var(--soft-primary);
    color: #ffffff;
}

/*==========================================================
    CUSTOM SCROLLBAR
==========================================================*/

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #050b18;
}

::-webkit-scrollbar-thumb {
    border-radius: 20px;
    background: linear-gradient( var(--soft-primary), var(--soft-orange) );
}

    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient( var(--soft-orange), var(--soft-primary) );
    }

/*==========================================================
    REDUCED MOTION
==========================================================*/

@media (prefers-reduced-motion:reduce) {

    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/*==========================================================
    HIGH CONTRAST MODE
==========================================================*/

@media (prefers-contrast:more) {

    .soft-navbar {
        border: 2px solid #ffffff;
    }

    .soft-menu a {
        color: #ffffff;
    }

    .soft-nav-btn {
        border: 2px solid #ffffff;
    }
}

/*==========================================================
    PRINT
==========================================================*/

@media print {

    .soft-header {
        display: none;
    }
}

/*==========================================================
    END OF PART 1.3A.5
==========================================================*/


/*==========================================================
    OXIAURA SOFT LINK (PVT) LTD.
    PART 1.3B.1
    HERO LAYOUT • BACKGROUND • OVERLAY
==========================================================*/

/*==========================================================
    HERO SECTION
==========================================================*/

.soft-hero {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient( 135deg, #020712 0%, #071325 35%, #0a1f3f 70%, #071325 100% );
}

    /*==========================================================
    HERO BACKGROUND IMAGE
==========================================================*/

    .soft-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url("../images/softlinkhero.png");
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        opacity: .28;
        transform: scale(1.03);
        z-index: 1;
    }

/*==========================================================
    DARK OVERLAY
==========================================================*/

.soft-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, rgba(3,8,18,.92) 0%, rgba(5,15,32,.82) 42%, rgba(5,16,35,.45) 75%, rgba(4,10,20,.18) 100% );
    z-index: 2;
}

/*==========================================================
    TOP LIGHT
==========================================================*/

.soft-hero::after {
    content: "";
    position: absolute;
    top: -250px;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 900px;
    border-radius: 50%;
    background: radial-gradient( rgba(15,111,255,.10), transparent 70% );
    filter: blur(80px);
    z-index: 2;
}

/*==========================================================
    GRID BACKGROUND
==========================================================*/

.soft-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient( rgba(255,255,255,.04) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.04) 1px, transparent 1px );
    background-size: 70px 70px;
    mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
    opacity: .28;
    z-index: 2;
}

/*==========================================================
    HERO CONTAINER
==========================================================*/

.soft-hero .soft-container {
    position: relative;
    z-index: 10;
    width: min(1400px,92%);
    margin: auto;
}

/*==========================================================
    HERO WRAPPER
==========================================================*/

.soft-hero-wrapper {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 90px;
    min-height: 100vh;
    padding-top: 160px;
    padding-bottom: 150px;
}

/*==========================================================
    HERO CONTENT
==========================================================*/

.soft-hero-content {
    position: relative;
    z-index: 20;
    max-width: 720px;
}

/*==========================================================
    HERO IMAGE
==========================================================*/

.soft-hero-image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
}

    .soft-hero-image img {
        width: 100%;
        max-width: 760px;
        display: block;
        object-fit: contain;
        filter: drop-shadow( 0 35px 80px rgba(0,0,0,.45) );
    }

/*==========================================================
    GLOW ORBS
==========================================================*/

.soft-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
    z-index: 3;
}

.soft-glow-1 {
    width: 420px;
    height: 420px;
    left: -160px;
    top: 120px;
    background: rgba(15,111,255,.22);
}

.soft-glow-2 {
    width: 340px;
    height: 340px;
    right: -80px;
    bottom: 120px;
    background: rgba(255,143,31,.18);
}

/*==========================================================
    PARTICLES
==========================================================*/

.soft-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 4;
}

    .soft-particles::before,
    .soft-particles::after {
        content: "";
        position: absolute;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #ffffff;
        opacity: .18;
        box-shadow: 120px 150px #fff, 240px 320px #fff, 420px 220px #fff, 580px 90px #fff, 760px 300px #fff, 930px 170px #fff, 1100px 350px #fff, 1300px 140px #fff;
    }

    .soft-particles::before {
        animation: softParticlesOne 28s linear infinite;
    }

    .soft-particles::after {
        animation: softParticlesTwo 36s linear infinite;
    }

/*==========================================================
    DECORATIVE CIRCLES
==========================================================*/

.soft-circle {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.06);
    z-index: 3;
}

.soft-circle-1 {
    width: 620px;
    height: 620px;
    left: -280px;
    top: 120px;
}

.soft-circle-2 {
    width: 420px;
    height: 420px;
    right: -160px;
    bottom: 180px;
}

.soft-circle-3 {
    width: 170px;
    height: 170px;
    right: 18%;
    top: 14%;
    border-color: rgba(216,177,90,.18);
}

/*==========================================================
    FLOATING ORBS
==========================================================*/

.soft-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    z-index: 3;
}

.soft-orb-blue {
    width: 220px;
    height: 220px;
    top: 16%;
    left: 8%;
    background: rgba(15,111,255,.14);
}

.soft-orb-orange {
    width: 180px;
    height: 180px;
    right: 12%;
    bottom: 18%;
    background: rgba(255,143,31,.16);
}

/*==========================================================
    PARTICLE ANIMATION
==========================================================*/

@keyframes softParticlesOne {

    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-140px);
    }
}

@keyframes softParticlesTwo {

    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-220px);
    }
}

/*==========================================================
    END OF PART 1.3B.1
==========================================================*/

/*==========================================================
    OXIAURA SOFT LINK (PVT) LTD.
    PART 1.3B.2A
    HERO TAG • TITLE • DESCRIPTION
==========================================================*/

/*==========================================================
    HERO CONTENT
==========================================================*/

.soft-hero-content {
    position: relative;
    z-index: 20;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

/*==========================================================
    HERO TAG
==========================================================*/

.soft-hero-tag {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 32px;
    padding: 14px 28px;
    border-radius: 60px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--soft-gold);
    background: linear-gradient( 135deg, rgba(255,255,255,.08), rgba(255,255,255,.04) );
    border: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0,0,0,.20);
}

    /*==========================================================
    TAG SHINE
==========================================================*/

    .soft-hero-tag::before {
        content: "";
        position: absolute;
        left: -140%;
        top: 0;
        width: 45%;
        height: 100%;
        transform: skewX(-28deg);
        background: linear-gradient( transparent, rgba(255,255,255,.40), transparent );
        animation: softTagShine 5s infinite;
    }

/*==========================================================
    TAG DOT
==========================================================*/

.soft-tag-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--soft-orange);
    box-shadow: 0 0 0 6px rgba(255,143,31,.12), 0 0 18px rgba(255,143,31,.55);
    animation: softPulse 2.4s infinite;
}

/*==========================================================
    HERO TITLE
==========================================================*/

.soft-hero-title {
    font-family: "Space Grotesk",sans-serif;
    font-size: clamp(3.8rem,6vw,6.3rem);
    line-height: 1.05;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 32px;
    letter-spacing: -2px;
    text-shadow: 0 12px 35px rgba(0,0,0,.35);
}

    /*==========================================================
    TITLE SPAN
==========================================================*/

    .soft-hero-title span {
        display: block;
        margin: 12px 0;
        background: linear-gradient( 90deg, #ffffff 0%, var(--soft-primary-light) 45%, var(--soft-gold) 100% );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /*==========================================================
    TITLE STRONG
==========================================================*/

    .soft-hero-title strong {
        display: block;
        margin-top: 10px;
        font-weight: 700;
        background: linear-gradient( 90deg, var(--soft-orange), var(--soft-gold) );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

/*==========================================================
    DESCRIPTION
==========================================================*/

.soft-hero-description {
    max-width: 640px;
    font-size: 19px;
    line-height: 1.95;
    color: var(--soft-text);
    margin-bottom: 48px;
    font-weight: 400;
}

    /*==========================================================
    DESCRIPTION HIGHLIGHT
==========================================================*/

    .soft-hero-description strong {
        color: #ffffff;
        font-weight: 600;
    }

    .soft-hero-description span {
        color: var(--soft-gold);
    }

/*==========================================================
    LEFT ACCENT LINE
==========================================================*/

.soft-hero-content::before {
    content: "";
    position: absolute;
    left: -35px;
    top: 140px;
    width: 4px;
    height: 220px;
    border-radius: 30px;
    background: linear-gradient( var(--soft-primary), var(--soft-orange), transparent );
    box-shadow: 0 0 25px rgba(15,111,255,.35);
}

/*==========================================================
    TYPOGRAPHY SPACING
==========================================================*/

.soft-hero-content > * {
    position: relative;
    z-index: 5;
}

/*==========================================================
    HOVER EFFECT
==========================================================*/

.soft-hero-tag:hover {
    transform: translateY(-3px);
    border-color: rgba(216,177,90,.25);
    transition: .4s;
}

.soft-hero-title:hover {
    transform: translateY(-2px);
    transition: .4s;
}

/*==========================================================
    ANIMATIONS
==========================================================*/

@keyframes softPulse {

    0%,100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.35);
        opacity: .7;
    }
}

@keyframes softTagShine {

    0% {
        left: -140%;
    }

    100% {
        left: 180%;
    }
}

/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:1200px) {

    .soft-hero-title {
        font-size: 5rem;
    }
}

@media(max-width:992px) {

    .soft-hero-content {
        max-width: 100%;
        text-align: center;
        align-items: center;
    }

        .soft-hero-content::before {
            display: none;
        }

    .soft-hero-description {
        max-width: 100%;
    }
}

@media(max-width:768px) {

    .soft-hero-tag {
        font-size: 11px;
        letter-spacing: 2px;
        padding: 12px 22px;
    }

    .soft-hero-title {
        font-size: 3.3rem;
        line-height: 1.1;
    }

    .soft-hero-description {
        font-size: 17px;
        line-height: 1.8;
        margin-bottom: 40px;
    }
}

@media(max-width:576px) {

    .soft-hero-title {
        font-size: 2.7rem;
    }

    .soft-hero-description {
        font-size: 16px;
    }

    .soft-hero-tag {
        padding: 10px 18px;
        font-size: 10px;
    }
}

/*==========================================================
    END OF PART 1.3B.2A
==========================================================*/

/*==========================================================
    OXIAURA SOFT LINK (PVT) LTD.
    PART 1.3B.2B
    PREMIUM HERO BUTTONS
==========================================================*/

/*==========================================================
    BUTTON CONTAINER
==========================================================*/

.soft-hero-buttons {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    margin-bottom: 70px;
    position: relative;
    z-index: 20;
}

/*==========================================================
    COMMON BUTTON STYLE
==========================================================*/

.soft-btn-primary,
.soft-btn-secondary {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 210px;
    height: 62px;
    padding: 0 38px;
    border-radius: 70px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .5px;
    overflow: hidden;
    cursor: pointer;
    transition: all .45s cubic-bezier(.23,1,.32,1);
    text-decoration: none;
}

/*==========================================================
    PRIMARY BUTTON
==========================================================*/

.soft-btn-primary {
    color: #ffffff;
    background: linear-gradient( 135deg, var(--soft-primary) 0%, #2486ff 40%, var(--soft-orange) 100% );
    background-size: 220%;
    box-shadow: 0 18px 45px rgba(15,111,255,.35);
}

    /*==========================================================
    PRIMARY GLOW
==========================================================*/

    .soft-btn-primary::before {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: 70px;
        background: linear-gradient( 90deg, rgba(15,111,255,.35), rgba(255,143,31,.35) );
        filter: blur(18px);
        opacity: 0;
        z-index: -2;
        transition: .45s;
    }

    .soft-btn-primary:hover::before {
        opacity: 1;
    }

    /*==========================================================
    PRIMARY SHINE
==========================================================*/

    .soft-btn-primary::after {
        content: "";
        position: absolute;
        left: -130%;
        top: 0;
        width: 45%;
        height: 100%;
        transform: skewX(-28deg);
        background: linear-gradient( transparent, rgba(255,255,255,.55), transparent );
    }

    .soft-btn-primary:hover::after {
        animation: softHeroShine .8s forwards;
    }

    /*==========================================================
    PRIMARY HOVER
==========================================================*/

    .soft-btn-primary:hover {
        transform: translateY(-6px) scale(1.03);
        background-position: right;
        box-shadow: 0 28px 65px rgba(15,111,255,.45);
    }

    /*==========================================================
    PRIMARY ACTIVE
==========================================================*/

    .soft-btn-primary:active {
        transform: scale(.97);
    }

/*==========================================================
    SECONDARY BUTTON
==========================================================*/

.soft-btn-secondary {
    color: #ffffff;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

    /*==========================================================
    SECONDARY BORDER
==========================================================*/

    .soft-btn-secondary::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 70px;
        background: linear-gradient( 135deg, rgba(255,255,255,.08), rgba(255,255,255,.02) );
        opacity: 0;
        transition: .45s;
    }

    .soft-btn-secondary:hover::before {
        opacity: 1;
    }

    /*==========================================================
    SECONDARY GLOW
==========================================================*/

    .soft-btn-secondary::after {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: 70px;
        background: linear-gradient( 135deg, rgba(216,177,90,.35), rgba(255,143,31,.25) );
        filter: blur(20px);
        opacity: 0;
        transition: .45s;
        z-index: -2;
    }

    .soft-btn-secondary:hover::after {
        opacity: 1;
    }

    /*==========================================================
    SECONDARY HOVER
==========================================================*/

    .soft-btn-secondary:hover {
        color: #ffffff;
        border-color: rgba(216,177,90,.45);
        background: rgba(255,255,255,.10);
        transform: translateY(-6px);
        box-shadow: 0 22px 55px rgba(0,0,0,.28);
    }

/*==========================================================
    BUTTON TEXT
==========================================================*/

.soft-btn-primary,
.soft-btn-secondary {
    text-shadow: 0 2px 8px rgba(0,0,0,.18);
}

    /*==========================================================
    OPTIONAL ICON SUPPORT
==========================================================*/

    .soft-btn-primary i,
    .soft-btn-secondary i,
    .soft-btn-primary svg,
    .soft-btn-secondary svg {
        margin-left: 12px;
        transition: .4s;
    }

    .soft-btn-primary:hover i,
    .soft-btn-secondary:hover i,
    .soft-btn-primary:hover svg,
    .soft-btn-secondary:hover svg {
        transform: translateX(7px);
    }

    /*==========================================================
    FOCUS
==========================================================*/

    .soft-btn-primary:focus-visible,
    .soft-btn-secondary:focus-visible {
        outline: 3px solid var(--soft-primary);
        outline-offset: 5px;
    }

    /*==========================================================
    DISABLED
==========================================================*/

    .soft-btn-primary:disabled,
    .soft-btn-secondary:disabled {
        opacity: .5;
        cursor: not-allowed;
        transform: none;
    }

/*==========================================================
    SHINE ANIMATION
==========================================================*/

@keyframes softHeroShine {

    0% {
        left: -130%;
    }

    100% {
        left: 170%;
    }
}

/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:992px) {

    .soft-hero-buttons {
        justify-content: center;
    }
}

@media(max-width:768px) {

    .soft-hero-buttons {
        gap: 18px;
        margin-bottom: 55px;
    }

    .soft-btn-primary,
    .soft-btn-secondary {
        width: 100%;
        max-width: 340px;
        height: 58px;
        font-size: 15px;
    }
}

@media(max-width:576px) {

    .soft-btn-primary,
    .soft-btn-secondary {
        height: 54px;
        padding: 0 28px;
        font-size: 14px;
        border-radius: 60px;
    }
}

/*==========================================================
    END OF PART 1.3B.2B
==========================================================*/

/*==========================================================
    OXIAURA SOFT LINK (PVT) LTD.
    PART 1.3B.2C
    PREMIUM STATISTICS CARDS
==========================================================*/

/*==========================================================
    STATISTICS WRAPPER
==========================================================*/

.soft-hero-stats {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 22px;
    margin-top: 20px;
    position: relative;
    z-index: 20;
}

/*==========================================================
    STAT CARD
==========================================================*/

.soft-stat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 170px;
    padding: 32px 22px;
    overflow: hidden;
    border-radius: 28px;
    background: linear-gradient( 135deg, rgba(255,255,255,.08), rgba(255,255,255,.03) );
    border: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    transition: all .45s cubic-bezier(.23,1,.32,1);
    box-shadow: 0 18px 45px rgba(0,0,0,.18);
}

    /*==========================================================
    GLASS SHINE
==========================================================*/

    .soft-stat-card::before {
        content: "";
        position: absolute;
        left: -140%;
        top: 0;
        width: 45%;
        height: 100%;
        transform: skewX(-28deg);
        background: linear-gradient( transparent, rgba(255,255,255,.35), transparent );
    }

    .soft-stat-card:hover::before {
        animation: softStatShine .9s forwards;
    }

    /*==========================================================
    TOP ACCENT
==========================================================*/

    .soft-stat-card::after {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 4px;
        border-radius: 20px;
        background: linear-gradient( 90deg, var(--soft-primary), var(--soft-orange), var(--soft-gold) );
        transition: .45s;
    }

    .soft-stat-card:hover::after {
        width: 85%;
    }

    /*==========================================================
    NUMBER
==========================================================*/

    .soft-stat-card h2 {
        font-family: "Space Grotesk",sans-serif;
        font-size: 3rem;
        font-weight: 700;
        line-height: 1;
        margin-bottom: 16px;
        background: linear-gradient( 90deg, #ffffff, var(--soft-primary-light), var(--soft-gold) );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /*==========================================================
    LABEL
==========================================================*/

    .soft-stat-card span {
        font-size: 15px;
        line-height: 1.7;
        color: var(--soft-text);
        font-weight: 500;
        letter-spacing: .3px;
    }

    /*==========================================================
    HOVER
==========================================================*/

    .soft-stat-card:hover {
        transform: translateY(-12px);
        border-color: rgba(216,177,90,.30);
        box-shadow: 0 35px 70px rgba(15,111,255,.18);
    }

/*==========================================================
    ICON SUPPORT
==========================================================*/

.soft-stat-icon {
    width: 68px;
    height: 68px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    border-radius: 50%;
    font-size: 28px;
    color: #ffffff;
    background: linear-gradient( 135deg, rgba(15,111,255,.18), rgba(255,143,31,.18) );
    border: 1px solid rgba(255,255,255,.10);
}

/*==========================================================
    GLOW
==========================================================*/

.soft-stat-glow {
    position: absolute;
    width: 180px;
    height: 180px;
    top: -90px;
    right: -90px;
    border-radius: 50%;
    background: radial-gradient( rgba(15,111,255,.18), transparent 70% );
    opacity: 0;
    transition: .45s;
}

.soft-stat-card:hover .soft-stat-glow {
    opacity: 1;
}

/*==========================================================
    ANIMATION
==========================================================*/

@keyframes softStatShine {

    0% {
        left: -140%;
    }

    100% {
        left: 170%;
    }
}

/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:1200px) {

    .soft-hero-stats {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:768px) {

    .soft-hero-stats {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .soft-stat-card {
        min-height: 150px;
        padding: 28px;
    }

        .soft-stat-card h2 {
            font-size: 2.5rem;
        }

        .soft-stat-card span {
            font-size: 14px;
        }
}

@media(max-width:576px) {

    .soft-stat-card {
        padding: 24px 20px;
    }

        .soft-stat-card h2 {
            font-size: 2.2rem;
        }
}

/*==========================================================
    END OF PART 1.3B.2C
==========================================================*/

/*==========================================================
    OXIAURA SOFT LINK (PVT) LTD.
    PART 1.3B.2D
    TYPOGRAPHY ANIMATIONS & RESPONSIVE
==========================================================*/

/*==========================================================
    CONTENT ENTRANCE
==========================================================*/

.soft-hero-content > * {
    opacity: 0;
    transform: translateY(40px);
    animation: softFadeUp .9s forwards;
}

.soft-hero-tag {
    animation-delay: .15s;
}

.soft-hero-title {
    animation-delay: .35s;
}

.soft-hero-description {
    animation-delay: .55s;
}

.soft-hero-buttons {
    animation-delay: .75s;
}

.soft-hero-stats {
    animation-delay: .95s;
}

/*==========================================================
    TITLE ANIMATION
==========================================================*/

.soft-hero-title {
    animation-name: softTitleReveal;
    animation-duration: 1.2s;
    animation-fill-mode: forwards;
}

    .soft-hero-title span {
        position: relative;
        display: inline-block;
        animation: softGradientMove 6s linear infinite;
        background-size: 220%;
    }

    .soft-hero-title strong {
        display: inline-block;
        animation: softGoldGlow 4s ease-in-out infinite;
    }

/*==========================================================
    DESCRIPTION
==========================================================*/

.soft-hero-description {
    animation-name: softFadeUp;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

    .soft-hero-description strong {
        color: #ffffff;
        font-weight: 700;
    }

    .soft-hero-description span {
        color: var(--soft-gold);
    }

/*==========================================================
    TAG
==========================================================*/

.soft-hero-tag {
    animation-name: softFadeUp;
    animation-duration: .9s;
    animation-fill-mode: forwards;
}

.soft-tag-dot {
    animation: softPulse 2s infinite;
}

/*==========================================================
    BUTTONS
==========================================================*/

.soft-hero-buttons {
    animation-name: softFadeUp;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

/*==========================================================
    STATISTICS
==========================================================*/

.soft-hero-stats {
    animation-name: softFadeUp;
    animation-duration: 1.1s;
    animation-fill-mode: forwards;
}

.soft-stat-card {
    opacity: 0;
    transform: translateY(30px);
    animation: softCardReveal .9s forwards;
}

    .soft-stat-card:nth-child(1) {
        animation-delay: 1.0s;
    }

    .soft-stat-card:nth-child(2) {
        animation-delay: 1.15s;
    }

    .soft-stat-card:nth-child(3) {
        animation-delay: 1.3s;
    }

    .soft-stat-card:nth-child(4) {
        animation-delay: 1.45s;
    }

/*==========================================================
    FLOATING EFFECT
==========================================================*/

.soft-hero-tag {
    animation: softFloat 6s ease-in-out infinite;
}

.soft-hero-title {
    transition: .4s;
}

    .soft-hero-title:hover {
        transform: translateY(-4px);
    }

.soft-hero-description {
    transition: .4s;
}

    .soft-hero-description:hover {
        color: #ffffff;
    }

/*==========================================================
    KEYFRAMES
==========================================================*/

@keyframes softFadeUp {

    0% {
        opacity: 0;
        transform: translateY(40px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes softTitleReveal {

    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes softGradientMove {

    0% {
        background-position: left;
    }

    100% {
        background-position: right;
    }
}

@keyframes softGoldGlow {

    0%,100% {
        filter: drop-shadow(0 0 0 rgba(216,177,90,0));
    }

    50% {
        filter: drop-shadow(0 0 16px rgba(216,177,90,.45));
    }
}

@keyframes softCardReveal {

    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes softFloat {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

/*==========================================================
    LARGE DESKTOP
==========================================================*/

@media(max-width:1400px) {

    .soft-hero-title {
        font-size: 5.4rem;
    }

    .soft-hero-description {
        font-size: 18px;
        max-width: 620px;
    }
}

/*==========================================================
    LAPTOP
==========================================================*/

@media(max-width:1200px) {

    .soft-hero-title {
        font-size: 4.7rem;
    }

    .soft-hero-description {
        font-size: 17px;
        line-height: 1.85;
    }
}

/*==========================================================
    TABLET
==========================================================*/

@media(max-width:992px) {

    .soft-hero-content {
        align-items: center;
        text-align: center;
        margin: auto;
    }

    .soft-hero-title {
        font-size: 4rem;
    }

    .soft-hero-description {
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
}

/*==========================================================
    MOBILE
==========================================================*/

@media(max-width:768px) {

    .soft-hero-title {
        font-size: 3.2rem;
        line-height: 1.15;
    }

    .soft-hero-tag {
        padding: 12px 22px;
        font-size: 11px;
        letter-spacing: 2px;
    }

    .soft-hero-description {
        font-size: 16px;
        line-height: 1.8;
        margin-bottom: 36px;
    }
}

/*==========================================================
    SMALL MOBILE
==========================================================*/

@media(max-width:576px) {

    .soft-hero-title {
        font-size: 2.7rem;
    }

    .soft-hero-description {
        font-size: 15px;
    }

    .soft-hero-tag {
        padding: 10px 18px;
        font-size: 10px;
    }
}

/*==========================================================
    EXTRA SMALL
==========================================================*/

@media(max-width:400px) {

    .soft-hero-title {
        font-size: 2.3rem;
    }

    .soft-hero-description {
        font-size: 14px;
        line-height: 1.7;
    }
}

/*==========================================================
    REDUCED MOTION
==========================================================*/

@media(prefers-reduced-motion:reduce) {

    .soft-hero-content > *,
    .soft-stat-card,
    .soft-tag-dot,
    .soft-hero-title span,
    .soft-hero-title strong {
        animation: none !important;
        transition: none !important;
        opacity: 1;
        transform: none;
    }
}

/*==========================================================
    END OF PART 1.3B.2D
==========================================================*/

/*==========================================================
    OXIAURA SOFT LINK (PVT) LTD.
    PART 1.3B.3A
    HERO IMAGE LAYOUT & EFFECTS
==========================================================*/

/*==========================================================
    HERO IMAGE CONTAINER
==========================================================*/

.soft-hero-image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    min-height: 720px;
    z-index: 20;
}

    /*==========================================================
    MAIN IMAGE
==========================================================*/

    .soft-hero-image img {
        position: relative;
        width: 100%;
        max-width: 700px;
        height: auto;
        object-fit: contain;
        display: block;
        z-index: 5;
        user-select: none;
        pointer-events: none;
        filter: drop-shadow(0 40px 80px rgba(0,0,0,.45)) drop-shadow(0 20px 40px rgba(15,111,255,.18));
        animation: softHeroImageFloat 7s ease-in-out infinite;
        transition: transform .6s ease, filter .6s ease;
    }

    /*==========================================================
    IMAGE HOVER
==========================================================*/

    .soft-hero-image:hover img {
        transform: scale(1.03) rotate(-1deg);
        filter: drop-shadow(0 55px 100px rgba(0,0,0,.55)) drop-shadow(0 30px 60px rgba(15,111,255,.25));
    }

    /*==========================================================
    OUTER GLOW
==========================================================*/

    .soft-hero-image::before {
        content: "";
        position: absolute;
        width: 620px;
        height: 620px;
        border-radius: 50%;
        background: radial-gradient( rgba(15,111,255,.18), rgba(15,111,255,.05), transparent 72% );
        filter: blur(70px);
        animation: softGlowRotate 18s linear infinite;
    }

    /*==========================================================
    INNER GLOW
==========================================================*/

    .soft-hero-image::after {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        background: radial-gradient( rgba(255,143,31,.20), transparent 70% );
        filter: blur(55px);
        animation: softGlowPulse 5s ease-in-out infinite;
    }

/*==========================================================
    DECORATIVE RING
==========================================================*/

.soft-hero-ring {
    position: absolute;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.08);
    animation: softRotate 40s linear infinite;
}

/*==========================================================
    SECOND RING
==========================================================*/

.soft-hero-ring-two {
    position: absolute;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    border: 1px dashed rgba(216,177,90,.18);
    animation: softRotateReverse 30s linear infinite;
}

/*==========================================================
    DECORATIVE DOTS
==========================================================*/

.soft-hero-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--soft-primary);
    box-shadow: 0 0 18px rgba(15,111,255,.6);
}

.soft-dot-1 {
    top: 8%;
    left: 12%;
}

.soft-dot-2 {
    top: 72%;
    left: 5%;
    background: var(--soft-orange);
}

.soft-dot-3 {
    right: 8%;
    top: 18%;
    background: var(--soft-gold);
}

.soft-dot-4 {
    right: 14%;
    bottom: 12%;
}

/*==========================================================
    BLURRED ORBS
==========================================================*/

.soft-image-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(45px);
    opacity: .75;
}

    .soft-image-orb.blue {
        width: 180px;
        height: 180px;
        top: 15%;
        right: 8%;
        background: rgba(15,111,255,.22);
    }

    .soft-image-orb.orange {
        width: 140px;
        height: 140px;
        bottom: 12%;
        left: 8%;
        background: rgba(255,143,31,.20);
    }

/*==========================================================
    GRID LIGHT
==========================================================*/

.soft-image-grid {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 45px 45px;
    mask-image: radial-gradient(circle, black 45%, transparent 100%);
    opacity: .35;
}

/*==========================================================
    KEYFRAMES
==========================================================*/

@keyframes softHeroImageFloat {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-18px);
    }
}

@keyframes softGlowRotate {

    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes softRotate {

    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes softRotateReverse {

    0% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes softGlowPulse {

    0%,100% {
        transform: scale(.9);
        opacity: .45;
    }

    50% {
        transform: scale(1.08);
        opacity: .9;
    }
}

/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:1200px) {

    .soft-hero-image {
        max-width: 650px;
        min-height: 620px;
    }

        .soft-hero-image::before {
            width: 520px;
            height: 520px;
        }
}

@media(max-width:992px) {

    .soft-hero-image {
        margin-top: 60px;
        max-width: 560px;
        min-height: 520px;
    }

    .soft-hero-ring,
    .soft-hero-ring-two {
        display: none;
    }
}

@media(max-width:768px) {

    .soft-hero-image {
        max-width: 460px;
        min-height: 420px;
    }

        .soft-hero-image img {
            max-width: 420px;
        }

    .soft-image-grid {
        display: none;
    }
}

@media(max-width:576px) {

    .soft-hero-image {
        max-width: 100%;
        min-height: 340px;
    }

        .soft-hero-image img {
            max-width: 100%;
        }

    .soft-image-orb {
        display: none;
    }

    .soft-hero-dot {
        display: none;
    }
}

/*==========================================================
    END OF PART 1.3B.3A
==========================================================*/
/*==========================================================
    OXIAURA SOFT LINK (PVT) LTD.
    PART 1.3B.3B
    FLOATING PREMIUM GLASS CARDS
==========================================================*/

/*==========================================================
    COMMON FLOATING CARD
==========================================================*/

.soft-floating-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 18px;
    width: 280px;
    min-height: 95px;
    padding: 20px 24px;
    border-radius: 24px;
    overflow: hidden;
    cursor: pointer;
    z-index: 30;
    background: linear-gradient( 135deg, rgba(255,255,255,.14), rgba(255,255,255,.05) );
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 25px 60px rgba(0,0,0,.25);
    transition: all .45s cubic-bezier(.23,1,.32,1);
    margin-top: -220px;
}

    /*==========================================================
    GLASS SHINE
==========================================================*/

    .soft-floating-card::before {
        content: "";
        position: absolute;
        left: -150%;
        top: 0;
        width: 45%;
        height: 100%;
        transform: skewX(-25deg);
        background: linear-gradient( transparent, rgba(255,255,255,.40), transparent );
    }

    .soft-floating-card:hover::before {
        animation: softGlassShine .9s forwards;
    }

    /*==========================================================
    TOP BORDER
==========================================================*/

    .soft-floating-card::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        width: 0;
        height: 3px;
        border-radius: 30px;
        background: linear-gradient( 90deg, var(--soft-primary), var(--soft-orange), var(--soft-gold) );
        transition: .45s;
    }

    .soft-floating-card:hover::after {
        width: 88%;
    }

/*==========================================================
    CARD ICON
==========================================================*/

.soft-card-icon {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    font-size: 28px;
    color: #ffffff;
    background: linear-gradient( 135deg, rgba(15,111,255,.25), rgba(255,143,31,.25) );
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: inset 0 0 18px rgba(255,255,255,.05);
    transition: .45s;
}

/*==========================================================
    CARD CONTENT
==========================================================*/

.soft-card-content {
    flex: 1;
}

    .soft-card-content h4 {
        font-family: "Space Grotesk",sans-serif;
        font-size: 18px;
        font-weight: 700;
        color: #ffffff;
        margin-bottom: 6px;
    }

    .soft-card-content p {
        font-size: 14px;
        line-height: 1.6;
        color: var(--soft-text);
    }

/*==========================================================
    CARD POSITIONS
==========================================================*/

.soft-card-one {
    top: 5%;
    left: -45px;
    animation: softCardFloat1 6s ease-in-out infinite;
}

.soft-card-two {
    top: 22%;
    right: -40px;
    animation: softCardFloat2 7s ease-in-out infinite;
}

.soft-card-three {
    bottom: 18%;
    left: -70px;
    animation: softCardFloat3 8s ease-in-out infinite;
}

.soft-card-four {
    bottom: 3%;
    right: -35px;
    animation: softCardFloat4 7s ease-in-out infinite;
}

/*==========================================================
    HOVER
==========================================================*/

.soft-floating-card:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: rgba(216,177,90,.35);
    box-shadow: 0 35px 80px rgba(15,111,255,.18);
}

    .soft-floating-card:hover .soft-card-icon {
        transform: rotate(-8deg) scale(1.12);
        background: linear-gradient( 135deg, var(--soft-primary), var(--soft-orange) );
    }

/*==========================================================
    CARD GLOW
==========================================================*/

.soft-card-glow {
    position: absolute;
    width: 170px;
    height: 170px;
    top: -90px;
    right: -90px;
    border-radius: 50%;
    background: radial-gradient( rgba(15,111,255,.18), transparent 70% );
    opacity: 0;
    transition: .45s;
}

.soft-floating-card:hover .soft-card-glow {
    opacity: 1;
}

/*==========================================================
    KEYFRAMES
==========================================================*/

@keyframes softGlassShine {

    0% {
        left: -150%;
    }

    100% {
        left: 170%;
    }
}

@keyframes softCardFloat1 {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-14px);
    }
}

@keyframes softCardFloat2 {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(18px);
    }
}

@keyframes softCardFloat3 {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

@keyframes softCardFloat4 {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(15px);
    }
}

/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:1200px) {

    .soft-floating-card {
        width: 250px;
        padding: 18px;
    }
}

@media(max-width:992px) {

    .soft-floating-card {
        width: 230px;
    }

    .soft-card-one {
        left: 0;
    }

    .soft-card-three {
        left: 0;
    }

    .soft-card-two {
        right: 0;
    }

    .soft-card-four {
        right: 0;
    }
}

@media(max-width:768px) {

    .soft-floating-card {
        position: relative;
        width: 100%;
        max-width: 340px;
        margin: 15px auto;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        animation: none;
    }

    .soft-hero-image {
        display: flex;
        flex-direction: column;
        gap: 18px;
        margin-top: -200px;
    }
}

@media(max-width:576px) {

    .soft-floating-card {
        padding: 16px;
        border-radius: 20px;
    }

    .soft-card-icon {
        width: 52px;
        height: 52px;
        font-size: 22px;
    }

    .soft-card-content h4 {
        font-size: 16px;
    }

    .soft-card-content p {
        font-size: 13px;
    }
}

/*==========================================================
    END OF PART 1.3B.3B
==========================================================*/

/*==========================================================
    OXIAURA SOFT LINK (PVT) LTD.
    PART 1.3B.3C
    CARD HOVER EFFECTS & ANIMATIONS
==========================================================*/

/*==========================================================
    PREMIUM TRANSITIONS
==========================================================*/

.soft-floating-card,
.soft-card-icon,
.soft-card-content,
.soft-card-content h4,
.soft-card-content p {
    transition: all .45s cubic-bezier(.23,1,.32,1);
}

/*==========================================================
    DEFAULT STATE
==========================================================*/

.soft-floating-card {
    transform: translateY(0) scale(1);
    transform-style: preserve-3d;
    perspective: 1000px;
    overflow: hidden;
    margin-top: -100px;
}

    /*==========================================================
    GLASS SHINE
==========================================================*/

    .soft-floating-card::before {
        content: "";
        position: absolute;
        top: -20%;
        left: -160%;
        width: 70%;
        height: 160%;
        transform: rotate(20deg);
        background: linear-gradient( transparent, rgba(255,255,255,.45), transparent );
        opacity: .8;
        pointer-events: none;
    }

    .soft-floating-card:hover::before {
        animation: softGlassMove .9s linear;
    }

    /*==========================================================
    BORDER GLOW
==========================================================*/

    .soft-floating-card::after {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: 24px;
        padding: 1px;
        background: linear-gradient( 135deg, rgba(15,111,255,.65), rgba(255,143,31,.55), rgba(216,177,90,.55) );
        opacity: 0;
        transition: .45s;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

    .soft-floating-card:hover::after {
        opacity: 1;
    }

    /*==========================================================
    MAIN HOVER
==========================================================*/

    .soft-floating-card:hover {
        transform: translateY(-14px) scale(1.04);
        border-color: rgba(216,177,90,.35);
        box-shadow: 0 35px 80px rgba(15,111,255,.20), 0 15px 30px rgba(0,0,0,.35);
    }

    /*==========================================================
    ACTIVE
==========================================================*/

    .soft-floating-card:active {
        transform: scale(.98);
    }

    /*==========================================================
    ICON HOVER
==========================================================*/

    .soft-floating-card:hover .soft-card-icon {
        transform: rotate(-10deg) scale(1.15);
        background: linear-gradient( 135deg, var(--soft-primary), var(--soft-orange) );
        color: #fff;
        box-shadow: 0 15px 35px rgba(15,111,255,.35);
    }

    /*==========================================================
    TITLE
==========================================================*/

    .soft-floating-card:hover h4 {
        color: var(--soft-gold-light);
        letter-spacing: .4px;
    }

    /*==========================================================
    DESCRIPTION
==========================================================*/

    .soft-floating-card:hover p {
        color: #ffffff;
    }

/*==========================================================
    GLOW EFFECT
==========================================================*/

.soft-card-glow {
    position: absolute;
    width: 200px;
    height: 200px;
    top: -90px;
    right: -90px;
    border-radius: 50%;
    background: radial-gradient( rgba(15,111,255,.20), transparent 70% );
    opacity: 0;
    transition: .5s;
    filter: blur(30px);
}

.soft-floating-card:hover .soft-card-glow {
    opacity: 1;
    transform: scale(1.3);
}

/*==========================================================
    BACKGROUND PULSE
==========================================================*/

.soft-floating-card:hover {
    background: linear-gradient( 135deg, rgba(255,255,255,.18), rgba(255,255,255,.08) );
}

/*==========================================================
    CARD ENTRANCE
==========================================================*/

.soft-card-one {
    animation: softCardAppear .8s ease forwards, softCardFloat1 6s ease-in-out infinite;
}

.soft-card-two {
    animation: softCardAppear .8s .15s ease forwards, softCardFloat2 7s ease-in-out infinite;
}

.soft-card-three {
    animation: softCardAppear .8s .3s ease forwards, softCardFloat3 8s ease-in-out infinite;
}

.soft-card-four {
    animation: softCardAppear .8s .45s ease forwards, softCardFloat4 7s ease-in-out infinite;
}

/*==========================================================
    KEYFRAMES
==========================================================*/

@keyframes softGlassMove {

    0% {
        left: -160%;
    }

    100% {
        left: 170%;
    }
}

@keyframes softCardAppear {

    0% {
        opacity: 0;
        transform: translateY(40px) scale(.9);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes softCardFloat1 {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

@keyframes softCardFloat2 {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(15px);
    }
}

@keyframes softCardFloat3 {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-14px);
    }
}

@keyframes softCardFloat4 {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(16px);
    }
}

/*==========================================================
    FOCUS
==========================================================*/

.soft-floating-card:focus-within {
    outline: 2px solid var(--soft-primary);
    outline-offset: 5px;
}

/*==========================================================
    REDUCED MOTION
==========================================================*/

@media(prefers-reduced-motion:reduce) {

    .soft-floating-card,
    .soft-card-icon,
    .soft-card-glow {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/*==========================================================
    TABLET
==========================================================*/

@media(max-width:992px) {

    .soft-floating-card:hover {
        transform: translateY(-8px);
    }
}

/*==========================================================
    MOBILE
==========================================================*/

@media(max-width:768px) {

    .soft-floating-card {
        animation: none !important;
    }

        .soft-floating-card:hover {
            transform: translateY(-6px);
        }
}

/*==========================================================
    END OF PART 1.3B.3C
==========================================================*/

/*==========================================================
    OXIAURA SOFT LINK (PVT) LTD.
    PART 1.3B.3D
    RESPONSIVE HERO IMAGE
==========================================================*/

/*==========================================================
    LARGE DESKTOP (1600px)
==========================================================*/

@media (max-width:1600px) {

    .soft-hero-image {
        max-width: 700px;
        min-height: 680px;
    }

        .soft-hero-image img {
            max-width: 650px;
        }

    .soft-card-one {
        left: -30px;
        top: 6%;
    }

    .soft-card-two {
        right: -30px;
        top: 20%;
    }

    .soft-card-three {
        left: -40px;
        bottom: 16%;
    }

    .soft-card-four {
        right: -25px;
        bottom: 4%;
    }
}

/*==========================================================
    LAPTOP (1400px)
==========================================================*/

@media (max-width:1400px) {

    .soft-hero-image {
        max-width: 640px;
        min-height: 620px;
    }

        .soft-hero-image img {
            max-width: 600px;
        }

    .soft-floating-card {
        width: 255px;
        min-height: 90px;
        padding: 18px;
    }

    .soft-card-icon {
        width: 56px;
        height: 56px;
        font-size: 24px;
    }

    .soft-card-content h4 {
        font-size: 17px;
    }

    .soft-card-content p {
        font-size: 13px;
    }
}

/*==========================================================
    SMALL LAPTOP
==========================================================*/

@media (max-width:1200px) {

    .soft-hero-wrapper {
        grid-template-columns: 1fr 1fr;
        gap: 50px;
    }

    .soft-hero-image {
        max-width: 560px;
        min-height: 560px;
    }

        .soft-hero-image img {
            max-width: 520px;
        }

    .soft-floating-card {
        width: 230px;
        padding: 16px;
    }

    .soft-card-one {
        left: -10px;
    }

    .soft-card-three {
        left: -10px;
    }

    .soft-card-two {
        right: -10px;
    }

    .soft-card-four {
        right: -10px;
    }
}

/*==========================================================
    TABLET
==========================================================*/

@media (max-width:992px) {

    .soft-hero-wrapper {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .soft-hero-image {
        order: 1;
        margin: 70px auto 0;
        max-width: 620px;
        min-height: auto;
    }

    .soft-hero-content {
        order: 2;
        align-items: center;
    }

    .soft-hero-image img {
        max-width: 540px;
    }

    .soft-floating-card {
        width: 240px;
    }

    .soft-card-one {
        top: 2%;
        left: 5%;
    }

    .soft-card-two {
        top: 10%;
        right: 5%;
    }

    .soft-card-three {
        bottom: 18%;
        left: 2%;
    }

    .soft-card-four {
        bottom: 2%;
        right: 3%;
    }
}

/*==========================================================
    MOBILE
==========================================================*/

@media (max-width:768px) {

    .soft-hero-image {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 18px;
        max-width: 100%;
    }

        .soft-hero-image img {
            width: 100%;
            max-width: 420px;
        }

    .soft-floating-card {
        position: relative;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
        animation: none;
    }

    .soft-card-glow {
        display: none;
    }

    .soft-hero-ring,
    .soft-hero-ring-two,
    .soft-image-grid,
    .soft-hero-dot,
    .soft-image-orb {
        display: none;
    }
}

/*==========================================================
    SMALL MOBILE
==========================================================*/

@media (max-width:576px) {

    .soft-hero-image {
        margin-top: 50px;
    }

        .soft-hero-image img {
            max-width: 320px;
        }

    .soft-floating-card {
        max-width: 100%;
        padding: 16px;
        border-radius: 20px;
        min-height: 82px;
    }

    .soft-card-icon {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        font-size: 20px;
    }

    .soft-card-content h4 {
        font-size: 15px;
    }

    .soft-card-content p {
        font-size: 12px;
        line-height: 1.5;
    }
}

/*==========================================================
    EXTRA SMALL DEVICES
==========================================================*/

@media (max-width:400px) {

    .soft-hero-image img {
        max-width: 280px;
    }

    .soft-floating-card {
        gap: 12px;
        padding: 14px;
    }

    .soft-card-icon {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }

    .soft-card-content h4 {
        font-size: 14px;
    }

    .soft-card-content p {
        font-size: 11px;
    }
}

/*==========================================================
    LANDSCAPE MOBILE
==========================================================*/

@media (max-height:700px) and (orientation:landscape) {

    .soft-hero {
        min-height: auto;
        padding: 150px 0 80px;
    }

    .soft-hero-wrapper {
        align-items: center;
    }

    .soft-hero-image {
        margin-top: 20px;
    }
}

/*==========================================================
    HIGH RESOLUTION DISPLAYS
==========================================================*/

@media (min-width:1800px) {

    .soft-hero-image {
        max-width: 820px;
    }

        .soft-hero-image img {
            max-width: 760px;
        }

    .soft-floating-card {
        transform: scale(1.08);
    }
}

/*==========================================================
    ACCESSIBILITY
==========================================================*/

@media (prefers-reduced-motion:reduce) {

    .soft-hero-image img,
    .soft-floating-card,
    .soft-card-icon,
    .soft-hero-ring,
    .soft-hero-ring-two,
    .soft-image-orb {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/*==========================================================
    END OF PART 1.3B.3D
==========================================================*/
/*==========================================================
    OXIAURA SOFT LINK (PVT) LTD.
    PART 1.3B.4
    INDUSTRY STRIP & DECORATIVE ELEMENTS
==========================================================*/

/*==========================================================
    INDUSTRY STRIP
==========================================================*/
.soft-card-four {
    position: absolute;
    right: -40px;
    bottom: 200px; /* Increase this value to move it higher */

    z-index: 20;
    animation: softCardFour 7s ease-in-out infinite;
}
.soft-card-one {
    top: -65px;
    animation: softCardFour 7s ease-in-out infinite;
}

.soft-card-two {
    top: -65px;
    animation: softCardFour 7s ease-in-out infinite;
}
.soft-hero-image img {
    position: relative;
    top: -180px;
}
.soft-card-three {
    position: absolute;
    right: -40px;
    bottom: 140px; /* Increase this value to move it higher */

    z-index: 20;
    animation: softCardFour 7s ease-in-out infinite;
}

.soft-industry-strip {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 60;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.05);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    background: linear-gradient( 90deg, rgba(5,15,30,.92), rgba(8,25,48,.88), rgba(5,15,30,.92) );
}

    /*==========================================================
    TOP GOLD LINE
==========================================================*/

    .soft-industry-strip::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient( 90deg, transparent, var(--soft-gold), var(--soft-orange), var(--soft-primary), transparent );
    }

/*==========================================================
    INNER WRAPPER
==========================================================*/

.soft-industry-track {
    display: flex;
    align-items: center;
    gap: 70px;
    width: max-content;
    padding: 22px 0;
    animation: softIndustryScroll 35s linear infinite;
}

/*==========================================================
    PAUSE ON HOVER
==========================================================*/

.soft-industry-strip:hover .soft-industry-track {
    animation-play-state: paused;
}

/*==========================================================
    ITEM
==========================================================*/

.soft-industry-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 28px;
    border-radius: 60px;
    white-space: nowrap;
    cursor: pointer;
    transition: .45s;
    background: linear-gradient( 135deg, rgba(255,255,255,.05), rgba(255,255,255,.02) );
    border: 1px solid rgba(255,255,255,.08);
}

/*==========================================================
    ICON
==========================================================*/

.soft-industry-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    color: #fff;
    background: linear-gradient( 135deg, var(--soft-primary), var(--soft-orange) );
    box-shadow: 0 10px 25px rgba(15,111,255,.30);
}

/*==========================================================
    TEXT
==========================================================*/

.soft-industry-item span {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .5px;
    color: #ffffff;
}

/*==========================================================
    HOVER
==========================================================*/

.soft-industry-item:hover {
    transform: translateY(-6px) scale(1.05);
    border-color: rgba(216,177,90,.35);
    box-shadow: 0 20px 45px rgba(15,111,255,.20);
}

    .soft-industry-item:hover .soft-industry-icon {
        transform: rotate(-10deg) scale(1.12);
    }

/*==========================================================
    HERO DECORATION
==========================================================*/

.soft-decoration {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

    /*==========================================================
    BLUE GLOW
==========================================================*/

    .soft-decoration.blue {
        width: 420px;
        height: 420px;
        top: 12%;
        left: -180px;
        background: radial-gradient( rgba(15,111,255,.18), transparent 70% );
        filter: blur(90px);
    }

    /*==========================================================
    ORANGE GLOW
==========================================================*/

    .soft-decoration.orange {
        width: 320px;
        height: 320px;
        right: -120px;
        bottom: 18%;
        background: radial-gradient( rgba(255,143,31,.16), transparent 70% );
        filter: blur(70px);
    }

/*==========================================================
    GOLD CIRCLE
==========================================================*/

.soft-gold-circle {
    position: absolute;
    width: 420px;
    height: 420px;
    right: 8%;
    top: 12%;
    border-radius: 50%;
    border: 1px dashed rgba(216,177,90,.18);
    animation: softRotate 45s linear infinite;
}

/*==========================================================
    SMALL FLOATING DOTS
==========================================================*/

.soft-small-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--soft-gold);
    box-shadow: 0 0 20px rgba(216,177,90,.50);
}

.soft-dot-a {
    top: 15%;
    left: 18%;
}

.soft-dot-b {
    top: 32%;
    right: 12%;
}

.soft-dot-c {
    bottom: 24%;
    left: 12%;
}

.soft-dot-d {
    bottom: 10%;
    right: 18%;
}

/*==========================================================
    KEYFRAMES
==========================================================*/

@keyframes softIndustryScroll {

    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:992px) {

    .soft-industry-track {
        gap: 40px;
    }

    .soft-industry-item {
        padding: 12px 22px;
    }
}

@media(max-width:768px) {

    .soft-industry-strip {
        position: relative;
        margin-top: 60px;
    }

    .soft-industry-track {
        padding: 16px 0;
        gap: 25px;
    }

    .soft-industry-icon {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }

    .soft-industry-item span {
        font-size: 13px;
    }

    .soft-decoration,
    .soft-gold-circle,
    .soft-small-dot {
        display: none;
    }
}

@media(max-width:576px) {

    .soft-industry-item {
        padding: 10px 18px;
    }

    .soft-industry-icon {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }
}

/*==========================================================
    REDUCED MOTION
==========================================================*/

@media(prefers-reduced-motion:reduce) {

    .soft-industry-track,
    .soft-gold-circle {
        animation: none !important;
    }
}

/*==========================================================
    END OF PART 1.3B.4
==========================================================*/


/*==========================================================
    OXIAURA SOFT LINK (PVT) LTD.
    PART 1.3B.5
    PREMIUM ANIMATIONS & RESPONSIVE HERO
==========================================================*/

/*==========================================================
    HERO ENTRANCE
==========================================================*/

.soft-hero-content {
    animation: softHeroContent 1.2s ease forwards;
}

.soft-hero-image {
    animation: softHeroImage .9s ease forwards;
}

/*==========================================================
    STAGGER ANIMATION
==========================================================*/

.soft-hero-tag {
    animation: softFadeUp .8s ease forwards, softTagFloat 6s ease-in-out infinite;
}

.soft-hero-title {
    animation: softFadeUp 1s .15s ease forwards;
}

.soft-hero-description {
    animation: softFadeUp 1s .35s ease forwards;
}

.soft-hero-buttons {
    animation: softFadeUp 1s .55s ease forwards;
}

.soft-hero-stats {
    animation: softFadeUp 1s .75s ease forwards;
}

/*==========================================================
    HERO IMAGE
==========================================================*/

.soft-hero-image img {
    animation: softImageFloat 7s ease-in-out infinite;
    will-change: transform;
}

/*==========================================================
    FLOATING CARDS
==========================================================*/

.soft-card-one {
    animation: softCardOne 6s ease-in-out infinite;
}

.soft-card-two {
    animation: softCardTwo 7s ease-in-out infinite;
}

.soft-card-three {
    animation: softCardThree 8s ease-in-out infinite;
}

.soft-card-four {
    animation: softCardFour 6.5s ease-in-out infinite;
}

/*==========================================================
    GLOWS
==========================================================*/

.soft-glow-1 {
    animation: softGlowOne 8s ease-in-out infinite;
}

.soft-glow-2 {
    animation: softGlowTwo 10s ease-in-out infinite;
}

/*==========================================================
    ORBS
==========================================================*/

.soft-orb-blue {
    animation: softOrbBlue 12s ease-in-out infinite;
}

.soft-orb-orange {
    animation: softOrbOrange 14s ease-in-out infinite;
}

/*==========================================================
    DECORATIVE RINGS
==========================================================*/

.soft-hero-ring {
    animation: softRotate 40s linear infinite;
}

.soft-hero-ring-two {
    animation: softRotateReverse 28s linear infinite;
}

/*==========================================================
    BUTTON GLOW
==========================================================*/

.soft-btn-primary {
    animation: softButtonGlow 4s ease infinite;
}

/*==========================================================
    HERO HOVER
==========================================================*/

.soft-hero:hover .soft-glow-1 {
    transform: scale(1.15);
}

.soft-hero:hover .soft-glow-2 {
    transform: scale(1.12);
}

.soft-hero:hover .soft-hero-image img {
    transform: scale(1.02);
}

/*==========================================================
    KEYFRAMES
==========================================================*/

@keyframes softHeroContent {

    0% {
        opacity: 0;
        transform: translateX(-70px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes softHeroImage {

    0% {
        opacity: 0;
        transform: translateX(80px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes softTagFloat {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

@keyframes softImageFloat {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-18px);
    }
}

@keyframes softCardOne {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-14px);
    }
}

@keyframes softCardTwo {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(16px);
    }
}

@keyframes softCardThree {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-18px);
    }
}

@keyframes softCardFour {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(14px);
    }
}

@keyframes softGlowOne {

    0%,100% {
        transform: scale(1);
        opacity: .55;
    }

    50% {
        transform: scale(1.18);
        opacity: .9;
    }
}

@keyframes softGlowTwo {

    0%,100% {
        transform: scale(1);
        opacity: .45;
    }

    50% {
        transform: scale(1.15);
        opacity: .75;
    }
}

@keyframes softOrbBlue {

    0%,100% {
        transform: translateY(0) translateX(0);
    }

    50% {
        transform: translateY(-25px) translateX(12px);
    }
}

@keyframes softOrbOrange {

    0%,100% {
        transform: translateY(0) translateX(0);
    }

    50% {
        transform: translateY(20px) translateX(-15px);
    }
}

@keyframes softButtonGlow {

    0%,100% {
        box-shadow: 0 18px 45px rgba(15,111,255,.35);
    }

    50% {
        box-shadow: 0 28px 70px rgba(15,111,255,.60);
    }
}

/*==========================================================
    SMOOTH TRANSITIONS
==========================================================*/

.soft-hero * {
    transition: background .35s ease, color .35s ease, border-color .35s ease, transform .35s ease, box-shadow .35s ease, opacity .35s ease;
}

/*==========================================================
    LARGE DESKTOP
==========================================================*/

@media(max-width:1400px) {

    .soft-hero-wrapper {
        gap: 70px;
    }
}

/*==========================================================
    DESKTOP
==========================================================*/

@media(max-width:1200px) {

    .soft-hero {
        min-height: auto;
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .soft-hero-wrapper {
        gap: 55px;
    }
}

/*==========================================================
    TABLET
==========================================================*/

@media(max-width:992px) {

    .soft-hero {
        padding-top: 120px;
        padding-bottom: 80px;
    }

    .soft-hero-wrapper {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .soft-hero-content {
        order: 2;
        align-items: center;
    }

    .soft-hero-image {
        order: 1;
        margin-bottom: 40px;
    }
}

/*==========================================================
    MOBILE
==========================================================*/

@media(max-width:768px) {

    .soft-hero {
        padding-top: 100px;
        padding-bottom: 70px;
    }

    .soft-hero-wrapper {
        gap: 35px;
    }

    .soft-hero-image img {
        max-width: 420px;
    }

    .soft-floating-card {
        animation: none;
    }
}

/*==========================================================
    SMALL MOBILE
==========================================================*/

@media(max-width:576px) {

    .soft-hero {
        padding-top: 90px;
        padding-bottom: 60px;
    }

    .soft-hero-image img {
        max-width: 300px;
    }

    .soft-glow-1,
    .soft-glow-2,
    .soft-orb-blue,
    .soft-orb-orange {
        display: none;
    }
}

/*==========================================================
    ACCESSIBILITY
==========================================================*/

@media(prefers-reduced-motion:reduce) {

    .soft-hero * {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/*==========================================================
    GPU ACCELERATION
==========================================================*/

.soft-hero-image img,
.soft-floating-card,
.soft-glow,
.soft-orb-blue,
.soft-orb-orange {
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
}

/*==========================================================
    END OF PART 1.3B.5
==========================================================*/

/*==========================================================
    OXIAURA SOFT LINK (PVT) LTD.
    PART 2.2A
    ABOUT LAYOUT & VARIABLES
==========================================================*/

/*==========================================================
    ABOUT SECTION
==========================================================*/

.soft-about {
    position: relative;
    overflow: hidden;
    padding: 140px 0;
    background: linear-gradient( 180deg, #07111d 0%, #0a1625 45%, #09131f 100% );
}

    /*==========================================================
    CONTAINER
==========================================================*/

    .soft-about .soft-container {
        width: min(1400px,92%);
        margin: auto;
        position: relative;
        z-index: 10;
    }

/*==========================================================
    GRID LAYOUT
==========================================================*/

.soft-about-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: center;
    position: relative;
}

/*==========================================================
    LEFT COLUMN
==========================================================*/

.soft-about-image-section {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 720px;
}

/*==========================================================
    RIGHT COLUMN
==========================================================*/

.soft-about-content {
    position: relative;
    z-index: 20;
}

/*==========================================================
    MAIN IMAGE
==========================================================*/

.soft-about-image {
    position: relative;
    width: 100%;
    max-width: 580px;
    border-radius: 40px;
    overflow: hidden;
    background: #111;
    box-shadow: 0 45px 90px rgba(0,0,0,.45);
}

    /*==========================================================
    IMAGE
==========================================================*/

    .soft-about-image img {
        width: 100%;
        display: block;
        border-radius: 40px;
        transition: .7s;
    }

    /*==========================================================
    IMAGE HOVER
==========================================================*/

    .soft-about-image:hover img {
        transform: scale(1.05);
    }

    /*==========================================================
    IMAGE BORDER
==========================================================*/

    .soft-about-image::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 40px;
        padding: 1px;
        background: linear-gradient( 135deg, rgba(15,111,255,.55), rgba(255,143,31,.45), rgba(216,177,90,.40) );
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        z-index: 5;
    }

/*==========================================================
    BLUE GLOW
==========================================================*/

.soft-about-glow-one {
    position: absolute;
    width: 520px;
    height: 520px;
    left: -220px;
    top: 80px;
    border-radius: 50%;
    background: radial-gradient( rgba(15,111,255,.18), transparent 70% );
    filter: blur(90px);
}

/*==========================================================
    ORANGE GLOW
==========================================================*/

.soft-about-glow-two {
    position: absolute;
    width: 420px;
    height: 420px;
    right: -150px;
    bottom: 50px;
    border-radius: 50%;
    background: radial-gradient( rgba(255,143,31,.15), transparent 70% );
    filter: blur(70px);
}

/*==========================================================
    GRID OVERLAY
==========================================================*/

.soft-about-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: radial-gradient(circle, black 55%, transparent 100%);
    opacity: .35;
}

/*==========================================================
    DARK OVERLAY
==========================================================*/

.soft-about-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient( ellipse at top, rgba(15,111,255,.08), transparent 55% ), radial-gradient( ellipse at bottom right, rgba(255,143,31,.05), transparent 50% );
}

/*==========================================================
    DECORATIVE CIRCLE
==========================================================*/

.soft-about-circle {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    border: 1px dashed rgba(216,177,90,.15);
    right: 4%;
    top: 10%;
    animation: softRotate 40s linear infinite;
}

/*==========================================================
    SMALL DOTS
==========================================================*/

.soft-about-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--soft-gold);
    box-shadow: 0 0 18px rgba(216,177,90,.5);
}

    .soft-about-dot.one {
        left: 12%;
        top: 18%;
    }

    .soft-about-dot.two {
        right: 10%;
        top: 40%;
    }

    .soft-about-dot.three {
        left: 8%;
        bottom: 15%;
    }

    .soft-about-dot.four {
        right: 18%;
        bottom: 8%;
    }

/*==========================================================
    SECTION SPACING
==========================================================*/

.soft-about-content > * {
    position: relative;
    z-index: 2;
}

/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:1200px) {

    .soft-about-wrapper {
        gap: 70px;
    }

    .soft-about-image-section {
        min-height: 620px;
    }
}

@media(max-width:992px) {

    .soft-about {
        padding: 100px 0;
    }

    .soft-about-wrapper {
        grid-template-columns: 1fr;
        gap: 80px;
    }

    .soft-about-image-section {
        min-height: auto;
    }

    .soft-about-content {
        text-align: center;
    }
}

@media(max-width:768px) {

    .soft-about {
        padding: 80px 0;
    }

    .soft-about-image {
        max-width: 450px;
    }

    .soft-about-circle,
    .soft-about-dot {
        display: none;
    }
}

@media(max-width:576px) {

    .soft-about-image {
        max-width: 100%;
        border-radius: 28px;
    }

        .soft-about-image img {
            border-radius: 28px;
        }

    .soft-about-wrapper {
        gap: 60px;
    }
}

/*==========================================================
    ACCESSIBILITY
==========================================================*/

@media(prefers-reduced-motion:reduce) {

    .soft-about * {
        animation: none !important;
        transition: none !important;
    }
}

/*==========================================================
    END OF PART 2.2A
==========================================================*/

/*==========================================================
    OXIAURA SOFT LINK (PVT) LTD.
    PART 2.2B
    TYPOGRAPHY & BUTTONS
==========================================================*/

/*==========================================================
    SECTION TAG
==========================================================*/

.soft-section-tag {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
    padding: 10px 24px;
    border-radius: 60px;
    background: rgba(15,111,255,.08);
    border: 1px solid rgba(15,111,255,.18);
    color: var(--soft-gold);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.soft-tag-line {
    width: 45px;
    height: 2px;
    border-radius: 10px;
    background: linear-gradient( 90deg, var(--soft-primary), var(--soft-orange) );
}

/*==========================================================
    ABOUT TITLE
==========================================================*/

.soft-about-title {
    font-size: clamp(2.8rem,4vw,4.3rem);
    line-height: 1.15;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 30px;
    letter-spacing: -1px;
}

    .soft-about-title span {
        display: block;
        margin-top: 10px;
        background: linear-gradient( 135deg, #ffffff, var(--soft-gold), var(--soft-orange) );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

/*==========================================================
    DESCRIPTION
==========================================================*/

.soft-about-description {
    font-size: 17px;
    line-height: 1.9;
    color: rgba(255,255,255,.72);
    margin-bottom: 22px;
    max-width: 700px;
}

    /*==========================================================
    EMPHASIS
==========================================================*/

    .soft-about-description strong {
        color: #ffffff;
        font-weight: 700;
    }

/*==========================================================
    FEATURE GRID
==========================================================*/

.soft-about-features {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 18px;
    margin: 45px 0;
}

/*==========================================================
    FEATURE CARD
==========================================================*/

.soft-feature-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border-radius: 18px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    transition: .45s;
    cursor: pointer;
}

    .soft-feature-card i {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        background: linear-gradient( 135deg, var(--soft-primary), var(--soft-orange) );
        color: #fff;
        font-size: 18px;
        flex-shrink: 0;
    }

    .soft-feature-card span {
        color: #ffffff;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.6;
    }

    /*==========================================================
    FEATURE HOVER
==========================================================*/

    .soft-feature-card:hover {
        transform: translateY(-8px);
        background: rgba(255,255,255,.07);
        border-color: rgba(216,177,90,.30);
        box-shadow: 0 20px 45px rgba(15,111,255,.18);
    }

        .soft-feature-card:hover i {
            transform: rotate(-8deg) scale(1.08);
            transition: .4s;
        }

/*==========================================================
    ABOUT BOTTOM
==========================================================*/

.soft-about-bottom {
    margin-top: 55px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

/*==========================================================
    SIGNATURE
==========================================================*/

.soft-about-signature h4 {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
}

.soft-about-signature span {
    color: rgba(255,255,255,.60);
    font-size: 15px;
    letter-spacing: .5px;
}

/*==========================================================
    BUTTON
==========================================================*/

.soft-about .soft-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 36px;
    border-radius: 60px;
    text-decoration: none;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    background: linear-gradient( 135deg, var(--soft-primary), var(--soft-orange) );
    box-shadow: 0 20px 45px rgba(15,111,255,.30);
    transition: .45s;
}

    .soft-about .soft-btn-primary i {
        transition: .4s;
    }

    .soft-about .soft-btn-primary:hover {
        transform: translateY(-6px);
        box-shadow: 0 30px 70px rgba(15,111,255,.45);
    }

        .soft-about .soft-btn-primary:hover i {
            transform: translateX(8px);
        }

/*==========================================================
    CONTENT SPACING
==========================================================*/

.soft-about-content {
    display: flex;
    flex-direction: column;
}

/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:992px) {

    .soft-about-content {
        align-items: center;
    }

    .soft-about-description {
        max-width: 100%;
    }

    .soft-about-bottom {
        flex-direction: column;
        text-align: center;
    }
}

@media(max-width:768px) {

    .soft-about-title {
        font-size: 2.5rem;
    }

    .soft-about-features {
        grid-template-columns: 1fr;
    }

    .soft-about-description {
        font-size: 16px;
    }
}

@media(max-width:576px) {

    .soft-section-tag {
        font-size: 12px;
        padding: 9px 18px;
    }

    .soft-about-title {
        font-size: 2rem;
    }

    .soft-about-description {
        font-size: 15px;
        line-height: 1.8;
    }

    .soft-about .soft-btn-primary {
        width: 100%;
        justify-content: center;
    }
}

/*==========================================================
    END OF PART 2.2B
==========================================================*/
/*==========================================================
    OXIAURA SOFT LINK (PVT) LTD.
    PART 2.2C
    ABOUT IMAGE & GLASS EFFECTS
==========================================================*/

/*==========================================================
    IMAGE SECTION
==========================================================*/

.soft-about-image-section {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 720px;
    z-index: 5;
}

/*==========================================================
    MAIN IMAGE CONTAINER
==========================================================*/

.soft-about-image {
    position: relative;
    width: 100%;
    max-width: 560px;
    border-radius: 34px;
    overflow: hidden;
    background: #08131d;
    box-shadow: 0 35px 90px rgba(0,0,0,.45), 0 0 80px rgba(15,111,255,.10);
}

    /*==========================================================
    IMAGE
==========================================================*/

    .soft-about-image img {
        display: block;
        width: 100%;
        height: 720px;
        object-fit: cover;
        transition: transform .8s ease, filter .6s ease;
    }

    /*==========================================================
    IMAGE HOVER
==========================================================*/

    .soft-about-image:hover img {
        transform: scale(1.08);
        filter: saturate(1.15);
    }

    /*==========================================================
    IMAGE OVERLAY
==========================================================*/

    .soft-about-image::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( to top, rgba(0,0,0,.45), transparent 35% ), linear-gradient( 135deg, rgba(15,111,255,.10), transparent 40%, rgba(255,143,31,.10) );
        pointer-events: none;
    }

    /*==========================================================
    PREMIUM BORDER
==========================================================*/

    .soft-about-image::before {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: 36px;
        padding: 2px;
        background: linear-gradient( 135deg, rgba(15,111,255,.60), rgba(255,143,31,.50), rgba(216,177,90,.60) );
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        z-index: 5;
    }

/*==========================================================
    EXPERIENCE BADGE
==========================================================*/

.soft-about-badge {
    position: absolute;
    left: -35px;
    bottom: 70px;
    width: 165px;
    height: 165px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: linear-gradient( 135deg, rgba(15,111,255,.95), rgba(255,143,31,.92) );
    color: #fff;
    box-shadow: 0 25px 60px rgba(15,111,255,.35);
    border: 6px solid rgba(255,255,255,.12);
    z-index: 20;
}

.soft-badge-number {
    font-size: 48px;
    font-weight: 800;
    line-height: 1;
}

.soft-badge-text {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: .6px;
}

/*==========================================================
    FLOATING GLASS CARD
==========================================================*/

.soft-about-floating-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 18px;
    width: 280px;
    padding: 18px 22px;
    border-radius: 22px;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    background: linear-gradient( 135deg, rgba(255,255,255,.15), rgba(255,255,255,.05) );
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 25px 55px rgba(0,0,0,.28);
    transition: .45s;
    overflow: hidden;
    z-index: 15;
}

    /*==========================================================
    CARD SHINE
==========================================================*/

    .soft-about-floating-card::before {
        content: "";
        position: absolute;
        top: -40%;
        left: -150%;
        width: 70%;
        height: 200%;
        transform: rotate(20deg);
        background: linear-gradient( transparent, rgba(255,255,255,.45), transparent );
    }

    .soft-about-floating-card:hover::before {
        animation: softAboutShine .9s linear;
    }

/*==========================================================
    ICON
==========================================================*/

.soft-floating-icon {
    width: 62px;
    height: 62px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 18px;
    flex-shrink: 0;
    font-size: 24px;
    color: #fff;
    background: linear-gradient( 135deg, var(--soft-primary), var(--soft-orange) );
    box-shadow: 0 12px 28px rgba(15,111,255,.30);
}

/*==========================================================
    CARD CONTENT
==========================================================*/

.soft-about-floating-card h4 {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px;
}

.soft-about-floating-card p {
    color: rgba(255,255,255,.70);
    font-size: 13px;
    line-height: 1.6;
}

/*==========================================================
    CARD POSITIONS
==========================================================*/

.soft-floating-one {
    top: 8%;
    right: -45px;
}

.soft-floating-two {
    left: -45px;
    bottom: 12%;
}

/*==========================================================
    CARD HOVER
==========================================================*/

.soft-about-floating-card:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: rgba(216,177,90,.35);
    box-shadow: 0 30px 70px rgba(15,111,255,.22);
}

    .soft-about-floating-card:hover .soft-floating-icon {
        transform: rotate(-10deg) scale(1.08);
        transition: .4s;
    }

/*==========================================================
    IMAGE GLOW
==========================================================*/

.soft-about-image-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient( rgba(15,111,255,.15), transparent 70% );
    filter: blur(90px);
    z-index: -1;
}

/*==========================================================
    KEYFRAMES
==========================================================*/

@keyframes softAboutShine {

    0% {
        left: -150%;
    }

    100% {
        left: 180%;
    }
}

/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:1200px) {

    .soft-about-image {
        max-width: 500px;
    }

    .soft-about-floating-card {
        width: 250px;
    }
}

@media(max-width:992px) {

    .soft-about-image {
        max-width: 520px;
    }

    .soft-about-badge {
        left: 20px;
        bottom: -30px;
    }

    .soft-floating-one {
        top: -20px;
        right: 20px;
    }

    .soft-floating-two {
        left: 20px;
        bottom: 30px;
    }
}

@media(max-width:768px) {

    .soft-about-image {
        max-width: 100%;
    }

        .soft-about-image img {
            height: auto;
        }

    .soft-about-badge {
        width: 120px;
        height: 120px;
    }

    .soft-badge-number {
        font-size: 34px;
    }

    .soft-about-floating-card {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        width: 100%;
        margin-top: 20px;
    }
}

@media(max-width:576px) {

    .soft-about-badge {
        display: none;
    }

    .soft-about-floating-card {
        padding: 16px;
        gap: 14px;
    }

    .soft-floating-icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .soft-about-floating-card h4 {
        font-size: 16px;
    }

    .soft-about-floating-card p {
        font-size: 12px;
    }
}

/*==========================================================
    END OF PART 2.2C
==========================================================*/

/*==========================================================
    OXIAURA SOFT LINK (PVT) LTD.
    PART 2.2D
    FEATURE CARDS
==========================================================*/

/*==========================================================
    FEATURE SECTION
==========================================================*/

.soft-about-features {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 22px;
    margin: 55px 0;
    position: relative;
}

/*==========================================================
    FEATURE CARD
==========================================================*/

.soft-feature-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px;
    min-height: 105px;
    overflow: hidden;
    cursor: pointer;
    border-radius: 24px;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    background: linear-gradient( 135deg, rgba(255,255,255,.08), rgba(255,255,255,.03) );
    border: 1px solid rgba(255,255,255,.08);
    transition: all .45s cubic-bezier(.23,1,.32,1);
    box-shadow: 0 20px 45px rgba(0,0,0,.18);
}

    /*==========================================================
    GLASS SHINE
==========================================================*/

    .soft-feature-card::before {
        content: "";
        position: absolute;
        top: -35%;
        left: -160%;
        width: 65%;
        height: 200%;
        transform: rotate(22deg);
        background: linear-gradient( transparent, rgba(255,255,255,.45), transparent );
    }

    .soft-feature-card:hover::before {
        animation: softFeatureShine .9s linear;
    }

    /*==========================================================
    GRADIENT BORDER
==========================================================*/

    .soft-feature-card::after {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: 24px;
        padding: 1px;
        background: linear-gradient( 135deg, rgba(15,111,255,.70), rgba(255,143,31,.55), rgba(216,177,90,.70) );
        opacity: 0;
        transition: .45s;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

    .soft-feature-card:hover::after {
        opacity: 1;
    }

    /*==========================================================
    ICON
==========================================================*/

    .soft-feature-card i {
        width: 62px;
        height: 62px;
        border-radius: 18px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        font-size: 24px;
        color: #ffffff;
        background: linear-gradient( 135deg, var(--soft-primary), var(--soft-orange) );
        box-shadow: 0 12px 30px rgba(15,111,255,.28);
        transition: .45s;
    }

    /*==========================================================
    TEXT
==========================================================*/

    .soft-feature-card span {
        color: #ffffff;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.7;
        transition: .35s;
    }

    /*==========================================================
    CARD GLOW
==========================================================*/

    .soft-feature-card .soft-feature-glow {
        position: absolute;
        width: 180px;
        height: 180px;
        right: -90px;
        top: -90px;
        border-radius: 50%;
        background: radial-gradient( rgba(15,111,255,.22), transparent 70% );
        opacity: 0;
        filter: blur(35px);
        transition: .45s;
    }

    /*==========================================================
    HOVER
==========================================================*/

    .soft-feature-card:hover {
        transform: translateY(-10px) scale(1.03);
        border-color: rgba(216,177,90,.30);
        background: linear-gradient( 135deg, rgba(255,255,255,.13), rgba(255,255,255,.05) );
        box-shadow: 0 30px 70px rgba(15,111,255,.18), 0 15px 35px rgba(0,0,0,.25);
    }

        .soft-feature-card:hover .soft-feature-glow {
            opacity: 1;
        }

        .soft-feature-card:hover i {
            transform: rotate(-10deg) scale(1.12);
            box-shadow: 0 18px 40px rgba(15,111,255,.40);
        }

        .soft-feature-card:hover span {
            color: var(--soft-gold-light);
        }

    /*==========================================================
    ACTIVE
==========================================================*/

    .soft-feature-card:active {
        transform: scale(.98);
    }

    /*==========================================================
    STAGGER ENTRANCE
==========================================================*/

    .soft-feature-card:nth-child(1) {
        animation: softFeatureAppear .8s ease forwards;
    }

    .soft-feature-card:nth-child(2) {
        animation: softFeatureAppear .8s .15s ease forwards;
    }

    .soft-feature-card:nth-child(3) {
        animation: softFeatureAppear .8s .3s ease forwards;
    }

    .soft-feature-card:nth-child(4) {
        animation: softFeatureAppear .8s .45s ease forwards;
    }

/*==========================================================
    KEYFRAMES
==========================================================*/

@keyframes softFeatureAppear {

    0% {
        opacity: 0;
        transform: translateY(40px) scale(.92);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes softFeatureShine {

    0% {
        left: -170%;
    }

    100% {
        left: 180%;
    }
}

/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:992px) {

    .soft-about-features {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media(max-width:768px) {

    .soft-feature-card {
        padding: 20px;
        min-height: 90px;
    }

        .soft-feature-card i {
            width: 56px;
            height: 56px;
            font-size: 22px;
        }

        .soft-feature-card span {
            font-size: 15px;
        }
}

@media(max-width:576px) {

    .soft-feature-card {
        padding: 18px;
        gap: 15px;
        border-radius: 20px;
    }

        .soft-feature-card i {
            width: 50px;
            height: 50px;
            font-size: 20px;
            border-radius: 15px;
        }

        .soft-feature-card span {
            font-size: 14px;
            line-height: 1.6;
        }
}

/*==========================================================
    REDUCED MOTION
==========================================================*/

@media(prefers-reduced-motion:reduce) {

    .soft-feature-card,
    .soft-feature-card i {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/*==========================================================
    END OF PART 2.2D
==========================================================*/

/*==========================================================
    OXIAURA SOFT LINK (PVT) LTD.
    PART 2.2A
    MINIMAL FUTURISTIC LAYOUT
==========================================================*/

/*==========================================================
    ABOUT SECTION
==========================================================*/

.soft-about {
    position: relative;
    overflow: hidden;
    padding: 140px 0;
    background: linear-gradient( 180deg, #050B15 0%, #081321 40%, #07111B 100% );
}

    /*==========================================================
    CONTAINER
==========================================================*/

    .soft-about .soft-container {
        width: min(1400px,92%);
        margin: auto;
        position: relative;
        z-index: 5;
    }

/*==========================================================
    GRID LAYOUT
==========================================================*/

.soft-about-wrapper {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 90px;
    align-items: center;
}

/*==========================================================
    LEFT CONTENT
==========================================================*/

.soft-about-content {
    position: relative;
    z-index: 2;
}

/*==========================================================
    RIGHT IMAGE
==========================================================*/

.soft-about-image-area {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*==========================================================
    IMAGE FRAME
==========================================================*/

.soft-about-image-frame {
    position: relative;
    width: 100%;
    max-width: 580px;
    border-radius: 34px;
    overflow: hidden;
    background: rgba(255,255,255,.03);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 45px 100px rgba(0,0,0,.45), 0 0 80px rgba(15,111,255,.08);
}

    /*==========================================================
    IMAGE
==========================================================*/

    .soft-about-image-frame img {
        display: block;
        width: 100%;
        height: 720px;
        object-fit: cover;
        transition: .8s;
    }

    /*==========================================================
    IMAGE HOVER
==========================================================*/

    .soft-about-image-frame:hover img {
        transform: scale(1.05);
    }

/*==========================================================
    PREMIUM BORDER
==========================================================*/

.soft-frame-border {
    position: absolute;
    inset: 0;
    border-radius: 34px;
    padding: 1px;
    background: linear-gradient( 135deg, rgba(15,111,255,.65), rgba(255,143,31,.45), rgba(216,177,90,.45) );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 5;
}

/*==========================================================
    IMAGE OVERLAY
==========================================================*/

.soft-about-image-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(5,11,21,.65), transparent 45% ), linear-gradient( 135deg, rgba(15,111,255,.10), transparent, rgba(255,143,31,.08) );
}

/*==========================================================
    IMAGE CAPTION
==========================================================*/

.soft-image-caption {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 30px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border-radius: 18px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.08);
    z-index: 10;
}

.soft-caption-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #00ff9d;
    box-shadow: 0 0 18px #00ff9d;
}

.soft-image-caption span {
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .5px;
}

/*==========================================================
    BACKGROUND GRID
==========================================================*/

.soft-about-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: .45;
    mask-image: radial-gradient(circle, black 60%, transparent 100%);
}

/*==========================================================
    OVERLAY
==========================================================*/

.soft-about-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient( circle at top left, rgba(15,111,255,.10), transparent 35% ), radial-gradient( circle at bottom right, rgba(255,143,31,.08), transparent 35% );
}

/*==========================================================
    LEFT GLOW
==========================================================*/

.soft-glow-left {
    position: absolute;
    width: 550px;
    height: 550px;
    left: -250px;
    top: 0;
    border-radius: 50%;
    background: radial-gradient( rgba(15,111,255,.18), transparent 70% );
    filter: blur(90px);
}

/*==========================================================
    RIGHT GLOW
==========================================================*/

.soft-glow-right {
    position: absolute;
    width: 420px;
    height: 420px;
    right: -150px;
    bottom: 50px;
    border-radius: 50%;
    background: radial-gradient( rgba(255,143,31,.15), transparent 70% );
    filter: blur(80px);
}

/*==========================================================
    SECTION SPACING
==========================================================*/

.soft-about-content > * {
    position: relative;
    z-index: 2;
}

    .soft-about-content > * + * {
        margin-top: 26px;
    }

/*==========================================================
    IMAGE SHADOW
==========================================================*/

.soft-about-image-frame {
    isolation: isolate;
}

    .soft-about-image-frame::before {
        content: "";
        position: absolute;
        width: 80%;
        height: 35px;
        left: 10%;
        bottom: -18px;
        border-radius: 50%;
        background: rgba(0,0,0,.55);
        filter: blur(20px);
        z-index: -1;
    }

/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:1200px) {

    .soft-about-wrapper {
        gap: 60px;
    }

    .soft-about-image-frame {
        max-width: 500px;
    }

        .soft-about-image-frame img {
            height: 620px;
        }
}

@media(max-width:992px) {

    .soft-about {
        padding: 100px 0;
    }

    .soft-about-wrapper {
        grid-template-columns: 1fr;
        gap: 70px;
    }

    .soft-about-content {
        text-align: center;
    }

    .soft-about-image-frame {
        max-width: 620px;
        margin: auto;
    }
}

@media(max-width:768px) {

    .soft-about {
        padding: 80px 0;
    }

    .soft-about-image-frame img {
        height: auto;
    }

    .soft-image-caption {
        left: 20px;
        right: 20px;
        bottom: 20px;
        padding: 15px 18px;
    }
}

@media(max-width:576px) {

    .soft-about-wrapper {
        gap: 50px;
    }

    .soft-about-image-frame {
        border-radius: 24px;
    }

    .soft-frame-border {
        border-radius: 24px;
    }

    .soft-image-caption {
        font-size: 14px;
        padding: 14px 16px;
    }

        .soft-image-caption span {
            font-size: 13px;
        }
}
/*=========================================
    MOBILE - MOVE ABOUT SECTION UP
=========================================*/
@media (max-width:768px) {

    .soft-about {
        margin-top: -120px !important; /* Increase/decrease as needed */
        padding-top: 40px !important;
    }

    .soft-container {
        padding-top: 0 !important;
    }

    .soft-about-wrapper {
        gap: 40px;
    }
}
/*==========================================================
    ACCESSIBILITY
==========================================================*/

@media(prefers-reduced-motion:reduce) {

    .soft-about * {
        animation: none !important;
        transition: none !important;
    }
}

/*==========================================================
    END OF PART 2.2A
==========================================================*/
/*==========================================================
    OXIAURA SOFT LINK (PVT) LTD.
    PART 2.2B
    TYPOGRAPHY & FEATURE LIST
==========================================================*/

/*==========================================================
    ABOUT TAG
==========================================================*/

.soft-about-tag {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 12px 24px;
    margin-bottom: 28px;
    border-radius: 60px;
    background: rgba(15,111,255,.08);
    border: 1px solid rgba(15,111,255,.18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    color: var(--soft-gold);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.soft-tag-line {
    width: 45px;
    height: 2px;
    border-radius: 10px;
    background: linear-gradient( 90deg, var(--soft-primary), var(--soft-orange) );
}

/*==========================================================
    HEADING
==========================================================*/

.soft-about-title {
    font-size: clamp(3rem,5vw,4.8rem);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -1.5px;
    color: #ffffff;
    margin-bottom: 35px;
}

    .soft-about-title span {
        display: block;
        margin: 12px 0;
        background: linear-gradient( 135deg, #ffffff, #84b9ff, var(--soft-orange), var(--soft-gold) );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .soft-about-title strong {
        color: #ffffff;
        font-weight: 800;
    }

/*==========================================================
    DESCRIPTION
==========================================================*/

.soft-about-description {
    max-width: 700px;
    color: rgba(255,255,255,.72);
    font-size: 17px;
    line-height: 2;
    margin-bottom: 22px;
}

    .soft-about-description:last-of-type {
        margin-bottom: 45px;
    }

/*==========================================================
    FEATURE LIST
==========================================================*/

.soft-about-features {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 22px;
    margin-bottom: 55px;
}

/*==========================================================
    FEATURE ITEM
==========================================================*/

.soft-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 24px;
    border-radius: 22px;
    position: relative;
    overflow: hidden;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: .45s cubic-bezier(.23,1,.32,1);
}

    /*==========================================================
    LEFT ACCENT
==========================================================*/

    .soft-feature-item::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient( to bottom, var(--soft-primary), var(--soft-orange) );
    }

/*==========================================================
    ICON
==========================================================*/

.soft-feature-icon {
    width: 62px;
    height: 62px;
    min-width: 62px;
    border-radius: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient( 135deg, rgba(15,111,255,.15), rgba(255,143,31,.15) );
    border: 1px solid rgba(255,255,255,.08);
    color: #ffffff;
    font-size: 24px;
    transition: .45s;
}

    .soft-feature-icon i {
        transition: .4s;
    }

/*==========================================================
    FEATURE TITLE
==========================================================*/

.soft-feature-item h4 {
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}

/*==========================================================
    FEATURE TEXT
==========================================================*/

.soft-feature-item p {
    color: rgba(255,255,255,.65);
    font-size: 14px;
    line-height: 1.8;
}

/*==========================================================
    HOVER EFFECT
==========================================================*/

.soft-feature-item:hover {
    transform: translateY(-10px);
    border-color: rgba(15,111,255,.30);
    background: rgba(255,255,255,.07);
    box-shadow: 0 30px 70px rgba(15,111,255,.15);
}

    .soft-feature-item:hover .soft-feature-icon {
        transform: rotate(-10deg) scale(1.08);
        background: linear-gradient( 135deg, var(--soft-primary), var(--soft-orange) );
        box-shadow: 0 18px 40px rgba(15,111,255,.30);
    }

        .soft-feature-item:hover .soft-feature-icon i {
            transform: scale(1.1);
        }

    .soft-feature-item:hover h4 {
        color: var(--soft-gold);
    }

/*==========================================================
    BUTTON AREA
==========================================================*/

.soft-about-footer {
    margin-top: 10px;
}

/*==========================================================
    BUTTON
==========================================================*/

.soft-about .soft-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 18px 38px;
    border-radius: 60px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient( 135deg, var(--soft-primary), var(--soft-orange) );
    box-shadow: 0 20px 50px rgba(15,111,255,.28);
    transition: .45s;
}

    .soft-about .soft-btn-primary i {
        transition: .35s;
    }

    .soft-about .soft-btn-primary:hover {
        transform: translateY(-6px);
        box-shadow: 0 30px 70px rgba(15,111,255,.45);
    }

        .soft-about .soft-btn-primary:hover i {
            transform: translateX(8px);
        }

/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:992px) {

    .soft-about-content {
        text-align: center;
    }

    .soft-about-description {
        margin-left: auto;
        margin-right: auto;
    }

    .soft-about-features {
        grid-template-columns: 1fr;
    }

    .soft-about-tag {
        justify-content: center;
    }
}

@media(max-width:768px) {

    .soft-about-title {
        font-size: 2.6rem;
    }

    .soft-about-description {
        font-size: 16px;
    }

    .soft-feature-item {
        padding: 20px;
    }

        .soft-feature-item h4 {
            font-size: 18px;
        }
}

@media(max-width:576px) {

    .soft-about-title {
        font-size: 2rem;
        line-height: 1.25;
    }

    .soft-about-description {
        font-size: 15px;
        line-height: 1.8;
    }

    .soft-feature-item {
        flex-direction: column;
        text-align: center;
        align-items: center;
        padding: 22px;
    }

    .soft-feature-icon {
        margin-bottom: 8px;
    }

    .soft-about .soft-btn-primary {
        width: 100%;
        justify-content: center;
    }
}

/*==========================================================
    END OF PART 2.2B
==========================================================*/
/*==========================================================
    OXIAURA SOFT LINK (PVT) LTD.
    PART 2.2C
    PREMIUM IMAGE & GLASS EFFECTS
==========================================================*/

/*==========================================================
    IMAGE AREA
==========================================================*/

.soft-about-image-area {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 720px;
}

/*==========================================================
    FUTURISTIC IMAGE FRAME
==========================================================*/

.soft-about-image-frame {
    position: relative;
    width: 100%;
    max-width: 600px;
    border-radius: 36px;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient( 135deg, rgba(255,255,255,.08), rgba(255,255,255,.02) );
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 40px 100px rgba(0,0,0,.45), 0 0 80px rgba(15,111,255,.10);
}

    /*==========================================================
    IMAGE
==========================================================*/

    .soft-about-image-frame img {
        width: 100%;
        height: 720px;
        display: block;
        object-fit: cover;
        transition: transform .9s ease, filter .7s ease;
    }

    /*==========================================================
    IMAGE HOVER
==========================================================*/

    .soft-about-image-frame:hover img {
        transform: scale(1.07);
        filter: brightness(1.05) saturate(1.15);
    }

/*==========================================================
    PREMIUM BORDER
==========================================================*/

.soft-frame-border {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    border-radius: 36px;
    padding: 1.5px;
    background: linear-gradient( 135deg, rgba(15,111,255,.70), rgba(255,143,31,.50), rgba(216,177,90,.60) );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/*==========================================================
    IMAGE OVERLAY
==========================================================*/

.soft-about-image-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient( to top, rgba(5,11,21,.70), transparent 45% ), linear-gradient( 135deg, rgba(15,111,255,.08), transparent 45%, rgba(255,143,31,.10) );
}

/*==========================================================
    TOP LIGHT
==========================================================*/

.soft-about-image-frame::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 160px;
    background: linear-gradient( to bottom, rgba(255,255,255,.10), transparent );
    z-index: 2;
}

/*==========================================================
    IMAGE GLOW
==========================================================*/

.soft-about-image-area::before {
    content: "";
    position: absolute;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient( rgba(15,111,255,.18), transparent 70% );
    filter: blur(90px);
    z-index: -2;
}

/*==========================================================
    SECONDARY GLOW
==========================================================*/

.soft-about-image-area::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -120px;
    bottom: 20px;
    border-radius: 50%;
    background: radial-gradient( rgba(255,143,31,.15), transparent 70% );
    filter: blur(80px);
    z-index: -2;
}

/*==========================================================
    IMAGE CAPTION
==========================================================*/

.soft-image-caption {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 30px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 24px;
    border-radius: 18px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.10);
}

/*==========================================================
    STATUS DOT
==========================================================*/

.soft-caption-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #00ff9d;
    box-shadow: 0 0 18px #00ff9d, 0 0 40px #00ff9d;
    animation: softPulse 2s infinite;
}

/*==========================================================
    CAPTION TEXT
==========================================================*/

.soft-image-caption span {
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .5px;
}

/*==========================================================
    FRAME HOVER
==========================================================*/

.soft-about-image-frame:hover {
    transform: translateY(-12px);
    box-shadow: 0 50px 120px rgba(0,0,0,.50), 0 0 100px rgba(15,111,255,.20);
}

/*==========================================================
    SHINE EFFECT
==========================================================*/

.soft-about-image-frame .soft-frame-border::after {
    content: "";
    position: absolute;
    top: -40%;
    left: -160%;
    width: 60%;
    height: 200%;
    transform: rotate(22deg);
    background: linear-gradient( transparent, rgba(255,255,255,.45), transparent );
}

.soft-about-image-frame:hover .soft-frame-border::after {
    animation: softFrameShine 1s linear;
}

/*==========================================================
    KEYFRAMES
==========================================================*/

@keyframes softPulse {

    0%,100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.5);
        opacity: .5;
    }
}

@keyframes softFrameShine {

    0% {
        left: -160%;
    }

    100% {
        left: 180%;
    }
}

/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:1200px) {

    .soft-about-image-frame {
        max-width: 520px;
    }

        .soft-about-image-frame img {
            height: 640px;
        }
}

@media(max-width:992px) {

    .soft-about-image-area {
        min-height: auto;
    }

    .soft-about-image-frame {
        max-width: 620px;
        margin: auto;
    }
}

@media(max-width:768px) {

    .soft-about-image-frame {
        border-radius: 28px;
    }

    .soft-frame-border {
        border-radius: 28px;
    }

    .soft-about-image-frame img {
        height: auto;
    }

    .soft-image-caption {
        left: 20px;
        right: 20px;
        bottom: 20px;
        padding: 15px 18px;
    }
}

@media(max-width:576px) {

    .soft-about-image-frame {
        border-radius: 22px;
    }

    .soft-frame-border {
        border-radius: 22px;
    }

    .soft-image-caption {
        padding: 14px 16px;
        gap: 12px;
    }

        .soft-image-caption span {
            font-size: 13px;
        }

    .soft-caption-dot {
        width: 10px;
        height: 10px;
    }
}

/*==========================================================
    ACCESSIBILITY
==========================================================*/

@media(prefers-reduced-motion:reduce) {

    .soft-about-image-frame,
    .soft-about-image-frame img,
    .soft-caption-dot {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/*==========================================================
    END OF PART 2.2C
==========================================================*/

/*==========================================================
    OXIAURA SOFT LINK (PVT) LTD.
    PART 2.2D
    PREMIUM ANIMATIONS & RESPONSIVE
==========================================================*/

/*==========================================================
    SECTION ENTRANCE
==========================================================*/

.soft-about-content {
    animation: softFadeLeft 1s ease forwards;
}

.soft-about-image-area {
    animation: softFadeRight 1s .2s ease forwards;
}

.soft-about-content,
.soft-about-image-area {
    opacity: 0;
}

/*==========================================================
    HEADING ANIMATION
==========================================================*/

.soft-about-title {
    animation: softTextReveal 1.2s ease forwards;
}

    .soft-about-title span {
        animation: softGradientMove 6s linear infinite;
        background-size: 250% auto;
    }

/*==========================================================
    FEATURE CARDS
==========================================================*/

.soft-feature-item {
    animation: softFadeUp .8s ease forwards;
    opacity: 0;
}

    .soft-feature-item:nth-child(1) {
        animation-delay: .25s;
    }

    .soft-feature-item:nth-child(2) {
        animation-delay: .45s;
    }

    .soft-feature-item:nth-child(3) {
        animation-delay: .65s;
    }

    .soft-feature-item:nth-child(4) {
        animation-delay: .85s;
    }

/*==========================================================
    IMAGE FLOAT
==========================================================*/

.soft-about-image-frame {
    animation: softImageFloat 7s ease-in-out infinite;
}

/*==========================================================
    IMAGE GLOW
==========================================================*/

.soft-glow-left {
    animation: softGlowBlue 8s ease-in-out infinite;
}

.soft-glow-right {
    animation: softGlowOrange 10s ease-in-out infinite;
}

/*==========================================================
    GRID MOVEMENT
==========================================================*/

.soft-about-grid {
    animation: softGridMove 35s linear infinite;
}

/*==========================================================
    TAG FLOAT
==========================================================*/

.soft-about-tag {
    animation: softTagFloat 5s ease-in-out infinite;
}

/*==========================================================
    BUTTON GLOW
==========================================================*/

.soft-about .soft-btn-primary {
    animation: softButtonGlow 4s ease infinite;
}

/*==========================================================
    HOVER EFFECTS
==========================================================*/

.soft-feature-item:hover {
    transform: translateY(-10px) scale(1.02);
}

.soft-about-image-frame:hover {
    transform: translateY(-12px) scale(1.015);
}

.soft-about-tag:hover {
    transform: translateY(-3px);
}

.soft-about .soft-btn-primary:hover {
    transform: translateY(-6px);
}

/*==========================================================
    KEYFRAMES
==========================================================*/

@keyframes softFadeLeft {

    0% {
        opacity: 0;
        transform: translateX(-70px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes softFadeRight {

    0% {
        opacity: 0;
        transform: translateX(70px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes softFadeUp {

    0% {
        opacity: 0;
        transform: translateY(45px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes softImageFloat {

    0%,100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }
}

@keyframes softGlowBlue {

    0%,100% {
        opacity: .45;
        transform: scale(1);
    }

    50% {
        opacity: .8;
        transform: scale(1.18);
    }
}

@keyframes softGlowOrange {

    0%,100% {
        opacity: .30;
        transform: scale(1);
    }

    50% {
        opacity: .65;
        transform: scale(1.12);
    }
}

@keyframes softTagFloat {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

@keyframes softGridMove {

    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 60px 60px;
    }
}

@keyframes softGradientMove {

    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 250% center;
    }
}

@keyframes softTextReveal {

    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes softButtonGlow {

    0%,100% {
        box-shadow: 0 18px 45px rgba(15,111,255,.30);
    }

    50% {
        box-shadow: 0 28px 65px rgba(15,111,255,.55);
    }
}

/*==========================================================
    GLOBAL TRANSITIONS
==========================================================*/

.soft-about * {
    transition: transform .35s ease, color .35s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease, opacity .35s ease;
}

/*==========================================================
    PERFORMANCE
==========================================================*/

.soft-about-image-frame,
.soft-feature-item,
.soft-about-tag,
.soft-btn-primary {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:1200px) {

    .soft-about-wrapper {
        gap: 60px;
    }
}

@media(max-width:992px) {

    .soft-about {
        padding: 100px 0;
    }

    .soft-about-wrapper {
        grid-template-columns: 1fr;
        gap: 70px;
    }

    .soft-about-content {
        text-align: center;
        order: 2;
    }

    .soft-about-image-area {
        order: 1;
    }

    .soft-about-features {
        grid-template-columns: 1fr;
    }
}

@media(max-width:768px) {

    .soft-about {
        padding: 80px 0;
    }

    .soft-about-title {
        font-size: 2.5rem;
    }

    .soft-about-description {
        font-size: 16px;
    }

    .soft-feature-item {
        padding: 20px;
    }

    .soft-about-image-frame {
        max-width: 100%;
    }

    .soft-image-caption {
        left: 20px;
        right: 20px;
    }
}

@media(max-width:576px) {

    .soft-about {
        padding: 70px 0;
    }

    .soft-about-title {
        font-size: 2rem;
        line-height: 1.25;
    }

    .soft-about-description {
        font-size: 15px;
    }

    .soft-about-tag {
        font-size: 11px;
        padding: 10px 18px;
    }

    .soft-feature-item {
        padding: 18px;
        flex-direction: column;
        text-align: center;
    }

    .soft-feature-icon {
        margin-bottom: 12px;
    }

    .soft-about .soft-btn-primary {
        width: 100%;
        justify-content: center;
    }

    .soft-image-caption {
        padding: 14px 16px;
    }

        .soft-image-caption span {
            font-size: 13px;
        }
}

/*==========================================================
    TOUCH DEVICES
==========================================================*/

@media(hover:none) {

    .soft-feature-item:hover,
    .soft-about-image-frame:hover,
    .soft-about-tag:hover,
    .soft-btn-primary:hover {
        transform: none;
    }
}

/*==========================================================
    REDUCED MOTION
==========================================================*/

@media(prefers-reduced-motion:reduce) {

    .soft-about *,
    .soft-about *::before,
    .soft-about *::after {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        scroll-behavior: auto !important;
    }
}

/*==========================================================
    PRINT
==========================================================*/

@media print {

    .soft-about {
        background: #fff !important;
        color: #000 !important;
    }

    .soft-about-grid,
    .soft-about-overlay,
    .soft-glow-left,
    .soft-glow-right {
        display: none !important;
    }

    .soft-about-title,
    .soft-about-description,
    .soft-feature-item h4,
    .soft-feature-item p {
        color: #000 !important;
    }
}

/*==========================================================
    END OF PART 2.2D
==========================================================*/

/*==========================================================
    OXIAURA SOFT LINK (PVT) LTD.
    PART 3.2A
    SERVICES LAYOUT & FUTURISTIC BACKGROUND
==========================================================*/

/*==========================================================
    SERVICES SECTION
==========================================================*/

.soft-services {
    position: relative;
    overflow: hidden;
    padding: 140px 0;
    background: linear-gradient( 180deg, #050B15 0%, #071320 45%, #050B15 100% );
    isolation: isolate;
}

    /*==========================================================
    CONTAINER
==========================================================*/

    .soft-services .soft-container {
        width: min(1400px,92%);
        margin: auto;
        position: relative;
        z-index: 10;
    }

/*==========================================================
    GRID LAYOUT
==========================================================*/

.soft-services-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 35px;
    margin-top: 70px;
}

/*==========================================================
    HEADER
==========================================================*/

.soft-services-header {
    max-width: 820px;
    margin: 0 auto 30px;
    text-align: center;
    position: relative;
    z-index: 5;
}

/*==========================================================
    FOOTER
==========================================================*/

.soft-services-footer {
    margin-top: 80px;
    text-align: center;
    position: relative;
    z-index: 5;
}

/*==========================================================
    BACKGROUND OVERLAY
==========================================================*/

.soft-services-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient( circle at top left, rgba(15,111,255,.12), transparent 35% ), radial-gradient( circle at bottom right, rgba(255,143,31,.08), transparent 35% ), linear-gradient( 180deg, rgba(255,255,255,.01), transparent );
    pointer-events: none;
}

/*==========================================================
    DIGITAL GRID
==========================================================*/

.soft-services-grid {
    position: absolute;
    inset: 0;
    opacity: .28;
    background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 70px 70px;
    mask-image: radial-gradient(circle, black 55%, transparent 100%);
    animation: softServicesGridMove 35s linear infinite;
}

/*==========================================================
    BLUE GLOW
==========================================================*/

.soft-services-glow-left {
    position: absolute;
    width: 650px;
    height: 650px;
    left: -260px;
    top: -120px;
    border-radius: 50%;
    background: radial-gradient( rgba(15,111,255,.20), transparent 70% );
    filter: blur(90px);
    animation: softBlueGlow 9s ease-in-out infinite;
}

/*==========================================================
    ORANGE GLOW
==========================================================*/

.soft-services-glow-right {
    position: absolute;
    width: 500px;
    height: 500px;
    right: -180px;
    bottom: -80px;
    border-radius: 50%;
    background: radial-gradient( rgba(255,143,31,.16), transparent 70% );
    filter: blur(90px);
    animation: softOrangeGlow 10s ease-in-out infinite;
}

/*==========================================================
    DECORATIVE TOP LINE
==========================================================*/

.soft-services::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    height: 2px;
    border-radius: 50px;
    background: linear-gradient( 90deg, transparent, var(--soft-primary), var(--soft-orange), transparent );
    box-shadow: 0 0 25px rgba(15,111,255,.45);
}

/*==========================================================
    DECORATIVE BOTTOM LINE
==========================================================*/

.soft-services::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    height: 2px;
    border-radius: 50px;
    background: linear-gradient( 90deg, transparent, rgba(255,255,255,.35), transparent );
}

/*==========================================================
    SECTION SPACING
==========================================================*/

.soft-services-header > * + * {
    margin-top: 24px;
}

.soft-services-footer > * + * {
    margin-top: 25px;
}

/*==========================================================
    ANIMATIONS
==========================================================*/

@keyframes softServicesGridMove {

    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 70px 70px;
    }
}

@keyframes softBlueGlow {

    0%,100% {
        transform: scale(1);
        opacity: .55;
    }

    50% {
        transform: scale(1.18);
        opacity: .9;
    }
}

@keyframes softOrangeGlow {

    0%,100% {
        transform: scale(1);
        opacity: .45;
    }

    50% {
        transform: scale(1.12);
        opacity: .75;
    }
}

/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:1200px) {

    .soft-services-grid-wrapper {
        grid-template-columns: repeat(2,1fr);
        gap: 30px;
    }
}

@media(max-width:992px) {

    .soft-services {
        padding: 110px 0;
    }

    .soft-services-header {
        max-width: 700px;
    }
}

@media(max-width:768px) {

    .soft-services {
        padding: 90px 0;
    }

    .soft-services-grid-wrapper {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-top: 55px;
    }

    .soft-services-footer {
        margin-top: 60px;
    }
}

@media(max-width:576px) {

    .soft-services {
        padding: 70px 0;
    }

    .soft-services-header {
        width: 100%;
    }

    .soft-services-glow-left {
        width: 380px;
        height: 380px;
        left: -180px;
    }

    .soft-services-glow-right {
        width: 320px;
        height: 320px;
        right: -140px;
    }
}

/*==========================================================
    PERFORMANCE
==========================================================*/

.soft-services,
.soft-services-grid,
.soft-services-glow-left,
.soft-services-glow-right {
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/*==========================================================
    REDUCED MOTION
==========================================================*/

@media(prefers-reduced-motion:reduce) {

    .soft-services-grid,
    .soft-services-glow-left,
    .soft-services-glow-right {
        animation: none;
    }
}

/*==========================================================
    END OF PART 3.2A
==========================================================*/
/*==========================================================
    OXIAURA SOFT LINK (PVT) LTD.
    PART 3.2B
    SECTION TYPOGRAPHY
==========================================================*/

/*==========================================================
    SERVICES TAG
==========================================================*/

.soft-services-tag {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 12px 28px;
    border-radius: 60px;
    background: rgba(15,111,255,.08);
    border: 1px solid rgba(15,111,255,.18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    color: var(--soft-gold);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: .45s ease;
}

    /*==========================================================
    TAG LINE
==========================================================*/

    .soft-services-tag .soft-tag-line {
        width: 48px;
        height: 2px;
        border-radius: 10px;
        background: linear-gradient( 90deg, var(--soft-primary), var(--soft-orange) );
    }

    /*==========================================================
    TAG HOVER
==========================================================*/

    .soft-services-tag:hover {
        transform: translateY(-4px);
        border-color: rgba(15,111,255,.35);
        box-shadow: 0 18px 40px rgba(15,111,255,.18);
    }

/*==========================================================
    MAIN TITLE
==========================================================*/

.soft-services-title {
    margin-top: 28px;
    font-size: clamp(3rem,5vw,5rem);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -1.5px;
    color: #ffffff;
}

    /*==========================================================
    GRADIENT TITLE
==========================================================*/

    .soft-services-title span {
        display: block;
        margin: 12px 0;
        background: linear-gradient( 135deg, #ffffff, #9fd2ff, var(--soft-primary), var(--soft-orange), var(--soft-gold) );
        background-size: 300% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: softTitleGradient 8s linear infinite;
    }

/*==========================================================
    DESCRIPTION
==========================================================*/

.soft-services-description {
    max-width: 760px;
    margin: 30px auto 0;
    color: rgba(255,255,255,.70);
    font-size: 18px;
    line-height: 2;
    font-weight: 400;
}

/*==========================================================
    FOOTER TEXT
==========================================================*/

.soft-services-footer p {
    color: rgba(255,255,255,.75);
    font-size: 18px;
    line-height: 1.9;
    margin-bottom: 35px;
}

/*==========================================================
    CTA BUTTON
==========================================================*/

.soft-services-footer .soft-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 18px 40px;
    border-radius: 60px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient( 135deg, var(--soft-primary), var(--soft-orange) );
    box-shadow: 0 20px 55px rgba(15,111,255,.28);
    transition: .45s cubic-bezier(.23,1,.32,1);
}

    /*==========================================================
    BUTTON ICON
==========================================================*/

    .soft-services-footer .soft-btn-primary i {
        transition: .35s ease;
    }

    /*==========================================================
    BUTTON HOVER
==========================================================*/

    .soft-services-footer .soft-btn-primary:hover {
        transform: translateY(-6px);
        box-shadow: 0 28px 65px rgba(15,111,255,.45);
    }

        .soft-services-footer .soft-btn-primary:hover i {
            transform: translateX(8px);
        }

/*==========================================================
    HEADER ANIMATION
==========================================================*/

.soft-services-header {
    animation: softFadeUp 1s ease forwards;
}

/*==========================================================
    TITLE ANIMATION
==========================================================*/

.soft-services-title {
    animation: softTitleReveal 1s ease forwards;
}

/*==========================================================
    DESCRIPTION ANIMATION
==========================================================*/

.soft-services-description {
    animation: softFadeUp 1.2s ease forwards;
}

/*==========================================================
    KEYFRAMES
==========================================================*/

@keyframes softTitleGradient {

    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 300% center;
    }
}

@keyframes softTitleReveal {

    0% {
        opacity: 0;
        transform: translateY(40px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes softFadeUp {

    0% {
        opacity: 0;
        transform: translateY(35px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:1200px) {

    .soft-services-title {
        font-size: 4rem;
    }
}

@media(max-width:992px) {

    .soft-services-title {
        font-size: 3.5rem;
    }

    .soft-services-description {
        font-size: 17px;
        max-width: 650px;
    }
}

@media(max-width:768px) {

    .soft-services-header {
        text-align: center;
    }

    .soft-services-title {
        font-size: 2.8rem;
        line-height: 1.2;
    }

    .soft-services-description {
        font-size: 16px;
        line-height: 1.9;
    }

    .soft-services-footer p {
        font-size: 16px;
    }
}

@media(max-width:576px) {

    .soft-services-tag {
        font-size: 11px;
        padding: 10px 18px;
        letter-spacing: 1.5px;
    }

    .soft-services-title {
        font-size: 2.2rem;
    }

    .soft-services-description {
        font-size: 15px;
        line-height: 1.8;
    }

    .soft-services-footer p {
        font-size: 15px;
    }

    .soft-services-footer .soft-btn-primary {
        width: 100%;
    }
}

/*==========================================================
    ACCESSIBILITY
==========================================================*/

@media(prefers-reduced-motion:reduce) {

    .soft-services-header,
    .soft-services-title,
    .soft-services-description,
    .soft-services-title span {
        animation: none !important;
    }
}

/*==========================================================
    END OF PART 3.2B
==========================================================*/
/*==========================================================
    OXIAURA SOFT LINK (PVT) LTD.
    PART 3.2C
    PREMIUM GLASS SERVICE CARDS
==========================================================*/

/*==========================================================
    SERVICES GRID
==========================================================*/

.soft-services-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 35px;
}

/*==========================================================
    SERVICE CARD
==========================================================*/

.soft-service-card {
    position: relative;
    overflow: hidden;
    padding: 40px 35px;
    border-radius: 30px;
    background: linear-gradient( 180deg, rgba(255,255,255,.06), rgba(255,255,255,.03) );
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.08);
    transition: .45s cubic-bezier(.23,1,.32,1);
    isolation: isolate;
}

    /*==========================================================
    TOP BORDER
==========================================================*/

    .soft-service-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient( 90deg, transparent, var(--soft-primary), var(--soft-orange), transparent );
    }

    /*==========================================================
    GLOW
==========================================================*/

    .soft-service-card::after {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        right: -120px;
        top: -120px;
        border-radius: 50%;
        background: radial-gradient( rgba(15,111,255,.18), transparent 70% );
        opacity: 0;
        transition: .5s;
        z-index: -1;
    }

/*==========================================================
    SERVICE NUMBER
==========================================================*/

.soft-service-number {
    position: absolute;
    top: 28px;
    right: 28px;
    font-size: 42px;
    font-weight: 800;
    color: rgba(255,255,255,.06);
    line-height: 1;
    user-select: none;
}

/*==========================================================
    ICON
==========================================================*/

.soft-service-icon {
    width: 78px;
    height: 78px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 22px;
    margin-bottom: 30px;
    font-size: 30px;
    color: #ffffff;
    background: linear-gradient( 135deg, rgba(15,111,255,.18), rgba(255,143,31,.18) );
    border: 1px solid rgba(255,255,255,.08);
    transition: .45s;
}

/*==========================================================
    TITLE
==========================================================*/

.soft-service-card h3 {
    font-size: 26px;
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 18px;
}

/*==========================================================
    DESCRIPTION
==========================================================*/

.soft-service-card p {
    color: rgba(255,255,255,.68);
    font-size: 15px;
    line-height: 1.9;
    margin-bottom: 35px;
}

/*==========================================================
    LINK
==========================================================*/

.soft-service-card a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--soft-primary);
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    transition: .35s;
}

    .soft-service-card a i {
        transition: .35s;
    }

/*==========================================================
    HOVER
==========================================================*/

.soft-service-card:hover {
    transform: translateY(-14px);
    border-color: rgba(15,111,255,.25);
    box-shadow: 0 30px 70px rgba(15,111,255,.18);
}

    .soft-service-card:hover::after {
        opacity: 1;
    }

    .soft-service-card:hover .soft-service-icon {
        transform: rotate(-8deg) scale(1.08);
        background: linear-gradient( 135deg, var(--soft-primary), var(--soft-orange) );
        box-shadow: 0 15px 40px rgba(15,111,255,.30);
    }

    .soft-service-card:hover h3 {
        color: var(--soft-gold);
    }

    .soft-service-card:hover a {
        color: #ffffff;
    }

        .soft-service-card:hover a i {
            transform: translateX(8px);
        }

/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:1200px) {

    .soft-services-grid-wrapper {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:768px) {

    .soft-services-grid-wrapper {
        grid-template-columns: 1fr;
    }

    .soft-service-card {
        padding: 32px 28px;
    }

    .soft-service-number {
        font-size: 34px;
    }

    .soft-service-icon {
        width: 68px;
        height: 68px;
        font-size: 26px;
    }

    .soft-service-card h3 {
        font-size: 22px;
    }
}

@media(max-width:576px) {

    .soft-service-card {
        padding: 28px 24px;
        border-radius: 24px;
    }

        .soft-service-card p {
            font-size: 14px;
        }

    .soft-service-number {
        top: 22px;
        right: 22px;
        font-size: 30px;
    }
}

/*==========================================================
    END OF PART 3.2C
==========================================================*/

/*==========================================================
    OXIAURA SOFT LINK (PVT) LTD.
    PART 3.2D
    PREMIUM HOVER EFFECTS & ANIMATIONS
==========================================================*/

/*==========================================================
    DEFAULT TRANSITIONS
==========================================================*/

.soft-service-card,
.soft-service-card *,
.soft-service-icon,
.soft-service-number,
.soft-service-card h3,
.soft-service-card p,
.soft-service-card a {
    transition: all .45s cubic-bezier(.23,1,.32,1);
}

/*==========================================================
    SERVICE CARD ENTRANCE
==========================================================*/

.soft-service-card {
    opacity: 0;
    transform: translateY(60px);
    animation: softServiceFadeUp .9s ease forwards;
}

    /*==========================================================
    STAGGER ANIMATION
==========================================================*/

    .soft-service-card:nth-child(1) {
        animation-delay: .10s;
    }

    .soft-service-card:nth-child(2) {
        animation-delay: .20s;
    }

    .soft-service-card:nth-child(3) {
        animation-delay: .30s;
    }

    .soft-service-card:nth-child(4) {
        animation-delay: .40s;
    }

    .soft-service-card:nth-child(5) {
        animation-delay: .50s;
    }

    .soft-service-card:nth-child(6) {
        animation-delay: .60s;
    }

    /*==========================================================
    PREMIUM HOVER
==========================================================*/

    .soft-service-card:hover {
        transform: translateY(-18px) scale(1.02);
        border-color: rgba(15,111,255,.25);
        background: linear-gradient( 180deg, rgba(255,255,255,.09), rgba(255,255,255,.05) );
        box-shadow: 0 45px 90px rgba(0,0,0,.45), 0 20px 50px rgba(15,111,255,.18);
    }

    /*==========================================================
    LIGHT SWEEP
==========================================================*/

    .soft-service-card::before {
        overflow: hidden;
    }

    .soft-service-card::after {
        content: "";
        position: absolute;
        top: -40%;
        left: -180%;
        width: 70%;
        height: 220%;
        transform: rotate(25deg);
        background: linear-gradient( transparent, rgba(255,255,255,.28), transparent );
        transition: none;
        pointer-events: none;
    }

    .soft-service-card:hover::after {
        animation: softCardSweep 1.2s linear;
    }

    /*==========================================================
    ICON ANIMATION
==========================================================*/

    .soft-service-card:hover .soft-service-icon {
        transform: rotate(-12deg) scale(1.12);
        background: linear-gradient( 135deg, var(--soft-primary), var(--soft-orange) );
        box-shadow: 0 18px 40px rgba(15,111,255,.35);
    }

        .soft-service-card:hover .soft-service-icon i {
            transform: scale(1.15);
        }

    /*==========================================================
    NUMBER
==========================================================*/

    .soft-service-card:hover .soft-service-number {
        color: rgba(255,255,255,.12);
        transform: scale(1.08);
    }

    /*==========================================================
    TITLE
==========================================================*/

    .soft-service-card:hover h3 {
        color: var(--soft-gold);
    }

    /*==========================================================
    DESCRIPTION
==========================================================*/

    .soft-service-card:hover p {
        color: rgba(255,255,255,.88);
    }

    /*==========================================================
    LINK
==========================================================*/

    .soft-service-card:hover a {
        color: #ffffff;
        gap: 18px;
    }

        .soft-service-card:hover a i {
            transform: translateX(10px);
        }

    /*==========================================================
    GLOW EFFECT
==========================================================*/

    .soft-service-card .soft-service-icon {
        position: relative;
    }

        .soft-service-card .soft-service-icon::after {
            content: "";
            position: absolute;
            inset: -12px;
            border-radius: 24px;
            background: radial-gradient( rgba(15,111,255,.35), transparent 70% );
            opacity: 0;
            transition: .45s;
            z-index: -1;
        }

    .soft-service-card:hover .soft-service-icon::after {
        opacity: 1;
    }

/*==========================================================
    FLOATING EFFECT
==========================================================*/

.soft-service-card {
    animation: softServiceFadeUp .9s ease forwards, softCardFloat 7s ease-in-out infinite;
}

    .soft-service-card:nth-child(odd) {
        animation-delay: .2s, 0s;
    }

    .soft-service-card:nth-child(even) {
        animation-delay: .4s, 1s;
    }

    /*==========================================================
    BUTTON HOVER
==========================================================*/

    .soft-service-card a {
        position: relative;
    }

        .soft-service-card a::before {
            content: "";
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            border-radius: 20px;
            background: linear-gradient( 90deg, var(--soft-primary), var(--soft-orange) );
            transition: .4s;
        }

    .soft-service-card:hover a::before {
        width: 100%;
    }

/*==========================================================
    KEYFRAMES
==========================================================*/

@keyframes softServiceFadeUp {

    0% {
        opacity: 0;
        transform: translateY(60px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes softCardSweep {

    0% {
        left: -180%;
    }

    100% {
        left: 220%;
    }
}

@keyframes softCardFloat {

    0%,100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-6px);
    }
}

/*==========================================================
    GRID ANIMATION
==========================================================*/

.soft-services-grid-wrapper:hover

.soft-service-card:not(:hover) {
    opacity: .82;
    transform: scale(.98);
}

/*==========================================================
    PERFORMANCE
==========================================================*/

.soft-service-card,
.soft-service-icon {
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/*==========================================================
    MOBILE
==========================================================*/

@media(max-width:768px) {

    .soft-services-grid-wrapper:hover

    .soft-service-card:not(:hover) {
        opacity: 1;
        transform: none;
    }

    .soft-service-card:hover {
        transform: translateY(-10px);
    }
}

/*==========================================================
    TOUCH DEVICES
==========================================================*/

@media(hover:none) {

    .soft-service-card:hover {
        transform: none;
        box-shadow: none;
    }

        .soft-service-card:hover::after {
            animation: none;
        }

        .soft-service-card:hover .soft-service-icon {
            transform: none;
        }
}

/*==========================================================
    REDUCED MOTION
==========================================================*/

@media(prefers-reduced-motion:reduce) {

    .soft-service-card,
    .soft-service-card * {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/*==========================================================
    END OF PART 3.2D
==========================================================*/
/*==========================================================
    OXIAURA SOFT LINK (PVT) LTD.
    PART 3.2E
    RESPONSIVE DESIGN
==========================================================*/

/*==========================================================
    LARGE DESKTOP
==========================================================*/

@media (max-width:1400px) {

    .soft-services .soft-container {
        width: min(1300px,92%);
    }

    .soft-services-grid-wrapper {
        gap: 30px;
    }

    .soft-service-card {
        padding: 36px;
    }
}

/*==========================================================
    LAPTOP
==========================================================*/

@media (max-width:1200px) {

    .soft-services {
        padding: 120px 0;
    }

    .soft-services-grid-wrapper {
        grid-template-columns: repeat(2,1fr);
        gap: 30px;
    }

    .soft-services-title {
        font-size: 3.8rem;
    }

    .soft-service-card {
        padding: 34px;
    }

        .soft-service-card h3 {
            font-size: 24px;
        }
}

/*==========================================================
    TABLET
==========================================================*/

@media (max-width:992px) {

    .soft-services {
        padding: 100px 0;
    }

    .soft-services-header {
        max-width: 700px;
    }

    .soft-services-title {
        font-size: 3.2rem;
    }

    .soft-services-description {
        font-size: 16px;
        line-height: 1.9;
    }

    .soft-services-grid-wrapper {
        grid-template-columns: repeat(2,1fr);
        gap: 25px;
    }

    .soft-service-card {
        padding: 30px;
    }

    .soft-service-icon {
        width: 70px;
        height: 70px;
        font-size: 28px;
    }

    .soft-service-number {
        font-size: 34px;
    }

    .soft-service-card h3 {
        font-size: 22px;
    }

    .soft-service-card p {
        font-size: 15px;
    }

    .soft-services-footer {
        margin-top: 70px;
    }
}

/*==========================================================
    LARGE MOBILE
==========================================================*/

@media (max-width:768px) {

    .soft-services {
        padding: 90px 0;
    }

    .soft-services-header {
        text-align: center;
    }

    .soft-services-tag {
        justify-content: center;
    }

    .soft-services-title {
        font-size: 2.6rem;
        line-height: 1.2;
    }

    .soft-services-description {
        font-size: 15px;
        line-height: 1.8;
    }

    .soft-services-grid-wrapper {
        grid-template-columns: 1fr;
        gap: 22px;
        margin-top: 50px;
    }

    .soft-service-card {
        padding: 28px;
    }

    .soft-service-icon {
        width: 66px;
        height: 66px;
        font-size: 26px;
    }

    .soft-service-number {
        top: 20px;
        right: 20px;
        font-size: 30px;
    }

    .soft-service-card h3 {
        font-size: 21px;
    }

    .soft-service-card p {
        margin-bottom: 25px;
    }

    .soft-services-footer {
        margin-top: 60px;
    }

        .soft-services-footer p {
            font-size: 16px;
        }
}

/*==========================================================
    MOBILE
==========================================================*/

@media (max-width:576px) {

    .soft-services {
        padding: 70px 0;
    }

        .soft-services .soft-container {
            width: 92%;
        }

    .soft-services-title {
        font-size: 2.1rem;
    }

    .soft-services-description {
        font-size: 14px;
    }

    .soft-services-tag {
        padding: 10px 18px;
        font-size: 11px;
        letter-spacing: 1.5px;
    }

    .soft-service-card {
        padding: 24px;
        border-radius: 22px;
    }

    .soft-service-icon {
        width: 60px;
        height: 60px;
        font-size: 22px;
        border-radius: 18px;
        margin-bottom: 22px;
    }

    .soft-service-number {
        font-size: 26px;
    }

    .soft-service-card h3 {
        font-size: 20px;
    }

    .soft-service-card p {
        font-size: 14px;
        line-height: 1.8;
    }

    .soft-service-card a {
        font-size: 14px;
    }

    .soft-services-footer p {
        font-size: 15px;
    }

    .soft-services-footer .soft-btn-primary {
        width: 100%;
        justify-content: center;
    }
}

/*==========================================================
    SMALL MOBILE
==========================================================*/

@media (max-width:400px) {

    .soft-services-title {
        font-size: 1.9rem;
    }

    .soft-service-card {
        padding: 22px;
    }

    .soft-service-icon {
        width: 55px;
        height: 55px;
        font-size: 20px;
    }

    .soft-service-card h3 {
        font-size: 18px;
    }

    .soft-service-card p {
        font-size: 13px;
    }

    .soft-service-number {
        font-size: 22px;
    }
}

/*==========================================================
    TOUCH DEVICES
==========================================================*/

@media (hover:none) {

    .soft-service-card {
        transition: .35s;
    }

        .soft-service-card:hover {
            transform: none;
            box-shadow: none;
        }

        .soft-service-card:active {
            transform: scale(.98);
        }
}

/*==========================================================
    HIGH RESOLUTION DISPLAYS
==========================================================*/

@media (min-width:1800px) {

    .soft-services .soft-container {
        max-width: 1600px;
    }

    .soft-services-grid-wrapper {
        gap: 40px;
    }

    .soft-service-card {
        padding: 42px;
    }
}

/*==========================================================
    REDUCED MOTION
==========================================================*/

@media (prefers-reduced-motion:reduce) {

    .soft-services *,
    .soft-services *::before,
    .soft-services *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/*==========================================================
    PRINT
==========================================================*/

@media print {

    .soft-services {
        background: #ffffff !important;
        color: #000 !important;
    }

    .soft-services-overlay,
    .soft-services-grid,
    .soft-services-glow-left,
    .soft-services-glow-right {
        display: none !important;
    }

    .soft-service-card {
        border: 1px solid #ccc;
        box-shadow: none;
        background: #fff;
        break-inside: avoid;
    }

        .soft-service-card h3,
        .soft-service-card p {
            color: #000 !important;
        }
}

/*==========================================================
    END OF PART 3.2E
==========================================================*/
/*==========================================================
    PART 4.2A + 4.2B + 4.2C
    TECHNOLOGIES SECTION STYLE
==========================================================*/

.soft-tech {
    position: relative;
    padding: 140px 0;
    background: #050B15;
    overflow: hidden;
}

/*==========================================================
    BACKGROUND EFFECTS
==========================================================*/

.soft-tech-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(15,111,255,.15), transparent 40%), radial-gradient(circle at bottom right, rgba(255,143,31,.12), transparent 40%);
}

.soft-tech-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 80px 80px;
    opacity: .25;
}

/*==========================================================
    HEADER
==========================================================*/

.soft-tech-header {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 70px;
}

.soft-tech-tag {
    display: inline-flex;
    gap: 15px;
    padding: 10px 25px;
    border-radius: 50px;
    background: rgba(15,111,255,.08);
    border: 1px solid rgba(255,255,255,.08);
    color: var(--soft-gold);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.soft-tech-title {
    font-size: clamp(2.5rem,4vw,4.5rem);
    color: #fff;
    margin-top: 25px;
    line-height: 1.2;
}

    .soft-tech-title span {
        background: linear-gradient(135deg,#fff,var(--soft-primary),var(--soft-orange));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.soft-tech-description {
    color: rgba(255,255,255,.7);
    margin-top: 25px;
    font-size: 17px;
    line-height: 1.9;
}

/*==========================================================
    GRID
==========================================================*/

.soft-tech-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 30px;
}

/*==========================================================
    CARD
==========================================================*/

.soft-tech-card {
    padding: 35px;
    border-radius: 28px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(18px);
    transition: .4s ease;
}

    .soft-tech-card h3 {
        color: #fff;
        margin-bottom: 18px;
        font-size: 22px;
    }

    /* LIST */

    .soft-tech-card ul {
        list-style: none;
        padding: 0;
    }

        .soft-tech-card ul li {
            padding: 8px 0;
            color: rgba(255,255,255,.7);
            font-size: 15px;
            position: relative;
            padding-left: 18px;
        }

            .soft-tech-card ul li::before {
                content: "•";
                position: absolute;
                left: 0;
                color: var(--soft-primary);
            }

    /*==========================================================
    HOVER EFFECT
==========================================================*/

    .soft-tech-card:hover {
        transform: translateY(-10px);
        border-color: rgba(15,111,255,.25);
        box-shadow: 0 30px 80px rgba(15,111,255,.15);
    }

/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:1200px) {

    .soft-tech-grid-wrapper {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:768px) {

    .soft-tech {
        padding: 100px 0;
    }

    .soft-tech-grid-wrapper {
        grid-template-columns: 1fr;
    }

    .soft-tech-card {
        padding: 28px;
    }

    .soft-tech-title {
        font-size: 2.4rem;
    }
}

/*==========================================================
    END OF TECHNOLOGIES SECTION
==========================================================*/
/*==========================================================
    PART 6.2 – PROCESS SECTION STYLE
==========================================================*/

.soft-process {
    position: relative;
    padding: 140px 0;
    background: #050B15;
    overflow: hidden;
}

/*==========================================================
    BACKGROUND
==========================================================*/

.soft-process-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(15,111,255,.14), transparent 45%), radial-gradient(circle at bottom left, rgba(255,143,31,.10), transparent 45%);
}

.soft-process-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 85px 85px;
    opacity: .22;
}

/*==========================================================
    HEADER
==========================================================*/

.soft-process-header {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 70px;
}

.soft-process-tag {
    display: inline-flex;
    gap: 15px;
    padding: 10px 24px;
    border-radius: 50px;
    background: rgba(15,111,255,.08);
    border: 1px solid rgba(255,255,255,.08);
    color: var(--soft-gold);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.soft-process-title {
    font-size: clamp(2.5rem,4vw,4.5rem);
    color: #fff;
    margin-top: 25px;
    line-height: 1.2;
}

    .soft-process-title span {
        background: linear-gradient(135deg,#fff,var(--soft-primary),var(--soft-orange));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.soft-process-description {
    color: rgba(255,255,255,.7);
    margin-top: 25px;
    font-size: 17px;
    line-height: 1.9;
}

/*==========================================================
    GRID
==========================================================*/

.soft-process-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 30px;
}

/*==========================================================
    CARD
==========================================================*/

.soft-process-card {
    position: relative;
    padding: 40px 30px;
    border-radius: 28px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(18px);
    transition: .4s ease;
}

/* NUMBER */

.soft-process-number {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 40px;
    font-weight: 800;
    color: rgba(255,255,255,.06);
}

/* TITLE */

.soft-process-card h3 {
    color: #fff;
    margin-bottom: 15px;
    font-size: 22px;
}

/* TEXT */

.soft-process-card p {
    color: rgba(255,255,255,.7);
    font-size: 15px;
    line-height: 1.8;
}

/*==========================================================
    HOVER EFFECT
==========================================================*/

.soft-process-card:hover {
    transform: translateY(-12px);
    border-color: rgba(15,111,255,.25);
    box-shadow: 0 30px 80px rgba(15,111,255,.15);
}

    .soft-process-card:hover .soft-process-number {
        color: rgba(255,255,255,.12);
    }

/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:1200px) {

    .soft-process-grid-wrapper {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:768px) {

    .soft-process {
        padding: 100px 0;
    }

    .soft-process-grid-wrapper {
        grid-template-columns: 1fr;
    }

    .soft-process-card {
        padding: 30px;
    }

    .soft-process-title {
        font-size: 2.4rem;
    }
}

/*==========================================================
    END OF PROCESS SECTION
==========================================================*/

/*==========================================================
    PART 8 – CONTACT SECTION STYLES
==========================================================*/

.soft-contact {
    position: relative;
    padding: 140px 0;
    background: #050B15;
    overflow: hidden;
}

/*==========================================================
    BACKGROUND
==========================================================*/

.soft-contact-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(15,111,255,.15), transparent 45%), radial-gradient(circle at bottom right, rgba(255,143,31,.12), transparent 45%);
}

.soft-contact-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 80px 80px;
    opacity: .2;
}

/*==========================================================
    HEADER
==========================================================*/

.soft-contact-header {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 70px;
}

.soft-contact-tag {
    display: inline-flex;
    gap: 15px;
    padding: 10px 24px;
    border-radius: 50px;
    background: rgba(15,111,255,.08);
    border: 1px solid rgba(255,255,255,.08);
    color: var(--soft-gold);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.soft-contact-title {
    font-size: clamp(2.5rem,4vw,4.5rem);
    color: #fff;
    margin-top: 25px;
    line-height: 1.2;
}

    .soft-contact-title span {
        background: linear-gradient(135deg,#fff,var(--soft-primary),var(--soft-orange));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.soft-contact-description {
    color: rgba(255,255,255,.7);
    margin-top: 25px;
    font-size: 17px;
    line-height: 1.9;
}

/*==========================================================
    WRAPPER
==========================================================*/

.soft-contact-wrapper {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 40px;
}

/*==========================================================
    FORM
==========================================================*/

.soft-contact-form {
    padding: 40px;
    border-radius: 28px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(18px);
}

.soft-input-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 20px;
}

.soft-contact-form input,
.soft-contact-form textarea {
    width: 100%;
    padding: 16px 18px;
    margin-top: 18px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.25);
    color: #fff;
    outline: none;
}

.soft-contact-form textarea {
    resize: none;
}

/*==========================================================
    BUTTON
==========================================================*/

.soft-contact-form .soft-btn-primary {
    margin-top: 22px;
    width: 100%;
}

/*==========================================================
    INFO CARDS
==========================================================*/

.soft-contact-info {
    display: grid;
    gap: 20px;
}

.soft-contact-card {
    padding: 25px;
    border-radius: 22px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(18px);
    transition: .3s;
}

    .soft-contact-card h3 {
        color: #fff;
        margin-bottom: 10px;
        font-size: 18px;
    }

    .soft-contact-card p {
        color: rgba(255,255,255,.7);
        font-size: 14px;
    }

    /*==========================================================
    HOVER
==========================================================*/

    .soft-contact-card:hover {
        transform: translateY(-8px);
        border-color: rgba(15,111,255,.25);
        box-shadow: 0 25px 60px rgba(15,111,255,.15);
    }

/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:992px) {

    .soft-contact-wrapper {
        grid-template-columns: 1fr;
    }

    .soft-input-grid {
        grid-template-columns: 1fr;
    }
}

@media(max-width:768px) {

    .soft-contact {
        padding: 100px 0;
    }

    .soft-contact-form {
        padding: 28px;
    }

    .soft-contact-title {
        font-size: 2.4rem;
    }
}

/*==========================================================
    END CONTACT SECTION
==========================================================*/

/*==========================================================
    PREMIUM FUTURISTIC FOOTER (BLUE + ORANGE THEME)
==========================================================*/

.soft-footer {
    position: relative;
    padding: 110px 0 40px;
    background: radial-gradient(circle at top left, rgba(15,111,255,.28), transparent 45%), radial-gradient(circle at bottom right, rgba(255,143,31,.14), transparent 50%), linear-gradient(180deg, #030b16, #050f1f, #040a14);
    overflow: hidden;
}

/*==========================================================
    BACKGROUND GRID
==========================================================*/

.soft-footer-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(15,111,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(15,111,255,.08) 1px, transparent 1px);
    background-size: 85px 85px;
    opacity: .22;
}

/*==========================================================
    OVERLAY GLOW
==========================================================*/

.soft-footer-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top center, rgba(15,111,255,.18), transparent 50%), radial-gradient(circle at bottom left, rgba(255,143,31,.12), transparent 50%);
}

/*==========================================================
    TOP GRID LAYOUT
==========================================================*/

.soft-footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 45px;
    margin-bottom: 60px;
}

/*==========================================================
    BRAND
==========================================================*/

.soft-footer-brand h2 {
    font-size: 30px;
    margin-bottom: 15px;
    background: linear-gradient(135deg,#ffffff,#9fd2ff,var(--soft-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.soft-footer-brand p {
    color: rgba(255,255,255,.72);
    line-height: 1.8;
    font-size: 15px;
}

/*==========================================================
    SOCIAL ICONS
==========================================================*/

.soft-footer-social {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

    .soft-footer-social a {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        border: 1px solid rgba(15,111,255,.25);
        background: rgba(15,111,255,.08);
        color: #fff;
        text-decoration: none;
        transition: .35s ease;
        backdrop-filter: blur(12px);
    }

        .soft-footer-social a:hover {
            background: linear-gradient(135deg,var(--soft-primary),var(--soft-orange));
            box-shadow: 0 10px 30px rgba(15,111,255,.25), 0 10px 25px rgba(255,143,31,.15);
            transform: translateY(-5px);
        }

/*==========================================================
    COLUMN HEADINGS
==========================================================*/

.soft-footer-col h3 {
    color: #fff;
    font-size: 18px;
    margin-bottom: 18px;
    position: relative;
}

    .soft-footer-col h3::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -8px;
        width: 45px;
        height: 2px;
        background: linear-gradient(90deg,var(--soft-primary),var(--soft-orange));
        border-radius: 10px;
    }

/*==========================================================
    LINKS
==========================================================*/

.soft-footer-col a {
    display: block;
    color: rgba(255,255,255,.7);
    text-decoration: none;
    margin: 10px 0;
    font-size: 14px;
    transition: .3s ease;
}

    .soft-footer-col a:hover {
        color: var(--soft-primary);
        transform: translateX(8px);
    }

/*==========================================================
    CONTACT TEXT
==========================================================*/

.soft-footer-col p {
    color: rgba(255,255,255,.7);
    font-size: 14px;
    margin: 10px 0;
}

/*==========================================================
    BOTTOM BAR
==========================================================*/

.soft-footer-bottom {
    text-align: center;
    padding-top: 25px;
    border-top: 1px solid rgba(15,111,255,.18);
    position: relative;
}

    .soft-footer-bottom::before {
        content: "";
        position: absolute;
        top: -1px;
        left: 50%;
        transform: translateX(-50%);
        width: 140px;
        height: 2px;
        background: linear-gradient(90deg,var(--soft-primary),var(--soft-orange));
        box-shadow: 0 0 25px rgba(15,111,255,.35);
        border-radius: 50px;
    }

    .soft-footer-bottom p {
        color: rgba(255,255,255,.55);
        font-size: 13px;
    }

/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:992px) {

    .soft-footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
}

@media(max-width:600px) {

    .soft-footer-top {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .soft-footer-social {
        justify-content: center;
    }

    .soft-footer-col h3::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .soft-footer-col a:hover {
        transform: none;
    }
}
@media (max-width:768px) {

    .soft-hero-image {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 18px;
    }

    .soft-floating-card {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        animation: none !important;
        width: 100%;
        max-width: 360px;
        margin: 20px auto 0 !important;
    }

        /* First card starts lower */
        .soft-floating-card:first-of-type {
            margin-top: 80px !important;
        }
}
@media (max-width:768px) {

    .soft-hero-image {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px; /* controls space between logo and cards */
    }

        .soft-hero-image img {
            display: block;
            width: 260px;
            margin: 0 0 8px 0;
        }

    .soft-floating-card {
        margin: 0 auto;
    }
}

@media (max-width:768px) {

    .soft-hero-image img {
        margin-bottom: -220px;
    }
}
/*==================================================
                EXCEL LANKA

        Luxury Travel Website

==================================================*/


/*========================
RESET
========================*/

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/*========================*/

html {
    scroll-behavior: smooth;
}


/*========================*/

body {
    font-family: 'Poppins',sans-serif;
    background: #111116;
    color: #fff;
    overflow-x: hidden;
    line-height: 1.7;
}


/*========================*/

img {
    display: block;
    max-width: 100%;
}


/*========================*/

a {
    text-decoration: none;
    color: inherit;
}


/*========================*/

ul {
    list-style: none;
}


/*========================*/

button {
    font-family: inherit;
    cursor: pointer;
}


/*========================
GOOGLE FONTS
========================*/

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');


/*========================
COLORS
========================*/

:root {
    --exc-purple: #6E2DBF;
    --exc-purple-light: #8B4EE0;
    --exc-gold: #D8B15B;
    --exc-blue: #65C6FF;
    --exc-dark: #101014;
    --exc-dark2: #181820;
    --exc-dark3: #22222B;
    --exc-white: #FFFFFF;
    --exc-text: #DADADA;
    --exc-border: rgba(255,255,255,.12);
    --exc-glass: rgba(255,255,255,.08);
    --exc-shadow: 0 25px 70px rgba(0,0,0,.35);
}


/*========================
CONTAINER
========================*/

.exc-container {
    width: min(92%,1450px);
    margin: auto;
}


/*========================
HEADER
========================*/

.exc-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    padding: 18px 0;
    transition: .45s;
}


/*========================*/

.exc-navbar {
    background: rgba(18,18,22,.45);
    backdrop-filter: blur(22px);
    border-bottom: 1px solid rgba(255,255,255,.08);
}


    /*========================*/

    .exc-navbar .exc-container {
        height: 90px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }


/*========================*/

.exc-logo img {
    height: 70px;
    transition: .4s;
}


/*========================
MENU
========================*/

.exc-menu {
    display: flex;
    gap: 42px;
    align-items: center;
}


    /*========================*/

    .exc-menu li {
        position: relative;
    }


    /*========================*/

    .exc-menu a {
        font-size: 15px;
        font-weight: 500;
        letter-spacing: .5px;
        position: relative;
        transition: .35s;
    }


        /*========================*/

        .exc-menu a::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -8px;
            width: 0;
            height: 2px;
            border-radius: 5px;
            background: linear-gradient(90deg,var(--exc-gold),var(--exc-blue));
            transition: .35s;
        }


        /*========================*/

        .exc-menu a:hover {
            color: var(--exc-gold);
        }


            /*========================*/

            .exc-menu a:hover::after {
                width: 100%;
            }


/*========================
RIGHT
========================*/

.exc-right {
    display: flex;
    align-items: center;
    gap: 25px;
}


/*========================
BUTTON
========================*/

.exc-book-btn {
    padding: 15px 34px;
    border-radius: 60px;
    background: linear-gradient(135deg,var(--exc-gold),#F5D585);
    color: #111;
    font-weight: 600;
    transition: .35s;
    box-shadow: 0 15px 40px rgba(216,177,91,.35);
}


    /*========================*/

    .exc-book-btn:hover {
        transform: translateY(-4px);
        box-shadow: 0 25px 60px rgba(216,177,91,.45);
    }


/*========================
MOBILE BUTTON
========================*/

.exc-mobile-btn {
    display: none;
    background: none;
    border: none;
    width: 45px;
    height: 45px;
}


    /*========================*/

    .exc-mobile-btn span {
        display: block;
        width: 30px;
        height: 3px;
        background: #fff;
        margin: 6px auto;
        border-radius: 30px;
        transition: .3s;
    }

/*=========================================================
                HERO SECTION
=========================================================*/

.exc-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 900px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--exc-dark);
}


/*=========================================================
                HERO SLIDER
=========================================================*/

.exc-hero-slider {
    position: absolute;
    inset: 0;
    z-index: 1;
}


/*=========================================================
                SLIDE
=========================================================*/

.exc-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.5s ease, visibility 1.5s ease;
}


    /* Active Slide */

    .exc-slide.exc-active {
        opacity: 1;
        visibility: visible;
    }


    /*=========================================================
                SLIDE IMAGE
=========================================================*/

    .exc-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transform: scale(1.08);
        transition: transform 8s linear;
    }


    /* Zoom Active */

    .exc-slide.exc-active img {
        transform: scale(1);
    }


/*=========================================================
                OVERLAY
=========================================================*/

.exc-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient( 90deg, rgba(10,10,20,.88) 0%, rgba(25,20,45,.72) 35%, rgba(0,0,0,.38) 100% ), linear-gradient( 180deg, rgba(0,0,0,.20), rgba(0,0,0,.65) );
}


/*=========================================================
                PURPLE GLOW
=========================================================*/

.exc-blur {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    opacity: .45;
    z-index: 2;
    pointer-events: none;
}


/* Left */

.exc-blur-left {
    width: 420px;
    height: 420px;
    background: var(--exc-purple);
    top: 120px;
    left: -120px;
}


/* Right */

.exc-blur-right {
    width: 420px;
    height: 420px;
    background: var(--exc-blue);
    right: -140px;
    bottom: 80px;
}


/*=========================================================
            CONTAINER ABOVE SLIDER
=========================================================*/

.exc-hero .exc-container {
    position: relative;
    z-index: 10;
}


/*=========================================================
            HERO WRAPPER
=========================================================*/

.exc-hero-wrapper {
    width: 100%;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 70px;
    align-items: center;
    min-height: 100vh;
    padding-top: 120px;
    padding-bottom: 80px;
}


/*=========================================================
                LEFT COLUMN
=========================================================*/

.exc-hero-content {
    position: relative;
    z-index: 5;
}


/*=========================================================
                RIGHT COLUMN
=========================================================*/

.exc-booking-card {
    position: relative;
    z-index: 5;
}


/*=========================================================
            TOP FADE
=========================================================*/

.exc-hero::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 180px;
    z-index: 3;
    background: linear-gradient( rgba(10,10,15,.65), transparent );
}


/*=========================================================
            BOTTOM FADE
=========================================================*/

.exc-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 220px;
    z-index: 3;
    background: linear-gradient( transparent, var(--exc-dark) );
}


/*=========================================================
            DECORATIVE LINE
=========================================================*/

.exc-hero-wrapper::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 2px;
    background: linear-gradient( 90deg, transparent, var(--exc-gold), transparent );
    top: 160px;
    left: 0;
    opacity: .65;
}


/*=========================================================
            GOLD DOT
=========================================================*/

.exc-hero-wrapper::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--exc-gold);
    left: 215px;
    top: 156px;
    box-shadow: 0 0 15px rgba(216,177,91,.8), 0 0 35px rgba(216,177,91,.4);
}


/*=========================================================
            LARGE CIRCLE
=========================================================*/

.exc-hero-circle {
    position: absolute;
    width: 650px;
    height: 650px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.06);
    top: -180px;
    right: -160px;
    z-index: 2;
}


/*=========================================================
            SMALL CIRCLE
=========================================================*/

.exc-hero-circle-small {
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: 1px solid rgba(216,177,91,.12);
    bottom: -80px;
    left: -80px;
    z-index: 2;
}


/*=========================================================
            RESPONSIVE
=========================================================*/

@media(max-width:1200px) {

    .exc-hero-wrapper {
        grid-template-columns: 1fr;
        gap: 60px;
        text-align: center;
    }

    .exc-booking-card {
        max-width: 620px;
        margin: auto;
    }
}


@media(max-width:768px) {

    .exc-hero {
        min-height: 100vh;
        height: auto;
    }

    .exc-hero-wrapper {
        padding-top: 150px;
        padding-bottom: 100px;
    }

    .exc-blur-left,
    .exc-blur-right {
        display: none;
    }
}

/*=========================================================
                HERO CONTENT
=========================================================*/

.exc-hero-content {
    max-width: 760px;
    position: relative;
    z-index: 20;
}


/*=========================================================
                SUBTITLE
=========================================================*/

.exc-hero-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 26px;
    margin-bottom: 30px;
    border-radius: 60px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.12);
    color: var(--exc-gold);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    box-shadow: 0 12px 35px rgba(0,0,0,.25);
}


/*=========================================================
                MAIN TITLE
=========================================================*/

.exc-hero-title {
    font-family: 'Cinzel',serif;
    font-size: 76px;
    font-weight: 700;
    line-height: 1.05;
    color: var(--exc-white);
    margin-bottom: 35px;
    text-shadow: 0 12px 40px rgba(0,0,0,.55);
}


    /*=========================================================
                GOLD TEXT
=========================================================*/

    .exc-hero-title span {
        display: block;
        background: linear-gradient( 135deg, #FFE8A6 0%, #D8B15B 35%, #FFD977 70%, #FFF5CC 100% );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }


/*=========================================================
                DESCRIPTION
=========================================================*/

.exc-hero-text {
    font-size: 18px;
    line-height: 2;
    color: #E7E7E7;
    max-width: 680px;
    margin-bottom: 45px;
}


/*=========================================================
                BUTTON AREA
=========================================================*/

.exc-hero-buttons {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    margin-bottom: 65px;
}


/*=========================================================
            PRIMARY BUTTON
=========================================================*/

.exc-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    height: 62px;
    padding: 0 40px;
    border-radius: 60px;
    background: linear-gradient( 135deg, var(--exc-gold), #F6D98A );
    color: #111;
    font-weight: 700;
    letter-spacing: .6px;
    transition: .35s;
    box-shadow: 0 18px 40px rgba(216,177,91,.35);
}

    .exc-btn-primary:hover {
        transform: translateY(-6px);
        box-shadow: 0 30px 60px rgba(216,177,91,.45);
    }


/*=========================================================
            OUTLINE BUTTON
=========================================================*/

.exc-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    height: 62px;
    padding: 0 40px;
    border-radius: 60px;
    border: 1px solid rgba(255,255,255,.20);
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(20px);
    color: #fff;
    font-weight: 600;
    transition: .35s;
}

    .exc-btn-outline:hover {
        transform: translateY(-6px);
        border-color: var(--exc-gold);
        color: var(--exc-gold);
        background: rgba(255,255,255,.08);
    }


/*=========================================================
            STATISTICS
=========================================================*/

.exc-hero-stats {
    display: flex;
    gap: 60px;
    flex-wrap: wrap;
}


/*=========================================================
            SINGLE STAT
=========================================================*/

.exc-stat {
    position: relative;
    padding-right: 50px;
}

    .exc-stat:not(:last-child)::after {
        content: "";
        position: absolute;
        right: 15px;
        top: 12px;
        width: 1px;
        height: 55px;
        background: rgba(255,255,255,.12);
    }


    /*=========================================================
            NUMBER
=========================================================*/

    .exc-stat h3 {
        font-size: 48px;
        font-weight: 700;
        font-family: 'Cinzel',serif;
        color: var(--exc-gold);
        margin-bottom: 10px;
    }


    /*=========================================================
            LABEL
=========================================================*/

    .exc-stat span {
        color: #D5D5D5;
        font-size: 15px;
        letter-spacing: 1px;
        text-transform: uppercase;
    }


/*=========================================================
            RESPONSIVE
=========================================================*/

@media(max-width:1200px) {

    .exc-hero-content {
        max-width: 100%;
        text-align: center;
    }

    .exc-hero-text {
        margin-left: auto;
        margin-right: auto;
    }

    .exc-hero-buttons {
        justify-content: center;
    }

    .exc-hero-stats {
        justify-content: center;
    }
}


@media(max-width:992px) {

    .exc-hero-title {
        font-size: 60px;
    }
}


@media(max-width:768px) {

    .exc-hero-title {
        font-size: 46px;
        line-height: 1.15;
    }

    .exc-hero-text {
        font-size: 16px;
        line-height: 1.8;
    }

    .exc-hero-buttons {
        flex-direction: column;
    }

    .exc-btn-primary,
    .exc-btn-outline {
        width: 100%;
        max-width: 320px;
    }

    .exc-hero-stats {
        gap: 35px;
    }

    .exc-stat {
        padding-right: 0;
    }

        .exc-stat::after {
            display: none;
        }
}


@media(max-width:576px) {

    .exc-hero-title {
        font-size: 38px;
    }

    .exc-hero-subtitle {
        font-size: 12px;
        padding: 10px 18px;
        letter-spacing: 1px;
    }

    .exc-stat h3 {
        font-size: 34px;
    }

    .exc-stat span {
        font-size: 13px;
    }
}

/*=========================================================
            LUXURY BOOKING CARD
=========================================================*/

.exc-booking-card {
    position: relative;
    width: 100%;
    max-width: 470px;
    padding: 40px;
    border-radius: 30px;
    background: linear-gradient( 145deg, rgba(108,43,173,.88), rgba(34,27,61,.88) );
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 35px 90px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
    overflow: hidden;
}


    /*==================================*/

    .exc-booking-card::before {
        content: "";
        position: absolute;
        top: -120px;
        right: -120px;
        width: 260px;
        height: 260px;
        border-radius: 50%;
        background: rgba(216,177,91,.12);
        filter: blur(70px);
    }


    /*==================================*/

    .exc-booking-card::after {
        content: "";
        position: absolute;
        left: -100px;
        bottom: -100px;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        background: rgba(101,198,255,.10);
        filter: blur(70px);
    }


/*=========================================================
            HEADER
=========================================================*/

.exc-booking-header {
    position: relative;
    z-index: 2;
    margin-bottom: 35px;
}


    /*==================================*/

    .exc-booking-header h2 {
        font-family: 'Cinzel',serif;
        font-size: 32px;
        color: var(--exc-white);
        margin-bottom: 10px;
    }


    /*==================================*/

    .exc-booking-header p {
        color: #d9d9d9;
        line-height: 1.8;
    }


/*=========================================================
            FORM
=========================================================*/

.exc-booking-form {
    position: relative;
    z-index: 2;
}


/*=========================================================
            FORM GROUP
=========================================================*/

.exc-form-group {
    margin-bottom: 22px;
}


    /*==================================*/

    .exc-form-group label {
        display: block;
        margin-bottom: 10px;
        font-size: 14px;
        color: var(--exc-gold);
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
    }


    /*=========================================================
            INPUTS
=========================================================*/

    .exc-form-group input,
    .exc-form-group select {
        width: 100%;
        height: 58px;
        padding: 0 18px;
        border-radius: 16px;
        border: 1px solid rgba(255,255,255,.10);
        background: rgba(255,255,255,.07);
        backdrop-filter: blur(12px);
        color: #ffffff;
        font-size: 15px;
        outline: none;
        transition: .35s;
    }


    /*==================================*/

    .exc-form-group select {
        appearance: none;
        cursor: pointer;
    }


    /*==================================*/

    .exc-form-group input::placeholder {
        color: #cccccc;
    }


    /*=========================================================
            INPUT FOCUS
=========================================================*/

    .exc-form-group input:focus,
    .exc-form-group select:focus {
        border-color: var(--exc-gold);
        background: rgba(255,255,255,.10);
        box-shadow: 0 0 0 4px rgba(216,177,91,.15);
    }


/*=========================================================
            ROW
=========================================================*/

.exc-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}


/*=========================================================
            SEARCH BUTTON
=========================================================*/

.exc-search-btn {
    width: 100%;
    height: 62px;
    border: none;
    border-radius: 18px;
    margin-top: 15px;
    background: linear-gradient( 135deg, var(--exc-gold), #F7D98D );
    color: #111;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: .35s;
    box-shadow: 0 20px 45px rgba(216,177,91,.30);
}


    /*==================================*/

    .exc-search-btn:hover {
        transform: translateY(-4px);
        box-shadow: 0 30px 60px rgba(216,177,91,.40);
    }


    /*==================================*/

    .exc-search-btn:active {
        transform: translateY(-1px);
    }


/*=========================================================
            CUSTOM SELECT ICON
=========================================================*/

.exc-form-group {
    position: relative;
}


    .exc-form-group select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23D8B15B' viewBox='0 0 20 20'%3E%3Cpath d='M5 7l5 5 5-5'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 18px center;
        background-size: 18px;
    }


    /*=========================================================
            DATE INPUT
=========================================================*/

    .exc-form-group input[type=date] {
        color: #ffffff;
    }


    /*=========================================================
            AUTOFILL
=========================================================*/

    .exc-form-group input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 1000px rgba(255,255,255,.07) inset;
        -webkit-text-fill-color: #fff;
    }


/*=========================================================
            RESPONSIVE
=========================================================*/

@media(max-width:1200px) {

    .exc-booking-card {
        margin: auto;
    }
}


@media(max-width:768px) {

    .exc-booking-card {
        padding: 30px;
        max-width: 100%;
    }

    .exc-booking-header h2 {
        font-size: 28px;
    }

    .exc-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}


@media(max-width:480px) {

    .exc-booking-card {
        padding: 24px;
        border-radius: 22px;
    }

    .exc-booking-header h2 {
        font-size: 24px;
    }

    .exc-form-group input,
    .exc-form-group select {
        height: 54px;
        font-size: 14px;
    }

    .exc-search-btn {
        height: 58px;
        font-size: 15px;
    }
}


/*=========================================================
        FLOATING DESTINATION CARDS
=========================================================*/

.exc-floating-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 220px;
    padding: 18px 24px;
    border-radius: 22px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 20px 50px rgba(0,0,0,.35);
    z-index: 30;
    transition: .35s;
}

    .exc-floating-card:hover {
        transform: translateY(-8px);
        border-color: rgba(216,177,91,.45);
    }


/*=========================================================
            CARD ICON
=========================================================*/

.exc-card-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    background: linear-gradient( 135deg, var(--exc-gold), #FFE8A5 );
    color: #111;
}


/*=========================================================
            CARD TEXT
=========================================================*/

.exc-floating-card h4 {
    font-size: 18px;
    color: #fff;
    margin-bottom: 4px;
}

.exc-floating-card span {
    color: #dddddd;
    font-size: 14px;
}


/*=========================================================
            CARD POSITIONS
=========================================================*/

.exc-card-one {
    top: 18%;
    right: 4%;
}

.exc-card-two {
    top: 48%;
    left: 3%;
}

.exc-card-three {
    bottom: 13%;
    right: 10%;
}


/*=========================================================
                SOCIAL
=========================================================*/

.exc-social {
    position: absolute;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 18px;
    z-index: 35;
}


    /*=========================================================*/

    .exc-social a {
        width: 52px;
        height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255,255,255,.08);
        backdrop-filter: blur(18px);
        border: 1px solid rgba(255,255,255,.10);
        color: #fff;
        font-weight: 600;
        transition: .35s;
    }

        .exc-social a:hover {
            background: var(--exc-gold);
            color: #111;
            transform: translateX(6px);
        }


/*=========================================================
            SLIDER DOTS
=========================================================*/

.exc-slider-dots {
    position: absolute;
    bottom: 55px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 50;
}

.exc-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255,255,255,.35);
    cursor: pointer;
    transition: .35s;
}

    .exc-dot.exc-active {
        width: 40px;
        border-radius: 30px;
        background: var(--exc-gold);
    }


/*=========================================================
            SCROLL INDICATOR
=========================================================*/

.exc-scroll-indicator {
    position: absolute;
    right: 55px;
    bottom: 40px;
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 40;
    color: #fff;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 13px;
}


/*=========================================================*/

.exc-mouse {
    width: 32px;
    height: 54px;
    border: 2px solid rgba(255,255,255,.5);
    border-radius: 30px;
    position: relative;
}


/*=========================================================*/

.exc-wheel {
    width: 6px;
    height: 12px;
    background: var(--exc-gold);
    border-radius: 10px;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
}


/*=========================================================
            AIRPLANE
=========================================================*/

.exc-airplane {
    position: absolute;
    top: 120px;
    right: 120px;
    font-size: 42px;
    color: rgba(255,255,255,.75);
    z-index: 15;
    pointer-events: none;
}


/*=========================================================
            RESPONSIVE
=========================================================*/

@media(max-width:1200px) {

    .exc-card-one,
    .exc-card-two,
    .exc-card-three {
        display: none;
    }
}


@media(max-width:992px) {

    .exc-social {
        display: none;
    }

    .exc-scroll-indicator {
        right: 30px;
        bottom: 25px;
    }
}


@media(max-width:768px) {

    .exc-scroll-indicator {
        display: none;
    }

    .exc-airplane {
        font-size: 28px;
        top: 95px;
        right: 35px;
    }

    .exc-slider-dots {
        bottom: 25px;
    }
}


@media(max-width:576px) {

    .exc-airplane {
        display: none;
    }
}

/*==========================================================
        EXCEL LANKA
        PREMIUM HERO ANIMATIONS
==========================================================*/


/*==========================================================
                HERO FADE
==========================================================*/

.exc-hero-content {
    animation: excHeroContent 1.2s ease forwards;
}

@keyframes excHeroContent {

    from {
        opacity: 0;
        transform: translateY(60px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/*==========================================================
                BOOKING CARD
==========================================================*/

.exc-booking-card {
    animation: excBookingCard 1.4s ease .25s forwards;
    opacity: 0;
}

@keyframes excBookingCard {

    from {
        opacity: 0;
        transform: translateX(80px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/*==========================================================
                HERO SUBTITLE
==========================================================*/

.exc-hero-subtitle {
    animation: excFadeDown .8s ease;
}

@keyframes excFadeDown {

    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/*==========================================================
                TITLE
==========================================================*/

.exc-hero-title {
    animation: excTitleReveal 1s ease;
}

@keyframes excTitleReveal {

    from {
        opacity: 0;
        transform: translateY(45px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/*==========================================================
                DESCRIPTION
==========================================================*/

.exc-hero-text {
    animation: excTextReveal 1.4s ease;
}

@keyframes excTextReveal {

    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/*==========================================================
                BUTTONS
==========================================================*/

.exc-btn-primary,
.exc-btn-outline {
    animation: excButtonReveal 1.6s ease;
}

@keyframes excButtonReveal {

    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/*==========================================================
                STATISTICS
==========================================================*/

.exc-stat {
    animation: excStatReveal 1.8s ease;
}

@keyframes excStatReveal {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/*==========================================================
            FLOATING CARDS
==========================================================*/

.exc-floating-card {
    animation: excFloat 6s ease-in-out infinite;
}

.exc-card-one {
    animation-delay: 0s;
}

.exc-card-two {
    animation-delay: 2s;
}

.exc-card-three {
    animation-delay: 4s;
}

@keyframes excFloat {

    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0px);
    }
}


/*==========================================================
                GLASS SHIMMER
==========================================================*/

.exc-booking-card::before {
    animation: excGlow 8s linear infinite;
}

.exc-booking-card::after {
    animation: excGlowReverse 10s linear infinite;
}

@keyframes excGlow {

    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-50px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes excGlowReverse {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(45px);
    }

    100% {
        transform: translateY(0);
    }
}


/*==========================================================
                HERO IMAGE
==========================================================*/

.exc-slide.exc-active img {
    animation: excKenBurns 12s linear forwards;
}

@keyframes excKenBurns {

    from {
        transform: scale(1.18);
    }

    to {
        transform: scale(1);
    }
}


/*==========================================================
            AIRPLANE
==========================================================*/

.exc-airplane {
    animation: excPlaneFly 18s linear infinite;
}

@keyframes excPlaneFly {

    0% {
        transform: translate(-120px,40px) rotate(3deg);
        opacity: 0;
    }

    10% {
        opacity: .8;
    }

    50% {
        transform: translate(350px,-120px) rotate(-8deg);
    }

    100% {
        transform: translate(900px,-260px) rotate(-15deg);
        opacity: 0;
    }
}


/*==========================================================
                SCROLL
==========================================================*/

.exc-wheel {
    animation: excWheel 1.7s infinite;
}

@keyframes excWheel {

    0% {
        opacity: 1;
        top: 8px;
    }

    100% {
        opacity: 0;
        top: 28px;
    }
}


/*==========================================================
                BUTTON SHINE
==========================================================*/

.exc-btn-primary {
    position: relative;
    overflow: hidden;
}

    .exc-btn-primary::before {
        content: "";
        position: absolute;
        top: 0;
        left: -150%;
        width: 60%;
        height: 100%;
        transform: skewX(-25deg);
        background: rgba(255,255,255,.35);
    }

    .exc-btn-primary:hover::before {
        animation: excShine .9s;
    }

@keyframes excShine {

    from {
        left: -150%;
    }

    to {
        left: 180%;
    }
}


/*==========================================================
                GOLD TEXT GLOW
==========================================================*/

.exc-hero-title span {
    animation: excGoldGlow 5s ease infinite;
}

@keyframes excGoldGlow {

    0% {
        filter: drop-shadow(0 0 5px rgba(216,177,91,.15));
    }

    50% {
        filter: drop-shadow(0 0 22px rgba(216,177,91,.55));
    }

    100% {
        filter: drop-shadow(0 0 5px rgba(216,177,91,.15));
    }
}


/*==========================================================
                SOCIAL ICONS
==========================================================*/

.exc-social a {
    transition: .35s;
}

    .exc-social a:hover {
        transform: translateY(-6px) scale(1.08);
    }


/*==========================================================
                SLIDER DOT
==========================================================*/

.exc-dot {
    transition: .4s;
}

    .exc-dot:hover {
        transform: scale(1.35);
    }


/*==========================================================
            BOOKING CARD HOVER
==========================================================*/

.exc-booking-card {
    transition: .45s;
}

    .exc-booking-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 45px 100px rgba(0,0,0,.45);
    }


/*==========================================================
            REDUCED MOTION
==========================================================*/

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}

/*======================================================
        HEADER AFTER SCROLL
======================================================*/

.exc-header-scroll {
    padding: 8px 0;
}

    .exc-header-scroll .exc-navbar {
        background: rgba(12,12,18,.92);
        backdrop-filter: blur(28px);
        box-shadow: 0 15px 45px rgba(0,0,0,.35);
    }


/*======================================================
        ACTIVE MENU
======================================================*/

.exc-active-link {
    color: var(--exc-gold) !important;
}


/*======================================================
        MOBILE BUTTON
======================================================*/

.exc-mobile-btn.exc-open span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.exc-mobile-btn.exc-open span:nth-child(2) {
    opacity: 0;
}

.exc-mobile-btn.exc-open span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/*=========================================================
        FEATURED DESTINATIONS SECTION
=========================================================*/

.exc-featured {
    position: relative;
    overflow: hidden;
    padding: 140px 0;
    background: radial-gradient(circle at top left, rgba(103,58,183,.18), transparent 35%), radial-gradient(circle at bottom right, rgba(79,195,247,.12), transparent 35%), linear-gradient( 180deg, #0d0d15 0%, #151524 50%, #0b0b13 100% );
}


    /*=========================================================
        SECTION CONTAINER
=========================================================*/

    .exc-featured .exc-container {
        position: relative;
        z-index: 5;
    }


/*=========================================================
        BACKGROUND TEXT
=========================================================*/

.exc-featured-bg-text {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Cinzel',serif;
    font-size: 180px;
    font-weight: 900;
    letter-spacing: 18px;
    color: rgba(255,255,255,.025);
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}


/*=========================================================
        GOLD TOP LINE
=========================================================*/

.exc-featured::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    height: 2px;
    background: linear-gradient( 90deg, transparent, var(--exc-gold), transparent );
    z-index: 5;
}


/*=========================================================
        BLUE GLOW
=========================================================*/

.exc-featured::after {
    content: "";
    position: absolute;
    right: -180px;
    top: 120px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(88,185,255,.08);
    filter: blur(130px);
    pointer-events: none;
}


/*=========================================================
        SECTION HEADER
=========================================================*/

.exc-section-header {
    max-width: 900px;
    margin: 0 auto 70px;
    text-align: center;
    position: relative;
    z-index: 10;
}


/*=========================================================
        SMALL TAG
=========================================================*/

.exc-section-tag {
    display: inline-block;
    margin-bottom: 24px;
    padding: 10px 24px;
    border-radius: 50px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(216,177,91,.25);
    backdrop-filter: blur(15px);
    color: var(--exc-gold);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}


/*=========================================================
        MAIN TITLE
=========================================================*/

.exc-section-header h2 {
    font-family: 'Cinzel',serif;
    font-size: 58px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    margin-bottom: 28px;
}


    /*=========================================================
        TITLE DECORATION
=========================================================*/

    .exc-section-header h2::after {
        content: "";
        display: block;
        width: 110px;
        height: 3px;
        margin: 24px auto 0;
        border-radius: 10px;
        background: linear-gradient( 90deg, transparent, var(--exc-gold), transparent );
    }


/*=========================================================
        DESCRIPTION
=========================================================*/

.exc-section-header p {
    max-width: 760px;
    margin: auto;
    color: #d4d7df;
    font-size: 18px;
    line-height: 1.9;
}


/*=========================================================
        STATISTICS
=========================================================*/

.exc-featured-stats {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 30px;
    margin-bottom: 80px;
}


/*=========================================================
        SINGLE STAT
=========================================================*/

.exc-featured-stat {
    padding: 35px 20px;
    text-align: center;
    border-radius: 24px;
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.08);
    transition: .35s;
}


    .exc-featured-stat:hover {
        transform: translateY(-8px);
        border-color: rgba(216,177,91,.45);
        box-shadow: 0 20px 45px rgba(0,0,0,.35);
    }


    /*=========================================================
        NUMBER
=========================================================*/

    .exc-featured-stat h3 {
        font-family: 'Cinzel',serif;
        font-size: 44px;
        font-weight: 700;
        color: var(--exc-gold);
        margin-bottom: 10px;
    }


    /*=========================================================
        LABEL
=========================================================*/

    .exc-featured-stat span {
        color: #d8d8d8;
        font-size: 15px;
        text-transform: uppercase;
        letter-spacing: 2px;
    }


/*=========================================================
        RESPONSIVE
=========================================================*/

@media(max-width:1200px) {

    .exc-featured-bg-text {
        font-size: 140px;
    }
}


@media(max-width:992px) {

    .exc-featured {
        padding: 110px 0;
    }

    .exc-section-header h2 {
        font-size: 46px;
    }

    .exc-featured-stats {
        grid-template-columns: repeat(2,1fr);
    }
}


@media(max-width:768px) {

    .exc-featured {
        padding: 90px 0;
    }

    .exc-featured-bg-text {
        display: none;
    }

    .exc-section-header h2 {
        font-size: 38px;
    }

    .exc-section-header p {
        font-size: 16px;
    }
}


@media(max-width:576px) {

    .exc-featured-stats {
        grid-template-columns: 1fr;
    }

    .exc-section-header h2 {
        font-size: 32px;
    }
}

/*=========================================================
        DESTINATION CAROUSEL
=========================================================*/

.exc-destination-carousel {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 80px;
}


/*=========================================================
        CAROUSEL TRACK
=========================================================*/

.exc-carousel-track {
    position: relative;
    width: 100%;
    display: flex;
    gap: 32px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 15px 5px 30px;
}

    .exc-carousel-track::-webkit-scrollbar {
        display: none;
    }


/*=========================================================
        DESTINATION CARD
=========================================================*/

.exc-destination-card {
    position: relative;
    flex: 0 0 420px;
    height: 620px;
    overflow: hidden;
    border-radius: 30px;
    background: #1b1b29;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 25px 60px rgba(0,0,0,.35);
    transition: transform .45s ease, border-color .45s ease, box-shadow .45s ease;
}


    /*=========================================================
        IMAGE
=========================================================*/

    .exc-destination-card img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .8s ease;
    }


/*=========================================================
        DARK OVERLAY
=========================================================*/

.exc-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(8,8,12,.92) 5%, rgba(8,8,12,.55) 45%, rgba(8,8,12,.15) 100% );
    z-index: 2;
}


/*=========================================================
        CONTENT
=========================================================*/

.exc-card-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    padding: 35px;
}


/*=========================================================
        COUNTRY BADGE
=========================================================*/

.exc-country {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    margin-bottom: 18px;
    border-radius: 40px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.12);
    color: var(--exc-gold);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
}


/*=========================================================
        TITLE
=========================================================*/

.exc-card-content h3 {
    font-family: 'Cinzel',serif;
    font-size: 34px;
    color: #ffffff;
    margin-bottom: 18px;
    line-height: 1.2;
}


/*=========================================================
        DESCRIPTION
=========================================================*/

.exc-card-content p {
    color: #d7d7d7;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 28px;
}


/*=========================================================
        TOUR INFO
=========================================================*/

.exc-tour-info {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
}

    .exc-tour-info span {
        padding: 10px 18px;
        border-radius: 40px;
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.10);
        backdrop-filter: blur(10px);
        color: #f1f1f1;
        font-size: 13px;
        font-weight: 600;
    }


/*=========================================================
        CARD FOOTER
=========================================================*/

.exc-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}


    /*=========================================================
        PRICE
=========================================================*/

    .exc-card-footer small {
        display: block;
        margin-bottom: 5px;
        color: #bdbdbd;
        font-size: 12px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
    }

    .exc-card-footer h4 {
        font-family: 'Cinzel',serif;
        font-size: 34px;
        color: var(--exc-gold);
    }


/*=========================================================
        VIEW ALL AREA
=========================================================*/

.exc-featured-bottom {
    text-align: center;
    margin-top: 20px;
}


/*=========================================================
        RESPONSIVE
=========================================================*/

@media(max-width:1200px) {

    .exc-destination-card {
        flex: 0 0 380px;
        height: 580px;
    }
}

@media(max-width:992px) {

    .exc-destination-card {
        flex: 0 0 340px;
        height: 540px;
    }

    .exc-card-content {
        padding: 28px;
    }

        .exc-card-content h3 {
            font-size: 30px;
        }
}

@media(max-width:768px) {

    .exc-carousel-track {
        gap: 22px;
    }

    .exc-destination-card {
        flex: 0 0 320px;
        height: 520px;
    }

    .exc-card-content h3 {
        font-size: 28px;
    }

    .exc-card-content p {
        font-size: 15px;
    }
}

@media(max-width:576px) {

    .exc-destination-card {
        flex: 0 0 90%;
        height: 500px;
    }

    .exc-card-content {
        padding: 24px;
    }

    .exc-card-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

/*=========================================================
        DESTINATION CARD HOVER EFFECTS
=========================================================*/

.exc-destination-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 30px;
    padding: 2px;
    background: linear-gradient( 135deg, transparent, rgba(216,177,91,.9), rgba(124,77,255,.7), transparent );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: .45s;
    z-index: 20;
}


/*=========================================================
        GOLD BORDER
=========================================================*/

.exc-destination-card:hover::before {
    opacity: 1;
}


/*=========================================================
        CARD HOVER
=========================================================*/

.exc-destination-card:hover {
    transform: translateY(-18px);
    border-color: rgba(216,177,91,.45);
    box-shadow: 0 45px 80px rgba(0,0,0,.45), 0 0 35px rgba(216,177,91,.15);
}


    /*=========================================================
        IMAGE ZOOM
=========================================================*/

    .exc-destination-card:hover img {
        transform: scale(1.12);
    }


    /*=========================================================
        OVERLAY
=========================================================*/

    .exc-destination-card:hover .exc-card-overlay {
        background: linear-gradient( to top, rgba(8,8,12,.95) 5%, rgba(15,10,30,.55) 50%, rgba(0,0,0,.10) 100% );
    }


/*=========================================================
        CONTENT ANIMATION
=========================================================*/

.exc-card-content {
    transition: .45s;
}

.exc-destination-card:hover .exc-card-content {
    transform: translateY(-8px);
}


/*=========================================================
        COUNTRY BADGE
=========================================================*/

.exc-country {
    transition: .35s;
}

.exc-destination-card:hover .exc-country {
    background: rgba(216,177,91,.18);
    border-color: rgba(216,177,91,.40);
}


/*=========================================================
        TOUR TAGS
=========================================================*/

.exc-tour-info span {
    transition: .35s;
}

.exc-destination-card:hover .exc-tour-info span {
    background: rgba(255,255,255,.10);
    border-color: rgba(216,177,91,.20);
}


/*=========================================================
        EXPLORE BUTTON
=========================================================*/

.exc-explore-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    height: 50px;
    padding: 0 26px;
    border-radius: 40px;
    overflow: hidden;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: .5px;
    color: #111;
    background: linear-gradient( 135deg, var(--exc-gold), #FFE49B );
    transition: .35s;
    box-shadow: 0 12px 30px rgba(216,177,91,.25);
}


    /*=========================================================
        BUTTON SHINE
=========================================================*/

    .exc-explore-btn::before {
        content: "";
        position: absolute;
        top: 0;
        left: -120%;
        width: 60%;
        height: 100%;
        transform: skewX(-25deg);
        background: rgba(255,255,255,.45);
    }


    /*=========================================================
        BUTTON HOVER
=========================================================*/

    .exc-explore-btn:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 40px rgba(216,177,91,.45);
    }


        .exc-explore-btn:hover::before {
            animation: excExploreShine .9s linear;
        }


@keyframes excExploreShine {

    from {
        left: -120%;
    }

    to {
        left: 170%;
    }
}


/*=========================================================
        PRICE GLOW
=========================================================*/

.exc-card-footer h4 {
    transition: .35s;
}

.exc-destination-card:hover .exc-card-footer h4 {
    text-shadow: 0 0 15px rgba(216,177,91,.45);
}


/*=========================================================
        TITLE GLOW
=========================================================*/

.exc-card-content h3 {
    transition: .35s;
}

.exc-destination-card:hover h3 {
    color: #fff6dd;
}


/*=========================================================
        PARALLAX SHADOW
=========================================================*/

.exc-destination-card {
    transform-style: preserve-3d;
}


/*=========================================================
        CAROUSEL BUTTONS
=========================================================*/

.exc-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 72px;
    height: 72px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 50;
    font-size: 30px;
    color: #ffffff;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.10);
    transition: .35s;
}


/*=========================================================
        PREVIOUS
=========================================================*/

.exc-prev {
    left: -36px;
}


/*=========================================================
        NEXT
=========================================================*/

.exc-next {
    right: -36px;
}


/*=========================================================
        BUTTON HOVER
=========================================================*/

.exc-carousel-btn:hover {
    background: var(--exc-gold);
    color: #111;
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 18px 40px rgba(216,177,91,.35);
}


/*=========================================================
        VIEW ALL BUTTON
=========================================================*/

.exc-featured-bottom {
    margin-top: 70px;
}


/*=========================================================
        RESPONSIVE
=========================================================*/

@media(max-width:1200px) {

    .exc-carousel-btn {
        display: none;
    }
}


@media(max-width:768px) {

    .exc-explore-btn {
        width: 100%;
    }
}


@media(prefers-reduced-motion:reduce) {

    .exc-destination-card,
    .exc-destination-card *,
    .exc-explore-btn {
        transition: none !important;
        animation: none !important;
    }
}

/*=========================================================
        PART 4D
        RESPONSIVE CSS & ANIMATIONS
=========================================================*/


/*=========================================================
        SECTION ENTRANCE
=========================================================*/

.exc-featured {
    animation: excFadeSection 1s ease forwards;
}

@keyframes excFadeSection {

    from {
        opacity: 0;
        transform: translateY(60px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/*=========================================================
        HEADER ANIMATIONS
=========================================================*/

.exc-section-tag {
    animation: excSlideDown .8s ease;
}

.exc-section-header h2 {
    animation: excFadeUp 1s ease;
}

.exc-section-header p {
    animation: excFadeUp 1.2s ease;
}

@keyframes excSlideDown {

    from {
        opacity: 0;
        transform: translateY(-25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes excFadeUp {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/*=========================================================
        STATISTICS
=========================================================*/

.exc-featured-stat {
    animation: excStatFade .9s ease;
}

    .exc-featured-stat:nth-child(2) {
        animation-delay: .1s;
    }

    .exc-featured-stat:nth-child(3) {
        animation-delay: .2s;
    }

    .exc-featured-stat:nth-child(4) {
        animation-delay: .3s;
    }

@keyframes excStatFade {

    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/*=========================================================
        FLOATING CARD ANIMATION
=========================================================*/

.exc-destination-card {
    animation: excCardFloat 8s ease-in-out infinite;
}

    .exc-destination-card:nth-child(2) {
        animation-delay: 1s;
    }

    .exc-destination-card:nth-child(3) {
        animation-delay: 2s;
    }

    .exc-destination-card:nth-child(4) {
        animation-delay: 3s;
    }

    .exc-destination-card:nth-child(5) {
        animation-delay: 4s;
    }

    .exc-destination-card:nth-child(6) {
        animation-delay: 5s;
    }

@keyframes excCardFloat {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}


/*=========================================================
        BACKGROUND GLOW
=========================================================*/

.exc-featured::before {
    animation: excGlowLine 6s linear infinite;
}

@keyframes excGlowLine {

    0% {
        opacity: .4;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: .4;
    }
}


/*=========================================================
        LARGE BACKGROUND TEXT
=========================================================*/

.exc-featured-bg-text {
    animation: excTextGlow 12s linear infinite;
}

@keyframes excTextGlow {

    0% {
        opacity: .04;
    }

    50% {
        opacity: .08;
    }

    100% {
        opacity: .04;
    }
}


/*=========================================================
        BUTTON HOVER
=========================================================*/

.exc-featured-bottom .exc-btn-primary {
    transition: .35s;
}

    .exc-featured-bottom .exc-btn-primary:hover {
        transform: translateY(-6px);
    }


/*=========================================================
        LARGE DESKTOP
=========================================================*/

@media (min-width:1600px) {

    .exc-container {
        max-width: 1500px;
    }

    .exc-destination-card {
        flex: 0 0 450px;
        height: 660px;
    }
}


/*=========================================================
        LAPTOP
=========================================================*/

@media (max-width:1400px) {

    .exc-featured {
        padding: 120px 0;
    }

    .exc-featured-bg-text {
        font-size: 150px;
    }
}


/*=========================================================
        SMALL LAPTOP
=========================================================*/

@media (max-width:1200px) {

    .exc-section-header {
        max-width: 760px;
    }

    .exc-destination-carousel {
        padding: 0 20px;
    }
}


/*=========================================================
        TABLET
=========================================================*/

@media (max-width:992px) {

    .exc-featured {
        padding: 100px 0;
    }

    .exc-section-header h2 {
        font-size: 42px;
    }

    .exc-featured-stats {
        gap: 20px;
    }
}


/*=========================================================
        SMALL TABLET
=========================================================*/

@media (max-width:768px) {

    .exc-featured {
        padding: 80px 0;
    }

    .exc-section-tag {
        font-size: 12px;
        letter-spacing: 2px;
    }

    .exc-section-header h2 {
        font-size: 34px;
    }

    .exc-section-header p {
        font-size: 15px;
        line-height: 1.8;
    }

    .exc-featured-stat {
        padding: 25px 15px;
    }

        .exc-featured-stat h3 {
            font-size: 34px;
        }
}


/*=========================================================
        MOBILE
=========================================================*/

@media (max-width:576px) {

    .exc-featured {
        padding: 70px 0;
    }

    .exc-section-header {
        margin-bottom: 50px;
    }

        .exc-section-header h2 {
            font-size: 28px;
        }

        .exc-section-header p {
            font-size: 14px;
        }

    .exc-featured-stat h3 {
        font-size: 28px;
    }

    .exc-featured-stat span {
        font-size: 13px;
    }

    .exc-destination-carousel {
        padding: 0;
    }
}


/*=========================================================
        SMALL MOBILE
=========================================================*/

@media (max-width:420px) {

    .exc-section-header h2 {
        font-size: 24px;
    }

    .exc-section-tag {
        padding: 8px 18px;
        font-size: 11px;
    }
}


/*=========================================================
        REDUCED MOTION
=========================================================*/

@media (prefers-reduced-motion:reduce) {

    .exc-featured *,
    .exc-featured::before,
    .exc-featured::after {
        animation: none !important;
        transition: none !important;
    }
}

/*=========================================================
                PART 5B.1
        ABOUT LAYOUT & TYPOGRAPHY
=========================================================*/

.exc-about {
    position: relative;
    overflow: hidden;
    padding: 140px 0;
    background: radial-gradient(circle at top left, rgba(124,77,255,.10), transparent 35%), radial-gradient(circle at bottom right, rgba(79,195,247,.08), transparent 40%), linear-gradient( 180deg, #07070c 0%, #11111b 50%, #09090f 100%);
}


    /*=========================================================
                DECORATIVE GLOW
=========================================================*/

    .exc-about::before {
        content: "";
        position: absolute;
        top: -180px;
        left: -180px;
        width: 450px;
        height: 450px;
        border-radius: 50%;
        background: rgba(124,77,255,.10);
        filter: blur(140px);
    }

    .exc-about::after {
        content: "";
        position: absolute;
        right: -180px;
        bottom: -180px;
        width: 450px;
        height: 450px;
        border-radius: 50%;
        background: rgba(79,195,247,.08);
        filter: blur(150px);
    }


/*=========================================================
                WRAPPER
=========================================================*/

.exc-about-wrapper {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 90px;
}


/*=========================================================
                LEFT
=========================================================*/

.exc-about-left {
    position: relative;
}


/*=========================================================
                RIGHT
=========================================================*/

.exc-about-right {
    position: relative;
}


/*=========================================================
                SECTION TAG
=========================================================*/

.exc-about .exc-section-tag {
    display: inline-block;
    margin-bottom: 25px;
    padding: 10px 26px;
    border-radius: 40px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(212,175,55,.25);
    color: var(--exc-gold);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    backdrop-filter: blur(15px);
}


/*=========================================================
                TITLE
=========================================================*/

.exc-about-right h2 {
    font-family: 'Cinzel',serif;
    font-size: 58px;
    line-height: 1.15;
    color: #ffffff;
    margin-bottom: 30px;
    font-weight: 700;
}


    /*=========================================================
                GOLD DIVIDER
=========================================================*/

    .exc-about-right h2::after {
        content: "";
        display: block;
        width: 120px;
        height: 3px;
        margin-top: 24px;
        border-radius: 10px;
        background: linear-gradient( 90deg, transparent, var(--exc-gold), transparent);
    }


/*=========================================================
                PARAGRAPHS
=========================================================*/

.exc-about-right p {
    color: #d6d7de;
    font-size: 17px;
    line-height: 2;
    margin-bottom: 22px;
}


/*=========================================================
                FEATURES GRID
=========================================================*/

.exc-about-features {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 18px;
    margin: 45px 0;
}


/*=========================================================
                FEATURE ITEM
=========================================================*/

.exc-feature-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    backdrop-filter: blur(10px);
    transition: .35s;
}

    .exc-feature-item:hover {
        border-color: rgba(212,175,55,.35);
        transform: translateX(8px);
    }


    /*=========================================================
                FEATURE ICON
=========================================================*/

    .exc-feature-item i {
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(212,175,55,.12);
        color: var(--exc-gold);
        font-size: 15px;
    }


    /*=========================================================
                FEATURE TEXT
=========================================================*/

    .exc-feature-item span {
        color: #f2f2f2;
        font-size: 15px;
        font-weight: 500;
    }


/*=========================================================
                QUOTE
=========================================================*/

.exc-about-quote {
    position: relative;
    margin: 45px 0;
    padding: 28px 35px;
    border-left: 4px solid var(--exc-gold);
    background: rgba(255,255,255,.04);
    border-radius: 0 18px 18px 0;
    color: #ececec;
    font-size: 20px;
    font-style: italic;
    line-height: 1.8;
}


/*=========================================================
                FOOTER
=========================================================*/

.exc-about-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    margin-top: 50px;
}


/*=========================================================
                SIGNATURE
=========================================================*/

.exc-signature {
    display: flex;
    align-items: center;
    gap: 18px;
}

    .exc-signature img {
        width: 150px;
        height: auto;
    }

    .exc-signature h4 {
        color: #ffffff;
        font-size: 20px;
        margin-bottom: 5px;
        font-weight: 600;
    }

    .exc-signature span {
        color: #a9a9b5;
        font-size: 15px;
    }


/*=========================================================
                RESPONSIVE
=========================================================*/

@media(max-width:1200px) {

    .exc-about-wrapper {
        gap: 60px;
    }

    .exc-about-right h2 {
        font-size: 50px;
    }
}


@media(max-width:992px) {

    .exc-about {
        padding: 100px 0;
    }

    .exc-about-wrapper {
        grid-template-columns: 1fr;
    }

    .exc-about-right {
        order: 2;
    }

    .exc-about-left {
        order: 1;
        max-width: 700px;
        margin: auto;
    }
}


@media(max-width:768px) {

    .exc-about-right h2 {
        font-size: 40px;
    }

    .exc-about-features {
        grid-template-columns: 1fr;
    }

    .exc-about-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}


@media(max-width:576px) {

    .exc-about {
        padding: 80px 0;
    }

    .exc-about-right h2 {
        font-size: 32px;
    }

    .exc-about-right p {
        font-size: 16px;
        line-height: 1.8;
    }

    .exc-about-quote {
        padding: 24px;
        font-size: 17px;
    }

    .exc-signature {
        flex-direction: column;
        align-items: flex-start;
    }

        .exc-signature img {
            width: 120px;
        }
}

/*=========================================================
                PART 5B.2
        IMAGE & FLOATING CARDS
=========================================================*/


/*=========================================================
                IMAGE WRAPPER
=========================================================*/

.exc-about-image {
    position: relative;
    overflow: hidden;
    border-radius: 40px;
    min-height: 720px;
    box-shadow: 0 35px 90px rgba(0,0,0,.45);
    border: 1px solid rgba(255,255,255,.08);
}


    /*=========================================================
                IMAGE
=========================================================*/

    .exc-about-image img {
        width: 100%;
        height: 720px;
        object-fit: cover;
        display: block;
        transition: transform .8s ease;
    }


/*=========================================================
                IMAGE OVERLAY
=========================================================*/

.exc-about-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(6,6,12,.75), rgba(6,6,12,.10) 45%, rgba(124,77,255,.12));
}


/*=========================================================
                GOLD BORDER
=========================================================*/

.exc-about-image::before {
    content: "";
    position: absolute;
    inset: 16px;
    border-radius: 28px;
    border: 1px solid rgba(212,175,55,.35);
    z-index: 2;
    pointer-events: none;
}


/*=========================================================
                IMAGE HOVER
=========================================================*/

.exc-about-image:hover img {
    transform: scale(1.08);
}


/*=========================================================
                FLOATING CARD
=========================================================*/

.exc-about-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 24px;
    min-width: 240px;
    border-radius: 22px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 20px 45px rgba(0,0,0,.30);
    z-index: 20;
    transition: .4s;
}


/*=========================================================
                CARD ICON
=========================================================*/

.exc-card-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    background: linear-gradient( 135deg, var(--exc-gold), #ffe8a3);
    color: #151515;
    flex-shrink: 0;
}


/*=========================================================
                CARD TEXT
=========================================================*/

.exc-about-card h3 {
    color: #ffffff;
    font-size: 30px;
    margin-bottom: 4px;
    font-family: 'Cinzel',serif;
}

.exc-about-card span {
    color: #d8d8d8;
    font-size: 14px;
    letter-spacing: 1px;
}


/*=========================================================
                CARD POSITIONS
=========================================================*/

.exc-card-one {
    top: 50px;
    left: -50px;
}

.exc-card-two {
    bottom: 60px;
    right: -45px;
}


/*=========================================================
                EXPERIENCE BADGE
=========================================================*/

.exc-experience {
    position: absolute;
    left: 50%;
    bottom: -55px;
    transform: translateX(-50%);
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: linear-gradient( 135deg, var(--exc-gold), #ffefba);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #181818;
    box-shadow: 0 25px 60px rgba(212,175,55,.30);
    z-index: 30;
}


    /*=========================================================
                EXPERIENCE NUMBER
=========================================================*/

    .exc-experience h2 {
        font-family: 'Cinzel',serif;
        font-size: 64px;
        line-height: 1;
        margin-bottom: 10px;
        color: #1b1b1b;
    }


    /*=========================================================
                EXPERIENCE TEXT
=========================================================*/

    .exc-experience span {
        font-size: 15px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
        line-height: 1.6;
    }


/*=========================================================
                CARD HOVER
=========================================================*/

.exc-about-card:hover {
    transform: translateY(-10px);
    border-color: rgba(212,175,55,.45);
    box-shadow: 0 28px 60px rgba(0,0,0,.40);
}


/*=========================================================
                DECORATIVE RING
=========================================================*/

.exc-experience::before {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 2px dashed rgba(212,175,55,.35);
    animation: excRotateRing 18s linear infinite;
}


/*=========================================================
                LIGHT EFFECT
=========================================================*/

.exc-about-left::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    top: -80px;
    right: -90px;
    border-radius: 50%;
    background: rgba(79,195,247,.10);
    filter: blur(90px);
    z-index: 0;
}


/*=========================================================
                ANIMATION
=========================================================*/

@keyframes excRotateRing {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/*=========================================================
                RESPONSIVE
=========================================================*/

@media(max-width:1200px) {

    .exc-about-image,
    .exc-about-image img {
        height: 650px;
        min-height: 650px;
    }
}


@media(max-width:992px) {

    .exc-about-left {
        padding-bottom: 130px;
    }

    .exc-card-one {
        left: 20px;
    }

    .exc-card-two {
        right: 20px;
    }
}


@media(max-width:768px) {

    .exc-about-image,
    .exc-about-image img {
        height: 540px;
        min-height: 540px;
    }

    .exc-about-card {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        margin-top: 20px;
        width: 100%;
    }

    .exc-experience {
        width: 180px;
        height: 180px;
        bottom: -90px;
    }

        .exc-experience h2 {
            font-size: 52px;
        }
}


@media(max-width:576px) {

    .exc-about-image,
    .exc-about-image img {
        height: 430px;
        min-height: 430px;
        border-radius: 24px;
    }

    .exc-card-icon {
        width: 52px;
        height: 52px;
        font-size: 22px;
    }

    .exc-about-card h3 {
        font-size: 24px;
    }

    .exc-about-card {
        padding: 18px;
        min-width: auto;
    }

    .exc-experience {
        width: 160px;
        height: 160px;
    }

        .exc-experience h2 {
            font-size: 42px;
        }

        .exc-experience span {
            font-size: 12px;
        }
}

/*=========================================================
                    ABOUT EXCEL LANKA
            PART 5B.1 - LAYOUT & BACKGROUND
=========================================================*/

.exc-about {
    position: relative;
    overflow: hidden;
    padding: 30px 0;
    background: radial-gradient(circle at top left, rgba(126,87,194,.08), transparent 35%), radial-gradient(circle at bottom right, rgba(129,212,250,.08), transparent 35%), linear-gradient( 180deg, #07080d 0%, #0d1018 45%, #08090e 100%);
}


    /*=========================================================
                    BACKGROUND DECORATION
=========================================================*/

    .exc-about::before {
        content: "";
        position: absolute;
        width: 700px;
        height: 700px;
        left: -300px;
        top: -250px;
        border-radius: 50%;
        background: rgba(126,87,194,.12);
        filter: blur(170px);
        pointer-events: none;
    }

    .exc-about::after {
        content: "";
        position: absolute;
        width: 650px;
        height: 650px;
        right: -280px;
        bottom: -260px;
        border-radius: 50%;
        background: rgba(79,195,247,.08);
        filter: blur(170px);
        pointer-events: none;
    }


/*=========================================================
                    GRID
=========================================================*/

.exc-about-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 48% 52%;
    gap: 100px;
    align-items: center;
}


/*=========================================================
                    IMAGE COLUMN
=========================================================*/

.exc-about-image-column {
    position: relative;
}


/*=========================================================
                    CONTENT
=========================================================*/

.exc-about-content {
    position: relative;
    left: -60px;
    max-width: 720px;
}

/*=========================================================
                    SUBTITLE
=========================================================*/

.exc-about-subtitle {
    display: inline-flex;
    align-items: center;
    width: max-content;
    padding: 10px 24px;
    margin-bottom: 28px;
    border-radius: 50px;
    border: 1px solid rgba(212,175,55,.25);
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(15px);
    color: var(--exc-gold);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}


/*=========================================================
                    HEADING
=========================================================*/

.exc-about-content h2 {
    font-family: "Cinzel",serif;
    font-size: 58px;
    line-height: 1.18;
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 28px;
}


/*=========================================================
                    GOLD DIVIDER
=========================================================*/

.exc-about-divider {
    width: 120px;
    height: 3px;
    margin-bottom: 35px;
    border-radius: 20px;
    background: linear-gradient( 90deg, transparent, var(--exc-gold), transparent);
}


/*=========================================================
                    PARAGRAPHS
=========================================================*/

.exc-about-content > p {
    color: #d7dbe3;
    font-size: 17px;
    line-height: 2;
    margin-bottom: 24px;
}


/*=========================================================
                    FOOTER
=========================================================*/

.exc-about-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    margin-top: 70px;
    padding-top: 35px;
    border-top: 1px solid rgba(255,255,255,.08);
}


/*=========================================================
                    SIGNATURE
=========================================================*/

.exc-about-signature {
    display: flex;
    align-items: center;
    gap: 18px;
}

    .exc-about-signature img {
        width: 160px;
        height: auto;
    }

    .exc-about-signature h5 {
        color: #ffffff;
        font-size: 21px;
        margin-bottom: 8px;
        font-weight: 600;
    }

    .exc-about-signature span {
        color: #9ea8b8;
        font-size: 15px;
        line-height: 1.6;
    }


/*=========================================================
                    BUTTONS
=========================================================*/

.exc-about-buttons {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}


/*=========================================================
                    LARGE DESKTOP
=========================================================*/

@media(min-width:1700px) {

    .exc-about-grid {
        gap: 140px;
    }

    .exc-about-content h2 {
        font-size: 68px;
    }
}


/*=========================================================
                    DESKTOP
=========================================================*/

@media(max-width:1400px) {

    .exc-about {
        padding: 140px 0;
    }

    .exc-about-content h2 {
        font-size: 52px;
    }
}


/*=========================================================
                    LAPTOP
=========================================================*/

@media(max-width:1200px) {

    .exc-about-grid {
        gap: 70px;
    }

    .exc-about-content h2 {
        font-size: 46px;
    }
}


/*=========================================================
                    TABLET
=========================================================*/

@media(max-width:992px) {

    .exc-about {
        padding: 100px 0;
    }

    .exc-about-grid {
        grid-template-columns: 1fr;
        gap: 70px;
    }
}


/*=========================================================
                    MOBILE
=========================================================*/

@media(max-width:768px) {

    .exc-about {
        padding: 80px 0;
    }

    .exc-about-content h2 {
        font-size: 36px;
    }

    .exc-about-content > p {
        font-size: 16px;
        line-height: 1.9;
    }

    .exc-about-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}


/*=========================================================
                    SMALL MOBILE
=========================================================*/

@media(max-width:576px) {

    .exc-about-content h2 {
        font-size: 30px;
    }

    .exc-about-subtitle {
        letter-spacing: 2px;
        font-size: 12px;
    }

    .exc-about-signature {
        flex-direction: column;
        align-items: flex-start;
    }

        .exc-about-signature img {
            width: 130px;
        }
}


/*=========================================================
        PART 5B.2
        FULL HEIGHT CINEMATIC IMAGE
=========================================================*/

.exc-about-image-column {
    position: relative;
    display: flex;
    align-items: stretch;
}


/*=========================================================
        IMAGE WRAPPER
=========================================================*/

.exc-about-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 980px;
    overflow: hidden;
    border-radius: 80px 20px 80px 20px;
    background: #111;
    box-shadow: 0 45px 100px rgba(0,0,0,.45);
}


/*=========================================================
        IMAGE
=========================================================*/

.exc-about-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 8s ease;
}


/*=========================================================
        GOLD FRAME
=========================================================*/

.exc-about-image-wrapper::before {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 65px 15px 65px 15px;
    border: 1px solid rgba(212,175,55,.45);
    z-index: 3;
    pointer-events: none;
}


/*=========================================================
        OUTER GLOW
=========================================================*/

.exc-about-image-wrapper::after {
    content: "";
    position: absolute;
    inset: -30px;
    border-radius: 90px;
    background: radial-gradient( circle, rgba(126,87,194,.20), transparent 70% );
    filter: blur(80px);
    z-index: -1;
}


/*=========================================================
        IMAGE OVERLAY
=========================================================*/

.exc-about-image-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient( 180deg, rgba(0,0,0,.08), rgba(0,0,0,.12), rgba(0,0,0,.28), rgba(6,8,14,.55) );
}


    /*=========================================================
        LUXURY LIGHT
=========================================================*/

    .exc-about-image-overlay::before {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        top: -160px;
        right: -140px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(255,255,255,.22), transparent 70% );
        filter: blur(60px);
    }


    /*=========================================================
        BOTTOM VIGNETTE
=========================================================*/

    .exc-about-image-overlay::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 45%;
        background: linear-gradient( to top, rgba(5,6,10,.60), transparent );
    }


/*=========================================================
        IMAGE HOVER
=========================================================*/

.exc-about-image-wrapper:hover .exc-about-image {
    transform: scale(1.08);
}


/*=========================================================
        FRAME HOVER
=========================================================*/

.exc-about-image-wrapper {
    transition: transform .5s ease, box-shadow .5s ease;
}

    .exc-about-image-wrapper:hover {
        transform: translateY(-10px);
        box-shadow: 0 60px 120px rgba(0,0,0,.55), 0 0 40px rgba(212,175,55,.12);
    }


    /*=========================================================
        GOLD SHIMMER
=========================================================*/

    .exc-about-image-wrapper span {
        display: none;
    }

    .exc-about-image-wrapper:hover::before {
        border-color: rgba(212,175,55,.75);
    }


/*=========================================================
        RESPONSIVE
=========================================================*/

@media(max-width:1400px) {

    .exc-about-image-wrapper {
        min-height: 900px;
    }
}


@media(max-width:1200px) {

    .exc-about-image-wrapper {
        min-height: 820px;
    }
}


@media(max-width:992px) {

    .exc-about-image-wrapper {
        min-height: 700px;
    }
}


@media(max-width:768px) {

    .exc-about-image-wrapper {
        min-height: 600px;
        border-radius: 40px;
    }

        .exc-about-image-wrapper::before {
            inset: 12px;
            border-radius: 30px;
        }
}


@media(max-width:576px) {

    .exc-about-image-wrapper {
        min-height: 500px;
    }
}


/*=========================================================
        REDUCED MOTION
=========================================================*/

@media(prefers-reduced-motion:reduce) {

    .exc-about-image,
    .exc-about-image-wrapper {
        transition: none;
    }
}

/*=========================================================
                PART 5B.3
        FEATURES, QUOTE & CTA
=========================================================*/


/*=========================================================
                FEATURES
=========================================================*/

.exc-about-features {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 28px;
    margin: 60px 0;
}


/*=========================================================
                FEATURE CARD
=========================================================*/

.exc-about-feature {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 22px;
    padding: 28px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 24px;
    backdrop-filter: blur(18px);
    transition: all .45s ease;
    overflow: hidden;
}


    .exc-about-feature::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient( to bottom, var(--exc-gold), var(--exc-light-blue));
        transform: scaleY(0);
        transform-origin: top;
        transition: .45s;
    }


    .exc-about-feature:hover {
        transform: translateY(-10px);
        border-color: rgba(212,175,55,.35);
        box-shadow: 0 20px 45px rgba(0,0,0,.35);
    }


        .exc-about-feature:hover::before {
            transform: scaleY(1);
        }


/*=========================================================
                FEATURE ICON
=========================================================*/

.exc-feature-icon {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    background: linear-gradient( 135deg, rgba(212,175,55,.20), rgba(126,87,194,.18));
    border: 1px solid rgba(212,175,55,.25);
    color: var(--exc-gold);
    font-size: 28px;
    transition: .4s;
}


.exc-about-feature:hover .exc-feature-icon {
    transform: rotate(-8deg) scale(1.08);
    color: #fff;
}


/*=========================================================
                FEATURE TEXT
=========================================================*/

.exc-about-feature h4 {
    color: #ffffff;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 10px;
}


.exc-about-feature p {
    color: #b8bec9;
    font-size: 15px;
    line-height: 1.8;
    margin: 0;
}


/*=========================================================
                QUOTE
=========================================================*/

.exc-about-quote {
    position: relative;
    margin-top: 30px;
    margin-bottom: 60px;
    padding: 45px;
    background: rgba(255,255,255,.04);
    border-left: 4px solid var(--exc-gold);
    border-radius: 0 28px 28px 0;
    transition: .4s;
}


    .exc-about-quote i {
        font-size: 42px;
        color: var(--exc-gold);
        margin-bottom: 20px;
        display: block;
    }


    .exc-about-quote p {
        color: #f1f1f1;
        font-size: 22px;
        line-height: 1.9;
        font-style: italic;
        margin: 0;
    }


    .exc-about-quote:hover {
        transform: translateX(10px);
        border-left-color: var(--exc-light-blue);
    }

/*=========================================================
                FOOTER
=========================================================*/

.exc-about-footer {
    position: relative;
}


/*=========================================================
                SIGNATURE
=========================================================*/

.exc-about-signature {
    display: flex;
    align-items: center;
    gap: 22px;
    transition: .4s;
}


    .exc-about-signature:hover {
        transform: translateX(10px);
    }


    .exc-about-signature img {
        width: 170px;
        transition: .4s;
    }


    .exc-about-signature:hover img {
        transform: scale(1.08);
    }


    .exc-about-signature h5 {
        font-size: 22px;
        color: #ffffff;
        margin-bottom: 8px;
    }


    .exc-about-signature span {
        color: #9ca8ba;
        line-height: 1.8;
    }


/*=========================================================
                BUTTON GROUP
=========================================================*/

.exc-about-buttons {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}


/*=========================================================
                OUTLINE BUTTON
=========================================================*/

.exc-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 190px;
    height: 60px;
    padding: 0 34px;
    border-radius: 60px;
    text-decoration: none;
    border: 1px solid rgba(212,175,55,.35);
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(18px);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: .4s;
}


    .exc-btn-outline:hover {
        background: linear-gradient( 135deg, var(--exc-gold), #ffe59a);
        color: #111;
        border-color: transparent;
        transform: translateY(-5px);
        box-shadow: 0 20px 40px rgba(212,175,55,.35);
    }


/*=========================================================
                RESPONSIVE
=========================================================*/

@media(max-width:1200px) {

    .exc-about-features {
        gap: 22px;
    }
}


@media(max-width:992px) {

    .exc-about-features {
        grid-template-columns: 1fr;
    }
}


@media(max-width:768px) {

    .exc-about-feature {
        padding: 24px;
    }

    .exc-feature-icon {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }

    .exc-about-feature h4 {
        font-size: 20px;
    }

    .exc-about-quote {
        padding: 32px;
    }

        .exc-about-quote p {
            font-size: 18px;
        }

    .exc-about-buttons {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .exc-btn-outline,
    .exc-btn-primary {
        width: 100%;
    }
}


@media(max-width:576px) {

    .exc-about-feature {
        flex-direction: column;
        text-align: left;
    }

    .exc-about-quote {
        padding: 26px;
    }

        .exc-about-quote i {
            font-size: 34px;
        }

        .exc-about-quote p {
            font-size: 17px;
            line-height: 1.8;
        }

    .exc-about-signature {
        flex-direction: column;
        align-items: flex-start;
    }

        .exc-about-signature img {
            width: 140px;
        }
}
/*=========================================================
                PART 5C
        SCROLL REVEAL & LUXURY ANIMATIONS
=========================================================*/


/*=========================================================
        INITIAL STATE
=========================================================*/

.exc-about-subtitle,
.exc-about-content h2,
.exc-about-divider,
.exc-about-content > p,
.exc-about-feature,
.exc-about-quote,
.exc-about-footer,
.exc-about-image-wrapper {
    opacity: 0;
    transform: translateY(60px);
    animation-fill-mode: forwards;
}


/*=========================================================
        IMAGE
=========================================================*/

.exc-about-image-wrapper {
    animation: excImageReveal 1.2s ease forwards;
}


/*=========================================================
        SUBTITLE
=========================================================*/

.exc-about-subtitle {
    animation: excFadeUp .8s ease .2s forwards;
}


/*=========================================================
        HEADING
=========================================================*/

.exc-about-content h2 {
    animation: excFadeUp .9s ease .35s forwards;
}


/*=========================================================
        DIVIDER
=========================================================*/

.exc-about-divider {
    animation: excGrowLine .9s ease .55s forwards;
}


/*=========================================================
        PARAGRAPHS
=========================================================*/

.exc-about-content > p:nth-of-type(1) {
    animation: excFadeUp .9s ease .65s forwards;
}

.exc-about-content > p:nth-of-type(2) {
    animation: excFadeUp .9s ease .85s forwards;
}


/*=========================================================
        FEATURE STAGGER
=========================================================*/

.exc-about-feature:nth-child(1) {
    animation: excFadeUp .8s ease 1.0s forwards;
}

.exc-about-feature:nth-child(2) {
    animation: excFadeUp .8s ease 1.15s forwards;
}

.exc-about-feature:nth-child(3) {
    animation: excFadeUp .8s ease 1.30s forwards;
}

.exc-about-feature:nth-child(4) {
    animation: excFadeUp .8s ease 1.45s forwards;
}


/*=========================================================
        QUOTE
=========================================================*/

.exc-about-quote {
    animation: excFadeUp .9s ease 1.6s forwards;
}


/*=========================================================
        FOOTER
=========================================================*/

.exc-about-footer {
    animation: excFadeUp .9s ease 1.8s forwards;
}


/*=========================================================
        IMAGE SLOW FLOAT
=========================================================*/

.exc-about-image-wrapper {
    animation: excImageReveal 1.2s ease forwards, excImageFloat 9s ease-in-out infinite 1.2s;
}


/*=========================================================
        IMAGE ZOOM
=========================================================*/

.exc-about-image {
    animation: excImageZoom 18s linear infinite alternate;
}


/*=========================================================
        FEATURE FLOAT
=========================================================*/

.exc-about-feature {
    transition: transform .45s, border-color .45s, box-shadow .45s;
}

    .exc-about-feature:hover {
        transform: translateY(-12px);
    }

.exc-about-image-column {
    position: relative;
    transform: translateY(-80px);
}
/*=========================================================
        QUOTE GLOW
=========================================================*/

.exc-about-quote {
    position: relative;
}

    .exc-about-quote::after {
        content: "";
        position: absolute;
        left: 25px;
        right: 25px;
        bottom: 0;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(212,175,55,.45), transparent );
    }


/*=========================================================
        BUTTON LIFT
=========================================================*/

.exc-btn-primary,
.exc-btn-outline {
    transition: transform .35s, box-shadow .35s;
}

    .exc-btn-primary:hover,
    .exc-btn-outline:hover {
        transform: translateY(-6px);
    }


/*=========================================================
        SIGNATURE
=========================================================*/

.exc-about-signature {
    transition: .4s;
}

    .exc-about-signature:hover {
        transform: translateX(8px);
    }


/*=========================================================
        GOLD DIVIDER SHIMMER
=========================================================*/

.exc-about-divider {
    position: relative;
    overflow: hidden;
}

    .exc-about-divider::before {
        content: "";
        position: absolute;
        top: 0;
        left: -120%;
        width: 50%;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.75), transparent );
        animation: excDividerShimmer 5s linear infinite;
    }


/*=========================================================
        KEYFRAMES
=========================================================*/

@keyframes excFadeUp {

    from {
        opacity: 0;
        transform: translateY(60px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes excGrowLine {

    from {
        opacity: 0;
        width: 0;
    }

    to {
        opacity: 1;
        width: 120px;
    }
}


@keyframes excImageReveal {

    from {
        opacity: 0;
        transform: translateX(-80px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


@keyframes excImageFloat {

    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}


@keyframes excImageZoom {

    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.06);
    }
}


@keyframes excDividerShimmer {

    from {
        left: -120%;
    }

    to {
        left: 180%;
    }
}


/*=========================================================
        RESPONSIVE
=========================================================*/

@media(max-width:992px) {

    .exc-about-image-wrapper {
        animation: excFadeUp .9s ease forwards;
    }
}


@media(prefers-reduced-motion:reduce) {

    .exc-about * {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}
/*=========================================================
            SRI LANKA HEADER
=========================================================*/

.exc-sl-header {
    position: relative;
    overflow: hidden;
    padding: 140px 0 80px;
    background: linear-gradient( rgba(5,8,18,.45), rgba(5,8,18,.50) ), url("../images/srilanka-header-bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

from {
    background-size: 100%;
}

to {
    background-size: 110%;
}

}

    /*=========================================================
            BACKGROUND GLOW
=========================================================*/

.exc-sl-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(126,87,194,.10), transparent 45%), radial-gradient(circle at bottom right, rgba(129,212,250,.08), transparent 45%);
    z-index: 1;
}

    .exc-sl-header::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 180px;
        background: linear-gradient( to bottom, transparent, #07080d );
    }


/*=========================================================
            CONTENT
=========================================================*/

.exc-sl-heading {
    position: relative;
    z-index: 5;
    text-align: center;

}


/*=========================================================
            TAG
=========================================================*/

.exc-sl-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 28px;
    border-radius: 40px;
    border: 1px solid rgba(212,175,55,.25);
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(15px);
    color: var(--exc-gold);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
}


/*=========================================================
            TITLE
=========================================================*/

.exc-sl-heading h2 {
    margin-top: 28px;
    font-family: 'Cinzel',serif;
    font-size: 60px;
    line-height: 1.2;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 5px 25px rgba(0,0,0,.45);
}


/*=========================================================
            DIVIDER
=========================================================*/

.exc-sl-divider {
    width: 140px;
    height: 3px;
    margin: 35px auto;
    border-radius: 20px;
    background: linear-gradient( 90deg, transparent, var(--exc-gold), transparent);
}


/*=========================================================
            DESCRIPTION
=========================================================*/

.exc-sl-heading p {
    max-width: 760px;
    margin: auto;
    color: #c8cfda;
    font-size: 18px;
    line-height: 2;
    text-shadow: 0 2px 10px rgba(0,0,0,.35);
}


/*=========================================================
            ANIMATION
=========================================================*/

.exc-sl-heading {
    animation: excFadeUp 1s ease;
}


/*=========================================================
            RESPONSIVE
=========================================================*/

@media(max-width:1200px) {

    .exc-sl-heading h2 {
        font-size: 52px;
    }
}


@media(max-width:992px) {

    .exc-sl-header {
        padding: 100px 0 60px;
    }

    .exc-sl-heading h2 {
        font-size: 44px;
    }
}


@media(max-width:768px) {

    .exc-sl-heading h2 {
        font-size: 36px;
    }

    .exc-sl-heading p {
        font-size: 16px;
        line-height: 1.9;
    }
}


@media(max-width:576px) {

    .exc-sl-header {
        padding: 80px 0 50px;
    }

    .exc-sl-tag {
        font-size: 12px;
        letter-spacing: 2px;
        padding: 9px 22px;
    }

    .exc-sl-heading h2 {
        font-size: 30px;
    }

    .exc-sl-divider {
        width: 100px;
    }
}

/*=========================================================
                    PART 6B.1
        LUXURY PROCESS LAYOUT & BACKGROUND
=========================================================*/


/*=========================================================
                    SECTION
=========================================================*/

.exc-process {
    position: relative;
    overflow: hidden;
    padding: 140px 0;
    background: linear-gradient( 180deg, #07080d 0%, #0d1118 50%, #08090d 100%);
}


    /*=========================================================
                    PURPLE GLOW
=========================================================*/

    .exc-process::before {
        content: "";
        position: absolute;
        width: 650px;
        height: 650px;
        left: -260px;
        top: -220px;
        border-radius: 50%;
        background: rgba(126,87,194,.10);
        filter: blur(170px);
        pointer-events: none;
    }


    /*=========================================================
                    BLUE GLOW
=========================================================*/

    .exc-process::after {
        content: "";
        position: absolute;
        width: 600px;
        height: 600px;
        right: -250px;
        bottom: -220px;
        border-radius: 50%;
        background: rgba(129,212,250,.08);
        filter: blur(170px);
        pointer-events: none;
    }


    /*=========================================================
                    CONTAINER
=========================================================*/

    .exc-process .exc-container {
        position: relative;
        z-index: 2;
    }


/*=========================================================
                    HEADER
=========================================================*/

.exc-process-header {
    max-width: 900px;
    margin: 0 auto 90px;
    text-align: center;
}


/*=========================================================
                    TAG
=========================================================*/

.exc-process-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 26px;
    border-radius: 50px;
    border: 1px solid rgba(212,175,55,.25);
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(18px);
    color: var(--exc-gold);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}


/*=========================================================
                    TITLE
=========================================================*/

.exc-process-header h2 {
    margin-top: 28px;
    font-family: 'Cinzel',serif;
    font-size: 58px;
    line-height: 1.2;
    font-weight: 700;
    color: #ffffff;
}


/*=========================================================
                    DIVIDER
=========================================================*/

.exc-process-divider {
    width: 140px;
    height: 3px;
    margin: 35px auto;
    border-radius: 30px;
    background: linear-gradient( 90deg, transparent, var(--exc-gold), transparent);
}


/*=========================================================
                    DESCRIPTION
=========================================================*/

.exc-process-header p {
    max-width: 760px;
    margin: auto;
    color: #c7ced9;
    font-size: 18px;
    line-height: 2;
}


/*=========================================================
                    TIMELINE
=========================================================*/

.exc-process-timeline {
    position: relative;
    width: 100%;
    height: 2px;
    margin-bottom: 70px;
    background: rgba(255,255,255,.08);
}


    .exc-process-timeline span {
        position: absolute;
        inset: 0;
        background: linear-gradient( 90deg, var(--exc-gold), var(--exc-light-blue));
        box-shadow: 0 0 20px rgba(212,175,55,.35);
    }


/*=========================================================
                    FOOTER
=========================================================*/

.exc-process-footer {
    margin-top: 90px;
    text-align: center;
}


    .exc-process-footer p {
        color: #d6dce5;
        font-size: 22px;
        margin-bottom: 30px;
    }


/*=========================================================
                    RESPONSIVE
=========================================================*/

@media(max-width:1200px) {

    .exc-process {
        padding: 120px 0;
    }

    .exc-process-header h2 {
        font-size: 50px;
    }
}


@media(max-width:992px) {

    .exc-process {
        padding: 100px 0;
    }

    .exc-process-header {
        margin-bottom: 70px;
    }

        .exc-process-header h2 {
            font-size: 42px;
        }

    .exc-process-timeline {
        display: none;
    }
}


@media(max-width:768px) {

    .exc-process {
        padding: 80px 0;
    }

    .exc-process-header h2 {
        font-size: 34px;
    }

    .exc-process-header p {
        font-size: 16px;
        line-height: 1.9;
    }

    .exc-process-footer p {
        font-size: 18px;
    }
}


@media(max-width:576px) {

    .exc-process-tag {
        font-size: 12px;
        letter-spacing: 2px;
        padding: 9px 22px;
    }

    .exc-process-header h2 {
        font-size: 30px;
    }

    .exc-process-divider {
        width: 100px;
    }
}

/*=========================================================
                PART 6B.2
        PREMIUM GLASS PROCESS CARDS
=========================================================*/


/*=========================================================
                    PROCESS GRID
=========================================================*/

.exc-process-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 35px;
    position: relative;
    z-index: 5;
}


/*=========================================================
                    PROCESS CARD
=========================================================*/

.exc-process-card {
    position: relative;
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 30px;
    transition: all .45s ease;
    text-align: center;
    overflow: visible; /* Change from hidden */

    padding: 75px 35px 40px;
   
}


    /* Gold Accent */

    .exc-process-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient( 90deg, var(--exc-gold), var(--exc-light-blue));
    }


    /* Luxury Glow */

    .exc-process-card::after {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        right: -120px;
        top: -120px;
        border-radius: 50%;
        background: rgba(126,87,194,.12);
        filter: blur(80px);
    }


    /*=========================================================
                    HOVER
=========================================================*/

    .exc-process-card:hover {
        transform: translateY(-15px);
        border-color: rgba(212,175,55,.35);
        box-shadow: 0 30px 60px rgba(0,0,0,.45), 0 0 35px rgba(212,175,55,.15);
    }


/*=========================================================
                    STEP NUMBER
=========================================================*/

.exc-process-number {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient( 135deg, var(--exc-gold), #ffe59a);
    color: #1b1b1b;
    font-family: 'Cinzel', serif;
    font-size: 30px;
    font-weight: 700;
    z-index: 20;
    box-shadow: 0 15px 35px rgba(212,175,55,.35);
}


/*=========================================================
                    ICON
=========================================================*/

.exc-process-icon {
    width: 95px;
    height: 95px;
    margin: 0 auto 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient( 135deg, rgba(212,175,55,.18), rgba(126,87,194,.20));
    border: 1px solid rgba(212,175,55,.25);
    color: var(--exc-gold);
    font-size: 42px;
    transition: .45s;
}


.exc-process-card:hover .exc-process-icon {
    transform: rotate(-8deg) scale(1.08);
    color: #ffffff;
    border-color: rgba(212,175,55,.45);
}


/*=========================================================
                    TITLE
=========================================================*/

.exc-process-card h3 {
    font-family: 'Cinzel',serif;
    font-size: 26px;
    color: #ffffff;
    line-height: 1.4;
    margin-bottom: 18px;
}


/*=========================================================
                    DESCRIPTION
=========================================================*/

.exc-process-card p {
    color: #c4ccd8;
    font-size: 15px;
    line-height: 1.9;
}


/*=========================================================
                    SHINE EFFECT
=========================================================*/

.exc-process-card .exc-process-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient( 120deg, transparent, rgba(255,255,255,.35), transparent);
    transform: translateX(-140%);
}


.exc-process-card:hover .exc-process-icon::before {
    animation: excIconShine .8s linear;
}


@keyframes excIconShine {

    from {
        transform: translateX(-140%);
    }

    to {
        transform: translateX(180%);
    }
}


/*=========================================================
                    RESPONSIVE
=========================================================*/

@media(max-width:1200px) {

    .exc-process-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 30px;
    }
}


@media(max-width:768px) {

    .exc-process-grid {
        grid-template-columns: 1fr;
    }

    .exc-process-card {
        padding: 80px 28px 35px;
    }

        .exc-process-card h3 {
            font-size: 22px;
        }

    .exc-process-icon {
        width: 80px;
        height: 80px;
        font-size: 34px;
    }
}


@media(max-width:576px) {

    .exc-process-number {
        width: 64px;
        height: 64px;
        font-size: 22px;
        top: -32px;
    }

    .exc-process-card {
        border-radius: 24px;
    }
}
/*=========================================================
                PART 6B.3
    PREMIUM TIMELINE & RESPONSIVE POLISH
=========================================================*/


/*=========================================================
            TIMELINE
=========================================================*/

.exc-process-timeline {
    position: relative;
    width: 85%;
    height: 4px;
    margin: 0 auto 80px;
    border-radius: 50px;
    background: rgba(255,255,255,.08);
    overflow: visible;
}


    /* Gradient Line */

    .exc-process-timeline span {
        position: absolute;
        inset: 0;
        border-radius: 50px;
        background: linear-gradient( 90deg, var(--exc-gold), var(--exc-light-blue));
        box-shadow: 0 0 18px rgba(212,175,55,.35);
    }


    /*=========================================================
            GLOWING NODES
=========================================================*/

    .exc-process-timeline::before,
    .exc-process-timeline::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--exc-gold);
        transform: translateY(-50%);
        box-shadow: 0 0 15px rgba(212,175,55,.6), 0 0 35px rgba(212,175,55,.4);
    }

    .exc-process-timeline::before {
        left: 0;
    }

    .exc-process-timeline::after {
        right: 0;
    }


/*=========================================================
        CONNECT EACH CARD TO TIMELINE
=========================================================*/

.exc-process-card {
    position: relative;
}

    .exc-process-card::before {
        content: "";
        position: absolute;
        top: -52px;
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        height: 52px;
        background: linear-gradient( to bottom, var(--exc-gold), rgba(212,175,55,0));
    }


/*=========================================================
            CARD HOVER
=========================================================*/

.exc-process-card {
    transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease;
}

    .exc-process-card:hover {
        transform: translateY(-16px) scale(1.02);
    }


/*=========================================================
            ICON FLOAT
=========================================================*/

.exc-process-icon {
    animation: excIconFloat 5s ease-in-out infinite;
}

@keyframes excIconFloat {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

    100% {
        transform: translateY(0);
    }
}


/*=========================================================
            STEP NUMBER PULSE
=========================================================*/

.exc-process-number {
    animation: excNumberGlow 3s ease-in-out infinite;
}

@keyframes excNumberGlow {

    0% {
        box-shadow: 0 0 0 rgba(212,175,55,.2);
    }

    50% {
        box-shadow: 0 0 30px rgba(212,175,55,.45);
    }

    100% {
        box-shadow: 0 0 0 rgba(212,175,55,.2);
    }
}


/*=========================================================
            BUTTON HOVER
=========================================================*/

.exc-process-footer .exc-btn-primary {
    transition: transform .35s ease, box-shadow .35s ease;
}

    .exc-process-footer .exc-btn-primary:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 45px rgba(212,175,55,.35);
    }


/*=========================================================
        RESPONSIVE
=========================================================*/

@media(max-width:1200px) {

    .exc-process-grid {
        gap: 30px;
    }
}


/*=========================================================
            TABLET
=========================================================*/

@media(max-width:992px) {

    .exc-process-timeline {
        display: none;
    }

    .exc-process-card::before {
        display: none;
    }
}


/*=========================================================
            MOBILE
=========================================================*/

@media(max-width:768px) {

    .exc-process {
        padding: 90px 0;
    }

    .exc-process-grid {
        gap: 70px;
    }

    .exc-process-card {
        max-width: 520px;
        margin: auto;
    }

    .exc-process-number {
        width: 68px;
        height: 68px;
        font-size: 24px;
    }
}


/*=========================================================
        SMALL MOBILE
=========================================================*/

@media(max-width:576px) {

    .exc-process-card {
        padding: 75px 25px 30px;
    }

        .exc-process-card h3 {
            font-size: 22px;
        }

        .exc-process-card p {
            font-size: 15px;
        }
}


/*=========================================================
        REDUCED MOTION
=========================================================*/

@media(prefers-reduced-motion:reduce) {

    .exc-process * {
        animation: none !important;
        transition: none !important;
    }
}
/*=========================================================
                PART 6B.3
                RESPONSIVE CSS
=========================================================*/


/*=========================================================
                LARGE DESKTOP
=========================================================*/

@media (max-width:1400px) {

    .exc-process {
        padding: 120px 0;
    }

    .exc-process-grid {
        gap: 30px;
    }

    .exc-process-card {
        padding: 85px 30px 35px;
    }
}


/*=========================================================
                LAPTOP
=========================================================*/

@media (max-width:1200px) {

    .exc-process-header h2 {
        font-size: 48px;
    }

    .exc-process-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 35px;
    }

    .exc-process-card {
        max-width: 520px;
        margin: auto;
    }

    .exc-process-footer {
        margin-top: 70px;
    }
}


/*=========================================================
                TABLET
=========================================================*/

@media (max-width:992px) {

    .exc-process {
        padding: 100px 0;
    }

    .exc-process-header {
        margin-bottom: 60px;
    }

        .exc-process-header h2 {
            font-size: 40px;
        }

        .exc-process-header p {
            font-size: 17px;
        }

    .exc-process-grid {
        grid-template-columns: repeat(2,1fr);
        gap: 30px;
    }

    /* Hide timeline */

    .exc-process-timeline {
        display: none;
    }

    .exc-process-card::before {
        display: none;
    }
}


/*=========================================================
                MOBILE
=========================================================*/

@media (max-width:768px) {

    .exc-process {
        padding: 80px 0;
    }

    .exc-process-header {
        margin-bottom: 50px;
    }

        .exc-process-header h2 {
            font-size: 34px;
        }

        .exc-process-header p {
            font-size: 16px;
            line-height: 1.9;
        }

    .exc-process-grid {
        grid-template-columns: 1fr;
        gap: 65px;
    }

    .exc-process-card {
        max-width: 550px;
        width: 100%;
        margin: auto;
        padding: 80px 28px 35px;
    }

    .exc-process-number {
        width: 70px;
        height: 70px;
        font-size: 24px;
    }

    .exc-process-icon {
        width: 85px;
        height: 85px;
        font-size: 36px;
    }

    .exc-process-card h3 {
        font-size: 24px;
    }
}


/*=========================================================
                SMALL MOBILE
=========================================================*/

@media (max-width:576px) {

    .exc-process {
        padding: 70px 0;
    }

    .exc-process-tag {
        font-size: 12px;
        padding: 8px 22px;
        letter-spacing: 2px;
    }

    .exc-process-header h2 {
        font-size: 30px;
    }

    .exc-process-divider {
        width: 90px;
    }

    .exc-process-card {
        border-radius: 24px;
        padding: 75px 22px 30px;
    }

    .exc-process-number {
        width: 60px;
        height: 60px;
        top: -30px;
        font-size: 22px;
    }

    .exc-process-icon {
        width: 75px;
        height: 75px;
        font-size: 30px;
        margin-bottom: 22px;
    }

    .exc-process-card h3 {
        font-size: 21px;
    }

    .exc-process-card p {
        font-size: 15px;
        line-height: 1.8;
    }

    .exc-process-footer p {
        font-size: 18px;
        margin-bottom: 20px;
    }

    .exc-process-footer .exc-btn-primary {
        width: 100%;
        max-width: 320px;
    }
}


/*=========================================================
                EXTRA SMALL DEVICES
=========================================================*/

@media (max-width:400px) {

    .exc-process-header h2 {
        font-size: 26px;
    }

    .exc-process-card {
        padding: 70px 20px 28px;
    }

    .exc-process-icon {
        width: 68px;
        height: 68px;
        font-size: 28px;
    }
}


/*=========================================================
        REDUCED MOTION ACCESSIBILITY
=========================================================*/

@media (prefers-reduced-motion:reduce) {

    .exc-process *,
    .exc-process *::before,
    .exc-process *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto;
    }
}
/*=========================================================
                PART 6C
        SCROLL REVEAL ANIMATIONS
=========================================================*/


/*=========================================================
        INITIAL STATES
=========================================================*/

.exc-process-header,
.exc-process-timeline,
.exc-process-card,
.exc-process-footer {
    opacity: 0;
    transform: translateY(60px);
    animation-fill-mode: forwards;
}


/*=========================================================
        HEADER
=========================================================*/

.exc-process-header {
    animation: excProcessFadeUp .9s ease .2s forwards;
}


/*=========================================================
        TIMELINE
=========================================================*/

.exc-process-timeline {
    animation: excTimelineReveal 1s ease .5s forwards;
}


/*=========================================================
        STAGGERED CARDS
=========================================================*/

.exc-process-card:nth-child(1) {
    animation: excProcessFadeUp .8s ease .7s forwards;
}

.exc-process-card:nth-child(2) {
    animation: excProcessFadeUp .8s ease .9s forwards;
}

.exc-process-card:nth-child(3) {
    animation: excProcessFadeUp .8s ease 1.1s forwards;
}

.exc-process-card:nth-child(4) {
    animation: excProcessFadeUp .8s ease 1.3s forwards;
}


/*=========================================================
        CTA
=========================================================*/

.exc-process-footer {
    animation: excProcessFadeUp .9s ease 1.5s forwards;
}


/*=========================================================
        CARD FLOAT
=========================================================*/

.exc-process-card {
    animation: excProcessFadeUp .8s ease forwards, excCardFloat 7s ease-in-out infinite;
}

    .exc-process-card:nth-child(1) {
        animation-delay: .7s,2s;
    }

    .exc-process-card:nth-child(2) {
        animation-delay: .9s,2.2s;
    }

    .exc-process-card:nth-child(3) {
        animation-delay: 1.1s,2.4s;
    }

    .exc-process-card:nth-child(4) {
        animation-delay: 1.3s,2.6s;
    }


/*=========================================================
        ICON FLOAT
=========================================================*/

.exc-process-icon {
    animation: excIconFloat 5s ease-in-out infinite;
}


/*=========================================================
        NUMBER PULSE
=========================================================*/

.exc-process-number {
    animation: excNumberPulse 3s ease-in-out infinite;
}


/*=========================================================
        BUTTON
=========================================================*/

.exc-process-footer .exc-btn-primary {
    transition: transform .35s ease, box-shadow .35s ease;
}

    .exc-process-footer .exc-btn-primary:hover {
        transform: translateY(-6px);
    }


/*=========================================================
        KEYFRAMES
=========================================================*/

@keyframes excProcessFadeUp {

    from {
        opacity: 0;
        transform: translateY(60px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes excTimelineReveal {

    from {
        opacity: 0;
        transform: scaleX(0);
        transform-origin: left;
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }
}


@keyframes excCardFloat {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}


@keyframes excIconFloat {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

    100% {
        transform: translateY(0);
    }
}


@keyframes excNumberPulse {

    0% {
        box-shadow: 0 0 0 rgba(212,175,55,.15);
    }

    50% {
        box-shadow: 0 0 25px rgba(212,175,55,.45);
    }

    100% {
        box-shadow: 0 0 0 rgba(212,175,55,.15);
    }
}


/*=========================================================
        REDUCED MOTION
=========================================================*/

@media(prefers-reduced-motion:reduce) {

    .exc-process *,
    .exc-process *::before,
    .exc-process *::after {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/*=========================================================
                    PART 8B.1
        LUXURY CONTACT LAYOUT & BACKGROUND
=========================================================*/


/*=========================================================
                    SECTION
=========================================================*/

.exc-contact {
    position: relative;
    overflow: hidden;
    padding: 140px 0;
    background: linear-gradient( rgba(5,8,18,.88), rgba(5,8,18,.92) ), url("../images/exccontact-bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}


    /*=========================================================
                    PURPLE GLOW
=========================================================*/

    .exc-contact::before {
        content: "";
        position: absolute;
        width: 650px;
        height: 650px;
        top: -250px;
        left: -220px;
        border-radius: 50%;
        background: rgba(126,87,194,.12);
        filter: blur(170px);
        pointer-events: none;
    }


    /*=========================================================
                    BLUE GLOW
=========================================================*/

    .exc-contact::after {
        content: "";
        position: absolute;
        width: 600px;
        height: 600px;
        bottom: -250px;
        right: -220px;
        border-radius: 50%;
        background: rgba(129,212,250,.10);
        filter: blur(170px);
        pointer-events: none;
    }


    /*=========================================================
                    CONTAINER
=========================================================*/

    .exc-contact .exc-container {
        position: relative;
        z-index: 2;
    }


/*=========================================================
                    HEADER
=========================================================*/

.exc-contact-header {
    max-width: 850px;
    margin: 0 auto 90px;
    text-align: center;
}


/*=========================================================
                    TAG
=========================================================*/

.exc-contact-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 28px;
    border-radius: 50px;
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(212,175,55,.25);
    color: var(--exc-gold);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}


/*=========================================================
                    TITLE
=========================================================*/

.exc-contact-header h2 {
    margin-top: 28px;
    font-family: 'Cinzel',serif;
    font-size: 58px;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
    text-shadow: 0 5px 25px rgba(0,0,0,.35);
}


/*=========================================================
                    DIVIDER
=========================================================*/

.exc-contact-divider {
    width: 140px;
    height: 3px;
    margin: 35px auto;
    border-radius: 50px;
    background: linear-gradient( 90deg, transparent, var(--exc-gold), transparent );
}


/*=========================================================
                    DESCRIPTION
=========================================================*/

.exc-contact-header p {
    max-width: 760px;
    margin: auto;
    color: #c5ccd8;
    font-size: 18px;
    line-height: 2;
}


/*=========================================================
                CONTACT GRID
=========================================================*/

.exc-contact-grid {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 70px;
    align-items: start;
}


/*=========================================================
                    MAP
=========================================================*/

.exc-contact-map {
    margin-top: 100px;
    overflow: hidden;
    border-radius: 35px;
    border: 1px solid rgba(212,175,55,.18);
    box-shadow: 0 35px 70px rgba(0,0,0,.45);
}


    .exc-contact-map iframe {
        width: 100%;
        height: 520px;
        border: 0;
        display: block;
    }


/*=========================================================
                RESPONSIVE
=========================================================*/

@media(max-width:1200px) {

    .exc-contact-grid {
        grid-template-columns: 360px 1fr;
        gap: 50px;
    }
}


@media(max-width:992px) {

    .exc-contact {
        padding: 100px 0;
    }

    .exc-contact-header {
        margin-bottom: 70px;
    }

        .exc-contact-header h2 {
            font-size: 44px;
        }

    .exc-contact-grid {
        grid-template-columns: 1fr;
    }
}


@media(max-width:768px) {

    .exc-contact {
        padding: 80px 0;
    }

    .exc-contact-header h2 {
        font-size: 36px;
    }

    .exc-contact-header p {
        font-size: 16px;
        line-height: 1.9;
    }

    .exc-contact-map iframe {
        height: 420px;
    }
}


@media(max-width:576px) {

    .exc-contact {
        padding: 70px 0;
    }

    .exc-contact-tag {
        font-size: 12px;
        letter-spacing: 2px;
        padding: 8px 22px;
    }

    .exc-contact-header h2 {
        font-size: 30px;
    }

    .exc-contact-divider {
        width: 100px;
    }

    .exc-contact-map {
        border-radius: 25px;
    }

        .exc-contact-map iframe {
            height: 320px;
        }
}

/*=========================================================
                PART 8B.2
        PREMIUM CONTACT CARDS CSS
=========================================================*/


/*=========================================================
                CONTACT INFO COLUMN
=========================================================*/

.exc-contact-info {
    display: flex;
    flex-direction: column;
    gap: 30px;
}


/*=========================================================
                CONTACT CARD
=========================================================*/

.exc-contact-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 32px;
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 28px;
    overflow: hidden;
    transition: all .45s ease;
}


    /*=========================================================
                GOLD TOP BORDER
=========================================================*/

    .exc-contact-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient( 90deg, var(--exc-gold), var(--exc-light-blue));
    }


    /*=========================================================
                LUXURY GLOW
=========================================================*/

    .exc-contact-card::after {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        right: -110px;
        top: -110px;
        border-radius: 50%;
        background: rgba(126,87,194,.12);
        filter: blur(90px);
        pointer-events: none;
    }


    /*=========================================================
                HOVER
=========================================================*/

    .exc-contact-card:hover {
        transform: translateY(-10px);
        border-color: rgba(212,175,55,.28);
        box-shadow: 0 25px 60px rgba(0,0,0,.35), 0 0 30px rgba(212,175,55,.15);
    }


/*=========================================================
                ICON BOX
=========================================================*/

.exc-contact-icon {
    flex-shrink: 0;
    width: 78px;
    height: 78px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient( 135deg, rgba(212,175,55,.15), rgba(126,87,194,.18));
    border: 1px solid rgba(212,175,55,.20);
    color: var(--exc-gold);
    font-size: 30px;
    transition: .45s;
}


/*=========================================================
                ICON HOVER
=========================================================*/

.exc-contact-card:hover .exc-contact-icon {
    transform: rotate(-8deg) scale(1.08);
    color: #ffffff;
    border-color: rgba(212,175,55,.45);
    box-shadow: 0 10px 30px rgba(212,175,55,.25);
}


/*=========================================================
                TITLE
=========================================================*/

.exc-contact-card h3 {
    margin-bottom: 10px;
    font-family: 'Cinzel',serif;
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
}


/*=========================================================
                DESCRIPTION
=========================================================*/

.exc-contact-card p {
    color: #c8d0db;
    font-size: 15px;
    line-height: 1.9;
}


/*=========================================================
                SHINE EFFECT
=========================================================*/

.exc-contact-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 22px;
    background: linear-gradient( 120deg, transparent, rgba(255,255,255,.35), transparent);
    transform: translateX(-180%);
}


.exc-contact-card:hover .exc-contact-icon::before {
    animation: excContactShine .8s linear;
}


@keyframes excContactShine {

    from {
        transform: translateX(-180%);
    }

    to {
        transform: translateX(180%);
    }
}


/*=========================================================
                RESPONSIVE
=========================================================*/

@media(max-width:992px) {

    .exc-contact-info {
        margin-bottom: 50px;
    }
}


@media(max-width:768px) {

    .exc-contact-card {
        padding: 28px;
    }

    .exc-contact-icon {
        width: 70px;
        height: 70px;
        font-size: 26px;
    }

    .exc-contact-card h3 {
        font-size: 22px;
    }
}


@media(max-width:576px) {

    .exc-contact-card {
        flex-direction: column;
        text-align: center;
        gap: 20px;
        padding: 26px;
    }

    .exc-contact-icon {
        width: 65px;
        height: 65px;
        border-radius: 18px;
        font-size: 24px;
    }

    .exc-contact-card h3 {
        font-size: 20px;
    }

    .exc-contact-card p {
        font-size: 14px;
        line-height: 1.8;
    }
}
/*=========================================================
                PART 8B.3
        LUXURY CONTACT FORM CSS
=========================================================*/


/*=========================================================
                FORM CONTAINER
=========================================================*/

.exc-contact-form-wrapper {
    position: relative;
    padding: 45px;
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 35px;
    overflow: hidden;
    box-shadow: 0 35px 70px rgba(0,0,0,.35);
}


    /* Luxury Glow */

    .exc-contact-form-wrapper::before {
        content: "";
        position: absolute;
        width: 320px;
        height: 320px;
        right: -160px;
        top: -160px;
        border-radius: 50%;
        background: rgba(126,87,194,.12);
        filter: blur(110px);
    }


    .exc-contact-form-wrapper::after {
        content: "";
        position: absolute;
        width: 280px;
        height: 280px;
        left: -120px;
        bottom: -120px;
        border-radius: 50%;
        background: rgba(129,212,250,.08);
        filter: blur(100px);
    }


/*=========================================================
                FORM
=========================================================*/

.exc-contact-form {
    position: relative;
    z-index: 5;
}


/*=========================================================
                ROW
=========================================================*/

.exc-form-row {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 22px;
    margin-bottom: 22px;
}


/*=========================================================
                FORM GROUP
=========================================================*/

.exc-form-group {
    position: relative;
}


    /*=========================================================
                INPUTS
=========================================================*/

    .exc-form-group input,
    .exc-form-group select,
    .exc-form-group textarea {
        width: 100%;
        padding: 18px 22px;
        border-radius: 18px;
        border: 1px solid rgba(255,255,255,.08);
        background: rgba(255,255,255,.05);
        backdrop-filter: blur(15px);
        color: #ffffff;
        font-size: 15px;
        font-family: inherit;
        outline: none;
        transition: all .35s ease;
    }


    /*=========================================================
                SELECT
=========================================================*/

    .exc-form-group select {
        cursor: pointer;
        appearance: none;
    }


    /*=========================================================
                TEXTAREA
=========================================================*/

    .exc-form-group textarea {
        resize: none;
        min-height: 170px;
    }


        /*=========================================================
                PLACEHOLDER
=========================================================*/

        .exc-form-group input::placeholder,
        .exc-form-group textarea::placeholder {
            color: #b8c2cf;
        }


    /*=========================================================
                OPTIONS
=========================================================*/

    .exc-form-group select option {
        color: #222;
    }


    /*=========================================================
                FOCUS
=========================================================*/

    .exc-form-group input:focus,
    .exc-form-group textarea:focus,
    .exc-form-group select:focus {
        border-color: rgba(212,175,55,.55);
        background: rgba(255,255,255,.08);
        box-shadow: 0 0 0 4px rgba(212,175,55,.08), 0 12px 35px rgba(212,175,55,.12);
    }


/*=========================================================
                BUTTON
=========================================================*/

.exc-contact-form .exc-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
    padding: 18px 42px;
    border: none;
    border-radius: 60px;
    cursor: pointer;
    background: linear-gradient( 135deg, var(--exc-gold), #ffd978);
    color: #111;
    font-size: 16px;
    font-weight: 700;
    transition: all .35s ease;
    box-shadow: 0 18px 45px rgba(212,175,55,.25);
}


    /*=========================================================
                BUTTON HOVER
=========================================================*/

    .exc-contact-form .exc-btn-primary:hover {
        transform: translateY(-5px);
        box-shadow: 0 28px 60px rgba(212,175,55,.35);
    }


    /*=========================================================
                BUTTON ICON
=========================================================*/

    .exc-contact-form .exc-btn-primary i {
        transition: transform .35s ease;
    }


    .exc-contact-form .exc-btn-primary:hover i {
        transform: translateX(5px);
    }


/*=========================================================
                RESPONSIVE
=========================================================*/

@media(max-width:992px) {

    .exc-contact-form-wrapper {
        padding: 35px;
    }
}


@media(max-width:768px) {

    .exc-form-row {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .exc-contact-form-wrapper {
        padding: 30px;
    }
}


@media(max-width:576px) {

    .exc-contact-form-wrapper {
        padding: 25px;
        border-radius: 25px;
    }

    .exc-form-group input,
    .exc-form-group select,
    .exc-form-group textarea {
        padding: 16px 18px;
        border-radius: 15px;
    }

    .exc-contact-form .exc-btn-primary {
        width: 100%;
        padding: 18px;
    }
}
/*=========================================================
                PART 8B.4
    GOOGLE MAP • SOCIAL BAR • ANIMATIONS
=========================================================*/


/*=========================================================
                    GOOGLE MAP
=========================================================*/

.exc-contact-map {
    position: relative;
    margin-top: 90px;
    overflow: hidden;
    border-radius: 35px;
    border: 1px solid rgba(212,175,55,.20);
    box-shadow: 0 40px 80px rgba(0,0,0,.45);
    transition: .45s;
}


    .exc-contact-map:hover {
        transform: translateY(-8px);
        box-shadow: 0 55px 100px rgba(0,0,0,.55);
    }


    .exc-contact-map iframe {
        width: 100%;
        height: 520px;
        display: block;
        border: 0;
        filter: grayscale(15%) saturate(110%) contrast(105%);
    }


    /* Gold Border Animation */

    .exc-contact-map::before {
        content: "";
        position: absolute;
        inset: 0;
        padding: 2px;
        border-radius: 35px;
        background: linear-gradient( 135deg, transparent, rgba(212,175,55,.45), transparent );
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }



/*=========================================================
                SOCIAL CONTACT BAR
=========================================================*/

.exc-social-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
    margin-top: 70px;
    flex-wrap: wrap;
}


.exc-social-link {
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.08);
    color: var(--exc-gold);
    font-size: 22px;
    transition: .4s;
}


    .exc-social-link:hover {
        transform: translateY(-8px) rotate(-10deg);
        background: linear-gradient( 135deg, var(--exc-gold), #ffd978);
        color: #111;
        box-shadow: 0 18px 35px rgba(212,175,55,.35);
    }



/*=========================================================
                SCROLL REVEAL
=========================================================*/

.exc-contact-header,
.exc-contact-info,
.exc-contact-form-wrapper,
.exc-contact-map,
.exc-social-bar {
    opacity: 0;
    transform: translateY(70px);
    animation-fill-mode: forwards;
}


.exc-contact-header {
    animation: excFadeUp .8s ease .2s forwards;
}

.exc-contact-info {
    animation: excFadeUp .8s ease .5s forwards;
}

.exc-contact-form-wrapper {
    animation: excFadeUp .8s ease .8s forwards;
}

.exc-contact-map {
    animation: excFadeUp .9s ease 1.1s forwards;
}

.exc-social-bar {
    animation: excFadeUp .9s ease 1.3s forwards;
}



/*=========================================================
                FLOATING EFFECT
=========================================================*/

.exc-contact-card {
    animation: excFloat 7s ease-in-out infinite;
}

    .exc-contact-card:nth-child(2) {
        animation-delay: .5s;
    }

    .exc-contact-card:nth-child(3) {
        animation-delay: 1s;
    }

    .exc-contact-card:nth-child(4) {
        animation-delay: 1.5s;
    }



/*=========================================================
                KEYFRAMES
=========================================================*/

@keyframes excFadeUp {

    from {
        opacity: 0;
        transform: translateY(70px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes excFloat {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

    100% {
        transform: translateY(0);
    }
}



/*=========================================================
                RESPONSIVE
=========================================================*/

@media(max-width:992px) {

    .exc-contact-map iframe {
        height: 420px;
    }
}


@media(max-width:768px) {

    .exc-social-bar {
        gap: 16px;
    }

    .exc-social-link {
        width: 56px;
        height: 56px;
        font-size: 20px;
    }

    .exc-contact-map {
        margin-top: 70px;
    }
}


@media(max-width:576px) {

    .exc-contact-map {
        border-radius: 25px;
    }

        .exc-contact-map::before {
            border-radius: 25px;
        }

        .exc-contact-map iframe {
            height: 320px;
        }
}



/*=========================================================
            REDUCED MOTION
=========================================================*/

@media(prefers-reduced-motion:reduce) {

    .exc-contact *,
    .exc-contact *::before,
    .exc-contact *::after {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/*=========================================================
                    LUXURY FOOTER
=========================================================*/

.exc-footer {
    position: relative;
    overflow: hidden;
    padding: 110px 0 35px;
    background: linear-gradient( 180deg, #06070b, #0b1119);
    color: #fff;
}

/*============================*/

.exc-footer-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at left, rgba(126,87,194,.12), transparent 40%), radial-gradient(circle at right, rgba(129,212,250,.10), transparent 40%);
}

/*============================*/

.exc-footer .exc-container {
    position: relative;
    z-index: 2;
}

/*============================*/

.exc-footer-top {
    text-align: center;
    margin-bottom: 70px;
}

.exc-footer-brand h2 {
    font-family: 'Cinzel',serif;
    font-size: 56px;
    color: #fff;
    margin-bottom: 12px;
}

.exc-footer-brand span {
    display: block;
    color: var(--exc-gold);
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 25px;
}

.exc-footer-brand p {
    max-width: 720px;
    margin: auto;
    color: #bfc7d3;
    line-height: 2;
}

/*============================*/

.exc-footer-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 60px;
    margin-bottom: 70px;
}

.exc-footer-column h3 {
    font-family: 'Cinzel',serif;
    margin-bottom: 25px;
    color: #fff;
    position: relative;
}

    .exc-footer-column h3::after {
        content: "";
        width: 50px;
        height: 2px;
        background: var(--exc-gold);
        display: block;
        margin-top: 12px;
    }

.exc-footer-column ul {
    list-style: none;
    padding: 0;
}

.exc-footer-column li {
    margin-bottom: 16px;
}

.exc-footer-column a {
    color: #bfc7d3;
    text-decoration: none;
    transition: .35s;
}

    .exc-footer-column a:hover {
        color: var(--exc-gold);
        padding-left: 8px;
    }

.exc-footer-contact i {
    width: 28px;
    color: var(--exc-gold);
}

/*============================*/

.exc-footer-social {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-bottom: 50px;
}

    .exc-footer-social a {
        width: 58px;
        height: 58px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,.05);
        border: 1px solid rgba(255,255,255,.08);
        color: var(--exc-gold);
        font-size: 20px;
        transition: .4s;
    }

        .exc-footer-social a:hover {
            transform: translateY(-8px);
            background: linear-gradient( 135deg, var(--exc-gold), #ffd978);
            color: #111;
            box-shadow: 0 20px 40px rgba(212,175,55,.35);
        }

/*============================*/

.exc-footer-bottom {
    text-align: center;
    padding-top: 35px;
    border-top: 1px solid rgba(255,255,255,.08);
    color: #98a4b3;
    font-size: 15px;
}

/*============================*/

@media(max-width:992px) {

    .exc-footer-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:768px) {

    .exc-footer {
        padding: 80px 0 30px;
    }

    .exc-footer-brand h2 {
        font-size: 42px;
    }

    .exc-footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .exc-footer-column h3::after {
        margin: 12px auto 0;
    }
}

/*=========================================================
            PART 10B.1
    LUXURY BACKGROUND & LAYOUT
=========================================================*/


/*=========================================================
                    SECTION
=========================================================*/

.oxgro-section {
    position: relative;
    overflow: hidden;
    padding: 140px 0;
    background: radial-gradient(circle at top left, rgba(0,120,70,.18), transparent 30%), radial-gradient(circle at top right, rgba(212,175,55,.08), transparent 25%), radial-gradient(circle at bottom center, rgba(0,160,90,.12), transparent 40%), linear-gradient( 180deg, #030303 0%, #06110b 35%, #03140d 70%, #020202 100%);
}


    /*=========================================================
                BACKGROUND PARTICLES
=========================================================*/

    .oxgro-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(212,175,55,.15) 1px,transparent 1px), radial-gradient(rgba(0,180,110,.12) 1px,transparent 1px);
        background-size: 90px 90px,140px 140px;
        opacity: .18;
        pointer-events: none;
    }


    .oxgro-section::after {
        content: "";
        position: absolute;
        width: 700px;
        height: 700px;
        left: -300px;
        top: -250px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(0,180,110,.18), transparent 70%);
        filter: blur(80px);
        pointer-events: none;
    }


/*=========================================================
                    CONTAINER
=========================================================*/

.oxgro-container {
    width: min(1400px,92%);
    margin: auto;
    position: relative;
    z-index: 5;
}


/*=========================================================
                    HEADER
=========================================================*/

.oxgro-header {
    max-width: 900px;
    margin: 0 auto 90px;
    text-align: center;
}


/*=========================================================
                    SUBTITLE
=========================================================*/

.oxgro-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    color: #d4af37;
    text-transform: uppercase;
    letter-spacing: 6px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 30px;
}


    .oxgro-subtitle i {
        font-size: 10px;
        color: #16b36d;
    }


/*=========================================================
                    TITLE
=========================================================*/

.oxgro-header h2 {
    font-family: "Cinzel",serif;
    font-size: 72px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    margin-bottom: 30px;
}


    .oxgro-header h2 span {
        color: #d4af37;
        text-shadow: 0 0 18px rgba(212,175,55,.35), 0 0 35px rgba(212,175,55,.18);
    }


/*=========================================================
                    PARAGRAPH
=========================================================*/

.oxgro-header p {
    max-width: 760px;
    margin: auto;
    font-size: 20px;
    line-height: 1.9;
    color: #c8d0cb;
}


/*=========================================================
                DECORATIVE LINE
=========================================================*/

.oxgro-header::after {
    content: "";
    display: block;
    width: 180px;
    height: 2px;
    margin: 45px auto 0;
    background: linear-gradient( 90deg, transparent, #16b36d, #d4af37, #16b36d, transparent);
    box-shadow: 0 0 18px rgba(212,175,55,.35);
}


/*=========================================================
                    GRID
=========================================================*/

.oxgro-grid {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 28px;
    margin-bottom: 90px;
}


/*=========================================================
                FEATURE STRIP
=========================================================*/

.oxgro-features {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 0;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid rgba(212,175,55,.20);
    background: linear-gradient( 135deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 70px rgba(0,0,0,.45);
}


/*=========================================================
                    FEATURE
=========================================================*/

.oxgro-feature {
    padding: 40px;
    border-right: 1px solid rgba(212,175,55,.08);
}


    .oxgro-feature:last-child {
        border-right: none;
    }


/*=========================================================
                    QUOTE
=========================================================*/

.oxgro-quote {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: linear-gradient( 135deg, rgba(212,175,55,.06), rgba(0,180,110,.06));
}


    .oxgro-quote h3 {
        font-family: "Cinzel",serif;
        font-size: 34px;
        line-height: 1.5;
        text-align: center;
        color: #f2e3b0;
    }


/*=========================================================
                    RESPONSIVE
=========================================================*/

@media(max-width:1400px) {

    .oxgro-grid {
        grid-template-columns: repeat(4,1fr);
    }
}


@media(max-width:1200px) {

    .oxgro-header h2 {
        font-size: 58px;
    }

    .oxgro-grid {
        grid-template-columns: repeat(3,1fr);
    }

    .oxgro-features {
        grid-template-columns: repeat(2,1fr);
    }
}


@media(max-width:992px) {

    .oxgro-section {
        padding: 100px 0;
    }

    .oxgro-header h2 {
        font-size: 46px;
    }

    .oxgro-header p {
        font-size: 18px;
    }

    .oxgro-grid {
        grid-template-columns: repeat(2,1fr);
    }
}


@media(max-width:768px) {

    .oxgro-section {
        padding: 80px 0;
    }

    .oxgro-header {
        margin-bottom: 70px;
    }

        .oxgro-header h2 {
            font-size: 38px;
        }

        .oxgro-header p {
            font-size: 16px;
        }

    .oxgro-grid {
        grid-template-columns: 1fr;
    }

    .oxgro-features {
        grid-template-columns: 1fr;
    }

    .oxgro-feature {
        border-right: none;
        border-bottom: 1px solid rgba(212,175,55,.08);
    }
}
/*=========================================================
            PART 10B.2A
    PREMIUM COMPANY CARD LAYOUT & IMAGE
=========================================================*/


/*=========================================================
                    CARD
=========================================================*/

.oxgro-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 460px;
    border-radius: 30px;
    background: linear-gradient( 180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
    border: 1px solid rgba(212,175,55,.14);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    transition: transform .55s ease, border-color .45s ease, box-shadow .45s ease;
    box-shadow: 0 20px 45px rgba(0,0,0,.35);
}


    /*=========================================================
                TOP GOLD BORDER
=========================================================*/

    .oxgro-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient( 90deg, #00b96d, #d4af37, #00b96d);
        z-index: 5;
    }


    /*=========================================================
                AMBIENT LIGHT
=========================================================*/

    .oxgro-card::after {
        content: "";
        position: absolute;
        width: 260px;
        height: 260px;
        right: -130px;
        top: -130px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(0,180,110,.18), transparent 70%);
        filter: blur(70px);
        pointer-events: none;
    }


/*=========================================================
                IMAGE AREA
=========================================================*/

.oxgro-image {
    position: relative;
    height: 255px;
    overflow: hidden;
}


    /*=========================================================
                IMAGE
=========================================================*/

    .oxgro-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .8s ease, filter .6s ease;
    }


/*=========================================================
            IMAGE DARK OVERLAY
=========================================================*/

.oxgro-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(2,6,5,.92), rgba(2,6,5,.18), transparent);
}


/*=========================================================
            GOLD SHIMMER
=========================================================*/

.oxgro-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( 120deg, transparent 20%, rgba(255,255,255,.22) 50%, transparent 80%);
    transform: translateX(-170%);
}


/*=========================================================
                CONTENT
=========================================================*/

.oxgro-content {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 85px 30px 30px;
    z-index: 5;
}


    /*=========================================================
            GLASS PANEL
=========================================================*/

    .oxgro-content::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( rgba(255,255,255,.03), rgba(255,255,255,.015));
        backdrop-filter: blur(18px);
        z-index: -1;
    }


/*=========================================================
                ICON HOLDER
=========================================================*/

.oxgro-icon {
    position: absolute;
    left: 30px;
    top: 215px;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient( 145deg, #0f2c20, #153b2c);
    border: 2px solid rgba(212,175,55,.25);
    box-shadow: 0 12px 28px rgba(0,0,0,.35), 0 0 20px rgba(212,175,55,.12);
    z-index: 20;
}


    /*=========================================================
                ICON
=========================================================*/

    .oxgro-icon i {
        font-size: 30px;
        color: #d4af37;
    }


/*=========================================================
                HOVER
=========================================================*/

.oxgro-card:hover {
    transform: translateY(-14px);
    border-color: rgba(212,175,55,.35);
    box-shadow: 0 35px 70px rgba(0,0,0,.45), 0 0 40px rgba(212,175,55,.10);
}


    /*=========================================================
            IMAGE ZOOM
=========================================================*/

    .oxgro-card:hover img {
        transform: scale(1.08);
        filter: brightness(1.08) saturate(1.15);
    }


    /*=========================================================
            SHIMMER EFFECT
=========================================================*/

    .oxgro-card:hover .oxgro-image::after {
        animation: oxgroShimmer .9s linear;
    }


    /*=========================================================
            ICON HOVER
=========================================================*/

    .oxgro-card:hover .oxgro-icon {
        transform: rotate(-10deg) scale(1.08);
        border-color: #d4af37;
        box-shadow: 0 18px 40px rgba(212,175,55,.30);
    }


/*=========================================================
            KEYFRAMES
=========================================================*/

@keyframes oxgroShimmer {

    from {
        transform: translateX(-170%);
    }

    to {
        transform: translateX(170%);
    }
}


/*=========================================================
            RESPONSIVE
=========================================================*/

@media(max-width:1200px) {

    .oxgro-card {
        min-height: 430px;
    }
}


@media(max-width:768px) {

    .oxgro-card {
        min-height: 400px;
    }

    .oxgro-image {
        height: 220px;
    }

    .oxgro-icon {
        width: 68px;
        height: 68px;
        top: 185px;
    }

        .oxgro-icon i {
            font-size: 26px;
        }
}


@media(max-width:576px) {

    .oxgro-card {
        border-radius: 24px;
    }

    .oxgro-image {
        height: 210px;
    }

    .oxgro-content {
        padding: 75px 24px 24px;
    }
}

/*=========================================================
            PART 10B.2B
    CONTENT • BUTTONS • HOVER EFFECTS
=========================================================*/


/*=========================================================
                COMPANY TITLE
=========================================================*/

.oxgro-content h3 {
    margin: 0 0 12px;
    font-family: "Cinzel",serif;
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    transition: all .45s ease;
}


/*=========================================================
                CATEGORY BADGE
=========================================================*/

.oxgro-content span {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-bottom: 28px;
    padding: 8px 18px;
    border-radius: 40px;
    background: rgba(0,170,100,.10);
    border: 1px solid rgba(0,180,110,.25);
    color: #72ffc1;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: .4s;
}


/*=========================================================
                VISIT BUTTON
=========================================================*/

.oxgro-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    gap: 12px;
    padding: 15px 30px;
    border-radius: 50px;
    overflow: hidden;
    background: linear-gradient( 135deg, #0d3324, #146642);
    border: 1px solid rgba(212,175,55,.25);
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: .5px;
    transition: all .45s ease;
    box-shadow: 0 15px 35px rgba(0,0,0,.35);
}


    /*=========================================================
            BUTTON GOLD SHINE
=========================================================*/

    .oxgro-btn::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 120deg, transparent, rgba(255,255,255,.35), transparent);
        transform: translateX(-180%);
    }


    /*=========================================================
                BUTTON ICON
=========================================================*/

    .oxgro-btn i {
        transition: transform .35s ease;
    }


/*=========================================================
                CARD HOVER
=========================================================*/

.oxgro-card:hover h3 {
    color: #f4df8c;
    text-shadow: 0 0 18px rgba(212,175,55,.25);
}


.oxgro-card:hover span {
    background: rgba(212,175,55,.10);
    border-color: rgba(212,175,55,.40);
    color: #f6e5a8;
}


.oxgro-card:hover .oxgro-btn {
    color: #111;
    background: linear-gradient( 135deg, #d4af37, #f6dd7b);
    border-color: #d4af37;
    transform: translateY(-4px);
    box-shadow: 0 22px 45px rgba(212,175,55,.30);
}


    .oxgro-card:hover .oxgro-btn i {
        transform: translateX(6px);
    }


    .oxgro-card:hover .oxgro-btn::before {
        animation: oxgroButtonShine .8s linear;
    }


/*=========================================================
                BOTTOM LINE
=========================================================*/

.oxgro-content::after {
    content: "";
    position: absolute;
    left: 30px;
    bottom: 0;
    width: 0;
    height: 2px;
    background: linear-gradient( 90deg, #00b96d, #d4af37);
    transition: width .45s ease;
}


.oxgro-card:hover .oxgro-content::after {
    width: calc(100% - 60px);
}


/*=========================================================
            CARD BORDER GLOW
=========================================================*/

.oxgro-card {
    isolation: isolate;
}


    .oxgro-card:hover {
        box-shadow: 0 35px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(212,175,55,.25), 0 0 40px rgba(0,180,110,.12), 0 0 70px rgba(212,175,55,.08);
    }


/*=========================================================
                FLOAT ANIMATION
=========================================================*/

.oxgro-card {
    animation: oxgroFloat 8s ease-in-out infinite;
}

    .oxgro-card:nth-child(2) {
        animation-delay: .4s;
    }

    .oxgro-card:nth-child(3) {
        animation-delay: .8s;
    }

    .oxgro-card:nth-child(4) {
        animation-delay: 1.2s;
    }

    .oxgro-card:nth-child(5) {
        animation-delay: 1.6s;
    }

    .oxgro-card:nth-child(6) {
        animation-delay: 2s;
    }

    .oxgro-card:nth-child(7) {
        animation-delay: 2.4s;
    }

    .oxgro-card:nth-child(8) {
        animation-delay: 2.8s;
    }

    .oxgro-card:nth-child(9) {
        animation-delay: 3.2s;
    }

    .oxgro-card:nth-child(10) {
        animation-delay: 3.6s;
    }


/*=========================================================
                KEYFRAMES
=========================================================*/

@keyframes oxgroButtonShine {

    from {
        transform: translateX(-180%);
    }

    to {
        transform: translateX(180%);
    }
}


@keyframes oxgroFloat {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

    100% {
        transform: translateY(0);
    }
}


/*=========================================================
                RESPONSIVE
=========================================================*/

@media(max-width:768px) {

    .oxgro-content h3 {
        font-size: 24px;
    }

    .oxgro-btn {
        width: 100%;
        justify-content: center;
    }
}


@media(max-width:576px) {

    .oxgro-content h3 {
        font-size: 22px;
    }

    .oxgro-content span {
        font-size: 12px;
    }

    .oxgro-btn {
        padding: 14px 22px;
        font-size: 14px;
    }
}

/*=========================================================
            PART 10B.2C
ADVANCED ANIMATIONS & RESPONSIVE POLISH
=========================================================*/


/*=========================================================
        INITIAL REVEAL STATE
=========================================================*/

.oxgro-header,
.oxgro-card,
.oxgro-features {
    opacity: 0;
    transform: translateY(70px);
}


/*=========================================================
        HEADER
=========================================================*/

.oxgro-header {
    animation: oxgroFadeUp .9s ease forwards;
}


/*=========================================================
        STAGGERED CARDS
=========================================================*/

.oxgro-card:nth-child(1) {
    animation: oxgroFadeUp .8s ease .15s forwards;
}

.oxgro-card:nth-child(2) {
    animation: oxgroFadeUp .8s ease .25s forwards;
}

.oxgro-card:nth-child(3) {
    animation: oxgroFadeUp .8s ease .35s forwards;
}

.oxgro-card:nth-child(4) {
    animation: oxgroFadeUp .8s ease .45s forwards;
}

.oxgro-card:nth-child(5) {
    animation: oxgroFadeUp .8s ease .55s forwards;
}

.oxgro-card:nth-child(6) {
    animation: oxgroFadeUp .8s ease .65s forwards;
}

.oxgro-card:nth-child(7) {
    animation: oxgroFadeUp .8s ease .75s forwards;
}

.oxgro-card:nth-child(8) {
    animation: oxgroFadeUp .8s ease .85s forwards;
}

.oxgro-card:nth-child(9) {
    animation: oxgroFadeUp .8s ease .95s forwards;
}

.oxgro-card:nth-child(10) {
    animation: oxgroFadeUp .8s ease 1.05s forwards;
}


/*=========================================================
        FEATURE STRIP
=========================================================*/

.oxgro-features {
    animation: oxgroFadeUp .9s ease 1.2s forwards;
}


/*=========================================================
        EMERALD AMBIENT GLOW
=========================================================*/

.oxgro-card {
    position: relative;
}


    .oxgro-card::after {
        transition: all .45s ease;
    }


    .oxgro-card:hover::after {
        transform: scale(1.2);
        opacity: 1;
    }


    /*=========================================================
        GOLD BORDER ANIMATION
=========================================================*/

    .oxgro-card::before {
        background-size: 300%;
        animation: oxgroBorder 7s linear infinite;
    }


/*=========================================================
        ICON ANIMATION
=========================================================*/

.oxgro-icon {
    transition: transform .4s ease, box-shadow .4s ease, background .4s ease;
}


.oxgro-card:hover .oxgro-icon {
    background: linear-gradient( 145deg, #d4af37, #16b36d);
}


    .oxgro-card:hover .oxgro-icon i {
        color: #fff;
    }


/*=========================================================
        TITLE GLOW
=========================================================*/

.oxgro-card:hover h3 {
    text-shadow: 0 0 10px rgba(212,175,55,.4), 0 0 25px rgba(212,175,55,.25);
}


/*=========================================================
        BUTTON PULSE
=========================================================*/

.oxgro-btn {
    overflow: hidden;
}


    .oxgro-btn:hover {
        animation: oxgroPulse .8s ease;
    }


/*=========================================================
        IMAGE BRIGHTEN
=========================================================*/

.oxgro-card:hover img {
    filter: brightness(1.15) saturate(1.2) contrast(1.05);
}


/*=========================================================
        FEATURE STRIP
=========================================================*/

.oxgro-feature {
    transition: .4s;
}


    .oxgro-feature:hover {
        background: rgba(212,175,55,.05);
    }


    .oxgro-feature i {
        color: #16b36d;
        font-size: 34px;
        margin-bottom: 18px;
        transition: .4s;
    }


    .oxgro-feature:hover i {
        color: #d4af37;
        transform: translateY(-5px) rotate(-8deg);
    }


/*=========================================================
        QUOTE PANEL
=========================================================*/

.oxgro-quote {
    transition: .4s;
}


    .oxgro-quote:hover {
        background: linear-gradient( 135deg, rgba(212,175,55,.08), rgba(0,180,110,.08));
    }


    .oxgro-quote h3 {
        transition: .4s;
    }


    .oxgro-quote:hover h3 {
        color: #fff;
    }


/*=========================================================
        KEYFRAMES
=========================================================*/

@keyframes oxgroFadeUp {

    from {
        opacity: 0;
        transform: translateY(70px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}



@keyframes oxgroBorder {

    from {
        background-position: 0%;
    }

    to {
        background-position: 300%;
    }
}



@keyframes oxgroPulse {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.04);
    }

    100% {
        transform: scale(1);
    }
}


/*=========================================================
        LARGE DESKTOP
=========================================================*/

@media (min-width:1800px) {

    .oxgro-grid {
        gap: 34px;
    }
}


/*=========================================================
        TABLET
=========================================================*/

@media(max-width:992px) {

    .oxgro-card {
        animation-duration: .7s;
    }
}


/*=========================================================
        MOBILE
=========================================================*/

@media(max-width:768px) {

    .oxgro-header {
        margin-bottom: 55px;
    }

    .oxgro-grid {
        gap: 22px;
    }

    .oxgro-features {
        margin-top: 20px;
    }
}


/*=========================================================
        SMALL MOBILE
=========================================================*/

@media(max-width:576px) {

    .oxgro-section {
        padding: 70px 0;
    }

    .oxgro-header h2 {
        font-size: 34px;
    }

    .oxgro-header p {
        font-size: 15px;
    }
}


/*=========================================================
        REDUCED MOTION
=========================================================*/

@media(prefers-reduced-motion:reduce) {

    .oxgro-section *,
    .oxgro-section *::before,
    .oxgro-section *::after {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/*=========================================================
                PART 10B.3
        LUXURY FEATURE STRIP CSS
=========================================================*/


/*=========================================================
                FEATURE CONTAINER
=========================================================*/

.oxgro-features {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    overflow: hidden;
    margin-top: 90px;
    border-radius: 32px;
    background: linear-gradient( 135deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(212,175,55,.15);
    box-shadow: 0 35px 80px rgba(0,0,0,.45);
}


    /*=========================================================
            AMBIENT LIGHT
=========================================================*/

    .oxgro-features::before {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        top: -180px;
        left: -180px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(0,180,110,.16), transparent 70%);
        filter: blur(70px);
    }


    .oxgro-features::after {
        content: "";
        position: absolute;
        width: 380px;
        height: 380px;
        bottom: -180px;
        right: -180px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(212,175,55,.10), transparent 70%);
        filter: blur(70px);
    }


/*=========================================================
                FEATURE CARD
=========================================================*/

.oxgro-feature {
    position: relative;
    padding: 45px 35px;
    z-index: 2;
    transition: .45s;
    border-right: 1px solid rgba(212,175,55,.08);
}


    .oxgro-feature:last-child {
        border-right: none;
    }


    /*=========================================================
            ICON
=========================================================*/

    .oxgro-feature i {
        width: 78px;
        height: 78px;
        margin-bottom: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: linear-gradient( 135deg, rgba(0,180,110,.15), rgba(212,175,55,.10));
        border: 1px solid rgba(212,175,55,.18);
        color: #d4af37;
        font-size: 30px;
        transition: .45s;
    }


    /*=========================================================
            TITLE
=========================================================*/

    .oxgro-feature h4 {
        margin-bottom: 14px;
        font-family: "Cinzel",serif;
        font-size: 24px;
        color: #ffffff;
        transition: .4s;
    }


    /*=========================================================
            DESCRIPTION
=========================================================*/

    .oxgro-feature p {
        color: #bfc9c5;
        line-height: 1.9;
        font-size: 15px;
    }


    /*=========================================================
            HOVER
=========================================================*/

    .oxgro-feature:hover {
        background: linear-gradient( 180deg, rgba(212,175,55,.05), rgba(0,180,110,.05));
    }


        .oxgro-feature:hover h4 {
            color: #f5df8d;
        }


        .oxgro-feature:hover i {
            transform: translateY(-8px) rotate(-8deg) scale(1.08);
            background: linear-gradient( 135deg, #d4af37, #16b36d);
            color: #ffffff;
            box-shadow: 0 20px 40px rgba(212,175,55,.30);
        }


/*=========================================================
            QUOTE PANEL
=========================================================*/

.oxgro-quote {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 50px;
    background: linear-gradient( 135deg, rgba(212,175,55,.06), rgba(0,180,110,.08));
    position: relative;
    overflow: hidden;
}


    /* Decorative Quote */

    .oxgro-quote::before {
        content: "❝";
        position: absolute;
        top: 15px;
        left: 25px;
        font-size: 120px;
        font-family: Georgia,serif;
        color: rgba(212,175,55,.08);
    }


    .oxgro-quote h3 {
        position: relative;
        z-index: 2;
        font-family: "Cinzel",serif;
        font-size: 34px;
        font-weight: 700;
        line-height: 1.6;
        color: #f3e4b3;
        transition: .4s;
    }


    .oxgro-quote:hover h3 {
        color: #ffffff;
    }


/*=========================================================
            TOP GLOW LINE
=========================================================*/

.oxgro-features {
    overflow: hidden;
}


    .oxgro-features .oxgro-feature::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient( 90deg, transparent, #16b36d, #d4af37, transparent);
        transform: scaleX(0);
        transition: .45s;
    }


.oxgro-feature:hover::before {
    transform: scaleX(1);
}


/*=========================================================
            RESPONSIVE
=========================================================*/

@media(max-width:1200px) {

    .oxgro-features {
        grid-template-columns: repeat(2,1fr);
    }
}


@media(max-width:768px) {

    .oxgro-features {
        grid-template-columns: 1fr;
    }

    .oxgro-feature {
        border-right: none;
        border-bottom: 1px solid rgba(212,175,55,.08);
    }

        .oxgro-feature:last-child {
            border-bottom: none;
        }

    .oxgro-feature {
        text-align: center;
    }

        .oxgro-feature i {
            margin-left: auto;
            margin-right: auto;
        }

    .oxgro-quote {
        padding: 40px 30px;
    }

        .oxgro-quote h3 {
            font-size: 28px;
        }
}


@media(max-width:576px) {

    .oxgro-feature {
        padding: 35px 25px;
    }

        .oxgro-feature h4 {
            font-size: 22px;
        }

        .oxgro-feature p {
            font-size: 14px;
        }

    .oxgro-quote h3 {
        font-size: 24px;
    }
}

/*=========================================================
                PART 8B.1
        LUXURY LAYOUT & BACKGROUND CSS
=========================================================*/


/*=========================================================
                CONTACT SECTION
=========================================================*/

.oxgcon-section {
    position: relative;
    overflow: hidden;
    padding: 140px 0;
    background: #040605;
    isolation: isolate;
}


/*=========================================================
                BACKGROUND IMAGE
=========================================================*/

.oxgcon-bg {
    position: absolute;
    inset: 0;
    background: url("../images/oxgcon-bg.png") center center/cover no-repeat;
    z-index: -3;
    transform: scale(1.05);
}


/*=========================================================
                DARK OVERLAY
=========================================================*/

.oxgcon-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 180deg, rgba(2,5,4,.90), rgba(3,8,6,.78), rgba(2,5,4,.92));
    z-index: -2;
}


/*=========================================================
                EMERALD AURORA
=========================================================*/

.oxgcon-section::before {
    content: "";
    position: absolute;
    width: 900px;
    height: 900px;
    left: -260px;
    top: -300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(22,179,109,.18), transparent 70%);
    filter: blur(120px);
    z-index: -1;
}


.oxgcon-section::after {
    content: "";
    position: absolute;
    width: 700px;
    height: 700px;
    right: -180px;
    bottom: -220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212,175,55,.12), transparent 70%);
    filter: blur(110px);
    z-index: -1;
}


/*=========================================================
                CONTAINER
=========================================================*/

.oxgcon-container {
    width: min(92%,1450px);
    margin: auto;
}


/*=========================================================
                MAIN WRAPPER
=========================================================*/

.oxgcon-wrapper {
    display: grid;
    grid-template-columns: 390px 1fr;
    gap: 38px;
    align-items: stretch;
}


/*=========================================================
                GLASS CARDS
=========================================================*/

.oxgcon-info,
.oxgcon-form-box {
    position: relative;
    border-radius: 26px;
    padding: 45px;
    overflow: hidden;
    background: linear-gradient( 145deg, rgba(7,15,12,.78), rgba(6,10,9,.82));
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(212,175,55,.16);
    box-shadow: 0 18px 60px rgba(0,0,0,.45);
}


    /*=========================================================
                GLOW BORDER
=========================================================*/

    .oxgcon-info::before,
    .oxgcon-form-box::before {
        content: "";
        position: absolute;
        inset: 0;
        padding: 1px;
        border-radius: 26px;
        background: linear-gradient( 135deg, rgba(212,175,55,.45), rgba(22,179,109,.30), rgba(212,175,55,.18));
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }


/*=========================================================
                HEADER
=========================================================*/

.oxgcon-heading {
    margin-bottom: 40px;
}


.oxgcon-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #18c678;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}


    .oxgcon-subtitle::before {
        content: "";
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #18c678;
        box-shadow: 0 0 12px rgba(22,179,109,.65);
    }


.oxgcon-heading h2 {
    margin-top: 18px;
    margin-bottom: 18px;
    font-family: "Cormorant Garamond",serif;
    font-size: 54px;
    font-weight: 700;
    line-height: 1.1;
    color: #e6bf63;
}


.oxgcon-line {
    width: 95px;
    height: 3px;
    border-radius: 20px;
    background: linear-gradient( 90deg, #16b36d, #d4af37);
    position: relative;
}


    .oxgcon-line::after {
        content: "";
        position: absolute;
        width: 9px;
        height: 9px;
        right: -6px;
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
        background: #d4af37;
    }


/*=========================================================
                FLOATING LIGHTS
=========================================================*/

.oxgcon-light {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(70px);
}


    .oxgcon-light.one {
        width: 220px;
        height: 220px;
        top: 120px;
        left: 40%;
        background: rgba(22,179,109,.10);
    }


    .oxgcon-light.two {
        width: 180px;
        height: 180px;
        bottom: 80px;
        right: 10%;
        background: rgba(212,175,55,.10);
    }


/*=========================================================
                RESPONSIVE
=========================================================*/

@media(max-width:1200px) {

    .oxgcon-wrapper {
        grid-template-columns: 330px 1fr;
        gap: 28px;
    }
}


@media(max-width:992px) {

    .oxgcon-wrapper {
        grid-template-columns: 1fr;
    }
}


@media(max-width:768px) {

    .oxgcon-section {
        padding: 90px 0;
    }

    .oxgcon-info,
    .oxgcon-form-box {
        padding: 32px;
    }

    .oxgcon-heading h2 {
        font-size: 42px;
    }
}


@media(max-width:576px) {

    .oxgcon-container {
        width: 94%;
    }

    .oxgcon-info,
    .oxgcon-form-box {
        padding: 25px;
        border-radius: 20px;
    }

    .oxgcon-heading h2 {
        font-size: 34px;
    }
}

/*=========================================================
                PART 8B.2
      PREMIUM CONTACT INFORMATION CARD
=========================================================*/


/*=========================================================
                CONTACT ITEMS
=========================================================*/

.oxgcon-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 22px;
    padding: 28px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    transition: .45s ease;
}

    .oxgcon-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }


/*=========================================================
                ICON
=========================================================*/

.oxgcon-icon {
    position: relative;
    width: 68px;
    height: 68px;
    min-width: 68px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient( 145deg, rgba(212,175,55,.12), rgba(22,179,109,.08));
    border: 1px solid rgba(212,175,55,.22);
    transition: .45s ease;
    overflow: hidden;
}


    .oxgcon-icon::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(22,179,109,.20), transparent 70%);
        opacity: 0;
        transition: .45s;
    }


    .oxgcon-icon i {
        font-size: 24px;
        color: #d4af37;
        transition: .45s;
        z-index: 2;
    }


/*=========================================================
                CONTENT
=========================================================*/

.oxgcon-content {
    flex: 1;
}


    .oxgcon-content h4 {
        margin-bottom: 12px;
        font-family: "Cormorant Garamond",serif;
        font-size: 28px;
        font-weight: 700;
        color: #16b36d;
    }


    .oxgcon-content p {
        margin-bottom: 8px;
        color: #d6d6d6;
        font-size: 16px;
        line-height: 1.9;
        transition: .35s;
    }

        .oxgcon-content p:last-child {
            margin-bottom: 0;
        }


/*=========================================================
                HOVER
=========================================================*/

.oxgcon-item:hover {
    transform: translateX(10px);
}


    .oxgcon-item:hover .oxgcon-icon {
        transform: translateY(-6px) scale(1.08) rotate(-8deg);
        background: linear-gradient( 145deg, #16b36d, #d4af37);
        box-shadow: 0 12px 30px rgba(22,179,109,.25), 0 0 20px rgba(212,175,55,.25);
    }


        .oxgcon-item:hover .oxgcon-icon::before {
            opacity: 1;
        }


        .oxgcon-item:hover .oxgcon-icon i {
            color: #ffffff;
        }


    .oxgcon-item:hover h4 {
        color: #f1cf77;
    }


    .oxgcon-item:hover p {
        color: #ffffff;
    }


/*=========================================================
                GLASS SHINE
=========================================================*/

.oxgcon-item::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient( 90deg, transparent, rgba(255,255,255,.08), transparent);
    transform: skewX(-20deg);
    transition: 1s;
}


.oxgcon-item:hover::after {
    left: 140%;
}


/*=========================================================
                CONTACT CARD GLOW
=========================================================*/

.oxgcon-info {
    transition: .45s;
}


    .oxgcon-info:hover {
        box-shadow: 0 25px 70px rgba(0,0,0,.50), 0 0 35px rgba(22,179,109,.12);
    }


/*=========================================================
                RESPONSIVE
=========================================================*/

@media(max-width:768px) {

    .oxgcon-item {
        gap: 18px;
        padding: 24px 0;
    }

    .oxgcon-icon {
        width: 60px;
        height: 60px;
        min-width: 60px;
    }

        .oxgcon-icon i {
            font-size: 20px;
        }

    .oxgcon-content h4 {
        font-size: 24px;
    }

    .oxgcon-content p {
        font-size: 15px;
        line-height: 1.8;
    }
}


@media(max-width:576px) {

    .oxgcon-item {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .oxgcon-content {
        text-align: center;
    }
}

/*=========================================================
                PART 8B.3
        LUXURY CONTACT FORM CSS
=========================================================*/


/*=========================================================
                FORM
=========================================================*/

.oxgcon-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}


/*=========================================================
                ROW
=========================================================*/

.oxgcon-row {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 22px;
}


/*=========================================================
                FIELD
=========================================================*/

.oxgcon-field {
    position: relative;
}


    .oxgcon-field i {
        position: absolute;
        left: 22px;
        top: 50%;
        transform: translateY(-50%);
        color: #d4af37;
        font-size: 17px;
        transition: .35s;
        z-index: 2;
    }


.oxgcon-message i {
    top: 24px;
    transform: none;
}


/*=========================================================
                INPUTS
=========================================================*/

.oxgcon-field input,
.oxgcon-field textarea {
    width: 100%;
    border: none;
    outline: none;
    resize: none;
    padding: 20px 22px 20px 58px;
    border-radius: 16px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(212,175,55,.15);
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    transition: .35s;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}


.oxgcon-field textarea {
    min-height: 180px;
    padding-top: 22px;
}


    /*=========================================================
                PLACEHOLDER
=========================================================*/

    .oxgcon-field input::placeholder,
    .oxgcon-field textarea::placeholder {
        color: #aeb6b2;
    }


    /*=========================================================
                FOCUS
=========================================================*/

    .oxgcon-field input:focus,
    .oxgcon-field textarea:focus {
        border-color: #16b36d;
        background: rgba(22,179,109,.06);
        box-shadow: 0 0 0 4px rgba(22,179,109,.08), 0 0 22px rgba(22,179,109,.15);
    }


        .oxgcon-field input:focus + i,
        .oxgcon-field textarea:focus + i {
            color: #16b36d;
        }


/*=========================================================
                HOVER
=========================================================*/

.oxgcon-field:hover input,
.oxgcon-field:hover textarea {
    border-color: rgba(212,175,55,.35);
}


/*=========================================================
                CHECKBOX
=========================================================*/

.oxgcon-check {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #c6cbc8;
    font-size: 15px;
    cursor: pointer;
    user-select: none;
    flex-wrap: wrap;
}


    .oxgcon-check input {
        display: none;
    }


    .oxgcon-check span {
        width: 22px;
        height: 22px;
        border-radius: 6px;
        border: 1px solid rgba(212,175,55,.35);
        background: rgba(255,255,255,.03);
        position: relative;
        transition: .35s;
    }


        .oxgcon-check span::after {
            content: "✓";
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%) scale(0);
            color: #fff;
            font-size: 13px;
            transition: .3s;
        }


    .oxgcon-check input:checked + span {
        background: #16b36d;
        border-color: #16b36d;
    }


        .oxgcon-check input:checked + span::after {
            transform: translate(-50%,-50%) scale(1);
        }


    .oxgcon-check a {
        color: #16b36d;
        text-decoration: none;
        transition: .3s;
    }


        .oxgcon-check a:hover {
            color: #d4af37;
        }


/*=========================================================
                BUTTON
=========================================================*/

.oxgcon-btn {
    position: relative;
    overflow: hidden;
    border: none;
    outline: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    height: 64px;
    border-radius: 18px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient( 135deg, #16b36d, #119458);
    transition: .45s;
    box-shadow: 0 15px 35px rgba(22,179,109,.30);
}


    /* Shine */

    .oxgcon-btn::before {
        content: "";
        position: absolute;
        top: 0;
        left: -120%;
        width: 60%;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.35), transparent);
        transform: skewX(-25deg);
        transition: 1s;
    }


    .oxgcon-btn:hover::before {
        left: 140%;
    }


    .oxgcon-btn span {
        position: relative;
        z-index: 2;
    }


    .oxgcon-btn i {
        position: relative;
        z-index: 2;
        transition: .35s;
    }


    .oxgcon-btn:hover {
        transform: translateY(-5px);
        background: linear-gradient( 135deg, #1cc979, #16b36d);
        box-shadow: 0 25px 50px rgba(22,179,109,.45);
    }


        .oxgcon-btn:hover i {
            transform: translateX(6px);
        }


/*=========================================================
            FORM GLASS GLOW
=========================================================*/

.oxgcon-form-box {
    transition: .45s;
}


    .oxgcon-form-box:hover {
        box-shadow: 0 25px 70px rgba(0,0,0,.50), 0 0 40px rgba(22,179,109,.12);
    }


/*=========================================================
                RESPONSIVE
=========================================================*/

@media(max-width:992px) {

    .oxgcon-row {
        grid-template-columns: 1fr;
    }
}


@media(max-width:768px) {

    .oxgcon-field input,
    .oxgcon-field textarea {
        font-size: 14px;
        padding: 18px 20px 18px 54px;
    }

    .oxgcon-btn {
        height: 58px;
        font-size: 15px;
    }
}


@media(max-width:576px) {

    .oxgcon-check {
        align-items: flex-start;
        font-size: 14px;
        line-height: 1.7;
    }

    .oxgcon-btn {
        letter-spacing: 1px;
    }
}

/*=========================================================
                PART 8B.4
    PREMIUM ANIMATIONS & RESPONSIVE POLISH
=========================================================*/


/*=========================================================
            INITIAL REVEAL STATE
=========================================================*/

.oxgcon-heading,
.oxgcon-info,
.oxgcon-form-box,
.oxgcon-item,
.oxgcon-btn {
    opacity: 0;
    transform: translateY(70px);
}


/*=========================================================
            SECTION REVEAL
=========================================================*/

.oxgcon-section.active .oxgcon-heading {
    animation: oxgconFadeUp .8s ease forwards;
}

.oxgcon-section.active .oxgcon-info {
    animation: oxgconFadeUp .9s ease .15s forwards;
}

.oxgcon-section.active .oxgcon-form-box {
    animation: oxgconFadeUp .9s ease .30s forwards;
}


/*=========================================================
            STAGGER CONTACT ITEMS
=========================================================*/

.oxgcon-section.active .oxgcon-item:nth-child(2) {
    animation: oxgconFadeLeft .7s ease .45s forwards;
}

.oxgcon-section.active .oxgcon-item:nth-child(3) {
    animation: oxgconFadeLeft .7s ease .60s forwards;
}

.oxgcon-section.active .oxgcon-item:nth-child(4) {
    animation: oxgconFadeLeft .7s ease .75s forwards;
}

.oxgcon-section.active .oxgcon-item:nth-child(5) {
    animation: oxgconFadeLeft .7s ease .90s forwards;
}


/*=========================================================
            FORM ELEMENTS
=========================================================*/

.oxgcon-form .oxgcon-row,
.oxgcon-message,
.oxgcon-check,
.oxgcon-btn {
    opacity: 0;
    transform: translateY(45px);
}

.oxgcon-section.active .oxgcon-row:nth-child(1) {
    animation: oxgconFadeUp .7s ease .45s forwards;
}

.oxgcon-section.active .oxgcon-row:nth-child(2) {
    animation: oxgconFadeUp .7s ease .60s forwards;
}

.oxgcon-section.active .oxgcon-message {
    animation: oxgconFadeUp .7s ease .75s forwards;
}

.oxgcon-section.active .oxgcon-check {
    animation: oxgconFadeUp .7s ease .90s forwards;
}

.oxgcon-section.active .oxgcon-btn {
    animation: oxgconFadeUp .7s ease 1.05s forwards;
}


/*=========================================================
            CARD HOVER
=========================================================*/

.oxgcon-info,
.oxgcon-form-box {
    transition: transform .45s ease, box-shadow .45s ease;
}

    .oxgcon-info:hover,
    .oxgcon-form-box:hover {
        transform: translateY(-8px);
    }


/*=========================================================
            BACKGROUND PARALLAX
=========================================================*/

.oxgcon-bg {
    transition: transform 8s ease;
}

.oxgcon-section:hover .oxgcon-bg {
    transform: scale(1.08);
}


/*=========================================================
            GOLD SHIMMER
=========================================================*/

.oxgcon-form-box::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient( 90deg, transparent, rgba(255,255,255,.08), transparent);
    transform: skewX(-20deg);
    transition: 1.5s;
}

.oxgcon-form-box:hover::after {
    left: 170%;
}


/*=========================================================
            FLOATING PARTICLES
=========================================================*/

.oxgcon-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #16b36d;
    opacity: .18;
    animation: oxgconFloat linear infinite;
}

    .oxgcon-particle.gold {
        background: #d4af37;
    }


/*=========================================================
            BUTTON PULSE
=========================================================*/

.oxgcon-btn:hover {
    animation: oxgconPulse .8s ease;
}


/*=========================================================
            ICON ANIMATION
=========================================================*/

.oxgcon-item:hover .oxgcon-icon {
    animation: oxgconRotate .8s ease;
}


/*=========================================================
            INPUT HOVER
=========================================================*/

.oxgcon-field {
    transition: .35s;
}

    .oxgcon-field:hover {
        transform: translateY(-2px);
    }


/*=========================================================
            CURSOR GLOW
=========================================================*/

.oxgcon-form-box {
    position: relative;
}

.oxgcon-glow {
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%,-50%);
    background: radial-gradient(circle, rgba(212,175,55,.12), transparent 70%);
    filter: blur(50px);
    opacity: 0;
    transition: .3s;
}

.oxgcon-form-box:hover .oxgcon-glow {
    opacity: 1;
}


/*=========================================================
            KEYFRAMES
=========================================================*/

@keyframes oxgconFadeUp {

    from {
        opacity: 0;
        transform: translateY(70px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes oxgconFadeLeft {

    from {
        opacity: 0;
        transform: translateX(-60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


@keyframes oxgconFloat {

    0% {
        transform: translateY(120vh) scale(.4);
        opacity: 0;
    }

    20% {
        opacity: .18;
    }

    80% {
        opacity: .12;
    }

    100% {
        transform: translateY(-120vh) scale(1.4);
        opacity: 0;
    }
}


@keyframes oxgconPulse {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.03);
    }

    100% {
        transform: scale(1);
    }
}


@keyframes oxgconRotate {

    0% {
        transform: rotate(0);
    }

    50% {
        transform: rotate(-12deg) scale(1.08);
    }

    100% {
        transform: rotate(0);
    }
}


/*=========================================================
            LARGE DESKTOP
=========================================================*/

@media(min-width:1700px) {

    .oxgcon-wrapper {
        gap: 60px;
    }
}


/*=========================================================
            TABLET
=========================================================*/

@media(max-width:992px) {

    .oxgcon-wrapper {
        gap: 30px;
    }
}


/*=========================================================
            MOBILE
=========================================================*/

@media(max-width:768px) {

    .oxgcon-section {
        padding: 90px 0;
    }

    .oxgcon-heading h2 {
        font-size: 40px;
    }
}


/*=========================================================
            SMALL MOBILE
=========================================================*/

@media(max-width:576px) {

    .oxgcon-section {
        padding: 70px 0;
    }

    .oxgcon-heading h2 {
        font-size: 32px;
    }
}


/*=========================================================
        REDUCED MOTION SUPPORT
=========================================================*/

@media(prefers-reduced-motion:reduce) {

    .oxgcon-section *,
    .oxgcon-section *::before,
    .oxgcon-section *::after {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/*=========================================================
                    PART 11B.1
      PREMIUM FOOTER LAYOUT & BACKGROUND CSS
=========================================================*/


/*=========================================================
                    FOOTER
=========================================================*/

.oxfoot {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at top left,#123322 0%,transparent 35%), radial-gradient(circle at bottom right,#2b2107 0%,transparent 35%), linear-gradient(180deg,#030504 0%,#06110b 55%,#020202 100%);
    padding: 120px 0 0;
    color: #fff;
    isolation: isolate;
}


/*=========================================================
                WORLD MAP BACKGROUND
=========================================================*/

.oxfoot-map {
    position: absolute;
    inset: 0;
    background: url("../images/world-map-gold.png") center center/75% no-repeat;
    opacity: .06;
    pointer-events: none;
    z-index: -2;
}


/*=========================================================
            GOLD GRID OVERLAY
=========================================================*/

.oxfoot::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(212,175,55,.03) 1px,transparent 1px), linear-gradient(90deg,rgba(212,175,55,.03) 1px,transparent 1px);
    background-size: 80px 80px;
    mask-image: linear-gradient(to bottom,rgba(0,0,0,.7),transparent);
    z-index: -2;
}


/*=========================================================
                EMERALD GLOW
=========================================================*/

.oxfoot-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: .45;
    z-index: -1;
}


.oxfoot-glow1 {
    width: 500px;
    height: 500px;
    background: #16b36d;
    left: -200px;
    top: -120px;
}


.oxfoot-glow2 {
    width: 450px;
    height: 450px;
    background: #d4af37;
    right: -150px;
    bottom: -150px;
}


/*=========================================================
                GOLD TOP BORDER
=========================================================*/

.oxfoot::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient( 90deg, transparent, #16b36d, #d4af37, #16b36d, transparent );
    box-shadow: 0 0 25px rgba(212,175,55,.4);
}


/*=========================================================
                    CONTAINER
=========================================================*/

.oxfoot-container {
    width: min(92%,1450px);
    margin: auto;
    position: relative;
    z-index: 2;
}


/*=========================================================
                FOUR COLUMN LAYOUT
=========================================================*/

.oxfoot-top {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1.1fr 1.2fr;
    gap: 60px;
    align-items: flex-start;
}


/*=========================================================
                COMPANY COLUMN
=========================================================*/

.oxfoot-company {
    position: relative;
}


.oxfoot-logo {
    display: inline-block;
    margin-bottom: 35px;
}


    .oxfoot-logo img {
        width: 250px;
        transition: .45s;
    }


    .oxfoot-logo:hover img {
        transform: scale(1.04);
        filter: drop-shadow(0 0 15px rgba(212,175,55,.25));
    }


/*=========================================================
                DESCRIPTION
=========================================================*/

.oxfoot-desc {
    font-size: 17px;
    line-height: 1.9;
    color: #d6d6d6;
    margin-bottom: 40px;
}


/*=========================================================
                COLUMN TITLES
=========================================================*/

.oxfoot h3 {
    font-family: "Cormorant Garamond",serif;
    font-size: 34px;
    color: #e6c468;
    margin-bottom: 35px;
    position: relative;
    padding-bottom: 16px;
}


    .oxfoot h3::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 70px;
        height: 2px;
        background: linear-gradient( 90deg, #16b36d, #d4af37 );
    }


/*=========================================================
                GLASS PANELS
=========================================================*/

.oxfoot-company,
.oxfoot-links,
.oxfoot-newsletter {
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(212,175,55,.08);
    border-radius: 24px;
    padding: 35px;
    backdrop-filter: blur(18px);
    transition: .45s;
    position: relative;
    overflow: hidden;
}


    /*=========================================================
            LUXURY GOLD BORDER
=========================================================*/

    .oxfoot-company::before,
    .oxfoot-links::before,
    .oxfoot-newsletter::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 24px;
        padding: 1px;
        background: linear-gradient( 135deg, rgba(212,175,55,.55), rgba(22,179,109,.18), rgba(212,175,55,.08) );
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }


    /*=========================================================
                CARD HOVER
=========================================================*/

    .oxfoot-company:hover,
    .oxfoot-links:hover,
    .oxfoot-newsletter:hover {
        transform: translateY(-10px);
        border-color: rgba(212,175,55,.2);
        box-shadow: 0 25px 60px rgba(0,0,0,.45), 0 0 30px rgba(22,179,109,.08);
    }


    /*=========================================================
                SHINE EFFECT
=========================================================*/

    .oxfoot-company::after,
    .oxfoot-links::after,
    .oxfoot-newsletter::after {
        content: "";
        position: absolute;
        top: 0;
        left: -120%;
        width: 40%;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.08), transparent );
        transform: skewX(-25deg);
        transition: 1s;
    }


    .oxfoot-company:hover::after,
    .oxfoot-links:hover::after,
    .oxfoot-newsletter:hover::after {
        left: 140%;
    }


/*=========================================================
                RESPONSIVE
=========================================================*/

@media(max-width:1300px) {

    .oxfoot-top {
        gap: 35px;
    }
}


@media(max-width:1100px) {

    .oxfoot-top {
        grid-template-columns: repeat(2,1fr);
    }
}


@media(max-width:768px) {

    .oxfoot {
        padding-top: 80px;
    }

    .oxfoot-top {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .oxfoot-company,
    .oxfoot-links,
    .oxfoot-newsletter {
        padding: 28px;
    }

    .oxfoot-logo img {
        width: 200px;
    }
}


@media(max-width:576px) {

    .oxfoot-container {
        width: 94%;
    }

    .oxfoot h3 {
        font-size: 28px;
    }

    .oxfoot-desc {
        font-size: 15px;
    }
}
/*=========================================================
                PART 11B.2
     PREMIUM LINKS, CONTACT, NEWSLETTER & SOCIAL CSS
=========================================================*/


/*=========================================================
                CONTACT LIST
=========================================================*/

.oxfoot-contact {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 35px;
}


.oxfoot-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 18px;
    border-radius: 18px;
    transition: .4s ease;
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
}


    .oxfoot-contact-item:hover {
        background: rgba(255,255,255,.03);
        border-color: rgba(212,175,55,.18);
        transform: translateX(8px);
    }


    .oxfoot-contact-item::before {
        content: "";
        position: absolute;
        left: -120%;
        top: 0;
        width: 50%;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.08), transparent);
        transform: skewX(-25deg);
        transition: 1s;
    }


    .oxfoot-contact-item:hover::before {
        left: 140%;
    }


/*=========================================================
                CONTACT ICON
=========================================================*/

.oxfoot-icon {
    width: 58px;
    height: 58px;
    min-width: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,#123b27,#0b1b14);
    border: 1px solid rgba(212,175,55,.25);
    color: #d4af37;
    font-size: 20px;
    transition: .45s;
    box-shadow: inset 0 0 18px rgba(255,255,255,.02);
}


.oxfoot-contact-item:hover .oxfoot-icon {
    background: linear-gradient( 135deg, #16b36d, #0f8d56);
    color: #fff;
    transform: rotate(-8deg) scale(1.08);
    box-shadow: 0 12px 28px rgba(22,179,109,.35);
}


/*=========================================================
                CONTACT TEXT
=========================================================*/

.oxfoot-contact span {
    display: block;
    color: #d4af37;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: 600;
}


.oxfoot-contact p {
    color: #d8d8d8;
    font-size: 15px;
    line-height: 1.8;
    transition: .35s;
}


.oxfoot-contact-item:hover p {
    color: #fff;
}


/*=========================================================
                LINK LISTS
=========================================================*/

.oxfoot-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}


.oxfoot-links li {
    margin-bottom: 18px;
}


    .oxfoot-links li:last-child {
        margin-bottom: 0;
    }


.oxfoot-links a {
    color: #d6d6d6;
    text-decoration: none;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    transition: .35s;
    position: relative;
    padding-left: 0;
}


    /* Arrow */

    .oxfoot-links a::before {
        content: "➜";
        color: #16b36d;
        margin-right: 0;
        opacity: 0;
        transform: translateX(-10px);
        transition: .35s;
    }


    .oxfoot-links a:hover {
        color: #fff;
        padding-left: 10px;
    }


        .oxfoot-links a:hover::before {
            opacity: 1;
            margin-right: 10px;
            transform: translateX(0);
        }


    .oxfoot-links a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -6px;
        width: 0;
        height: 2px;
        background: linear-gradient( 90deg, #16b36d, #d4af37);
        transition: .35s;
    }


    .oxfoot-links a:hover::after {
        width: 100%;
    }


/*=========================================================
                NEWSLETTER
=========================================================*/

.oxfoot-newsletter p {
    color: #cfcfcf;
    line-height: 1.9;
    margin-bottom: 28px;
    font-size: 16px;
}


.oxfoot-form {
    display: flex;
    align-items: center;
    border-radius: 60px;
    overflow: hidden;
    border: 1px solid rgba(212,175,55,.15);
    background: rgba(255,255,255,.03);
    backdrop-filter: blur(15px);
    margin-bottom: 35px;
}


    .oxfoot-form input {
        flex: 1;
        height: 62px;
        background: none;
        border: none;
        outline: none;
        color: #fff;
        padding: 0 24px;
        font-size: 15px;
    }


        .oxfoot-form input::placeholder {
            color: #b7b7b7;
        }


    .oxfoot-form button {
        width: 70px;
        height: 62px;
        border: none;
        cursor: pointer;
        background: linear-gradient( 135deg, #16b36d, #129159);
        color: #fff;
        font-size: 18px;
        transition: .4s;
    }


        .oxfoot-form button:hover {
            background: linear-gradient( 135deg, #d4af37, #b88c1d);
        }


/*=========================================================
                SOCIAL ICONS
=========================================================*/

.oxfoot-social {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}


    .oxfoot-social a {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #d4af37;
        text-decoration: none;
        font-size: 18px;
        background: rgba(255,255,255,.03);
        border: 1px solid rgba(212,175,55,.15);
        backdrop-filter: blur(15px);
        transition: .45s;
        position: relative;
        overflow: hidden;
    }


        .oxfoot-social a::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient( 135deg, #16b36d, #d4af37);
            opacity: 0;
            transition: .45s;
        }


        .oxfoot-social a i {
            position: relative;
            z-index: 2;
        }


        .oxfoot-social a:hover {
            transform: translateY(-8px) rotate(-8deg);
            box-shadow: 0 15px 35px rgba(22,179,109,.28);
            color: #fff;
        }


            .oxfoot-social a:hover::before {
                opacity: 1;
            }


/*=========================================================
            NEWSLETTER INPUT FOCUS
=========================================================*/

.oxfoot-form:focus-within {
    border-color: #16b36d;
    box-shadow: 0 0 0 3px rgba(22,179,109,.08), 0 0 20px rgba(22,179,109,.18);
}


/*=========================================================
                RESPONSIVE
=========================================================*/

@media(max-width:992px) {

    .oxfoot-contact-item {
        padding: 15px;
    }
}


@media(max-width:768px) {

    .oxfoot-form {
        flex-direction: column;
        border-radius: 20px;
    }

        .oxfoot-form input {
            width: 100%;
            border-bottom: 1px solid rgba(255,255,255,.08);
        }

        .oxfoot-form button {
            width: 100%;
            border-radius: 0 0 20px 20px;
        }
}


@media(max-width:576px) {

    .oxfoot-social {
        justify-content: center;
    }

    .oxfoot-contact-item {
        flex-direction: column;
        align-items: flex-start;
    }
}

/*=========================================================
                PART 11B.3
     FEATURE STRIP • COPYRIGHT • BACK TO TOP
=========================================================*/


/*=========================================================
                FEATURE STRIP
=========================================================*/

.oxfoot-feature {
    margin-top: 80px;
    margin-bottom: 60px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 25px;
}


.oxfoot-feature-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 28px;
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient( 135deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
    border: 1px solid rgba(212,175,55,.12);
    backdrop-filter: blur(20px);
    transition: .45s;
}


    /* Luxury Border */

    .oxfoot-feature-item::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 22px;
        padding: 1px;
        background: linear-gradient( 135deg, rgba(212,175,55,.45), rgba(22,179,109,.25), rgba(212,175,55,.10));
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }


    /* Shine */

    .oxfoot-feature-item::after {
        content: "";
        position: absolute;
        top: 0;
        left: -130%;
        width: 45%;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.12), transparent);
        transform: skewX(-25deg);
        transition: 1s;
    }


    .oxfoot-feature-item:hover::after {
        left: 150%;
    }


    .oxfoot-feature-item:hover {
        transform: translateY(-10px);
        box-shadow: 0 25px 50px rgba(0,0,0,.45), 0 0 30px rgba(22,179,109,.12);
    }


    /*=========================================================
                FEATURE ICON
=========================================================*/

    .oxfoot-feature-item i {
        width: 72px;
        height: 72px;
        min-width: 72px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        color: #d4af37;
        background: linear-gradient( 135deg, #0d2318, #123624);
        border: 1px solid rgba(212,175,55,.18);
        transition: .45s;
    }


    .oxfoot-feature-item:hover i {
        color: #fff;
        background: linear-gradient( 135deg, #16b36d, #0f8e58);
        transform: rotate(-10deg) scale(1.08);
    }


    /*=========================================================
                FEATURE TEXT
=========================================================*/

    .oxfoot-feature-item h4 {
        margin: 0 0 6px;
        font-family: "Cormorant Garamond",serif;
        font-size: 28px;
        color: #e6c468;
        font-weight: 700;
    }


    .oxfoot-feature-item span {
        color: #d2d2d2;
        font-size: 15px;
        line-height: 1.6;
    }


/*=========================================================
                COPYRIGHT BAR
=========================================================*/

.oxfoot-bottom {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    padding: 35px 0;
    border-top: 1px solid rgba(212,175,55,.10);
}


    .oxfoot-bottom::before {
        content: "";
        position: absolute;
        left: 0;
        top: -1px;
        width: 220px;
        height: 1px;
        background: linear-gradient( 90deg, #16b36d, #d4af37, transparent);
    }


    /*=========================================================
                COPYRIGHT
=========================================================*/

    .oxfoot-bottom p {
        color: #bdbdbd;
        font-size: 15px;
        margin: 0;
    }


    .oxfoot-bottom strong {
        color: #e6c468;
        font-weight: 600;
    }


/*=========================================================
                BOTTOM LINKS
=========================================================*/

.oxfoot-bottom-links {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}


    .oxfoot-bottom-links a {
        color: #cfcfcf;
        text-decoration: none;
        font-size: 15px;
        position: relative;
        transition: .35s;
    }


        .oxfoot-bottom-links a:hover {
            color: #fff;
        }


        .oxfoot-bottom-links a::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -5px;
            width: 0;
            height: 2px;
            background: linear-gradient( 90deg, #16b36d, #d4af37);
            transition: .35s;
        }


        .oxfoot-bottom-links a:hover::after {
            width: 100%;
        }


/*=========================================================
                BACK TO TOP
=========================================================*/

.oxfoot-top-btn {
    position: absolute;
    right: 50px;
    top: -32px;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 22px;
    color: #fff;
    background: linear-gradient( 135deg, #16b36d, #0f8e58);
    border: 2px solid rgba(212,175,55,.35);
    box-shadow: 0 15px 40px rgba(22,179,109,.35);
    transition: .45s;
    overflow: hidden;
}


    .oxfoot-top-btn::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 135deg, #d4af37, #16b36d);
        opacity: 0;
        transition: .4s;
    }


    .oxfoot-top-btn i {
        position: relative;
        z-index: 2;
    }


    .oxfoot-top-btn:hover {
        transform: translateY(-8px) rotate(-8deg);
    }


        .oxfoot-top-btn:hover::before {
            opacity: 1;
        }


/*=========================================================
                FLOATING GOLD LINE
=========================================================*/

.oxfoot-bottom {
    overflow: hidden;
}


    .oxfoot-bottom::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: -30%;
        width: 30%;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(212,175,55,.7), transparent);
        animation: oxfootLine 7s linear infinite;
    }


/*=========================================================
                RESPONSIVE
=========================================================*/

@media(max-width:1200px) {

    .oxfoot-feature {
        grid-template-columns: repeat(2,1fr);
    }
}


@media(max-width:768px) {

    .oxfoot-feature {
        grid-template-columns: 1fr;
        margin-top: 60px;
        gap: 20px;
    }

    .oxfoot-bottom {
        flex-direction: column;
        text-align: center;
    }

    .oxfoot-bottom-links {
        justify-content: center;
    }

    .oxfoot-top-btn {
        right: 25px;
    }
}


@media(max-width:576px) {

    .oxfoot-feature-item {
        flex-direction: column;
        text-align: center;
    }

        .oxfoot-feature-item i {
            margin-bottom: 12px;
        }

    .oxfoot-top-btn {
        width: 58px;
        height: 58px;
        font-size: 18px;
        right: 18px;
    }
}


/*=========================================================
                KEYFRAME
=========================================================*/

@keyframes oxfootLine {

    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(500%);
    }
}


/*=========================================================
    ABOUT SECTION RESPONSIVE
    Desktop → Tablet → Mobile
=========================================================*/

/*==============================
        LARGE TABLETS
==============================*/

@media (max-width: 1199px) {

    .exc-about {
        padding: 100px 0;
    }

    .exc-container {
        width: 92%;
    }

    .exc-about-grid {
        grid-template-columns: 1fr;
        gap: 70px;
        align-items: center;
    }

    .exc-about-image-column {
        order: 1;
        display: flex;
        justify-content: center;
    }

    .exc-about-content {
        order: 2;
        max-width: 800px;
        margin: auto;
        text-align: center;
    }

    .exc-about-divider {
        margin: 25px auto;
    }

    .exc-about-features {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 25px;
        margin-top: 45px;
    }
}


/*==============================
        TABLETS
==============================*/

@media (max-width:991px) {

    .exc-about {
        padding: 80px 0;
    }

    .exc-about-grid {
        gap: 60px;
    }

    .exc-about-image-wrapper {
        width: 100%;
        max-width: 550px;
        margin: auto;
    }

    .exc-about-image {
        width: 100%;
        height: auto;
        display: block;
    }

    .exc-about-content h2 {
        font-size: 40px;
        line-height: 1.3;
    }

    .exc-about-content p {
        font-size: 16px;
        line-height: 1.9;
    }

    .exc-about-features {
        grid-template-columns: 1fr 1fr;
    }
}


/*==============================
        MOBILE
==============================*/

@media (max-width:767px) {

    .exc-about {
        padding: 70px 0;
        overflow: hidden;
    }

    .exc-container {
        width: 92%;
    }

    .exc-about-grid {
        display: flex;
        flex-direction: column;
        gap: 45px;
    }

    .exc-about-image-column {
        width: 100%;
    }

    .exc-about-image-wrapper {
        width: 100%;
        max-width: 100%;
        border-radius: 25px;
        overflow: hidden;
    }

    .exc-about-image {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
    }

    .exc-about-content {
        width: 100%;
        text-align: center;
    }

    .exc-about-subtitle {
        font-size: 13px;
        letter-spacing: 3px;
    }

    .exc-about-content h2 {
        font-size: 32px;
        line-height: 1.35;
        margin-top: 15px;
    }

    .exc-about-divider {
        margin: 20px auto;
        width: 80px;
    }

    .exc-about-content p {
        font-size: 15px;
        line-height: 1.9;
        margin-bottom: 20px;
    }

    .exc-about-features {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 35px;
    }

    .exc-about-feature {
        padding: 22px;
        text-align: left;
    }

    .exc-feature-icon {
        width: 58px;
        height: 58px;
        min-width: 58px;
        font-size: 22px;
    }

    .exc-about-feature h4 {
        font-size: 18px;
        margin-bottom: 8px;
    }

    .exc-about-feature p {
        font-size: 14px;
        margin: 0;
    }
}


/*==============================
        SMALL MOBILE
==============================*/

@media (max-width:575px) {

    .exc-about {
        padding: 60px 0;
    }

    .exc-container {
        width: 94%;
    }

    .exc-about-content h2 {
        font-size: 28px;
        line-height: 1.4;
    }

    .exc-about-subtitle {
        font-size: 12px;
        letter-spacing: 2px;
    }

    .exc-about-content p {
        font-size: 14px;
        line-height: 1.8;
    }

    .exc-about-feature {
        display: flex;
        align-items: flex-start;
        gap: 15px;
        padding: 18px;
        border-radius: 18px;
    }

    .exc-feature-icon {
        width: 50px;
        height: 50px;
        min-width: 50px;
        font-size: 18px;
    }

    .exc-about-feature h4 {
        font-size: 16px;
    }

    .exc-about-feature p {
        font-size: 13px;
        line-height: 1.7;
    }
}


/*==============================
        EXTRA SMALL DEVICES
==============================*/

@media (max-width:400px) {

    .exc-about {
        padding: 50px 0;
    }

    .exc-about-content h2 {
        font-size: 24px;
    }

    .exc-about-content p {
        font-size: 13px;
    }

    .exc-about-feature {
        padding: 16px;
    }

    .exc-feature-icon {
        width: 46px;
        height: 46px;
        min-width: 46px;
        font-size: 17px;
    }
}
@media (max-width:767px) {

    .exc-about-content {
        width: 100%;
        text-align: left;
        padding-left: 60px; /* Moves content to the right */
        padding-right: 10px;
        box-sizing: border-box;
    }
}


@media (max-width:767px) {

    .exc-about-content {
        padding-left: 60px;
        padding-right: 10px;
    }

    .exc-about-features {
        padding-left: 10px;
    }
}

/*=========================================================
    MOBILE NAVIGATION
=========================================================*/

/* Hide on Desktop */

.exc-mobile-btn,
.exc-mobile-nav,
.exc-mobile-overlay {
    display: none;
}

/*=========================================================
    MOBILE (991px and below)
=========================================================*/

@media screen and (max-width:991px) {

    /* Hide Desktop Menu */

    .exc-menu {
        display: none;
    }

    .exc-book-btn {
        display: none;
    }

    /* Navbar */

    .exc-navbar .exc-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
    }

    /*=====================================
            HAMBURGER BUTTON
    =====================================*/

    .exc-mobile-btn {
        display: flex;
        width: 50px;
        height: 50px;
        padding: 0;
        background: none;
        border: none;
        cursor: pointer;
        position: relative;
        align-items: center;
        justify-content: center;
        z-index: 10002;
    }

        .exc-mobile-btn span {
            position: absolute;
            width: 28px;
            height: 3px;
            background: #ffffff;
            border-radius: 50px;
            transition: .35s;
        }

            .exc-mobile-btn span:nth-child(1) {
                transform: translateY(-8px);
            }

            .exc-mobile-btn span:nth-child(2) {
                transform: translateY(0);
            }

            .exc-mobile-btn span:nth-child(3) {
                transform: translateY(8px);
            }

        /* Hamburger Animation */

        .exc-mobile-btn.active span:nth-child(1) {
            transform: rotate(45deg);
        }

        .exc-mobile-btn.active span:nth-child(2) {
            opacity: 0;
        }

        .exc-mobile-btn.active span:nth-child(3) {
            transform: rotate(-45deg);
        }

    /*=====================================
            OVERLAY
    =====================================*/

    .exc-mobile-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.55);
        opacity: 0;
        visibility: hidden;
        transition: .35s;
        z-index: 9998;
    }

        .exc-mobile-overlay.active {
            opacity: 1;
            visibility: visible;
        }

    /*=====================================
            MOBILE MENU
    =====================================*/

    .exc-mobile-nav {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        max-width: 85%;
        height: 100vh;
        background: #071a2f;
        padding: 100px 30px 40px;
        transition: .35s ease;
        z-index: 9999;
        overflow-y: auto;
        box-shadow: -15px 0 40px rgba(0,0,0,.35);
    }

        .exc-mobile-nav.active {
            right: 0;
        }

        .exc-mobile-nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            width: 100%;
        }

        .exc-mobile-nav li {
            margin-bottom: 18px;
        }

        .exc-mobile-nav a {
            display: block;
            color: #ffffff;
            text-decoration: none;
            font-size: 18px;
            font-weight: 500;
            padding: 12px 0;
            transition: .3s;
            border-bottom: 1px solid rgba(255,255,255,.08);
        }

            .exc-mobile-nav a:hover {
                color: #D4AF37;
                padding-left: 12px;
            }

    /* Prevent Page Scroll */

    body.menu-open {
        overflow: hidden;
    }
}

/*=========================================================
    DESKTOP
=========================================================*/

@media screen and (min-width:992px) {

    .exc-mobile-btn,
    .exc-mobile-nav,
    .exc-mobile-overlay {
        display: none !important;
    }
}

/*=========================================================
    DESTINATION MOBILE SLIDER
=========================================================*/

@media (max-width:991px) {

    .exc-destination-slider {
        display: flex;
        gap: 20px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 10px 20px 25px;
        scrollbar-width: none;
    }

        .exc-destination-slider::-webkit-scrollbar {
            display: none;
        }

    .exc-destination-card {
        flex: 0 0 85%;
        max-width: 85%;
        scroll-snap-align: center;
    }
}

/* Small Phones */

@media (max-width:576px) {

    .exc-destination-card {
        flex: 0 0 92%;
        max-width: 92%;
    }
}

/*==========================================
        DESTINATION CAROUSEL
==========================================*/

.exc-destination-carousel {
    position: relative;
    overflow: hidden;
}

.exc-carousel-track {
    display: flex;
    gap: 30px;
    transition: transform .5s ease;
}

.exc-destination-card {
    flex: 0 0 calc(33.333% - 20px);
    border-radius: 24px;
    overflow: hidden;
    position: relative;
}

    .exc-destination-card img {
        width: 100%;
        display: block;
    }

/* Navigation Buttons */

.exc-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,.65);
    color: #fff;
    font-size: 26px;
    cursor: pointer;
    z-index: 20;
}

.exc-prev {
    left: 15px;
}

.exc-next {
    right: 15px;
}

/*==========================================
        TABLET
==========================================*/

@media(max-width:991px) {

    .exc-carousel-track {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 20px;
        padding-bottom: 15px;
    }

        .exc-carousel-track::-webkit-scrollbar {
            display: none;
        }

    .exc-destination-card {
        flex: 0 0 80%;
        scroll-snap-align: center;
    }

    .exc-carousel-btn {
        display: none;
    }
}

/*==========================================
        MOBILE
==========================================*/

@media(max-width:576px) {

    .exc-destination-card {
        flex: 0 0 92%;
    }
}

/*=========================================================
    NANO PROCESS SECTION RESPONSIVE
=========================================================*/

/*==============================
        TABLET
==============================*/

@media (max-width:991px) {

    .olix-process-section {
        padding: 80px 0;
        overflow: hidden;
    }

    .olix-process-container {
        width: 92%;
        margin: auto;
        display: flex;
        flex-direction: column;
        gap: 60px;
    }

    .olix-process-left,
    .olix-process-right {
        width: 100%;
    }

    .olix-process-image-wrapper {
        display: flex;
        justify-content: center;
    }

    .olix-process-image {
        width: 100%;
        max-width: 420px;
        height: auto;
    }

    .olix-process-right {
        text-align: center;
    }

    .olix-process-title {
        font-size: 40px;
        line-height: 1.3;
    }

    .olix-process-description {
        max-width: 700px;
        margin: 20px auto 40px;
        line-height: 1.8;
    }

    .olix-process-timeline {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 30px;
        justify-items: center;
    }

    .olix-process-arrow {
        display: none;
    }
}

/*==============================
        MOBILE
==============================*/

@media (max-width:767px) {

    .olix-process-section {
        padding: 60px 0;
    }

    .olix-process-container {
        width: 92%;
        gap: 45px;
    }

    .olix-process-image {
        width: 90%;
        max-width: 320px;
    }

    .olix-process-tag {
        font-size: 12px;
        letter-spacing: 2px;
    }

    .olix-process-title {
        font-size: 30px;
        line-height: 1.35;
        margin-top: 15px;
    }

    .olix-process-description {
        font-size: 15px;
        line-height: 1.8;
        margin-bottom: 35px;
    }

    /* Timeline becomes vertical */

    .olix-process-timeline {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
    }

    .olix-process-step {
        width: 100%;
        max-width: 320px;
        display: flex;
        align-items: center;
        gap: 18px;
        padding: 18px 20px;
        border-radius: 20px;
        background: rgba(255,255,255,.06);
        backdrop-filter: blur(12px);
    }

    .olix-process-icon {
        width: 65px;
        height: 65px;
        min-width: 65px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #ffffff;
    }

        .olix-process-icon img {
            width: 34px;
            height: 34px;
            object-fit: contain;
        }

    .olix-process-step h4 {
        margin: 0;
        font-size: 18px;
        line-height: 1.4;
        text-align: left;
    }

    .olix-process-arrow {
        display: none;
    }

    .olix-process-footer {
        margin-top: 35px;
    }

        .olix-process-footer p {
            font-size: 14px;
            line-height: 1.8;
            text-align: center;
        }
}

/*==============================
        SMALL MOBILE
==============================*/

@media (max-width:480px) {

    .olix-process-container {
        width: 94%;
    }

    .olix-process-title {
        font-size: 26px;
    }

    .olix-process-description {
        font-size: 14px;
    }

    .olix-process-step {
        padding: 16px;
        gap: 15px;
    }

    .olix-process-icon {
        width: 55px;
        height: 55px;
        min-width: 55px;
    }

        .olix-process-icon img {
            width: 28px;
            height: 28px;
        }

    .olix-process-step h4 {
        font-size: 16px;
    }

    .olix-process-footer p {
        font-size: 13px;
    }
}
/*=========================================================
    OLIX INNOVATION SECTION RESPONSIVE
=========================================================*/

/*==============================
        TABLET
==============================*/

@media (max-width:991px) {

    .olix-innovation-section {
        padding: 80px 0;
        overflow: hidden;
    }

    .olix-innovation-container {
        width: 92%;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 50px;
    }

    .olix-innovation-left,
    .olix-innovation-right {
        width: 100%;
    }

    .olix-innovation-divider,
    .olix-leaf-decoration {
        display: none;
    }

    .olix-innovation-image-wrapper {
        display: flex;
        justify-content: center;
    }

    .olix-innovation-image {
        width: 100%;
        max-width: 420px;
        height: auto;
    }

    .olix-innovation-right {
        text-align: center;
    }

    .olix-section-title {
        font-size: 42px;
        line-height: 1.3;
    }

    .olix-section-description {
        max-width: 700px;
        margin: 20px auto 40px;
        line-height: 1.8;
    }

    .olix-feature-grid {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 25px;
    }
}


/*==============================
        MOBILE
==============================*/

@media (max-width:767px) {

    .olix-innovation-section {
        padding: 60px 0;
    }

    .olix-innovation-container {
        width: 92%;
        gap: 40px;
    }

    .olix-innovation-image {
        width: 90%;
        max-width: 300px;
        height: auto;
    }

    .olix-section-tag {
        display: inline-block;
        font-size: 12px;
        letter-spacing: 2px;
    }

    .olix-section-title {
        font-size: 30px;
        line-height: 1.35;
        margin-top: 15px;
    }

        .olix-section-title span {
            display: block;
            margin-top: 8px;
        }

    .olix-section-description {
        font-size: 15px;
        line-height: 1.8;
        margin: 20px auto 35px;
    }

    /* Feature Cards */

    .olix-feature-grid {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .olix-feature-card {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 18px;
        padding: 18px;
        border-radius: 20px;
        background: rgba(255,255,255,.06);
        backdrop-filter: blur(15px);
    }

    .olix-feature-icon {
        width: 60px;
        height: 60px;
        min-width: 60px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #ffffff;
    }

        .olix-feature-icon img {
            width: 30px;
            height: 30px;
            object-fit: contain;
        }

    .olix-feature-card h4 {
        margin: 0;
        text-align: left;
        font-size: 18px;
        line-height: 1.4;
    }

        .olix-feature-card h4 span {
            display: block;
            font-size: 15px;
            margin-top: 4px;
        }
}


/*==============================
        SMALL MOBILE
==============================*/

@media (max-width:480px) {

    .olix-innovation-container {
        width: 94%;
    }

    .olix-section-title {
        font-size: 26px;
    }

    .olix-section-description {
        font-size: 14px;
    }

    .olix-feature-card {
        padding: 16px;
        gap: 15px;
    }

    .olix-feature-icon {
        width: 52px;
        height: 52px;
        min-width: 52px;
    }

        .olix-feature-icon img {
            width: 26px;
            height: 26px;
        }

    .olix-feature-card h4 {
        font-size: 16px;
    }

        .olix-feature-card h4 span {
            font-size: 14px;
        }
}
/*=========================================
    MOVE CONTENT SLIGHTLY RIGHT - MOBILE
=========================================*/

@media (max-width:767px) {

    .olix-innovation-right {
        padding-left: 70px;
        padding-right: 10px;
        box-sizing: border-box;
    }
}

/*=========================================
    HERO SECTION - MOBILE BOTTOM PADDING
=========================================*/

@media (max-width:767px) {

    .olix-hero {
        padding-bottom: 60px;
    }
}


/*==================================================
        MOBILE NAVIGATION
==================================================*/

.olix-mobile-btn,
.olix-mobile-nav,
.olix-mobile-overlay {
    display: none;
}

/* Mobile */

@media(max-width:991px) {

    /* Hide desktop */

    .olix-nav-menu,
    .olix-nav-button {
        display: none;
    }

    .olix-navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 18px 20px;
        position: relative;
    }

    /* Hamburger */

    .olix-mobile-btn {
        display: flex;
        width: 46px;
        height: 46px;
        border: none;
        background: none;
        cursor: pointer;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 6px;
        z-index: 10002;
    }

        .olix-mobile-btn span {
            width: 28px;
            height: 3px;
            background: #ffffff;
            border-radius: 30px;
            transition: .35s;
        }

        .olix-mobile-btn.active span:nth-child(1) {
            transform: translateY(9px) rotate(45deg);
        }

        .olix-mobile-btn.active span:nth-child(2) {
            opacity: 0;
        }

        .olix-mobile-btn.active span:nth-child(3) {
            transform: translateY(-9px) rotate(-45deg);
        }

    /* Slide Menu */

    .olix-mobile-nav {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: fixed;
        top: 0;
        right: -100%;
        width: 290px;
        max-width: 85%;
        height: 100vh;
        padding: 110px 30px 40px;
        background: #0b1d14;
        transition: .4s ease;
        z-index: 10001;
        box-shadow: -10px 0 35px rgba(0,0,0,.35);
    }

        .olix-mobile-nav.active {
            right: 0;
        }

        .olix-mobile-nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .olix-mobile-nav li {
            margin-bottom: 20px;
        }

        .olix-mobile-nav a {
            color: #ffffff;
            text-decoration: none;
            font-size: 18px;
            font-weight: 500;
            transition: .3s;
        }

            .olix-mobile-nav a:hover {
                color: #73d16d;
                padding-left: 10px;
            }

    .olix-mobile-button {
        display: block;
        text-align: center;
        padding: 14px;
        background: #73d16d;
        color: #000 !important;
        border-radius: 40px;
        font-weight: 700;
    }

    /* Overlay */

    .olix-mobile-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.55);
        opacity: 0;
        visibility: hidden;
        transition: .35s;
        z-index: 10000;
    }

        .olix-mobile-overlay.active {
            opacity: 1;
            visibility: visible;
        }

    body.menu-open {
        overflow: hidden;
    }
}

/* Desktop */

@media(min-width:992px) {

    .olix-mobile-btn,
    .olix-mobile-nav,
    .olix-mobile-overlay {
        display: none !important;
    }
}


/*=========================================================
    HERO CARDS - MOBILE
    Show only the main card
=========================================================*/

@media (max-width:767px) {

    /* Hide first and third cards */

    .pl-small-card,
    .pl-bottom-card {
        display: none;
    }

    /* Hero right section */

    .pl-hero-right {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin-top: 40px;
    }

    /* Main card */

    .pl-large-card {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
    }

        .pl-large-card img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 25px;
        }
}

/*=================================================
        MOBILE NAVIGATION
=================================================*/

.pl-mobile-btn,
.pl-mobile-nav,
.pl-mobile-overlay {
    display: none;
}

/*=========================================
            MOBILE
=========================================*/

@media(max-width:991px) {

    /* Hide Desktop */

    .pl-menu,
    .pl-nav-icons {
        display: none;
    }

    .pl-navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Hamburger */

    .pl-mobile-btn {
        display: flex;
        width: 48px;
        height: 48px;
        background: none;
        border: none;
        cursor: pointer;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 6px;
        z-index: 10002;
    }

        .pl-mobile-btn span {
            width: 28px;
            height: 3px;
            background: #fff;
            border-radius: 50px;
            transition: .35s;
        }

        .pl-mobile-btn.active span:nth-child(1) {
            transform: translateY(9px) rotate(45deg);
        }

        .pl-mobile-btn.active span:nth-child(2) {
            opacity: 0;
        }

        .pl-mobile-btn.active span:nth-child(3) {
            transform: translateY(-9px) rotate(-45deg);
        }

    /* Mobile Menu */

    .pl-mobile-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 300px;
        max-width: 85%;
        height: 100vh;
        background: #17351b;
        padding: 110px 35px;
        transition: .4s;
        z-index: 10001;
        display: flex;
        flex-direction: column;
    }

        .pl-mobile-nav.active {
            right: 0;
        }

        .pl-mobile-nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .pl-mobile-nav li {
            margin-bottom: 22px;
        }

        .pl-mobile-nav a {
            color: #fff;
            text-decoration: none;
            font-size: 18px;
            font-weight: 500;
            transition: .3s;
        }

            .pl-mobile-nav a:hover {
                color: #d9b65b;
                padding-left: 10px;
            }

    /* Overlay */

    .pl-mobile-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.55);
        opacity: 0;
        visibility: hidden;
        transition: .3s;
        z-index: 10000;
        display: block;
    }

        .pl-mobile-overlay.active {
            opacity: 1;
            visibility: visible;
        }
}

/*=========================================
            DESKTOP
=========================================*/

@media(min-width:992px) {

    .pl-mobile-btn,
    .pl-mobile-nav,
    .pl-mobile-overlay {
        display: none !important;
    }
}

/*=========================================================
    RESPONSIVE LOGO
=========================================================*/

/* Desktop */

.pl-logo img {
    width: 180px;
    height: auto;
    display: block;
}

/* Tablet */

@media (max-width:991px) {

    .pl-navbar {
        min-height: 70px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .pl-logo {
        display: flex;
        align-items: center;
    }

        .pl-logo img {
            width: 140px;
            height: auto;
        }
}

/* Mobile */

@media (max-width:767px) {

    .pl-navbar {
        height: 65px;
        padding: 0 15px;
    }

    .pl-logo img {
        width: 120px;
        height: auto;
        object-fit: contain;
    }
}

/* Small Phones */

@media (max-width:480px) {

    .pl-navbar {
        height: 60px;
        padding: 0 12px;
    }

    .pl-logo img {
        width: 100px;
    }
}

/*=========================================================
    HERO TITLE ONLY
=========================================================*/

.pl-hero .pl-hero-left h1 {
    color: #ffffff;
}

    .pl-hero .pl-hero-left h1 span {
        color: #D8B86B; /* Gold */
        /*  or #6FBF73 for green */
    }
.pl-hero .pl-card-content h2 {
    color: #D8B86B;
}

/*==================================================
        PRODUCTS MOBILE NAVIGATION
==================================================*/

.products-mobile-btn,
.products-mobile-nav,
.products-mobile-overlay {
    display: none;
}

/*==============================
        MOBILE
==============================*/

@media (max-width:991px) {

    /* Hide desktop items */

    .products-menu,
    .products-nav-right {
        display: none;
    }

    .products-navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
    }

    /* Logo */

    .products-logo img {
        width: 130px;
        height: auto;
    }

    /* Hamburger */

    .products-mobile-btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 6px;
        width: 46px;
        height: 46px;
        border: none;
        background: none;
        cursor: pointer;
        z-index: 10002;
    }

        .products-mobile-btn span {
            width: 28px;
            height: 3px;
            background: #fff;
            border-radius: 50px;
            transition: .35s;
        }

        .products-mobile-btn.active span:nth-child(1) {
            transform: translateY(9px) rotate(45deg);
        }

        .products-mobile-btn.active span:nth-child(2) {
            opacity: 0;
        }

        .products-mobile-btn.active span:nth-child(3) {
            transform: translateY(-9px) rotate(-45deg);
        }

    /* Slide Menu */

    .products-mobile-nav {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: -100%;
        width: 290px;
        max-width: 85%;
        height: 100vh;
        background: #18391d;
        padding: 100px 30px 40px;
        transition: .4s ease;
        z-index: 10001;
        box-shadow: -8px 0 30px rgba(0,0,0,.3);
    }

        .products-mobile-nav.active {
            right: 0;
        }

        .products-mobile-nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .products-mobile-nav li {
            margin-bottom: 22px;
        }

        .products-mobile-nav a {
            color: #fff;
            text-decoration: none;
            font-size: 18px;
            font-weight: 500;
            transition: .3s;
        }

            .products-mobile-nav a:hover {
                color: #D8B86B;
                padding-left: 10px;
            }

    /* Overlay */

    .products-mobile-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.55);
        opacity: 0;
        visibility: hidden;
        transition: .3s;
        z-index: 10000;
    }

        .products-mobile-overlay.active {
            opacity: 1;
            visibility: visible;
        }

    body.products-menu-open {
        overflow: hidden;
    }
}

/* Desktop */

@media (min-width:992px) {

    .products-mobile-btn,
    .products-mobile-nav,
    .products-mobile-overlay {
        display: none !important;
    }
}

/*=========================================================
    PRODUCTS NAVBAR - MOBILE LOGO
=========================================================*/

@media (max-width:991px) {

    .products-navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 70px;
        padding: 0 18px;
    }

    .products-logo {
        display: flex;
        align-items: center;
    }

        .products-logo img {
            width: 120px;
            height: auto;
            display: block;
            object-fit: contain;
        }
}

/* Small Phones */

@media (max-width:480px) {

    .products-navbar {
        height: 65px;
        padding: 0 15px;
    }

    .products-logo img {
        width: 100px;
        max-height: 45px;
    }
}

/*==================================================
        ABOUT PAGE MOBILE NAVIGATION
==================================================*/

.about-mobile-btn,
.about-mobile-nav,
.about-mobile-overlay {
    display: none;
}

/*==============================
        MOBILE
==============================*/

@media (max-width:991px) {

    /* Hide desktop menu */

    .about-menu,
    .about-nav-right {
        display: none;
    }

    .about-navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 70px;
        padding: 0 18px;
    }

    /* Logo */

    .about-logo {
        display: flex;
        align-items: center;
    }

        .about-logo img {
            width: 120px;
            height: auto;
            display: block;
        }

    /* Hamburger */

    .about-mobile-btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 6px;
        width: 46px;
        height: 46px;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 10002;
    }

        .about-mobile-btn span {
            width: 28px;
            height: 3px;
            background: #fff;
            border-radius: 50px;
            transition: .35s;
        }

        .about-mobile-btn.active span:nth-child(1) {
            transform: translateY(9px) rotate(45deg);
        }

        .about-mobile-btn.active span:nth-child(2) {
            opacity: 0;
        }

        .about-mobile-btn.active span:nth-child(3) {
            transform: translateY(-9px) rotate(-45deg);
        }

    /* Mobile Menu */

    .about-mobile-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 290px;
        max-width: 85%;
        height: 100vh;
        background: #18391d;
        padding: 100px 30px 40px;
        transition: .4s ease;
        z-index: 10001;
        display: flex;
        flex-direction: column;
        box-shadow: -10px 0 35px rgba(0,0,0,.35);
    }

        .about-mobile-nav.active {
            right: 0;
        }

        .about-mobile-nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .about-mobile-nav li {
            margin-bottom: 22px;
        }

        .about-mobile-nav a {
            color: #fff;
            text-decoration: none;
            font-size: 18px;
            font-weight: 500;
            transition: .3s;
        }

            .about-mobile-nav a:hover {
                color: #D8B86B;
                padding-left: 10px;
            }

    /* Overlay */

    .about-mobile-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.55);
        opacity: 0;
        visibility: hidden;
        transition: .3s;
        z-index: 10000;
    }

        .about-mobile-overlay.active {
            opacity: 1;
            visibility: visible;
        }

    body.about-menu-open {
        overflow: hidden;
    }
}

/* Small Phones */

@media (max-width:480px) {

    .about-navbar {
        height: 65px;
        padding: 0 15px;
    }

    .about-logo img {
        width: 100px;
        max-height: 45px;
    }
}

/* Desktop */

@media (min-width:992px) {

    .about-mobile-btn,
    .about-mobile-nav,
    .about-mobile-overlay {
        display: none !important;
    }
}