.banner{
    width:100%;
    height:auto !important;
}
div{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:space-around;
}
#navbar{
    flex-direction:row;
    width:100%;
    background-color:#26a2e0;
    height:10rem;
    opacity: initial;
}
a{
    text-decoration: none !important;
    color:inherit;
}
.links{   
    color:white !important;
}
.main{
    width:80%;
    flex-direction:row ;
    
}
h4{
    text-align:center !important;
}
.title{
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    margin-bottom:2rem;
    color:royalblue;
}
.box{
    width:90%;
    height:100%;
    background-color:rgb(255, 255, 255);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    padding:1rem;
    margin-bottom:3rem;
    direction: inherit;
}

  
  .box-img {
    width: 40%;
    height: 100%;
    padding: 1rem;
    margin-bottom: 2rem;
    border-radius: 10px;
    margin-top: -1rem; /* Add a negative top margin to the image */
  }
  .card-img{
    width: 10rem !important;
    height: 10rem;
  }
  .icon{
    width:1rem;
    height:1rem;
  }
  