/*Fonts*/
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Cambo&family=Fuzzy+Bubbles:wght@400;700&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&family=Vidaloka&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alkatra:wght@400..700&family=Archivo+Black&family=Cambo&family=Fuzzy+Bubbles:wght@400;700&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&family=Vidaloka&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alkatra:wght@400..700&family=Arbutus+Slab&family=Archivo+Black&family=Cambo&family=Fuzzy+Bubbles:wght@400;700&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&family=Vidaloka&display=swap');

/* =========================
   Font Variables
========================= */
/* Scrollbar Base */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f3f4f6; /* gray-100 */
    border-radius: 5px;
}

/* Thumb */
::-webkit-scrollbar-thumb {
    background: #411e75; /* gray-400 */
    border-radius: 5px;
    transition: background 0.3s ease;
}


:root {
    --font-heading: "Cambo", serif;
    --font-subheading: "Vidaloka", serif;
    --font-body: "IBM Plex Sans", sans-serif;
    --font-highlight: "Fuzzy Bubbles", cursive;
    --font-accent: "Alkatra", cursive;
    --font-display: "Archivo Black", sans-serif;
    --font-card: "Arbutus Slab", serif;
}

body{
font-family: var(--font-body);
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

 .tab-active {
    border-bottom: 3px solid #0056b3;
    color: #0056b3;
    font-weight: 700;
}


/*==============================
Who we are CSS
==================================*/
 .tab-btn {
    @apply relative flex-shrink-0 pb-5 font-bold text-gray-400 transition-all duration-300;
}

.tab-btn::after {
    content: "";
    @apply absolute left-0 bottom-0 h-[3px] w-full bg-yellow-400;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}

.tab-btn.active {
    @apply text-black;
}

.tab-btn.active::after {
    transform: scaleX(1);
}

/* =========================
   Heading Fonts
========================= */
.font-heading {
    font-family: var(--font-heading);
    font-weight: 800;
}

.font-subheading {
    font-family: var(--font-subheading);
    font-weight: 400;
}

.font-display {
    font-family: var(--font-display);
    font-weight: 400; /* Archivo Black only has one weight */
}

/* =========================
   Body Font
========================= */
.font-body-light {
    font-family: var(--font-body);
    font-weight: 300;
}

.font-body-regular {
    font-family: var(--font-body);
    font-weight: 400;
}

.font-body-medium {
    font-family: var(--font-body);
    font-weight: 500;
}

.font-body-semibold {
    font-family: var(--font-body);
    font-weight: 600;
}

.font-body-bold {
    font-family: var(--font-body);
    font-weight: 700;
}

/* =========================
   Fuzzy Bubbles
========================= */
.font-highlight {
    font-family: var(--font-highlight);
    font-weight: 400;
}

.font-highlight-bold {
    font-family: var(--font-highlight);
    font-weight: 700;
}

/* =========================
   Alkatra
========================= */
.font-accent-light {
    font-family: var(--font-accent);
    font-weight: 400;
}

.font-accent-medium {
    font-family: var(--font-accent);
    font-weight: 500;
}

.font-accent-semibold {
    font-family: var(--font-accent);
    font-weight: 600;
}

.font-accent-bold {
    font-family: var(--font-accent);
    font-weight: 700;
}

/* =========================
   Card Font
========================= */
.font-card {
    font-family: var(--font-card);
    font-weight: 400;
}

/* Custom styles for smoother transitions and accessibility */
        .focus-ring:focus {
            outline: 2px solid #FFC107;
            outline-offset: 2px;
        }
        .transition-all {
            transition: all 0.3s ease;
        }
        @media (prefers-reduced-motion: reduce) {
            * {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }

          /* Smooth submenu animations using CSS transitions */
        .submenu {
            opacity: 0;
            visibility: hidden;
            transform: translateY(8px) scale(0.98);
            transition: opacity 200ms ease-out, transform 200ms ease-out, visibility 200ms;
        }

        .group:hover > .submenu,
        .group:focus-within > .submenu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
        }

        /* Nested submenu positioning */
        .submenu-nested {
            opacity: 0;
            visibility: hidden;
            transform: translateX(-8px);
            transition: opacity 200ms ease-out, transform 200ms ease-out, visibility 200ms;
        }

        .group-nested:hover > .submenu-nested,
        .group-nested:focus-within > .submenu-nested {
            opacity: 1;
            visibility: visible;
            transform: translateX(0);
        }

        /* Custom scrollbar for overflow */
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: transparent;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background-color: var(--color-medical-300);
            border-radius: 20px;
        }

        /* Mobile menu transition */
        #mobile-menu {
            transition: max-height 300ms ease-in-out, opacity 300ms ease-in-out;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
        }
        #mobile-menu.open {
            max-height: 100vh;
            opacity: 1;
        }

        @media (min-width: 768px) and (max-width: 1024px) {
    .tablet\:left-auto {
        left: auto !important;
    }
    .tablet\:right-full {
        right: 100% !important;
    }
    .tablet\:mr-2 {
        margin-right: 0.5rem;
    }
}

.policy-section{
    scroll-margin-top:140px;
}

 /* Custom input style for bottom border only */
        .input-underline {
            border: none;
            border-bottom: 1px solid #d1d5db; /* gray-300 */
            border-radius: 0;
            padding-left: 0;
            padding-right: 0;
            background-color: transparent;
        }
        .input-underline:focus {
            outline: none;
            border-bottom-color: #311b52; /* brand-indigo */
            box-shadow: 0 1px 0 0 #311b52;
        }