/*=========================================
NOVEATECH
RESPONSIVE STYLES
=========================================*/


/* LARGE LAPTOP / SMALL DESKTOP */

@media(max-width:1200px){

.services-grid,
.portfolio-grid{

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

}

.stats-grid{

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

row-gap:40px;

}

}



/* TABLETS / IPAD LANDSCAPE (1024) */

@media(max-width:1024px){


.hero-content{

gap:30px;

}


.hero-visual{

width:350px;

height:350px;

}


.tech-card{

width:240px;

height:280px;

}


.hero h1{

font-size:60px;

}


.why-grid{

grid-template-columns:1fr;

gap:50px;

}


.why-cards{

max-width:560px;

margin:0 auto;

}


.process-track{

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

}


.process-line{

left:6%;

right:6%;

}


.contact-grid{

grid-template-columns:1fr;

}


.contact-side{

order:-1;

}


}






/*=========================================
IPAD PORTRAIT (820 / iPad Air, Mini, iPad)
=========================================*/

@media(max-width:900px){


.container{

width:91%;

}


.hero h1{

font-size:50px;

letter-spacing:-2.5px;

}


.hero-description{

font-size:16.5px;

}


.hero-mini-stats{

gap:26px;

flex-wrap:wrap;

}


.services-grid{

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

gap:20px;

}


.portfolio-grid{

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

gap:20px;

}


.why-cards{

grid-template-columns:1fr 1fr;

}


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

margin-top:0;

}


.stats-grid{

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

gap:30px;

}


.process-track{

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

row-gap:50px;

}


.process-line{

display:none;

}


.form-row{

grid-template-columns:1fr;

}


.contact-info-row{

flex-direction:column;

}


.footer-grid{

grid-template-columns:1fr 1fr;

row-gap:40px;

}


}



/* MOBILE */

@media(max-width:768px){


.container{

width:92%;

}




/* HEADER */


.navbar{

height:80px;

}



.desktop-menu{

display:none;

}



/* Cart stays reachable on mobile — collapses to an icon + count instead
   of disappearing entirely (it was the only way to open the cart once
   the bottom floating button became the search trigger). */
.nav-cta{

padding:8px 12px;

font-size:0;

gap:6px;

}


.nav-cta span:first-child{

font-size:20px;

}


.nav-cta #navCartCount{

font-size:11px;

}



.menu-toggle{

display:block;

z-index:1100;

}



/* Hamburger Animation */


.menu-toggle.active span:nth-child(1){

transform:

rotate(45deg)
translate(6px,6px);


}


.menu-toggle.active span:nth-child(2){

opacity:0;


}


.menu-toggle.active span:nth-child(3){

transform:

rotate(-45deg)
translate(7px,-7px);


}






/*=========================================
MOBILE MENU PANEL
=========================================*/


.mobile-menu{


display:block;


position:fixed;


top:80px;


left:0;


width:100%;


height:0;


overflow:hidden;



background:

linear-gradient(
180deg,
rgba(5,5,5,.98),
rgba(8,18,35,.98)
);



backdrop-filter:blur(20px);



transition:.45s ease;



z-index:999;



}




.mobile-menu.active{


height:calc(100vh - 80px);


overflow-y:auto;



}



/* MOBILE BRAND */


.mobile-brand{


text-align:center;


padding-top:30px;


margin-bottom:30px;


}



.mobile-brand h2{


font-size:38px;


font-weight:800;


letter-spacing:-1px;


}



.mobile-brand h2 span{


color:var(--accent);


}




.mobile-brand p{


color:var(--muted);


margin-top:5px;


font-size:15px;


}






/* BUTTON GRID */


.mobile-grid{


display:grid;


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



gap:18px;



padding:

0 25px 40px;


}




.mobile-grid a{


height:120px;


border-radius:25px;



border:

1px solid rgba(255,255,255,.15);



background:


rgba(255,255,255,.07);



color:white;



font-size:17px;


font-weight:700;


letter-spacing:.8px;



display:flex;

align-items:center;

justify-content:center;

text-align:center;



cursor:pointer;


transition:.35s ease;



backdrop-filter:blur(15px);


}




.mobile-grid a:hover,
.mobile-grid a:active{


transform:translateY(-5px);


background:

linear-gradient(
135deg,
rgba(0,102,255,.8),
rgba(0,229,255,.8)
);



box-shadow:

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



}




/* FULL WIDTH BUTTON */


.mobile-grid .mobile-quote{


grid-column:span 2;


height:75px;


background:

linear-gradient(
135deg,
#0066FF,
#00E5FF
);



border:none;


}





/* HERO MOBILE */


.hero{


padding-top:120px;


min-height:auto;


padding-bottom:80px;


}




.hero-content{


flex-direction:column;


text-align:center;


}



.hero-text{


max-width:100%;


}




.hero h1{


font-size:52px;


letter-spacing:-2px;


}



.hero-description{


font-size:16px;

margin-left:auto;

margin-right:auto;


}



.hero-buttons{


flex-direction:column;


width:100%;


}



.primary-btn,
.secondary-btn{


width:100%;


text-align:center;


}



.hero-mini-stats{

justify-content:center;

text-align:left;

}




.hero-visual{


margin-top:50px;


width:300px;


height:300px;


}




.tech-circle{


width:260px;


height:260px;


}



.tech-ring{

width:300px;

height:300px;

}



.tech-card{


width:220px;


height:260px;


}



/* SECTION HEADERS */


.section-header h2{

font-size:34px;

letter-spacing:-1px;

}


.section-header p:last-child{

font-size:16px;

}



/* SERVICES */


.services{

padding:80px 0;

}


.services-grid{

grid-template-columns:1fr;

gap:18px;

margin-top:50px;

}



/* TRUSTED */


.marquee-item{

font-size:16px;

}



/* WHY CHOOSE */


.why-choose{

padding:80px 0;

}


.why-copy h2{

font-size:32px;

}


.why-cards{

grid-template-columns:1fr;

}



/* STATS */


.stats{

padding:70px 0;

}


.stats-grid{

grid-template-columns:1fr 1fr;

gap:26px;

}



/* PORTFOLIO */


.portfolio{

padding:80px 0;

}


.portfolio-grid{

grid-template-columns:1fr;

}


.portfolio-filters{

margin-top:36px;

margin-bottom:36px;

}



/* PROCESS */


.process{

padding:80px 0;

}


.process-track{

grid-template-columns:1fr 1fr;

row-gap:40px;

}



/* TESTIMONIALS */


.testimonials{

padding:80px 0;

}


.testimonial-card{

padding:32px 24px;

}


.testimonial-card p.quote{

font-size:16.5px;

}



/* FAQ */


.faq{

padding:80px 0;

}


.faq-question{

padding:20px;

font-size:15px;

}



/* CONTACT */


.contact{

padding:80px 0;

}


.contact-form{

padding:28px;

}



/* FOOTER */


.footer-grid{

grid-template-columns:1fr;

gap:36px;

text-align:left;

}


.footer-bottom{

flex-direction:column;

text-align:center;

}



.back-to-top{

right:18px;

bottom:18px;

width:44px;

height:44px;

}



}


/* MOBILE LANDSCAPE */

@media(max-width:900px) and (max-height:480px) and (orientation:landscape){


.hero{

min-height:auto;

padding-top:110px;

padding-bottom:60px;

}


.hero-visual{

display:none;

}


}





/* SMALL PHONES */

@media(max-width:400px){


.hero h1{


font-size:44px;


}



.mobile-grid{


gap:12px;


padding:0 15px 30px;


}



.mobile-grid a{


height:100px;


font-size:15px;


}



.stats-grid{

grid-template-columns:1fr;

}



.hero-mini-stats{

gap:20px;

}


.hero-mini-stats div h4{

font-size:22px;

}


}