/* ==================================
LARGE DEVICES
================================== */

@media (max-width: 1400px) {

    
    .container {
        max-width: 1200px;
    }

    .hero-title {
        font-size: 60px;
    }

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

    .why-title {
        font-size: 52px;
    }

    
}

/* ==================================
LAPTOPS
================================== */

@media (max-width: 1199px) {

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

    .section-heading h2 {
        font-size: 46px;
    }

    .why-title {
        font-size: 46px;
    }

    .cta-box h2 {
        font-size: 52px;
    }

    .dashboard-card {
        height: 520px;
    }

    .mini-card {
        width: 220px;
    }

    
}

/* ==================================
TABLETS
================================== */

@media (max-width: 991px) {

    
    body {
        overflow-x: hidden;
    }

    .hero-section {
        padding: 60px 0;
    }

    .hero-title {
        font-size: 46px;
        line-height: 1.15;
    }

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

    .hero-stats {
        gap: 25px;
        flex-wrap: wrap;
    }

    .dashboard-wrapper {
        margin-top: 60px;
    }

    .dashboard-card {
        height: 500px;
    }

    .card-one {
        left: 20px;
    }

    .card-two {
        right: 20px;
    }

    .card-three {
        left: 80px;
    }

    .section-heading {
        margin-bottom: 60px;
    }

        .section-heading h2 {
            font-size: 40px;
        }

    .why-title {
        font-size: 40px;
    }

    .why-grid {
        margin-top: 40px;
    }

    .why-item {
        padding: 30px;
    }

    .cta-box {
        padding: 70px 35px;
    }

        .cta-box h2 {
            font-size: 42px;
        }

    .project-image,
    .large-project .project-image {
        height: 300px;
    }

    .section-padding,
    .services-section,
    .portfolio-section,
    .why-section,
    .process-section,
    .cta-section {
        padding: 40px 0;
    }


    #captchaCode {
        display: contents;
    }
}

/* ==================================
MOBILE LANDSCAPE
================================== */

@media (max-width: 767px) {

    
    .hero-section {
        padding: 40px 0;
    }

    .hero-title {
        font-size: 38px;
        line-height: 1.15;
    }

    .hero-description {
        font-size: 16px;
        line-height: 1.7;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }

    .btn-primary-custom,
    .btn-secondary-custom {
        width: 100%;
    }

    .hero-stats {
        justify-content: space-between;
        gap: 15px;
    }

    .stat-item h3 {
        font-size: 28px;
    }

    .dashboard-card {
        height: 450px;
    }

    .mini-card {
        width: 160px;
        padding: 16px;
    }

        .mini-card h5 {
            font-size: 14px;
        }

        .mini-card p {
            font-size: 12px;
        }

    .card-one {
        top: 40px;
        left: 10px;
    }

    .card-two {
        top: 170px;
        right: 10px;
    }

    .card-three {
        left: 25px;
        bottom: 120px;
    }

    .chart-box {
        left: 10px;
        right: 10px;
        width: auto;
        bottom: 15px;
    }

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

    .why-title {
        font-size: 32px;
    }

    .service-box {
        padding: 30px;
    }

        .service-box h3 {
            font-size: 24px;
        }

    .project-content {
        padding: 25px;
    }

        .project-content h3 {
            font-size: 24px;
        }

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

    .process-box {
        padding: 30px 20px;
    }

        .process-box h3 {
            font-size: 36px;
        }

    .cta-box {
        padding: 50px 20px;
    }

        .cta-box h2 {
            font-size: 30px;
        }

        .cta-box p {
            font-size: 16px;
        }

    .tech-slider {
        gap: 12px;
    }

        .tech-slider span {
            font-size: 13px;
            padding: 10px 16px;
        }

}

/* ==================================
SMALL MOBILES
================================== */

@media (max-width: 480px) {

    
    .hero-title {
        font-size: 32px;
    }

    .hero-badge {
        font-size: 11px;
        padding: 10px 15px;
    }

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

    .why-title {
        font-size: 28px;
    }

    .dashboard-card {
        height: 420px;
    }

    .mini-card {
        width: 140px;
        padding: 12px;
    }

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

    .stat-item {
        width: 100%;
    }

    .project-image,
    .large-project .project-image {
        height: 220px;
    }

    .cta-box h2 {
        font-size: 26px;
    }

    .service-box,
    .why-item,
    .process-box {
        padding: 25px;
    }

    
}