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

@media(max-width:992px){

.container{

width:90%;

}

.hero-text h1{

font-size:48px;

}

.product-grid{

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

gap:25px;

}

.footer-grid{

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

}

}


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

@media(max-width:768px){
    .hero-card,
.glass-card,
.cta-card{

width:100% !important;

max-width:100% !important;

padding:35px 25px;

border-radius:35px;

}

.top-bar{

display:none;

}

/* NAVBAR */

.navbar{

padding:18px 0;

}

.logo{

font-size:26px;

}

.menu-btn{

display:block;
font-size:28px;
cursor:pointer;

z-index:9999;

}

.nav-links{

display:none;

}

.nav-links.active{

display:flex;

flex-direction:column;

position:absolute;

top:90px;
right:20px;

width:240px;

background:

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

backdrop-filter:

blur(20px);

padding:25px;

border-radius:25px;

box-shadow:

0 20px 50px
rgba(0,0,0,.15);

gap:20px;

z-index:9999;

}

.nav-links li{

width:100%;

}

.nav-links a{

display:block;

padding:12px;

border-radius:15px;

text-align:center;

}

/* HERO */

.hero{

min-height:85vh;

padding:100px 0;

}

.hero-content{

text-align:center;

}

.hero-text h1{

font-size:38px;
line-height:1.3;

}

.hero-text p{

font-size:17px;

}

.hero-buttons{

display:flex;
flex-direction:column;

gap:15px;

margin-top:35px;

}

.hero-buttons .btn{

width:100%;

}

/* PRODUCTS */

.product-grid{

grid-template-columns:1fr;

gap:30px;

}

.product-card img{

height:240px;

}

.section-header h2{

font-size:34px;

}
}


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

.services-grid{

grid-template-columns:1fr;

gap:40px;

}

.service-card{

flex-direction:column;

text-align:center;

padding:30px;

}

.service-card img{

width:100%;
height:250px;

object-fit:cover;

border-radius:25px;

}


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

.cta-card{

padding:40px 25px;

text-align:center;

}

.cta-card h2{

font-size:32px;
line-height:1.4;

}

.cta-buttons{

display:flex;

flex-direction:column;

gap:15px;

margin-top:30px;

}

.cta-buttons .btn{

width:100%;

}


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

.footer-grid{

grid-template-columns:1fr;

gap:40px;

text-align:center;

}

.footer-grid a{

display:block;

margin:10px 0;

}


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

.contact-grid{

grid-template-columns:1fr;

gap:30px;

}

.contact-card{

padding:30px;

text-align:center;

}


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

.about-grid{

grid-template-columns:1fr;

gap:40px;

text-align:center;

}

.about-image img{

width:100%;

border-radius:30px;

}


/* ==========================
PRODUCT IMAGES
========================== */

.product-card{

overflow:hidden;

}

.product-card img{

width:100%;

height:230px;

object-fit:cover;

display:block;

}


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

.whatsapp{

width:60px;
height:60px;

right:20px;
bottom:20px;

font-size:28px;

}


/* ==========================
SMALL DEVICES
========================== */

@media(max-width:480px){

.hero-text h1{

font-size:30px;

}

.hero-text p{

font-size:15px;

}

.section-header h2{

font-size:28px;

}

.logo{

font-size:22px;

}

.nav-links.active{

width:210px;

right:15px;

}

.product-card img{

height:210px;

}

.footer-grid{

padding-bottom:30px;

}

}











/* ==========================
EXTRA RESPONSIVE FIXES
========================== */

/* Prevent horizontal scrolling */

html,
body{

overflow-x:hidden;

}


/* Images */

img{

max-width:100%;
display:block;

}


/* Container */

.container{

width:90%;
max-width:1300px;
margin:auto;

}


/* Navbar Fix */

.nav-container{

position:relative;

}


/* Product Cards */

.product-card{

height:100%;

display:flex;

flex-direction:column;

justify-content:space-between;

}


/* Buttons */

.btn{

display:inline-flex;

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

text-align:center;

}


/* CTA Buttons */

.hero-buttons,
.cta-buttons{

flex-wrap:wrap;

}


/* Footer */

footer{

overflow:hidden;

}


/* Very Small Phones */

@media(max-width:360px){

.hero{

padding:80px 0;

}

.hero-text h1{

font-size:26px;

}

.hero-text p{

font-size:14px;

}

.section-header h2{

font-size:24px;

}

.product-card img{

height:180px;

}

.whatsapp{

width:55px;
height:55px;

font-size:24px;

right:15px;
bottom:15px;

}

}


/* Large Screens */

@media(min-width:1400px){

.container{

max-width:1400px;

}

.hero-text h1{

font-size:72px;

}

}


/* Smooth Animations */

.product-card,
.service-card,
.btn{

transition:

all .4s ease;

}


/* Apple Style Hover */

.product-card:hover{

transform:

translateY(-12px);

}

.btn:hover{

transform:

translateY(-3px);

}








html,
body{

width:100%;
max-width:100%;

overflow-x:hidden;

}




@media(max-width:768px){

.nav-container{

padding:0 20px;

}

.logo{

font-size:18px;

}

}