/* Garden Office Template - Responsive CSS */
/* Mobile-first responsive design with animation restrictions on mobile */

/* No animations on mobile resolution as per requirements */
@media (max-width: 767.98px) {
    /* Disable all animations on mobile */
    *,
    *::before,
    *::after {
        animation-duration: 0s !important;
        animation-delay: 0s !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
    }
    
    [data-sal] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Typography adjustments */
    .display-1 {
        font-size: 2.5rem;
    }
    
    .display-4 {
        font-size: 1.75rem;
    }
    
    h1, .h1 {
        font-size: 1.75rem;
        line-height: 1.3;
    }
    
    h2, .h2 {
        font-size: 1.5rem;
        line-height: 1.3;
    }
    
    .lead {
        font-size: 1rem;
    }
    
    /* Button adjustments */
    .btn-lg {
        padding: 0.625rem 1.25rem;
        font-size: 1rem;
    }
    
    .btn {
        width: 100%;
        margin-bottom: 0.75rem;
    }
    
    .btn:last-child {
        margin-bottom: 0;
    }
    
    /* Hero section mobile */
    #hero-main {
        min-height: 70vh;
        padding: 2rem 0;
    }
    
    .hero-buttons {
        text-align: center;
    }
    
    .hero-buttons .btn {
        display: block;
        margin: 0 0 0.75rem 0;
    }
    
    /* Services cards */
    .price-tag {
        font-size: 0.875rem;
        padding: 0.5rem 0.75rem;
    }
    
    /* Feature items mobile layout */
    .feature-item,
    .quality-item {
        flex-direction: column;
        text-align: center;
        padding: 1rem;
    }
    
    .feature-icon,
    .quality-icon {
        margin-bottom: 1rem;
        margin-right: 0;
        align-self: center;
    }
    
    /* Timeline mobile */
    .timeline-icon {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }
    
    .step-number {
        width: 50px;
        height: 50px;
        font-size: 1.125rem;
    }
    
    /* Contact form mobile */
    .contact-form .form-control,
    .contact-form .form-select {
        font-size: 1rem;
        padding: 0.75rem;
    }
    
    /* Table responsive */
    .table-responsive {
        font-size: 0.875rem;
    }
    
    /* Card spacing */
    .card-body {
        padding: 1rem;
    }
    
    /* Footer mobile */
    footer .col-lg-4,
    footer .col-lg-2 {
        margin-bottom: 2rem;
    }
    
    footer .text-md-end {
        text-align: left !important;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .container {
        max-width: 540px;
    }
    
    /* Hero adjustments */
    #hero-main {
        min-height: 80vh;
    }
    
    .hero-buttons .btn {
        display: inline-block;
        width: auto;
        margin-right: 0.75rem;
        margin-bottom: 0.5rem;
    }
    
    /* Services grid */
    .services-grid .col-md-6 {
        margin-bottom: 1.5rem;
    }
    
    /* Feature improvements */
    .feature-item,
    .quality-item {
        flex-direction: row;
        text-align: left;
        padding: 1.25rem;
    }
    
    .feature-icon,
    .quality-icon {
        margin-bottom: 0;
        margin-right: 1rem;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .container {
        max-width: 720px;
    }
    
    /* Hero section */
    #hero-main {
        min-height: 85vh;
    }
    
    /* Navigation improvements */
    .navbar-nav .nav-link {
        padding: 0.5rem 0.75rem;
    }
    
    /* Cards in grid */
    .card-columns {
        column-count: 2;
    }
    
    /* Gallery adjustments */
    .gallery-item {
        margin-bottom: 1rem;
    }
    
    /* Team member spacing */
    .team-member {
        margin-bottom: 2rem;
    }
    
    /* Contact form layout */
    .contact-form .row .col-md-6 {
        margin-bottom: 1rem;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .container {
        max-width: 960px;
    }
    
    /* Hero full height */
    #hero-main {
        min-height: 100vh;
    }
    
    /* Enhanced spacing */
    section {
        padding: 5rem 0;
    }
    
    /* Card columns */
    .card-columns {
        column-count: 3;
    }
    
    /* Services grid optimization */
    .services-grid .col-lg-4 {
        margin-bottom: 2rem;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
    
    /* Enhanced hero */
    #hero-main {
        min-height: 100vh;
    }
    
    /* Larger typography for big screens */
    .display-4 {
        font-size: 2.5rem;
    }
    
    h1, .h1 {
        font-size: 2.5rem;
    }
    
    h2, .h2 {
        font-size: 2rem;
    }
    
    .lead {
        font-size: 1.25rem;
    }
    
    /* Enhanced spacing */
    section {
        padding: 6rem 0;
    }
    
    /* Card enhancements */
    .card-body {
        padding: 2rem;
    }
    
    /* Feature items larger */
    .feature-item,
    .quality-item {
        padding: 2rem;
    }
    
    /* Timeline larger icons */
    .timeline-icon {
        width: 100px;
        height: 100px;
    }
    
    .step-number {
        width: 80px;
        height: 80px;
    }
}

/* Ultra wide screens (1400px and up) */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
    
    /* Maximum section padding */
    section {
        padding: 7rem 0;
    }
    
    /* Enhanced hero decoration */
    .hero-decoration {
        opacity: 0.8;
    }
}

/* Landscape orientation adjustments */
@media (max-height: 500px) and (orientation: landscape) {
    #hero-main {
        min-height: 100vh;
        padding: 1rem 0;
    }
    
    .hero-buttons {
        margin-top: 1rem;
    }
    
    /* Compact navigation */
    .navbar {
        padding: 0.25rem 0;
    }
    
    .navbar-brand {
        font-size: 1rem;
    }
    
    .nav-link {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Ensure crisp rendering on retina displays */
    .img-fluid {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
    
    .card {
        -webkit-font-smoothing: antialiased;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .card:hover {
        transform: none;
    }
    
    .gallery-item:hover {
        transform: none;
    }
    
    .team-member:hover img {
        transform: none;
    }
    
    /* Keep essential transitions for UX */
    .btn,
    .form-control:focus,
    .form-select:focus {
        transition: background-color 0.1s ease, border-color 0.1s ease, box-shadow 0.1s ease;
    }
}

/* Print media improvements */
@media print {
    .container {
        max-width: none;
        width: auto;
    }
    
    .row {
        display: block;
    }
    
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
    .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
    .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
    .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
    .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
    .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6,
    .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
        float: none;
        width: auto;
        margin-bottom: 1rem;
    }
    
    .card {
        border: 1px solid #dee2e6;
        break-inside: avoid;
        margin-bottom: 1rem;
    }
    
    .bg-light,
    .bg-primary,
    .bg-secondary {
        background-color: #ffffff !important;
        color: #000000 !important;
    }
    
    .text-white {
        color: #000000 !important;
    }
}

/* Dark mode considerations (if needed in future) */

/* Enhanced accessibility for screen readers */
@media (max-width: 767.98px) {
    /* Better focus management on mobile */
    .btn:focus,
    .form-control:focus,
    .form-select:focus,
    .nav-link:focus {
        outline: 3px solid var(--primary-color);
        outline-offset: 2px;
    }
    
    /* Larger touch targets */
    .btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    .nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* Container queries for future browser support */
@supports (container-type: inline-size) {
    .feature-container {
        container-type: inline-size;
    }
    
    @container (max-width: 500px) {
        .feature-item {
            flex-direction: column;
            text-align: center;
        }
    }
} 
/* Disable horizontal scroll on desktop resolutions */
@media (min-width: 992px) {
    html, body {
        overflow-x: hidden;
        max-width: 100%;
    }
}