/*==========================================
   Responsive Design - All Devices
==========================================*/

/* Extra Large Devices (1200px and up) */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

/* Large Devices (992px to 1199px) */
@media (max-width: 1199px) {
    .container {
        max-width: 960px;
    }
    
    .grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    h1 { font-size: 3.2rem; }
    h2 { font-size: 2.5rem; }
}

/* Medium Devices (768px to 991px) */
@media (max-width: 991px) {
    .container {
        max-width: 720px;
    }
    
    .grid-3, .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .section {
        padding: 80px 0;
    }
    
    .section-header {
        margin-bottom: 40px;
    }
    
    h1 { font-size: 2.8rem; }
    h2 { font-size: 2.2rem; }
    h3 { font-size: 1.5rem; }
}

/* Small Devices (576px to 767px) */
@media (max-width: 767px) {
    .container {
        max-width: 540px;
    }
    
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
    }
    
    .section {
        padding: 60px 0;
    }
    
    .section-header {
        margin-bottom: 30px;
    }
    
    .section-subtitle::before,
    .section-subtitle::after {
        display: none;
    }
    
    h1 { font-size: 2.3rem; }
    h2 { font-size: 2rem; }
    
    .btn {
        padding: 12px 28px;
    }
    
    .btn-lg {
        padding: 14px 35px;
    }
}

/* Extra Small Devices (below 576px) */
@media (max-width: 575px) {
    .container {
        padding: 0 15px;
    }
    
    .section {
        padding: 50px 0;
    }
    
    h1 { font-size: 2rem; }
    h2 { font-size: 1.8rem; }
    h3 { font-size: 1.3rem; }
    
    .btn {
        padding: 10px 24px;
        font-size: 0.95rem;
    }
    
    .btn-lg {
        padding: 12px 30px;
    }
    
    .card {
        padding: 25px;
    }
    
    .card-icon {
        width: 60px;
        height: 60px;
    }
    
    .card-icon i {
        font-size: 25px;
    }
}

/* Landscape Mode */
@media (max-height: 500px) and (orientation: landscape) {
    .mobile-menu {
        padding-bottom: 100px;
    }
    
    .mobile-menu-content {
        max-height: 300px;
        overflow-y: auto;
    }
}

/* Print Styles */
@media print {
    .header,
    .footer,
    .back-to-top,
    .menu-toggle,
    .overlay {
        display: none !important;
    }
    
    body {
        background: white;
        color: black;
    }
    
    a {
        text-decoration: none;
        color: black;
    }
    
    .container {
        max-width: 100%;
        padding: 0;
    }
}