/* Responsive Styles for Jellybean Cyber */

/* Large Desktops (1200px and up) */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
    
    .hero-content h1 {
        font-size: 56px;
    }
}

/* Medium Desktops (992px - 1199px) */
@media (max-width: 1199px) {
    .container {
        max-width: 960px;
    }
    
    .hero-content h1 {
        font-size: 42px;
    }
    
    .hero-image {
        width: 45%;
    }
    
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .approach-content {
        gap: 40px;
    }
    
    .clients-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablets (768px - 991px) */
@media (max-width: 991px) {
    .container {
        max-width: 720px;
    }
    
    .header-content {
        height: 70px;
    }
    
    .main-nav {
        display: none;
    }
    
    .mobile-menu-btn {
        display: flex;
    }
    
    .hero-section {
        padding: 120px 0 80px;
    }
    
    .hero-content {
        max-width: 100%;
        text-align: center;
        margin-bottom: 60px;
    }
    
    .hero-content h1 {
        font-size: 36px;
    }
    
    .hero-cta {
        justify-content: center;
    }
    
    .hero-image {
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .approach-content {
        flex-direction: column;
    }
    
    .approach-image {
        margin-top: 40px;
    }
    
    .contact-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
}

/* Large Phones (576px - 767px) */
@media (max-width: 767px) {
    .container {
        max-width: 540px;
    }
    
    .hero-content h1 {
        font-size: 32px;
    }
    
    .section-header h2 {
        font-size: 28px;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .clients-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .testimonial-content {
        padding: 30px 20px;
    }
    
    .contact-form {
        grid-template-columns: 1fr;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}

/* Small Phones (575px and below) */
@media (max-width: 575px) {
    .container {
        padding: 0 15px;
    }
    
    .hero-content h1 {
        font-size: 28px;
    }
    
    .hero-content p {
        font-size: 16px;
    }
    
    .hero-cta {
        flex-direction: column;
        gap: 15px;
    }
    
    .hero-cta .btn {
        width: 100%;
    }
    
    .section-header h2 {
        font-size: 24px;
    }
    
    .section-header p {
        font-size: 16px;
    }
    
    .approach-text h2 {
        font-size: 24px;
    }
    
    .approach-step {
        flex-direction: column;
        gap: 10px;
    }
    
    .step-number {
        margin-bottom: 10px;
    }
    
    .clients-grid {
        grid-template-columns: 1fr;
    }
    
    .testimonial-controls {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .info-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .info-icon {
        margin-bottom: 10px;
    }
    
    .newsletter-form {
        flex-direction: column;
    }
    
    .newsletter-form .btn {
        width: 100%;
    }
    
    .footer-bottom-links {
        flex-direction: column;
        gap: 10px;
    }
}

/* Adjust Header Height for Mobile */
@media (max-width: 991px) {
    :root {
        --header-height: 70px;
    }
    
    .header.scrolled {
        --header-height: 60px;
    }
}

/* Adjust Logo Size for Small Screens */
@media (max-width: 575px) {
    .logo-text {
        font-size: 20px;
    }
}

/* Fix Mobile Menu on Small Screens */
@media (max-width: 400px) {
    .mobile-menu {
        width: 100%;
    }
}

/* Fix Form Elements on Small Screens */
@media (max-width: 375px) {
    input, textarea, button {
        font-size: 14px;
    }
    
    .form-group {
        margin-bottom: 15px;
    }
}

/* Adjust Padding for Sections on Mobile */
@media (max-width: 767px) {
    .hero-section,
    .features-section,
    .solutions-section,
    .approach-section,
    .clients-section,
    .contact-section {
        padding: 60px 0;
    }
    
    .footer {
        padding: 60px 0 20px;
    }
}