/* -------------------------------------- ✅ General Styles ✅ ---------------------------------------- */

:root {
    --colour_1: #0D5EA6;
    --colour_2: #ffc107;        /* Main yellow */
    --colour_3: #ff6b00;        /* orange */
    --colour_4: #4caf50;        /* Complementary green */
    --colour_5: #2ed6d1;
    --colour_6: #fff4e2;
    --colour_7: #C78A3B;
    --colour_8: #1a237e;        /* Deep indigo blue */
    --colour_9: #FFAE42;
    --colour_10: #ff8c00;
    --colour_11: #ff9800;        /* Orange accent */
    --colour_12: #fffaf0;        /* Cream background */
    --colour_13: #455a64;        /* Blue-gray */
    --colour_14: #5d4037;        /* Dark brown for text */
    --colour_15: #7f8c8d;        /* Neutral gray */
    --dark: #333;
    --light: #f8f9fa;
    --gray: #6c757d;
    --font-gujarati: "Noto Sans Gujarati", sans-serif;
    --font-hindi: "Noto Sans Devanagari", sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
}

body {
    font-family: var(--font-gujarati);
    background-color: var(--colour_6);
    color: var(--dark);
    overflow-x: hidden;
    transition: all 0.3s ease;
}






/* -------------------------------------- ✅ Header Styles ✅ ---------------------------------------- */

header {
    text-align: center;
    padding: 4px 30px 3px 30px;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1);
    position: fixed;
    /* top: 0px; */
    width: 100%;
    z-index: 1000;
    backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.5);
}

    .logo-container {
        padding: 2px 5px 3px 5px;
        cursor: pointer;
        width: 160px;
        margin: auto;
        border-radius: 8px;
        transition: all 250ms linear;
    }
    
    .logo-container:hover {
        background-color: var(--colour_2);
    }
        .company-name {
            font-size: 28px;
            font-weight: 700;
            color: var(--colour_1);
        }
        
        .tagline {
            font-size: 14px;
            font-weight: 300;
        }


    /* ✅ index.html :- open pop-up to guide user for how to open side menu */
    .menu-hint-popup {
        position: absolute;
        top: 80px;
        left: 50%;
        transform: translateX(-50%);
        background-color: var(--colour_2);
        /* color: white; */
        padding: 8px 10px;
        border-radius: 7px;
        font-size: 15px;
        font-weight: bold;
        white-space: nowrap;
        z-index: 1100;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        opacity: 0;
        /* visibility: hidden; */
        transition: opacity 0.5s ease, visibility 0.5s;
    }

    .menu-hint-popup.show {
        opacity: 1;
        visibility: visible;
    }

    .menu-hint-popup:after {
        content: "";
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid var(--colour_2);
    }




/* -------------------------------------- ✅ Footer Styles ✅ ---------------------------------------- */

footer {
    text-align: center;
    width: 100%;
    padding: 5px 5px 5px 5px;
    background-color: var(--colour_1);
    /* position: absolute; */
    /* bottom: 0px; */
}
    .developer {
        font-size: 14px;
        font-weight: bold;
        color: var(--colour_2);
    }

    .disclaimer{
        font-size: 13px;
        margin: 2px 0px 2px 0px;
        color: white;
    }
    
    .copyright {
        font-size: 12px;
        /* padding-bottom: 5px; */
        color: var(--colour_2);
    }







/* ------------------------- 🟧 GENERAL SCROLLBAR RELATED STYLES 🟧 -------------------------- */
        
/* width */
::-webkit-scrollbar {
    width: 5px;
}   

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background-color: var(--colour_2);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background-color: var(--colour_4);
}







/* -------------------------------------- ✅ Sidebar Styles ✅ ---------------------------------------- */

.menu-divider-1{
    margin: 20px auto;
    width: 200px;
    border: 1px solid var(--colour_2);
}

.menu-divider-2{
    margin: 15px auto;
    width: 200px;
    border: 1px solid var(--colour_2);
}

.menu-divider-3{
    margin: 15px auto;
    width: 200px;
    border: 1px solid var(--colour_2);
}

.menu-divider-4{
    margin: 15px auto 30px auto;
    width: 200px;
    border: 1px solid var(--colour_2);
}


.sidebar {
    height: 100%;
    width: 280px;
    position: fixed;
    z-index: 2000;
    top: 0;
    left: -280px;
    background-color: var(--colour_1);
    overflow: hidden;
    transition: 0.5s;
    padding: 15px 10px 30px 10px;
}

.sidebar.active {
    left: 0;
    overflow:auto;
}
    .sidebar-header {
        padding: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        .menu-heading{
            color: white;
        }

        .close-menu {
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
            transition: all 300ms ease;
        }
        
        .close-menu:hover {
            color: var(--colour_2);
        }


    .language-toggle-container {
        display: flex;
        justify-content: center;
        margin: 20px auto;
        position: relative;
    }
        .language-toggle {
            /* display: flex; */
            background-color: var(--colour_1);
        }
            .language-indicator {
                position: absolute;
            }
            
            .language-btn {
                cursor: pointer;
                background: transparent;
                color: white;
                border: none;
                border-radius: 7px;
                padding: 7px 15px;
                font-size: 15px;
                font-weight: 600;
            }
    
            .language-btn.active {
                color: var(--black);
                background-color: var(--colour_2);
            }
    
            .language-btn:hover:not(.active) {
                color: rgba(255, 255, 255, 0.5);
            }

    .menu-items {
        list-style: none;
        flex-grow: 1;
    }
        .menu-item {
            padding: 10px 10px;
            margin: 10px 0px;
            transition: all 300ms ease;
            border-left: 4px solid transparent;
            display: flex;
            align-items: center;
            gap: 15px;
            border-radius: 7px;
        }
        
        .menu-item:hover, .menu-item.active {
            background: rgba(255,255,255,0.4);
            border-left: 4px solid var(--colour_2);
            color: var(--colour_2);
        }
            .menu-item i {
                width: 24px;
                text-align: center;
                color: white;
                margin-right: 10px;
            }
            
            .menu-item a {
                color: white;
                text-decoration: none;
                font-size: 16px;
                flex-grow: 1;
            }

    .version-container{
        text-align: center;
    }
        .version-container a{
            color: white;
            text-decoration: none;
            font-size: 25px;
        }


/* ------------------------------------------------------------------- ✅ scrollbar of sidebar */

    /* width */
    .sidebar.active::-webkit-scrollbar {
        width: 4px;
    }
    /* Track */
    .sidebar.active::-webkit-scrollbar-track {
        background: white;
    }

    /* Handle on hover */
    .sidebar.active::-webkit-scrollbar-thumb:hover {
        background-color: var(--colour_10);
    }





/* -------------------------------- 🟩 OVERLAY RELATED STYLES 🟩 ----------------------------- */

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1500;
    display: none;
    backdrop-filter: blur(10px);
    /* background: transparent; */
    background: rgba(255, 255, 255, 0.1);
}

.overlay.active {
    display: block;
}





/* -------------------------------- 🟩 ANIMATION RELATED STYLES 🟩 ----------------------------- */
.slide-in-top {
	-webkit-animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


@-webkit-keyframes slide-in-top {
    0% {
      -webkit-transform: translateY(-1000px);
              transform: translateY(-1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
}
@keyframes slide-in-top {
    0% {
      -webkit-transform: translateY(-1000px);
              transform: translateY(-1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
}
  




.text-focus-in {
	-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}


@-webkit-keyframes text-focus-in {
    0% {
        -webkit-filter: blur(12px);
                filter: blur(12px);
        opacity: 0;
    }
    100% {
        -webkit-filter: blur(0px);
                filter: blur(0px);
        opacity: 1;
    }
}
@keyframes text-focus-in {
    0% {
        -webkit-filter: blur(12px);
                filter: blur(12px);
        opacity: 0;
    }
    100% {
        -webkit-filter: blur(0px);
                filter: blur(0px);
        opacity: 1;
    }
}





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

.policy-section {
    animation: fadeIn 0.6s ease forwards;
}

.policy-section:nth-child(1) { animation-delay: 0.1s; }
.policy-section:nth-child(2) { animation-delay: 0.2s; }
.policy-section:nth-child(3) { animation-delay: 0.3s; }
.policy-section:nth-child(4) { animation-delay: 0.4s; }
.policy-section:nth-child(5) { animation-delay: 0.5s; }
.policy-section:nth-child(6) { animation-delay: 0.6s; }
.policy-section:nth-child(7) { animation-delay: 0.7s; }






/* ----------------------------------------- 🟨 media query 🟨 --------------------------------------- */

@media screen and (max-width: 350px) {
    body{
        display: none;
    }
}




@media screen and (max-width: 480px) {
    
    /* ✅ Header ✅ */
    .logo-container {
        width: 130px;
    }
        .company-name {
            font-size: 24px;
        }

        .tagline {
            font-size: 12px;
        }

    /* ✅ Footer ✅ */
    .developer, .disclaimer, .copyright {
        font-size: 12px;
    }            
}