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

.hamburger{
display:none;
}

.mobile-menu{
display:none;
}

@media screen and (max-width:768px){

html,
body{
overflow-x:hidden;
}

/* DESKTOP NAV WEG */

.nav-left,
.nav-right{
display:none !important;
}

/* LOGO */
/* MOBILE NAVBAR */

nav{

height:75px !important;

padding:0 15px !important;

position:relative;

justify-content:center !important;

}

/* LOGO */

.nav-logo{

position:absolute;

left:50%;

transform:translateX(-50%);

}

.nav-logo img{

height:68px !important;

width:auto !important;

display:block;

}

/* HAMBURGER */

.hamburger{

display:flex !important;

align-items:center;

justify-content:center;

position:absolute;

left:15px;

top:50%;

transform:translateY(-50%);

font-size:28px !important;

line-height:1;

}

/* SLIDE MENU */

.mobile-menu{

border-right:
1px solid rgba(0,212,255,.2);

position:fixed;

top:0;

left:-100%;

width:220px;

height:auto;

max-height:500px;

overflow:hidden;

background:#08111f;

display:flex;

flex-direction:column;

padding-top:120px;

transition:.4s;

z-index:10000;

box-shadow:
0 0 30px rgba(0,212,255,.3);

}

.mobile-menu.active{

left:0;

}

.mobile-menu a{

color:white;

text-decoration:none;

padding:15px 20px;

font-size:16px;

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

}

.mobile-menu a:hover{

background:
rgba(0,212,255,.08);

}


/* HERO */

.hero{

padding-top:140px !important;

padding-left:20px !important;

padding-right:20px !important;

min-height:auto !important;

text-align:center;

}

.hero-right{

width:100%;

}

.hero-right h1{

font-size:2.6rem !important;

line-height:1.1 !important;

margin-bottom:20px;

}

.hero-right p{

font-size:1rem !important;

line-height:1.8;

max-width:100%;

}

/* BUTTONS */

.hero-buttons{

display:flex;

flex-direction:column;

align-items:center;

gap:15px;

}

.btn-primary,
.btn-secondary{

width:250px !important;

text-align:center;

}

/* FEATURE BOXES */

.hero-features{

grid-template-columns:1fr !important;

gap:12px;

}

.hero-feature{

width:100%;

}

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

.stats{

grid-template-columns:1fr !important;

gap:15px !important;

padding:30px 20px !important;

}

.stat-card{

padding:25px 15px !important;

}

.stat-card h2{

font-size:2rem !important;

}

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

.about{

flex-direction:column !important;

text-align:center !important;

gap:40px !important;

padding:70px 20px !important;

}

.about-image{

width:100%;

display:flex;

justify-content:center;

}

.about-image img{

max-width:280px !important;

width:100%;

margin:auto;

}

.about-content{

width:100%;

}

.about-content h2{

font-size:2.2rem !important;

line-height:1.2;

}

.about-content p{

font-size:1rem;

line-height:1.8;

}

/* ABOUT HIGHLIGHTS */

.about-highlights{

grid-template-columns:1fr !important;

gap:12px !important;

}

.about-highlights div{

padding:15px !important;

font-size:0.95rem;

}


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

.why-choose{

padding:70px 20px !important;

}

.section-heading h2{

font-size:2rem !important;

}

.why-grid{

grid-template-columns:1fr !important;

gap:20px !important;

}

.why-card{

padding:25px !important;

}

/* =========================
   CLIENT FEEDBACK
========================= */

.review-section{

padding:70px 20px !important;

}

.review-section h2{

font-size:2rem !important;

}

.review-card{

padding:25px 20px !important;

width:100% !important;

}

.review-card p{

font-size:1rem !important;

line-height:1.7 !important;

}

.review-card .btn-primary{

width:auto !important;

padding:12px 20px !important;

font-size:0.9rem !important;

}

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

.cta-section{

padding:70px 20px !important;

}

.cta-section h2{

font-size:2rem !important;

}

.cta-features{

flex-direction:column !important;

align-items:center !important;

gap:12px !important;

}

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

.contact{

padding:70px 20px !important;

}

.contact-grid{

display:flex !important;

flex-direction:column !important;

align-items:center !important;

gap:15px !important;

}

.contact-card{

width:100% !important;

max-width:280px !important;

min-height:auto !important;

padding:25px 20px !important;

}

.contact-card h3{

font-size:22px !important;

}

.contact-card p{

font-size:15px !important;

}

/* =========================
   FOOTE
========================= */

footer img{

height:70px !important;

}

footer h3{

font-size:1.5rem !important;

}
}