/* ===========================================================
   RESPONSIVE DESIGN
   V90 Global
=========================================================== */

/* ===============================
   LARGE LAPTOPS
================================ */

@media (max-width:1400px){

.hero h1{
font-size:62px;
}

.section-title h2{
font-size:42px;
}

}



/* ===============================
   TABLETS
================================ */

@media (max-width:1100px){

section{

padding:90px 0;

}

.hero-grid,
.about-grid,
.contact-grid{

grid-template-columns:1fr;

gap:60px;

}

.hero{

padding-top:160px;

text-align:center;

}

.hero p{

margin:auto auto 40px;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

}

.services-grid{

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

}

.why-grid{

grid-template-columns:1fr;

}

.timeline{

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

}

.stats-grid{

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

}

.partners-grid{

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

}

.testimonial-grid{

grid-template-columns:1fr;

}

.footer-grid{

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

}

nav{

display:none;

}

header .btn-primary{

display:none;

}

.menu-button{

display:block;

}

}



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

@media (max-width:768px){

.hero{

padding-top:140px;

}

.hero h1{

font-size:48px;

}

.section-title h2{

font-size:34px;

}

.section-title p{

font-size:17px;

}

.hero p{

font-size:18px;

}

.hero-stats{

flex-direction:column;

gap:30px;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.hero-buttons a{

width:100%;

max-width:320px;

}

.dashboard{

grid-template-columns:1fr;

}

.services-grid{

grid-template-columns:1fr;

}

.stats-grid{

grid-template-columns:1fr;

}

.timeline{

grid-template-columns:1fr;

}

.partners-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.cta-box{

padding:60px 30px;

}

.cta-box h2{

font-size:38px;

}

.contact-form{

padding:30px;

}

.about-card{

height:350px;

}

.server-stack{

width:220px;

}

.server{

height:48px;

}

.feature{

flex-direction:column;

text-align:center;

align-items:center;

}

.icon{

margin-bottom:15px;

}

}



/* ===============================
   SMALL PHONES
================================ */

@media (max-width:480px){

.container{

width:92%;

}

.hero h1{

font-size:38px;

}

.hero p{

font-size:16px;

}

.badge{

font-size:11px;

padding:8px 14px;

}

.section-title h2{

font-size:30px;

}

.stat-card h2{

font-size:44px;

}

.dashboard-card{

padding:20px;

}

.dashboard-card h2{

font-size:24px;

}

.service-card{

padding:30px;

}

.contact-form{

padding:20px;

}

.cta-box{

padding:45px 20px;

}

.cta-box h2{

font-size:30px;

}

}



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

.mobile-nav{

position:fixed;

top:90px;

left:0;

width:100%;

background:#0b1120;

display:flex;

flex-direction:column;

padding:25px;

gap:20px;

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

transform:translateY(-150%);

transition:.35s;

z-index:998;

}

.mobile-nav.active{

transform:translateY(0);

}

.mobile-nav a{

color:white;

font-weight:600;

padding:12px 0;

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

}



/* ===============================
   HAMBURGER ANIMATION
================================ */

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

transform:rotate(45deg) translateY(14px);

}

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

opacity:0;

}

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

transform:rotate(-45deg) translateY(-14px);

}