*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
body{
     background: #020410;
}
.header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 25px 12.5%;
    background: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}
.navbar a{
    position: relative;
    font-size: 16px;
    color: #e4e4e4;
    text-decoration: none;
    font-weight: 500;
    margin-right: 30px;
}
.navbar a::after {
    content:'';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 2px;
    background: #e4e4e4;
    border-radius: 5px;
    transform: translateY(10px);
    opacity: 0;
    transition: .5s;
}
.navbar a:hover:after{
    transform: translateY(0);
    opacity: 1;
} 
.search_bar{
    width: 250px;
    height: 45px;
    background: transparent;
    border: 2px solid #e4e4e4;
    border-radius: 6px;
    display: flex;
    align-items: center;
}

.backgroung{
    width: 100%;
    height: 100vh;
    background: url('hero-slider-1.jpg') no-repeat;
    background-size: cover;
    background-position: center;
    filter: blur(2px);
}
.search_bar input{
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-size: 16px;
    color: #e4e4e4;
    padding-left: 10px;

}
.search_bar input::placeholder{
    color: #e4e4e4;

}
.search_bar button{
    width: 40px;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

}
.search_bar button i {
    font-size: 22px;
    color: #e4e4e4;


}
.container{
    position: absolute;
    top: 51%;
    left: 50%;
    transform: translate(-50% ,-50%);
    width: 75%;
    height: 500px;
    background: url('hero-slider-1.jpg') no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    margin-top: 20px;
}
.container .content{
    position: absolute;
    top: 0;
    left: 0;
    width: 58%;
    height: 100%;
    background: transparent; 
    padding: 80px;
    color: #e4e4e4;
    display: flex;
    justify-content: space-between;
    flex-direction: column;

}
.content .logo{
    font-size: 40px;
    
}
.text-sci h2{
    font-size: 35px;
    line-height: 1;
}
.text-sci h2 span{
    font-size: 70%;

}
.text-sci p{
    font-size: 16px;
    margin: 20px 0;

}
.social-icons a i{
    font-size: 22px;
    color: #e4e4e4;
    margin-right: 10px;
    transition: .5s ease-in-out;

}
.social-icons a:hover i{
    transform: scale(1.2);
}

.container .logreg-box{
    position: absolute;
    top: 0;
    right: 0;
    width: calc(100% - 58%);
    height: 100%;
    overflow: hidden;
    /* background: red; */
}
.logreg-box .form-box{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: transparent;
    backdrop-filter: blur(3px);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    color: #e4e4e4; 
}

.logreg-box .form-box.login {
    transform: translateX(0);
    transition: transform .6s ease;
    transition-delay: .7s;
}

.logreg-box.active .form-box.login{
    transform: translateX(430px);
    transition-delay: 0s;
}
.logreg-box .form-box.register{
    transform: translateX(430px);   
    transition: transform .5s ease;
    transition-delay: 0s;
}
.logreg-box.active .form-box.register{
    transform: translateX(0);   
    transition-delay: .7s;
}

form-box h2{
    font-size:32px;
    text-align: center;
}
.form-box .input-box{
    position: relative;
    width: 340px;
    height: 50px;
    border-bottom: 2px solid #e4e4e4;
    margin: 30px;
}
.input-box input{
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-size: 16px;
    color: #e4e4e4;
    font-weight:500;
    padding-right: 28px;

}
.input-box label{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    font-size: 16px;
    font-weight: 500;
    pointer-events: none;
    transition: .5s ease;
}
.input-box input:focus~label,
.input-box input:valid~label{
    top: -5px;
}


.input-box .icon{ 
    position: absolute;
    top: 13px;
    right: 0;
    font-size: 19px;

}
.remember-forget{
    font-size: 14.5px;
    font-weight: 500;
    margin: -15px 0 15px;
    display: flex;
    justify-content: space-between ;

}
.form-box .remember-forget{
font-size: 14.5px;
font-weight: 500;
margin: -10px 0 10px;
display: flex;
justify-content: space-between;
}
.remember-forget label input{
    accent-color: hsl(38, 61%, 73%);;
    margin-right: 3px;

}
.remember-forget a{
    color: hsl(38, 61%, 73%);;
    text-decoration: none; 

}
.remember-forget a:hover {
    text-decoration: underline;
}
.btn{
    width: 100%;
    height: 45px;
    background: hsl(38, 61%, 73%);;
    outline: none;
    border: none;
    outline: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
}
.form-box .login-register{
    font-size: 14.5px;
    font-weight: 500;
    text-align: center;
    margin-top: 25px;

}

.login-register p a{
color: hsl(38, 61%, 73%);;
font-weight: 600;
text-decoration: none;

}
.login-register p a:hover{
    text-decoration: underline;
}

:root {

    /**
     * COLORS
     */
  
    --gold-crayola: hsl(38, 61%, 73%);
    --quick-silver: hsla(0, 0%, 65%, 1);
    --davys-grey: hsla(30, 3%, 34%, 1);
    --smoky-black-1: hsla(40, 12%, 5%, 1);
    --smoky-black-2: hsla(30, 8%, 5%, 1);
    --smoky-black-3: hsla(0, 3%, 7%, 1);
    --eerie-black-1: hsla(210, 4%, 9%, 1);
    --eerie-black-2: hsla(210, 4%, 11%, 1);
    --eerie-black-3: hsla(180, 2%, 8%, 1);
    --eerie-black-4: hsla(0, 0%, 13%, 1);
    --white: hsla(0, 0%, 100%, 1);
    --white-alpha-20: hsla(0, 0%, 100%, 0.2);
    --white-alpha-10: hsla(0, 0%, 100%, 0.1);
    --black: hsla(0, 0%, 0%, 1);
    --black-alpha-80: hsla(0, 0%, 0%, 0.8);
    --black-alpha-15: hsla(0, 0%, 0%, 0.15);
  
    /**
     * GRADIENT COLOR
     */
  
    --loading-text-gradient: linear-gradient(90deg, transparent 0% 16.66%, var(--smoky-black-3) 33.33% 50%,  transparent 66.66% 75%);
    --gradient-1: linear-gradient(to top,hsla(0, 0%, 0%, 0.9),hsla(0, 0%, 0%, 0.7),transparent);
  
    /**
     * TYPOGRAPHY
     */
  
    /* font-family */
    --fontFamily-forum: 'Forum', cursive;
    --fontFamily-dm_sans: 'DM Sans', sans-serif;
  
    /* font-size */
    --fontSize-display-1: calc(1.3rem + 6.7vw);
    --fontSize-headline-1: calc(2rem + 2.5vw);
    --fontSize-headline-2: calc(1.3rem + 2.4vw);
    --fontSize-title-1: calc(1.6rem + 1.2vw);
    --fontSize-title-2: 2.2rem;
    --fontSize-title-3: 2.1rem;
    --fontSize-title-4: calc(1.6rem + 1.2vw);
    --fontSize-body-1: 2.4rem;
    --fontSize-body-2: 1.6rem;
    --fontSize-body-3: 1.8rem;
    --fontSize-body-4: 1.6rem;
    --fontSize-label-1: 1.4rem;
    --fontSize-label-2: 1.2rem;
  
    /* font-weight */
    --weight-regular: 400;
    --weight-bold: 700;
  
    /* line-height */
    --lineHeight-1: 1em;
    --lineHeight-2: 1.2em;
    --lineHeight-3: 1.5em;
    --lineHeight-4: 1.6em;
    --lineHeight-5: 1.85em;
    --lineHeight-6: 1.4em;
  
    /* letter-spacing */
    --letterSpacing-1: 0.15em;
    --letterSpacing-2: 0.4em;
    --letterSpacing-3: 0.2em;
    --letterSpacing-4: 0.3em;
    --letterSpacing-5: 3px;
  
    /**
     * SPACING
     */
  
    --section-space: 70px;
  
    /**
     * SHADOW
     */
  
    --shadow-1: 0px 0px 25px 0px hsla(0, 0%, 0%, 0.25);
  
    /**
     * BORDER RADIUS
     */
  
    --radius-24: 24px;
    --radius-circle: 50%;
  
    /**
     * TRANSITION
     */
  
    --transition-1: 250ms ease;
    --transition-2: 500ms ease;
    --transition-3: 1000ms ease;
  
  }
.bt {
    position: relative;
    color: var(--gold-crayola);
    font-size: var(--fontSize-label-2);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letterSpacing-5);
    max-width: max-content;
    border: 2px solid var(--gold-crayola);
    padding: 12px 45px;
    overflow: hidden;
    z-index: 1;
  }
  
  .bt::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 0%;
    transform: translateX(-50%);
    width: 200%;
    height: 200%;
    border-radius: var(--radius-circle);
    background-color: var(--gold-crayola);
    transition: var(--transition-2);
    z-index: -1;
  }
  
  .bt .text { transition: var(--transition-1); }
  
  .bt .text-2 {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: max-content;
    color: var(--smoky-black-1);
  }
  
  .bt:is(:hover, :focus-visible)::before { bottom: -50%; }
  
  .bt:is(:hover, :focus-visible) .text-1 { transform: translateY(-40px); }
  
  .bt:is(:hover, :focus-visible) .text-2 {
    top: 50%;
    transform: translate(-50%, -50%);
  }
  
  .bt-secondary {
    background-color: var(--gold-crayola);
    color: var(--black);
  }
  
  .bt-secondary::before { background-color: var(--smoky-black-1); }
  
  .bt-secondary .text-2 { color: var(--white); }