:root {
    --navy: #006B70;
    --navy2: #005B60;
    --green: #1e5a46;
    --green2: #2d745b;
    --ice: #eaf4f6;
    --paper: #f7f8f5;
    --white: #fff;
    --ink: #15212b;
    --muted: #66737d;
    --line: #dce3e5;
    --shadow: 0 18px 45px rgba(10, 34, 57, .10);
    --radius: 14px;
    --container: 1240px
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif;
    color: var(--ink);
    background: var(--white);
    line-height: 1.6
}

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

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

button,
input,
select,
textarea {
    font: inherit
}

.container {
    width: min(var(--container), calc(100% - 40px));
    margin: auto
}

.topbar {
    background: var(--navy);
    color: #dceaf2;
    font-size: .86rem
}

.topbar .container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 8px 0
}

.topbar-links {
    display: flex;
    gap: 18px;
    flex-wrap: wrap
}

.header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(10px)
}

.nav {
    display: flex;
    align-items: center;
    min-height: 76px;
    gap: 24px
}

.logo {
    font-weight: 900;
    letter-spacing: -.03em;
    font-size: 1.25rem;
    color: var(--navy);
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}


/* Logo Image */
.logo-img {
    height: 50px;
    width: auto;
    object-fit: contain;
    display: block;
}


/* Logo Text */
.logo-text {
    font-size: 1.25rem;
    font-weight: 900;
    white-space: nowrap;
}


/* Brand Colors */
.brand-blue {
    color: #1061da;
}


.brand-green {
    color: #1e5a46;
}
.logo-text {
    font-size:1.25rem;
    font-weight:900;
    white-space:nowrap;
    overflow:hidden;
    width:0;
    animation: typing 2.5s steps(20) forwards;
}


/* Typing Animation */
@keyframes typing {

    from {
        width:0;
    }

    to {
        width:220px;
    }

}
.navlinks {
    display: flex;
    gap: 22px;
    align-items: center;
    margin-left: auto
}

.navlinks a {
    font-weight: 650;
    font-size: .92rem
}
/* ==================================================
   RANGE OF PRODUCTS - DESKTOP DROPDOWN
================================================== */

.nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-dropdown-trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;

    gap: 7px;

    padding: 26px 0;

    color: var(--ink);
    font-size: .92rem;
    font-weight: 650;
    line-height: 1;

    white-space: nowrap;
    cursor: pointer;
}

.nav-dropdown-trigger .dropdown-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0;

    font-size: .72rem;
    line-height: 1;

    position: relative;
    top: -1px;

    transition: transform .25s ease;
}
/* Dropdown box */
.nav-dropdown-menu {
    position: absolute;

    top: calc(100% - 5px);
    left: 0;

    width: 370px;

    padding: 10px;

    background: #ffffff;

    border: 1px solid #e3e8ea;
    border-radius: 12px;

    box-shadow:
        0 22px 55px rgba(10, 34, 57, .15);

    opacity: 0;
    visibility: hidden;

    transform:
        
        translateY(12px);

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s ease;

    z-index: 9999;
}

/* Dropdown links */
.navlinks .nav-dropdown-menu a {
    display: block;left: 50%;


    width: 100%;

    padding: 11px 13px;

    border-radius: 7px;

    color: #15212b;

    font-size: .84rem;
    font-weight: 650;
    line-height: 1.35;

    white-space: normal;

    transition:
        background .2s ease,
        color .2s ease,
        padding-left .2s ease;
}

/* Hover link */
.navlinks .nav-dropdown-menu a:hover {
    padding-left: 18px;

    background: #eef8f6;
    color: #006b70;
}

/* Show dropdown */
.nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0);
}

/* Rotate arrow */
.nav-dropdown:hover
.nav-dropdown-trigger .dropdown-arrow {
    transform: rotate(180deg);
}
.nav-actions {
    display: flex;
    gap: 10px
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 9px;
    padding: 12px 18px;
    font-weight: 750;
    cursor: pointer;
    transition: .2s
}

.btn-primary {
    background: var(--green);
    color: white
}

.btn-dark {
    background: var(--navy);
    color: white
}

.btn-outline {
    border-color: #bcc9ce;
    background: white;
    color: var(--navy)
}

.btn:hover {
    transform: translateY(-2px)
}

.menu-btn {
    display: none;
    margin-left: auto;
    border: 0;
    background: none;
    font-size: 1.6rem
}

/* =========================
   FULL CINEMATIC HERO VIDEO
========================= */

.hero {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
}

.hero-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
    background: #000;
}

/* =========================================
   HERO LOGO — BOTTOM RIGHT
========================================= */

.hero-logo-cover {
    position: absolute;

    right: 110px;
    bottom: 80px;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 7px;

    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;

    z-index: 5;
}

.hero-logo-cover img {
    width: 68px;
    height: auto;
    display: block;
}

.hero-delivery-text {
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
    text-align: center;

    text-shadow: 0 2px 8px rgba(0,0,0,.7);
}

.trust-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 45px
}

.trust {
    border-left: 2px solid #65caa9;
    padding-left: 14px
}

.trust strong {
    display: block;
    font-size: 1.35rem
}

.trust span {
    font-size: .83rem;
    color: #cbd9df
}

.section {
    padding: 90px 0
}

.section.alt {
    background: var(--paper)
}

.section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 36px
}

.section-head h2 {
    font-size: clamp(2rem, 4vw, 3.2rem);
    letter-spacing: -.04em;
    line-height: 1.1;
    margin: 8px 0
}
.section-head p {
    max-width: 650px;
    color: var(--muted)
}

/* ==================================================
   HOME ABOUT PREVIEW — Annamithra
================================================== */

.home-about-preview {
    position: relative;
    overflow: hidden;

    padding: 115px 0;

    background:
        radial-gradient(
            circle at 8% 18%,
            rgba(22, 140, 255, .07),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 80%,
            rgba(39, 209, 127, .07),
            transparent 30%
        ),
        #ffffff;
}


/* subtle premium vertical accent */

.home-about-preview::before {
    content: "";

    position: absolute;

    left: 0;
    top: 18%;
    bottom: 18%;

    width: 4px;

    border-radius: 0 20px 20px 0;

    background:
        linear-gradient(
            180deg,
            #168cff,
            #27d17f,
            #006b70
        );

    opacity: .8;
}


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

.home-about-preview-grid {
    display: grid;

    grid-template-columns: .92fr 1.08fr;

    align-items: center;

    gap: 90px;
}


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

.home-about-preview-content {
    max-width: 610px;
}


.home-about-preview-kicker {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 18px;

    color: #006b70;

    font-size: .74rem;
    font-weight: 850;

    letter-spacing: .16em;
    text-transform: uppercase;
}


.home-about-preview-kicker::before {
    content: "";

    width: 42px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #168cff,
            #27d17f
        );
}


.home-about-preview-content h2 {
    margin: 0 0 25px;

    color: #15212b;

    font-size: clamp(2.8rem, 4.4vw, 4.8rem);
    font-weight: 900;

    line-height: .98;
    letter-spacing: -.055em;
}


.home-about-preview-content h2 span {
    display: block;

    color: #006b70;
}


.home-about-preview-content > p {
    margin: 0 0 16px;

    color: #66737d;

    font-size: .96rem;
    line-height: 1.82;
}


.home-about-preview-content
.home-about-preview-lead {
    color: #44535e;

    font-size: 1.04rem;
    font-weight: 550;
}


/* =========================
   QUICK NUMBERS
========================= */

.home-about-preview-meta {
    display: grid;

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

    gap: 0;

    margin: 35px 0 32px;

    border-top: 1px solid #dce3e5;
    border-bottom: 1px solid #dce3e5;
}


.home-about-preview-meta > div {
    position: relative;

    padding: 19px 16px 19px 0;
}


.home-about-preview-meta > div:not(:last-child)::after {
    content: "";

    position: absolute;

    right: 13px;
    top: 20%;
    bottom: 20%;

    width: 1px;

    background: #dce3e5;
}


.home-about-preview-meta strong {
    display: block;

    color: #006b70;

    font-size: 1.55rem;
    font-weight: 900;

    line-height: 1;
}


.home-about-preview-meta span {
    display: block;

    margin-top: 7px;

    color: #7a858d;

    font-size: .7rem;
    font-weight: 700;
}


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

.home-about-preview-link {
    display: inline-flex;
    align-items: center;

    gap: 13px;

    padding-bottom: 7px;

    border-bottom: 1px solid rgba(0, 107, 112, .35);

    color: #006b70;

    font-size: .88rem;
    font-weight: 850;
}


.home-about-preview-link span {
    transition: transform .3s ease;
}


.home-about-preview-link:hover span {
    transform: translateX(6px);
}


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

.home-about-preview-visual {
    position: relative;

    min-height: 540px;
}


.home-about-preview-image {
    position: absolute;

    inset: 0 0 35px 0;

    overflow: hidden;

    border-radius: 4px 42px 4px 42px;

    box-shadow:
        0 35px 85px rgba(10, 34, 57, .16);
}


.home-about-preview-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(3, 22, 24, .35)
        );

    pointer-events: none;
}


.home-about-preview-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.22, 1, .36, 1);
}


.home-about-preview-visual:hover
.home-about-preview-image img {
    transform: scale(1.035);
}


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

.home-about-preview-caption {
    position: absolute;

    left: 32px;
    right: 32px;
    bottom: 0;

    display: flex;
    align-items: center;

    gap: 14px;

    padding: 18px 20px;

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

    border-radius: 14px;

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

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

    box-shadow:
        0 20px 50px rgba(10, 34, 57, .14);
}


.home-about-preview-caption-dot {
    flex: 0 0 12px;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: #27d17f;

    box-shadow:
        0 0 0 6px rgba(39, 209, 127, .12),
        0 0 22px rgba(39, 209, 127, .5);
}


.home-about-preview-caption strong {
    display: block;

    color: #15212b;

    font-size: .86rem;
}


.home-about-preview-caption small {
    display: block;

    margin-top: 3px;

    color: #75818a;

    font-size: .7rem;
}
/* =========================================
   CATEGORY SECTION HEADING - CENTER ONLY
========================================= */

.category-section .section-head {
    justify-content: center;
    align-items: center;
    text-align: center;
}

.category-section .section-head > div {
    width: 100%;
    text-align: center;
}

.category-section .section-head .eyebrow {
    display: block;
    width: 100%;
    text-align: center;
}

.category-section .section-head h2 {
    width: 100%;
    text-align: center;
}
/* =========================
   PRODUCT CATEGORY CARDS
========================= */

.category-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);

    column-gap: 38px;
    row-gap: 56px;
}

.category-card {
    position: relative;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #ffffff;
    color: var(--ink);

    border: 1px solid #dfe5e8;
    border-radius: 5px;

    box-shadow: 0 12px 35px rgba(10, 34, 57, 0.08);

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

.category-card::after {
    display: none;
}

.category-card:hover {
    transform: translateY(-7px);

    border-color: rgba(16, 97, 218, 0.25);

    box-shadow: 0 24px 55px rgba(10, 34, 57, 0.14);
}


/* IMAGE AREA */

.category-image {
    width: 100%;
    height: 210px;

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

    padding: 8px 22px 12px;

    background: #ffffff;

    overflow: hidden;
}

.category-card .category-image img {
    width: 100%;
    height: 100%;

    max-width: 210px;
    max-height: 230px;

    object-fit: contain;
    object-position: center;

    transition: transform 0.4s ease;
}

.category-card:hover .category-image img {
    transform: scale(1.05);
}


/* TEXT AREA */

.category-content {
    position: static;

    padding: 12px 16px 22px;

    background: #ffffff;

    border-top: 0;
}

.category-content h3 {
    margin: 0 0 10px;

    color: #14204f;

   font-size: 1.04rem;
    line-height: 1.35;
    min-height: 52px;
font-weight: 700;
line-height: 1.45;
}
.category-rating {
    margin-bottom: 14px;

    color: #ffb400;

    font-size: 1.12rem;
    line-height: 1;

    letter-spacing: 1px;
}
.category-view-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;

    width: fit-content;
    min-height: 44px;

    margin-top: 10px;
    padding: 10px 17px;

    background: #f1f1f1 !important;
    color: #0786c8 !important;

    border-radius: 6px;

    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;

    transition: 0.3s ease;
}

.category-view-btn b {
    font-size: 1rem;
    font-weight: 700;
}

.category-card:hover .category-view-btn {
    background: #e9e9e9 !important;
    color: #0786c8 !important;
}

.category-card:hover .category-view-btn b {
    transform: translateX(4px);
}

.category-card:hover img,
.product-card:hover img {
    transform: scale(1.045)
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px
}

.product-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: white;
    transition: .25s;
    display: flex;
    flex-direction: column
}

.product-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow)
}

.product-image {
    aspect-ratio: 1.18;
    background: #eef2f2;
    overflow: hidden
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .35s
}

.product-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    flex: 1
}

.kicker {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--green);
    font-weight: 800
}

.product-body h3 {
    font-size: 1.08rem;
    line-height: 1.25;
    margin: 8px 0
}

.meta {
    color: var(--muted);
    font-size: .86rem
}

.badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 12px 0
}

.badge {
    font-size: .72rem;
    background: var(--ice);
    color: var(--navy);
    padding: 5px 8px;
    border-radius: 4px;
    font-weight: 750
}

.card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: auto;
    padding-top: 14px
}

.card-actions .btn {
    font-size: .78rem;
    padding: 9px
}

.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: #31536b
}

.stat {
    background: var(--navy);
    color: white;
    padding: 34px;
    text-align: center
}

.stat strong {
    font-size: 2.2rem;
    display: block
}

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

.feature {
    border: 1px solid var(--line);
    padding: 24px;
    border-radius: 12px;
    background: white
}

.feature .icon {
    font-size: 1.7rem
}

.feature h3 {
    margin: 12px 0 6px
}

.feature p {
    color: var(--muted);
    font-size: .9rem
}

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center
}

.split img {
    border-radius: var(--radius);
    min-height: 430px;
    object-fit: cover
}

.checklist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 24px 0
}

.check {
    padding: 11px;
    border-bottom: 1px solid var(--line);
    font-weight: 650
}

.brand-strip {
    display: flex;
    gap: 14px;
    overflow: hidden
}

.brand {
    min-width: 170px;
    border: 1px solid var(--line);
    padding: 22px;
    text-align: center;
    font-weight: 900;
    color: var(--navy);
    background: white
}

.cta {
    background: linear-gradient(120deg, var(--navy), var(--green));
    color: white;
    border-radius: 18px;
    padding: 55px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px
}

.cta h2 {
    font-size: 2.3rem;
    margin: 0
}

.page-hero {
    background: linear-gradient(110deg, var(--navy), var(--navy2));
    color: white;
    padding: 90px 0
}

.page-hero h1 {
    font-size: clamp(2.6rem, 5vw, 4.5rem)
}

.breadcrumbs {
    color: #bcd0db;
    font-size: .9rem
}

.catalogue-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px
}

.filters {
    border: 1px solid var(--line);
    padding: 22px;
    border-radius: 12px;
    align-self: start;
    position: sticky;
    top: 105px
}

.filter-group {
    margin-bottom: 22px
}

.filter-group label {
    display: block;
    font-weight: 800;
    margin-bottom: 8px
}

.filter-group input,
.filter-group select,
.form-control {
    width: 100%;
    padding: 12px;
    border: 1px solid #cbd5d8;
    border-radius: 8px;
    background: white
}

.checkbox-list label {
    display: flex;
    gap: 8px;
    font-weight: 500;
    margin: 8px 0
}

.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px
}

.searchbox {
    flex: 1;
    max-width: 520px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 9px
}

.results-info {
    color: var(--muted)
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 34px
}

.pagination button {
    border: 1px solid var(--line);
    background: white;
    padding: 9px 13px;
    border-radius: 7px
}

.pagination button.active {
    background: var(--navy);
    color: white
}

.detail {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 55px
}

.detail-image {
    border-radius: 15px;
    overflow: hidden;
    background: #edf2f2
}

.detail-image img {
    width: 100%;
    height: 560px;
    object-fit: cover
}

.detail h1 {
    font-size: 3rem;
    line-height: 1.05;
    margin: 10px 0
}

.detail-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0
}

.detail-table td {
    padding: 11px;
    border-bottom: 1px solid var(--line)
}

.detail-table td:first-child {
    font-weight: 800;
    width: 40%
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px
}

.form-group label {
    display: block;
    font-weight: 750;
    margin-bottom: 7px
}

.form-group.full {
    grid-column: 1/-1
}

textarea.form-control {
    min-height: 130px
}
.footer {
    position: relative;
    overflow: hidden;

    /* Frozen food background */
    background-image:
        linear-gradient(
            rgba(0, 0, 0, 0.76),
            rgba(0, 0, 0, 0.84)
        ),
        url("../images/footer-frozen-food-bg.png");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

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

    padding: 78px 0 28px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .12),
        0 -18px 50px rgba(0, 0, 0, .12);
}
.footer .container {
    position: relative;
    z-index: 2;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 45px
}

.footer h4{
    color:#ffffff;
    font-size:1.15rem;
    font-weight:800;
    letter-spacing:.04em;

    text-shadow:
        0 0 12px rgba(255,255,255,.18),
        0 2px 10px rgba(0,0,0,.35);
}

.footer a {
    position: relative;
    display: block;

    width: fit-content;
    margin: 10px 0;

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

    transition:
        color .3s ease,
        transform .3s ease,
        text-shadow .3s ease;
}
.footer .brand-blue {
    color: #8fc4ff;
    text-shadow: 0 0 16px rgba(71, 154, 255, .28);
}

.footer .brand-green {
    color: #9ce8c9;
    text-shadow: 0 0 16px rgba(73, 225, 165, .22);
}

.footer .logo-text {
    width: auto;
    overflow: visible;
    animation: none;
}
.footer a:hover {
    color: #ffffff;
    transform: translateX(5px);

    text-shadow:
        0 0 14px rgba(255, 255, 255, .38);
}
.footer p{
    color:rgba(255,255,255,.82);
    line-height:1.9;
}
.footer-bottom {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

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

    margin-top: 50px;
    padding-top: 26px;

    color: rgba(255, 255, 255, .78);
    font-size: .92rem;
}

.floating-wa {
    position: fixed;
    right: 20px;
    bottom: 22px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #1e9e5a;
    color: white;
    font-weight: 900;
    z-index: 60;
    box-shadow: var(--shadow)
}

.mobile-bar {
    display: none
}

.notice {
    padding: 15px;
    background: var(--ice);
    border-left: 4px solid var(--green);
    border-radius: 7px
}

.empty {
    padding: 60px;
    text-align: center;
    border: 1px dashed var(--line);
    border-radius: 12px
}

.brand-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px
}

.brand-card {
    border: 1px solid var(--line);
    padding: 28px;
    text-align: center;
    border-radius: 12px
}

.legal {
    max-width: 880px
}

.legal h2 {
    margin-top: 36px
}

.timeline {
    border-left: 2px solid var(--green);
    padding-left: 28px
}

.timeline-item {
    margin-bottom: 30px
}

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

.industry-card {
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 12px
}

.skeleton {
    height: 340px;
    border-radius: 12px;
    background: linear-gradient(90deg, #edf0f0, #f7f8f8, #edf0f0);
    background-size: 200%;
    animation: shimmer 1.2s infinite
}

@keyframes shimmer {
    to {
        background-position: -200% 0
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        scroll-behavior: auto !important;
        animation: none !important;
        transition: none !important
    }
}
/* =========================
   CINEMATIC BRAND SHOWCASE
========================= */

.brands-showcase-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(16, 97, 218, .10),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(30, 158, 90, .10),
            transparent 30%
        ),
        #f8fbff;
}

.brands-showcase-section::before {
    content: "";
    position: absolute;
    top: -120px;
    left: 50%;
    width: 520px;
    height: 240px;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, .8);
    filter: blur(90px);
    pointer-events: none;
}

.brands-section-head {
    position: relative;
    z-index: 2;
    margin-bottom: 42px;
}

.brands-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 45px 0 55px;
    
}

.brands-marquee::before,
.brands-marquee::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 140px;
    z-index: 4;
    pointer-events: none;
}

.brands-marquee::before {
    left: 0;
    background: linear-gradient(
        90deg,
        #f8fbff,
        transparent
    );
}

.brands-marquee::after {
    right: 0;
    background: linear-gradient(
        270deg,
        #f8fbff,
        transparent
    );
}

.brands-track {
    width: max-content;

    display: grid;

   grid-template-rows: repeat(2, 130px);
    grid-auto-flow: column;
    grid-auto-columns: 210px;

    column-gap: 22px;
    row-gap: 18px;

    align-items: center;

    transition: transform 1.4s cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
}
.brands-marquee:hover .brands-track {
    animation-play-state: paused;
}

.brand-logo-card {
    flex: 0 0 210px;
    width: 210px;
    height: 130px;

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

    padding: 24px;

    border: 1px solid rgba(16, 97, 218, .12);
    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .96),
            rgba(244, 249, 255, .9)
        );

    box-shadow:
        0 18px 45px rgba(10, 34, 57, .08),
        inset 0 1px 0 rgba(255, 255, 255, 1);

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

.brand-logo-card:hover {
    transform: translateY(-7px) scale(1.025);

    border-color: rgba(16, 97, 218, .28);

    box-shadow:
        0 28px 60px rgba(10, 34, 57, .15),
        0 0 28px rgba(16, 97, 218, .08);
}

.brand-logo-card img {
    width: 100%;
    height: 100%;
    max-width: 150px;
    max-height: 78px;

    object-fit: contain;
    object-position: center;

    filter: saturate(.92);
    transition:
        transform .35s ease,
        filter .35s ease;
}

.brand-logo-card:hover img {
    transform: scale(1.08);
    filter: saturate(1.1);
}

@keyframes brandScroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}
/* ==================================================
   HOME — WHY CHOOSE Annamithra
================================================== */

.home-why-section {
    position: relative;
    padding: 110px 0;
    overflow: hidden;

    background-image: url("../images/why-choose-bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.home-why-list {
    position: relative;
    z-index: 2;

background: rgba(5, 12, 15, 0.58);

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

border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.home-why-section::before {
    content: "";
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.65);

    z-index: 1;
    pointer-events: none;
}
.home-why-section .container {
    position: relative;
    z-index: 2;
}
/* MAIN LAYOUT */

.home-why-grid {
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    gap: 100px;
    align-items: start;
}


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

.home-why-heading {
    position: sticky;
    top: 130px;
}

.home-why-kicker {
    display: inline-block;

    margin-bottom: 18px;
    color: #39d69b;


    font-size: .82rem;
    font-weight: 800;

    letter-spacing: .16em;
    text-transform: uppercase;
}


.home-why-heading h2 {
    max-width: 540px;

    margin: 0;

     color: #ffffff;

    font-size: clamp(2.8rem, 4.5vw, 4.8rem);
    font-weight: 900;

    line-height: .98;
    letter-spacing: -.055em;
}


.home-why-heading h2 span {
    color: #25b780;
}


.home-why-heading p {
    max-width: 500px;

    margin: 28px 0 32px;

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


    font-size: 1rem;
    line-height: 1.9;
}


/* DISCOVER LINK */

.home-why-link {
    display: inline-flex;
    align-items: center;
    gap: 15px;

        color: #39d69b;


    font-weight: 800;
    text-decoration: none;

    transition:
        color .3s ease,
        gap .3s ease;
}


.home-why-link span {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    border: 1px solid rgba(0, 107, 112, .22);
    border-radius: 50%;

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


.home-why-link:hover {
    color: var(--green);
    gap: 20px;
}


.home-why-link:hover span {
    transform: rotate(45deg);

    background: var(--green);
    color: #ffffff;
}


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

.home-why-list {
    border-top: 1px solid rgba(10, 34, 57, .13);
}


.home-why-item {
    position: relative;

    display: grid;
    grid-template-columns: 75px 1fr 55px;
    align-items: center;

    min-height: 155px;

    padding: 30px 10px;

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

    transition:
        padding .4s cubic-bezier(.22, 1, .36, 1),
        background .4s ease;
}


/* NUMBER */

.home-why-number {
        color: rgba(83, 211, 171, 0.75);


    font-size: .8rem;
    font-weight: 900;

    letter-spacing: .08em;
}


/* TEXT */

.home-why-item-content h3 {
    margin: 0 0 9px;

   color: #ffffff;

    font-size: 1.35rem;
    font-weight: 850;

    letter-spacing: -.025em;
}


.home-why-item-content p {
    max-width: 520px;

    margin: 0;

    color: var(--muted);    color: rgba(255, 255, 255, 0.65);


    font-size: .91rem;
    line-height: 1.7;
}


/* ARROW */

.home-why-arrow {
    justify-self: end;

    display: grid;
    place-items: center;

    width: 45px;
    height: 45px;

    border: 1px solid rgba(10, 34, 57, .13);
    border-radius: 50%;

     border-color: rgba(255, 255, 255, 0.20);
    color: #ffffff;

    font-size: 1.15rem;

    transition:
        transform .4s cubic-bezier(.22, 1, .36, 1),
        background .3s ease,
        color .3s ease,
        border-color .3s ease;
}


/* =========================
   PREMIUM HOVER
========================= */

.home-why-item::before {
    content: "";

    position: absolute;
    inset: 8px 0;

    border-radius: 18px;

    background:
        linear-gradient(
            100deg,
            rgba(0, 107, 112, .07),
            rgba(31, 104, 78, .035)
        );

    opacity: 0;
    transform: scaleX(.97);

    transition:
        opacity .35s ease,
        transform .45s cubic-bezier(.22, 1, .36, 1);

    z-index: 0;
}


.home-why-item > * {
    position: relative;
    z-index: 1;
}


.home-why-item:hover {
    padding-left: 24px;
    padding-right: 18px;
}


.home-why-item:hover::before {
    opacity: 1;
    transform: scaleX(1);
}


.home-why-item:hover .home-why-arrow {
    transform: rotate(45deg);

    background: var(--green);
    border-color: var(--green);

    color: #ffffff;
}
/* =========================
   CINEMATIC IMAGE STATS
========================= */

.cinematic-stats {
    position: relative;
    min-height: 560px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background-image:
        linear-gradient(
            rgba(4, 12, 20, .38),
            rgba(4, 12, 20, .38)
        ),
        url("../images/stats-food-bg.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    color: #ffffff;
}

.cinematic-stats::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(2, 8, 14, .28),
            transparent 28%,
            transparent 72%,
            rgba(2, 8, 14, .28)
        );

    pointer-events: none;
}

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

.cinematic-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    align-items: center;

    gap: 0;
}

.cinematic-stat-item {
    position: relative;

    min-height: 190px;

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

    padding: 30px 22px;

    text-align: center;
}

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

    top: 20%;
    right: 0;
    bottom: 20%;

    width: 1px;

    background:
        linear-gradient(
            transparent,
            rgba(255, 255, 255, .65),
            transparent
        );
}

.counter {
    display: block;

    margin: 0 0 12px;

    color: #ffffff;

    font-size: clamp(3.5rem, 6vw, 6.5rem);
    font-weight: 900;
    line-height: .95;

    letter-spacing: -.06em;

    text-shadow:
        0 5px 20px rgba(0, 0, 0, .75),
        0 0 28px rgba(255, 255, 255, .22);
}

.cinematic-stat-item h3 {
    margin: 0;

    color: #ffffff;

    font-size: 1rem;
    font-weight: 800;

    letter-spacing: .11em;
    text-transform: uppercase;

    text-shadow:
        0 3px 12px rgba(0, 0, 0, .8);
}
.footer::before{
    content:"";

    position:absolute;

    top:-180px;
    left:-40%;

    width:45%;
    height:700px;

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

    transform:rotate(-18deg);

    filter:blur(35px);

    animation:footerLight 10s linear infinite;

    pointer-events:none;
}

@keyframes footerLight{

    0%{
        left:-50%;
    }

    100%{
        left:120%;
    }

}
.footer .logo{
    position:relative;
}

.footer .logo::before{

    content:"";

    position:absolute;

    left:-25px;
    top:-18px;

    width:90px;
    height:90px;

    border-radius:50%;

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

    filter:blur(32px);

    z-index:-1;
}
.footer .logo-img{

    transition:.5s;
}

.footer .logo:hover .logo-img{

    transform:scale(1.08);

    filter:
        drop-shadow(0 0 10px rgba(255,255,255,.25))
        drop-shadow(0 0 25px rgba(255,255,255,.18));
}
.footer a{

    position:relative;
}

.footer-grid > div:not(:first-child) a::after {

    content:"";

    position:absolute;

    left:0;
    bottom:-4px;

    width:0;

    height:2px;

    background:#ffffff;

    transition:.35s;
}

.footer-grid > div:not(:first-child) a:hover::after {
    width: 38px;
}
.footer-bottom{

    position:relative;

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

    margin-top:50px;

    padding-top:26px;
}

.footer-bottom::before{

    content:"";

    position:absolute;

    top:-1px;
    left:50%;

    transform:translateX(-50%);

    width:180px;
    height:2px;

    border-radius:20px;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.9),
        transparent
    );
}
.footer h4 {
    position: relative;
    display: inline-block;
    padding-bottom: 12px;
    margin-bottom: 18px;
}

.footer h4::after {
    content: "";
    position: absolute;

    left: 0;
    bottom: 0;

    width: 48px;
    height: 3px;

    border-radius: 20px;

    background: linear-gradient(
        90deg,
        #ffd84d,
        #ffb800
    );

    box-shadow:
        0 0 8px rgba(255, 216, 77, .75),
        0 0 18px rgba(255, 184, 0, .45);

    transition:
        width .35s ease,
        box-shadow .35s ease;
}

.footer-grid > div:hover h4::after {
    width: 72px;

    box-shadow:
        0 0 12px rgba(255, 216, 77, .95),
        0 0 28px rgba(255, 184, 0, .65);
}
.footer h4 {
    text-shadow:
        0 2px 10px rgba(0, 0, 0, .3),
        0 0 12px rgba(255, 216, 77, .12);
}
/* =========================
   PRODUCT CATALOGUE VIDEO HERO
========================= */

.product-video-hero {
    position: relative;
    width: 100%;
    height: 520px;

    overflow: hidden;
    background: #000;
}

.product-hero-video {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center 20%;
}

.product-video-logo-cover {
    position: absolute;

    right: 42px;
    bottom: 30px;

    width: 60px;
    height: 60px;

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

    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    z-index: 3;
    pointer-events: none;
}

.product-video-logo-cover img {
    width: 42px;
    height: 42px;

    object-fit: contain;
}
/* =========================
   ABOUT PAGE VIDEO HERO
========================= */

.about-video-hero {
    position: relative;
    width: 100%;
    height: 520px;

    display: flex;
    align-items: center;

    overflow: hidden;
    background: #000;

    color: #ffffff;
}

.about-video {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}

.about-video-overlay{
    display:none;
}

.about-video-content {
    position: relative;
    z-index: 2;

    max-width: 760px;
}

.about-video-content .breadcrumbs {
    margin-bottom: 22px;

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

.about-video-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 18px;

    color: #ffd84d;

    font-size: .8rem;
    font-weight: 850;

    letter-spacing: .14em;
    text-transform: uppercase;
}

.about-video-kicker::before{
    content:"";
    width:38px;
    height:2px;
    background:#ffd84d;
}

.about-video-content h1 {
    max-width: 760px;

    margin: 0;

    color: #ffffff;

    font-size: clamp(3rem, 5.5vw, 5.7rem);
    font-weight: 900;

    line-height: .98;
    letter-spacing: -.055em;

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

.about-video-content h1 span {
    display: block;

    color: #c9f2df;
}

.about-video-content p {
    max-width: 650px;

    margin: 24px 0 0;

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

    font-size: 1rem;
    line-height: 1.8;

    text-shadow:
        0 3px 12px rgba(0, 0, 0, .38);
}

.about-video-logo-cover {
    position: absolute;

    right: 42px;
    bottom: 30px;

    /* allow logo + text */
    width: auto;
    height: auto;

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

    gap: 5px;

    background: transparent;
    border: none;
    box-shadow: none;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    padding: 0;

    z-index: 3;
}

.about-video-logo-cover img {
    width: 42px;
    height: 42px;

    object-fit: contain;
    display: block;
}

/* FROZEN FOOD DELIVERY */

.about-video-delivery-text {
    display: block;

    color: #ffffff;

    font-size: 13px;
    font-weight: 800;
    line-height: 1.1;

    text-align: center;
    white-space: nowrap;

    text-shadow:
        0 2px 6px rgba(0, 0, 0, .75);
}
.about-sound-btn {
    position: absolute;
    left: 32px;
    bottom: 28px;
    z-index: 5;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 11px 16px;

    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 999px;

    background: rgba(0, 0, 0, .28);
    color: #ffffff;

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

    font-size: .82rem;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease;
}

.about-sound-btn:hover {
    transform: translateY(-2px);
    background: rgba(0, 0, 0, .48);
    border-color: rgba(255, 255, 255, .85);
}

.about-sound-btn.sound-on {
    background: rgba(30, 90, 70, .88);
}

.about-sound-btn .sound-icon {
    font-size: 1rem;
    line-height: 1;
}
/* ==================================================
   Annamithra COMPANY PAGE — SHARED
================================================== */

.company-section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 14px;

    color: var(--green);

    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.company-section-kicker::before {
    content: "";

    width: 38px;
    height: 2px;

    border-radius: 20px;

    background: linear-gradient(
        90deg,
        #1061da,
        var(--green)
    );
}

.company-section-heading {
    max-width: 850px;
    margin-bottom: 48px;
}

.company-section-heading-center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.company-section-heading-center .company-section-kicker {
    justify-content: center;
}

.company-section-heading h2 {
    margin: 0 0 18px;
    
    color: var(--ink);

    font-size: clamp(2.4rem, 4.5vw, 4.4rem);
    font-weight: 900;

    line-height: 1.05;
    letter-spacing: -.05em;
}

.company-section-heading p {
    max-width: 720px;

    margin: 0;

    color: var(--muted);

    font-size: 1rem;
    line-height: 1.85;
}

.company-section-heading-center p {
    margin-left: auto;
    margin-right: auto;
}


/* ==================================================
   ABOUT US — SMOKY LUXURY BLOOM
================================================== */

.company-about-section {
    position: relative;
    overflow: hidden;

    padding: 120px 0;

    background:
        radial-gradient(
            circle at 8% 18%,
            rgba(22, 140, 255, .08),
            transparent 30%
        ),
        radial-gradient(
            circle at 50% 92%,
            rgba(255, 138, 0, .06),
            transparent 28%
        ),
        radial-gradient(
            circle at 94% 82%,
            rgba(39, 209, 127, .08),
            transparent 32%
        ),
        #f8fbfa;
}


/* =========================
   SMOKY BLOOMS
========================= */

.company-about-section::before,
.company-about-section::after {
    content: "";

    position: absolute;

    pointer-events: none;

    border-radius: 50%;

    filter: blur(90px);

    opacity: 0;

    z-index: 0;
}


.company-about-section::before {
    width: 520px;
    height: 520px;

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

    background:
        radial-gradient(
            circle,
            rgba(22, 140, 255, .28) 0%,
            rgba(22, 140, 255, .10) 35%,
            transparent 70%
        );
}


.company-about-section::after {
    width: 600px;
    height: 600px;

    right: -180px;
    bottom: -200px;

    background:
        radial-gradient(
            circle,
            rgba(39, 209, 127, .24) 0%,
            rgba(0, 127, 125, .10) 38%,
            transparent 72%
        );
}


/* BLOOMS START WHEN SECTION IS VISIBLE */

.company-about-section.is-visible::before {
    animation: aboutBlueBloom 2.4s ease forwards;
}

.company-about-section.is-visible::after {
    animation: aboutGreenBloom 2.8s ease .25s forwards;
}


@keyframes aboutBlueBloom {
    from {
        opacity: 0;
        transform: translate(-70px, -40px) scale(.82);
    }

    to {
        opacity: 1;
        transform: translate(30px, 25px) scale(1);
    }
}


@keyframes aboutGreenBloom {
    from {
        opacity: 0;
        transform: translate(80px, 50px) scale(.82);
    }

    to {
        opacity: 1;
        transform: translate(-20px, -15px) scale(1);
    }
}


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

.company-about-grid {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: .92fr 1.08fr;

    align-items: center;

    gap: 90px;
}


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

.company-about-visual {
    position: relative;

    min-height: 590px;
}


/* ORANGE BLOOM AROUND SMALL IMAGE */

.company-about-visual::before {
    content: "";

    position: absolute;

    width: 310px;
    height: 310px;

    right: -55px;
    bottom: -40px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 138, 0, .28) 0%,
            rgba(255, 138, 0, .10) 38%,
            transparent 72%
        );

    filter: blur(60px);

    opacity: 0;

    z-index: 0;
}


.company-about-section.is-visible
.company-about-visual::before {
    animation: aboutOrangeBloom 2.6s ease .45s forwards;
}


@keyframes aboutOrangeBloom {
    from {
        opacity: 0;
        transform: scale(.7) translate(20px, 30px);
    }

    to {
        opacity: 1;
        transform: scale(1) translate(0, 0);
    }
}


/* =========================
   IMAGES
========================= */

.company-about-image {
    overflow: hidden;

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

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

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

    box-shadow:
        0 32px 80px rgba(10, 34, 57, .14),
        inset 0 1px 0 rgba(255, 255, 255, .75);

    z-index: 2;
}


.company-about-image-main {
    position: absolute;

    top: 0;
    left: 0;

    width: calc(100% - 58px);
    height: 520px;

    border-radius: 32px;

    transform: translateY(26px) scale(1.035);
    opacity: 0;
}


.company-about-section.is-visible
.company-about-image-main {
    animation: aboutMainImageReveal 1.25s cubic-bezier(.22, 1, .36, 1) .1s forwards;
}


@keyframes aboutMainImageReveal {
    from {
        opacity: 0;
        transform: translateY(34px) scale(1.06);
    }

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


.company-about-image-main img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition:
        transform .9s cubic-bezier(.22, 1, .36, 1),
        filter .9s ease;
}


.company-about-visual:hover
.company-about-image-main img {
    transform: scale(1.035);

    filter:
        saturate(1.04)
        contrast(1.02);
}


/* SMALL IMAGE */

.company-about-image-small {
    position: absolute;

    right: -5px;
    bottom: -5px;

    width: 230px;
    height: 270px;

    padding: 7px;

    border-radius: 26px;

    opacity: 0;

    transform: translateY(35px) scale(.92);

    box-shadow:
        0 28px 70px rgba(10, 34, 57, .20),
        0 0 45px rgba(255, 138, 0, .10);
}


.company-about-section.is-visible
.company-about-image-small {
    animation: aboutSmallImageReveal 1.15s cubic-bezier(.22, 1, .36, 1) .55s forwards;
}


@keyframes aboutSmallImageReveal {
    from {
        opacity: 0;
        transform: translateY(35px) scale(.92);
    }

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


.company-about-image-small img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 19px;
}


/* SUBTLE FLOAT AFTER REVEAL */

.company-about-section.is-visible
.company-about-image-small {
    animation:
        aboutSmallImageReveal 1.15s cubic-bezier(.22, 1, .36, 1) .55s forwards,
        aboutSmallFloat 5.5s ease-in-out 1.8s infinite;
}


@keyframes aboutSmallFloat {
    0%,
    100% {
        transform: translateY(0);
    }

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


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

.company-about-content {
    position: relative;

    z-index: 3;

    opacity: 0;
    transform: translateY(24px);
}


.company-about-section.is-visible
.company-about-content {
    animation: aboutContentReveal 1s ease .25s forwards;
}


@keyframes aboutContentReveal {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

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


/* KICKER */

.company-about-content .company-section-kicker {
    position: relative;

    display: inline-flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 10px;

    color: #006b70;

    font-size: .72rem;
    font-weight: 800;

    letter-spacing: .16em;
    text-transform: uppercase;
}


.company-about-content .company-section-kicker::before {
    content: "";

    width: 42px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #168cff,
            #007f7d
        );

    transform: scaleX(0);
    transform-origin: left;
}


.company-about-section.is-visible
.company-about-content
.company-section-kicker::before {
    animation: aboutKickerLine 1s ease .6s forwards;
}


@keyframes aboutKickerLine {
    to {
        transform: scaleX(1);
    }
}


/* TITLE */

.company-about-content h1,
.company-about-content h2 {
    margin: 12px 0 24px;

    color: #12202b;

    font-size: clamp(2.35rem, 3.6vw, 3.8rem);
    font-weight: 760;

    line-height: 1.04;

    letter-spacing: -.045em;
}


.company-about-content h2 span {
    color: var(--green);
}


/* BODY */

.company-about-content > p {
    margin: 0 0 18px;

    max-width: 720px;

    color: #62717c;

    font-size: .98rem;
    line-height: 1.9;
}


/* =========================
   DISTRIBUTION FOCUS
========================= */

.company-infrastructure-note {
    position: relative;

    overflow: hidden;

    margin-top: 32px;

    padding: 26px 28px 26px 32px;

    border: 1px solid rgba(255, 255, 255, .72);
    border-left: 0;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .76),
            rgba(244, 250, 248, .62)
        );

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

    box-shadow:
        0 18px 50px rgba(10, 34, 57, .08),
        inset 0 1px 0 rgba(255, 255, 255, .95);
}


/* illuminated left edge */

.company-infrastructure-note::before {
    content: "";

    position: absolute;

    left: 0;
    top: 14px;
    bottom: 14px;

    width: 4px;

    border-radius: 20px;

    background:
        linear-gradient(
            180deg,
            #168cff,
            #27d17f,
            #007f7d
        );

    box-shadow:
        0 0 18px rgba(39, 209, 127, .35);
}


/* soft internal glow */

.company-infrastructure-note::after {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    right: -60px;
    bottom: -85px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(39, 209, 127, .14),
            transparent 70%
        );

    pointer-events: none;
}


.company-infrastructure-note strong {
    position: relative;

    z-index: 2;

    display: block;

    margin-bottom: 8px;

    color: #006b70;

    font-size: 1rem;
    font-weight: 800;
}


.company-infrastructure-note p {
    position: relative;

    z-index: 2;

    margin: 0;

    color: #62717c;

    font-size: .9rem;
    line-height: 1.72;
}

/* ==================================================
   Annamithra — VISION & MISSION
   ONE COMMON BACKGROUND IMAGE
================================================== */

.company-vision-mission-section {
    position: relative;
    overflow: hidden;

    padding: 100px 0;

    background-image:
        linear-gradient(
            90deg,
            rgba(0, 40, 44, .40),
            rgba(0, 40, 44, .18),
            rgba(0, 40, 44, .40)
        ),
        url("../images/about/vision-mission-bg.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    isolation: isolate;
}


/* SOFT OVERLAY FOR READABILITY */

.company-vision-mission-section::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .08),
            rgba(0, 55, 58, .12)
        );

    pointer-events: none;
    z-index: -1;
}


/* TWO COLUMN LAYOUT */

.company-vision-mission-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 26px;
}


/* CARD */

.company-purpose-card {
    position: relative;

    min-height: 330px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: 34px 36px;

    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .88),
            rgba(248, 252, 251, .82)
        );

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

    box-shadow:
        0 22px 55px rgba(0, 35, 38, .16),
        inset 0 1px 0 rgba(255, 255, 255, .8);

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


/* REMOVE OLD CARD BACKGROUND IMAGES */

.company-purpose-card:first-child,
.company-purpose-card:last-child {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .90),
            rgba(247, 251, 250, .84)
        );
}


/* HOVER */

.company-purpose-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 30px 70px rgba(0, 35, 38, .22),
        inset 0 1px 0 rgba(255, 255, 255, .9);
}


/* REMOVE OLD DECORATIONS */

.company-purpose-card::before,
.company-purpose-card::after {
    display: none;
}

.company-purpose-icon {
    display: none;
}


/* LABEL */

.company-purpose-label {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    width: fit-content;

    margin-bottom: 14px;

    color: var(--green);

    font-size: .72rem;
    font-weight: 750;

    letter-spacing: .13em;
    text-transform: uppercase;
}

.company-purpose-label::before {
    content: "";

    width: 28px;
    height: 2px;

    background: linear-gradient(
        90deg,
        #1061da,
        var(--green)
    );
}


/* HEADING */

.company-purpose-card h2,
.company-purpose-card h3 {
    position: relative;
    z-index: 2;

    max-width: 520px;

    margin: 0 0 15px;

    color: var(--ink);

    font-size: clamp(1.55rem, 2.05vw, 2.2rem);
    font-weight: 600;

    line-height: 1.18;
    letter-spacing: -.02em;
}


/* DESCRIPTION */

.company-purpose-card p {
    position: relative;
    z-index: 2;

    max-width: 580px;

    margin: 0;

    color: var(--muted);

    font-size: .93rem;
    line-height: 1.8;
}
/* ==================================================
   Annamithra — ASSOCIATED WITH
================================================== */

.company-associations-section {
    position: relative;
    overflow: hidden;

padding: 75px 0;
    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(0, 107, 112, .06),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 80%,
            rgba(30, 90, 70, .06),
            transparent 30%
        ),
        #ffffff;
}


/* HEADING */

.company-associations-section .company-section-heading {
    margin-bottom: 42px;
}

.company-associations-section .company-section-heading h2 {
    font-size: clamp(2rem, 3.5vw, 3.4rem);
    font-weight: 650;
    letter-spacing: -.03em;
}

.company-associations-section .company-section-heading p {
    font-size: .95rem;
}


/* GRID */

.company-associations-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}


/* CARD */

.company-association-card {
    position: relative;
    overflow: hidden;

min-height: 110px;
    display: flex;
    align-items: center;

    padding: 22px 24px;

    border: 1px solid rgba(0, 107, 112, .12);
    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f5f9f8
        );

    box-shadow:
        0 16px 38px rgba(10, 34, 57, .07);

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


/* TOP ACCENT */

.company-association-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            #1061da,
            var(--green)
        );
}


/* SUBTLE BACKGROUND SHAPE */

.company-association-card::after {
    content: "";

    position: absolute;

    top: -70px;
    right: -60px;

    width: 170px;
    height: 170px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 107, 112, .10),
            transparent 68%
        );

    pointer-events: none;
}


/* TEXT */

.company-association-card span {
    position: relative;
    z-index: 2;

    color: var(--navy);
font-size: .98rem;
font-weight: 600;

    line-height: 1.35;
}


/* HOVER */

.company-association-card:hover {
    transform: translateY(-6px);

    border-color: rgba(0, 107, 112, .22);

    box-shadow:
        0 25px 55px rgba(10, 34, 57, .12);
}
/* ==================================================
   Annamithra — CORE VALUES
================================================== */

.company-values-section {
    position: relative;
    overflow: hidden;

    padding: 90px 0;

    background: #f4f7f6;
}


/* HEADING */

.company-values-section .company-section-heading {
    margin-bottom: 40px;
}

.company-values-section .company-section-heading h2 {
    font-size: clamp(2rem, 3.5vw, 3.4rem);
    font-weight: 650;
    letter-spacing: -.03em;
}


/* GRID */

.company-values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 18px;
}


/* VALUE CARD */

.company-value-card {
    position: relative;
    overflow: hidden;

    min-height: 280px;

    padding: 30px 26px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            var(--navy),
            #00757a
        );

    box-shadow:
        0 18px 42px rgba(0, 70, 75, .14);

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


/* NUMBER */

.company-value-number {
    position: absolute;

    top: 22px;
    left: 25px;

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

    font-size: 2.6rem;
    font-weight: 600;

    line-height: 1;
}


/* TITLE */

.company-value-card h3 {
    position: relative;

    margin: 0 0 12px;

    color: #ffffff;

    font-size: 1.15rem;
    font-weight: 600;

    line-height: 1.3;
}


/* TEXT */

.company-value-card p {
    position: relative;

    margin: 0;

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

    font-size: .87rem;
    font-weight: 400;

    line-height: 1.7;
}


/* SMALL ACCENT */

.company-value-card::before {
    content: "";

    position: absolute;

    left: 26px;
    bottom: 0;

    width: 55px;
    height: 3px;

    background: #ffffff;

    opacity: .7;
}


/* HOVER */

.company-value-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 28px 58px rgba(0, 70, 75, .22);
}
/* ==================================================
   Annamithra — OUR PROCESS
================================================== */

.company-process-section {
    position: relative;
    overflow: hidden;

    padding: 90px 0;

    background:
        linear-gradient(
            rgba(0, 35, 38, .42),
            rgba(0, 35, 38, .42)
        ),
        url("../images/about/process-bg.png");

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

/* HEADING */
.company-process-section .company-section-heading {
    position: relative;
    z-index: 3;

    width: fit-content;
    max-width: 720px;

    margin: 0 auto 38px;
    padding: 16px 34px;

    text-align: center;

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

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

    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 18px;

    box-shadow: 0 14px 40px rgba(0, 35, 38, 0.14);
}

.company-process-section .company-section-heading h2 {
    font-size: clamp(2rem, 3.5vw, 3.4rem);
    font-weight: 650;
    letter-spacing: -.03em;
}


/* PROCESS FLOW */

.company-process-flow {
    position: relative;

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

    width: 100%;
    gap: 18px;
}


/* CONNECTING LINE */

.company-process-flow::before {
    content: "";

    position: absolute;

    top: 31px;
    left: 7%;
    right: 7%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0, 107, 112, .35),
            rgba(30, 90, 70, .55),
            rgba(0, 107, 112, .35),
            transparent
        );

    z-index: 0;
}


/* STEP */
.company-process-step {
    position: relative;
    z-index: 2;

    height: 300px;

    perspective: 1200px;

    cursor: pointer;
}
.company-process-card-inner {
    position: relative;
    width: 100%;
    height: 100%;

    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;

    transition: transform 0.8s cubic-bezier(.2, .75, .25, 1);
}

.company-process-step:hover .company-process-card-inner {
    transform: rotateY(180deg);
}

/* BOTH SIDES */

.company-process-card-face {
    position: absolute;
    inset: 0;

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

    padding: 28px 22px;

    border: 1px solid rgba(255,255,255,.55);
    border-radius: 20px;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

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

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


/* FRONT */

.company-process-card-front {
    background: rgba(255,255,255,.32);
}

.company-process-card-front h3 {
    margin: 20px 0 8px;

    color: #006b70;

    font-size: 1.05rem;
    font-weight: 650;

    
}

.process-view-text {
    color: rgba(255,255,255,.82);

    font-size: .78rem;
    font-weight: 600;

    letter-spacing: .04em;
}


/* NUMBER */

.company-process-number {
    width: 58px;
    height: 58px;

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

    margin: 0;

    border-radius: 50%;

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

    color: var(--navy);

    font-size: .84rem;
    font-weight: 750;

    box-shadow:
        0 10px 25px rgba(0,35,38,.15);
}


/* BACK */

.company-process-card-back {
    transform: rotateY(180deg);

    background:
        linear-gradient(
            145deg,
            rgba(0,107,112,.88),
            rgba(30,90,70,.86)
        );

    color: #ffffff;
}

.process-back-number {
    margin-bottom: 12px;

    color: #ffffff;

    font-size: .78rem;
    font-weight: 700;

    letter-spacing: .12em;
}

.company-process-card-back h3 {
    margin: 0 0 14px;

    color: #ffffff;

    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: -0.01em;

}

.company-process-card-back p {
    margin: 0;

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

    font-size: 0.84rem;
    font-weight: 450;
    line-height: 1.65;

    text-align: center;

}

.process-back-text {
    margin-top: 18px;

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

    font-size: .72rem;
    font-weight: 600;
}

/* NUMBER */

.company-process-number {
    width: 62px;
    height: 62px;

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

    margin: 0 auto 22px;

    border: 1px solid rgba(0, 107, 112, .22);
    border-radius: 50%;

    background: #ffffff;

    color: var(--navy);

    font-size: .86rem;
    font-weight: 700;

    box-shadow:
        0 10px 26px rgba(10, 34, 57, .08);

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}


/* TITLE */

.company-process-step h3 {
    margin: 0 0 10px;

    color: var(--ink);

    font-size: 1rem;
    font-weight: 650;

    line-height: 1.35;
}


/* TEXT */

.company-process-step p {
    margin: 0;

color: white;
    font-size: .82rem;
    line-height: 1.65;
}


/* HOVER */

.company-process-step:hover .company-process-number {
    transform: translateY(-4px);

    background: var(--navy);
    color: #ffffff;
}
/* =====================================
   CONTACT HERO
===================================== */

.contact-hero{

    position: relative;

    background:
        linear-gradient(
            rgba(0,0,0,.15),
            rgba(0,0,0,.15)
        ),
        url("../images/contact-header.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}
.brands-hero{
    width:100%;
    overflow:hidden;
}

.brands-hero-image{
    display:block;
    width:100%;
    height:auto;
}
/* ==================================================
   Annamithra — FUTURE PLAN RADIAL GRAPH
================================================== */

.company-future-section {
    position: relative;
    overflow: hidden;

    padding: 100px 0 120px;

    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(0, 107, 112, .08),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f3f8f7 100%
        );
}


/* HEADING */

.company-future-section .company-section-heading {
    max-width: 760px;

    margin: 0 auto 55px;

    text-align: center;
}

.company-future-section .company-section-heading h2 {
    font-size: clamp(2.3rem, 4vw, 3.7rem);
    font-weight: 650;
    letter-spacing: -.035em;
}

.company-future-section .company-section-heading p {
    margin-left: auto;
    margin-right: auto;
}


/* ==================================================
   RADIAL AREA
================================================== */

.future-radial-wrap {
    position: relative;

    width: 100%;
    max-width: 1180px;

    height: 850px;

    margin: 0 auto;
}


/* OUTER RINGS */

.future-radial-wrap::before,
.future-radial-wrap::after {
    content: "";

    position: absolute;
    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    pointer-events: none;
}

.future-radial-wrap::before {
    width: 610px;
    height: 610px;

    border: 1px solid rgba(0, 107, 112, .16);
}

.future-radial-wrap::after {
    width: 470px;
    height: 470px;

    border: 1px dashed rgba(30, 90, 70, .18);
}


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

.future-center {
    position: absolute;

    left: 50%;
    top: 50%;

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

    z-index: 5;

    width: 245px;
    height: 245px;

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

    padding: 28px;

    text-align: center;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            var(--navy),
            var(--green)
        );

    color: #ffffff;

    border: 8px solid rgba(255, 255, 255, .88);

    box-shadow:
        0 25px 65px rgba(0, 75, 80, .26),
        0 0 0 1px rgba(0, 107, 112, .12);
}

.future-center-small {
    margin-bottom: 9px;

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

    font-size: .7rem;
    font-weight: 750;

    letter-spacing: .15em;
    text-transform: uppercase;
}

.future-center h3 {
    margin: 0 0 10px;

    color: #ffffff;

    font-size: 2rem;
    font-weight: 650;

    line-height: 1.05;
    letter-spacing: -.03em;
}

.future-center h3 span {
    display: block;

    color: #d4f4e6;
}

.future-center p {
    max-width: 175px;

    margin: 0;

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

    font-size: .76rem;
    line-height: 1.55;
}


/* ==================================================
   FUTURE NODES
================================================== */

.future-node {
    position: absolute;
    z-index: 4;

    width: 230px;
    min-height: 128px;

    padding: 18px 20px;

    border-radius: 18px;

    border: 1px solid rgba(0, 107, 112, .14);

    box-shadow:
        0 16px 38px rgba(10, 34, 57, .10);

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

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

    cursor: pointer;
}
/* =========================================
   FUTURE PLAN — BLUE / ORANGE / GREEN
========================================= */


/* BLUE */
.future-node-1,
.future-node-4,
.future-node-6 {
    background:
        linear-gradient(
            145deg,
            #2997ff 0%,
            #1267df 100%
        );

    border-color: rgba(255,255,255,.42);

    box-shadow:
        0 18px 40px rgba(18,103,223,.22);
}


/* ORANGE */
.future-node-2,
.future-node-7 {
    background:
        linear-gradient(
            145deg,
            #ffb229 0%,
            #ff7a00 100%
        );

    border-color: rgba(255,255,255,.42);

    box-shadow:
        0 18px 40px rgba(255,122,0,.22);
}


/* GREEN */
.future-node-3,
.future-node-5,
.future-node-8 {
    background:
        linear-gradient(
            145deg,
            #32d17d 0%,
            #119b58 100%
        );

    border-color: rgba(255,255,255,.42);

    box-shadow:
        0 18px 40px rgba(17,155,88,.22);
}
/* NODE HEADER */

.future-node-head {
    display: flex;
    align-items: center;

    gap: 13px;
}

.future-node-number {
    flex: 0 0 44px;

    width: 44px;
    height: 44px;

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

    border-radius: 50%;

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

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

color: #ffffff;
    font-size: .76rem;
    font-weight: 800;
}

.future-node h3 {
    margin: 0;

    color: #ffffff;

    font-size: .96rem;
    font-weight: 650;

    line-height: 1.35;
}
/* DETAILS — HIDDEN INITIALLY */

.future-node-content {
    max-height: 0;
    overflow: hidden;

    opacity: 0;

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

.future-node-content p {
    margin: 11px 0 0;

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

    font-size: .74rem;
    line-height: 1.55;
}
.future-node-content strong {
    color: #ffffff;
}

/* HOVER REVEAL */

.future-node:hover {
    z-index: 20;

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


    box-shadow:
        0 28px 60px rgba(0, 70, 75, .18);
}

.future-node:hover .future-node-content {
    max-height: 240px;

    opacity: 1;

    margin-top: 12px;
}


/* ==================================================
   NODE POSITIONS
================================================== */

/* TOP LEFT */

.future-node-1 {
    top: 35px;
    left: 245px;
}


/* TOP RIGHT */

.future-node-2 {
    top: 35px;
    right: 245px;
}


/* RIGHT UPPER */

.future-node-3 {
    top: 225px;
    right: 20px;
}


/* RIGHT LOWER */

.future-node-4 {
    bottom: 190px;
    right: 20px;
}


/* BOTTOM RIGHT */

.future-node-5 {
    bottom: 20px;
    right: 245px;
}


/* BOTTOM LEFT */

.future-node-6 {
    bottom: 20px;
    left: 245px;
}


/* LEFT LOWER */

.future-node-7 {
    bottom: 190px;
    left: 20px;
}


/* LEFT UPPER */

.future-node-8 {
    top: 225px;
    left: 20px;
}


/* ==================================================
   CONNECTING LINES
================================================== */

.future-radial-lines {
    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 1;
}

.future-line {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 265px;
    height: 1px;

    transform-origin: 0 50%;

    background:
        linear-gradient(
            90deg,
            rgba(0, 107, 112, .5),
            rgba(0, 107, 112, .08)
        );
}

.future-line::after {
    content: "";

    position: absolute;

    right: 0;
    top: 50%;

    width: 7px;
    height: 7px;

    transform: translateY(-50%);

    border-radius: 50%;

    background: var(--navy);

    box-shadow:
        0 0 12px rgba(0, 107, 112, .45);
}


/* DIRECTIONS */

.future-line-1 {
    transform: rotate(225deg);
}

.future-line-2 {
    transform: rotate(315deg);
}

.future-line-3 {
    transform: rotate(0deg);
}

.future-line-4 {
    transform: rotate(45deg);
}

.future-line-5 {
    transform: rotate(60deg);
}

.future-line-6 {
    transform: rotate(120deg);
}

.future-line-7 {
    transform: rotate(135deg);
}

.future-line-8 {
    transform: rotate(180deg);
}
/* ==================================================
   Annamithra — CORE VALUES FLOW PATH
================================================== */

.company-values-section {
    position: relative;
    overflow: hidden;

    padding: 105px 0 125px;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(41, 151, 255, .06),
            transparent 28%
        ),
        radial-gradient(
            circle at 82% 72%,
            rgba(50, 209, 125, .06),
            transparent 30%
        ),
        #f7f9f8;
}


/* HEADING */

.company-values-section .company-section-heading {
    max-width: 760px;
    margin-bottom: 70px;
}

.company-values-section .company-section-heading h2 {
    margin: 0 0 16px;

    color: var(--ink);

    font-size: clamp(2.2rem, 4vw, 3.8rem);
    font-weight: 650;

    line-height: 1.08;
    letter-spacing: -.035em;
}

.company-values-section .company-section-heading p {
    max-width: 680px;

    color: var(--muted);

    font-size: .96rem;
    line-height: 1.8;
}


/* ==================================================
   FLOW AREA
================================================== */

.core-value-flow {
    position: relative;

    width: 100%;
    max-width: 1200px;

    height: 560px;

    margin: 0 auto;
}


/* ==================================================
   SVG CURVED PATH
================================================== */

.core-value-path {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: visible;

    pointer-events: none;

    z-index: 1;
}

.core-value-path-base {
    fill: none;

    stroke: rgba(0, 107, 112, .16);

    stroke-width: 3;

    stroke-linecap: round;
}
.core-value-path-active {
    fill: none;

    stroke: url(#coreValueGradient);

    stroke-width: 9;
    stroke-linecap: round;

    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;

    opacity: 0;
}

.company-values-section.is-visible .core-value-path-active {
    opacity: 1;

    animation:
        coreValueDraw 2.8s ease forwards,
        coreValueFlow 1.2s linear 2.8s infinite;
}

@keyframes coreValueDraw {
    from {
        stroke-dashoffset: 1400;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes coreValueFlow {
    from {
        stroke-dasharray: 18 12;
        stroke-dashoffset: 0;
    }

    to {
        stroke-dasharray: 18 12;
        stroke-dashoffset: -30;
    }
}
/* ==================================================
   VALUE POINTS
================================================== */

.core-value-point {
    position: absolute;

    z-index: 3;

    width: 245px;

    opacity: 0;

    transform: translateY(25px);

    animation: coreValueReveal .7s ease forwards;
}

.core-value-point-1 {
    left: 35;
    top: 100px;

    animation-delay: .35s;
}

.core-value-point-2 {
    left: 29%;
    top: 190px;

    animation-delay: .75s;
}

.core-value-point-3 {
    left: 57%;
    top: 270px;

    animation-delay: 1.15s;
}

.core-value-point-4 {
    right: 0;
    top: 330px;

    animation-delay: 1.55s;
}

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


/* ==================================================
   MARKERS
================================================== */

.core-value-marker {
    position: absolute;

    width: 20px;
    height: 20px;

    border-radius: 50%;

    border: 4px solid #ffffff;

    box-shadow:
        0 0 0 1px rgba(0,0,0,.07),
        0 6px 18px rgba(0,0,0,.14);

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


/* MARKER POSITIONS */

.core-value-point-1 .core-value-marker {
    top: 7px;
    right: -26px;

    background: #2997ff;
}

.core-value-point-2 .core-value-marker {
    top: 7px;
    right: -24px;

    background: #ff8a00;
}

.core-value-point-3 .core-value-marker {
    top: 7px;
    right: -24px;

    background: #32d17d;
}

.core-value-point-4 .core-value-marker {
    top: 7px;
    left: -28px;

    background:
        linear-gradient(
            135deg,
            #2997ff,
            #32d17d
        );
}


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

.core-value-number {
    display: block;

    margin-bottom: 10px;

    font-size: 3.4rem;
    font-weight: 650;

    line-height: .95;

    letter-spacing: -.06em;

    color: rgba(21, 33, 43, .14);

    transition:
        color .3s ease,
        transform .3s ease;
}

.core-value-point-1 .core-value-number {
    color: rgba(41, 151, 255, .28);
}

.core-value-point-2 .core-value-number {
    color: rgba(255, 138, 0, .28);
}

.core-value-point-3 .core-value-number {
    color: rgba(50, 209, 125, .30);
}

.core-value-point-4 .core-value-number {
    color: rgba(0, 107, 112, .25);
}


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

.core-value-point h3 {
    margin: 0 0 11px;

    color: var(--ink);

    font-size: 1.12rem;
    font-weight: 650;

    line-height: 1.3;

    letter-spacing: -.015em;
}


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

.core-value-point p {
    max-width: 230px;

    margin: 0;

    color: var(--muted);

    font-size: .84rem;
    font-weight: 450;

    line-height: 1.75;
}


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

.core-value-point:hover .core-value-marker {
    transform: scale(1.35);

    box-shadow:
        0 0 0 7px rgba(255,255,255,.8),
        0 8px 25px rgba(0,0,0,.18);
}

.core-value-point:hover .core-value-number {
    transform: translateY(-4px);
}

.core-value-point:hover h3 {
    color: var(--navy);
}
/* =========================================
   CORE VALUES — SCROLL SEQUENCE
========================================= */

.core-value-point {
    opacity: 0;
    transform: translateY(28px);
}

/* 01 */
.company-values-section.is-visible .core-value-point-1 {
    animation: coreValuePointReveal .7s ease .35s forwards;
}

/* 02 */
.company-values-section.is-visible .core-value-point-2 {
    animation: coreValuePointReveal .7s ease .95s forwards;
}

/* 03 */
.company-values-section.is-visible .core-value-point-3 {
    animation: coreValuePointReveal .7s ease 1.55s forwards;
}

/* 04 */
.company-values-section.is-visible .core-value-point-4 {
    animation: coreValuePointReveal .7s ease 2.15s forwards;
}

@keyframes coreValuePointReveal {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* =========================================
   CORE VALUE NUMBER + DOT ALIGNMENT
========================================= */

.core-value-point {
    position: absolute;
}

/* Keep number and dot visually grouped */
.core-value-number {
    position: relative;
    display: inline-block;
    line-height: 1;
    margin: 0;
}
.core-value-dot {
    position: absolute;

    width: 16px;
    height: 16px;

    border-radius: 50%;

    /* place dot directly above the number */
    top: -22px;
    left: 18px;

    transform: none;

    border: 4px solid #fff;

    box-shadow:
        0 3px 10px rgba(15, 35, 45, 0.18),
        0 0 0 1px rgba(15, 35, 45, 0.10);

    z-index: 5;
}
/* =========================================
   CORE VALUE — PERFECT NUMBER + DOT ALIGNMENT
========================================= */

.core-value-point .core-value-marker {
    top: -22px;
    left: 18px;
    right: auto;

    width: 18px;
    height: 18px;

    border: 4px solid #ffffff;
    border-radius: 50%;

    box-shadow:
        0 4px 12px rgba(10, 34, 57, .18),
        0 0 0 1px rgba(10, 34, 57, .08);
}
/* ==================================================
   HOME — Brands WE SERVE
================================================== */

.Brands-home {
    position: relative;
    padding: 110px 0;
    overflow: hidden;

    background-image: url("../images/brands-bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.Brands-home::before {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.82) 0%,
        rgba(0, 0, 0, 0.68) 50%,
        rgba(0, 0, 0, 0.58) 100%
    );

    z-index: 1;
    pointer-events: none;
}
.Brands-home .eyebrow {
    color: #55d49b !important;
}

.Brands-home .section-head h2 {
    color: #ffffff;
}

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

.Brands-home .section-head {
    margin-bottom: 55px;
}

.Brands-home .eyebrow {
    display: inline-block;
    margin-bottom: 14px;

    color: var(--green);

    font-size: 0.8rem;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.16em;
}

.Brands-home .section-head h2 {
    max-width: 720px;
    margin: 0;

    color: var(--ink);

    font-size: clamp(2.4rem, 4vw, 4.2rem);
    font-weight: 900;

    line-height: 1.02;
    letter-spacing: -0.045em;
}

.Brands-home-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.industry-home-card {
    position: relative;

    min-height: 300px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 60px 38px 35px;

    background: rgba(20, 20, 20, 0.58);

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

    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 22px;

    overflow: hidden;

    transition:
        transform .45s cubic-bezier(.22, 1, .36, 1),
        background .35s ease,
        border-color .35s ease;
}
.industry-home-card::before {
    position: absolute;

    top: 28px;
    left: 38px;

    color: #4ce0a7;

    font-size: .78rem;
    font-weight: 900;

    letter-spacing: .10em;
}

.industry-home-card:nth-child(1)::before {
    content: "01";
}

.industry-home-card:nth-child(2)::before {
    content: "02";
}

.industry-home-card:nth-child(3)::before {
    content: "03";
}

.industry-home-card:nth-child(4)::before {
    content: "04";
}

.industry-home-card::after {
    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    top: -90px;
    right: -90px;

    border-radius: 50%;

    background: rgba(25, 152, 106, 0.08);

    transition:
        transform 0.6s cubic-bezier(.22, 1, .36, 1),
        background 0.35s ease;
}

.industry-home-card h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 16px;

    color: #ffffff !important;

    font-size: 1.35rem;
    font-weight: 850;

    line-height: 1.2;
    letter-spacing: -.025em;
}
.industry-home-card p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: rgba(255, 255, 255, 0.78) !important;

    font-size: .93rem;
    line-height: 1.75;
}

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

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

    border-color: rgba(85, 212, 155, 0.50);

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.25);
}
.industry-home-card:hover::after {
    transform: scale(2.1);
    background: rgba(25, 152, 106, 0.10);
}
.Brands-home .section-head h2 {
    color: #ffffff !important;
}
.Brands-home .section-head {
    margin-bottom: 55px;
}

.Brands-home .eyebrow {
    color: #4ce0a7 !important;
}

.Brands-home .section-head h2 {
    max-width: 850px;

    margin: 0;

    color: #ffffff !important;

    font-size: clamp(2.8rem, 4.2vw, 4.5rem);
    font-weight: 900;

    line-height: 1.02;
    letter-spacing: -.045em;
}
/* ==================================================
   HOME SUSTAINABILITY
================================================== */

.home-sustainability {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    background: #f7faf8;
}


/* subtle decorative glow */

.home-sustainability::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    right: -220px;
    top: -220px;
    border-radius: 50%;
    background: rgba(30, 90, 70, .055);
    pointer-events: none;
}


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

.sustainability-top {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 100px;

    align-items: end;

    padding-bottom: 65px;

    border-bottom: 1px solid #dce5e1;
}


.sustainability-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 20px;

    color: #1e5a46;

    font-size: .76rem;
    font-weight: 850;

    letter-spacing: .18em;
    text-transform: uppercase;
}


.sustainability-kicker::before {
    content: "";

    width: 38px;
    height: 2px;

    background: #1e5a46;
}


.sustainability-heading h2 {
    max-width: 700px;

    margin: 0;

    color: #15212b;

    font-size: clamp(3rem, 5vw, 5.4rem);
    font-weight: 900;

    line-height: .96;
    letter-spacing: -.055em;
}


.sustainability-heading h2 span {
    display: block;
    color: #1e5a46;
}


/* INTRO */

.sustainability-intro {
    max-width: 500px;
    padding-bottom: 8px;
}


.sustainability-intro p {
    margin: 0 0 28px;

    color: #66737d;

    font-size: 1rem;
    line-height: 1.85;
}


.sustainability-link {
    display: inline-flex;
    align-items: center;
    gap: 18px;

    color: #006b70;

    font-size: .88rem;
    font-weight: 800;

    padding-bottom: 7px;

    border-bottom: 1px solid rgba(0, 107, 112, .3);
}


.sustainability-link span {
    font-size: 1.1rem;
    transition: transform .3s ease;
}


.sustainability-link:hover span {
    transform: translate(4px, -4px);
}


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

.sustainability-cards {
    position: relative;
    z-index: 2;

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

    gap: 0;

    margin-top: 65px;
}


.sustainability-card {
    position: relative;

    min-height: 280px;

    padding: 15px 48px 35px;

    border-right: 1px solid #dce5e1;
}


.sustainability-card:first-child {
    padding-left: 0;
}


.sustainability-card:last-child {
    border-right: 0;
}


.sustainability-number {
    display: block;

    margin-bottom: 40px;

    color: #7db2a3;

    font-size: .72rem;
    font-weight: 900;

    letter-spacing: .12em;
}


.sustainability-card-line {
    width: 45px;
    height: 2px;

    margin-bottom: 23px;

    background: #1e5a46;

    transition: width .4s ease;
}


.sustainability-card:hover .sustainability-card-line {
    width: 85px;
}


.sustainability-card h3 {
    margin: 0 0 15px;

    color: #15212b;

    font-size: 1.4rem;
    font-weight: 850;

    letter-spacing: -.025em;
}


.sustainability-card p {
    max-width: 340px;

    margin: 0;

    color: #738079;

    font-size: .9rem;
    line-height: 1.75;
}


/* ===============================
   SUPPLY FLOW
================================ */

.sustainability-flow {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 190px 1fr;

    gap: 50px;
    align-items: center;

    margin-top: 30px;
    padding: 30px 0 0;

    border-top: 1px solid #dce5e1;
}


.sustainability-flow-label {
    color: #1e5a46;

    font-size: .72rem;
    font-weight: 850;

    letter-spacing: .12em;
    text-transform: uppercase;
}


.sustainability-flow-items {
    display: flex;
    align-items: center;

    width: 100%;
}


.sustainability-flow-items div {
    display: flex;
    flex-direction: column;

    min-width: 90px;
}


.sustainability-flow-items strong {
    color: #15212b;

    font-size: .86rem;
    font-weight: 800;
}


.sustainability-flow-items span {
    margin-top: 3px;

    color: #91a29c;

    font-size: .66rem;
    font-weight: 700;
}


.sustainability-flow-items i {
    flex: 1;

    height: 1px;

    margin: 0 22px;

    background: #b8ccc5;

    position: relative;
}


.sustainability-flow-items i::after {
    content: "";

    position: absolute;

    right: -1px;
    top: 50%;

    width: 5px;
    height: 5px;

    border-top: 1px solid #789e91;
    border-right: 1px solid #789e91;

    transform: translateY(-50%) rotate(45deg);
}
/* ==================================================
   HOME SUSTAINABILITY — CINEMATIC BACKGROUND
================================================== */

.home-sustainability {
    position: relative;
    min-height: 720px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        url("../images/sustainability-bg.png")
        center / cover no-repeat;

    color: #fff;
}


.home-sustainability-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(2, 25, 27, .94) 0%,
            rgba(2, 31, 31, .80) 36%,
            rgba(2, 31, 31, .42) 67%,
            rgba(2, 31, 31, .20) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0,0,0,.08),
            rgba(0,0,0,.42)
        );
}


.home-sustainability-inner {
    position: relative;
    z-index: 2;

    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;

    padding: 100px 0 75px;
}


.home-sustainability-content {
    max-width: 760px;
}
.home-sustainability-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 18px;

    color: #a9efd1;

    font-size: .72rem;
    font-weight: 850;

    letter-spacing: .16em;
    text-transform: uppercase;
}


.home-sustainability-kicker::before {
    content: "";

    width: 42px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #168cff,
            #40d790
        );
}

.home-sustainability-content h2 {
    margin: 0;

    font-size: clamp(3rem, 4.8vw, 5rem);
    font-weight: 900;

    line-height: .96;
    letter-spacing: -.05em;
}
.home-sustainability-content h2 span {
    display: block;
    color: #9ce8c9;
}


.home-sustainability-content p {
    max-width: 600px;

    margin: 25px 0 30px;

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

    font-size: .98rem;
    line-height: 1.8;
}


.home-sustainability-btn {
    display: inline-flex;
    align-items: center;
    gap: 13px;

    color: #fff;

    font-size: .84rem;
    font-weight: 800;

    padding-bottom: 7px;

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


.home-sustainability-btn span {
    transition: transform .3s ease;
}


.home-sustainability-btn:hover span {
    transform: translateX(6px);
}


/* =================================
   CLEAN TIMELINE — NO CARDS
================================= */

.sustainability-timeline {
    position: relative;

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

    gap: 35px;

    margin-top: 90px;
    padding-top: 38px;

    border-top:
        1px solid rgba(255,255,255,.28);
}


.sustainability-stage {
    position: relative;
}


.sustainability-stage::before {
    content: "";

    position: absolute;

    top: -43px;
    left: 0;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: #7fe0bc;

    box-shadow:
        0 0 0 5px rgba(127,224,188,.12),
        0 0 20px rgba(127,224,188,.5);
}


.sustainability-stage span {
    display: block;

    margin-bottom: 9px;

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

    font-size: .68rem;
    font-weight: 900;
}


.sustainability-stage strong {
    display: block;

    color: #fff;

    font-size: 1rem;
    font-weight: 800;
}


.sustainability-stage small {
    display: block;

    margin-top: 5px;

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

    font-size: .72rem;
}
/* =========================================
   SUSTAINABILITY — DESKTOP TEXT SIZE UPDATE
========================================= */

/* RESPONSIBLE SUPPLY */
.home-sustainability-kicker {
    font-size: 0.82rem;
    letter-spacing: 0.17em;
}

/* Main description */
.home-sustainability-content p {
    font-size: 1.08rem;
    line-height: 1.9;
    max-width: 720px;
}

/* Explore Our Approach */
.home-sustainability-btn {
    font-size: 0.95rem;
}

/* 01 02 03 04 */
.sustainability-stage span {
    font-size: 0.78rem;
}

/* Source / Handle / Store / Supply */
.sustainability-stage strong {
    font-size: 1.15rem;
    line-height: 1.3;
}

/* Trusted suppliers etc. */
.sustainability-stage small {
    font-size: 0.82rem;
    line-height: 1.5;
    margin-top: 8px;
}
/* =========================================
   HOME — KEY ADVANTAGES
========================================= */
.key-advantages {
    position: relative;
    overflow: hidden;

    padding: 110px 0 120px;

    background:
        radial-gradient(
            circle at 8% 15%,
            rgba(23, 101, 78, .08),
            transparent 27%
        ),
        #ffffff;
}


/* HEADING */
.home-advantages .section-head  {
    display: block;

    max-width: 100%;

    margin: 0 auto 70px;

    text-align: center;
}
.key-advantages .section-head > div {
    width: 100%;
    text-align: center;
}

.key-advantages .eyebrow {
    display: block;

    width: 100%;

    text-align: center;
}

.key-advantages .section-head h2 {
    max-width: 900px;

    margin: 0 auto;

    text-align: center;

    font-size: clamp(3rem, 5vw, 5.2rem);
    line-height: .98;
    letter-spacing: -.055em;

    color: var(--navy);
}

/* =========================================
   KEY ADVANTAGES — 3 COLUMN DESIGN
========================================= */

.advantages-grid {
    display: grid;

grid-template-columns:
    minmax(0, 1fr)
    380px
    minmax(0, 1fr);

    align-items: stretch;

    border-top: 1px solid rgba(15, 40, 55, .16);
}


/* LEFT + RIGHT CONTENT */

.advantage-card {
    position: relative;

    min-height: 420px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 60px 50px;

    background: transparent;

    border: 0;
    border-radius: 0;
    box-shadow: none;
}


/* LEFT */

.advantage-card:first-child {
    padding-left: 0;
}


/* RIGHT */

.advantage-card:last-child {
    padding-right: 0;
}


/* REMOVE OLD NUMBER */

.advantage-card::before,
.advantage-card::after {
    display: none;
}


/* LABEL */

.advantage-card > span {
    display: block;

    margin-bottom: 22px;

    font-size: .75rem;
    font-weight: 800;

    letter-spacing: .13em;
    text-transform: uppercase;

    color: var(--green);
}


/* TITLE */

.advantage-card h3 {
    max-width: 470px;

    margin: 0 0 24px;

    font-size: clamp(2rem, 2.5vw, 2.8rem);
    line-height: 1.08;

    letter-spacing: -.04em;

    color: #007c83;
}


/* DESCRIPTION */

.advantage-card p {
    max-width: 470px;

    margin: 0;

    font-size: 1rem;
    line-height: 1.8;

    color: #687785;
}


/* =========================================
   CENTER PRODUCT VISUAL
========================================= */

.advantages-center {
    position: relative;

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

    min-height: 420px;
}


/* VERTICAL LINE */

.advantages-center::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 50%;

    width: 1px;

    background: rgba(15, 40, 55, .13);

    transform: translateX(-50%);
}


/* IMAGE */

.advantages-image-wrap {
    position: relative;
    z-index: 2;

    width: 350px;
    height: 350px;

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

/* SOFT BACKGROUND BEHIND IMAGE */

.advantages-image-wrap::before {
    content: "";

    position: absolute;

    width: 245px;
    height: 245px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(28, 120, 90, .12),
            rgba(28, 120, 90, .035) 55%,
            transparent 72%
        );
}


/* PRODUCT IMAGE */

.advantages-image-wrap img {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 100%;

    object-fit: contain;

    filter:
        drop-shadow(
            0 22px 28px rgba(9, 42, 39, .16)
        );
}
/* ==================================================
   BETTER SUPPLY — COLOUR SLASH DESIGN
================================================== */

.business-features-section {
    padding: 100px 0 115px;
    overflow: hidden;
    background: #fff;
}


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

.business-features-head {
    display: block;
    margin: 0 auto 55px;
    text-align: center;
}

.business-features-head > div {
    width: 100%;
}

.business-features-head .eyebrow {
    display: block;

    margin-bottom: 12px;

    color: var(--green);

    font-size: .75rem;
    font-weight: 800;

    letter-spacing: .14em;
    text-transform: uppercase;
}

.business-features-head h2 {
    max-width: 850px;

    margin: 0 auto;

    color: var(--navy);

    font-size: clamp(3rem, 5vw, 4.8rem);
    font-weight: 900;

    line-height: 1;
    letter-spacing: -.05em;
}


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

.business-features-grid {
    display: grid;

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

    min-height: 390px;

    overflow: hidden;
}


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

.business-feature-card {
    position: relative;

    min-height: 390px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: 55px 45px;

    border: 0;
    border-radius: 0;
    box-shadow: none;

    overflow: hidden;
}


/* ==============================
   DIFFERENT COLOUR SHADES
============================== */

/* 01 */

.feature-01 {
    color: #073e39;

    background:
        linear-gradient(
            135deg,
            #dff5e8 0%,
            #c9eddb 100%
        );

    clip-path:
        polygon(
            0 0,
            100% 0,
            88% 100%,
            0 100%
        );
}


/* 02 */

.feature-02 {
    margin-left: -35px;
    padding-left: 75px;

    color: #075b68;

    background:
        linear-gradient(
            135deg,
            #dff4f5 0%,
            #bfe7e9 100%
        );

    clip-path:
        polygon(
            12% 0,
            100% 0,
            88% 100%,
            0 100%
        );
}


/* 03 */

.feature-03 {
    margin-left: -35px;
    padding-left: 75px;

    color: #745814;

    background:
        linear-gradient(
            135deg,
            #fff4cf 0%,
            #f7e3a1 100%
        );

    clip-path:
        polygon(
            12% 0,
            100% 0,
            88% 100%,
            0 100%
        );
}


/* 04 */

.feature-04 {
    margin-left: -35px;
    padding-left: 75px;

    color: #264d76;

    background:
        linear-gradient(
            135deg,
            #e3eef8 0%,
            #cddfed 100%
        );

    clip-path:
        polygon(
            12% 0,
            100% 0,
            100% 100%,
            0 100%
        );
}


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

.business-feature-card > span {
    position: absolute;

    top: 38px;
    left: 42px;

    margin: 0;

    font-size: 4.8rem;
    font-weight: 900;

    line-height: 1;

    letter-spacing: -.07em;

    opacity: .12;
}

.feature-02 > span,
.feature-03 > span,
.feature-04 > span {
    left: 72px;
}


/* ==============================
   TITLES
============================== */

.business-feature-card h3 {
    position: relative;
    z-index: 2;

    max-width: 230px;

    margin: 0 0 15px;

    color: currentColor;

    font-size: 1.55rem;
    font-weight: 900;

    line-height: 1.08;
    letter-spacing: -.035em;
}


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

.business-feature-card p {
    position: relative;
    z-index: 2;

    max-width: 230px;

    margin: 0;

    color: currentColor;

    font-size: .85rem;
    line-height: 1.65;

    opacity: .78;
}
/* =========================================================
   ABOUT US SECTION
========================================================= */

.about-modern-section {
    position: relative;

    width: 100%;

    padding:
        85px
        0
        90px;

    background:
        #ffffff;

    overflow: hidden;
}


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

.about-modern-container {

    width:
        min(
            1450px,
            100%
        );

    margin:
        0
        auto;

    padding-left:
        55px;

    padding-right:
        55px;

    display:
        grid;

    grid-template-columns:
        minmax(0, .95fr)
        minmax(0, 1.2fr);

    gap:
        70px;

    align-items:
        center;
}


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

.about-visual {

    position:
        relative;

    width:
        100%;

    min-height:
        760px;
}


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

.about-main-image {

    position:
        absolute;

    top:
        40px;

    left:
        20px;

    width:
        78%;

    height:
        590px;

    z-index:
        4;

    overflow:
        hidden;

    border-radius:
        32px;

    background:
        #edf3f6;

    box-shadow:
        0 24px 55px
        rgba(
            18,
            38,
            63,
            .14
        );
}


.about-main-image img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;
}


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

.about-small-image {

    position:
        absolute;

    right:
        0;

    bottom:
        40px;

    width:
        52%;

    height:
        250px;

    z-index:
        7;

    padding:
        7px;

    overflow:
        hidden;

    border-radius:
        28px;

    background:
        #ffffff;

    box-shadow:
        0 22px 45px
        rgba(
            19,
            39,
            61,
            .20
        );
}


.about-small-image img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    border-radius:
        21px;
}


/* =========================================================
   DECORATIVE SHAPES
========================================================= */

.about-shape {

    position:
        absolute;

    z-index:
        1;

    border-radius:
        30px;
}


.about-shape-blue {

    top:
        18px;

    left:
        0;

    width:
        155px;

    height:
        155px;

    background:
        linear-gradient(
            145deg,
            #0c65d7,
            #188cff
        );
}


.about-shape-green {

    right:
        8px;

    bottom:
        15px;

    width:
        175px;

    height:
        160px;

    background:
        linear-gradient(
            145deg,
            #2ba74c,
            #4bc86c
        );
}


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

.about-dots {

    position:
        absolute;

    width:
        100px;

    height:
        85px;

    z-index:
        2;

    opacity:
        .72;

    background-size:
        14px
        14px;
}


.about-dots-blue {

    left:
        0;

    bottom:
        95px;

    background-image:
        radial-gradient(
            circle,
            #168cf0 2px,
            transparent 2.5px
        );
}


.about-dots-green {

    right:
        10px;

    bottom:
        0;

    background-image:
        radial-gradient(
            circle,
            #42b85f 2px,
            transparent 2.5px
        );
}


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

.about-content {

    position:
        relative;

    z-index:
        5;

    min-width:
        0;
}


/* =========================================================
   KICKER
========================================================= */

.about-kicker {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin-bottom:
        20px;

    color:
        #116b72;

    font-size:
        13px;

    font-weight:
        800;

    letter-spacing:
        1.8px;
}


.about-kicker span {

    width:
        45px;

    height:
        2px;

    flex-shrink:
        0;

    border-radius:
        20px;

    background:
        linear-gradient(
            90deg,
            #087fe8,
            #38b45f
        );
}


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

.about-content > h2 {

    margin:
        0;

    color:
        #17222d;

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

    font-weight:
        900;

    line-height:
        1.05;

    letter-spacing:
        -2px;
}


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

.about-title-line {

    width:
        118px;

    height:
        3px;

    margin:
        22px
        0
        28px;

    border-radius:
        30px;

    background:
        linear-gradient(
            90deg,
            #117fe4,
            #39ae59
        );
}


/* =========================================================
   ABOUT PARAGRAPHS
========================================================= */

.about-content > p {

    max-width:
        760px;

    margin:
        0
        0
        18px;

    color:
        #687785;

    font-size:
        15.5px;

    line-height:
        1.82;
}


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

.about-stats {

    display:
        grid;

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

    width:
        100%;

    margin-top:
        35px;

    border-top:
        1px solid
        #dfe6eb;

    border-bottom:
        1px solid
        #dfe6eb;
}


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

.stat-item {

    position:
        relative;

    min-width:
        0;

    min-height:
        235px;

    padding:
        25px
        14px
        22px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    text-align:
        center;

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


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

    border-right:
        1px solid
        #dfe6eb;
}


.stat-item:hover {

    transform:
        translateY(-5px);

    background:
        linear-gradient(
            180deg,
            rgba(14, 111, 218, .035),
            rgba(48, 173, 81, .025)
        );
}


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

.stat-icon {

    width:
        62px;

    height:
        62px;

    margin:
        0
        auto
        17px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        18px;
}


.stat-icon svg {

    width:
        32px;

    height:
        32px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.stat-blue {

    color:
        #0b72df;

    background:
        #edf5ff;
}


.stat-green {

    color:
        #31ad53;

    background:
        #eff9f1;
}


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

.stat-number {

    width:
        100%;

    min-height:
        42px;

    margin:
        0
        0
        10px !important;

    display:
        flex;

    align-items:
        baseline;

    justify-content:
        center;

    gap:
        2px;

    white-space:
        nowrap;

    color:
        #0865ce !important;

    font-size:
        38px !important;

    font-weight:
        900 !important;

    line-height:
        1 !important;

    letter-spacing:
        -1.2px !important;

    text-shadow:
        none !important;

    filter:
        none !important;
}


/* COUNTER */

.stat-number .counter {

    display:
        inline-block;

    color:
        inherit;

    font:
        inherit;

    line-height:
        inherit;
}


/* PLUS */

.stat-plus {

    display:
        inline-block;

    margin-left:
        1px;

    color:
        inherit;

    font-size:
        22px;

    font-weight:
        900;

    line-height:
        1;
}


/* GREEN */

.stat-number.green-number {

    color:
        #2eaa4f !important;
}


/* ON TIME */

.stat-text-number {

    align-items:
        center;

    justify-content:
        center;

    font-size:
        27px !important;

    letter-spacing:
        -.7px !important;
}


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

.stat-item h4 {

    margin:
        0
        0
        8px;

    color:
        #17212b;

    font-size:
        14px;

    font-weight:
        800;

    line-height:
        1.35;
}


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

.stat-item p {

    max-width:
        145px;

    margin:
        0
        auto;

    color:
        #72808c;

    font-size:
        11.8px;

    font-weight:
        400;

    line-height:
        1.65;
}


/* =========================================================
   DESKTOP SMALLER
========================================================= */

@media (max-width: 1250px) {

    .about-modern-container {

        padding-left:
            32px;

        padding-right:
            32px;

        gap:
            45px;

        grid-template-columns:
            minmax(0, .9fr)
            minmax(0, 1.1fr);
    }


    .about-visual {

        min-height:
            650px;
    }


    .about-main-image {

        width:
            82%;

        height:
            515px;
    }


    .about-small-image {

        width:
            55%;

        height:
            215px;
    }


    .stat-number {

        font-size:
            32px !important;
    }


    .stat-text-number {

        font-size:
            24px !important;
    }

}


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

@media (max-width: 1000px) {

    .about-modern-section {

        padding:
            65px
            0
            70px;
    }


    .about-modern-container {

        grid-template-columns:
            1fr;

        gap:
            55px;

        padding-left:
            24px;

        padding-right:
            24px;
    }


    .about-visual {

        width:
            100%;

        max-width:
            650px;

        min-height:
            620px;

        margin:
            0
            auto;
    }


    .about-main-image {

        left:
            0;

        width:
            82%;

        height:
            500px;
    }


    .about-small-image {

        right:
            0;

        bottom:
            15px;

        width:
            53%;

        height:
            215px;
    }


    .about-content {

        width:
            100%;

        max-width:
            800px;

        margin:
            0
            auto;
    }


    .about-stats {

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


    .stat-item {

        min-height:
            220px;
    }


    .stat-item:nth-child(2) {

        border-right:
            none;
    }


    .stat-item:nth-child(1),
    .stat-item:nth-child(2) {

        border-bottom:
            1px solid
            #dfe6eb;
    }


    .stat-number {

        font-size:
            36px !important;
    }

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

@media (max-width: 767px) {

    .about-modern-section {
        padding:
            55px
            0
            60px;
    }


    .about-modern-container {
        gap: 40px;

        padding-left: 16px;
        padding-right: 16px;
    }


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

    .about-visual {
        position: relative;

        width: 100%;

        min-height: 520px;

        padding-top: 20px;
    }


    /* MAIN IMAGE */

    .about-main-image {
        position: absolute;

        top: 38px;

        /*
         * moved inside so the blue shape
         * remains visible at top-left
         */
        left: 16px;

        width: calc(88% - 16px);

        height: 400px;

        border-radius: 24px;

        overflow: hidden;

        z-index: 4;

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


    .about-main-image img {
        width: 100%;
        height: 100%;

        display: block;

        object-fit: cover;

        border-radius: inherit;
    }


    /* =====================================================
       BLUE DECORATIVE SHAPE
    ===================================================== */

    .about-shape-blue {
        position: absolute;

        top: 14px;

        left: 0;

        width: 120px;

        height: 120px;

        border-radius: 25px;

        z-index: 2;

        background:
            linear-gradient(
                145deg,
                #075fcf 0%,
                #1597ff 100%
            );

        box-shadow:
            0 10px 28px
            rgba(12, 109, 220, .16);
    }


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

    .about-small-image {
        position: absolute;

        width: 56%;

        height: 170px;

        right: 0;

        bottom: 25px;

        padding: 6px;

        border-radius: 22px;

        z-index: 7;

        background: #ffffff;

        box-shadow:
            0 18px 40px
            rgba(18, 38, 59, .20);
    }


    .about-small-image img {
        width: 100%;
        height: 100%;

        display: block;

        object-fit: cover;

        border-radius: 16px;
    }


    /* =====================================================
       GREEN DECORATIVE SHAPE
    ===================================================== */

    .about-shape-green {
        position: absolute;

        width: 130px;

        height: 115px;

        right: 0;

        bottom: 8px;

        border-radius: 24px;

        z-index: 2;

        background:
            linear-gradient(
                145deg,
                #269f48 0%,
                #4ccd70 100%
            );

        box-shadow:
            0 10px 26px
            rgba(41, 175, 80, .14);
    }


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

    .about-dots {
        width: 72px;

        height: 58px;

        background-size:
            11px
            11px;
    }


    .about-dots-blue {
        position: absolute;

        left: 0;

        bottom: 80px;

        z-index: 3;

        opacity: .7;
    }


    .about-dots-green {
        position: absolute;

        right: 4px;

        bottom: 0;

        z-index: 3;

        opacity: .65;
    }


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

    .about-kicker {
        gap: 10px;

        font-size: 11px;
    }


    .about-kicker span {
        width: 32px;
    }


    .about-content > h2 {
        font-size: 38px;

        letter-spacing: -1px;
    }


    .about-title-line {
        width: 90px;

        margin:
            17px
            0
            22px;
    }


    .about-content > p {
        margin-bottom: 16px;

        font-size: 14px;

        line-height: 1.75;
    }


    /* =====================================================
       STATS - KEEP 2 X 2
    ===================================================== */

    .about-stats {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        margin-top: 28px;
    }


    .stat-item {
        min-height: 215px;

        padding:
            22px
            10px;
    }


    .stat-item:nth-child(odd) {
        border-right:
            1px solid
            #dfe6eb;
    }


    .stat-item:nth-child(even) {
        border-right: none;
    }


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


    .stat-icon {
        width: 54px;

        height: 54px;

        margin-bottom: 14px;
    }


    .stat-icon svg {
        width: 28px;

        height: 28px;
    }


    .stat-number {
        min-height: 35px;

        font-size:
            30px !important;
    }


    .stat-plus {
        font-size: 17px;
    }


    .stat-text-number {
        font-size:
            22px !important;
    }


    .stat-item h4 {
        font-size: 13px;
    }


    .stat-item p {
        max-width: 135px;

        font-size: 11px;
    }

}


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

@media (max-width: 480px) {

    .about-modern-container {
        padding-left: 15px;
        padding-right: 15px;
    }


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

    .about-visual {
        position: relative;

        min-height: 455px;

        padding-top: 18px;
    }


    .about-main-image {
        top: 34px;

        left: 14px;

        width:
            calc(
                90% - 14px
            );

        height: 345px;

        border-radius: 21px;
    }


    /* BLUE SHAPE CLEARLY VISIBLE */

    .about-shape-blue {
        top: 10px;

        left: 0;

        width: 108px;

        height: 108px;

        border-radius: 22px;

        background:
            linear-gradient(
                145deg,
                #075fcf,
                #1597ff
            );
    }


    .about-small-image {
        width: 59%;

        height: 145px;

        right: 0;

        bottom: 22px;

        padding: 5px;

        border-radius: 19px;
    }


    .about-small-image img {
        border-radius: 14px;
    }


    /* GREEN SHAPE */

    .about-shape-green {
        width: 115px;

        height: 102px;

        right: 0;

        bottom: 6px;

        border-radius: 21px;
    }


    /* DOTS */

    .about-dots-blue {
        width: 60px;

        height: 48px;

        left: 0;

        bottom: 65px;
    }


    .about-dots-green {
        width: 60px;

        height: 48px;

        right: 2px;

        bottom: 0;
    }


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

    .about-content > h2 {
        font-size: 34px;
    }


    .about-content > p {
        font-size: 13.5px;
    }


    .about-kicker {
        font-size: 10px;
    }


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

    .stat-item {
        min-height: 205px;

        padding:
            20px
            7px;
    }


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

        letter-spacing:
            -.7px !important;
    }


    .stat-plus {
        font-size: 16px;
    }


    .stat-text-number {
        font-size:
            20px !important;
    }


    .stat-item h4 {
        font-size: 12px;
    }


    .stat-item p {
        max-width: 120px;

        font-size: 10.5px;
    }

}



/* vison misson  */


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

.purpose-section {
    position: relative;

    width: 100%;

    padding: 75px 0 65px;

    overflow: hidden;

    /* ONLINE WAREHOUSE BACKGROUND */
    background-image:
        url("https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?auto=format&fit=crop&w=2000&q=90");

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


/* BACKGROUND OVERLAY */

.purpose-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(4, 31, 54, .88) 0%,
            rgba(7, 47, 62, .78) 50%,
            rgba(34, 81, 43, .70) 100%
        );
}


/* SOFT CENTER GLOW */

.purpose-section::before {
    content: "";

    position: absolute;

    width: 900px;
    height: 600px;

    top: 50%;
    left: 50%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.12),
            transparent 70%
        );

    z-index: 1;

    pointer-events: none;
}


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

.purpose-wrap {
    position: relative;

    z-index: 3;

    width: min(1400px, 100%);

    margin: 0 auto;

    padding-left: 55px;
    padding-right: 55px;
}


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

.purpose-head {
    max-width: 900px;

    margin: 0 auto 45px;

    text-align: center;
}


.purpose-label {
    display: flex;

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

    gap: 15px;

    margin-bottom: 13px;

    color: #ffffff;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2.5px;
}


.purpose-label-line {
    width: 55px;
    height: 2px;

    flex-shrink: 0;

    border-radius: 30px;
}


.blue-line {
    background: #1785ef;
}


.green-line {
    background: #48c652;
}


/* TITLE */

.purpose-head h2 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(48px, 5vw, 72px);

    font-weight: 900;

    line-height: 1.05;

    letter-spacing: -2px;
}


.purpose-blue {
    color: #1571df;
}


.purpose-and {
    color: #ffffff;
}


.purpose-green {
    color: #40b64b;
}


.purpose-head > p {
    max-width: 780px;

    margin: 20px auto 0;

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

    font-size: 17px;

    line-height: 1.65;
}


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

.purpose-cards {
    display: grid;

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

    gap: 38px;

    align-items: stretch;
}


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

   IMPORTANT:
   Keep actual side tab outside white card.
========================================================= */

.purpose-card {
    position: relative;

    min-width: 0;
}


/* VISION RESERVES LEFT SPACE */

.purpose-vision {
    padding-left: 74px;
}


/* MISSION RESERVES RIGHT SPACE */

.purpose-mission {
    padding-right: 74px;
}


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

.purpose-card-box {
    position: relative;

    width: 100%;

    min-height: 510px;

    padding:
        36px
        48px
        45px;

    overflow: hidden;

    border-radius: 26px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fafcfd
        );

    box-shadow:
        0 25px 65px
        rgba(0,0,0,.23);

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


.purpose-card:hover .purpose-card-box {
    transform: translateY(-6px);

    box-shadow:
        0 34px 75px
        rgba(0,0,0,.29);
}


/* =========================================================
   NUMBER SIDE TAB
========================================================= */

.purpose-side-number {
    position: absolute;

    top: 75px;

    width: 96px;
    height: 290px;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;

    padding-top: 92px;

    color: #ffffff;
}


/* VISION */

.purpose-vision .purpose-side-number {
    left: 0;

    background:
        linear-gradient(
            180deg,
            #0875eb,
            #0756bf
        );

    border-radius:
        27px
        0
        0
        27px;

    clip-path:
        polygon(
            0 0,
            100% 0,
            100% 57%,
            82% 68%,
            56% 80%,
            28% 92%,
            0 100%
        );
}


/* MISSION */

.purpose-mission .purpose-side-number {
    right: 0;

    background:
        linear-gradient(
            180deg,
            #40c249,
            #248f32
        );

    border-radius:
        0
        27px
        27px
        0;

    clip-path:
        polygon(
            0 0,
            100% 0,
            100% 100%,
            72% 92%,
            44% 80%,
            18% 68%,
            0 57%
        );
}


.purpose-side-number strong {
    font-size: 34px;

    font-weight: 900;

    line-height: 1;
}


.purpose-side-number span {
    display: block;

    width: 38px;
    height: 2px;

    margin-top: 14px;

    background: #ffffff;
}


/* =========================================================
   TOP CORNER
========================================================= */

.purpose-top-corner {
    position: absolute;

    top: 0;
    right: 0;

    width: 76px;
    height: 70px;

    z-index: 2;

    clip-path:
        polygon(
            0 0,
            100% 0,
            100% 100%,
            45% 100%
        );
}


.purpose-vision .purpose-top-corner {
    background:
        linear-gradient(
            135deg,
            #1982f0,
            #075bc2
        );
}


.purpose-mission .purpose-top-corner {
    background:
        linear-gradient(
            135deg,
            #4dcc58,
            #239137
        );
}


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

.purpose-dot-pattern {
    position: absolute;

    top: 45px;
    right: 42px;

    width: 100px;
    height: 80px;

    z-index: 1;

    opacity: .42;

    background-size:
        14px
        14px;
}


.purpose-vision .purpose-dot-pattern {
    background-image:
        radial-gradient(
            circle,
            #3f91e9 2px,
            transparent 2.5px
        );
}


.purpose-mission .purpose-dot-pattern {
    background-image:
        radial-gradient(
            circle,
            #53b96b 2px,
            transparent 2.5px
        );
}


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

.purpose-icon {
    position: relative;

    z-index: 5;

    width: fit-content;

    margin-bottom: 22px;
}


.purpose-icon-circle {
    position: relative;

    width: 112px;
    height: 112px;

    display: flex;

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

    border-radius: 50%;

    background: #ffffff;

    border: 1px solid;

    box-shadow:
        0 12px 28px
        rgba(18,38,58,.10);
}


.purpose-vision .purpose-icon-circle {
    color: #1269cc;

    border-color: #d9e9fa;
}


.purpose-mission .purpose-icon-circle {
    color: #309a3f;

    border-color: #dceddf;
}


/* PARTIAL RING */

.purpose-icon-circle::before {
    content: "";

    position: absolute;

    inset: -7px;

    border-radius: 50%;

    border: 4px solid transparent;
}


.purpose-vision .purpose-icon-circle::before {
    border-top-color: #136cd5;
    border-right-color: #136cd5;
}


.purpose-mission .purpose-icon-circle::before {
    border-top-color: #319d40;
    border-right-color: #319d40;
}


.purpose-icon-circle svg {
    width: 56px;
    height: 56px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.75;

    stroke-linecap: round;

    stroke-linejoin: round;
}


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

.purpose-card-content {
    position: relative;

    z-index: 5;

    width: 100%;
}


/* TITLE */

.purpose-card-content h3 {
    width: 100%;

    margin: 0;

    font-size: 31px;

    font-weight: 900;

    line-height: 1.15;

    text-align: left;
}


.purpose-vision .purpose-card-content h3 {
    color: #1261c1;
}


.purpose-mission .purpose-card-content h3 {
    color: #319940;
}


/* TITLE ACCENT */

.purpose-short-line {
    width: 46px;
    height: 3px;

    margin:
        12px
        0
        20px;

    border-radius: 20px;
}


.purpose-vision .purpose-short-line {
    background: #146cd3;
}


.purpose-mission .purpose-short-line {
    background: #32a241;
}


/* STATEMENT */

.purpose-card-content h4 {
    max-width: 420px;

    margin:
        0
        0
        19px;

    color: #172231;

    font-size: 20px;

    font-weight: 800;

    line-height: 1.42;

    text-align: left;
}


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

.purpose-separator {
    position: relative;

    width: 300px;

    max-width: 76%;

    height: 1px;

    margin:
        0
        0
        22px;

    background: #d6dee5;
}


.purpose-separator span {
    position: absolute;

    left: 48%;
    top: 50%;

    width: 9px;
    height: 9px;

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

    border-radius: 50%;
}


.purpose-vision .purpose-separator span {
    background: #146bd2;
}


.purpose-mission .purpose-separator span {
    background: #32a141;
}


/* DESCRIPTION */

.purpose-card-content p {
    max-width: 450px;

    margin: 0;

    color: #596774;

    font-size: 14px;

    line-height: 1.78;

    text-align: left;
}


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

.purpose-values {
    display: grid;

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

    margin-top: 30px;

    padding:
        22px
        20px;

    border-radius: 23px;

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

    box-shadow:
        0 20px 55px
        rgba(0,0,0,.18);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);
}


/* =========================================================
   VALUE ITEM
========================================================= */

.purpose-value {
    display: flex;

    align-items: center;

    gap: 16px;

    min-width: 0;

    padding:
        0
        23px;
}


.purpose-value:not(:last-child) {
    border-right:
        1px solid #dfe5ea;
}


/* VALUE ICON */

.purpose-value-icon {
    flex-shrink: 0;

    width: 62px;
    height: 62px;

    display: flex;

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

    border-radius: 50%;
}


.value-blue {
    color: #126bd4;

    background: #edf4ff;
}


.value-green {
    color: #319d41;

    background: #eff8f0;
}


.purpose-value-icon svg {
    width: 34px;
    height: 34px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* VALUE TEXT */

.purpose-value-content h5 {
    margin:
        0
        0
        5px;

    color: #17212c;

    font-size: 14px;

    font-weight: 800;

    line-height: 1.3;
}


.purpose-value-content p {
    margin: 0;

    color: #65727e;

    font-size: 12px;

    line-height: 1.55;
}


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

@media (max-width: 1100px) {

    .purpose-wrap {
        padding-left: 28px;
        padding-right: 28px;
    }


    .purpose-cards {
        gap: 25px;
    }


    .purpose-vision {
        padding-left: 55px;
    }


    .purpose-mission {
        padding-right: 55px;
    }


    .purpose-side-number {
        width: 76px;
        height: 260px;

        padding-top: 80px;
    }


    .purpose-side-number strong {
        font-size: 29px;
    }


    .purpose-card-box {
        padding:
            34px
            35px
            40px;
    }


    .purpose-card-content h3 {
        font-size: 27px;
    }


    .purpose-card-content h4 {
        font-size: 18px;
    }


    .purpose-card-content p {
        font-size: 13.5px;
    }


    .purpose-values {
        grid-template-columns:
            repeat(2, minmax(0,1fr));

        gap:
            22px
            0;
    }


    .purpose-value:nth-child(2) {
        border-right: none;
    }


    .purpose-value:nth-child(1),
    .purpose-value:nth-child(2) {
        padding-bottom: 20px;

        border-bottom:
            1px solid #dfe5ea;
    }

}


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

@media (max-width: 767px) {

    .purpose-section {
        padding:
            55px
            0
            60px;
    }


    .purpose-wrap {
        width: 100%;

        padding-left: 16px;
        padding-right: 16px;
    }


    /* HEADER */

    .purpose-head {
        margin-bottom: 34px;
    }


    .purpose-label {
        gap: 7px;

        font-size: 9px;

        letter-spacing: 1.1px;
    }


    .purpose-label-line {
        width: 20px;
    }


    .purpose-head h2 {
        font-size: 38px;

        line-height: 1.08;

        letter-spacing: -1px;
    }


    .purpose-head > p {
        margin-top: 15px;

        font-size: 14px;

        line-height: 1.6;
    }


    /* CARDS */

    .purpose-cards {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .purpose-card,
    .purpose-vision,
    .purpose-mission {
        padding:
            30px
            0
            0;
    }


    .purpose-card-box {
        min-height: auto;

        padding:
            55px
            22px
            34px;

        border-radius: 22px;
    }


    /* NUMBER BADGE */

    .purpose-side-number,
    .purpose-vision .purpose-side-number,
    .purpose-mission .purpose-side-number {
        top: 0;

        left: 50%;

        right: auto;

        width: 64px;
        height: 64px;

        padding: 0;

        transform: translateX(-50%);

        display: flex;

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

        border-radius: 50%;

        clip-path: none;

        z-index: 10;
    }


    .purpose-side-number strong {
        font-size: 22px;
    }


    .purpose-side-number span {
        display: none;
    }


    /* ICON */

    .purpose-icon {
        margin:
            0
            auto
            18px;
    }


    .purpose-icon-circle {
        width: 94px;
        height: 94px;
    }


    .purpose-icon-circle svg {
        width: 46px;
        height: 46px;
    }


    /* DECORATION */

    .purpose-top-corner {
        width: 58px;
        height: 55px;
    }


    .purpose-dot-pattern {
        top: 25px;
        right: 15px;

        width: 60px;
        height: 50px;

        background-size:
            11px
            11px;
    }


    /* CONTENT */

    .purpose-card-content {
        text-align: center;
    }


    .purpose-card-content h3 {
        width: 100%;

        font-size: 27px;

        text-align: center;
    }


    .purpose-short-line {
        margin:
            11px
            auto
            18px;
    }


    .purpose-card-content h4 {
        max-width: 330px;

        margin:
            0
            auto
            18px;

        font-size: 18px;

        text-align: center;
    }


    .purpose-separator {
        width: 75%;

        margin:
            0
            auto
            20px;
    }


    .purpose-card-content p {
        max-width: 355px;

        margin: 0 auto;

        font-size: 13.5px;

        line-height: 1.72;

        text-align: center;
    }


    /* VALUES */

    .purpose-values {
        grid-template-columns: 1fr;

        margin-top: 27px;

        padding:
            8px
            18px;
    }


    .purpose-value {
        padding:
            18px
            3px;

        border-right: none !important;
    }


    .purpose-value:not(:last-child) {
        border-bottom:
            1px solid #dfe5ea;
    }


    .purpose-value-icon {
        width: 55px;
        height: 55px;
    }


    .purpose-value-icon svg {
        width: 30px;
        height: 30px;
    }

}


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

@media (max-width: 480px) {

    .purpose-wrap {
        padding-left: 15px;
        padding-right: 15px;
    }


    .purpose-section {
        padding-top: 48px;
    }


    .purpose-head h2 {
        font-size: 34px;
    }


    .purpose-head > p {
        font-size: 13.5px;
    }


    .purpose-label {
        font-size: 8px;
    }


    .purpose-label-line {
        width: 15px;
    }


    .purpose-card-box {
        padding:
            52px
            18px
            30px;
    }


    .purpose-side-number,
    .purpose-vision .purpose-side-number,
    .purpose-mission .purpose-side-number {
        width: 58px;
        height: 58px;
    }


    .purpose-side-number strong {
        font-size: 20px;
    }


    .purpose-icon-circle {
        width: 86px;
        height: 86px;
    }


    .purpose-icon-circle svg {
        width: 41px;
        height: 41px;
    }


    .purpose-card-content h3 {
        font-size: 24px;
    }


    .purpose-card-content h4 {
        font-size: 17px;
    }


    .purpose-card-content p {
        font-size: 13px;
    }


    .purpose-value-content h5 {
        font-size: 13.5px;
    }


    .purpose-value-content p {
        font-size: 11.5px;
    }

}


/* process section code new  */


/* =========================================================
   FLIP PROCESS SECTION
========================================================= */

.flip-process-section {
    position: relative;
    width: 100%;

    padding: 75px 0;

    overflow: hidden;

    background-image:
        url("https://images.squarespace-cdn.com/content/v1/64b82a1a823e3977f2090161/ae851cbc-9332-4ce8-8a28-88e06aecb3e8/Envision_Home%2BIntroduction.jpg");

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


/* OVERLAY */

.flip-process-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(3, 25, 48, .94) 0%,
            rgba(3, 39, 62, .90) 50%,
            rgba(3, 29, 52, .93) 100%
        );
}


/* SOFT GLOW */

.flip-process-section::before {
    content: "";

    position: absolute;

    width: 950px;
    height: 650px;

    top: 44%;
    left: 50%;

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

    z-index: 1;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(17, 172, 207, .14),
            transparent 70%
        );

    pointer-events: none;
}


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

.flip-process-container {
    position: relative;
    z-index: 3;

    width:
        min(
            1450px,
            100%
        );

    margin:
        0
        auto;

    padding-left: 42px;
    padding-right: 42px;
}


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

.flip-process-heading {
    max-width: 870px;

    margin:
        0
        auto
        55px;

    text-align: center;
}


.flip-process-kicker {
    display: flex;

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

    gap: 16px;

    margin-bottom: 14px;

    color: #ffffff;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 2px;
}


.flip-process-kicker span {
    width: 52px;
    height: 2px;

    flex-shrink: 0;
}


.line-blue {
    background: #168cff;
}


.line-green {
    background: #45cc51;
}


/* TITLE */

.flip-process-heading h2 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            50px,
            5vw,
            76px
        );

    line-height: 1;

    font-weight: 900;

    letter-spacing: -2px;
}


.process-blue {
    background:
        linear-gradient(
            90deg,
            #1587f5,
            #1cc8cc,
            #59d538
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


/* HEADING DIVIDER */

.heading-divider {
    position: relative;

    width: 85px;
    height: 1px;

    margin:
        21px
        auto
        20px;

    background:
        rgba(
            255,
            255,
            255,
            .28
        );
}


.heading-divider span {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 7px;
    height: 7px;

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

    border-radius: 50%;

    background: #ffffff;
}


/* DESCRIPTION */

.flip-process-heading p {
    max-width: 730px;

    margin: 0 auto;

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

    font-size: 17px;

    line-height: 1.65;
}


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

.flip-process-grid {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        34px
        minmax(0,1fr)
        34px
        minmax(0,1fr)
        34px
        minmax(0,1fr)
        34px
        minmax(0,1fr);

    align-items: center;
}


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

.flip-process-item {
    min-width: 0;
}


.flip-card {
    position: relative;

    width: 100%;
    height: 500px;

    perspective: 1300px;

    cursor: pointer;
}


.flip-card-inner {
    position: relative;

    width: 100%;
    height: 100%;

    transform-style: preserve-3d;

    transition:
        transform .7s
        cubic-bezier(.2,.75,.25,1);
}


/* Desktop hover */

@media (hover: hover) {

    .flip-card:hover .flip-card-inner {
        transform: rotateY(180deg);
    }

}


/* mobile/click */

.flip-card.is-flipped .flip-card-inner {
    transform: rotateY(180deg);
}


/* =========================================================
   COMMON FRONT / BACK
========================================================= */

.flip-card-front,
.flip-card-back {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    backface-visibility: hidden;

    -webkit-backface-visibility: hidden;

    overflow: hidden;

    border-radius: 24px;

    box-shadow:
        0 24px 55px
        rgba(0,0,0,.30);
}


/* =========================================================
   FRONT
========================================================= */

.flip-card-front {
    display: flex;

    flex-direction: column;

    align-items: center;

    padding:
        42px
        20px
        28px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f5f7f9
        );

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


/* CORNER */

.flip-corner {
    position: absolute;

    top: 0;
    right: 0;

    width: 70px;
    height: 65px;

    clip-path:
        polygon(
            0 0,
            100% 0,
            100% 100%,
            48% 100%
        );
}


.theme-blue .flip-corner {
    background:
        linear-gradient(
            135deg,
            #1888f5,
            #075fc9
        );
}


.theme-green .flip-corner {
    background:
        linear-gradient(
            135deg,
            #4bcf56,
            #279938
        );
}


/* DOTS */

.flip-dots {
    position: absolute;

    top: 48px;
    right: 26px;

    width: 70px;
    height: 60px;

    opacity: .24;

    background-size:
        12px
        12px;
}


.theme-blue .flip-dots {
    background-image:
        radial-gradient(
            circle,
            #1688eb 2px,
            transparent 2.5px
        );
}


.theme-green .flip-dots {
    background-image:
        radial-gradient(
            circle,
            #43b955 2px,
            transparent 2.5px
        );
}


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

.flip-icon-ring {
    position: relative;

    width: 112px;
    height: 112px;

    margin-bottom: 24px;

    display: flex;

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

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 12px 25px
        rgba(17,42,67,.14);
}


.flip-icon-ring::after {
    content: "";

    position: absolute;

    inset: -6px;

    border-radius: 50%;

    border: 4px solid transparent;
}


.theme-blue .flip-icon-ring {
    color: #126ad1;
}


.theme-blue .flip-icon-ring::after {
    border-right-color: #126ad1;
    border-bottom-color: #126ad1;
}


.theme-green .flip-icon-ring {
    color: #2fa23e;
}


.theme-green .flip-icon-ring::after {
    border-right-color: #36ad44;
    border-bottom-color: #36ad44;
}


.flip-icon-ring svg {
    width: 53px;
    height: 53px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.65;

    stroke-linecap: round;

    stroke-linejoin: round;
}


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

.flip-number {
    margin-top: 5px;

    font-size: 34px;

    font-weight: 900;

    line-height: 1;
}


.theme-blue .flip-number {
    color: #1268cd;
}


.theme-green .flip-number {
    color: #2ea13d;
}


/* SHORT LINE */

.flip-short-line {
    width: 37px;
    height: 3px;

    margin:
        12px
        auto
        19px;

    border-radius: 20px;
}


.theme-blue .flip-short-line {
    background: #146bd2;
}


.theme-green .flip-short-line {
    background: #32a140;
}


/* TITLE */

.flip-card-front h3 {
    min-height: 54px;

    margin: 0;

    display: flex;

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

    color: #172432;

    font-size: 18px;

    font-weight: 900;

    line-height: 1.35;

    text-align: center;
}


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

.flip-trigger {
    position: absolute;

    left: 50%;
    bottom: 18px;

    width: 48px;
    height: 48px;

    transform:
        translateX(-50%);

    display: flex;

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

    border: 4px solid #ffffff;

    border-radius: 50%;

    cursor: pointer;

    color: #ffffff;

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


.theme-blue .flip-trigger {
    background: #197ceb;
}


.theme-green .flip-trigger {
    background: #3ab649;
}


.flip-trigger svg {
    width: 22px;
    height: 22px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2.2;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* =========================================================
   BACK
========================================================= */

.flip-card-back {
    transform:
        rotateY(180deg);

    display: flex;

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

    color: #ffffff;

    text-align: center;
}


/* BLUE BACK */

.theme-blue .flip-card-back {
    background:
        linear-gradient(
            150deg,
            rgba(5, 103, 218, .97),
            rgba(0, 65, 153, .97)
        );
}


/* GREEN BACK */

.theme-green .flip-card-back {
    background:
        linear-gradient(
            150deg,
            rgba(48, 177, 60, .97),
            rgba(26, 120, 45, .97)
        );
}


/* subtle back texture */

.flip-card-back::before {
    content: "";

    position: absolute;

    inset: 0;

    opacity: .12;

    background:
        url("assets/images/about/process-bg.png")
        center center / cover no-repeat;
}


.back-content {
    position: relative;

    z-index: 2;

    width: 100%;

    padding:
        35px
        22px;
}


.back-content h4 {
    margin:
        0
        0
        17px;

    color: #ffffff;

    font-size: 20px;

    font-weight: 900;

    line-height: 1.3;
}


.back-line {
    position: relative;

    width: 65px;
    height: 1px;

    margin:
        0
        auto
        20px;

    background:
        rgba(
            255,
            255,
            255,
            .65
        );
}


.back-line::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 7px;
    height: 7px;

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

    border-radius: 50%;

    background: #ffffff;
}


.back-content p {
    max-width: 210px;

    margin:
        0
        auto
        30px;

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

    font-size: 14px;

    line-height: 1.75;
}


/* BACK ICON */

.back-icon {
    width: 68px;
    height: 68px;

    margin:
        0
        auto
        15px;

    display: flex;

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

    border-radius: 50%;

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

    color: #ffffff;
}


.back-icon svg {
    width: 35px;
    height: 35px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.back-label {
    display: block;

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

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .4px;
}


/* =========================================================
   CONNECTORS
========================================================= */

.flip-connector {
    position: relative;

    height: 80px;

    display: flex;

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


.flip-connector::before {
    content: "";

    width: 100%;
    height: 1px;

    border-top:
        1px dashed
        rgba(
            255,
            255,
            255,
            .7
        );
}


.flip-connector span {
    position: absolute;

    right: 0;

    width: 0;
    height: 0;

    border-top:
        5px solid transparent;

    border-bottom:
        5px solid transparent;

    border-left:
        7px solid #ffffff;
}


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

.flip-process-bottom-dots {
    width: 380px;
    height: 44px;

    margin:
        35px
        auto
        0;

    opacity: .5;

    background-size:
        15px
        15px;

    background-image:
        radial-gradient(
            circle,
            #21a8d2 2px,
            transparent 2.5px
        );
}


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

@media (max-width: 1200px) {

    .flip-process-container {
        padding-left: 28px;
        padding-right: 28px;
    }


    .flip-process-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        gap:
            28px;
    }


    .flip-connector {
        display: none;
    }


    .flip-process-item:last-child {
        grid-column:
            1 / -1;

        width:
            calc(
                50% - 14px
            );

        justify-self:
            center;
    }


    .flip-card {
        height: 470px;
    }

}


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

@media (max-width: 767px) {

    .flip-process-section {
        padding:
            55px
            0
            60px;
    }


    .flip-process-container {
        width: 100%;

        padding-left: 16px;
        padding-right: 16px;
    }


    /* HEADING */

    .flip-process-heading {
        margin-bottom: 38px;
    }


    .flip-process-kicker {
        gap: 7px;

        font-size: 9px;

        letter-spacing: 1px;

        line-height: 1.5;
    }


    .flip-process-kicker span {
        width: 20px;
    }


    .flip-process-heading h2 {
        font-size: 39px;

        letter-spacing: -1px;
    }


    .heading-divider {
        margin:
            17px
            auto
            16px;
    }


    .flip-process-heading p {
        font-size: 14px;

        line-height: 1.65;
    }


    /* SINGLE COLUMN */

    .flip-process-grid {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .flip-process-item,
    .flip-process-item:last-child {
        grid-column: auto;

        width: 100%;
    }


    .flip-card {
        width: 100%;

        max-width: 390px;

        height: 430px;

        margin:
            0
            auto;
    }


    .flip-card-front {
        padding:
            35px
            18px
            26px;
    }


    .flip-icon-ring {
        width: 96px;
        height: 96px;

        margin-bottom: 19px;
    }


    .flip-icon-ring svg {
        width: 45px;
        height: 45px;
    }


    .flip-number {
        font-size: 30px;
    }


    .flip-card-front h3 {
        font-size: 18px;
    }


    .back-content p {
        max-width: 280px;

        font-size: 13.5px;
    }


    .flip-process-bottom-dots {
        width: 220px;

        margin-top: 28px;
    }

}


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

@media (max-width: 480px) {

    .flip-process-container {
        padding-left: 15px;
        padding-right: 15px;
    }


    .flip-process-heading h2 {
        font-size: 34px;
    }


    .flip-process-heading p {
        font-size: 13.5px;
    }


    .flip-process-kicker {
        font-size: 8px;
    }


    .flip-card {
        height: 405px;
    }


    .flip-icon-ring {
        width: 88px;
        height: 88px;
    }


    .flip-icon-ring svg {
        width: 41px;
        height: 41px;
    }


    .flip-number {
        font-size: 27px;
    }


    .flip-card-front h3 {
        font-size: 17px;
    }


    .back-content h4 {
        font-size: 19px;
    }


    .back-content p {
        font-size: 13px;
    }

}


/* ==================================================
   PRODUCT CATEGORY PAGE — ICE CREAMS
================================================== */

.product-category-hero {
    position: relative;

    min-height: 470px;

    background-color: #f5f8f7;

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    overflow: hidden;
}

/* ==================================================
   ICE CREAM — HERO IMAGE
================================================== */

.icecream-category-hero {
    background-image:
        url("../../assets/images/product-categories/icecream-hero.png");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
/* ==================================================
  frozen-starters-category-hero— HERO IMAGE
================================================== */

.frozen-starters-category-hero {
    background-image:
        url("../../assets/images/product-categories/frozen-starters-category-hero.png");

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

/* ==================================================
  cake-premix-category-hero— HERO IMAGE
================================================== */

.cake-premix-category-hero {
    background-image:
        url("../../assets/images/product-categories/cake-premix-category-hero.png");

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


/* ==================================================
 spices-category-hero HERO IMAGE
================================================== */

.spices-category-hero{
    background-image:
        url("../../assets/images/product-categories/spices-category-hero.png");

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



/* ==================================================
 munch-category-hero HERO IMAGE
================================================== */

.munch-category-hero{
    background-image:
        url("../../assets/images/product-categories/munch-category-hero.png");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
/* ==================================================
 dairy-category-hero HERO IMAGE
================================================== */

.dairy-category-hero{
    background-image:
        url("../../assets/images/product-categories/dairy-category-hero.png");

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



/* ==================================================
cake-packaging-category-hero HERO IMAGE
================================================== */

.cake-packaging-category-hero{
    background-image:
        url("../../assets/images/product-categories/cake-packaging-category-hero.png");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
/* ==================================================
 others-category-hero HERO IMAGE
================================================== */

.others-category-hero{
    min-height: 700px;
    background-image:
        url("../../assets/images/product-categories/others-category-hero.png");

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

/* ==================================================
 crush-category-hero HERO IMAGE
================================================== */

.crush-category-hero {
    background-image:
        url("../../assets/images/product-categories/crush-category-hero.png");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
/* ==================================================
  bakery-decorative-category-hero— HERO IMAGE
================================================== */

.bakery-decorative-category-hero {
    background-image:
        url("../../assets/images/product-categories/bakery-decorative-category-hero.png");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
/* ==================================================
   ESSENTIALS — HERO IMAGE
================================================== */
.essentials-category-hero {
    background:
  
        url("../../assets/images/product-categories/essentials-hero.png");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
/* ==================================================
   WHIPPING CREAM / GEL / FILLING — HERO
================================================== */

.whipping-category-hero {
    position: relative;

    min-height: 470px;

    background:
     
        url("../../assets/images/product-categories/whipping-cream-hero.png");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    overflow: hidden;
}
/* ==================================================
   SAUCE / PASTA / DRESSINGS / TOPPINGS — HERO
================================================== */
/* ==================================================
   SAUCE / PASTA / DRESSINGS / TOPPINGS — HERO
   SHOW FULL IMAGE WITHOUT CUTTING WORDING
================================================== */

/* ==================================================
   SAUCE / PASTA / DRESSINGS / TOPPINGS — HERO
   SAME STYLE AS ICE CREAM
================================================== */

.sauce-pasta-category-hero {
    position: relative;

    width: 100%;
    min-height: 800px;

    background-image:
        url("../../assets/images/product-categories/sauce-pasta-hero.png");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    overflow: hidden;
}

.sauce-pasta-category-hero .product-category-hero-inner {
    display: none;
}

.sauce-pasta-category-hero::before,
.sauce-pasta-category-hero::after {
    display: none !important;
}

.sauce-pasta-category-hero .product-category-hero-inner {
    display: none;
}

.sauce-pasta-category-hero::before,
.sauce-pasta-category-hero::after {
    display: none !important;
}

/* NO OVERLAY */
.sauce-pasta-category-hero::before,
.sauce-pasta-category-hero::after {
    display: none !important;
}

/* Inner is not required because text is inside image */
.sauce-pasta-category-hero .product-category-hero-inner {
    display: none;
}




/* ==================================================
   SAUCE / PASTA — CATALOGUE BACKGROUND
================================================== */

.category-catalogue-section.sauce-pasta-catalogue {
    position: relative;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.84),
            rgba(255, 255, 255, 0.84)
        ),
        url("../../assets/images/product-categories/sauce-pasta-catalogue.png");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    padding: 85px 0 100px;
}
/* ==================================================
CHOCOLATES / COCOA / COMPOUND — HERO
================================================== */

.chocolate-category-hero {
    position: relative;

    background-image:
        url("../../assets/images/product-categories/chocolate-hero.png");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    min-height: 800px;

    overflow: hidden;
}


/* Hide HTML hero wording because wording is already
   included inside the generated hero image */

.chocolate-category-hero .product-category-hero-inner {
    min-height: 600px;
}

.chocolate-category-hero .product-category-breadcrumb,
.chocolate-category-hero .product-category-kicker,
.chocolate-category-hero h1,
.chocolate-category-hero p {
    display: none;
}


/* ==================================================
CHOCOLATES / COCOA / COMPOUND — CATALOGUE BACKGROUND
================================================== */

.chocolate-catalogue {
    position: relative;

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .96) 0%,
            rgba(255, 255, 255, .94) 40%,
            rgba(255, 255, 255, .86) 65%,
            rgba(255, 255, 255, .70) 100%
        ),
        url("../../assets/images/product-categories/chocolate-catalogue.png");

    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}
.whipping-category-hero h1 {
    max-width: 900px;

    font-size: clamp(2rem, 3.2vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
}
.product-category-hero-inner {
    max-width: 900px;
}

.product-category-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-bottom: 18px;

    font-size: .78rem;
    color: #73808a;
}

.product-category-breadcrumb a {
    color: #4c6978;
    text-decoration: none;
}

.product-category-kicker {
    display: inline-block;

    margin-bottom: 16px;

    color: var(--green);

    font-size: .75rem;
    font-weight: 800;

    letter-spacing: .15em;
    text-transform: uppercase;
}

.product-category-hero h1 {
    margin: 0 0 18px;

    color: var(--navy);

    font-size: clamp(3.5rem, 7vw, 6.5rem);
    font-weight: 900;

    line-height: .95;
    letter-spacing: -.055em;
}

.product-category-hero p {
    max-width: 660px;

    margin: 0;

    color: #66737d;

    font-size: 1rem;
    line-height: 1.8;
}


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

/* .product-category-hero {
    position: relative;

    min-height: 470px;

    background-image:
        url("../../assets/images/product-categories/icecream-hero.png");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    overflow: hidden;
} */

.product-category-hero-inner {
    position: relative;

    width: min(100% - 40px, var(--container));
    max-width: var(--container);

    min-height: 470px;

    margin: 0 auto;
}


/* BREADCRUMB ONLY */

.product-category-breadcrumb {
    position: absolute;

    top: 28px;
    left: 0;

    z-index: 5;

    display: flex;
    align-items: center;
    gap: 9px;

    margin: 0;

    font-size: .78rem;
    color: #536875;
}

.product-category-breadcrumb a {
    color: #365d6c;
    text-decoration: none;
}

.product-category-breadcrumb strong {
    font-weight: 700;
    color: #344f5c;
}
/* ==================================================
   CATEGORY PRODUCT CATALOGUE — TAURUS STYLE
================================================== */

/* ==================================================
   ICE CREAM PRODUCT CATALOGUE
================================================== */
.category-catalogue-section {
    position: relative;

    padding: 85px 0 100px;
/* 
    background: #fffafa; */
}

/* TWO COLUMN LAYOUT */

.category-product-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    column-gap: 90px;
    row-gap: 0;
}


/* EACH PRODUCT */

.category-product-row {
    display: grid;

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

    column-gap: 30px;

    align-items: start;

    padding: 22px 0 25px;

    border: 0;
    background: transparent;
}


/* PRODUCT NAME */

.category-product-name {
    font-size: 1.05rem;
    font-weight: 500;

    line-height: 1.35;
    letter-spacing: 0;

    text-transform: uppercase;

    color: #111454;
}


/* SIZE */

.category-product-size {
    font-size: 1.05rem;
    font-weight: 500;

    line-height: 1.35;

    text-transform: uppercase;

    white-space: nowrap;

    color: #111454;

    text-align: right;
}


/* BRAND */

.category-product-brand {
    grid-column: 1 / -1;

    margin-top: 12px;

    font-size: .82rem;
    font-weight: 400;

    line-height: 1.5;

    color: #686868;
}


/* REMOVE ANY OLD DECORATION */

.category-product-row::before,
.category-product-row::after {
    display: none;
}
/* =========================================
   PRODUCT CATALOGUE HEADING — CENTER
========================================= */

.category-catalogue-section .section-head,
.category-catalogue-header {
    width: 100%;
    max-width: 100%;

    margin: 0 auto 55px;

    text-align: center;
}
/* ==================================================
   ICE CREAM — CATALOGUE BACKGROUND
================================================== */

.icecream-catalogue {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.96) 0%,
            rgba(255,255,255,.92) 48%,
            rgba(255,255,255,.82) 72%,
            rgba(255,255,255,.68) 100%
        ),
        url("../../assets/images/product-categories/icecream-intro.png");

    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}
/* ==================================================
  veg-non-veg-frozen-starteres-snacks — CATALOGUE BACKGROUND
================================================== */

.frozen-starters-catalogue {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.96) 0%,
            rgba(255,255,255,.92) 48%,
            rgba(255,255,255,.82) 72%,
            rgba(255,255,255,.68) 100%
        ),
        url("../../assets/images/product-categories/frozen-starters-catalogue.png");

    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}


/* ==================================================
  bakery-base-catalogue— CATALOGUE BACKGROUND
================================================== */

.bakery-base-catalogue {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.96) 0%,
            rgba(255,255,255,.92) 48%,
            rgba(255,255,255,.82) 72%,
            rgba(255,255,255,.68) 100%
        ),
        url("../../assets/images/product-categories/bakery-base-catalogue.png");

    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}

/* ==================================================
  munch-snacks-catalogue
 — CATALOGUE BACKGROUND
================================================== */

.munch-snacks-catalogue {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.96) 0%,
            rgba(255,255,255,.92) 48%,
            rgba(255,255,255,.82) 72%,
            rgba(255,255,255,.68) 100%
        ),
        url("../../assets/images/product-categories/munch-snacks-catalogue.png");

    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}

/* ==================================================
others-catalogue CATALOGUE BACKGROUND
================================================== */

.others-catalogue {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.96) 0%,
            rgba(255,255,255,.92) 48%,
            rgba(255,255,255,.82) 72%,
            rgba(255,255,255,.68) 100%
        ),
        url("../../assets/images/product-categories/others-catalogue.png");

    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}
/* ==================================================
munch-sauces-catalogue CATALOGUE BACKGROUND
================================================== */

.munch-sauces-catalogue {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.96) 0%,
            rgba(255,255,255,.92) 48%,
            rgba(255,255,255,.82) 72%,
            rgba(255,255,255,.68) 100%
        ),
        url("../../assets/images/product-categories/munch-sauces-catalogue.png");

    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}




/* ==================================================
cake-packaging-catalogue CATALOGUE BACKGROUND
================================================== */

.cake-packaging-catalogue {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.96) 0%,
            rgba(255,255,255,.92) 48%,
            rgba(255,255,255,.82) 72%,
            rgba(255,255,255,.68) 100%
        ),
        url("../../assets/images/product-categories/cake-packaging-catalogue.png");

    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}


/* ==================================================
baking-ingredients-catalogue CATALOGUE BACKGROUND
================================================== */

.baking-ingredients-catalogue {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.96) 0%,
            rgba(255,255,255,.92) 48%,
            rgba(255,255,255,.82) 72%,
            rgba(255,255,255,.68) 100%
        ),
        url("../../assets/images/product-categories/baking-ingredients-catalogue.png");

    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}
/* ==================================================
spices-catalogue CATALOGUE BACKGROUND
================================================== */

.spices-catalogue {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.96) 0%,
            rgba(255,255,255,.92) 48%,
            rgba(255,255,255,.82) 72%,
            rgba(255,255,255,.68) 100%
        ),
        url("../../assets/images/product-categories/spices-catalogue.png");

    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}


/* ==================================================

crush-catalogue
 CATALOGUE BACKGROUND
================================================== */

.crush-catalogue
 {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.96) 0%,
            rgba(255,255,255,.92) 48%,
            rgba(255,255,255,.82) 72%,
            rgba(255,255,255,.68) 100%
        ),
        url("../../assets/images/product-categories/crush-catalogue.png");

    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}

/* ==================================================

bakery-decoration-catalogue
 CATALOGUE BACKGROUND
================================================== */

.bakery-decoration-catalogue
 {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.96) 0%,
            rgba(255,255,255,.92) 48%,
            rgba(255,255,255,.82) 72%,
            rgba(255,255,255,.68) 100%
        ),
        url("../../assets/images/product-categories/bakery-decoration-catalogue.png");

    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}



/* ==================================================
cake-premix-catalogue CATALOGUE BACKGROUND
================================================== */

.cake-premix-catalogue {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.96) 0%,
            rgba(255,255,255,.92) 48%,
            rgba(255,255,255,.82) 72%,
            rgba(255,255,255,.68) 100%
        ),
        url("../../assets/images/product-categories/cake-premix-catalogue.png");

    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}

/* ==================================================
dairy-catalogue CATALOGUE BACKGROUND
================================================== */

.dairy-catalogue {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.96) 0%,
            rgba(255,255,255,.92) 48%,
            rgba(255,255,255,.82) 72%,
            rgba(255,255,255,.68) 100%
        ),
        url("../../assets/images/product-categories/dairy-catalogue.png");

    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}

/* ==================================================
   ESSENTIALS — CATALOGUE BACKGROUND
================================================== */

.essentials-catalogue {
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .97) 0%,
            rgba(255, 255, 255, .94) 40%,
            rgba(255, 255, 255, .88) 68%,
            rgba(255, 255, 255, .78) 100%
        ),
        url("../../assets/images/product-categories/essentials-catalogue.png");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
/* ==================================================
   WHIPPING CREAM / GEL / FILLING — CATALOGUE
================================================== */

.whipping-catalogue {
    position: relative;

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .97) 0%,
            rgba(255, 255, 255, .94) 40%,
            rgba(255, 255, 255, .88) 68%,
            rgba(255, 255, 255, .78) 100%
        ),
        url("../../assets/images/product-categories/whipping-cream-catalogue.png");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.category-catalogue-section .section-head > div,
.category-catalogue-header > div {
    width: 100%;
    text-align: center;
}

/* PRODUCT CATALOGUE SMALL TEXT */

.category-catalogue-section .eyebrow,
.category-catalogue-kicker {
    display: block;

    width: 100%;

    margin: 0 0 12px;

    text-align: center;

    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;

    color: var(--green);
}

/* ICE CREAM */

.category-catalogue-section .section-head h2,
.category-catalogue-header h2 {
    width: 100%;

    margin: 0 auto;

    text-align: center;

    font-size: clamp(2.5rem, 4vw, 4rem);
    line-height: 1;

    letter-spacing: -.045em;

    color: var(--navy);
}
/* ==================================================
   CATEGORY BENEFITS
================================================== */

.category-benefits-section {
    padding: 90px 0;
    background: #ffffff;
}

.category-benefits-head {
    width: 100%;
    margin: 0 auto 60px;
    text-align: center;
}

.category-benefits-head > span {
    display: block;
    margin-bottom: 12px;

    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;

    color: var(--green);
}

.category-benefits-head h2 {
    max-width: 750px;
    margin: 0 auto;

    font-size: clamp(2.5rem, 4vw, 4rem);
    line-height: 1;
    letter-spacing: -.045em;

    color: var(--navy);
}


/* BENEFIT ROW */

.category-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid rgba(15, 40, 55, .14);
    border-bottom: 1px solid rgba(15, 40, 55, .14);
}

.category-benefit-item {
    position: relative;

    padding: 45px 40px;

    background: transparent;
}

.category-benefit-item + .category-benefit-item {
    border-left: 1px solid rgba(15, 40, 55, .14);
}


/* NUMBER */

.category-benefit-number {
    display: block;

    margin-bottom: 30px;

    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;

    color: var(--green);
}


/* TITLE */

.category-benefit-item h3 {
    margin: 0 0 16px;

    font-size: 1.5rem;
    line-height: 1.15;

    color: var(--navy);
}


/* DESCRIPTION */

.category-benefit-item p {
    max-width: 320px;
    margin: 0;

    font-size: .9rem;
    line-height: 1.75;

    color: #687782;
}

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

.contact-premium-section {
    position: relative;
    width: 100%;
    padding: 100px 0 90px;

    overflow: hidden;

    /*
       TRANSPARENT BACKGROUND
       Your previous section/image will be visible behind this.
    */
    background: transparent;

    color: #0b2545;
}


/* ==========================================================
   OPTIONAL SOFT BACKGROUND GLOW
========================================================== */

.contact-premium-section::before {
    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    top: 80px;
    left: -180px;

    border-radius: 50%;

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

    filter: blur(120px);

    pointer-events: none;
}


.contact-premium-section::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -170px;
    bottom: 100px;

    border-radius: 50%;

    background: rgba(26, 190, 105, 0.10);

    filter: blur(120px);

    pointer-events: none;
}


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

.contact-premium-container {
    position: relative;
    z-index: 2;

    width: min(1180px, calc(100% - 40px));

    margin: 0 auto;
}


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

.contact-heading {
    max-width: 760px;

    margin: 0 auto 50px;

    text-align: center;
}


.contact-eyebrow {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 15px;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    color: #0868e8;
}


.contact-eyebrow::before,
.contact-eyebrow::after {
    content: "";

    width: 28px;
    height: 2px;

    border-radius: 20px;
}


.contact-eyebrow::before {
    background: #126fff;
}


.contact-eyebrow::after {
    background: #25b66c;
}


.contact-heading h2 {
    margin: 0;

    font-size: clamp(38px, 4.5vw, 60px);

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -0.04em;

    color: #082447;
}


.contact-heading h2 span {
    background: linear-gradient(
        90deg,
        #096aff 0%,
        #16a0d7 45%,
        #20ba68 100%
    );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


.contact-heading p {
    max-width: 650px;

    margin: 18px auto 0;

    font-size: 15px;

    line-height: 1.75;

    color: #65758b;
}


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

.contact-main-grid {
    display: grid;

    grid-template-columns: 0.85fr 1.55fr;

    gap: 24px;

    align-items: stretch;
}


/* ==========================================================
   GLASS CARDS
========================================================== */

.contact-info-panel,
.contact-form-panel {
    position: relative;

    padding: 32px;

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.78),
            rgba(255,255,255,0.45)
        );

    border: 1px solid rgba(40, 89, 160, 0.16);

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

    box-shadow:
        0 24px 60px rgba(16, 57, 104, 0.10),
        inset 0 1px 0 rgba(255,255,255,0.8);

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


.contact-info-panel:hover,
.contact-form-panel:hover {
    transform: translateY(-4px);

    box-shadow:
        0 30px 70px rgba(18, 69, 130, 0.15),
        inset 0 1px 0 rgba(255,255,255,0.9);
}


/* ==========================================================
   PANEL HEADINGS
========================================================== */

.contact-info-top,
.form-header {
    margin-bottom: 25px;
}


.mini-label {
    display: block;

    margin-bottom: 10px;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.14em;

    color: #0780d8;

    text-transform: uppercase;
}


.contact-info-top h3,
.form-header h3 {
    position: relative;

    margin: 0;

    padding-bottom: 15px;

    font-size: 26px;

    line-height: 1.2;

    font-weight: 800;

    color: #0c2748;
}


.contact-info-top h3::after,
.form-header h3::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 54px;
    height: 3px;

    border-radius: 30px;

    background: linear-gradient(
        90deg,
        #0874ff,
        #26ba6f
    );
}


.contact-info-top p,
.form-header p {
    margin: 16px 0 0;

    font-size: 14px;

    line-height: 1.7;

    color: #6b7b91;
}


/* ==========================================================
   CONTACT INFORMATION CARDS
========================================================== */

.contact-detail-card {
    position: relative;

    display: flex;

    align-items: center;

    gap: 15px;

    width: 100%;

    padding: 16px 12px;

    text-decoration: none;

    border-bottom: 1px solid rgba(38, 69, 105, 0.08);

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        border-radius 0.3s ease;
}


.contact-detail-card:hover {
    transform: translateX(5px);

    border-radius: 16px;

    background: rgba(255,255,255,0.55);
}


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

.contact-icon {
    width: 52px;
    height: 52px;

    min-width: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(20, 111, 255, 0.09);

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


.contact-detail-card:nth-of-type(even) .contact-icon {
    background: rgba(26, 181, 100, 0.09);
}


.contact-detail-card:hover .contact-icon {
    transform: scale(1.08);
}


.contact-icon svg {
    width: 22px;
    height: 22px;

    fill: none;

    stroke: #0871ef;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.contact-detail-card:nth-of-type(even) .contact-icon svg {
    stroke: #139b59;
}


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

.contact-detail-card > div:nth-child(2) {
    flex: 1;

    min-width: 0;
}


.contact-detail-card span {
    display: block;

    margin-bottom: 3px;

    font-size: 11px;

    font-weight: 500;

    color: #687b92;
}


.contact-detail-card strong {
    display: block;

    font-size: 14px;

    line-height: 1.45;

    font-weight: 700;

    color: #0e2b4e;

    word-break: break-word;
}


.contact-arrow {
    width: 34px;
    height: 34px;

    min-width: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(19, 109, 255, 0.08);

    color: #0873ef;

    font-size: 16px;
}


/* ==========================================================
   BUSINESS HOURS
========================================================== */

.business-hours {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-top: 20px;

    padding: 17px 18px;

    border-radius: 16px;

    background:
        linear-gradient(
            120deg,
            rgba(15, 175, 91, 0.07),
            rgba(20, 110, 255, 0.04)
        );

    border: 1px solid rgba(23, 172, 96, 0.13);
}


.business-hours > div:first-child span {
    display: block;

    margin-bottom: 4px;

    font-size: 10px;

    color: #67788f;

    letter-spacing: 0.1em;
}


.business-hours strong {
    font-size: 12px;

    color: #0c2a4b;
}


.open-badge {
    display: flex;

    align-items: center;

    gap: 7px;

    padding: 7px 11px;

    white-space: nowrap;

    border-radius: 30px;

    background: rgba(31, 183, 103, 0.10);

    font-size: 10px;

    font-weight: 700;

    color: #149457;
}


.open-badge span {
    width: 7px;
    height: 7px;

    margin: 0;

    border-radius: 50%;

    background: #1eb669;

    box-shadow:
        0 0 0 4px rgba(30, 182, 105, 0.12);
}


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

.premium-contact-form {
    display: flex;

    flex-direction: column;

    gap: 18px;
}


.form-row {
    display: grid;

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

    gap: 16px;
}


.input-group {
    display: flex;

    flex-direction: column;

    gap: 8px;
}


.input-group label {
    font-size: 11px;

    font-weight: 600;

    color: #334a65;
}


.input-group input,
.input-group select,
.input-group textarea {
    width: 100%;

    padding: 15px 16px;

    border-radius: 12px;

    border: 1px solid rgba(41, 79, 122, 0.16);

    outline: none;

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

    color: #0a294c;

    font-size: 13px;

    font-family: inherit;

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

    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.02);

    transition:
        border-color 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}


.input-group input::placeholder,
.input-group textarea::placeholder {
    color: #9aa5b3;
}


.input-group textarea {
    min-height: 125px;

    resize: vertical;
}


.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus {
    border-color: rgba(8, 111, 239, 0.50);

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

    box-shadow:
        0 0 0 4px rgba(9, 113, 239, 0.07);
}


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

.contact-submit-btn {
    width: 100%;

    min-height: 56px;

    margin-top: 2px;

    padding: 7px 10px 7px 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    position: relative;

    overflow: hidden;

    border: 0;

    border-radius: 11px;

    cursor: pointer;

    background:
        linear-gradient(
            90deg,
            #056bfa 0%,
            #099fd2 50%,
            #22ba68 100%
        );

    color: #fff;

    font-size: 14px;

    font-weight: 700;

    box-shadow:
        0 14px 28px rgba(6, 113, 232, 0.20);

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


.contact-submit-btn::before {
    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 70%;
    height: 100%;

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

    transform: skewX(-20deg);

    transition: left 0.6s ease;
}


.contact-submit-btn:hover::before {
    left: 140%;
}


.contact-submit-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 18px 38px rgba(7, 112, 226, 0.26);
}


.contact-submit-btn span {
    position: relative;

    z-index: 2;
}


.submit-arrow {
    position: relative;

    z-index: 2;

    font-size: 18px;
}


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

.premium-map-wrapper {
    position: relative;

    margin-top: 28px;

    padding: 22px;

    overflow: hidden;

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.72),
            rgba(255,255,255,0.42)
        );

    border: 1px solid rgba(44, 85, 137, 0.14);

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

    box-shadow:
        0 24px 60px rgba(14, 59, 112, 0.11);
}


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

.map-heading {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 18px;

    padding: 0 4px;
}


.map-heading h3 {
    margin: 5px 0 0;

    font-size: 25px;

    font-weight: 800;

    color: #09284a;
}


.directions-btn {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 11px 17px;

    border-radius: 30px;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            #076df4,
            #1ba961
        );

    box-shadow:
        0 10px 25px rgba(11, 112, 228, 0.18);

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


.directions-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 14px 32px rgba(11, 112, 228, 0.25);
}


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

.map-container {
    position: relative;

    width: 100%;
    height: 360px;

    overflow: hidden;

    border-radius: 18px;

    border: 1px solid rgba(34, 86, 146, 0.10);

    background: rgba(235, 242, 249, 0.55);
}


.map-container iframe {
    width: 100%;
    height: 100%;

    display: block;

    border: 0;

    /*
       Makes Google map softer/premium.
       Remove filter if you want normal map colors.
    */
    filter:
        saturate(0.78)
        brightness(1.08)
        contrast(0.92);
}


/* ==========================================================
   MAP FLOATING INFO CARD
========================================================== */

.map-floating-card {
    position: absolute;

    left: 22px;
    bottom: 22px;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 15px;

    width: min(330px, calc(100% - 44px));

    padding: 18px;

    border-radius: 17px;

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

    border: 1px solid rgba(43, 84, 131, 0.12);

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

    box-shadow:
        0 15px 40px rgba(20, 52, 90, 0.16);
}


.map-pin {
    width: 50px;
    height: 50px;

    min-width: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #086eff,
            #20b86c
        );

    box-shadow:
        0 10px 25px rgba(10, 112, 235, 0.23);
}


.map-pin span {
    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 0 0 6px rgba(255,255,255,0.25);
}


.map-floating-card > div:last-child {
    flex: 1;
}


.map-floating-card > div:last-child > span {
    display: block;

    margin-bottom: 4px;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.08em;

    color: #0871ed;
}


.map-floating-card strong {
    display: block;

    margin-bottom: 4px;

    font-size: 14px;

    color: #0b294b;
}


.map-floating-card p {
    margin: 0;

    font-size: 11px;

    line-height: 1.5;

    color: #6e8095;
}


/* ==========================================================
   DESKTOP LARGE SCREEN
   1200px+
========================================================== */

@media (min-width: 1200px) {

    .contact-premium-container {
        width: 1180px;
    }


    .contact-main-grid {
        grid-template-columns: 390px 1fr;
    }


    .contact-info-panel {
        padding: 30px 27px;
    }


    .contact-form-panel {
        padding: 30px 32px;
    }


    .map-container {
        height: 380px;
    }
}
.logo-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.logo-tagline {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #64748b;
    line-height: 1;
}