/*=========================================
Large Devices (1400px)
=========================================*/

@media (max-width:1400px) {

    .container {

        max-width: 1200px;

    }

    .hero h1 {

        font-size: 60px;

    }

    .section-title h2 {

        font-size: 42px;

    }

}


/*=========================================
Laptop
=========================================*/

@media (max-width:1200px) {

    .hero {

        padding-top: 160px;

    }

    .hero h1 {

        font-size: 54px;

    }

    .hero p {

        font-size: 17px;

    }

    .section-title h2 {

        font-size: 38px;

    }

    .hosting h2 {

        font-size: 40px;

    }

    .cta-box {

        padding: 55px;

    }

}


/*=========================================
Tablet Landscape
=========================================*/

@media (max-width:992px) {

    .header {

        padding: 10px 0;

    }

    .navbar {

        padding: 10px 0;

    }

    .navbar-collapse {

        background: #fff;

        padding: 25px;

        margin-top: 20px;

        border-radius: 15px;

        box-shadow: 0 20px 50px rgba(0, 0, 0, .08);

    }

    .navbar-nav {

        gap: 10px;

    }

    .hero {

        text-align: center;

        padding-top: 140px;

    }

    .hero h1 {

        font-size: 48px;

    }

    .hero p {

        margin: auto;

        margin-bottom: 35px;

    }

    .hero-btn {

        justify-content: center;

        flex-wrap: wrap;

    }

    .hero-counter {

        justify-content: center;

        margin-bottom: 60px;

    }

    .hero-image {

        margin-top: 50px;

    }

    .section-title h2 {

        font-size: 36px;

    }

    .service-card {

        margin-bottom: 30px;

    }

    .feature-box {

        margin-bottom: 20px;

    }

    .process-box {

        margin-bottom: 30px;

    }

    .portfolio-card {

        margin-bottom: 30px;

    }

    .hosting {

        text-align: center;

    }

    .hosting img {

        margin-top: 40px;

    }

    .cta {

        text-align: center;

    }

    .cta .btn-light {

        margin-top: 30px;

    }

    .footer {

        text-align: center;

    }

    .social-icons {

        justify-content: center;

    }

}


/*=========================================
Tablet Portrait
=========================================*/

@media (max-width:768px) {

    section {

        padding: 80px 0;

    }

    .hero {

        padding-top: 130px;

    }

    .hero h1 {

        font-size: 42px;

    }

    .hero-counter {

        flex-direction: column;

        gap: 20px;

    }

    .section-title {

        margin-bottom: 50px;

    }

    .section-title h2 {

        font-size: 32px;

    }

    .why-us h2 {

        font-size: 34px;

    }

    .hosting h2 {

        font-size: 34px;

    }

    .cta-box {

        padding: 45px 30px;

    }

    .cta-box h2 {

        font-size: 34px;

    }

    .footer {

        padding: 70px 0 30px;

    }

    .footer h5 {

        margin-top: 35px;

    }

}


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

@media (max-width:576px) {

    .container {

        padding-left: 20px;

        padding-right: 20px;

    }

    .hero {

        padding-top: 120px;

        padding-bottom: 70px;

    }

    .hero h1 {

        font-size: 34px;

        line-height: 1.3;

    }

    .hero p {

        font-size: 16px;

    }

    .hero-btn {

        flex-direction: column;

        gap: 15px;

    }

    .btn-main,

    .btn-outline {

        width: 100%;

        margin: 0;

    }

    .section-title span {

        font-size: 13px;

    }

    .section-title h2 {

        font-size: 28px;

    }

    .service-card {

        padding: 30px;

    }

    .service-card h4 {

        font-size: 22px;

    }

    .tech-box {

        padding: 25px 15px;

    }

    .tech-box i {

        font-size: 38px;

    }

    .feature-box {

        padding: 18px;

    }

    .feature-box i {

        width: 50px;

        height: 50px;

        font-size: 20px;

    }

    .process-box {

        padding: 30px;

    }

    .process-box span {

        width: 60px;

        height: 60px;

        font-size: 22px;

    }

    .portfolio-content {

        padding: 22px;

    }

    .portfolio-content h4 {

        font-size: 22px;

    }

    .hosting h2 {

        font-size: 28px;

    }

    .stack-grid {

        gap: 12px;

    }

    .stack-grid span {

        padding: 10px 18px;

        font-size: 14px;

    }

    .testimonial-card {

        padding: 30px;

    }

    .cta-box {

        padding: 35px 25px;

    }

    .cta-box h2 {

        font-size: 28px;

    }

    .footer-logo {

        height: 45px;

    }

    .whatsapp-btn {

        width: 55px;

        height: 55px;

        font-size: 26px;

        right: 18px;

        bottom: 18px;

    }

    .scroll-top {

        width: 48px;

        height: 48px;

        right: 18px;

        bottom: 85px;

    }

}


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

@media (max-width:420px) {

    .hero h1 {

        font-size: 30px;

    }

    .section-title h2 {

        font-size: 26px;

    }

    .hero-counter h2 {

        font-size: 34px;

    }

    .stat-box h2 {

        font-size: 42px;

    }

    .cta-box h2 {

        font-size: 24px;

    }

}