/**
 * Stellar Support Services - Responsive Stylesheet
 * Version: 2.0
 */

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

/* Large Devices (1200px and up) */
@media (min-width: 1200px) {
    .hero-title { font-size: 3.5rem; }
}

/* Medium to Large Devices (992px to 1199px) */
@media (max-width: 1199.98px) {
    .hero-title { font-size: 2.75rem; }
    .package-card.popular { transform: scale(1); }
    .stat-number { font-size: 2.5rem; }
}

/* Medium Devices (Tablets, 768px to 991px) */
@media (max-width: 991.98px) {
    section { padding: 60px 0; }
    .hero-title { font-size: 2.25rem; }
    .hero-subtitle { font-size: 1rem; }
    .navbar-collapse { background: var(--white); padding: 20px; margin-top: 15px; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
    .navbar-cta { margin-top: 15px; display: flex; flex-direction: column; gap: 10px; }
    .navbar-cta .btn { width: 100%; }
    .nav-link.active::after { display: none; }
    .experience-badge { right: 10px; bottom: 10px; padding: 15px !important; }
    .experience-badge .h2 { font-size: 1.5rem !important; }
    .stat-number { font-size: 2rem; }
    .footer .col-lg-4, .footer .col-lg-3, .footer .col-lg-2 { margin-bottom: 30px; }
}

/* Small Devices (Landscape Phones, 576px to 767px) */
@media (max-width: 767.98px) {
    section { padding: 50px 0; }
    .hero-section { padding: 40px 0; }
    .hero-title { font-size: 2rem; }
    .hero-cta { flex-direction: column; }
    .hero-cta .btn { width: 100%; }
    .section-header { margin-bottom: 30px; }
    .section-title { font-size: 1.75rem; }
    .service-card, .package-card, .testimonial-card { margin-bottom: 20px; }
    .package-card { padding: 25px; }
    .stat-number { font-size: 1.75rem; }
    .stats-section .col-6 { margin-bottom: 20px; }
    .cta-section h2 { font-size: 1.5rem; }
    .cta-buttons { flex-direction: column; }
    .cta-buttons .btn { width: 100%; }
    .whatsapp-float { width: 50px; height: 50px; font-size: 24px; bottom: 20px; right: 20px; }
    .whatsapp-float .whatsapp-text { display: none; }
    .back-to-top { bottom: 80px; right: 20px; width: 40px; height: 40px; }
    .page-header { padding: 60px 0; }
    .page-header .page-title { font-size: 2rem; }
    .about-image-wrapper { margin-bottom: 30px; }
    .experience-badge { position: relative; right: auto; bottom: auto; margin-top: 20px; display: inline-block; }
    .director-info { margin-top: 20px; }
    .contact-info-card { margin-bottom: 20px; }
    .booking-steps { flex-wrap: wrap; }
    .booking-step { width: 100%; margin-bottom: 10px; }
    .calculator-card { padding: 25px; }
    .result-number { font-size: 2rem; }
}

/* Extra Small Devices (Portrait Phones, less than 576px) */
@media (max-width: 575.98px) {
    body { font-size: 15px; }
    .container { padding-left: 15px; padding-right: 15px; }
    section { padding: 40px 0; }
    .hero-title { font-size: 1.75rem; }
    .hero-subtitle { font-size: 0.95rem; }
    .btn { padding: 10px 20px; font-size: 0.9rem; }
    .btn-lg { padding: 12px 24px; font-size: 0.95rem; }
    .section-title { font-size: 1.5rem; }
    h2, .h2 { font-size: 1.5rem; }
    h3, .h3 { font-size: 1.25rem; }
    h4, .h4 { font-size: 1.1rem; }
    .navbar-brand img { height: 40px; }
    .navbar-brand .brand-text { font-size: 1.25rem; }
    .service-icon .icon-circle { width: 60px; height: 60px; font-size: 24px; }
    .testimonial-card { padding: 20px; }
    .author-initials { width: 40px !important; height: 40px !important; font-size: 1rem; }
    .footer { padding-top: 40px; }
    .footer-title { font-size: 1.1rem; }
    .footer-social .social-icon { width: 35px; height: 35px; }
    .page-header { padding: 40px 0; }
    .page-header .page-title { font-size: 1.5rem; }
    .contact-icon { width: 50px; height: 50px; font-size: 20px; }
    .time-slot { padding: 10px; font-size: 0.9rem; }
    .faq-accordion .accordion-button { padding: 15px; font-size: 0.95rem; }
}

/* Height-based media queries for landscape orientation */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-section { min-height: auto; padding: 30px 0; }
    .hero-title { font-size: 1.5rem; }
    section { padding: 30px 0; }
}

/* Print Styles */
@media print {
    .top-bar, .main-header, .footer, .whatsapp-float, .back-to-top, .cta-section { display: none !important; }
    body { font-size: 12pt; color: #000; }
    a { color: #000; text-decoration: underline; }
    .hero-section { background: none; padding: 20px 0; }
    section { padding: 20px 0; page-break-inside: avoid; }
    .service-card, .package-card, .testimonial-card { box-shadow: none; border: 1px solid #ddd; page-break-inside: avoid; }
}

/* Dark Mode Support (if user prefers) */
@media (prefers-color-scheme: dark) {
    /* Uncomment to enable dark mode
    :root {
        --white: #1a1a2e;
        --dark: #ffffff;
        --gray-light: #2d2d44;
    }
    body { background-color: var(--white); color: var(--dark); }
    */
}

/* 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; }
    .hover-lift:hover { transform: none; }
    .experience-badge { animation: none; }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    :root { --primary: #c9a227; --primary-dark: #a68b1f; }
    .btn { border-width: 3px; }
    .nav-link.active::after { height: 3px; }
}