/* ===== RESPONSIVE DESIGN ===== */

/* Extra Small devices (phones, 576px and down) */
@media (max-width: 575.98px) {
    /* Typography */
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.75rem;
    }
    
    h3 {
        font-size: 1.5rem;
    }
    
    /* Hero Section */
    .hero-title {
        font-size: 2rem;
        text-align: center;
    }
    
    .hero-subtitle {
        font-size: 1rem;
        text-align: center;
    }
    
    .stats-container {
        flex-direction: column;
        gap: 1rem;
        margin-top: 1.5rem;
    }
    
    .stat-item {
        padding: 0.75rem 1rem;
    }
    
    .stat-number {
        font-size: 1.5rem;
    }
    
    /* Forex Calculator */
    .forex-calculator {
        padding: 1.5rem;
        margin-top: 2rem;
    }
    
    .nav-tabs .nav-link {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
    
    /* Delivery Options */
    .delivery-options {
        flex-direction: row;
        gap: 0.75rem;
    }
    
    .delivery-option {
        font-size: 0.875rem;
    }
    
    /* Currency Input Groups */
    .currency-selector,
    .currency-display {
        padding: 0.5rem 0.75rem;
    }
    
    .currency-selector .form-select {
        font-size: 0.875rem;
    }
    
    /* Exchange Rate Display */
    .rate-info {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
    
    .rate-text {
        font-size: 0.875rem;
    }
    
    .rate-update-time {
        font-size: 0.75rem;
    }
    
    /* WhatsApp Toggle */
    .whatsapp-toggle-container {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .form-switch .form-check-input {
        width: 2.5rem;
        height: 1.25rem;
    }
    
    /* Request Callback Button */
    .request-callback-btn {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }
    
    /* Form Footer */
    .form-footer p {
        font-size: 0.75rem;
        line-height: 1.3;
    }
    
    /* Navigation */
    .navbar-nav {
        text-align: center;
        margin: 1rem 0;
    }
    
    .navbar-nav .nav-link {
        margin: 0.5rem 0;
    }
    
  
    .cta-btn {
        width: 100%;
        margin-top: 1rem;
    }
    
    /* Section Headers */
    .section-header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .section-title {
        font-size: 1.75rem;
    }
    
    /* Cards */
    .rate-card,
    .testimonial-card,
    .step-card,
    .feature-card {
        margin-bottom: 1.5rem;
    }
    
    /* Product Cards */
    .product-card {
        height: 250px;
        margin-bottom: 1.5rem;
    }
    
    .product-overlay {
        padding: 1.5rem;
    }
    
    .product-icon {
        font-size: 2rem;
    }
    
    /* Footer */
    .footer {
        padding: 2rem 0 1rem;
    }
    
    .footer-bottom {
        text-align: center;
    }
    
    .footer-bottom .col-md-6:last-child {
        margin-top: 1rem;
    }
    
    /* Contact Form */
    .contact-form-card {
        padding: 1.5rem;
        margin-top: 2rem;
    }
    
    /* Blog Cards */
    .blog-image {
        height: 150px;
    }
    
    .blog-content {
        padding: 1rem;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .stats-container {
        gap: 1.5rem;
    }
    
    .forex-calculator {
        max-width: 450px;
    }
    
    .section-title {
        font-size: 2rem;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .hero-title {
        font-size: 3rem;
    }
    
    .forex-calculator {
        max-width: 400px;
    }
    
    .stats-container {
        gap: 1.5rem;
    }
    
    .stat-item {
        padding: 1rem 1.25rem;
    }
    
    .section-title {
        font-size: 2.25rem;
    }
    
    /* Navigation adjustments */
    .navbar-nav .nav-link {
        margin: 0 0.75rem;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .hero-title {
        font-size: 3.25rem;
    }
    
    .forex-calculator {
        max-width: 450px;
    }
    
    .stats-container {
        gap: 2rem;
    }
    
    .section-title {
        font-size: 2.5rem;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .hero-title {
        font-size: 3.5rem;
    }
    
    .forex-calculator {
        max-width: 550px;
    }
    
    .stats-container {
        gap: 2rem;
    }
    
    .section-title {
        font-size: 2.5rem;
    }
    
    /* Forex Calculator - Large Screens */
    .delivery-options {
        gap: 1.5rem;
    }
    
    .delivery-option {
        font-size: 1rem;
    }
    
    .delivery-option i {
        font-size: 1.5rem;
    }
    
    .request-callback-btn {
        padding: 1.25rem 2.5rem;
        font-size: 1.25rem;
    }
}

/* ===== TABLET SPECIFIC ADJUSTMENTS ===== */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Two column layout for tablets */
    .col-lg-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    .col-lg-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    /* Product cards - 2x2 grid */
    .products-section .col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    /* Testimonials - 2 columns */
    .testimonials-section .col-lg-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    /* How it works - 2x2 grid */
    .how-it-works-section .col-lg-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    /* Why choose us - 3 columns */
    .why-choose-section .col-lg-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

/* ===== MOBILE LANDSCAPE ===== */
@media (max-width: 767.98px) and (orientation: landscape) {
    .hero-section {
        min-height: auto;
        padding: 100px 0 60px;
    }
    
    .hero-title {
        font-size: 2.25rem;
    }
    
    .stats-container {
        flex-direction: row;
        gap: 1rem;
    }
    
    .stat-item {
        padding: 0.5rem 0.75rem;
    }
    
    .stat-number {
        font-size: 1.25rem;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .navbar,
    .whatsapp-float,
    .social-links,
    .btn {
        display: none !important;
    }
    
    .hero-section {
        background: white !important;
        color: black !important;
    }
    
    .hero-title,
    .hero-subtitle {
        color: black !important;
    }
    
    .section {
        page-break-inside: avoid;
    }
}

/* ===== HIGH DPI DISPLAYS ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .partner-logo {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .fade-in-up,
    .fade-in-left,
    .fade-in-right {
        animation: none;
    }
}

/* ===== DARK MODE SUPPORT ===== */
/* @media (prefers-color-scheme: dark) {
    :root {
        --text-dark: #F9FAFB;
        --text-light: #D1D5DB;
        --background-light: #1F2937;
        --white: #d1d1d1;
        --gray-100: #374151;
        --gray-200: #4B5563;
        --gray-300: #6B7280;
        --gray-400: #9CA3AF;
        --gray-500: #D1D5DB;
        --gray-600: #E5E7EB;
        --gray-700: #F3F4F6;
        --gray-800: #F9FAFB;
        --gray-900: #FFFFFF;
    }
    
    .rate-card,
    .testimonial-card,
    .step-card,
    .feature-card,
    .blog-card,
    .contact-form-card,
    .forex-calculator {
        background: var(--gray-800);
        color: var(--text-dark);
    }
    
    .accordion-item {
        background: var(--gray-800);
    }
    
    .accordion-button {
        background: var(--gray-800);
        color: var(--text-dark);
    }
    
    .accordion-body {
        background: var(--gray-700);
        color: var(--text-light);
    }
} */

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */
@media (prefers-contrast: high) {
    :root {
        --primary-green: #1a3d2e;
        --success-green: #047857;
        --text-light: #374151;
    }
    
    .btn,
    .nav-link,
    .form-control {
        border-width: 2px;
    }
}

/* ===== FOCUS VISIBLE ===== */
@media (prefers-reduced-motion: no-preference) {
    .btn:focus-visible,
    .nav-link:focus-visible,
    .form-control:focus-visible {
        outline: 2px solid var(--success-green);
        outline-offset: 2px;
    }
}

/* ===== CUSTOM SCROLLBAR FOR WEBKIT ===== */
@media (min-width: 768px) {
    ::-webkit-scrollbar {
        width: 12px;
    }
    
    ::-webkit-scrollbar-track {
        background: var(--gray-100);
        border-radius: 6px;
    }
    
    ::-webkit-scrollbar-thumb {
        background: var(--primary-green);
        border-radius: 6px;
        border: 2px solid var(--gray-100);
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background: var(--secondary-green);
    }
}

/* ===== UTILITY CLASSES FOR RESPONSIVE DESIGN ===== */
.d-none-xs {
    display: none;
}

@media (min-width: 576px) {
    .d-none-xs {
        display: block;
    }
    
    .d-block-xs {
        display: none;
    }
}

.text-center-xs {
    text-align: center;
}

@media (min-width: 768px) {
    .text-center-xs {
        text-align: left;
    }
}

.mb-xs-4 {
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .mb-xs-4 {
        margin-bottom: 0;
    }
}

/* ===== CONTAINER ADJUSTMENTS ===== */
@media (max-width: 575.98px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* ===== SECTION PADDING ADJUSTMENTS ===== */
@media (max-width: 767.98px) {
    .hero-section,
    .partners-section,
    .rates-section,
    .testimonials-section,
    .how-it-works-section,
    .products-section,
    .why-choose-section,
    .faq-section,
    .contact-section,
    .digest-section,
    .about-section,
    .main-container {
        padding: 60px 0;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .hero-section,
    .partners-section,
    .rates-section,
    .testimonials-section,
    .how-it-works-section,
    .products-section,
    .why-choose-section,
    .faq-section,
    .contact-section,
    .digest-section {
        padding: 70px 0;
    }
}

/* ===== NAVIGATION RESPONSIVE BEHAVIOR ===== */
@media (max-width: 991.98px) {
    .navbar-nav .nav-link {
        color: var(--white) !important;
        padding: 0.5rem 0;
    }
    
    .navbar-nav .nav-link:hover {
        color: var(--accent-yellow) !important;
    }

    .navbar-collapse {
        background: var(--primary-blue);
        backdrop-filter: blur(10px);
        border-radius: var(--border-radius-md);
        padding: 1rem;
        margin-top: 1rem;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }
    
    .navbar-nav {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 1rem;
    }
    
    .navbar-nav .nav-link {
        padding: 0.75rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .navbar-nav .nav-link:last-child {
        border-bottom: none;
    }

    /* Ensure dropdowns work properly on mobile */
    .navbar-nav .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        margin-top: 0.5rem;
        border: none;
        box-shadow: none;
        background-color: rgba(0, 0, 0, 0.05);
    }
    
    .navbar-nav .dropdown-menu .dropdown-item {
        padding: 0.5rem 1rem;
        color: rgba(255, 255, 255, 0.8);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .navbar-nav .dropdown-menu .dropdown-item:hover {
        background-color: rgba(255, 255, 255, 0.1);
        color: white;
    }
    
    .navbar-nav .dropdown-menu .dropdown-item:last-child {
        border-bottom: none;
    }
    
    /* Ensure dropdown toggle works on touch devices */
    .dropdown-toggle::after {
        display: inline-block;
        margin-left: 0.255em;
        vertical-align: 0.255em;
        content: "";
        border-top: 0.3em solid;
        border-right: 0.3em solid transparent;
        border-bottom: 0;
        border-left: 0.3em solid transparent;
    }
    
    /* Improve touch targets on mobile */
    .dropdown-toggle,
    .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* Ensure dropdowns are visible on mobile */
.dropdown-menu.show {
    display: block !important;
}

/* Fix z-index issues */
.dropdown-menu {
    z-index: 1000;
}

/* ===== FORM RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 575.98px) {
    .forex-form .form-control,
    .forex-form .form-select,
    .contact-form .form-control {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    .forex-form .form-label,
    .contact-form .form-label {
        font-size: 0.875rem;
    }
}

/* ===== BUTTON RESPONSIVE SIZES ===== */
@media (max-width: 575.98px) {
    .btn {
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
    }
    
    .btn-lg {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }
}

/* ===== CARD RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 767.98px) {
    .rate-card,
    .testimonial-card,
    .step-card,
    .feature-card {
        padding: 1.25rem;
    }
    
    .product-overlay {
        padding: 1.25rem;
    }
    
    .blog-content {
        padding: 1.25rem;
    }
}

/* ===== IMAGE RESPONSIVE BEHAVIOR ===== */
@media (max-width: 575.98px) {
    .partner-logo {
        height: 30px;
    }
    
    .author-avatar {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .step-icon,
    .feature-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
}

/* ===== SPACING UTILITIES FOR RESPONSIVE ===== */
@media (max-width: 575.98px) {
    .mb-xs-0 { margin-bottom: 0 !important; }
    .mb-xs-1 { margin-bottom: 0.25rem !important; }
    .mb-xs-2 { margin-bottom: 0.5rem !important; }
    .mb-xs-3 { margin-bottom: 1rem !important; }
    .mb-xs-4 { margin-bottom: 1.5rem !important; }
    .mb-xs-5 { margin-bottom: 3rem !important; }
    
    .mt-xs-0 { margin-top: 0 !important; }
    .mt-xs-1 { margin-top: 0.25rem !important; }
    .mt-xs-2 { margin-top: 0.5rem !important; }
    .mt-xs-3 { margin-top: 1rem !important; }
    .mt-xs-4 { margin-top: 1.5rem !important; }
    .mt-xs-5 { margin-top: 3rem !important; }
    
    .pt-xs-0 { padding-top: 0 !important; }
    .pt-xs-1 { padding-top: 0.25rem !important; }
    .pt-xs-2 { padding-top: 0.5rem !important; }
    .pt-xs-3 { padding-top: 1rem !important; }
    .pt-xs-4 { padding-top: 1.5rem !important; }
    .pt-xs-5 { padding-top: 3rem !important; }
    
    .pb-xs-0 { padding-bottom: 0 !important; }
    .pb-xs-1 { padding-bottom: 0.25rem !important; }
    .pb-xs-2 { padding-bottom: 0.5rem !important; }
    .pb-xs-3 { padding-bottom: 1rem !important; }
    .pb-xs-4 { padding-bottom: 1.5rem !important; }
    .pb-xs-5 { padding-bottom: 3rem !important; }
}