@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

 :root {

     --ff-poppins: 'Poppins', sans-serif;


     --fs-xl: 2rem;
     /* 32/16 */
     --fs-lg: 1.25rem
         /* 20/16 */
     ;
     --fs-md: 1rem;
     --fs-sm: .875rem;
     /* 14/16 */
     --fs-xs: .75rem;
     /* 12/16 */

     --fw-a: 500;
     /* 400/16 */
     --fw-b: 600;
     /* 600/16 */
     --fw-c: 700;
     /* 700/16 */


 }

 /* --------- CSS RESET - START ---------*/

 *,
 *::before,
 *::after {
     box-sizing: border-box;
 }


 * {
     margin: 0;
     padding: 0;
 }

 body {

     line-height: 1.5;
     -webkit-font-smoothing: antialiased;
 }


 img,
 picture,
 video,
 canvas,
 svg {

     max-width: 100%;
     height: auto;
 }

 input,
 button,
 textarea,
 select {
     font: inherit;
 }

 p,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     overflow-wrap: break-word;
 }

 p {
     text-wrap: pretty;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     text-wrap: balance;
 }


 #root,
 #__next {
     isolation: isolate;
 }

 /* --------- CSS RESET - END ---------*/


 html {
     min-height: 100vh;
     min-width: 320px;

 }

 body {

     min-height: 100vh;
     min-width: 320px;
     display: flex;
     flex-direction: column;
     background-image: url(images/1.jpg);
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     font-family: var(--ff-poppins);
     color: rgb(222, 215, 215);
 }


 /*---------------- NAVIGATION ------------------------*/

 .navigation {


     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 30px 15px;
     margin: 0 20px;
 }

 .bar {
     display: none;
 }



 .logo {
     font-size: 24px;
     font-weight: var(--fw-b);
 }


 .nav-ul {
     display: flex;
     gap: 60px;
     list-style: none;
 }


 a {
     text-decoration: none;
     color: rgb(222, 215, 215);
     font-size: var(--fs-md);
     font-weight: 500;

 }

 a:hover {

     color: #3a3238;
     font-weight: var(--fw-c);

 }

 .login-button {

     padding: 9px 25px;
     font-weight: var(--fw-b);
     border: none;
     outline: none;
     border-radius: 20px;
     background-color: rgba(255, 255, 255, 0.1);
 }

 .login-button:hover {
     box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
     transform: scale(1.05);
     color: white;
 }

 /*---------------HERO--------------------*/

 .welcome {
     display: flex;
     flex-direction: column;
     justify-content: center;
     text-align: center;
     gap: 20px;
     max-width: 500px;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }

 .title {
     font-size: 60px;
 }

 .subtitle {
     font-size: var(--fs-sm);
 }



 /* ------------ login page styles ------------- */

 body.login-page {
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
 }

 .home-button {
     position: absolute;
     top: 7%;
     right: 20%;
     padding: 9px 25px;
     font-weight: var(--fw-b);
     border: none;
     outline: none;
     border-radius: 20px;
     background-color: rgba(255, 255, 255, 0.1);
 }

 .home-button:hover {
     box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
     transform: scale(1.05);
     color: white;
     cursor: pointer;
 }


 .top {
     font-size: 40px;
     text-align: center;
     padding: 15px 0;
 }


 .login-container {
     display: flex;
     flex-direction: column;
     gap: 30px;
 }


 .login-box {
     display: flex;
     align-items: center;
     position: relative;
 }


 .login-box i {
     position: absolute;
     left: 8%;
 }


 .input-field {
     background-color: rgba(255, 255, 255, 0.1);
     width: 100%;
     font-weight: var(--fw-a);
     color: white;
     text-align: left;
     border: none;
     outline: none;
     border-radius: 30px;
     padding: 10px 80px;
 }


 .two-col {
     display: flex;
     justify-content: space-between;
     font-weight: var(--fw-a);
     padding: 0 6px;
 }


 .one label {
     cursor: pointer;
     font-weight: 500;

 }

 .submit {
     width: 100%;
     background-color: whitesmoke;
     color: #3a3238;
     font-weight: var(--fw-b);
     text-align: center;
     border: none;
     outline: none;
     padding: 10px;
     border-radius: 30px;
     cursor: pointer;
 }


 .submit:hover {
     scale: 1.05;
     box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
 }


 .register {
     width: 100%;
     text-align: center;
     padding: 10px;
 }


 .register_text {
     font-size: var(--fs-md);
     font-weight: var(--fw-b);
     text-decoration: underline;
     padding-left: 5px;
     cursor: pointer;
 }

 :is(.register_text, .a_login):is(:hover, :focus) {
     color: rgb(198, 143, 161);
 }



 /*------------ DROPDOWN MENU --------------*/



 .dropdown-menu {
     display: none;
     position: absolute;
     right: 40px;
     top: 70px;
     background-color: rgba(255, 255, 255, 0.1);
     width: 200px;
 }


 .dropdown_ul {
     list-style: none;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     padding: 10px;
 }

 .dropdown-menu li {
     padding: 6px;
     width: 100%;
 }

 .dropdown-menu li a {
     width: 100%;
     display: flex;
     justify-content: center;
     padding: 4px;
 }


 .dropdown-menu li a:hover {
     background-color: rgba(255, 255, 255, 0.1);
     box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
     transform: scale(1.05);
     border-radius: 30px;
 }


 /*--------------- Responsive --------------*/

 @media (max-width:738px) {

     .nav,
     .navigation .login-button {
         display: none;
     }

     .bar {
         display: block;
         font-size: 30px;
         cursor: pointer;
     }

     .dropdown-menu .login-button {
         width: 100%;
         display: flex;
         justify-content: center;
     }


     .bar:hover+.dropdown-menu,
     .dropdown-menu:hover {
         display: block;
     }


     .title {
         font-size: 40px;
     }

     .subtitle {
         font-size: var(--fs-xs);
     }

     .login-container {
         padding: 40px;
     }

 }