* {
   font-family: 'Merienda', cursive;
}
html{
  height: 100%;
}


body{
  background-color: #414040 ;
  position: relative;
}
.background{
 width: 1500px;
 height: 1250px ;
 position: center;
 display: inline;
 position: fixed;
 background-image: url(../Img/bg.jpg);
 filter: blur(10px);
 opacity: 0.3;
 background-size: cover;
 z-index: -7777;
}



h1 {
  text-align: center;
  color:#7B4413    ;
  font-size: 36px;
  font-weight: bold;
}

h2 {
  font-size: 30px;
  font-weight: bold;
  text-align: left;
}

table   {
width:  80%;
border-collapse : collapse;
border-radius: 10;
}

th, th  {
padding :10px 10px;
border : 1px solid #efe6df00;
}

.container  {
  font-size :16px;
  position: center;
  display: flex;
  width: 75%;
  height: auto;
  margin: 75px auto;
  padding: 15px;
  box-shadow: 10px 10px 10px rgba(22, 22, 23, 0.747);
  border-radius: 20px;
  background-color: #EECDB0;
  z-index :8888888;

}
.left, .right  {
  width: 45%;
  display: inline-block;
  box-sizing: border-box;
  float: left;
}
.img-holder {
  border: 5px solid #784212 ;
  margin: 40px;
  border-radius: 10px;
}
      
.img-holder img {
  width: 100% ;
  height: auto;
  display: block;
  border-radius: 5px;
  box-shadow: 10px 10px 10px rgba(103, 99, 97, 0.747);
}

ol  {
  font-size :14px
}



MainMenu {
  
  background-color: #E7B88F;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0);
  position: fixed;
  display: flex;
  width: 100%;
  top: 0;
  left: 0;
  z-index :999999;

}




.LOGO img{
   height: 60px;
   width: auto;
   padding-left: 15px;
  
  
}

.Menu{
  width: 100%;
  margin: 0;
  height: 5px;
  text-align: right;
}

.Menu  li {
  display:  inline-block;
  padding: 0 15px;
}

.Menu  li a {
  text-decoration: none;
  font-size: 14px;
  line-height: 5;
  padding-top: 5;
  padding-bottom: 0;
  display:  inline-block;
  color: #161615;
}




.Menu ul  ::after {
  content: "";
  width: 0%;
  height: 2px;
  background: #141312;
  display: block;
  margin: auto;
  transition: 0.3s;
}

.Menu ul :hover ::after {
  width: 100%;

}



.SubMenu {
   background-color: #E7B88F;
   box-shadow: 4px 4px 4px rgba(0, 0, 0, 0);
   list-style-type: none;
   display: none;
   position: absolute;
   min-width: 140px;
   top: 50px;
   right:210px;
   padding: 20px 0;
   text-align: center;
   
}
.SubMenu  li {
  padding: 5px;
  list-style-type: none;
  text-align: center;
  line-height: 0px;
  padding-top: 0px;
  padding-left: 0px;
  display: block;

 
}

.Menu  li:hover .SubMenu  {
  display: block;
  transition: all 0.3s ease-in-out;
}

.Menu .SubMenu li:hover a{
  transition: all 0.3s ease-in-out;
}


.Menu .btnLogin-popup{
   width: 120px;
   height: 50px;
   background: transparent;
   border: 1px  #ffffff;
   outline: none;
   border-radius: 15px;
   cursor: pointer;
   font-size:1.1em;
   color: #161615;
   font-weight: 400;
   transition: .5s;
}


.Menu .btnLogin-popup:hover{
   display: block;
   transition: all 0.3s ease-in-out;
   background: #E1DAD1;
   color: #141312;
}

.footer {
  background-image: linear-gradient(to right,  #342f2d,#896240 , #a06c3e);
  border-top-left-radius: 30px;
  box-sizing: border-box;
  
}

.footer .Socials{
  text-align: center;
  padding: 40px 0;
  color: #e8ccb3;   
}

.footer .Socials a {
  font-size: 25px;
  color: inherit;
  border: 2px solid #b0b0af;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  display: inline-block;
  border-radius: 40%;
  margin: 0 8px;
  opacity: 0.5;

}

.footer .Socials a:hover {
  transform: 0.5s;
  opacity: 0.9;
}

.footer ul {
  margin-top: 0;
  padding: 0;
  list-style: none;
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 0;
  text-align: center;
  
  
}

.footer ul li a {
  color: #e8ccb3;
  text-decoration: none;
  opacity: 0.5;
}

.footer ul li{
  display: inline-block;
  padding: 0 15px;
}

.footer ul li a:hover {
  opacity: 1;
  transition: 0.5s;
}

.footer .Copyright {
  margin-top: 10px;
  text-align: center;
  font-size: 15px;
  color: #e8ccb3;
}


footer {
  background-image: linear-gradient(to right,  #342f2d,#896240 , #a06c3e);
  border-top-right-radius: 50px;
  border-top-left-radius: 50px;
  bottom: 0;
  left: 0;
  width: 100%;
  position: relative;
         
}

.Socials{
  text-align: center;
  padding: 20px ;
  color: #e8ccb3;   
}

.Socials a {
  font-size: 20px;
  color: inherit;
  border: 2px solid #b0b0af;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  display: inline-block;
  border-radius: 40%;
  margin: 0 8px;
  opacity: 0.5;

}

.Socials a:hover {
  transform: 0.5s;
  opacity: 0.9;
}

ul {
  margin-top: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  
  
}

ul li a {
  color: #e8ccb3;
  text-decoration: none;
  opacity: 0.5;
}

ul li{
  display: inline-block;
  padding: 0 15px;
}

ul li a:hover {
  opacity: 1;
  transition: 0.5s;
}

.Copyright {
  margin-top: 10px;
  text-align: center;
  font-size: 14px;
  color: #e8ccb3;
}


.wrapper{
   position: fixed;
   width: 400px;
   height: 440px;
   background: #e8ccb3 ;
   border: 2x solid rgba(220, 157, 54, 0.8);
   border-radius: 50px;
   backdrop-filter: blur(30px);
   box-shadow:  0 0 30px rgba(0, 0, 0, .5);
   display: flex;
   justify-content: center;
   left: 550px;
   top: 150px;
   overflow: hidden; 
   transform: scale(0);
   transition: transform .5s ease,  height .5s ease; 
   z-index: 9999999999;
   backdrop-filter: blur(20px);
   
   

}

.wrapper.active-popup{
   transform: scale(1);
   
   
   
}

.wrapper.active{
   height: 520px;
   
   
} 

.wrapper.form-box   {
   width: 100%;
   padding: 40px;
   
}

.wrapper .form-box.login {
  transition: transform .18s ease;
  transform: translate(0);
}

.wrapper.active .form-box.login {
   position: absolute;
   transform: translateX(-400px); 
   width: 300px; 
}
.wrapper .form-box.register {
   position: absolute ;
   transition: none;
   transform: translateX(400px);
}

.wrapper.active .form-box.register {
   transition: transform .18s ease;
   transform: translate(0);
   width: 300px;

}

.form-box h2{
   font-size: 2em;
   color: #834909;
   text-align: center;
}



.input-box label {
   position: absolute;
   top: 50%;
   left: 5px;
   transform: translateY(-50%);
   font-size: 1em;
   color: #784212;
   font-weight: 500;
   pointer-events: none;
   transition: .5s;
}

.input-box input:focus~label,
.input-box input:valid~label{
   top: -5px;
}


.input-box input {
   width: 100%;
   height: 100%;
   background: transparent;
   border: none;
   outline: none;
   font-size: 1em;
   color: #834909;
   font-weight: 600;
   padding: 0 35px 0 5px;
}

.input-box .icon {
   position: absolute;
   right: 8px;
   font-size: 1.2em;
   color:#896240;
   line-height: 57px;
}

.wrapper .close{
   position: absolute;
   top: 5px;
   right: 10px;
   width: 45px;
   height: 45px;
   background-color: transparent;
   font-size: 2em;
   color: #834909;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
   z-index: 1;
  

}



.input-box{
   position: relative;
   width: 100%;
   height: 50px;
   border-bottom: 2px solid #8C785B;
   margin: 30px 0;
}

.remember-forgot{
   font-size: .8em;
   color:#896240;
   font-weight: 500;
   margin: -15px 0 15px;
   display: flex;
   justify-content:space-between;
}

.remember-forgot label input{
   accent-color:#8C785B;
   margin-right: 3px;
}

.remember-forgot a {
   color: #896240;
   text-decoration: none;
}

.remember-forgot  a:hover  {
   text-decoration: underline;
}


.btn {
   width: 100%;
   height: 45px;
   background: #bc9777;
   border: none;
   outline: none;
   border-radius: 6px;
   cursor: pointer;
   font-size: 1em;
   color: #21201f;
   font-weight: 500;
}

.login-register{
   font-size: .9em;
   color:#896240;
   text-align: center;
   font-weight: 500;
   margin: 25px 0 10px;

}

.login-register p a {
   color:#896240;
   text-decoration: none;
   font-weight: 600;
}

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