/*==================================================
                GOOGLE FONT
==================================================*/

/*==================================================
                CSS VARIABLES
==================================================*/

:root{

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

--md-primary: #6366f1;
--md-primary-hover: #4f46e5;
--md-primary-light: #eef2ff;

--md-secondary: #111827;

--md-white: #ffffff;
--md-black: #000000;

--md-bg: #f5f7fb;
--md-surface: rgba(255,255,255,.65);

--md-text: #1f2937;
--md-text-light: #64748b;

--md-border: rgba(255,255,255,.75);

--md-btn-primary-shadow: 0 20px 35px rgba(79,70,229,.28);


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

--md-btn-primary-bg: var(--md-primary);
--md-btn-primary-hover: var(--md-primary-hover);
--md-btn-primary-text: #ffffff;

--md-btn-glass-bg: rgba(255,255,255,.70);
--md-btn-glass-text: var(--md-text);
--md-btn-glass-border: rgba(255,255,255,.80);



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

--md-card-bg: rgba(255,255,255,.72);
--md-card-border: rgba(255,255,255,.80);




/*==================================================
                SHADOWS
==================================================*/

--md-shadow-sm: 0 8px 20px rgba(15,23,42,.05);

--md-shadow-md: 0 20px 45px rgba(15,23,42,.08);

--md-shadow-lg: 0 30px 80px rgba(15,23,42,.12);


    /*==================================================
                    TYPOGRAPHY
    ==================================================*/

    --md-font:'Sora',sans-serif;

    --md-fs-xs:12px;
    --md-fs-sm:14px;
    --md-fs-base:16px;
    --md-fs-lg:18px;
    --md-fs-xl:20px;
    --md-fs-2xl:28px;
    --md-fs-3xl:36px;
    --md-fs-4xl:48px;



    /*==================================================
                    FONT WEIGHT
    ==================================================*/

    --md-fw-regular:400;
    --md-fw-medium:500;
    --md-fw-semibold:600;
    --md-fw-bold:700;
    --md-fw-extrabold:800;



    /*==================================================
                    SPACING
    ==================================================*/

    --md-space-1:8px;
    --md-space-2:16px;
    --md-space-3:24px;
    --md-space-4:32px;
    --md-space-5:48px;
    --md-space-6:64px;
    --md-space-7:80px;
    --md-space-8:100px;



    /*==================================================
                    BORDER RADIUS
    ==================================================*/

    --md-radius-sm:8px;
    --md-radius-md:14px;
    --md-radius-lg:20px;
    --md-radius-xl:28px;
    --md-radius-pill:999px;



    /*==================================================
                    SHADOW
    ==================================================*/

    --md-shadow-sm:0 2px 8px rgba(15,23,42,.06);

    --md-shadow-md:0 8px 30px rgba(15,23,42,.08);

    --md-shadow-lg:0 20px 60px rgba(15,23,42,.12);



    /*==================================================
                    TRANSITION
    ==================================================*/

    --md-transition:.35s ease;

}




/*==================================================
                RESET
==================================================*/
*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


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

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

.md-hero{
    position:relative;
    padding:80px 0 120px;
    overflow:hidden;
    background:
    radial-gradient(circle at top left,#ffffff 0%,#f7f8fc 45%,#f3f5fb 100%);
}

.md-hero::before{
    content:"";
    position:absolute;
    width:550px;
    height:550px;
    border-radius:50%;
    background:rgba(255,255,255,.75);
    filter:blur(100px);
    top:-180px;
    left:-180px;
    pointer-events:none;
}

.md-hero::after{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    border-radius:50%;
    background:rgba(255,255,255,.55);
    filter:blur(100px);
    right:-120px;
    bottom:-120px;
    pointer-events:none;
}

.md-container{
    width:min(1320px,calc(100% - 40px));
    margin:auto;
    position:relative;
    z-index:2;
}

.md-hero-wrapper{

    position:relative;

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

    backdrop-filter:blur(22px);

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

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

    border-radius:34px;

    padding:70px;

    overflow:hidden;

    box-shadow:
    0 20px 80px rgba(15,23,42,.08);

}

.md-hero-grid{

    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:70px;

    align-items:center;

}

/*==============================
Hero Content
==============================*/

.md-hero-content{

    position:relative;

    z-index:5;

}

.md-hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 20px;

    border-radius:999px;

    background: var(--md-btn-glass-bg);
    border:1px solid var(--md-btn-glass-border);
    color:var(--md-primary);
    box-shadow:var(--md-shadow-sm);

    font-weight:700;

    font-size:14px;

    margin-bottom:28px;


}

.md-hero-title{

    font-size:clamp(3rem,6vw,5rem);

    line-height:1.05;

    color:var(--md-text);

    font-weight:800;

    letter-spacing:-2px;

    margin-bottom:28px;

}

.md-hero-title span{

    display:block;

    color:var(--md-primary);

}

.md-hero-description{

    font-size:18px;

    line-height:1.9;

    color:var(--md-text-light);

    max-width:580px;

    margin-bottom:42px;

}

/*==============================
Buttons
==============================*/

.md-hero-actions{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:45px;

}

.md-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    height:58px;

    padding:0 34px;

    border-radius:999px;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.md-btn-primary{
    background: var(--md-btn-primary-bg);
    color: var(--md-btn-primary-text);
    box-shadow: var(--md-btn-primary-shadow);
    border: none;
}

.md-btn-primary:hover{
    background: var(--md-btn-primary-hover);
    color: var(--md-btn-primary-text);
    transform: translateY(-4px);
}

.md-btn-glass{
    background:#f3f4f6;
    color:var(--md-text);
    border:1px solid #e5e7eb;
    box-shadow:none;
}

.md-btn-glass:hover{
    background:#e5e7eb;
    color:var(--md-text);
    border-color:#d1d5db;
    transform:translateY(-4px);
}

/*==============================
Trust
==============================*/

.md-hero-trust{

    display:flex;

    align-items:center;

    gap:22px;

    flex-wrap:wrap;

}

.md-rating{

    display:flex;

    align-items:center;

    gap:15px;

}

.md-stars{

    display:flex;

    gap:4px;

    color:#fbbf24;

}

.md-rating strong{

    color:#111827;

}

.md-hero-trust span{

    color:#64748b;

}

/*==============================
Hero Media
==============================*/

.md-hero-media{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:650px;

}

.md-hero-circle{

    position:absolute;

    width:560px;

    height:560px;

    border-radius:50%;

    background:linear-gradient(
    135deg,
    rgba(255,255,255,.95),
    rgba(240,242,250,.8)
    );

    box-shadow:
    inset 0 0 80px rgba(255,255,255,.8);

}

.md-hero-image{

    position:relative;

    width:min(100%,620px);

    z-index:5;

    filter:
    drop-shadow(
    0 35px 60px rgba(15,23,42,.18));

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

}


/*==============================
Glass Cards
==============================*/

.md-glass-card{

    position:absolute;

    display:flex;

    align-items:center;

    gap:15px;

    min-width:220px;

    padding:18px 22px;

    background:var(--md-card-bg);

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

box-shadow:var(--md-shadow-md);

    backdrop-filter:blur(20px);

    border-radius:22px;
 
    z-index:10;

}

.md-card-icon{

    width:52px;

    height:52px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#eef2ff;

    color:#4f46e5;

    font-size:20px;

}

.md-glass-card strong{

    display:block;

    color:#111827;

    font-size:16px;

}

.md-glass-card span{

    color:#64748b;

    font-size:14px;

}

.md-card-rating{

    top:50px;

    right:-10px;

}

.md-card-warranty{

    bottom:120px;

    left:-40px;

}

.md-card-shipping{

    bottom:15px;

    right:40px;

}


/*==============================
Animation
==============================*/

@keyframes heroFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0);

}

}

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

/*==============================
Large Laptop
==============================*/

@media (max-width:1400px){

.md-hero-wrapper{

    padding:60px;

}

.md-hero-grid{

    gap:50px;

}

.md-hero-image{

    width:min(100%,560px);

}

.md-card-rating{

    right:0;

}

.md-card-warranty{

    left:0;

}

}


/*==============================
Laptop
==============================*/

@media (max-width:1200px){

.md-hero{

    padding:70px 0 100px;

}

.md-hero-wrapper{

    padding:50px;

}

.md-hero-grid{

    grid-template-columns:1fr;

    gap:70px;

}

.md-hero-content{

    text-align:center;

}

.md-hero-description{

    margin-inline:auto;

}

.md-hero-actions{

    justify-content:center;

}

.md-hero-trust{

    justify-content:center;

}

.md-hero-media{

    min-height:520px;

}

.md-hero-image{

    width:min(100%,520px);

}

.md-card-rating{

    top:0;

    right:40px;

}

.md-card-warranty{

    bottom:100px;

    left:30px;

}

.md-card-shipping{

    bottom:10px;

    right:20px;

}

}

/*==============================
Tablet
==============================*/

@media (max-width:992px){

.md-hero{

    padding:60px 0 80px;

}

.md-hero-wrapper{

    padding:40px;

    border-radius:28px;

}

.md-hero-title{

    font-size:clamp(2.6rem,8vw,4rem);

}

.md-hero-description{

    font-size:17px;

}

.md-hero-media{

    min-height:460px;

}

.md-hero-circle{

    width:430px;

    height:430px;

}

.md-hero-image{

    width:min(100%,450px);

}

.md-glass-card{

    min-width:190px;

    padding:16px 18px;

}

.md-card-icon{

    width:46px;

    height:46px;

}

}

/*==============================
Large Mobile
==============================*/

@media (max-width:768px){

.md-container{

    width:min(100%,calc(100% - 30px));

}

.md-hero{

    padding:40px 0 70px;

}

.md-hero-wrapper{

    padding:35px 25px;

    border-radius:24px;

}

.md-hero-badge{

    font-size:13px;

    padding:10px 18px;

}

.md-hero-title{

    line-height:1.1;

}

.md-hero-description{

    font-size:16px;

}

.md-hero-actions{

    flex-direction:column;

    width:100%;

}

.md-btn{

    width:100%;

}

.md-hero-media{

    min-height:420px;

}

.md-hero-circle{

    width:360px;

    height:360px;

}

.md-hero-image{

    width:340px;

}

.md-glass-card{

    min-width:170px;

    padding:14px 16px;

    border-radius:18px;

}

.md-card-rating{

    top:0;

    right:0;

}

.md-card-warranty{

    left:0;

    bottom:90px;

}

.md-card-shipping{

    right:0;

    bottom:0;

}

}



/*==============================
Mobile
==============================*/

@media (max-width:576px){

.md-hero{

    padding:30px 0 60px;

}

.md-hero-wrapper{

    padding:28px 20px;

}

.md-hero-title{

    font-size:2.5rem;

    letter-spacing:-1px;

}

.md-hero-description{

    font-size:15px;

    line-height:1.8;

}

.md-hero-trust{

    flex-direction:column;

    align-items:center;

    gap:15px;

}

.md-rating{

    flex-direction:column;

    gap:8px;

}

.md-hero-media{

    min-height:360px;

}

.md-hero-circle{

    width:280px;

    height:280px;

}

.md-hero-image{

    width:280px;

}

.md-glass-card{

    position:relative;

    width:100%;

    margin-top:16px;

}

.md-card-rating,

.md-card-warranty,

.md-card-shipping{

    top:auto;

    right:auto;

    left:auto;

    bottom:auto;

}

}



/*==============================
Small Mobile
==============================*/

@media (max-width:400px){

.md-hero-title{

    font-size:2.15rem;

}

.md-hero-description{

    font-size:14px;

}

.md-btn{

    height:54px;

    font-size:15px;

    padding:0 24px;

}

.md-hero-image{

    width:240px;

}

.md-hero-circle{

    width:240px;

    height:240px;

}

.md-glass-card{

    padding:12px 14px;

}

.md-card-icon{
    width:72px;
    height:72px;
    font-size:30px;
}

}




/*==================================================
                FEATURED PRODUCTS
==================================================*/

/*==================================================
                FEATURED PRODUCTS
==================================================*/

.md-products{
    padding:100px 0;
    background:var(--md-bg);
}

.md-products-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:40px;
    margin-bottom:60px;
}

.md-section-badge{
    display:inline-flex;
    align-items:center;
    padding:10px 18px;
    background:rgba(255,255,255,.75);
    border:1px solid rgba(255,255,255,.8);
    border-radius:999px;
    color:var(--md-primary);
    font-weight:700;
    font-size:14px;
    margin-bottom:22px;
    box-shadow:var(--md-shadow-sm);
}

.md-section-title{
    font-size:clamp(2rem,4vw,3.2rem);
    line-height:1.15;
    color:var(--md-text);
    margin-bottom:18px;
    font-weight:800;
}

.md-section-title span{
    color:var(--md-primary);
}

.md-section-description{
    max-width:620px;
    color:var(--md-text-light);
    line-height:1.8;
    font-size:16px;
}

.md-view-all{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:var(--md-text);
    font-weight:700;
    transition:var(--md-transition);
}

.md-view-all:hover{
    color:var(--md-primary);
    transform:translateX(6px);
}

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

.md-products-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;
}

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

.md-product-card{
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    border:1px solid #eef2f7;
    transition:.35s ease;
    box-shadow:0 10px 30px rgba(15,23,42,.05);
}

.md-product-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 60px rgba(15,23,42,.12);
}

.md-product-image{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fafbff;
    padding:35px;
    height:260px;
    overflow:hidden;
    text-decoration:none;
}

.md-product-image img{
    max-width:100%;
    max-height:190px;
    transition:.45s;
}

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

/*=========================
BADGES
=========================*/

.md-stock-badge{
    position:absolute;
    top:18px;
    left:18px;
    background:#ef4444;
    color:#fff;
    font-size:12px;
    padding:6px 12px;
    border-radius:999px;
    font-weight:700;
}

.md-rating{
    position:absolute;
    top:18px;
    right:18px;
    display:flex;
    align-items:center;
    gap:6px;
    background:#fff;
    padding:8px 14px;
    border-radius:999px;
    font-size:14px;
    font-weight:700;
    color:#111827;
    box-shadow:0 10px 20px rgba(15,23,42,.08);
}

.md-rating i{
    color:#fbbf24;
}

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

.md-product-content{
    padding:28px 28px 18px;
}

.md-category{
    display:inline-block;
    color:var(--md-primary);
    font-size:13px;
    font-weight:700;
    margin-bottom:10px;
    text-transform:uppercase;
    letter-spacing:.6px;
}

.md-product-content h3{
    font-size:20px;
    color:var(--md-text);
    margin-bottom:14px;
    line-height:1.4;
}

.md-product-content p{
    color:var(--md-text-light);
    font-size:15px;
    line-height:1.7;
}

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

.md-product-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 28px 28px;
}

.md-price{
    font-size:26px;
    font-weight:800;
    color:var(--md-text);
}

.md-cart-btn{
    width:54px;
    height:54px;
    border-radius:50%;
    background:var(--md-primary);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    transition:.35s;
}

.md-cart-btn:hover{
    background:var(--md-primary-hover);
    transform:rotate(45deg);
}

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

@media(max-width:1200px){

.md-products-grid{
    grid-template-columns:repeat(3,1fr);
}

}

@media(max-width:992px){

.md-products-header{
    flex-direction:column;
    align-items:flex-start;
}

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

}

@media(max-width:768px){

.md-products{
    padding:80px 0;
}

.md-product-image{
    height:220px;
}

.md-product-content{
    padding:22px;
}

.md-product-bottom{
    padding:0 22px 22px;
}

}

@media(max-width:576px){

.md-products-grid{
    grid-template-columns:1fr;
}

.md-view-all{
    width:100%;
    justify-content:center;
}

.md-section-title{
    font-size:2rem;
}

.md-product-image{
    height:240px;
}

.md-price{
    font-size:22px;
}

}


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

.md-about{
    position:relative;
    padding:110px 0;
    overflow:hidden;
    background:
    linear-gradient(
    180deg,
    #f7f8fc 0%,
    #ffffff 100%);
}

.md-about::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:rgba(255,255,255,.75);
    filter:blur(120px);
    top:-180px;
    left:-180px;
}

.md-about::after{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    border-radius:50%;
    background:rgba(255,255,255,.7);
    filter:blur(120px);
    right:-120px;
    bottom:-120px;
}

.md-about-wrapper{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}


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

.md-about-left .md-section-title{

    margin:25px 0;

}

.md-about-text{

    color:var(--md-text-light);

    font-size:17px;

    line-height:1.9;

    margin-bottom:22px;

}

.md-about-text strong{

    color:var(--md-primary);

}

.md-about-actions{

    display:flex;

    gap:18px;

    margin-top:40px;

}







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

.md-about-right{

    display:grid;

    grid-template-columns:repeat(2,1fr);
    grid-template-columns:repeat(2, minmax(300px, 1fr));
    gap:24px;

}







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

.md-about-card{

    position:relative;

    padding:34px;

    border-radius:28px;

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

    backdrop-filter:blur(20px);

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

    border:1px solid rgba(226,232,240,.9);

    box-shadow:0 18px 40px rgba(15,23,42,.08);

    transition:.35s ease;

}

.md-about-card:hover{

    transform:translateY(-10px);

    border-color:rgba(99,102,241,.25);

    box-shadow:0 30px 60px rgba(15,23,42,.12);

}


.md-about-card .md-card-icon{

    width:68px;
    height:68px;

    border-radius:18px;

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

    background:#eef2ff;

    color:var(--md-primary);

    font-size:28px;

    margin-bottom:28px;

}



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

.md-stat{

    display:block;

    font-size:42px;

    font-weight:800;

    color:var(--md-primary);

    margin-bottom:16px;

}


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

.md-about-card h3{

    font-size:22px;

    color:var(--md-text);

    margin-bottom:15px;

}

.md-about-card p{

    color:var(--md-text-light);

    line-height:1.8;

    font-size:15px;

}

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

@media(max-width:1200px){

.md-about-wrapper{

    gap:50px;

}

}

@media(max-width:992px){

.md-about-wrapper{

    grid-template-columns:1fr;

}

.md-about-right{

    margin-top:20px;

}

}

@media(max-width:768px){

.md-about{

    padding:80px 0;

}

.md-about-actions{

    flex-direction:column;

}

.md-about-actions .md-btn{

    width:100%;

}

.md-about-right{

    grid-template-columns:1fr;

}

.md-about-card{

    padding:28px;

}

}

@media(max-width:576px){

.md-about{

    padding:70px 0;

}

.md-about-card{

    padding:24px;

    border-radius:22px;

}

.md-about-card h3{

    font-size:20px;

}

.md-stat{

    font-size:34px;

}

.md-about-text{

    font-size:15px;

}

}


/*==================================================
                WHY CHOOSE
==================================================*/

.md-why{
    position:relative;
    padding:110px 0;
    overflow:hidden;
    background:linear-gradient(
        180deg,
        #edf4ff 0%,
        #f6f9ff 55%,
        #ffffff 100%
    );
}

.md-why::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:rgba(99,102,241,.12);
    filter:blur(120px);
    top:-220px;
    left:-180px;
}

.md-why::after{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:rgba(255,255,255,.05);
    filter:blur(120px);
    right:-150px;
    bottom:-180px;
}

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

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

.md-why-header{
    text-align:center;
    max-width:760px;
    margin:0 auto 70px;
}

.md-why .md-section-badge{
    background:var(--md-primary-light);
    border:1px solid rgba(99,102,241,.15);
    color:var(--md-primary);
}

.md-why-title{
    margin:25px 0;
    font-size:clamp(2.4rem,5vw,3.8rem);
    line-height:1.15;
    color:var(--md-text);
    font-weight:800;
}

.md-why-title span{
    display:block;
    color:var(--md-primary);
}

.md-why-description{
    color:var(--md-text-light);
    font-size:17px;
    line-height:1.9;
}

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

.md-why-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}

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

.md-why-card{
    position:relative;
    padding:35px;
    border-radius:28px;
    background:#ffffff;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border:1px solid #e5e7eb;
    box-shadow:0 15px 40px rgba(15,23,42,.06);
    transition:.35s ease;
    overflow:hidden;
}

.md-why-card:hover{
    transform:translateY(-10px);
    border-color:rgba(99,102,241,.45);
    box-shadow:0 25px 60px rgba(0,0,0,.35);
}

.md-why-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        135deg,
        rgba(255,255,255,.06),
        transparent 60%
    );
    opacity:0;
    transition:.35s;
}

.md-why-card:hover::before{
    opacity:1;
}

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

.md-why-icon{
    width:72px;
    height:72px;
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:28px;
    background:rgba(99,102,241,.15);
    color:var(--md-primary);
    font-size:30px;
    transition:.35s;
}

.md-why-card:hover .md-why-icon{
    transform:rotate(-8deg) scale(1.08);
    background:var(--md-primary);
    color:#ffffff;
}

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

.md-why-card h3{
    color:var(--md-text);
    font-size:22px;
    margin-bottom:16px;
    font-weight:700;
}

.md-why-card p{
    color:var(--md-text-light);
    line-height:1.8;
    font-size:15px;
}

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

@media(max-width:1200px){

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

}

@media(max-width:768px){

.md-why{
    padding:80px 0;
}

.md-why-header{
    margin-bottom:50px;
}

.md-why-grid{
    grid-template-columns:1fr;
}

.md-why-card{
    padding:30px;
}

}

@media(max-width:576px){

.md-why{
    padding:70px 0;
}

.md-why-title{
    font-size:2rem;
}

.md-why-description{
    font-size:15px;
}

.md-why-card{
    padding:24px;
    border-radius:22px;
}

.md-why-icon{
    width:62px;
    height:62px;
    border-radius:18px;
    font-size:26px;
}

.md-why-card h3{
    font-size:20px;
}

}


/*==================================================
                TESTIMONIALS
==================================================*/

.md-testimonials{
    padding:110px 0;
    background:linear-gradient(180deg,#ffffff 0%,#f8f9fc 100%);
    position:relative;
    overflow:hidden;
}

.md-testimonials::before{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    border-radius:50%;
    background:rgba(99,102,241,.08);
    filter:blur(120px);
    top:-180px;
    right:-150px;
}

.md-testimonials::after{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    border-radius:50%;
    background:rgba(99,102,241,.06);
    filter:blur(120px);
    bottom:-120px;
    left:-120px;
}

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

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

.md-testimonials-header{
    max-width:760px;
    margin:auto;
    text-align:center;
    margin-bottom:70px;
}

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

.md-testimonials-grid{

    display:grid;

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

    gap:30px;

    align-items:center;

}

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

.md-testimonial-card{

    position:relative;

    padding:38px;

    border-radius:30px;

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

    backdrop-filter:blur(20px);

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

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

    box-shadow:0 20px 50px rgba(15,23,42,.08);

    transition:.35s;

    overflow:hidden;

}

.md-testimonial-card:hover{

    transform:translateY(-12px);

    box-shadow:0 35px 80px rgba(15,23,42,.14);

}

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

.md-featured-review{

    transform:scale(1.05);

    border:1px solid rgba(99,102,241,.25);

}

.md-featured-review:hover{

    transform:scale(1.05) translateY(-12px);

}

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

.md-quote{

    width:70px;

    height:70px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--md-primary-light);

    color:var(--md-primary);

    font-size:34px;

    margin-bottom:28px;

}

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

.md-testimonial-card .md-stars{

    display:flex;

    gap:6px;

    color:#fbbf24;

    margin-bottom:25px;

    font-size:18px;

}

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

.md-testimonial-card p{

    color:var(--md-text-light);

    line-height:2;

    font-size:16px;

    margin-bottom:35px;

}

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

.md-review-user{

    display:flex;

    align-items:center;

    gap:18px;

}

.md-avatar{

    width:62px;

    height:62px;

    border-radius:50%;

    background:linear-gradient(
    135deg,
    var(--md-primary),
    #7c3aed);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    font-size:18px;

    flex-shrink:0;

}

.md-review-user h4{

    margin:0;

    color:var(--md-text);

    font-size:18px;

}

.md-review-user span{

    color:var(--md-text-light);

    font-size:14px;

}

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

@media(max-width:1200px){

.md-testimonials-grid{

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

}

.md-featured-review{

    transform:none;

}

.md-featured-review:hover{

    transform:translateY(-10px);

}

}

@media(max-width:768px){

.md-testimonials{

    padding:80px 0;

}

.md-testimonials-header{

    margin-bottom:50px;

}

.md-testimonials-grid{

    grid-template-columns:1fr;

}

.md-testimonial-card{

    padding:30px;

}

}

@media(max-width:576px){

.md-testimonials{

    padding:70px 0;

}

.md-testimonial-card{

    padding:24px;

    border-radius:24px;

}

.md-quote{

    width:60px;

    height:60px;

    font-size:28px;

}

.md-testimonial-card p{

    font-size:15px;

    line-height:1.8;

}

.md-avatar{

    width:54px;

    height:54px;

}

}


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

.md-recent-card{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    border:1px solid #edf2f7;

    transition:.35s;

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

}

.md-recent-card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 60px rgba(15,23,42,.12);

}

.md-recent-image{

    display:flex;

    align-items:center;

    justify-content:center;

    height:220px;

    padding:30px;

    background:#fafbff;

}

.md-recent-image img{

    max-width:100%;

    max-height:170px;

    object-fit:contain;

    transition:.4s;

}

.md-recent-card:hover .md-recent-image img{

    transform:scale(1.08);

}

.md-recent-content{

    padding:24px;

}

.md-recent-rating{

    display:inline-flex;

    align-items:center;

    gap:6px;

    color:#fbbf24;

    font-weight:700;

    margin-bottom:15px;

}

.md-recent-content h3{

    font-size:18px;

    color:var(--md-text);

    line-height:1.5;

    min-height:54px;

}

.md-recent-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 24px 24px;

}

.md-recent-price{

    font-size:24px;

    font-weight:800;

    color:var(--md-text);

}

.md-small-btn{

    height:44px;

    padding:0 20px;

    font-size:14px;

}


.md-recent{

    padding:100px 0;

    background:#ffffff;

    position:relative;

}

.md-recent .md-products-header{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:40px;

    margin-bottom:60px;

}

.md-recent-grid{

    display:grid;

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

    gap:28px;

}



/*==============================
Responsive
==============================*/

@media(max-width:1200px){

.md-recent-grid{

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

}

}

@media(max-width:992px){

.md-recent .md-products-header{

    flex-direction:column;

    align-items:flex-start;

}

.md-recent-grid{

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

}

}

@media(max-width:576px){

.md-recent-grid{

    grid-template-columns:1fr;

}

.md-recent .md-view-all{

    width:100%;

    justify-content:center;

}

}


/*==================================================
                CATEGORIES
==================================================*/

.md-categories{
    padding:110px 0;
    background:linear-gradient(180deg,#f8f9fc 0%,#ffffff 100%);
    position:relative;
    overflow:hidden;
}

.md-categories::before{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    border-radius:50%;
    background:rgba(99,102,241,.08);
    filter:blur(120px);
    top:-180px;
    left:-180px;
}

.md-categories::after{
    content:"";
    position:absolute;
    width:400px;
    height:400px;
    border-radius:50%;
    background:rgba(99,102,241,.06);
    filter:blur(120px);
    bottom:-150px;
    right:-150px;
}

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

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

.md-category-grid{

    display:grid;

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

    gap:28px;

    margin-top:60px;

}

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

.md-category-card{

    display:flex;

    flex-direction:column;

    text-decoration:none;

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

    backdrop-filter:blur(18px);

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

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

    border-radius:28px;

    overflow:hidden;

    transition:.35s ease;

    box-shadow:0 20px 45px rgba(15,23,42,.08);

}

.md-category-card:hover{

    transform:translateY(-12px);

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

}

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

.md-category-image{

    display:flex;

    align-items:center;

    justify-content:center;

    height:260px;

    padding:35px;

    background:#f8f9fc;

    overflow:hidden;

}

.md-category-image img{

    width:100%;

    max-width:220px;

    transition:.4s ease;

    mix-blend-mode:multiply;

}

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

    transform:scale(1.08);

}

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

.md-category-content{

    padding:28px;

}

.md-category-label{

    display:inline-block;

    margin-bottom:12px;

    padding:6px 14px;

    border-radius:999px;

    background:var(--md-primary-light);

    color:var(--md-primary);

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

}

.md-category-content h3{

    color:var(--md-text);

    font-size:24px;

    margin-bottom:14px;

    font-weight:700;

}

.md-category-content p{

    color:var(--md-text-light);

    line-height:1.8;

    font-size:15px;

}

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

.md-category-card:hover .md-category-label{

    background:var(--md-primary);

    color:#fff;

}

.md-category-card:hover h3{

    color:var(--md-primary);

}

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

@media(max-width:1200px){

.md-category-grid{

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

}

}

@media(max-width:768px){

.md-categories{

    padding:80px 0;

}

.md-category-grid{

    gap:22px;

}

.md-category-image{

    height:220px;

}

.md-category-content{

    padding:22px;

}

.md-category-content h3{

    font-size:22px;

}

}

@media(max-width:576px){

.md-category-grid{

    grid-template-columns:1fr;

}

.md-category-image{

    height:220px;

    padding:25px;

}

.md-category-content{

    padding:20px;

}

.md-category-content h3{

    font-size:20px;

}

.md-category-content p{

    font-size:14px;

}

}




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

.md-category-hero{

    position:relative;

    padding:90px 0 100px;

    overflow:hidden;

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

}

.md-category-glow{

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

    filter:blur(120px);

    z-index:1;

}

.md-glow-left{

    top:-180px;

    left:-180px;

    background:rgba(99,102,241,.08);

}

.md-glow-right{

    bottom:-180px;

    right:-180px;

    background:rgba(99,102,241,.06);

}

.md-category-hero .md-container{

    position:relative;

    z-index:2;

}

.md-category-hero-box{

    max-width:900px;

    margin:auto;

    text-align:center;

}

/*==============================
Breadcrumb
==============================*/

.md-breadcrumb{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin-bottom:30px;

    font-size:15px;

}

.md-breadcrumb a{

    color:var(--md-text-light);

    text-decoration:none;

    transition:.3s;

}

.md-breadcrumb a:hover{

    color:var(--md-primary);

}

.md-breadcrumb span{

    color:#94a3b8;

}

.md-breadcrumb i{

    font-size:14px;

}

/*==============================
Title
==============================*/

.md-category-title{

    margin-top:28px;

    margin-bottom:22px;

    font-size:clamp(2.8rem,6vw,4.8rem);

    font-weight:800;

    line-height:1.05;

    letter-spacing:-2px;

    color:var(--md-text);

}

/*==============================
Description
==============================*/

.md-category-description{

    max-width:700px;

    margin:auto;

    font-size:18px;

    line-height:1.9;

    color:var(--md-text-light);

}

/*==============================
Stats
==============================*/

.md-category-stats{

    margin-top:55px;

    display:flex;

    justify-content:center;

    gap:24px;

    flex-wrap:wrap;

}

.md-stat-card{

    min-width:180px;

    padding:28px;

    border-radius:24px;

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

    backdrop-filter:blur(18px);

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

    box-shadow:0 20px 45px rgba(15,23,42,.08);

    transition:.35s;

}

.md-stat-card:hover{

    transform:translateY(-8px);

}

.md-stat-card strong{

    display:block;

    margin-bottom:10px;

    font-size:34px;

    color:var(--md-primary);

    font-weight:800;

}

.md-stat-card span{

    color:var(--md-text-light);

    font-size:15px;

    font-weight:600;

}

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

@media(max-width:992px){

.md-category-hero{

    padding:70px 0 80px;

}

.md-category-title{

    font-size:3.2rem;

}

.md-category-description{

    font-size:17px;

}

.md-category-stats{

    gap:18px;

}

.md-stat-card{

    min-width:160px;

}

}

@media(max-width:768px){

.md-category-hero{

    padding:60px 0 70px;

}

.md-breadcrumb{

    flex-wrap:wrap;

}

.md-category-title{

    font-size:2.6rem;

}

.md-category-description{

    font-size:16px;

}

.md-category-stats{

    display:grid;

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

}

}

@media(max-width:576px){

.md-category-hero{

    padding:50px 0 60px;

}

.md-category-title{

    font-size:2.2rem;

}

.md-category-description{

    font-size:15px;

}

.md-category-stats{

    grid-template-columns:1fr;

}

.md-stat-card{

    padding:22px;

}

.md-stat-card strong{

    font-size:30px;

}

}

/*==================================================
            CATEGORY PRODUCTS
==================================================*/

.md-category-section{

    padding:100px 0;

    background:#fff;

}

.md-category-grid{

    display:grid;

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

    gap:30px;

}

/*==============================*/

.md-category-product{

    background:#fff;

    border-radius:26px;

    overflow:hidden;

    border:1px solid #edf2f7;

    transition:.35s;

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

}

.md-category-product:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 60px rgba(15,23,42,.12);

}

.md-category-product-link{

    text-decoration:none;

    display:block;

}

/*==============================*/

.md-product-image{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    height:250px;

    padding:30px;

    background:#fafbff;

}

.md-product-image img{

    width:100%;

    max-width:190px;

    transition:.4s;

}

.md-category-product:hover img{

    transform:scale(1.08);

}

/*==============================*/

.md-stock{

    position:absolute;

    top:18px;

    left:18px;

    padding:8px 14px;

    border-radius:999px;

    font-size:12px;

    font-weight:700;

}

.md-in-stock{

    background:#dcfce7;

    color:#15803d;

}

.md-out-stock{

    background:#fee2e2;

    color:#b91c1c;

}

/*==============================*/

.md-product-content{

    padding:24px;

}

.md-product-rating{

    display:inline-flex;

    gap:6px;

    align-items:center;

    color:#fbbf24;

    margin-bottom:16px;

    font-weight:700;

}

.md-product-content h3{

    font-size:20px;

    color:var(--md-text);

    line-height:1.45;

    margin-bottom:12px;

}

.md-product-content p{

    color:var(--md-text-light);

    line-height:1.8;

    margin-bottom:22px;

}

.md-product-price{

    font-size:28px;

    font-weight:800;

    color:var(--md-primary);

}

/*==============================*/

.md-product-action{

    padding:0 24px 24px;

}

.md-btn-full{

    width:100%;

}

/*==============================
Responsive
==============================*/

@media(max-width:1200px){

.md-category-grid{

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

}

}

@media(max-width:992px){

.md-category-grid{

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

}

}

@media(max-width:576px){

.md-category-grid{

grid-template-columns:1fr;

}

.md-product-image{

height:220px;

}

.md-product-content{

padding:20px;

}

.md-product-content h3{

font-size:18px;

}

.md-product-price{

font-size:24px;

}

}



/*==================================================
                PRODUCT PAGE
==================================================*/
/*==================================================
                PRODUCT HERO
==================================================*/

.md-product-hero{

    position:relative;

    padding:90px 0 110px;

    overflow:hidden;

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

}

.md-product-glow{

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    filter:blur(120px);

    z-index:1;

}

.md-product-hero .md-container{

    position:relative;

    z-index:2;

}

.md-product-grid{

    margin-top:45px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

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

.md-product-gallery{

    position:relative;

}

.md-product-image-box{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:620px;

    border-radius:34px;

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

    backdrop-filter:blur(22px);

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

    box-shadow:
    0 30px 70px rgba(15,23,42,.08);

    overflow:hidden;

}

.md-product-image-box::before{

    content:"";

    position:absolute;

    width:430px;

    height:430px;

    border-radius:50%;

    background:

    radial-gradient(circle,
    rgba(99,102,241,.12),
    transparent 70%);

}

.md-product-main-image{

    position:relative;

    z-index:2;

    width:80%;

    max-width:460px;

    transition:.45s;

}

.md-product-image-box:hover .md-product-main-image{

    transform:scale(1.08);

}

/*==================================================
                DETAILS
==================================================*/

.md-product-details{

    display:flex;

    flex-direction:column;

}

.md-product-title{

    margin:25px 0;

    font-size:clamp(2.3rem,4vw,3.8rem);

    line-height:1.1;

    font-weight:800;

    color:var(--md-text);

    letter-spacing:-1px;

}

.md-product-rating{

    display:flex;

    align-items:center;

    gap:14px;

    flex-wrap:wrap;

    margin-bottom:30px;

}

.md-stars{

    display:flex;

    gap:4px;

    color:#fbbf24;

}

.md-product-rating strong{

    font-size:18px;

    color:var(--md-text);

}

.md-product-rating span{

    color:var(--md-text-light);

}

.md-product-price{

    margin-bottom:28px;

    font-size:3rem;

    font-weight:800;

    color:var(--md-primary);

}

.md-product-description{

    color:var(--md-text-light);

    line-height:1.9;

    font-size:17px;

    margin-bottom:35px;

}

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

.md-product-features{

    display:grid;

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

    gap:18px;

    margin-bottom:40px;

}

.md-product-features div{

    display:flex;

    align-items:center;

    gap:12px;

    padding:18px;

    border-radius:18px;

    background:#fff;

    border:1px solid #edf2f7;

    font-weight:600;

    color:var(--md-text);

    box-shadow:0 10px 25px rgba(15,23,42,.05);

}

.md-product-features i{

    color:var(--md-primary);

    font-size:18px;

}

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

.md-product-actions{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.md-product-actions form{

    flex:1;

}

.md-product-actions .md-btn{

    width:100%;

}

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

@media(max-width:1200px){

.md-product-grid{

    gap:45px;

}

.md-product-image-box{

    min-height:520px;

}

}

@media(max-width:992px){

.md-product-grid{

    grid-template-columns:1fr;

}

.md-product-details{

    text-align:center;

}

.md-product-rating{

    justify-content:center;

}

.md-product-features{

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

}

}

@media(max-width:768px){

.md-product-hero{

    padding:70px 0;

}

.md-product-image-box{

    min-height:420px;

}

.md-product-main-image{

    width:70%;

}

.md-product-title{

    font-size:2.5rem;

}

.md-product-description{

    font-size:16px;

}

.md-product-actions{

    flex-direction:column;

}

}

@media(max-width:576px){

.md-product-title{

    font-size:2rem;

}

.md-product-price{

    font-size:2.3rem;

}

.md-product-features{

    grid-template-columns:1fr;

}

.md-product-image-box{

    min-height:340px;

    padding:30px;

}

.md-product-main-image{

    width:90%;

}

}


/*==================================================
            PRODUCT INFORMATION
==================================================*/

.md-product-info{

    padding:100px 0;

    background:#fff;

}

.md-info-grid{

    display:grid;

    grid-template-columns:1.4fr .9fr;

    gap:35px;

}

.md-info-card{

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

    backdrop-filter:blur(18px);

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

    border-radius:28px;

    padding:38px;

    box-shadow:0 20px 50px rgba(15,23,42,.06);

}

.md-info-header{

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:28px;

}

.md-info-header i{

    width:55px;

    height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:var(--md-primary-light);

    color:var(--md-primary);

    font-size:24px;

}

.md-info-header h2{

    font-size:28px;

    color:var(--md-text);

    margin:0;

}

.md-info-content{

    color:var(--md-text-light);

    line-height:2;

    font-size:16px;

}

.md-info-content p{

    margin-bottom:20px;

}

.md-spec-list{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.md-spec-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

    border-bottom:1px solid #eef2f7;

}

.md-spec-row:last-child{

    border-bottom:none;

}

.md-spec-row span{

    color:var(--md-text-light);

    font-weight:500;

}

.md-spec-row strong{

    color:var(--md-text);

    font-weight:700;

}

/*==============================
Responsive
==============================*/

@media(max-width:992px){

.md-info-grid{

    grid-template-columns:1fr;

}

}

@media(max-width:576px){

.md-product-info{

    padding:70px 0;

}

.md-info-card{

    padding:28px;

}

.md-info-header h2{

    font-size:22px;

}

.md-spec-row{

    flex-direction:column;

    align-items:flex-start;

    gap:8px;

}

}

/*==================================================
            RELATED PRODUCTS
==================================================*/

.md-related{

    padding:100px 0;

    background:#f8f9fc;

}

.md-products-grid{

    margin-top:60px;

    display:grid;

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

    gap:28px;

}

.md-product-card{

    display:block;

    text-decoration:none;

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    border:1px solid #edf2f7;

    transition:.35s;

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

}

.md-product-card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 60px rgba(15,23,42,.12);

}

.md-product-card-image{

    height:230px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:30px;

    background:#fafbff;

}

.md-product-card-image img{

    width:100%;

    max-width:180px;

    transition:.4s;

}

.md-product-card:hover img{

    transform:scale(1.08);

}

.md-product-card-content{

    padding:24px;

}

.md-product-card-rating{

    display:inline-flex;

    align-items:center;

    gap:6px;

    color:#fbbf24;

    font-weight:700;

    margin-bottom:15px;

}

.md-product-card-content h3{

    color:var(--md-text);

    font-size:18px;

    line-height:1.5;

    min-height:54px;

    margin-bottom:18px;

}

.md-product-card-price{

    display:block;

    font-size:26px;

    font-weight:800;

    color:var(--md-primary);

}

/*==============================
Responsive
==============================*/

@media(max-width:1200px){

.md-products-grid{

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

}

}

@media(max-width:992px){

.md-products-grid{

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

}

}

@media(max-width:576px){

.md-products-grid{

grid-template-columns:1fr;

}

.md-related{

padding:70px 0;

}

}




/*==================================================
                CART
==================================================*/
/*==================================================
                PAGE HERO
==================================================*/

.md-page-hero{

    position:relative;

    padding:90px 0;

    overflow:hidden;

    background:
    linear-gradient(180deg,#ffffff,#f8f9fc);

}

.md-page-glow{

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(99,102,241,.10);

    filter:blur(90px);

}

.md-glow-left{

    top:-120px;

    left:-120px;

}

.md-glow-right{

    right:-120px;

    bottom:-120px;

}

.md-page-hero-box{

    text-align:center;

    position:relative;

    z-index:2;

}

.md-breadcrumb{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:14px 24px;

    border-radius:999px;

    background:#fff;

    border:1px solid #e5e7eb;

    margin-bottom:30px;

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

}

.md-breadcrumb a{

    color:#64748b;

    text-decoration:none;

}

.md-breadcrumb i{

    color:var(--md-primary);

}

.md-breadcrumb .active{

    color:var(--md-primary);

    font-weight:700;

}

.md-page-title{

    font-size:clamp(3rem,5vw,4.5rem);

    font-weight:800;

    color:#111827;

    margin:20px 0;

}

.md-page-description{

    max-width:650px;

    margin:0 auto;

    font-size:18px;

    line-height:1.8;

    color:#64748b;

}

/*==================================================
                CART PAGE
==================================================*/


.vb-cart-section{

    padding:100px 0 !important;

    background:linear-gradient(
        180deg,
        #f5f7ff 0%,
        #ffffff 40%,
        #f8f9fc 100%
    ) !important;

    position:relative;

}

.vb-cart-layout{

    display:grid;

    grid-template-columns:2fr 430px;

    gap:40px;

    align-items:start;

}

.vb-cart-header{

    font-size:34px;

    margin-bottom:30px;

    color:var(--md-text);

    font-weight:800;

}

.vb-cart-list{

    display:flex;

    flex-direction:column;

    gap:24px;

}

/*==================================
Item Card
==================================*/

.vb-cart-item-card{

    display:grid;

    grid-template-columns:140px 1fr auto auto;

    gap:28px;

    align-items:center;

    padding:28px;

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

    backdrop-filter:blur(18px);

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

    border-radius:28px;

    box-shadow:0 18px 45px rgba(15,23,42,.06);

    transition:.35s;

}

.vb-cart-item-card:hover{

    transform:translateY(-6px);

    box-shadow:0 28px 55px rgba(15,23,42,.10);

}

/*==================================
Image
==================================*/

.vb-item-img-box{

    display:flex;

    align-items:center;

    justify-content:center;

    width:120px;

    height:120px;

    border-radius:22px;

    background:#f8f9fc;

}

.vb-item-img{

    max-width:90px;

    transition:.4s;

}

.vb-cart-item-card:hover .vb-item-img{

    transform:scale(1.08);

}

/*==================================
Info
==================================*/

.vb-item-title{

    font-size:22px;

    color:var(--md-text);

    margin-bottom:12px;

    font-weight:700;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    line-height:1.45;

}

.vb-item-unit-price{

    color:var(--md-primary);

    font-size:18px;

    font-weight:700;

}

.vb-item-unit-price small{

    color:#94a3b8;

}


/*==================================
Quantity
==================================*/

.vb-qty-pill{
    background:#f8faff;
    border:1px solid #dbe5ff;
    border-radius:999px;
    padding:5px;
    display:flex;
    align-items:center;
    gap:8px;
}

.vb-qty-btn{
    width:38px;
    height:38px;
    border-radius:50%;
    border:none;
    background:#fff;
    color:#4f46e5;
    font-size:22px;
    font-weight:700;
    transition:.25s;
}

.vb-qty-btn:hover{
    background:#4f46e5;
    color:#fff;
}

.vb-qty-number{

    min-width:36px;

    text-align:center;

    font-size:18px;

    font-weight:700;

    color:var(--md-text);

}

.vb-qty-input{

    width:70px;

    height:52px;

    border:none;

    outline:none;

    text-align:center;

    font-size:17px;

    font-weight:700;

}

.vb-qty-update-btn{

    width:52px;

    height:52px;

    border:none;

    cursor:pointer;

    

    transition:.3s;

}


/*==================================
Price & Remove
==================================*/

.vb-item-total-wrap{

    text-align:right;

}

.vb-item-total{

    display:block;

    font-size:26px;

    font-weight:800;

     color:var(--md-primary);

    margin-bottom:16px;

}

.vb-remove-btn{

    background:#fef2f2;

    border:1px solid #fecaca;

    color:#ef4444;

    padding:10px 18px;

    border-radius:12px;

    font-size:14px;

    font-weight:600;

    transition:.3s;

}

.vb-remove-btn:hover{

    background:#ef4444;

    color:#fff;

}
/*==================================
Summary
==================================*/

.vb-summary-card{

    position:sticky;

    top:110px;

    padding:42px;

    border-radius:30px;

    background:#fff;

    border:1px solid #e8ebff;

    box-shadow:0 30px 70px rgba(15,23,42,.08);

}

.vb-summary-title{

    font-size:30px;

    font-weight:800;

    color:var(--md-text);

    margin-bottom:35px;

}

.vb-summary-row{

    display:flex;

    justify-content:space-between;

    margin-bottom:18px;

}

.vb-summary-label{

    color:#64748b;

}

.vb-summary-value{

    font-weight:700;

    color:var(--md-text);

}

.vb-total-row{

    font-size:24px;

     padding-top:18px;

    border-top:1px solid #e7ebf5;

    margin-top:20px;

}

.vb-total-row .vb-summary-value{

    color:var(--md-primary) !important;

    font-size:36px;

    font-weight:800;

}

.vb-summary-divider{

    margin:24px 0;

    border:none;

    border-top:1px solid #edf2f7;

}

.vb-summary-trust{

    margin-top:24px;

    padding:14px 18px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    border-radius:14px;

    background:#eef2ff !important;

    border:1px solid rgba(99,102,241,.15) !important;

    color:var(--md-primary) !important;

    font-size:14px;

    font-weight:600;

}

.vb-summary-trust i{

    color:var(--md-primary) !important;

}

.vb-summary-trust *{

    color:var(--md-primary) !important;

}

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

@media(max-width:1200px){

.vb-cart-layout{

grid-template-columns:1fr;

}

.vb-summary-card{

position:relative;

top:0;

}

}

@media(max-width:768px){

.vb-cart-item-card{

grid-template-columns:1fr;

text-align:center;

}

.vb-item-img-box{

margin:auto;

}

.vb-item-total-wrap{

text-align:center;

}

.vb-qty-form{

display:flex;

justify-content:center;

}

}

@media(max-width:576px){

.vb-cart-section{

padding:70px 0;

}

.vb-cart-header{

font-size:28px;

}

.vb-summary-card{

padding:28px;

}

}


/*==================================================
            EMPTY CART
==================================================*/

.vb-empty-state{

    max-width:760px;

    margin:0 auto;

    padding:80px 60px;

    text-align:center;

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

    backdrop-filter:blur(20px);

    border:1px solid rgba(99,102,241,.12);

    border-radius:32px;

    box-shadow:0 25px 70px rgba(15,23,42,.08);

}

.vb-empty-icon-blob{

    width:130px;

    height:130px;

    margin:0 auto 35px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:28px;

    background:linear-gradient(
        135deg,
        rgba(99,102,241,.12),
        rgba(99,102,241,.05)
    );

    color:var(--md-primary);

    font-size:58px;

    box-shadow:0 20px 40px rgba(99,102,241,.12);

}

.vb-empty-state .vb-headline{

    font-size:52px;

    margin-bottom:20px;

}

.vb-empty-state .vb-text-dark{

    color:#111827 !important;

}

.vb-empty-state .vb-text-gradient{

    background:linear-gradient(
        135deg,
        #6366f1,
        #4f46e5
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.vb-empty-desc{

    max-width:520px;

    margin:0 auto 40px;

    color:#64748b;

    font-size:18px;

    line-height:1.9;

}

.vb-empty-state .vb-btn-primary{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:18px 36px;

    border-radius:999px;

    background:var(--md-primary) !important;

    color:#fff !important;

    border:none;

    box-shadow:0 20px 40px rgba(99,102,241,.25);

}

.vb-empty-state .vb-btn-primary:hover{

    background:var(--md-primary-hover) !important;

    transform:translateY(-4px);

}


/*==================================================
                CHECKOUT
==================================================*/

/*==================================================
                CHECKOUT PAGE
==================================================*/

.vb-checkout-section{

    position:relative;

    padding:100px 0;

    overflow:hidden;

    background:
    linear-gradient(
        180deg,
        #f6f8ff 0%,
        #ffffff 45%,
        #f8faff 100%
    );

}

.vb-checkout-glow{

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(99,102,241,.08);

    filter:blur(90px);

    z-index:0;

}

.vb-glow-top-left{

    top:-120px;

    left:-120px;

}

.vb-glow-bottom-right{

    bottom:-150px;

    right:-150px;

}

.vb-checkout-layout{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1.7fr 420px;

    gap:36px;

    align-items:start;

}

/*==================================================
                CHECKOUT CARDS
==================================================*/

.vb-checkout-card,

.vb-summary-card{

    background:#ffffff;

    border:1px solid #e8ebff;

    border-radius:28px;

    padding:34px;

    box-shadow:
    0 20px 45px rgba(15,23,42,.06);

    transition:.35s;

}

.vb-checkout-card:hover,

.vb-summary-card:hover{

    transform:translateY(-4px);

    border-color:rgba(99,102,241,.20);

    box-shadow:
    0 28px 55px rgba(15,23,42,.08);

}

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

.vb-card-header{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:30px;

}

/*==================================
CHECKOUT HEADER ICONS
==================================*/

.vb-header-icon{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:#eef2ff !important;

    color:var(--md-primary) !important;

    font-size:22px;

}

.vb-header-icon i{

    color:var(--md-primary) !important;

}

.vb-payment-header-icon{

    background:#eef2ff;

    color:var(--md-primary);

}

.vb-card-title{

    font-size:28px;

    font-weight:800;

    color:var(--md-text);

}

/*==================================
BREADCRUMB
==================================*/

.vb-breadcrumb i{

    color:var(--md-primary) !important;

}

.vb-current{

    color:var(--md-primary) !important;

}


/*==================================
ORDER SUMMARY
==================================*/

.vb-item-qty{

    color:var(--md-primary) !important;

    font-weight:700;

}

/*==================================
        PAYMENT OPTION ICONS
==================================*/

.vb-pay-icon{

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:#eef2ff !important;

    color:var(--md-primary) !important;

    font-size:22px;

    transition:.3s;

}

.vb-pay-icon i{

    color:var(--md-primary) !important;

}

/* Active Payment */

.vb-payment-option.active .vb-pay-icon{

    background:var(--md-primary) !important;

    color:#fff !important;

}

.vb-payment-option.active .vb-pay-icon i{

    color:#fff !important;

}


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

.vb-success-icon-blob{

    background:#eef2ff !important;

    color:var(--md-primary) !important;

    box-shadow:0 18px 40px rgba(99,102,241,.18);

}

.vb-success-icon-blob i{

    color:var(--md-primary) !important;

}

/*==================================
        CARD HEADER ICONS
==================================*/

.vb-success-card .vb-header-icon{

    background:#eef2ff !important;

    color:var(--md-primary) !important;

}

.vb-success-card .vb-header-icon i{

    color:var(--md-primary) !important;

}

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

.vb-status-icon{

    background:#eef2ff !important;

    color:var(--md-primary) !important;

}

.vb-status-icon i{

    color:var(--md-primary) !important;

}


/*==================================
        NEXT STEPS
==================================*/

.vb-next-steps-list i{

    color:var(--md-primary) !important;

}

/*==================================
        ORDER TRACKER
==================================*/

.vb-rail-step.active .vb-step-circle{

    background:var(--md-primary) !important;

    border-color:var(--md-primary) !important;

    color:#fff !important;

}

.vb-rail-step.pending .vb-step-circle{

    background:#eef2ff;

    color:var(--md-primary);

    border:2px solid #dbe5ff;

}


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

.vb-help-icon{

    background:#eef2ff !important;

    color:var(--md-primary) !important;

}

.vb-help-icon i{

    color:var(--md-primary) !important;

}

.vb-stat-confirmed{

    color:#2563eb;

}


/*==================================
        SUCCESS PAGE BUTTONS
==================================*/

.vb-btn-outline{

    color:var(--md-primary) !important;

    border:1px solid #dbe5ff !important;

    background:#ffffff !important;

}

.vb-btn-outline i{

    color:var(--md-primary) !important;

}

.vb-btn-outline:hover{

    background:#eef2ff !important;

    color:var(--md-primary) !important;

}

.vb-btn-outline:hover i{

    color:var(--md-primary) !important;

}

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

.vb-success-section .vb-help-card a{

    color:var(--md-primary) !important;

}

.vb-success-section .vb-help-card a:hover{

    color:var(--md-primary-hover) !important;

}



/*==================================================
                RETURN PAGE
==================================================*/

.vb-return-section{

    position:relative;

    overflow:hidden;

    padding:100px 0;

    background:
    linear-gradient(
        180deg,
        #f5f7ff 0%,
        #ffffff 45%,
        #f8faff 100%
    );

}

.vb-return-glow{

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(99,102,241,.08);

    filter:blur(90px);

    z-index:0;

}

.vb-glow-top-right{

    top:-120px;

    right:-120px;

}

.vb-glow-bottom-left{

    bottom:-150px;

    left:-150px;

}

.vb-return-section .vb-container{

    position:relative;

    z-index:2;

}

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

.vb-return-form-card{

    max-width:760px;

    margin:0 auto;

    padding:48px;

    background:#ffffff;

    border:1px solid #e6ebff;

    border-radius:32px;

    box-shadow:
    0 25px 60px rgba(15,23,42,.07);

}

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

.vb-card-header-center{

    text-align:center;

    margin-bottom:40px;

}

.vb-header-icon-blob{

    width:82px;

    height:82px;

    margin:0 auto 22px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:24px;

    background:#eef2ff;

    color:var(--md-primary);

    font-size:34px;

    box-shadow:
    0 15px 35px rgba(99,102,241,.18);

}

.vb-header-icon-blob i{

    color:var(--md-primary);

}

.vb-card-header-center .vb-headline{

    margin-bottom:14px;

}

.vb-card-header-center .vb-description{

    max-width:520px;

    margin:auto;

    color:#64748b;

    line-height:1.8;

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

.vb-return-form{

    display:flex;

    flex-direction:column;

    gap:28px;

}

.vb-input-group{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.vb-label{

    font-size:15px;

    font-weight:700;

    color:var(--md-text);

}

.vb-required{

    color:#ef4444;

}

.vb-optional{

    color:#94a3b8;

    font-weight:500;

}

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

.vb-input-wrapper{

    position:relative;

}

.vb-input-icon{

    position:absolute;

    left:20px;

    top:50%;

    transform:translateY(-50%);

    color:var(--md-primary);

    font-size:18px;

    pointer-events:none;

}

.vb-select-arrow{

    position:absolute;

    right:20px;

    top:50%;

    transform:translateY(-50%);

    color:#94a3b8;

    pointer-events:none;

}

/*==================================================
                INPUTS
==================================================*/

.vb-input,

.vb-select,

.vb-textarea{

    width:100%;

    border:1px solid #e5e7eb;

    border-radius:18px;

    background:#f8faff;

    color:var(--md-text);

    font-size:16px;

    transition:.3s;

    outline:none;

}

.vb-input,

.vb-select{

    height:60px;

}

.vb-input-with-icon{

    padding-left:58px;

    padding-right:20px;

}

.vb-select{

    appearance:none;

    cursor:pointer;

}

.vb-textarea{

    min-height:140px;

    padding:18px 20px;

    resize:vertical;

    line-height:1.7;

}

.vb-input::placeholder,

.vb-textarea::placeholder{

    color:#94a3b8;

}

.vb-input:focus,

.vb-select:focus,

.vb-textarea:focus{

    border-color:var(--md-primary);

    background:#fff;

    box-shadow:

    0 0 0 4px rgba(99,102,241,.12);

}

/*==================================================
                ERROR ALERT
==================================================*/

.vb-alert-error{

    display:flex;

    align-items:flex-start;

    gap:16px;

    padding:18px 20px;

    border-radius:18px;

    background:#fef2f2;

    border:1px solid #fecaca;

}

.vb-alert-icon{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:#fee2e2;

    color:#ef4444;

    font-size:20px;

    flex-shrink:0;

}

.vb-alert-text strong{

    display:block;

    color:#b91c1c;

    margin-bottom:6px;

}

.vb-alert-text p{

    margin:0;

    color:#7f1d1d;

    line-height:1.7;

}

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

.vb-policy-note{

    display:flex;

    align-items:flex-start;

    gap:14px;

    padding:18px 20px;

    border-radius:18px;

    background:#eef2ff;

    border:1px solid rgba(99,102,241,.15);

    color:#64748b;

    line-height:1.8;

    font-size:15px;

}

.vb-policy-note i{

    color:var(--md-primary);

    font-size:18px;

    margin-top:2px;

    flex-shrink:0;

}

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

.vb-return-success-card{

    max-width:760px;

    margin:auto;

    text-align:center;

    padding:60px;

    background:#ffffff;

    border:1px solid #e6ebff;

    border-radius:32px;

    box-shadow:

    0 25px 60px rgba(15,23,42,.08);

}

.vb-return-success-card .vb-headline{

    margin:30px 0 18px;

}

.vb-return-summary{

    margin:35px auto;

    max-width:320px;

    padding:22px;

    border-radius:20px;

    background:#f8faff;

    border:1px solid #e5e7eb;

}

.vb-summary-label{

    display:block;

    margin-bottom:8px;

    color:#64748b;

    font-size:14px;

    text-transform:uppercase;

    letter-spacing:.08em;

}

.vb-summary-value{

    font-size:24px;

    font-weight:800;

    color:var(--md-primary);

}

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

.vb-return-form .vb-btn-primary,

.vb-return-success-card .vb-btn-primary{

    width:100%;

    justify-content:center;

}

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

@media(max-width:768px){

.vb-return-form-card,

.vb-return-success-card{

padding:32px 24px;

}

.vb-header-icon-blob{

width:72px;

height:72px;

font-size:30px;

}

.vb-card-header-center .vb-headline,

.vb-return-success-card .vb-headline{

font-size:38px;

}

.vb-return-summary{

padding:18px;

}

}

@media(max-width:576px){

.vb-return-section{

padding:70px 0;

}

.vb-input,

.vb-select{

height:56px;

}

.vb-input-with-icon{

padding-left:52px;

}

.vb-textarea{

min-height:120px;

}

}


/*==================================================
                FAQ OVERRIDES
==================================================*/

.vb-faq-question{

    color:var(--md-text) !important;

}

.vb-faq-question span{

    color:var(--md-text) !important;

}

.vb-faq-item.active .vb-faq-question,

.vb-faq-item.active .vb-faq-question span{

    color:var(--md-primary) !important;

}

.vb-faq-question:hover,

.vb-faq-question:hover span{

    color:var(--md-primary) !important;

}

/* Toggle icon */

.vb-faq-toggle-icon{

    color:var(--md-primary) !important;

}



/*==================================================
            CONTACT PAGE ICON OVERRIDE
==================================================*/

/* Badge icon */

.vb-badge-icon{

    background:rgba(99,102,241,.12) !important;

    color:var(--md-primary) !important;

}

/* Bullet check icons */

.vb-contact-points li i{

    color:var(--md-primary) !important;

}

/* Contact cards icon box */

.vb-detail-icon{

    background:rgba(99,102,241,.10) !important;

    color:var(--md-primary) !important;

    border:1px solid rgba(99,102,241,.15);

}

/* Force every Bootstrap icon inside */

.vb-detail-icon i{

    color:var(--md-primary) !important;

}




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

.footer-blue{

    position:relative;

    overflow:hidden;

    margin-top:100px;

    padding:90px 0 0;

    background:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,.30), transparent 35%),
        radial-gradient(circle at 85% 75%, rgba(255,255,255,.18), transparent 40%),
        linear-gradient(
            135deg,
            #d7e5ff 0%,
            #bfd3ff 22%,
            #9dbbff 48%,
            #7f9cff 72%,
            #6988f5 100%
        );

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

    color:#111827;

}

/* Decorative Glow */

.footer-blue::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    top:-180px;

    left:-120px;

    background:rgba(99,102,241,.10);

    filter:blur(90px);

}

.footer-blue::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    bottom:-250px;

    right:-180px;

    background:rgba(59,130,246,.10);

    filter:blur(110px);

}

.footer-blue>*{

    position:relative;

    z-index:2;

}

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

.footer-blue-top{

    display:grid;

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

    gap:70px;

    padding-bottom:60px;

}

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

.footer-brand img{

    max-width:180px;

    margin-bottom:24px;

}

.footer-brand p{

    color:#64748b;

    line-height:1.9;

    margin-bottom:30px;

}

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

.footer-contact{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.footer-contact div{

    padding:18px;

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

    backdrop-filter:blur(10px);

    border:1px solid rgba(99,102,241,.10);

    border-radius:18px;

}

.footer-contact strong{

    display:block;

    margin-bottom:6px;

    color:#111827;

    font-size:15px;

}

.footer-contact a{

    color:#64748b;

    text-decoration:none;

    transition:.3s;

}

.footer-contact a:hover{

    color:var(--md-primary);

}

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

.footer-links h4,

.footer-newsletter h4{

    color:#111827;

    font-size:20px;

    font-weight:700;

    margin-bottom:28px;

}

.footer-links{

    display:flex;

    flex-direction:column;

}

.footer-links a{

    text-decoration:none;

    color:#64748b;

    margin-bottom:14px;

    transition:.3s;

    width:fit-content;

}

.footer-links a:hover{

    color:var(--md-primary);

    transform:translateX(8px);

}

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

.footer-newsletter{

    padding:30px;

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

    backdrop-filter:blur(12px);

    border-radius:26px;

    border:1px solid rgba(99,102,241,.10);

}

.footer-newsletter p{

    color:#64748b;

    line-height:1.8;

    margin-bottom:24px;

}

.newsletter-form{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.newsletter-form input{

    height:56px;

    border-radius:999px;

    border:1px solid #dbe5ff;

    background:#fff;

    padding:0 22px;

    outline:none;

    transition:.3s;

}

.newsletter-form input:focus{

    border-color:var(--md-primary);

    box-shadow:0 0 0 4px rgba(99,102,241,.12);

}

.newsletter-form button{

    height:56px;

    border:none;

    border-radius:999px;

    background:linear-gradient(
        135deg,
        var(--md-primary),
        #5b6df5
    );

    color:#fff;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

}

.newsletter-form button:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 30px rgba(99,102,241,.25);

}

.newsletter-note{

    display:block;

    margin-top:16px;

    color:#94a3b8;

    font-size:13px;

}

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

.footer-divider{

    height:1px;

    background:rgba(99,102,241,.15);

}

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

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:28px 0;

    margin-top:20px;

}

.footer-company strong{

    display:block;

    color:#111827;

    margin-bottom:5px;

}

.footer-company span,

.footer-copy{

    color:#64748b;

}

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

@media(max-width:1100px){

.footer-blue-top{

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

gap:50px;

}

}

@media(max-width:768px){

.footer-blue{

padding-top:70px;

}

.footer-blue-top{

grid-template-columns:1fr;

gap:45px;

}

.footer-bottom{

flex-direction:column;

text-align:center;

gap:18px;

}

.footer-newsletter{

padding:24px;

}

}

@media(max-width:576px){

.footer-brand img{

max-width:150px;

}

.footer-links h4,

.footer-newsletter h4{

font-size:18px;

}

.newsletter-form input,

.newsletter-form button{

height:52px;

}

}

/*==================================================
        FOOTER FINAL OVERRIDE
==================================================*/

.footer-blue,
.footer-blue *{

    box-sizing:border-box;

}

/* Headings */

.footer-blue h4,
.footer-blue strong{

    color:#111827 !important;

}

/* Logo text */

.footer-brand{

    color:#111827 !important;

}

/* Paragraph */

.footer-brand p,
.footer-newsletter p,
.footer-copy,
.footer-company span,
.newsletter-note{

    color:#64748b !important;

}

/* Links */

.footer-blue a{

    color:#64748b !important;

    text-decoration:none;

}

.footer-blue a:hover{

    color:var(--md-primary) !important;

}

/* Contact cards */

.footer-contact div{

    background:#ffffff !important;

    border:1px solid #dbe5ff !important;

}

/* Newsletter */

.footer-newsletter{

    background:#ffffff !important;

    border:1px solid #dbe5ff !important;

}

.newsletter-form input{

    background:#fff !important;

    color:#111827 !important;

}

.newsletter-form button{

    background:linear-gradient(
        135deg,
        #6366f1,
        #4f46e5
    ) !important;

    color:#fff !important;

    border:none !important;

}

/* Bottom */

.footer-divider{

    background:#dbe5ff !important;

}




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

.topbar-soft{

    height:46px;

    background:#f8fbff;

    border-bottom:1px solid #e4ebff;

    display:flex;

    align-items:center;

}

.topbar-inner{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.topbar-left,
.topbar-right{

    display:flex;

    align-items:center;

    gap:16px;

}

.topbar-badge{

    padding:7px 16px;

    border-radius:999px;

    background:linear-gradient(
        135deg,
        var(--md-primary),
        #4f46e5
    );

    color:#fff;

    font-size:12px;

    font-weight:700;

    letter-spacing:.5px;

}

.topbar-msg,
.topbar-help{

    font-size:14px;

    color:#475569 !important;

}

.topbar-msg strong,
.topbar-help strong{

    color:#111827 !important;

}



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

.header-soft{

    position:sticky;

    top:0;

    z-index:999;

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

    backdrop-filter:blur(18px);

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

    border-bottom:1px solid rgba(99,102,241,.08);

    box-shadow:
    0 12px 35px rgba(15,23,42,.05);

}

.header-soft-inner{

    height:78px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:45px;

}



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

.logo-soft{

    flex-shrink:0;

}

.logo-soft img{

    width:185px;

    display:block;

}



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

.nav-soft{

    display:flex;

    align-items:center;

    gap:8px;

    flex:1;

    justify-content:center;

}

.nav-soft a{

    text-decoration:none;

    color:#475569;

    font-size:15px;

    font-weight:600;

    padding:12px 18px;

    border-radius:999px;

    transition:.3s;

    border-bottom:none !important;
}

.nav-soft a:hover{

    background:#eef2ff;

    color:var(--md-primary);

}

/* Prevent browser underline */

.nav-soft a:hover,
.nav-soft a:focus,
.nav-soft a:active{

    text-decoration:none !important;

    box-shadow:none !important;

}

/*==================================================
                ACTIONS
==================================================*/

.header-actions{

    display:flex;

    align-items:center;

    gap:14px;

}



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

.search-soft{

    width:270px;

    height:48px;

    display:flex;

    align-items:center;

    gap:12px;

    padding:0 18px;

    border-radius:999px;

    background:#f8fbff;

    border:1px solid #dbe5ff;

    transition:.3s;

}

.search-soft:focus-within{

    border-color:var(--md-primary);

    box-shadow:
    0 0 0 4px rgba(99,102,241,.12);

}

.search-soft i{

    color:#94a3b8;

}

.search-soft input{

    flex:1;

    border:none;

    outline:none;

    background:transparent;

    font-size:14px;

    color:#334155;

}

.search-soft input::placeholder{

    color:#94a3b8;

}



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

.icon-btn{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    border-radius:16px;

    background:#f8fbff;

    border:1px solid #dbe5ff;

    color:#475569;

    transition:.35s;

    position:relative;

}

.icon-btn:hover{

    background:var(--md-primary);

    color:#fff;

    transform:translateY(-2px);

    box-shadow:
    0 15px 25px rgba(99,102,241,.22);

}

.icon-btn i{

    font-size:18px;

}



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

.cart-badge{

    position:absolute;

    top:-6px;

    right:-6px;

    width:22px;

    height:22px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--md-primary);

    color:#fff;

    font-size:11px;

    font-weight:700;

    border:2px solid #fff;

}



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

.menu-toggle{

    display:none;

    width:48px;

    height:48px;

    border:none;

    border-radius:16px;

    background:#f8fbff;

    border:1px solid #dbe5ff;

    color:#475569;

    cursor:pointer;

}

.menu-toggle:hover{

    background:var(--md-primary);

    color:#fff;

}



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

@media(max-width:1200px){

.nav-soft{

display:none;

}

.search-soft{

width:220px;

}

.menu-toggle{

display:flex;

align-items:center;

justify-content:center;

}

}

@media(max-width:768px){

.topbar-soft{

display:none;

}

.header-soft-inner{

height:72px;

gap:16px;

}

.logo-soft img{

width:160px;

}

.search-soft{

display:none;

}

}
/*==================================================
            RESPONSIVE NAVBAR
==================================================*/

/* Laptop */
@media (max-width:1400px){

    .header-soft-inner{
        gap:28px;
    }

    .nav-soft{
        gap:2px;
    }

    .nav-soft a{
        padding:10px 14px;
        font-size:14px;
    }

    .search-soft{
        width:230px;
    }

}

/* Small Laptop */
@media (max-width:1200px){

    .header-soft-inner{

        height:74px;

        gap:20px;

    }

    .logo-soft img{

        width:170px;

    }

    .nav-soft{

        display:none;

    }

    .search-soft{

        flex:1;

        max-width:320px;

    }

    .menu-toggle{

        display:flex;

        align-items:center;

        justify-content:center;

    }

}

/* Tablet */
@media (max-width:992px){

    .topbar-soft{

        display:none;

    }

    .header-soft{

        padding:8px 0;

    }

    .header-soft-inner{

        height:auto;

        gap:15px;

    }

    .logo-soft img{

        width:155px;

    }

    .search-soft{

        max-width:220px;

        height:44px;

    }

    .icon-btn,
    .menu-toggle{

        width:44px;

        height:44px;

        border-radius:14px;

    }

}

/* Mobile */
@media (max-width:768px){

    .header-soft{

        padding:10px 0;

    }

    .header-soft-inner{

        gap:12px;

    }

    .logo-soft{

        flex:1;

    }

    .logo-soft img{

        width:150px;

    }

    .search-soft{

        display:none;

    }

    .header-actions{

        gap:10px;

    }

    .icon-btn,
    .menu-toggle{

        width:42px;

        height:42px;

        border-radius:12px;

    }

    .cart-badge{

        width:18px;

        height:18px;

        font-size:10px;

    }

}

/* Small Mobile */
@media (max-width:576px){

    .header-soft{

        padding:8px 0;

    }

    .container{

        padding-left:18px;

        padding-right:18px;

    }

    .logo-soft img{

        width:135px;

    }

    .header-actions{

        gap:8px;

    }

    .icon-btn,
    .menu-toggle{

        width:40px;

        height:40px;

    }

    .icon-btn i{

        font-size:16px;

    }

}

/* Extra Small */
@media (max-width:400px){

    .logo-soft img{

        width:120px;

    }

    .header-actions{

        gap:6px;

    }

    .icon-btn,
    .menu-toggle{

        width:36px;

        height:36px;

        border-radius:10px;

    }

    .icon-btn i{

        font-size:15px;

    }

    .cart-badge{

        width:16px;

        height:16px;

        font-size:9px;

    }

}

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

.mobile-menu{

    position:fixed;

    top:0;

    right:-100%;

    width:320px;

    max-width:85vw;

    height:100vh;

    background:#ffffff;

    z-index:99999;

    transition:right .35s ease;

    box-shadow:-20px 0 45px rgba(15,23,42,.12);

    overflow-y:auto;

}

/* Open state */

.mobile-menu.active{

    right:0;

}

/* Header */

.mobile-menu-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px;

    border-bottom:1px solid #eef2ff;

}

.mobile-menu-header img{

    width:150px;

}

.mobile-menu-header button{

    width:42px;

    height:42px;

    border:none;

    border-radius:12px;

    background:#f8fbff;

    color:var(--md-primary);

    cursor:pointer;

}

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

.mobile-nav{
    display:flex;
    flex-direction:column;
    padding:18px;
    gap:6px;
}

.mobile-nav a{
    display:flex;
    align-items:center;
    font-family:"Inter", sans-serif !important;

    padding:12px 14px;

    font-size:15px !important;
    font-weight:600;
    line-height:1.3;

    color:#475569;
    text-decoration:none;

    border-radius:10px;

    transition:.25s ease;
}

.mobile-nav a:hover,
.mobile-nav a.active{
    background:#eef2ff;
    color:var(--md-primary);
}


/*==================================================
        FINAL NAVBAR COLOR OVERRIDE
==================================================*/

/* Navigation */

.header-soft .nav-soft a,
.header-soft .nav-soft a:visited{

    color:#475569 !important;

}

.header-soft .nav-soft a:hover,
.header-soft .nav-soft a:focus,
.header-soft .nav-soft a.active{

    color:var(--md-primary) !important;

    background:#eef2ff !important;

}

/* Search */

.header-soft .search-soft{

    border:1px solid #dbe5ff !important;

    background:#f8fbff !important;

}

.header-soft .search-soft:focus-within{

    border-color:var(--md-primary) !important;

}

/* Icons */

.header-soft .icon-btn{

    background:#f8fbff !important;

    color:#475569 !important;

    border:1px solid #dbe5ff !important;

}

.header-soft .icon-btn:hover{

    background:var(--md-primary) !important;

    color:#fff !important;

}

.header-soft .icon-btn:hover i{

    color:#fff !important;

}

.header-soft .icon-btn i{

    color:inherit !important;

}

/* Cart Badge */

.header-soft .cart-badge{

    background:var(--md-primary) !important;

    color:#fff !important;

    border:2px solid #fff !important;

    box-shadow:0 6px 18px rgba(99,102,241,.30);

}

/* Mobile Menu */

.mobile-nav a{

    color:#475569 !important;

}

.mobile-nav a:hover{

    color:var(--md-primary) !important;

    background:#eef2ff !important;

}


.mobile-menu{

    inset:auto !important;

    left:auto !important;

    bottom:auto !important;

    right:-100% !important;

    top:0 !important;

    width:320px !important;

    max-width:85vw !important;

    height:100vh !important;

    transform:none !important;

    transition:right .35s ease !important;

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

}

.mobile-menu.active{

    right:0 !important;

}


/*==================================================
        FINAL NAVBAR OVERRIDE
==================================================*/

.nav-soft{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    flex-wrap:nowrap;
}

.nav-soft a{
    display:flex;
    align-items:center;
    justify-content:center;

    white-space:nowrap;
    flex-shrink:0;

    padding:10px 12px !important;

    font-size:13px !important;
    font-weight:600 !important;
    line-height:1;

    color:#475569 !important;
    text-decoration:none !important;

    background:transparent !important;
    border:none !important;
    border-radius:10px !important;

    box-shadow:none !important;
    transition:.25s ease;
}
/* Remove ALL old underline effects */

.nav-soft a::before,
.nav-soft a::after{
    display:none !important;
    content:none !important;
}

.nav-soft a:hover{
    background:#eef2ff !important;
    color:var(--md-primary) !important;
    text-decoration:none !important;
    box-shadow:none !important;
}

.nav-soft a.active,
.nav-soft a[aria-current="page"]{
    background:#eef2ff !important;
    color:var(--md-primary) !important;
}

.nav-soft a:hover,
.nav-soft a:focus,
.nav-soft a:active{
    border:none !important;
    outline:none !important;
}


/* Remove any gap between header and hero */

.header-soft{
    margin-bottom:0 !important;
}

.header-soft + .md-hero{
    margin-top:0 !important;
}

.md-hero{
    margin-top:0 !important;
    padding-top:15px;
}

.vb-card-price{
    color:#22c55e !important;
}














/*==================================================*/
/* Remove old hover effects */

.md-category-card::before,
.md-category-card::after,
.vb-cat-card::before,
.vb-cat-card::after{
    display:none !important;
}

.md-category-card:hover,
.vb-cat-card:hover{
    border-color:rgba(99,102,241,.25) !important;
    box-shadow:0 25px 60px rgba(15,23,42,.10) !important;
}

/*==================================================
        FINAL BLUE THEME OVERRIDE
==================================================*/

.vb-text-gradient{
    color:var(--md-primary) !important;
    background:none !important;
    -webkit-text-fill-color:var(--md-primary) !important;
}

.vb-current{
    color:var(--md-primary) !important;
}

.vb-current a{
    color:var(--md-primary) !important;
}

.vb-page-header .vb-headline span{
    color:var(--md-primary) !important;
}

.vb-page-header .vb-header-glow{
    background:
    radial-gradient(circle,
    rgba(99,102,241,.15),
    transparent 70%) !important;
}

.vb-btn-primary{
    background:var(--md-primary) !important;
    border-color:var(--md-primary) !important;
    color:#fff !important;
}

.vb-btn-primary:hover{
    background:var(--md-primary-hover) !important;
}

/*==================================
    FORCE SUCCESS BUTTON COLOR
==================================*/

.vb-success-actions .vb-btn-outline,
.vb-success-actions .vb-btn-outline:link,
.vb-success-actions .vb-btn-outline:visited,
.vb-success-actions .vb-btn-outline:hover,
.vb-success-actions .vb-btn-outline:active{

    color:var(--md-primary) !important;
    background:#fff !important;
    border:1px solid #dbe5ff !important;

}

.vb-success-actions .vb-btn-outline *{

    color:var(--md-primary) !important;

}

.vb-success-actions .vb-btn-outline i{

    color:var(--md-primary) !important;

}

/*==================================================
        LOGIN PAGE FINAL OVERRIDE
==================================================*/

/* Top icon */

.vb-auth-icon-blob{
    background:var(--md-primary-light) !important;
    color:var(--md-primary) !important;
}

.vb-auth-icon-blob i{
    color:var(--md-primary) !important;
}

/* Divider */

.vb-auth-divider span{
    color:var(--md-primary) !important;
    background:#fff !important;
}

/* Create account section */

.vb-secondary-text{
    color:var(--md-text-light) !important;
}

/* Outline button */

.vb-auth-secondary .vb-btn-outline,
.vb-auth-secondary .vb-btn-outline:link,
.vb-auth-secondary .vb-btn-outline:visited{
    color:var(--md-primary) !important;
    border:1px solid #dbe5ff !important;
    background:#fff !important;
}

.vb-auth-secondary .vb-btn-outline:hover{
    background:var(--md-primary-light) !important;
    color:var(--md-primary) !important;
}

.vb-auth-secondary .vb-btn-outline i{
    color:var(--md-primary) !important;
}