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

/* FIX: Prevent site from being pushed to the right */
* {
  max-width: 100vw;
}

html, body {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

img, video, iframe {
  max-width: 100% !important;
  height: auto !important;
}

/* LARGE LAPTOP / SMALL DESKTOP */

/* 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{
display:none !important;
}


.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;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0 5px;

}



.desktop-menu,
.nav-cta{

display:none;

}



.menu-toggle{

display: block;
z-index: 1100;
position: relative;
flex-shrink: 0;
margin-left: auto;
padding: 10px;
background: none;
border: none;
cursor: pointer;

}



/* 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);


}

.menu-toggle span {
    display: block;
    width: 28px;
    height: 3px;
    background: white;
    margin: 5px 0;
    border-radius: 10px;
    transition: 0.3s ease;
}






/*=========================================
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;


}

/* Fix for iPad/tablet where menu button might also be hidden */
@media(max-width:1024px) and (min-width:769px){
  .menu-toggle {
    display: block !important;
    z-index: 1100;
    position: relative;
    flex-shrink: 0;
    margin-left: auto;
    padding: 10px;
    background: none;
    border: none;
    cursor: pointer;
  }

  .menu-toggle span {
    display: block;
    width: 28px;
    height: 3px;
    background: white;
    margin: 5px 0;
    border-radius: 10px;
    transition: 0.3s ease;
  }

  .desktop-menu,
  .nav-cta {
    display: none !important;
  }
}




/* 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{
display:none !important;
}




.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{
display:none !important;
}


}


/*=========================================
FIX: TECHNOLOGY CARD FIT NICELY - MOBILE
=========================================*/

@media(max-width:1024px){
  .hero-visual{
    width:100% !important;
    max-width:380px !important;
    height:auto !important;
    margin:0 auto !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
  }
  .tech-card.diagnostic-card{
    width:100% !important;
    max-width:350px !important;
    height:auto !important;
    min-height:600px !important;
  }
}

@media(max-width:900px){
  .hero-mini-stats{
    display:none !important;
  }
  .hero-visual{
    width:100% !important;
    max-width:360px !important;
    height:auto !important;
    margin:30px auto 0 !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
  }
  .tech-card.diagnostic-card{
    width:100% !important;
    max-width:340px !important;
    height:auto !important;
    min-height:580px !important;
  }
}

@media(max-width:768px){
  .hero-visual{
    width:100% !important;
    max-width:340px !important;
    height:auto !important;
    margin:40px auto 0 !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    position:relative !important;
  }
  .tech-circle{
    width:280px !important;
    height:280px !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%, -50%) !important;
  }
  .tech-ring{
    width:320px !important;
    height:320px !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%, -50%) !important;
  }
  .tech-card{
    width:100% !important;
    max-width:300px !important;
    height:auto !important;
  }
  .tech-card.diagnostic-card{
    width:100% !important;
    max-width:320px !important;
    height:auto !important;
    min-height:560px !important;
    margin:0 auto !important;
    padding:18px 14px 14px !important;
    border-radius:24px !important;
  }
  .diag-head{
    margin-top:18px !important;
  }
  .diag-head h3{
    font-size:22px !important;
  }
  .main-gauge-wrap{
    transform:scale(0.92);
    transform-origin:center;
  }
  .mini-gauges{
    gap:20px !important;
    margin-top:10px !important;
  }
  .circular-gauge.mini{
    width:60px !important;
    height:60px !important;
  }
}

@media(max-width:400px){
  .hero-visual{
    max-width:290px !important;
  }
  .tech-circle{
    width:240px !important;
    height:240px !important;
  }
  .tech-ring{
    width:270px !important;
    height:270px !important;
  }
  .tech-card.diagnostic-card{
    max-width:280px !important;
    min-height:510px !important;
    padding:14px 12px 10px !important;
    border-radius:20px !important;
  }
  .main-gauge-wrap{
    transform:scale(0.84);
  }
  .circular-gauge.mini{
    width:52px !important;
    height:52px !important;
  }
  .mini-value{
    font-size:13px !important;
  }
  .mini-label{
    font-size:9px !important;
  }
}