/* ==========================================================================
   OCEANUS COASTAL - MASTER RESPONSIVE & MOBILE-FRIENDLY SYSTEM
   Universal typography, responsive breakpoints, mobile navigation,
   CTA section & Footer optimization across all devices.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL TYPOGRAPHY & SMOOTH RENDERING
   -------------------------------------------------------------------------- */
:root {
    --oceanus-primary: #045175;
    --oceanus-navy: #082365;
    --oceanus-blue: #0099ff;
    --oceanus-blue-hover: #007acc;
    --oceanus-cyan: #38bdf8;
    --oceanus-dark: #1e293b;
    --oceanus-body: #334155;
    --oceanus-muted: #64748b;
    --oceanus-light-bg: #f8fafc;
    --oceanus-border: #e2e8f0;
}

html, body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
    color: var(--oceanus-body) !important;
    overflow-x: hidden !important;
    width: 100% !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Ensure no element causes horizontal scroll on mobile */
*, *::before, *::after {
    box-sizing: border-box !important;
}

img {
    max-width: 100% !important;
    height: auto !important;
}

/* --------------------------------------------------------------------------
   2. HEADER & MOBILE NAVIGATION
   -------------------------------------------------------------------------- */
.elementor-202,
.elementor-location-header {
    width: 100% !important;
    z-index: 9999 !important;
    position: relative !important;
    background: #ffffff !important;
}

.ekit-wid-con .elementskit-navbar-nav > li > a {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: 0.15px !important;
    color: #1e293b !important;
    transition: color 0.25s ease !important;
}

.ekit-wid-con .elementskit-navbar-nav > li > a:hover,
.ekit-wid-con .elementskit-navbar-nav > li.active > a {
    color: var(--oceanus-primary) !important;
}

.ekit-wid-con .elementskit-navbar-nav .elementskit-submenu-panel > li > a {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    padding: 10px 20px !important;
}

.ekit-wid-con .elementskit-navbar-nav .elementskit-submenu-panel > li > a:hover {
    color: var(--oceanus-primary) !important;
    background: #f1f5f9 !important;
}

/* Inquiry button in header */
.elementor-202 a.elementor-button,
.elementor-location-header a.elementor-button {
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    border-radius: 50px !important;
    padding: 10px 24px !important;
    background-color: var(--oceanus-primary) !important;
    color: #ffffff !important;
    transition: all 0.3s ease !important;
}

.elementor-202 a.elementor-button:hover,
.elementor-location-header a.elementor-button:hover {
    background-color: var(--oceanus-navy) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(4, 81, 117, 0.3) !important;
}

/* --------------------------------------------------------------------------
   3. UNIVERSAL CTA SECTION ("Ready to Build the Future With Us?")
   Matches on every single page regardless of dynamic Elementor IDs
   -------------------------------------------------------------------------- */
.oceanus-cta-section {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
    min-height: 380px !important;
}

.oceanus-cta-center {
    background-color: var(--oceanus-navy) !important;
    background-image: radial-gradient(circle at 50% 50%, #0d2f7d 0%, #082365 100%) !important;
    padding: 60px 40px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    flex: 2 1 50% !important;
    min-width: 320px !important;
    box-sizing: border-box !important;
}

.oceanus-cta-center .elementor-widget-icon-box,
.oceanus-cta-center .elementor-element-a77b232,
.oceanus-cta-center .elementor-widget-container,
.oceanus-cta-content {
    max-width: 680px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

/* Rocket Icon & CTA Box Wrapper */
.elementor-icon-box-wrapper.oceanus-cta-icon {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 680px !important;
    margin: 0 auto !important;
}

.oceanus-cta-icon .elementor-icon-box-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    background: rgba(56, 189, 248, 0.12) !important;
    color: var(--oceanus-cyan) !important;
    font-size: 30px !important;
    margin-bottom: 20px !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.2) !important;
    flex-shrink: 0 !important;
}

.oceanus-cta-icon .elementor-icon-box-content {
    width: 100% !important;
    text-align: center !important;
}

.oceanus-cta-icon i,
.oceanus-cta-icon svg {
    color: var(--oceanus-cyan) !important;
    fill: var(--oceanus-cyan) !important;
    font-size: 28px !important;
}

/* Title */
.oceanus-cta-title {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: clamp(26px, 3.5vw, 36px) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: #ffffff !important;
    letter-spacing: -0.3px !important;
    margin: 0 0 14px 0 !important;
    text-align: center !important;
}

/* Description */
.oceanus-cta-desc {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: clamp(15px, 1.8vw, 17px) !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    color: #e2e8f0 !important;
    max-width: 580px !important;
    margin: 0 auto 24px auto !important;
    text-align: center !important;
}

/* Button */
.oceanus-cta-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background-color: var(--oceanus-blue) !important;
    color: #ffffff !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: capitalize !important;
    padding: 13px 34px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 18px rgba(0, 153, 255, 0.35) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.oceanus-cta-btn:hover {
    background-color: var(--oceanus-blue-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 153, 255, 0.5) !important;
    color: #ffffff !important;
}

/* Side flanking images in CTA */
.oceanus-cta-side-img {
    flex: 1 1 25% !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    min-height: 320px !important;
}

/* --------------------------------------------------------------------------
   4. UNIVERSAL FOOTER SECTION (.elementor-326)
   -------------------------------------------------------------------------- */
.elementor-326,
.elementor-location-footer {
    background-color: #fbfcfd !important;
    border-top: 1px solid #eef2f6 !important;
    font-family: 'DM Sans', sans-serif !important;
    color: #334155 !important;
    width: 100% !important;
    padding-top: 50px !important;
}

/* Columns layout */
.elementor-326 .elementor-element-6cbd89b {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 30px !important;
}

/* Column 1 (Logo & Intro) */
.elementor-326 .elementor-element-77b3959 {
    flex: 1 1 30% !important;
    max-width: 340px !important;
}

.elementor-326 .elementor-element-77b3959 img {
    max-width: 180px !important;
    height: auto !important;
    display: block !important;
}

.elementor-326 .elementor-element-77b3959 p,
.elementor-326 .elementor-element-542ac17d p {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 14.5px !important;
    line-height: 1.75 !important;
    color: #64748b !important;
    margin-top: 16px !important;
}

/* Column Headings */
.elementor-326 h3,
.elementor-326 .elementor-heading-title {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--oceanus-navy) !important;
    letter-spacing: -0.2px !important;
    margin-bottom: 20px !important;
    position: relative !important;
}

/* Column 2 & 3: Lists (Quick Links & Expertise) */
.elementor-326 .elementor-element-78cf90e2,
.elementor-326 .elementor-element-6302e9b1 {
    flex: 1 1 20% !important;
}

.elementor-326 .elementor-icon-list-item,
.elementor-326 .elementor-icon-list-item a,
.elementor-326 .elementor-icon-list-text {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 14.5px !important;
    color: #334155 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.elementor-326 .elementor-icon-list-item:not(:last-child) {
    padding-bottom: 10px !important;
}

.elementor-326 .elementor-icon-list-icon i,
.elementor-326 .elementor-icon-list-icon svg {
    color: var(--oceanus-primary) !important;
    fill: var(--oceanus-primary) !important;
    font-size: 11px !important;
    margin-right: 8px !important;
}

.elementor-326 .elementor-icon-list-item a:hover,
.elementor-326 .elementor-icon-list-item:hover .elementor-icon-list-text {
    color: var(--oceanus-primary) !important;
    transform: translateX(4px) !important;
}

/* Column 4: Contact Us */
.elementor-326 .elementor-element-6399dc46 {
    flex: 1 1 28% !important;
}

.elementor-326 .elementor-element-6399dc46 .elementor-icon-list-item,
.elementor-326 .elementor-element-6399dc46 .elementor-icon-list-text,
.elementor-326 .elementor-element-6399dc46 .elementor-icon-list-item a {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 14px !important;
    color: #475569 !important;
    line-height: 1.65 !important;
}

.elementor-326 .elementor-element-6399dc46 a[href^="mailto:"] {
    color: var(--oceanus-primary) !important;
    font-weight: 500 !important;
}

/* Bottom Bar: Copyright */
.elementor-326 .elementor-element-30036d6e {
    border-top: 1px solid var(--oceanus-border) !important;
    margin-top: 40px !important;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
}

.elementor-326 .elementor-element-6f817e12,
.elementor-326 .elementor-element-6f817e12 p {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 13.5px !important;
    color: var(--oceanus-muted) !important;
    margin: 0 !important;
}

.elementor-326 .elementor-element-6f817e12 a {
    color: var(--oceanus-primary) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.elementor-326 .elementor-element-23d79384 .elementor-icon-list-item,
.elementor-326 .elementor-element-23d79384 .elementor-icon-list-item a,
.elementor-326 .elementor-element-23d79384 .elementor-icon-list-text {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 13.5px !important;
    color: var(--oceanus-muted) !important;
    text-decoration: none !important;
}

.elementor-326 .elementor-element-23d79384 .elementor-icon-list-item a:hover {
    color: var(--oceanus-primary) !important;
}

/* --------------------------------------------------------------------------
   5. MOBILE & TABLET RESPONSIVE ADAPTATIONS
   Maximum optimization for mobile screens (320px - 768px - 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    /* Header on tablet/mobile */
    .ekit-menu-toggler,
    .elementskit-menu-toggler {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Mobile & Tablet Menu Drawer - Hidden by default, toggled via .active */
    .elementskit-menu-container {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 85% !important;
        max-width: 320px !important;
        height: 100vh !important;
        background: #ffffff !important;
        z-index: 999999 !important;
        box-shadow: 0 0 40px rgba(0,0,0,0.3) !important;
        overflow-y: auto !important;
        padding: 25px 20px !important;
        transform: translateX(-105%) !important;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease !important;
        visibility: hidden !important;
        display: block !important;
    }

    .elementskit-menu-container.active {
        transform: translateX(0) !important;
        visibility: visible !important;
    }

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

    .elementskit-menu-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
    }

    /* Mobile Drawer Identity Panel & Close Button */
    .elementskit-menu-container .elementskit-nav-identity-panel {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-bottom: 20px !important;
        margin-bottom: 20px !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }

    .elementskit-menu-container .elementskit-nav-identity-panel .elementskit-nav-logo img {
        max-width: 140px !important;
        height: auto !important;
        display: block !important;
    }

    .elementskit-menu-close {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        background: #f1f5f9 !important;
        border: none !important;
        border-radius: 50% !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #334155 !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }

    .elementskit-menu-close:hover {
        background: #e2e8f0 !important;
        color: #0f172a !important;
    }

    .elementskit-menu-container .elementskit-navbar-nav {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .elementskit-menu-container .elementskit-navbar-nav > li {
        width: 100% !important;
        border-bottom: 1px solid #f8fafc !important;
    }

    .elementskit-menu-container .elementskit-navbar-nav > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 10px 4px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #1e293b !important;
    }

    /* CTA Section on tablet & mobile */
    .oceanus-cta-section {
        flex-direction: column !important;
    }

    .oceanus-cta-side-img {
        display: none !important; /* Hide side container images on mobile to keep focus on CTA */
    }

    .oceanus-cta-center {
        width: 100% !important;
        padding: 50px 24px !important;
    }

    /* Footer columns on tablet */
    .elementor-326 .elementor-element-6cbd89b {
        flex-wrap: wrap !important;
    }

    .elementor-326 .elementor-element-77b3959,
    .elementor-326 .elementor-element-6399dc46 {
        flex: 1 1 45% !important;
        max-width: 100% !important;
    }

    .elementor-326 .elementor-element-78cf90e2,
    .elementor-326 .elementor-element-6302e9b1 {
        flex: 1 1 45% !important;
    }
}

@media (max-width: 767px) {
    /* Mobile General Typography Scaling */
    h1, .ekit-heading--title.elementskit-section-title {
        font-size: clamp(26px, 7vw, 34px) !important;
        line-height: 1.25 !important;
    }

    h2, h2.elementor-heading-title {
        font-size: clamp(22px, 6vw, 28px) !important;
        line-height: 1.3 !important;
    }

    h3, h3.elementor-heading-title {
        font-size: clamp(19px, 5vw, 24px) !important;
    }

    p, .elementor-text-editor {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    /* Mobile Containers: prevent clipping & horizontal scroll */
    .e-con, .e-con-boxed, .e-con-full {
        padding-left: 16px !important;
        padding-right: 16px !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* Mobile Menu Drawer - Hidden by default, toggled via .active */
    .elementskit-menu-container {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 85% !important;
        max-width: 320px !important;
        height: 100vh !important;
        background: #ffffff !important;
        z-index: 999999 !important;
        box-shadow: 0 0 40px rgba(0,0,0,0.3) !important;
        overflow-y: auto !important;
        padding: 25px 20px !important;
        transform: translateX(-105%) !important;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease !important;
        visibility: hidden !important;
        display: block !important;
    }

    .elementskit-menu-container.active {
        transform: translateX(0) !important;
        visibility: visible !important;
    }

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

    .elementskit-menu-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
    }

    /* Mobile CTA Section */
    .oceanus-cta-center {
        padding: 40px 18px !important;
    }

    .oceanus-cta-title {
        font-size: 24px !important;
    }

    .oceanus-cta-desc {
        font-size: 14.5px !important;
        margin-bottom: 20px !important;
    }

    .oceanus-cta-btn {
        width: 100% !important;
        max-width: 280px !important;
        padding: 12px 24px !important;
    }

    /* Mobile Footer: clean 1-column stack */
    .elementor-326 .elementor-element-6cbd89b {
        flex-direction: column !important;
        gap: 35px !important;
    }

    .elementor-326 .elementor-element-77b3959,
    .elementor-326 .elementor-element-78cf90e2,
    .elementor-326 .elementor-element-6302e9b1,
    .elementor-326 .elementor-element-6399dc46 {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .elementor-326 .elementor-element-30036d6e {
        flex-direction: column !important;
        text-align: center !important;
        gap: 12px !important;
    }

    /* Mobile Touch Targets */
    .elementor-icon-list-item a,
    .ekit-menu-nav-link {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
}