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

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

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Cairo',sans-serif;
}

html{
scroll-behavior:smooth;
}

body{
background:#f7f7f7;
color:#222;
overflow-x:hidden;
}

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

a{
text-decoration:none;
}

ul{
list-style:none;
}

.container{
width:90%;
max-width:1400px;
margin:auto;
}

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

.loader{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#ffffff;
display:flex;
justify-content:center;
align-items:center;
z-index:9999;
transition:.3s;
}

.loader.hide{
opacity:0;
visibility:hidden;
}

.loader img{
width:180px;
}
.loader img{
    width:180px;
    animation:pulseLogo 1.8s infinite;
}

@keyframes pulseLogo{

    0%{
        transform:scale(4);
        opacity:.8;
    }

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

    100%{
        transform:scale(4);
        opacity:.8;
    }

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

#header{
background:rgba(255,255,255,.92);
border-bottom:1px solid rgba(0,0,0,.08);
}

#header.scrolled{
background:#ffffff;
box-shadow:0 5px 20px rgba(0,0,0,.08);
}

#header .container{
display:flex;
align-items:center;
justify-content:space-between;
height:90px;
}

.logo img{
height:55px;
}

nav ul{
display:flex;
gap:35px;
}

nav a{
color:#222;
font-size:16px;
font-weight:600;
transition:.3s;
}

nav a:hover,
nav a.active{
color:#f47521;
}

.contact-btn{
padding:12px 25px;
border:1px solid #f47521;
border-radius:50px;
color:#ffffff;
display:flex;
align-items:center;
gap:10px;
transition:.3s;
}

.contact-btn:hover{
background:#f47521;
color:#000;
}

.menu-btn{
display:none;
font-size:28px;
cursor:pointer;
}


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

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    padding:0;

}

.hero-bg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:-2;

}

.overlay{
position:absolute;
width:100%;
height:100%;

background:
linear-gradient(
90deg,
rgba(255,255,255,.75) 0%,
rgba(255,255,255,.35) 45%,
rgba(255,255,255,.05) 100%
);
}
.hero-content{

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

backdrop-filter:blur(5px);

padding:40px;

border-radius:30px;

box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.hero-content{
position:relative;
z-index:2;
max-width:650px;
}

.hero-content span{
color:#f47521;
}

.hero-content h1{
font-size:95px;
font-weight:900;
line-height:1;
margin:15px 0;
}

.hero-content h3{
letter-spacing:8px;
font-weight:300;
margin-bottom:20px;
}

.hero-content h2{
font-size:40px;
margin-bottom:20px;
}

.hero-content p{
color:#bbb;
line-height:2;
margin-bottom:30px;
}

.hero-buttons{
display:flex;
gap:15px;
}

.btn-primary{
background:#f47521;
color:#ffffff;
padding:15px 35px;
border-radius:50px;
font-weight:700;
transition:.3s;
}

.btn-primary:hover{
transform:translateY(-3px);
background:#ffffff;
color:#f47521;
}


.btn-secondary{
border:1px solid #333;
padding:15px 35px;
border-radius:50px;
color:#333;
background:rgba(255,255,255,.4);
}

.btn-secondary:hover{
background:#fff;
color:#000;
}

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

.features{
margin-top:-60px;
position:relative;
z-index:5;
}

.features .container{
background:#ffffff;
border:1px solid #e5e5e5;
border-radius:25px;
display:grid;
grid-template-columns:repeat(4,1fr);
overflow:hidden;
}

.feature{
padding:30px;
display:flex;
gap:15px;
align-items:center;
border-left:1px solid rgba(255,255,255,.08);
}

.feature:last-child{
border-left:none;
}

.feature i{
font-size:35px;
color:#f47521;
}

.feature h3{
margin-bottom:5px;
}

.feature p{
color:#aaa;
font-size:14px;
}

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

.categories{
padding:30px 0 70px;
}

.categories .container{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:20px;
}

.category-card{
height:280px;
position:relative;
overflow:hidden;
border-radius:20px;

border:1px solid rgba(244,117,33,.15);

cursor:pointer;

transition:.4s ease;

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

.category-card:hover{

transform:translateY(-25px);

box-shadow:
0 20px 40px rgba(0,0,0,.15),
0 0 25px rgba(244,117,33,.25);
}

.category-card img{
width:100%;
height:100%;
object-fit:cover;

transition:.6s ease;
}

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

.category-overlay{
position:absolute;
inset:0;

background:linear-gradient(
to top,
rgba(0,0,0,.75),
rgba(0,0,0,.15)
);
}

.category-card .content{
position:absolute;
bottom:20px;
right:20px;
z-index:2;

transition:.3s;
}

.category-card:hover .content{
transform:translateY(-5px);
}

.category-card h3{
font-size:24px;
margin-bottom:5px;

color:#fff;

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

.category-card p{
color:#f1f1f1;

text-shadow:0 2px 10px rgba(0,0,0,.7);
}
/*================ BWOO =================*/

/* ================= BWOO ================= */

.bwoo-section{

    padding:70px 20px;

}

.bwoo-card{

    max-width:1400px;

    margin:auto;

    min-height:680px;

    border-radius:30px;

    overflow:hidden;

    background:url("../images/bwoo/bwoo-hero.webp") no-repeat center center;

    background-size:cover;

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

    display:flex;

    justify-content:flex-start;

    align-items:flex-start;

    padding:70px;

}

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

.bwoo-content{

    width:540px;

    text-align:right;

    padding:28px 20px;

    border-radius:30px;

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

    backdrop-filter:blur(18px);

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

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

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

}

.bwoo-content span1{

    color:#47D3D8;

    font-weight:700;

    font-size:18px;

}

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

.bwoo-badge{

    display:inline-block;

    padding:12px 28px;

    border-radius:40px;

    background:#47D3D8;

    color:#fff;

    font-size:20px;

    font-weight:700;

    margin-bottom:20px;

}

/* ================= TITLES ================= */

.bwoo-content h1{

    color:#47D3D8;

    font-size:72px;

    font-weight:900;

    line-height:1;

    margin-bottom:15px;

}

.bwoo-content h2{
position: relative;
    color:#47D3D8;

    font-size:75px;

    line-height:1.25;

    font-weight:800;

    margin-bottom:20px;

}

.bwoo-content p{

    color:#222;

    font-size:19px;

    line-height:1.8;

    margin-bottom:35px;

}

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

.bwoo-feature-item i{

    color:#47D3D8;

}

.bwoo-features-grid{

    display:grid;

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

    gap:15px;

    margin-bottom:35px;

}

.bwoo-feature-item{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    height:60px;

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

    border:1px solid rgba(71,211,216,.45);

    border-radius:14px;

    color:#222;

    font-size:17px;

    font-weight:700;

    backdrop-filter:blur(10px);

    transition:.3s;

}

.bwoo-feature-item:hover{

    border-color:#47D3D8;

    transform:translateY(-3px);

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

}

.full-width{

    grid-column:1 / -1;

}

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

.btn-bwoo{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:290px;

    height:60px;

    background:#47D3D8;

    color:#fff;

    border-radius:50px;

    font-size:20px;

    font-weight:800;

    text-decoration:none;

    transition:.3s;

}

.btn-bwoo:hover{

    background:#2FC2C9;

    transform:translateY(-3px);

}

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

@media(max-width:768px){

.bwoo-card{

    height:auto;

    padding:40px 25px;

    background-position:left center;

}

.bwoo-content{

    width:100%;

    text-align:center;

    padding:25px 18px;

    border-radius:30px;

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

    backdrop-filter:blur(2px);

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

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

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

}

.logobwoo img{

    width:180px;

    margin:auto auto 20px;

}

.bwoo-badge{


    font-size:15px;

}

.bwoo-content h2{

    font-size:25px;

}

.bwoo-content p{

    font-size:17px;

    font-weight:900;

}

.btn-bwoo{

    width:80%;
    font-size: 12px;
}

.bwoo-features-grid{

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

}

.bwoo-feature-item{

    height:40px;

    font-size:15px;

}

}
/* ================= AGM ================= */



.agm-section{

    padding:70px 20px;

}

.agm-card{

    max-width:1400px;

    margin:auto;

    min-height:680px;

    border-radius:30px;

    overflow:hidden;

    background:url("../images/agm/agm-hero1.webp") no-repeat center center;

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

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

padding:70px;

}

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

.agm-content{

   width:540px;

 /* يبعد عن الجوال */

text-align:right;
 padding: 28px 20px;

    border-radius:30px;

    background:rgba(248, 248, 248, 0.212);

    backdrop-filter:blur(1px);

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

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

    box-shadow:0 20px 45px rgb(0, 0, 0);
}
.agm-content span1{

    color:#FFC107;

    font-weight:700;

    font-size:18px;


}
.agm-badge{

    display:inline-block;

    padding:12px 28px;

    border-radius:40px;

    background:#FFC107;

    color:#111;

    font-size:20px;

    font-weight:700;

    margin-bottom:20px;

}

.agm-content h1{

    color:#FFC107;

    font-size:72px;

    font-weight:900;

    line-height:1;

    margin-bottom:15px;

}

.agm-content h2{

    color:#000000;

    font-size:48px;

    line-height:1.25;

    font-weight:800;

    margin-bottom:20px;

}

.agm-content p{

    color:#000000;

    font-size:19px;

    line-height:1.8;

    margin-bottom:35px;

}

/* ================= FEATURES ================= */
.feature-item i{
    
    color:#FFC107 ;  
}
.agm-features-grid{

    display:grid;

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

    gap:15px;

    margin-bottom:35px;

}

.feature-item{

    display:flex;

    justify-content:center;

    align-items:center;

    height:60px;

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

    border:1px solid rgba(211, 161, 12, 0.35);

    border-radius:14px;

    color:#fff;

    font-size:17px;

    font-weight:700;

    backdrop-filter:blur(8px);

    transition:.3s;

}

.feature-item:hover{

    border-color:#FFC107;

    transform:translateY(-3px);

}

.full-width{

    grid-column:1 / -1;

}

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

.btn-agm{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:290px;

    height:60px;

    background:#FFC107;

    color:#111;

    border-radius:50px;

    font-size:20px;

    font-weight:800;

    text-decoration:none;

    transition:.3s;

}

.btn-agm:hover{

    background:#ffd84d;

    transform:translateY(-3px);

}

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

@media(max-width:768px){

.agm-card{

    height: auto;

    padding:40px 25px;

    background-position:left center;

}

.agm-card::before{

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

}

.agm-content{

    width:100%;







    border-radius:30px;

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

    backdrop-filter:blur(1px);

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

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

    box-shadow:0 20px 45px rgb(0, 0, 0);
}

.logoagm img{

    width:180px;

    margin:auto auto 20px;

}

.agm-content{

    text-align:center;

}
.agm-badge{

font-size: 15px;

}
.agm-content h2{

    font-size:25px;

}

.agm-content p{

    font-size:17px;
font-weight: 900;

}

.btn-agm{

    width:80%;
    font-size: 10px;

}
.agm-features-grid{

    display:grid;

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

    gap:15px;

    margin-bottom:35px;

}
.feature-item{

    display:flex;

    justify-content:center;

    align-items:center;

    height:40px;

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

    border:1px solid rgba(211, 161, 12, 0.35);

    border-radius:14px;

    color:#fff;

    font-size:15px;

    font-weight:700;

    backdrop-filter:blur(8px);

    transition:.3s;

}
}
/* ==========================
   BRANDS MARQUEE
========================== */

.brands-marquee{

width:100%;
overflow:hidden;

padding:35px 0;

margin-top:50px;
margin-bottom:50px;

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

background:#ffffff;

position:relative;

}

.brands-track{

display:flex;
align-items:center;

gap:80px;

width:max-content;

animation:brandsMove 30s linear infinite;



}

.brands-track span{

font-size:34px;
font-weight:900;

letter-spacing:2px;

color:#333;

opacity:.5;

transition:.3s;

white-space:nowrap;

}

.brands-track span:hover{

opacity:1;
color:#f47521;

}

@keyframes brandsMove{

from{
transform:translateX(0%);
}

to{
transform:translateX(100%);
}

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

.about{
    padding:0px 0;
}

.about-content{
    text-align:center;
    max-width:900px;
    margin:auto;
}

.about-content span{


    color:#f47521;
    font-weight:700;
    font-size:18px;
}

.about-content h2{
    font-size:60px;
    margin:15px 0 30px;
}

.about-content p{
    color:#222;
    line-height:2;
    font-size:18px;
}

.about-features{
    margin-top:50px;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.about-box{
    background:#ffffff;
   border:1px solid #e5e5e5;
    border-radius:20px;
    padding:30px;
    transition:.3s;
}

.about-box:hover{
    transform:translateY(-15px);
    border-color:#f47521;
}

.about-box i{
    font-size:35px;
    color:#f47521;
    margin-bottom:15px;
}

.about-box h3{
    font-size:20px;
}



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


footer{
background:#f7f7f7;
border-top:1px solid #f7f7f7;
color:#222;
}

footer .container{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:30px;
}

.footer-logo img{
height:60px;
margin-bottom:15px;
}

.footer-contact{
display:flex;
gap:35px;
flex-wrap:wrap;
}

.footer-contact div{
display:flex;
gap:10px;
align-items:center;
}

.footer-contact i{
color:#f47521;
}

.socials{
display:flex;
gap:15px;
}

.socials a{
width:45px;
height:45px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#111;
color:#fff;
transition:.3s;
}

.socials a:hover{
background:#f1f1f1;
color:#222;
}

.footer-map-btn{
    background:#f47521;
    color:#000;
    padding:10px 20px;
    border-radius:50px;
    font-weight:700;
}

/* ==========================
   WHATSAPP
========================== */

.whatsapp{
position:fixed;
bottom:25px;
left:25px;
width:65px;
height:65px;
border-radius:50%;
background:#25d366;
display:flex;
align-items:center;
justify-content:center;
font-size:34px;
color:#fff;
z-index:999;
box-shadow:0 0 25px rgba(37,211,102,.5);
}

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





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

::-webkit-scrollbar{
    width:12px;
}

::-webkit-scrollbar-track{
    background:#050505;
}

::-webkit-scrollbar-thumb{
    background:#686868;
    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:#f47521;
}









/* PAGE HERO */

.page-hero{

padding-top:180px;
padding-bottom:80px;

text-align:center;
}

.page-hero h1{

font-size:70px;
margin-bottom:15px;
}

.page-hero p{

color:#aaa;
font-size:20px;
}

/* PRODUCTS */

.products-page{

padding-bottom:100px;
}

#products-container{

display:grid;

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

gap:25px;
}
.product-card{

cursor:pointer;
}
.product-card{
opacity:1;
transform:translateY(0);
transition:.3s;
}

.product-card.hide{
opacity:0;
transform:translateY(15px);
}
.product-card{

background:#ffffff;

border-radius:20px;

overflow:hidden;
border:1px solid #e5e5e5;

padding:20px;

text-align:center;

transition:.3s;
}

.product-card:hover{

transform:translateY(-8px);
}

.product-card img{

width:100%;
height:250px;

object-fit:contain;
}

.product-card h3{

margin:20px 0;
}

/* ==========================
   PHONES PAGE
========================== */

.phones-hero{

 position:relative;

    width:100%;

    overflow:hidden;
}

.phones-overlay{

position:absolute;
inset:0;

background:
linear-gradient(
90deg,
rgba(0,0,0,.95),
rgba(0,0,0,.4)
);
}



.phones-content{

position:relative;
z-index:2;

max-width:700px;
}

.phones-content span{

color:#f7a420;
font-weight:700;
}

.phones-content h1{
color: #f47521;
font-size:80px;
margin:15px 0;
}

.phones-content p{

font-size:22px;
color:#ccc;
}

.phone-brands{

padding-bottom:50px;
}
.search-section{

padding-bottom:30px;
}

#searchInput{

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

display:block;

margin:auto;

padding:15px 25px;

border:1px solid #ddd;

border-radius:50px;

font-size:16px;

outline:none;

transition:.3s;
}

#searchInput:focus{

border-color:#f47521;
color: #ffffff;

box-shadow:
0 0 15px rgba(244,117,33,.15);
}
.phone-brands .container{

display:flex;
justify-content:center;
gap:15px;
flex-wrap:wrap;
}
.results-count{

text-align:center;

font-size:20px;

font-weight:700;

margin-bottom:30px;


}

.results-count span{

color:#f47521;

font-size:28px;

font-weight:900;
}
.brand-btn{

background:#111;

border:none;

padding:12px 25px;

border-radius:50px;

color:#fff;

cursor:pointer;

transition:.3s;
}

.brand-btn:hover,
.brand-btn.active{

background:#f47521;
color:#ffffff;
transform:scale(1.20);

box-shadow:0 8px 20px rgba(244,117,33,.25);
}

.products-page{

padding-bottom:100px;
}

#products-container{

display:grid;

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

gap:25px;

transition:opacity .35s ease;
}
@keyframes productAppear{

from{

opacity:0;
transform:translateY(30px);

}

to{

opacity:1;
transform:translateY(0);

}

}
.product-card{
position:relative;
}

.product-badge{

position:absolute;

top:15px;
right:15px;

background:#f47521;

color:#fff;

padding:8px 14px;

border-radius:30px;

font-size:13px;

font-weight:700;

z-index:10;
}


.best-seller{

background:#28a745;
}
.product-card{

opacity:1;

transform:translateY(0);

transition:
opacity .4s ease,
transform .4s ease;
}

.product-hidden{

opacity:0;

transform:translateY(25px);
}

.product-card:hover{

transform:translateY(-30px);

box-shadow:
0 15px 35px rgba(0,0,0,.12);
}
.product-card img{

transition:.4s ease;
}

.product-card:hover img{

transform:scale(1.08);
}
.product-price{

font-size:24px;

font-weight:800;

color:#f47521;

margin-bottom:20px;
}
.product-modal{

position:fixed;
inset:0;

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

display:none;

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

z-index:9999;
}

.product-modal.active{
display:flex;
}

.modal-content{

background:#fff;

width:90%;
max-width:700px;

padding:30px;

border-radius:25px;

text-align:center;

position:relative;

animation:popupShow .3s ease;
}

@keyframes popupShow{

from{
opacity:0;
transform:scale(.9);
}

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

}

.close-modal{

position:absolute;

top:15px;
left:20px;

font-size:35px;

cursor:pointer;

color:#888;
}

.modal-content img{

width:250px;

margin:auto auto 20px;
}

#modalTitle{

margin-bottom:15px;
}

#modalPrice{

font-size:28px;

font-weight:800;

color:#f47521;

margin-bottom:15px;
}

#modalDescription{

color:#555;

line-height:2;

margin-bottom:25px;
}

#modalBadge{

display:inline-block;

padding:8px 14px;

border-radius:30px;

background:#f47521;

color:#fff;

font-size:13px;

font-weight:700;

margin-bottom:15px;
}


/* ==========================
   accssosereis PAGE
========================== */

.accessories-hero{

height:500px;

background:url('../images/accessories-banner.jpg');

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

position:relative;

display:flex;
align-items:center;

margin-bottom:60px;
}

.accessories-overlay{

position:absolute;
inset:0;

background:
linear-gradient(
90deg,
rgba(0,0,0,.95),
rgba(0,0,0,.4)
);
}

.accessories-content{

position:relative;
z-index:2;

max-width:700px;
}

.accessories-content span{

color:#f7a420;
font-weight:700;
}

.accessories-content h1{
color: #f47521;
font-size:80px;
margin:15px 0;
}

.accessories-content p{

font-size:22px;
color:#ccc;
}





/* ==========================
  home
========================== */

.home-device-hero{

height:500px;

background:url('../images/home-device-banner.jpg');

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

position:relative;

display:flex;
align-items:center;

margin-bottom:60px;
}

.home-device-overlay{

position:absolute;
inset:0;

background:
linear-gradient(
90deg,
rgba(0,0,0,.10),
rgb(0, 0, 0)
);
}

.home-device-content{

position:relative;
z-index:2;

max-width:700px;
}

.home-device-content span{

color:#f7a420;
font-weight:700;
}

.home-device-content h1{
color: #f47521;

font-size:80px;
margin:15px 0;
}

.home-device-content p{

font-size:22px;
color:#ccc;
}
/* ==========================
   BIKES PAGE
========================== */

.bikes-hero{

height:500px;

background:url('../images/bikes-hero.jpg');

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

position:relative;

display:flex;
align-items:center;

margin-bottom:60px;
}

.bikes-overlay{

position:absolute;
inset:0;

background:
linear-gradient(
90deg,
rgba(0,0,0,.95),
rgba(0,0,0,.4)
);

}

.bikes-content{

position:relative;
z-index:2;

max-width:700px;
}

.bikes-content h1{

color:#f47521;

font-size:80px;
margin:15px 0;
}

.bikes-content p{

font-size:22px;
color:#ccc;
}

/* ---------------------------------------------------------------- */

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

@media(max-width:991px){

nav{
display:block;
}

nav ul{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:15px;
}

nav a{
font-size:14px;
}



.logo img{
height:50px;
}

.hero-content h1{
font-size:65px;
}

.hero-content h2{
font-size:30px;
}

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

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

.bwoo-content h2{
font-size:65px;
}

.bwoo-content p{
font-size:22px;
}

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

.phone-brands .container{
justify-content:center;
}

}

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

@media(max-width:768px){

/* HEADER */
#header{
    position:fixed;
    top:0;
    left:0;
    width:100%;

    z-index:9999;

    background:rgba(255,255,255,.95);
    backdrop-filter:blur(10px);
}
#header .container{
height:75px;
}

.logo img{
height:50px;
}
body{
padding-top:75px;
}


.contact-btn{
display:none;
}

nav{
display:block;
}

nav ul{

display:flex;
justify-content:center;
align-items:center;
gap:10px;
flex-wrap:wrap;
overflow-x:auto;

}

nav a{

font-size:10px;

}



/* HERO */

.hero{

position:relative;

height:520px;

padding:0;

overflow:hidden;

}

.hero-bg{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

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

}

.hero-content{

position:absolute;

top:50%;
left:50%;

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

width:88%;
max-width:88%;

padding:25px;

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

backdrop-filter:blur(2px);

border-radius:25px;

text-align:center;

}

.hero-content h1{

font-size:34px;

margin:10px ;

}

.hero-content h2{

font-size:20px;

}

.hero-content h3{

font-size:11px;

letter-spacing:3px;

}

.hero-content p{

font-size:14px;

line-height:1.7;

margin-bottom:20px;

}

.hero-buttons{

flex-direction:column;

gap:12px;

}

.btn-primary,
.btn-secondary{

padding:12px 25px;

font-size:15px;

}
/* FEATURES */

.categories .container{

padding:0;

}
.features{

margin-top:15px;

}
.features .container{

display:grid;

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

gap:15px;

}

.feature{
border-radius:20px;
box-shadow:0 5px 15px rgba(0,0,0,.05);
padding:20px 15px;

flex-direction:column;

text-align:center;

gap:10px;

}

.feature i{

font-size:28px;

}

.feature h3{

font-size:18px;

}

.feature p{

font-size:13px;

}



.brands-track span{

font-size:20px;
font-weight:900;

letter-spacing:2px;

color:#333;

opacity:.5;

transition:.3s;

white-space:nowrap;

}
.brands-marquee{

width:100%;
overflow:hidden;

padding:0px 0;

margin-top:50px;
margin-bottom:50px;

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

background:#ffffff;

position:relative;

}
about{
    padding:0px 0;
}
.whatsapp{

width:55px;
height:55px;

font-size:28px;

left:15px;
bottom:10px;

}
.bikes-hero{
height:300px;
}

.bikes-content h1{
font-size:30px;
}

.bikes-content p{
font-size:18px;
}
/* CATEGORIES */

.categories .container{
grid-template-columns:1fr;
padding: 20px;

}
.category-card{
height:280px;
}
.category-card h3{
font-size:20px;
}

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

/* BWOO */

.bwoo-banner{

height:auto;

padding:40px 20px;

background-position:right;

border-radius:25px;

}

.bwoo-content{

position:relative;

left:auto;
top:auto;

transform:none;

width:100%;

text-align:center;

}

.bwoo-content h2{
font-size:48px;
}

.bwoo-content p{
font-size:18px;
}

.bwoo-stats{
grid-template-columns:repeat(2,1fr);
gap:20px;
}

.bwoo-stats h3{
font-size:32px;
}
.bwoo-overlay{
position:absolute;
inset:0;

background:linear-gradient(
90deg,
rgba(0,0,0,.70) 0%,
rgba(0,0,0,.50) 35%,
rgba(0,0,0,.25) 60%,
rgba(0,0,0,.05) 100%
);
}




/* ABOUT */

.about-content h2{
font-size:40px;
}

.about-features{
grid-template-columns:1fr;
}

/* FOOTER */

footer .container{
flex-direction:column;
text-align:center;
}

.footer-contact{
justify-content:center;
}

/* PHONES */

.phones-hero{
height:300px;
}

.phones-content h1{
font-size:30px;
}

.phones-content p{
font-size:15px;
}

/* ACCESSORIES */

.accessories-hero{
height:300px;
}

.accessories-content h1{
font-size:30px;
}

.accessories-content p{
font-size:15px;
}

/* HOME DEVICES */

.home-device-hero{
height:300px;
}

.home-device-content h1{
font-size:30px;
}

.home-device-content p{
font-size:18px;
}



/* PRODUCTS */

#products-container{

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

gap:12px;

}

.product-card{

max-width:none;

padding:20px;

}

.product-card img{

height:110px;

object-fit:contain;

margin-bottom:10px;

}

.product-card h3{

font-size:12px;

margin:5px 0;

}

.product-price{

font-size:15px;

}
.product-card .btn-primary{

padding:10px 15px;

font-size:14px;

}
}
/* ==========================
   WARRANTY PAGE
========================== */


.warranty-hero{

    position:relative;

    width:100%;

    overflow:hidden;

}

.hero-banner{

width:100%;
height:100%;
object-fit:cover;
display:block;

}

.phones-overlay{

    position:absolute;

    inset:0;

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

}

.phones-content{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:flex-start;

    z-index:2;

}


p{

text-align:center;

color:#666;

margin-bottom:35px;

}

.hero-box form{

display:flex;

gap:15px;

margin-bottom:30px;

}

.hero-box form input{

flex:1;

padding:16px;

border:1px solid #ddd;

border-radius:12px;

font-size:17px;

outline:none;

}

.hero-box form input:focus{

border-color:#f47521;

}

.hero-box form button{

padding:16px 35px;

background:#f47521;

color:#fff;

border:none;

border-radius:12px;

cursor:pointer;

font-size:16px;

font-weight:bold;

transition:.3s;

}

.hero-box form button:hover{

background:#df6313;

}

.card{

margin-top:30px;

background:#fff;

border-radius:20px;

overflow:hidden;

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

}

.status{

padding:18px;

color:#fff;

font-size:24px;

font-weight:bold;

text-align:center;

}

table{

width:100%;

border-collapse:collapse;

}

table td{

padding:18px;

border-bottom:1px solid #eee;

font-size:17px;

}

table td:first-child{

background:#fafafa;

font-weight:bold;

width:220px;

}

table tr:last-child td{

border-bottom:none;

}
.status-card{

background:#fff;

padding:40px;

border-radius:25px;

text-align:center;

margin-top:35px;

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

}

.status-icon{

width:90px;

height:90px;

border-radius:50%;

margin:auto;

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:42px;

margin-bottom:20px;

}

.status-card h2{

font-size:34px;

margin-bottom:10px;

}

.days{

display:inline-block;

background:#f5f5f5;

padding:10px 20px;

border-radius:30px;

font-weight:bold;

margin-top:10px;

}

.info-card{

background:#fff;

margin-top:25px;

border-radius:25px;

overflow:hidden;

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

}

.info-row{

display:flex;

align-items:center;

gap:20px;

padding:22px;

border-bottom:1px solid #eee;

}

.info-row:last-child{

border-bottom:none;

}

.info-row i{

font-size:28px;

color:#f47521;

width:35px;

text-align:center;

}

.info-row span{

display:block;

color:#888;

font-size:14px;

margin-bottom:4px;

}

.info-row strong{

font-size:18px;

font-weight:700;

}

.hero-box{

text-align:center;

margin-bottom:40px;

}



.status-card{

animation:popup .5s ease;

}

@keyframes popup{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.success-message{

background:#e9fff1;

border:1px solid #6fd88d;

color:#138a36;

padding:15px;

border-radius:12px;

margin-bottom:25px;

font-weight:bold;

}
.expired-message{

background:#fff2f2;

border:1px solid #ffbcbc;

color:#d10000;

padding:15px;

border-radius:12px;

margin-bottom:25px;

font-weight:bold;

}


@media(max-width:768px){

.warranty-page .container{

width:92%;
margin:25px auto;

}

.logo{

height:65px;

}

h1{

font-size:28px;

}

form{

flex-direction:column;

}

form button{

width:100%;

}

table td{

display:block;

width:100%;

}

table td:first-child{

background:#fff7f2;

}

}
/*=========================
HOME WARRANTY
=========================*/

.warranty-home{

padding:90px 0;

background:#fafafa;

}

.warranty-home-box{

max-width:850px;

margin:auto;

background:#fff;

padding:60px;

border-radius:25px;

text-align:center;

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

transition:.3s;

}

.warranty-home-box:hover{

transform:translateY(-8px);

}

.warranty-icon{

font-size:70px;

color:#f47521;

margin-bottom:25px;

}

.warranty-home-box h2{

font-size:38px;

margin-bottom:15px;

color:#222;

}

.warranty-home-box p{

font-size:18px;

color:#666;

margin-bottom:35px;

line-height:1.8;

}

.home-warranty-form{

display:flex;

gap:15px;

justify-content:center;

}

.home-warranty-form input{

flex:1;

height:60px;

padding:0 25px;

border:1px solid #ddd;

border-radius:50px;

font-size:17px;

outline:none;

}

.home-warranty-form input:focus{

border-color:#f47521;

}

.home-warranty-form button{

height:60px;

padding:0 35px;

border:none;

border-radius:50px;

background:#f47521;

color:#fff;

font-size:16px;

font-weight:bold;

cursor:pointer;

transition:.3s;

}

.home-warranty-form button:hover{

background:#d96012;

}