/* =============================================
   Zenithora Inc. - Responsive Styles
   assets/css/responsive.css
   
   Media queries for all breakpoints
   ============================================= */

/* =============================================
   X-LARGE SCREENS (1200px - 1399px)
   ============================================= */

@media (max-width: 1399.98px) {
    .container {
        max-width: 1140px;
    }
    .hero h1 {
        font-size: 3.8rem;
    }
}

/* =============================================
   LARGE SCREENS (992px - 1199px)
   ============================================= */

@media (max-width: 1199.98px) {
    .container {
        max-width: 960px;
        padding: 0 20px;
    }
    .hero h1 {
        font-size: 3.2rem;
    }
    .hero .lead {
        font-size: 1.1rem;
    }
    .stat-box .number {
        font-size: 2.2rem;
    }
    .service-card .service-content {
        padding: 18px 16px;
    }
}

/* =============================================
   MEDIUM SCREENS (768px - 991px)
   ============================================= */

@media (max-width: 991.98px) {
    .container {
        max-width: 720px;
    }
    .hero {
        min-height: 80vh;
        padding: 100px 0 50px;
    }
    .hero h1 {
        font-size: 2.8rem;
    }
    .hero .lead {
        font-size: 1rem;
    }
    .section-padding {
        padding: 60px 0;
    }
    .section-padding-lg {
        padding: 80px 0;
    }
    .stat-box {
        padding: 20px 16px;
    }
    .stat-box .number {
        font-size: 2rem;
    }
    .about-section .about-image {
        margin-top: 30px;
    }
    .about-section .floating-icon {
        width: 50px;
        height: 50px;
        font-size: 0.9rem;
    }
    .footer .row > div {
        margin-bottom: 30px;
    }
    .footer .row > div:last-child {
        margin-bottom: 0;
    }
    .dashboard-sidebar {
        width: 260px;
    }
    .dashboard-main {
        margin-left: 0;
        padding: 16px 20px;
    }
}

/* =============================================
   SMALL SCREENS (576px - 767px)
   ============================================= */

@media (max-width: 767.98px) {
    .container {
        max-width: 540px;
        padding: 0 16px;
    }
    .hero {
        min-height: 70vh;
        padding: 90px 0 40px;
    }
    .hero h1 {
        font-size: 2.2rem;
    }
    .hero .typed-text {
        font-size: 1rem;
    }
    .hero .lead {
        font-size: 0.95rem;
        padding: 0 10px;
    }
    .hero .btn-glow {
        padding: 10px 22px;
        font-size: 0.9rem;
    }
    .section-padding {
        padding: 50px 0;
    }
    .section-padding-lg {
        padding: 60px 0;
    }
    .section-padding-sm {
        padding: 30px 0;
    }
    .stat-box .number {
        font-size: 1.8rem;
    }
    .service-card .service-content h4 {
        font-size: 1.05rem;
    }
    .service-card .service-content p {
        font-size: 0.85rem;
    }
    .testimonial-card {
        padding: 20px;
    }
    .testimonial-card .content {
        font-size: 0.9rem;
    }
    .cta-section h2 {
        font-size: 2rem;
    }
    .footer {
        padding: 40px 0 20px;
    }
    .footer .brand {
        font-size: 1.5rem;
    }
    .footer .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    .footer .footer-bottom-links {
        justify-content: center;
    }
    .dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .stat-card {
        padding: 16px;
    }
    .stat-card .stat-number {
        font-size: 1.5rem;
    }
}

/* =============================================
   EXTRA SMALL SCREENS (< 576px)
   ============================================= */

@media (max-width: 575.98px) {
    .container {
        padding: 0 12px;
    }
    .hero {
        min-height: 60vh;
        padding: 80px 0 30px;
    }
    .hero h1 {
        font-size: 1.8rem;
    }
    .hero .typed-text {
        font-size: 0.9rem;
        min-height: 30px;
    }
    .hero .lead {
        font-size: 0.85rem;
    }
    .hero .btn-glow {
        padding: 8px 18px;
        font-size: 0.8rem;
    }
    .hero .trust-badge {
        font-size: 0.75rem;
        padding: 6px 14px;
    }
    .section-padding {
        padding: 40px 0;
    }
    .section-padding-lg {
        padding: 50px 0;
    }
    h1.display-3 {
        font-size: 2rem !important;
    }
    h2.display-5 {
        font-size: 1.6rem !important;
    }
    .stat-box {
        padding: 16px 12px;
    }
    .stat-box .number {
        font-size: 1.5rem;
    }
    .stat-box .label {
        font-size: 0.8rem;
    }
    .stat-box .icon {
        font-size: 1.8rem;
    }
    .service-card .service-content {
        padding: 14px 12px;
    }
    .service-card .service-content h4 {
        font-size: 0.95rem;
    }
    .service-card .service-content p {
        font-size: 0.8rem;
    }
    .service-card .service-content .btn-outline-primary {
        font-size: 0.75rem;
        padding: 4px 14px;
    }
    .testimonial-card {
        padding: 16px;
    }
    .testimonial-card .content {
        font-size: 0.85rem;
    }
    .testimonial-card .author img {
        width: 40px;
        height: 40px;
    }
    .testimonial-card .author .name {
        font-size: 0.85rem;
    }
    .why-box {
        padding: 20px 16px;
    }
    .why-box .icon {
        font-size: 2rem;
    }
    .why-box h5 {
        font-size: 0.95rem;
    }
    .why-box p {
        font-size: 0.8rem;
    }
    .cta-section {
        padding: 50px 16px;
    }
    .cta-section h2 {
        font-size: 1.6rem;
    }
    .contact-form .form-control {
        padding: 10px 14px;
        font-size: 0.9rem;
    }
    .dashboard-stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .stat-card {
        padding: 14px;
    }
    .stat-card .stat-number {
        font-size: 1.3rem;
    }
    .stat-card .stat-label {
        font-size: 0.75rem;
    }
    .stat-card .stat-icon {
        font-size: 1.4rem;
    }
    .dashboard-main .top-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .dashboard-main .top-bar .page-title h4 {
        font-size: 1.2rem;
    }
    .dashboard-main .top-bar .actions {
        flex-wrap: wrap;
    }
    .dashboard-table .table {
        font-size: 0.8rem;
    }
    .dashboard-table .table thead th,
    .dashboard-table .table tbody td {
        padding: 8px 10px;
    }
    .sidebar-toggle {
        font-size: 1.2rem;
    }
}

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

@media print {
    .glass-nav,
    #particles-js,
    .footer,
    .cta-section,
    .scroll-top-btn,
    .social-icons,
    .btn-glow {
        display: none !important;
    }
    body {
        background: #ffffff !important;
        color: #000000 !important;
    }
    .hero {
        min-height: auto !important;
        padding: 40px 0 !important;
        background: #ffffff !important;
    }
    .hero h1 {
        color: #000000 !important;
    }
    .hero .lead {
        color: #333333 !important;
    }
    .service-card,
    .stat-box,
    .testimonial-card,
    .why-box {
        background: #f5f5f5 !important;
        border: 1px solid #dddddd !important;
        box-shadow: none !important;
    }
    .service-card .service-content p,
    .testimonial-card .content,
    .why-box p {
        color: #333333 !important;
    }
    .stat-box .number {
        color: #0A84FF !important;
        background: none !important;
        -webkit-background-clip: unset !important;
        background-clip: unset !important;
    }
    .container {
        max-width: 100% !important;
    }
    .about-section .floating-icon {
        display: none !important;
    }
}

/* ZENITHORA_FINAL_RESPONSIVE_PATCH */
section{position:relative;overflow:hidden}.min-vh-100{min-height:calc(100vh - 70px)!important}.page-hero,.compact-hero{padding-top:120px!important;padding-bottom:70px!important}.hero{padding-top:80px}.py-5{padding-top:4rem!important;padding-bottom:4rem!important}.glass,.service-card,.portfolio-card,.team-card,.testimonial-card{height:100%}img{max-width:100%;height:auto}.navbar{z-index:1000}.footer{position:relative;z-index:1}
@media(max-width:991px){.hero .row,.about-section .row,.about-overview .row{min-height:auto!important;padding-top:70px;padding-bottom:40px}.display-3{font-size:2.5rem}.display-5{font-size:2rem}.py-5{padding-top:3rem!important;padding-bottom:3rem!important}.navbar-collapse{background:rgba(5,7,13,.98);border-radius:16px;padding:12px;margin-top:12px}.zen-chat-panel{width:calc(100vw - 30px)!important}}
@media(max-width:575px){body{font-size:15px}.display-3{font-size:2rem}.display-5{font-size:1.65rem}.hero{padding-top:90px}.hero .min-vh-100{min-height:auto!important}.btn{width:100%;margin-bottom:.35rem}.d-flex.gap-3{gap:.5rem!important}.page-hero,.compact-hero{padding-top:100px!important;padding-bottom:45px!important}.service-card,.portfolio-card,.glass{padding:1.25rem!important}.footer{text-align:center}.footer-bottom-links{justify-content:center}.zen-chatbot{right:12px!important;bottom:12px!important}.zen-chat-toggle{width:56px!important;height:56px!important}}


/* Zenithora transparent logo and fixed-nav responsive spacing overrides */
.hero-image-wrapper,
.about-image-wrapper,
.about-logo-stage{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    padding:0!important;
}
.zenithora-transparent-logo{
    max-width:430px!important;
    height:auto!important;
    object-fit:contain!important;
}
.page-header,.page-hero,.compact-hero{
    padding-top:clamp(82px,9vw,112px)!important;
    padding-bottom:clamp(32px,5vw,54px)!important;
}
.hero{
    padding-top:clamp(86px,8vw,105px)!important;
}
@media(max-width:991.98px){
    .hero .zenithora-transparent-logo{width:clamp(210px,54vw,340px)!important;margin-top:1.5rem}
    .about-section .zenithora-transparent-logo,.about-logo-stage .zenithora-transparent-logo{width:clamp(200px,58vw,320px)!important}
    .page-header,.page-hero,.compact-hero{padding-top:88px!important;padding-bottom:38px!important}
}
@media(max-width:575.98px){
    .hero{padding-top:82px!important;padding-bottom:30px!important}
    .hero .zenithora-transparent-logo{width:min(72vw,245px)!important;margin-top:1rem}
    .about-section .zenithora-transparent-logo,.about-logo-stage .zenithora-transparent-logo{width:min(74vw,250px)!important}
    .page-header,.page-hero,.compact-hero{padding-top:78px!important;padding-bottom:30px!important}
}

/* ZENITHORA INNER PAGE NAVBAR OFFSET FIX */
:root {
    --zen-navbar-height: 78px;
    --zen-page-top-gap: 26px;
}
body { scroll-padding-top: calc(var(--zen-navbar-height) + 24px); }
#main-content, main#main-content { position: relative; }
body:not(.home-page) #main-content > section:first-child,
body:not(.home-page) main > section:first-child,
.inner-page-hero,.page-hero,.page-header,.page-banner,.subpage-hero,
.service-hero,.services-hero,.portfolio-hero,.project-hero,.blog-hero,
.article-hero,.downloads-hero,.contact-hero,.quote-hero,.quotation-hero,
.proposal-hero,.industries-hero,.gallery-hero,.faq-hero,.careers-hero,
.search-hero,.about-hero {
    padding-top: calc(var(--zen-navbar-height) + var(--zen-page-top-gap)) !important;
    min-height: auto;
}
.inner-page-hero h1,.page-hero h1,.page-header h1,.page-banner h1,.subpage-hero h1,
.service-hero h1,.services-hero h1,.portfolio-hero h1,.project-hero h1,.blog-hero h1,
.article-hero h1,.downloads-hero h1,.contact-hero h1,.quote-hero h1,.quotation-hero h1,
.proposal-hero h1,.industries-hero h1,.gallery-hero h1,.faq-hero h1,.careers-hero h1,
.search-hero h1,.about-hero h1 {
    margin-top: 0 !important;
    position: relative;
    z-index: 2;
}
section[id],[id].section,[id].content-section {
    scroll-margin-top: calc(var(--zen-navbar-height) + 22px);
}
@media (max-width: 991.98px) {
    :root { --zen-navbar-height: 74px; --zen-page-top-gap: 30px; }
    .navbar,#mainNav,.glass-nav { min-height: 68px; }
    body:not(.home-page) #main-content > section:first-child,
    body:not(.home-page) main > section:first-child,
    .inner-page-hero,.page-hero,.page-header,.page-banner,.subpage-hero,
    .service-hero,.services-hero,.portfolio-hero,.project-hero,.blog-hero,
    .article-hero,.downloads-hero,.contact-hero,.quote-hero,.quotation-hero,
    .proposal-hero,.industries-hero,.gallery-hero,.faq-hero,.careers-hero,
    .search-hero,.about-hero {
        padding-top: calc(var(--zen-navbar-height) + var(--zen-page-top-gap)) !important;
        padding-bottom: 42px !important;
    }
}
@media (max-width: 575.98px) {
    :root { --zen-navbar-height: 68px; --zen-page-top-gap: 24px; }
    .navbar,#mainNav,.glass-nav {
        min-height: 62px;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    .navbar-brand img { max-height: 38px !important; width: auto !important; }
    body:not(.home-page) #main-content > section:first-child,
    body:not(.home-page) main > section:first-child,
    .inner-page-hero,.page-hero,.page-header,.page-banner,.subpage-hero,
    .service-hero,.services-hero,.portfolio-hero,.project-hero,.blog-hero,
    .article-hero,.downloads-hero,.contact-hero,.quote-hero,.quotation-hero,
    .proposal-hero,.industries-hero,.gallery-hero,.faq-hero,.careers-hero,
    .search-hero,.about-hero {
        padding-top: calc(var(--zen-navbar-height) + var(--zen-page-top-gap)) !important;
        padding-bottom: 34px !important;
    }
    .inner-page-hero h1,.page-hero h1,.page-header h1,.page-banner h1,.subpage-hero h1 {
        line-height: 1.15 !important;
        margin-bottom: 12px !important;
    }
}
@media (max-width: 380px) {
    :root { --zen-navbar-height: 64px; --zen-page-top-gap: 20px; }
}

