/* Responsive Design - Media Queries */


/* Tablet - 768px to 1024px */
@media (max-width: 1024px) {
    :root {
        --section-padding: 3rem 2rem;
        --font-size-h1: 2.5rem;
        --font-size-h2: 2rem;
        --font-size-h3: 1.5rem;
    }

    /* Gallery Page - Tablet */
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 240px;
        gap: 2rem;
    }

    .gallery-item.square {
        grid-column: span 1;
        grid-row: span 1;
    }

    .gallery-item.landscape {
        grid-column: span 2;
        grid-row: span 1;
    }

    .gallery-item.portrait {
        grid-column: span 1;
        grid-row: span 2;
    }

    .gallery-hero-content {
        padding: 2rem 3rem;
    }

    .gallery-hero-content h1 {
        font-size: 2.5rem;
    }

    .two-column-grid {
        gap: 2rem;
    }

    .why-choose-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .why-choose-grid .card:nth-child(2) {
        grid-column: span 1;
        grid-row: span 1;
    }

    .why-choose-grid .card:nth-child(3) {
        grid-column: span 1;
    }

    .process-number {
        left: 0;
        position: static;
        display: none;
    }

    .process-item h3,
    .process-item p {
        margin-left: 0;
    }

    /* Footer - Tablet: 2x2 grid */
    .footer-content {
        grid-template-columns: 1.5fr 1fr;
        gap: 2rem;
    }

    .footer-tagline {
        max-width: 100%;
    }
}

/* Mobile - 768px and below */
@media (max-width: 768px) {
    :root {
        --section-padding: 2rem 1rem;
        --font-size-h1: 2rem;
        --font-size-h2: 1.5rem;
        --font-size-h3: 1.25rem;
        --spacing-lg: 2rem;
    }

    /* Navigation */
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background: var(--glass-bg-strong);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        width: 100%;
        text-align: center;
        transition: var(--transition-smooth);
        box-shadow: var(--shadow-lg);
        padding: 2rem 0;
        gap: 1rem;
        z-index: var(--z-mobile-menu);
        border-bottom: 1px solid var(--glass-border);
    }

    .nav-menu.active {
        left: 0;
    }

    .hamburger {
        display: flex;
    }

    .nav-link::after {
        display: none;
    }

    .nav-container > .btn {
        display: none;
    }

    /* Header - Mobile floating adjustment */
    .site-header {
        top: 0.5rem;
        margin: 0.5rem auto -20px;
        border-radius: var(--radius-xl);
    }

    /* Hero Section */
    .hero-section {
        border-radius: var(--radius-lg);
        min-height: 60vh;
        margin: 1rem 0.5rem;
    }

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

    .hero-text-left,
    .hero-text-right {
        text-align: center;
    }

    .hero-title {
        font-size: 1.75rem;
    }

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

    main {
        margin: 0;
    }

    /* Rounded sections on mobile */
    .stats-horizontal-section,
    .who-we-are-section,
    .simplify-section,
    .why-choose-section,
    .contact-section {
        margin: 1rem 0.5rem;
        border-radius: var(--radius-lg);
    }

    /* Reduce hover transform intensity on touch */
    .card:hover,
    .panel:hover,
    .gallery-item:hover,
    .audience-card:hover,
    .testimonial-card:hover {
        transform: translateY(-3px);
    }

    /* Remove stat dividers on mobile */
    .stats-horizontal-grid .stat-item:not(:last-child)::after {
        display: none;
    }

    .who-we-are-section {
        padding: 2rem;
    }

    /* Two Panel Section - Mobile */
    .two-panel-section {
        height: auto;
        margin: 1rem 0.5rem;
        padding: 1.5rem 0.5rem;
    }

    .two-panel-container {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .panel {
        padding: 1.75rem;
    }

    .panel h3 {
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }

    /* Bronze panel adjustments on mobile */
    .panel.services-panel,
    .panel.who-we-are-panel {
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    }

    /* Scale down decorative circles for mobile */
    .panel.services-panel::before {
        width: 140px;
        height: 140px;
        top: -30px;
        right: -50px;
    }

    .panel.services-panel::after {
        width: 120px;
        height: 120px;
        bottom: -40px;
        left: -30px;
    }

    .panel.who-we-are-panel::before {
        width: 140px;
        height: 140px;
        bottom: -40px;
        right: -50px;
    }

    .panel.who-we-are-panel::after {
        width: 130px;
        height: 130px;
        top: -50px;
        left: -40px;
    }

    /* Adjust heading accents on mobile */
    .panel.services-panel h3,
    .panel.who-we-are-panel h3 {
        margin: -0.5rem 0 1rem -1.75rem;
        padding: 0.5rem 0 0.5rem 1.75rem;
    }

    /* Adjust list accent on mobile */
    .panel.services-panel ul {
        padding: 0.75rem;
        margin: 0;
    }

    /* Horizontal Stats Section */
    .stats-horizontal-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .stats-horizontal-grid .stat-item {
        padding: 1rem 0;
    }

    .stats-horizontal-grid .stat-number {
        font-size: 2rem;
    }

    .stats-horizontal-grid .stat-label {
        font-size: 0.85rem;
    }

    /* Two Column Grid */
    .two-column-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .content-column {
        padding: 0;
    }

    .content-column h2 {
        font-size: 1.5rem;
    }

    .image-column {
        border-radius: 20px;
    }

    .image-column img {
        border-radius: 20px;
    }

    /* Two Column Layouts */
    .two-column-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* Stats Section */
    .stats-card {
        grid-template-columns: repeat(2, 1fr);
        padding: 2rem;
        gap: 2rem;
    }

    .stat-divider {
        display: none;
    }

    /* Why Choose Grid */
    .why-choose-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .why-choose-grid .card {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
        min-height: auto;
    }

    /* Scale down decorative elements on mobile */
    .why-choose-grid .card.card-pattern::before {
        width: 80px;
        height: 80px;
        top: -20px;
        right: -25px;
    }

    .why-choose-grid .card.card-solid::before {
        width: 100px;
        height: 100px;
        bottom: -30px;
        right: -40px;
    }

    .why-choose-grid .card.card-solid::after {
        width: 70px;
        height: 70px;
        top: -25px;
        left: -15px;
    }

    /* Cards */
    .card {
        padding: 1.5rem;
        min-height: auto;
    }

    /* Buttons */
    .btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.95rem;
    }

    /* Footer - Mobile: single column, centered */
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
        margin-bottom: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .footer-section:first-child {
        align-items: center;
    }

    .footer-logo {
        margin: 0 auto;
    }

    .footer-tagline {
        max-width: 100%;
        text-align: center;
    }

    .footer-cta {
        margin: 1rem auto 0;
    }

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

    .section-heading {
        font-size: 1.5rem;
    }

    /* Header */
    .site-header {
        padding: 0.5rem 0;
    }

    .logo {
        font-size: 1.25rem;
    }

    /* Container adjustments */
    .container {
        padding: 0 1rem;
    }

    /* Process item adjustments */
    .process-item {
        position: relative;
    }

    .process-number {
        display: block;
        position: static;
        font-size: 2rem;
        margin-bottom: 1rem;
        opacity: 0.5;
    }

    .process-item h3 {
        margin-left: 0;
        font-size: 1.25rem;
    }

    .process-item p {
        margin-left: 0;
    }

    /* Hero section min height */
    .hero-section {
        min-height: 60vh;
    }

    /* Gallery Page - Mobile */
    .gallery-hero-section {
        height: 400px;
        border-radius: 15px;
        margin: 1rem 0.5rem;
    }

    .gallery-hero-content {
        padding: 1.5rem 2rem;
    }

    .gallery-hero-content h1 {
        font-size: 1.75rem;
    }

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

    /* Slideshow Controls - Mobile */
    .slideshow-control {
        width: 40px;
        height: 40px;
    }

    .slideshow-control.prev {
        left: 1rem;
    }

    .slideshow-control.next {
        right: 1rem;
    }

    .slideshow-indicators {
        bottom: 1rem;
    }

    .slideshow-indicators .indicator {
        width: 10px;
        height: 10px;
    }

    /* Gallery Grid - Mobile */
    .gallery-grid-section {
        margin: 1rem 0.5rem;
        border-radius: 15px;
        padding: 2rem 1rem;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 220px;
        gap: 1rem;
    }

    /* All items fill efficiently on mobile */
    .gallery-item.square {
        grid-column: span 1;
        grid-row: span 1;
    }

    .gallery-item.landscape {
        grid-column: span 2;
        grid-row: span 1;
    }

    .gallery-item.portrait {
        grid-column: span 1;
        grid-row: span 2;
    }

    .gallery-item {
        border-radius: 15px;
    }

    /* Overlay - Mobile */
    .gallery-overlay-close {
        top: 1rem;
        right: 1rem;
        width: 40px;
        height: 40px;
    }

    .gallery-overlay-nav {
        width: 50px;
        height: 50px;
    }

    .gallery-overlay-nav.prev {
        left: 1rem;
    }

    .gallery-overlay-nav.next {
        right: 1rem;
    }

    .gallery-overlay-image-container {
        max-width: 95%;
        max-height: 80%;
        padding: 1rem;
    }

    .gallery-overlay-counter {
        bottom: 1rem;
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
}

/* Small Mobile - 480px and below */
@media (max-width: 480px) {
    :root {
        --font-size-h1: 1.5rem;
        --font-size-h2: 1.25rem;
        --font-size-h3: 1.1rem;
        --spacing-md: 1rem;
        --spacing-lg: 1.5rem;
    }

    .hero-title {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .hero-subtitle {
        font-size: 0.95rem;
        margin-bottom: 1.5rem;
    }

    .stat-number {
        font-size: 2rem;
    }

    .stat-label {
        font-size: 0.875rem;
    }

    .logo {
        font-size: 1.1rem;
    }

    .hamburger {
        gap: 4px;
    }

    .hamburger span {
        width: 20px;
        height: 2.5px;
    }

    .card {
        padding: 1rem;
    }

    .btn {
        padding: 0.65rem 1.25rem;
        font-size: 0.9rem;
    }

    .footer-section h4 {
        font-size: 1.1rem;
    }

    .footer-section p,
    .footer-section a {
        font-size: 0.875rem;
    }

    /* Gallery Page - Small Mobile */
    .gallery-hero-section {
        height: 300px;
    }

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

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

    .slideshow-control {
        width: 35px;
        height: 35px;
    }

    .gallery-overlay-nav {
        width: 45px;
        height: 45px;
    }

    /* Gallery Grid - Very small mobile */
    .gallery-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 200px;
        gap: 0.75rem;
    }

    .gallery-item.landscape {
        grid-column: span 1;
    }

    .gallery-item.portrait {
        grid-column: span 1;
        grid-row: span 1;
    }

    /* Hide nav arrows on very small screens (use swipe instead) */
    .gallery-overlay-nav {
        opacity: 0.5;
    }
}

/* Landscape Mode */
@media (max-height: 600px) and (orientation: landscape) {
    .hero-section {
        min-height: auto;
        padding: 2rem 0;
    }

    .hero-title {
        font-size: 1.75rem;
        margin-bottom: 0.5rem;
    }

    .hero-subtitle {
        font-size: 0.95rem;
        margin-bottom: 1rem;
    }
}


/* High Resolution Displays */
@media (min-width: 1440px) {
    :root {
        --max-width: 1400px;
        --section-padding: 6rem 2rem;
    }

    .container {
        padding: 0 4rem;
    }
}

/* Extra Large Screens */
@media (min-width: 1920px) {
    :root {
        --max-width: 1600px;
    }

    .hero-section {
        min-height: 100vh;
    }
}

/* Print Styles */
@media print {
    .site-header,
    .site-footer,
    .hamburger,
    .btn {
        display: none;
    }

    body {
        background-color: white;
        color: black;
    }

    .hero-section {
        page-break-inside: avoid;
    }
}

/* Scroll-Driven Process Section - Mobile */
@media (max-width: 768px) {
    .scroll-process-wrapper {
        height: auto;
        margin-top: 2rem;
    }

    .scroll-process-sticky {
        position: static;
        height: auto;
        will-change: auto;
    }

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

    .scroll-content-column {
        min-height: auto;
        display: block;
    }

    .scroll-content-column .process-item {
        position: static;
        opacity: 1;
        transform: none;
        margin-bottom: 3rem;
        pointer-events: auto;
        will-change: auto;
    }

    .scroll-content-column .process-item .process-number {
        position: static;
        display: block;
        font-size: 2rem;
        margin-bottom: 1rem;
        opacity: 0.5;
    }

    .scroll-content-column .process-item h3 {
        margin-left: 0;
        font-size: 1.4rem;
    }

    .scroll-content-column .process-item p {
        margin-left: 0;
    }

    /* Show images below each text on mobile */
    .scroll-image-column {
        display: none;
    }

    .scroll-content-column .process-item::after {
        content: '';
        display: block;
        width: 100%;
        height: 250px;
        margin-top: 1.5rem;
        border-radius: 20px;
        background-size: cover;
        background-position: center;
    }

    .scroll-content-column .process-item[data-step="1"]::after {
        background-image: url('../New Photos/COMMERCIAL/Scene 23.png');
    }

    .scroll-content-column .process-item[data-step="2"]::after {
        background-image: url('../New Photos/RESIDENTIAL/Scene 1.png');
    }

    .scroll-content-column .process-item[data-step="3"]::after {
        background-image: url('../New Photos/RESIDENTIAL/Scene 4.png');
    }

    .scroll-content-column .process-item[data-step="4"]::after {
        background-image: url('../New Photos/RESIDENTIAL/Scene 7.png');
    }

    .scroll-progress-indicator {
        display: none;
    }
}

/* ========================================
   TESTIMONIALS PAGE - MOBILE RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    /* Hero Section */
    .testimonials-hero-section {
        height: 400px;
        margin: 0.5rem;
        border-radius: 15px;
    }

    .testimonials-hero-content h1 {
        font-size: clamp(1.5rem, 4vw, 2rem);
    }

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

    /* Quote Section */
    .inspirational-quote-section {
        padding: clamp(3rem, 6vw, 4rem) clamp(1.5rem, 4vw, 2rem);
    }

    .quote-text {
        font-size: 1.5rem;
    }

    .quote-decoration {
        width: 50px;
        height: 50px;
    }

    .quote-mark {
        font-size: 80px;
    }

    .quote-decoration-left {
        top: -15px;
        left: -40px;
    }

    .quote-decoration-right {
        bottom: -15px;
        right: -40px;
    }

    /* Testimonials Grid - Stack to Single Column */
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        grid-auto-rows: auto;
    }

    .testimonial-card.large,
    .testimonial-card.medium,
    .testimonial-card.small {
        grid-column: span 1;
        grid-row: span 1;
    }

    .testimonial-card {
        padding: 1.5rem;
    }

    .testimonial-card.large .testimonial-text {
        font-size: 1rem;
    }

    /* Details Section - Stack Columns */
    .details-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .stats-compact {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .stats-compact .stat-item {
        padding: 1rem 0.75rem;
    }

    .details-visual {
        height: 300px;
    }

    .details-visual img {
        height: 100%;
    }

    /* Social Buttons - Single Column */
    .social-buttons-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .social-button {
        padding: 1rem 1.5rem;
        gap: 1rem;
    }

    .social-icon {
        width: 45px;
        height: 45px;
    }

    .social-icon svg {
        width: 24px;
        height: 24px;
    }

}

@media (max-width: 480px) {
    /* Hero Section */
    .testimonials-hero-section {
        height: 300px;
        margin: 0.25rem;
    }

    .testimonials-hero-content {
        padding: 2rem 1.5rem;
        border-radius: 10px 10px 0 0;
    }

    .testimonials-hero-content h1 {
        font-size: 1.25rem;
    }

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

    /* Quote Section */
    .inspirational-quote-section {
        padding: 2rem 1rem;
        margin: 0.5rem;
    }

    .quote-text {
        font-size: 1.25rem;
        line-height: 1.5;
    }

    .quote-author {
        font-size: 1rem;
    }

    /* Testimonials Grid */
    .testimonials-grid-section {
        padding: 2rem 1rem;
    }

    .section-heading {
        font-size: 1.5rem;
    }

    .testimonial-card {
        padding: 1rem;
        border-radius: 12px;
    }

    .testimonial-stars {
        font-size: 1rem;
        letter-spacing: 2px;
    }

    .testimonial-text {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .author-avatar {
        width: 40px;
        height: 40px;
        font-size: 0.75rem;
    }

    .author-name {
        font-size: 0.9rem;
    }

    .author-title {
        font-size: 0.8rem;
    }

    /* Details Section */
    .testimonial-details-section {
        padding: 2rem 1rem;
    }

    .details-stats h2 {
        font-size: 1.5rem;
    }

    .details-intro {
        font-size: 1rem;
    }

    .stats-compact {
        gap: 0.75rem;
    }

    .stats-compact .stat-number {
        font-size: 1.75rem;
    }

    .stats-compact .stat-label {
        font-size: 0.75rem;
    }

    .details-visual {
        height: 250px;
    }

    /* Social Media Section */
    .social-media-section {
        padding: 2rem 1rem;
    }

    .social-heading {
        font-size: 1.5rem;
    }

    .social-subheading {
        font-size: 1rem;
    }

    .social-button {
        padding: 1rem;
        gap: 0.75rem;
        border-radius: 12px;
    }

    .social-content h4 {
        font-size: 1rem;
    }

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

}

/* Reduced Motion */
/* ======================== */
/* New Section Responsive   */
/* ======================== */

@media (max-width: 768px) {
    .audience-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .faq-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .contact-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .contact-slideshow-container {
        height: 300px;
    }

    .contact-slideshow {
        border-radius: var(--radius-lg);
    }

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

    .hero-cta-group {
        flex-direction: column;
    }

    .hero-cta-group .btn {
        text-align: center;
    }

    .breadcrumb {
        font-size: 0.75rem;
    }
}

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

    html {
        scroll-behavior: auto;
    }
}