/*======================================
      RESPONSIVE DESIGN
      JABB TECH HUB
======================================*/

/* Large Tablets */

@media (max-width:1200px){

.hero{
    padding:140px 5%;
}

.about .container{
    flex-direction:column;
}

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

}

/* Tablets */

@media (max-width:992px){

.navbar{
    padding:20px 5%;
}

.nav-links{
    display:none;
}

.menu-btn{
    display:block;
    color:#D4AF37;
    font-size:30px;
    cursor:pointer;
}

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

.hero-content{
    width:100%;
}

.hero-image{
    width:80%;
    margin-top:50px;
}

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

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

.stats{
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

}

/* Mobile Phones */

@media (max-width:768px){

.hero{
    padding-top:130px;
}

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

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

.hero-image{
    width:100%;
}

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

.about{
    padding:80px 5%;
}

.services{
    padding:80px 5%;
}

.export{
    padding:80px 5%;
}

.portfolio{
    padding:80px 5%;
}

.contact{
    padding:80px 5%;
}

.footer{
    padding:60px 5%;
}

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

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

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

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

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

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

.hero-buttons{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.dark-btn{
    margin-left:0;
}

}

/* Small Phones */

@media (max-width:480px){

.logo h2{
    font-size:24px;
}

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

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

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

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

.btn{
    width:100%;
    text-align:center;
}

.contact-form input,
.contact-form textarea{
    font-size:15px;
}

.whatsapp{
    width:55px;
    height:55px;
    font-size:26px;
}

.scroll-top{
    width:50px;
    height:50px;
}

}

/* Ultra Wide Screens */

@media (min-width:1600px){

.container{
    max-width:1500px;
}

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

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

}