/* ===== MOBILE & TABLET RESPONSIVE OPTIMIZATIONS ===== */

/* ===== TABLET STYLES (769px - 1024px) ===== */
@media (max-width: 1024px) {
    /* Navigation */
    .header-center {
        display: none;
    }
    
    .mobile-menu-btn {
        display: flex !important;
    }
    
    /* Service Grids */
    .services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px;
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    /* Typography */
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.8rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    /* Containers */
    .container {
        padding: 0 30px;
    }
    
    /* Hero Sections */
    .slideshow-container {
        height: auto;
        min-height: 60vh;
    }
    
    /* Footer */
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

/* ===== MOBILE STYLES (320px - 768px) ===== */
@media (max-width: 768px) {
    /* Base Typography */
    body {
        font-size: 14px;
        line-height: 1.6;
    }
    
    h1 {
        font-size: 1.75rem;
        line-height: 1.2;
    }
    
    h2 {
        font-size: 1.5rem;
        line-height: 1.3;
    }
    
    h3 {
        font-size: 1.25rem;
        line-height: 1.3;
    }
    
    .section-title {
        font-size: 1.75rem;
        margin-bottom: 30px;
    }
    
    /* Containers & Spacing */
    .container {
        padding: 0 20px;
    }
    
    .content-section {
        margin: 40px auto;
        padding: 0 15px;
    }
    
    section {
        padding: 40px 0;
    }
    
    /* Header */
    .header {
        padding: 10px 0;
    }
    
    .header-container {
        padding: 10px 15px;
        flex-wrap: wrap;
    }
    
    .logo h1 {
        font-size: 1.25rem;
    }
    
    .header-center {
        display: none !important;
    }
    
    .mobile-menu-btn {
        display: flex !important;
        padding: 10px;
    }
    
    .contact-btn {
        font-size: 0.85rem;
        padding: 8px 12px;
    }
    
    /* Navigation Dropdown */
    .dropdown {
        position: static;
        width: 100%;
        transform: none;
    }
    
    /* Announcement Bar */
    .announcement-bar {
        padding: 10px 0;
        min-height: 40px;
    }
    
    .announcement-item {
        font-size: 0.75rem;
        gap: 6px;
    }
    
    /* Hero Sections */
    .slideshow-container {
        height: auto;
        min-height: 50vh;
    }
    
    .slide-content {
        flex-direction: column;
        padding: 20px;
        gap: 20px;
    }
    
    .slide-left,
    .slide-right {
        width: 100%;
        padding: 0;
    }
    
    .slide-right h1 {
        font-size: 1.5rem;
    }
    
    .slide-right p {
        font-size: 0.9rem;
    }
    
    /* Service Cards */
    .services-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
    
    .service-card {
        padding: 30px 20px;
    }
    
    .service-card h3 {
        font-size: 1.25rem;
    }
    
    .service-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    /* Feature Cards */
    .features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .feature-card {
        padding: 25px 20px;
    }
    
    .feature-card h3 {
        font-size: 1.2rem;
        margin-bottom: 12px;
    }
    
    .feature-card p {
        font-size: 0.9rem;
        line-height: 1.6;
    }
    
    .feature-card ul {
        margin-top: 12px;
    }
    
    .feature-card ul li {
        padding: 6px 0;
        font-size: 0.9rem;
    }
    
    /* Pricing Cards */
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .pricing-card {
        padding: 30px 20px;
    }
    
    .pricing-card.featured {
        transform: scale(1);
    }
    
    .pricing-card h3 {
        font-size: 1.4rem;
    }
    
    .pricing-card .price {
        font-size: 2.5rem;
    }
    
    .pricing-card ul li {
        font-size: 0.9rem;
        padding: 8px 0;
    }
    
    /* Buttons */
    .cta-btn,
    .pricing-btn,
    .hero-btn {
        padding: 12px 30px;
        font-size: 1rem;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
        display: block;
    }
    
    .service-btn,
    .goto-btn {
        padding: 10px 20px;
        font-size: 0.9rem;
        width: 100%;
    }
    
    .service-buttons {
        flex-direction: column;
        gap: 10px;
    }
    
    .service-buttons .service-btn,
    .service-buttons .goto-btn {
        max-width: 100%;
    }
    
    /* CTA Section */
    .cta-section {
        padding: 30px 20px;
        margin: 40px auto;
    }
    
    .cta-section h2 {
        font-size: 1.5rem;
        margin-bottom: 12px;
    }
    
    .cta-section p {
        font-size: 0.95rem;
        margin-bottom: 20px;
    }
    
    /* Process/Timeline Items */
    .process-list {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .process-item {
        padding: 20px;
    }
    
    .process-number {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
    
    /* Portfolio Grid */
    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .portfolio-item {
        margin: 0;
    }
    
    /* Footer */
    .footer {
        padding: 30px 20px;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .footer-section {
        text-align: center;
    }
    
    .footer-section h3 {
        font-size: 1.2rem;
        margin-bottom: 15px;
    }
    
    .social-links {
        justify-content: center;
        gap: 15px;
        flex-wrap: wrap;
    }
    
    .social-btn {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }
    
    /* Forms */
    input,
    textarea,
    select {
        font-size: 16px !important; /* Prevents iOS zoom */
        padding: 12px 15px;
        width: 100%;
    }
    
    .form-group {
        margin-bottom: 15px;
    }
    
    /* Modals */
    .modal-content {
        width: 95%;
        margin: 5% auto;
        padding: 20px;
    }
    
    .modal-header h2 {
        font-size: 1.5rem;
    }
    
    .modal-footer {
        flex-direction: column;
        gap: 10px;
    }
    
    .modal-footer .service-btn,
    .modal-footer .goto-btn {
        width: 100%;
    }
    
    /* Touch Targets */
    a,
    button,
    .nav-link,
    .portfolio-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Hide Desktop Elements */
    .desktop-only {
        display: none !important;
    }
    
    /* Show Mobile Elements */
    .mobile-only {
        display: block !important;
    }
}

/* ===== EXTRA SMALL MOBILE (320px - 480px) ===== */
@media (max-width: 480px) {
    h1 {
        font-size: 1.5rem;
    }
    
    h2 {
        font-size: 1.3rem;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    .logo h1 {
        font-size: 1.1rem;
    }
    
    .contact-btn {
        font-size: 0.75rem;
        padding: 6px 10px;
    }
    
    .pricing-card .price {
        font-size: 2rem;
    }
    
    .container {
        padding: 0 15px;
    }
    
    .service-card,
    .feature-card,
    .pricing-card {
        padding: 20px 15px;
    }
}

/* ===== LANDSCAPE MOBILE (max-height: 500px) ===== */
@media (max-height: 500px) and (orientation: landscape) {
    .slideshow-container {
        min-height: 400px;
    }
    
    .header {
        padding: 5px 0;
    }
    
    .announcement-bar {
        padding: 8px 0;
    }
}