/* --------------------------------------- 🟨 ROOT 🟨 --------------------------------------- */
:root {
    --colour_1: #ffc107;    /* Main yellow */
    --colour_2: #ff9800;    /* Orange accent */
    --colour_3: #4caf50;    /* Complementary green */
    --colour_4: #fffaf0;    /* Cream background */
    --colour_5: #1a237e;    /* Deep indigo blue */
    --colour_6: #455a64;    /* Blue-gray */
    --colour_7: #5d4037;    /* Dark brown for text */
    --colour_8: #7f8c8d;    /* Neutral gray */
    --colour_9: #ff6b00;    /* orange */
    --black: black;
    --transition: all 0.3s ease;
}




/* ---------------------------------- 🟧 GENERAL STYLES 🟧 ----------------------------------- */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    user-select: none;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    background-color: var(--colour_4);
}




/* ------------------------- 🟧 GENERAL SCROLLBAR RELATED STYLES 🟧 -------------------------- */

/* width */
::-webkit-scrollbar {
    width: 7px;
}

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

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

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




/* -------------------------------- 🟩 HEADER RELATED STYLES 🟩 ----------------------------- */

header {
    text-align: center;
    padding: 4px 30px 5px 30px;
    box-shadow: 0 4px 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: 0px 5px 5px 5px;
        cursor: pointer;
        width: 230px;
        margin: auto;
        border-radius: 8px;
        transition: all 200ms linear;
    }
    
    .logo-container:hover {
        background-color: var(--colour_1);
        /* transform: scale(1.1); */
    }
        .company-name {
            font-size: 28px;
            font-weight: 700;
            color: var(--colour_5);
        }
        
        .tagline {
            font-size: 15px;
            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_1);
        /* 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_1);
    }



/* -------------------------------- 🟩 SIDEBAR RELATED STYLES 🟩 ----------------------------- */

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

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

.sidebar {
    position: fixed;
    top: 0;
    left: -300px;
    width: 300px;
    height: 100vh;
    background: var(--colour_5);
    color: white;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    transition: all 300ms linear;
}

.sidebar.active {
    transition: all 300ms linear;
    left: 0;
    overflow:auto;
}
    .sidebar-header {
        padding: 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
        .menu-heading{
            text-decoration: underline;
        }

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

    .menu-items {
        list-style: none;
        padding: 10px 0px 0px 0px;
        flex-grow: 1;
    }
        .menu-item {
            padding: 10px 10px;
            margin: 10px 0px 10px 0px;
            transition: var(--transition);
            border-left: 4px solid transparent;
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .menu-item:hover, .menu-item.active {
            background: rgba(255,255,255,0.5);
            border-left: 4px solid var(--colour_1);
            color: var(--colour_1);
        }
            .menu-item i {
                width: 24px;
                text-align: center;
                margin-left: 20px;
            }
            
            .menu-item a {
                color: white;
                text-decoration: none;
                font-size: 1.1rem;
                flex-grow: 1;
            }

    .version-container{
        text-align: center;
        margin-bottom: 30px;
    }
        .version-container a{
            color: white;
            text-decoration: none;
            font-size: 30px;
            /* flex-grow: 1; */
        }




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

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




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

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1500;
    display: none;
    backdrop-filter: blur(9px);
}

.overlay.active {
    display: block;
}




/* -------------------------------- 🟩 MAIN RELATED STYLES 🟩 ----------------------------- */

.page-content {
    flex-grow: 1;
    padding: 80px 32px 32px 32px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}




/* -------------------------------- 🖤 SAME IN ALL PAGES 🖤 -------------------------------- */

.page-title {
    color: var(--colour_5);
    margin-top: 60px;
    margin-bottom: 40px;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--colour_9);
    display: inline-block;
}




/* -------------------------------- 🖤 SAME IN MANY PAGES 🖤 -------------------------------- */

.no-results {
    text-align: center;
    padding: 2rem;
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
    .no-results i {
        font-size: 3rem;
        color: var(--colour_8);
        margin-bottom: 1rem;
    }




/* -------------------------------- 🟩 FOOTER RELATED STYLES 🟩 ----------------------------- */

footer {
    text-align: center;
    background-color: var(--colour_5);
    color: var(--colour_1); 
    padding: 5px 5px 5px 5px;
}
    .developer {
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 4px;
    }

    .abhinava, .abhinava_link{
        font-size: 14px;
        color: white;
        margin-bottom: 5px;
    }    
        .abhinava_link{
            font-size: 13.5px;
            text-decoration: none;
            color: white;
        }

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





/* Updated Contact Section */
.contact-info .contact-item i {
    color: var(--colour_1);
}

/* Updated Form Elements */
input, textarea {
    background-color: #fff8e1;
    border: 1px solid #ffd54f;
}















/* -------------------------------- 🟥 MEDIA QUERIES STYLES 🟥 ----------------------------- */

/* print nothing */
@media print {
    body{
        display: none;
    }
}


/* display nothing */
@media (max-width: 350px) {
    body {
        display: none;
    }
}


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

        .tagline {
            font-size: 12px;
            /* display: none; */
        }
    
    .menu-hint-popup {
        top: 60px;
    }

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