@import url('https://fonts.googleapis.com/css?family=Montserrat:500');
/* we are adding css for navbar here */
*{
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  font-family: sans-serif;
}
header{
  display:flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 10%;
  background-color: rgb(2, 40, 45);
}
li,button{
  font-family: "Monteserrat", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color:#e6df22;
  text-decoration: none;
  background-color: rgb(2, 40, 45);
}

.logo{
  width:10%;
  cursor:pointer;
  background-color: rgb(2, 40, 45);
}
.nav_links{
  list-style: none;
}
.nav_links li{
  display: inline-block;
  padding: 0 20px;
}
.nav_links li a{
  transition: all 0.3s ease 0s;
  font-family: "Monteserrat", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color:#e6df22;
  text-decoration: none;
  background-color: rgb(2, 40, 45);
}
.nav_links li a:hover{
  color: #07c8f8;
}
button{
  padding:9px 25px;
  background-color: rgba(0,136,169,1);
  border:none;
  border-radius: 50px;
  cursor:pointer;
  transition:all 0.3s ease 0s;
}
button:hover{
  background-color: rgba(0,136,169,0.8);
}
.search-wrapper{
  display: flex;
  flex-direction:column;
  gap: .25rem;
}







/* this is the stlyle css for our main page content */
.main_content{
  width: 100%;
}

.container{
  width: 1170px;
  margin: auto;
  display:flex;
  flex-wrap:wrap;
  justify-content: space-around;
  /* border: 1px solid red; */
}

.container_cards{
  flex-basis: 23%;
  margin: 10px 0px;
  background: white ;
  text-align: center;
  box-shadow: 0px 0px 10px 3px lightgreen;
}
.container_cards h3{
  padding: 10px 0px;
}
.container_cards button{
  padding: 10px 15px;
  margin: 10px 0px;
}
.container_cards:hover{
  background: rgb(88, 237, 230);
}
.container_cards:hover button{
  background: white;
  color: forestgreen;
}









.footer_content{
  background-color: rgb(2, 40, 45);
  border:1px solid black;
  margin-top: 20px;
}





@media only screen and (min-width: 200px) and (max-width: 767px){
  .container{
    width: 100%;
    flex-direction: column;
  } 
  .container_cards{
    margin: 10px;
  }
}