/* ===================================
   HORWING TECHNOLOGY - MOBILE STYLES
   ===================================
   Responsive design and mobile optimizations
   Organized by screen size and feature support
   ================================== */

/* ==================== 
   LARGE MOBILE & TABLET
   Max Width: 768px
   ==================== */

/* Enhanced mobile-first responsive design for glass elements */
@media (max-width: 768px) {
    .glass-orb-1 {
        width: 200px;
        height: 200px;
    }
    
    .glass-orb-2 {
        width: 150px;
        height: 150px;
    }
    
    .glass-orb-3 {
        width: 100px;
        height: 100px;
    }
    
    .hero-content {
        padding: 2rem 1.5rem;
    }
    
    .section-header h2 {
        font-size: clamp(1.8rem, 4vw, 2.5rem);
    }
    
    .modern-glass-card {
        margin: 1rem 0;
    }
}

/* Main responsive design for tablets and mobile */
@media (max-width: 768px) {
    /* Navigation Menu */
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 80px;
        flex-direction: column;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.15);
        padding: 2rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 0 0 20px 20px;
    }

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

    .nav-menu .nav-item {
        margin: 1rem 0;
    }

    .nav-menu .nav-link {
        color: #333;
        background: rgba(44, 90, 160, 0.1);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(44, 90, 160, 0.2);
        margin: 0 2rem;
        padding: 1rem;
        border-radius: 15px;
    }

    .nav-menu .nav-link:hover {
        background: rgba(44, 90, 160, 0.2);
        color: #2c5aa0;
    }

    /* Hamburger Menu */
    .hamburger {
        display: flex;
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Hero Section */
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
        min-height: 70vh;
        max-width: 1200px;
    }

    .hero-content,
    .hero-image {
        max-width: 100%;
    }

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

    .hero-image {
        order: 2;
        padding: 0.5rem;
    }

    .hero-content h1 {
        font-size: 2.8rem;
        margin-bottom: 1.5rem;
        letter-spacing: -0.5px;
    }

    .hero-content p {
        font-size: 1.1rem;
        margin-bottom: 2rem;
    }

    .hero-buttons {
        justify-content: center;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
    }

    .hero-image img {
        min-height: 300px;
    }

    /* Layout Grids */
    .about-content,
    .detail-content,
    .contact-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* About Section Mobile Adjustments */

    .about-features {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-top: 1.5rem;
    }

    /* Enhanced mobile hover effects */
    .feature:active {
        transform: translateY(-8px) scale(1.01);
        transition: all 0.2s ease;
    }

    .about-text {
        padding: 2rem;
        height: fit-content;
    }

    .about-text h3 {
        font-size: 1.8rem;
        margin-bottom: 1rem;
    }

    .about-text p {
        font-size: 1rem;
        margin-bottom: 1rem;
    }

    .about-text .about-mission {
        font-size: 0.95rem;
        padding: 0.8rem 1rem;
        margin: 1rem 0 1.5rem 0;
    }

    /* Electrification Placeholder Gallery Mobile */
    .electrification-placeholder-gallery {
        width: 100% !important;
        max-width: 400px;
        gap: 1.5rem !important;
    }

    .placeholder-item img {
        height: 300px !important;
    }

    /* Charging Placeholder Gallery Mobile */
    .charging-placeholder-gallery {
        width: 100% !important;
        max-width: 400px;
        gap: 1.5rem !important;
    }

    .charging-placeholder-item img {
        height: 300px !important;
    }

    /* Biomass Placeholder Gallery Mobile */
    .biomass-placeholder-gallery {
        width: 100% !important;
        max-width: 400px;
        gap: 1.5rem !important;
    }

    .biomass-placeholder-item img {
        height: 300px !important;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        align-items: stretch;
    }

    .service-card {
        min-height: 500px;
    }

    .service-card-title {
        height: 3.5rem;
    }

    .service-card h3 {
        font-size: 1.05rem;
        line-height: 1.1;
        padding: 0 0.25rem;
    }

    .service-card > p {
        font-size: 0.95rem;
        min-height: 4rem;
    }

    .service-benefits {
        min-height: 160px;
        padding: 1rem;
    }

    .service-benefits li {
        padding: 0.5rem 0;
        font-size: 0.9rem;
    }

    .benefits-grid,
    .system-components {
        grid-template-columns: 1fr;
    }

    /* SKD Details Mobile Layout */
    .detail-content-vertical {
        gap: 2rem;
    }

    /* Electrification Mobile Styles */
    .electrification-header h2 {
        font-size: 2rem;
    }

    .section-subtitle {
        font-size: 1.1rem;
    }

    .electrification-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-bottom: 2rem;
    }

    .process-section h3,
    .applications-section h3 {
        font-size: 1.5rem;
    }

    .process-step {
        padding: 1rem;
        gap: 1rem;
    }

    .step-number {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .step-content h4 {
        font-size: 1.1rem;
    }

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

    .app-icon {
        width: 50px;
        height: 50px;
    }

    .app-icon i {
        font-size: 1.3rem;
    }

    .electrification-benefits {
        padding: 2rem;
    }

    .electrification-benefits h3 {
        font-size: 1.5rem;
    }

    .electrification-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .electrification-benefit-card {
        padding: 1.5rem 1rem;
        min-height: 160px;
        gap: 0.8rem;
    }

    .electrification-benefit-icon {
        width: 50px;
        height: 50px;
    }

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

    .electrification-benefit-card h4 {
        font-size: 1.1rem;
    }

    .electrification-benefit-card p {
        font-size: 0.9rem;
        line-height: 1.3;
    }

    /* Charging Station Mobile Styles */
    .charging-header h2 {
        font-size: 2rem;
    }

    .charging-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-bottom: 2rem;
    }

    .components-section h3,
    .features-section h3 {
        font-size: 1.5rem;
    }

    .component-card {
        padding: 1rem;
        gap: 1rem;
    }

    .component-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .component-content h4 {
        font-size: 1.1rem;
    }

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

    .feature-icon {
        width: 50px;
        height: 50px;
    }

    .feature-icon i {
        font-size: 1.3rem;
    }

    .charging-advantages {
        padding: 2rem;
    }

    .charging-advantages h3 {
        font-size: 1.5rem;
    }

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

    .advantage-card {
        padding: 1.5rem;
        min-height: 160px;
    }

    .advantage-icon {
        width: 50px;
        height: 50px;
    }

    .advantage-icon i {
        font-size: 1.2rem;
    }

    /* Biomass Mobile Styles */
    .biomass-header h2 {
        font-size: 2rem;
    }

    .services-wheel {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .service-node {
        padding: 1.5rem 1rem;
    }

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

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

    .service-node h4 {
        font-size: 1.1rem;
    }

    .biomass-features {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-bottom: 2rem;
    }

    .circular-economy-section h3,
    .capabilities-section h3 {
        font-size: 1.5rem;
    }

    .economy-benefit,
    .capability-step {
        padding: 1rem;
        gap: 1rem;
    }

    .economy-icon,
    .step-indicator {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .economy-benefit h4,
    .capability-step h4 {
        font-size: 1.1rem;
    }

    .biomass-value {
        padding: 2rem;
    }

    .biomass-value h3 {
        font-size: 1.5rem;
    }

    .value-cards {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .value-card {
        padding: 1.5rem;
        min-height: 160px;
    }

    .value-icon {
        width: 50px;
        height: 50px;
    }

    .value-icon i {
        font-size: 1.2rem;
    }

    /* Company Gallery Mobile Styles */
    .gallery-header h2 {
        font-size: 2rem;
    }

    .carousel-container {
        padding: 1rem;
        border-radius: 20px;
    }

    .carousel-slides {
        height: 350px;
    }

    .slide-overlay {
        padding: 2rem 1rem 1rem;
    }

    .slide-content h3 {
        font-size: 1.4rem;
    }

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

    .gallery-arrow {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }

    .gallery-prev {
        left: 0.5rem;
    }

    .gallery-next {
        right: 0.5rem;
    }

    .thumbnail-navigation {
        padding: 0.8rem;
    }

    .thumbnail-track {
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .thumbnail {
        width: 60px;
        height: 45px;
    }
    
    /* Theme Selector Mobile Styles */
    .theme-selector {
        top: 15px;
        right: 15px;
    }
    
    .theme-toggle {
        width: 45px;
        height: 45px;
        font-size: 1rem;
    }
    
    .theme-wheel {
        top: 55px;
        padding: 12px;
        gap: 6px;
        min-width: 140px;
        grid-template-columns: repeat(3, 1fr);
    }
    
    .theme-option {
        width: 35px;
        height: 35px;
    }
}

@media (max-width: 480px) {
    /* Theme Selector Mobile Styles for Small Screens */
    .theme-selector {
        top: 10px;
        right: 10px;
    }
    
    .theme-toggle {
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }
    
    .theme-wheel {
        top: 50px;
        padding: 10px;
        gap: 5px;
        min-width: 120px;
        grid-template-columns: repeat(3, 1fr);
    }
    
    .theme-option {
        width: 30px;
        height: 30px;
    }

    /* Mobile Carousel Styles */
    .image-carousel {
        margin: 0 auto 2rem auto;
        padding: 1rem;
    }

    .carousel-wrapper {
        gap: 0.5rem;
    }

    .carousel-images {
        min-height: 250px;
        padding: 0.5rem;
    }

    .carousel-images img {
        max-height: 250px;
    }

    .carousel-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .dot {
        width: 10px;
        height: 10px;
    }

    .detail-content-box {
        padding: 2rem;
    }

    .detail-header h2 {
        font-size: 2rem;
    }

    .benefits-grid-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .benefit-item-compact {
        padding: 1.5rem;
    }

    .timeline-section {
        padding: 2rem;
    }

    .timeline-horizontal {
        flex-direction: column;
        gap: 1.5rem;
    }

    .timeline-connector {
        width: 4px;
        height: 30px;
        transform: rotate(90deg);
    }

    .timeline-connector::before {
        right: -4px;
        top: 22px;
        border-left: 6px solid #1e88e5;
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        transform: rotate(90deg);
    }

    .process-steps {
        grid-template-columns: 1fr;
    }

    .energy-services {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    /* Cards and Text Areas */
    .about-text,
    .detail-text,
    .contact-info,
    .contact-form {
        padding: 2rem;
    }

    .service-card {
        padding: 2rem;
    }

    .feature,
    .benefit-item,
    .process-step {
        padding: 1.5rem;
    }

    .footer-section {
        padding: 1.5rem;
    }

    /* Buttons */
    .btn {
        width: 100%;
        max-width: 280px;
    }

    /* Typography */
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.8rem;
    }

    /* Container */
    .container {
        padding: 0 15px;
    }
}

/* ===================
   MEDIUM MOBILE
   Max Width: 640px
   =================== */

@media (max-width: 480px) {
    .electrification-benefits-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.8rem;
    }

    .electrification-benefit-card {
        padding: 1.2rem 0.8rem;
        min-height: 150px;
    }

    .electrification-benefit-icon {
        width: 40px;
        height: 40px;
    }

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

    .electrification-benefit-card h4 {
        font-size: 0.95rem;
    }

    .electrification-benefit-card p {
        font-size: 0.8rem;
        line-height: 1.3;
    }

    /* Biomass Services Wheel Mobile */
    .services-wheel {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }

    .service-node {
        padding: 1.2rem 0.8rem;
    }

    .service-node-icon {
        width: 50px;
        height: 50px;
    }

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

    .service-node h4 {
        font-size: 1rem;
    }

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

@media (max-width: 640px) {


    .about-features {
        grid-template-columns: 1fr;
        gap: 1.2rem;
        margin-top: 1.5rem;
    }

    .feature {
        padding: 2rem 1.5rem;
    }

    .about-text {
        padding: 1.5rem;
        height: fit-content;
    }

    .electrification-placeholder-gallery {
        width: 90% !important;
        max-width: 380px;
    }

    .placeholder-item img {
        height: 280px !important;
    }

    .charging-placeholder-gallery {
        width: 90% !important;
        max-width: 380px;
    }

    .charging-placeholder-item img {
        height: 280px !important;
    }

    .biomass-placeholder-gallery {
        width: 90% !important;
        max-width: 380px;
    }

    .biomass-placeholder-item img {
        height: 280px !important;
    }
}

/* ===================
   SMALL MOBILE
   Max Width: 480px
   =================== */

@media (max-width: 480px) {
    /* Hero Section */
    .hero-content h1 {
        font-size: 2rem;
    }

    .hero-content,
    .about-text,
    .detail-text,
    .contact-info,
    .contact-form {
        padding: 2rem 1.5rem;
        margin-bottom: 1rem;
    }
    
    .contact-info h3 {
        margin-bottom: 1.5rem;
        font-size: 1.4rem;
        text-align: center;
        color: #333;
        font-weight: 600;
    }



    .about-features {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-top: 1rem;
    }

    .feature {
        padding: 1.5rem 1rem;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    /* Buttons */
    .btn {
        width: 100%;
        max-width: 250px;
        padding: 12px 24px;
    }

    /* Layout Grids */
    .about-features {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .electrification-gallery {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 1rem;
    }

    .electrification-item:nth-child(1),
    .electrification-item:nth-child(2),
    .electrification-item:nth-child(3),
    .electrification-item:nth-child(4),
    .electrification-item:nth-child(5) {
        grid-column: 1;
        grid-row: auto;
    }

    .electrification-placeholder-gallery {
        width: 100% !important;
        max-width: 350px;
        gap: 1rem !important;
        padding: 0.5rem !important;
    }

    .placeholder-item {
        padding: 0.5rem !important;
    }

    .placeholder-item img {
        height: 250px !important;
        border-radius: 15px !important;
    }

    .charging-placeholder-gallery {
        width: 100% !important;
        max-width: 350px;
        gap: 1rem !important;
        padding: 0.5rem !important;
    }

    .charging-placeholder-item {
        padding: 0.5rem !important;
    }

    .charging-placeholder-item img {
        height: 250px !important;
        border-radius: 15px !important;
    }

    .biomass-placeholder-gallery {
        width: 100% !important;
        max-width: 350px;
        gap: 1rem !important;
        padding: 0.5rem !important;
    }

    .biomass-placeholder-item {
        padding: 0.5rem !important;
    }

    .biomass-placeholder-item img {
        height: 250px !important;
        border-radius: 15px !important;
    }

    .charging-gallery {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 1rem;
    }

    .charging-item:nth-child(1),
    .charging-item:nth-child(2),
    .charging-item:nth-child(3),
    .charging-item:nth-child(4),
    .charging-item:nth-child(5) {
        grid-column: 1;
        grid-row: auto;
    }

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

    .process-steps {
        grid-template-columns: 1fr;
    }

    .energy-services {
        grid-template-columns: 1fr;
    }

    /* Small Mobile - Benefits Grid */
    .benefits-grid-row {
        grid-template-columns: 1fr;
    }

    .benefit-item-compact {
        padding: 1.5rem 1rem;
    }

    .timeline-item-horizontal {
        padding: 2rem 1.5rem;
    }

    /* Service Cards */
    .service-card {
        padding: 1.5rem;
    }

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

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

    /* Process Steps */
    .step-number {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    /* Contact */
    .contact-item {
        padding: 1.5rem 1rem;
        flex-direction: row;
        align-items: center;
        text-align: left;
        margin-bottom: 1.5rem;
        gap: 1rem;
    }
    
    .contact-item i {
        font-size: 1.4rem;
        padding: 0.8rem;
        flex-shrink: 0;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .contact-item div {
        flex: 1;
        min-width: 0;
    }
    
    .contact-item h4 {
        margin-bottom: 0.3rem;
        font-size: 1rem;
        font-weight: 600;
    }
    
    .contact-item p {
        font-size: 0.9rem;
        line-height: 1.4;
        word-wrap: break-word;
        margin: 0;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 12px 16px;
    }
}

/* Extra small mobile devices (320px and below) */
@media (max-width: 375px) {
    .contact-info {
        padding: 1.5rem 1rem;
    }
    
    .contact-item {
        padding: 1rem;
        gap: 0.8rem;
    }
    
    .contact-item i {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
        padding: 0.6rem;
    }
    
    .contact-item h4 {
        font-size: 0.95rem;
    }
    
    .contact-item p {
        font-size: 0.85rem;
        line-height: 1.3;
    }
}

/* ===================
   ACCESSIBILITY
   =================== */

/* Reduced motion for accessibility */
@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;
    }
    
    .glass-orb,
    .particle {
        display: none;
    }
}

/* ===================
   DARK MODE SUPPORT
   =================== */

/* Dark mode support for modern systems */
@media (prefers-color-scheme: dark) {
    :root {
        --glass-bg: rgba(255, 255, 255, 0.05);
        --glass-border: rgba(255, 255, 255, 0.1);
        --text-primary: #ffffff;
        --text-secondary: rgba(255, 255, 255, 0.8);
    }
}

/* ===================
   BROWSER SUPPORT
   =================== */

/* Improved backdrop blur support */
@supports (backdrop-filter: blur(20px)) {
    .header,
    .service-card,
    .contact-form,
    .footer-section {
        backdrop-filter: blur(20px);
    }
}

@supports not (backdrop-filter: blur(20px)) {
    .header {
        background: rgba(255, 255, 255, 0.95);
    }
    
    .service-card,
    .contact-form {
        background: rgba(255, 255, 255, 0.95);
    }
    
    .footer-section {
        background: rgba(255, 255, 255, 0.1);
    }
}

/* ===================
   PRINT STYLES
   =================== */

/* Footer Contact Mobile Improvements */
@media (max-width: 480px) {
    .footer-section {
        padding: 1.5rem 1rem;
    }
    
    .footer-section ul li {
        margin-bottom: 1rem;
        gap: 0.6rem;
    }
    
    .footer-section ul li i {
        width: 18px;
        font-size: 1rem;
    }
    
    .footer-section ul li span {
        font-size: 0.9rem;
        line-height: 1.3;
    }
    
    /* Ensure technology glow works on mobile */
    .footer-section h3 .technology-glow {
        color: #ffffff !important;
        text-shadow: 
            0 0 8px rgba(255, 255, 255, 0.9),
            0 0 16px rgba(255, 255, 255, 0.7),
            0 0 24px rgba(255, 255, 255, 0.5);
        filter: brightness(1.2);
        font-weight: 700;
    }
}

/* Print styles for professional documents */
@media print {
    .hero-background-elements,
    .glass-orb,
    .particle {
        display: none !important;
    }
    
    .glass-container,
    .service-card {
        background: white !important;
        border: 1px solid #ddd !important;
        box-shadow: none !important;
    }
}