/* Responsive Overrides for Inline Styles */

@media (max-width: 991px) {
    /* Main Hero and Content Layouts */
    .hero-2__content > div,
    .about-area-inner > div {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 20px !important;
    }

    /* Force inner columns to take full width */
    .hero-2__content > div > div {
        max-width: 100% !important;
        width: 100% !important;
        padding-top: 0 !important;
    }

    /* Move hero video portion before hero content on mobile */
    .hero-2__video {
        order: -1 !important;
    }

    /* Workshop Image and other rounded images */
    .workshop-img-box {
        margin: 0 auto !important;
        margin-top: 20px !important;
        text-align: center;
    }
    .workshop-img-box img {
        width: 200px !important;
        height: 200px !important;
    }

    /* Subtitle (Address text) */
    .sub-title, .sub-title a {
        text-align: center !important;
    }

    /* Hero CTAs */
    .hero-ctas {
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
    }
    
    .hero-ctas .rr-btn {
        width: 100% !important;
        text-align: center !important;
    }

    /* Section Titles */
    h1.section-title,
    h2.section-title {
        font-size: 32px !important;
        line-height: 1.3 !important;
    }
    
    .advantage-heading {
        font-size: 28px !important;
    }

    /* Footer / Copyright */
    .copyright-area-inner {
        flex-direction: column !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 10px !important;
    }
    .copyright-text {
        text-align: center !important;
    }

    /* Offset Widget Follow Us */
    .offset-widget-box ul.ls-none {
        justify-content: center !important;
    }

    /* Hide custom cursor on touch devices */
    .custom-cursor,
    .cursor-wrapper,
    .cb-cursor {
        display: none !important;
    }

    /* Disable GSAP ScrollSmoother on mobile to fix scroll locking */
    #smooth-wrapper, #smooth-content {
        position: static !important;
        overflow: visible !important;
        height: auto !important;
        transform: none !important;
    }
    body, html {
        overflow-y: auto !important;
        height: auto !important;
    }
}

/* ==========================================================================
   PAPERBG.JPG BACKGROUND & FIXED LAYOUT OVERRIDES
   ========================================================================== */

/* ==========================================================================
   FORCE WHITE BACKGROUND FOR ALL BODY CONTENT & SECTIONS
   ========================================================================== */

html,
body,
body.body-wrapper,
body.body-startup-agency,
#has_smooth,
#smooth-wrapper,
#smooth-content,
main,
.main-content,
.hero-2-area,
.hero-area,
.about-area,
.about-2-area,
.service-area,
.service-2-area,
.workshops-area,
.portfolio-area,
.testimonial-area,
.brand-area,
.blog-area,
.cta-area,
.page-header,
.section-wrapper,
.fullwidth-hero-container,
.hero-2__content,
.hero-2__video,
.about-area-inner,
.copyright-area {
    background-color: #ffffff !important;
    background-image: none !important;
    background: #ffffff !important;
}

/* 1. Fixed Topbar with paperbg.jpg Background */
header.header-area-2,
.header-area-2,
.header-main {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    background-image: url('../img/paperbg.jpg') !important;
    background-repeat: repeat !important;
    background-size: cover !important;
    background-position: center !important;
    background-color: #f7f3ed !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.12) !important;
    transition: all 0.3s ease !important;
}

.header-area-2__inner,
.header-main .container {
    background: transparent !important;
}

/* Top margin padding for body content so fixed topbar does not obscure content */
body.body-wrapper {
    padding-top: 90px !important;
}

.hero-2-area {
    padding-top: 30px !important;
}

/* 2. Fixed Off-Canvas Sidebar Drawer (.side-info) with paperbg.jpg Background */
aside.fix {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 999999 !important;
}

.side-info {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 380px !important;
    max-width: 88vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    background-image: url('../img/paperbg.jpg') !important;
    background-repeat: repeat !important;
    background-size: cover !important;
    background-position: center !important;
    background-color: #f7f3ed !important;
    z-index: 999999 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.25) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(105%) !important;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s ease, visibility 0.4s !important;
    padding: 30px 25px !important;
}

.side-info-content,
.offset-widget,
.offset-widget-box {
    background: transparent !important;
}

.side-info.info-open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
}

/* Hide stray dots, cursors or pseudo bullets outside sidebar */
.side-info .custom-cursor,
.side-info .cursor-wrapper,
.side-info ul::before,
.side-info li::before {
    display: none !important;
}

/* Offset Header & Logo Inside Sidebar */
.side-info .offset-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 25px !important;
    padding-bottom: 15px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    width: 100% !important;
}

.side-info .offset-logo a {
    text-decoration: none !important;
    border: none !important;
    display: block !important;
}

.side-info .offset-logo img {
    max-width: 170px !important;
    height: auto !important;
    display: block !important;
}

.side-info .side-info-close {
    background: var(--magenta, #e6007e) !important;
    color: #ffffff !important;
    border: none !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.side-info .side-info-close:hover {
    background: var(--orange, #f15a24) !important;
    transform: rotate(90deg) !important;
}

/* Section Titles inside Sidebar */
.side-info .offset-widget-box .title {
    font-family: 'Baloo 2', 'Montserrat', sans-serif !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--magenta, #e6007e) !important;
    margin-bottom: 15px !important;
    margin-top: 20px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    display: block !important;
    text-align: left !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Courses List Alignment inside Sidebar */
.side-info .contact-meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
    width: 100% !important;
}

.side-info .contact-item {
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
}

.side-info .contact-item span.text {
    display: block !important;
    width: 100% !important;
}

.side-info .contact-item a {
    display: block !important;
    font-family: 'Montserrat-VariableFont_wght', 'Montserrat', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--dark-blue, #1b365d) !important;
    text-decoration: none !important;
    padding: 9px 15px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.75) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    transition: all 0.25s ease !important;
}

.side-info .contact-item a:hover {
    background: var(--magenta, #e6007e) !important;
    color: #ffffff !important;
    padding-left: 22px !important;
    transform: translateX(3px) !important;
    border-color: var(--magenta, #e6007e) !important;
}

.offcanvas-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999998 !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s !important;
}

.offcanvas-overlay.overlay-open {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 3. Fixed Left Sidebar (for pages with left main-header) with paperbg.jpg Background */
.main-header {
    background-image: url('../img/paperbg.jpg') !important;
    background-repeat: repeat !important;
    background-size: cover !important;
    background-position: center !important;
    background-color: #f7f3ed !important;
}

@media (min-width: 992px) {
    .main-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 280px !important;
        height: 100vh !important;
        z-index: 1000 !important;
        overflow-y: auto !important;
        border-right: 4px solid var(--magenta, #e6007e) !important;
    }
    .main-content {
        margin-left: 280px !important;
    }
}

@media (max-width: 991px) {
    header.header-area-2 .header-area-2__inner {
        padding: 10px 0 !important;
    }

    .main-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 280px !important;
        height: 100vh !important;
        z-index: 10005 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease-in-out !important;
        box-shadow: 5px 0 25px rgba(0,0,0,0.2) !important;
    }

    .main-header.active {
        transform: translateX(0) !important;
    }

    .main-content {
        margin-left: 0 !important;
        padding-top: 70px !important;
    }
}

/* Remove horizontal line above address and vertical divider lines in hero */
.hero-2-inner::after,
.hero-2-inner::before,
.hero-2-area::after,
.hero-2-area::before {
    display: none !important;
    content: none !important;
    height: 0 !important;
    width: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* ==========================================================================
   ENHANCED MOBILE HEADER & SIDEBAR DRAWER (< 992px)
   ========================================================================== */
@media (min-width: 992px) {
    .mobile-top-bar,
    .mobile-drawer-backdrop,
    .mobile-drawer-panel {
        display: none !important;
    }
}

@media (max-width: 991px) {
    :root {
        --fixed-sidebar-width: 0px !important;
    }

    /* Hide desktop sidebar panel and desktop top bar on mobile */
    .fixed-left-panel,
    .top-right-bar,
    .content-dots-framing {
        display: none !important;
    }

    /* Prevent horizontal page overflow */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        position: relative !important;
    }

    /* Sticky Mobile Top Header Bar */
    .mobile-top-bar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 66px !important;
        z-index: 99990 !important;
        background-image: url('../img/paperbg.jpg') !important;
        background-repeat: repeat !important;
        background-size: cover !important;
        background-position: center !important;
        background-color: #f7f3ed !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
        border-bottom: 2px solid rgba(230, 0, 126, 0.2) !important;
    }

    .mobile-top-bar .mobile-logo {
        display: flex !important;
        align-items: center !important;
        text-decoration: none !important;
    }

    .mobile-top-bar .mobile-logo img {
        height: 42px !important;
        width: auto !important;
        display: block !important;
    }

    .mobile-top-bar .mobile-logo-text {
        font-family: 'Baloo 2', 'Montserrat', sans-serif !important;
        font-size: 20px !important;
        font-weight: 800 !important;
        color: #e6007e !important;
        line-height: 1.1 !important;
    }

    /* Mobile Hamburger Menu Button */
    .mobile-nav-toggle-btn {
        background: #e6007e !important;
        color: #ffffff !important;
        border: none !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 20px !important;
        cursor: pointer !important;
        box-shadow: 0 4px 12px rgba(230, 0, 126, 0.35) !important;
        transition: transform 0.2s ease, background-color 0.2s ease !important;
    }

    .mobile-nav-toggle-btn:active {
        transform: scale(0.95) !important;
        background: #ef5323 !important;
    }

    /* Slide-out Drawer Panel Backdrop */
    .mobile-drawer-backdrop {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 99998 !important;
        background: rgba(0, 0, 0, 0.55) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.3s ease, visibility 0.3s ease !important;
    }

    .mobile-drawer-backdrop.active {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Off-Canvas Slide-out Drawer */
    .mobile-drawer-panel {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        width: 320px !important;
        max-width: 86vw !important;
        height: 100vh !important;
        z-index: 99999 !important;
        background-image: url('../img/paperbg.jpg') !important;
        background-repeat: repeat !important;
        background-size: cover !important;
        background-position: center !important;
        background-color: #f7f3ed !important;
        box-shadow: -5px 0 30px rgba(0, 0, 0, 0.25) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        transform: translateX(105%) !important;
        transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
        padding: 24px 20px !important;
        box-sizing: border-box !important;
    }

    .mobile-drawer-panel.active {
        transform: translateX(0) !important;
    }

    /* Drawer Header */
    .mobile-drawer-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-bottom: 16px !important;
        margin-bottom: 16px !important;
        border-bottom: 2px solid rgba(230, 0, 126, 0.15) !important;
    }

    .mobile-drawer-header img {
        max-width: 140px !important;
        height: auto !important;
    }

    .mobile-drawer-close-btn {
        background: #ef5323 !important;
        color: #ffffff !important;
        border: none !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
        cursor: pointer !important;
        transition: transform 0.2s ease !important;
    }

    .mobile-drawer-close-btn:hover {
        transform: rotate(90deg) !important;
    }

    /* Drawer Menu Links */
    .mobile-drawer-section-title {
        font-family: 'Baloo 2', 'Montserrat', sans-serif !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        color: #ef5323 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.8px !important;
        margin: 16px 0 8px 0 !important;
    }

    .mobile-drawer-nav-list {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    .mobile-drawer-nav-list a {
        display: block !important;
        font-family: 'Montserrat', sans-serif !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #1b365d !important;
        text-decoration: none !important;
        padding: 10px 14px !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, 0.8) !important;
        border: 1px solid rgba(0, 0, 0, 0.05) !important;
        transition: all 0.2s ease !important;
    }

    .mobile-drawer-nav-list a.active,
    .mobile-drawer-nav-list a:hover {
        background: #e6007e !important;
        color: #ffffff !important;
        transform: translateX(4px) !important;
        border-color: #e6007e !important;
    }

    /* Course Links Badges Grid inside Drawer */
    .mobile-drawer-courses-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        margin-top: 5px !important;
    }

    .mobile-drawer-courses-grid a {
        display: block !important;
        text-align: center !important;
        font-family: 'Montserrat', sans-serif !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #e6007e !important;
        background: rgba(255, 255, 255, 0.9) !important;
        padding: 8px 10px !important;
        border-radius: 8px !important;
        border: 1px solid rgba(230, 0, 126, 0.2) !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
    }

    .mobile-drawer-courses-grid a.active,
    .mobile-drawer-courses-grid a:hover {
        background: #e6007e !important;
        color: #ffffff !important;
    }

    /* Drawer Footer CTA */
    .mobile-drawer-cta {
        margin-top: auto !important;
        padding-top: 20px !important;
    }

    .mobile-drawer-cta-btn {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        background: linear-gradient(135deg, #e6007e 0%, #ef5323 100%) !important;
        color: #ffffff !important;
        font-family: 'Montserrat', sans-serif !important;
        font-weight: 800 !important;
        font-size: 15px !important;
        padding: 12px 18px !important;
        border-radius: 30px !important;
        text-decoration: none !important;
        box-shadow: 0 4px 15px rgba(230, 0, 126, 0.3) !important;
    }

    /* Main Content Wrapper Adjustment for Mobile Header */
    .main-right-wrapper {
        margin-left: 0 !important;
        padding-top: 74px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Page section paddings & title responsive scaling */
    .main-right-wrapper .page-section,
    .main-right-wrapper section,
    .open-up-centered-section,
    .page-section {
        width: 100% !important;
        max-width: 100% !important;
        padding: 24px 16px !important;
        box-sizing: border-box !important;
    }

    .script-title,
    h1.script-title,
    h2.script-title {
        font-size: 38px !important;
        line-height: 1.2 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    .section-p-text,
    p {
        font-size: 15px !important;
        line-height: 1.65 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .section-p-text {
        font-size: 16px !important;
        text-align: center !important;
        margin: 0 auto 25px auto !important;
    }

    /* Responsive Form & Controls */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    select,
    textarea {
        font-size: 16px !important; /* Prevents auto-zoom on mobile iOS */
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Responsive Grid Adjustments */
    .program-cards-grid,
    .choose-us__warpper {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        width: 100% !important;
    }

    /* Footer Responsive Adjustments */
    footer,
    .main-footer {
        padding: 35px 16px 20px 16px !important;
        box-sizing: border-box !important;
    }

    footer > div:first-child,
    .footer-content {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
        text-align: center !important;
    }
}

/* Footer Brand Heading Formatting (Prevents text wrapping "Hub" to 2nd line) */
footer h3,
.footer-section h3,
.main-footer h3 {
    font-family: 'Caveat', cursive !important;
    font-size: clamp(22px, 5vw, 32px) !important;
    color: var(--brand-magenta, #e6007e) !important;
    white-space: nowrap !important;
    margin: 0 0 10px 0 !important;
    display: inline-block !important;
    max-width: 100% !important;
}