@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&display=swap");
        
        :root {
            /* Text colors*/
            --text-color-1: black;
            --text-color-2: #5c5c5c;
            --lighter-text: #666666;
            --blue-text: blue;
            --green-text: green;
            --link-color: #3b82f6;
            --orange-text: darkorange;
            --red-text: red;
            --link-color: blue;
            
            /* Bg colors*/
            --bg-color-1: #ebebeb;
            --bg-color-2: #ffffff;
            --navlinks-bg-color: linear-gradient(135deg, #72afc7 0%, #d8d8d8 50%, #d8aeb2 100%);
            --input-bg: #c9d5ff;
            --tooltip-bg: linear-gradient(135deg, #72afc7 0%, #d8d8d8 50%, #d8aeb2 100%);
            --navpop-bg: linear-gradient(135deg, #72afc7 0%, #d8d8d8 50%, #d8aeb2 100%);

            --warning-info-bg: linear-gradient(135deg, #ffebee, #ffcdd2);
            --warning-info-text:red;
            --warning-info-border: red;

            --success-info-text: #155724;
            --success-info-bg:#d4edda;
            --success-info-border: green;

            /*Box shadows*/
            --topnavbar-shadow: 0 2px 9px rgba(0, 0, 0, 0.7);
            --bottomnavbar-shadow: 0 0px 9px rgba(0, 0, 0, 0.7);
            --cards-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;

            /* App Design and Themes colors*/
            --app-theme-gradient: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
            --app-theme-hover-bg:linear-gradient(135deg, rgba(65, 198, 254, 0.1), rgba(255, 107, 43, 0.1));
            --selected-tags-bg: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
            --selected-tags-color: white;
            --webkit-bg :linear-gradient(135deg, #e63946, #dc2f02);
            --webkit-hover :linear-gradient(135deg, #e63946, #dc2f02);

            --blue-gradient: linear-gradient( 69.2deg,  rgba(77,143,251,1) 35.3%, rgba(202,51,255,1) 100.3% );
            --green-gradient: linear-gradient( 75.1deg,  rgba(34,126,34,1) 6%, rgba(99,226,17,1) 84.3% );
            --red-gradient: radial-gradient( circle farthest-corner at 10% 20%,  rgba(214,40,40,1) 0%, rgba(255,195,0,1) 90% );
            --orange-gradient: linear-gradient( 67.2deg,  rgba(250,143,78,1) -0.5%, rgba(247,171,94,1) 38.3%, rgba(240,228,99,1) 98.5% );

            /* App Design */
            --navbar-color: linear-gradient(98.7deg, rgba(6,238,243,1) 10.6%, rgba(34,126,209,1) 72.2%, rgba(35,44,51,1) 122.5%, rgba(35,44,51,1) 122.5%);
            --bottombar-color: linear-gradient(135deg, #72afc7 0%, #d8d8d8 50%, #d8aeb2 100%);
            --webkit-radius :10px;
            --pop-ups-radius: 20px;
            --inputs-radius: 25px;
            --cards-bg: lightgrey;

            /* Borders */
            --border-bottom: lightgrey;
            --tooltip-border: black;
            --tooltip-arrow: black;
            --btns-border: rgba(0, 0, 0, 0.2);
            --btns-border-hover:#F56040;
            --cancel-btns-border: rgba(0, 0, 0, 0.2);
            --cancel-btns-border-hover: red;
            --inputs-border: rgba(0, 0, 0, 0.2);
            --inputs-focus-border: #ff6b6b;
            --selected-tags-border: rgba(0, 0, 0, 0.2);
            --selected-tags-border-hover: #F56040;
            --green-border: green;

            /* Buttons */
            --button-theme-gradient: linear-gradient(to left, #8a2387, #e94057, #f27121);
            --orange-btn-bg: linear-gradient( 89.9deg,  rgba(255,244,26,1) 8.7%, rgba(243,131,0,1) 81.9% );
            --orange-btn-color: black;
            --green-btn-bg: linear-gradient( 75.1deg,  rgba(34,126,34,1) 6%, rgba(99,226,17,1) 84.3% );
            --btn-padding: ;
            --btn-border-radius: ;
            --cancel-btns-bg: linear-gradient(to right, #009fff, #ec2f4b);
            --cancel-btns-bg-hover: linear-gradient(to right, #009fff, #ec2f4b);
            --cancel-btns-color: red;
            --icon-btns-size: 36px;
            --icon-btns-border: 8px;

            /* icons */
            --icon-size: 20px;
            --no-doc-icon-color: radial-gradient( circle farthest-corner at 10% 20%,  rgba(214,40,40,1) 0%, rgba(255,195,0,1) 90% );
        }

        

        body.active{
            /* Text colors*/
            --text-color-1: white;
            --text-color-2: white;
            --lighter-text: #CCCCCC;
            --blue-text: skyblue;
            --green-text: lime;
            --link-color: #3b82f6;
            --orange-text: orange;
             --red-text: red;
             --link-color: blue;
            
            /* Bg colors*/
            --bg-color-1: #1E1E1E;
            --bg-color-2: #2D2D2D;
            --navlinks-bg-color: linear-gradient(135deg, #242424 0%, #4a90a0 50%, #ab6367 100%);
            --input-bg: #242424;
            --tooltip-bg: linear-gradient(135deg, #242424 0%, #4a90a0 50%, #ab6367 100%);
            --navpop-bg: linear-gradient(135deg, #242424 0%, #4a90a0 50%, #ab6367 100%);

            --warning-info-bg: linear-gradient(135deg, #2d1517, #3d1f23);
            --warning-info-text:#ef9a9a;
            --warning-info-border: red;

            --success-info-text: #4ade80;
            --success-info-bg: #0f2917;
             --success-info-border: lime;

            /*Box shadows*/
            --topnavbar-shadow: 0 2px 9px rgba(0, 0, 0, 0.7);
            --bottomnavbar-shadow: 0 0px 9px rgba(0, 0, 0, 0.7);
            --cards-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;

            /* App Design and Themes colors*/
            --app-theme-gradient: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
            --app-theme-hover-bg:linear-gradient(135deg, rgba(65, 198, 254, 0.1), rgba(255, 107, 43, 0.1));
            --selected-tags-bg: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
            --selected-tags-color: white;
            --webkit-bg :linear-gradient(135deg, #e63946, #dc2f02);
            --webkit-hover :linear-gradient(135deg, #e63946, #dc2f02);

            --blue-gradient: linear-gradient( 69.2deg,  rgba(77,143,251,1) 35.3%, rgba(202,51,255,1) 100.3% );
            --green-gradient: linear-gradient( 75.1deg,  rgba(34,126,34,1) 6%, rgba(99,226,17,1) 84.3% );
            --red-gradient: radial-gradient( circle farthest-corner at 10% 20%,  rgba(214,40,40,1) 0%, rgba(255,195,0,1) 90% );
            --orange-gradient: linear-gradient( 67.2deg,  rgba(250,143,78,1) -0.5%, rgba(247,171,94,1) 38.3%, rgba(240,228,99,1) 98.5% );

            /* App Design */
            --navbar-color: linear-gradient(98.7deg, rgba(6,238,243,1) 10.6%, rgba(34,126,209,1) 72.2%, rgba(35,44,51,1) 122.5%, rgba(35,44,51,1) 122.5%);
            --bottombar-color: linear-gradient(135deg, #242424 0%, #4a90a0 50%, #ab6367 100%);
            --webkit-radius :10px;
            --pop-ups-radius: 20px;
            --inputs-radius: 25px;
            --cards-bg: lightgrey;

            /* Borders */
            --border-bottom: grey;
            --tooltip-border: black;
            --tooltip-arrow: black;
            --btns-border: rgba(255, 255, 255, 0.15);
            --btns-border-hover:#F56040;
            --cancel-btns-border: rgba(255, 255, 255, 0.15);
            --cancel-btns-border-hover: red;
            --inputs-border: rgba(255, 255, 255, 0.15);
            --inputs-focus-border: #ff6b6b;
            --selected-tags-border: rgba(255, 255, 255, 0.15);
            --selected-tags-border-hover: #F56040;
            --green-border: green;

            /* Buttons */
            --button-theme-gradient: linear-gradient(to left, #8a2387, #e94057, #f27121);
            --orange-btn-bg: linear-gradient( 89.9deg,  rgba(255,244,26,1) 8.7%, rgba(243,131,0,1) 81.9% );
             --orange-btn-color: black;
            --green-btn-bg: linear-gradient( 75.1deg,  rgba(34,126,34,1) 6%, rgba(99,226,17,1) 84.3% );
            --btn-padding: ;
            --btn-border-radius: ;
            --cancel-btns-bg: linear-gradient(to right, #009fff, #ec2f4b);
            --cancel-btns-bg-hover: linear-gradient(to right, #009fff, #ec2f4b);
            --cancel-btns-color: red;
            --icon-btns-size: 36px;
            --icon-btns-border: 8px;

            /* icons */
            --icon-size: 20px;
             --no-doc-icon-color: radial-gradient( circle farthest-corner at 10% 20%,  rgba(214,40,40,1) 0%, rgba(255,195,0,1) 90% );
        }
        
        *{
            font-family: "Inter", sans-serif;
            margin:0; padding:0;
            box-sizing: border-box;
            text-decoration: none;
            text-transform: capitalize;
            transition:all .2s linear;
        }

        body{
            background-color: var(--bg-color-1);
        }

        .heading{
            text-align: center;
            padding-bottom: 2rem;
            color:var(--text-color-1);
            font-size: 4rem;
        }

        .heading span{
            position: relative;
            z-index: 0;
        }

        .heading span::before{
            content: '';
            position: absolute;
            bottom: 1rem; left: 0;
            z-index: -1;
            background: var(--orange);
            height: 100%;
            width: 100%;
            clip-path: polygon(0 90%, 100% 83%, 100% 100%, 0% 100%);
        }

        .header{
            position: fixed;
            top:0; left:0; right:0;
            background-image: var(--navbar-color);
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 50px;
        }

        .header .logo{
            font-weight: bolder;
            font-size: 1.9rem;
            margin-left: 5px;
            color: white;
        }

        /*the icons - MADE BIGGER AND BOLDER*/
        .header .icons {
            margin-right: .4rem;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .header .icons i{
            height: 2.4rem;
            width: 2.4rem;
            line-height: 2.2rem;
            font-size: 1.5rem;
            font-weight: bold;
            background: var(--bg-color-1);
            color: var(--text-color-1);
            cursor: pointer;
            text-align: center;
            border-radius: .6rem;
            margin-right: 3px;
            border: 1px solid var(--btns-border);
        }

        .header .icons i:hover{
            color:#fff;
            background:var(--orange);
            border: 1px solid var(--btns-border-hover);
        }

        /* Logo image styles */
        .header .logo a {
            display: flex;
            align-items: center;
            height: 100%;
        }

        .header .logo .logo-img {
            height: 40px;
            width: auto;
            object-fit: contain;
            transition: transform 0.2s ease;
        }

        .header .logo .logo-img:hover {
            transform: scale(1.05);
        }

        /*****************************navbar notifications section********************************/
        .header .nav-pop{
            position:absolute;
            top:115%; right:4%;
            background:var(--navpop-bg);
            border-radius: .7rem;
            box-shadow: var(--box-shadow);
            padding: 8px;
            transform:scale(0);
            transform-origin: top right;
            width: 150px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .header .nav-pop.active{
            transform:scale(1);
        }

        .register-button {
            width: 100%;
            margin-bottom: 10px;
        }

        .login-button{
            width: 100%;
        }

        .register-btn,
        .login-btn {
            width: 100%;
            border: none;
            padding: 5px 5px;
            border-radius: 7px;
            font-weight: bold;
        }

        .register-btn {
            background-color: orange;
        }

        .login-btn {
            background-color: lime;
        }

        .register-btn:hover,
        .login-btn:hover {
            filter: brightness(0.8);
        }

        /*************************************navbar menu items - ADAPTIVE WIDTH & HEIGHT***********************/
        .header .navbar{
            position: fixed;
            top: 60px;
            right: 10px;
            width: auto;
            height: auto;
            min-width: 200px;
            max-width: calc(100vw - 20px);
            max-height: calc(100vh - 120px);
            background: var(--navlinks-bg-color);
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            transform: translateX(calc(100% + 20px));
            transition: transform 0.3s ease;
            overflow-y: auto;
            overflow-x: auto;
            padding: 15px 0;
            z-index: 1002;
            overscroll-behavior: contain;
            display: flex;
            flex-direction: column;
        }

        .header .navbar.active{
            transform: translateX(0);
        }

        .header .navbar a{
            display:block;
            margin: 0.5rem 1rem;
            font-size: 1.0rem;
            color: var(--text-color-1);
            border-radius: .8rem;
            padding: 8px;
            font-weight: 600;
        }

        .header .navbar a:hover{
            color: var(--lighter-text);
            background: var(--bg-color-2);
            padding-left: 1.5rem;
            border: 2px solid var(--btns-border-hover);
        }

        /* Custom scrollbar for navbar */
        .header .navbar::-webkit-scrollbar {
            width: 6px;
        }

        .header .navbar::-webkit-scrollbar-track {
            background: transparent;
        }

        .header .navbar::-webkit-scrollbar-thumb {
            background: var(--webkit-bg);
            border-radius: 3px;
        }

        .header .navbar::-webkit-scrollbar-thumb:hover {
            background: var(--webkit-hover);
        }

        /*****************************all icon colors********************************/
        i.greencolor{
            color: green;
        }

        i.redcolor {
            color: red;
        }

        i.bluecolor {
            color: #0082e6;
        }

        i.orangecolor {
            color: #b87700;
        }

        i.pinkcolor{
            color:#c71585;
        }

        i.skybluecolor{
            color: #008b8b;
        }

        /* Bottom navigation */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-image: var(--bottombar-color);
            display: flex;
            justify-content: space-around;
            padding: 7px 0;
            box-shadow: var(--bottomnavbar-shadow);
            z-index: 900;
        }

        .nav-link{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex-grow: 1;
            min-width: 50px;
            overflow: hidden;
            white-space: nowrap;
            font-family: "Poppins", sans-serif;
            font-size: 13px;
            font-weight: 600;
            color: var(--text-color-1);
            text-decoration: none;
            -webkit-tap-highlight-color:transparent;
            transition: background-color 0.1s ease-in-out;
        }

        .nav-link i{
            font-size: 16px;
        }

        .menu-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 999;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            pointer-events: none;
        }

        .menu-overlay.active {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        /* Prevent body scroll when menu is active */
        body.menu-open {
            overflow: hidden;
            position: fixed;
            width: 100%;
        }

       /* ==============================================
   RESPONSIVE STYLES FOR NAVBAR, NAV-POP, BOTTOM NAV
   ============================================== */

/* Tablet view (741px to 1024px) */
@media (max-width: 1024px) and (min-width: 741px) {
    .header {
        height: 52px;
    }

    .header .logo .logo-img {
        height: 42px;
    }

    .header .icons {
        margin-right: 0.35rem;
        gap: 6px;
    }

    .header .icons i {
        height: 2.5rem;
        width: 2.5rem;
        line-height: 2.3rem;
        font-size: 1.4rem;
        margin-right: 2.5px;
        border-radius: 0.65rem;
    }


    .header .nav-pop {
        top: 120%;
        right: 7.0%;
        border-radius: 0.8rem;
        padding: 10px;
        width: 160px;
    }

    .register-btn,
    .login-btn {
        padding: 6px 6px;
        border-radius: 8px;
        font-size: 15px;
    }

    .bottom-nav {
        padding: 8px 0;
    }

    .nav-link {
        font-size: 14px;
        min-width: 55px;
    }

    .nav-link i {
        font-size: 18px;
        margin-bottom: 2px;
    }
}

/* Small tablet and large mobile (481px to 740px) */
@media (max-width: 740px) and (min-width: 481px) {
    .header {
        height: 50px;
    }

    .header .logo .logo-img {
        height: 38px;
    }

    .header .icons {
        margin-right: 0.25rem;
        gap: 4px;
    }

    .header .icons i {
        height: 2.3rem;
        width: 2.3rem;
        line-height: 2.1rem;
        font-size: 1.35rem;
        margin-right: 2px;
        border-radius: 0.55rem;
    }

  
    .header .nav-pop {
        top: 118%;
        right: 8.2%;
        border-radius: 0.75rem;
        padding: 9px;
        width: 155px;
    }

    .register-btn,
    .login-btn {
        padding: 5.5px 5.5px;
        border-radius: 7.5px;
        font-size: 14px;
    }

    .bottom-nav {
        padding: 7px 0;
    }

    .nav-link {
        font-size: 13.5px;
        min-width: 45px;
    }

    .nav-link i {
        font-size: 17px;
        margin-bottom: 1.5px;
    }
}

/* Mobile view (up to 480px) */
@media (max-width: 480px) {
    .header {
        height: 48px;
    }

    .header .icons {
        margin-right: 0.15rem;
    }

    .header .icons i {
        height: 2.2rem;
        width: 2.2rem;
        line-height: 2.0rem;
        font-size: 1.25rem;
        margin-right: 1.5px;
        border-radius: 0.5rem;
    }
    
         .header .nav-pop {
        right: 12.5%;
    }

    .bottom-nav {
        padding: 6px 0;
    }

    .nav-link {
        font-size: 13px;
        min-width: 35px;
    }

    .nav-link i {
        font-size: 18px;
        margin-bottom: 1px;
    }
}

/* Very small mobile (up to 320px) */
@media (max-width: 320px) {
    .header {
        height: 44px;
    }

    .header .logo .logo-img {
        height: 35px;
    }

    .header .icons i {
        height: 2.0rem;
        width: 2.0rem;
        line-height: 1.8rem;
        font-size: 1.2rem;
        margin-right: 1px;
        border-radius: 0.45rem;
    }
    
     .header .nav-pop {
        right: 12.5%;
    }

    .bottom-nav {
        padding: 5px 0;
    }

    .nav-link {
        font-size: 12px;
        min-width: 32px;
    }

    .nav-link i {
        font-size: 16px;
    }
}

/* Very very small mobile (up to 260px) */
@media (max-width: 260px) {
    .header {
        height: 38px;
    }

    .header .logo .logo-img {
        height: 28px;
    }

    .header .icons i {
        height: 1.55rem;
        width: 1.55rem;
        line-height: 1.35rem;
        font-size: 0.95rem;
        margin-right: 0.5px;
        border-radius: 0.35rem;
    }

    .bottom-nav {
        padding: 4px 0;
    }

    .nav-link {
        font-size: 10px;
        min-width: 25px;
    }

    .nav-link i {
        font-size: 15px;
    }
}