@import url('https://fonts.googleapis.com/css2?family=Bona+Nova:wght@400;700&family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100&family=Roboto:wght@700;900&family=Rowdies&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Bona+Nova:wght@400;700&family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100&family=Poppins:wght@300;400;500;600;700;800&family=Roboto:wght@700;900&family=Rowdies&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: poppins,sans-serif;
}
:root{
    --body-color:#E4E9F7;
    --sidebar-color:#11203a;
    --primary-color:#eee7e7be;
    --primary-color-light:#F9F5FF;
    --toggle-color:#DDD;
    --text-color:#707070;
  
    --tran-02:all 0.2s ease;
    --tran-03:all 0.3s ease;
    --tran-04:all 0.4s ease;
    --tran-05:all 0.5s ease;
  }
  body{
    transition: var(--tran-05);
  }
.container{
    position: fixed;
    top: 0;
    left: 0;
    height: 45%;
    width: 230px;
    padding: 10px 5px;
    background: rgb(15, 23, 48);
    transition: var(--tran-05);
    z-index: 1;
    transform: translateX(-230px);
}
.container .head{
    color: #ffffff;
    font-family: poppins, sans-serif;
    font-size: 25px;
    font-weight:bold;
    padding: 8px;
    margin-bottom: 15px;
    text-align: center;
    letter-spacing: 3px;
}
.head{
    margin:  0% 40px ;
}
.logo{
    margin-top: -33%;
    margin-left: -8rem;
}
ol{
    width: 100%;
    list-style: none;
}

ol li{
    display: block;
    width: 100%;
    height: 50px;
    margin-top: 10px;
    list-style: none;
    display: flex;
    align-items: center;
    transform: var(--tran-02);
}
ol li a{
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    border-radius: 6px;
    margin: 5px 5px 0px;
    color:rgba(249, 249, 249, 0.907);
    transition: var(--tran-04);

}

ol li a i{
    width: 70px;
    font-size: 17px;
    text-align: center;
    padding-left: 5px;
    margin-left: -10px;
}

ol li:hover a{
    width: 100%;
    height: 100%;
    border-radius: 6px;
    background:#fefdfdd4 ;
    color: #000000;
    transition: var(--tran-04);
}

hr{
  border: none;
  height: 0.1px;
  width: 100%;
  background-color: rgb(29, 34, 55);;
  margin: 0.2px 0px;
}

.bottom{
  background-color: #11203a;
  height: 3.5%;
  width: 80%;
  margin-top: 20px;
  margin-left: 23px;
  margin-right: 5px;
  border-radius: 6px;
}
.bottom p {
  color: #DDD;
  font-family: Arial, sans-serif;
  font-size: 14px;
  margin: 10px 22%;
  padding: 12px; 
}
.bottom:hover{
  color: #000000;
  background: #182f56;
}
.contact a i {
  font-size: 20px;
  margin-top: 5px;
  margin-left:20px;
  padding-left: 5px;
}
.contact h1{
  font-family:poppins,sans-serif ;
  font-size: 15px;
  color: #e5d9d9;
  margin: 16px 27%;
}
.us{
  border: none;
  height: 0.1px;
  width: 100%;
  background-color: rgba(219, 227, 220, 0.516);;
  margin: 10px 0px;
}
.search-box {
    background: var(--primary-color-light);
    border-radius: 6px;
    transition: var(--tran-05);
  }
  .search-box i{
    margin-left:50px;
    font-size: 20px;
  }
  .search-box input{
    font-family: Arial, Helvetica, sans-serif;
    height: 100%;
    width: 100%;
    outline: none;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    background-color: var(--primary-color-light);
    padding-left: 15px;
  }
  input{
    -webkit-appearance: none;
}

span{
    position:absolute;
    right:-50px;
    top:13px;
    margin-left: 10px;
    font-size: 25px;
    border-radius: 3px;
    color: #ffffff;
    padding: 3px 8px;
    cursor: pointer;
}
#times{
  color: #DDD;
}
#bars{
  background:#03052df6;
}
#check:checked ~ .container{
    transform: translateX(0);
}
#check:checked ~ .container #bars{
    display: none;
}

.home{
    position: relative;
    background: rgba(239, 238, 238, 0.748);
    transition: var(--tran-05);
  }
  .home .text{
    font-family: poppins,sans-serif;
    font-size: 21px;
    font-weight: 500;
    padding-top: 25px;
    color:rgb(15, 63, 109);
  }
  .home img {
    margin: 10px 12%;
  }
  .container-bar{
    position: relative;
    background: #03052D;
    height: 7.5%;
    width: 100%;
    margin-top: -24px;
 }
 .container-bar img{
    padding-left: 70px;
    margin-top: 14px;
    align-items: center;
    justify-content: center;
  }
  
.navbar{
  display: flex;
}
.navbar a{
  color: #ffffff;
  font-family:Arial, Helvetica, sans-serif;
  font-weight: 700;
  padding: 5px 0;
  margin: 0 30px;
  font-size: 1.1rem;
  font-weight: 500;
  transition: all 0.50s ease;
}
#menu-icon{
  font-size: 35px;
  color: #ffffff;
  cursor: pointer;
  z-index: 10001;
  display: none;
}

@media (max-width:1280px) {
  header{
    padding: 20px 8%;
    display: flex;
    flex-wrap: wrap;
    transition: .2s;
  }
  .navbar a{
    padding: 5px 0;
    margin: 0px 20px;
  }
}

@media (max-width:1080px){
  #menu-icon{
    display: block;
  }
}
  .navbar {
    position: absolute;
    top: 100%;
    right:-100%;
    width: 170px;
    height: 29vh;
    background-color:rgb(255, 255, 255);
    backdrop-filter:blur(7px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-radius: 12px;
    transition: all .50s ease;
}
    .navbar a{
      color: black;
      display:block;
      margin: 12px -50%;
      padding: 0px 25px;
      transition: all .50s ease;
    }

    .navbar a:hover{
      color:rgb(65, 101, 166);
      transform: translateX(2px);
    }
   
    .navbar.open{
      right: 7%;
      margin: 5px -20px;
    }
.login-btn{
  border: none;
  outline: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.94);
  color: #2f3c70;
  font-size: 1rem;
  font-weight: 600;
  padding: 8px 28%;
  margin-left:11%;
  margin-top:8% ;
  border-radius: 3px;
  cursor: pointer;
  transition: 0.15s ease;
}
.login-btn:hover{
  background: #172b4fc9;
  color: #F9F5FF;
}
 .user{
  margin-top: -19%;
 }
 .user i{
  cursor: pointer;
  font-size: 10px;
  margin-top: 0.4rem;
  margin-left: 83%;
 } 
 .user ul{
  position: absolute;
    top: 100%;
   right:-100%;
   width: 105px;
  height: 17vh;
  margin-top: 1rem;
  list-style-type: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-radius: 12px;
  background: hsla(221, 68%, 15%, 0.871);
 }
 .user ul li {
  display: inline-block;
  position: relative;
 }
 .user ul li a {
  display: block;
  padding:0px 0px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  font-size: 12px;
 }
 .user ul li ul.dropdown li{
  display: block;
 }
 .user ul li ul.dropdown{
  width: 100%;
  background: #03052D;
  position: absolute;
  z-index: 999;
  display: none;
 }

 p{
    color: #E4E9F7;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    margin: -8.5% 35.5%;
    font-weight:bolder;
    letter-spacing: 2.5px;
    font-size: 20px;
}
.link{
  font-family:Tahoma, sans-serif;
  font-size: 20px;
  color: #0a93e3ef;
  margin: -1.7px 12rem;
}
.box{
  margin-top: 10px;
 width: 95%;
}
.search{
  background:#e0e5eaf1;
  border-radius: 6px;
  transition: var(--tran-05);
  margin-left: 10px;
}
.search input{
  height: 100%;
  width: 100%;
  outline: none;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  font-family: Arial, Helvetica, sans-serif;
  background-color:#e0e5eaf1;
  padding-left: 10px;
}
.search i{
  font-size: 28px;
  margin-right: 3%;
}
.text{
    background-color: rgba(255, 255, 255, 0.573);
}
.text h1{
  color: rgba(0, 0, 0, 0.87);
  text-align: center;
  font-family: Poppins;
  font-size: 21.66px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 2.057px;
  margin-top: 2.5%;
  margin-bottom: 5px;

}
.text h2{
  color: rgba(0, 0, 0, 0.87);
  text-align: center;
  font-family: Poppins;
  font-size: 21.66px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 2.058px;
  margin-bottom: 5px;
 
}
.text h3{
  color: rgba(0, 0, 0, 0.87);
  text-align: center;
  font-family: Poppins;
  font-size: 21.66px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 2.058px;
  margin-bottom: 5px;
}
.text h4{
  color: rgba(0, 0, 0, 0.87);
text-align: center;
font-family: Poppins;
font-size: 21.66px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 2.058px;
margin-bottom: 1.6rem;
}

.social{
  background-color: #e2e9f1c6;
  border-radius: 2%;
  padding: 1px 3.5px;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  margin-left: 20px;
  margin-top: 18px;
  outline: none;
  border: none;
  cursor: pointer;
}
.containerm{
  position: relative;
  margin-top: 5px;
 
}
.data {
    width: 73%;
    border-radius: 3px;
    height: 92vh;
    overflow-y: auto;
}
#root {
    width: 100%;
}
.boxm {
  width: 94%;
  height: 92px;
  flex-shrink: 0;
  border-radius: 8px;
  background: #ffffffd4;
  margin: 15px ;
}

.boxm img {
    height: 60px;
    margin: 15px 4%;

}
.boxm p {
    color: #000000;
    font-size: 20px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 0.5px;
    margin:-88px 135px;
}
.boxm h1{
  font-size: 15px;
  margin: -22.5px 42px 0px 48px;
  cursor: pointer;
} 
 .boxm h2{
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 1px;
    margin: 110px 88px ;
    cursor: pointer;
}
.share{
  height: 100%;
  margin-top: -135px;
  margin-left: 19.6rem;
  cursor: pointer;
}
.share img{
  height: 20px;
  width: 20px;
  margin:5px ;
}

::-webkit-scrollbar {
    display: none;
}