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

/* =========================================================
   MG Oils – Header styles (banner theme: cream + gold + green)
   ========================================================= */
:root {
    --mg-green: #1d5c2a;
    --mg-green-2: #2e8b3a;
    --mg-green-3: #14421e;
    --mg-brown: #6b3a14;
    --mg-gold: #f5b800;
    --mg-gold-2: #ffd84d;
    --mg-orange: #ff9d00;
    --mg-cream: #fffbe6;
    --mg-grad-head: linear-gradient(105deg, #fffdf0 0%, #fff3b8 55%, #ffe27a 100%);
    --mg-grad-green: linear-gradient(120deg, #2e8b3a 0%, #1d5c2a 60%, #14421e 100%);
    --mg-grad-gold: linear-gradient(120deg, #ffe27a 0%, #f5b800 55%, #ff9d00 100%);
    --mg-grad-line: linear-gradient(90deg, #1d5c2a, #2e8b3a 30%, #f5b800 65%, #ff9d00);
}

body {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    margin: 0;
    color: var(--mg-green)
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--mg-green-2);
    outline-offset: 3px
}

/* ---------- Header shell ---------- */
.mg-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background:
        radial-gradient(520px 220px at 92% -40%, rgba(255, 255, 255, .75), transparent 70%),
        radial-gradient(460px 200px at 4% 140%, rgba(46, 139, 58, .16), transparent 70%),
        var(--mg-grad-head);
    transition: box-shadow .3s;
}

.mg-header::after {
    /* gradient bottom edge */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--mg-grad-line);
}

.mg-header.is-scrolled {
    box-shadow: 0 12px 30px rgba(107, 58, 20, .22)
}

.mg-header .navbar {
    padding: 0
}

.mg-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 88px;
    transition: min-height .3s;
}

.mg-header.is-scrolled .mg-bar {
    min-height: 70px
}

/* ---------- Logo ---------- */
.mg-logo {
    display: block;
    flex: 0 0 auto;
    line-height: 0
}

.mg-logo img {
    height: 60px;
    width: auto;
    display: block;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(107, 58, 20, .22);
    transition: height .3s;
}

.mg-header.is-scrolled .mg-logo img {
    height: 48px
}

/* ---------- Layout inside offcanvas (desktop = one row) ---------- */
.mg-body {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    gap: 1.5rem
}

.mg-nav {
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2.05rem;
    margin: 0
}

.mg-actions {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex: 0 0 auto
}

/* ---------- Menu links ---------- */
.mg-header .nav-link {
    color: var(--mg-green);
    font-size: 1.05rem;
    font-weight: 400;
    letter-spacing: .015em;
    padding: .55rem 2rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition: background .25s, color .25s;
}

.mg-header .nav-link:hover,
.mg-header .nav-link.show {
    color: var(--mg-green-3);
    background: rgba(29, 92, 42, .1)
}

.mg-header .nav-link.active {
    color: #fff;
    background: var(--mg-grad-green);
    font-weight: 400;
    box-shadow: 0 6px 16px rgba(29, 92, 42, .3);
}

.mg-header .dropdown-toggle::after {
    /* custom caret */
    content: "";
    border: 0;
    width: 6px;
    height: 6px;
    margin-left: .5rem;
    margin-top: -3px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .25s;
}

.mg-header .dropdown-toggle.show::after {
    transform: rotate(225deg);
    margin-top: 3px
}

/* ---------- Simple dropdown ---------- */
.mg-header .dropdown-menu {
    background: #fff;
    border: 0;
    border-top: 3px solid var(--mg-gold);
    border-radius: 12px;
    padding: .5rem;
    min-width: 220px;
    margin-top: .55rem;
    box-shadow: 0 20px 44px rgba(107, 58, 20, .22);
}

.mg-header .dropdown-item {
    font-size: 1rem;
    font-weight: 300;
    color: var(--mg-green);
    padding: .6rem 1rem;
    border-radius: 8px;
    position: relative;
    transition: background .2s, color .2s, padding .2s;
}

.mg-header .dropdown-item:hover,
.mg-header .dropdown-item:focus {
    background: linear-gradient(90deg, #fff3b8, #fffbe6);
    color: var(--mg-green-3);
    padding-left: 1.35rem;
}

/* ---------- Phone ---------- */
.mg-call {
    display: flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
    color: var(--mg-green-3);
    padding: .35rem 1.1rem .35rem .35rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .7);
    border: 1px solid rgba(29, 92, 42, .22);
    backdrop-filter: blur(6px);
    transition: background .25s, border-color .25s;
}

.mg-call:hover {
    background: #fff;
    border-color: var(--mg-green-2);
    color: var(--mg-green-3)
}

.mg-call-ico {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    background: var(--mg-grad-green);
    color: #fff;
}

.mg-call-ico svg {
    width: 19px;
    height: 19px
}

.mg-call-txt {
    display: flex;
    flex-direction: column;
    line-height: 1.15
}

.mg-call-txt small {
    font-size: .74rem;
    font-weight: 300;
    color: var(--mg-brown)
}

.mg-call-txt b {
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: .02em;
    white-space: nowrap
}

/* ---------- CTA ---------- */
.mg-cta {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    white-space: nowrap;
    text-decoration: none;
    padding: .8rem 1.55rem;
    border-radius: 999px;
    color: #fff;
    font-size: 1.02rem;
    font-weight: 500;
    background: var(--mg-grad-green);
    background-size: 160% 100%;
    background-position: 0 0;
    box-shadow: 0 8px 22px rgba(29, 92, 42, .35);
    transition: background-position .4s, transform .25s, box-shadow .25s;
}

.mg-cta svg {
    width: 18px;
    height: 18px;
    transition: transform .25s
}

.mg-cta:hover {
    background-position: 100% 0;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(29, 92, 42, .45)
}

.mg-cta:hover svg {
    transform: translateX(4px)
}

/* ---------- Mobile toggler ---------- */
.mg-toggler {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    cursor: pointer;
    background: rgba(255, 255, 255, .75);
    border: 1px solid rgba(29, 92, 42, .25);
    color: var(--mg-green);
    padding: 0;
}

.mg-toggler svg {
    width: 24px;
    height: 24px
}

/* ---------- Desktop hover dropdown ---------- */
@media (min-width:992px) {
    .mg-menu-wrap:hover>.dropdown-menu {
        display: block
    }

    .mg-offcanvas {
        position: static;
        visibility: visible !important;
        transform: none !important;
        background: transparent;
        border: 0;
        flex: 1 1 auto;
        display: flex !important;
        width: auto;
        max-width: none
    }

    .mg-offcanvas .offcanvas-header {
        display: none
    }
}

/* ---------- Mobile / tablet ---------- */
@media (max-width:991.98px) {
    .mg-bar {
        min-height: 76px
    }

    .mg-logo img {
        height: 50px
    }

    .mg-offcanvas {
        background: radial-gradient(400px 200px at 100% 0, rgba(255, 255, 255, .8), transparent 70%), var(--mg-grad-head);
        color: var(--mg-green);
        width: min(340px, 88vw);
        border-left: 3px solid var(--mg-gold);
    }

    .mg-offcanvas .offcanvas-header {
        padding: 1.2rem 1.4rem
    }

    .mg-offcanvas .offcanvas-title {
        font-weight: 400;
        font-size: 1.5rem
    }

    .mg-close {
        background: none;
        border: 0;
        color: var(--mg-green);
        padding: .25rem
    }

    .mg-close svg {
        width: 26px;
        height: 26px
    }

    .mg-body {
        flex-direction: column;
        align-items: stretch;
        padding: 0 1.4rem 1.6rem;
        gap: 1.5rem;
        overflow-y: auto
    }

    .mg-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 0
    }

    .mg-header .nav-link {
        border-radius: 0;
        padding: 1rem .2rem;
        font-size: 1.15rem;
        border-bottom: 1px solid rgba(29, 92, 42, .16);
        justify-content: space-between
    }

    .mg-header .nav-link:hover,
    .mg-header .nav-link.show {
        background: none
    }

    .mg-header .nav-link.active {
        background: none;
        box-shadow: none;
        color: var(--mg-green-2);
        font-weight: 500
    }

    .mg-header .dropdown-menu {
        background: rgba(255, 255, 255, .7);
        box-shadow: none;
        border-top: 0;
        margin: .4rem 0;
        padding: .3rem
    }

    .mg-actions {
        flex-direction: column;
        align-items: stretch;
        gap: .9rem
    }

    .mg-call {
        justify-content: flex-start
    }

    .mg-cta {
        justify-content: center
    }
}

@media (min-width:992px) and (max-width:1199.98px) {
    .mg-header .nav-link {
        padding: .5rem .75rem;
        font-size: 1rem
    }

    .mg-nav {
        gap: .5rem
    }

    .mg-call-txt small {
        display: none
    }

    .mg-actions {
        gap: .8rem
    }
}

@media (prefers-reduced-motion:reduce) {
    * {
        transition: none !important
    }
}




.mg-top {
    --t-green: #1d5c2a;
    --t-green-dark: #14421e;
    --t-gold: #f5b800;
    --t-gold-2: #ffd84d;
    --t-cream: #fff3b8;
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: .9rem;
    color: #eaf4e6;
    position: relative;
    background:
        radial-gradient(420px 160px at 95% -60%, rgba(245, 184, 0, .35), transparent 70%),
        linear-gradient(100deg, var(--t-green-dark) 0%, var(--t-green) 60%, #2e8b3a 100%);
}

.mg-top::after {
    /* thin gold edge */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--t-gold), transparent);
    opacity: .7;
}

.mg-top-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 42px;
    padding-block: .35rem
}

.mg-top-left,
.mg-top-right {
    display: flex;
    align-items: center;
    gap: 1.4rem
}

/* tagline */
.mg-top-tag {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 400;
    letter-spacing: .04em;
    color: var(--t-gold-2)
}

.mg-top-tag svg {
    width: 15px;
    height: 15px;
    fill: var(--t-gold)
}

/* info items */
.mg-top-item {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: #eaf4e6;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s
}

.mg-top-item svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: var(--t-gold);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

a.mg-top-item:hover {
    color: var(--t-gold-2)
}

.mg-top-sep {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, .22)
}

/* social icons */
.mg-top-social {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    padding: 0;
    list-style: none
}

.mg-top-social a {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    transition: background .25s, color .25s, transform .25s
}

.mg-top-social svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round
}

.mg-top-social a:hover {
    background: linear-gradient(120deg, var(--t-gold-2), var(--t-gold));
    color: var(--t-green-dark);
    transform: translateY(-2px)
}

.mg-top a:focus-visible {
    outline: 2px solid var(--t-gold-2);
    outline-offset: 3px;
    border-radius: 4px
}

/* responsive */
@media (max-width:1199.98px) {

    .mg-top-hours,
    .mg-top-hours+.mg-top-sep {
        display: none
    }
}

@media (max-width:991.98px) {

    .mg-top-addr,
    .mg-top-addr+.mg-top-sep {
        display: none
    }
}

@media (max-width:575.98px) {
    .mg-top {
        font-size: .82rem
    }

    .mg-top-mail,
    .mg-top-mail+.mg-top-sep {
        display: none
    }

    .mg-top-in {
        justify-content: space-between;
        gap: .8rem
    }
}












/* hero sider */

/* Base swiper container setup */
.thele-slides {
    width: 100%;
    height: 100%;
}

.thele-slides .swiper-slide {
    text-align: center;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.thele-slides .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== Pagination Dots ===== */


/* Arrow Styling */
.thele-slides .swiper-button-next,
.thele-slides .swiper-button-prev {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(6px);
    transition: all .3s ease-in-out;
}

/* Icon Color */
.thele-slides .swiper-button-next::after,
.thele-slides .swiper-button-prev::after {
    font-size: 18px;
    color: #000000;
}

/* Hover effect */
.thele-slides .swiper-button-next:hover,
.thele-slides .swiper-button-prev:hover {
    background: #fff;
}

.thele-slides .swiper-button-next:hover::after,
.thele-slides .swiper-button-prev:hover::after {
    color: #000;
}

/* Mobile: Make Buttons Smaller */
@media(max-width: 480px) {

    .thele-slides .swiper-button-next,
    .thele-slides .swiper-button-prev {
        width: 35px;
        height: 35px;
    }

    .thele-slides .swiper-button-next::after,
    .thele-slides .swiper-button-prev::after {
        font-size: 14px;
    }
}














/* about-section */
/* ---------- WHO WE ARE ---------- */
:root {
    --cream: #fdf8e6;
    --cream-2: #fffdf4;
    --brown: #5a1d0c;
    --green: #1f5a3a;
    --text: #4a4a4a;
    --gold: #f2b522;
}

.about {
    position: relative;
    overflow: hidden;
    padding: 70px 0 90px;
    background: var(--cream)
}

.about .blob {
    /* soft cream wave card behind text */
    position: absolute;
    left: 0;
    top: 30px;
    bottom: 30px;
    width: 78%;
    background: linear-gradient(135deg, #fffef8 0%, #fdf6dc 100%);
    border-radius: 0 60% 55% 0 / 0 45% 60% 0;
    box-shadow: 0 20px 50px rgba(200, 170, 80, .18);
}

.about .gold-corner {
    /* yellow swoosh bottom-left */
    position: absolute;
    left: 0;
    bottom: 10px;
    width: 140px;
    height: 130px;
    background: radial-gradient(circle at 0 100%, #f6b81a 0, #f9cf55 55%, transparent 56%);
    border-top-right-radius: 100%;
}

.about .gold-mid {
    position: absolute;
    left: 46%;
    bottom: 18px;
    width: 150px;
    height: 90px;
    background: radial-gradient(ellipse at 50% 100%, rgba(246, 184, 26, .55), transparent 70%);
}

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

.about-text {
    padding: 30px 0 30px 20px;
}

.about-text .script {
    font-size: 30px;
    margin-bottom: 4px;
    line-height: 1.1
}

.about-text h2 {
    font-weight: 800;
    color: var(--brown);
    text-transform: uppercase;
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.2;
    letter-spacing: .3px;
    margin-bottom: 18px
}

.about-text p {
    font-size: 14.5px;
    line-height: 1.75;
    margin-bottom: 22px;
    color: #4f4a45
}

.read-more {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--brown);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px
}

.read-more:hover {
    color: var(--green)
}

.read-more svg {
    transition: transform .25s
}

.read-more:hover svg {
    transform: translateX(5px)
}

/* organic image */
.about-img {
    position: relative;
    width: 100%;
    aspect-ratio: 16/11;
    clip-path: url(#waveClip);
    -webkit-clip-path: url(#waveClip);
    background: linear-gradient(135deg, #d9b36a, #f2c14e 50%, #8a5a22)
}

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


/* leaves */
.leaf {
    position: absolute;
    z-index: 3;
    pointer-events: none
}

.leaf-left {
    left: -90px;
    top: 10px;
    width: 230px;
    transform: rotate(10deg)
}

.leaf-right-top {
    right: -120px;
    top: -40px;
    width: 560px;
    z-index: 1;
    opacity: .95
}

.leaf-right-bot {
    right: -60px;
    bottom: -40px;
    width: 230px;
    transform: rotate(25deg)
}

/* ---------- OUR PRODUCTS HEADING ---------- */
.products-head {
    text-align: center;
    padding: 10px 0 40px;
    position: relative
}

.products-head::before {
    /* wavy cream divider */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -60px;
    height: 70px;
    background: var(--cream-2);
    border-radius: 50% 50% 0 0/100% 100% 0 0;
}

.products-head .script {
    font-size: 38px;
    position: relative
}

.products-head p {
    font-size: 18px;
    color: #333;
    margin: 0;
    position: relative
}

@media(max-width:991px) {
    .about {
        padding-bottom: 0;
    }

    .about .blob {
        width: 100%;
        border-radius: 0 0 50% 50%/0 0 12% 12%;
        top: 0;
        bottom: 50%
    }

    .about-text {
        max-width: 100%;
        padding: 0px 15px 20px
    }

    .about-img {
        margin-top: 20px
    }

    .leaf-left {
        width: 140px;
        top: 0
    }

    .leaf-right-top {
        width: 340px;
        right: -90px
    }

    .gold-mid,
    .gold-corner {
        display: none;
    }

}














.mgp {
    --ink: #2b2b2b;
    --navy: #14367e;
    --red: #e31e24;
    position: relative;
    overflow: hidden;
    padding: 90px 0 60px;
    background: #fff;
    font-family: 'Poppins', sans-serif
}

.mgp-head {
    text-align: center;
    margin-bottom: 60px;
    padding: 0 15px
}

.mgp-script {
    font-family: 'Dancing Script', cursive;
    font-weight: 700;
    font-size: 40px;
    color: var(--navy);
    margin: 0;
    line-height: 1.1
}

.mgp-head p {
    margin: 6px 0 0;
    font-size: 17px;
    color: #555
}

.mgp-head::after {
    content: "";
    display: block;
    width: 54px;
    height: 6px;
    margin: 18px auto 0;
    border-radius: 50px;
    background: linear-gradient(90deg, #f0a200, var(--red))
}

/* per-product colours (from logo) */
.mgp-gold {
    --c1: #ffd54a;
    --c2: #f0a200
}

.mgp-fry {
    --c1: #ff6a4d;
    --c2: #d0151d
}

.mgp-dada {
    --c1: #3b7bd6;
    --c2: #143a82
}

.mgp-kadai {
    --c1: #ffb347;
    --c2: #f26a0b
}

.mgp-soya {
    --c1: #b4de5a;
    --c2: #2f8f3f
}

.mgp-item {
    padding: 30px 0;
    scroll-margin-top: 90px
}

/* oil-drop stage */
.mgp-stage {
    position: relative;
    height: 440px;
    display: flex;
    align-items: flex-end;
    justify-content: center
}

.mgp-drop {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 310px;
    height: 310px;
    margin: -155px 0 0 -155px;
    border-radius: 50% 0 50% 50%;
    transform: rotate(-45deg);
    background: linear-gradient(135deg, var(--c1), var(--c2));
    opacity: .88;
    box-shadow: 0 30px 60px -22px var(--c2)
}

.mgp-drop::before {
    content: "";
    position: absolute;
    inset: 24px 90px 110px 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, .55), transparent);
    filter: blur(2px)
}

.mgp-ripple {
    position: absolute;
    left: 50%;
    bottom: 30px;
    height: 34px;
    border: 2px solid var(--c2);
    border-radius: 50%;
    transform: translateX(-50%)
}

.mgp-ripple.r1 {
    width: 230px;
    opacity: .55
}

.mgp-ripple.r2 {
    width: 320px;
    opacity: .32;
    bottom: 24px;
    height: 46px
}

.mgp-ripple.r3 {
    width: 410px;
    opacity: .16;
    bottom: 18px;
    height: 58px
}

.mgp-img {
    position: relative;
    z-index: 2;
    max-height: 380px;
    max-width: 80%;
    object-fit: contain;
    margin-bottom: 34px;
    filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .25))
}

.mgp-mini {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50% 0 50% 50%;
    transform: rotate(-45deg);
    background: linear-gradient(135deg, var(--c1), var(--c2));
    opacity: .8;
    animation: mgpFloat 5s ease-in-out infinite
}

.mgp-mini.m1 {
    left: 10%;
    top: 22%
}

.mgp-mini.m2 {
    right: 8%;
    top: 38%;
    width: 30px;
    height: 30px;
    animation-delay: -2s
}

.mgp-mini.m3 {
    left: 18%;
    bottom: 26%;
    width: 16px;
    height: 16px;
    animation-delay: -3.5s
}

@keyframes mgpFloat {
    50% {
        translate: 0 -14px
    }
}

/* text */
.mgp-info {
    max-width: 470px
}

.mgp-no {
    font-size: 78px;
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px var(--c2);
    opacity: .4
}

.mgp-name {
    font-size: clamp(36px, 5vw, 58px);
    font-weight: 800;
    line-height: 1.08;
    margin: 4px 0 10px;
    background: linear-gradient(90deg, var(--c1), var(--c2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.mgp-sub {
    font-size: 21px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 10px
}

.mgp-txt {
    font-size: 14.5px;
    line-height: 1.75;
    color: #5b5650;
    margin: 0 0 18px
}

.mgp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 26px
}

.mgp-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 50px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    font-size: 12px;
    font-weight: 600;
    color: #3a3a3a
}

.mgp-chip::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50% 0 50% 50%;
    transform: rotate(-45deg);
    background: linear-gradient(135deg, var(--c1), var(--c2))
}

.mgp-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 30px;
    border-radius: 50px 50px 50px 6px;
    background: var(--red);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: .3px;
    transition: .25s
}

.mgp-btn:hover {
    background: var(--navy);
    color: #fff;
    transform: translateY(-2px)
}

.mgp-btn svg {
    transition: transform .25s
}

.mgp-btn:hover svg {
    transform: translateX(4px)
}

@media(max-width:767px) {
    .mgp-stage {
        height: 370px
    }

    .mgp-drop {
        width: 250px;
        height: 250px;
        margin: -125px 0 0 -125px
    }

    .mgp-img {
        max-height: 300px
    }

    .mgp-ripple.r3 {
        display: none
    }

    .mgp-info {
        margin: 0 auto;
        text-align: center
    }

    .mgp-chips {
        justify-content: center
    }
}

@media(prefers-reduced-motion:reduce) {
    .mgp-mini {
        animation: none
    }
}























/* ===== TESTIMONIALS (prefix: mgt-) ===== */
.mgt {
    --navy: #14367e;
    --red: #e31e24;
    --ink: #2b2b2b;
    position: relative;
    overflow: hidden;
    padding: 90px 0 70px;
    background: #fbf8f1;
    font-family: 'Poppins', sans-serif
}

/* background oil drops */
.mgt-bg {
    position: absolute;
    border-radius: 50% 0 50% 50%;
    transform: rotate(-45deg);
    pointer-events: none;
    opacity: .14
}

.mgt-bg-1 {
    width: 260px;
    height: 260px;
    left: -80px;
    top: 40px;
    background: linear-gradient(135deg, #ffd54a, #f0a200)
}

.mgt-bg-2 {
    width: 320px;
    height: 320px;
    right: -110px;
    bottom: -60px;
    background: linear-gradient(135deg, #3b7bd6, #143a82)
}

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

/* heading */
.mgt-head {
    text-align: center;
    margin-bottom: 50px
}

.mgt-script {
    font-family: 'Dancing Script', cursive;
    font-weight: 700;
    font-size: 42px;
    color: var(--navy);
    margin: 0;
    line-height: 1.1
}

.mgt-head p {
    margin: 6px 0 0;
    font-size: 17px;
    color: #555
}

.mgt-head::after {
    content: "";
    display: block;
    width: 54px;
    height: 6px;
    margin: 18px auto 0;
    border-radius: 50px;
    background: linear-gradient(90deg, #f0a200, var(--red))
}

/* slider */
.mgt-swiper {
    padding: 20px 6px 64px
}

.mgt-swiper .swiper-slide {
    height: auto
}

/* card */
.mgt-card {
    position: relative;
    height: 100%;
    padding: 44px 30px 28px;
    background: #fff;
    border-radius: 26px 26px 26px 6px;
    box-shadow: 0 14px 40px rgba(60, 40, 0, .08);
    overflow: hidden;
    transition: transform .3s, box-shadow .3s
}

.mgt-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--c1), var(--c2))
}

.mgt-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 50px rgba(60, 40, 0, .14)
}

/* per-card logo colours */
.swiper-slide:nth-child(4n+1) {
    --c1: #ffd54a;
    --c2: #f0a200
}

.swiper-slide:nth-child(4n+2) {
    --c1: #3b7bd6;
    --c2: #143a82
}

.swiper-slide:nth-child(4n+3) {
    --c1: #ff6a4d;
    --c2: #d0151d
}

.swiper-slide:nth-child(4n+4) {
    --c1: #b4de5a;
    --c2: #2f8f3f
}

/* drop-shaped quote badge */
.mgt-quote {
    position: absolute;
    right: 22px;
    top: 22px;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    color: #fff;
    font: 700 38px/1 Georgia, serif;
    padding-top: 12px;
    z-index: 1
}

.mgt-quote::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 50% 0 50% 50%;
    transform: rotate(-45deg);
    background: linear-gradient(135deg, var(--c1), var(--c2))
}

.mgt-stars {
    color: #f5b301;
    font-size: 18px;
    letter-spacing: 3px;
    margin-bottom: 14px
}

.mgt-text {
    font-size: 14.8px;
    line-height: 1.8;
    color: #555049;
    margin: 0 0 26px;
    min-height: 110px
}

/* user */
.mgt-user {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px dashed rgba(0, 0, 0, .12)
}

.mgt-avatar {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--c1), var(--c2));
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    box-shadow: 0 6px 14px -4px var(--c2)
}

.mgt-user h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink)
}

.mgt-user small {
    font-size: 12.5px;
    color: #888
}

/* pagination: drop-shaped bullets */
.mgt-pagination {
    bottom: 10px !important
}

.mgt-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    border-radius: 50% 0 50% 50%;
    transform: rotate(-45deg);
    background: #cfc8b8;
    opacity: 1;
    margin: 0 6px !important;
    transition: .3s
}

.mgt-pagination .swiper-pagination-bullet-active {
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #f0a200, var(--red))
}

@media(max-width:575px) {
    .mgt {
        padding: 70px 0 50px
    }

    .mgt-script {
        font-size: 34px
    }

    .mgt-text {
        min-height: 0
    }
}
















/* footer */

/* ===== FOOTER (prefix: mgf-) ===== */
.mgf {
    --navy: #14367e;
    --navy-d: #0b2056;
    --red: #e31e24;
    --gold: #f0a200;
    position: relative;
    overflow: hidden;
    /* margin-top: 60px; */
    padding: 0 0 22px;
    color: #cfd8ee;
    background: linear-gradient(160deg, var(--navy) 0%, var(--navy-d) 100%);
    font-family: 'Poppins', sans-serif
}

/* wave on top (colour = section above, cream) */
.mgf-wave {
    position: absolute;
    left: 0;
    top: -1px;
    width: 100%;
    height: 70px;
    fill: #fbf8f1;
    z-index: 1
}

/* decorative oil drops */
.mgf-drop {
    position: absolute;
    border-radius: 50% 0 50% 50%;
    transform: rotate(-45deg);
    pointer-events: none
}

.mgf-drop-1 {
    width: 260px;
    height: 260px;
    right: -90px;
    bottom: 60px;
    background: linear-gradient(135deg, #ffd54a, #f0a200);
    opacity: .09
}

.mgf-drop-2 {
    width: 180px;
    height: 180px;
    left: -60px;
    bottom: -40px;
    background: linear-gradient(135deg, #ff6a4d, #d0151d);
    opacity: .12
}

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

/* CTA strip (overlaps the wave) */
.mgf-cta {
    position: relative;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 0px;
    padding: 30px 38px;
    border-radius: 26px 26px 26px 6px;
    background: linear-gradient(120deg, #ffd54a, #f0a200 55%, #f26a0b);
    box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .45)
}

.mgf-cta h3 {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
    color: #2b1a00
}

.mgf-cta p {
    margin: 0;
    font-size: 14px;
    color: #4a3000
}

.mgf-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 30px;
    border-radius: 50px 50px 50px 6px;
    background: var(--red);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: .25s;
    white-space: nowrap
}

.mgf-cta-btn:hover {
    background: var(--navy);
    color: #fff;
    transform: translateY(-2px)
}

.mgf-cta-btn svg {
    transition: transform .25s
}

.mgf-cta-btn:hover svg {
    transform: translateX(4px)
}

/* main columns */
.mgf-main {
    padding: 64px 0 44px
}

.mgf-logo {
    display: inline-block;
    background: #fff;
    padding: 8px 14px;
    border-radius: 14px;
    margin-bottom: 20px
}

.mgf-logo img {
    display: block;
    height: 54px;
    width: auto
}

.mgf-about {
    font-size: 14px;
    line-height: 1.8;
    color: #b7c3e2;
    max-width: 340px;
    margin-bottom: 22px
}

.mgf-social {
    display: flex;
    gap: 12px
}

.mgf-social a {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50% 50% 50% 8px;
    background: rgba(255, 255, 255, .09);
    color: #fff;
    transition: .3s
}

.mgf-social svg {
    width: 19px;
    height: 19px
}

.mgf-social a:hover {
    background: linear-gradient(135deg, #ffd54a, #f0a200);
    color: #2b1a00;
    transform: translateY(-4px)
}

/* titles with drop marker */
.mgf-title {
    position: relative;
    margin: 0 0 24px;
    padding-bottom: 14px;
    font-size: 17px;
    font-weight: 600;
    color: #fff
}

.mgf-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 38px;
    height: 4px;
    border-radius: 50px;
    background: linear-gradient(90deg, #f0a200, var(--red))
}

.mgf-links,
.mgf-contact {
    list-style: none;
    margin: 0;
    padding: 0
}

.mgf-links li {
    margin-bottom: 12px
}

.mgf-links a {
    position: relative;
    display: inline-block;
    padding-left: 18px;
    font-size: 14px;
    color: #cfd8ee;
    text-decoration: none;
    transition: .25s
}

.mgf-links a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 50% 0 50% 50%;
    transform: rotate(-45deg);
    background: linear-gradient(135deg, #ffd54a, #f0a200);
    transition: .25s
}

.mgf-links a:hover {
    color: #ffd54a;
    padding-left: 24px
}

.mgf-links a:hover::before {
    background: linear-gradient(135deg, #ff6a4d, #e31e24)
}

.mgf-contact li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 18px;
    font-size: 14px;
    line-height: 1.7
}

.mgf-contact svg {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    padding: 9px;
    border-radius: 50% 50% 50% 8px;
    background: rgba(255, 255, 255, .09);
    color: #ffd54a
}

.mgf-contact a,
.mgf-contact span {
    color: #cfd8ee;
    text-decoration: none;
    padding-top: 7px
}

.mgf-contact a:hover {
    color: #ffd54a
}

/* bottom bar */
.mgf-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: 13px
}

.mgf-bottom p {
    margin: 0;
    color: #aab7da
}

.mgf-bottom-links {
    display: flex;
    gap: 22px
}

.mgf-bottom-links a {
    color: #aab7da;
    text-decoration: none;
    transition: .25s
}

.mgf-bottom-links a:hover {
    color: #ffd54a
}

@media(max-width:767px) {
    .mgf-cta {
        padding: 26px 22px;
        text-align: center;
        justify-content: center
    }

    .mgf-cta h3 {
        font-size: 19px
    }

    .mgf-main {
        padding: 48px 0 30px
    }

    .mgf-bottom {
        justify-content: center;
        text-align: center
    }
}



























/* about-page */
/* ===== ABOUT US PAGE (prefix: mga-) ===== */
.mga-banner,
.mga-sec,
.mga-stats,
.mga-cta {
    --navy: #14367e;
    --navy-d: #0b2056;
    --red: #e31e24;
    --ink: #2b2b2b;
    font-family: 'Poppins', sans-serif
}

.mga-sec {
    padding: 90px 0;
    background: #fbf8f1;
    color: #5b5650
}

.mga-alt {
    background: #fff
}

.mga-head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 54px
}

.mga-script {
    font-family: 'Dancing Script', cursive;
    font-weight: 700;
    font-size: 30px;
    color: var(--navy);
    display: block;
    line-height: 1.1
}

.mga-h2 {
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 800;
    color: var(--ink);
    line-height: 1.2;
    margin: 6px 0 20px
}

.mga-head .mga-h2::after {
    content: "";
    display: block;
    width: 54px;
    height: 6px;
    margin: 16px auto 0;
    border-radius: 50px;
    background: linear-gradient(90deg, #f0a200, var(--red))
}

.mga-lead {
    margin: 0;
    font-size: 16px
}

.mga-sec p {
    font-size: 15px;
    line-height: 1.85
}

/* reveal */
.mga-reveal {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .7s, transform .7s
}

.mga-reveal.in {
    opacity: 1;
    transform: none
}

/* 1 banner */
.mga-banner {
    position: relative;
    overflow: hidden;
    padding: 120px 0 90px;
    text-align: center;
    color: #fff;
    background: linear-gradient(150deg, var(--navy), var(--navy-d))
}

.mga-banner::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 50px;
    background: #fbf8f1;
    border-radius: 50% 50% 0 0/100% 100% 0 0
}

.mga-banner h1 {
    position: relative;
    z-index: 2;
    font-size: clamp(38px, 6vw, 64px);
    font-weight: 800;
    margin: 0 0 12px
}

.mga-crumb {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 15px
}

.mga-crumb li+li::before {
    content: "\2022";
    margin-right: 10px;
    color: #ffd54a
}

.mga-crumb a {
    color: #ffd54a;
    text-decoration: none
}

.mga-drop {
    position: absolute;
    border-radius: 50% 0 50% 50%;
    transform: rotate(-45deg);
    opacity: .14
}

.mga-drop.d1 {
    width: 300px;
    height: 300px;
    left: -90px;
    top: 30px;
    background: linear-gradient(135deg, #ffd54a, #f0a200)
}

.mga-drop.d2 {
    width: 220px;
    height: 220px;
    right: -50px;
    bottom: 30px;
    background: linear-gradient(135deg, #ff6a4d, #d0151d)
}

/* 2 story */
.mga-photo {
    position: relative;
    aspect-ratio: 1/1;
    max-width: 500px;
    margin: 0 auto;
    border-radius: 50% 0 50% 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #ffd54a, #f0a200 55%, #143a82);
    box-shadow: 0 30px 60px -24px rgba(20, 54, 126, .5)
}

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

.mga-badge {
    position: absolute;
    left: 8%;
    bottom: 8%;
    width: 112px;
    height: 112px;
    border-radius: 50% 50% 50% 8px;
    background: var(--red);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .25)
}

.mga-badge strong {
    font-size: 28px;
    line-height: 1
}

.mga-badge span {
    font-size: 12px
}

.mga-quote {
    margin: 26px 0 0;
    padding: 18px 24px;
    border-left: 5px solid #f0a200;
    background: #fff;
    border-radius: 0 18px 18px 0;
    font-size: 16px;
    font-style: italic;
    font-weight: 500;
    color: var(--navy);
    box-shadow: 0 10px 30px rgba(60, 40, 0, .07)
}

/* 3 stats */
.mga-stats {
    padding: 60px 0;
    background: linear-gradient(120deg, #ffd54a, #f0a200 55%, #f26a0b)
}

.mga-stat {
    color: #2b1a00
}

.mga-stat b {
    font-size: clamp(40px, 5vw, 60px);
    font-weight: 800;
    line-height: 1
}

.mga-stat i {
    font-style: normal;
    font-size: 34px;
    font-weight: 700
}

.mga-stat span {
    display: block;
    margin-top: 6px;
    font-size: 15px;
    font-weight: 600
}

/* 4 timeline */
.mga-timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto
}

.mga-timeline::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    margin-left: -1.5px;
    background: linear-gradient(#f0a200, var(--red), var(--navy))
}

.mga-tl {
    position: relative;
    width: 50%;
    padding: 0 50px 44px 0;
    text-align: right
}

.mga-tl:nth-child(even) {
    margin-left: 50%;
    padding: 0 0 44px 50px;
    text-align: left
}

.mga-tl::after {
    content: "";
    position: absolute;
    right: -11px;
    top: 14px;
    width: 22px;
    height: 22px;
    border-radius: 50% 0 50% 50%;
    transform: rotate(-45deg);
    background: linear-gradient(135deg, #ffd54a, var(--red));
    border: 3px solid #fbf8f1
}

.mga-tl:nth-child(even)::after {
    right: auto;
    left: -11px
}

.mga-year {
    display: inline-block;
    font-size: 34px;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 6px
}

.mga-tl-card {
    background: #fff;
    padding: 22px 24px;
    border-radius: 22px 22px 22px 6px;
    box-shadow: 0 12px 34px rgba(60, 40, 0, .08)
}

.mga-tl:nth-child(odd) .mga-tl-card {
    border-radius: 22px 22px 6px 22px
}

.mga-tl-card h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 6px
}

.mga-tl-card p {
    margin: 0;
    font-size: 14px
}

/* 5 mission / vision */
.mga-mv {
    height: 100%;
    padding: 44px 38px;
    border-radius: 30px 30px 30px 8px;
    color: #fff;
    position: relative;
    overflow: hidden
}

.mga-m1 {
    background: linear-gradient(135deg, #143a82, #3b7bd6)
}

.mga-m2 {
    background: linear-gradient(135deg, #d0151d, #ff6a4d)
}

.mga-mv::after {
    content: "";
    position: absolute;
    right: -50px;
    bottom: -60px;
    width: 180px;
    height: 180px;
    border-radius: 50% 0 50% 50%;
    transform: rotate(-45deg);
    background: rgba(255, 255, 255, .12)
}

.mga-ico {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
    border-radius: 50% 50% 50% 10px;
    background: rgba(255, 255, 255, .2)
}

.mga-ico svg {
    width: 30px;
    height: 30px
}

.mga-mv h3 {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 10px
}

.mga-mv p {
    margin: 0;
    color: #fff;
    opacity: .95
}

/* 6 values */
.mga-val {
    height: 100%;
    padding: 34px 26px;
    text-align: center;
    background: #fff;
    border-radius: 26px 26px 26px 6px;
    box-shadow: 0 12px 34px rgba(60, 40, 0, .08);
    transition: .3s
}

.mga-val:hover {
    transform: translateY(-8px)
}

.mga-val i {
    display: block;
    width: 54px;
    height: 54px;
    margin: 0 auto 18px;
    border-radius: 50% 0 50% 50%;
    transform: rotate(-45deg);
    background: linear-gradient(135deg, var(--c1), var(--c2))
}

.mga-val h4 {
    font-size: 19px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 8px
}

.mga-val p {
    font-size: 14px;
    margin: 0
}

.v1 {
    --c1: #ffd54a;
    --c2: #f0a200
}

.v2 {
    --c1: #3b7bd6;
    --c2: #143a82
}

.v3 {
    --c1: #ff6a4d;
    --c2: #d0151d
}

.v4 {
    --c1: #b4de5a;
    --c2: #2f8f3f
}

/* 7 people */
.mga-person {
    height: 100%;
    padding: 36px 26px;
    text-align: center;
    background: #fbf8f1;
    border-radius: 26px;
    transition: .3s
}

.mga-person:hover {
    box-shadow: 0 18px 40px rgba(60, 40, 0, .12);
    transform: translateY(-6px)
}

.mga-av {
    position: relative;
    width: 130px;
    height: 130px;
    margin: 0 auto 20px;
    border-radius: 50% 0 50% 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 30px
}

.mga-av img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.a1 {
    background: linear-gradient(135deg, #ffd54a, #f0a200)
}

.a2 {
    background: linear-gradient(135deg, #3b7bd6, #143a82)
}

.a3 {
    background: linear-gradient(135deg, #ff6a4d, #d0151d)
}

.mga-person h4 {
    font-size: 19px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 4px
}

.mga-person small {
    display: block;
    color: var(--red);
    font-weight: 600;
    margin-bottom: 12px
}

.mga-person p {
    font-size: 14px;
    margin: 0
}

/* 8 process */
.mga-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    position: relative
}

.mga-step {
    text-align: center;
    position: relative
}

.mga-step span {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50% 50% 50% 10px;
    background: linear-gradient(135deg, #f0a200, var(--red));
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    box-shadow: 0 10px 22px -8px var(--red)
}

.mga-step h5 {
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 6px
}

.mga-step p {
    font-size: 13.5px;
    margin: 0;
    line-height: 1.7
}

.mga-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 32px;
    left: calc(50% + 44px);
    width: calc(100% - 68px);
    border-top: 2px dashed #e0d6bd
}

/* 9 brands */
.mga-brands {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px
}

.mga-brands a {
    padding: 15px 34px;
    border-radius: 50px 50px 50px 8px;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    background: linear-gradient(135deg, var(--c1), var(--c2));
    box-shadow: 0 12px 24px -10px var(--c2);
    transition: .3s
}

.mga-brands a:hover {
    transform: translateY(-5px);
    color: #fff
}

.b1 {
    --c1: #f7c12a;
    --c2: #e08f00
}

.b2 {
    --c1: #ff6a4d;
    --c2: #d0151d
}

.b3 {
    --c1: #3b7bd6;
    --c2: #143a82
}

.b4 {
    --c1: #ffb347;
    --c2: #f26a0b
}

.b5 {
    --c1: #8ccf4a;
    --c2: #2f8f3f
}

/* 10 CTA */
.mga-cta {
    padding: 80px 0;
    text-align: center;
    color: #fff;
    background: linear-gradient(150deg, var(--navy), var(--navy-d))
}

.mga-cta h2 {
    font-size: clamp(26px, 3.4vw, 38px);
    font-weight: 800;
    margin: 0 0 10px
}

.mga-cta p {
    margin: 0 0 28px;
    color: #cfd8ee
}

.mga-btn {
    display: inline-block;
    padding: 14px 38px;
    border-radius: 50px 50px 50px 6px;
    background: var(--red);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: .25s
}

.mga-btn:hover {
    background: #ffd54a;
    color: #2b1a00;
    transform: translateY(-3px)
}

/* responsive */
@media(max-width:991px) {
    .mga-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 34px
    }

    .mga-step:not(:last-child)::after {
        display: none
    }
}

@media(max-width:767px) {
    .mga-sec {
        padding: 64px 0
    }

    .mga-timeline::before {
        left: 12px
    }

    .mga-tl,
    .mga-tl:nth-child(even) {
        width: 100%;
        margin-left: 0;
        padding: 0 0 34px 44px;
        text-align: left
    }

    .mga-tl::after,
    .mga-tl:nth-child(even)::after {
        left: 1px;
        right: auto
    }

    .mga-tl:nth-child(odd) .mga-tl-card {
        border-radius: 22px 22px 22px 6px
    }
}

@media(max-width:480px) {
    .mga-steps {
        grid-template-columns: 1fr
    }
}

@media(prefers-reduced-motion:reduce) {
    .mga-reveal {
        opacity: 1;
        transform: none;
        transition: none
    }
}
























/* products-page-css */
/* ===== PRODUCT DETAIL PAGE (prefix: mgv-) ===== */
.mgv-intro,
.mgv-vars,
.mgv-more {
    --navy: #14367e;
    --red: #e31e24;
    --ink: #2b2b2b;
    font-family: 'Poppins', sans-serif
}

.mgv-gold {
    --c1: #ffd54a;
    --c2: #f0a200
}

.mgv-fry {
    --c1: #ff6a4d;
    --c2: #d0151d
}

.mgv-dada {
    --c1: #3b7bd6;
    --c2: #143a82
}

.mgv-kadai {
    --c1: #ffb347;
    --c2: #f26a0b
}

/* ---------- intro ---------- */
.mgv-intro {
    padding: 70px 0 60px;
    background: #fbf8f1;
    color: #5b5650
}

.mgv-stage {
    position: relative;
    height: 440px;
    display: flex;
    align-items: flex-end;
    justify-content: center
}

.mgv-drop {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 310px;
    height: 310px;
    margin: -155px 0 0 -155px;
    border-radius: 50% 0 50% 50%;
    transform: rotate(-45deg);
    background: linear-gradient(135deg, var(--c1), var(--c2));
    opacity: .88;
    box-shadow: 0 30px 60px -22px var(--c2)
}

.mgv-drop::before {
    content: "";
    position: absolute;
    inset: 24px 90px 110px 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, .55), transparent)
}

.mgv-ripple {
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    height: 34px;
    border: 2px solid var(--c2);
    border-radius: 50%
}

.mgv-ripple.r1 {
    width: 240px;
    opacity: .5
}

.mgv-ripple.r2 {
    width: 340px;
    height: 50px;
    bottom: 22px;
    opacity: .22
}

.mgv-img {
    position: relative;
    z-index: 2;
    max-height: 380px;
    max-width: 80%;
    object-fit: contain;
    margin-bottom: 34px;
    filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .25))
}

.mgv-mini {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50% 0 50% 50%;
    transform: rotate(-45deg);
    background: linear-gradient(135deg, var(--c1), var(--c2));
    opacity: .8;
    animation: mgvF 5s ease-in-out infinite
}

.mgv-mini.m1 {
    left: 8%;
    top: 20%
}

.mgv-mini.m2 {
    right: 6%;
    top: 40%;
    width: 30px;
    height: 30px;
    animation-delay: -2s
}

@keyframes mgvF {
    50% {
        translate: 0 -14px
    }
}

.mgv-tag {
    display: inline-block;
    padding: 5px 16px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, var(--c1), var(--c2))
}

.mgv-name {
    font-size: clamp(38px, 5vw, 60px);
    font-weight: 800;
    line-height: 1.08;
    margin: 12px 0 6px;
    background: linear-gradient(90deg, var(--c1), var(--c2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.mgv-sub {
    font-size: 21px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 14px
}

.mgv-desc {
    font-size: 15px;
    line-height: 1.85;
    margin: 0 0 12px
}

.mgv-points {
    list-style: none;
    margin: 20px 0 30px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 22px
}

.mgv-points li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14px;
    color: #3a3a3a
}

.mgv-points svg {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    padding: 4px;
    border-radius: 50% 50% 50% 5px;
    color: #fff;
    background: linear-gradient(135deg, var(--c1), var(--c2))
}

.mgv-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 22px
}

.mgv-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    border-radius: 50px 50px 50px 6px;
    background: var(--red);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 12px 24px -10px var(--red);
    transition: .25s
}

.mgv-btn:hover {
    background: var(--navy);
    color: #fff;
    transform: translateY(-3px)
}

.mgv-btn svg {
    transition: transform .25s
}

.mgv-btn:hover svg {
    transform: translateX(4px)
}

.mgv-btn-o {
    background: transparent;
    color: var(--navy);
    box-shadow: none;
    border: 2px solid var(--navy)
}

.mgv-btn-o:hover {
    background: var(--navy);
    color: #fff
}

.mgv-facts {
    margin-top: 56px
}

.mgv-fact {
    height: 100%;
    padding: 20px 24px;
    background: #fff;
    border-radius: 20px 20px 20px 6px;
    border-left: 5px solid var(--c2);
    box-shadow: 0 10px 28px rgba(60, 40, 0, .07)
}

.mgv-fact small {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #8a8478
}

.mgv-fact strong {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink)
}

/* ---------- variants (e-commerce cards) ---------- */
.mgv-vars {
    padding: 80px 0;
    background: #fff;
    scroll-margin-top: 20px
}

.mgv-vhead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 38px;
    padding-bottom: 20px;
    border-bottom: 2px solid #f0ead8
}

.mgv-script {
    font-family: 'Dancing Script', cursive;
    font-weight: 700;
    font-size: 28px;
    color: var(--navy);
    display: block;
    line-height: 1.1
}

.mgv-vhead h2 {
    margin: 4px 0 0;
    font-size: clamp(26px, 3.2vw, 38px);
    font-weight: 800;
    color: var(--ink)
}

.mgv-count {
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    background: #eef2fb
}

.mgv-card {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 24px 24px 24px 6px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(60, 40, 0, .07);
    transition: transform .3s, box-shadow .3s, border-color .3s
}

.mgv-card:hover {
    transform: translateY(-8px);
    border-color: var(--c2);
    box-shadow: 0 24px 48px -14px rgba(60, 40, 0, .2)
}

.mgv-ribbon {
    position: absolute;
    left: 16px;
    top: 16px;
    z-index: 3;
    padding: 4px 14px;
    border-radius: 50px;
    font-size: 11.5px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, var(--c1), var(--c2))
}

.mgv-thumb {
    position: relative;
    height: 240px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--c2);
    background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--c1) 38%, #fff), color-mix(in srgb, var(--c2) 10%, #fff))
}

.mgv-thumb::before {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    border-radius: 50% 0 50% 50%;
    transform: rotate(-45deg);
    background: linear-gradient(135deg, var(--c1), var(--c2));
    opacity: .28;
    transition: transform .4s
}

.mgv-card:hover .mgv-thumb::before {
    transform: rotate(-45deg) scale(1.12)
}

.mgv-thumb svg {
    position: relative;
    width: 76px;
    height: 100px
}

.mgv-thumb img {
    position: absolute;
    inset: 14px;
    width: calc(100% - 28px);
    height: calc(100% - 28px);
    object-fit: contain;
    z-index: 2;
    background: transparent;
    filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .22));
    transition: transform .4s
}

.mgv-card:hover .mgv-thumb img {
    transform: scale(1.07)
}

.mgv-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 24px 24px
}

.mgv-brand {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--c2)
}

.mgv-body h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ink);
    margin: 4px 0 14px;
    min-height: 50px
}

.mgv-spec {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    border-top: 1px dashed rgba(0, 0, 0, .12)
}

.mgv-spec li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px dashed rgba(0, 0, 0, .12);
    font-size: 13.5px
}

.mgv-spec span {
    color: #8a8478
}

.mgv-spec b {
    color: var(--ink);
    font-weight: 600;
    text-align: right
}

.mgv-buy {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 20px;
    border-radius: 50px 50px 50px 6px;
    background: var(--red);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: .25s
}

.mgv-buy:hover {
    background: var(--navy);
    color: #fff
}

.mgv-buy svg {
    transition: transform .25s
}

.mgv-buy:hover svg {
    transform: translateX(5px)
}

/* ---------- other brands ---------- */
.mgv-more {
    padding: 60px 0 80px;
    background: #fbf8f1;
    text-align: center
}

.mgv-more h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 24px
}

.mgv-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px
}

.mgv-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 30px;
    border-radius: 50px 50px 50px 8px;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    background: linear-gradient(135deg, var(--c1), var(--c2));
    box-shadow: 0 12px 24px -10px var(--c2);
    transition: .3s
}

.mgv-chip:hover {
    transform: translateY(-5px);
    color: #fff
}

@media(max-width:767px) {
    .mgv-intro {
        padding: 50px 0 40px
    }

    .mgv-stage {
        height: 370px
    }

    .mgv-drop {
        width: 250px;
        height: 250px;
        margin: -125px 0 0 -125px
    }

    .mgv-img {
        max-height: 300px
    }

    .mgv-points {
        grid-template-columns: 1fr
    }

    .mgv-vars {
        padding: 60px 0
    }

    .mgv-body h3 {
        min-height: 0
    }
}

@media(prefers-reduced-motion:reduce) {
    .mgv-mini {
        animation: none
    }
}














/* =========================================================
   MG Oils – WhatsApp enquiry button (icon + shine + pulse)
   Use together with the existing  .mgv-btn  class
   ========================================================= */
.mgv-actions .mgv-btn.mgv-wa {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    color: #fff;
    border: 0;
    text-decoration: none;
    background: linear-gradient(120deg, #2fe27a 0%, #25d366 40%, #128c7e 100%);
    background-size: 160% 100%;
    background-position: 0 0;
    box-shadow: 0 10px 24px rgba(37, 211, 102, .38);
    transition: transform .25s, box-shadow .25s, background-position .4s;
}

.mgv-actions .mgv-btn.mgv-wa:hover {
    color: #fff;
    background-position: 100% 0;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(18, 140, 126, .45);
}

/* icon + pulsing ring */
.mgv-wa-ico {
    position: relative;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px
}

.mgv-wa-ico svg {
    position: relative;
    z-index: 1;
    width: 24px;
    height: 24px;
    fill: currentColor;
    animation: mgvWaWiggle 3.2s ease-in-out infinite;
    transform-origin: 50% 60%
}

.mgv-wa-ico::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    animation: mgvWaPulse 2s ease-out infinite;
}

/* continuous shine sweep */
.mgv-actions .mgv-btn.mgv-wa::after {
    content: "";
    position: absolute;
    top: -10%;
    bottom: -10%;
    left: -70%;
    width: 45%;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .65) 50%, transparent 100%);
    transform: skewX(-22deg);
    animation: mgvWaShine 2.8s ease-in-out infinite;
}

@keyframes mgvWaShine {
    0% {
        left: -70%
    }

    55%,
    100% {
        left: 140%
    }
}

@keyframes mgvWaPulse {
    0% {
        transform: scale(.8);
        opacity: .7
    }

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

@keyframes mgvWaWiggle {

    0%,
    82%,
    100% {
        transform: rotate(0)
    }

    86% {
        transform: rotate(-14deg)
    }

    90% {
        transform: rotate(12deg)
    }

    94% {
        transform: rotate(-8deg)
    }

    97% {
        transform: rotate(5deg)
    }
}

@media (max-width:575.98px) {
    .mgv-actions .mgv-btn.mgv-wa {
        justify-content: center
    }
}

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

    .mgv-actions .mgv-btn.mgv-wa::after,
    .mgv-wa-ico::before,
    .mgv-wa-ico svg {
        animation: none !important
    }
}


















/* =========================================================
   MG Oils – Contact page sections (cream + gold + green)
   ========================================================= */
.mgc-info,
.mgc-form-sec,
.mgc-map {
    --c-green: #1d5c2a;
    --c-green-2: #2e8b3a;
    --c-green-3: #14421e;
    --c-gold: #f5b800;
    --c-cream: #fffbe6;
    --c-brown: #6b3a14;
    --c-grad: linear-gradient(120deg, #2e8b3a 0%, #1d5c2a 60%, #14421e 100%);
    font-family: 'Outfit', sans-serif;
    color: var(--c-green-3);
}

/* ---------- headings ---------- */
.mgc-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 2.6rem
}

.mgc-head-sm {
    margin-bottom: 2rem
}

.mgc-eyebrow {
    display: inline-block;
    font-size: .82rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--c-brown);
    font-weight: 400;
    padding: .25rem .9rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #fff3b8, #ffe27a)
}

.mgc-head h2 {
    margin: .7rem 0 .5rem;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 400;
    color: var(--c-green)
}

.mgc-head p {
    margin: 0;
    font-weight: 300;
    color: #4a5a4d;
    font-size: 1.05rem
}

/* ---------- 1. info cards ---------- */
.mgc-info {
    padding: 4.5rem 0 3rem;
    background: linear-gradient(180deg, #fffdf0, #fff)
}

.mgc-card {
    position: relative;
    height: 100%;
    padding: 2rem 1.6rem 1.8rem;
    text-align: center;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(29, 92, 42, .12);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(107, 58, 20, .08);
    transition: transform .3s, box-shadow .3s;
}

.mgc-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: linear-gradient(90deg, #1d5c2a, #f5b800, #ff9d00)
}

.mgc-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 44px rgba(29, 92, 42, .18)
}

.mgc-ico {
    width: 62px;
    height: 62px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--c-grad);
    box-shadow: 0 10px 22px rgba(29, 92, 42, .3);
    transition: transform .35s
}

.mgc-card:hover .mgc-ico {
    transform: rotate(-8deg) scale(1.06)
}

.mgc-ico svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round
}

.mgc-card h3 {
    margin: 0 0 .5rem;
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--c-green)
}

.mgc-card a,
.mgc-card address {
    margin: 0;
    font-style: normal;
    font-weight: 300;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #33443a;
    text-decoration: none;
    word-break: break-word;
    transition: color .2s
}

.mgc-card a:hover {
    color: var(--c-green-2)
}

.mgc-card-wide address {
    font-size: .98rem
}

/* ---------- 2. form ---------- */
.mgc-form-sec {
    padding: 2rem 0 4.5rem;
    background: #fff
}

.mgc-form-wrap {
    max-width: 1060px;
    margin: 0 auto;
    padding: 2.4rem 2.4rem 2.2rem;
    border-radius: 22px;
    background: linear-gradient(180deg, #fffdf4, #fff);
    border: 1px solid rgba(29, 92, 42, .12);
    box-shadow: 0 24px 60px rgba(107, 58, 20, .12)
}

.mgc-form label {
    display: block;
    margin-bottom: .35rem;
    font-size: .93rem;
    font-weight: 400;
    color: var(--c-green)
}

.mgc-form label i {
    color: #d62a30;
    font-style: normal
}

.mgc-form input,
.mgc-form textarea {
    width: 100%;
    padding: .75rem .95rem;
    font: inherit;
    font-weight: 300;
    font-size: 1rem;
    color: #1b2a1e;
    background: #fff;
    border: 1px solid rgba(29, 92, 42, .28);
    border-radius: 10px;
    transition: border-color .2s, box-shadow .2s
}

.mgc-form textarea {
    resize: vertical;
    min-height: 130px
}

.mgc-form input::placeholder,
.mgc-form textarea::placeholder {
    color: #9aa79c
}

.mgc-form input:focus,
.mgc-form textarea:focus {
    outline: 0;
    border-color: var(--c-green-2);
    box-shadow: 0 0 0 4px rgba(46, 139, 58, .16)
}

.mgc-err {
    display: none;
    margin-top: .3rem;
    font-size: .82rem;
    color: #d62a30
}

.mgc-form .is-bad {
    border-color: #d62a30;
    box-shadow: 0 0 0 4px rgba(214, 42, 48, .1)
}

.mgc-form .is-bad+.mgc-err {
    display: block
}

.mgc-hp {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden
}

.mgc-submit {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-width: 220px;
    margin-top: .5rem;
    padding: .9rem 2rem;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-weight: 500;
    font-size: 1.05rem;
    color: #fff;
    background: var(--c-grad);
    background-size: 160% 100%;
    background-position: 0 0;
    box-shadow: 0 10px 24px rgba(29, 92, 42, .35);
    transition: background-position .4s, transform .25s, box-shadow .25s
}

.mgc-submit svg {
    width: 18px;
    height: 18px;
    transition: transform .25s
}

.mgc-submit:hover {
    background-position: 100% 0;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(29, 92, 42, .45)
}

.mgc-submit:hover svg {
    transform: translateX(4px)
}

.mgc-submit:disabled {
    opacity: .75;
    cursor: progress;
    transform: none
}

.mgc-spin {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: mgcspin .7s linear infinite
}

.mgc-submit.is-loading svg {
    display: none
}

.mgc-submit.is-loading .mgc-spin {
    display: inline-block
}

@keyframes mgcspin {
    to {
        transform: rotate(360deg)
    }
}

.mgc-alert {
    margin-bottom: .9rem;
    padding: .8rem 1rem;
    border-radius: 10px;
    font-size: .95rem
}

.mgc-alert.is-error {
    background: #fdecec;
    color: #a11a20;
    border: 1px solid #f5c2c4
}

.mgc-alert.is-ok {
    background: #e8f6ea;
    color: var(--c-green-3);
    border: 1px solid #bfe3c5
}

/* ---------- 3. map ---------- */
.mgc-map {
    line-height: 0;
    border-top: 4px solid transparent;
    border-image: linear-gradient(90deg, #1d5c2a, #2e8b3a 30%, #f5b800 65%, #ff9d00) 1
}

.mgc-map iframe {
    display: block;
    width: 100%;
    height: 460px;
    border: 0
}

@media (max-width:575.98px) {
    .mgc-info {
        padding: 3rem 0 2rem
    }

    .mgc-form-wrap {
        padding: 1.6rem 1.2rem
    }

    .mgc-submit {
        width: 100%
    }

    .mgc-map iframe {
        height: 360px
    }
}

@media (prefers-reduced-motion:reduce) {
    .mgc-spin {
        animation: none !important
    }

    .mgc-card,
    .mgc-ico {
        transition: none
    }
}


























/* ===== WHOLESALE PAGE (prefix: mgw-) ===== */
.mgw-hero,
.mgw-sec,
.mgw-process,
.mgw-cta {
    --navy: #14367e;
    --navy-d: #0b2056;
    --red: #e31e24;
    --gold: #f0a200;
    --ink: #2b2b2b;
    font-family: 'Poppins', sans-serif
}

.mgw-reveal {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .7s, transform .7s
}

.mgw-reveal.in {
    opacity: 1;
    transform: none
}

/* shared */
.mgw-sec {
    padding: 90px 0;
    background: #fbf8f1;
    color: #5b5650
}

.mgw-alt {
    background: #fff
}

.mgw-sec p {
    font-size: 15px;
    line-height: 1.85;
    margin: 0 0 14px
}

.mgw-script {
    font-family: 'Dancing Script', cursive;
    font-weight: 700;
    font-size: 30px;
    color: var(--navy);
    display: block;
    line-height: 1.1
}

.mgw-h2 {
    font-size: clamp(27px, 3.3vw, 40px);
    font-weight: 800;
    line-height: 1.2;
    color: var(--ink);
    margin: 6px 0 18px
}

.mgw-head {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 52px
}

.mgw-head .mgw-h2::after {
    content: "";
    display: block;
    width: 54px;
    height: 6px;
    margin: 16px auto 0;
    border-radius: 50px;
    background: linear-gradient(90deg, var(--gold), var(--red))
}

.mgw-w {
    color: #fff !important
}

.mgw-script.mgw-w {
    color: #ffd54a !important
}

.mgw-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 34px;
    border: 0;
    border-radius: 50px 50px 50px 6px;
    background: var(--red);
    color: #fff;
    font: 600 14px 'Poppins', sans-serif;
    text-decoration: none;
    box-shadow: 0 12px 24px -10px var(--red);
    transition: .25s;
    cursor: pointer
}

.mgw-btn:hover {
    background: var(--navy);
    color: #fff;
    transform: translateY(-3px)
}

.mgw-btn svg {
    transition: transform .25s
}

.mgw-btn:hover svg {
    transform: translateX(4px)
}

.mgw-btn-w {
    background: transparent;
    border: 2px solid #fff;
    box-shadow: none
}

.mgw-btn-w:hover {
    background: #fff;
    color: var(--navy)
}

/* image slots: placeholder shows label until real image is added */
.mgw-img {
    position: relative;
    overflow: hidden;
    min-height: 300px;
    background: linear-gradient(135deg, #ffd54a, #f0a200 50%, #143a82)
}

.mgw-img::after {
    content: attr(data-label);
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, .85);
    font-weight: 600;
    font-size: 18px;
    z-index: 0;
    text-align: center;
    padding: 10px
}

.mgw-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform .6s
}

.mgw-img:hover img {
    transform: scale(1.06)
}

/* 1 hero */
.mgw-hero {
    position: relative;
    padding: 150px 0 130px;
    color: #fff;
    text-align: center;
    background: linear-gradient(150deg, rgba(11, 32, 86, .88), rgba(20, 54, 126, .78)), var(--hero, url('https://static.wixstatic.com/media/469dea_dbb59c3c6ef14ecba4e113239230c141~mv2.png/v1/fill/w_1344,h_768,al_c/469dea_dbb59c3c6ef14ecba4e113239230c141~mv2.png')) center/cover, linear-gradient(150deg, var(--navy), var(--navy-d))
}

.mgw-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 60px;
    background: #fbf8f1;
    border-radius: 50% 50% 0 0/100% 100% 0 0
}

.mgw-hero h1 {
    font-size: clamp(34px, 5.4vw, 62px);
    font-weight: 800;
    line-height: 1.12;
    margin: 8px auto 18px;
    max-width: 900px
}

.mgw-hero p {
    max-width: 720px;
    margin: 0 auto 32px;
    font-size: 16.5px;
    line-height: 1.8;
    color: #dbe4f7
}

.mgw-hbtn {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap
}

/* 2 intro collage */
.mgw-collage {
    position: relative;
    height: 520px
}

.mgw-c1 {
    position: absolute;
    left: 0;
    top: 0;
    width: 72%;
    height: 380px;
    border-radius: 200px 24px 200px 24px;
    box-shadow: 0 26px 50px -20px rgba(20, 54, 126, .5)
}

.mgw-c2 {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 58%;
    height: 290px;
    border-radius: 24px 150px 24px 150px;
    border: 8px solid #fbf8f1;
    box-shadow: 0 26px 50px -20px rgba(0, 0, 0, .35)
}

.mgw-stats {
    display: flex;
    gap: 34px;
    flex-wrap: wrap;
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px dashed rgba(0, 0, 0, .15)
}

.mgw-stats b {
    font-size: 42px;
    font-weight: 800;
    color: var(--navy);
    line-height: 1
}

.mgw-stats i {
    font-style: normal;
    font-size: 26px;
    font-weight: 700;
    color: var(--red)
}

.mgw-stats span {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #6b655c;
    margin-top: 4px
}

/* feature rows */
.mgw-s1,
.mgw-s2 {
    min-height: 440px
}

.mgw-s1 {
    border-radius: 180px 24px 180px 24px
}

.mgw-s2 {
    border-radius: 24px 180px 24px 180px
}

.mgw-s1::before,
.mgw-s2::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .5)
}

.mgw-list {
    list-style: none;
    counter-reset: n;
    margin: 22px 0 0;
    padding: 0
}

.mgw-list li {
    counter-increment: n;
    position: relative;
    padding: 12px 0 12px 62px;
    border-bottom: 1px dashed rgba(0, 0, 0, .13);
    font-size: 14.5px;
    color: #3a3a3a
}

.mgw-list li::before {
    content: "0" counter(n);
    position: absolute;
    left: 0;
    top: 9px;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    background: linear-gradient(135deg, var(--gold), var(--red));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

/* packaging */
.mgw-pk {
    height: 100%;
    text-align: center
}

.mgw-pi {
    min-height: 260px;
    border-radius: 26px 26px 26px 6px;
    margin-bottom: 18px;
    box-shadow: 0 14px 34px rgba(60, 40, 0, .12)
}

.mgw-pk h4 {
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 8px
}

.mgw-pk p {
    font-size: 14px;
    margin: 0 auto;
    max-width: 320px
}

/* brands */
.mgw-brand {
    height: 100%;
    background: #fff;
    border-radius: 24px 24px 24px 6px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .07);
    box-shadow: 0 10px 30px rgba(60, 40, 0, .07);
    transition: .3s
}

.mgw-brand:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 46px -14px rgba(60, 40, 0, .2)
}

.mgw-bi {
    min-height: 230px
}

.mgw-bb {
    padding: 22px 22px 24px
}

.mgw-bb small {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--c2)
}

.mgw-bb h4 {
    font-size: 22px;
    font-weight: 800;
    margin: 4px 0 6px;
    color: var(--ink)
}

.mgw-bb p {
    font-size: 13.5px;
    margin: 0 0 14px
}

.mgw-bb a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--red);
    text-decoration: none
}

.mgw-bb a:hover {
    color: var(--navy)
}

.mgw-brand::before {
    content: "";
    display: block;
    height: 6px;
    background: linear-gradient(90deg, var(--c1), var(--c2))
}

.b1 {
    --c1: #ffd54a;
    --c2: #e08f00
}

.b2 {
    --c1: #ff6a4d;
    --c2: #d0151d
}

.b3 {
    --c1: #3b7bd6;
    --c2: #143a82
}

.b4 {
    --c1: #ffb347;
    --c2: #f26a0b
}

/* who we serve */
.mgw-who {
    position: relative;
    height: 100%;
    border-radius: 26px 26px 26px 6px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(60, 40, 0, .14)
}

.mgw-wi {
    min-height: 360px
}

.mgw-wo {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 60px 22px 22px;
    color: #fff;
    background: linear-gradient(to top, rgba(11, 32, 86, .95), rgba(11, 32, 86, .55) 60%, transparent)
}

.mgw-wo h4 {
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 6px
}

.mgw-wo p {
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
    color: #dbe4f7
}

/* process */
.mgw-process {
    padding: 90px 0;
    background: linear-gradient(150deg, var(--navy), var(--navy-d));
    color: #fff
}

.mgw-process .mgw-h2 {
    color: #fff
}

.mgw-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px
}

.mgw-step {
    position: relative;
    padding: 8px 8px 0 0
}

.mgw-step b {
    display: block;
    font-size: 64px;
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px #ffd54a
}

.mgw-step h5 {
    font-size: 19px;
    font-weight: 700;
    margin: 10px 0 8px
}

.mgw-step p {
    font-size: 14px;
    line-height: 1.75;
    color: #cfd8ee;
    margin: 0
}

.mgw-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 34px;
    left: 100px;
    right: -10px;
    border-top: 2px dashed rgba(255, 213, 74, .45)
}

/* enquiry */
.mgw-eq {
    margin-top: 20px;
    min-height: 260px
}

.mgw-form {
    padding: 38px;
    background: #fff;
    border-radius: 30px 30px 30px 8px;
    box-shadow: 0 24px 60px -20px rgba(20, 54, 126, .3);
    border-top: 6px solid var(--gold)
}

.mgw-form .form-control,
.mgw-form .form-select {
    padding: 13px 16px;
    border-radius: 14px 14px 14px 4px;
    border: 1px solid #e3dccb;
    background: #fdfbf6;
    font-size: 14px
}

.mgw-form .form-control:focus,
.mgw-form .form-select:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 .2rem rgba(240, 162, 0, .18)
}

/* faq */
.mgw-faq .accordion-item {
    border: 0;
    margin-bottom: 14px;
    border-radius: 18px 18px 18px 6px !important;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(60, 40, 0, .08)
}

.mgw-faq .accordion-button {
    padding: 20px 24px;
    font: 600 16px 'Poppins', sans-serif;
    color: var(--ink);
    background: #fbf8f1;
    box-shadow: none
}

.mgw-faq .accordion-button:not(.collapsed) {
    color: var(--navy);
    background: #fff6dc
}

.mgw-faq .accordion-body {
    font-size: 14.5px;
    line-height: 1.85;
    color: #5b5650;
    background: #fff
}

/* cta */
.mgw-cta {
    padding: 80px 0;
    text-align: center;
    color: #fff;
    background: linear-gradient(120deg, #143a82, #3b7bd6 60%, #143a82)
}

.mgw-cta h2 {
    font-size: clamp(26px, 3.4vw, 38px);
    font-weight: 800;
    margin: 0 0 10px
}

.mgw-cta p {
    margin: 0 0 28px;
    color: #dbe4f7
}

@media(max-width:991px) {
    .mgw-steps {
        grid-template-columns: repeat(2, 1fr)
    }

    .mgw-step::after {
        display: none
    }

    .mgw-collage {
        height: 460px
    }

    .mgw-s1,
    .mgw-s2 {
        min-height: 340px
    }
}

@media(max-width:767px) {

    .mgw-sec,
    .mgw-process {
        padding: 64px 0
    }

    .mgw-hero {
        padding: 110px 0 100px
    }

    .mgw-s1 {
        border-radius: 100px 20px 100px 20px
    }

    .mgw-s2 {
        border-radius: 20px 100px 20px 100px
    }

    .mgw-collage {
        height: 400px
    }

    .mgw-c1 {
        height: 280px
    }

    .mgw-c2 {
        height: 210px
    }

    .mgw-steps {
        grid-template-columns: 1fr
    }

    .mgw-form {
        padding: 26px 20px
    }
}

@media(prefers-reduced-motion:reduce) {
    .mgw-reveal {
        opacity: 1;
        transform: none;
        transition: none
    }
}