:root{
    --bg: #0f172a;
    --surface: #111827;
    --text: #e5e7eb;
    --muted: #9ca3af;
    --primary: #60a5fa;
    --accent: #3b82f6;
    --shadow: rgba(0, 0, 0, 0.5);
}
body.light{
    --bg: #f8f9fb;
    --surface: #ffffff;
    --text: #1f2937;
    --muted: #6b7280;
    --primary: #3b82f6;
    --accent: #1e40af;
    --shadow: rgba(0,0,0,0.06)
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

html{
    scroll-behavior: smooth;
}
.span-logo{
    color: #3b82f6;
}

/*====MESSAGE BOX====*/
#messageBox{
    text-align: center;
    text-transform: capitalize;
    padding: 5px 15px;
    border: 1px solid #ccc;
    background: #fff;
    font-weight: 600;
    color: #000;
    border-radius: 10px;
    width: 100%;
    margin: 15px auto;
    transition: all ease 0.2s;
    font-size: 15px;
    word-wrap: break-word;
}
#messageBox p{
    text-align: center;
    margin: 0 auto;
}
@media (max-width: 549px) {
    body{
        background: #f8fafc;
        color: #1e293b;
    }

    /*====NAV BAR====*/
    .navbar{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 10px;
        background: #0f172a;
        color: #fff;
        align-items: center;
    }
    .navbar .logo span{
        color: #3b82f6;
    }
    .navbar .logo{
        font-size: 18px;
        font-weight: 600;
    }
    .navbar .nav-links{
        display: flex;
        gap: 10px;
        justify-content: center;
        align-items: center;
    }
    .navbar a{
        text-transform: capitalize;
        font-weight: 600;
        font-size: 15px;
        color: #fff;
        text-decoration: none;
    }
    .navbar .nav-links .login-Btn{
        border: 2px solid #ccc;
        padding: 5px 10px;
        border-radius: 5px;
    }
    .navbar .nav-links .login-Btn:hover{
        background: #fff;
        color: #0f172a;
    }
    .navbar .nav-links .signup-Btn{
        background: #3b82f6;
        padding: 7px 10px;
        transition: 0.3s;
        border-radius: 5px;
    }
    .navbar .nav-links .signup-Btn:hover{
        background: #2563eb;
        cursor: pointer;
    }
    .hero{
        height: 100vh;
        background: linear-gradient(135deg, #0f172a, #1e3a8a);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #fff;
        padding: 0 20px;
    }
    .sigupHero{
        height: 100%;
        background: linear-gradient(135deg, #0f172a, #1e3a8a);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        padding: 0 20px;
    }
    .hero h2{
        text-align: center;
        color: #fff;
        font-size: 1.2rem;
        margin-bottom: 20px;
    }
    .hero .buttons{
        display: flex;
        gap: 15px;
        flex-direction: column;
    }
    .hero .buttons a span{
        font-size: 1.3rem;
    }
    .hero .hero-content .buttons a{
        background: #3b82f6;
        padding: 10px 10px;
        transition: 0.3s;
        border-radius: 10px;
        text-decoration: none;
        color: #fff;
        font-weight: 600;
        border: none;
        text-align: center;
        font-size: 12px;
    }
    .hero .buttons a:hover{
        background: #2563eb;
        cursor: pointer;
    }
    .hero .buttons a .img{
        border: 1px solid #ccc;
        padding: 7px;
        border-radius: 50%;
        width: max-content;
        margin: 10px auto;
        background: #fff;
    }
    /*====SIGNUP FORM====*/
    .signup-form{
        max-width: 450px;
        margin: 40px auto;
        padding-left: 20px;
        padding-right: 20px;
    }
    .signup-form .heading{
        color: var(--text);
        text-align: center;
        font-size: 1.2rem;
        font-weight: 900;
        text-transform: capitalize;
    }
    .signup-form .heading span{
        color: var(--primary);
    }
    .signup-form .small{
        text-align: center;
        color: var(--muted);
        font-size: 13px;
        margin-bottom: 20px;
    }
    .signup-form .signup-field{
        margin-bottom: 20px;
        display: flex;
        position: relative;
        align-items: center;
    }
    .signup-form .signup-field input{
        width: 100%;
        padding: 15px 55px;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid #ccc;
        color: var(--text);
        font-size: 16px;
    }
    .signup-form .signup-field input:focus{
        border-color: var(--accent);
        outline: none;
    }
    .signup-form .signup-field select{
        width: 100%;
        font-size: 16px;
        padding: 15px 55px;
        border-radius: 20px;
        color: var(--muted);
        background: rgba(255, 255, 255, 0.1);
    }
    .signup-form .signup-field select:focus{
        border-color: var(--accent);
        outline: none;
    }
    .signup-form .signup-field .img{
        position: absolute;
        border: 1px solid #ccc;
        border-radius: 100%;
        padding: 10px;
        background: #fff;
        width: 60px;
        height: 60px;
        left: -10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .signup-form .signup-field .img img{
        width: 30px;
        height: 30px;
    }
    .signup-form button{
        width: 100%;
        padding: 15px;
        border-radius: 25px;
        background: #2563eb;
        font-size: 15px;
        text-transform: capitalize;
        font-weight: 900;
        border: none;
        color: #fff;
        cursor: pointer;
        transition: 0.3s;
    }
    .signup-form button:hover{
        background: #1e40af;
        cursor: pointer;
    }
    .signup-form .login-Link{
        margin: 0 auto;
        text-align: center;
        margin-top: 16px;
        font-weight: 600;
    }
    .signup-form .login-Link a{
        text-decoration: none;
        color: var(--text);
        font-size: 16px;
    }
    .show-password{
        padding-bottom: 30px;
        gap: 10px;
        color: var(--text);
        font-weight: 600;
        font-size: 16px;
        width: max-content;
        margin: 0 auto;
        display: flex;
        align-items: center;
    }

    /*====LOGIN FORM====*/
    .login-form{
        max-width: 400px;
        margin: 0px auto;
        padding-left: 10px;
        padding-right: 10px;
    }
    .login-form .heading{
        color: var(--text);
        text-align: center;
        font-size: 1.5rem;
        font-weight: 900;
        text-transform: capitalize;
    }
    .login-form .small{
        text-align: center;
        color: var(--muted);
        font-size: 14px;
        margin-bottom: 30px;
    }
    .login-form .heading span{
        color: var(--primary);
    }
    .login-form .inputField{
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 30px;
        position: relative;
    }
    .login-form .inputField input{
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid #ccc;
        padding: 15px;
        border-radius: 20px;
        width:  350px;
        text-align: center;
        color: var(--text);
    }
    .login-form .inputField input:focus{
        border-color: var(--accent);
        outline: none;
    }
    .login-form .inputField input::placeholder{
        color: var(--text);
    }
    .login-form .inputField img{
        width: 65px;
        height: 65px;
        border-radius: 50%;
        background-color: #fff;
        border: 1px solid #ccc;
        padding: 10px;
    }
    .login-form .inputField .user{
        position: absolute;
        left: -10px;
    }
    .login-form .inputField .lock{
        position: absolute;
        right: 0;
    }
    .login-form button{
        width: 100%;
        padding: 15px;
        border-radius: 25px;
        background: #2563eb;
        font-size: 15px;
        text-transform: capitalize;
        font-weight: 900;
        border: none;
        color: #fff;
        cursor: pointer;
        transition: 0.3s;
    }
    .login-form button:hover{
        background: #1e40af;
        cursor: pointer;
    }
    .login-form .signUp-Link{
        margin: 0 auto;
        text-align: center;
        margin-top: 15px;
    }
    .login-form .signUp-Link a{
        text-decoration: none;
        color: var(--text);
        font-size: 16px;
        font-weight: 600;
    }
}

@media (min-width: 550px) and (max-width: 758px) {
    body{
        background: #f8fafc;
        color: #1e293b;
    }

    /*====NAV BAR====*/
    .navbar{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 10px;
        background: #0f172a;
        color: #fff;
        align-items: center;
    }
    .navbar .logo span{
        color: #3b82f6;
    }
    .navbar .logo{
        font-size: 1.5rem;
        font-weight: 600;
    }
    .navbar .nav-links{
        display: flex;
        gap: 10px;
        justify-content: center;
        align-items: center;
    }
    .navbar a{
        text-transform: capitalize;
        font-weight: 600;
        font-size: 15px;
        color: #fff;
        text-decoration: none;
    }
    .navbar .nav-links .login-Btn{
        border: 2px solid #ccc;
        padding: 5px 10px;
        border-radius: 5px;
    }
    .navbar .nav-links .login-Btn:hover{
        background: #fff;
        color: #0f172a;
    }
    .navbar .nav-links .signup-Btn{
        background: #3b82f6;
        padding: 7px 10px;
        transition: 0.3s;
        border-radius: 5px;
    }
    .navbar .nav-links .signup-Btn:hover{
        background: #2563eb;
        cursor: pointer;
    }
    .hero{
        height: 100vh;
        background: linear-gradient(135deg, #0f172a, #1e3a8a);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        padding: 0 20px;
    }
    .sigupHero{
        height: 100%;
        background: linear-gradient(135deg, #0f172a, #1e3a8a);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        padding: 0 20px;
    }
    .hero h2{
        text-align: center;
        color: #fff;
        font-size: 1.3rem;
        margin-bottom: 20px;
    }
    .hero .buttons{
        display: flex;
        gap: 20px;
    }
    .hero .buttons a span{
        font-size: 1.4rem;
    }
    .hero .buttons a{
        background: #3b82f6;
        padding: 10px 10px;
        transition: 0.3s;
        border-radius: 10px;
        text-decoration: none;
        color: #fff;
        font-weight: 600;
        border: none;
        text-align: center;
        font-size: 13px;
    }
    .hero .buttons a:hover{
        background: #2563eb;
        cursor: pointer;
    }
    .hero .buttons a .img{
        border: 1px solid #ccc;
        padding: 7px;
        border-radius: 50%;
        width: max-content;
        margin: 10px auto;
        background: #fff;
    }

    /*====SIGNUP FORM====*/
    .signup-form{
        margin-top: 40px;
        max-width: 450px;
        margin: 40px auto;
        padding-left: 20px;
        padding-right: 20px;
    }
    .signup-form .heading{
        color: var(--text);
        text-align: center;
        font-size: 1.3rem;
        font-weight: 900;
        text-transform: capitalize;
    }
    .signup-form .heading span{
        color: var(--primary);
    }
    .signup-form .small{
        text-align: center;
        color: var(--muted);
        font-size: 14px;
        margin-bottom: 20px;
    }
    .signup-form .signup-field{
        margin-bottom: 20px;
        display: flex;
        position: relative;
        align-items: center;
    }
    .signup-form .signup-field input{
        width: 100%;
        padding: 15px 55px;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid #ccc;
        color: var(--text);
        font-size: 16px;
    }
    .signup-form .signup-field input:focus{
        border-color: var(--accent);
        outline: none;
    }
    .signup-form .signup-field select{
        width: 100%;
        font-size: 16px;
        padding: 15px 55px;
        border-radius: 20px;
        color: var(--muted);
        background: rgba(255, 255, 255, 0.1);
    }
    .signup-form .signup-field select:focus{
        border-color: var(--accent);
        outline: none;
    }
    .signup-form .signup-field .img{
        position: absolute;
        border: 1px solid #ccc;
        border-radius: 100%;
        padding: 10px;
        background: #fff;
        width: 60px;
        height: 60px;
        left: -10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .signup-form .signup-field .img img{
        width: 30px;
        height: 30px;
    }
    .signup-form button{
        width: 100%;
        padding: 15px;
        border-radius: 25px;
        background: #2563eb;
        font-size: 15px;
        text-transform: capitalize;
        font-weight: 900;
        border: none;
        color: #fff;
        cursor: pointer;
        transition: 0.3s;
    }
    .signup-form button:hover{
        background: #1e40af;
        cursor: pointer;
    }
    .signup-form .login-Link{
        margin: 0 auto;
        text-align: center;
        margin-top: 16px;
        font-weight: 600;
    }
    .signup-form .login-Link a{
        text-decoration: none;
        color: var(--text);
        font-size: 16px;
    }
    .show-password{
        padding-bottom: 30px;
        gap: 10px;
        color: var(--text);
        font-weight: 600;
        font-size: 16px;
        width: max-content;
        margin: 0 auto;
        display: flex;
        align-items: center;
    }

    /*====LOGIN FORM====*/
    .login-form{
        max-width: 400px;
        margin: 0px auto;
        padding-left: 10px;
        padding-right: 10px;
    }
    .login-form .heading{
        color: var(--text);
        text-align: center;
        font-size: 1.5rem;
        font-weight: 900;
        text-transform: capitalize;
    }
    .login-form .small{
        text-align: center;
        color: var(--muted);
        font-size: 14px;
        margin-bottom: 30px;
    }
    .login-form .heading span{
        color: var(--primary);
    }
    .login-form .inputField{
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 30px;
        position: relative;
    }
    .login-form .inputField input{
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid #ccc;
        padding: 15px;
        border-radius: 20px;
        width:  350px;
        text-align: center;
        color: var(--text);
    }
    .login-form .inputField input:focus{
        border-color: var(--accent);
        outline: none;
    }
    .login-form .inputField input::placeholder{
        color: var(--text);
    }
    .login-form .inputField img{
        width: 65px;
        height: 65px;
        border-radius: 50%;
        background-color: #fff;
        border: 1px solid #ccc;
        padding: 10px;
    }
    .login-form .inputField .user{
        position: absolute;
        left: -10px;
    }
    .login-form .inputField .lock{
        position: absolute;
        right: 0;
    }
    .login-form button{
        width: 100%;
        padding: 15px;
        border-radius: 25px;
        background: #2563eb;
        font-size: 15px;
        text-transform: capitalize;
        font-weight: 900;
        border: none;
        color: #fff;
        cursor: pointer;
        transition: 0.3s;
    }
    .login-form button:hover{
        background: #1e40af;
        cursor: pointer;
    }
    .login-form .signUp-Link{
        margin: 0 auto;
        text-align: center;
        margin-top: 15px;
    }
    .login-form .signUp-Link a{
        text-decoration: none;
        color: var(--text);
        font-size: 16px;
        font-weight: 600;
    }
}

@media (min-width: 759px) and (max-width: 1100px){
    body{
        background: #f8fafc;
        color: #1e293b;
    }

    /*====NAV BAR====*/
    .navbar{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 10px;
        background: #0f172a;
        color: #fff;
        align-items: center;
    }
    .navbar .logo span{
        color: #3b82f6;
    }
    .navbar .logo{
        font-size: 1.5rem;
        font-weight: 600;
    }
    .navbar .nav-links{
        display: flex;
        gap: 10px;
        justify-content: center;
        align-items: center;
    }
    .navbar a{
        text-transform: capitalize;
        font-weight: 600;
        font-size: 15px;
        color: #fff;
        text-decoration: none;
    }
    .navbar .nav-links .login-Btn{
        border: 2px solid #ccc;
        padding: 5px 10px;
        border-radius: 5px;
    }
    .navbar .nav-links .login-Btn:hover{
        background: #fff;
        color: #0f172a;
    }
    .navbar .nav-links .signup-Btn{
        background: #3b82f6;
        padding: 7px 10px;
        transition: 0.3s;
        border-radius: 5px;
    }
    .navbar .nav-links .signup-Btn:hover{
        background: #2563eb;
        cursor: pointer;
    }
    .hero{
        height: 100vh;
        background: linear-gradient(135deg, #0f172a, #1e3a8a);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        padding: 0 20px;
    }
    .sigupHero{
        height: 100%;
        background: linear-gradient(135deg, #0f172a, #1e3a8a);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        padding: 0 20px;
    }
    .hero h2{
        text-align: center;
        color: #fff;
        font-size: 1.3rem;
        margin-bottom: 20px;
    }
    .hero .buttons{
        display: flex;
        gap: 20px;
    }
    .hero .buttons a span{
        font-size: 1.4rem;
    }
    .hero .buttons a{
        background: #3b82f6;
        padding: 10px 10px;
        transition: 0.3s;
        border-radius: 10px;
        text-decoration: none;
        color: #fff;
        font-weight: 600;
        border: none;
        text-align: center;
        font-size: 13px;
    }
    .hero .buttons a:hover{
        background: #2563eb;
        cursor: pointer;
    }
    .hero .buttons a .img{
        border: 1px solid #ccc;
        padding: 7px;
        border-radius: 50%;
        width: max-content;
        margin: 10px auto;
        background: #fff;
    } 

    /*====SIGNUP FORM====*/
    .signup-form{
        margin-top: 40px;
        max-width: 450px;
        margin: 40px auto;
        padding-left: 20px;
        padding-right: 20px;
    }
    .signup-form .heading{
        color: var(--text);
        text-align: center;
        font-size: 1.5rem;
        font-weight: 900;
        text-transform: capitalize;
    }
    .signup-form .small{
        text-align: center;
        color: var(--muted);
        font-size: 14px;
        margin-bottom: 20px;
    }
    .signup-form .signup-field{
        margin-bottom: 20px;
        display: flex;
        position: relative;
        align-items: center;
    }
    .signup-form .signup-field input{
        width: 100%;
        padding: 15px 55px;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid #ccc;
        color: var(--text);
        font-size: 16px;
    }
    .signup-form .signup-field input:focus{
        border-color: var(--accent);
        outline: none;
    }
    .signup-form .signup-field select{
        width: 100%;
        font-size: 16px;
        padding: 15px 55px;
        border-radius: 20px;
        color: var(--muted);
        background: rgba(255, 255, 255, 0.1);
    }
    .signup-form .signup-field select:focus{
        border-color: var(--accent);
        outline: none;
    }
    .signup-form .signup-field .img{
        position: absolute;
        border: 1px solid #ccc;
        border-radius: 100%;
        padding: 10px;
        background: #fff;
        width: 60px;
        height: 60px;
        left: -10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .signup-form .signup-field .img img{
        width: 30px;
        height: 30px;
    }
    .signup-form button{
        width: 100%;
        padding: 15px;
        border-radius: 25px;
        background: #2563eb;
        font-size: 15px;
        text-transform: capitalize;
        font-weight: 900;
        border: none;
        color: #fff;
        cursor: pointer;
        transition: 0.3s;
    }
    .signup-form button:hover{
        background: #1e40af;
        cursor: pointer;
    }
    .signup-form .login-Link{
        margin: 0 auto;
        text-align: center;
        margin-top: 16px;
        font-weight: 600;
    }
    .signup-form .login-Link a{
        text-decoration: none;
        color: var(--text);
        font-size: 16px;
    }
    .show-password{
        padding-bottom: 30px;
        gap: 10px;
        color: var(--text);
        font-weight: 600;
        font-size: 16px;
        width: max-content;
        margin: 0 auto;
        display: flex;
        align-items: center;
    }

    /*====LOGIN FORM====*/
    .login-form{
        max-width: 400px;
        margin: 0px auto;
        padding-left: 10px;
        padding-right: 10px;
    }
    .login-form .heading{
        color: var(--text);
        text-align: center;
        font-size: 1.5rem;
        font-weight: 900;
        text-transform: capitalize;
    }
    .login-form .small{
        text-align: center;
        color: var(--muted);
        font-size: 14px;
        margin-bottom: 30px;
    }
    .login-form .heading span{
        color: var(--primary);
    }
    .login-form .inputField{
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 30px;
        position: relative;
    }
    .login-form .inputField input{
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid #ccc;
        padding: 15px;
        border-radius: 20px;
        width:  350px;
        text-align: center;
        color: var(--text);
    }
    .login-form .inputField input:focus{
        border-color: var(--accent);
        outline: none;
    }
    .login-form .inputField input::placeholder{
        color: var(--text);
    }
    .login-form .inputField img{
        width: 65px;
        height: 65px;
        border-radius: 50%;
        background-color: #fff;
        border: 1px solid #ccc;
        padding: 10px;
    }
    .login-form .inputField .user{
        position: absolute;
        left: -10px;
    }
    .login-form .inputField .lock{
        position: absolute;
        right: 0;
    }
    .login-form button{
        width: 100%;
        padding: 15px;
        border-radius: 25px;
        background: #2563eb;
        font-size: 15px;
        text-transform: capitalize;
        font-weight: 900;
        border: none;
        color: #fff;
        cursor: pointer;
        transition: 0.3s;
    }
    .login-form button:hover{
        background: #1e40af;
        cursor: pointer;
    }
    .login-form .signUp-Link{
        margin: 0 auto;
        text-align: center;
        margin-top: 15px;
    }
    .login-form .signUp-Link a{
        text-decoration: none;
        color: var(--text);
        font-size: 16px;
        font-weight: 600;
    }
}

@media (min-width: 1101px){
    body{
        background: #f8fafc;
        color: #1e293b;
    }

    /*====NAV BAR====*/
    .navbar{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 10px;
        background: #0f172a;
        color: #fff;
        align-items: center;
    }
    .navbar .logo span{
        color: #3b82f6;
    }
    .navbar .logo{
        font-size: 1.5rem;
        font-weight: 600;
    }
    .navbar .nav-links{
        display: flex;
        gap: 10px;
        justify-content: center;
        align-items: center;
    }
    .navbar a{
        text-transform: capitalize;
        font-weight: 600;
        font-size: 15px;
        color: #fff;
        text-decoration: none;
    }
    .navbar .nav-links .login-Btn{
        border: 2px solid #ccc;
        padding: 5px 10px;
        border-radius: 5px;
    }
    .navbar .nav-links .login-Btn:hover{
        background: #fff;
        color: #0f172a;
    }
    .navbar .nav-links .signup-Btn{
        background: #3b82f6;
        padding: 7px 10px;
        transition: 0.3s;
        border-radius: 5px;
    }
    .navbar .nav-links .signup-Btn:hover{
        background: #2563eb;
        cursor: pointer;
    }
    .hero{
        height: 100vh;
        background: linear-gradient(135deg, #0f172a, #1e3a8a);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        padding: 0 20px;
    }
    .sigupHero{
        height: 100%;
        background: linear-gradient(135deg, #0f172a, #1e3a8a);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        padding: 0 20px;
    }
    .hero h2{
        text-align: center;
        color: #fff;
        font-size: 1.3rem;
        margin-bottom: 20px;
    }
    .hero .buttons{
        display: flex;
        gap: 20px;
    }
    .hero .buttons a span{
        font-size: 1.4rem;
    }
    .hero .buttons a{
        background: #3b82f6;
        padding: 10px 10px;
        transition: 0.3s;
        border-radius: 10px;
        text-decoration: none;
        color: #fff;
        font-weight: 600;
        border: none;
        text-align: center;
        font-size: 13px;
    }
    .hero .buttons a:hover{
        background: #2563eb;
        cursor: pointer;
    }
    .hero .buttons a .img{
        border: 1px solid #ccc;
        padding: 7px;
        border-radius: 50%;
        width: max-content;
        margin: 10px auto;
        background: #fff;
    }   

    /*====SIGNUP FORM====*/
    .signup-form{
        margin-top: 40px;
        max-width: 450px;
        margin: 40px auto;
        padding-left: 20px;
        padding-right: 20px;
    }
    .signup-form .heading{
        color: var(--text);
        text-align: center;
        font-size: 1.5rem;
        font-weight: 900;
        text-transform: capitalize;
    }
    .signup-form .heading span{
        color: var(--primary);
    }
    .signup-form .small{
        text-align: center;
        color: var(--muted);
        font-size: 14px;
        margin-bottom: 20px;
    }
    .signup-form .signup-field{
        margin-bottom: 20px;
        display: flex;
        position: relative;
        align-items: center;
    }
    .signup-form .signup-field input{
        width: 100%;
        padding: 15px 55px;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid #ccc;
        color: var(--text);
        font-size: 16px;
    }
    .signup-form .signup-field input:focus{
        border-color: var(--accent);
        outline: none;
    }
    .signup-form .signup-field select{
        width: 100%;
        font-size: 16px;
        padding: 15px 55px;
        border-radius: 20px;
        color: var(--muted);
        background: rgba(255, 255, 255, 0.1);
    }
    .signup-form .signup-field select:focus{
        border-color: var(--accent);
        outline: none;
    }
    .signup-form .signup-field .img{
        position: absolute;
        border: 1px solid #ccc;
        border-radius: 100%;
        padding: 10px;
        background: #fff;
        width: 60px;
        height: 60px;
        left: -10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .signup-form .signup-field .img img{
        width: 30px;
        height: 30px;
    }
    .signup-form button{
        width: 100%;
        padding: 15px;
        border-radius: 25px;
        background: #2563eb;
        font-size: 15px;
        text-transform: capitalize;
        font-weight: 900;
        border: none;
        color: #fff;
        cursor: pointer;
        transition: 0.3s;
    }
    .signup-form button:hover{
        background: #1e40af;
        cursor: pointer;
    }
    .signup-form .login-Link{
        margin: 0 auto;
        text-align: center;
        margin-top: 16px;
        font-weight: 600;
    }
    .signup-form .login-Link a{
        text-decoration: none;
        color: var(--text);
        font-size: 16px;
    }
    .show-password{
        padding-bottom: 30px;
        gap: 10px;
        color: var(--text);
        font-weight: 600;
        font-size: 16px;
        width: max-content;
        margin: 0 auto;
        display: flex;
        align-items: center;
    }

    /*====LOGIN FORM====*/
    .login-form{
        max-width: 400px;
        margin: 0px auto;
        padding-left: 10px;
        padding-right: 10px;
    }
    .login-form .heading{
        color: var(--text);
        text-align: center;
        font-size: 1.5rem;
        font-weight: 900;
        text-transform: capitalize;
    }
    .login-form .small{
        text-align: center;
        color: var(--muted);
        font-size: 14px;
        margin-bottom: 30px;
    }
    .login-form .heading span{
        color: var(--primary);
    }
    .login-form .inputField{
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 30px;
        position: relative;
    }
    .login-form .inputField input{
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid #ccc;
        padding: 15px;
        border-radius: 20px;
        width:  350px;
        text-align: center;
        color: var(--text);
    }
    .login-form .inputField input:focus{
        border-color: var(--accent);
        outline: none;
    }
    .login-form .inputField input::placeholder{
        color: var(--text);
    }
    .login-form .inputField img{
        width: 65px;
        height: 65px;
        border-radius: 50%;
        background-color: #fff;
        border: 1px solid #ccc;
        padding: 10px;
    }
    .login-form .inputField .user{
        position: absolute;
        left: -10px;
    }
    .login-form .inputField .lock{
        position: absolute;
        right: 0;
    }
    .login-form button{
        width: 100%;
        padding: 15px;
        border-radius: 25px;
        background: #2563eb;
        font-size: 15px;
        text-transform: capitalize;
        font-weight: 900;
        border: none;
        color: #fff;
        cursor: pointer;
        transition: 0.3s;
    }
    .login-form button:hover{
        background: #1e40af;
        cursor: pointer;
    }
    .login-form .signUp-Link{
        margin: 0 auto;
        text-align: center;
        margin-top: 15px;
    }
    .login-form .signUp-Link a{
        text-decoration: none;
        color: var(--text);
        font-size: 16px;
        font-weight: 600;
    }
}
/*====ANIMATIONS====*/
.navbar .nav-links .link{
    position: relative;
    text-decoration: none;
}

.navbar .nav-links .link::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0%;
    height: 2px;
    background-color: #fff;
    transition: width 0.3s ease;
}
.navbar .nav-links .link:hover::after{
    width: 100%;
}

.hero-content{
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 2s ease forwards;
}

.hero h2{
    opacity: 0;
    transform: translateX(30px);
    animation: fadeUp 2s ease forwards;
    animation-delay: 0.2s;
}
.buttons{
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 2s ease forwards;
    animation-delay: 0.4s;
}
@keyframes fadeUp {
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

.hero{
    background: linear-gradient(135deg, #0f172a, #1e3a8a);
    /*background: linear-gradient(270deg, #0f172a, #1e3a8a, #2563eb);*/
    background-size: 600% 600%;
    animation: gradientMove 12s ease infinite;
}

@keyframes gradientMove {
    0% { background-position: 0% 50%;}
    50% { background-position: 100% 50%;}
    100% { background-position: 0% 50%;}
}

.reveal{
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s ease;
}
.reveal.show{
    opacity: 1;
    transform: translateY(0);
}

.hero .buttons a{
    animation:  pulse 5.5s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);}
    70% { box-shadow: 0 0 0 15px rgba(59, 130, 246, 0);}
    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);}
}