/* Kiosk Optimization for 53" Display - 1080 x 1920 Portrait */
@media screen and (min-height: 1800px) {
    body {
        font-size: 24px !important;
        line-height: 1.4 !important;
        padding-top: 80px !important;
    }
    
    /* Header adjustments */
    #header {
        height: 80px !important;
        font-size: 20px !important;
    }
    
    /* Banner section */
    #two {
        padding: 80px 0 !important;
    }
    
    #two h1 {
        font-size: 4rem !important;
        margin-bottom: 20px !important;
    }
    
    #two p {
        font-size: 1.8rem !important;
    }
    
    #two i {
        font-size: 6rem !important;
    }
    
    /* Main content section */
    section {
        padding: 40px 60px !important;
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
    }
    
    /* Banner section full width */
    #two .inner {
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 60px !important;
    }
    
    /* Interactive cards */
    .interactive-card {
        padding: 50px !important;
        margin-bottom: 30px !important;
        border-radius: 20px !important;
        border-left-width: 8px !important;
    }
    
    .interactive-card h2 {
        font-size: 2.5rem !important;
        margin-bottom: 25px !important;
    }
    
    .interactive-card h2 i {
        font-size: 2.5rem !important;
    }
    
    .interactive-card h2 span:last-child {
        font-size: 2rem !important;
    }
    
    /* Content text */
    .content-slide {
        font-size: 1.6rem !important;
        line-height: 1.6 !important;
    }
    
    .content-slide p {
        font-size: 1.6rem !important;
        margin-bottom: 20px !important;
    }
    
    .content-slide ul li {
        font-size: 1.6rem !important;
        padding: 15px 0 !important;
    }
    
    /* Grid layout optimization */
    section > div {
        gap: 30px !important;
    }
    
    /* Footer adjustments */
    #footer {
        font-size: 1.2rem !important;
        padding: 40px 0 !important;
    }
    
    /* Hover effects for touch */
    .interactive-card:hover {
        transform: translateY(-5px) scale(1.01) !important;
        box-shadow: 0 15px 35px rgba(0,0,0,0.2) !important;
    }
    
    /* Animation scaling */
    @keyframes pulse {
        0%, 100% { transform: scale(1.2); }
        50% { transform: scale(1.4); }
    }
    
    @keyframes bounce {
        0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
        40% { transform: translateY(-15px); }
        60% { transform: translateY(-8px); }
    }
    
    /* Content slide adjustments */
    .content-slide.open {
        max-height: none !important;
        padding-top: 25px !important;
    }
    
    /* Touch-friendly spacing */
    .interactive-card {
        min-height: 120px !important;
    }
    
    /* About Us page specific optimizations */
    body[style*="about-us"] .service-card,
    [title*="About Us"] .service-card {
        min-height: 700px !important;
        border-radius: 25px !important;
    }
    
    body[style*="about-us"] .service-card h3,
    [title*="About Us"] .service-card h3 {
        font-size: 2.5rem !important;
        margin-bottom: 25px !important;
    }
    
    body[style*="about-us"] .service-card p,
    [title*="About Us"] .service-card p {
        font-size: 1.8rem !important;
        line-height: 1.6 !important;
    }
    
    body[style*="about-us"] .service-card div:last-child,
    [title*="About Us"] .service-card div:last-child {
        padding: 50px 40px !important;
    }
    
    /* Grid layout for about us cards only */
    body[style*="about-us"] section div[style*="grid-template-columns"],
    [title*="About Us"] section div[style*="grid-template-columns"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 50px !important;
        align-items: stretch !important;
    }
    
    /* Pages with fixed footer at bottom */
    body[style*="about-us"] body,
    [title*="About Us"] body,
    [title*="Process Overview"] body {
        height: auto !important;
        min-height: 100vh !important;
        overflow-y: auto !important;
        margin: 0 !important;
        padding-bottom: 220px !important;
    }
    
    body[style*="about-us"] section:not(#two),
    [title*="About Us"] section:not(#two),
    [title*="Process Overview"] section:not(#two) {
        padding-bottom: 100px !important;
        margin-bottom: 10px !important;
    }
    
    body[style*="about-us"] #footer,
    [title*="About Us"] #footer,
    [title*="Process Overview"] #footer {
        position: fixed !important;
        bottom: 60px !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
    }
    
    body[style*="about-us"] .copyright,
    [title*="About Us"] .copyright,
    [title*="Process Overview"] .copyright {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1001 !important;
    }
    
    /* Ensure readability */
    * {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Fallback for smaller kiosk displays */
@media screen and (min-height: 1400px) and (max-height: 1799px) {
    body {
        font-size: 20px !important;
    }
    
    .interactive-card h2 {
        font-size: 2rem !important;
    }
    
    .content-slide {
        font-size: 1.4rem !important;
    }
}