/* Responsive Styles */

/* Mobile Menu */
@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        background: rgba(15, 23, 42, 0.98);
        backdrop-filter: blur(20px);
        flex-direction: column;
        padding: 2rem;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        gap: 1.5rem;
        align-items: flex-start;
        border-bottom: 1px solid var(--border-color);
    }

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

    .nav-menu li {
        width: 100%;
    }

    .nav-menu li a {
        display: block;
        padding: 0.5rem 0;
        width: 100%;
    }
}

/* Hero Section Responsive */
@media (max-width: 968px) {
    .hero-content h1 {
        font-size: 2.5rem;
    }

    .hero-content p {
        font-size: 1.125rem;
    }

    .hero-visual {
        gap: 1rem;
    }

    .phone-icon-large {
        font-size: 4rem;
    }

    .icon-badge {
        display: none !important;
    }
}

@media (max-width: 968px) {
    .hero-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .hero-text {
        text-align: center;
    }
}

@media (max-width: 768px) {
    .hero {
        min-height: auto;
        padding: 3rem 0;
    }

    .hero-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .hero-text h1 {
        font-size: 2rem;
    }

    .hero-text p {
        font-size: 1rem;
    }

    .phone-icon-large {
        font-size: 3rem;
    }
}

/* Section Content Responsive */
@media (max-width: 968px) {
    .section-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .section-content.reverse {
        direction: ltr;
    }

    .section-text h2 {
        text-align: center;
    }

    .section-text p {
        text-align: center;
    }
}

/* Simple Process Responsive */
@media (max-width: 768px) {
    .steps-visual {
        gap: 1rem;
    }

    .step-number-large {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }

    .arrow {
        font-size: 1.5rem;
    }
}

/* Why Choose Us Responsive */
@media (max-width: 768px) {
    .why-choose-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .why-icon {
        font-size: 2.5rem;
    }

    .user-icon-large {
        font-size: 4rem;
    }
}

/* Page Header Responsive */
@media (max-width: 768px) {
    .page-header {
        padding: 3rem 0;
    }

    .page-header h1 {
        font-size: 2rem;
    }

    .page-header p {
        font-size: 1rem;
    }
}

/* How It Works Responsive */
@media (max-width: 968px) {
    .steps-diagram {
        gap: 1rem;
    }

    .step-item-large {
        min-width: 150px;
        padding: 1.5rem;
    }

    .step-icon-large {
        font-size: 3rem;
    }

    .arrow-large {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .steps-diagram {
        flex-direction: column;
        align-items: center;
    }

    .arrow-large {
        transform: rotate(90deg);
        margin: 1rem 0;
    }

    .step-item-large {
        width: 100%;
        max-width: 300px;
    }
}

/* Amount Options Responsive */
@media (max-width: 768px) {
    .amount-options {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 1.5rem;
    }

    .amount-icon {
        font-size: 2.5rem;
    }

}

/* Payment Methods Responsive */
@media (max-width: 768px) {
    .payment-methods-grid {
        grid-template-columns: 1fr;
    }

    .payment-logo {
        font-size: 3rem;
    }
}

/* Activation Content Responsive */
@media (max-width: 968px) {
    .activation-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .activation-features {
        text-align: left;
    }
}

@media (max-width: 768px) {
    .timer-icon-large {
        font-size: 4rem;
    }

    .checkmark-circle {
        width: 60px;
        height: 60px;
        font-size: 2rem;
    }
}

/* Access Features Responsive */
@media (max-width: 768px) {
    .traveler-visual {
        gap: 1rem;
    }

    .traveler-icon,
    .phone-icon,
    .location-badge {
        font-size: 3rem;
    }

    .access-features {
        grid-template-columns: 1fr;
    }
}

/* Pricing Responsive */
@media (max-width: 768px) {
    .price-card-visual {
        min-width: 100%;
        padding: 2rem;
    }

    .price-icon {
        width: 48px;
        height: 48px;
    }

    .plan-types-visual {
        flex-direction: column;
        align-items: center;
    }
}

/* Pay As You Go Responsive */
@media (max-width: 968px) {
    .payg-content {
        grid-template-columns: 1fr;
    }

    .payg-visual {
        justify-content: center;
        margin-bottom: 2rem;
    }
}

@media (max-width: 768px) {
    .card-icon,
    .phone-icon {
        font-size: 3rem;
    }

    .flex-arrow {
        font-size: 2rem;
    }
}

/* Tourist Packages Responsive */
@media (max-width: 968px) {
    .tourist-packages-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

@media (max-width: 768px) {
    .tourist-packages-grid {
        grid-template-columns: 1fr;
    }

    .tourist-icon {
        font-size: 3rem;
    }


    .traveler-with-phone {
        font-size: 4rem;
    }
}

/* Bulk Top-Ups Responsive */
@media (max-width: 768px) {
    .bulk-visual {
        flex-direction: column;
    }

    .businessman-icon {
        font-size: 3rem;
    }

    .multiple-phones span {
        font-size: 2rem;
    }

    .bulk-features {
        grid-template-columns: 1fr;
    }
}

/* Customizable Plans Responsive */
@media (max-width: 768px) {
    .settings-icon {
        font-size: 4rem;
    }

    .plan-elements {
        flex-direction: column;
        align-items: center;
    }

    .custom-features {
        grid-template-columns: 1fr;
    }
}

/* FAQ Responsive */
@media (max-width: 768px) {
    .faq-visual {
        flex-direction: column;
        gap: 1rem;
    }

    .question-mark-icon {
        font-size: 4rem;
    }

    .answer-icon {
        font-size: 3rem;
    }

    .faq-connection {
        transform: rotate(90deg);
    }

    .payment-logos-visual {
        gap: 1rem;
    }

    .payment-logo-item {
        font-size: 3rem;
    }

    .payment-methods-info {
        grid-template-columns: 1fr;
    }

    .support-visual {
        flex-direction: column;
    }

    .clock-icon {
        font-size: 4rem;
    }

    .support-badge {
        font-size: 2rem;
    }

    .support-info {
        grid-template-columns: 1fr;
    }

    .contact-visual {
        flex-direction: column;
    }

    .phone-icon-faq,
    .email-icon,
    .chat-icon {
        font-size: 3rem;
    }

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

    .processing-visual {
        flex-direction: column;
    }

    .instant-badge {
        font-size: 1.5rem;
        padding: 0.75rem 1.5rem;
    }

    .processing-steps {
        grid-template-columns: 1fr;
    }
}

/* Contact Page Responsive */
@media (max-width: 768px) {
    .chat-support-icon {
        font-size: 4rem;
    }

    .support-badges {
        flex-direction: column;
        align-items: center;
    }

    .location-content {
        grid-template-columns: 1fr;
    }

    .map-icon-large {
        font-size: 4rem;
    }

    .location-pin {
        font-size: 2rem;
    }

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

    .contact-icons-visual {
        flex-direction: column;
    }

    .phone-icon-contact,
    .email-icon-contact {
        font-size: 3rem;
    }

    .hours-visual {
        flex-direction: column;
    }

    .clock-icon-large {
        font-size: 4rem;
    }

    .twenty-four-seven {
        font-size: 3rem;
        padding: 0.75rem 1.5rem;
    }

    .support-hours-info {
        grid-template-columns: 1fr;
    }

    .return-home-content h2 {
        font-size: 2rem;
    }

    .return-visual {
        flex-direction: column;
    }

    .home-icon {
        font-size: 3rem;
    }

    .arrow-to-home {
        transform: rotate(90deg);
    }
}

/* General Responsive */
@media (max-width: 768px) {
    h2 {
        font-size: 2rem;
    }

    .section-description {
        font-size: 1rem;
    }

    body {
        font-size: 15px;
    }

    .container {
        padding: 0 15px;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus styles for accessibility */
a:focus,
button:focus,
input:focus,
textarea:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}