.container_index .left_section {
position: relative;
clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
z-index: 1;
}
.container_index .right_section {
position: relative;
z-index: 0;
}
#header{padding: 0 5%;}
.form_register{width: 80%;}
@media (max-width: 1150px) {
.form_register {
width: 90%;
}
}
@media (max-width: 992px) {
#header{padding: 0 3rem !important;}
#form_profile{width: 90% !important; margin: 50px !important;}
#form_profile .my_profile{margin-left: calc(45% - 80px);}
.container_index {
flex-direction: column;
}
.container_index h1,
.container_index h2 {
text-align: center;
}
.container_index .left_section {clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);}
.container_index .left_section,
.container_index .right_section {
width: 100% !important;
height: 50vh;
}
.container_index .right_section {overscroll-behavior-x: none;}
.container_index .right_section .register_title {padding-top: 20rem;}
.container_index .right_section .login_title {padding-top: 4rem;}
}
@media (max-width: 500px) {
.form_register .row_1{flex-direction: column;}
}
#header .my_profile{width: 50px; height: 50px;}
#header .my_profile img{width: 100%; height: 100%; border-radius: 50% !important; object-fit: cover;}
#header .my_nav{
position: fixed;
right: -100%;
top: 90px;
border-top: 1px solid white;
background-color: #212529;
width: 320px;
height: calc(100vh - 100px);
transition: all 0.3s ease-in-out;
}
#header .my_nav.active{right: 0;}
#header .my_nav ul li .nav_link:hover{color: #198754 !important;}
#header .hamburger{cursor: pointer; padding: 30px;}
#header .hamburger .bar{
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: white;
border-radius: 5px;
}
#header .hamburger.active .bar:nth-child(2){opacity: 0;}
#header .hamburger.active .bar:nth-child(1){transform: translateY(8px) rotate(45deg);}
#header .hamburger.active .bar:nth-child(3){transform: translateY(-8px) rotate(-45deg);}
#form_profile{
width: 40%;
margin: 50px auto;
}
#form_profile input{width: 100%;}
#form_profile .my_profile{width: 160px; height: 160px; margin-left: calc(20% + 80px); text-align: center;}
#form_profile .my_profile img{width: 100%; height: 100%; border-radius: 50%; object-fit: contain;}