@media (max-width: 991px){
    .main-nav{
        position:fixed;
        top:82px;
        left:0;
        width:100%;
        background:var(--white);
        flex-direction:column;
        align-items:flex-start;
        padding:20px;
        border-top:1px solid var(--border);
        box-shadow:var(--shadow);
        transform:translateY(-20px);
        opacity:0;
        visibility:hidden;
    }

    .main-nav.active{
        transform:translateY(0);
        opacity:1;
        visibility:visible;
    }

    .mobile-toggle{
        display:flex;
    }

    .nav-actions .btn-primary{
        display:none;
    }

    .hero-grid,
    .why-grid,
    .popup-content,
    .footer-grid,
    .services-grid,
    .projects-grid,
    .testimonials-slider{
        grid-template-columns:1fr;
    }

    .hero-text h1{
        font-size:42px;
    }

    .hero-visual{
        min-height:430px;
    }

    .glass-card{
        width:200px;
    }

    .cta-box{
        flex-direction:column;
        align-items:flex-start;
    }
}

@media (max-width: 767px){
    .site-header{
        padding:10px 0;
    }

    .logo img{
        height:75px;
    }

    .hero-section{
        padding:120px 0 70px;
    }

    .hero-text h1{
        font-size:34px;
    }

    .section-heading h2,
    .why-content h2,
    .cta-box h2{
        font-size:30px;
    }

    .hero-main-orb{
        width:240px;
        height:240px;
    }

    .hero-logo-center{
        width:130px;
        height:130px;
        font-size:52px;
    }

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

    .card-two{
        right:0;
        bottom:10px;
    }

    .glass-card{
        width:170px;
        padding:14px;
    }

    .popup-left,
    .popup-right{
        padding:24px;
    }

    .hero-stats div{
        width:100%;
    }

    .cta-box{
        padding:30px 22px;
    }
}
@media (max-width: 991px) {
    .values-grid,
    .team-grid,
    .stats-grid,
    .process-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .inner-banner h1 {
        font-size: 38px;
    }

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

    .services-full-grid,
    .testimonials-full-grid,
    .projects-masonry {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .inner-banner h1 {
        font-size: 28px;
    }

    .values-grid,
    .team-grid,
    .stats-grid,
    .process-steps,
    .form-row {
        grid-template-columns: 1fr;
    }

    .contact-form-wrap {
        padding: 22px;
    }

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