/*==========================================
  Quantum Tech Responsive Styles
==========================================*/

/* Large Laptops (1200px and below) */

@media (max-width:1200px){

.container{
    width:92%;
}

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

.about-grid,
.hero-container,
.why-grid,
.contact-grid{
    gap:40px;
}

}

/*==============================
 Tablets
==============================*/

@media (max-width:992px){

/* Navigation */

.nav-links{

display:none;

position:absolute;

top:90px;

left:0;

width:100%;

background:#08111f;

flex-direction:column;

padding:30px;

gap:20px;

}

.nav-links.active{

display:flex;

}

.mobile-menu{

display:block;

}

.navbar .btn-primary{

display:none;

}

/* Hero */

.hero{

padding:150px 0 80px;

}

.hero-container{

grid-template-columns:1fr;

text-align:center;

}

.hero-content{

order:2;

}

.hero-image{

order:1;

max-width:550px;

margin:auto;

}

.hero-buttons{

justify-content:center;

flex-wrap:wrap;

}

.hero h1{

font-size:46px;

}

.hero p{

margin:auto auto 30px;

}

/* Stats */

.stats .container{

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

}

/* About */

.about-grid{

grid-template-columns:1fr;

}

.about-grid img{

margin:auto;

}

/* Why Choose */

.why-grid{

grid-template-columns:1fr;

}

/* Contact */

.contact-grid{

grid-template-columns:1fr;

}

}

/*==========================================
 Mobile Devices
==========================================*/

@media (max-width:767px){

.container{
    width:92%;
}

section{
    padding:70px 0 !important;
}

/* Typography */

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

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

.section-title h2,
.about-grid h2,
.why-content h2,
.cta h2{
    font-size:30px;
}

/* Buttons */

.hero-buttons{
    flex-direction:column;
    align-items:center;
}

.btn-primary,
.btn-secondary{
    width:100%;
    text-align:center;
    max-width:280px;
}

/* Stats */

.stats .container{
    grid-template-columns:1fr;
}

.stat-box{
    padding:30px;
}

/* Services */

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

/* Technologies */

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

/* Portfolio */

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

/* Testimonials */

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

/* Contact */

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

.contact-card{
    padding:25px;
}

/* Footer */

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

.footer-about{
    margin:auto;
}

.social-icons{
    justify-content:center;
}

.newsletter{
    flex-direction:column;
    gap:10px;
}

.newsletter input{
    border-radius:8px;
}

.newsletter button{
    border-radius:8px;
    padding:14px;
}

/* Scroll Button */

.scroll-top{
    width:45px;
    height:45px;
    right:15px;
    bottom:15px;
    font-size:18px;
}

}

/*==========================================
 Small Phones
==========================================*/

@media (max-width:480px){

.logo{
    font-size:22px;
}

.hero{
    padding-top:130px;
}

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

.hero-badge{
    font-size:12px;
}

.section-title h2,
.about-grid h2,
.why-content h2{
    font-size:26px;
}

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

.service-card,
.portfolio-card,
.testimonial-card{
    padding:25px;
}

.contact-item{
    flex-direction:column;
    align-items:flex-start;
}

.feature-item{
    flex-direction:column;
    text-align:center;
}

.feature-item i{
    margin-bottom:10px;
}

}

/*==========================================
 Extra Large Screens
==========================================*/

@media (min-width:1600px){

.container{
    max-width:1400px;
}

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

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

}