/*
Theme Name: Cellcommnext Custom Theme
Theme URI: https://www.cellcommnext.com/
Description: Standalone pixel-perfect theme migrated from custom static PHP site.
Template: oceanwp
Version: 1.6.0
Author: Sujeet Developer 7255997002
Author URI: https://github.com/google/antigravity
Text Domain: cellcommnext-theme
*/

/* Load parent OceanWP style */
@import url("../../themes/oceanwp/style.css");

/* Lock horizontal scroll to prevent off-screen sliders and mobile overflow glitches */
html, body, #outer-wrap, #wrap {
    overflow-x: hidden !important;
    width: 100% !important;
}

/* ═══════════════════════════════════════════════════════════
   1. Fix Bootstrap .col conflict with OceanWP grid entries
   ═══════════════════════════════════════════════════════════ */
.entries.oceanwp-row .blog-entry.col,
.oceanwp-row .related-post.col {
    flex: none !important;
    max-width: none !important;
}

/* ═══════════════════════════════════════════════════════════
   2. Fix main content overlap from fixed pill header
      32px marquee + 40px gap + 74px header + 20px breathing = 166px
      Using 155px desktop, 135px mobile as safe clearance.
   ═══════════════════════════════════════════════════════════ */
body:not(.home) #main.main-inner {
    margin-top: 155px !important;
}
@media (max-width: 991px) {
    body:not(.home) #main.main-inner {
        margin-top: 135px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   2b. Fix overflow:hidden on OceanWP wrappers that breaks
       position:sticky on new pages
       OceanWP uses .clr (clearfix) which sets overflow:hidden
   ═══════════════════════════════════════════════════════════ */
#content-wrap,
#primary,
#content,
.content-area,
#content-wrap.clr,
#primary.clr,
#content.clr {
    overflow: visible !important;
}

/* ═══════════════════════════════════════════════════════════
   3. Headings inside dark/coloured banners — force white
   ═══════════════════════════════════════════════════════════ */
.text-white h1, .text-white h2, .text-white h3,
.text-white h4, .text-white h5, .text-white h6,
#main .text-white h1, #main .text-white h2, #main .text-white h3,
#main .text-white h4, #main .text-white h5, #main .text-white h6 {
    color: #ffffff !important;
}

/* Force white color on paragraphs, list items, and spans inside white banners */
.text-white, .text-white p, .text-white span, .text-white li,
#main .text-white p, #main .text-white span, #main .text-white li,
p.text-white, span.text-white {
    color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════
   4. OLD static pages — sticky right image (section-header2)
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    .section-header2 .col-sm-4.my-auto {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        align-self: stretch !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   5. Footer colour restoration
   ═══════════════════════════════════════════════════════════ */
#footer, #footer p,
#footer .footer-top .footer-info p,
#footer .footer-top .footer-links ul li a,
#footer .copyright, #footer .copyright a {
    color: #eeeeee !important;
}
#footer .footer-top h4 { color: #ffffff !important; }
#footer .footer-top .footer-links ul a:hover,
#footer .copyright a:hover { color: #f68a1e !important; }
#footer .social-icons li a {
    border-color: #ffffff !important;
    color: #ffffff !important;
}
#footer .social-icons li a i { color: #ffffff !important; }
#footer .social-icons li a:hover {
    background-color: #f68a1e !important;
    border-color: #f68a1e !important;
}
#footer .footer-bottom a { color: #61b3e4 !important; }
#footer .footer-bottom a:hover { color: #f68a1e !important; }

/* ═══════════════════════════════════════════════════════════
   6. HERO PAGE BANNER  — top of every page
      Featured Image as full-width background + page title
   ═══════════════════════════════════════════════════════════ */
.ccn-page-banner {
    width: 100%;
    min-height: 420px;                  /* Majestic height for full container background image banner */
    background-color: #0c0f1d;          /* fallback if no featured image */
    background-size: 100% 100% !important; /* Stretches the image to completely cover width and height, leaving no gaps */
    background-position: center;        /* Centered display */
    background-repeat: no-repeat;
    position: relative;
    display: flex;
}

.ccn-banner-overlay {
    width: 100%;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;            /* Center text container horizontally */
    background: rgba(12, 15, 30, 0.55); /* Darker premium overlay for beautiful text contrast */
}

/* Banner title — always white, Montserrat, centered with high priority */
#main .ccn-page-banner h1.ccn-banner-title,
#main h1.ccn-banner-title,
.ccn-banner-title {
    color: #ffffff !important;
    font-size: 38px !important;
    font-weight: 800 !important;
    font-family: 'Montserrat', sans-serif !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8), 0 0 5px rgba(0, 0, 0, 0.5) !important;
    margin: 0 !important;
    padding: 24px 0 !important;
    text-align: center !important;
    width: 100% !important;
}

@media (max-width: 767px) {
    .ccn-page-banner  { min-height: 160px; }
    .ccn-banner-overlay { min-height: 160px; }
    #main .ccn-page-banner h1.ccn-banner-title { padding: 14px 0 !important; font-size: 24px !important; }
}

/* ═══════════════════════════════════════════════════════════
   7. CONTENT SECTION — left col text + right col sticky image
   ═══════════════════════════════════════════════════════════ */
.ccn-content-section {
    padding: 52px 0 48px;
    background: #f4f6f9;
}

/* ── Force flexbox on the row so sticky works in Bootstrap 3 ──
   Bootstrap 3 uses floats which breaks position:sticky.
   We override the row inside our section to use flex layout. */
.ccn-content-section > .container > .row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;   /* key: columns only as tall as content */
}

/* Remove Bootstrap 3 floats inside our flex row */
.ccn-content-section > .container > .row > [class*="col-"] {
    float: none;
}

/* Content column — ONLY colour, zero font overrides
   OceanWP theme controls all font-family / font-size / font-weight */
.ccn-content-col h1,
.ccn-content-col h2,
.ccn-content-col h3,
.ccn-content-col h4,
.ccn-content-col h5,
.ccn-content-col h6 { color: #1a1a2e !important; }

.ccn-content-col p  { color: #444444 !important; }

.ccn-content-col ul,
.ccn-content-col ol { color: #444444 !important; padding-left: 22px; }

.ccn-content-col li { color: #444444 !important; }

.ccn-content-col a       { color: #f68a1e !important; }
.ccn-content-col a:hover { color: #c96200 !important; }

/* ── Sticky Featured Image — right column ── */
.ccn-image-col {
    padding-top: 6px;
    /* flex-start already set by parent align-items */
    -ms-flex-item-align: start;
    align-self: flex-start;
}

@media (min-width: 768px) {
    .sticky-image-container {
        position: -webkit-sticky;
        position: sticky;
        /*
         * top = WP admin bar (32px) + OceanWP fixed header (~130px) + 8px gap
         * Prevents image from hiding behind fixed navbar on scroll
         */
        top: 170px;
        z-index: 9;
    }
}

.sticky-image-container img {
    width: 100%;
    display: block;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.13);
}

@media (max-width: 767px) {
    .ccn-content-section { padding: 36px 0 30px; }
    .ccn-image-col { margin-top: 30px; }
}

/* ═══════════════════════════════════════════════════════════
   8. Hide OceanWP's built-in breadcrumb on pages
      (We have our own hero banner with page title above)
   ═══════════════════════════════════════════════════════════ */
.page .oceanwp-breadcrumbs,
.page #breadcrumbs,
.page .woocommerce-breadcrumb,
body.page .page-header .oceanwp-breadcrumbs {
    display: none !important;
}

/* Hide the OceanWP page-header / breadcrumb bar entirely on pages */
body.page .page-header {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   9. "Our Other Services" — Latest pages cards
   ═══════════════════════════════════════════════════════════ */
.ccn-latest-pages {
    padding: 58px 0 70px;
    background: linear-gradient(135deg, #f0f4ff 0%, #fafbff 100%);
    border-top: 3px solid #e0e8ff;
}

.ccn-latest-title {
    text-align: center;
    font-weight: 800 !important;
    color: #1a1a2e !important;
    margin-bottom: 38px;
    position: relative;
}
.ccn-latest-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #f68a1e, #e04a00);
    border-radius: 2px;
    margin: 10px auto 0;
}

.ccn-page-card-wrap {
    margin-bottom: 26px;
    display: flex;
}

.ccn-page-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
    text-decoration: none !important;
    color: inherit !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ccn-page-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.14);
    text-decoration: none !important;
}

.ccn-card-img {
    width: 100%;
    height: 185px;
    overflow: hidden;
    background: #eef0f5;
    flex-shrink: 0;
}
.ccn-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
.ccn-page-card:hover .ccn-card-img img {
    transform: scale(1.06);
}

.ccn-card-body {
    padding: 16px 18px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.ccn-card-body h3 {
    color: #1a1a2e !important;
    margin: 0 0 8px;
    line-height: 1.38;
}
.ccn-card-body p {
    color: #666666 !important;
    flex: 1;
    margin: 0 0 14px;
    line-height: 1.6;
}
.ccn-card-btn {
    display: inline-block;
    font-weight: 700;
    color: #f68a1e !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: auto;
    font-size: 0.82rem;
}

@media (max-width: 767px) {
    .ccn-card-img { height: 155px; }
}

/* ═══════════════════════════════════════════════════════════
   10. Typography Overrides — Keep both old and new pages consistent
       Enforce Montserrat for all headings & Open Sans for body text
       along with standard typographic sizes and weights.
   ═══════════════════════════════════════════════════════════ */

/* Font Family Overrides */
#main h1, #main h2, #main h3, #main h4, #main h5, #main h6,
.entry-title, .ccn-banner-title, .ccn-latest-title, .ccn-page-card h3 {
    font-family: 'Montserrat', sans-serif !important;
}

#main, #main p, #main li, #main td, #main th, #main blockquote,
.ccn-content-section, .ccn-content-col, .ccn-page-card p, .ccn-page-card span {
    font-family: 'Open Sans', sans-serif !important;
}

/* Enforced Typographic Scale & Sizes (Classic consistency across both templates) */
#main h1 {
    font-size: 34px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #111111 !important;
    margin-top: 15px !important;
    margin-bottom: 20px !important;
}

#main h2 {
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: #111111 !important;
    margin-top: 32px !important;
    margin-bottom: 16px !important;
}

#main h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    color: #222222 !important;
    margin-top: 28px !important;
    margin-bottom: 14px !important;
}

#main h4 {
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #333333 !important;
    margin-top: 24px !important;
    margin-bottom: 12px !important;
}

#main h5 {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #333333 !important;
}

#main h6 {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #444444 !important;
}

#main p, #main li, #main td, #main th, #main blockquote,
.ccn-content-section p, .ccn-content-col p {
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    color: #555555 !important;
    margin-bottom: 18px !important;
}

/* ═══════════════════════════════════════════════════════════
   11. Premium Glassmorphic Styles for Forms (Homepage & Standard)
   ═══════════════════════════════════════════════════════════ */
.home-contact,
#contact .form,
.contact-page .form,
.form.form-field {
    background: linear-gradient(135deg, rgba(242, 246, 255, 0.9) 0%, rgba(255, 255, 255, 0.82) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 50px rgba(0, 40, 120, 0.12), 0 10px 20px rgba(0,0,0,0.04) !important;
    padding: 35px 25px !important;
}

/* Glassy form inputs and dropdown select elements */
.home-contact .form-control,
#contact .form .form-control,
.contact-page .form .form-control,
.form.form-field .form-control,
.home-contact input,
.home-contact select,
#contact .form input,
#contact .form select,
.contact-page .form input,
.contact-page .form select {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid #dcdcdc !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    height: auto !important;
    font-size: 15px !important;
    outline: none !important;
    color: #333333 !important;
    transition: all 0.25s ease !important;
}

/* Ensure focus states are stylish */
.home-contact .form-control:focus,
#contact .form .form-control:focus,
.contact-page .form .form-control:focus,
.form.form-field .form-control:focus,
.home-contact input:focus,
.home-contact select:focus,
#contact .form input:focus,
#contact .form select:focus,
.contact-page .form input:focus,
.contact-page .form select:focus {
    border-color: #0052cc !important;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 0 0 4px rgba(0, 82, 204, 0.12) !important;
}

/* Elegant search and input icon overrides for glassy look */
.form-field .field-icon {
    border-radius: 8px 0 0 8px !important;
    border-right: 1px solid #dcdcdc !important;
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* High-end solid buttons matching brand */
.home-contact button[type="submit"],
#contact .form button[type="submit"],
.contact-page .form button[type="submit"],
.form.form-field button[type="submit"],
.home-contact input[type="submit"],
#contact .form input[type="submit"],
.contact-page .form input[type="submit"],
.form.form-field input[type="submit"] {
    background: #0052cc !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 14px 20px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    font-family: 'Montserrat', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
    display: inline-block !important;
    box-shadow: 0 4px 12px rgba(0, 82, 204, 0.2) !important;
}

.home-contact button[type="submit"]:hover,
#contact .form button[type="submit"]:hover,
.contact-page .form button[type="submit"]:hover,
.form.form-field button[type="submit"]:hover,
.home-contact input[type="submit"]:hover,
#contact .form input[type="submit"]:hover,
.contact-page .form input[type="submit"]:hover,
.form.form-field input[type="submit"]:hover {
    background: #0043a4 !important;
    box-shadow: 0 6px 20px rgba(0, 82, 204, 0.3) !important;
    transform: translateY(-1px) !important;
}

/* Ensure inputs and selects with floating icons have enough left padding so placeholder text is not hidden */
.form-field .form-control,
.form-field input,
.form-field select,
.home-contact .form-control,
.home-contact input,
.home-contact select,
#contact .form .form-control,
#contact .form input,
#contact .form select,
.contact-page .form .form-control,
.contact-page .form input,
.contact-page .form select,
.contact-page .form .form-field .form-control,
.contact-page .form .form-field input,
.contact-page .form .form-field select {
    padding-left: 54px !important;
}

/* Force white text inside the contact information blue box for legibility */
.contact-info,
.contact-info p,
.contact-info li,
.contact-info div,
.contact-info span,
#main .contact-info p,
#main .contact-info li,
#main .contact-info div,
#main .contact-info h2,
#main .contact-info h5 {
    color: #ffffff !important;
}

/* Ensure links inside the contact box remain white and hover elegantly */
.contact-info a {
    color: #ffffff !important;
    text-decoration: none !important;
}
.contact-info a:hover {
    color: #f68a1e !important;
    text-decoration: underline !important;
}

/* ═══════════════════════════════════════════════════════════
   Social Media Icons — Horizontal circular row (like reference image)
   ═══════════════════════════════════════════════════════════ */

/* Container: horizontal flex row */
.social-link,
.contact-info .social-link {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 16px !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Each icon link — circular border button */
.social-link a,
.contact-info .social-link a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
    font-size: 16px !important;
    text-decoration: none !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease !important;
    flex-shrink: 0 !important;
}

/* Hover effect — fill with brand orange */
.social-link a:hover,
.contact-info .social-link a:hover {
    background: #f68a1e !important;
    border-color: #f68a1e !important;
    color: #ffffff !important;
}

/* Icon inside each circle */
.social-link a i,
.contact-info .social-link a i {
    color: #ffffff !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

/* ═══════════════════════════════════════════════════════════
   18. CPT SERVICES CUSTOM TEMPLATE STYLING
   ═══════════════════════════════════════════════════════════ */
.ccn-service-sidebar {
    padding-top: 10px;
}

.ccn-sticky-form-card {
    background: linear-gradient(135deg, rgba(242, 246, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 82, 204, 0.15);
    border-radius: 16px;
    padding: 30px 24px;
    box-shadow: 0 15px 40px rgba(0, 40, 120, 0.08), 0 5px 15px rgba(0,0,0,0.03);
    position: -webkit-sticky;
    position: sticky;
    top: 160px; /* offset for WP admin bar + fixed header */
    z-index: 10;
}

.ccn-sticky-form-card h3 {
    color: #0052cc !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    font-family: 'Montserrat', sans-serif !important;
    margin: 0 0 10px !important;
    text-align: center;
}

.ccn-sticky-form-card p {
    color: #666666 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin-bottom: 20px !important;
    text-align: center;
}

.ccn-input-group {
    margin-bottom: 14px;
}

.ccn-input-group input,
.ccn-input-group select {
    width: 100% !important;
    padding: 12px 14px !important;
    border: 1px solid #dcdcdc !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-family: 'Open Sans', sans-serif !important;
    color: #333333 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.25s, box-shadow 0.25s !important;
    height: auto !important;
}

.ccn-input-group input:focus,
.ccn-input-group select:focus {
    border-color: #0052cc !important;
    box-shadow: 0 0 8px rgba(0, 82, 204, 0.15) !important;
}

.ccn-input-group select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23777777%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22/%3E%3C/svg%3E') !important;
    background-repeat: no-repeat !important;
    background-position: right 14px top 50% !important;
    background-size: 12px auto !important;
    padding-right: 30px !important;
}

.ccn-sticky-form-card button[type="submit"] {
    width: 100% !important;
    padding: 14px !important;
    background: #0052cc !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    font-family: 'Montserrat', sans-serif !important;
    cursor: pointer !important;
    transition: background 0.2s, transform 0.1s !important;
    box-shadow: 0 4px 12px rgba(0, 82, 204, 0.2) !important;
    outline: none !important;
}

.ccn-sticky-form-card button[type="submit"]:hover {
    background: #0043a4 !important;
    box-shadow: 0 6px 16px rgba(0, 82, 204, 0.3) !important;
}

.ccn-sticky-form-card button[type="submit"]:active {
    transform: scale(0.98);
}

@media (max-width: 991px) {
    .ccn-service-sidebar {
        margin-top: 40px;
    }
    .ccn-sticky-form-card {
        position: static !important;
        margin-bottom: 20px;
    }
}

/* ═══════════════════════════════════════════════════════════
   19. BEAUTIFUL SEMANTIC DETAILS/SUMMARY ACCORDION FOR FAQS
   ═══════════════════════════════════════════════════════════ */
.ccn-faq-container {
    margin-top: 50px;
    border-top: 2px solid #eaeaea;
    padding-top: 35px;
}

.ccn-faq-title {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #1a1a2e !important;
    margin-bottom: 22px !important;
    font-family: 'Montserrat', sans-serif !important;
}

.ccn-faq-item {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 14px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.ccn-faq-item:hover {
    border-color: #0052cc;
    box-shadow: 0 4px 12px rgba(0, 82, 204, 0.05);
}

.ccn-faq-item summary {
    padding: 18px 22px;
    font-weight: 700;
    font-size: 16px;
    color: #1a1a2e;
    cursor: pointer;
    outline: none;
    list-style: none; /* Hide default arrow */
    position: relative;
    padding-right: 50px;
    user-select: none;
    font-family: 'Montserrat', sans-serif !important;
}

/* Hide default marker in Chrome/Safari */
.ccn-faq-item summary::-webkit-details-marker {
    display: none;
}

/* Custom interactive plus/minus indicator */
.ccn-faq-item summary::after {
    content: '+';
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    font-weight: 500;
    color: #0052cc;
    transition: transform 0.2s ease;
}

.ccn-faq-item[open] summary::after {
    content: '−';
    transform: translateY(-50%) rotate(180deg);
    color: #f68a1e;
}

.ccn-faq-item .ccn-faq-answer {
    padding: 20px 22px;
    color: #555555;
    font-size: 15px;
    line-height: 1.7;
    border-top: 1px solid #e2e8f0;
    background: #ffffff;
    margin-top: 0;
}

.ccn-faq-answer p:last-child {
    margin-bottom: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   20. PREMIUM STATIC FEATURE CARDS GRID (2x4)
   ═══════════════════════════════════════════════════════════ */
.ccn-feature-grid-section {
    background: #ebf4ff !important;
}

.ccn-feature-card {
    background: #ffffff;
    border-radius: 24px 24px 24px 0px; /* Pointed bottom-right corner as in premium screenshot */
    padding: 35px 24px;
    box-shadow: 0 10px 30px rgba(0, 82, 204, 0.03);
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid rgba(0, 82, 204, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ccn-feature-card:hover {
    transform: translateY(-8px); /* Lift card slightly */
    box-shadow: 0 15px 35px rgba(0, 82, 204, 0.07);
}

/* Beautiful Abstract Circular lines decoration in top-left */
.ccn-feature-card::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 1px solid rgba(0, 82, 204, 0.06);
}

.ccn-feature-card::after {
    content: '';
    position: absolute;
    top: -35px;
    left: -35px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid rgba(0, 82, 204, 0.04);
}

.ccn-feature-icon-wrap {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    position: relative;
}

.ccn-feature-icon-wrap i {
    font-size: 26px;
}

/* Chat bubble red notification dot badge for Card 1 */
.ccn-icon-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #ff3b30;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    line-height: 14px;
}

.ccn-feature-card h3 {
    color: #1a1a2e !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    margin-bottom: 12px !important;
    font-family: 'Montserrat', sans-serif !important;
}

.ccn-feature-card p {
    color: #666666 !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    margin-bottom: 0 !important;
}

@media (max-width: 767px) {
    .ccn-feature-card {
        margin-bottom: 20px;
    }
}

/* ═══════════════════════════════════════════════════════════
   21. REDUCE SIDE MARGINS ON FULL-WIDTH PAGES (MAKE WIDER)
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
    .content-full-width .container,
    .content-full-width #content-wrap,
    .content-full-width #content-wrap.container {
        width: 94% !important;
        max-width: 1480px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   22. ELIMINATE WHITE GAPS ABOVE/BELOW PAGE HERO BANNER
   ═══════════════════════════════════════════════════════════ */
.content-full-width #main.main-inner {
    padding-top: 0 !important;          /* Removes parent theme gap above banner */
    padding-bottom: 0 !important;
}

.content-full-width #content-wrap {
    margin-top: 0 !important;           /* Completely removes white gap below banner */
    padding-top: 0 !important;          /* Removes parent theme padding-top below banner */
    margin-bottom: 45px !important;
}

/* ═══════════════════════════════════════════════════════════
   23. HIDE STATIC BANNER/BREADCRUMBS ON STANDARD TEMPLATE PAGES
   ═══════════════════════════════════════════════════════════ */
.page-template-template-standard-page .page-title,
.page-template-template-standard-page .page-title.breadcrumb-wrap,
.page-template-template-standard-page .breadcrumb-wrap {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   24. ELEGANT SERVICES MEGA MENU (4-COLUMN RESPONSIVE LAYOUT)
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
    /* Set static positioning on the top-level parent to span mega menu width across header container */
    .nav-menu li.menu-has-mega-menu {
        position: static !important;
    }
    
    /* Breathtaking, wide full-width mega menu container dropdown */
    .nav-menu li.menu-has-mega-menu > ul {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: stretch !important;
        gap: 20px !important;
        width: 1140px !important;
        max-width: 95vw !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) translateY(15px) !important;
        background: #ffffff !important;
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18) !important;
        border-radius: 14px !important;
        padding: 35px 30px !important;
        border-top: 5px solid #f68a1e !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0.35s !important;
        z-index: 99999 !important;
        margin-top: 8px !important;
    }
    
    /* Slide & Fade in dropdown on hover and Superfish hover state */
    .nav-menu li.menu-has-mega-menu:hover > ul,
    .nav-menu li.menu-has-mega-menu.sfHover > ul {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(-50%) translateY(0) !important;
    }
    
    /* Narrow center hover bridge to prevent overlapping other menu links horizontally */
    .nav-menu li.menu-has-mega-menu > ul::before {
        content: "" !important;
        position: absolute !important;
        top: -30px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 180px !important;
        height: 38px !important;
        background: transparent !important;
        display: block !important;
        z-index: -1 !important;
    }
    
    /* Column separators and flex sizing */
    .nav-menu li.menu-has-mega-menu > ul > li.mega-menu-column-li {
        flex: 1 !important;
        min-width: 200px !important;
        display: block !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 15px !important;
        white-space: normal !important;
    }
    
    /* Vertical dividing lines between columns */
    .nav-menu li.menu-has-mega-menu > ul > li.mega-menu-column-li:not(:last-child) {
        border-right: 1px solid rgba(0, 0, 0, 0.06) !important;
    }
    
    /* Elegant static column title headers */
    .nav-menu li.menu-has-mega-menu > ul > li.mega-menu-column-li > .mega-column-title {
        display: block !important;
        font-family: 'Montserrat', sans-serif !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #111111 !important;
        border-bottom: 2px solid rgba(0, 0, 0, 0.05) !important;
        padding: 0 0 12px 0 !important;
        margin-bottom: 18px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        pointer-events: none !important; /* Disable clicking parent header in desktop */
    }
    
    /* Sub-lists nested under headers */
    .nav-menu li.menu-has-mega-menu > ul > li.mega-menu-column-li > ul {
        display: block !important;
        position: static !important;
        box-shadow: none !important;
        padding: 0 !important;
        background: transparent !important;
        margin: 0 !important;
        transform: none !important;
    }
    
    .nav-menu li.menu-has-mega-menu > ul > li.mega-menu-column-li > ul > li {
        display: block !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* High-end list links with micro-hover movement */
    .nav-menu li.menu-has-mega-menu > ul > li.mega-menu-column-li > ul > li a {
        display: flex !important;
        align-items: center !important;
        padding: 8px 10px !important;
        color: #555555 !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        text-transform: none !important;
        transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
        border-radius: 6px !important;
    }
    
    /* Harmonized icons inside lists */
    .nav-menu li.menu-has-mega-menu > ul > li.mega-menu-column-li > ul > li a i {
        width: 22px !important;
        color: #999999 !important;
        font-size: 14px !important;
        margin-right: 10px !important;
        transition: color 0.25s ease !important;
        text-align: center !important;
    }
    
    /* Hover effects matching primary branding colors */
    .nav-menu li.menu-has-mega-menu > ul > li.mega-menu-column-li > ul > li a:hover {
        color: #0052cc !important;
        background: rgba(0, 82, 204, 0.05) !important;
        transform: translateX(4px) !important;
    }
    
    .nav-menu li.menu-has-mega-menu > ul > li.mega-menu-column-li > ul > li a:hover i {
        color: #f68a1e !important;
    }
    
    /* WhatsApp dynamic vector illustration styling */
    .nav-menu li.menu-has-mega-menu > ul > li.mega-menu-column-li .mega-menu-illustration-container {
        display: block !important;
        margin-top: 25px !important;
        text-align: center !important;
        opacity: 0.95 !important;
        transition: transform 0.3s ease !important;
    }
    
    .nav-menu li.menu-has-mega-menu > ul > li.mega-menu-column-li .mega-menu-illustration-container img {
        max-width: 90% !important;
        height: auto !important;
        border-radius: 8px !important;
        max-height: 110px !important;
        object-fit: contain !important;
    }
    
    .nav-menu li.menu-has-mega-menu > ul > li.mega-menu-column-li:hover .mega-menu-illustration-container {
        transform: scale(1.04) !important;
    }
}

/* Hide WhatsApp illustration on mobile accordions and style static titles */
@media (max-width: 991px) {
    .mega-menu-illustration-container {
        display: none !important;
    }
    
    /* Format the column headers on mobile as bold orange clickable labels */
    #ccn-custom-mobile-nav .mega-column-title {
        display: block !important;
        font-family: 'Montserrat', sans-serif !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        color: #f68a1e !important;
        padding: 14px 40px 14px 20px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }
    
    /* Category wrapper and right-aligned chevrons on mobile */
    #ccn-custom-mobile-nav .mega-menu-column-li {
        position: relative !important;
    }
    
    #ccn-custom-mobile-nav .mega-menu-column-li i {
        position: absolute !important;
        right: 20px !important;
        top: 14px !important;
        z-index: 99 !important;
        cursor: pointer !important;
        color: #0b1120 !important;
        font-size: 14px !important;
        pointer-events: none !important; /* Allow click to pass through to container click listener */
    }
    
    #ccn-custom-mobile-nav .mega-menu-column-li i.fa-chevron-up {
        color: #f68a1e !important;
    }
    
    /* Neatly indent the list items under their static headers on mobile — hidden by default, toggled via JS */
    #ccn-custom-mobile-nav .mega-menu-column-li ul {
        display: none;
        padding-left: 10px !important;
        background: rgba(0, 0, 0, 0.02) !important;
    }
    
    #ccn-custom-mobile-nav .mega-menu-column-li ul li a {
        font-size: 12px !important;
        font-weight: 600 !important;
        padding-left: 20px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   25. HIGH-END PREMIUM REDESIGN FOR HOMEPAGE (INDEX PAGE)
   ═══════════════════════════════════════════════════════════ */

/* --- Homepage Hero Section (#intro) --- */
#intro {
    min-height: auto !important;
    height: auto !important;
    background: linear-gradient(135deg, #ffffff 0%, #f4faf8 50%, #eef8ff 100%) !important;
    padding: 210px 0 30px 0 !important;
    display: flex !important;
    align-items: center !important;
}
#intro .carousel-container {
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    max-width: 1140px !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}
#intro .carousel-content {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding-right: 45px !important;
    box-sizing: border-box !important;
    text-align: left !important;
}
#intro .carousel-img {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    text-align: right !important;
    box-sizing: border-box !important;
}
#intro h2 {
    color: #0f172a !important;
    font-size: 52px !important;
    font-weight: 800 !important;
    font-family: 'Montserrat', sans-serif !important;
    line-height: 1.25 !important;
    margin-bottom: 24px !important;
    text-shadow: none !important;
}
#intro p {
    color: #334155 !important;
    font-size: 18px !important;
    line-height: 1.65 !important;
    margin-bottom: 26px !important;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 400 !important;
}
#intro p b {
    color: #0052cc !important;
    font-weight: 700 !important;
}
/* Original button color preserved with glowing lift shadow */
#intro .btn-get-started {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 14px 34px !important;
    border-radius: 50px !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-shadow: 0 8px 24px rgba(246, 138, 30, 0.3) !important;
    display: inline-block !important;
    background: #f68a1e !important;
    color: #ffffff !important;
}
#intro .btn-get-started:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 30px rgba(246, 138, 30, 0.55) !important;
    background: #e07715 !important;
    color: #ffffff !important;
}
#intro .carousel-img figure img {
    max-width: 100% !important;
    height: auto !important;
    filter: drop-shadow(0 15px 35px rgba(0, 82, 204, 0.15)) !important;
    animation: ccnFloat 6s ease-in-out infinite !important;
}
@keyframes ccnFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

/* --- Services Grid Section (#services) --- */
#services .box {
    background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%) !important;
    border: 1px solid rgba(0, 82, 204, 0.08) !important;
    border-radius: 20px !important;
    padding: 45px 35px !important;
    box-shadow: 0 10px 40px rgba(0, 40, 120, 0.03), 0 2px 4px rgba(0, 0, 0, 0.01) !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    height: calc(100% - 30px) !important;
    margin-bottom: 30px !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: center !important;
}
#services .box::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 4px !important;
    background: linear-gradient(90deg, #f68a1e 0%, #0052cc 100%) !important;
    opacity: 0 !important;
    transform: scaleX(0.8) !important;
    transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}
#services .box:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 25px 50px rgba(0, 40, 120, 0.09), 0 15px 30px rgba(0, 82, 204, 0.04) !important;
    border-color: rgba(0, 82, 204, 0.18) !important;
}
#services .box:hover::before {
    opacity: 1 !important;
    transform: scaleX(1) !important;
}
#services .box .icon {
    width: 68px !important;
    height: 68px !important;
    background: linear-gradient(135deg, rgba(0, 82, 204, 0.06) 0%, rgba(0, 82, 204, 0.12) 100%) !important;
    border: 1px solid rgba(0, 82, 204, 0.05) !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 28px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}
#services .box:hover .icon {
    background: linear-gradient(135deg, #0052cc 0%, #003399 100%) !important;
    transform: translateY(-2px) rotate(5deg) !important;
    box-shadow: 0 10px 20px rgba(0, 82, 204, 0.25) !important;
    border-color: transparent !important;
}
#services .box .icon i {
    font-size: 26px !important;
    color: #0052cc !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
}
#services .box .icon i.fa-sms {
    transform: translateX(1px) !important;
}
#services .box:hover .icon i {
    color: #ffffff !important;
    transform: scale(1.05) !important;
}
#main #services .box .title,
#services .box .title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    font-size: 19px !important;
    letter-spacing: 0.3px !important;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
}
#main #services .box .title a,
#services .box .title a {
    color: #0f172a !important;
    transition: color 0.3s ease !important;
    display: inline-block !important;
    text-align: center !important;
}
#main #services .box:hover .title a,
#services .box:hover .title a {
    color: #0052cc !important;
}
#main #services .box .description,
#services .box .description {
    font-size: 14.5px !important;
    line-height: 1.7 !important;
    color: #64748b !important;
    flex-grow: 1 !important;
    display: block !important;
    text-align: center !important;
    width: 100% !important;
}
#main #services .box .description div,
#services .box .description div {
    text-align: center !important;
    margin-top: 15px !important;
}
#main #services .box .description p,
#services .box .description p {
    width: 100% !important;
    text-align: center !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    font-size: 14.5px !important;
    line-height: 1.7 !important;
    color: #64748b !important;
}
#main #services .box .description a,
#services .box .description a {
    color: #f68a1e !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 12.5px !important;
    letter-spacing: 1px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 20px !important;
    transition: all 0.3s ease !important;
}
#main #services .box .description a::after,
#services .box .description a::after {
    content: " \2192" !important;
    font-size: 15px !important;
    margin-left: 5px !important;
    transition: transform 0.3s ease !important;
    display: inline-block !important;
}
#main #services .box .description a:hover,
#services .box .description a:hover {
    color: #0052cc !important;
}
#main #services .box .description a:hover::after,
#services .box .description a:hover::after {
    transform: translateX(4px) !important;
}

/* --- Call to Action Section (#call-to-action) --- */
#main #call-to-action,
#call-to-action {
    background: radial-gradient(circle at center, #0a1c3d 0%, #020917 100%) !important;
    padding: 85px 0 !important;
    border-top: 4px solid #f68a1e !important;
    position: relative !important;
    overflow: hidden !important;
}

#main #call-to-action::after,
#call-to-action::after {
    content: "" !important;
    position: absolute !important;
    bottom: -50px !important;
    right: -50px !important;
    width: 250px !important;
    height: 250px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(246, 138, 30, 0.04) !important;
    pointer-events: none !important;
}

#main #call-to-action h3,
#call-to-action h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    font-size: 32px !important;
    line-height: 1.35 !important;
    color: #ffffff !important;
    margin-bottom: 20px !important;
}

#main #call-to-action h3 span,
#call-to-action h3 span {
    color: #f68a1e !important;
    display: inline !important;
}

#main #call-to-action p,
#call-to-action p {
    font-size: 16px !important;
    color: #e2e8f0 !important;
    max-width: 750px !important;
    margin: 0 auto 35px auto !important;
    line-height: 1.7 !important;
}

/* Redesigned premium orange cta button */
#main #call-to-action .cta-btn.get-started,
#call-to-action .cta-btn.get-started {
    background: linear-gradient(135deg, #f68a1e 0%, #e07715 100%) !important;
    border: none !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    padding: 16px 38px !important;
    border-radius: 50px !important;
    box-shadow: 0 8px 24px rgba(246, 138, 30, 0.35) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    color: #ffffff !important;
    display: inline-block !important;
    text-decoration: none !important;
}

#main #call-to-action .cta-btn.get-started:hover,
#call-to-action .cta-btn.get-started:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 15px 35px rgba(246, 138, 30, 0.55) !important;
    background: linear-gradient(135deg, #ff9b37 0%, #f68a1e 100%) !important;
    color: #ffffff !important;
}

#main #call-to-action .cta-btn.touch,
#call-to-action .cta-btn.touch {
    background: linear-gradient(135deg, #f68a1e 0%, #e07715 100%) !important;
    border: none !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    padding: 16px 38px !important;
    border-radius: 50px !important;
    box-shadow: 0 8px 24px rgba(246, 138, 30, 0.35) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    color: #ffffff !important;
    display: inline-block !important;
    text-decoration: none !important;
}

#main #call-to-action .cta-btn.touch:hover,
#call-to-action .cta-btn.touch:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 15px 35px rgba(246, 138, 30, 0.55) !important;
    background: linear-gradient(135deg, #ff9b37 0%, #f68a1e 100%) !important;
    color: #ffffff !important;
}

/* --- Our Clients Section (#team) --- */
#team {
    background: linear-gradient(135deg, #f8faff 0%, #eef3f9 100%) !important;
    padding: 70px 0 !important;
}
#team .member {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.03) !important;
    padding: 22px !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
}
#team .member:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 25px rgba(0, 82, 204, 0.08) !important;
}
#team .member img {
    filter: none !important;
    opacity: 1 !important;
    transition: all 0.3s ease !important;
    max-height: 55px !important;
    object-fit: contain !important;
    width: auto !important;
}
#team .member:hover img {
    filter: none !important;
    opacity: 1 !important;
    transform: scale(1.05) !important;
}

/* --- Testimonials Section (#testimonials) --- */
#testimonials {
    background: #f4f7fb !important;
    padding: 70px 0 !important;
}
#testimonials .testimonial-item {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 40px !important;
    box-shadow: 0 10px 35px rgba(0, 40, 120, 0.04) !important;
    border-left: 5px solid #0052cc !important;
    position: relative !important;
    margin: 15px !important;
}
#testimonials .testimonial-item h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    color: #1a1a2e !important;
    margin-bottom: 4px !important;
}
#testimonials .testimonial-item h4 {
    font-size: 13px !important;
    color: #f68a1e !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 20px !important;
}
#testimonials .testimonial-item p {
    font-size: 14.5px !important;
    line-height: 1.7 !important;
    color: #555555 !important;
    font-style: italic !important;
}

/* --- Homepage Responsiveness Overrides --- */
@media (max-width: 991px) {
    #intro {
        padding: 140px 0 20px 0 !important;
    }
    #intro .carousel-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }
    #intro h2 {
        font-size: 34px !important;
        line-height: 1.3 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
    }
    #intro p {
        font-size: 15px !important;
        line-height: 1.65 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
    }
    #intro .carousel-container {
        flex-direction: column !important;
        justify-content: center !important;
        text-align: center !important;
        padding-top: 20px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        box-sizing: border-box !important;
    }
    #intro .carousel-img {
        margin-top: 30px !important;
        max-width: 80% !important;
    }
    #services .box {
        padding: 30px 20px !important;
    }
}
@media (max-width: 575px) {
    #intro h2 {
        font-size: 26px !important;
    }
    #intro .carousel-img {
        max-width: 95% !important;
    }
    #call-to-action h3 {
        font-size: 22px !important;
    }
    #testimonials .testimonial-item {
        padding: 25px 20px !important;
    }
}

/* ==========================================================================
   26. PILL-SHAPED FLOATING HEADER REDESIGN (MATCHING CLIENT PRECISE DEMAND)
   ========================================================================== */

/* ── Premium Marquee Top Bar ── */
#top-marquee {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    /* Solid premium dark navy — no animation conflict */
    background: #000e2e !important;
    color: #f68a1e !important;
    padding: 0 15px !important;
    font-size: 12.5px !important;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    z-index: 10000 !important;
    margin: 0 !important;
    height: 32px !important;
    line-height: 32px !important;
    border-bottom: 1px solid rgba(246, 138, 30, 0.25) !important;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4) !important;
    overflow: hidden !important;
    display: block !important;
}

#top-marquee b {
    color: #ffb443 !important;
    font-weight: 700 !important;
}

/* ── Floating Pill Header — Initial (top of page) ── */
#header {
    position: fixed !important;
    top: 40px !important;          /* 32px marquee + 8px breathing gap */
    left: 3% !important;
    right: 3% !important;
    width: auto !important;
    max-width: 1300px !important;
    margin: 0 auto !important;
    transform: none !important;
    height: auto !important;
    min-height: 68px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border-radius: 100px !important;
    box-shadow: 0 8px 30px rgba(0, 30, 100, 0.1), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(220, 228, 255, 0.7) !important;
    padding: 8px 28px !important;
    z-index: 9999 !important;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* ── Floating Pill Header — Scrolled (compact) ── */
#header.header-scrolled {
    top: 36px !important;
    left: 2% !important;
    right: 2% !important;
    max-width: 1360px !important;
    margin: 0 auto !important;
    transform: none !important;
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 12px 40px rgba(0, 30, 90, 0.14), 0 2px 8px rgba(0,0,0,0.04) !important;
    padding: 5px 28px !important;
    min-height: 58px !important;
    border-radius: 100px !important;
}

/* Hide the old contact info bar completely as per reference image design */
#header .links.list-inline {
    display: none !important;
}

/* Header Content Alignment */
#header .w-100 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#header .head-left {
    display: flex !important;
    align-items: center !important;
}

#header #logo {
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Logo — Bigger for brand impact ── */
#header #logo img,
#header #logo a img,
#logo img {
    height: 75px !important;
    width: auto !important;
    max-height: none !important;
    transition: height 0.3s ease !important;
    display: block !important;
}

#header.header-scrolled #logo img,
#header.header-scrolled #logo a img {
    height: 55px !important;
}

/* Navigation Menu Container */
#header .head-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 1 !important;
}

#header #nav-menu-container {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Navigation Menu Items */
#header .nav-menu {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

#header .nav-menu > li {
    position: relative !important;
    padding: 0 12px !important;
    margin: 0 !important;
}

#header .nav-menu > li > a {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #0b1120 !important;
    text-transform: none !important;
    padding: 8px 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: color 0.25s ease !important;
    position: relative !important;
}

/* Underline effect for links */
#header .nav-menu > li > a::before {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 2px !important;
    background: #f68a1e !important;
    transition: width 0.25s ease !important;
}

#header .nav-menu > li > a:hover::before {
    width: 100% !important;
}

#header .nav-menu > li > a:hover {
    color: #f68a1e !important;
}

/* ── SERVICES arrow span (Unicode ▾) ── */
#header .nav-menu > li > a .ccn-arrow {
    font-size: 11px !important;
    margin-left: 5px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    transition: transform 0.25s ease !important;
    color: inherit !important;
    font-style: normal !important;
}

#header .nav-menu .menu-has-children:hover > a .ccn-arrow {
    transform: rotate(180deg) !important;
    color: #f68a1e !important;
}

/* ══ NUCLEAR: Kill OceanWP's auto arrow from EVERY possible selector ══ */
#header .nav-menu li > a::after,
#header .nav-menu li > a::before,
#header .nav-menu li.menu-has-children > a::after,
#header .nav-menu li.menu-has-children > a::before,
#header .nav-menu li.sfHover > a::after,
#header .nav-menu li.sfHover > a::before,
#nav-menu-container .nav-menu li > a::after,
#nav-menu-container .nav-menu li > a::before,
.nav-menu .sub-menu-indicator,
.nav-menu li .sub-menu-indicator,
.nav-menu li a .sub-menu-indicator,
span.sub-menu-indicator,
.menu-has-children > a > span.sub-menu-indicator,
#header .nav-menu li > a > span.sub-menu-indicator {
    display: none !important;
    content: "" !important;
    width: 0 !important;
    height: 0 !important;
    border: none !important;
    background: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    font-size: 0 !important;
}


/* ── Mega menu — sits right below the pill header ── */
@media (min-width: 992px) {
    /* Re-anchor mega menu relative to the fixed header */
    #header {
        overflow: visible !important;
    }
    .nav-menu li.menu-has-mega-menu > ul {
        margin-top: 18px !important;
        /* Override the fixed position anchor so dropdown comes below the pill */
        top: 100% !important;
        position: absolute !important;
    }
    /* Fix Services text — ensure icon space doesn't break word */
    #header .nav-menu > li > a {
        white-space: nowrap !important;
    }
}

/* Orange CTA Button ("Try Free Demo") */
#header .nav-menu > li > a.active {
    background: #f68a1e !important;
    color: #ffffff !important;
    padding: 10px 22px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-shadow: 0 6px 20px rgba(246, 138, 30, 0.25) !important;
    border: none !important;
    margin-left: 10px !important;
}

#header .nav-menu > li > a.active::before {
    display: none !important; /* disable underline */
}

/* Beautiful custom white circle indicator icon inside CTA button */
#header .nav-menu > li > a.active::after {
    content: "↗" !important;
    font-family: 'Montserrat', sans-serif !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    background: #ffffff !important;
    color: #f68a1e !important;
    border-radius: 50% !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    margin-left: 4px !important;
}

#header .nav-menu > li > a.active:hover {
    background: #e07715 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 25px rgba(246, 138, 30, 0.4) !important;
}

#header .nav-menu > li > a.active:hover::after {
    transform: rotate(45deg) !important; /* Beautiful micro-animation spins ↗ */
}

/* Align mobile hamburger button inside capsule header */
#header #mobile-nav-toggle {
    background: transparent !important;
    border: none !important;
    color: #0b1120 !important;
    font-size: 24px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color 0.25s ease !important;
}

#header #mobile-nav-toggle:hover {
    color: #f68a1e !important;
}

/* ── Adjust main content so it clears the fixed marquee + pill header ──
   32px marquee + 40px (header-top offset) + 74px (header height with 58px logo) + 20px gap = 166px
   Use 155px for comfortable clearance on desktop. ── */
body:not(.home) #main.main-inner {
    margin-top: 155px !important;
}

@media (max-width: 991px) {
    body:not(.home) #main.main-inner {
        margin-top: 135px !important;
    }
}

/* ==========================================================================
   27. PREMIUM STATIC EMBEDDED SIGNUP SECTION (OVERRIDE FOR BROKEN IFRAME)
   ========================================================================== */

#embedded-signup-section {
    padding: 40px 0 70px 0 !important;
    background: linear-gradient(135deg, #f7f9fc 0%, #ebf1fa 100%) !important;
    border-top: 1px solid rgba(0, 82, 204, 0.05) !important;
    border-bottom: 1px solid rgba(0, 82, 204, 0.05) !important;
}

#embedded-signup-section .section-header {
    margin-bottom: 45px !important;
}

#embedded-signup-section .section-desc {
    max-width: 650px !important;
    margin: 10px auto 0 !important;
    font-size: 15px !important;
    color: #666666 !important;
}

/* Info Card displaying the three lists completely */
.signup-info-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 82, 204, 0.06) !important;
    border-radius: 20px !important;
    padding: 40px !important;
    box-shadow: 0 15px 40px rgba(0, 40, 120, 0.04) !important;
}

.signup-info-group {
    margin-bottom: 25px;
}

.signup-info-group:last-child {
    margin-bottom: 0;
}

.group-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 15px !important;
}

.group-header i {
    font-size: 20px !important;
    color: #0052cc !important;
}

.group-header h4 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    color: #1a1a2e !important;
    margin: 0 !important;
}

.group-desc {
    font-size: 14px !important;
    color: #666666 !important;
    line-height: 1.6 !important;
    margin-bottom: 18px !important;
}

.group-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.group-list li {
    position: relative !important;
    padding-left: 20px !important;
    margin-bottom: 14px !important;
}

.group-list li:last-child {
    margin-bottom: 0 !important;
}

.group-list li::before {
    content: "✓" !important;
    position: absolute !important;
    left: 0 !important;
    top: 2px !important;
    color: #28a745 !important;
    font-weight: 900 !important;
    font-size: 14px !important;
}

.list-title {
    display: block !important;
    font-weight: 700 !important;
    font-size: 14.5px !important;
    color: #1a1a2e !important;
    margin-bottom: 4px !important;
    font-family: 'Montserrat', sans-serif !important;
}

.list-text {
    display: block !important;
    font-size: 13.5px !important;
    color: #555555 !important;
    line-height: 1.6 !important;
}

.group-divider {
    border: 0 !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    margin: 25px 0 !important;
}

/* Right-side Action Call card */
.signup-action-card {
    background: linear-gradient(135deg, #001d4c 0%, #000c24 100%) !important;
    border-radius: 20px !important;
    padding: 40px !important;
    color: #ffffff !important;
    box-shadow: 0 20px 50px rgba(0, 20, 50, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    position: relative !important;
    overflow: hidden !important;
    height: 100% !important;
}

.signup-action-card::before {
    content: "" !important;
    position: absolute !important;
    top: -50px !important;
    right: -50px !important;
    width: 150px !important;
    height: 150px !important;
    border-radius: 50% !important;
    background: rgba(246, 138, 30, 0.05) !important;
    filter: blur(20px) !important;
}

.meta-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    padding: 6px 12px !important;
    border-radius: 50px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #42abe8 !important;
    text-transform: uppercase !important;
    margin-bottom: 20px !important;
}

#main .signup-action-card h3,
.signup-action-card h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    font-size: 26px !important;
    color: #ffffff !important;
    margin-bottom: 12px !important;
}

#main .signup-action-card p,
.signup-action-card p {
    font-size: 14.5px !important;
    color: #b0c2de !important;
    line-height: 1.6 !important;
    margin-bottom: 30px !important;
}

/* Step Flow Indicators */
.signup-steps-flow {
    margin-bottom: 35px !important;
}

.step-item {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    margin-bottom: 20px !important;
    position: relative !important;
}

.step-item:last-child {
    margin-bottom: 0 !important;
}

/* Connecting line between steps */
.step-item:not(:last-child)::after {
    content: "" !important;
    position: absolute !important;
    left: 17px !important;
    top: 34px !important;
    width: 2px !important;
    height: 20px !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.step-num {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}

.step-text {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #e2e8f0 !important;
}

/* Facebook Signup Button Styles exactly as requested */
.btn-facebook-signup {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    background: #1877f2 !important; /* Official Facebook brand blue */
    color: #ffffff !important;
    border-radius: 50px !important;
    padding: 15px 30px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    font-family: 'Montserrat', sans-serif !important;
    border: none !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-shadow: 0 8px 25px rgba(24, 119, 242, 0.3) !important;
    text-decoration: none !important;
}

.btn-facebook-signup:hover {
    background: #166fe5 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 30px rgba(24, 119, 242, 0.45) !important;
    color: #ffffff !important;
}

.btn-facebook-signup i {
    font-size: 18px !important;
}

.action-caption {
    display: block !important;
    font-size: 11px !important;
    color: #8899b0 !important;
    margin-top: 14px !important;
    letter-spacing: 0.5px !important;
}

.action-caption i {
    margin-right: 4px !important;
}

@media (max-width: 991px) {
    .signup-action-card {
        margin-top: 30px !important;
    }
}

/* ==========================================================================
   28. (Merged into section 26 above — no duplicate rules needed)
   ========================================================================== */



/* ==========================================================================
   29. BIGGER LOGO IN HEADER
   ========================================================================== */

/* Desktop: style logo wrapper with the same blue gradient as the login button */
#header #logo a {
    background: linear-gradient(135deg, #0052cc, #0043a4) !important;
    padding: 9px 24px !important;
    border-radius: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0, 82, 204, 0.18) !important;
    transition: opacity 0.3s ease, box-shadow 0.3s ease !important;
    opacity: 1 !important;
    transform: none !important;
}

#header #logo a:hover,
#header #logo a:focus,
#header #logo a:active {
    background: linear-gradient(135deg, #0052cc, #0043a4) !important;
    box-shadow: 0 4px 12px rgba(0, 82, 204, 0.18) !important;
    transform: none !important;
    opacity: 1 !important;
}

#header #logo img {
    height: 42px !important;
    width: auto !important;
    transition: height 0.3s ease !important;
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
}

#header #logo a:hover img,
#header #logo a:focus img,
#header #logo a:active img {
    opacity: 1 !important;
    transform: none !important;
}

/* Slightly compact logo badge when header is scrolled */
#header.header-scrolled #logo a {
    padding: 6px 18px !important;
}

#header.header-scrolled #logo img {
    height: 34px !important;
}

/* Mobile: scale logo badge nicely without overflowing */
@media (max-width: 991px) {
    #header #logo a {
        padding: 6px 16px !important;
    }
    #header #logo img {
        height: 32px !important;
    }
    #header.header-scrolled #logo img {
        height: 28px !important;
    }
    #header.header-scrolled #logo a {
        padding: 5px 12px !important;
    }
}


/* ==========================================================================
   30. CAPSULE / PILL LOGIN BUTTON
   ========================================================================== */

/* Target the .login-btn anchor directly inside nav-menu */
#header .nav-menu > li > a.login-btn {
    background: linear-gradient(135deg, #0052cc, #0043a4) !important;
    color: #ffffff !important;
    padding: 9px 22px !important;
    border-radius: 50px !important;         /* Full pill/capsule shape */
    font-weight: 700 !important;
    font-family: 'Montserrat', sans-serif !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-shadow: 0 4px 15px rgba(0, 82, 204, 0.25) !important;
    border: none !important;
    margin-right: 6px !important;
    letter-spacing: 0.2px !important;
}

/* Disable the orange underline hover effect on the login capsule */
#header .nav-menu > li > a.login-btn::before {
    display: none !important;
}

/* Login icon prefix using Font Awesome via CSS content */
#header .nav-menu > li > a.login-btn::after {
    content: "→" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    padding: 2px 10px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: 20px !important;          /* Capsule shape, not circle */
    font-size: 12px !important;
    font-weight: 800 !important;
    transition: all 0.3s ease !important;
    margin-left: 4px !important;
}

/* Hover: slightly darker with lift */
#header .nav-menu > li > a.login-btn:hover {
    background: linear-gradient(135deg, #003d99, #002e7a) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(0, 82, 204, 0.38) !important;
}

#header .nav-menu > li > a.login-btn:hover::after {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: translateX(3px) !important;
}

/* Dropdown under Login capsule: style the sub-menu nicely */
#header .nav-menu > li:has(a.login-btn) > ul {
    border-top: 3px solid #0052cc !important;
    border-radius: 12px !important;
    min-width: 200px !important;
    padding: 8px 0 !important;
    box-shadow: 0 15px 40px rgba(0, 40, 120, 0.15) !important;
}

#header .nav-menu > li:has(a.login-btn) > ul > li > a {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #333333 !important;
    padding: 10px 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: background 0.2s, color 0.2s !important;
}

#header .nav-menu > li:has(a.login-btn) > ul > li > a:hover {
    background: rgba(0, 82, 204, 0.06) !important;
    color: #0052cc !important;
}

/* ==========================================================================
   31. PREMIUM MOBILE NAVIGATION LAYOUT & RESPONSIVENESS OVERRIDES
   ========================================================================== */
@media (max-width: 991px) {
    /* Hide header background and logo when mobile menu is active, but keep call button visible */
    body.mobile-nav-active #header {
        background: transparent !important;
        box-shadow: none !important;
        border-color: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    body.mobile-nav-active #header #logo {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Center and stabilize capsule header on mobile screens to prevent layout shift */
    #header {
        left: 4% !important;
        right: 4% !important;
        width: auto !important;
        max-width: 92% !important;
        margin: 0 auto !important;
        padding: 8px 18px !important;
        transition: all 0.3s ease !important;
    }

    /* Keep mobile padding comfortable and consistent on scroll */
    #header.header-scrolled {
        padding: 5px 18px !important;
    }

    /* Hide desktop navigation wrapper on mobile to free up flexbox space */
    #header .head-right {
        display: none !important;
    }

    /* Adjust mobile actions (call + menu toggle) margin-right to sit beautifully inside capsule */
    #header .mobile-actions {
        margin-left: auto !important;
        margin-right: 20px !important;
    }

    /* Initially transparent capsule on mobile homepage */
    body.home #header:not(.header-scrolled) {
        background: transparent !important;
        box-shadow: none !important;
        border-color: transparent !important;
    }

    body.home #header:not(.header-scrolled) #mobile-nav-toggle i {
        color: #f68a1e !important; /* Highly visible theme orange on dark hero image */
    }

    /* Completely hide desktop menu container on mobile so it doesn't overflow */
    #header #nav-menu-container {
        display: none !important;
    }

    /* Natural flexbox hamburger toggle button next to mobile call button */
    #mobile-nav-toggle {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        z-index: 10000 !important;
        background: transparent !important;
        border: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.3s ease !important;
        width: 32px !important;
        height: 32px !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Force hamburger menu icon to be solid deep navy (#0b1120) so it stands out on white capsule */
    #mobile-nav-toggle i {
        color: #0b1120 !important;
        font-size: 26px !important;
        font-weight: 900 !important;
        transition: color 0.3s ease !important;
        transform: translateY(2px) !important; /* Perfect vertical centering adjustment to match call circle */
    }

    #mobile-nav-toggle:hover i {
        color: #f68a1e !important;
    }

    /* Active State: Change color when mobile menu overlay is active */
    body.mobile-nav-active #mobile-nav-toggle i {
        color: #f68a1e !important;
    }

    /* Premium custom Mobile Call Button */
    .mobile-call-btn {
        width: 34px !important;
        height: 34px !important;
        background: linear-gradient(135deg, #f68a1e 0%, #e07715 100%) !important;
        color: #ffffff !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 12px rgba(246, 138, 30, 0.35) !important;
        font-size: 13.5px !important;
        transition: all 0.3s ease !important;
        text-decoration: none !important;
    }

    .mobile-call-btn:hover {
        transform: scale(1.06) !important;
        color: #ffffff !important;
    }

    .mobile-call-btn i {
        color: #ffffff !important;
    }

    /* Mobile Logo alignment inside capsule */
    #header #logo img {
        height: 48px !important; /* Slightly smaller for mobile comfort */
        width: auto !important;
    }
}

/* ==========================================================================
   31. PREMIUM TRANSPARENCY & HERO OVERRIDES
   ========================================================================== */

/* Ensure all dynamic parent header wrappers or placeholders injected by OceanWP are transparent */
.sticky-wrapper,
#site-header-sticky-wrapper,
.owp-sticky-header,
.oceanwp-sticky-header,
.is-sticky,
.sticky-active,
#site-header,
.site-header,
.sticky-placeholder,
.sticky-header-placeholder,
.sticky-wrapper-placeholder,
#site-header-sticky-wrapper-placeholder {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Perfect layout fix for Homepage Hero Section background and content */
#intro {
    position: relative !important;
    min-height: auto !important;
    height: auto !important;
    background: linear-gradient(135deg, #ffffff 0%, #f4faf8 50%, #eef8ff 100%) !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
}

#intro .intro-container {
    width: 100% !important;
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    z-index: 2 !important;
}

#intro .carousel-background-video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    overflow: hidden !important;
}

#intro .carousel-container {
    position: relative !important;
    z-index: 5 !important;
    width: 100% !important;
    height: auto !important;
}

/* ==========================================================================
   32. EXTRA ROBUST GLOBAL LAYOUT OVERFLOW & SCROLLBAR KILLS
   ========================================================================== */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}

#outer-wrap,
#wrap,
.site,
#main,
.site-main,
#content-wrap,
#primary,
#content,
.content-area {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
}

/* Ensure all row grids are contained and do not leak margins */
.container, .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

#team .container,
#testimonials .container {
    overflow: visible !important;
}


@media (min-width: 576px) {
    .container { max-width: 540px !important; }
}
@media (min-width: 768px) {
    .container { max-width: 720px !important; }
}
@media (min-width: 992px) {
    .container { max-width: 960px !important; }
}
@media (min-width: 1200px) {
    .container { max-width: 1140px !important; }
}

.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.col, [class*="col-"] {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Prevent image overflow */
img {
    max-width: 100% !important;
    height: auto !important;
}

/* Force marquee to stay within constraints */
#top-marquee {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

/* ==========================================================================
   33. PREMIUM MOBILE NAVIGATION STACKING ORDER & Z-INDEX OVERRIDES
   ========================================================================== */
#mobile-body-overly {
    z-index: 99997 !important;
}

#ccn-custom-mobile-nav {
    z-index: 99998 !important;
    background: #ffffff !important;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.3) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
}

#mobile-nav-toggle {
    z-index: 99999 !important;
}

/* ==========================================================================
   34. ONBOARDING SECTION PREMIUM RESPONSIVE REDESIGN
   ========================================================================== */
.signup-video-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 82, 204, 0.06) !important;
    border-radius: 20px !important;
    padding: 30px !important;
    box-shadow: 0 15px 40px rgba(0, 40, 120, 0.04) !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.video-card-title {
    color: #0b1120 !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-family: 'Montserrat', sans-serif !important;
}

.video-card-title i {
    color: #f68a1e !important;
    font-size: 22px !important;
}

.video-player-container {
    border: 4px solid #ffffff !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #000 !important;
    box-shadow: 0 15px 35px rgba(0, 82, 204, 0.15) !important;
    position: relative !important;
    width: 100% !important;
}

.video-player-container video {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 10px !important;
}

.signup-detail-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 82, 204, 0.06) !important;
    border-radius: 20px !important;
    padding: 30px !important;
    box-shadow: 0 15px 40px rgba(0, 40, 120, 0.04) !important;
    height: 100% !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.signup-detail-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 20px 45px rgba(0, 40, 120, 0.08) !important;
}

@media (max-width: 991px) {
    .signup-video-card {
        margin-bottom: 30px !important;
        padding: 20px !important;
    }
    .signup-detail-card {
        padding: 20px !important;
    }
    .info-details-row {
        margin-top: 20px !important;
    }
}

/* ==========================================================================
   35. ABOUT US PAGE SPACING & CARD HEADINGS DECORATION SUPPRESSIONS
   ========================================================================== */
/* Reduce empty spacing above Services section on About Us page */
.page-id-1069 #about {
    padding-top: 40px !important;
    padding-bottom: 20px !important;
}

.page-id-1069 #services {
    padding-top: 25px !important;
    padding-bottom: 40px !important;
}

/* Eliminate empty dynamic paragraphs injected between sections */
.page-id-1069 #about + p,
.page-id-1069 #about + p + br,
.page-id-1069 #about + br {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    line-height: 0 !important;
}

/* Remove underlines from Our Mission/Vision/Perspective card headings */
.about-col .title a,
.about-col h2.title a,
.about-col .title a:hover,
.about-col .title a:focus {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Remove underlines from Services section grid card headings */
#services .box .title a,
#services .box:hover .title a,
#services .box .title a:hover,
#services .box .title a:focus {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}


/* ==========================================================================
   36. FOOTER PREMIUM DEEP NAVY BLUE BACKGROUND
   ========================================================================== */
#footer,
#footer .footer-top {
    background: #000E2E !important;
}

/* ==========================================================================
   37. FLOATING CALL & WHATSAPP ACTION BUTTONS
   ========================================================================== */
.ccn-float-call,
.ccn-float-whatsapp {
    position: fixed !important;
    bottom: 24px !important;
    z-index: 99990 !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 26px !important;
    text-decoration: none !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    border: none !important;
}

.ccn-float-call {
    left: 24px !important;
    background: linear-gradient(135deg, #0052cc 0%, #003399 100%) !important;
}

.ccn-float-whatsapp {
    right: 24px !important;
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%) !important;
}

.ccn-float-call:hover,
.ccn-float-whatsapp:hover {
    transform: scale(1.12) translateY(-3px) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.ccn-float-call i,
.ccn-float-whatsapp i {
    color: #ffffff !important;
    line-height: 1 !important;
}

/* Pulse animation on WhatsApp button */
.ccn-float-whatsapp::before {
    content: '' !important;
    position: absolute !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: rgba(37, 211, 102, 0.3) !important;
    animation: ccnWhatsappPulse 2s ease-out infinite !important;
    z-index: -1 !important;
}

@keyframes ccnWhatsappPulse {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* Mobile: slightly smaller and lower position */
@media (max-width: 767px) {
    .ccn-float-call,
    .ccn-float-whatsapp {
        width: 50px !important;
        height: 50px !important;
        bottom: 18px !important;
        font-size: 22px !important;
    }
    .ccn-float-call {
        left: 16px !important;
    }
    .ccn-float-whatsapp {
        right: 16px !important;
    }
    .ccn-float-whatsapp::before {
        width: 50px !important;
        height: 50px !important;
    }
}

/* ==========================================================================
   38. HIDE TAWK.TO CHAT WIDGET
   ========================================================================== */
#tawk-bubble-container,
#tawkchat-container,
#tawkchat-minified-box,
iframe[title*="chat"],
.tawk-min-container,
[class*="tawk"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ==========================================================================
   39. BLOG LISTING PAGE TYPOGRAPHY & OVERRIDES
   ========================================================================== */

/* Blog Post Titles */
.blog-entry-title,
.blog-entry-title a,
.entry-title,
.entry-title a,
#main .blog-entry-title,
#main .blog-entry-title a {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    line-height: 1.4 !important;
    transition: color 0.25s ease !important;
}

.blog-entry-title a:hover,
.entry-title a:hover {
    color: #f68a1e !important;
}

/* Blog Post Meta (Author, Date, Category, Comments) */
.blog-entry ul.meta,
.blog-entry ul.meta li,
.blog-entry ul.meta li a,
.blog-entry ul.meta li i {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 13px !important;
    color: #777777 !important;
}

.blog-entry ul.meta li a:hover {
    color: #f68a1e !important;
}

/* Blog Excerpt / Summary Text */
.blog-entry-summary,
.blog-entry-summary p {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    color: #555555 !important;
}

/* Blog Post "Continue Reading" Link */
.blog-entry-readmore a {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: #f68a1e !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    transition: color 0.25s ease !important;
}

.blog-entry-readmore a:hover {
    color: #c96200 !important;
}


/* ==========================================================================
   40. SINGLE BLOG POST PAGE LAYOUT & DECORATIONS
   ========================================================================== */

/* Single Post Navigation */
.ccn-post-navigation a {
    color: #1a1a2e !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.ccn-post-navigation a:hover {
    color: #f68a1e !important;
    text-decoration: none !important;
}

/* Comments Section Styling overrides */
.ccn-comments-section #reply-title,
.ccn-comments-section .comments-title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    color: #1a1a2e !important;
    margin-bottom: 24px !important;
}

.ccn-comments-section input[type="text"],
.ccn-comments-section input[type="email"],
.ccn-comments-section textarea {
    border: 1px solid #dcdcdc !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.ccn-comments-section input[type="submit"] {
    background: #0052cc !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 24px !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    display: inline-block !important;
    height: auto !important;
    width: auto !important;
}

.ccn-comments-section input[type="submit"]:hover {
    background: #0043a4 !important;
}

/* ==========================================================================
   41. HOMEPAGE BOTTOM SEO OVERVIEW SECTION
   ========================================================================== */
#seo-overview {
    background: #fafbff !important;
    padding: 90px 0 !important;
    border-top: 1px solid #eaeaea !important;
    border-bottom: 1px solid #eaeaea !important;
}

#seo-overview .alternating-row {
    margin-bottom: 90px !important;
}

#seo-overview .alternating-row:last-child {
    margin-bottom: 0 !important;
}

#seo-overview .text-col {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

#seo-overview .service-badge {
    display: inline-block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 6px 14px !important;
    border-radius: 50px !important;
    background: rgba(0, 82, 204, 0.07) !important;
    color: #0052cc !important;
    margin-bottom: 16px !important;
    font-family: 'Montserrat', sans-serif !important;
}

#seo-overview .service-badge.whatsapp {
    background: rgba(40, 189, 134, 0.08) !important;
    color: #28bd86 !important;
}

#seo-overview .service-badge.long-code {
    background: rgba(246, 138, 30, 0.08) !important;
    color: #f68a1e !important;
}

#seo-overview .service-badge.short-code {
    background: rgba(156, 39, 176, 0.08) !important;
    color: #9c27b0 !important;
}

#seo-overview .service-badge.voice {
    background: rgba(233, 30, 99, 0.08) !important;
    color: #e91e63 !important;
}

#seo-overview .service-badge.toll-free {
    background: rgba(0, 150, 136, 0.08) !important;
    color: #009688 !important;
}

#seo-overview .service-badge.missed-call {
    background: rgba(255, 152, 0, 0.08) !important;
    color: #ff9800 !important;
}

#seo-overview .service-badge.virtual-receptionist {
    background: rgba(63, 81, 181, 0.08) !important;
    color: #3f51b5 !important;
}

#seo-overview .service-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin-top: 0 !important;
    margin-bottom: 18px !important;
}

#seo-overview .service-text {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: #4f5e71 !important;
    margin-bottom: 24px !important;
}

#seo-overview .service-link {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0052cc !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
}

#seo-overview .service-link i {
    transition: transform 0.25s ease !important;
}

#seo-overview .service-link:hover {
    color: #0043a4 !important;
}

#seo-overview .service-link:hover i {
    transform: translateX(5px) !important;
}

#seo-overview .service-link.whatsapp {
    color: #28bd86 !important;
}
#seo-overview .service-link.whatsapp:hover {
    color: #1e8e64 !important;
}

#seo-overview .service-link.long-code {
    color: #f68a1e !important;
}
#seo-overview .service-link.long-code:hover {
    color: #d17110 !important;
}

#seo-overview .service-link.short-code {
    color: #9c27b0 !important;
}
#seo-overview .service-link.short-code:hover {
    color: #7b1fa2 !important;
}

#seo-overview .service-link.voice {
    color: #e91e63 !important;
}
#seo-overview .service-link.voice:hover {
    color: #c2185b !important;
}

#seo-overview .service-link.toll-free {
    color: #009688 !important;
}
#seo-overview .service-link.toll-free:hover {
    color: #00796b !important;
}

#seo-overview .service-link.missed-call {
    color: #ff9800 !important;
}
#seo-overview .service-link.missed-call:hover {
    color: #f57c00 !important;
}

#seo-overview .service-link.virtual-receptionist {
    color: #3f51b5 !important;
}
#seo-overview .service-link.virtual-receptionist:hover {
    color: #303f9f !important;
}

#seo-overview .img-col {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

#seo-overview .img-wrapper {
    background: #ffffff !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 15px 40px rgba(0, 40, 120, 0.06) !important;
    border: 1px solid #eef2f6 !important;
    padding: 10px !important;
    display: inline-block !important;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease !important;
    max-width: 100% !important;
}

#seo-overview .img-wrapper img {
    border-radius: 10px !important;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
}

#seo-overview .img-wrapper:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 48px rgba(0, 40, 120, 0.12) !important;
}

/* ==========================================================================
   Why Choose Us — PREMIUM REDESIGN
   ========================================================================== */
#why-choose-us {
    background: linear-gradient(135deg, #f8fafc 0%, #eef3f9 100%) !important;
    padding: 100px 0 110px !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Ambient glow blobs in the background */
#why-choose-us::before {
    content: '' !important;
    position: absolute !important;
    top: -100px !important;
    left: -100px !important;
    width: 500px !important;
    height: 500px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(0, 82, 204, 0.04) 0%, transparent 70%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

#why-choose-us::after {
    content: '' !important;
    position: absolute !important;
    bottom: -100px !important;
    right: -100px !important;
    width: 500px !important;
    height: 500px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(246, 138, 30, 0.03) 0%, transparent 70%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

#why-choose-us .container {
    position: relative !important;
    z-index: 2 !important;
}

/* --- Section Heading --- */
#why-choose-us .title-heading {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 38px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    margin-bottom: 14px !important;
    position: relative !important;
}

#why-choose-us .title-heading::after {
    content: '' !important;
    display: block !important;
    width: 70px !important;
    height: 4px !important;
    background: linear-gradient(90deg, #0052cc, #f68a1e) !important;
    border-radius: 4px !important;
    margin: 14px auto 0 !important;
}

#why-choose-us .section-desc {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 16px !important;
    color: #475569 !important;
    max-width: 600px !important;
    margin: 0 auto 60px !important;
    line-height: 1.7 !important;
}

/* --- Cards --- */
#why-choose-us .why-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%) !important;
    border: 1px solid rgba(0, 82, 204, 0.08) !important;
    border-radius: 20px !important;
    padding: 36px 28px 32px !important;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    height: 100% !important;
    box-shadow: 0 10px 30px rgba(0, 40, 120, 0.03) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
}

/* Glowing top border on each card */
#why-choose-us .why-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, #0052cc 0%, #f68a1e 100%) !important;
    border-radius: 20px 20px 0 0 !important;
    opacity: 1 !important;
}

/* Inner glow shimmer bottom-right */
#why-choose-us .why-card::after {
    content: '' !important;
    position: absolute !important;
    bottom: -60px !important;
    right: -60px !important;
    width: 160px !important;
    height: 160px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(0, 82, 204, 0.02) 0%, transparent 70%) !important;
    pointer-events: none !important;
    transition: all 0.4s ease !important;
}

#why-choose-us .why-card:hover {
    transform: translateY(-10px) !important;
    border-color: rgba(0, 82, 204, 0.2) !important;
    box-shadow:
        0 20px 45px rgba(0, 40, 120, 0.08),
        0 0 0 1px rgba(0, 82, 204, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

#why-choose-us .why-card:hover::after {
    bottom: -20px !important;
    right: -20px !important;
    background: radial-gradient(circle, rgba(0, 82, 204, 0.05) 0%, transparent 70%) !important;
}

/* --- Icon Box --- */
#why-choose-us .why-card .icon-box {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 62px !important;
    height: 62px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, rgba(0, 82, 204, 0.06) 0%, rgba(0, 82, 204, 0.12) 100%) !important;
    color: #0052cc !important;
    font-size: 24px !important;
    margin-bottom: 24px !important;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
    border: 1px solid rgba(0, 82, 204, 0.05) !important;
    box-shadow: 0 6px 15px rgba(0, 82, 204, 0.05) !important;
    position: relative !important;
    z-index: 1 !important;
}

#why-choose-us .why-card:hover .icon-box {
    background: linear-gradient(135deg, #0052cc 0%, #0077ff 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 8px 20px rgba(0, 82, 204, 0.3) !important;
    transform: scale(1.1) translateY(-3px) !important;
}

/* --- Card Text --- */
#why-choose-us .why-card h4 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    color: #0f172a !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.2px !important;
}

#why-choose-us .why-card p {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 13.5px !important;
    line-height: 1.75 !important;
    color: #555555 !important;
    margin: 0 !important;
}

#why-choose-us .why-card:hover p {
    color: #333333 !important;
}

/* --- Responsive --- */
@media (max-width: 991px) {
    #why-choose-us {
        padding: 70px 0 80px !important;
    }
    #why-choose-us .title-heading {
        font-size: 28px !important;
    }
    #why-choose-us .why-card {
        margin-bottom: 24px !important;
    }
}

@media (max-width: 575px) {
    #why-choose-us .title-heading {
        font-size: 24px !important;
    }
}

@media (max-width: 991px) {
    #seo-overview .alternating-row {
        margin-bottom: 60px !important;
    }
    #seo-overview .img-col {
        margin-top: 30px !important;
    }
    .ccn-divider-right {
        border-right: none !important;
        border-bottom: 1px solid rgba(0, 82, 204, 0.08) !important;
        padding-right: 0 !important;
        padding-bottom: 25px !important;
        margin-bottom: 25px !important;
    }
    .ccn-padding-left {
        padding-left: 0 !important;
    }
}

/* ==========================================================================
   42. NEW HOMEPAGE ILLUSTRATION SECTIONS
   ========================================================================== */
.illustration-wrapper img {
    max-width: 100% !important;
    height: auto !important;
    transition: all 0.4s ease !important;
}
.illustration-wrapper img:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 25px 60px rgba(0, 40, 120, 0.15) !important;
}

@media (max-width: 991px) {
    #communication-channels {
        padding: 50px 0 !important;
    }
    #communication-channels .col-lg-6:last-child {
        margin-top: 40px !important;
        padding-left: 15px !important;
    }
    #industry-solutions {
        padding: 50px 0 !important;
    }
    #industry-solutions .row {
        flex-direction: column-reverse !important; /* Stack text above the image for clean reading flow on mobile */
    }
    #industry-solutions .col-lg-6:first-child {
        margin-top: 40px !important;
        padding-right: 15px !important;
    }
}

/* Highly specific rule to completely hide default OceanWP mobile menu icon/toggle and default drawer elements */
body .oceanwp-mobile-menu-icon,
body #site-header .oceanwp-mobile-menu-icon,
body #site-header-inner .oceanwp-mobile-menu-icon,
body .mobile-menu,
body #site-header .mobile-menu,
body #site-header-inner .mobile-menu,
body #oceanwp-mobile-menu-icon,
body #mobile-dropdown,
body #mobile-fullscreen,
body #sidr-main,
body .sidr,
body #mobile-dropdown-dropdown,
body .mobile-nav-frame,
body #mobile-nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   43. HERO SECTION IMPROVEMENTS (Top Badge, Text Gradient, CTAs)
   ========================================================================== */

/* Hero Badge styling */
#intro .hero-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(0, 82, 204, 0.08) !important;
    color: #0052cc !important;
    padding: 6px 16px !important;
    border-radius: 50px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    margin-bottom: 24px !important;
    font-family: 'Montserrat', sans-serif !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}

/* Title text gradient */
#intro h2 .text-gradient {
    background: linear-gradient(135deg, #0052cc 0%, #f68a1e 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block !important;
}

/* CTA button row alignment */
#intro .hero-ctas {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    margin-top: 10px !important;
    margin-bottom: 24px !important;
}

/* Secondary CTA outline button */
#intro .btn-secondary {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 14px 34px !important;
    border-radius: 50px !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
    background: transparent !important;
    color: #0b1120 !important;
    border: 2px solid #dcdcdc !important;
    text-decoration: none !important;
}

#intro .btn-secondary:hover {
    border-color: #0052cc !important;
    color: #0052cc !important;
    transform: translateY(-3px) !important;
}

/* Responsive button rules */
@media (max-width: 991px) {
    #intro .hero-ctas {
        justify-content: center !important;
    }
}

@media (max-width: 575px) {
    #intro .hero-ctas {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }
    #intro .btn-get-started,
    #intro .btn-secondary {
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 !important;
        text-align: center !important;
    }
}


/* Fix Services navigation link casing to Title Case */
#header .nav-menu > li.menu-has-mega-menu > a {
    text-transform: none !important;
}


/* ==========================================================================
   44. CONTACT SECTION — 50/50 TESTIMONIALS + FORM LAYOUT
   ========================================================================== */

/* Remove old section padding */
#contact.section-bg {
    padding: 0 !important;
    background: none !important;
    border: none !important;
    overflow: hidden !important;
}

/* ── LEFT: Testimonials column ── */
.contact-testimonials-col {
    background: linear-gradient(145deg, #f8fbfd 0%, #edf3f9 100%) !important;
    padding: 0 !important;
    display: flex !important;
    align-items: stretch !important;
}

.contact-testimonials-inner {
    padding: 70px 55px 60px !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 680px !important;
}

/* Tag badge */
.contact-section-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    background: rgba(246, 138, 30, 0.12) !important;
    color: #f68a1e !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    padding: 6px 14px !important;
    border-radius: 50px !important;
    margin-bottom: 20px !important;
    width: fit-content !important;
    border: 1px solid rgba(246, 138, 30, 0.2) !important;
}

.contact-section-tag i {
    font-size: 10px !important;
}

.contact-section-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    line-height: 1.3 !important;
}

.contact-section-sub {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 14px !important;
    color: #555555 !important;
    margin-bottom: 30px !important;
    line-height: 1.6 !important;
}

/* Stats row */
.testimonial-stats-row {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    background: rgba(0, 82, 204, 0.03) !important;
    border: 1px solid rgba(0, 82, 204, 0.08) !important;
    border-radius: 14px !important;
    padding: 18px 24px !important;
    margin-bottom: 32px !important;
}

.tstat-item {
    flex: 1 !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.tstat-num {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0052cc !important;
    line-height: 1 !important;
}

.tstat-label {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 11px !important;
    color: #555555 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
}

.tstat-divider {
    width: 1px !important;
    height: 40px !important;
    background: rgba(0, 82, 204, 0.1) !important;
    flex-shrink: 0 !important;
}

/* Testimonial card wrapper */
.testimonial-cards-wrap {
    position: relative !important;
    flex: 1 !important;
}

.testimonial-card {
    display: none !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 82, 204, 0.06) !important;
    border-radius: 18px !important;
    padding: 28px 28px 24px !important;
    position: relative !important;
    box-shadow: 0 10px 30px rgba(0, 40, 120, 0.04) !important;
    animation: fadeSlideIn 0.5s ease forwards !important;
}

.testimonial-card.active-card {
    display: block !important;
}

@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.tcard-quote-icon {
    font-size: 28px !important;
    color: #f68a1e !important;
    opacity: 0.5 !important;
    margin-bottom: 14px !important;
    line-height: 1 !important;
}

.tcard-text {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
    color: #475569 !important;
    margin-bottom: 20px !important;
    font-style: italic !important;
}

.tcard-author {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.tcard-avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #0052cc 0%, #f68a1e 100%) !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.tcard-info {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.tcard-info strong {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

.tcard-info span {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 12px !important;
    color: #555555 !important;
}

.tcard-stars {
    color: #f68a1e !important;
    font-size: 13px !important;
    display: flex !important;
    gap: 2px !important;
}

/* Dots */
.tcard-dots {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 24px !important;
}

.tdot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: rgba(0, 82, 204, 0.15) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
}

.tdot.active {
    background: #f68a1e !important;
    width: 24px !important;
    border-radius: 4px !important;
}

/* ── RIGHT: Contact Form column ── */
.contact-form-col {
    background: #f4f7ff !important;
    padding: 0 !important;
    display: flex !important;
    align-items: stretch !important;
}

.contact-form-inner {
    padding: 70px 55px 60px !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 680px !important;
}

.contact-section-tag.light {
    background: rgba(0, 82, 204, 0.08) !important;
    color: #0052cc !important;
    border-color: rgba(0, 82, 204, 0.15) !important;
}

.contact-form-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    line-height: 1.3 !important;
}

.contact-form-sub {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 14px !important;
    color: #64748b !important;
    margin-bottom: 28px !important;
    line-height: 1.6 !important;
}

/* Override form card style to fit right column */
.contact-form-col .home-contact {
    background: #ffffff !important;
    border: 1px solid #e8edf5 !important;
    border-radius: 18px !important;
    padding: 30px !important;
    box-shadow: 0 8px 30px rgba(0, 40, 120, 0.06) !important;
}

/* Responsive */
@media (max-width: 991px) {
    .contact-testimonials-inner,
    .contact-form-inner {
        padding: 50px 30px !important;
        min-height: auto !important;
    }
    .contact-testimonials-col,
    .contact-form-col {
        min-height: auto !important;
    }
}

@media (max-width: 575px) {
    .contact-testimonials-inner,
    .contact-form-inner {
        padding: 40px 20px !important;
    }
    .contact-section-title,
    .contact-form-title {
        font-size: 24px !important;
    }
}


/* ==========================================================================
   43. OVERRIDES TO REDUCE EXCESSIVE VERTICAL SPACES BETWEEN HOMEPAGE SECTIONS
   ========================================================================== */

/* Global Section Header Spacing Adjustments */
#main .section-header {
    margin-bottom: 20px !important;
}
#main .section-header p,
#main .section-desc {
    margin-bottom: 25px !important;
}

/* Individual Sections Padding Reductions */
#embedded-signup-section {
    padding: 40px 0 50px 0 !important;
}

#services {
    padding: 55px 0 30px 0 !important;
}

#communication-channels {
    padding: 55px 0 !important;
}

#call-to-action {
    padding: 60px 0 !important;
}

#industry-solutions {
    padding: 55px 0 !important;
}

#team {
    padding: 50px 0 !important;
}

#seo-overview {
    padding: 55px 0 !important;
}

#why-choose-us {
    padding: 60px 0 65px 0 !important;
}

.contact-testimonials-inner,
.contact-form-inner {
    padding: 50px 45px 45px !important;
}

@media (max-width: 991px) {
    #embedded-signup-section {
        padding: 40px 0 40px 0 !important;
    }
    #services {
        padding: 40px 0 20px 0 !important;
    }
    #communication-channels {
        padding: 40px 0 !important;
    }
    #call-to-action {
        padding: 45px 0 !important;
    }
    #industry-solutions {
        padding: 40px 0 !important;
    }
    #team {
        padding: 40px 0 !important;
    }
    #seo-overview {
        padding: 40px 0 !important;
    }
    #why-choose-us {
        padding: 45px 0 50px 0 !important;
    }
}


/* ==========================================================================
   44. ABOUT US PAGE CENTER ALIGNMENTS FOR ICONS & HEADINGS (H4/H2)
   ========================================================================== */

/* Fix icon centering when non-breaking space ( ) is present inside the tag */
#services .box .icon i,
#about .about-col .icon i {
    font-size: 0 !important;
    display: inline-block !important;
}
#services .box .icon i::before {
    font-size: 26px !important;
}
#about .about-col .icon i::before {
    font-size: 36px !important;
}

/* Force center h4 and h2 headings in Services and About Us sections */
#services .box h4.title,
#services .box h4.title a,
#services .box h4,
#services .box h4 a {
    text-align: center !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}
#about .about-col h2,
#about .about-col h2.title,
#about .about-col h2 a {
    text-align: center !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}