/* Prevent very early render; we'll reveal when DOM + Tailwind ready  */

/* start hidden to avoid flash-of-unstyled-content (FOUC) */
html {
    background: #f3fdf7;
}

body {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.18s ease;
    overflow-x: hidden;
    background: #f3fdf7;
    color: #1f2937;
}
html,
body {
    font-family: "Montserrat", "Noto Sans Devanagari", system-ui, -apple-system,
        "Segoe UI", Roboto, Arial, sans-serif;
}

/* hide owl until initialized */
.owl-carousel {
    opacity: 0;
    transition: opacity 0.25s ease;
}

/* shows grabbing cursor when dragging */
/* Completely hide scrollbar everywhere */
.hide-scrollbar {
    -ms-overflow-style: none;
    /* IE & Edge */
    scrollbar-width: none;
    /* Firefox */
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Edge */
}

/* after smooth loading */
:root {
    --header-height: 100px;
    --header-top-gap: 20px;
    --green-700: #0b6e37;
    --green-600: #0a733a;
    --accent: #02754b;
}



/* ensure page content sits below the fixed header */
main {
    padding-top: calc(var(--header-height) + var(--header-top-gap));
}

/* small helper to reveal after initialization */
.is-visible {
    visibility: visible !important;
    opacity: 1 !important;
}

/* tighten nav container on small screens and remove default select arrow inconsistencies */
nav.w-full {
    padding-left: 0;
    padding-right: 0;
}

/* remove ugly scrollbar when pill is scrollable (you already use this elsewhere) */
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}










/* ============================================
   TARGETED FIX FOR 1024-1026px CRITICAL RANGE
============================================ */

/* Base/Default (1400px and above) */
.logo-container img {
    height: 110px;
}

/* 1300px to 1399px */
@media (max-width: 1399px) {
    .logo-container img {
        height: 100px;
    }
    .pill-nav ul {
        gap: 14px;
        font-size: 14.5px;
    }
}

/* 1200px to 1299px */
@media (max-width: 1299px) {
    .logo-container img {
        height: 90px;
    }
    .pill-nav ul {
        gap: 12px;
        font-size: 14px;
    }
}

/* 1100px to 1199px */
@media (max-width: 1199px) {
    .logo-container img {
        height: 80px;
    }
    .pill-nav ul {
        gap: 10px;
        font-size: 13.5px;
    }
    .pill-nav > div {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* CRITICAL FIX: 1050px to 1099px */
@media (max-width: 1099px) and (min-width: 1050px) {
    .logo-container img {
        height: 72px !important;
    }
    .pill-nav ul {
        gap: 7px !important;
        font-size: 12.8px !important;
    }
    .pill-nav > div {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* ULTRA-COMPACT: 1024px to 1049px (where it breaks) */
@media (max-width: 1049px) and (min-width: 1024px) {
    .logo-container img {
        height: 68px !important;
        margin-right: 8px !important;
    }
    .pill-nav ul {
        gap: 5px !important;
        font-size: 12.5px !important;
        flex-wrap: nowrap !important;
    }
    .pill-nav > div {
        padding-left: 8px !important;
        padding-right: 8px !important;
        min-width: 0 !important;
    }
    .pill-nav li a {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 80px !important;
    }
    .pill-nav .form-select {
        max-width: 75px !important;
        font-size: 11.5px !important;
        padding: 0.2rem 1.5rem 0.2rem 0.4rem !important;
    }
}

/* Language selector base */
.pill-nav .form-select {
    max-width: 100px;
    font-size: 13px;
    padding: 0.3rem 1.75rem 0.3rem 0.5rem;
}



















/* Flag Icons CSS (for Option 1 & 4) */
@import url('https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.0.0/css/flag-icons.min.css');

/* Custom Language Switcher Styles */
.pill-nav .language-switcher {
    position: relative;
}

.pill-nav .language-dropdown {
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* For Option 5 - Custom select arrow */
.pill-nav select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1rem;
    padding-right: 2.5rem !important;
}

/* Make dropdown work on touch devices */
@media (hover: none) and (pointer: coarse) {
    .group:hover .language-dropdown {
        display: none;
    }
    .group:focus-within .language-dropdown {
        display: block;
    }
}