/* ==========================================
   GLOBAL
========================================== */

:root {
    --purple: #40138f;
    --purple-dark: #3b0075;
    --purple-light: #6916d4;
    --yellow: #FFD24B;
    --white: #ffffff;
}

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

body {
    font-family: 'Poppins', sans-serif;
}


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

.top-header {
    background: #fff;
}


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

.logo-wrapper {
    position: relative;
}

.logo-box {
    background: #fff;
    width: 100%;
    min-height: 100px;

    border-bottom-right-radius: 130px;

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

    padding: 35px;

    position: relative;
    z-index: 100;
}

.logo-box img {
    width: 180px;
}


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

.top-info {
    display: flex;
    justify-content: flex-end;
    gap: 60px;
    padding: 18px 40px;

    color: #4b168c;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.info-item i {
    font-size: 26px;
}

.info-item strong {
    display: block;
    font-size: 22px;
}

.info-item span {
    display: block;
    font-size: 13px;
}


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

.premium-navbar {
    background: linear-gradient(
        90deg,
        #3b0075,
        #6916d4
    );

    min-height: 85px;

    border-top-left-radius: 90px;

    margin-left: -60px;

    padding-left: 90px;

    box-shadow: 0 15px 30px rgba(0, 0, 0, .18);
}

.navbar-nav {
    gap: 28px;
}

.nav-link {
    color: #fff !important;

    font-size: 17px;

    position: relative;

    transition: .3s;
}

.nav-link:hover {
    color: #FFD24B !important;
}

.nav-link.active::after {
    content: "";

    width: 40px;
    height: 3px;

    background: #FFD24B;

    position: absolute;

    left: 0;
    bottom: -10px;
}

.quote-btn {
    color: #fff;

    text-decoration: none;

    border: 2px solid #FFD24B;

    padding: 14px 35px;

    border-radius: 50px;

    transition: .3s;
}

.quote-btn:hover {
    background: #FFD24B;
    color: #32005d;
}


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

.hero-section {
    position: relative;

    margin-top: -40px;

    padding-top: 80px;

    height: 500px;

    background: url(images/hero_bg.png);

    background-size: cover;

    background-position: center;
}

.hero-content {
    position: relative;

    z-index: 2;

    height: 30px;
}

.hero-content h1 {
    font-size: 51px;

    font-weight: 700;

    line-height: 1.08;

    font-family: Georgia, serif;

    color: #fff;
}

.hero-content h1 span {
    display: block;

    color: #f4bf4f;
}

.hero-content p {
    margin-top: 30px;

    color: #fff;

    font-size: 20px;

    line-height: 1.6;

    max-width: 650px;
}

.hero-btn {
    margin-top: 45px;

    display: flex;

    gap: 25px;
}

.btn1 {
    background: linear-gradient(
        90deg,
        #7f1fff,
        #9f39ff
    );

    padding: 20px 38px;

    border-radius: 60px;

    color: #fff;

    font-size: 20px;

    text-decoration: none;

    font-weight: 600;

    box-shadow: 0 15px 35px rgba(0, 0, 0, .3);

    transition: .3s;
}

.btn1:hover {
    transform: translateY(-4px);
    color: #fff;
}

.btn2 {
    padding: 18px 38px;

    border: 2px solid #fff;

    border-radius: 60px;

    color: #fff;

    font-size: 20px;

    text-decoration: none;

    font-weight: 600;

    transition: .3s;
}

.btn2:hover {
    background: #fff;
    color: #5518c4;
}

.hero-btn i {
    margin-left: 10px;
    font-size: 22px;
}


/* ==========================================
   PREMIUM STATISTICS
========================================== */

.stats-section {
    width: 100%;

    padding: 20px 15px;

    position: relative;

    z-index: 10;
}

.stats-wrapper {
    width: 100%;

    max-width: 1280px;

    margin: auto;

    min-height: 145px;

    background: #fff;

    border: 1px solid #d3cfdd;

    border-radius: 28px;

    box-shadow:
        0 3px 15px rgba(64, 19, 143, 0.08);

    display: flex;

    align-items: center;

    overflow: hidden;
    margin-top: -70px;
}


/* ==========================================
   STAT ITEM
========================================== */

.stat-item {
    flex: 1;

    height: 80px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 22px;

    position: relative;

    padding: 10px 20px;
}


/* Vertical separator */

.stat-item:not(:last-child)::after {
    content: "";

    position: absolute;

    right: 0;

    top: 5px;

    width: 1px;

    height: 70px;

    background: #e8e3ed;
}


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

.stat-icon {
    width: 60px;

    min-width: 60px;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    /* IMPORTANT */
    color: #40138f !important;

    font-size: 45px;

    line-height: 1;
}

.stat-icon i {
    color: #40138f !important;
}


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

.stat-content {
    display: flex;

    flex-direction: column;

    justify-content: center;
}


/* Number */

.stat-number {
    color: #40138f !important;

    font-size: 32px;

    font-weight: 700;

    line-height: 1.1;

    margin-bottom: 7px;

    letter-spacing: -0.5px;
}


/* Title */

.stat-title {
    color: #111;

    font-size: 14px;

    font-weight: 500;

    line-height: 1.2;

    white-space: nowrap;
}


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

@media (max-width: 991px) {

    .stats-wrapper {
        min-height: auto;

        padding: 20px 10px;

        flex-wrap: wrap;
    }

    .stat-item {
        flex: 0 0 50%;

        height: 95px;

        justify-content: flex-start;

        padding-left: 35px;
    }

    .stat-item:nth-child(2)::after {
        display: none;
    }

    .stat-item:nth-child(1),
    .stat-item:nth-child(2) {
        border-bottom: 1px solid #e8e3ed;
    }

    .stat-icon {
        width: 52px;

        min-width: 52px;

        font-size: 38px;
    }

    .stat-icon i {
        color: #40138f !important;
    }

    .stat-number {
        font-size: 28px;
    }

    .stat-title {
        font-size: 13px;
    }

    .hero-section {
        height: auto;

        padding: 100px 0;
    }

    .hero-content {
        height: auto;
    }

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

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

    .hero-btn {
        flex-direction: column;
    }
}


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

@media (max-width: 575px) {

    .stats-section {
        padding: 10px;
    }

    .stats-wrapper {
        border-radius: 20px;

        padding: 10px 15px;
    }

    .stat-item {
        flex: 0 0 100%;

        height: 90px;

        padding: 10px 15px;

        justify-content: flex-start;

        border-bottom: 1px solid #eee;
    }

    .stat-item:last-child {
        border-bottom: none;
    }

    .stat-item::after {
        display: none !important;
    }

    .stat-icon {
        width: 50px;

        min-width: 50px;

        font-size: 36px;
    }

    .stat-icon i {
        color: #40138f !important;
    }

    .stat-number {
        font-size: 27px;

        margin-bottom: 5px;
    }

    .stat-title {
        font-size: 13px;
    }
}
/* =====================================================
   METROLITE PREMIUM ABOUT
===================================================== */

:root {

    --metro-purple: #40138f;
    --metro-purple-dark: #2d086b;

    --metro-purple-light: #7f1fff;
    --metro-purple-soft: #9f39ff;

    --metro-gold: #f4bf4f;
    --metro-gold-light: #ffd978;

    --metro-white: #ffffff;

    --metro-dark: #17122b;

    --metro-text: #4d4a58;

    --metro-border: #eeeaf5;

}


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

.metrolite-about {

    position: relative;

    padding-bottom: 20px;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 85% 15%,
            rgba(159,57,255,.08),
            transparent 30%
        ),

        radial-gradient(
            circle at 5% 80%,
            rgba(244,191,79,.08),
            transparent 25%
        ),

        #ffffff;

}


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

.about-bg-circle {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

}


.about-bg-circle-1 {

    width: 550px;

    height: 550px;

    left: -400px;

    top: 100px;

    border: 100px solid rgba(64,19,143,.035);

}


.about-bg-circle-2 {

    width: 450px;

    height: 450px;

    right: -320px;

    bottom: -200px;

    border: 90px solid rgba(244,191,79,.08);

}


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

.about-grid-pattern {

    position: absolute;

    width: 300px;

    height: 300px;

    right: 2%;

    top: 30px;

    opacity: .35;

    background-image:

        radial-gradient(
            rgba(64,19,143,.18) 1px,
            transparent 1px
        );

    background-size: 14px 14px;

    mask-image:
        linear-gradient(
            135deg,
            transparent,
            black
        );

}


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

.about-content {

    position: relative;

    z-index: 5;

}


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



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

.about-label {

    display: flex;

    align-items: center;

    gap: 9px;

    color: var(--metro-purple);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2.5px;

    margin-bottom: 16px;

}


.label-line {

    width: 40px;

    height: 3px;

    border-radius: 10px;

    background:

        linear-gradient(
            90deg,
            var(--metro-purple),
            var(--metro-purple-light)
        );

}


.small-line {

    width: 18px;

}


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

.about-title {

    margin: 0 0 25px;

    color: var(--metro-purple-dark);

    font-family: Georgia, serif;

    font-size: 54px;

    line-height: 1.08;

    font-weight: 700;

    letter-spacing: -1px;

}


.about-title span {

    display: block;

    background:

        linear-gradient(
            90deg,
            var(--metro-purple),
            var(--metro-purple-light)
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}


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

.about-description {

    max-width: 650px;

    margin-bottom: 15px;

    color: var(--metro-text);

    font-size: 15px;

    line-height: 1.85;

}


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

.about-features {

    display: grid;

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

    gap: 14px;

    margin-top: 30px;

    margin-bottom: 30px;

}


.about-feature {

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 14px;

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

    border-radius: 15px;

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

    box-shadow:
        0 7px 25px rgba(64,19,143,.04);

    transition: .35s ease;

}


.about-feature:hover {

    transform: translateY(-5px);

    border-color:

        rgba(64,19,143,.20);

    box-shadow:

        0 18px 40px
        rgba(64,19,143,.10);

}


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

.feature-icon {

    width: 46px;

    min-width: 46px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    color: var(--metro-purple);

    background:

        linear-gradient(
            135deg,
            rgba(64,19,143,.10),
            rgba(159,57,255,.14)
        );

    font-size: 18px;

    transition: .3s;

}


.about-feature:hover .feature-icon {

    color: #fff;

    background:

        linear-gradient(
            135deg,
            var(--metro-purple),
            var(--metro-purple-light)
        );

}


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

.feature-text h5 {

    margin: 0 0 3px;

    color: var(--metro-purple-dark);

    font-size: 14px;

    font-weight: 700;

}


.feature-text p {

    margin: 0;

    color: #888492;

    font-size: 11px;

}


/* =====================================================
   ACTION
===================================================== */

.about-action {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 22px;

}


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

.about-btn {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 15px 27px;

    border-radius: 50px;

    color: #fff;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    background:

        linear-gradient(
            90deg,
            var(--metro-purple),
            var(--metro-purple-light)
        );

    box-shadow:

        0 12px 30px
        rgba(64,19,143,.25);

    transition: .35s;

}


.about-btn:hover {

    color: #fff;

    transform: translateY(-4px);

    background:

        linear-gradient(
            90deg,
            var(--metro-purple-light),
            var(--metro-purple-soft)
        );

    box-shadow:

        0 17px 35px
        rgba(127,31,255,.30);

}


.about-btn i {

    transition: .3s;

}


.about-btn:hover i {

    transform: translateX(5px);

}


/* =====================================================
   MINI INFO
===================================================== */

.about-mini-info {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #6e6979;

    font-size: 12px;

}


.about-mini-info i {

    color: var(--metro-gold);

    font-size: 17px;

}


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

.about-visual {

    position: relative;

    min-height: 600px;

    z-index: 3;

}


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

.about-main-image {

    position: absolute;

    top: 30px;

    right: 5%;

    width: 78%;

    height: 510px;

    overflow: hidden;

    border-radius: 35px;

    border: 9px solid #fff;

    background: #eee;

    transform: rotate(2deg);

    box-shadow:

        0 25px 70px
        rgba(39,19,74,.20);

}


.about-main-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform .8s ease;

}


.about-main-image:hover img {

    transform: scale(1.08);

}


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

.image-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            180deg,
            transparent 50%,
            rgba(25,8,55,.72)
        );

}


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

.image-caption {

    position: absolute;

    left: 25px;

    right: 25px;

    bottom: 25px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 14px 17px;

    border-radius: 15px;

    background:

        rgba(255,255,255,.95);

    backdrop-filter: blur(10px);

}


.caption-icon {

    width: 42px;

    height: 42px;

    min-width: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    color: var(--metro-purple);

    background:

        rgba(244,191,79,.20);

}


.image-caption strong {

    display: block;

    color: var(--metro-purple-dark);

    font-size: 13px;

}


.image-caption span {

    display: block;

    margin-top: 3px;

    color: #817d88;

    font-size: 10px;

}


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

.premium-badge {

    position: absolute;

    top: 0;

    right: -5px;

    z-index: 10;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 11px 18px 11px 11px;

    border-radius: 50px;

    background: #fff;

    box-shadow:

        0 15px 40px
        rgba(0,0,0,.15);

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

}


.badge-icon {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: var(--metro-purple);

    background:

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

}


.badge-content strong {

    display: block;

    color: var(--metro-purple-dark);

    font-size: 13px;

}


.badge-content span {

    display: block;

    color: #888;

    font-size: 10px;

}


/* =====================================================
   QUALITY CIRCLE
===================================================== */

.quality-circle {

    position: absolute;

    left: 0;

    bottom: 55px;

    z-index: 10;

    width: 155px;

    height: 155px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    border: 9px solid #fff;

    background:

        linear-gradient(
            145deg,
            var(--metro-purple),
            var(--metro-purple-light)
        );

    box-shadow:

        0 18px 45px
        rgba(64,19,143,.30);

}


.quality-circle-inner {

    width: 105px;

    height: 105px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    border-radius: 50%;

    border: 2px dashed var(--metro-gold);

    color: #fff;

}


.quality-circle-inner i {

    margin-bottom: 3px;

    color: var(--metro-gold);

    font-size: 18px;

}


.quality-circle-inner strong {

    font-size: 22px;

    line-height: 1;

}


.quality-circle-inner small {

    margin-top: 5px;

    color: #fff;

    font-size: 8px;

    letter-spacing: 2px;

}


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

.fresh-card {

    position: absolute;

    right: 0;

    bottom: 20px;

    z-index: 11;

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 230px;

    padding: 13px 15px;

    border-left: 4px solid var(--metro-gold);

    border-radius: 15px;

    background: #fff;

    box-shadow:

        0 18px 45px
        rgba(0,0,0,.15);

}


.fresh-icon {

    width: 42px;

    min-width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    color: var(--metro-purple);

    background:

        rgba(64,19,143,.08);

}


.fresh-content {

    flex: 1;

}


.fresh-content strong {

    display: block;

    color: var(--metro-purple-dark);

    font-size: 12px;

}


.fresh-content span {

    display: block;

    margin-top: 3px;

    color: #8b8792;

    font-size: 9px;

}


.fresh-check {

    width: 25px;

    height: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #fff;

    background: var(--metro-gold);

    font-size: 11px;

}


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

@keyframes premiumFloat {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-8px);

    }

}


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

@media(max-width: 991px) {

    .metrolite-about {

        padding: 80px 0;

    }


    .about-title {

        font-size: 44px;

    }


    .about-visual {

        min-height: 560px;

        margin-top: 25px;

    }


    .about-main-image {

        width: 82%;

        height: 470px;

        right: 7%;

    }

}


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

@media(max-width: 575px) {

    .metrolite-about {

        padding: 60px 0;

    }


    .about-logo {

        padding: 11px 18px;

    }


    .about-logo img {

        width: 125px;

    }


    .about-label {

        font-size: 11px;

        letter-spacing: 1.8px;

    }


    .about-title {

        font-size: 34px;

        letter-spacing: -.5px;

    }


    .about-description {

        font-size: 13px;

        line-height: 1.75;

    }


    .about-features {

        grid-template-columns: 1fr;

        gap: 10px;

    }


    .about-action {

        align-items: flex-start;

        flex-direction: column;

        gap: 15px;

    }


    .about-visual {

        min-height: 455px;

        margin-top: 20px;

    }


    .about-main-image {

        top: 25px;

        right: 4%;

        width: 88%;

        height: 380px;

        border-width: 6px;

        border-radius: 25px;

    }


    .premium-badge {

        right: -2px;

        padding: 8px 12px 8px 8px;

    }


    .badge-icon {

        width: 35px;

        height: 35px;

    }


    .quality-circle {

        width: 115px;

        height: 115px;

        left: -5px;

        bottom: 40px;

        border-width: 6px;

    }


    .quality-circle-inner {

        width: 78px;

        height: 78px;

    }


    .quality-circle-inner strong {

        font-size: 17px;

    }


    .quality-circle-inner small {

        font-size: 6px;

    }


    .fresh-card {

        right: -5px;

        bottom: 5px;

        min-width: 205px;

        padding: 10px 12px;

    }

}

/* =========================================================
   METROLITE PREMIUM PURPOSE
========================================================= */

:root{

    --purple-dark:#32106f;
    --purple:#721cff;
    --purple-light:#9b42ff;

    --gold:#f4bd4f;
    --gold-light:#ffd978;

    --bg:#faf8ff;

    --heading:#24152f;
    --text:#6f6578;

    --white:#ffffff;

}


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

.mp-section{

    position:relative;
    overflow:hidden;

    padding-top: 20px;

    background:

        radial-gradient(
            circle at 0% 10%,
            rgba(114,28,255,.09),
            transparent 25%
        ),

        radial-gradient(
            circle at 100% 90%,
            rgba(244,189,79,.12),
            transparent 24%
        ),

        var(--bg);

    font-family:'DM Sans',sans-serif;

    color:var(--heading);

}


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

.mp-bg-ring{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

}

.mp-ring-1{

    width:600px;
    height:600px;

    top:-360px;
    left:-360px;

    border:1px solid rgba(114,28,255,.10);

}

.mp-ring-2{

    width:450px;
    height:450px;

    right:-300px;
    bottom:-260px;

    border:1px solid rgba(244,189,79,.18);

}

.mp-ring-3{

    width:180px;
    height:180px;

    right:12%;
    top:35%;

    border:1px dashed rgba(114,28,255,.08);

}


/* =========================================================
   DOTS
========================================================= */

.mp-dots{

    position:absolute;

    width:110px;
    height:110px;

    background-image:
        radial-gradient(
            var(--purple) 1px,
            transparent 1px
        );

    background-size:12px 12px;

    opacity:.12;

}

.mp-dots-1{

    top:100px;
    right:6%;

}

.mp-dots-2{

    bottom:100px;
    left:5%;

}


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

.mp-section .container{

    position:relative;

    z-index:2;

}


/* =========================================================
   INTRO
========================================================= */

.mp-intro{

    max-width:850px;

    margin:0 auto 70px;

    text-align:center;

}


.mp-eyebrow{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-bottom:20px;

    color:var(--purple);

    font-size:12px;

    font-weight:800;

    letter-spacing:3px;

    text-transform:uppercase;

}

.mp-eyebrow::before,
.mp-eyebrow::after{

    content:"";

    width:35px;

    height:1px;

    background:var(--gold);

}


.mp-intro h2{

    margin:0 0 24px;

    font-family:'Playfair Display',serif;

    font-size:clamp(44px,6vw,72px);

    line-height:1.05;

    letter-spacing:-2px;

    font-weight:800;

    color:var(--purple-dark);

}

.mp-intro h2 span{

    color:var(--purple);

    position:relative;

}

.mp-intro h2 span::after{

    content:"";

    position:absolute;

    left:4px;
    right:4px;

    bottom:-8px;

    height:5px;

    border-radius:50%;

    background:var(--gold);

}


.mp-intro p{

    max-width:720px;

    margin:auto;

    color:var(--text);

    font-size:15px;

    line-height:1.9;

}


/* =========================================================
   VISION MAIN
========================================================= */

.mp-vision{

    position:relative;

    overflow:hidden;

    min-height:560px;

    border-radius:38px;

    background:

        linear-gradient(
            135deg,
            #2d0d65,
            #42118e 48%,
            #711cff
        );

    box-shadow:

        0 35px 90px rgba(50,16,111,.20);

    transition:transform .4s ease;

}


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

.mp-vision-content{

    position:relative;

    z-index:4;

    height:100%;

    min-height:560px;

    padding:58px 45px 58px 60px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}


.mp-vision-label{

    display:flex;

    align-items:center;

    gap:13px;

    margin-bottom:28px;

}


.mp-vision-icon{

    width:54px;
    height:54px;

    display:flex;

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

    border-radius:17px;

    color:var(--gold);

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

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

    font-size:24px;

    backdrop-filter:blur(10px);

}


.mp-vision-label span{

    color:#fff;

    font-size:12px;

    font-weight:800;

    letter-spacing:3px;

    text-transform:uppercase;

}


.mp-vision h3{

    margin:0 0 23px;

    max-width:620px;

    color:#fff;

    font-family:'Playfair Display',serif;

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

    line-height:1.07;

    font-weight:800;

    letter-spacing:-1px;

}


.mp-vision h3 span{

    color:var(--gold);

}


.mp-vision-description{

    max-width:590px;

    margin:0 0 30px;

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

    font-size:15px;

    line-height:1.85;

}


/* =========================================================
   VISION ANIMATED AREA
========================================================= */

.mp-vision-orbit-area{

    position:relative;

    min-height:560px;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

}


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

.mp-vision-glow{

    position:absolute;

    width:310px;
    height:310px;

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(244,189,79,.28),
            rgba(114,28,255,.12) 45%,
            transparent 72%
        );

    filter:blur(3px);

    animation:

        visionGlow 4s ease-in-out infinite;

}


@keyframes visionGlow{

    0%,
    100%{

        transform:scale(.92);

        opacity:.7;

    }

    50%{

        transform:scale(1.08);

        opacity:1;

    }

}


/* =========================================================
   ORBIT RINGS
========================================================= */

.mp-orbit-ring{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

}


.mp-orbit-ring-1{

    width:370px;
    height:370px;

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

    animation:

        orbitRotate 22s linear infinite;

}


.mp-orbit-ring-2{

    width:455px;
    height:455px;

    border:1px dashed rgba(244,189,79,.22);

    animation:

        orbitRotateReverse 30s linear infinite;

}


.mp-orbit-ring-3{

    width:285px;
    height:285px;

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

}


@keyframes orbitRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


@keyframes orbitRotateReverse{

    from{

        transform:rotate(360deg);

    }

    to{

        transform:rotate(0deg);

    }

}


/* =========================================================
   CENTER VISION CIRCLE
========================================================= */

.mp-vision-center{

    position:relative;

    z-index:10;

    width:185px;
    height:185px;

    border-radius:50%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    background:

        linear-gradient(
            145deg,
            #ffffff,
            #f5edff
        );

    border:7px solid rgba(255,255,255,.20);

    box-shadow:

        0 0 0 10px rgba(244,189,79,.07),

        0 20px 65px rgba(0,0,0,.30),

        inset 0 0 35px rgba(114,28,255,.08);

    animation:

        centerPulse 4s ease-in-out infinite;

}


@keyframes centerPulse{

    0%,
    100%{

        transform:scale(1);

        box-shadow:
            0 0 0 10px rgba(244,189,79,.07),
            0 20px 65px rgba(0,0,0,.30),
            inset 0 0 35px rgba(114,28,255,.08);

    }

    50%{

        transform:scale(1.035);

        box-shadow:
            0 0 0 18px rgba(244,189,79,.05),
            0 25px 75px rgba(0,0,0,.35),
            inset 0 0 45px rgba(114,28,255,.12);

    }

}


.mp-vision-center i{

    color:var(--purple);

    font-size:34px;

    margin-bottom:8px;

}


.mp-vision-center strong{

    color:var(--purple-dark);

    font-family:'Playfair Display',serif;

    font-size:32px;

    line-height:1;

    font-weight:800;

}


.mp-vision-center small{

    margin-top:8px;

    color:#7b6d89;

    font-size:9px;

    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;

}


/* =========================================================
   FLOATING TEXT BOXES
========================================================= */

.mp-orbit-card{

    position:absolute;

    z-index:20;

    display:flex;

    align-items:center;

    gap:10px;

    min-width:150px;

    padding:11px 14px;

    border-radius:15px;

    color:#fff;

    background:

        rgba(255,255,255,.10);

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

    box-shadow:

        0 15px 35px rgba(0,0,0,.15);

    backdrop-filter:blur(15px);

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

    transition:.35s ease;

}


.mp-orbit-card i{

    width:32px;
    height:32px;

    min-width:32px;

    display:flex;

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

    border-radius:10px;

    color:var(--purple-dark);

    background:var(--gold);

    font-size:14px;

}


.mp-orbit-card span{

    font-size:11px;

    font-weight:800;

    line-height:1.25;

}


.mp-orbit-card:hover{

    transform:translateY(-6px) scale(1.04);

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

    border-color:rgba(244,189,79,.45);

}


/* =========================================================
   CARD POSITIONS + ANIMATIONS
========================================================= */

.mp-card-1{

    top:15%;

    left:2%;

    animation:
        floatOne 4.5s ease-in-out infinite;

}


.mp-card-2{

    top:7%;

    right:0%;

    animation:
        floatTwo 5s ease-in-out infinite;

}


.mp-card-3{

    bottom:13%;

    right:1%;

    animation:
        floatThree 4.7s ease-in-out infinite;

}


.mp-card-4{

    bottom:4%;

    left:5%;

    animation:
        floatFour 5.2s ease-in-out infinite;

}


.mp-card-5{

    top:48%;

    left:-2%;

    animation:
        floatFive 4.3s ease-in-out infinite;

}


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

@keyframes floatOne{

    0%,
    100%{

        transform:translateY(0) rotate(-2deg);

    }

    50%{

        transform:translateY(-14px) rotate(1deg);

    }

}


@keyframes floatTwo{

    0%,
    100%{

        transform:translateY(0) rotate(2deg);

    }

    50%{

        transform:translateY(13px) rotate(-1deg);

    }

}


@keyframes floatThree{

    0%,
    100%{

        transform:translateY(0) rotate(-1deg);

    }

    50%{

        transform:translateY(-12px) rotate(2deg);

    }

}


@keyframes floatFour{

    0%,
    100%{

        transform:translateY(0) rotate(1deg);

    }

    50%{

        transform:translateY(12px) rotate(-2deg);

    }

}


@keyframes floatFive{

    0%,
    100%{

        transform:translateY(0) scale(1);

    }

    50%{

        transform:translateY(-10px) scale(1.03);

    }

}


/* =========================================================
   CONNECTING DOTS
========================================================= */

.mp-orbit-dot{

    position:absolute;

    width:6px;
    height:6px;

    border-radius:50%;

    background:var(--gold);

    box-shadow:

        0 0 15px rgba(244,189,79,.8);

    animation:dotPulse 2s ease-in-out infinite;

}


.mp-dot-1{

    top:26%;
    left:18%;

}


.mp-dot-2{

    top:24%;
    right:17%;

    animation-delay:.5s;

}


.mp-dot-3{

    bottom:26%;
    right:18%;

    animation-delay:1s;

}


.mp-dot-4{

    bottom:19%;
    left:23%;

    animation-delay:1.5s;

}


@keyframes dotPulse{

    0%,
    100%{

        transform:scale(.7);

        opacity:.5;

    }

    50%{

        transform:scale(1.4);

        opacity:1;

    }

}


/* =========================================================
   PRINCIPLES
========================================================= */

.mp-principles{

    display:flex;

    flex-wrap:wrap;

    gap:9px;

}


.mp-principle{

    display:flex;

    align-items:center;

    gap:8px;

    padding:9px 13px;

    border-radius:100px;

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

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

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

    font-size:13px;

    font-weight:600;

    transition:.3s ease;

}


.mp-principle i{

    color:var(--gold);

}


.mp-principle:hover{

    transform:translateY(-3px);

    background:rgba(244,189,79,.14);

    border-color:rgba(244,189,79,.35);

}


/* =========================================================
   AIMS
========================================================= */

.mp-aims{

    position:relative;

    margin:35px 35px 0;

    padding:38px 42px;

    border-radius:30px;

    background:#fff;

    border:1px solid rgba(50,16,111,.07);

    box-shadow:

        0 25px 70px rgba(50,16,111,.11);

    z-index:5;

}


.mp-aims-header{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:30px;

}


.mp-aims-icon{

    width:50px;
    height:50px;

    display:flex;

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

    border-radius:16px;

    color:#fff;

    background:

        linear-gradient(
            135deg,
            var(--purple),
            var(--purple-light)
        );

    font-size:22px;

    box-shadow:

        0 12px 28px rgba(114,28,255,.22);

}


.mp-aims-header h3{

    margin:0;

    color:var(--purple-dark);

    font-family:'Playfair Display',serif;

    font-size:32px;

    font-weight:800;

}


.mp-aims-header h3 span{

    color:var(--purple);

}


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

.mp-aim-grid{

    display:grid;

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

}


.mp-aim-item{

    padding:12px 25px;

    border-right:1px solid #eee9f5;

    transition:.35s ease;

}


.mp-aim-item:first-child{

    padding-left:0;

}


.mp-aim-item:last-child{

    border-right:0;

}


.mp-aim-item:hover{

    transform:translateY(-5px);

}


.mp-aim-number{

    display:block;

    margin-bottom:14px;

    color:var(--gold);

    font-family:'Playfair Display',serif;

    font-size:32px;

    font-weight:800;

    line-height:1;

    transition:.3s ease;

}


.mp-aim-item:hover .mp-aim-number{

    color:var(--purple);

}


.mp-aim-item h4{

    margin:0 0 9px;

    color:#30213b;

    font-size:14px;

    line-height:1.4;

    font-weight:800;

}


.mp-aim-item p{

    margin:0;

    color:#766b80;

    font-size:13px;

    line-height:1.75;

}


/* =========================================================
   CLEAR VISION
========================================================= */

.mp-clear-vision{

    margin-top:28px;

    padding:30px 35px;

    border-radius:26px;

    background:

        linear-gradient(
            135deg,
            #ffffff,
            #faf7ff
        );

    border:1px solid rgba(114,28,255,.09);

    box-shadow:

        0 20px 55px rgba(50,16,111,.07);

}


.mp-clear-header{

    text-align:center;

    margin-bottom:25px;

}


.mp-clear-header .small-title{

    display:block;

    margin-bottom:5px;

    color:var(--gold);

    font-size:11px;

    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;

}


.mp-clear-header h3{

    margin:0;

    color:var(--purple-dark);

    font-family:'Playfair Display',serif;

    font-size:29px;

    font-weight:800;

}


.mp-clear-header h3 span{

    color:var(--purple);

}


.mp-clear-grid{

    display:grid;

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

    gap:16px;

}


.mp-clear-card{

    display:flex;

    align-items:center;

    gap:14px;

    padding:17px 18px;

    border-radius:17px;

    background:#fff;

    border:1px solid #eee9f5;

    transition:.35s ease;

}


.mp-clear-card:hover{

    transform:translateY(-5px);

    border-color:rgba(114,28,255,.18);

    box-shadow:

        0 15px 35px rgba(50,16,111,.08);

}


.mp-clear-icon{

    width:44px;
    height:44px;

    min-width:44px;

    display:flex;

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

    border-radius:14px;

    color:var(--purple);

    background:#f4edff;

    font-size:20px;

    transition:.3s ease;

}


.mp-clear-card:hover .mp-clear-icon{

    color:#fff;

    background:

        linear-gradient(
            135deg,
            var(--purple),
            var(--purple-light)
        );

}


.mp-clear-card h4{

    margin:0 0 3px;

    color:#2f203a;

    font-size:14px;

    font-weight:800;

}


.mp-clear-card p{

    margin:0;

    color:#80758a;

    font-size:13px;

    line-height:1.5;

}


/* =========================================================
   MISSION + VALUES
========================================================= */

.mp-bottom{

    margin-top:55px;

}


/* =========================================================
   MISSION
========================================================= */

.mp-mission{

    position:relative;

    height:100%;

    padding:45px;

    overflow:hidden;

    border-radius:32px;

    background:#fff;

    border:1px solid rgba(50,16,111,.07);

    box-shadow:

        0 25px 70px rgba(50,16,111,.08);

}


.mp-mission::before{

    content:"";

    position:absolute;

    left:0;

    top:40px;

    bottom:40px;

    width:4px;

    border-radius:0 10px 10px 0;

    background:

        linear-gradient(
            180deg,
            var(--gold),
            var(--purple)
        );

}


.mp-mission-icon{

    width:58px;
    height:58px;

    display:flex;

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

    margin-bottom:22px;

    border-radius:17px;

    color:var(--gold);

    background:

        linear-gradient(
            135deg,
            var(--purple-dark),
            var(--purple)
        );

    font-size:25px;

}


.mp-mission h3{

    margin:0 0 18px;

    color:var(--purple-dark);

    font-family:'Playfair Display',serif;

    font-size:39px;

    font-weight:800;

}


.mp-mission h3 span{

    color:var(--purple);

}


.mp-mission-description{

    color:var(--text);

    font-size:15px;

    line-height:1.85;

    margin-bottom:25px;

}


.mp-mission-points{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;

}


.mp-mission-point{

    display:flex;

    align-items:center;

    gap:8px;

    padding:11px;

    border-radius:13px;

    background:#faf8ff;

    border:1px solid #eee8f5;

    color:#51465d;

    font-size:13px;

    font-weight:700;

}


.mp-mission-point i{

    color:var(--gold);

    font-size:15px;

}


/* =========================================================
   VALUES
========================================================= */

.mp-values{

    height:100%;

    padding:45px;

    border-radius:32px;

    color:#fff;

    background:

        linear-gradient(
            135deg,
            #2c0d62,
            #42118f 48%,
            #6818c7
        );

    box-shadow:

        0 30px 75px rgba(50,16,111,.20);

}


.mp-values-header{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:25px;

}


.mp-values-icon{

    width:58px;
    height:58px;

    display:flex;

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

    border-radius:17px;

    background:var(--gold);

    color:var(--purple-dark);

    font-size:24px;

}


.mp-values h3{

    margin:0;

    font-family:'Playfair Display',serif;

    font-size:33px;

    font-weight:800;

}


.mp-value{

    display:flex;

    gap:13px;

    padding:12px 0;

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

}


.mp-value:last-child{

    border-bottom:0;

}


.mp-value-icon{

    width:34px;
    height:34px;

    min-width:34px;

    display:flex;

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

    border-radius:10px;

    color:var(--gold);

    background:rgba(244,189,79,.11);

    font-size:13px;

}


.mp-value h4{

    margin:0 0 3px;

    color:#fff;

    font-size:13px;

    font-weight:800;

}


.mp-value p{

    margin:0;

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

    font-size:12px;

    line-height:1.55;

}


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

.mp-brand-line{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    margin-top:60px;

}


.mp-line{

    width:70px;

    height:1px;

    background:var(--gold);

}


.mp-brand-line span{

    color:var(--purple-dark);

    font-size:11px;

    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;

}


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

.mp-reveal{

    opacity:0;

    transform:translateY(35px);

    transition:

        opacity .8s ease,

        transform .8s cubic-bezier(.2,.7,.2,1);

}


.mp-reveal.active{

    opacity:1;

    transform:translateY(0);

}


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

@media(max-width:991px){

    .mp-section{

        padding:85px 0;

    }


    .mp-vision-content{

        padding:45px;

        min-height:auto;

    }


    .mp-vision-orbit-area{

        min-height:560px;

    }


    .mp-aims{

        margin:28px 0 0;

    }


    .mp-aim-grid{

        grid-template-columns:1fr 1fr;

        gap:20px;

    }


    .mp-aim-item{

        padding:15px;

        border-right:0;

        border-bottom:1px solid #eee9f5;

    }


    .mp-aim-item:nth-child(odd){

        border-right:1px solid #eee9f5;

    }


    .mp-aim-item:nth-last-child(-n+2){

        border-bottom:0;

    }


    .mp-clear-grid{

        grid-template-columns:1fr;

    }

}


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

@media(max-width:767px){

    .mp-section{

        padding:65px 15px 75px;

    }


    .mp-intro{

        margin-bottom:40px;

    }


    .mp-intro h2{

        font-size:39px;

        letter-spacing:-1px;

    }


    .mp-intro p{

        font-size:14px;

    }


    .mp-vision{

        border-radius:27px;

    }


    .mp-vision-content{

        padding:32px 24px;

    }


    .mp-vision h3{

        font-size:34px;

    }


    .mp-vision-description{

        font-size:14px;

    }


    .mp-principles{

        gap:7px;

    }


    .mp-principle{

        font-size:12px;

    }


    /* -----------------------------------------
       MOBILE ORBIT
    ----------------------------------------- */

    .mp-vision-orbit-area{

        min-height:470px;

    }


    .mp-orbit-ring-1{

        width:280px;
        height:280px;

    }


    .mp-orbit-ring-2{

        width:350px;
        height:350px;

    }


    .mp-orbit-ring-3{

        width:220px;
        height:220px;

    }


    .mp-vision-glow{

        width:250px;
        height:250px;

    }


    .mp-vision-center{

        width:145px;
        height:145px;

    }


    .mp-vision-center i{

        font-size:26px;

    }


    .mp-vision-center strong{

        font-size:25px;

    }


    .mp-vision-center small{

        font-size:7px;

    }


    .mp-orbit-card{

        min-width:auto;

        max-width:145px;

        padding:8px 10px;

        gap:7px;

    }


    .mp-orbit-card i{

        width:27px;
        height:27px;

        min-width:27px;

        font-size:11px;

    }


    .mp-orbit-card span{

        font-size:9px;

    }


    .mp-card-1{

        top:7%;

        left:2%;

    }


    .mp-card-2{

        top:7%;

        right:2%;

    }


    .mp-card-3{

        bottom:7%;

        right:2%;

    }


    .mp-card-4{

        bottom:5%;

        left:2%;

    }


    .mp-card-5{

        top:43%;

        left:-2%;

    }


    .mp-dot-1{

        left:20%;

    }


    .mp-dot-2{

        right:20%;

    }


    .mp-dot-3{

        right:20%;

    }


    .mp-dot-4{

        left:20%;

    }


    /* -----------------------------------------
       AIMS
    ----------------------------------------- */

    .mp-aims{

        padding:28px 22px;

        border-radius:24px;

    }


    .mp-aim-grid{

        grid-template-columns:1fr;

        gap:0;

    }


    .mp-aim-item,
    .mp-aim-item:nth-child(odd){

        padding:17px 0;

        border-right:0;

        border-bottom:1px solid #eee9f5;

    }


    .mp-aim-item:last-child{

        border-bottom:0;

    }


    /* -----------------------------------------
       CLEAR VISION
    ----------------------------------------- */

    .mp-clear-vision{

        padding:25px 20px;

    }


    .mp-clear-grid{

        grid-template-columns:1fr;

    }


    .mp-clear-header h3{

        font-size:26px;

    }


    /* -----------------------------------------
       MISSION
    ----------------------------------------- */

    .mp-mission,
    .mp-values{

        padding:32px 24px;

        border-radius:27px;

    }


    .mp-mission h3{

        font-size:32px;

    }


    .mp-mission-description{

        font-size:14px;

    }


    .mp-mission-points{

        grid-template-columns:1fr;

    }


    .mp-values h3{

        font-size:29px;

    }


    .mp-value h4{

        font-size:12px;

    }


    .mp-value p{

        font-size:11px;

    }


    .mp-brand-line{

        margin-top:45px;

    }


    .mp-brand-line span{

        font-size:9px;

        text-align:center;

    }


    .mp-line{

        width:35px;

    }

}


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

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

    *{

        animation:none !important;

        transition:none !important;

    }

}


/* =========================================
           GLOBAL
        ========================================= */

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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: "Poppins", sans-serif;
            background: #ffffff;
            color: #333333;
        }


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

        .industries-section {

            width: 100%;

            padding: 45px 20px 55px;

            background:
                radial-gradient(
                    circle at top center,
                    rgba(79, 22, 184, 0.035),
                    transparent 45%
                ),
                #ffffff;
        }


        .industries-container {

            width: 100%;

            max-width: 1500px;

            margin: 0 auto;
        }


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

        .small-heading {

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 12px;

            color: #5119b8;

            font-size: 14px;

            font-weight: 700;

            letter-spacing: 0.5px;

            margin-bottom: 5px;

            text-align: center;
        }


        .small-heading::before,
        .small-heading::after {

            content: "";

            width: 70px;

            height: 1px;

            background: #e5bb55;

            display: block;
        }


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

        .main-heading {

            margin: 0;

            text-align: center;

            color: #17234c;

            font-family:
                Georgia,
                "Times New Roman",
                serif;

            font-size: 30px;

            font-weight: 700;

            line-height: 1.3;
        }


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

        .heading-decoration {

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 10px;

            margin-top: 8px;

            margin-bottom: 35px;
        }


        .heading-decoration span {

            width: 48px;

            height: 2px;

            background: #e4b84e;

            display: block;
        }


        .heading-decoration i {

            color: #e4b84e;

            font-size: 17px;

            line-height: 1;
        }


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

        .industry-row {

            width: 100%;

            display: grid;

            grid-template-columns:
                repeat(5, minmax(0, 1fr));

            gap: 17px;

            align-items: stretch;
        }


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

        .industry-card {

            width: 100%;

            min-width: 0;

            background: #ffffff;

            border: 1px solid #e6e6eb;

            border-radius: 16px;

            overflow: hidden;

            min-height: 350px;

            box-shadow:
                0 4px 15px
                rgba(30, 20, 70, 0.07);

            transition:
                transform 0.3s ease,
                box-shadow 0.3s ease;
        }


        .industry-card:hover {

            transform: translateY(-7px);

            box-shadow:
                0 16px 35px
                rgba(50, 20, 100, 0.15);
        }


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

        .industry-image {

            width: 100%;

            height: 170px;

            overflow: hidden;

            border-radius:
                16px 16px 0 0;

            background: #eeeeee;
        }


        .industry-image img {

            width: 100%;

            height: 100%;

            display: block;

            object-fit: cover;

            object-position: center;

            transition:
                transform 0.5s ease;
        }


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

            transform: scale(1.06);
        }


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

        .industry-content {

            position: relative;

            width: 100%;

            background: #ffffff;

            text-align: center;

            padding:
                0 18px 25px;
        }


        /* =========================================
           ICON
           
           ICON IS NOW COMPLETELY SEPARATE
           FROM IMAGE.
        ========================================= */

        .industry-icon {

            position: relative;

            width: 64px;

            height: 64px;

            min-width: 64px;

            min-height: 64px;

            margin:
                -32px auto 15px;

            border-radius: 50%;

            background: #5117b9;

            border: 4px solid #ffffff;

            display: flex;

            align-items: center;

            justify-content: center;

            color: #ffffff;

            font-size: 27px;

            line-height: 1;

            z-index: 10;

            flex-shrink: 0;

            box-shadow:
                0 4px 12px
                rgba(30, 10, 70, 0.30);

            transition:
                transform 0.3s ease,
                box-shadow 0.3s ease;
        }


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

        .industry-card:hover
        .industry-icon {

            transform:
                translateY(-3px);

            box-shadow:
                0 7px 18px
                rgba(30, 10, 70, 0.35);
        }


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

        .industry-icon i {

            display: flex;

            align-items: center;

            justify-content: center;

            width: 100%;

            height: 100%;

            color: #ffffff;

            font-size: 27px;

            line-height: 1;

            margin: 0;

            padding: 0;
        }


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

        .industry-title {

            margin:
                0 0 10px;

            color: #5117b9;

            font-size: 15px;

            font-weight: 700;

            line-height: 1.4;

            text-align: center;
        }


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

        .industry-description {

            width: 100%;

            max-width: 190px;

            margin: 0 auto;

            color: #333333;

            font-size: 12.5px;

            font-weight: 400;

            line-height: 1.7;

            text-align: center;
        }


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

        @media (max-width: 1199px) {

            .industry-row {

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

                gap: 20px;
            }

        }


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

        @media (max-width: 991px) {

            .industries-section {

                padding:
                    40px 20px 50px;
            }


            .industry-row {

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

                gap: 20px;
            }


            .main-heading {

                font-size: 28px;
            }


            .industry-image {

                height: 180px;
            }

        }


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

        @media (max-width: 767px) {

            .industries-section {

                padding:
                    35px 18px 45px;
            }


            .small-heading {

                font-size: 12px;
            }


            .small-heading::before,
            .small-heading::after {

                width: 50px;
            }


            .main-heading {

                font-size: 26px;
            }


            .heading-decoration {

                margin-bottom: 30px;
            }


            .industry-row {

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

                gap: 16px;
            }


            .industry-image {

                height: 165px;
            }


            .industry-icon {

                width: 60px;

                height: 60px;

                min-width: 60px;

                min-height: 60px;

                margin:
                    -30px auto 13px;

                font-size: 25px;
            }


            .industry-icon i {

                font-size: 25px;
            }


            .industry-content {

                padding:
                    0 14px 20px;
            }


            .industry-title {

                font-size: 14px;
            }


            .industry-description {

                font-size: 12px;
            }

        }


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

        @media (max-width: 575px) {

            .industries-section {

                padding:
                    30px 15px 40px;
            }


            .small-heading {

                font-size: 11px;

                gap: 8px;
            }


            .small-heading::before,
            .small-heading::after {

                width: 35px;
            }


            .main-heading {

                font-size: 23px;

                line-height: 1.3;
            }


            .heading-decoration {

                gap: 8px;

                margin-top: 8px;

                margin-bottom: 28px;
            }


            .heading-decoration span {

                width: 40px;
            }


            .industry-row {

                grid-template-columns: 1fr;

                gap: 22px;
            }


            .industry-card {

                min-height: 350px;
            }


            .industry-image {

                height: 190px;
            }


            .industry-icon {

                width: 64px;

                height: 64px;

                min-width: 64px;

                min-height: 64px;

                margin:
                    -32px auto 15px;

                font-size: 27px;
            }


            .industry-icon i {

                font-size: 27px;
            }


            .industry-content {

                padding:
                    0 18px 25px;
            }


            .industry-title {

                font-size: 15px;

                margin-bottom: 10px;
            }


            .industry-description {

                max-width: 240px;

                font-size: 12.5px;

                line-height: 1.7;
            }

        }


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

        @media (max-width: 375px) {

            .main-heading {

                font-size: 21px;
            }


            .small-heading {

                font-size: 10px;
            }


            .small-heading::before,
            .small-heading::after {

                width: 28px;
            }


            .industry-image {

                height: 175px;
            }

        }


        :root{
    --purple:#4f16b8;
    --navy:#17234b;
    --gold:#e4b64d;
    --border:#e5e5eb;
}

*{box-sizing:border-box}

body{
    margin:0;
    background:#fff;
    color:#222;
    font-family:"Poppins",Arial,sans-serif;
}

.clients-section{
    padding:34px 20px 24px;
    background:linear-gradient(180deg,#fff 0%,#fcfcff 100%);
    
}

.clients-container{
    max-width:1200px;
    margin:auto;
}

.eyebrow{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    color:var(--purple);
    font-size:13px;
    font-weight:700;
    line-height:1;
    margin-bottom:6px;
}

.eyebrow:before,
.eyebrow:after{
    content:"";
    width:55px;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--gold));
}

.eyebrow:after{
    background:linear-gradient(90deg,var(--gold),transparent);
}

.section-title{
    margin:0;
    text-align:center;
    color:var(--navy);
    font-family:Georgia,"Times New Roman",serif;
    font-size:28px;
    font-weight:700;
    line-height:1.2;
}

.ornament{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin:7px 0 23px;
}

.ornament span{
    width:40px;
    height:2px;
    background:var(--gold);
}

.ornament i{
    color:var(--gold);
    font-size:15px;
}

.client-slider{
    position:relative;
    padding:0 46px;
}

.viewport{
    overflow:hidden;
    width:100%;
}

.track{
    display:flex;
    gap:14px;
    transition:transform .45s ease;
    will-change:transform;
}

.client-card{
    flex:0 0 calc((100% - 42px)/4);
    min-width:0;
    height:112px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:10px;
    overflow:hidden;
    display:flex;
    align-items:stretch;
    box-shadow:0 3px 10px rgba(20,20,50,.06);
    transition:transform .25s ease,box-shadow .25s ease;
}

.client-card:hover{
    transform:translateY(-4px);
    box-shadow:0 9px 22px rgba(30,15,80,.13);
}

.client-image{
    flex:0 0 43%;
    background:#f5f5f5;
    overflow:hidden;
}

.client-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.client-name{
    flex:1;
    display:flex;
    align-items:center;
    padding:10px 11px;
    background:#f0f0f0;
    color:#222;
    font-size:12px;
    font-weight:500;
    line-height:1.45;
}

.slider-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:38px;
    height:38px;
    border:1px solid #ddd;
    border-radius:50%;
    background:#fff;
    color:var(--purple);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:5;
    box-shadow:0 4px 14px rgba(25,10,70,.13);
    cursor:pointer;
    transition:.2s ease;
}

.slider-btn:hover{
    background:var(--purple);
    color:#fff;
    border-color:var(--purple);
}

.slider-btn:disabled{
    opacity:.35;
    cursor:not-allowed;
}

.slider-btn.prev{left:0}
.slider-btn.next{right:0}

.dots{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:7px;
    margin-top:17px;
    min-height:7px;
}

.dot{
    width:5px;
    height:5px;
    border-radius:50%;
    background:#d6cce8;
    cursor:pointer;
    transition:.25s ease;
}

.dot.active{
    width:25px;
    border-radius:8px;
    background:var(--purple);
}

@media(max-width:1100px){
    .client-card{
        flex-basis:calc((100% - 28px)/3);
    }
}

@media(max-width:767px){
    .clients-section{
        padding:28px 15px 22px;
    }

    .section-title{
        font-size:24px;
    }

    .eyebrow{
        font-size:11px;
    }

    .eyebrow:before,
    .eyebrow:after{
        width:35px;
    }

    .client-slider{
        padding:0 40px;
    }

    .client-card{
        flex-basis:calc((100% - 14px)/2);
        height:105px;
    }

    .client-name{
        font-size:11px;
        padding:8px;
    }
}

@media(max-width:500px){
    .section-title{
        font-size:21px;
    }

    .client-slider{
        padding:0 36px;
    }

    .client-card{
        flex-basis:100%;
        height:108px;
    }

    .slider-btn{
        width:32px;
        height:32px;
    }

    .client-name{
        font-size:12px;
    }
}
        :root {
            --purple-dark: #40138f;
            --gold: #f4bf4f;
            --purple: #7f1fff;
            --purple-light: #9f39ff;
            --white: #ffffff;
            --text: #292332;
            --light-bg: #faf8ff;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: "Poppins", sans-serif;
            background: #ffffff;
            color: var(--text);
        }

        /* =========================
           MAIN SECTION
        ========================== */

        .training-section {
            position: relative;
            overflow: hidden;
            
            background:
                radial-gradient(
                    circle at 10% 20%,
                    rgba(127, 31, 255, 0.08),
                    transparent 28%
                ),
                radial-gradient(
                    circle at 90% 80%,
                    rgba(159, 57, 255, 0.08),
                    transparent 30%
                ),
                #ffffff;
        }

        /* Background Shapes */

        .bg-shape {
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
            z-index: 0;
        }

        .shape-one {
            width: 260px;
            height: 260px;
            background: rgba(127, 31, 255, 0.06);
            top: -100px;
            left: -100px;
        }

        .shape-two {
            width: 220px;
            height: 220px;
            background: rgba(244, 191, 79, 0.09);
            bottom: -100px;
            right: -70px;
        }

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

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

        .section-heading {
            margin-bottom: 55px;
        }

        .heading-label {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: var(--purple);
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 1.8px;
            text-transform: uppercase;
            margin-bottom: 10px;
        }

        .heading-label::before,
        .heading-label::after {
            content: "";
            width: 35px;
            height: 2px;
            background: var(--gold);
        }

        .section-heading h2 {
            margin: 0;
            color: var(--purple-dark);
            font-size: 42px;
            line-height: 1.2;
            font-weight: 800;
        }

        .section-heading h2 span {
            color: var(--purple);
        }

        .heading-line {
            width: 75px;
            height: 4px;
            border-radius: 20px;
            background: linear-gradient(
                90deg,
                var(--purple),
                var(--gold)
            );
            margin: 18px auto 0;
        }

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

        .training-content {
            position: relative;
        }

        .training-content::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 35px;
            background: linear-gradient(
                135deg,
                rgba(64, 19, 143, 0.03),
                rgba(159, 57, 255, 0.04)
            );
            transform: rotate(-1deg);
            z-index: -1;
        }

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

        .training-image-wrapper {
            position: relative;
            height: 100%;
            min-height: 470px;
            padding: 15px;
        }

        .training-image-card {
            position: relative;
            height: 100%;
            min-height: 470px;
            overflow: hidden;
            border-radius: 28px;
            box-shadow:
                0 25px 60px rgba(64, 19, 143, 0.18),
                0 5px 20px rgba(0, 0, 0, 0.08);
        }

        .training-image-card img {
            width: 100%;
            height: 100%;
            min-height: 470px;
            object-fit: cover;
            display: block;
            transition: transform 0.7s ease;
        }

        .training-image-card:hover img {
            transform: scale(1.06);
        }

        .training-image-card::after {
            content: "";
            position: absolute;
            inset: 0;
            background:
                linear-gradient(
                    180deg,
                    transparent 45%,
                    rgba(64, 19, 143, 0.85)
                );
        }

        /* Image badge */

        .image-badge {
            position: absolute;
            left: 28px;
            bottom: 28px;
            z-index: 3;
            display: flex;
            align-items: center;
            gap: 13px;
            padding: 13px 20px;
            border-radius: 50px;
            background: rgba(255, 255, 255, 0.95);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        }

        .image-badge-icon {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            background: linear-gradient(
                135deg,
                var(--purple),
                var(--purple-light)
            );
            font-size: 19px;
        }

        .image-badge strong {
            display: block;
            color: var(--purple-dark);
            font-size: 14px;
        }

        .image-badge small {
            color: #777;
            font-size: 11px;
        }

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

        .training-info {
            padding: 20px 15px 20px 35px;
        }

        .info-top {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 22px;
        }

        .info-icon {
            flex-shrink: 0;
            width: 62px;
            height: 62px;
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-size: 28px;
            background: linear-gradient(
                135deg,
                var(--purple-dark),
                var(--purple)
            );
            box-shadow:
                0 12px 25px rgba(127, 31, 255, 0.25);
        }

        .info-title {
            margin: 0;
            color: var(--purple-dark);
            font-size: 27px;
            font-weight: 800;
        }

        .info-subtitle {
            margin: 3px 0 0;
            color: var(--purple);
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        /* Description */

        .description {
            color: #5d5866;
            font-size: 15px;
            line-height: 1.8;
            margin-bottom: 28px;
        }

        /* =========================
           FEATURE CARDS
        ========================== */

        .feature-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }

        .feature-card {
            position: relative;
            padding: 20px;
            border-radius: 18px;
            background: #ffffff;
            border: 1px solid rgba(127, 31, 255, 0.09);
            box-shadow: 0 8px 25px rgba(64, 19, 143, 0.06);
            transition: all 0.3s ease;
            overflow: hidden;
        }

        .feature-card::before {
            content: "";
            position: absolute;
            width: 4px;
            height: 100%;
            left: 0;
            top: 0;
            background: linear-gradient(
                180deg,
                var(--purple),
                var(--gold)
            );
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(64, 19, 143, 0.13);
            border-color: rgba(127, 31, 255, 0.2);
        }

        .feature-icon {
            width: 46px;
            height: 46px;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 14px;
            color: var(--purple);
            background: rgba(127, 31, 255, 0.09);
            font-size: 21px;
        }

        .feature-card h4 {
            margin: 0 0 7px;
            color: var(--purple-dark);
            font-size: 16px;
            font-weight: 700;
        }

        .feature-card p {
            margin: 0;
            color: #77727e;
            font-size: 12px;
            line-height: 1.6;
        }

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

        .training-btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin-top: 28px;
            padding: 13px 24px;
            color: #ffffff;
            background: linear-gradient(
                135deg,
                var(--purple-dark),
                var(--purple)
            );
            border-radius: 50px;
            font-size: 13px;
            font-weight: 600;
            text-decoration: none;
            box-shadow:
                0 10px 25px rgba(127, 31, 255, 0.25);
            transition: all 0.3s ease;
        }

        .training-btn:hover {
            color: #ffffff;
            transform: translateY(-3px);
            box-shadow:
                0 15px 35px rgba(127, 31, 255, 0.35);
        }

        .training-btn i {
            transition: transform 0.3s ease;
        }

        .training-btn:hover i {
            transform: translateX(5px);
        }

        /* =========================
           GOLD CORNER
        ========================== */

        .gold-corner {
            position: absolute;
            width: 80px;
            height: 80px;
            right: 0;
            top: 0;
            border-top: 5px solid var(--gold);
            border-right: 5px solid var(--gold);
            border-radius: 0 25px 0 0;
            opacity: 0.8;
        }

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

        @media (max-width: 991px) {

            .training-section {
                padding: 70px 0;
            }

            .section-heading h2 {
                font-size: 35px;
            }

            .training-info {
                padding: 35px 15px 15px;
            }

            .training-image-wrapper,
            .training-image-card,
            .training-image-card img {
                min-height: 400px;
            }

        }

        @media (max-width: 767px) {

            .training-section {
                padding: 55px 0;
            }

            .section-heading {
                margin-bottom: 35px;
            }

            .section-heading h2 {
                font-size: 29px;
            }

            .heading-label {
                font-size: 11px;
            }

            .training-image-wrapper {
                padding: 8px;
            }

            .training-image-card,
            .training-image-card img {
                min-height: 330px;
            }

            .training-info {
                padding: 30px 5px 10px;
            }

            .info-title {
                font-size: 23px;
            }

            .description {
                font-size: 14px;
            }

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

        }

        @media (max-width: 480px) {

            .section-heading h2 {
                font-size: 25px;
            }

            .training-image-card,
            .training-image-card img {
                min-height: 280px;
            }

            .image-badge {
                left: 18px;
                bottom: 18px;
                padding: 9px 14px;
            }

            .image-badge-icon {
                width: 36px;
                height: 36px;
            }

            .info-top {
                align-items: flex-start;
            }

            .info-icon {
                width: 52px;
                height: 52px;
                font-size: 23px;
            }

            .info-title {
                font-size: 20px;
            }

        }


        :root {
            --navy: #101a3d;
            --deep-navy: #07102d;
            --gold: #d8a83e;
            --light-gold: #f4d58b;
            --white: #ffffff;
            --soft-bg: #f8f8fb;
            --border: #e9e5dc;
            --text: #1d2340;
        }

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

        body {
            font-family: "Poppins", sans-serif;
            background: #fff;
            color: var(--text);
        }

        /* =========================
           SUPPLIER SECTION
        ========================= */

        .supplier-section {
            position: relative;
            padding: 55px 20px 65px;
            overflow: hidden;
            background:
                radial-gradient(
                    circle at 15% 20%,
                    rgba(216, 168, 62, 0.08),
                    transparent 28%
                ),
                radial-gradient(
                    circle at 85% 80%,
                    rgba(16, 26, 61, 0.06),
                    transparent 30%
                ),
                #fff;
        }

        /* Decorative lines */

        .supplier-section::before {
            content: "";
            position: absolute;
            width: 220px;
            height: 220px;
            border: 1px solid rgba(216, 168, 62, 0.12);
            border-radius: 50%;
            top: -100px;
            left: -100px;
        }

        .supplier-section::after {
            content: "";
            position: absolute;
            width: 300px;
            height: 300px;
            border: 1px solid rgba(16, 26, 61, 0.06);
            border-radius: 50%;
            bottom: -170px;
            right: -120px;
        }

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

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

        .supplier-heading {
            text-align: center;
            margin-bottom: 35px;
        }

        .supplier-eyebrow {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-bottom: 8px;
        }

        .supplier-eyebrow span {
            height: 2px;
            width: 55px;
            background: linear-gradient(
                90deg,
                transparent,
                var(--gold)
            );
        }

        .supplier-eyebrow span:last-child {
            background: linear-gradient(
                90deg,
                var(--gold),
                transparent
            );
        }

        .supplier-eyebrow-text {
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 1.3px;
            color: #56349b;
            text-transform: uppercase;
        }

        .supplier-title {
            font-family: "Playfair Display", serif;
            font-size: clamp(32px, 4vw, 48px);
            line-height: 1.1;
            color: var(--navy);
            font-weight: 700;
            margin-bottom: 12px;
        }

        .supplier-subtitle {
            max-width: 600px;
            margin: auto;
            color: #777d91;
            font-size: 14px;
            line-height: 1.7;
        }

        /* Gold ornament */

        .heading-ornament {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 7px;
            margin-top: 15px;
        }

        .heading-ornament::before,
        .heading-ornament::after {
            content: "";
            width: 55px;
            height: 1px;
            background: linear-gradient(
                90deg,
                transparent,
                var(--gold)
            );
        }

        .heading-ornament::after {
            background: linear-gradient(
                90deg,
                var(--gold),
                transparent
            );
        }

        .heading-ornament i {
            color: var(--gold);
            font-size: 15px;
        }

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

        .supplier-slider {
            position: relative;
            padding: 0 55px;
        }

        .supplier-track-wrapper {
            overflow: hidden;
            padding: 12px 5px 20px;
        }

        .supplier-track {
            display: flex;
            transition: transform 0.6s cubic-bezier(
                0.22,
                1,
                0.36,
                1
            );
        }

        .supplier-slide {
            flex: 0 0 20%;
            padding: 0 8px;
        }

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

        .supplier-card {
            height: 125px;
            background: rgba(255, 255, 255, 0.95);
            border: 1px solid var(--border);
            border-radius: 14px;

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

            padding: 20px;

            position: relative;
            overflow: hidden;

            box-shadow:
                0 8px 30px rgba(16, 26, 61, 0.05);

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

        .supplier-card::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 3px;

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

            transform: scaleX(0);
            transform-origin: center;
            transition: transform 0.35s ease;
        }

        .supplier-card::after {
            content: "";
            position: absolute;
            width: 90px;
            height: 90px;
            border-radius: 50%;
            background: rgba(216, 168, 62, 0.05);
            top: -45px;
            right: -45px;
        }

        .supplier-card:hover {
            transform: translateY(-8px);
            border-color: rgba(216, 168, 62, 0.45);

            box-shadow:
                0 18px 45px rgba(16, 26, 61, 0.12);
        }

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

        .supplier-card img {
            max-width: 90%;
            max-height: 70px;
            width: auto;
            height: auto;

            object-fit: contain;

            transition:
                transform 0.35s ease,
                filter 0.35s ease;
        }

        .supplier-card:hover img {
            transform: scale(1.06);
        }

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

        .supplier-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);

            width: 44px;
            height: 44px;

            border-radius: 50%;
            border: 1px solid rgba(16, 26, 61, 0.12);

            background: #fff;

            color: var(--navy);

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

            cursor: pointer;

            z-index: 10;

            box-shadow:
                0 8px 25px rgba(16, 26, 61, 0.10);

            transition: all 0.3s ease;
        }

        .supplier-nav:hover {
            background: var(--navy);
            color: #fff;
            border-color: var(--navy);
            transform: translateY(-50%) scale(1.08);
        }

        .supplier-nav i {
            font-size: 20px;
        }

        .supplier-prev {
            left: 0;
        }

        .supplier-next {
            right: 0;
        }

        /* =========================
           DOTS
        ========================= */

        .supplier-dots {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            margin-top: 15px;
        }

        .supplier-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #d6d2ca;
            border: none;
            padding: 0;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .supplier-dot.active {
            width: 28px;
            border-radius: 20px;
            background: var(--gold);
        }

        /* =========================
           PREMIUM BOTTOM TEXT
        ========================= */

        .supplier-bottom {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            margin-top: 25px;
            color: #85899a;
            font-size: 12px;
        }

        .supplier-bottom i {
            color: var(--gold);
            font-size: 14px;
        }

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

        @media (max-width: 1199px) {

            .supplier-slide {
                flex: 0 0 25%;
            }

        }

        @media (max-width: 991px) {

            .supplier-slide {
                flex: 0 0 33.333%;
            }

            .supplier-slider {
                padding: 0 48px;
            }

        }

        @media (max-width: 767px) {

            .supplier-section {
                padding: 45px 15px 50px;
            }

            .supplier-slide {
                flex: 0 0 50%;
            }

            .supplier-card {
                height: 115px;
                padding: 16px;
            }

            .supplier-card img {
                max-height: 60px;
            }

            .supplier-title {
                font-size: 34px;
            }

            .supplier-subtitle {
                font-size: 13px;
            }

            .supplier-nav {
                width: 38px;
                height: 38px;
            }

        }

        @media (max-width: 480px) {

            .supplier-slide {
                flex: 0 0 100%;
            }

            .supplier-slider {
                padding: 0 42px;
            }

            .supplier-card {
                height: 120px;
            }

            .supplier-eyebrow span {
                width: 30px;
            }

            .supplier-title {
                font-size: 30px;
            }

        }


        :root {
            --navy: #101a3d;
            --deep-navy: #07102d;
            --gold: #d8a83e;
            --light-gold: #f4d58b;
            --purple: #40138f;
            --text: #34394d;
            --muted: #85899a;
            --white: #ffffff;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: "Poppins", sans-serif;
            background: #fff;
            color: var(--text);
        }

        /* =====================================
           TESTIMONIAL SECTION
        ===================================== */

        .testimonial-section {
            position: relative;
            padding: 90px 20px 100px;
            overflow: hidden;

            background:
                radial-gradient(
                    circle at 10% 20%,
                    rgba(216, 168, 62, 0.08),
                    transparent 25%
                ),
                radial-gradient(
                    circle at 90% 80%,
                    rgba(64, 19, 143, 0.07),
                    transparent 28%
                ),
                #fafafd;
        }

        /* Decorative circles */

        .testimonial-section::before {
            content: "";
            position: absolute;
            width: 330px;
            height: 330px;
            border: 1px solid rgba(216, 168, 62, 0.12);
            border-radius: 50%;
            left: -170px;
            top: -130px;
        }

        .testimonial-section::after {
            content: "";
            position: absolute;
            width: 280px;
            height: 280px;
            border: 1px solid rgba(64, 19, 143, 0.08);
            border-radius: 50%;
            right: -120px;
            bottom: -120px;
        }

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

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

        .testimonial-heading {
            text-align: center;
            margin-bottom: 55px;
        }

        .testimonial-eyebrow {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-bottom: 12px;
        }

        .testimonial-eyebrow-line {
            width: 50px;
            height: 2px;
            background: linear-gradient(
                90deg,
                transparent,
                var(--gold)
            );
        }

        .testimonial-eyebrow-line.right {
            background: linear-gradient(
                90deg,
                var(--gold),
                transparent
            );
        }

        .testimonial-eyebrow-text {
            color: var(--purple);
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
        }

        .testimonial-title {
            font-family: "Playfair Display", serif;
            color: var(--navy);
            font-size: clamp(34px, 5vw, 52px);
            line-height: 1.15;
            margin-bottom: 15px;
        }

        .testimonial-description {
            max-width: 620px;
            margin: auto;
            color: var(--muted);
            font-size: 14px;
            line-height: 1.8;
        }

        .testimonial-ornament {
            margin-top: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
        }

        .testimonial-ornament::before,
        .testimonial-ornament::after {
            content: "";
            width: 60px;
            height: 1px;
            background: var(--gold);
        }

        .testimonial-ornament i {
            color: var(--gold);
            font-size: 16px;
        }

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

        .testimonial-slider {
            position: relative;
            padding: 0 55px;
        }

        .testimonial-track-wrapper {
            overflow: hidden;
            padding: 15px 5px 30px;
        }

        .testimonial-track {
            display: flex;
            transition:
                transform 0.65s cubic-bezier(
                    0.22,
                    1,
                    0.36,
                    1
                );
        }

        .testimonial-slide {
            flex: 0 0 33.333333%;
            padding: 0 10px;
        }

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

        .testimonial-card {
            position: relative;
            height: 100%;
            min-height: 390px;

            padding: 38px 30px 30px;

            border-radius: 22px;

            background: rgba(255, 255, 255, 0.96);

            border: 1px solid rgba(16, 26, 61, 0.08);

            box-shadow:
                0 15px 45px rgba(16, 26, 61, 0.07);

            overflow: hidden;

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

        .testimonial-card:hover {
            transform: translateY(-10px);

            border-color:
                rgba(216, 168, 62, 0.35);

            box-shadow:
                0 25px 60px rgba(16, 26, 61, 0.13);
        }

        /* Gold top line */

        .testimonial-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 35px;
            right: 35px;
            height: 3px;

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

        /* Decorative quote */

        .testimonial-quote-icon {
            position: absolute;
            top: 20px;
            right: 25px;

            font-family: Georgia, serif;
            font-size: 85px;
            line-height: 1;

            color: rgba(216, 168, 62, 0.12);
        }

        /* =====================================
           CUSTOMER
        ===================================== */

        .customer-info {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 22px;
        }

        .customer-image {
            width: 65px;
            height: 65px;
            border-radius: 50%;

            object-fit: cover;

            border: 3px solid #fff;

            box-shadow:
                0 5px 20px rgba(16, 26, 61, 0.16);

            outline: 2px solid
                rgba(216, 168, 62, 0.45);
        }

        .customer-name {
            font-size: 16px;
            font-weight: 700;
            color: var(--navy);
            margin-bottom: 3px;
        }

        .customer-role {
            font-size: 12px;
            color: var(--muted);
        }

        /* =====================================
           STARS
        ===================================== */

        .rating {
            display: flex;
            gap: 3px;
            margin-bottom: 18px;
        }

        .rating i {
            color: var(--gold);
            font-size: 15px;
        }

        /* =====================================
           REVIEW
        ===================================== */

        .testimonial-text {
            font-size: 14px;
            line-height: 1.9;
            color: #62677a;
            margin-bottom: 25px;
        }

        .testimonial-text::before {
            content: "“";
            color: var(--gold);
            font-family: Georgia, serif;
            font-size: 30px;
            font-weight: bold;
            vertical-align: -8px;
            margin-right: 3px;
        }

        /* =====================================
           VERIFIED
        ===================================== */

        .verified-review {
            display: inline-flex;
            align-items: center;
            gap: 6px;

            padding: 7px 12px;

            border-radius: 50px;

            background: rgba(64, 19, 143, 0.06);

            color: var(--purple);

            font-size: 10px;
            font-weight: 600;
        }

        .verified-review i {
            color: #22a447;
            font-size: 13px;
        }

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

        .testimonial-nav {
            position: absolute;

            top: 50%;

            transform: translateY(-50%);

            width: 46px;
            height: 46px;

            border-radius: 50%;

            border: 1px solid
                rgba(16, 26, 61, 0.1);

            background: #fff;

            color: var(--navy);

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

            cursor: pointer;

            z-index: 5;

            box-shadow:
                0 8px 25px rgba(16, 26, 61, 0.1);

            transition: all 0.3s ease;
        }

        .testimonial-nav:hover {
            background: var(--navy);
            color: #fff;
            border-color: var(--navy);
            transform:
                translateY(-50%) scale(1.08);
        }

        .testimonial-nav i {
            font-size: 19px;
        }

        .testimonial-prev {
            left: 0;
        }

        .testimonial-next {
            right: 0;
        }

        /* =====================================
           DOTS
        ===================================== */

        .testimonial-dots {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            margin-top: 5px;
        }

        .testimonial-dot {
            width: 7px;
            height: 7px;

            border: none;
            padding: 0;

            border-radius: 50%;

            background: #d5d2cd;

            cursor: pointer;

            transition: all 0.3s ease;
        }

        .testimonial-dot.active {
            width: 30px;
            border-radius: 20px;
            background: var(--gold);
        }

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

        .testimonial-trust {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;

            margin-top: 30px;

            font-size: 12px;
            color: #8b8f9d;
        }

        .testimonial-trust i {
            color: var(--gold);
        }

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

        @media (max-width: 991px) {

            .testimonial-slide {
                flex: 0 0 50%;
            }

        }

        @media (max-width: 767px) {

            .testimonial-section {
                padding: 65px 15px 75px;
            }

            .testimonial-heading {
                margin-bottom: 35px;
            }

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

            .testimonial-slider {
                padding: 0 45px;
            }

            .testimonial-card {
                min-height: 370px;
            }

            .testimonial-nav {
                width: 38px;
                height: 38px;
            }

            .testimonial-nav i {
                font-size: 16px;
            }

        }

        @media (max-width: 480px) {

            .testimonial-slider {
                padding: 0 40px;
            }

            .testimonial-title {
                font-size: 34px;
            }

            .testimonial-description {
                font-size: 13px;
            }

            .testimonial-card {
                padding: 32px 24px 25px;
            }

        }
                :root {
            --primary: #40138f;
            --violet: #7f1fff;
            --light-violet: #9f39ff;
            --gold: #f4bf4f;
            --navy: #0b0820;
            --dark: #080616;
            --text-light: #d7d3e5;
            --muted: #9993ad;
            --white: #ffffff;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: "Poppins", sans-serif;
        }

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

        .premium-footer {
            position: relative;
            overflow: hidden;
            background:
                radial-gradient(
                    circle at 10% 10%,
                    rgba(127, 31, 255, 0.18),
                    transparent 28%
                ),
                radial-gradient(
                    circle at 90% 85%,
                    rgba(244, 191, 79, 0.08),
                    transparent 25%
                ),
                linear-gradient(
                    135deg,
                    #09061b 0%,
                    #12082d 45%,
                    #080616 100%
                );

            color: var(--white);
        }

        /* Decorative circles */

        .premium-footer::before {
            content: "";
            position: absolute;

            width: 380px;
            height: 380px;

            border: 1px solid
                rgba(159, 57, 255, 0.12);

            border-radius: 50%;

            left: -220px;
            top: -200px;
        }

        .premium-footer::after {
            content: "";

            position: absolute;

            width: 300px;
            height: 300px;

            border: 1px solid
                rgba(244, 191, 79, 0.10);

            border-radius: 50%;

            right: -160px;
            bottom: -160px;
        }

        .footer-container {
            position: relative;
            z-index: 2;

            max-width: 1200px;
            margin: auto;
        }

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

        .footer-newsletter {
            position: relative;

            margin-top: -1px;
            padding: 55px 50px;

            border-radius: 0 0 28px 28px;

            background:
                linear-gradient(
                    135deg,
                    rgba(64, 19, 143, 0.98),
                    rgba(127, 31, 255, 0.92)
                );

            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.22);

            overflow: hidden;
        }

        .footer-newsletter::before {
            content: "";

            position: absolute;

            width: 180px;
            height: 180px;

            border-radius: 50%;

            background: rgba(255,255,255,0.05);

            right: -50px;
            top: -80px;
        }

        .footer-newsletter::after {
            content: "";

            position: absolute;

            width: 120px;
            height: 120px;

            border-radius: 50%;

            background: rgba(244,191,79,0.08);

            left: 40%;
            bottom: -70px;
        }

        .newsletter-content {
            position: relative;
            z-index: 2;
        }

        .newsletter-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;

            color: var(--gold);

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

            text-transform: uppercase;
            letter-spacing: 1.6px;

            margin-bottom: 8px;
        }

        .newsletter-title {
            font-family: "Playfair Display", serif;

            font-size: clamp(28px, 4vw, 42px);

            margin: 0 0 10px;

            color: #fff;
        }

        .newsletter-text {
            max-width: 560px;

            color: rgba(255,255,255,0.72);

            font-size: 13px;
            line-height: 1.7;

            margin: 0;
        }

        .newsletter-form {
            position: relative;
            z-index: 2;

            display: flex;
            gap: 10px;

            padding: 7px;

            background: rgba(255,255,255,0.10);

            border: 1px solid
                rgba(255,255,255,0.16);

            border-radius: 60px;

            backdrop-filter: blur(10px);
        }

        .newsletter-input {
            flex: 1;

            min-width: 0;

            border: none;
            outline: none;

            background: transparent;

            color: #fff;

            padding: 12px 18px;

            font-family: "Poppins", sans-serif;

            font-size: 13px;
        }

        .newsletter-input::placeholder {
            color: rgba(255,255,255,0.55);
        }

        .newsletter-btn {
            border: none;

            padding: 12px 22px;

            border-radius: 50px;

            background: var(--gold);

            color: #201438;

            font-weight: 700;

            font-size: 12px;

            cursor: pointer;

            transition: all 0.3s ease;

            white-space: nowrap;
        }

        .newsletter-btn:hover {
            background: #fff;

            transform: translateY(-2px);

            box-shadow:
                0 8px 20px rgba(0,0,0,0.18);
        }

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

        .footer-main {
            padding: 75px 20px 55px;
        }

        .footer-logo {
            display: inline-flex;
            align-items: center;
            gap: 12px;

            text-decoration: none;

            color: #fff;

            margin-bottom: 20px;
        }

        .footer-logo-icon {
            width: 52px;
            height: 52px;

            border-radius: 15px;

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

            background:
                linear-gradient(
                    135deg,
                    var(--gold),
                    #fff0bb
                );

            color: var(--primary);

            font-size: 25px;

            box-shadow:
                0 10px 30px rgba(244,191,79,0.18);
        }

        .footer-logo-text {
            font-family: "Playfair Display", serif;

            font-size: 27px;
            font-weight: 700;

            line-height: 1;
        }

        .footer-logo-text small {
            display: block;

            margin-top: 5px;

            font-family: "Poppins", sans-serif;

            font-size: 8px;

            letter-spacing: 2px;

            color: var(--gold);

            text-transform: uppercase;
        }

        .footer-about {
            color: var(--muted);

            font-size: 13px;

            line-height: 1.9;

            max-width: 330px;

            margin-bottom: 22px;
        }

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

        .footer-social {
            display: flex;
            gap: 9px;
        }

        .footer-social a {
            width: 38px;
            height: 38px;

            border-radius: 50%;

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

            text-decoration: none;

            color: #fff;

            background:
                rgba(255,255,255,0.06);

            border: 1px solid
                rgba(255,255,255,0.10);

            transition: all 0.3s ease;
        }

        .footer-social a:hover {
            background: var(--gold);

            color: var(--primary);

            border-color: var(--gold);

            transform:
                translateY(-5px);
        }

        /* =====================================
           FOOTER HEADINGS
        ===================================== */

        .footer-heading {
            position: relative;

            display: inline-block;

            color: #fff;

            font-size: 14px;

            font-weight: 700;

            margin-bottom: 23px;

            letter-spacing: 0.3px;
        }

        .footer-heading::after {
            content: "";

            position: absolute;

            left: 0;
            bottom: -9px;

            width: 30px;
            height: 2px;

            background: var(--gold);

            border-radius: 10px;
        }

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

        .footer-links {
            list-style: none;

            padding: 0;
            margin: 0;
        }

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

        .footer-links a {
            position: relative;

            display: inline-flex;

            align-items: center;

            gap: 8px;

            color: var(--muted);

            text-decoration: none;

            font-size: 12px;

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

        .footer-links a i {
            font-size: 9px;

            color: var(--gold);

            transition:
                transform 0.3s ease;
        }

        .footer-links a:hover {
            color: #fff;

            transform:
                translateX(5px);
        }

        .footer-links a:hover i {
            transform:
                translateX(3px);
        }

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

        .footer-contact {
            list-style: none;

            padding: 0;
            margin: 0;
        }

        .footer-contact li {
            display: flex;

            align-items: flex-start;

            gap: 13px;

            margin-bottom: 18px;

            color: var(--muted);

            font-size: 12px;

            line-height: 1.7;
        }

        .footer-contact-icon {
            flex-shrink: 0;

            width: 35px;
            height: 35px;

            border-radius: 10px;

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

            color: var(--gold);

            background:
                rgba(244,191,79,0.08);

            border: 1px solid
                rgba(244,191,79,0.12);
        }

        .footer-contact a {
            color: var(--muted);
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .footer-contact a:hover {
            color: #fff;
        }

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

        .footer-divider {
            height: 1px;

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

            margin: 0 20px;
        }

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

        .footer-bottom {
            padding: 23px 20px;

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 20px;
        }

        .copyright {
            color: #777187;

            font-size: 11px;

            margin: 0;
        }

        .copyright span {
            color: var(--gold);
        }

        .bottom-links {
            display: flex;

            gap: 22px;
        }

        .bottom-links a {
            color: #777187;

            text-decoration: none;

            font-size: 10px;

            transition: color 0.3s ease;
        }

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

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

        .back-to-top {
            position: fixed;

            right: 25px;
            bottom: 25px;

            width: 46px;
            height: 46px;

            border-radius: 50%;

            border: 1px solid
                rgba(244,191,79,0.35);

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

            color: #fff;

            display: flex;

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

            cursor: pointer;

            opacity: 0;
            visibility: hidden;

            transform:
                translateY(15px);

            transition: all 0.35s ease;

            z-index: 999;
        }

        .back-to-top.show {
            opacity: 1;
            visibility: visible;

            transform:
                translateY(0);
        }

        .back-to-top:hover {
            background: var(--gold);

            color: var(--primary);

            transform:
                translateY(-4px);
        }

        /* =====================================
           TOAST MESSAGE
        ===================================== */

        .newsletter-message {
            display: none;

            color: var(--gold);

            font-size: 11px;

            margin-top: 8px;
        }

        .newsletter-message.show {
            display: block;
        }

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

        @media (max-width: 991px) {

            .footer-newsletter {
                padding: 40px 30px;
            }

            .footer-main {
                padding-top: 60px;
            }

        }

        @media (max-width: 767px) {

            .footer-newsletter {
                border-radius: 0 0 20px 20px;

                padding: 35px 22px;
            }

            .newsletter-form {
                margin-top: 25px;
            }

            .footer-main {
                padding:
                    55px 20px 35px;
            }

            .footer-column {
                margin-bottom: 35px;
            }

            .footer-bottom {
                flex-direction: column;

                text-align: center;
            }

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

        }

        @media (max-width: 480px) {

            .newsletter-form {
                flex-direction: column;

                border-radius: 18px;
            }

            .newsletter-input {
                padding: 12px 15px;
            }

            .newsletter-btn {
                width: 100%;
            }

            .footer-logo-text {
                font-size: 24px;
            }

        }