/* ==================================================
   AURA TREND MART
   PREMIUM BLUE / CYAN THEME
================================================== */

:root {

    --primary: #0754a6;
    --primary-dark: #052d64;
    --cyan: #14bce9;
    --cyan-light: #55dcff;

    --navy: #061f46;

    --white: #ffffff;
    --light: #f5faff;
    --border: #dceeff;

    --shadow:
        0 20px 60px rgba(7, 84, 166, 0.12);

    --transition:
        all 0.35s cubic-bezier(.2,.8,.2,1);

}


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

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

html {
    scroll-behavior: smooth;
}

body {

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

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f4faff 50%,
            #edf8ff 100%
        );

    color: var(--navy);

    overflow-x: hidden;
}

button,
a {
    font-family: inherit;
}

a {
    text-decoration: none;
}


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

.navbar {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    height: 96px;

    background: #E8F6F8;

    backdrop-filter: blur(18px);

    border-bottom: 1px solid rgba(7,84,166,.08);

    z-index: 999;

    transition: var(--transition);

}

.navbar.scrolled {

    height: 76px;

    box-shadow:
        0 10px 35px rgba(7,84,166,.10);

}


.nav-container {

    width: min(1380px, 92%);

    height: 100%;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


/* LOGO */

.logo {

    width: 100px;

    display: flex;

    align-items: center;

}

.logo img {

    width: 100%;

    height: 90px;

    display: block;

    mix-blend-mode: multiply;
    object-fit: cover;

}


/* NAV MENU */

.nav-menu {

    display: flex;

    align-items: center;

    gap: 42px;

    margin-left: auto;

    margin-right: 45px;

}

.nav-link {

    position: relative;

    color: #14233e;

    font-size: 16px;

    font-weight: 600;

    padding: 36px 0;

    transition: var(--transition);

}

.nav-link:hover,
.nav-link.active {

    color: var(--primary);

}


/* Animated underline */

.nav-link::after {

    content: "";

    position: absolute;

    bottom: 25px;
    left: 50%;

    width: 0;

    height: 3px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--cyan)
        );

    transform: translateX(-50%);

    transition: var(--transition);

}

.nav-link:hover::after,
.nav-link.active::after {

    width: 100%;

}


/* Dropdown */

.dropdown {
    position: relative;
}

.dropdown-btn {

    display: flex;

    align-items: center;

    gap: 9px;

}

.dropdown-btn i {

    font-size: 10px;

    transition: var(--transition);

}

.dropdown:hover .dropdown-btn i {

    transform: rotate(180deg);

}


.dropdown-menu {

    position: absolute;

    top: 82px;

    left: -25px;

    width: 245px;

    padding: 12px;

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

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

    border-radius: 16px;

    box-shadow:
        0 25px 60px rgba(6,31,70,.15);

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(15px)
        scale(.97);

    transition: var(--transition);

}

.dropdown:hover .dropdown-menu {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0)
        scale(1);

}

.dropdown-menu a {

    display: flex;

    gap: 14px;

    align-items: center;

    padding: 13px;

    border-radius: 10px;

    color: var(--navy);

    transition: var(--transition);

}

.dropdown-menu a:hover {

    background: #eef9ff;

    color: var(--primary);

    transform: translateX(5px);

}

.dropdown-menu i {

    width: 20px;

    color: var(--cyan);

}


/* NAV ICONS */

.nav-actions {

    display: flex;

    align-items: center;

    gap: 20px;

}

.icon-btn {

    position: relative;

    width: 38px;

    height: 38px;

    border: none;

    background: transparent;

    color: var(--navy);

    font-size: 20px;

    cursor: pointer;

    transition: var(--transition);

}

.icon-btn:hover {

    color: var(--primary);

    transform: translateY(-3px);

}


.badge {

    position: absolute;

    top: -5px;
    right: -5px;

    min-width: 18px;
    height: 18px;

    padding: 0 4px;

    border-radius: 50%;

    display: flex;

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

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

    color: white;

    font-size: 10px;

    font-weight: 700;

}


.mobile-menu-btn {

    display: none;

    border: none;

    background: none;

    font-size: 25px;

    color: var(--navy);

}


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

/* =========================================
   AURA TREND MART - HERO
========================================= */

.hero-section {
    position: relative;
    min-height: 850px;
    padding-top: 95px;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 80% 45%,
            rgba(18, 191, 240, 0.16),
            transparent 32%
        ),
        linear-gradient(
            120deg,
            #ffffff 0%,
            #f6fbff 50%,
            #eaf7ff 100%
        );
}


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

.hero-container {
    width: min(1400px, 92%);
    min-height: 700px;

    margin: auto;

    display: grid;

    grid-template-columns:
        43% 57%;

    align-items: center;

    position: relative;
}


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

.hero-left {
    position: relative;
    z-index: 10;

    padding-left: 20px;

    animation:
        heroLeftIn 1s cubic-bezier(.2,.8,.2,1);
}


@keyframes heroLeftIn {

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

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

}


/* BRAND LINE */

.hero-brand {

    display: flex;
    align-items: center;

    gap: 14px;

    color: #0754a6;

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

    letter-spacing: 5px;

    margin-bottom: 24px;
}


.hero-brand span {

    width: 65px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #13bce9
        );
}


.hero-brand span:last-child {

    background:
        linear-gradient(
            90deg,
            #13bce9,
            transparent
        );
}


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

.hero-left h1 {

    margin: 0;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(65px, 6vw, 100px);

    line-height: .91;

    letter-spacing: -3px;

    color: #071f45;

    font-weight: 700;
}


.hero-left h1 span {

    color: transparent;

    background:
        linear-gradient(
            100deg,
            #0754a6,
            #10c5f2
        );

    -webkit-background-clip: text;
    background-clip: text;
}


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

.hero-divider {

    width: 250px;

    margin:
        30px 0 22px;

    display: flex;
    align-items: center;

    gap: 12px;
}


.hero-divider::before,
.hero-divider::after {

    content: "";

    height: 1px;

    flex: 1;

    background:
        linear-gradient(
            90deg,
            #0754a6,
            transparent
        );
}


.hero-divider::after {

    background:
        linear-gradient(
            90deg,
            transparent,
            #14bde9
        );
}


.hero-divider i {

    color: #10bce9;

    font-size: 14px;

    animation:
        starPulse 2s ease-in-out infinite;
}


@keyframes starPulse {

    0%,100% {
        transform: scale(1);
        opacity: .7;
    }

    50% {
        transform: scale(1.3);
        opacity: 1;
    }

}


/* =========================================
   SUBTITLE
========================================= */

.hero-subtitle {

    font-size: 21px;

    color: #263d59;

    margin-bottom: 32px;

    line-height: 1.5;
}


.hero-subtitle strong {

    color: #0754a6;
}


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

.hero-buttons {

    display: flex;

    align-items: center;

    gap: 16px;

    flex-wrap: wrap;
}


.hero-btn {

    min-width: 205px;

    padding: 17px 24px;

    display: inline-flex;

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

    gap: 18px;

    border-radius: 9px;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .7px;

    transition:
        all .35s cubic-bezier(.2,.8,.2,1);
}


/* Primary */

.primary-btn {

    color: #fff;

    background:
        linear-gradient(
            100deg,
            #0754a6,
            #0ab6e9
        );

    box-shadow:
        0 12px 30px
        rgba(0,125,215,.25);
}


.primary-btn:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 18px 42px
        rgba(0,160,235,.42);
}


.primary-btn i {

    transition:
        transform .3s ease;
}


.primary-btn:hover i {

    transform:
        translateX(6px);
}


/* Secondary */

.secondary-btn {

    color: #0754a6;

    border:
        1.5px solid #0754a6;

    background:
        rgba(255,255,255,.7);
}


.secondary-btn:hover {

    color: white;

    background:
        #0754a6;

    transform:
        translateY(-5px);

    box-shadow:
        0 12px 30px
        rgba(7,84,166,.2);
}


.secondary-btn:hover i {

    transform:
        translateX(6px);
}


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

.hero-right {

    position: relative;

    height: 690px;

    display: flex;

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

    animation:
        heroImageIn 1.1s
        cubic-bezier(.2,.8,.2,1);
}


@keyframes heroImageIn {

    from {
        opacity: 0;
        transform:
            translateX(55px)
            scale(.94);
    }

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

}


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

.hero-product-image {

    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 760px;

    height: auto;

    object-fit: contain;

    display: block;

    filter:
        drop-shadow(
            0 25px 35px
            rgba(0,72,145,.14)
        );

    animation:
        productFloat 6s ease-in-out infinite;
}


@keyframes productFloat {

    0%,100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-12px);

    }

}


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

.hero-image-glow {

    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(30,202,250,.18),
            transparent 68%
        );

    filter: blur(20px);

    z-index: 1;

    animation:
        glowPulse 4s ease-in-out infinite;
}


@keyframes glowPulse {

    0%,100% {
        transform: scale(1);
        opacity: .7;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }

}


/* =========================================
   FLOATING CIRCLES
========================================= */

.floating-circle {

    position: absolute;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 30% 25%,
            #ffffff,
            #6edfff 35%,
            #0879c8 80%
        );

    box-shadow:
        0 12px 30px
        rgba(0,150,220,.18);

    z-index: 8;

    animation:
        floatingCircle 5s ease-in-out infinite;
}


.circle-1 {

    width: 32px;
    height: 32px;

    right: 10%;
    top: 120px;
}


.circle-2 {

    width: 25px;
    height: 25px;

    left: 13%;
    top: 270px;

    animation-delay: 1.5s;
}


.circle-3 {

    width: 45px;
    height: 45px;

    right: 2%;
    bottom: 120px;

    animation-delay: 2.5s;
}


@keyframes floatingCircle {

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

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

}


/* =========================================
   SLIDER ARROWS
========================================= */

.hero-arrow {

    position: absolute;

    top: 54%;

    transform:
        translateY(-50%);

    width: 56px;
    height: 56px;

    border: none;

    border-radius: 50%;

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

    color: #74a8d2;

    box-shadow:
        0 10px 30px
        rgba(0,70,150,.12);

    font-size: 17px;

    cursor: pointer;

    z-index: 20;

    transition:
        all .3s ease;
}


.hero-arrow:hover {

    color: white;

    background:
        linear-gradient(
            135deg,
            #0754a6,
            #12c7f3
        );

    transform:
        translateY(-50%)
        scale(1.1);
}


.hero-prev {
    left: 20px;
}


.hero-next {
    right: 20px;
}


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

.hero-dots {

    position: absolute;

    bottom: 30px;

    left: 50%;

    transform:
        translateX(-50%);

    display: flex;

    gap: 9px;

    z-index: 20;
}


.hero-dots span {

    width: 7px;
    height: 7px;

    border-radius: 20px;

    background: #b8d8eb;

    transition:
        all .3s ease;
}


.hero-dots span.active {

    width: 27px;

    background:
        linear-gradient(
            90deg,
            #0754a6,
            #12c8f5
        );
}


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

@media (max-width: 1100px) {

    .hero-container {

        grid-template-columns:
            45% 55%;
    }

    .hero-left h1 {

        font-size: 72px;
    }

    .hero-right {

        height: 600px;
    }

    .hero-product-image {

        max-width: 650px;
    }
    .logo img{
        width: 90px;
        height: 60px;
        object-fit: contain;
    }

}


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

@media (max-width: 768px) {

    .hero-section {

        padding-top: 0px;

        min-height: auto;
    }


    .hero-container {

        width: 94%;

        grid-template-columns: 1fr;

        text-align: center;

        padding-top: 45px;
    }


    .hero-left {

        padding: 0;

        order: 1;
    }


    .hero-right {

        order: 2;

        height: 450px;

        margin-top: -15px;
    }


    .hero-brand {

        justify-content: center;

        font-size: 11px;

        letter-spacing: 3px;
    }


    .hero-left h1 {

        font-size: 58px;

        letter-spacing: -2px;
    }


    .hero-divider {

        margin-left: auto;
        margin-right: auto;
    }


    .hero-subtitle {

        font-size: 17px;
    }


    .hero-buttons {

        justify-content: center;
    }


    .hero-btn {

        width: 100%;

        max-width: 300px;
    }


    .hero-product-image {

        width: 115%;

        max-width: 650px;
    }


    .hero-arrow {

        width: 42px;
        height: 42px;

        font-size: 13px;
    }


    .hero-prev {

        left: 7px;
    }


    .hero-next {

        right: 7px;
    }

}


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

@media (max-width: 480px) {

    .hero-left h1 {

        font-size: 50px;
    }


    .hero-right {

        height: 360px;
    }


    .hero-product-image {

        width: 125%;
    }


    .hero-brand span {

        width: 35px;
    }

}

/* ==================================================
   BENEFITS
================================================== */

.benefits {

    position: relative;

    z-index: 30;

    width: min(1240px, 90%);

    margin:
        -25px auto 0;

    padding: 30px;

    display: grid;

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

    gap: 15px;

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

    border-radius: 25px;

    box-shadow:
        0 25px 70px rgba(8,82,150,.14);

    border:
        1px solid rgba(80,190,240,.12);

}

.benefit {

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 15px;

    border-right:
        1px solid #e3edf5;

}

.benefit:last-child {

    border-right: none;

}

.benefit-icon {

    flex-shrink: 0;

    width: 58px;
    height: 58px;

    display: flex;

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

    border-radius: 50%;

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

    border:
        1px solid #d9effb;

    color: var(--primary);

    font-size: 21px;

    transition: var(--transition);

}

.benefit:hover .benefit-icon {

    color: white;

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

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

}

.benefit h3 {

    font-size: 12px;

    letter-spacing: .7px;

    margin-bottom: 6px;

}

.benefit p {

    font-size: 11px;

    line-height: 1.5;

    color: #718399;

}


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

.next-section {

    min-height: 500px;

    padding:
        120px 20px;

    background: white;

}

.section-title {

    text-align: center;

}

.section-title > span {

    color: var(--cyan);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 4px;

}

.section-title h2 {

    font-family:
        "Playfair Display",
        serif;

    font-size: 55px;

    margin: 15px 0;

    color: var(--navy);

}

.section-title h2 strong {

    color: var(--primary);

}

.section-title p {

    color: #718399;

}


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

@media(max-width:1200px) {

    .nav-menu {
        gap: 24px;
        margin-right: 20px;
    }

    .hero-container {
        grid-template-columns:
            .8fr 1.2fr;
    }

    .hero h1 {
        font-size: 78px;
    }

    .product-circle {
        width: 500px;
        height: 500px;
    }

    .product-platform {
        width: 540px;
    }

}


@media(max-width:1000px) {

    .nav-menu {
        display: none;
    }

    .nav-actions {
        margin-left: auto;
        margin-right: 15px;
    }

    .mobile-menu-btn {
        display: block;
    }

    .hero-container {

        grid-template-columns: 1fr;

        text-align: center;

        padding-top: 40px;

    }

    .hero-content {
        padding-bottom: 0;
    }

    .brand-line,
    .heading-line {

        justify-content: center;

    }

    .hero-buttons {

        justify-content: center;

    }

    .hero-visual {

        height: 520px;

    }

    .benefits {

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

    }

    .benefit:nth-child(2) {

        border-right: none;

    }

}


@media(max-width:600px) {

    .navbar {
        height: 75px;
    }

    .logo {
        width: 175px;
    }

    .nav-actions {
        gap: 4px;
    }

    .nav-actions .icon-btn:nth-child(1) {
        display: none;
    }

    .hero {

        min-height: 800px;

        padding-top: 75px;

    }

    .hero h1 {

        font-size: 57px;

        letter-spacing: -2px;

    }

    .hero-description {
        font-size: 17px;
    }

    .btn {

        width: 100%;

        max-width: 300px;

    }

    .hero-visual {

        height: 400px;

        transform:
            scale(.72);

        margin-top: -30px;

    }

    .product-circle {

        width: 450px;
        height: 450px;

    }

    .benefits {

        grid-template-columns: 1fr;

        padding: 20px;

    }

    .benefit {

        border-right: none;

        border-bottom:
            1px solid #e3edf5;

        padding-bottom: 20px;

    }

    .benefit:last-child {

        border-bottom: none;

    }

    .slider-arrow {

        width: 42px;
        height: 42px;

    }

    .arrow-left {
        left: 8px;
    }

    .arrow-right {
        right: 8px;
    }

}
/* =========================================
   SHOP BY CATEGORY
========================================= */

.categories-section {

    position: relative;

    padding: 110px 0 120px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f5fbff 100%
        );
}


/* Background Decoration */

.categories-section::before {

    content: "";

    position: absolute;

    width: 550px;
    height: 550px;

    left: -300px;
    top: 100px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(15,190,240,.12),
            transparent 70%
        );

    pointer-events: none;
}


.categories-section::after {

    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    right: -250px;
    bottom: 50px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(7,84,166,.08),
            transparent 70%
        );

    pointer-events: none;
}


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

.categories-container {

    width: min(1280px, 92%);

    margin: auto;

    position: relative;

    z-index: 2;
}


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

.category-heading {

    text-align: center;

    margin-bottom: 55px;
}


.category-eyebrow {

    display: flex;

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

    gap: 15px;

    margin-bottom: 15px;

    color: #0876b9;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 4px;
}


.category-eyebrow span {

    width: 55px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #12bce9
        );
}


.category-eyebrow span:last-child {

    background:
        linear-gradient(
            90deg,
            #12bce9,
            transparent
        );
}


/* Main Heading */

.category-heading h2 {

    margin: 0;

    color: #08244a;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(42px, 5vw, 66px);

    line-height: 1.05;

    letter-spacing: -2px;
}


.category-heading h2 strong {

    color: transparent;

    background:
        linear-gradient(
            100deg,
            #0754a6,
            #11c7f3
        );

    -webkit-background-clip: text;

    background-clip: text;
}


/* Heading Decoration */

.heading-decoration {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin: 18px auto 12px;
}


.heading-decoration span {

    width: 70px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #0878bd
        );
}


.heading-decoration span:last-child {

    background:
        linear-gradient(
            90deg,
            #0878bd,
            transparent
        );
}


.heading-decoration i {

    width: 8px;
    height: 8px;

    display: block;

    background: #12bce9;

    transform:
        rotate(45deg);

    box-shadow:
        0 0 12px
        rgba(18,188,233,.45);
}


.category-heading p {

    margin: 0;

    color: #74869a;

    font-size: 16px;
}


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

.category-grid {

    display: grid;

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

    gap: 22px;
}


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

.category-card {

    position: relative;

    display: block;

    overflow: hidden;

    text-decoration: none;

    background: #ffffff;

    border:
        1px solid #e2eff7;

    border-radius: 20px;

    box-shadow:
        0 10px 35px
        rgba(7,84,166,.07);

    opacity: 1;

    transform:
        translateY(35px);

    transition:
        opacity .7s ease,
        transform .7s cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease,
        border-color .45s ease;
}


/* Scroll Visible */

.category-card.category-visible {

    opacity: 1;

    transform:
        translateY(0);
}


/* Hover */

.category-card:hover {

    transform:
        translateY(-10px);

    border-color:
        rgba(18,188,233,.4);

    box-shadow:
        0 25px 55px
        rgba(7,84,166,.17);
}


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

.category-image {

    position: relative;

    height: 250px;

    overflow: hidden;

    background: #eaf8ff;
}


.category-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .8s
        cubic-bezier(.2,.8,.2,1),
        filter .5s ease;
}


/* Image Hover */

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

    transform:
        scale(1.10);

    filter:
        brightness(.82);
}


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

.category-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            rgba(7,84,166,.78),
            rgba(12,198,241,.50)
        );

    opacity: 0;

    transition:
        opacity .45s ease;
}


.category-card:hover
.category-overlay {

    opacity: 1;
}


/* Shop Now */

.category-overlay span {

    padding:
        12px 22px;

    color: #ffffff;

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

    border-radius: 6px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

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

    transition:
        transform .45s
        cubic-bezier(.2,.8,.2,1);
}


.category-card:hover
.category-overlay span {

    transform:
        translateY(0)
        scale(1);
}


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

.category-number {

    position: absolute;

    top: 15px;
    right: 17px;

    padding:
        5px 9px;

    border-radius: 20px;

    color: #ffffff;

    background:
        rgba(7,84,166,.75);

    backdrop-filter:
        blur(8px);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;

    transition:
        all .35s ease;
}


.category-card:hover
.category-number {

    background:
        #ffffff;

    color:
        #0754a6;

    transform:
        scale(1.08);
}


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

.category-content {

    min-height: 85px;

    padding:
        17px 19px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    background: #ffffff;
}


.category-content h3 {

    margin: 0 0 5px;

    color: #092b55;

    font-size: 17px;

    font-weight: 700;

    transition:
        color .3s ease;
}


.category-card:hover
.category-content h3 {

    color: #0754a6;
}


.category-content p {

    margin: 0;

    color: #8192a4;

    font-size: 12px;
}


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

.category-arrow {

    width: 40px;
    height: 40px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #0754a6;

    background:
        #edf9ff;

    font-size: 20px;

    transition:
        all .4s
        cubic-bezier(.2,.8,.2,1);
}


.category-card:hover
.category-arrow {

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #0754a6,
            #12c8f3
        );

    transform:
        translateX(5px);
}


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

.category-view-all {

    display: flex;

    justify-content: center;

    margin-top: 45px;
}


.view-all-btn {

    display: inline-flex;

    align-items: center;

    gap: 16px;

    padding:
        15px 27px;

    color: #0754a6;

    background: #ffffff;

    border:
        1px solid #0754a6;

    border-radius: 8px;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .8px;

    transition:
        all .35s ease;
}


.view-all-btn:hover {

    color: #ffffff;

    background:
        linear-gradient(
            100deg,
            #0754a6,
            #0ab8e9
        );

    transform:
        translateY(-4px);

    box-shadow:
        0 12px 30px
        rgba(7,84,166,.22);
}


.view-all-btn span {

    font-size: 19px;

    transition:
        transform .3s ease;
}


.view-all-btn:hover span {

    transform:
        translateX(6px);
}


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

@media (max-width: 1100px) {

    .category-grid {

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

}


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

@media (max-width: 800px) {

    .categories-section {

        padding:
            80px 0 90px;
    }

    .category-grid {

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

        gap: 16px;
    }

    .category-image {

        height: 210px;
    }

}


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

@media (max-width: 520px) {

    .categories-container {

        width: 94%;
    }

    .category-grid {

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

        gap: 12px;
    }

    .category-image {

        height: 165px;
    }

    .category-content {

        min-height: 72px;

        padding:
            12px;
    }

    .category-content h3 {

        font-size: 13px;
    }

    .category-content p {

        font-size: 9px;
    }

    .category-arrow {

        width: 31px;
        height: 31px;

        font-size: 15px;
    }

    .category-number {

        top: 9px;
        right: 9px;

        font-size: 9px;
    }

    .category-eyebrow {

        font-size: 9px;

        letter-spacing: 2px;

        gap: 8px;
    }

    .category-eyebrow span {

        width: 30px;
    }

    .category-heading p {

        font-size: 13px;
    }

}
/* =========================================
   NEW ARRIVALS
========================================= */

.new-arrivals-section {

    position: relative;

    padding: 110px 0 120px;

    overflow: hidden;

    background: #ffffff;
}


/* Background decoration */

.new-arrivals-section::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -260px;
    top: 100px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(12,190,240,.10),
            transparent 70%
        );

    pointer-events: none;
}


.new-arrivals-container {

    width: min(1280px, 92%);

    margin: auto;

    position: relative;

    z-index: 2;
}


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

.new-arrivals-heading {

    text-align: center;

    margin-bottom: 55px;
}


.new-arrivals-eyebrow {

    display: flex;

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

    gap: 15px;

    color: #0876b9;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 4px;

    margin-bottom: 15px;
}


.new-arrivals-eyebrow span {

    width: 55px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #12bce9
        );
}


.new-arrivals-eyebrow span:last-child {

    background:
        linear-gradient(
            90deg,
            #12bce9,
            transparent
        );
}


.new-arrivals-heading h2 {

    margin: 0;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(42px, 5vw, 66px);

    line-height: 1.05;

    letter-spacing: -2px;

    color: #08244a;
}


.new-arrivals-heading h2 strong {

    color: transparent;

    background:
        linear-gradient(
            100deg,
            #0754a6,
            #11c7f3
        );

    -webkit-background-clip: text;

    background-clip: text;
}


.new-heading-decoration {

    display: flex;

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

    gap: 10px;

    margin: 18px auto 12px;
}


.new-heading-decoration span {

    width: 70px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #0878bd
        );
}


.new-heading-decoration span:last-child {

    background:
        linear-gradient(
            90deg,
            #0878bd,
            transparent
        );
}


.new-heading-decoration i {

    width: 8px;
    height: 8px;

    display: block;

    background: #12bce9;

    transform: rotate(45deg);
}


.new-arrivals-heading p {

    margin: 0;

    color: #74869a;

    font-size: 16px;
}


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

.products-wrapper {

    position: relative;

    display: flex;

    align-items: center;
}


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

.new-products-grid {

    width: 100%;

    display: grid;

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

    gap: 22px;
}


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

.new-product-card {

    position: relative;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid #e2edf5;

    border-radius: 18px;

    box-shadow:
        0 10px 35px
        rgba(7,84,166,.07);

    transition:
        transform .45s
        cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease,
        border-color .4s ease;
}


.new-product-card:hover {

    transform:
        translateY(-9px);

    border-color:
        rgba(12,188,235,.35);

    box-shadow:
        0 25px 55px
        rgba(7,84,166,.15);
}


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

.product-image-box {

    position: relative;

    height: 330px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #f0faff,
            #e5f7ff
        );
}


.product-image-box img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

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


.new-product-card:hover
.product-image-box img {

    transform:
        scale(1.08);
}


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

.product-badge {

    position: absolute;

    top: 14px;
    left: 14px;

    z-index: 5;

    padding:
        7px 12px;

    color: #ffffff;

    background:
        linear-gradient(
            100deg,
            #0754a6,
            #0bc5f0
        );

    border-radius: 5px;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

    box-shadow:
        0 7px 18px
        rgba(7,84,166,.20);
}


/* =========================================
   WISHLIST
========================================= */

.wishlist-btn {

    position: absolute;

    top: 13px;
    right: 13px;

    z-index: 5;

    width: 40px;
    height: 40px;

    display: flex;

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

    border: none;

    border-radius: 50%;

    color: #0754a6;

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

    box-shadow:
        0 8px 20px
        rgba(0,50,100,.10);

    font-size: 21px;

    cursor: pointer;

    transition:
        all .35s ease;
}


.wishlist-btn:hover {

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #0754a6,
            #11c7f3
        );

    transform:
        scale(1.12);
}


/* =========================================
   QUICK VIEW
========================================= */

.quick-view {

    position: absolute;

    left: 50%;

    bottom: 15px;

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

    padding:
        10px 20px;

    color: #ffffff;

    background:
        rgba(7,84,166,.88);

    backdrop-filter:
        blur(8px);

    border-radius: 6px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    opacity: 0;

    transition:
        all .4s
        cubic-bezier(.2,.8,.2,1);

    white-space: nowrap;
}


.new-product-card:hover
.quick-view {

    opacity: 1;

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


/* =========================================
   PRODUCT INFO
========================================= */

.product-info {

    padding:
        20px 19px 19px;
}


.product-category {

    display: block;

    margin-bottom: 8px;

    color: #0a82bd;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.product-info h3 {

    margin: 0 0 10px;

    color: #092b55;

    font-size: 17px;

    font-weight: 700;

    line-height: 1.35;

    transition:
        color .3s ease;
}


.new-product-card:hover
.product-info h3 {

    color: #0754a6;
}


/* =========================================
   RATING
========================================= */

.product-rating {

    display: flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 12px;
}


.product-rating span {

    color: #f3b51b;

    font-size: 12px;

    letter-spacing: 1px;
}


.product-rating small {

    color: #8b9aaa;

    font-size: 10px;
}


/* =========================================
   PRICE
========================================= */

.product-price {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 17px;
}


.product-price strong {

    color: #0754a6;

    font-size: 20px;

    font-weight: 800;
}


.product-price del {

    color: #9aa8b5;

    font-size: 12px;
}


.product-price em {

    padding:
        4px 7px;

    color: #0877ad;

    background:
        #e8f8ff;

    border-radius: 4px;

    font-size: 9px;

    font-style: normal;

    font-weight: 700;
}


/* =========================================
   ADD TO CART
========================================= */

.add-cart-btn {

    width: 100%;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    border: none;

    border-radius: 7px;

    color: #0754a6;

    background:
        #edf8fd;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

    cursor: pointer;

    transition:
        all .35s ease;
}


.add-cart-btn span {

    font-size: 17px;

    transition:
        transform .3s ease;
}


.add-cart-btn:hover {

    color: #ffffff;

    background:
        linear-gradient(
            100deg,
            #0754a6,
            #0ac3f0
        );

    box-shadow:
        0 10px 25px
        rgba(7,84,166,.20);
}


.add-cart-btn:hover span {

    transform:
        translateX(6px);
}


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

.products-nav {

    position: absolute;

    z-index: 10;

    width: 48px;
    height: 48px;

    display: flex;

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

    border: none;

    border-radius: 50%;

    color: #0754a6;

    background: #ffffff;

    box-shadow:
        0 10px 30px
        rgba(7,84,166,.15);

    cursor: pointer;

    font-size: 20px;

    transition:
        all .35s ease;
}


.products-prev {

    left: -24px;
}


.products-next {

    right: -24px;
}


.products-nav:hover {

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #0754a6,
            #11c7f3
        );

    transform:
        scale(1.1);
}


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

.new-arrivals-footer {

    display: flex;

    justify-content: center;

    margin-top: 45px;
}


.new-view-all {

    display: inline-flex;

    align-items: center;

    gap: 16px;

    padding:
        15px 27px;

    color: #0754a6;

    background: #ffffff;

    border:
        1px solid #0754a6;

    border-radius: 8px;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .8px;

    transition:
        all .35s ease;
}


.new-view-all span {

    font-size: 19px;

    transition:
        transform .3s ease;
}


.new-view-all:hover {

    color: #ffffff;

    background:
        linear-gradient(
            100deg,
            #0754a6,
            #0ab8e9
        );

    transform:
        translateY(-4px);

    box-shadow:
        0 12px 30px
        rgba(7,84,166,.20);
}


.new-view-all:hover span {

    transform:
        translateX(6px);
}


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

@media (max-width: 1100px) {

    .new-products-grid {

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

    .new-product-card:nth-child(4) {

        display: none;
    }

}


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

@media (max-width: 750px) {

    .new-arrivals-section {

        padding:
            80px 0 90px;
    }

    .new-products-grid {

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

        gap: 14px;
    }

    .new-product-card:nth-child(4) {

        display: block;
    }

    .product-image-box {

        height: 220px;
    }

    .product-info {

        padding:
            15px 13px;
    }

    .product-info h3 {

        font-size: 14px;
    }

    .product-price strong {

        font-size: 17px;
    }

    .products-nav {

        display: none;
    }

}


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

@media (max-width: 480px) {

    .new-products-grid {

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

        gap: 10px;
    }

    .product-image-box {

        height: 190px;
    }

    .product-badge {

        top: 9px;
        left: 9px;

        padding:
            5px 8px;

        font-size: 8px;
    }

    .wishlist-btn {

        top: 8px;
        right: 8px;

        width: 32px;
        height: 32px;

        font-size: 17px;
    }

    .product-category {

        font-size: 8px;
    }

    .product-info h3 {

        font-size: 12px;
    }

    .product-rating span {

        font-size: 9px;
    }

    .product-price strong {

        font-size: 15px;
    }

    .product-price del {

        font-size: 10px;
    }

    .product-price em {

        font-size: 7px;
    }

    .add-cart-btn {

        height: 38px;

        font-size: 8px;
    }

}
/* =========================================
   FLASH SALE
========================================= */

.flash-sale-section {

    position: relative;

    padding: 100px 0;

    overflow: hidden;

    background:
        linear-gradient(
            120deg,
            #061f43 0%,
            #0754a6 52%,
            #079bc9 100%
        );
}


/* Decorative circles */

.flash-sale-section::before {

    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

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

    border-radius: 50%;

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

}


.flash-sale-section::after {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

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

    border-radius: 50%;

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

}


.flash-sale-container {

    width: min(1250px, 92%);

    min-height: 500px;

    margin: auto;

    display: grid;

    grid-template-columns:
        50% 50%;

    align-items: center;

    position: relative;

    z-index: 2;
}


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

.flash-sale-content {

    position: relative;

    z-index: 5;

    animation:
        flashContentIn 1s
        cubic-bezier(.2,.8,.2,1);
}


@keyframes flashContentIn {

    from {

        opacity: 0;

        transform:
            translateX(-45px);

    }

    to {

        opacity: 1;

        transform:
            translateX(0);

    }

}


/* Eyebrow */

.flash-eyebrow {

    display: flex;

    align-items: center;

    gap: 13px;

    color: #8eeaff;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;

    margin-bottom: 16px;
}


.flash-eyebrow span {

    width: 45px;

    height: 1px;

    background:
        rgba(142,234,255,.7);
}


/* Lightning */

.flash-icon {

    font-size: 38px;

    margin-bottom: 5px;

    animation:
        flashPulse 1.5s
        ease-in-out infinite;
}


@keyframes flashPulse {

    0%,100% {

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

    }

    50% {

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

    }

}


/* Heading */

.flash-sale-content h2 {

    margin: 0;

    color: #ffffff;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(58px, 6vw, 86px);

    line-height: .9;

    letter-spacing: -3px;
}


.flash-sale-content h2 strong {

    display: block;

    color: transparent;

    background:
        linear-gradient(
            90deg,
            #8cecff,
            #ffffff
        );

    -webkit-background-clip: text;

    background-clip: text;
}


/* Offer */

.flash-sale-content h3 {

    margin:
        22px 0 10px;

    color: #ffffff;

    font-size: 25px;

    font-weight: 700;
}


.flash-sale-content h3 span {

    color: #8eeaff;
}


/* Description */

.flash-sale-content p {

    max-width: 450px;

    margin:
        0 0 28px;

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

    font-size: 16px;

    line-height: 1.6;
}


/* =========================================
   COUNTDOWN
========================================= */

.countdown {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 30px;
}


.count-box {

    width: 75px;
    height: 75px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

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

    border-radius: 10px;

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

    backdrop-filter:
        blur(12px);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.12);
}


.count-box strong {

    color: #ffffff;

    font-size: 25px;

    line-height: 1;

    font-weight: 800;
}


.count-box span {

    margin-top: 7px;

    color: #9eeaff;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1px;
}


.count-separator {

    color: #8eeaff;

    font-size: 22px;

    font-weight: 800;
}


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

.flash-sale-btn {

    display: inline-flex;

    align-items: center;

    gap: 18px;

    padding:
        16px 28px;

    color: #0754a6;

    background: #ffffff;

    border-radius: 8px;

    text-decoration: none;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1px;

    transition:
        all .35s
        cubic-bezier(.2,.8,.2,1);

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


.flash-sale-btn span {

    font-size: 19px;

    transition:
        transform .3s ease;
}


.flash-sale-btn:hover {

    color: #ffffff;

    background:
        linear-gradient(
            100deg,
            #10bce9,
            #0754a6
        );

    transform:
        translateY(-5px);

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


.flash-sale-btn:hover span {

    transform:
        translateX(7px);
}


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

.flash-sale-visual {

    position: relative;

    height: 500px;

    display: flex;

    justify-content: center;

    align-items: center;

    animation:
        flashVisualIn 1.1s
        cubic-bezier(.2,.8,.2,1);
}


@keyframes flashVisualIn {

    from {

        opacity: 0;

        transform:
            translateX(50px)
            scale(.94);

    }

    to {

        opacity: 1;

        transform:
            translateX(0)
            scale(1);

    }

}


/* Glow */

.sale-glow {

    position: absolute;

    width: 450px;
    height: 450px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(71,225,255,.28),
            transparent 68%
        );

    filter:
        blur(15px);

    animation:
        saleGlow 4s
        ease-in-out infinite;
}


@keyframes saleGlow {

    0%,100% {

        transform:
            scale(1);

        opacity: .7;

    }

    50% {

        transform:
            scale(1.12);

        opacity: 1;

    }

}


/* Product */

.flash-product-image {

    position: relative;

    z-index: 3;

    width: 85%;

    max-width: 560px;

    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(
            0 25px 35px
            rgba(0,0,0,.25)
        );

    animation:
        saleProductFloat 5s
        ease-in-out infinite;
}


@keyframes saleProductFloat {

    0%,100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-13px);

    }

}


/* =========================================
   DISCOUNT CIRCLE
========================================= */

.discount-circle {

    position: absolute;

    top: 30px;

    right: 15px;

    z-index: 6;

    width: 125px;
    height: 125px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

    color: #0754a6;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #a9efff
        );

    box-shadow:
        0 18px 40px
        rgba(0,0,0,.20);

    animation:
        discountFloat 4s
        ease-in-out infinite;
}


.discount-circle span {

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;
}


.discount-circle strong {

    font-size: 36px;

    line-height: 1;

    font-weight: 900;
}


.discount-circle small {

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;
}


@keyframes discountFloat {

    0%,100% {

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

    }

    50% {

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

    }

}


/* =========================================
   FLOATING INFO CARDS
========================================= */

.floating-sale-card {

    position: absolute;

    z-index: 7;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        11px 16px;

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

    border-radius: 10px;

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

    backdrop-filter:
        blur(14px);

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

    color: #ffffff;
}


.floating-sale-card > span {

    width: 32px;
    height: 32px;

    display: flex;

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

    border-radius: 50%;

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

    font-size: 14px;
}


.floating-sale-card div {

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.floating-sale-card strong {

    font-size: 9px;

    letter-spacing: 1px;
}


.floating-sale-card small {

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

    font-size: 8px;
}


.card-top {

    left: 20px;

    top: 85px;

    animation:
        floatingCard 5s
        ease-in-out infinite;
}


.card-bottom {

    right: 5px;

    bottom: 70px;

    animation:
        floatingCard 5s
        ease-in-out infinite 1.5s;
}


@keyframes floatingCard {

    0%,100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-12px);

    }

}


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

@media (max-width: 950px) {

    .flash-sale-container {

        grid-template-columns:
            1fr 1fr;
    }

    .flash-sale-content h2 {

        font-size: 65px;
    }

    .count-box {

        width: 65px;
        height: 65px;
    }

    .flash-sale-visual {

        height: 430px;
    }

    .discount-circle {

        width: 105px;
        height: 105px;
    }

}


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

@media (max-width: 700px) {

    .flash-sale-section {

        padding:
            80px 0 70px;
    }

    .flash-sale-container {

        grid-template-columns: 1fr;

        text-align: center;
    }

    .flash-sale-content {

        order: 1;
    }

    .flash-sale-visual {

        order: 2;

        height: 400px;

        margin-top: 15px;
    }

    .flash-eyebrow {

        justify-content: center;

        font-size: 9px;

        letter-spacing: 2px;
    }

    .flash-sale-content h2 {

        font-size: 62px;
    }

    .flash-sale-content h3 {

        font-size: 22px;
    }

    .flash-sale-content p {

        margin-left: auto;
        margin-right: auto;

        font-size: 14px;
    }

    .countdown {

        justify-content: center;

        gap: 6px;
    }

    .count-box {

        width: 62px;
        height: 62px;
    }

    .count-box strong {

        font-size: 21px;
    }

    .count-separator {

        font-size: 18px;
    }

    .flash-product-image {

        width: 90%;
    }

    .discount-circle {

        right: 0;

        top: 20px;

        width: 95px;
        height: 95px;
    }

    .discount-circle strong {

        font-size: 29px;
    }

    .card-top {

        left: 0;

        top: 80px;
    }

    .card-bottom {

        right: 0;

        bottom: 40px;
    }

}


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

@media (max-width: 450px) {

    .flash-sale-content h2 {

        font-size: 52px;
    }

    .count-box {

        width: 55px;
        height: 58px;
    }

    .count-box strong {

        font-size: 18px;
    }

    .count-box span {

        font-size: 7px;
    }

    .count-separator {

        font-size: 15px;
    }

    .floating-sale-card {

        padding:
            8px 10px;
    }

    .floating-sale-card strong {

        font-size: 8px;
    }

    .floating-sale-card small {

        font-size: 7px;
    }

}
/* =========================================
   BEST SELLERS
========================================= */

.best-sellers-section {

    position: relative;

    padding: 110px 0 120px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #f6fbfe 0%,
            #ffffff 100%
        );
}


.best-sellers-container {

    width: min(1280px, 92%);

    margin: auto;

    position: relative;

    z-index: 2;
}


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

.best-sellers-heading {

    text-align: center;

    margin-bottom: 35px;
}


.best-eyebrow {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 15px;

    color: #0876b9;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;

    margin-bottom: 14px;
}


.best-eyebrow span {

    width: 50px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #12bce9
        );
}


.best-eyebrow span:last-child {

    background:
        linear-gradient(
            90deg,
            #12bce9,
            transparent
        );
}


.best-sellers-heading h2 {

    margin: 0;

    color: #08244a;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(42px, 5vw, 64px);

    line-height: 1;

    letter-spacing: -2px;
}


.best-sellers-heading h2 strong {

    color: transparent;

    background:
        linear-gradient(
            100deg,
            #0754a6,
            #11c7f3
        );

    -webkit-background-clip: text;

    background-clip: text;
}


.best-heading-decoration {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    margin: 18px auto 12px;
}


.best-heading-decoration span {

    width: 65px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #0878bd
        );
}


.best-heading-decoration span:last-child {

    background:
        linear-gradient(
            90deg,
            #0878bd,
            transparent
        );
}


.best-heading-decoration i {

    width: 8px;

    height: 8px;

    display: block;

    background: #12bce9;

    transform: rotate(45deg);
}


.best-sellers-heading p {

    margin: 0;

    color: #74869a;

    font-size: 15px;
}


/* =========================================
   FILTER
========================================= */

.best-filter {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    margin-bottom: 42px;

    flex-wrap: wrap;
}


.best-filter-btn {

    padding:
        10px 21px;

    border:
        1px solid #d8e9f2;

    border-radius: 30px;

    color: #62778d;

    background: #ffffff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

    cursor: pointer;

    transition:
        all .35s ease;
}


.best-filter-btn:hover {

    color: #0754a6;

    border-color:
        #0dbde9;

    transform:
        translateY(-2px);
}


.best-filter-btn.active {

    color: #ffffff;

    border-color:
        transparent;

    background:
        linear-gradient(
            100deg,
            #0754a6,
            #10c5ef
        );

    box-shadow:
        0 8px 20px
        rgba(7,84,166,.18);
}


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

.best-products-grid {

    display: grid;

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

    gap: 22px;
}


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

.best-product-card {

    background: #ffffff;

    border:
        1px solid #e2edf5;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 8px 30px
        rgba(7,84,166,.06);

    transition:
        transform .45s
        cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease,
        border-color .35s ease;
}


.best-product-card:hover {

    transform:
        translateY(-9px);

    border-color:
        rgba(12,188,235,.35);

    box-shadow:
        0 25px 55px
        rgba(7,84,166,.14);
}


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

.best-product-image {

    position: relative;

    height: 300px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #effaff,
            #e5f7ff
        );
}


.best-product-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

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


.best-product-card:hover
.best-product-image img {

    transform:
        scale(1.09);
}


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

.best-seller-badge {

    position: absolute;

    top: 13px;

    left: 13px;

    z-index: 5;

    padding:
        7px 10px;

    color: #ffffff;

    background:
        linear-gradient(
            100deg,
            #0754a6,
            #0bc5f0
        );

    border-radius: 5px;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1px;

    box-shadow:
        0 7px 18px
        rgba(7,84,166,.2);
}


/* =========================================
   WISHLIST
========================================= */

.best-wishlist {

    position: absolute;

    top: 12px;

    right: 12px;

    z-index: 5;

    width: 39px;

    height: 39px;

    display: flex;

    justify-content: center;

    align-items: center;

    border: none;

    border-radius: 50%;

    color: #0754a6;

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

    box-shadow:
        0 7px 20px
        rgba(0,40,80,.12);

    font-size: 21px;

    cursor: pointer;

    transition:
        all .35s ease;
}


.best-wishlist:hover,
.best-wishlist.active {

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #0754a6,
            #11c7f3
        );

    transform:
        scale(1.1);
}


/* =========================================
   QUICK VIEW
========================================= */

.best-quick-view {

    position: absolute;

    left: 50%;

    bottom: 14px;

    z-index: 4;

    padding:
        10px 19px;

    color: #ffffff;

    background:
        rgba(7,84,166,.88);

    backdrop-filter:
        blur(8px);

    border-radius: 6px;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;

    opacity: 0;

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

    transition:
        all .4s
        cubic-bezier(.2,.8,.2,1);
}


.best-product-card:hover
.best-quick-view {

    opacity: 1;

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


/* =========================================
   PRODUCT INFO
========================================= */

.best-product-info {

    padding:
        19px;
}


.best-product-category {

    display: block;

    margin-bottom: 7px;

    color: #0a82bd;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.4px;
}


.best-product-info h3 {

    margin:
        0 0 9px;

    color: #092b55;

    font-size: 16px;

    line-height: 1.35;

    font-weight: 700;

    transition:
        color .3s ease;
}


.best-product-card:hover
.best-product-info h3 {

    color: #0754a6;
}


/* =========================================
   RATING
========================================= */

.best-rating {

    display: flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 12px;
}


.best-rating span {

    color: #f2b51c;

    font-size: 11px;

    letter-spacing: 1px;
}


.best-rating small {

    color: #8b9aaa;

    font-size: 9px;
}


/* =========================================
   PRICE
========================================= */

.best-price {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 16px;
}


.best-price strong {

    color: #0754a6;

    font-size: 19px;

    font-weight: 800;
}


.best-price del {

    color: #9aa8b5;

    font-size: 11px;
}


.best-price em {

    padding:
        4px 6px;

    color: #0877ad;

    background:
        #e8f8ff;

    border-radius: 4px;

    font-size: 8px;

    font-style: normal;

    font-weight: 800;
}


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

.best-cart-btn {

    width: 100%;

    height: 43px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 14px;

    border: none;

    border-radius: 7px;

    color: #0754a6;

    background:
        #edf8fd;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

    cursor: pointer;

    transition:
        all .35s ease;
}


.best-cart-btn span {

    font-size: 17px;

    transition:
        transform .3s ease;
}


.best-cart-btn:hover {

    color: #ffffff;

    background:
        linear-gradient(
            100deg,
            #0754a6,
            #0ac3f0
        );

    box-shadow:
        0 10px 25px
        rgba(7,84,166,.2);
}


.best-cart-btn:hover span {

    transform:
        translateX(6px);
}


/* =========================================
   HIDDEN FILTER ITEMS
========================================= */

.best-product-card.filter-hidden {

    display: none;
}


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

.best-sellers-footer {

    display: flex;

    justify-content: center;

    margin-top: 45px;
}


.best-view-all {

    display: inline-flex;

    align-items: center;

    gap: 16px;

    padding:
        15px 27px;

    color: #0754a6;

    background: #ffffff;

    border:
        1px solid #0754a6;

    border-radius: 8px;

    text-decoration: none;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .8px;

    transition:
        all .35s ease;
}


.best-view-all span {

    font-size: 18px;

    transition:
        transform .3s ease;
}


.best-view-all:hover {

    color: #ffffff;

    background:
        linear-gradient(
            100deg,
            #0754a6,
            #0ab8e9
        );

    transform:
        translateY(-4px);

    box-shadow:
        0 12px 30px
        rgba(7,84,166,.2);
}


.best-view-all:hover span {

    transform:
        translateX(6px);
}


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

@media (max-width: 1050px) {

    .best-products-grid {

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

}


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

@media (max-width: 750px) {

    .best-sellers-section {

        padding:
            80px 0 90px;
    }

    .best-products-grid {

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

        gap: 14px;
    }

    .best-product-image {

        height: 220px;
    }

    .best-product-info {

        padding: 14px;
    }

    .best-product-info h3 {

        font-size: 13px;
    }

}


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

@media (max-width: 480px) {

    .best-products-grid {

        gap: 10px;
    }

    .best-product-image {

        height: 185px;
    }

    .best-seller-badge {

        top: 8px;
        left: 8px;

        padding:
            5px 7px;

        font-size: 7px;
    }

    .best-wishlist {

        top: 8px;
        right: 8px;

        width: 31px;
        height: 31px;

        font-size: 17px;
    }

    .best-product-info {

        padding: 12px;
    }

    .best-product-category {

        font-size: 7px;
    }

    .best-product-info h3 {

        font-size: 11px;
    }

    .best-rating span {

        font-size: 8px;
    }

    .best-rating small {

        font-size: 8px;
    }

    .best-price strong {

        font-size: 15px;
    }

    .best-price del {

        font-size: 9px;
    }

    .best-price em {

        font-size: 7px;
    }

    .best-cart-btn {

        height: 37px;

        font-size: 8px;
    }

    .best-filter-btn {

        padding:
            8px 13px;

        font-size: 8px;
    }

}
/* =========================================
   WHY CHOOSE US
========================================= */
/* =========================================
   AURA WHY CHOOSE US
========================================= */

.aura-why-section {

    position: relative;

    min-height: 620px;

    padding:
        75px 0 105px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #edf9fe 0%,
            #ffffff 34%,
            #ffffff 68%,
            #eef9fe 100%
        );
}


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

.aura-shopping-bg {

    position: absolute;

    left: -35px;

    bottom: 0;

    width: 390px;

    height: 430px;

    background-image:
        url("images/why-choose/shopping-bags.png");

    background-size: contain;

    background-repeat: no-repeat;

    background-position:
        left bottom;

    opacity: .40;

    filter:
        saturate(.75)
        brightness(1.08);

    z-index: 0;

    transition:
        transform 1.2s ease;
}


.aura-why-section:hover
.aura-shopping-bg {

    transform:
        translateX(12px);
}


/* =========================================
   RIGHT GIFT IMAGE
========================================= */

.aura-gift-bg {

    position: absolute;

    right: -30px;

    bottom: -15px;

    width: 400px;

    height: 390px;

    background-image:
        url("images/why-choose/gift-box.png");

    background-size: contain;

    background-repeat: no-repeat;

    background-position:
        right bottom;

    opacity: .30;

    filter:
        saturate(.7)
        brightness(1.08);

    z-index: 0;

    transition:
        transform 1.2s ease;
}


.aura-why-section:hover
.aura-gift-bg {

    transform:
        translateX(-12px);
}


/* =========================================
   CENTER WHITE GLOW
========================================= */

.aura-why-section::before {

    content: "";

    position: absolute;

    left: 50%;

    top: 45%;

    width: 850px;

    height: 520px;

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

    border-radius: 50%;

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

    filter:
        blur(35px);

    z-index: 1;

    pointer-events: none;
}


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

.aura-bg-glow {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: 0;

    filter: blur(70px);

    animation:
        auraGlowMove 8s ease-in-out infinite;
}


.aura-glow-left {

    width: 280px;

    height: 280px;

    left: -100px;

    top: 80px;

    background:
        rgba(16,191,235,.14);
}


.aura-glow-right {

    width: 280px;

    height: 280px;

    right: -100px;

    bottom: 50px;

    background:
        rgba(7,84,166,.10);

    animation-delay:
        -4s;
}


@keyframes auraGlowMove {

    0%,100% {

        transform:
            translate(0,0)
            scale(1);

    }

    50% {

        transform:
            translate(25px,-18px)
            scale(1.1);

    }
}


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

.aura-why-container {

    width:
        min(1180px, 92%);

    margin:
        auto;

    position:
        relative;

    z-index:
        3;
}


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

.aura-why-heading {

    text-align:
        center;

    margin-bottom:
        50px;
}


/* =========================================
   EYEBROW
========================================= */

.aura-why-eyebrow {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        13px;

    margin-bottom:
        17px;
}


.aura-why-eyebrow span {

    width:
        80px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #168bd0
        );
}


.aura-why-eyebrow span:last-child {

    background:
        linear-gradient(
            90deg,
            #168bd0,
            transparent
        );
}


.aura-why-eyebrow i {

    color:
        #0875c1;

    font-size:
        15px;

    font-style:
        normal;

    animation:
        auraStar 2s ease-in-out infinite;
}


.aura-why-eyebrow i:nth-of-type(2) {

    animation-delay:
        .5s;
}


.aura-why-eyebrow strong {

    color:
        #075eb0;

    font-size:
        14px;

    letter-spacing:
        2px;

    font-weight:
        800;
}


@keyframes auraStar {

    0%,100% {

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

    }

    50% {

        transform:
            scale(1.3)
            rotate(45deg);

    }
}


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

.aura-why-heading h2 {

    margin:
        0;

    color:
        #071b42;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(42px, 5.5vw, 72px);

    line-height:
        .98;

    letter-spacing:
        -2px;

    font-weight:
        500;
}


.aura-why-heading h2 strong {

    display:
        block;

    color:
        transparent;

    background:
        linear-gradient(
            100deg,
            #0754a6,
            #0bc8f1
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    font-weight:
        700;
}


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

.aura-title-line {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        12px;

    margin:
        24px 0 15px;
}


.aura-title-line span {

    width:
        125px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #29b8e9
        );
}


.aura-title-line span:last-child {

    background:
        linear-gradient(
            90deg,
            #29b8e9,
            transparent
        );
}


.aura-title-line i {

    width:
        13px;

    height:
        13px;

    background:
        linear-gradient(
            135deg,
            #0875c1,
            #16c9f1
        );

    transform:
        rotate(45deg);

    box-shadow:
        0 0 15px
        rgba(16,194,239,.3);
}


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

.aura-why-heading p {

    max-width:
        610px;

    margin:
        auto;

    color:
        #596774;

    font-size:
        16px;

    line-height:
        1.7;
}


/* =========================================
   BENEFITS
========================================= */

.aura-benefits {

    display:
        grid;

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

    margin-top:
        10px;

    border-top:
        1px solid
        rgba(115,165,191,.32);

    border-bottom:
        1px solid
        rgba(115,165,191,.32);

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

    backdrop-filter:
        blur(3px);
}


/* =========================================
   BENEFIT
========================================= */

.aura-benefit {

    position:
        relative;

    text-align:
        center;

    padding:
        25px 20px 22px;

    transition:
        all .4s
        cubic-bezier(.2,.8,.2,1);
}


.aura-benefit:not(:last-child)::after {

    content:
        "";

    position:
        absolute;

    right:
        0;

    top:
        30px;

    bottom:
        30px;

    width:
        1px;

    background:
        rgba(112,161,188,.35);
}


.aura-benefit:hover {

    transform:
        translateY(-8px);

    background:
        rgba(255,255,255,.55);
}


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

.aura-benefit-icon {

    width:
        105px;

    height:
        105px;

    margin:
        0 auto 22px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    border-radius:
        50%;

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

    border:
        2px solid
        rgba(23,190,238,.30);

    box-shadow:
        0 0 0 8px
        rgba(25,191,238,.035),

        0 12px 30px
        rgba(7,84,166,.08);

    transition:
        all .45s
        cubic-bezier(.2,.8,.2,1);
}


.aura-benefit-icon::before {

    content:
        "";

    position:
        absolute;
}


.aura-benefit-icon svg {

    width:
        52px;

    height:
        52px;

    fill:
        none;

    stroke:
        #0875c1;

    stroke-width:
        2;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    transition:
        all .4s ease;
}


.aura-benefit:hover
.aura-benefit-icon {

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

    border-color:
        #10bde9;

    box-shadow:
        0 0 0 9px
        rgba(25,191,238,.07),

        0 18px 40px
        rgba(7,84,166,.15);
}


.aura-benefit:hover
.aura-benefit-icon svg {

    stroke:
        #0754a6;

    transform:
        scale(1.08);
}


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

.aura-benefit h3 {

    margin:
        0 0 9px;

    color:
        #071b42;

    font-size:
        16px;

    font-weight:
        800;

    letter-spacing:
        .5px;
}


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

.aura-benefit p {

    margin:
        0 auto;

    max-width:
        180px;

    min-height:
        42px;

    color:
        #616c76;

    font-size:
        14px;

    line-height:
        1.45;
}


/* =========================================
   SMALL BLUE LINE
========================================= */

.aura-small-line {

    width:
        45px;

    height:
        3px;

    margin:
        18px auto 0;

    border-radius:
        10px;

    background:
        linear-gradient(
            90deg,
            #0875c1,
            #12c7ef
        );

    transition:
        width .35s ease;
}


.aura-benefit:hover
.aura-small-line {

    width:
        65px;
}


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

.aura-bottom-wave {

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        -5px;

    height:
        85px;

    z-index:
        2;

    pointer-events:
        none;

    overflow:
        hidden;
}


.aura-bottom-wave div:first-child {

    position:
        absolute;

    width:
        120%;

    height:
        100px;

    left:
        -10%;

    bottom:
        -72px;

    border-radius:
        50% 50% 0 0;

    background:
        rgba(213,243,252,.65);

    transform:
        rotate(-2deg);
}


.aura-bottom-wave div:last-child {

    position:
        absolute;

    width:
        120%;

    height:
        75px;

    left:
        -10%;

    bottom:
        -58px;

    border-radius:
        50% 50% 0 0;

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

    transform:
        rotate(1deg);
}


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

@media (max-width: 950px) {

    .aura-why-section {

        padding:
            75px 0 95px;
    }


    .aura-benefits {

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


    .aura-benefit:nth-child(2)::after {

        display:
            none;
    }


    .aura-benefit:nth-child(1),
    .aura-benefit:nth-child(2) {

        border-bottom:
            1px solid
            rgba(112,161,188,.35);
    }


    .aura-shopping-bg {

        width:
            280px;

        opacity:
            .22;
    }


    .aura-gift-bg {

        width:
            290px;

        opacity:
            .20;
    }

}


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

@media (max-width: 600px) {

    .aura-why-section {

        padding:
            65px 0 85px;
    }


    .aura-why-heading {

        margin-bottom:
            35px;
    }


    .aura-why-eyebrow span {

        width:
            35px;
    }


    .aura-why-eyebrow strong {

        font-size:
            10px;

        letter-spacing:
            1.5px;
    }


    .aura-why-heading h2 {

        font-size:
            38px;

        letter-spacing:
            -1px;
    }


    .aura-title-line span {

        width:
            55px;
    }


    .aura-why-heading p {

        padding:
            0 15px;

        font-size:
            13px;
    }


    .aura-benefits {

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


    .aura-benefit {

        padding:
            23px 10px;
    }


    .aura-benefit-icon {

        width:
            70px;

        height:
            70px;

        margin-bottom:
            15px;
    }


    .aura-benefit-icon svg {

        width:
            34px;

        height:
            34px;
    }


    .aura-benefit h3 {

        font-size:
            10px;

        letter-spacing:
            .2px;
    }


    .aura-benefit p {

        font-size:
            9px;

        min-height:
            30px;
    }


    .aura-small-line {

        width:
            30px;

        height:
            2px;

        margin-top:
            12px;
    }


    .aura-shopping-bg {

        left:
            -100px;

        width:
            260px;

        opacity:
            .15;
    }


    .aura-gift-bg {

        right:
            -100px;

        width:
            260px;

        opacity:
            .13;
    }

}
/* =========================================
   AURA CUSTOMER REVIEWS
========================================= */

.aura-reviews-section {

    position: relative;

    padding: 100px 0 90px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 10% 50%,
            rgba(12,190,235,.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 30%,
            rgba(7,84,166,.08),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #ffffff,
            #f2fbfe,
            #ffffff
        );
}


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

.reviews-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(75px);

    pointer-events: none;

    animation:
        reviewGlow 8s ease-in-out infinite;
}


.reviews-glow-left {

    width: 300px;

    height: 300px;

    left: -130px;

    top: 120px;

    background:
        rgba(13,195,239,.12);
}


.reviews-glow-right {

    width: 280px;

    height: 280px;

    right: -110px;

    bottom: 60px;

    background:
        rgba(7,84,166,.09);

    animation-delay:
        -4s;
}


@keyframes reviewGlow {

    0%,100% {

        transform:
            translate(0,0)
            scale(1);

    }

    50% {

        transform:
            translate(25px,-20px)
            scale(1.12);

    }
}


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

.aura-reviews-container {

    width:
        min(1180px,92%);

    margin:
        auto;

    position:
        relative;

    z-index:
        2;
}


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

.reviews-heading {

    text-align:
        center;

    margin-bottom:
        55px;
}


.reviews-eyebrow {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        17px;
}


.reviews-eyebrow span {

    width:
        70px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #148bd0
        );
}


.reviews-eyebrow span:last-child {

    background:
        linear-gradient(
            90deg,
            #148bd0,
            transparent
        );
}


.reviews-eyebrow i {

    color:
        #0abde9;

    font-size:
        14px;

    font-style:
        normal;
}


.reviews-eyebrow strong {

    color:
        #075eb0;

    font-size:
        13px;

    letter-spacing:
        2px;

    font-weight:
        800;
}


.reviews-heading h2 {

    margin:
        0;

    color:
        #071b42;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(42px,5vw,65px);

    line-height:
        1;

    letter-spacing:
        -1.5px;

    font-weight:
        500;
}


.reviews-heading h2 strong {

    display:
        block;

    color:
        transparent;

    background:
        linear-gradient(
            100deg,
            #0754a6,
            #0bc8f1
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    font-weight:
        700;
}


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

.reviews-title-line {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        11px;

    margin:
        22px 0 14px;
}


.reviews-title-line span {

    width:
        100px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #1bbce8
        );
}


.reviews-title-line span:last-child {

    background:
        linear-gradient(
            90deg,
            #1bbce8,
            transparent
        );
}


.reviews-title-line i {

    width:
        11px;

    height:
        11px;

    background:
        linear-gradient(
            135deg,
            #0754a6,
            #10c7ef
        );

    transform:
        rotate(45deg);
}


.reviews-heading p {

    margin:
        auto;

    max-width:
        600px;

    color:
        #687783;

    font-size:
        14px;

    line-height:
        1.7;
}


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

.reviews-wrapper {

    display:
        flex;

    align-items:
        center;

    gap:
        20px;
}


/* =========================================
   TRACK
========================================= */

.reviews-track {

    position:
        relative;

    flex:
        1;

    min-height:
        280px;
}


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

.review-card {

    position:
        absolute;

    inset:
        0;

    padding:
        35px 40px;

    border:
        1px solid
        rgba(16,183,229,.18);

    border-radius:
        22px;

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

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 18px 55px
        rgba(7,84,166,.08);

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateX(30px)
        scale(.98);

    transition:
        all .55s
        cubic-bezier(.2,.8,.2,1);
}


.review-card.active {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateX(0)
        scale(1);
}


.review-card:hover {

    box-shadow:
        0 25px 65px
        rgba(7,84,166,.13);

    transform:
        translateY(-4px);
}


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

.review-top {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin-bottom:
        15px;
}


.review-stars {

    color:
        #f5b800;

    letter-spacing:
        3px;

    font-size:
        15px;
}


.verified-badge {

    padding:
        6px 11px;

    border-radius:
        30px;

    color:
        #0879b7;

    background:
        #eaf9fd;

    font-size:
        10px;

    font-weight:
        700;
}


/* =========================================
   QUOTE
========================================= */

.quote-mark {

    position:
        absolute;

    right:
        35px;

    top:
        42px;

    color:
        rgba(8,121,183,.10);

    font-family:
        Georgia,
        serif;

    font-size:
        100px;

    line-height:
        .6;
}


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

.review-text {

    max-width:
        760px;

    margin:
        15px 0 30px;

    color:
        #405364;

    font-family:
        Georgia,
        serif;

    font-size:
        19px;

    line-height:
        1.7;

    font-style:
        italic;
}


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

.review-user {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;
}


.review-avatar {

    width:
        48px;

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #0754a6,
            #0bc8f1
        );

    font-size:
        17px;

    font-weight:
        800;

    box-shadow:
        0 7px 20px
        rgba(7,84,166,.18);
}


.review-user h3 {

    margin:
        0 0 3px;

    color:
        #092b55;

    font-size:
        14px;

    font-weight:
        800;
}


.review-user span {

    color:
        #82909c;

    font-size:
        11px;
}


/* =========================================
   ARROWS
========================================= */

.review-arrow {

    flex-shrink:
        0;

    width:
        48px;

    height:
        48px;

    border:
        1px solid
        rgba(8,121,183,.20);

    border-radius:
        50%;

    color:
        #0754a6;

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

    font-size:
        30px;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        all .3s ease;
}


.review-arrow:hover {

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #0754a6,
            #0bc8f1
        );

    border-color:
        transparent;

    transform:
        scale(1.08);
}


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

.review-dots {

    display:
        flex;

    justify-content:
        center;

    gap:
        8px;

    margin-top:
        28px;
}


.review-dot {

    width:
        8px;

    height:
        8px;

    padding:
        0;

    border:
        0;

    border-radius:
        20px;

    background:
        #c5dce7;

    cursor:
        pointer;

    transition:
        all .35s ease;
}


.review-dot.active {

    width:
        27px;

    background:
        linear-gradient(
            90deg,
            #0754a6,
            #0bc8f1
        );
}


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

@media (max-width: 800px) {

    .reviews-wrapper {

        gap:
            10px;
    }


    .review-card {

        padding:
            30px;
    }


    .review-text {

        font-size:
            16px;
    }

}


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

@media (max-width: 600px) {

    .aura-reviews-section {

        padding:
            70px 0 70px;
    }


    .reviews-heading {

        margin-bottom:
            38px;
    }


    .reviews-eyebrow span {

        width:
            28px;
    }


    .reviews-eyebrow strong {

        font-size:
            9px;

        letter-spacing:
            1px;
    }


    .reviews-heading h2 {

        font-size:
            38px;
    }


    .reviews-heading p {

        font-size:
            12px;

        padding:
            0 10px;
    }


    .reviews-wrapper {

        gap:
            7px;
    }


    .reviews-track {

        min-height:
            335px;
    }


    .review-card {

        padding:
            25px 20px;

        border-radius:
            18px;
    }


    .review-top {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            10px;
    }


    .review-stars {

        font-size:
            13px;
    }


    .verified-badge {

        font-size:
            9px;
    }


    .quote-mark {

        right:
            20px;

        top:
            65px;

        font-size:
            75px;
    }


    .review-text {

        font-size:
            15px;

        line-height:
            1.65;

        margin:
            15px 0 28px;
    }


    .review-arrow {

        width:
            34px;

        height:
            34px;

        font-size:
            22px;
    }


    .review-avatar {

        width:
            42px;

        height:
            42px;

        font-size:
            14px;
    }


    .review-user h3 {

        font-size:
            12px;
    }


    .review-user span {

        font-size:
            9px;
    }

}
/* =========================================
   AURA SPECIAL OFFER
========================================= */

.aura-offer-section {

    position: relative;

    min-height: 540px;

    padding: 70px 0;

    overflow: hidden;

    background:
        linear-gradient(
            115deg,
            #063d78 0%,
            #0754a6 45%,
            #079dcc 100%
        );

}


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

.offer-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(70px);

    pointer-events: none;

    animation:
        offerGlowMove 8s ease-in-out infinite;
}


.offer-glow-one {

    width: 380px;

    height: 380px;

    left: -150px;

    top: -130px;

    background:
        rgba(0,220,255,.20);
}


.offer-glow-two {

    width: 330px;

    height: 330px;

    right: -100px;

    bottom: -140px;

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

    animation-delay:
        -4s;
}


@keyframes offerGlowMove {

    0%,100% {

        transform:
            translate(0,0)
            scale(1);

    }

    50% {

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

    }
}


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

.aura-offer-container {

    width:
        min(1180px,92%);

    min-height:
        400px;

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    align-items:
        center;

    position:
        relative;

    z-index:
        2;
}


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

.offer-content {

    padding:
        20px 20px 20px 30px;

    position:
        relative;

    z-index:
        3;
}


/* =========================================
   EYEBROW
========================================= */

.offer-eyebrow {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

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

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        3px;

    margin-bottom:
        18px;
}


.offer-eyebrow span {

    width:
        38px;

    height:
        1px;

    background:
        rgba(255,255,255,.65);
}


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

.offer-content h2 {

    margin:
        0;

    color:
        #ffffff;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

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

    line-height:
        .95;

    letter-spacing:
        -2px;

    font-weight:
        500;
}


.offer-content h2 strong {

    display:
        block;

    color:
        #8deeff;

    font-weight:
        700;
}


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

.offer-description {

    max-width:
        470px;

    margin:
        24px 0 20px;

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

    font-size:
        15px;

    line-height:
        1.7;
}


/* =========================================
   DISCOUNT
========================================= */

.offer-discount {

    display:
        flex;

    align-items:
        flex-end;

    gap:
        7px;

    margin-top:
        5px;
}


.offer-discount strong {

    margin-bottom:
        11px;

    color:
        #ffffff;

    font-size:
        12px;

    letter-spacing:
        2px;
}


.offer-discount b {

    color:
        #ffffff;

    font-size:
        58px;

    line-height:
        .8;

    font-weight:
        900;

    letter-spacing:
        -3px;
}


.offer-discount span {

    margin-bottom:
        8px;

    color:
        #8deeff;

    font-size:
        18px;

    font-weight:
        800;
}


.offer-note {

    margin:
        12px 0 25px;

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

    font-size:
        11px;
}


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

.offer-btn {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        18px;

    padding:
        14px 22px;

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

    border-radius:
        50px;

    color:
        #0754a6;

    background:
        #ffffff;

    text-decoration:
        none;

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        1px;

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

    transition:
        all .35s
        cubic-bezier(.2,.8,.2,1);
}


.offer-btn span {

    font-size:
        19px;

    line-height:
        0;

    transition:
        transform .3s ease;
}


.offer-btn:hover {

    color:
        #ffffff;

    background:
        transparent;

    border-color:
        #ffffff;

    transform:
        translateY(-4px);

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


.offer-btn:hover span {

    transform:
        translateX(6px);
}


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

.offer-visual {

    position:
        relative;

    height:
        450px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


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

.offer-image-glow {

    position:
        absolute;

    width:
        380px;

    height:
        380px;

    border-radius:
        50%;

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

    filter:
        blur(35px);

    animation:
        offerImageGlow 5s ease-in-out infinite;
}


@keyframes offerImageGlow {

    0%,100% {

        transform:
            scale(1);

        opacity:
            .65;
    }

    50% {

        transform:
            scale(1.12);

        opacity:
            .9;
    }
}


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

.offer-image {

    position:
        relative;

    width:
        400px;

    height:
        420px;

    z-index:
        2;

    overflow:
        hidden;

    border-radius:
        48% 48% 15% 15%;

    transform:
        rotate(2deg);

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.20);

    animation:
        offerFloat 5s ease-in-out infinite;
}


.offer-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    display:
        block;
}


@keyframes offerFloat {

    0%,100% {

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

    50% {

        transform:
            translateY(-12px)
            rotate(1deg);
    }
}


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

.offer-badge {

    position:
        absolute;

    right:
        20px;

    top:
        65px;

    width:
        105px;

    height:
        105px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    color:
        #0754a6;

    background:
        #ffffff;

    box-shadow:
        0 15px 40px
        rgba(0,0,0,.20);

    z-index:
        5;

    transform:
        rotate(8deg);

    animation:
        badgeFloat 4s ease-in-out infinite;
}


.offer-badge span {

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        1px;
}


.offer-badge strong {

    font-size:
        28px;

    line-height:
        1;

    font-weight:
        900;
}


.offer-badge small {

    font-size:
        9px;

    font-weight:
        800;

    color:
        #08a9d7;
}


@keyframes badgeFloat {

    0%,100% {

        transform:
            translateY(0)
            rotate(8deg);
    }

    50% {

        transform:
            translateY(-10px)
            rotate(3deg);
    }
}


/* =========================================
   DECORATIVE CIRCLE
========================================= */

.offer-circle {

    position:
        absolute;

    width:
        310px;

    height:
        310px;

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

    border-radius:
        50%;

    z-index:
        1;

    animation:
        offerCircleRotate 18s linear infinite;
}


.offer-circle::before {

    content:
        "";

    position:
        absolute;

    width:
        9px;

    height:
        9px;

    right:
        28px;

    top:
        45px;

    border-radius:
        50%;

    background:
        #8deeff;

    box-shadow:
        0 0 15px
        #8deeff;
}


@keyframes offerCircleRotate {

    from {

        transform:
            rotate(0deg);
    }

    to {

        transform:
            rotate(360deg);
    }
}


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

@media (max-width: 900px) {

    .aura-offer-container {

        grid-template-columns:
            1fr 1fr;
    }


    .offer-image {

        width:
            330px;

        height:
            370px;
    }


    .offer-badge {

        right:
            0;

        top:
            60px;
    }


    .offer-circle {

        width:
            280px;

        height:
            280px;
    }

}


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

@media (max-width: 650px) {

    .aura-offer-section {

        padding:
            65px 0 75px;
    }


    .aura-offer-container {

        grid-template-columns:
            1fr;

        text-align:
            center;
    }


    .offer-content {

        padding:
            0 10px;
    }


    .offer-eyebrow {

        justify-content:
            center;

        font-size:
            9px;

        letter-spacing:
            2px;
    }


    .offer-content h2 {

        font-size:
            43px;

        letter-spacing:
            -1px;
    }


    .offer-description {

        margin:
            20px auto;

        font-size:
            13px;
    }


    .offer-discount {

        justify-content:
            center;
    }


    .offer-note {

        margin-bottom:
            20px;
    }


    .offer-visual {

        height:
            360px;

        margin-top:
            25px;
    }


    .offer-image {

        width:
            280px;

        height:
            330px;
    }


    .offer-image-glow {

        width:
            280px;

        height:
            280px;
    }


    .offer-badge {

        right:
            calc(50% - 160px);

        top:
            25px;

        width:
            82px;

        height:
            82px;
    }


    .offer-badge strong {

        font-size:
            22px;
    }


    .offer-circle {

        width:
            250px;

        height:
            250px;
    }

}


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

@media (max-width: 390px) {

    .offer-content h2 {

        font-size:
            38px;
    }


    .offer-discount b {

        font-size:
            48px;
    }


    .offer-image {

        width:
            250px;

        height:
            300px;
    }

}
/* =========================================
   AURA NEWSLETTER
========================================= */

.aura-newsletter-section {

    position: relative;

    padding: 95px 20px;

    overflow: hidden;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #f8fdff 0%,
            #edfaff 50%,
            #ffffff 100%
        );

}


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

.newsletter-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(80px);

    pointer-events: none;

    animation:
        newsletterGlow 8s ease-in-out infinite;
}


.newsletter-glow-left {

    width: 330px;

    height: 330px;

    left: -150px;

    top: -100px;

    background:
        rgba(10,195,239,.12);
}


.newsletter-glow-right {

    width: 300px;

    height: 300px;

    right: -130px;

    bottom: -120px;

    background:
        rgba(7,84,166,.08);

    animation-delay:
        -4s;
}


@keyframes newsletterGlow {

    0%,100% {

        transform:
            translate(0,0)
            scale(1);

    }

    50% {

        transform:
            translate(25px,-20px)
            scale(1.12);

    }

}


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

.aura-newsletter-container {

    width:
        min(760px, 100%);

    margin:
        auto;

    position:
        relative;

    z-index:
        2;
}


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

.newsletter-icon {

    width:
        68px;

    height:
        68px;

    margin:
        0 auto 20px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    border-radius:
        50%;

    background:
        linear-gradient(
            135deg,
            #e5f8fd,
            #ffffff
        );

    border:
        1px solid
        rgba(10,185,229,.25);

    box-shadow:
        0 12px 30px
        rgba(7,84,166,.08);

    transition:
        all .4s ease;
}


.newsletter-icon svg {

    width:
        30px;

    height:
        30px;

    fill:
        none;

    stroke:
        #0875c1;

    stroke-width:
        1.7;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.aura-newsletter-section:hover
.newsletter-icon {

    transform:
        translateY(-5px)
        rotate(-3deg);

    box-shadow:
        0 18px 35px
        rgba(7,84,166,.13);
}


/* =========================================
   EYEBROW
========================================= */

.newsletter-eyebrow {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        12px;

    color:
        #0875c1;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        3px;

    margin-bottom:
        15px;
}


.newsletter-eyebrow span {

    width:
        55px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #13b9e6
        );
}


.newsletter-eyebrow span:last-child {

    background:
        linear-gradient(
            90deg,
            #13b9e6,
            transparent
        );
}


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

.aura-newsletter-container h2 {

    margin:
        0;

    color:
        #071b42;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(40px,5vw,62px);

    line-height:
        1;

    letter-spacing:
        -1.5px;

    font-weight:
        500;
}


.aura-newsletter-container h2 strong {

    display:
        block;

    color:
        transparent;

    background:
        linear-gradient(
            100deg,
            #0754a6,
            #0bc8f1
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    font-weight:
        700;
}


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

.newsletter-title-line {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    margin:
        22px 0 17px;
}


.newsletter-title-line span {

    width:
        90px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #16bde9
        );
}


.newsletter-title-line span:last-child {

    background:
        linear-gradient(
            90deg,
            #16bde9,
            transparent
        );
}


.newsletter-title-line i {

    width:
        10px;

    height:
        10px;

    background:
        linear-gradient(
            135deg,
            #0754a6,
            #0bc8f1
        );

    transform:
        rotate(45deg);
}


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

.newsletter-description {

    max-width:
        590px;

    margin:
        0 auto 30px;

    color:
        #667684;

    font-size:
        14px;

    line-height:
        1.7;
}


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

.newsletter-form {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    width:
        min(620px,100%);

    margin:
        auto;

    padding:
        7px;

    border:
        1px solid
        rgba(8,121,183,.18);

    border-radius:
        60px;

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

    box-shadow:
        0 15px 45px
        rgba(7,84,166,.09);

    transition:
        all .35s ease;
}


.newsletter-form:focus-within {

    border-color:
        rgba(8,121,183,.45);

    box-shadow:
        0 18px 50px
        rgba(7,84,166,.13);
}


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

.newsletter-input-wrap {

    flex:
        1;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    padding:
        0 15px;
}


.newsletter-input-wrap svg {

    flex-shrink:
        0;

    width:
        19px;

    height:
        19px;

    fill:
        none;

    stroke:
        #6c9ab0;

    stroke-width:
        1.6;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.newsletter-input-wrap input {

    width:
        100%;

    height:
        45px;

    border:
        none;

    outline:
        none;

    background:
        transparent;

    color:
        #092b55;

    font-size:
        13px;
}


.newsletter-input-wrap input::placeholder {

    color:
        #9aa9b4;
}


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

.newsletter-btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        15px;

    min-width:
        145px;

    height:
        47px;

    padding:
        0 20px;

    border:
        none;

    border-radius:
        50px;

    cursor:
        pointer;

    color:
        #ffffff;

    background:
        linear-gradient(
            100deg,
            #0754a6,
            #0bc8f1
        );

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        1px;

    box-shadow:
        0 8px 20px
        rgba(7,84,166,.20);

    transition:
        all .35s
        cubic-bezier(.2,.8,.2,1);
}


.newsletter-btn span {

    font-size:
        18px;

    transition:
        transform .3s ease;
}


.newsletter-btn:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 13px 28px
        rgba(7,84,166,.28);
}


.newsletter-btn:hover span {

    transform:
        translateX(5px);
}


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

.newsletter-success {

    margin-top:
        17px;

    color:
        #0796b8;

    font-size:
        12px;

    font-weight:
        700;

    opacity:
        0;

    transform:
        translateY(5px);

    visibility:
        hidden;

    transition:
        all .35s ease;
}


.newsletter-success.show {

    opacity:
        1;

    transform:
        translateY(0);

    visibility:
        visible;
}


/* =========================================
   NOTE
========================================= */

.newsletter-note {

    display:
        block;

    margin-top:
        16px;

    color:
        #9aa8b2;

    font-size:
        10px;

    letter-spacing:
        .3px;
}


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

@media (max-width: 600px) {

    .aura-newsletter-section {

        padding:
            70px 15px;
    }


    .newsletter-icon {

        width:
            58px;

        height:
            58px;
    }


    .newsletter-icon svg {

        width:
            26px;

        height:
            26px;
    }


    .newsletter-eyebrow {

        font-size:
            9px;

        letter-spacing:
            2px;
    }


    .newsletter-eyebrow span {

        width:
            30px;
    }


    .aura-newsletter-container h2 {

        font-size:
            38px;
    }


    .newsletter-title-line span {

        width:
            55px;
    }


    .newsletter-description {

        font-size:
            12px;

        padding:
            0 8px;
    }


    .newsletter-form {

        flex-direction:
            column;

        gap:
            7px;

        padding:
            7px;

        border-radius:
            20px;
    }


    .newsletter-input-wrap {

        width:
            100%;

        padding:
            0 13px;
    }


    .newsletter-input-wrap input {

        height:
            44px;
    }


    .newsletter-btn {

        width:
            100%;

        height:
            46px;
    }

}
/* =========================================
   AURA PREMIUM FOOTER
========================================= */

.aura-footer {

    position: relative;

    overflow: hidden;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #041c3b 0%,
            #063d78 48%,
            #0754a6 100%
        );

    padding-top: 75px;
    

}


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

.footer-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(80px);

    pointer-events: none;

    opacity: .45;

    animation:
        footerGlow 9s ease-in-out infinite;
}


.footer-glow-one {

    width: 350px;

    height: 350px;

    top: -180px;

    left: -130px;

    background:
        rgba(0,205,255,.20);
}


.footer-glow-two {

    width: 320px;

    height: 320px;

    right: -150px;

    bottom: -150px;

    background:
        rgba(0,165,235,.18);

    animation-delay:
        -4s;
}


@keyframes footerGlow {

    0%,100% {

        transform:
            translate(0,0)
            scale(1);

    }

    50% {

        transform:
            translate(25px,-20px)
            scale(1.12);

    }

}


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

.aura-footer-container {

    position:
        relative;

    z-index:
        2;

    width:
        min(1180px,92%);

    margin:
        auto;

    display:
        grid;

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

    gap:
        60px;

}


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

.footer-brand {

    padding-right:
        25px;
}


.footer-logo {

    display:
        inline-block;

    color:
        #ffffff;

    text-decoration:
        none;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        46px;

    line-height:
        1;

    letter-spacing:
        3px;

    font-weight:
        700;

    transition:
        all .3s ease;
}


.footer-logo span {

    color:
        #0bc8f1;
}


.footer-logo:hover {

    transform:
        translateY(-3px);

}


.footer-brand p {

    max-width:
        320px;

    margin:
        22px 0 25px;

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

    font-size:
        13px;

    line-height:
        1.8;

}


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

.footer-social {

    display:
        flex;

    gap:
        10px;

}


.footer-social a {

    width:
        36px;

    height:
        36px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        50%;

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

    text-decoration:
        none;

    font-size:
        14px;

    transition:
        all .35s ease;

}


.footer-social a:hover {

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #0754a6,
            #0bc8f1
        );

    border-color:
        transparent;

    transform:
        translateY(-5px);

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

}


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

.footer-column h3 {

    margin:
        5px 0 10px;

    color:
        #ffffff;

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        2px;

}


.footer-heading-line {

    width:
        35px;

    height:
        2px;

    margin-bottom:
        18px;

    border-radius:
        10px;

    background:
        linear-gradient(
            90deg,
            #0bc8f1,
            transparent
        );

}


.footer-column ul {

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


.footer-column li {

    margin-bottom:
        12px;

}


.footer-column a {

    position:
        relative;

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

    text-decoration:
        none;

    font-size:
        12px;

    transition:
        all .3s ease;

}


.footer-column a::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        -4px;

    width:
        0;

    height:
        1px;

    background:
        #0bc8f1;

    transition:
        width .3s ease;

}


.footer-column a:hover {

    color:
        #ffffff;

    padding-left:
        5px;

}


.footer-column a:hover::before {

    width:
        calc(100% - 5px);

}


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

.footer-divider {

    position:
        relative;

    z-index:
        2;

    width:
        min(1180px,92%);

    height:
        1px;

    margin:
        60px auto 0;

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

}


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

.footer-bottom {

    position:
        relative;

    z-index:
        2;

    width:
        min(1180px,92%);

    min-height:
        75px;

    margin:
        auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

}


.footer-bottom p {

    margin:
        0;

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

    font-size:
        10px;

}


.footer-bottom p strong {

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

}


/* =========================================
   PAYMENT
========================================= */

.footer-payment {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

}


.footer-payment > span {

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

    font-size:
        8px;

    letter-spacing:
        1px;

}


.payment-icons {

    display:
        flex;

    gap:
        6px;

}


.payment-icons b {

    min-width:
        38px;

    height:
        24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 6px;

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

    border-radius:
        5px;

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

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

    font-size:
        7px;

    transition:
        all .3s ease;

}


.payment-icons b:hover {

    color:
        #ffffff;

    border-color:
        rgba(11,200,241,.6);

    transform:
        translateY(-2px);

}


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

.back-to-top {

    position:
        fixed;

    right:
        25px;

    bottom:
        25px;

    z-index:
        100;

    width:
        45px;

    height:
        45px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        50%;

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #0754a6,
            #0bc8f1
        );

    font-size:
        20px;

    cursor:
        pointer;

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(15px);

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

    transition:
        all .35s ease;

}


.back-to-top.show {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0);

}


.back-to-top:hover {

    transform:
        translateY(-5px);

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

}


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

@media (max-width: 900px) {

    .aura-footer-container {

        grid-template-columns:
            1.5fr 1fr 1fr;

        gap:
            40px;

    }


    .footer-brand {

        grid-column:
            1 / -1;

    }

}


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

@media (max-width: 600px) {

    .aura-footer {

        padding-top:
            60px;

    }


    .aura-footer-container {

        width:
            88%;

        grid-template-columns:
            1fr 1fr;

        gap:
            40px 25px;

    }


    .footer-brand {

        grid-column:
            1 / -1;

        padding-right:
            0;

    }


    .footer-logo {

        font-size:
            40px;

    }


    .footer-brand p {

        font-size:
            12px;

    }


    .footer-column h3 {

        font-size:
            10px;

    }


    .footer-column a {

        font-size:
            11px;

    }


    .footer-divider {

        margin-top:
            45px;

    }


    .footer-bottom {

        width:
            88%;

        min-height:
            110px;

        flex-direction:
            column;

        justify-content:
            center;

        text-align:
            center;

        gap:
            12px;

    }


    .footer-payment {

        flex-direction:
            column;

        gap:
            7px;

    }


    .back-to-top {

        width:
            40px;

        height:
            40px;

        right:
            15px;

        bottom:
            15px;

    }

}
/* =========================
   SEARCH OVERLAY
========================= */

.search-overlay{
    position:fixed;
    inset:0;
    z-index:5000;

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

    padding-top:120px;

    background:rgba(3,25,50,.65);
    backdrop-filter:blur(10px);

    opacity:0;
    visibility:hidden;

    transition:.3s ease;
}

.search-overlay.active{
    opacity:1;
    visibility:visible;
}


/* SEARCH BOX */

.search-box{
    position:relative;

    width:min(700px,92%);

    padding:40px;

    border-radius:24px;

    background:#fff;

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

    transform:translateY(-25px) scale(.97);

    transition:.35s ease;
}

.search-overlay.active .search-box{
    transform:translateY(0) scale(1);
}


/* CLOSE */

.close-search{
    position:absolute;

    top:15px;
    right:15px;

    width:35px;
    height:35px;

    border:0;
    border-radius:50%;

    color:#0754a6;
    background:#eef8fb;

    font-size:22px;

    cursor:pointer;

    transition:.3s;
}

.close-search:hover{
    color:#fff;
    background:#0754a6;

    transform:rotate(90deg);
}


/* TITLE */

.search-title small{
    color:#0aa8d2;

    font-size:9px;
    font-weight:800;

    letter-spacing:2px;
}

.search-title h2{
    margin-top:8px;

    color:#092b55;

    font-size:30px;
    font-weight:800;
}

.search-title h2 span{
    color:#0754a6;
}


/* FORM */

.search-form{
    display:flex;

    gap:10px;

    margin-top:25px;
}

.search-input-wrap{
    flex:1;

    display:flex;
    align-items:center;

    gap:10px;

    padding:0 16px;

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

    background:#f8fcfd;

    transition:.3s;
}

.search-input-wrap:focus-within{
    border-color:#0bc8f1;

    box-shadow:
        0 0 0 4px rgba(11,200,241,.08);
}

.search-input-wrap span{
    font-size:15px;
}

.search-input-wrap input{
    width:100%;

    height:48px;

    border:0;
    outline:0;

    color:#173d65;

    background:transparent;

    font-family:"Inter",sans-serif;
    font-size:11px;
}


.search-form > button{
    padding:0 25px;

    border:0;
    border-radius:12px;

    color:#fff;

    background:
        linear-gradient(
            100deg,
            #0754a6,
            #0bc8f1
        );

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

    font-size:9px;
    font-weight:800;

    cursor:pointer;

    transition:.3s;
}

.search-form > button:hover{
    transform:translateY(-3px);

    box-shadow:
        0 10px 25px rgba(7,84,166,.2);
}


/* POPULAR */

.popular-searches{
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:8px;

    margin-top:20px;
}

.popular-searches > span{
    color:#7d909d;

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

.popular-btn{
    padding:7px 12px;

    border:1px solid #dcebef;
    border-radius:20px;

    color:#0754a6;
    background:#fff;

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

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

    cursor:pointer;

    transition:.3s;
}

.popular-btn:hover{
    color:#fff;

    border-color:#0754a6;

    background:#0754a6;

    transform:translateY(-2px);
}


/* MOBILE */

@media(max-width:600px){

    .search-overlay{
        padding-top:80px;
    }

    .search-box{
        padding:30px 20px;
    }

    .search-title h2{
        font-size:24px;
    }

    .search-form{
        flex-direction:column;
    }

    .search-form > button{
        height:45px;
    }

}
/* ================= OUR ACHIEVERS ================= */

.achievers-section{
    padding:90px 0;
    background:#faf9f7;
    overflow:hidden;
}

.achievers-heading{
    text-align:center;
    max-width:700px;
    margin:0 auto 50px;
    padding:0 20px;
}

.achievers-heading span{
    color:#b88a44;
    font-size:12px;
    font-weight:700;
    letter-spacing:3px;
}

.achievers-heading h2{
    font-family:"Playfair Display",serif;
    font-size:42px;
    margin:10px 0;
    color:#222;
}

.achievers-heading p{
    color:#777;
    font-size:15px;
}


/* SCROLL AREA */

.achievers-wrapper{
    width:100%;
    overflow:hidden;
}


/* MOVING TRACK */

.achievers-track{
    display:flex;
    gap:25px;
    width:max-content;

    animation:achieverScroll 28s linear infinite;
}


/* CARD */

.achiever-card{
    width:280px;
    flex-shrink:0;
    background:white;
    border:1px solid #eee;
    transition:.35s;
}

.achiever-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 40px rgba(0,0,0,.10);
}


/* IMAGE */

.achiever-image{
    width:100%;
    height:320px;
    overflow:hidden;
}

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

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


/* CONTENT */

.achiever-info{
    padding:20px;
    text-align:center;
}

.achievement-year{
    display:inline-block;
    color: #075eb0;
    font-size:11px;
    font-weight:700;
    letter-spacing:2px;
    margin-bottom:7px;
}

.achiever-info h3{
    font-family:"Playfair Display",serif;
    font-size:22px;
    margin-bottom:6px;
}

.achiever-info p{
    color:#777;
    font-size:13px;
}


/* AUTO SCROLL */

@keyframes achieverScroll{

    0%{
        transform:translateX(0);
    }

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

}


/* PAUSE WHEN MOUSE IS OVER */

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


/* MOBILE */

@media(max-width:600px){

    .achievers-section{
        padding:65px 0;
    }

    .achievers-heading h2{
        font-size:34px;
    }

    .achiever-card{
        width:245px;
    }

    .achiever-image{
        height:280px;
    }

    .achievers-track{
        gap:18px;
        animation-duration:24s;
    }

}
/* WELCOME AURA SECTION */

.welcome-aura{
    padding:55px 20px;
    background:#eef5ff;
    text-align:center;
}

.welcome-aura-content span{
    display:block;
    font-size:13px;
    font-weight:600;
    letter-spacing:4px;
    color:#3976c8;
    margin-bottom:8px;
}

.welcome-aura-content h2{
    margin:0;
    font-family:"Playfair Display",serif;
    font-size:clamp(32px,5vw,52px);
    color:#1554a0;
    letter-spacing:1px;
}
/* =====================================================
   RESPONSIVE NAVBAR - FIX
===================================================== */

.navbar {
    position: sticky;
    top: 0;
    z-index: 9999;
    width: 100%;
}

.nav-container {
    width: 100%;
    max-width: 1400px;
    margin: auto;
    padding: 15px 30px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Desktop */
.nav-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mobile-menu {
    display: none;
}


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

@media (max-width: 1000px) {

    .nav-container {
        padding: 14px 20px;
    }

    .nav-menu {
        gap: 18px;
    }

    .nav-menu a {
        font-size: 13px;
    }

    .logo {
        font-size: 22px;
    }

    .icon-btn {
        width: 38px;
        height: 38px;
    }
}


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

@media (max-width: 768px) {

    .nav-container {
        padding: 13px 16px;
    }

    /* Logo */
    .logo {
        font-size: 20px;
        white-space: nowrap;
    }


    /* Hide desktop menu */
    .nav-menu {
        display: none;

        position: absolute;
        top: 100%;
        left: 0;

        width: 100%;

        background: #ffffff;

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

        gap: 0;

        padding: 10px 0 20px;

        border-top: 1px solid #eeeeee;
        border-bottom: 1px solid #eeeeee;

        box-shadow: 0 10px 25px rgba(0,0,0,.08);
    }


    /* Show menu when JS adds class */
    .nav-menu.mobile-active {
        display: flex;
    }


    .nav-menu li {
        width: 100%;
        text-align: center;
    }


    .nav-menu a {
        display: block;
        width: 100%;

        padding: 13px 20px;

        font-size: 15px;
    }


    .nav-menu a::after {
        display: none;
    }


    /* Right icons */
    .nav-actions {
        margin-left: auto;
        gap: 7px;
    }


    .icon-btn {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }


    /* Hamburger */
    .mobile-menu {
        display: flex;

        width: 38px;
        height: 38px;

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

        border: none;
        background: transparent;

        font-size: 21px;
        cursor: pointer;
    }

}


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

@media (max-width: 480px) {

    .nav-container {
        padding: 11px 12px;
    }

    .logo {
        font-size: 17px;
        letter-spacing: 1px;
    }

    .nav-actions {
        gap: 4px;
    }

    .icon-btn {
        width: 33px;
        height: 33px;
        font-size: 25px;
    }

    .mobile-menu {
        width: 34px;
        height: 34px;
        font-size: 19px;
    }

}
/* =========================
   COMPANY INFORMATION
========================= */

.footer-company-info {
    margin-top: 18px;
}

.footer-company-info p {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0;
    font-size: 14px;
    line-height: 1.5;
}

.footer-company-info i {
    width: 18px;
    font-size: 14px;
}

.footer-company-info a {
    color: inherit;
    text-decoration: none;
}

.footer-company-info a:hover {
    text-decoration: underline;
}
@media (max-width: 768px) {

    .nav-menu .dropdown {
        position: relative;
    }

    .nav-menu .dropdown-menu {
        display: none !important;
        position: static !important;
        width: 100% !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        pointer-events: auto !important;
    }

    .nav-menu .dropdown-menu.collection-open {
        display: block !important;
    }

    .nav-menu .dropdown:hover .dropdown-menu {
        display: none !important;
    }

    .nav-menu .dropdown:hover .dropdown-menu.collection-open {
        display: block !important;
    }
}
/* ===== MOBILE MENU VERTICAL SCROLL ===== */
/* ===== MOBILE MENU VERTICAL SCROLL ===== */
/* ===== MOBILE MENU VERTICAL SCROLL ===== */
/* ================================
   MOBILE MENU - VERTICAL SCROLL
================================ */

@media (max-width: 768px) {

    .nav-menu.mobile-active {
        position: fixed !important;
        top: 70px !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;
        height: calc(100vh - 70px) !important;
        max-height: calc(100vh - 70px) !important;

        display: block !important;

        overflow-y: scroll !important;
        overflow-x: hidden !important;

        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;

        padding-bottom: 40px !important;

        z-index: 9998 !important;
    }

    /* Menu items */
    .nav-menu.mobile-active > .nav-link,
    .nav-menu.mobile-active > .dropdown {
        display: block !important;
        width: 100% !important;
    }

    .nav-menu.mobile-active .nav-link {
        flex-shrink: 0 !important;
    }

    /* Collection dropdown */
    .nav-menu.mobile-active .dropdown-menu {
        position: static !important;
        width: 100% !important;
    }

}