/* ==========================================
   SPHEREXA - RESPONSIVE.CSS
   Mobile • Tablet • Laptop • Desktop
==========================================*/

/* ===============================
   Large Desktop (1400px+)
================================ */

@media (min-width:1400px){

.container{
    max-width:1350px;
}

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

.hero p{
    font-size:20px;
}

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

}

/* ===============================
   Laptop (1200px)
================================ */

@media (max-width:1200px){

.container{
    width:92%;
}

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

.hero-content{
    gap:40px;
}

.services-grid,
.portfolio-grid{
    gap:25px;
}

}

/* ===============================
   Small Laptop (992px)
================================ */

@media (max-width:992px){

header{
    padding:0;
}

nav{
    height:80px;
}

.menu-toggle{
    display:block;
    z-index:1001;
}

.nav-links{

    position:fixed;

    top:80px;
    left:-100%;

    width:100%;
    height:calc(100vh - 80px);

    background:#08111F;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    gap:30px;

    transition:.4s;

}

.nav-links.active{
    left:0;
}

.nav-links li a{
    font-size:22px;
}

nav .btn{
    display:none;
}

.hero-content,
.about-container{
    grid-template-columns:1fr;
    text-align:center;
}

.hero-left{
    order:2;
}

.hero-right{
    order:1;
}

.hero-right img{
    max-width:420px;
    margin:auto;
}

.about-list{
    justify-items:center;
}

.services-grid{
    grid-template-columns:repeat(2,1fr);
}

.why-grid{
    grid-template-columns:repeat(2,1fr);
}

.tech-grid{
    grid-template-columns:repeat(3,1fr);
}

.portfolio-grid{
    grid-template-columns:repeat(2,1fr);
}

.counter-grid{
    grid-template-columns:repeat(2,1fr);
}

.footer-grid{
    grid-template-columns:1fr 1fr;
}

}

/* ===============================
   Tablet (768px)
================================ */

@media (max-width:768px){

section{
    padding:80px 0;
}

.hero{
    padding-top:130px;
}

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

.hero p{
    font-size:16px;
}

.hero-buttons{
    flex-direction:column;
}

.hero-buttons .btn,
.hero-buttons .btn-outline{
    width:70%;
    margin:0;
}

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

.services-grid,
.why-grid,
.portfolio-grid,
.counter-grid,
.footer-grid{
    grid-template-columns:1fr;
}

.tech-grid{
    grid-template-columns:repeat(2,1fr);
}

.about-list{
    grid-template-columns:1fr;
}

.contact form{
    gap:15px;
}

.contact button{
    width:100%;
}

.footer-grid{
    text-align:center;
}

.footer-grid img{
    margin:auto auto 20px;
}

}

/* ===============================
   Large Mobile (576px)
================================ */

@media (max-width:576px){

.container{
    width:94%;
}

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

.hero-right img{
    max-width:320px;
}

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

.service-card,
.why-card,
.counter-grid div{
    padding:30px 20px;
}

.portfolio-card img{
    height:240px;
}

.cta h2{
    font-size:28px;
}

.tech-grid{
    grid-template-columns:1fr;
}

}

/* ===============================
   Mobile (425px)
================================ */

@media (max-width:425px){

.logo img{
    height:42px;
}

nav{
    height:70px;
}

.nav-links{
    top:70px;
    height:calc(100vh - 70px);
}

.hero{
    padding-top:120px;
}

.hero h1{
    font-size:32px;
    line-height:1.3;
}

.hero p{
    font-size:15px;
}

.tagline{
    font-size:13px;
}

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

.section-title p{
    font-size:15px;
}

.icon{
    width:60px;
    height:60px;
    font-size:24px;
}

.service-card h3{
    font-size:22px;
}

.about-content h2{
    font-size:30px;
}

.counter-grid h2{
    font-size:38px;
}

}

/* ===============================
   Small Mobile (375px)
================================ */

@media (max-width:375px){

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

.hero p{
    font-size:14px;
}

.btn,
.btn-outline{
    padding:14px 22px;
    font-size:15px;
}

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

.testimonial-card{
    padding:20px;
}

.contact input,
.contact textarea{
    padding:15px;
}

}

/* ===============================
   Extra Small Mobile (320px)
================================ */

@media (max-width:320px){

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

.hero p{
    font-size:13px;
}

.logo img{
    height:38px;
}

.btn,
.btn-outline{
    font-size:14px;
    padding:12px 18px;
}

.icon{
    width:55px;
    height:55px;
}

.service-card{
    padding:25px 18px;
}

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

.footer-grid{
    gap:20px;
}

}

/* ===============================
   Landscape Phones
================================ */

@media (max-height:500px) and (orientation:landscape){

.hero{
    padding-top:100px;
}

.nav-links{
    overflow-y:auto;
}

}

/* ===============================
   Smooth Image Scaling
================================ */

img{
    max-width:100%;
    height:auto;
}

/* ===============================
   Prevent Horizontal Scroll
================================ */

html,
body{
    overflow-x:hidden;
    width:100%;
}