/* Comprehensive Responsive Fixes */

/* ===================== */
/* HERO SECTION */
/* ===================== */
.hero {
    min-height: 100vh;
    height: auto;
}

/* ===================== */
/* SERVICES GRID */
/* ===================== */
.services-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* ===================== */
/* TEAM GRID */
/* ===================== */
.team-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* ===================== */
/* DECORATIVE SHAPES - RESPONSIVE SCALING */
/* ===================== */
@media (max-width: 768px) {
    .shape-1 {
        width: 250px !important;
        height: 250px !important;
    }
    .shape-2 {
        width: 180px !important;
        height: 180px !important;
    }
    .team-shape-1 {
        width: 300px !important;
        height: 300px !important;
    }
    .team-shape-2 {
        width: 200px !important;
        height: 200px !important;
    }
    .contact-shape-1 {
        width: 200px !important;
        height: 200px !important;
    }
    .contact-shape-2 {
        width: 120px !important;
        height: 120px !important;
    }
    .booking-shape-1 {
        width: 200px !important;
        height: 200px !important;
    }
    .booking-shape-2 {
        width: 140px !important;
        height: 140px !important;
    }
    .experience-badge {
        width: 80px !important;
        height: 80px !important;
    }
}

@media (max-width: 576px) {
    .shape-1 {
        width: 150px !important;
        height: 150px !important;
    }
    .shape-2 {
        width: 100px !important;
        height: 100px !important;
    }
    .team-shape-1 {
        width: 200px !important;
        height: 200px !important;
    }
    .team-shape-2 {
        width: 120px !important;
        height: 120px !important;
    }
    .contact-shape-1 {
        width: 120px !important;
        height: 120px !important;
    }
    .contact-shape-2 {
        width: 80px !important;
        height: 80px !important;
    }
    .booking-shape-1 {
        width: 120px !important;
        height: 120px !important;
        top: -50px !important;
        right: -50px !important;
    }
    .booking-shape-2 {
        width: 80px !important;
        height: 80px !important;
        bottom: -30px !important;
        left: -30px !important;
    }
    .experience-badge {
        display: none !important;
    }
}

/* ===================== */
/* 1200px BREAKPOINT */
/* ===================== */
@media (max-width: 1200px) {
    .container {
        width: 95%;
        max-width: 1100px;
    }

    .hero h1 {
        font-size: 3.2rem;
    }

    .services-grid {
        gap: 25px;
    }

    .team-grid {
        gap: 25px;
    }
}

/* ===================== */
/* 992px BREAKPOINT - TABLET */
/* ===================== */
@media (max-width: 992px) {
    .services-hero {
        padding: 120px 0 60px;
    }
    .services-hero h1 {
        font-size: 2.2rem;
    }
    .services-hero p {
        font-size: 1rem;
    }

    .hero {
        min-height: 90vh;
        padding-top: 70px;
    }

    .hero h1 {
        font-size: 2.8rem;
    }

    .hero p {
        font-size: 1.1rem;
    }

    .hero-stats {
        gap: 30px;
    }

    .section-header h2 {
        font-size: 2.2rem;
    }

    .services-filter {
        flex-wrap: wrap;
        justify-content: center;
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer-links-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }

    .contact-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .booking-header h1 {
        font-size: 2.2rem;
    }

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

    .cart-sidebar {
        width: 360px;
    }

    .member-image {
        height: 250px;
    }
}

/* ===================== */
/* 768px BREAKPOINT - SMALL TABLET */
/* ===================== */
@media (max-width: 768px) {
    .services-hero {
        padding: 110px 0 50px;
    }
    .services-hero h1 {
        font-size: 2rem;
    }
    .services-hero p {
        font-size: 0.95rem;
    }
    .services-cta {
        padding: 30px 20px;
    }
    .services-cta h3 {
        font-size: 1.5rem;
    }
    .services-cta .cta-buttons {
        flex-direction: column;
    }
    .services-cta .cta-btn {
        justify-content: center;
    }

    .hero {
        min-height: auto;
        padding: 100px 0 60px;
    }

    .hero h1 {
        font-size: 2.2rem;
    }

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

    .hero-stats {
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }

    .hero-stat {
        min-width: 120px;
    }

    .section-header h2 {
        font-size: 1.8rem;
    }

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

    .section-padding {
        padding: 50px 0;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .service-card {
        padding: 25px;
    }

    .services-filter {
        gap: 8px;
    }

    .filter-btn {
        padding: 8px 16px;
        font-size: 0.85rem;
    }

    .team-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .team-member {
        max-width: 400px;
        margin: 0 auto;
    }

    .member-image {
        height: 220px;
    }

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

    .contact-form .form-row {
        display: flex;
        flex-direction: column;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .footer-links-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }

    .newsletter-container h3 {
        font-size: 1.5rem;
    }

    .booking-header {
        padding: 40px 0;
    }

    .booking-header h1 {
        font-size: 1.8rem;
    }

    .booking-header p {
        font-size: 0.95rem;
    }

    .booking-container .booking-container {
        flex-direction: column;
    }

    .booking-info {
        margin-bottom: 20px;
    }

    .booking-benefits h4 {
        font-size: 1.1rem;
    }

    .benefit-item {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .benefit-icon {
        width: 35px;
        height: 35px;
    }

    .benefit-icon i {
        font-size: 1rem;
    }

    .benefit-content h5 {
        font-size: 1rem;
    }

    .benefit-content p {
        font-size: 0.85rem;
    }

    .booking-widget-content {
        padding: 25px;
    }

    .booking-form .form-group label {
        font-size: 0.9rem;
    }

    .booking-form input,
    .booking-form select,
    .booking-form textarea {
        padding: 12px;
        font-size: 0.95rem;
    }

    .booking-note {
        padding: 12px;
        font-size: 0.85rem;
    }

    .booking-success h4 {
        font-size: 1.3rem;
    }

    .booking-success .details p {
        flex-direction: column;
        gap: 4px;
    }

    .bio-modal-content {
        max-width: 90%;
        padding: 30px;
    }

    .bio-header img {
        width: 100px;
        height: 100px;
    }

    .cart-sidebar {
        width: 100%;
        max-width: 400px;
    }

    .custom-cursor,
    .cursor-trail {
        display: none !important;
    }
}

/* ===================== */
/* 576px BREAKPOINT - MOBILE */
/* ===================== */
@media (max-width: 576px) {
    .services-hero {
        padding: 100px 0 40px;
    }
    .services-hero h1 {
        font-size: 1.6rem;
    }
    .services-hero p {
        font-size: 0.9rem;
    }
    .services-bg-shapes .shape-1 {
        width: 180px !important;
        height: 180px !important;
    }
    .services-bg-shapes .shape-2 {
        width: 120px !important;
        height: 120px !important;
    }

    .container {
        width: 95%;
        padding: 0 10px;
    }

    .hero {
        padding: 90px 0 50px;
    }

    .hero h1 {
        font-size: 1.8rem;
    }

    .hero p {
        font-size: 0.9rem;
    }

    .hero-stats {
        gap: 15px;
    }

    .hero-stat {
        min-width: 100px;
    }

    .hero-stat h3 {
        font-size: 1.5rem;
    }

    .hero-stat p {
        font-size: 0.8rem;
    }

    .section-header h2 {
        font-size: 1.5rem;
    }

    .section-header p {
        font-size: 0.9rem;
    }

    .section-padding {
        padding: 40px 0;
    }

    .service-card {
        padding: 20px;
    }

    .service-card h3 {
        font-size: 1.2rem;
    }

    .service-card p {
        font-size: 0.9rem;
    }

    .service-icon {
        width: 60px;
        height: 60px;
    }

    .service-icon i {
        font-size: 1.5rem;
    }

    .add-to-cart-btn {
        width: 100%;
        padding: 12px;
        font-size: 0.9rem;
    }

    .services-filter {
        gap: 6px;
    }

    .filter-btn {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    .team-member {
        padding: 15px;
    }

    .member-image {
        height: 200px;
    }

    .member-info h3 {
        font-size: 1.2rem;
    }

    .contact-info-card {
        padding: 20px;
    }

    .contact-info-card h3 {
        font-size: 1.1rem;
    }

    .contact-form {
        padding: 20px;
    }

    .contact-form .form-group input,
    .contact-form .form-group textarea {
        padding: 12px;
        font-size: 0.95rem;
    }

    .footer-links-wrapper {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .newsletter-container {
        padding: 30px 20px;
    }

    .newsletter-container h3 {
        font-size: 1.3rem;
    }

    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-form input {
        width: 100%;
    }

    .newsletter-form button {
        width: 100%;
    }

    .booking-header {
        padding: 30px 0;
    }

    .booking-header h1 {
        font-size: 1.5rem;
    }

    .booking-header p {
        font-size: 0.9rem;
    }

    .booking-widget-content {
        padding: 20px;
    }

    .booking-widget-content h3 {
        font-size: 1.3rem;
    }

    .booking-widget-content > p {
        font-size: 0.9rem;
    }

    .booking-form .form-group {
        margin-bottom: 15px;
    }

    .booking-form button[type="submit"] {
        width: 100%;
        padding: 14px;
        font-size: 1rem;
    }

    .booking-success {
        padding: 25px;
    }

    .booking-success h4 {
        font-size: 1.2rem;
    }

    .booking-success p {
        font-size: 0.9rem;
    }

    .booking-success .details {
        padding: 15px;
    }

    .booking-success .details p {
        font-size: 0.9rem;
    }

    #book-another {
        width: 100%;
    }

    .booking-footer {
        margin-top: 30px;
    }

    .booking-footer .social-links {
        gap: 10px;
    }

    .booking-footer .social-links a {
        width: 36px;
        height: 36px;
    }

    .cart-header {
        padding: 15px;
    }

    .cart-header h3 {
        font-size: 1.2rem;
    }

    .cart-items {
        padding: 15px;
    }

    .cart-item {
        padding: 12px;
    }

    .cart-item-name {
        font-size: 0.9rem;
    }

    .cart-footer {
        padding: 15px;
    }

    .inquiry-btn {
        width: 100%;
        padding: 14px;
    }

    .bio-modal-content {
        padding: 20px;
    }

    .bio-header {
        flex-direction: column;
        text-align: center;
    }

    .bio-header img {
        width: 80px;
        height: 80px;
    }

    .bio-header h3 {
        font-size: 1.2rem;
    }

    .nav-menu.active {
        top: 70px;
    }

    .navbar {
        height: 70px;
    }

    .skyc-wordmark {
        font-size: 1.5rem;
    }

    .theme-toggle button {
        width: 36px;
        height: 36px;
    }
}

/* ===================== */
/* 400px BREAKPOINT - SMALL PHONES */
/* ===================== */
@media (max-width: 400px) {
    .services-hero h1 {
        font-size: 1.3rem;
    }
    .services-hero p {
        font-size: 0.85rem;
    }
    .services-cta {
        padding: 20px 15px;
    }
    .services-cta h3 {
        font-size: 1.2rem;
    }
    .services-cta .cta-btn {
        padding: 12px 20px;
        font-size: 0.9rem;
    }

    .container {
        width: 96%;
        padding: 0 5px;
    }

    .hero h1 {
        font-size: 1.5rem;
    }

    .hero p {
        font-size: 0.85rem;
    }

    .hero-stats {
        gap: 10px;
    }

    .hero-stat {
        min-width: 85px;
    }

    .hero-stat h3 {
        font-size: 1.3rem;
    }

    .hero-stat p {
        font-size: 0.75rem;
    }

    .section-header h2 {
        font-size: 1.3rem;
    }

    .section-header p {
        font-size: 0.85rem;
    }

    .section-padding {
        padding: 30px 0;
    }

    .service-card {
        padding: 15px;
    }

    .service-card h3 {
        font-size: 1.1rem;
    }

    .service-card p {
        font-size: 0.85rem;
    }

    .service-price {
        font-size: 1rem;
    }

    .filter-btn {
        padding: 5px 10px;
        font-size: 0.75rem;
    }

    .member-image {
        height: 180px;
    }

    .member-info h3 {
        font-size: 1.1rem;
    }

    .member-info p {
        font-size: 0.85rem;
    }

    .contact-info-card {
        padding: 15px;
    }

    .contact-info-card h3 {
        font-size: 1rem;
    }

    .contact-info-card p {
        font-size: 0.85rem;
    }

    .contact-form {
        padding: 15px;
    }

    .booking-header h1 {
        font-size: 1.3rem;
    }

    .booking-header p {
        font-size: 0.85rem;
    }

    .booking-widget-content {
        padding: 15px;
    }

    .booking-widget-content h3 {
        font-size: 1.1rem;
    }

    .booking-form input,
    .booking-form select,
    .booking-form textarea {
        padding: 10px;
        font-size: 0.9rem;
    }

    .booking-success {
        padding: 20px;
    }

    .booking-success h4 {
        font-size: 1.1rem;
    }

    .booking-success .details {
        padding: 12px;
    }

    .booking-success .details p {
        font-size: 0.85rem;
    }

    .cart-item-name {
        font-size: 0.85rem;
    }

    .cart-item-price {
        font-size: 0.85rem;
    }

    .quantity-input {
        width: 40px;
    }

    .bio-header img {
        width: 70px;
        height: 70px;
    }

    .bio-header h3 {
        font-size: 1.1rem;
    }

    .bio-modal-content p {
        font-size: 0.9rem;
    }

    #back-to-top-btn {
        bottom: 15px;
        right: 15px;
        width: 40px;
        height: 40px;
    }
}

/* ===================== */
/* TOUCH DEVICE FIXES */
/* ===================== */
@media (hover: none) and (pointer: coarse) {
    .custom-cursor,
    .cursor-trail {
        display: none !important;
    }

    .parallax-layer {
        transform: none !important;
    }

    .reveal-card {
        transform: none !important;
    }

    .glass-card {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}

/* ===================== */
/* LANDSCAPE MOBILE */
/* ===================== */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: 80px 0 40px;
    }

    .hero-stats {
        flex-wrap: wrap;
        justify-content: center;
    }

    .booking-header {
        padding: 20px 0;
    }

    .nav-menu.active {
        max-height: 80vh;
        overflow-y: auto;
    }
}

/* ===================== */
/* PRINT STYLES */
/* ===================== */
@media print {
    .navbar,
    .cart-sidebar,
    .cart-overlay,
    #back-to-top-btn,
    .custom-cursor,
    .cursor-trail,
    .preloader,
    .hero-bg-shapes,
    .booking-bg-shapes,
    .team-shape-1,
    .team-shape-2,
    .contact-shape-1,
    .contact-shape-2 {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    .hero {
        height: auto;
        min-height: auto;
    }
}