/*======================================
Responsive CSS
Author: ChatGPT
======================================*/

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

@media (max-width:1200px){

.container{
    width:92%;
}

.hero-left h1{
    font-size:48px;
}

.hero-right img{
    width:380px;
}

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

}

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

@media (max-width:992px){

.header{
    padding:0;
}

.nav-container{
    height:75px;
}

.menu-btn{
    display:block;
    color:#fff;
    z-index:1001;
}

/* Mobile Navigation */

.navbar{

    position:fixed;

    top:75px;

    right:-100%;

    width:270px;

    height:calc(100vh - 75px);

    background:#111;

    transition:.4s;

    padding:40px 20px;

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

}

.navbar.active{
    right:0;
}

.nav-links{
    flex-direction:column;
    gap:25px;
}

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

/* Hero */

.hero{

    padding-top:120px;
    padding-bottom:70px;

}

.hero-container{

    grid-template-columns:1fr;

    text-align:center;

}

.hero-left{

    order:2;

}

.hero-right{

    order:1;

}

.hero-right img{

    width:340px;

    margin:auto;

}

.hero-left p{

    margin:auto;

    margin-bottom:35px;

}

.hero-buttons{

    justify-content:center;

}

.hero-left h1{

    font-size:44px;

}

.hero-left h2{

    font-size:24px;

}

/* About */

.about-grid{

    grid-template-columns:1fr;

}

.stats{

    margin-top:30px;

}

/* Contact */

.contact-grid{

    grid-template-columns:1fr;

}

}

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

@media (max-width:768px){

.section{

    padding:80px 0;

}

.section-title h2{

    font-size:34px;

}

.section-title p{

    font-size:16px;

}

.hero-left h1{

    font-size:38px;

}

.hero-left h2{

    font-size:22px;

}

.hero-left p{

    font-size:15px;

}

.hero-right img{

    width:280px;

}

.logo{

    font-size:24px;

}

.btn{

    padding:14px 28px;

    font-size:15px;

}

.service-grid{

    grid-template-columns:1fr;

}

.stats{

    grid-template-columns:1fr;

}

.cta h2{

    font-size:34px;

}

.cta p{

    font-size:16px;

}

.contact-info{

    padding:30px;

}

.contact form{

    padding:30px;

}

.footer h2{

    font-size:28px;

}

}

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

@media (max-width:480px){

.hero{

    min-height:auto;

}

.hero-left h1{

    font-size:30px;

}

.hero-left h2{

    font-size:19px;

}

.hero-left h3{

    font-size:14px;

}

.hero-left p{

    font-size:14px;

}

.hero-right img{

    width:240px;

}

.section-title h2{

    font-size:28px;

}

.section-title p{

    font-size:14px;

}

.stat-card{

    padding:25px;

}

.stat-card h2{

    font-size:34px;

}

.service-card{

    padding:35px 22px;

}

.service-card i{

    width:70px;

    height:70px;

    font-size:28px;

}

.service-card h3{

    font-size:22px;

}

.cta{

    padding:70px 20px;

}

.cta h2{

    font-size:28px;

}

.contact-info h3{

    font-size:24px;

}

.footer-social{

    gap:12px;

}

.footer-social a{

    width:40px;

    height:40px;

}

}

/* ==============================
Ultra Small Devices
============================== */

@media (max-width:360px){

.hero-left h1{

    font-size:26px;

}

.hero-right img{

    width:210px;

}

.btn{

    width:100%;

    text-align:center;

}

.hero-buttons{

    flex-direction:column;

}

.logo{

    font-size:20px;

}

}

@media (max-width: 992px) {

    .partner-row {
        gap: 15px;
    }

    .partner-card {
        width: 200px;
        height: 130px;
    }

}

@media (max-width: 700px) {

    .partner-row {
        flex-wrap: wrap;
    }

    .partner-card {
        width: calc(50% - 10px);
    }

    .bottom-row .partner-card:last-child {
        width: calc(50% - 10px);
    }

}

@media (max-width: 480px) {

    .partner-row {
        flex-direction: column;
        align-items: center;
    }

    .partner-card {
        width: 100%;
        max-width: 280px;
    }

}

@media (max-width: 520px) {
    .whatsapp-float {
        width: 52px;
        height: 52px;
        right: 16px;
        bottom: 16px;
        font-size: 28px;
    }
}