body{
    font-family: "Sofia", sans-serif;
    background: linear-gradient(0.25turn, rgba(236, 243, 169, 0.589), rgba(158, 106, 106, 0.712));
  }

*{
    margin: 0;
    padding: 0;
}

body{
    
    justify-content: center;
    
}


.container{
    grid-template-columns: auto auto auto;
    display: grid;  
    margin :auto;
    max-width: 70%;
    text-align: center;
    align-items: center;
    max-height: 100%
    
    
}
 .card{
    border-radius: 20px;
    width: 200px;
    height: 400px;
    position: relative;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    margin: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    max-height: 100%;
    
}
.container .card .box img{
    max-width: 100%;    
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding-top: 10rem;
  }
.container{
  display: grid;
  max-width: 800px;
  grid-template-rows: auto; 
}

.container-2 {
    grid-template-columns: auto auto auto;
    display: grid;  
    margin :auto;  
}
.container-3{
    grid-template-columns: auto auto auto;
    display: grid;  
    margin: auto;  

}
.container-4{
    grid-template-columns: auto auto auto;
    display: grid;  
    margin: auto;  

}


h1{
  text-align: center;
}

h3{
  font-size: 50px;
  max-width: 800px;
  margin: auto;
  padding: 20px;
  text-align: center;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
  }
  
  li {
    float: left;
  }
  
  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  li a:hover:not(.active) {
    background-color: #111;
  }
  
  .active {
    background-color: #04AA6D;
  }
  .logo img{
    width: 90px;
    height: 90px;
    max-width: 50%;    
    height: auto;
  
  }
  

/*Footer--------*/
.footer-container {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 20px;
  background: linear-gradient( #555555, #161616);
  color: white;
  padding-bottom: 20px;
  margin-top:110px;
}

.footer-left {
 flex: 1;
 display: flex;
 flex-direction: column;
 padding: 5px;
}
.left{
  display: inline;
  justify-content: space-between;
  padding: 0 12px;
  
}

.a2{
  
  font-size: 20px;
  font-family: "Arial", Helvetica, sans-serif;
  margin: 17px;
  padding: 8px;
}

#map{
  color: #be1616;
  font-size: 23px;
}
#ins{
  font-size: 23px;
  color: rgb(213, 56, 161);
}

#tw{
  font-size: 23px;
  color: rgb(68, 68, 242);
}


.footer-right {
  padding: 5px;
 flex: 1;
 display: flex;
 flex-direction: column;
 text-align: center;
}
.a3{
  font-size: 20px;
  font-family: "Arial", Helvetica, sans-serif;
  margin: 17px;
  padding: 8px;
  flex-direction: column;
  color: #e58b8b;
  text-decoration: none;

}