@charset "UTF-8";

/* ==========================================================================
   STYLE.CSS — Cleaned, responsive, single-file stylesheet
   Theme: Blue (#2361b9) / Red (#E80F0F)
   --------------------------------------------------------------------------
   Sections:
     1.  Fonts
     2.  Design tokens (CSS variables)
     3.  Base / reset & typography
     4.  Navbar
     5.  Header title
     6.  Circular slider (fully responsive)
     7.  Title box
     8.  Accordion
     9.  Sidebar + layout
     10. Buttons
     11. Utilities
     12. Keyframes / animations
     13. Responsive breakpoints (mobile-first, non-overlapping)
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. FONTS
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'kalimati';
    src: url('../../../fonts/kalimati regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* --------------------------------------------------------------------------
   2. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* Brand colors */
    --main_blue: #2361b9;
    --main_blue-dark: #1a4a90;
    --main_red: #E80F0F;
    --main_red-dark: #c00c0c;
    /* Neutrals */
    --white: #ffffff;
    --ink: #222222;
    --ink-soft: #555555;
    --line: rgba(0, 0, 0, 0.06);
    --line-strong: #e6e6e6;
    --surface: #f7f9fc;
    /* Shadows */
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 14px 30px rgba(0, 0, 0, 0.13);
    --shadow-lg: 0 24px 50px rgba(0, 0, 0, 0.18);
    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 999px;
    /* Layout */
    --sidebar-w: 270px;
    --sidebar-w-min: 220px;
    --container-max: 1200px;
    --content-pad: clamp(0.9rem, 3vw, 2rem);
    /* Motion */
    --t-fast: 0.2s ease;
    --t-mid: 0.35s ease;
    --t-slow: 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    /* Fluid type scale (replaces fixed px sizes) */
    --fs-body: clamp(15px, 1.6vw, 17px);
    --fs-h2: clamp(1.1rem, 2.4vw, 1.6rem);
    /* Circular slider base size — everything scales from this */
    --circle-size: clamp(280px, 86vmin, 500px);
    --dot-size: clamp(54px, 13vmin, 80px);
    --svg-size: clamp(80px, 30vmin, 180px);
}


/* --------------------------------------------------------------------------
   3. BASE / RESET & TYPOGRAPHY
   -------------------------------------------------------------------------- */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: 'kalimati', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
    font-size: var(--fs-body);
    line-height: 1.7;
    color: var(--ink);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--main_blue);
    text-decoration: none;
    transition: color var(--t-fast);
}

    a:hover {
        color: var(--main_red);
    }


/* --------------------------------------------------------------------------
   4. NAVBAR
   -------------------------------------------------------------------------- */
.navbar-light .navbar-nav .nav-link1,
.navbar-light .navbar-nav .nav-link {
    color: var(--main_blue);
    font-weight: 600;
    letter-spacing: 0.4px;
    padding: 0.5rem 0.9rem !important;
    transition: color var(--t-fast);
    position: relative;
}

    .navbar-light .navbar-nav .nav-link1::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0.2rem;
        width: 0;
        height: 2px;
        background: var(--main_red);
        transition: width var(--t-mid), left var(--t-mid);
    }

    .navbar-light .navbar-nav .nav-link1:focus,
    .navbar-light .navbar-nav .nav-link1:hover {
        color: var(--main_red) !important;
    }

        .navbar-light .navbar-nav .nav-link1:focus::after,
        .navbar-light .navbar-nav .nav-link1:hover::after {
            width: 60%;
            left: 20%;
        }


/* --------------------------------------------------------------------------
   5. HEADER & NAVBAR (REFINED)
   -------------------------------------------------------------------------- */
.header {
    position: sticky;
    top: 0;
    z-index: 1050;
    background: linear-gradient(135deg, var(--main_blue-dark) 0%, var(--main_blue) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 3px solid var(--gold);
    box-shadow: var(--shadow-md);
}

.header-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 70px;
    gap: 1.5rem;
}

.header-title {
    color: var(--white);
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
}

/* Navbar Customization */
.navbar {
    padding: 0;
    flex-grow: 1;
    justify-content: center;
}

.nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 500;
    padding: 0.5rem 1rem !important;
    margin: 0 0.2rem;
    border-radius: var(--radius-sm);
    transition: all var(--t-fast);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .nav-link:hover {
        color: var(--white) !important;
        background: rgba(255, 255, 255, 0.1);
    }

    .nav-link.active {
        color: var(--white) !important;
        background: rgba(0, 0, 0, 0.15);
    }

        .nav-link.active::after {
            content: '';
            position: absolute;
            bottom: 5px;
            left: 20%;
            right: 20%;
            height: 3px;
            background: linear-gradient(90deg, var(--gold), var(--main_red));
            border-radius: 10px;
        }

/* Login Button */
.btn-login {
    background: transparent;
    color: var(--white);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-pill);
    font-size: 0.9rem;
    font-weight: 600;
    transition: all var(--t-fast);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none !important;
}

    .btn-login:hover {
        background: var(--gold);
        color: var(--main_blue-dark) !important;
        border-color: var(--gold);
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
    }

/* Dropdown styling */
.dropdown-menu {
    border: none;
    border-radius: var(--radius-md);
    padding: 0.5rem;
    margin-top: 10px;
}

.dropdown-item {
    border-radius: var(--radius-sm);
    padding: 0.6rem 1rem;
    color: var(--main_blue-dark);
    font-weight: 500;
}

    .dropdown-item i {
        width: 20px;
        color: var(--main_blue);
    }

/* ============================================
   Mobile Adjustments
   ============================================ */

/* Small devices (phones, ≤ 425px) */
@media (max-width: 425px) {

    .header-wrapper {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        padding: 0.6rem 0;
        gap: 0.4rem;
    }

    /* Brand takes full first row or flexible space */
    .header-brand {
        flex: 1 1 auto;
        min-width: 0; /* allow title to shrink/truncate */
        order: 1;
    }

    .header-title {
        font-size: 0.85rem;
        line-height: 1.3;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    /* Navbar + toggler — sits with login on the right */
    .navbar {
        flex: 0 0 auto;
        order: 2;
        padding: 0;
    }

    .navbar-toggler {
        border: 1px solid rgba(255, 255, 255, 0.5);
        padding: 0.3rem 0.5rem;
        font-size: 1rem;
        line-height: 1;
        border-radius: var(--radius-md, 0.35rem);
        background: transparent;
    }

        .navbar-toggler:focus {
            outline: none;
            box-shadow: 0 0 0 0.15rem rgba(255, 255, 255, 0.25);
        }

    /* Login button — fixed next to toggler */
    .header-actions {
        flex: 0 0 auto;
        order: 3;
        display: flex;
        align-items: center;
        margin-left: 0.35rem;
    }

    .btn-login {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.35rem 0.65rem;
        font-size: 0.8rem;
        font-weight: 600;
        white-space: nowrap;
        border-radius: var(--radius-md, 0.35rem);
        line-height: 1.2;
        /* keep visible & tappable on tiny screens */
        min-height: 2rem;
    }

    /* Collapsed menu spans full width under brand + actions */
    .navbar-collapse {
        flex-basis: 100%;
        order: 4;
        width: 100%;
        background: var(--white, #fff);
        margin-top: 0.75rem;
        border-radius: var(--radius-md, 0.35rem);
        padding: 0.75rem;
        box-shadow: var(--shadow-lg, 0 10px 25px rgba(0, 0, 0, 0.12));
        justify-content: center !important;
    }

    .nav-link {
        color: var(--main_blue-dark, #0b3d5c) !important;
        margin: 0.15rem 0;
        padding: 0.5rem 0.6rem;
        font-size: 0.9rem;
        border-radius: var(--radius-sm, 0.25rem);
    }

        .nav-link:hover,
        .nav-link:focus {
            background: rgba(0, 0, 0, 0.04);
        }

        .nav-link.active::after {
            display: none;
        }

    /* Dropdown items on mobile */
    .dropdown-menu {
        border: none;
        box-shadow: none;
        padding-left: 0.75rem;
        position: static !important;
        float: none;
        width: 100%;
        margin-top: 0;
        background: transparent;
    }

    .dropdown-item {
        padding: 0.45rem 0.6rem;
        font-size: 0.88rem;
        border-radius: var(--radius-sm, 0.25rem);
    }

    .dropdown-divider {
        margin: 0.35rem 0;
    }
}

/* Tablets / medium devices (≤ 991.98px) — keep existing rules, refined */
@media (max-width: 991.98px) {

    .header-wrapper {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        padding: 0.8rem 0;
        gap: 0.5rem;
    }

    .header-brand {
        flex: 1 1 auto;
        min-width: 0;
    }

    .navbar {
        flex: 0 0 auto;
        padding: 0;
    }

    .header-actions {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
    }

    /* Login stays visible beside toggler (not hidden inside collapse) */
    .btn-login {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        white-space: nowrap;
    }

    .navbar-collapse {
        flex-basis: 100%;
        width: 100%;
        background: var(--white, #fff);
        margin-top: 1rem;
        border-radius: var(--radius-md, 0.35rem);
        padding: 1rem;
        box-shadow: var(--shadow-lg, 0 10px 25px rgba(0, 0, 0, 0.12));
        justify-content: center !important;
    }

    .nav-link {
        color: var(--main_blue-dark, #0b3d5c) !important;
        margin: 0.2rem 0;
    }

        .nav-link.active::after {
            display: none;
        }

    .header-title {
        font-size: 1rem;
    }

    /* Static dropdown when menu is collapsed (Bootstrap pattern) */
    .navbar-collapse .dropdown-menu {
        position: static;
        float: none;
        width: 100%;
        box-shadow: none;
        border: none;
        background: transparent;
        padding-left: 0.75rem;
    }
}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-collapse {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
        justify-content: center !important;
    }
}

/* Extra-small polish: very narrow phones */
@media (max-width: 360px) {

    .header-title {
        font-size: 0.75rem;
    }

    .btn-login {
        padding: 0.3rem 0.5rem;
        font-size: 0.75rem;
    }

        /* Optional: hide "लग्इन" text, keep icon only if space is tight */
        .btn-login .login-text {
            display: none;
        }
}

    /* --------------------------------------------------------------------------
   6. CIRCULAR SLIDER (fully responsive)
   The container size is fluid via --circle-size; every inner element
   (dots, ring, content) is sized relative to it so the whole thing scales.
   -------------------------------------------------------------------------- */
    .holderCircle {
        width: var(--circle-size);
        aspect-ratio: 1 / 1;
        margin: clamp(1.5rem, 5vw, 3.5rem) auto;
        position: relative;
    }

    /* Rotating dotted ring — inset keeps it centred at any size */
    .round {
        position: absolute;
        inset: 9%;
        border: 2px dotted var(--main_blue);
        border-radius: 50%;
        -webkit-animation: rotation 100s infinite linear;
        animation: rotation 100s infinite linear;
    }

    /* Layer that holds the clickable dots */
    .dotCircle {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        z-index: 20;
    }

        .dotCircle .itemDot {
            display: flex;
            align-items: center;
            justify-content: center;
            width: var(--dot-size);
            height: var(--dot-size);
            position: absolute;
            background: var(--white);
            color: var(--main_blue);
            border-radius: var(--radius-lg);
            font-size: clamp(22px, 5.5vmin, 34px);
            text-align: center;
            z-index: 3;
            cursor: pointer;
            border: 2px solid var(--line-strong);
            box-shadow: var(--shadow-sm);
            transition: transform var(--t-mid), background var(--t-mid), color var(--t-mid), border-color var(--t-mid), box-shadow var(--t-mid);
        }

            .dotCircle .itemDot:hover {
                transform: scale(1.08);
            }

            .dotCircle .itemDot:hover,
            .dotCircle .itemDot.active {
                color: var(--white);
                background: var(--main_red);
                border-color: var(--white);
                box-shadow: var(--shadow-md);
            }

            /* Small decorative marker shown on the active dot */
            .dotCircle .itemDot .forActive {
                width: 64%;
                height: 64%;
                position: absolute;
                inset: 0;
                margin: auto;
                display: none;
                pointer-events: none;
            }

                .dotCircle .itemDot .forActive::after {
                    content: '';
                    width: 6px;
                    height: 6px;
                    border: 3px solid var(--main_red);
                    bottom: -26px;
                    left: -12px;
                    filter: blur(1px);
                    position: absolute;
                    border-radius: 50%;
                }

                .dotCircle .itemDot .forActive::before {
                    content: '';
                    width: 7px;
                    height: 7px;
                    filter: blur(5px);
                    top: -14px;
                    right: -34px;
                    position: absolute;
                    transform: rotate(-45deg);
                    border: 6px solid var(--main_red);
                }

            .dotCircle .itemDot.active .forActive {
                display: block;
            }

    /* Centre content area */
    .contentCircle {
        width: 52%;
        aspect-ratio: 1 / 1;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: var(--ink);
    }

        .contentCircle .CirItem {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.3rem;
            text-align: center;
            padding: 1rem;
            border-radius: 50%;
            opacity: 0;
            transform: scale(0);
            transition: opacity var(--t-slow), transform var(--t-slow);
            font-size: clamp(13px, 1.8vmin, 15px);
        }

    .CirItem.active {
        opacity: 1;
        transform: scale(1);
        z-index: 1;
    }

    .CirItem h2 {
        margin: 0;
        font-size: var(--fs-h2);
        color: var(--main_blue);
        font-weight: 700;
    }

    .CirItem p {
        margin: 0;
        color: var(--ink-soft);
        max-width: 22ch;
    }

    /* Watermark icon behind the centre content */
    .contentCircle .CirItem svg {
        font-size: var(--svg-size);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: var(--ink);
        opacity: 0.08;
        pointer-events: none;
    }

    .svg-inline--fa {
        vertical-align: 0.3em;
    }


    /* --------------------------------------------------------------------------
   7. TITLE BOX
   -------------------------------------------------------------------------- */
    .title-box .title {
        font-weight: 600;
        letter-spacing: 2px;
        position: relative;
        z-index: -1;
    }

    .title-box span {
        text-shadow: 0 10px 14px rgba(0, 0, 0, 0.15);
        font-weight: 800;
        color: var(--main_red);
    }

    .title-box p {
        font-size: var(--fs-body);
        line-height: 2em;
        color: var(--ink-soft);
    }


    /* --------------------------------------------------------------------------
   8. ACCORDION
   -------------------------------------------------------------------------- */
    #accordion .card-header {
        margin-bottom: 8px;
        background: transparent;
        border: none;
    }

    #accordion .accordion-title {
        position: relative;
        display: block;
        padding: 0.75rem 0.75rem 0.75rem 3.25rem;
        background: var(--main_blue);
        border-radius: var(--radius-sm);
        overflow: hidden;
        color: var(--white);
        font-size: clamp(14px, 1.8vw, 16px);
        font-weight: 700;
        width: 100%;
        text-align: left;
        transition: padding var(--t-mid), background var(--t-mid), color var(--t-mid);
    }

        #accordion .accordion-title i {
            position: absolute;
            width: 2.6rem;
            height: 100%;
            left: 0;
            top: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--white);
            background: var(--main_red);
            border-right: 1px solid transparent;
            transition: border-color var(--t-mid);
        }

        #accordion .accordion-title:hover {
            padding-left: 3.75rem;
            background: var(--main_blue-dark);
            color: var(--white);
        }

            #accordion .accordion-title:hover i {
                border-right-color: var(--white);
            }

    #accordion [aria-expanded="true"] {
        background: var(--main_blue);
        color: var(--white);
    }

        #accordion [aria-expanded="true"] i {
            color: var(--white);
            background: var(--main_red);
        }

            /* Switch the +/- glyph when open */
            #accordion [aria-expanded="true"] i::before {
                content: "\f068"; /* fa-minus */
            }

    #accordion .accordion-body {
        padding: 0.75rem 0.5rem;
        color: var(--ink-soft);
    }


    /* --------------------------------------------------------------------------
   9. SIDEBAR + LAYOUT
   -------------------------------------------------------------------------- */
    #sidebar {
        min-width: var(--sidebar-w-min);
        max-width: var(--sidebar-w);
        flex: 0 0 var(--sidebar-w);
        color: var(--white);
        background: var(--white);
        -webkit-transition: margin var(--t-mid);
        transition: margin var(--t-mid);
        position: relative;
        z-index: 0;
        border-left: 1px solid var(--line);
    }

        #sidebar .h6 {
            color: var(--main_blue);
        }

        #sidebar.active {
            margin-left: calc(-1 * var(--sidebar-w));
        }

        #sidebar ul.components {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        #sidebar ul li {
            font-size: 14px;
        }

            #sidebar ul li > ul {
                margin-left: 10px;
            }

                #sidebar ul li > ul li {
                    font-size: 13px;
                }

                    #sidebar ul li > ul li a {
                        border-bottom: 1px solid transparent;
                    }

                        #sidebar ul li > ul li a span {
                            color: var(--ink);
                            font-size: x-small;
                        }

            #sidebar ul li a {
                display: block;
                padding: 10px 0;
                color: var(--main_blue);
                border-bottom: 1px solid var(--line);
                transition: color var(--t-fast), padding-left var(--t-fast);
            }

                #sidebar ul li a:hover {
                    color: var(--main_red);
                    padding-left: 6px;
                }

            #sidebar ul li.active > a {
                background: transparent;
                color: var(--main_red);
                font-weight: 700;
            }

        /* Collapse toggle */
        #sidebar .custom-menu {
            display: inline-block;
            position: absolute;
            top: 20px;
            right: 0;
            margin-right: -20px;
            -webkit-transition: var(--t-mid);
            transition: var(--t-mid);
            z-index: 2;
        }

            #sidebar .custom-menu .btn {
                width: 60px;
                height: 60px;
                border-radius: 50%;
                position: relative;
            }

                #sidebar .custom-menu .btn i {
                    margin-right: -40px;
                    font-size: 14px;
                }

                #sidebar .custom-menu .btn.btn-primary {
                    background: transparent;
                    border-color: transparent;
                }

                    #sidebar .custom-menu .btn.btn-primary::after {
                        z-index: -1;
                        position: absolute;
                        inset: 0;
                        content: '';
                        transform: rotate(45deg);
                        background: var(--main_blue);
                        border-radius: var(--radius-sm);
                        transition: background var(--t-mid);
                    }

                    #sidebar .custom-menu .btn.btn-primary:hover::after {
                        background: var(--main_blue-dark);
                    }

                    #sidebar .custom-menu .btn.btn-primary:hover,
                    #sidebar .custom-menu .btn.btn-primary:focus {
                        background: transparent !important;
                        border-color: transparent !important;
                    }

    /* Collapse caret for dropdown items */
    a[data-toggle="collapse"] {
        position: relative;
    }

    .dropdown-toggle::after {
        display: block;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }

    /* Main content column */
    #content {
        width: 100%;
        padding: var(--content-pad);
        min-height: 100vh;
        -webkit-transition: all var(--t-mid);
        transition: all var(--t-mid);
    }


    /* --------------------------------------------------------------------------
   10. BUTTONS
   -------------------------------------------------------------------------- */
    .btn.btn-primary {
        background: var(--main_blue);
        border-color: var(--main_blue);
        color: var(--white);
        font-weight: 600;
        transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
    }

        .btn.btn-primary:hover,
        .btn.btn-primary:focus {
            background: var(--main_red) !important;
            border-color: var(--main_red) !important;
            transform: translateY(-2px);
        }


    /* --------------------------------------------------------------------------
   11. UTILITIES
   -------------------------------------------------------------------------- */
    .list-unstyled {
        padding-left: 0;
        list-style: none;
    }

    .text-center {
        text-align: center;
    }

    .mx-auto {
        margin-left: auto;
        margin-right: auto;
    }


    /* --------------------------------------------------------------------------
   12. KEYFRAMES / ANIMATIONS
   -------------------------------------------------------------------------- */
    @keyframes rotation {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    @-webkit-keyframes rotation {
        from {
            -webkit-transform: rotate(0deg);
        }

        to {
            -webkit-transform: rotate(360deg);
        }
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(24px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes pulseDot {
        0%, 100% {
            box-shadow: 0 0 0 0 rgba(232, 15, 15, 0.45);
        }

        50% {
            box-shadow: 0 0 0 10px rgba(232, 15, 15, 0);
        }
    }


    /* --------------------------------------------------------------------------
   13. RESPONSIVE BREAKPOINTS  (mobile-first — no overlap)
   Base styles above target small screens; each block lifts up from there.
   -------------------------------------------------------------------------- */

    /* ---- Small phones: default already handles it. Tweaks only. ---- */
    @media (max-width: 360px) {
        :root {
            --circle-size: clamp(250px, 92vw, 320px);
            --dot-size: 50px;
            --svg-size: 90px;
        }

        #sidebar {
            min-width: 100%;
            max-width: 100%;
            border-left: none;
        }
    }

    /* ---- ≥ 576px : small tablets / large phones ---- */
    @media (min-width: 576px) {
        #sidebar {
            min-width: var(--sidebar-w-min);
            max-width: var(--sidebar-w);
        }
    }

    /* ---- ≥ 768px : tablets ---- */
    @media (min-width: 768px) {
        .navbar-light .navbar-nav .nav-link1 {
            padding: 0.5rem 1.1rem !important;
        }
    }

    /* ---- ≥ 992px : laptops ---- */
    @media (min-width: 992px) {
        :root {
            --circle-size: clamp(420px, 60vmin, 500px);
        }
    }

    /* ---- ≥ 1200px : desktops ---- */
    @media (min-width: 1200px) {
        :root {
            --circle-size: 500px;
            --dot-size: 80px;
            --svg-size: 180px;
        }
    }

    /* ---- Reduced motion: respect user preference ---- */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.001ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.001ms !important;
            scroll-behavior: auto !important;
        }

        .round {
            -webkit-animation: none;
            animation: none;
        }
    }