/* ── Teqmed Biosciences — Custom Styles ── */

/* ── FAQ Section Premium Styles ── */
.teqmed-faq-section {
    background: linear-gradient(135deg, #f8faff 0%, #eef3fb 50%, #f0f4ff 100%);
    position: relative;
    overflow: hidden;
}

.teqmed-faq-section::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -80px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 71, 171, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.teqmed-faq-section::after {
    content: "";
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(18, 146, 238, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

/* ── Left Column: Info Panel ── */
.teqmed-faq-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 71, 171, 0.08);
    color: #0047AB;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 8px 18px;
    margin-bottom: 20px;
}

.teqmed-faq-badge i {
    font-size: 14px;
}

.teqmed-faq-heading {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.2;
    color: #030e22;
    margin-bottom: 18px;
}

.teqmed-faq-heading span {
    background: linear-gradient(90deg, #0047AB, #1292ee);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.teqmed-faq-desc {
    color: #5a6a7e;
    font-size: 16px;
    line-height: 1.85;
    margin-bottom: 30px;
}

.teqmed-faq-stats {
    display: flex;
    gap: 32px;
    margin-bottom: 30px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 71, 171, 0.08);
}

.teqmed-faq-stat {
    text-align: center;
}

.teqmed-faq-stat-number {
    display: block;
    font-size: 32px;
    font-weight: 800;
    color: #0047AB;
    line-height: 1;
    margin-bottom: 4px;
}

.teqmed-faq-stat-label {
    font-size: 12px;
    color: #8a97a8;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
}

/* ── Accordion Items ── */
.teqmed-faq-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.teqmed-faq-item {
    background: #ffffff;
    border: 1px solid rgba(0, 71, 171, 0.07);
    box-shadow: 0 2px 12px rgba(0, 20, 60, 0.04);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.teqmed-faq-item:hover {
    border-color: rgba(0, 71, 171, 0.15);
    box-shadow: 0 6px 24px rgba(0, 20, 60, 0.08);
    transform: translateY(-2px);
}

.teqmed-faq-item.is-active {
    border-color: rgba(0, 71, 171, 0.2);
    box-shadow: 0 8px 30px rgba(0, 20, 60, 0.1);
}

.teqmed-faq-item.is-active .teqmed-faq-number {
    background: #0047AB;
    color: #fff;
}

.teqmed-faq-item.is-active .teqmed-faq-chevron {
    transform: rotate(180deg);
    color: #0047AB;
}

/* ── Question Header ── */
.teqmed-faq-question {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 24px;
    cursor: pointer;
    user-select: none;
    transition: background 0.25s ease;
}

.teqmed-faq-question:hover {
    background: rgba(0, 71, 171, 0.02);
}

.teqmed-faq-number {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 71, 171, 0.06);
    color: #0047AB;
    font-size: 13px;
    font-weight: 800;
    transition: all 0.35s ease;
}

.teqmed-faq-question-text {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    color: #1a2740;
    line-height: 1.45;
    margin: 0;
}

.teqmed-faq-chevron {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8a97a8;
    font-size: 14px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Answer Body ── */
.teqmed-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s ease;
}

.teqmed-faq-answer-inner {
    padding: 0 24px 24px 76px;
    font-size: 15px;
    line-height: 1.85;
    color: #5a6a7e;
    border-top: 1px solid rgba(0, 71, 171, 0.06);
    padding-top: 18px;
    margin-top: 0;
}

.teqmed-faq-item.is-active .teqmed-faq-answer {
    max-height: 300px;
}

/* ── CTA Strip ── */
.teqmed-faq-cta {
    margin-top: 50px;
    background: linear-gradient(135deg, #030e22 0%, #0a1e3d 100%);
    padding: 40px 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}

.teqmed-faq-cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 71, 171, 0.15) 50%, transparent 100%);
    animation: faqCtaSweep 6s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes faqCtaSweep {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.teqmed-faq-cta-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.teqmed-faq-cta-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(77, 163, 255, 0.12);
    font-size: 24px;
    color: #4da3ff;
}

.teqmed-faq-cta-text h4 {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 5px 0;
}

.teqmed-faq-cta-text p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    margin: 0;
    line-height: 1.6;
}

.teqmed-faq-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #0047AB;
    color: #fff;
    padding: 14px 30px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    text-decoration: none;
    transition: all 0.35s ease;
    position: relative;
    z-index: 1;
    border: none;
}

.teqmed-faq-cta-btn:hover {
    background: #1292ee;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 71, 171, 0.35);
}

.teqmed-faq-cta-btn i {
    transition: transform 0.3s ease;
}

.teqmed-faq-cta-btn:hover i {
    transform: translateX(4px);
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .teqmed-faq-heading {
        font-size: 30px;
    }

    .teqmed-faq-stats {
        gap: 20px;
    }

    .teqmed-faq-stat-number {
        font-size: 26px;
    }

    .teqmed-faq-cta {
        padding: 30px 28px;
    }
}

@media (max-width: 767px) {
    .teqmed-faq-heading {
        font-size: 26px;
    }

    .teqmed-faq-question {
        padding: 18px 18px;
        gap: 12px;
    }

    .teqmed-faq-question-text {
        font-size: 15px;
    }

    .teqmed-faq-answer-inner {
        padding: 0 18px 20px 18px;
    }

    .teqmed-faq-number {
        width: 30px;
        height: 30px;
        font-size: 11px;
    }

    .teqmed-faq-cta {
        flex-direction: column;
        text-align: center;
        padding: 28px 22px;
    }

    .teqmed-faq-cta-inner {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .teqmed-faq-cta-btn {
        width: 100%;
        justify-content: center;
    }

    .teqmed-faq-stats {
        justify-content: center;
    }
}

/* ── Logo Styles (works with template's existing header layout) ── */

/* Widen the logo container — template default is 158px, too small for our image logo */
.header-logo a {
    max-width: 200px !important;
}

/* Override template's width:100% on img — use auto width with height constraint instead */
.header-logo a img.main-logo {
    width: auto !important;
    max-height: 60px;
    padding: 10px 0;
    transition: opacity 0.3s ease;
}

/* Keep consistent logo size in sticky state */
.header-section.is-sticky .header-logo a img.main-logo {
    max-height: 60px !important;
    padding: 10px 0 !important;
}

/* Hover effect */
.header-logo a:hover img.main-logo {
    opacity: 0.85;
}

/* ── Footer Logo ── */
.footer-logo a {
    display: inline-block;
}

.footer-logo img.f-logo {
    max-height: 90px;
    width: auto;
    transition: opacity 0.3s ease;
}

.footer-logo a:hover img.f-logo {
    opacity: 0.85;
}

/* ── Mobile Menu Logo ── */
.mobile-menu-logo a {
    display: inline-block;
}

.mobile-menu-logo img.m-logo {
    max-height: 45px;
    width: auto;
}

/* ── Responsive: Tablet ── */
@media (max-width: 1199px) {
    .header-logo a img.main-logo {
        max-height: 50px;
    }
}

/* ── Responsive: Mobile ── */
@media (max-width: 767px) {
    .header-logo a {
        max-width: 160px !important;
    }

    .header-logo a img.main-logo {
        max-height: 42px;
    }

    .footer-logo img.f-logo {
        max-height: 70px;
    }
}

@media (max-width: 479px) {
    .header-logo a {
        max-width: 140px !important;
    }

    .header-logo a img.main-logo {
        max-height: 50px;
    }
}

/* ── Navigation Sub-Menu Fix ── */

/* Create an invisible bridge on the parent <li> extending downwards. 
   This ensures that when the cursor moves from the menu item to the dropdown, 
   the hover state is not lost in the margin gap, even during the visibility transition delay. */
.site-main-menu>ul>li::after {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 20px;
    background: transparent;
    z-index: 1;
}

/* Ensure the header containers do not clip the dropdowns */
.header-section,
.header-inner,
.header-section .container,
.header-section .row {
    overflow: visible !important;
}

/* ── Sticky Header Sub-Menu Visibility Fix ── */

/* Force sub-menu links and their inner text spans to remain dark/visible when the header is sticky */
.header-section.is-sticky .site-main-menu .sub-menu li a,
.header-section.is-sticky .site-main-menu .sub-menu li a span,
.header-section.is-sticky .site-main-menu .mega-menu li a,
.header-section.is-sticky .site-main-menu .mega-menu li a span {
    color: #748494 !important;
}

.header-section.is-sticky .site-main-menu .sub-menu li a:hover,
.header-section.is-sticky .site-main-menu .sub-menu li a:hover span,
.header-section.is-sticky .site-main-menu .sub-menu li.active>a,
.header-section.is-sticky .site-main-menu .sub-menu li.active>a span,
.header-section.is-sticky .site-main-menu .mega-menu li a:hover,
.header-section.is-sticky .site-main-menu .mega-menu li a:hover span,
.header-section.is-sticky .site-main-menu .mega-menu li.active>a,
.header-section.is-sticky .site-main-menu .mega-menu li.active>a span {
    color: #1292ee !important;
}

/* Ensure the submenu toggle arrow is also visible */
.header-section.is-sticky .site-main-menu .sub-menu li.has-children>a .menu-text::after,
.header-section.is-sticky .site-main-menu .mega-menu li.has-children>a .menu-text::after {
    color: #748494 !important;
}

/* ── Responsive & Sticky Header Fixes ── */

/* Fix horizontal overflow on sticky header caused by aurora background */
@media only screen and (max-width: 1199px) {
    .header-section.is-sticky .header-inner {
        overflow: hidden !important;
        /* Clip the 300% width ::before element on mobile/tablet */
        width: 100% !important;
        max-width: 100vw !important;
        left: 0 !important;
    }

    /* Ensure the main header section itself doesn't cause overflow on mobile */
    .header-section {
        overflow-x: hidden !important;
        width: 100% !important;
    }
}

/* Ensure the container inside sticky header doesn't exceed viewport on mobile/tablet */
@media only screen and (max-width: 1199px) {
    .header-section.is-sticky .header-inner>.container {
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* Fix mobile toggle button visibility and spacing on scroll */
.header-section.is-sticky .header-mobile-menu-toggle {
    margin-right: 5px !important;
}

.header-section.is-sticky .header-mobile-menu-toggle .toggle {
    padding: 8px;
    background: rgba(255, 255, 255, 0.05);
    /* Subtle background for better visibility */
    border-radius: 4px;
}

/* ── Premium Right-Side Mobile Sidebar Navigation (Slide-Over) ── */

/* Disable page shifting on menu open to prevent layout thrashing and jitter */
.mobile-menu-open #page {
    transform: none !important;
}

/* Ensure the body remains unscrollable while menu is open */
body.mobile-menu-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* Base style for the drawer overlay */
.site-main-mobile-menu {
    position: fixed !important;
    z-index: 1000000 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    visibility: hidden !important;
    opacity: 0 !important;
    background: rgba(3, 14, 34, 0.4) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* Open state for the overlay */
.mobile-menu-open .site-main-mobile-menu {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Menu Inner Panel - positioning it on the RIGHT */
.site-main-mobile-menu-inner {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 340px !important;
    height: 100vh !important;
    background: rgba(3, 14, 34, 0.85) !important; /* Premium dark background */
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.3) !important;
    transform: translateX(100%) !important; /* Start offscreen on the right */
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Slide in from right on open */
.mobile-menu-open .site-main-mobile-menu-inner {
    transform: translateX(0) !important;
}

@media only screen and (max-width: 479px) {
    .site-main-mobile-menu-inner {
        width: 290px !important;
    }
}

/* Remove default template's image/overlay background */
.site-main-mobile-menu-inner::before {
    display: none !important;
}

/* Premium Header inside Mobile Menu */
.mobile-menu-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 24px 28px !important;
    background: rgba(3, 14, 34, 0.4) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.mobile-menu-logo a img.m-logo {
    max-height: 38px !important;
    width: auto !important;
}

/* Premium Close Button with micro-animations */
.mobile-menu-close .toggle {
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    padding: 0 !important;
}

.mobile-menu-close .toggle:hover {
    background: rgba(18, 146, 238, 0.15) !important;
    border-color: rgba(18, 146, 238, 0.3) !important;
    transform: rotate(90deg) !important;
}

.mobile-menu-close .toggle i {
    width: 18px !important;
    height: 2px !important;
    background-color: #ffffff !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    margin-top: -1px !important;
    margin-left: -9px !important;
    transition: background-color 0.3s ease !important;
}

.mobile-menu-close .toggle i::before,
.mobile-menu-close .toggle i::after {
    display: none !important;
}

.mobile-menu-close .toggle i.icon-top {
    transform: rotate(45deg) !important;
}

.mobile-menu-close .toggle i.icon-bottom {
    transform: rotate(-45deg) !important;
}

/* Premium Content & Typography */
.mobile-menu-content {
    padding: 25px 28px 28px !important;
    height: calc(100% - 85px) !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Let the nav section grow, push footer to bottom */
.mobile-menu-content .site-mobile-menu {
    flex: 1 1 auto;
}

/* Mobile Menu Footer — Social Icons + Copyright */
.mobile-menu-bottom {
    flex-shrink: 0;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}

.mobile-menu-social {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
}

.mobile-menu-social a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 16px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.mobile-menu-social a:hover {
    background: rgba(18, 146, 238, 0.15);
    border-color: rgba(18, 146, 238, 0.3);
    color: #1292ee !important;
    transform: translateY(-2px);
}

.mobile-menu-copyright {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 11px !important;
    line-height: 1.6;
    margin: 0 !important;
}

.site-mobile-menu > ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.site-mobile-menu > ul > li {
    margin-bottom: 4px !important;
    border-bottom: none !important;
}

.site-mobile-menu > ul > li + li > a {
    border-top: none !important;
}

.site-mobile-menu > ul > li > a {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #f0f4f8 !important;
    padding: 14px 0 !important;
    display: flex !important;
    align-items: center !important;
    letter-spacing: 0.3px !important;
    transition: all 0.3s ease !important;
    border-bottom: none !important;
}

.site-mobile-menu > ul > li > a:hover,
.site-mobile-menu > ul > li.open > a {
    color: #1292ee !important;
    transform: translateX(4px) !important;
}

/* Dropdown Sub-menu within sidebar */
.site-mobile-menu .sub-menu {
    display: none;
    margin: 4px 0 10px 15px !important;
    padding-left: 12px !important;
    border-left: 2px solid rgba(18, 146, 238, 0.15) !important;
    list-style: none !important;
}

.site-mobile-menu .sub-menu li > a {
    font-size: 14px !important;
    color: rgba(240, 244, 248, 0.7) !important;
    padding: 8px 0 !important;
    display: block !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

.site-mobile-menu .sub-menu li > a:hover {
    color: #1292ee !important;
    padding-left: 6px !important;
}

/* Expand arrow/toggle for accordion dropdown items */
.site-mobile-menu > ul > li .menu-toggle {
    width: 34px !important;
    height: 34px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    top: 6px !important;
    right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.site-mobile-menu > ul > li .menu-toggle i {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    transition: transform 0.3s ease !important;
}

.site-mobile-menu > ul > li.open > .menu-toggle {
    background: rgba(18, 146, 238, 0.1) !important;
    border-color: rgba(18, 146, 238, 0.2) !important;
}

.site-mobile-menu > ul > li.open > .menu-toggle i {
    color: #1292ee !important;
    transform: rotate(180deg) !important;
}

/* Prevent horizontal scroll on the entire body when menu is open or header is sticky */
body {
    overflow-x: hidden !important;
    width: 100%;
    position: relative;
}

/* Ensure fixed header doesn't jump or cause layout shift */
.header-section.is-sticky {
    z-index: 9999 !important;
}

/* Ensure the hamburger icon lines are white on dark sticky header */
.header-section.is-sticky .header-mobile-menu-toggle .toggle i::before,
.header-section.is-sticky .header-mobile-menu-toggle .toggle i::after {
    background-color: #ffffff !important;
}

/* Ensure the middle bar of the hamburger is also visible in sticky state */
.header-section.is-sticky .header-mobile-menu-toggle .toggle i.icon-middle {
    background-color: #ffffff !important;
}


/* ── Contact Page Enhancements ── */

/* Improve visibility of icons in Get in Touch section */
.contact-info.info-light .icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-info.info-light .icon svg,
.contact-info.info-light .icon img {
    width: 100% !important;
    height: auto !important;
}

/* Force white color for SVG paths in light info boxes */
.contact-info.info-light .icon svg path,
.contact-info.info-light .icon svg circle,
.contact-info.info-light .icon svg rect,
.contact-info.info-light .icon svg polyline,
.contact-info.info-light .icon svg polygon {
    stroke: #ffffff !important;
    fill: none;
    /* Linea icons are usually stroke-based */
}

/* For icons that might use fill instead */
.contact-info.info-light .icon svg [fill]:not([fill="none"]) {
    fill: #ffffff !important;
}

/* Improve text contrast in dark background contact sections */
.contact-info.info-light .info .title {
    color: #ffffff !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
}

.contact-info.info-light .info .info-text,
.contact-info.info-light .info .info-text a {
    color: rgba(255, 255, 255, 0.8) !important;
    transition: color 0.3s ease;
}

.contact-info.info-light .info .info-text a:hover {
    color: #ffffff !important;
}

/* Breadcrumb / Page Title visibility */
.page-title-section {
    background-position: center center !important;
    background-size: cover !important;
}

.page-title-section .title {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* ── Hide Search Section Globally ── */
.header-search-area,
.header-search,
.main-search-active {
    display: none !important;
}