/* ===================================================
   PRIME ELECTRICAL & HARDWARE WEBSITE
   Developed by PrimeAIHub Technologies
   Author : PrimeAIHub
   Theme : Dark Neon Electric Blue
=================================================== */


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

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


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

:root{

    --bg:#050816;
    --bg2:#0a1225;
    --card:#101b33;
    --blue:#00E5FF;
    --blue2:#2EA8FF;
    --white:#ffffff;
    --text:#d8e4ff;
    --gray:#9fb2d4;

    --border:rgba(0,229,255,.18);

    --shadow:
    0 0 10px rgba(0,229,255,.15),
    0 0 25px rgba(0,229,255,.08);

    --radius:18px;

    --transition:.35s ease;

}


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

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

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);

    color:var(--white);

    font-family:'Poppins',sans-serif;

    overflow-x:hidden;

}


img{

    width:100%;

    display:block;

}

a{

    text-decoration:none;

}

ul{

    list-style:none;

}

section{

    padding:90px 8%;

}


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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#07111f;

}

::-webkit-scrollbar-thumb{

    background:var(--blue);

    border-radius:50px;

}



/* ===========================
        OFFER BAR
=========================== */

.offer-banner{

    position:relative;

    width:100%;

    height:42px;

    overflow:hidden;

    background:#010611;

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

    display:flex;

    align-items:center;

}

.offer-track{

    display:flex;

    white-space:nowrap;

    gap:80px;

    animation:offerScroll 35s linear infinite;

}

.offer-track span{

    color:var(--blue);

    font-size:15px;

    font-weight:500;

    letter-spacing:.3px;

}


@keyframes offerScroll{

0%{

transform:translateX(100%);

}

100%{

transform:translateX(-100%);

}

}



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

header{

    position:sticky;

    top:0;

    z-index:999;

}

.navbar{

    height:80px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 8%;

    backdrop-filter:blur(20px);

    background:rgba(5,8,22,.75);

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

}

.logo img{

    width:180px;

}

.nav-links{

    display:flex;

    gap:35px;

    align-items:center;

}

.nav-links a{

    color:white;

    transition:.3s;

    font-weight:500;

}

.nav-links a:hover{

    color:var(--blue);

}

.shop-btn{

    background:var(--blue);

    color:#001018 !important;

    padding:12px 28px;

    border-radius:50px;

    font-weight:600;

    box-shadow:var(--shadow);

}

.shop-btn:hover{

    transform:translateY(-3px);

}

.mobile-menu{

    display:none;

    color:white;

    font-size:28px;

    cursor:pointer;

}



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

.hero{

    min-height:100vh;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:60px;

    position:relative;

}

.hero::before{

content:"";

position:absolute;

inset:0;

background:

radial-gradient(circle at top right,

rgba(0,229,255,.18),

transparent 45%);

pointer-events:none;

}

.hero-content{

z-index:2;

}

.hero h1{

font-size:60px;

font-family:'Orbitron',sans-serif;

line-height:1.15;

margin-bottom:25px;

}

.hero p{

font-size:19px;

color:var(--gray);

line-height:1.8;

margin-bottom:35px;

}

.hero-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.btn-primary{

background:var(--blue);

padding:16px 38px;

border-radius:50px;

font-weight:600;

color:#001018;

transition:.35s;

box-shadow:var(--shadow);

}

.btn-primary:hover{

transform:translateY(-5px);

box-shadow:

0 0 15px var(--blue),

0 0 35px rgba(0,229,255,.3);

}

.btn-secondary{

padding:16px 36px;

border-radius:50px;

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

color:white;

transition:.35s;

}

.btn-secondary:hover{

background:var(--blue);

color:#001018;

}

.hero-video{

position:relative;

}

.hero-video video{

width:100%;

border-radius:30px;

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

box-shadow:

0 0 25px rgba(0,229,255,.25);

}



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

h2{

font-family:'Orbitron',sans-serif;

font-size:38px;

text-align:center;

margin-bottom:60px;

position:relative;

}

h2::after{

content:"";

position:absolute;

width:90px;

height:4px;

background:var(--blue);

left:50%;

bottom:-18px;

transform:translateX(-50%);

border-radius:50px;

}



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

.category-card,
.service-grid div,
.why-grid div,
.review-card,
.product-card{

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

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

backdrop-filter:blur(16px);

border-radius:var(--radius);

box-shadow:var(--shadow);

transition:.35s;

}

.category-card:hover,
.service-grid div:hover,
.why-grid div:hover,
.review-card:hover,
.product-card:hover{

transform:translateY(-8px);

border-color:var(--blue);

box-shadow:

0 0 15px rgba(0,229,255,.25),

0 0 40px rgba(0,229,255,.12);

}



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

button{

cursor:pointer;

border:none;

transition:.35s;

font-family:'Poppins';

}

button:hover{

transform:translateY(-3px);

}



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

input,
textarea{

width:100%;

padding:16px;

background:#081222;

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

color:white;

border-radius:12px;

outline:none;

margin-bottom:18px;

font-size:15px;

}

input:focus,
textarea:focus{

border-color:var(--blue);

box-shadow:0 0 10px rgba(0,229,255,.25);

}

textarea{

resize:none;

height:150px;

}

/* ===================================================
                TRUSTED BRANDS
=================================================== */

.brands{

    overflow:hidden;

    background:linear-gradient(to bottom,#081222,#050816);

}

.brand-slider{

    display:flex;

    align-items:center;

    gap:60px;

    width:max-content;

    animation:brandScroll 28s linear infinite;

}

.brand-slider img{

    width:130px;

    height:70px;

    object-fit:contain;

    padding:15px;

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

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

    border-radius:16px;

    filter:grayscale(100%);

    transition:.35s;

}

.brand-slider img:hover{

    filter:grayscale(0%);

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

    border-color:var(--blue);

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

}

@keyframes brandScroll{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}


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

.category-grid{

    display:grid;

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

    gap:35px;

}

.category-card{

    padding:45px;

    text-align:center;

}

.category-card i{

    font-size:60px;

    color:var(--blue);

    margin-bottom:25px;

}

.category-card h3{

    font-size:30px;

    margin-bottom:20px;

}

.category-card a{

    display:inline-block;

    margin-top:15px;

    color:var(--blue);

    font-weight:600;

}

.category-card:hover{

    transform:translateY(-10px);

}


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

.product-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));

    gap:30px;

}

.product-card{

    overflow:hidden;

    position:relative;

}

.product-image{

    overflow:hidden;

}

.product-image img{

    height:250px;

    object-fit:cover;

    transition:.5s;

}

.product-card:hover img{

    transform:scale(1.08);

}

.product-info{

    padding:22px;

}

.product-info h3{

    font-size:20px;

    margin-bottom:8px;

}

.brand{

    color:var(--blue);

    font-weight:600;

    margin-bottom:15px;

}

.price{

    font-size:22px;

    font-weight:700;

    color:#fff;

    margin-bottom:20px;

}

.product-buttons{

    display:flex;

    gap:12px;

}

.view-btn{

    flex:1;

    background:var(--blue);

    color:#001018;

    padding:12px;

    border-radius:50px;

    text-align:center;

    font-weight:600;

}

.cart-btn{

    width:48px;

    height:48px;

    border-radius:50%;

    background:#0d203c;

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--blue);

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

}

.cart-btn:hover{

    background:var(--blue);

    color:#001018;

}


/* ===================================================
            MONSOON SPECIAL
=================================================== */

.monsoon{

background:

linear-gradient(180deg,

#050816,

#081426,

#050816);

}

.monsoon .product-card{

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

}

.badge{

position:absolute;

top:15px;

left:15px;

background:#00E5FF;

color:#001018;

padding:7px 15px;

border-radius:30px;

font-size:13px;

font-weight:700;

z-index:5;

box-shadow:

0 0 12px rgba(0,229,255,.4);

}


/* ===================================================
                SERVICES
=================================================== */

.service-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:28px;

}

.service-grid div{

padding:35px;

text-align:center;

font-size:20px;

font-weight:600;

}


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

.why-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:28px;

}

.why-grid div{

padding:35px;

text-align:center;

font-size:19px;

font-weight:600;

}


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

.product-card::before{

content:"";

position:absolute;

top:-120%;

left:-120%;

width:220%;

height:220%;

background:

linear-gradient(

45deg,

transparent,

rgba(255,255,255,.08),

transparent);

transform:rotate(25deg);

transition:.8s;

}

.product-card:hover::before{

left:100%;

}


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

.product-card:hover{

box-shadow:

0 0 15px rgba(0,229,255,.25),

0 0 35px rgba(0,229,255,.15),

0 0 60px rgba(0,229,255,.08);

}


/* ===================================================
            SECTION BACKGROUNDS
=================================================== */

.featured-products{

background:#081222;

}

.categories{

background:#050816;

}

.services{

background:#081222;

}

.why-us{

background:#050816;

}

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

.reviews{
    background:linear-gradient(180deg,#081222,#050816);
}

.review-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:30px;
}

.review-card{
    padding:35px;
    position:relative;
}

.review-card:hover{
    transform:translateY(-10px);
}

.review-stars{
    color:#FFD700;
    font-size:20px;
    margin-bottom:18px;
}

.review-card p{
    color:var(--text);
    line-height:1.8;
    margin-bottom:25px;
}

.review-user{
    display:flex;
    align-items:center;
    gap:18px;
}

.review-user img{
    width:65px;
    height:65px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid var(--blue);
}

.review-user h4{
    font-size:18px;
    margin-bottom:5px;
}

.review-user span{
    color:var(--gray);
    font-size:14px;
}

.review-card::before{
    content:"★★★★★";
    position:absolute;
    top:25px;
    right:25px;
    color:rgba(255,255,255,.05);
    font-size:28px;
    font-weight:bold;
}



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

.contact{
    background:#081222;
}

.contact-wrapper{
    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:45px;
    align-items:start;
}

.contact-info{
    display:flex;
    flex-direction:column;
    gap:22px;
}

.info-card{
    display:flex;
    align-items:center;
    gap:18px;
    background:rgba(255,255,255,.03);
    border:1px solid var(--border);
    border-radius:16px;
    padding:22px;
    transition:.35s;
}

.info-card:hover{
    transform:translateX(8px);
    border-color:var(--blue);
    box-shadow:var(--shadow);
}

.info-card i{
    width:60px;
    height:60px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    background:rgba(0,229,255,.12);
    color:var(--blue);
    font-size:24px;
}

.info-card h4{
    margin-bottom:5px;
    font-size:18px;
}

.info-card p{
    color:var(--gray);
    line-height:1.6;
}

.contact-form{
    background:rgba(255,255,255,.03);
    border:1px solid var(--border);
    border-radius:22px;
    padding:35px;
    box-shadow:var(--shadow);
}

.contact-form h3{
    margin-bottom:25px;
    font-size:28px;
    font-family:'Orbitron',sans-serif;
}

.contact-form button{
    width:100%;
    padding:16px;
    background:var(--blue);
    color:#001018;
    font-size:17px;
    font-weight:700;
    border-radius:50px;
    box-shadow:var(--shadow);
}

.contact-form button:hover{
    box-shadow:
    0 0 15px rgba(0,229,255,.4),
    0 0 35px rgba(0,229,255,.25);
}



/* ===================================================
                    GOOGLE MAP
=================================================== */

.map{
    margin-top:70px;
    border-radius:25px;
    overflow:hidden;
    border:1px solid var(--border);
    box-shadow:var(--shadow);
}

.map iframe{
    width:100%;
    height:450px;
    border:none;
    filter:grayscale(20%) contrast(1.05);
}



/* ===================================================
                CONTACT SOCIAL BUTTONS
=================================================== */

.contact-social{
    display:flex;
    gap:18px;
    margin-top:25px;
}

.contact-social a{
    width:52px;
    height:52px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    background:rgba(255,255,255,.04);
    border:1px solid var(--border);
    color:var(--blue);
    font-size:20px;
    transition:.35s;
}

.contact-social a:hover{
    background:var(--blue);
    color:#001018;
    transform:translateY(-6px);
}



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

.contact,
.reviews{

    position:relative;
    overflow:hidden;

}

.contact::before,
.reviews::before{

    content:"";

    position:absolute;

    width:450px;
    height:450px;

    border-radius:50%;

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

    filter:blur(120px);

    top:-180px;
    right:-180px;

    pointer-events:none;

}

.contact::after{

    content:"";

    position:absolute;

    width:380px;
    height:380px;

    border-radius:50%;

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

    left:-180px;
    bottom:-180px;

    filter:blur(120px);

}



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

@media(max-width:991px){

.contact-wrapper{

grid-template-columns:1fr;

}

.map iframe{

height:350px;

}

}

@media(max-width:768px){

.review-grid{

grid-template-columns:1fr;

}

.contact-form{

padding:25px;

}

.info-card{

padding:18px;

}

}

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

footer{
    background:#030712;
    border-top:1px solid var(--border);
    padding:70px 8% 25px;
}

.footer-container{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:45px;
}

.footer-logo img{
    width:180px;
    margin-bottom:20px;
}

.footer-about{
    color:var(--gray);
    line-height:1.8;
}

.footer-column h3{
    font-size:20px;
    margin-bottom:20px;
    color:var(--white);
    font-family:'Orbitron',sans-serif;
}

.footer-column ul{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.footer-column a{
    color:var(--gray);
    transition:.3s;
}

.footer-column a:hover{
    color:var(--blue);
    padding-left:6px;
}

.footer-contact p{
    color:var(--gray);
    margin-bottom:14px;
}

.footer-contact i{
    color:var(--blue);
    margin-right:10px;
}

.footer-social{
    display:flex;
    gap:15px;
    margin-top:25px;
}

.footer-social a{
    width:46px;
    height:46px;
    border-radius:50%;
    background:rgba(255,255,255,.04);
    border:1px solid var(--border);
    display:flex;
    justify-content:center;
    align-items:center;
    color:var(--blue);
    transition:.35s;
}

.footer-social a:hover{
    background:var(--blue);
    color:#001018;
    transform:translateY(-5px);
}

.footer-bottom{
    margin-top:50px;
    padding-top:25px;
    border-top:1px solid rgba(255,255,255,.08);
    text-align:center;
    color:var(--gray);
    font-size:15px;
}



/* ===================================================
            FLOATING WHATSAPP BUTTON
=================================================== */

.floating-whatsapp{

    position:fixed;

    right:25px;

    bottom:95px;

    width:62px;

    height:62px;

    border-radius:50%;

    background:#25D366;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;

    box-shadow:0 0 20px rgba(37,211,102,.5);

    z-index:999;

    transition:.35s;

}

.floating-whatsapp:hover{

    transform:scale(1.12);

}



/* ===================================================
                FLOATING CALL BUTTON
=================================================== */

.floating-call{

    position:fixed;

    right:25px;

    bottom:170px;

    width:62px;

    height:62px;

    border-radius:50%;

    background:var(--blue);

    color:#001018;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:26px;

    box-shadow:var(--shadow);

    z-index:999;

    transition:.35s;

}

.floating-call:hover{

    transform:scale(1.12);

}



/* ===================================================
                SCROLL TO TOP
=================================================== */

.scroll-top{

    position:fixed;

    left:25px;

    bottom:35px;

    width:58px;

    height:58px;

    border-radius:50%;

    border:none;

    background:var(--blue);

    color:#001018;

    font-size:22px;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:999;

    box-shadow:var(--shadow);

}

.scroll-top.active{

    opacity:1;

    visibility:visible;

}

.scroll-top:hover{

    transform:translateY(-6px);

}



/* ===================================================
                MOBILE STICKY BAR
=================================================== */

.mobile-action-bar{

    display:none;

    position:fixed;

    bottom:0;

    left:0;

    width:100%;

    height:68px;

    background:#081222;

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

    z-index:1000;

}

.mobile-action-bar a{

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    color:var(--white);

    font-size:13px;

    transition:.3s;

}

.mobile-action-bar a i{

    font-size:20px;

    margin-bottom:4px;

}

.mobile-action-bar a:hover{

    color:var(--blue);

}



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

@media(max-width:1100px){

.footer-container{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:768px){

.footer-container{

grid-template-columns:1fr;

text-align:center;

}

.footer-logo img{

margin:auto auto 20px;

}

.footer-social{

justify-content:center;

}

.floating-call{

bottom:160px;

right:18px;

}

.floating-whatsapp{

bottom:85px;

right:18px;

}

.scroll-top{

left:18px;

bottom:85px;

}

.mobile-action-bar{

display:flex;

}

body{

padding-bottom:68px;

}

}

/* ===================================================
                    CART DRAWER
=================================================== */

.cart-drawer{

    position:fixed;

    top:0;

    right:-450px;

    width:420px;

    max-width:100%;

    height:100vh;

    background:#081222;

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

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

    z-index:9999;

    transition:.45s ease;

    display:flex;

    flex-direction:column;

}

.cart-drawer.active{

    right:0;

}

.cart-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px;

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

}

.cart-header h2{

    font-size:24px;

    margin:0;

}

.close-cart{

    font-size:28px;

    cursor:pointer;

    color:var(--blue);

}

.cart-items{

    flex:1;

    overflow-y:auto;

    padding:20px;

}

.cart-item{

    display:flex;

    gap:15px;

    margin-bottom:18px;

    padding-bottom:18px;

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

}

.cart-item img{

    width:85px;

    height:85px;

    object-fit:cover;

    border-radius:12px;

}

.cart-details{

    flex:1;

}

.cart-details h4{

    margin-bottom:8px;

}

.cart-details p{

    color:var(--gray);

    font-size:14px;

}

.remove-item{

    color:#ff5b5b;

    cursor:pointer;

    font-size:14px;

    margin-top:10px;

    display:inline-block;

}

.cart-footer{

    padding:20px;

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

}

.cart-footer h3{

    margin-bottom:15px;

}

.cart-footer input,

.cart-footer textarea{

    margin-bottom:15px;

}

.checkout-btn{

    width:100%;

    padding:15px;

    border-radius:50px;

    background:var(--blue);

    color:#001018;

    font-size:17px;

    font-weight:700;

    box-shadow:var(--shadow);

}

.checkout-btn:hover{

    transform:translateY(-4px);

}



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

.cart-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.6);

    backdrop-filter:blur(3px);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:9998;

}

.cart-overlay.active{

    opacity:1;

    visibility:visible;

}



/* ===================================================
                    TOAST
=================================================== */

.toast{

    position:fixed;

    top:100px;

    right:30px;

    background:#081222;

    color:white;

    border-left:5px solid var(--blue);

    padding:18px 22px;

    border-radius:14px;

    box-shadow:var(--shadow);

    transform:translateX(400px);

    transition:.4s;

    z-index:10000;

}

.toast.show{

    transform:translateX(0);

}



/* ===================================================
                LOADER
=================================================== */

.loader{

    position:fixed;

    inset:0;

    background:#050816;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:100000;

}

.loader.hidden{

    opacity:0;

    visibility:hidden;

}

.loader-circle{

    width:90px;

    height:90px;

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

    border-top:6px solid var(--blue);

    border-radius:50%;

    animation:spin 1s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}



/* ===================================================
            FADE ANIMATION
=================================================== */

.fade-up{

    opacity:0;

    transform:translateY(60px);

    transition:1s;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}

.fade-left{

    opacity:0;

    transform:translateX(-70px);

    transition:1s;

}

.fade-left.show{

    opacity:1;

    transform:translateX(0);

}

.fade-right{

    opacity:0;

    transform:translateX(70px);

    transition:1s;

}

.fade-right.show{

    opacity:1;

    transform:translateX(0);

}

.zoom-in{

    opacity:0;

    transform:scale(.8);

    transition:1s;

}

.zoom-in.show{

    opacity:1;

    transform:scale(1);

}



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

img{

    transition:.35s;

}

.product-image{

    overflow:hidden;

}

.product-image:hover img{

    transform:scale(1.08);

}



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

.glow{

    position:relative;

}

.glow::after{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:inherit;

    border:1px solid rgba(0,229,255,.2);

    opacity:0;

    transition:.35s;

}

.glow:hover::after{

    opacity:1;

}



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

::selection{

    background:var(--blue);

    color:#001018;

}



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

.empty-cart{

    text-align:center;

    color:var(--gray);

    padding:60px 20px;

}

.empty-cart i{

    font-size:70px;

    color:var(--blue);

    margin-bottom:20px;

}



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

@media(max-width:768px){

.cart-drawer{

width:100%;

right:-100%;

}

.toast{

right:15px;

left:15px;

transform:translateY(-120px);

}

.toast.show{

transform:translateY(0);

}

.loader-circle{

width:70px;

height:70px;

}

}

/* ===================================================
            RESPONSIVE - LARGE LAPTOP
            (1200px)
=================================================== */

@media (max-width:1200px){

section{
    padding:80px 6%;
}

.navbar{
    padding:0 6%;
}

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

.hero{
    gap:40px;
}

.footer-container{
    grid-template-columns:1.5fr 1fr 1fr;
}

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

.brand-slider img{
    width:110px;
    height:65px;
}

}



/* ===================================================
            RESPONSIVE - LAPTOP
            (992px)
=================================================== */

@media (max-width:992px){

.hero{

grid-template-columns:1fr;

text-align:center;

padding-top:50px;

}

.hero-content{

order:2;

}

.hero-video{

order:1;

}

.hero-buttons{

justify-content:center;

}

.hero h1{

font-size:46px;

}

.hero p{

font-size:17px;

}

.category-grid{

grid-template-columns:1fr 1fr;

}

.product-grid{

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

}

.service-grid{

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

}

.why-grid{

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

}

.footer-container{

grid-template-columns:1fr 1fr;

}

.contact-wrapper{

grid-template-columns:1fr;

}

.map iframe{

height:350px;

}

}



/* ===================================================
            RESPONSIVE - TABLET
            (768px)
=================================================== */

@media (max-width:768px){

section{

padding:70px 5%;

}

.offer-banner{

height:36px;

}

.offer-track span{

font-size:13px;

}

.navbar{

height:72px;

padding:0 5%;

}

.logo img{

width:150px;

}

.nav-links{

position:fixed;

top:72px;

right:-100%;

width:270px;

height:calc(100vh - 72px);

background:#081222;

display:flex;

flex-direction:column;

align-items:flex-start;

padding:35px;

gap:24px;

transition:.4s;

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

}

.nav-links.active{

right:0;

}

.mobile-menu{

display:block;

}

.hero{

min-height:auto;

gap:35px;

}

.hero h1{

font-size:38px;

}

.hero p{

font-size:16px;

line-height:1.7;

}

.hero-video video{

border-radius:20px;

}

.brand-slider{

gap:35px;

}

.brand-slider img{

width:95px;

height:55px;

padding:10px;

}

.category-grid{

grid-template-columns:1fr;

}

.product-grid{

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

gap:20px;

}

.product-image img{

height:180px;

}

.product-info{

padding:15px;

}

.product-info h3{

font-size:17px;

}

.price{

font-size:18px;

}

.service-grid{

grid-template-columns:1fr;

}

.why-grid{

grid-template-columns:1fr;

}

.review-grid{

grid-template-columns:1fr;

}

.footer-container{

grid-template-columns:1fr;

text-align:center;

}

.footer-social{

justify-content:center;

}

.contact-social{

justify-content:center;

}

.contact-form{

padding:22px;

}

.info-card{

padding:18px;

}

.map iframe{

height:300px;

}

}

/* ===================================================
            RESPONSIVE - MOBILE (576px)
=================================================== */

@media (max-width:576px){

section{
padding:60px 20px;
}

.offer-banner{
height:34px;
}

.offer-track span{
font-size:12px;
gap:40px;
}

.hero h1{
font-size:32px;
line-height:1.3;
}

.hero p{
font-size:15px;
}

.hero-buttons{
flex-direction:column;
align-items:center;
gap:15px;
}

.btn-primary,
.btn-secondary{
width:100%;
max-width:280px;
text-align:center;
}

.brand-slider{
gap:25px;
}

.brand-slider img{
width:80px;
height:45px;
padding:8px;
}

.product-grid{
grid-template-columns:1fr;
}

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

.category-card{
padding:30px 20px;
}

.category-card h3{
font-size:24px;
}

.service-grid div,
.why-grid div{
padding:22px;
font-size:17px;
}

.review-card{
padding:25px;
}

.review-user img{
width:55px;
height:55px;
}

.footer{
padding-bottom:90px;
}

}


/* ===================================================
            RESPONSIVE - MOBILE (425px)
=================================================== */

@media (max-width:425px){

.logo img{
width:135px;
}

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

.hero p{
font-size:14px;
}

h2{
font-size:28px;
margin-bottom:45px;
}

.product-image img{
height:200px;
}

.product-info h3{
font-size:16px;
}

.price{
font-size:18px;
}

.brand-slider img{
width:72px;
height:42px;
}

.info-card{
flex-direction:column;
text-align:center;
gap:12px;
}

.contact-form{
padding:18px;
}

.footer-column h3{
font-size:18px;
}

.footer-bottom{
font-size:13px;
}

}


/* ===================================================
            RESPONSIVE - MOBILE (375px)
=================================================== */

@media (max-width:375px){

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

.hero-buttons{
gap:12px;
}

.btn-primary,
.btn-secondary{
padding:14px 22px;
font-size:15px;
}

.product-image img{
height:180px;
}

.category-card i{
font-size:45px;
}

.category-card h3{
font-size:22px;
}

.service-grid div,
.why-grid div{
font-size:16px;
}

.review-card p{
font-size:14px;
}

.map iframe{
height:260px;
}

}


/* ===================================================
            RESPONSIVE - SMALL DEVICES (320px)
=================================================== */

@media (max-width:320px){

body{
font-size:14px;
}

.logo img{
width:120px;
}

.offer-track span{
font-size:11px;
}

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

.hero p{
font-size:13px;
}

h2{
font-size:24px;
}

.product-image img{
height:160px;
}

.product-info{
padding:12px;
}

.product-info h3{
font-size:15px;
}

.price{
font-size:17px;
}

.view-btn{
font-size:14px;
padding:10px;
}

.cart-btn{
width:42px;
height:42px;
}

.review-card{
padding:20px;
}

.info-card{
padding:15px;
}

.contact-form{
padding:15px;
}

.floating-call,
.floating-whatsapp{
width:54px;
height:54px;
font-size:22px;
right:15px;
}

.scroll-top{
width:50px;
height:50px;
left:15px;
}

.mobile-action-bar{
height:62px;
}

.mobile-action-bar a{
font-size:11px;
}

.mobile-action-bar i{
font-size:18px;
}

}


/* ===================================================
            RESPONSIVE IMAGE SAFETY
=================================================== */

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

video{
max-width:100%;
height:auto;
display:block;
}


/* ===================================================
            FLEX WRAPPING
=================================================== */

.hero-buttons,
.product-buttons,
.footer-social,
.contact-social{
flex-wrap:wrap;
}


/* ===================================================
            TOUCH FRIENDLY
=================================================== */

button,
a,
input,
textarea{
-webkit-tap-highlight-color:transparent;
touch-action:manipulation;
}


/* ===================================================
            SMOOTH MOBILE SCROLL
=================================================== */

html{
scroll-behavior:smooth;
-webkit-text-size-adjust:100%;
}

body{
overflow-x:hidden;
}

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

.featured-products{

padding:90px 6%;

background:#08111f;

text-align:center;

}

.featured-products h2{

font-family:'Orbitron',sans-serif;

font-size:42px;

margin-bottom:12px;

color:#fff;

}

.section-subtitle{

color:#a9b5c8;

font-size:17px;

margin-bottom:55px;

}

.featured-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(230px,1fr));

gap:28px;

}


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

.featured-card{

position:relative;

background:#101828;

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

border-radius:20px;

overflow:hidden;

transition:.35s;

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

}

.featured-card:hover{

transform:translateY(-10px);

border-color:#00D9FF;

box-shadow:

0 15px 35px rgba(0,217,255,.25),

0 0 25px rgba(0,217,255,.20);

}


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

.featured-card img{

width:100%;

height:210px;

object-fit:contain;

background:#fff;

padding:18px;

transition:.35s;

}

.featured-card:hover img{

transform:scale(1.08);

}


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

.featured-card .badge{

position:absolute;

top:15px;

left:15px;

background:linear-gradient(135deg,#00D9FF,#008CFF);

color:#fff;

padding:7px 14px;

border-radius:30px;

font-size:12px;

font-weight:600;

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

}


/* ================= PRODUCT NAME ================= */

.featured-card h3{

padding:22px 18px 8px;

font-size:20px;

font-weight:600;

color:#fff;

min-height:70px;

}


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

.featured-card p{

font-size:26px;

font-weight:700;

color:#00FFC8;

padding-bottom:25px;

}


/* ==========================================================
                EXPLORE SHOP
========================================================== */

.explore-shop{

margin-top:60px;

}

.explore-btn{

display:inline-flex;

align-items:center;

gap:14px;

padding:18px 42px;

border-radius:50px;

font-size:18px;

font-weight:600;

background:linear-gradient(135deg,#00D9FF,#008CFF);

color:#fff;

transition:.35s;

box-shadow:0 10px 30px rgba(0,217,255,.25);

}

.explore-btn:hover{

transform:translateY(-5px);

box-shadow:

0 15px 40px rgba(0,217,255,.45);

}

.explore-btn i{

transition:.35s;

}

.explore-btn:hover i{

transform:translateX(6px);

}


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

@media(max-width:768px){

.featured-products{

padding:70px 20px;

}

.featured-products h2{

font-size:34px;

}

.featured-grid{

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

gap:18px;

}

.featured-card img{

height:150px;

padding:12px;

}

.featured-card h3{

font-size:16px;

min-height:55px;

padding:16px 12px 8px;

}

.featured-card p{

font-size:20px;

padding-bottom:18px;

}

.explore-btn{

width:100%;

justify-content:center;

}

}


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

@media(max-width:480px){

.featured-grid{

grid-template-columns:1fr;

}

}

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

.reviews{

padding:90px 6%;

background:#050816;

text-align:center;

}

.reviews h2{

font-family:'Orbitron',sans-serif;

font-size:42px;

color:#fff;

margin-bottom:12px;

}

.reviews .section-subtitle{

color:#aab7c9;

font-size:17px;

margin-bottom:55px;

}

.review-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:30px;

}


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

.review-card{

background:#101828;

border:1px solid rgba(0,217,255,.12);

border-radius:20px;

padding:35px 25px;

transition:.35s;

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

}

.review-card:hover{

transform:translateY(-10px);

border-color:#00D9FF;

box-shadow:

0 15px 35px rgba(0,217,255,.25),

0 0 20px rgba(0,217,255,.18);

}


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

.review-card img{

width:90px;

height:90px;

border-radius:50%;

object-fit:cover;

border:3px solid #00D9FF;

margin:auto;

margin-bottom:18px;

}


/* ================= NAME ================= */

.review-card h3{

font-size:22px;

color:#fff;

margin-bottom:6px;

}


/* ================= CITY ================= */

.review-card span{

display:block;

color:#00D9FF;

font-size:14px;

margin-bottom:15px;

}


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

.stars{

color:#FFD700;

font-size:20px;

letter-spacing:3px;

margin-bottom:18px;

}


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

.review-card p{

color:#c8d3e2;

font-size:15px;

line-height:1.8;

min-height:95px;

}


/* ================= VERIFIED ================= */

.review-card small{

display:inline-block;

margin-top:18px;

padding:8px 14px;

border-radius:30px;

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

color:#00FFC8;

font-size:13px;

font-weight:600;

}


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

@media(max-width:768px){

.reviews{

padding:70px 20px;

}

.review-grid{

grid-template-columns:1fr;

}

.review-card{

padding:28px 20px;

}

.review-card p{

min-height:auto;

}

}