/*==================================================
    DIGI STONE - ROOT VARIABLES
==================================================*/

@font-face{
    font-family:"homa";
    src:url("../fonts/IRANYekanXVF.woff") format("woff");
    font-weight:100 900;
    font-style:normal;
    font-display:swap;
}

:root{

    /*==============================
        Typography
    ==============================*/

    --font-main:"homa",sans-serif;

    --fs-xs:.75rem;      /*12*/
    --fs-sm:.875rem;     /*14*/
    --fs-md:1rem;        /*16*/
    --fs-lg:1.125rem;    /*18*/
    --fs-xl:1.35rem;     /*22*/
    --fs-2xl:1.75rem;    /*28*/
    --fs-3xl:2.35rem;    /*38*/


    /*==============================
        Primary Colors
    ==============================*/

    --primary:#2563EB;
    --primary-light:#4F8CFF;
    --primary-dark:#1E40AF;

    --secondary:#0F172A;

    --success:#10B981;
    --warning:#F59E0B;
    --danger:#EF4444;


    /*==============================
        Text
    ==============================*/

    --text:#0F172A;
    --text-light:#475569;
    --text-muted:#94A3B8;
    --text-white:#FFFFFF;


    /*==============================
        Background
    ==============================*/

    --bg:#F5F7FB;
    --bg-light:#FFFFFF;
    --bg-dark:#E9EEF8;

    --section:#F8FAFC;


    /*==============================
        Glassmorphism
    ==============================*/

    --glass-bg:rgba(255,255,255,.58);

    --glass-bg-hover:rgba(255,255,255,.72);

    --glass-border:rgba(255,255,255,.55);

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

    --glass-blur:20px;


    /*==============================
        Border
    ==============================*/

    --border:#E2E8F0;

    --border-light:#F1F5F9;


    /*==============================
        Radius
    ==============================*/

    --radius-xs:8px;
    --radius-sm:12px;
    --radius-md:18px;
    --radius-lg:24px;
    --radius-xl:32px;
    --radius-round:999px;


    /*==============================
        Shadow
    ==============================*/

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

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

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


    /*==============================
        Transition
    ==============================*/

    --transition:.3s cubic-bezier(.4,0,.2,1);


    /*==============================
        Layout
    ==============================*/

    --container:1600px;

    --header-height:82px;

    --mobile-header:70px;

    --bottom-nav:78px;

}


/*==================================================
    RESET
==================================================*/
/*==================================================
            MINIMAL SCROLLBAR
==================================================*/

/* Firefox */
*{
    scrollbar-width: thin;
    scrollbar-color: #ffffff #edf2f7;
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar{

    width:6px;

    height:6px;

}

::-webkit-scrollbar-track{

    background:#edf2f7;

    border-radius:999px;

}

::-webkit-scrollbar-thumb{

    background:#ffffff;

    border-radius:999px;

    border:1px solid rgba(0,0,0,.05);

}

::-webkit-scrollbar-thumb:hover{

    background:#f8fafc;

}

::-webkit-scrollbar-corner{

    background:transparent;

}

/* حذف دکمه‌های ابتدا و انتهای اسکرول */
::-webkit-scrollbar-button{

    display:none;

    width:0;

    height:0;

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

html{

    scroll-behavior:smooth;

}

body{

    direction:rtl;

    font-family:var(--font-main);

    background:var(--bg);

    color:var(--text);

    overflow-x:hidden;

    font-feature-settings:"ss01";

}

img{

    display:block;

    max-width:100%;

}

a{

    text-decoration:none;

    color:inherit;

}

button{

    border:none;

    outline:none;

    cursor:pointer;

    font-family:inherit;

    background:none;

}

input,
textarea,
select{

    font-family:inherit;

    outline:none;

}

ul{

    list-style:none;

}

.container{

    width:min(var(--container),92%);

    margin:auto;

}

@media(max-width:1400px){

    .container{

        width:94%;

    }

}

@media(max-width:992px){

    .container{

        width:96%;

    }

}
.material-symbols-rounded{

    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;

    font-size:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    line-height:1;

    user-select:none;

}

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

.site-header{

    position:sticky;

    top:0;

    left:0;

    width:100%;

    z-index:9999;

}


/*==================================================
                Promo Bar
==================================================*/

.promo-bar{

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

    color:#fff;

    height:40px;

    display:flex;

    align-items:center;

}

.promo-bar .container{

    display:flex;

    justify-content:center;

    align-items:center;

}

.promo-bar p{

    font-size:.88rem;

    font-weight:500;

    letter-spacing:.2px;

}


/*==================================================
                Main Header
==================================================*/

.header-main{

    padding:14px 0;

    backdrop-filter:blur(var(--glass-blur));

    -webkit-backdrop-filter:blur(var(--glass-blur));

    background:var(--glass-bg);

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

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

    transition:all .35s ease;

}

.header-wrapper{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

}


/*==================================================
                Logo
==================================================*/

.header-logo{

    display:flex;

    align-items:center;

    gap:14px;

    flex-shrink:0;

}

.header-logo img{

    width:56px;

    height:56px;

    object-fit:contain;

}

.logo-text{

    display:flex;

    flex-direction:column;

    gap:4px;

}

.logo-text strong{

    font-size:1.15rem;

    font-weight:800;

    color:var(--text);

}

.logo-text span{

    font-size:.82rem;

    color:var(--text-muted);

}


/*==================================================
                Navigation
==================================================*/

.header-nav{

    flex:1;

    display:flex;

    justify-content:center;

}

.header-nav ul{

    display:flex;

    align-items:center;

    gap:8px;

}

.header-nav li{

    position:relative;

}

.header-nav li>a{

    display:flex;

    align-items:center;

    gap:3px;

    padding:12px 18px;

    border-radius:var(--radius-round);

    font-size:.95rem;

    font-weight:600;

    color:var(--text-light);

    transition:var(--transition);

}

.header-nav li>a:hover{

    color:var(--primary);

    background:rgba(37,99,235,.07);

}

.header-nav .material-symbols-rounded{

    font-size:18px;

}


/*==================================================
                Header Actions
==================================================*/

.header-actions{

    display:flex;

    align-items:center;

    gap:10px;

}


/*==================================================
                Icon Button
==================================================*/

.action-btn{

    width:48px;

    height:48px;

    border-radius:50%;

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

    backdrop-filter:blur(12px);

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

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

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--text-light);

    transition:all .28s ease;

}

.action-btn:hover{

    transform:translateY(-3px);

    color:var(--primary);

    background:#fff;

    box-shadow:0 12px 24px rgba(37,99,235,.15);

}

.action-btn .material-symbols-rounded{

    font-size:24px;

}


/*==================================================
            Contact Button
==================================================*/

.header-call{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    gap:10px;

    height:50px;

    padding:0 24px;

    border-radius:999px;

    color:#fff;

    font-size:.94rem;

    font-weight:700;

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

    box-shadow:

        0 10px 28px rgba(37,99,235,.30);

    transition:all .35s ease;

}


/* Shine Effect */

.header-call::before{

    content:"";

    position:absolute;

    top:0;

    right:-90%;

    width:55%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

}


/* Hover */

.header-call:hover{

    transform:translateY(-3px);

    box-shadow:

        0 18px 38px rgba(37,99,235,.38);

}


/* Shine Animation */

.header-call:hover::before{

    animation:shine .8s linear;

}


/* Pulse */

.header-call{

    animation:ctaPulse 3.5s infinite;

}


/* Icon */

.header-call .material-symbols-rounded{

    font-size:22px;

}


/*==================================================
                Animations
==================================================*/

@keyframes shine{

    from{

        right:-90%;

    }

    to{

        right:160%;

    }

}


@keyframes ctaPulse{

    0%{

        transform:scale(1);

        box-shadow:

            0 10px 28px rgba(37,99,235,.28);

    }

    50%{

        transform:scale(1.025);

        box-shadow:

            0 14px 34px rgba(37,99,235,.40);

    }

    100%{

        transform:scale(1);

        box-shadow:

            0 10px 28px rgba(37,99,235,.28);

    }

}/*==================================================
                MOBILE HEADER
==================================================*/


.mobile-header,
.mobile-bottom-nav,
.mobile-sheet,
.mobile-overlay,
.search-screen{

    display:none;

}

@media (max-width:991px){
    @media (max-width:991px){

.site-header{

    display:none;

}

.mobile-header{

    display:block;

}

.mobile-bottom-nav{

    display:flex;

}

.mobile-sheet{

    display:block;

}

.mobile-overlay{

    display:block;

}

.search-screen{

    display:flex;

}

body{

    padding-bottom:100px;

}

}

.mobile-header{

    display:block;

    position:fixed;

    top:12px;

    left:0;

    width:100%;

    z-index:1000;

    padding:0 14px;

}

.mobile-header-card{

    height:74px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 18px;

    border-radius:24px;

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

    backdrop-filter:blur(24px);

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

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

    box-shadow:

        0 15px 40px rgba(15,23,42,.08),

        inset 0 1px rgba(255,255,255,.55);

    transition:.35s;

}

.mobile-logo{

    display:flex;

    align-items:center;

    gap:14px;

}

.mobile-logo img{

    width:46px;

    height:46px;

    border-radius:4px;

}

.mobile-logo strong{

    display:block;

    font-size:1rem;

    font-weight:800;

    color:var(--text);

}

.mobile-logo span{

    display:block;

    margin-top:2px;

    font-size:.74rem;

    color:var(--text-muted);

}

.mobile-call{

    width:48px;

    height:48px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:16px;

    background:linear-gradient(135deg,#2563eb,#5ca4ff);

    color:#fff;

    box-shadow:0 10px 25px rgba(37,99,235,.25);

    transition:.3s;

}

.mobile-call:hover{

    transform:translateY(-3px);

}

.mobile-call .material-symbols-rounded{

    font-size:23px;

}


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

    .mobile-bottom-nav {
        width: 95%;
        position: fixed;
        left: 2.5%;
        right: 2.5%;
        bottom: 14px;
        height: 74px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        border-radius: 28px;
        background: rgba(255, 255, 255, .72);
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);
        border: 1px solid rgba(255, 255, 255, .75);
        box-shadow: 0 15px 45px rgba(15, 23, 42, .12), inset 0 1px rgba(255, 255, 255, .5);
        z-index: 1000;
    }

.nav-item{

    flex:1;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:4px;

    color:#7b8794;

    transition:.35s;

}

.nav-item .material-symbols-rounded{

    font-size:24px;

}

.nav-item small{

    font-size:.70rem;

    font-weight:600;

}

.nav-item.active{

    color:var(--primary);

}

.nav-item.active .material-symbols-rounded{

    font-variation-settings:'FILL' 1;

    transform:translateY(-2px);

}


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

.mobile-search-btn{

    position:absolute;

    left:50%;

    top:-22px;

    transform:translateX(-50%);

    width:66px;

    height:66px;

    border:none;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(135deg,#2563eb,#60a5fa);

    color:#fff;

    cursor:pointer;

    box-shadow:

        0 18px 35px rgba(37,99,235,.30),

        inset 0 1px rgba(255,255,255,.4);

    transition:.35s;

}

.mobile-search-btn:hover{

    transform:translateX(-50%) translateY(-5px) scale(1.04);

}

.mobile-search-btn .material-symbols-rounded{

    font-size:30px;

}


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

.mobile-sheet{

    position:fixed;

    left:0;

    right:0;

    bottom:-100%;

    background:#fff;

    border-radius:28px 28px 0 0;

    padding:18px;

    z-index:1100;

    transition:.45s;

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

}

.mobile-sheet.active{

    bottom:0;

}

.sheet-header{

    display:flex;

    justify-content:center;

    margin-bottom:18px;

}

.sheet-handle{

    width:60px;

    height:6px;

    border-radius:999px;

    background:#d1d5db;

}

.sheet-body{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.sheet-body a{

    display:flex;

    align-items:center;

    gap:16px;

    padding:16px;

    border-radius:16px;

    transition:.25s;

    color:var(--text);

    font-weight:600;

}

.sheet-body a:hover{

    background:#f3f8ff;

    color:var(--primary);

}

.sheet-body .material-symbols-rounded{

    font-size:24px;

}


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

.mobile-overlay{

    position:fixed;

    inset:0;

    background:rgba(15,23,42,.35);

    backdrop-filter:blur(5px);

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:1090;

}

.mobile-overlay.active{

    opacity:1;

    visibility:visible;

}


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

.mobile-header.scrolled .mobile-header-card{

    height:60px;

    border-radius:20px;

}

.mobile-header.scrolled .mobile-logo span{

    opacity:0;

    height:0;

    overflow:hidden;

}

}


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

@media(max-width:992px){

.site-header{

    display:none;

}

.mobile-header{

    display:block;

}

.mobile-bottom-nav{

    display:flex;

}

body{

    padding-bottom:100px;

}

}



@media(max-width:420px){

.mobile-bottom-nav{

    width:96%;

    bottom:10px;

    border-radius:24px;

}

.mobile-bottom-nav span{

    font-size:10px;

}

.mobile-bottom-nav .material-symbols-rounded{

    font-size:22px;

}

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

.hero{

    position:relative;

    overflow:hidden;

    padding:55px 0 70px;

    background:
        radial-gradient(circle at top right,#dbeafe 0%,transparent 35%),
        radial-gradient(circle at bottom left,#eff6ff 0%,transparent 42%),
        var(--bg);

}


/*==============================
        Background
==============================*/

.hero-grid{

    position:absolute;

    inset:0;

    pointer-events:none;

    background-image:
        linear-gradient(rgba(37,99,235,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(37,99,235,.035) 1px,transparent 1px);

    background-size:42px 42px;

    mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent);

}


.hero-blur{

    position:absolute;

    border-radius:50%;

    filter:blur(95px);

    opacity:.38;

    pointer-events:none;

}

.blur-1{

    width:340px;

    height:340px;

    top:-120px;

    right:-80px;

    background:#60a5fa;

}

.blur-2{

    width:300px;

    height:300px;

    bottom:-120px;

    left:-90px;

    background:#bfdbfe;

}


/*==============================
        Layout
==============================*/

.hero-wrapper{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:55% 45%;

    align-items:center;

    gap:40px;

}


.hero-content{

    max-width:640px;

    display:flex;

    flex-direction:column;

    gap:22px;

}


/*==============================
        Badge
==============================*/

.hero-badge{

    width:max-content;

    display:flex;

    align-items:center;

    gap:8px;

    padding:9px 16px;

    border-radius:999px;

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

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

    backdrop-filter:blur(18px);

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

    color:var(--primary);

    font-size:.84rem;

    font-weight:700;

}

.hero-badge .material-symbols-rounded{

    font-size:18px;

}


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

.hero-title{

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

    line-height:1.15;

    font-weight:900;

    color:var(--text);

}


.hero-title span{

    display:block;

    margin-top:10px;

    background:linear-gradient(90deg,var(--primary),#60a5fa);

    -webkit-background-clip:text;

    color:transparent;

}


.hero-description{

    max-width:620px;

    line-height:2.1;

    color:var(--text-light);

    font-size:1.05rem;

}


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

.hero-description{

    max-width:560px;

    color:var(--text-light);

    line-height:2;

    font-size:1rem;

}


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

.hero-buttons{

    display:flex;

    align-items:center;

    gap:14px;

    margin-top:6px;

}

.hero-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    height:52px;

    padding:0 24px;

    border-radius:16px;

    font-size:.92rem;

    font-weight:700;

    transition:.35s;

}


.hero-primary{

    position:relative;

    overflow:hidden;

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

    color:#fff;

    box-shadow:0 15px 30px rgba(37,99,235,.22);

}

.hero-primary::before{

    content:"";

    position:absolute;

    inset:0;

    left:-120%;

    background:linear-gradient(

        100deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

}

.hero-primary:hover{

    transform:translateY(-3px);

    box-shadow:0 20px 35px rgba(37,99,235,.28);

}

.hero-primary:hover::before{

    left:120%;

    transition:1s;

}


.hero-outline{

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

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

    backdrop-filter:blur(18px);

    color:var(--text);

}

.hero-outline:hover{

    background:#fff;

    transform:translateY(-3px);

}


/*==============================
        Features
==============================*/

.hero-features{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}


.feature-item{

    min-width:170px;

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 16px;

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

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

    backdrop-filter:blur(18px);

    border-radius:18px;

    transition:.35s;

}

.feature-item:hover{

    transform:translateY(-5px);

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

}

.feature-item .material-symbols-rounded{

    font-size:24px;

    color:var(--primary);

}

.feature-item strong{

    display:block;

    font-size:.92rem;

    margin-bottom:2px;

}

.feature-item small{

    color:var(--text-muted);

    font-size:.74rem;

}


/*==============================
        Tags
==============================*/

.hero-tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.hero-tags a{

    padding:10px 16px;

    border-radius:999px;

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

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

    backdrop-filter:blur(18px);

    color:var(--text-light);

    font-size:.88rem;

    transition:.3s;

}

.hero-tags a:hover{

    background:var(--primary);

    border-color:var(--primary);

    color:#fff;

    transform:translateY(-3px);

}/*==================================================
                HERO SHOWCASE
==================================================*/

.hero-showcase{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:540px;

}


/*==============================
        Main Card
==============================*/

.hero-card{

    position:relative;

    width:100%;

    max-width:430px;

    aspect-ratio:4/5;

    overflow:hidden;

    border-radius:30px;

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

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

    backdrop-filter:blur(24px);

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

    box-shadow:

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

        inset 0 1px rgba(255,255,255,.35);

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

}


/* نور بالای کارت */

.hero-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        180deg,

        rgba(255,255,255,.18),

        transparent 35%

    );

    z-index:2;

    pointer-events:none;

}


/* Glow پشت تصویر */

.hero-card::after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

    background:rgba(96,165,250,.22);

    filter:blur(70px);

    left:50%;

    top:50%;

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

    z-index:0;

}


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

.hero-image{

    position:relative;

    width:100%;

    height:100%;

    z-index:1;

}

.hero-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .8s ease;

}

.hero-card:hover img{

    transform:scale(1.05);

}


/*==================================================
            Floating Cards
==================================================*/

.floating-card{

    position:absolute;

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 16px;

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

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

    backdrop-filter:blur(20px);

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

    border-radius:18px;

    box-shadow:

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

    transition:.35s;

}

.floating-card:hover{

    transform:translateY(-4px);

}


.floating-card .material-symbols-rounded{

    color:var(--primary);

    font-size:24px;

}


.floating-card strong{

    display:block;

    font-size:.92rem;

    margin-bottom:2px;

}

.floating-card small{

    color:var(--text-muted);

    font-size:.76rem;

}


/*==============================
        Top Card
==============================*/

.top-card{

    top:35px;

    left:-35px;

}


/*==============================
        Bottom Card
==============================*/

.bottom-card{

    bottom:30px;

    right:-20px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:4px;

    min-width:220px;

}

.bottom-card h4{

    font-size:1rem;

    font-weight:800;

    color:var(--text);

}

.bottom-card p{

    font-size:.82rem;

    color:var(--text-muted);

    line-height:1.7;

}


/*==================================================
            Mini Card
==================================================*/

.hero-mini-card{

    position:absolute;

    top:145px;

    right:-25px;

    width:76px;

    height:76px;

    border-radius:22px;

    background:linear-gradient(

        135deg,

        var(--primary),

        #5b9bff

    );

    color:#fff;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    font-size:.78rem;

    font-weight:700;

    box-shadow:

        0 18px 35px rgba(37,99,235,.25);

}

.hero-mini-card span{

    display:block;

    font-size:1.4rem;

    line-height:1;

    margin-bottom:3px;

}


/*==================================================
            Hover
==================================================*/

.hero-showcase:hover .top-card{

    transform:translateY(-6px);

}

.hero-showcase:hover .bottom-card{

    transform:translateY(6px);

}

.hero-showcase:hover .hero-mini-card{

    transform:rotate(8deg);

}


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

@keyframes heroFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

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

@media (max-width:991px){

    .hero{

        padding:30px 0 40px;

    }

    .hero-wrapper{

        display:flex;

        flex-direction:column-reverse;

        gap:28px;

        text-align:center;

    }

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

    .hero-content{

        max-width:100%;

        align-items:center;

        gap:18px;

    }

    .hero-badge{

        margin:auto;

        padding:8px 14px;

        font-size:.8rem;

    }

    .hero-title{

        font-size:clamp(2rem,7vw,2.7rem);

        line-height:1.25;

        letter-spacing:0;

    }

    .hero-title span{

        margin-top:2px;

    }

    .hero-description{

        max-width:95%;

        font-size:.92rem;

        line-height:1.9;

    }

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

    .hero-buttons{

        width:100%;

        justify-content:center;

    }

    .hero-outline{

        display:none;

    }

    .hero-primary{

        width:100%;

        max-width:320px;

        height:50px;

        border-radius:15px;

    }

    /*==============================
            Features
    ==============================*/

    .hero-features{

        width:100%;

        display:grid;

        grid-template-columns:1fr;

        gap:10px;

    }

    .feature-item{

        width:100%;

        min-width:0;

        justify-content:flex-start;

        padding:14px 16px;

        border-radius:16px;

    }

    .feature-item strong{

        font-size:.88rem;

    }

    .feature-item small{

        display:none;

    }

    /*==============================
            Tags
    ==============================*/

    .hero-tags{

        width:100%;

        flex-wrap:nowrap;

        overflow-x:auto;

        gap:10px;

        padding-bottom:6px;

        scrollbar-width:none;

    }

    .hero-tags::-webkit-scrollbar{

        display:none;

    }

    .hero-tags a{

        flex:none;

        white-space:nowrap;

        padding:10px 15px;

        font-size:.85rem;

    }

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

    .hero-showcase{

        min-height:auto;

        height:auto;
        padding-top: 70px;

    }

    .hero-card{

        max-width:300px;

        width:100%;

        border-radius:26px;
        aspect-ratio: 0;

    }

    /* حذف کارت های شناور */

    .floating-card,

    .hero-mini-card{

        display:none;

    }

    /*==============================
            Background
    ==============================*/

    .hero-grid{

        opacity:.4;

    }

    .hero-blur{

        opacity:.22;

        filter:blur(70px);

    }

}
/*==================================================
                SEARCH SCREEN
==================================================*/

.search-screen{

    position:fixed;

    inset:0;

    z-index:3000;

    display:flex;

    justify-content:center;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    background:rgba(245,247,251,.72);

    backdrop-filter:blur(22px);

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

    transition:.35s;

}

.search-screen.active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}


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

.search-container{

    width:100%;

    max-width:760px;

    height:100vh;

    display:flex;

    flex-direction:column;

    overflow:hidden;

}


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

.search-top{

    position:sticky;

    top:0;

    z-index:5;

    display:flex;

    align-items:center;

    gap:12px;

    padding:18px 18px 14px;

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

    backdrop-filter:blur(24px);

    border-bottom:1px solid rgba(15,23,42,.06);

}


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

.search-back{

    width:48px;

    height:48px;

    border:none;

    border-radius:16px;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    transition:.3s;

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

}

.search-back:hover{

    transform:translateY(-2px);

}

.search-back .material-symbols-rounded{

    font-size:22px;

}


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

.search-box{

    flex:1;

    height:56px;

    display:flex;

    align-items:center;

    gap:12px;

    padding:0 18px;

    background:#fff;

    border-radius:18px;

    border:2px solid transparent;

    transition:.3s;

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

}

.search-box:focus-within{

    border-color:var(--primary);

    box-shadow:

        0 0 0 5px rgba(37,99,235,.08),

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

}

.search-box input{

    flex:1;

    border:none;

    outline:none;

    background:none;

    font:inherit;

    font-size:.95rem;

}

.search-box .material-symbols-rounded{

    color:#64748b;

}

.search-box button{

    width:34px;

    height:34px;

    border:none;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#f1f5f9;

    cursor:pointer;

}


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

#searchDefault,

#searchResults{

    flex:1;

    overflow:auto;

    padding:22px 18px 120px;

}


/*==================================================
                BLOCK
==================================================*/

.search-block{

    margin-bottom:34px;

}

.search-block h4{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:1rem;

    font-weight:800;

    margin-bottom:18px;

}

.search-block h4 .material-symbols-rounded{

    color:var(--primary);

}


/*==================================================
                TAGS
==================================================*/

.popular-tags{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.popular-tags button{

    border:none;

    padding:12px 18px;

    border-radius:999px;

    background:#fff;

    cursor:pointer;

    transition:.3s;

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

}

.popular-tags button:hover{

    background:var(--primary);

    color:#fff;

    transform:translateY(-3px);

}


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

.recent-list{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.recent-list a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:15px 18px;

    background:#fff;

    border-radius:18px;

    transition:.25s;

}

.recent-list a:hover{

    transform:translateX(-6px);

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

}


/*==================================================
                RESULT GROUP
==================================================*/

.result-group{

    margin-bottom:32px;

}

.group-title{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:14px;

    font-weight:800;

}

.group-title span{

    padding:4px 12px;

    border-radius:999px;

    background:#eff6ff;

    color:var(--primary);

    font-size:.8rem;

}


/*==================================================
                RESULT ITEM
==================================================*/

.result-item{

    display:flex;

    align-items:center;

    gap:16px;

    padding:15px;

    border-radius:18px;

    transition:.3s;

}

.result-item:hover{

    background:#fff;

    transform:translateX(-8px);

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

}


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

.result-icon{

    width:52px;

    height:52px;

    border-radius:16px;

    display:flex;

    justify-content:center;

    align-items:center;

    flex:none;

}

.result-icon span{

    font-size:26px;

    color:#fff;

}

.result-icon.product{

    background:#2563eb;

}

.result-icon.store{

    background:#10b981;

}

.result-icon.mine{

    background:#f59e0b;

}

.result-icon.category{

    background:#8b5cf6;

}

.result-icon.article{

    background:#ef4444;

}


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

.result-content{

    flex:1;

}

.result-content strong{

    display:block;

    font-size:.95rem;

    margin-bottom:4px;

}

.result-content small{

    color:#64748b;

}


/*==================================================
                SCROLLBAR
==================================================*/

#searchDefault::-webkit-scrollbar,

#searchResults::-webkit-scrollbar{

    width:3px;

}

#searchDefault::-webkit-scrollbar-thumb,

#searchResults::-webkit-scrollbar-thumb{

    background:#dbe4ef;

    border-radius:999px;

}


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

@media(max-width:768px){

.search-top{

    padding:14px;

}

.search-box{

    height:52px;

}

.search-back{

    width:44px;

    height:44px;

}

.result-icon{

    width:46px;

    height:46px;

}

.popular-tags{

    overflow:auto;

    flex-wrap:nowrap;

    padding-bottom:4px;

}

.popular-tags button{

    white-space:nowrap;

    flex:none;

}

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

.categories-section{

    padding:20px 0;

    overflow:hidden;

}


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

.section-header{

    display:flex;

    align-items:end;

    justify-content:space-between;

    margin-bottom:40px;

    gap:20px;

}

.section-badge{

    display:inline-flex;

    align-items:center;

    height:36px;

    padding:0 16px;

    border-radius:999px;

    background:#eff6ff;

    color:var(--primary);

    font-size:.82rem;

    font-weight:700;

    margin-bottom:14px;

}

.section-header h2{

    font-size:2rem;

    color:var(--text);

    font-weight:900;

}

.section-more{

    display:flex;

    align-items:center;

    gap:8px;

    color:var(--primary);

    font-weight:700;

    transition:.3s;

}

.section-more .material-symbols-rounded{

    font-size:20px;

    transition:.3s;

}

.section-more:hover{

    gap:14px;

}


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

.categories-slider{

    display:flex;

    gap:26px;

    overflow-x:auto;

    overflow-y:hidden;

    scroll-behavior:smooth;

    cursor:grab;

    padding:12px 4px 22px;

    user-select:none;

    

    -ms-overflow-style:none;

}

.categories-slider::-webkit-scrollbar{

    

}

.categories-slider.dragging{

    cursor:grabbing;

    scroll-behavior:auto;

}

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

.category-card{

    flex:none;

    width:330px;

    height:125px;

    display:flex;

    align-items:center;

    gap:18px;

    padding:14px;

    background:#fff;

    border-radius:24px;

    border:1px solid rgba(15,23,42,.05);

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

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.category-card:hover{

    transform:translateY(-8px);

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

}


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

.category-image{

    position:relative;

    width:96px;

    height:96px;

    flex:none;

    border-radius:18px;

    overflow:hidden;

}

.category-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.45s;

}

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

    transform:scale(1.08);

}


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

.category-badge{

    position:absolute;

    top:8px;

    right:8px;

    padding:4px 8px;

    font-size:.65rem;

    border-radius:999px;

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

    color:var(--primary);

    font-weight:700;

}


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

.category-content{

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:10px;

    min-width:0;

}

.category-content h3{

    margin:0;

    font-size:1.08rem;

    font-weight:800;

    color:var(--text);

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}


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

.category-link{

    display:flex;

    align-items:center;

    gap:6px;

    width:max-content;

    color:var(--primary);

    font-size:.88rem;

    font-weight:700;

}

.category-link .material-symbols-rounded{

    font-size:18px;

    transition:.3s;

}

.category-card:hover .category-link .material-symbols-rounded{

    transform:translateX(-5px);

}

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

.category-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:26px;

    pointer-events:none;

    opacity:0;

    transition:.35s;

    box-shadow:

        inset 0 0 0 1px rgba(37,99,235,.15),

        0 0 50px rgba(37,99,235,.10);

}

.category-card{

    position:relative;

}

.category-card:hover::after{

    opacity:1;

}


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

@media(max-width:1200px){

.category-card{

    width:310px;

}

}

@media(max-width:768px){

.categories-section{

    padding:15px 0;

}

.section-header{

    margin-bottom:18px;

}

.section-header h2{

    font-size:1.4rem;

}

.section-more{

    display:none;

}

.categories-slider{

    gap:10px;

    padding-inline:6px;

}

.category-card{

    width:220px;

}

.category-image{

    height:100px;

}

.category-content{

    padding:10px;

}

.category-content h3{

    font-size:1.05rem;

    margin-bottom:8px;

}

.category-card{

    width:220px;

    height:100px;

    gap:8px;

    padding:8px;

}

.category-image{

    width:70px;

    height:70px;

    border-radius:14px;

}

.category-content h3{

    font-size:.85rem;

}

.category-link{

    font-size:.7rem;

}
.category-badge{display: none;}

}


/*==================================================
        DRAGGING
==================================================*/

.categories-slider.dragging{

    cursor:grabbing;

}

.categories-slider.dragging *{

    user-select:none;

    -webkit-user-select:none;

    pointer-events:none;

}

.categories-slider img{

    pointer-events:none;

    user-drag:none;

    -webkit-user-drag:none;

    -webkit-user-select:none;

}

.categories-slider a{

    -webkit-user-drag:none;

}

.categories-slider{

    cursor:grab;

}
/*==================================================
                PRODUCTS SECTION
==================================================*/

.products-section{

    position:relative;

    padding:20px 0;

    overflow:hidden;

}


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

.products-section .section-header{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:30px;

    margin-bottom:36px;

}

.products-section .section-header h2{

    margin:10px 0 12px;

    font-size:2rem;

    font-weight:900;

    color:var(--text);

}

.products-section .section-header p{

    max-width:520px;

    color:var(--text-light);

    line-height:1.9;

    font-size:.95rem;

}

.products-section .section-more{

    flex:none;

}


/*==================================================
                PRODUCT SLIDER
==================================================*/

.products-slider{

    display:flex;

    gap:22px;

    overflow-x:auto;

    overflow-y:hidden;

    scroll-behavior:smooth;

    cursor:grab;

    user-select:none;

    padding:10px 4px 18px;

    

    -ms-overflow-style:none;

}

.products-slider::-webkit-scrollbar{

   

}

.products-slider.dragging{

    cursor:grabbing;

    scroll-behavior:auto;

}

.products-slider.dragging *{

    pointer-events:none;

    user-select:none;

    -webkit-user-select:none;

}


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

.product-card{

    flex:none;

    width:290px;

}


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

@media(max-width:991px){

.products-section{

    padding:15px 0;

}

.products-section .section-header{

    margin-bottom:28px;

}

.products-section .section-header h2{

    font-size:1.7rem;

}

.products-section .section-header p{

    font-size:.88rem;

    max-width:100%;

}

.product-card{

    width:265px;

}

.products-slider{

    gap:18px;

}

}

@media(max-width:768px){

.products-section .section-more{

    display:none;

}

.products-section .section-header{

    align-items:flex-start;

}

.products-section .section-header h2{

    font-size:1.45rem;

}

.products-section .section-header p{

    margin-top:4px;

    line-height:1.8;

}

.product-card{

    width:240px;

}

.products-slider{

    padding-inline:6px;

    gap:16px;

}

}

@media(max-width:480px){

.product-card{

    width:220px;

}

.products-section{

    padding:15px 0;

}

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

.product-card{

    position:relative;

    flex:none;

    width:245px;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    border-radius:26px;

    background:#fff;

    border:1px solid rgba(15,23,42,.06);

    box-shadow:
        0 8px 22px rgba(15,23,42,.05),
        0 20px 45px rgba(15,23,42,.04);

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

}

.product-card:hover{

    transform:translateY(-5px);

    border-color:rgba(37,99,235,.14);

    box-shadow:
        0 18px 40px rgba(15,23,42,.08),
        0 30px 60px rgba(37,99,235,.08);

}


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

.product-image{

    position:relative;

    aspect-ratio:1/1;

    overflow:hidden;

    background:#f8fafc;

}

.product-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .55s ease;

}

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

    transform:scale(1.05);

}


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

.product-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(to top,
        rgba(15,23,42,.05),
        transparent 45%);

    opacity:0;

    transition:.35s;

}

.product-card:hover .product-image::after{

    opacity:1;

}


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

.product-badges{

    position:absolute;

    top:14px;

    left:14px;

    right:14px;

    display:flex;

    justify-content:space-between;

    z-index:5;

}

.discount-badge{

    height:30px;

    padding:0 12px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:999px;

    background:#ef4444;

    color:#fff;

    font-size:.78rem;

    font-weight:800;

}

.discount-badge.empty{

    opacity:0;

}

.status-badge{

    height:30px;

    padding:0 12px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:999px;

    backdrop-filter:blur(12px);

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

    color:var(--text);

    font-size:.75rem;

    font-weight:700;

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

}

.status-badge.available{

    color:#16a34a;

}

.status-badge.preorder{

    color:#2563eb;

}

.status-badge.unavailable{

    color:#dc2626;

}


/*==================================================
                BODY
==================================================*/

.product-body{

    display:flex;

    flex-direction:column;

    gap:14px;

    padding:20px;

}


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

.product-title{

    margin:0;

    color:var(--text);

    font-size:1.02rem;

    font-weight:800;

    line-height:1.8;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

    min-height:58px;

}


/*==================================================
                META
==================================================*/

.product-meta{

    display:flex;

    align-items:center;

    gap:10px;

    color:var(--text-muted);

    font-size:.82rem;

}

.product-meta .dot{

    width:4px;

    height:4px;

    border-radius:50%;

    background:#cbd5e1;

}


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

.product-price{

    margin-top:auto;

    display:flex;

    flex-direction:column;

    gap:6px;

}

.old-price{

    min-height:20px;

    color:#ef4444;

    font-size:.82rem;

    text-decoration:line-through;

}

.old-price.empty{

    visibility:hidden;

}

.new-price{

    color:var(--primary);

    font-size:1.18rem;

    font-weight:900;

}


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

.product-card::before{

    content:"";

    position:absolute;

    top:0;

    right:0;

    width:0;

    height:3px;

    background:linear-gradient(90deg,#60a5fa,var(--primary));

    transition:.35s;

    z-index:6;

}

.product-card:hover::before{

    width:100%;

}


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

@media(max-width:991px){

.product-card{

    width:245px;

}

.product-body{

    padding:18px;

}

}

@media(max-width:768px){

.product-card{

    width:202px;

    border-radius:22px;

}

.product-body{

    padding:8px;

    gap:8px;

}

.product-title{

    font-size:.85rem;

    min-height:54px;

}

.new-price{

    font-size:1.05rem;

}

.status-badge,
.discount-badge{

    height:28px;

    font-size:.72rem;

    padding:0 10px;

}

}


@media(max-width:390px){
.product-card{

    width:180px;

    border-radius:22px;

}

}/*==================================================
                STONE SLIDER
==================================================*/

.stone-gallery{

    padding:10px 0;

}

.stoneSwiper{

    overflow:hidden;

    border-radius:24px;

}

.stone-slide{

    display:block;

    overflow:hidden;

    border-radius:24px;

}

.stone-slide img{

    display:block;

    width:100%;

    aspect-ratio:25 / 8 ;

    object-fit:cover;

    transition:transform .5s ease;

}

.stone-slide:hover img{

    transform:scale(1.02);

}


/*==================================================
                PAGINATION
==================================================*/

.stone-pagination{

    position:relative;

    margin-top:22px;

}

.stone-pagination .swiper-pagination-bullet{

    width:8px;

    height:8px;

    margin:0 5px !important;

    opacity:1;

    background:#d1d5db;

    border-radius:999px;

    transition:.35s;

}

.stone-pagination .swiper-pagination-bullet-active{

    width:28px;

    background:var(--primary);

}


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

@media(max-width:992px){

.stone-gallery{

    padding:10px 0;

}

.stoneSwiper,

.stone-slide{

    border-radius:20px;

}

}

@media(max-width:768px){

.stoneSwiper,

.stone-slide{

    border-radius:18px;

}

.stone-pagination{

    margin-top:18px;

}

}

@media(max-width:480px){

.stone-slide img{

    aspect-ratio:16 / 6;

}

}
/*==================================================
                    PROJECTS
==================================================*/

.projects{

    padding:15px 0;

    position:relative;

}

.projects-slider{

    display:flex;

    gap:22px;

    overflow-x:auto;

    overflow-y:hidden;

    scroll-behavior:smooth;

    scroll-snap-type:x proximity;

    

    -ms-overflow-style:none;

    padding:10px 2px 15px;

    cursor:grab;

}

.projects-slider::-webkit-scrollbar{

    

}

.projects-slider.dragging{

    cursor:grabbing;

    scroll-behavior:auto;

}

.projects-slider.dragging *{

    user-select:none;

    pointer-events:none;

}


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

.project-card{

    flex:none;

    width:310px;

    border-radius:28px;

    text-decoration:none;

    background:#fff;

    border:1px solid rgba(15,23,42,.06);

    overflow:hidden;

    transition:.35s;

    scroll-snap-align:start;

    box-shadow:

        0 12px 35px rgba(15,23,42,.05);

}

.project-card:hover{

    transform:translateY(-8px);

    border-color:rgba(37,99,235,.12);

    box-shadow:

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

}


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

.project-thumb{

    position:relative;

    margin:12px;

    border-radius:22px;

    overflow:hidden;

    aspect-ratio:4/3;

    background:#eef3f8;

}

.project-thumb img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.7s;

}

.project-card:hover img{

    transform:scale(1.08);

}


/*==================================================
                    GRADIENT
==================================================*/

.project-thumb::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        to top,

        rgba(15,23,42,.55),

        rgba(15,23,42,0)

    );

    opacity:.65;

    transition:.35s;

}

.project-card:hover .project-thumb::before{

    opacity:.9;

}


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

.project-type{

    position:absolute;

    right:16px;

    bottom:16px;

    padding:9px 15px;

    border-radius:999px;

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

    backdrop-filter:blur(18px);

    color:var(--primary);

    font-size:.78rem;

    font-weight:700;

}


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

.project-content{

    padding:8px 22px 22px;

}

.project-content h3{

    font-size:1.08rem;

    color:var(--text);

    font-weight:800;

    line-height:1.8;

    margin-bottom:12px;

    transition:.3s;

}

.project-card:hover h3{

    color:var(--primary);

}


/*==================================================
                    LOCATION
==================================================*/

.project-location{

    display:flex;

    align-items:center;

    gap:8px;

    color:var(--text-muted);

    margin-bottom:20px;

    font-size:.9rem;

}

.project-location .material-symbols-rounded{

    font-size:19px;

    color:var(--primary);

}


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

.project-more{

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-top:1px solid #eef2f7;

    padding-top:18px;

    color:var(--primary);

    font-weight:700;

}

.project-more .material-symbols-rounded{

    transition:.35s;

    font-size:20px;

}

.project-card:hover .project-more .material-symbols-rounded{

    transform:translateX(6px);

}


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

@media(max-width:992px){

.project-card{

    width:270px;

}

}

@media(max-width:768px){

.projects{

    padding:10px 0;

}

.projects-slider{

    gap:18px;

}

.project-card{

    width:230px;

}

.project-thumb{

    margin:10px;

    border-radius:18px;

}

.project-content{

    padding:4px 16px 18px;

}

.project-content h3{

    font-size:.95rem;

}

.project-location{

    font-size:.82rem;

}

}

@media(max-width:480px){

.project-card{

    width:195px;

}

}

/*==================================================
                    WHY US
==================================================*/

.why-us{

    padding:90px 0;

    position:relative;

}

.why-grid{

    display:grid;

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

    gap:22px;

}


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

.why-card{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:18px;

    min-height:190px;

    padding:24px;

    background:#fff;

    border:1px solid rgba(15,23,42,.06);

    border-radius:26px;

    overflow:hidden;

    transition:.35s;

    box-shadow:

        0 12px 35px rgba(15,23,42,.05);

}

.why-card:hover{

    transform:translateY(-8px);

    border-color:rgba(37,99,235,.12);

    box-shadow:

        0 25px 55px rgba(15,23,42,.10);

}


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

.why-icon{

    width:62px;

    height:62px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:20px;

    background:#eff6ff;

    color:var(--primary);

    transition:.35s;

}

.why-icon .material-symbols-rounded{

    font-size:30px;

}

.why-card:hover .why-icon{

    background:var(--primary);

    color:#fff;

    transform:rotate(-8deg);

}


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

.why-content{

    width:100%;

}

.why-content h3{

    margin:0 0 10px;

    font-size:1.08rem;

    font-weight:800;

    color:var(--text);

    transition:.3s;

}

.why-card:hover h3{

    color:var(--primary);

}

.why-content p{

    margin:0;

    color:var(--text-muted);

    line-height:1.9;

    font-size:.92rem;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

}


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

.why-card::after{

    content:"";

    position:absolute;

    top:0;

    right:0;

    width:0;

    height:3px;

    background:linear-gradient(90deg,#2563eb,#60a5fa);

    transition:.35s;

}

.why-card:hover::after{

    width:100%;

}


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

@media(max-width:1200px){

.why-grid{

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

}

}

@media(max-width:992px){

.why-us{

    padding:10px 0;

}
.why-grid{

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

    gap:16px;

}

.why-card{

    min-height:170px;

    padding:18px;

}

.why-icon{

    width:54px;

    height:54px;

}

.why-icon .material-symbols-rounded{

    font-size:26px;

}

.why-content h3{

    font-size:.95rem;

}

.why-content p{

    font-size:.82rem;

}

}

@media(max-width:576px){

.why-card{

    min-height:160px;

    padding:16px;

}

.why-content h3{

    font-size:.88rem;

}

.why-content p{

    font-size:.78rem;

    line-height:1.8;

}

}

@media(max-width:576px){

.why-grid{

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

    gap:12px;

}

.why-card{

    flex-direction:column;

    align-items:flex-start;

    justify-content:flex-start;

    min-height:165px;

    padding:16px;

    gap:12px;

}

.why-icon{

    width:50px;

    height:50px;

    border-radius:16px;

}

.why-icon .material-symbols-rounded{

    font-size:22px;

}

.why-content h3{

    font-size:.90rem;

    line-height:1.7;

}

.why-content p{

    font-size:.78rem;

    line-height:1.7;

}

}
/*==================================================
                WHY AUTO ANIMATION
==================================================*/

@keyframes whyPulse{

    0%,
    20%{

        transform:scale(1);

        background:#fff;

        border-color:rgba(15,23,42,.06);

    }

    8%{

        transform:scale(1.03);

        background:#f4f8ff;

        border-color:rgba(37,99,235,.18);

        box-shadow:
            0 20px 45px rgba(37,99,235,.10),
            0 12px 30px rgba(15,23,42,.08);

    }

}

@keyframes whyIcon{

    8%{

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

    }

}

@keyframes whyTitle{

    8%{

        color:var(--primary);

    }

}

@keyframes whyLine{

    8%{

        width:100%;

    }

}
.why-card{

    animation:whyPulse 12s infinite;

}

.why-card:nth-child(2){

    animation-delay:3s;

}

.why-card:nth-child(3){

    animation-delay:6s;

}

.why-card:nth-child(4){

    animation-delay:9s;

}
.why-icon{

    animation:whyIcon 12s infinite;

}

.why-card:nth-child(2) .why-icon{

    animation-delay:3s;

}

.why-card:nth-child(3) .why-icon{

    animation-delay:6s;

}

.why-card:nth-child(4) .why-icon{

    animation-delay:9s;

}
.why-content h3{

    animation:whyTitle 12s infinite;

}

.why-card:nth-child(2) h3{

    animation-delay:3s;

}

.why-card:nth-child(3) h3{

    animation-delay:6s;

}

.why-card:nth-child(4) h3{

    animation-delay:9s;

}
.why-card::after{

    animation:whyLine 12s infinite;

}

.why-card:nth-child(2)::after{

    animation-delay:3s;

}

.why-card:nth-child(3)::after{

    animation-delay:6s;

}

.why-card:nth-child(4)::after{

    animation-delay:9s;

}

/*==================================================
                FACTORY VIDEO
==================================================*/

.factory-video{

    position: relative;

    padding: 90px 0;

    overflow: hidden;

}

.factory-video::before{

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    top: -220px;

    right: -160px;

    border-radius: 50%;

    background: #dbeafe;

    filter: blur(120px);

    opacity: .55;

    pointer-events: none;

}

.factory-video::after{

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    bottom: -180px;

    left: -120px;

    border-radius: 50%;

    background: #eff6ff;

    filter: blur(120px);

    opacity: .9;

    pointer-events: none;

}


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

.factory-video-box{

    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 50px;

    align-items: center;

}


/*==================================================
                VIDEO
==================================================*/

.factory-video-media{

    position: relative;

}

.factory-video-media video{

    width: 100%;

    display: block;

    border-radius: 28px;

    overflow: hidden;

    background: #000;

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

    box-shadow:

        0 18px 45px rgba(15,23,42,.08),

        0 40px 90px rgba(15,23,42,.08);

    transition: .35s;

}

.factory-video-media:hover video{

    transform: translateY(-6px);

    box-shadow:

        0 25px 55px rgba(15,23,42,.10),

        0 55px 110px rgba(15,23,42,.12);

}


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

.factory-video-content{

    display: flex;

    flex-direction: column;

    gap: 22px;

}

.factory-video-content h2{

    font-size: clamp(2rem,3vw,2.9rem);

    line-height: 1.35;

    color: var(--text);

    font-weight: 900;

}

.factory-video-content p{

    color: var(--text-light);

    line-height: 2.15;

    font-size: 1rem;

}


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

.video-feature-list{

    display: grid;

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

    gap: 14px;

    margin-top: 8px;

}

.video-feature{

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 16px 18px;

    border-radius: 18px;

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

    backdrop-filter: blur(18px);

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

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

    transition: .3s;

}

.video-feature:hover{

    transform: translateY(-5px);

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

}

.video-feature .material-symbols-rounded{

    font-size: 22px;

    color: var(--primary);

}

.video-feature span:last-child{

    font-size: .94rem;

    color: var(--text);

    font-weight: 600;

}


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

@media(max-width:991px){

.factory-video{

    padding: 70px 0;

}

.factory-video-box{

    grid-template-columns: 1fr;

    gap: 35px;

}

.factory-video-media{

    order: 1;

}

.factory-video-content{

    order: 2;

}

.factory-video-content h2{

    font-size: 1.8rem;

}

.video-feature-list{

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

}

}


@media(max-width:576px){

.factory-video{

    padding: 60px 0;

}

.factory-video-media video{

    border-radius: 22px;

}

.factory-video-content{

    gap: 18px;

}

.factory-video-content h2{

    font-size: 1.45rem;

}

.factory-video-content p{

    font-size: .92rem;

    line-height: 2;

}

.video-feature-list{

    grid-template-columns: 1fr;

}

.video-feature{

    padding: 14px 16px;

    border-radius: 16px;

}

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

.customer-reviews{

    position:relative;

    padding:15px 0;

    overflow:hidden;

}

.customer-reviews::before{

    content:"";

    position:absolute;

    top:-180px;

    left:-120px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:#dbeafe;

    filter:blur(120px);

    opacity:.45;

    pointer-events:none;

}

.customer-reviews::after{

    content:"";

    position:absolute;

    bottom:-220px;

    right:-120px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:#eff6ff;

    filter:blur(120px);

    opacity:.9;

    pointer-events:none;

}


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

.review-slider{

    position:relative;

    z-index:2;

    display:flex;

    gap:24px;

    overflow-x:auto;

    overflow-y:hidden;

    padding:8px 4px 18px;

    scroll-behavior:smooth;

    cursor:grab;

    user-select:none;

    -webkit-user-select:none;

}

.review-slider:active{

    cursor:grabbing;

}

.review-slider>*{

    user-select:none;

    -webkit-user-drag:none;

}


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

.review-card{

    flex:0 0 285px;

    background:#fff;

    border-radius:28px;

    overflow:hidden;

    border:1px solid rgba(37,99,235,.08);

    box-shadow:

        0 10px 30px rgba(15,23,42,.05),

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

    transition:.35s;

}

.review-card:hover{

    transform:translateY(-8px);

    box-shadow:

        0 18px 40px rgba(15,23,42,.08),

        0 35px 80px rgba(15,23,42,.08);

}


/*==================================================
                VIDEO
==================================================*/

.review-card video{

    display:block;

    width:100%;

    aspect-ratio:9/16;

    object-fit:cover;

    background:#000;

}


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

.review-info{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:14px;

    padding:18px;

}

.review-info h3{

    font-size:1rem;

    font-weight:800;

    color:var(--text);

    margin-bottom:5px;

}

.review-info p{

    font-size:.86rem;

    color:var(--text-muted);

}


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

.review-badge{

    display:flex;

    align-items:center;

    gap:6px;

    white-space:nowrap;

    padding:8px 12px;

    border-radius:999px;

    background:#eff6ff;

    color:var(--primary);

    font-size:.76rem;

    font-weight:700;

}

.review-badge .material-symbols-rounded{

    font-size:18px;

    font-variation-settings:'FILL' 1;

}


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

@media(max-width:991px){

.review-card{

    flex:0 0 250px;

}

}

@media(max-width:576px){

.customer-reviews{

    padding:10px 0;

}

.review-slider{

    gap:18px;

}

.review-card{

    flex:0 0 220px;

    border-radius:22px;

}

.review-info{

    padding:14px;

}

.review-info h3{

    font-size:.95rem;

}

.review-badge{

    padding:7px 10px;

    font-size:.72rem;

}

}
/*==================================================
                FACTORY GROUP
==================================================*/

.factory-group{

    position:relative;

    padding:15px 0;

    overflow:hidden;

}

.factory-group::before{

    content:"";

    position:absolute;

    top:-180px;

    right:-120px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:#dbeafe;

    filter:blur(120px);

    opacity:.45;

    pointer-events:none;

}

.factory-group::after{

    content:"";

    position:absolute;

    bottom:-220px;

    left:-120px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:#eff6ff;

    filter:blur(120px);

    opacity:.8;

    pointer-events:none;

}


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

.factory-group-grid{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:28px;

}


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

.factory-group-card{

    position:relative;

    display:flex;

    align-items:center;

    gap:22px;

    padding:20px;

    border-radius:28px;

    text-decoration:none;

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

    backdrop-filter:blur(20px);

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

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

    box-shadow:

        0 12px 30px rgba(15,23,42,.05),

        0 30px 70px rgba(15,23,42,.05);

    overflow:hidden;

    transition:.35s;

}

.factory-group-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(135deg,rgba(37,99,235,.04),transparent 55%);

    opacity:0;

    transition:.35s;

}

.factory-group-card:hover{

    transform:translateY(-8px);

    border-color:rgba(37,99,235,.18);

    box-shadow:

        0 18px 45px rgba(15,23,42,.08),

        0 45px 90px rgba(15,23,42,.08);

}

.factory-group-card:hover::before{

    opacity:1;

}


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

.factory-group-image{

    flex-shrink:0;

    width:150px;

    height:150px;

    border-radius:22px;

    overflow:hidden;

    background:#eef6ff;

}

.factory-group-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.45s;

}

.factory-group-card:hover .factory-group-image img{

    transform:scale(1.08);

}


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

.factory-group-content{

    flex:1;

    display:flex;

    flex-direction:column;

    gap:14px;

    min-width:0;

}

.factory-group-content h3{

    font-size:1.3rem;

    font-weight:900;

    color:var(--text);

}

.factory-group-content p{

    color:var(--text-light);

    line-height:2;

    font-size:.95rem;

}


/*==================================================
                TAGS
==================================================*/

.factory-group-tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.factory-group-tags span{

    padding:8px 14px;

    border-radius:999px;

    background:#eff6ff;

    color:var(--primary);

    font-size:.8rem;

    font-weight:700;

}


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

.factory-group-link{

    margin-top:auto;

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:var(--primary);

    font-weight:800;

    transition:.3s;

}

.factory-group-link .material-symbols-rounded{

    font-size:20px;

    transition:.3s;

}

.factory-group-card:hover .factory-group-link .material-symbols-rounded{

    transform:translateX(6px);

}


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

@media(max-width:991px){

.factory-group{

    padding:10px 0;

}

.factory-group-grid{

    grid-template-columns:1fr;

}

.factory-group-image{

    width:130px;

    height:130px;

}

}

@media(max-width:640px){

.factory-group-card{

    padding:16px;

    gap:16px;

    border-radius:22px;

}

.factory-group-image{

    width:95px;

    height:95px;

    border-radius:18px;

}

.factory-group-content{

    gap:10px;

}

.factory-group-content h3{

    font-size:1.05rem;

}

.factory-group-content p{

    font-size:.87rem;

    line-height:1.9;

}

.factory-group-tags{

    gap:8px;

}

.factory-group-tags span{

    padding:6px 10px;

    font-size:.72rem;

}

.factory-group-link{

    font-size:.9rem;

}

}
/*==================================================
                    MANAGER
==================================================*/

.manager-section{

    position:relative;

    padding:90px 0;

    overflow:hidden;

}

.manager-section::before{

    content:"";

    position:absolute;

    top:-180px;

    right:-120px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:#dbeafe;

    filter:blur(120px);

    opacity:.55;

    pointer-events:none;

}

.manager-section::after{

    content:"";

    position:absolute;

    bottom:-220px;

    left:-120px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:#eff6ff;

    filter:blur(120px);

    opacity:.9;

    pointer-events:none;

}


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

.manager-card{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:360px 1fr;

    gap:60px;

    align-items:center;

    padding:34px;

    border-radius:36px;

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

    backdrop-filter:blur(24px);

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

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

    box-shadow:

        0 18px 45px rgba(15,23,42,.05),

        0 45px 100px rgba(15,23,42,.07);

}


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

.manager-image{

    position:relative;

    border-radius:30px;

    overflow:hidden;

    aspect-ratio:4/5;

    background:#f8fbff;

}

.manager-image::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(to top,
        rgba(15,23,42,.20),
        transparent 45%);

    z-index:2;

}

.manager-image::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    top:-70px;

    right:-70px;

    border-radius:50%;

    background:rgba(96,165,250,.18);

    filter:blur(60px);

    z-index:1;

}

.manager-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}

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

    transform:scale(1.05);

}


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

.manager-content{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.manager-content h2{

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

    font-weight:900;

    color:var(--text);

    line-height:1.2;

}

.manager-position{

    display:inline-flex;

    width:max-content;

    padding:10px 18px;

    border-radius:999px;

    background:#eff6ff;

    color:var(--primary);

    font-weight:700;

    font-size:.92rem;

}

.manager-content p{

    max-width:760px;

    color:var(--text-light);

    line-height:2.15;

}


/*==================================================
                    STATS
==================================================*/

.manager-stats{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-top:8px;

}

.manager-stat{

    flex:1;

    min-width:150px;

    padding:20px;

    border-radius:22px;

    background:#fff;

    border:1px solid rgba(37,99,235,.08);

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

    transition:.35s;

}

.manager-stat:hover{

    transform:translateY(-6px);

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

}

.manager-stat strong{

    display:block;

    margin-bottom:8px;

    font-size:2rem;

    font-weight:900;

    color:var(--primary);

}

.manager-stat span{

    color:var(--text-light);

    font-size:.9rem;

}


/*==================================================
                SIGNATURE
==================================================*/

.manager-signature{

    margin-top:10px;

}

.manager-signature img{

    height:58px;

    width:auto;

    opacity:.85;

}


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

@media(max-width:991px){

.manager-section{

    padding:70px 0;

}

.manager-card{

    grid-template-columns:1fr;

    gap:35px;

    padding:24px;

}

.manager-image{

    max-width:360px;

    width:100%;

    margin:auto;

}

.manager-content{

    text-align:center;

    align-items:center;

}

.manager-content p{

    max-width:100%;

}

.manager-stats{

    width:100%;

}

.manager-stat{

    min-width:unset;

}

}


@media(max-width:576px){

.manager-card{

    border-radius:26px;

    padding:18px;

    gap:28px;

}

.manager-image{

    max-width:290px;

    border-radius:24px;

}

.manager-content{

    gap:14px;

}

.manager-content h2{

    font-size:1.8rem;

}

.manager-position{

    font-size:.82rem;

    padding:8px 14px;

}

.manager-content p{

    font-size:.92rem;

    line-height:2;

}

.manager-stats{

    display:grid;

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

    gap:10px;

}

.manager-stat{

    padding:16px 10px;

    border-radius:18px;

    text-align:center;

}

.manager-stat strong{

    font-size:1.45rem;

}

.manager-stat span{

    display:block;

    font-size:.72rem;

    line-height:1.5;

}

.manager-signature img{

    height:46px;

}

}
/*==================================================
                SMART FINDER
==================================================*/

.smart-finder{

    padding:15px 0;

    position:relative;

}

.smart-finder-box{

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

    backdrop-filter:blur(22px);

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

    border-radius:34px;

    padding:34px;

    box-shadow:

        0 18px 45px rgba(15,23,42,.06),

        0 40px 90px rgba(15,23,42,.06);

}

.smart-finder-head{

    text-align:center;

    margin-bottom:28px;

}

.smart-finder-head h2{

    margin-top:12px;

    font-size:2rem;

    font-weight:900;

    color:var(--text);

}

.smart-finder-form{

    display:grid;

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

    gap:16px;

    align-items:center;

}

.finder-field{

    display:flex;

    align-items:center;

    gap:12px;

    height:62px;

    padding:0 18px;

    border-radius:18px;

    background:#fff;

    border:1px solid rgba(37,99,235,.08);

    transition:.3s;

}

.finder-field:hover{

    border-color:rgba(37,99,235,.22);

    transform:translateY(-2px);

}

.finder-field:focus-within{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(37,99,235,.08);

}

.finder-field .material-symbols-rounded{

    color:var(--primary);

    font-size:22px;

}

.finder-field select{

    flex:1;

    height:100%;

    border:none;

    background:none;

    outline:none;

    cursor:pointer;

    font-family:inherit;

    font-size:.95rem;

    color:var(--text);

}

.finder-btn{

    height:62px;

    border:none;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    cursor:pointer;

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

    color:#fff;

    font-weight:800;

    font-size:.95rem;

    transition:.35s;

    box-shadow:0 15px 30px rgba(37,99,235,.22);

}

.finder-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 20px 40px rgba(37,99,235,.28);

}


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

@media(max-width:1200px){

.smart-finder-form{

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

}

.finder-btn{

    grid-column:1/-1;

}

}

@media(max-width:640px){

.smart-finder{

    padding:10px 0;

}

.smart-finder-box{

    padding:22px;

    border-radius:24px;

}

.smart-finder-head{

    margin-bottom:20px;

}

.smart-finder-head h2{

    font-size:1.45rem;

}

.smart-finder-form{

    grid-template-columns:1fr;

    gap:12px;

}

.finder-field,

.finder-btn{

    height:56px;

}

}
/*==================================================
                    ARTICLES
==================================================*/

.home-articles{

    padding:10px 0;

}

.article-scroll{

    display:flex;

    gap:24px;

    overflow-x:auto;

    padding:8px 4px 18px;

    scroll-behavior:smooth;

}

.article-card{

    flex:0 0 360px;

    background:#fff;

    border-radius:28px;

    overflow:hidden;

    text-decoration:none;

    border:1px solid rgba(37,99,235,.08);

    transition:.35s;

    box-shadow:

        0 10px 30px rgba(15,23,42,.05);

}

.article-card:hover{

    transform:translateY(-8px);

    box-shadow:

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

}

.article-image{

    position:relative;

    aspect-ratio:16/10;

    overflow:hidden;

}

.article-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.45s;

}

.article-card:hover img{

    transform:scale(1.08);

}

.article-category{

    position:absolute;

    top:16px;

    right:16px;

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

    backdrop-filter:blur(12px);

    color:var(--primary);

    padding:8px 14px;

    border-radius:999px;

    font-size:.8rem;

    font-weight:700;

}

.article-content{

    padding:22px;

}

.article-content h3{

    font-size:1.15rem;

    line-height:1.8;

    color:var(--text);

    margin-bottom:12px;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

}

.article-content p{

    color:var(--text-light);

    line-height:2;

    font-size:.92rem;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

}

.article-footer{

    margin-top:20px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    color:var(--text-muted);

    font-size:.82rem;

}

.article-footer span{

    display:flex;

    align-items:center;

    gap:6px;

}

.article-footer .material-symbols-rounded{

    font-size:18px;

    color:var(--primary);

}

@media(max-width:576px){

.article-card{

    flex:0 0 300px;

}

.article-content{

    padding:18px;

}

}

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

.site-footer{

    margin-top:90px;

    padding:45px 0 25px;

    background:#fff;

    border-top:1px solid rgba(37,99,235,.08);

}

.footer-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    padding-bottom:28px;

    margin-bottom:28px;

    border-bottom:1px solid #edf2f7;

}

.footer-brand{

    display:flex;

    align-items:center;

    gap:18px;

}

.footer-brand img{

    width:58px;

    height:58px;

}

.footer-brand h3{

    font-size:1.15rem;

    font-weight:900;

    color:var(--text);

    margin-bottom:6px;

}

.footer-brand p{

    color:var(--text-light);

    font-size:.9rem;

}

.footer-social{

    display:flex;

    gap:12px;

}

.footer-social a{

    width:46px;

    height:46px;

    border-radius:14px;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    color:var(--primary);

    background:#f8fbff;

    border:1px solid rgba(37,99,235,.08);

    transition:.35s;

}

.footer-social a:hover{

    background:var(--primary);

    color:#fff;

    transform:translateY(-5px);

}

.footer-grid{

    display:grid;

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

    gap:40px;

    padding-bottom:28px;

}

.footer-grid h4{

    font-size:1rem;

    font-weight:800;

    margin-bottom:18px;

    color:var(--text);

}

.footer-grid a,

.footer-grid span{

    display:block;

    margin-bottom:12px;

    text-decoration:none;

    color:var(--text-light);

    transition:.3s;

    line-height:1.9;

}

.footer-grid a:hover{

    color:var(--primary);

    padding-right:6px;

}

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-top:22px;

    border-top:1px solid #edf2f7;

    color:var(--text-muted);

    font-size:.85rem;

}


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

@media(max-width:768px){

.site-footer{

    margin-top:70px;

    padding:30px 0 110px;
    /* فضای ناوبری پایین موبایل */

}

.footer-top{

    flex-direction:column;

    align-items:flex-start;

    gap:20px;

    padding-bottom:20px;

    margin-bottom:20px;

}

.footer-brand img{

    width:48px;

    height:48px;

}

.footer-brand h3{

    font-size:1rem;

}

.footer-brand p{

    font-size:.8rem;

}

.footer-social{

    width:100%;

    justify-content:center;

}

.footer-social a{

    width:42px;

    height:42px;

    border-radius:12px;

}

.footer-grid{

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

    gap:22px;

}

.footer-grid h4{

    margin-bottom:12px;

    font-size:.92rem;

}

.footer-grid a,

.footer-grid span{

    font-size:.82rem;

    margin-bottom:8px;

}

.footer-bottom{

    flex-direction:column;

    gap:10px;

    text-align:center;

    font-size:.78rem;

}

}
.footer-social{

    display:flex;

    gap:12px;

}

.footer-social a{

    width:48px;

    height:48px;

    border-radius:16px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#fff;

    border:1px solid rgba(37,99,235,.08);

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

    transition:.35s;

}

.footer-social a:hover{

    transform:translateY(-5px);

    border-color:rgba(37,99,235,.18);

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

}

.footer-social img{

    width:24px;

    height:24px;

    object-fit:contain;

    transition:.35s;

}

.footer-social a:hover img{

    transform:scale(1.12);

}

@media(max-width:768px){

.footer-social{

    justify-content:center;

    width:100%;

}

.footer-social a{

    width:44px;

    height:44px;

    border-radius:14px;

}

.footer-social img{

    width:22px;

    height:22px;

}

}
/*==================================================
                SEO SECTION
==================================================*/

.seo-section{

    padding:20px 0;

}

.seo-box{

    background:#fff;

    border-radius:32px;

    padding:42px;

    border:1px solid rgba(37,99,235,.08);

    box-shadow:

        0 12px 35px rgba(15,23,42,.05);
        max-width: 900px;
        margin: auto;

}

.seo-header{

    margin-bottom:28px;

}

.seo-header h2{

    margin-top:14px;

    font-size:2rem;

    font-weight:900;

    color:var(--text);

}

.seo-content{

    position:relative;

    color:var(--text-light);

    

    font-size:1rem;

}

.seo-content.collapsed{

    max-height:320px;

    overflow:hidden;

}

.seo-content.collapsed::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:120px;

    background:linear-gradient(to top,#fff,transparent);

}

.seo-content h3{

    margin:34px 0 14px;

    color:var(--text);

    font-size:1.3rem;

    font-weight:800;

}

.seo-content p{

    margin-bottom:18px;

}

.seo-more{

    margin:35px auto 0;

    display:flex;

    align-items:center;

    gap:8px;

    border:none;

    background:#eff6ff;

    color:var(--primary);

    padding:14px 24px;

    border-radius:999px;

    cursor:pointer;

    font-weight:700;

    transition:.3s;

}

.seo-more:hover{

    background:var(--primary);

    color:#fff;

}

.seo-more .material-symbols-rounded{

    transition:.35s;

}

.seo-more.active .material-symbols-rounded{

    transform:rotate(180deg);

}

@media(max-width:768px){

.seo-section{

    padding:10px 0;

}

.seo-box{

    padding:24px;

    border-radius:24px;

}

.seo-header h2{

    font-size:1.45rem;

}

.seo-content{

    font-size:.95rem;

    line-height:2.15;

}

.seo-content.collapsed{

    max-height:260px;

}

}

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

.faq-section{

    padding:90px 0;

}

.faq-list{

    max-width:900px;

    margin:auto;

    display:flex;

    flex-direction:column;

    gap:18px;

}

.faq-item{

    background:#fff;

    border:1px solid rgba(37,99,235,.08);

    border-radius:22px;

    overflow:hidden;

    transition:.35s;

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

}

.faq-item:hover{

    border-color:rgba(37,99,235,.18);

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

}

.faq-item.active{

    border-color:rgba(37,99,235,.22);

}

.faq-question{

    width:100%;

    border:none;

    background:none;

    cursor:pointer;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:24px 28px;

    text-align:right;

    font-family:inherit;

    font-size:1rem;

    font-weight:800;

    color:var(--text);

}

.faq-icon{

    width:42px;

    height:42px;

    flex-shrink:0;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#eff6ff;

    color:var(--primary);

    transition:.35s;

}

.faq-item.active .faq-icon{

    transform:rotate(45deg);

    background:var(--primary);

    color:#fff;

}

.faq-answer{

    display:grid;

    grid-template-rows:0fr;

    transition:grid-template-rows .35s ease;

}

.faq-item.active .faq-answer{

    grid-template-rows:1fr;

}

.faq-answer-inner{

    overflow:hidden;

    padding:0 28px;

    color:var(--text-light);

    line-height:2.1;

}

.faq-item.active .faq-answer-inner{

    padding:0 28px 24px;

}

@media(max-width:768px){

.faq-section{

    padding:20px 0;

}

.faq-question{

    padding:18px;

    font-size:.92rem;

}

.faq-answer-inner{

    padding:0 18px;

    font-size:.9rem;

}

.faq-item.active .faq-answer-inner{

    padding:0 18px 18px;

}

.faq-icon{

    width:36px;

    height:36px;

}

}
/*==================================================
                PRODUCTS HERO
==================================================*/

.products-hero{

    padding:40px 0 90px;

    position:relative;

    overflow:hidden;

}

.products-hero::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:#dbeafe;

    filter:blur(120px);

    top:-220px;

    left:-180px;

    opacity:.75;

}

.products-hero::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:#eff6ff;

    filter:blur(120px);

    bottom:-180px;

    right:-160px;

    opacity:.8;

}


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

.products-hero-card{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:45px;

    align-items:center;

    padding:38px;

    border-radius:34px;

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

    backdrop-filter:blur(24px);

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

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

    box-shadow:

        0 20px 60px rgba(15,23,42,.05),

        0 40px 100px rgba(15,23,42,.05);

}


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

.breadcrumb{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:18px;

    font-size:.9rem;

}

.breadcrumb a{

    color:#64748b;

    text-decoration:none;

    transition:.3s;

}

.breadcrumb a:hover{

    color:var(--primary);

}

.breadcrumb .material-symbols-rounded{

    font-size:18px;

    color:#94a3b8;

}


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

.hero-badge{

    display:inline-flex;

    align-items:center;

    padding:10px 16px;

    border-radius:999px;

    background:#eff6ff;

    color:var(--primary);

    font-weight:700;

    font-size:.82rem;

}

.products-hero-content h1{

    margin:20px 0 14px;

    font-size:clamp(2.2rem,4vw,3.4rem);

    line-height:1.2;

    font-weight:900;

    color:var(--text);

}

.products-hero-content p{

    max-width:640px;

    line-height:2.2;

    color:var(--text-light);

}


/*==================================================
                STATS
==================================================*/

.hero-stats{

    display:flex;

    gap:16px;

    margin-top:30px;

}

.hero-stat{

    flex:1;

    background:#fff;

    border-radius:20px;

    padding:18px;

    border:1px solid rgba(37,99,235,.08);

    text-align:center;

    transition:.35s;

}

.hero-stat:hover{

    transform:translateY(-5px);

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

}

.hero-stat strong{

    display:block;

    font-size:1.9rem;

    color:var(--primary);

    font-weight:900;

    margin-bottom:8px;

}

.hero-stat span{

    font-size:.82rem;

    color:var(--text-light);

}


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

.hero-actions{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-top:28px;

}

.hero-btn{

    height:52px;

    padding:0 24px;

    border-radius:16px;

    display:flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    color:var(--text);

    background:#fff;

    border:1px solid rgba(37,99,235,.08);

    transition:.35s;

}

.hero-btn:hover{

    transform:translateY(-3px);

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

}

.hero-btn.primary{

    background:linear-gradient(135deg,#2563eb,#60a5fa);

    color:#fff;

    border:none;

}


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

.products-hero-image{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    aspect-ratio:16/11;

    background:#f8fafc;

}

.products-hero-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(to top,
    rgba(15,23,42,.20),
    transparent);

}

.products-hero-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

.products-hero-card:hover img{

    transform:scale(1.06);

}


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

.hero-search{

    margin-top:26px;

    display:grid;

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

    gap:16px;

    padding:22px;

    border-radius:28px;

    background:#fff;

    border:1px solid rgba(37,99,235,.08);

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

}


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

@media(max-width:1100px){

.products-hero-card{

    grid-template-columns:1fr;

}

.products-hero-image{

    order:-1;

}

.hero-search{

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

}

.hero-search .finder-btn{

    grid-column:1/-1;

}

}


@media(max-width:768px){

.products-hero{

    padding:100px 0 70px;

}

.products-hero-card{

    padding:22px;

    border-radius:24px;

    gap:24px;

}

.products-hero-content{

    text-align:center;

}

.breadcrumb{

    justify-content:center;

}

.hero-actions{

    justify-content:center;

}

.hero-stats{

    gap:10px;

}

.hero-stat{

    padding:14px;

}

.hero-stat strong{

    font-size:1.45rem;

}

.hero-search{

    grid-template-columns:1fr;

    padding:16px;

    border-radius:22px;

}

}
/*==================================================
                PRODUCTS SECTION
==================================================*/

.products-section{

    padding:30px 0;

}

.products-head{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    margin-bottom:34px;

}

.products-count{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 18px;

    background:#fff;

    border:1px solid rgba(37,99,235,.08);

    border-radius:16px;

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

}

.products-count .material-symbols-rounded{

    color:var(--primary);

}

.products-count strong{

    color:var(--primary);

    font-size:1.1rem;

}


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

.products-grid{
    max-width: 1400px;

    display:grid;

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

    gap:24px;
    margin: auto;

}


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

.product-card{

    display:flex;

    flex-direction:column;

    text-decoration:none;

    color:inherit;

    overflow:hidden;

    background:#fff;

    border-radius:26px;

    border:1px solid rgba(37,99,235,.08);

    transition:

        transform .35s,

        box-shadow .35s,

        border-color .35s;

    box-shadow:

        0 12px 30px rgba(15,23,42,.05);

}

.product-card:hover{

    transform:translateY(-8px);

    border-color:rgba(37,99,235,.16);

    box-shadow:

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

}


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

.product-image{

    position:relative;

    overflow:hidden;

    aspect-ratio:4/3;

    background:#f8fafc;

}

.product-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .55s;

}

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

    transform:scale(1.08);

}


/*==================================================
                FAVORITE
==================================================*/

.favorite-btn{

    position:absolute;

    top:14px;

    left:14px;

    width:42px;

    height:42px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

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

    backdrop-filter:blur(12px);

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

    color:#94a3b8;

    transition:.3s;

    z-index:5;

}

.favorite-btn:hover{

    color:#ef4444;

    transform:scale(1.08);

}


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

.product-discount{

    position:absolute;

    right:14px;

    top:14px;

    background:#2563eb;

    color:#fff;

    font-size:.78rem;

    font-weight:700;

    padding:7px 12px;

    border-radius:999px;

}


/*==================================================
                BODY
==================================================*/

.product-body{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:18px;

}

.product-body h3{

    color:var(--text);

    font-size:1rem;

    font-weight:800;

    line-height:1.8;

    margin-bottom:14px;

    display:-webkit-box;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:2;

    overflow:hidden;

    min-height:58px;

}


/*==================================================
                META
==================================================*/

.product-meta{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:18px;

}

.product-meta span{

    padding:7px 11px;

    border-radius:999px;

    background:#f8fafc;

    color:#64748b;

    font-size:.78rem;

}


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

.product-price{

    margin-top:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:12px;

    padding-top:16px;

    border-top:1px solid #eef2f7;

}

.product-price del{

    display:block;

    color:#94a3b8;

    font-size:.8rem;

    margin-bottom:5px;

}

.product-price strong{

    color:var(--primary);

    font-size:1rem;

    font-weight:900;

}

.product-price .material-symbols-rounded{

    width:42px;

    height:42px;

    border-radius:14px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#eff6ff;

    color:var(--primary);

    transition:.35s;

}

.product-card:hover .product-price .material-symbols-rounded{

    transform:translateX(-4px);

    background:var(--primary);

    color:#fff;

}


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

@media(max-width:1200px){

.products-grid{

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

}

}

@media(max-width:700px){

.products-grid{

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

}

}

@media(max-width:576px){

.products-section{

    padding:30px 0;

}

.products-head{

    flex-direction:column;

    align-items:flex-start;

    margin-bottom:24px;

}

.products-grid{

    gap:14px;

}

.product-card{

    border-radius:18px;

}

.product-body{

    padding:14px;

}

.product-body h3{

    font-size:.9rem;

    min-height:52px;

}

.product-meta{

    gap:6px;

    margin-bottom:14px;

}

.product-meta span{

    font-size:.7rem;

    padding:5px 9px;

}

.favorite-btn{

    width:36px;

    height:36px;

    border-radius:12px;

}

.product-discount{

    font-size:.7rem;

    padding:6px 10px;

}

.product-price strong{

    font-size:.88rem;

}

.product-price .material-symbols-rounded{

    width:36px;

    height:36px;

    border-radius:12px;

}

}
/*==================================================
                    PAGINATION
==================================================*/

.pagination{

    margin-top:25px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;

}

.page-number,
.page-btn{

    width:48px;

    height:48px;

    border-radius:16px;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    background:#fff;

    border:1px solid rgba(37,99,235,.08);

    color:var(--text);

    font-size:.95rem;

    font-weight:700;

    transition:
        background .3s,
        color .3s,
        border-color .3s,
        transform .3s,
        box-shadow .3s;

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

}

.page-number:hover,
.page-btn:hover{

    transform:translateY(-4px);

    border-color:rgba(37,99,235,.18);

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

}

.page-number.active{

    background:linear-gradient(135deg,#2563eb,#60a5fa);

    color:#fff;

    border-color:transparent;

    box-shadow:
        0 18px 40px rgba(37,99,235,.28);

}

.page-btn .material-symbols-rounded{

    font-size:22px;

}

.page-dots{

    padding:0 8px;

    color:#94a3b8;

    font-weight:700;

    user-select:none;

}


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

@media(max-width:768px){

.pagination{

    gap:8px;

    margin-top:10px;

}

.page-number,
.page-btn{

    width:42px;

    height:42px;

    border-radius:14px;

    font-size:.9rem;

}

.page-btn .material-symbols-rounded{

    font-size:20px;

}

.page-dots{

    padding:0 2px;

}

}
/*==================================================
                CATEGORIES LAYOUT
==================================================*/

.categories-layout{

    padding:80px 0;

}

.categories-wrapper{

    display:grid;

    grid-template-columns:290px minmax(0,1fr);

    gap:34px;

    align-items:start;

}


/*==================================================
                SIDEBAR
==================================================*/

.categories-sidebar{

    position:sticky;

    top:110px;

    padding:24px;

    border-radius:28px;

    background:#fff;

    border:1px solid rgba(37,99,235,.08);

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

}

.categories-sidebar-header{

    margin-bottom:22px;

}

.categories-sidebar-header h2{

    font-size:1.25rem;

    font-weight:900;

    color:var(--text);

    margin-bottom:8px;

}

.categories-sidebar-header p{

    color:var(--text-light);

    line-height:1.9;

    font-size:.88rem;

}


/*==================================================
                TYPES
==================================================*/

.category-types{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.category-type{

    width:100%;

    display:flex;

    align-items:center;

    gap:16px;

    border:none;

    cursor:pointer;

    text-align:right;

    padding:15px;

    border-radius:18px;

    background:#fff;

    border:1px solid transparent;

    transition:.35s;

}

.category-type:hover{

    background:#f8fbff;

    border-color:rgba(37,99,235,.12);

    transform:translateX(-4px);

}

.category-type.active{

    background:linear-gradient(135deg,#2563eb,#3b82f6);

    color:#fff;

    border-color:transparent;

    box-shadow:
        0 18px 35px rgba(37,99,235,.28);

}

.category-type-icon{

    width:52px;

    height:52px;

    border-radius:16px;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

    background:#eff6ff;

    color:var(--primary);

    font-size:26px;

    transition:.35s;

}

.category-type.active .category-type-icon{

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

    color:#fff;

}

.category-type-info{

    flex:1;

}

.category-type-info strong{

    display:block;

    font-size:.96rem;

    font-weight:800;

}

.category-type-info small{

    display:block;

    margin-top:5px;

    opacity:.75;

    font-size:.75rem;

}


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

.categories-content{

    min-width:0;

}

.categories-content-head{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:28px;

}

.categories-counter{

    padding:10px 18px;

    border-radius:999px;

    background:#eff6ff;

    color:var(--primary);

    font-size:.82rem;

    font-weight:800;

}


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

.categories-grid{

    display:grid;

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

    gap:18px;

    animation:fadeCategories .35s ease;

}

@keyframes fadeCategories{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:none;

    }

}


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

.category-card-horizontal{

    display:flex;

    align-items:center;

    gap:18px;

    padding:16px;

    text-decoration:none;

    color:inherit;

    background:#fff;

    border-radius:22px;

    border:1px solid rgba(37,99,235,.08);

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

    transition:.35s;

}

.category-card-horizontal:hover{

    transform:translateY(-6px);

    border-color:rgba(37,99,235,.15);

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

}

.category-card-horizontal img{

    width:90px;

    height:90px;

    flex-shrink:0;

    object-fit:cover;

    border-radius:18px;

    transition:.45s;

}

.category-card-horizontal:hover img{

    transform:scale(1.06);

}

.category-card-horizontal div{

    flex:1;

    min-width:0;

}

.category-card-horizontal h3{

    color:var(--text);

    font-size:1rem;

    font-weight:900;

    line-height:1.8;

    margin-bottom:10px;

}

.category-card-horizontal span{

    display:flex;

    align-items:center;

    gap:6px;

    color:var(--primary);

    font-size:.82rem;

    font-weight:700;

}

.category-card-horizontal span .material-symbols-rounded{

    font-size:18px;

    transition:.3s;

}

.category-card-horizontal:hover span .material-symbols-rounded{

    transform:translateX(4px);

}
.categories-wrapper>*{

    min-width:0;

}

.categories-content{

    min-width:0;

}

/*==================================================
                RESPONSIVE
==================================================*/
@media(max-width:991px){

.categories-wrapper{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.categories-sidebar{

    position:static;

    width:100%;

    padding:0;

    background:none;

    border:none;

    box-shadow:none;

    overflow:hidden;

}

.categories-sidebar-header{

    display:none;

}

.category-types{

    display:flex;

    flex-wrap:nowrap;

    overflow-x:auto;

    overflow-y:hidden;

    gap:10px;

    padding-bottom:8px;

    scrollbar-width:none;

    -ms-overflow-style:none;

}

.category-types::-webkit-scrollbar{

    display:none;

}

.category-type{

    flex:0 0 auto;

    min-width:auto;

    width:auto;

    padding:12px 18px;

    gap:10px;

    border-radius:16px;

}

.category-type-icon{

    width:42px;

    height:42px;

    font-size:22px;

}

.category-type-info strong{

    white-space:nowrap;

}

.category-type-info small{

    display:none;

}

.categories-content{

    width:100%;

    min-width:0;

}

.categories-content-head{

    flex-direction:column;

    align-items:flex-start;

    gap:14px;

}

.categories-grid{

    grid-template-columns:1fr;

    gap:14px;

}

.category-card-horizontal{

    width:100%;

    min-width:0;

}

.category-card-horizontal img{

    width:72px;

    height:72px;

    flex-shrink:0;

}

.category-card-horizontal h3{

    font-size:.92rem;

    line-height:1.7;

}

.category-card-horizontal div{

    min-width:0;

}
 .categories-wrapper{

        display:block;

    }

    .categories-sidebar{

        position:static;

        background:none;

        border:none;

        box-shadow:none;

        padding:0;

        margin-bottom:20px;

    }

    .categories-sidebar-header{

        display:none;

    }

    .category-types{
        padding-top: 30px;

        display:flex;

        flex-wrap:nowrap;

        overflow-x:auto;

        overflow-y:hidden;

        gap:12px;

        padding-bottom:8px;

        scrollbar-width:none;

        -ms-overflow-style:none;

    }

    .category-types::-webkit-scrollbar{

        display:none;

    }

    .category-type{

        flex:0 0 auto;

        width:auto;

        min-width:170px;

        padding:12px 16px;

        border-radius:18px;

    }

    .category-type-icon{

        width:42px;

        height:42px;

        border-radius:12px;

        font-size:22px;

    }

    .category-type-info{

        white-space:nowrap;

    }

    .category-type-info strong{

        font-size:.9rem;

    }

    .category-type-info small{

        font-size:.72rem;

    }
}


@media(max-width:768px){

.categories-layout{

    padding:65px 0;

}

.categories-content-head{

    flex-direction:column;

    align-items:flex-start;

}

.categories-grid{

    grid-template-columns:1fr;

}

.category-card-horizontal{

    padding:14px;

    border-radius:18px;

}

.category-card-horizontal img{

    width:75px;

    height:75px;

    border-radius:14px;

}

.category-card-horizontal h3{

    font-size:.92rem;

}


}
/*==================================================
                    MINES HERO
==================================================*/

.mines-hero{

    padding:20px 0;

}

.mines-hero-box{

    position:relative;

    display:grid;

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

    gap:45px;

    align-items:center;

    padding:42px;

    border-radius:34px;

    overflow:hidden;

    background:
    radial-gradient(circle at top right,#dbeafe 0%,transparent 45%),
    radial-gradient(circle at bottom left,#eff6ff 0%,transparent 40%),
    #fff;

    border:1px solid rgba(37,99,235,.08);

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

}

.mines-hero-box::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(135deg,
    rgba(37,99,235,.02),
    transparent 35%,
    rgba(59,130,246,.03));

    pointer-events:none;

}


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

.mines-content{

    position:relative;

    z-index:2;

}

.mines-content h1{

    font-size:2.7rem;

    line-height:1.35;

    font-weight:900;

    color:var(--text);

    margin:20px 0;

}

.mines-content p{

    font-size:1rem;

    color:var(--text-light);

    line-height:2;

    max-width:620px;

}


/*==============================
        STATS
===============================*/

.mine-hero-stats{

    display:flex;

    gap:16px;

    margin-top:34px;

    flex-wrap:wrap;

}

.mine-stat{

    flex:1;

    min-width:120px;

    padding:18px;

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

    backdrop-filter:blur(16px);

    border:1px solid rgba(37,99,235,.08);

    border-radius:20px;

    transition:.35s;

}

.mine-stat:hover{

    transform:translateY(-6px);

    border-color:rgba(37,99,235,.18);

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

}

.mine-stat strong{

    display:block;

    font-size:1.8rem;

    color:var(--primary);

    font-weight:900;

    margin-bottom:8px;

}

.mine-stat span{

    color:var(--text-light);

    font-size:.88rem;

}


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

.mine-actions{

    display:flex;

    gap:14px;

    margin-top:34px;

}


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

.mines-hero-image{

    position:relative;

    height:520px;

    border-radius:28px;

    overflow:hidden;

}

.mines-hero-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1s;

}

.mines-hero-image:hover img{

    transform:scale(1.05);

}


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

.mine-floating-card{

    position:absolute;

    right:20px;

    bottom:20px;

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 18px;

    border-radius:18px;

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

    backdrop-filter:blur(20px);

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

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

}

.mine-floating-card.second{

    right:auto;

    left:20px;

    top:20px;

    bottom:auto;

}

.mine-floating-card .material-symbols-rounded{

    width:46px;

    height:46px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:14px;

    background:#eff6ff;

    color:var(--primary);

}

.mine-floating-card strong{

    display:block;

    color:var(--text);

    font-size:.92rem;

    margin-bottom:3px;

}

.mine-floating-card small{

    color:var(--text-light);

}


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

@media(max-width:1100px){

.mines-hero-box{

    grid-template-columns:1fr;

}

.mines-hero-image{

    order:-1;

    height:430px;

}

}

@media(max-width:768px){

.mines-hero{

    padding:100px 0 10px 0;

}

.mines-hero-box{

    padding:22px;

    border-radius:24px;

    gap:25px;

}

.mines-content h1{

    font-size:1.8rem;

}

.mines-content p{

    font-size:.92rem;

}

.mine-hero-stats{

    display:grid;

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

    gap:10px;

}

.mine-stat{

    min-width:0;

    padding:14px;

    text-align:center;

}

.mine-stat strong{

    font-size:1.3rem;

}

.mine-actions{

    flex-direction:column;

}

.mine-actions a{

    width:100%;

}

.mines-hero-image{

    height:300px;

    border-radius:20px;

}

.mine-floating-card{

    transform:scale(.9);

}

}
/*==================================================
                HERO BUTTONS
==================================================*/

.mine-actions{

    display:flex;

    align-items:center;

    gap:14px;

    margin-top:36px;

    flex-wrap:wrap;

}

.mine-actions a{

    height:54px;

    padding:0 28px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    text-decoration:none;

    font-size:.92rem;

    font-weight:800;

    transition:.35s;

}


/*==============================
        PRIMARY
===============================*/

.btn-primary{

    color:#fff;

    background:linear-gradient(135deg,#2563eb,#3b82f6);

    border:1px solid transparent;

    box-shadow:
    0 15px 35px rgba(37,99,235,.25);

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:
    0 22px 45px rgba(37,99,235,.35);

}


/*==============================
        SECONDARY
===============================*/

.btn-secondary{

    color:var(--primary);

    background:#fff;

    border:1px solid rgba(37,99,235,.12);

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

}

.btn-secondary:hover{

    background:#eff6ff;

    border-color:rgba(37,99,235,.25);

    transform:translateY(-4px);

}


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

.mine-actions .material-symbols-rounded{

    font-size:20px;

    transition:.3s;

}

.btn-primary:hover .material-symbols-rounded,

.btn-secondary:hover .material-symbols-rounded{

    transform:translateX(4px);

}


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

@media(max-width:768px){

.mine-actions{

    flex-direction:column;

    align-items:stretch;

    gap:10px;

}

.mine-actions a{

    width:100%;

    height:50px;

    border-radius:16px;

}

}

/*==================================================
                    MINES LIST
==================================================*/

.mines-list{

    padding:25px 0;

}

.mines-list-header{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:30px;

    margin-bottom:35px;

}

.mines-list-header .section-description{

    margin-top:10px;

    max-width:620px;

    color:var(--text-light);

    font-size:.92rem;

    line-height:1.9;

}

.mines-total{

    flex-shrink:0;

    display:flex;

    align-items:center;

    gap:8px;

    padding:12px 18px;

    border:1px solid rgba(37,99,235,.09);

    border-radius:16px;

    background:#fff;

    color:var(--text-light);

    font-size:.85rem;

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

}

.mines-total .material-symbols-rounded{

    color:var(--primary);

    font-size:21px;

}

.mines-total strong{

    color:var(--primary);

    font-size:1.1rem;

}


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

.mines-grid{

    display:grid;

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

    gap:24px;

}


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

.mine-card{

    min-width:0;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    text-decoration:none;

    color:inherit;

    background:#fff;

    border:1px solid rgba(37,99,235,.08);

    border-radius:26px;

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

    transition:

        transform .4s ease,

        box-shadow .4s ease,

        border-color .4s ease;

}

.mine-card:hover{

    transform:translateY(-8px);

    border-color:rgba(37,99,235,.16);

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

}


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

.mine-card-image{

    position:relative;

    height:250px;

    overflow:hidden;

    background:#f1f5f9;

}

.mine-card-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        to top,

        rgba(15,23,42,.25),

        transparent 45%

    );

    pointer-events:none;

}

.mine-card-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:transform .65s ease;

}

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

    transform:scale(1.07);

}


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

.mine-card-badge{

    position:absolute;

    top:16px;

    right:16px;

    z-index:2;

    padding:7px 12px;

    border-radius:999px;

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

    backdrop-filter:blur(12px);

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

    color:#16a34a;

    font-size:.72rem;

    font-weight:800;

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

}


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

.mine-card-arrow{

    position:absolute;

    left:16px;

    bottom:16px;

    z-index:2;

    width:44px;

    height:44px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:14px;

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

    backdrop-filter:blur(12px);

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

    color:var(--primary);

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

    transition:.35s;

}

.mine-card:hover .mine-card-arrow{

    background:var(--primary);

    color:#fff;

    transform:translateX(-4px);

}


/*==================================================
                    BODY
==================================================*/

.mine-card-body{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:20px;

}


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

.mine-card-title{

    min-width:0;

}

.mine-card-title h3{

    margin:0 0 8px;

    color:var(--text);

    font-size:1.05rem;

    font-weight:900;

    line-height:1.7;

    display:-webkit-box;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:2;

    overflow:hidden;

}

.mine-location{

    display:flex;

    align-items:center;

    gap:4px;

    color:var(--text-light);

    font-size:.78rem;

}

.mine-location .material-symbols-rounded{

    font-size:17px;

    color:var(--primary);

}


/*==================================================
                    META
==================================================*/

.mine-card-meta{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;

    margin-top:20px;

}

.mine-card-meta > div{

    min-width:0;

    display:flex;

    align-items:center;

    gap:7px;

    padding:11px 12px;

    border-radius:14px;

    background:#f8fafc;

    color:#64748b;

    font-size:.76rem;

}

.mine-card-meta .material-symbols-rounded{

    flex-shrink:0;

    font-size:19px;

    color:var(--primary);

}


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

.mine-card-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:10px;

    margin-top:18px;

    padding-top:16px;

    border-top:1px solid #eef2f7;

    color:var(--primary);

    font-size:.82rem;

    font-weight:800;

}

.mine-card-footer .material-symbols-rounded{

    font-size:19px;

    transition:.3s;

}

.mine-card:hover .mine-card-footer .material-symbols-rounded{

    transform:translateX(-5px);

}


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

@media(max-width:1100px){

    .mines-grid{

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

    }

}


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

@media(max-width:768px){

    .mines-list{

        padding:15px 0;

    }

    .mines-list-header{

        align-items:flex-start;

        flex-direction:column;

        gap:18px;

        margin-bottom:24px;

    }

    .mines-total{

        padding:10px 15px;

    }

    .mines-grid{

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

        gap:14px;

    }

    .mine-card{

        border-radius:19px;

    }

    .mine-card-image{

        height:auto;

        aspect-ratio:1.15 / 1;

    }

    .mine-card-body{

        padding:13px;

    }

    .mine-card-title h3{

        font-size:.86rem;

        line-height:1.7;

        margin-bottom:6px;

    }

    .mine-location{

        font-size:.68rem;

    }

    .mine-location .material-symbols-rounded{

        font-size:15px;

    }

    .mine-card-meta{

        grid-template-columns:1fr;

        gap:6px;

        margin-top:13px;

    }

    .mine-card-meta > div{

        padding:8px 9px;

        font-size:.66rem;

        border-radius:11px;

    }

    .mine-card-meta .material-symbols-rounded{

        font-size:16px;

    }

    .mine-card-footer{

        margin-top:12px;

        padding-top:12px;

        font-size:.68rem;

    }

    .mine-card-footer .material-symbols-rounded{

        font-size:17px;

    }

    .mine-card-badge{

        top:10px;

        right:10px;

        padding:5px 8px;

        font-size:.62rem;

    }

    .mine-card-arrow{

        width:35px;

        height:35px;

        left:10px;

        bottom:10px;

        border-radius:11px;

    }

    .mine-card-arrow .material-symbols-rounded{

        font-size:19px;

    }

}

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

.factories-hero{

    padding:80px 0;

}

.factories-hero-box{

    position:relative;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:45px;

    align-items:center;

    padding:42px;

    overflow:hidden;

    border-radius:34px;

    background:

        radial-gradient(
            circle at top right,
            #dbeafe 0%,
            transparent 45%
        ),

        radial-gradient(
            circle at bottom left,
            #eff6ff 0%,
            transparent 40%
        ),

        #fff;

    border:1px solid rgba(37,99,235,.08);

    box-shadow:

        0 25px 70px rgba(15,23,42,.06);

}


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

.factories-hero-content{

    position:relative;

    z-index:2;

}

.factories-hero-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:9px 14px;

    border-radius:999px;

    color:var(--primary);

    background:#eff6ff;

    border:1px solid rgba(37,99,235,.08);

    font-size:.78rem;

    font-weight:800;

}

.factories-hero-badge .material-symbols-rounded{

    font-size:19px;

}

.factories-hero-content h1{

    margin:20px 0 16px;

    max-width:650px;

    color:var(--text);

    font-size:2.65rem;

    line-height:1.4;

    font-weight:900;

}

.factories-hero-content p{

    max-width:620px;

    margin:0;

    color:var(--text-light);

    font-size:.98rem;

    line-height:2;

}


/*==================================================
                STATS
==================================================*/

.factories-hero-stats{

    display:flex;

    gap:12px;

    margin-top:32px;

}

.factory-stat{

    min-width:120px;

    padding:15px 18px;

    border-radius:18px;

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

    border:1px solid rgba(37,99,235,.07);

    backdrop-filter:blur(14px);

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

}

.factory-stat strong{

    display:block;

    color:var(--primary);

    font-size:1.45rem;

    font-weight:900;

}

.factory-stat span{

    display:block;

    margin-top:5px;

    color:var(--text-light);

    font-size:.75rem;

}


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

.factories-hero-actions{

    display:flex;

    align-items:center;

    gap:12px;

    margin-top:30px;

}

.factory-btn-primary,
.factory-btn-secondary{

    height:52px;

    padding:0 22px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    border-radius:17px;

    text-decoration:none;

    font-size:.84rem;

    font-weight:800;

    transition:.35s;

}

.factory-btn-primary{

    color:#fff;

    background:linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );

    box-shadow:

        0 14px 30px rgba(37,99,235,.22);

}

.factory-btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:

        0 20px 40px rgba(37,99,235,.3);

}

.factory-btn-secondary{

    color:var(--primary);

    background:#fff;

    border:1px solid rgba(37,99,235,.1);

}

.factory-btn-secondary:hover{

    transform:translateY(-4px);

    background:#eff6ff;

}


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

.factories-hero-visual{

    position:relative;

    height:500px;

    overflow:hidden;

    border-radius:28px;

    background:#e2e8f0;

}

.factories-hero-visual img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:transform .8s ease;

}

.factories-hero-visual:hover img{

    transform:scale(1.045);

}

.factory-visual-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            180deg,
            rgba(15,23,42,.03),
            rgba(15,23,42,.18)
        );

    pointer-events:none;

}


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

.factory-floating-card{

    position:absolute;

    z-index:3;

    display:flex;

    align-items:center;

    gap:12px;

    padding:13px 16px;

    border-radius:18px;

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

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

    backdrop-filter:blur(18px);

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

    box-shadow:

        0 15px 35px rgba(15,23,42,.12);

}

.factory-floating-top{

    top:20px;

    right:20px;

}

.factory-floating-bottom{

    bottom:20px;

    left:20px;

}

.factory-floating-icon{

    width:44px;

    height:44px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:13px;

    color:var(--primary);

    background:#eff6ff;

}

.factory-floating-icon .material-symbols-rounded{

    font-size:22px;

}

.factory-floating-card strong{

    display:block;

    color:var(--text);

    font-size:.82rem;

    font-weight:900;

}

.factory-floating-card small{

    display:block;

    margin-top:3px;

    color:var(--text-light);

    font-size:.7rem;

}


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

@media(max-width:1000px){

    .factories-hero-box{

        grid-template-columns:1fr;

    }

    .factories-hero-visual{

        height:400px;

        order:-1;

    }

}


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

@media(max-width:768px){

    .factories-hero{

        padding:100px 0;

    }

    .factories-hero-box{

        padding:20px;

        gap:25px;

        border-radius:24px;

    }

    .factories-hero-visual{

        height:290px;

        border-radius:20px;

    }

    .factories-hero-content h1{

        font-size:1.8rem;

        line-height:1.5;

    }

    .factories-hero-content p{

        font-size:.87rem;

        line-height:1.95;

    }

    .factories-hero-stats{

        display:grid;

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

        gap:8px;

    }

    .factory-stat{

        min-width:0;

        padding:12px 8px;

        text-align:center;

    }

    .factory-stat strong{

        font-size:1.15rem;

    }

    .factory-stat span{

        font-size:.65rem;

    }

    .factories-hero-actions{

        flex-direction:column;

        align-items:stretch;

    }

    .factory-btn-primary,
    .factory-btn-secondary{

        width:100%;

        height:49px;

    }

    .factory-floating-card{

        padding:9px 11px;

        gap:8px;

        border-radius:14px;

    }

    .factory-floating-icon{

        width:36px;

        height:36px;

        border-radius:10px;

    }

    .factory-floating-card strong{

        font-size:.7rem;

    }

    .factory-floating-card small{

        font-size:.6rem;

    }

    .factory-floating-top{

        top:12px;

        right:12px;

    }

    .factory-floating-bottom{

        bottom:12px;

        left:12px;

    }

}
/*==================================================
                FACTORY SHOWCASE
===================================================*/

.factory-showcase{

    position:relative;

    width:100%;

    min-height:620px;

    padding:70px 0;

    overflow:hidden;

    background:#eaf3ff;

}


/*==================================================
                16:9 COVER
===================================================*/

.factory-showcase-cover{

    position:absolute;

    inset:0;

    z-index:0;

    background-image:

        linear-gradient(
            90deg,
            rgba(239,247,255,.94) 0%,
            rgba(219,234,254,.82) 45%,
            rgba(191,219,254,.72) 100%
        ),

        url("/store/image/factory-cover.jpg");

    background-size:cover;

    background-position:center;

}


/* subtle blue overlay */

.factory-showcase-cover::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(255,255,255,.75),
            transparent 35%
        ),
        radial-gradient(
            circle at 85% 40%,
            rgba(59,130,246,.13),
            transparent 40%
        );

}


/*==================================================
                INNER
===================================================*/

.factory-showcase-inner{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:42px;

}


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

.factory-products{

    display:grid;

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

    gap:15px;

}


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

.factory-product-card{

    position:relative;

    min-width:0;

    min-height:245px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    overflow:hidden;

    padding:18px;

    border-radius:24px;

    text-decoration:none;

    color:#0f172a;

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.68),
            rgba(255,255,255,.32)
        );

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

    backdrop-filter:blur(18px);

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

    box-shadow:

        0 15px 40px rgba(30,64,175,.09);

    transition:

        transform .4s ease,
        background .4s ease,
        box-shadow .4s ease;

}

.factory-product-card:hover{

    transform:translateY(-7px);

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

    box-shadow:

        0 25px 55px rgba(30,64,175,.16);

}


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

.factory-product-icon{

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    color:#1677e8;

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

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

}

.factory-product-icon .material-symbols-rounded{

    font-size:20px;

}


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

.factory-product-image{

    position:absolute;

    inset:

        38px
        15px
        45px
        15px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.factory-product-image img{

    width:90%;

    height:90%;

    object-fit:contain;

    display:block;

    filter:

        drop-shadow(
            0 18px 15px rgba(15,23,42,.14)
        );

    transition:

        transform .5s ease;

}

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

    transform:scale(1.07) translateY(-4px);

}


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

.factory-product-bottom{

    position:relative;

    z-index:3;

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-top:auto;

}

.factory-product-bottom strong{

    font-size:.9rem;

    font-weight:900;

}

.factory-product-bottom .material-symbols-rounded{

    width:34px;

    height:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:11px;

    color:#1677e8;

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

    transition:.3s;

}

.factory-product-card:hover
.factory-product-bottom .material-symbols-rounded{

    transform:translateX(-4px);

    background:#1677e8;

    color:#fff;

}


/*==================================================
                FACTORY INFO GLASS
===================================================*/

.factory-info{

    padding:38px;

    border-radius:30px;

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.76),
            rgba(255,255,255,.48)
        );

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

    backdrop-filter:blur(3px);

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

    box-shadow:

        0 25px 70px rgba(30,64,175,.1);

}


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

.factory-info-badge{

    display:inline-flex;

    align-items:center;

    gap:7px;

    padding:8px 13px;

    border-radius:999px;

    color:#1557a6;

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

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

    font-size:.74rem;

    font-weight:800;

}

.factory-info-badge .material-symbols-rounded{

    font-size:18px;

}


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

.factory-info h2{

    margin:18px 0 8px;

    color:#0b2e59;

    font-size:2.35rem;

    line-height:1.35;

    font-weight:950;

}

.factory-info h3{

    margin:0;

    color:#2671c5;

    font-size:1rem;

    font-weight:800;

    line-height:1.8;

}

.factory-info-line{

    width:48px;

    height:3px;

    margin:22px 0;

    border-radius:999px;

    background:#1683ef;

}

.factory-info p{

    margin:0;

    color:#516a84;

    font-size:.9rem;

    line-height:2.05;

}


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

.factory-features{

    display:grid;

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

    margin-top:27px;

    padding-top:22px;

    border-top:1px solid rgba(37,99,235,.1);

}

.factory-feature{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:8px;

    min-width:0;

    color:#23466c;

    font-size:.7rem;

    font-weight:800;

    text-align:center;

}

.factory-feature + .factory-feature{

    border-right:1px solid rgba(37,99,235,.1);

}

.factory-feature .material-symbols-rounded{

    font-size:23px;

    color:#1677e8;

}


/*==================================================
                CTA
===================================================*/

.factory-cta{

    display:flex;

    gap:12px;

    margin-top:28px;

}

.factory-cta a{

    height:50px;

    padding:0 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    border-radius:16px;

    text-decoration:none;

    font-size:.8rem;

    font-weight:850;

    transition:.35s;

}

.factory-cta-primary{

    color:#fff;

    background:

        linear-gradient(
            135deg,
            #147be9,
            #1261c7
        );

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

    box-shadow:

        0 12px 30px rgba(21,112,218,.22);

}

.factory-cta-primary:hover{

    transform:translateY(-3px);

    box-shadow:

        0 18px 38px rgba(21,112,218,.3);

}

.factory-cta-secondary{

    color:#15579c;

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

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

    backdrop-filter:blur(12px);

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

}

.factory-cta-secondary:hover{

    transform:translateY(-3px);

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

}


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

@media(max-width:1000px){

    .factory-showcase{

        padding:55px 0;

    }

    .factory-showcase-inner{

        grid-template-columns:1fr;

        gap:25px;

    }

    .factory-info{

        order:-1;

    }

    .factory-products{

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

    }

    .factory-product-card{

        min-height:205px;

    }

}


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

@media(max-width:650px){

    .factory-showcase{

        min-height:auto;

        padding:35px 0;

    }

    .factory-showcase-cover{

        background-position:center;

        background-image:

            linear-gradient(
                180deg,
                rgb(183, 209, 235),
                rgb(219, 234, 254)
            )

    }

    .factory-showcase-inner{

        gap:16px;

    }

    .factory-info{

        padding:24px 20px;

        border-radius:24px;

    }

    .factory-info h2{

        font-size:1.65rem;

        margin-top:15px;

    }

    .factory-info h3{

        font-size:.82rem;

    }

    .factory-info p{

        font-size:.78rem;

        line-height:2;

    }

    .factory-features{

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

        gap:14px;

        margin-top:20px;

        padding-top:18px;

    }

    .factory-feature{

        flex-direction:row;

        justify-content:flex-start;

        gap:7px;

        font-size:.68rem;

    }

    .factory-feature:nth-child(3),
    .factory-feature:nth-child(4){

        padding-top:12px;

        border-top:1px solid rgba(37,99,235,.1);

    }

    .factory-feature:nth-child(2),
    .factory-feature:nth-child(4){

        border-right:1px solid rgba(37,99,235,.1);

        padding-right:10px;

    }

    .factory-cta{

        display:grid;

        grid-template-columns:1fr 1fr;

        gap:9px;

        margin-top:22px;

    }

    .factory-cta a{

        height:47px;

        padding:0 10px;

        border-radius:14px;

        font-size:.7rem;

    }

    .factory-products{

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

        gap:10px;

    }

    .factory-product-card{

        min-height:190px;

        padding:13px;

        border-radius:19px;

    }

    .factory-product-icon{

        width:32px;

        height:32px;

        border-radius:10px;

    }

    .factory-product-icon .material-symbols-rounded{

        font-size:17px;

    }

    .factory-product-image{

        inset:

            30px
            10px
            40px
            10px;

    }

    .factory-product-image img{

        width:88%;

        height:88%;

    }

    .factory-product-bottom strong{

        font-size:.76rem;

    }

    .factory-product-bottom .material-symbols-rounded{

        width:29px;

        height:29px;

        border-radius:9px;

        font-size:17px;

    }

}