.indexBanner{
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.8), rgba(8, 8, 241, 0) 50%), url("../images/home.jpg");
    position: relative;
    display: inline-block;
    width: 100%;
    height: 400px;
    background-size: cover ;
    background-position: center;
}
.slogan{
  position: absolute;
  /* width: 100%; */
  top: 50%;
  left: 30px;
  transform: translate(0, -50%);
  color: white;
  font-family: Roboto-Thin;
  font-size: 48px;
  text-shadow: 2px 2px 2px black;
}
.slogan p{
    padding-top: 10px;
    font-size: 30px;
}
.banner-info{
    width: 100%;
    height: auto;
    margin-bottom: 40px;
    padding: 20px 10px;
    background-color: rgb(154,196,250);
    color: white;
    text-shadow: black 1px 1px 2px;
}
.directory{
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
   align-items: center;
   justify-content: space-evenly;
   margin: 0 0 20px 20px;
   width: calc(33.3% - 27px);
   aspect-ratio: 1 / 1;
   /* border: solid 1px black;
   border-radius: 5px; */
   background: linear-gradient(135deg, rgb(192, 192, 192), rgba(156, 156, 180, 0) 70%);
   /* background-color: rgb(154, 196, 250); */
}
.directory img{
    
    width: 90%;
    height: auto;
    /* aspect-ratio: 356/150; */
    /* object-fit: cover; */
    padding: 10px;
    border-radius: 5px;
}
.directory h2{
    padding: 0 10px;
    text-align: center;
    color: #333333;;
}


.advantages{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;
    margin: 0 0 20px 20px;
    width: calc(33.3% - 27px);
    height: auto;

    /* border: solid 1px black;
    border-radius: 5px; */
    /* background: linear-gradient(135deg, rgb(192, 192, 192), rgba(156, 156, 180, 0) 70%); */
    background-color: rgb(223, 236, 253);
 }
 .advantages h2{
    padding: 15px 15px;
    text-align: center;
} 
 .advantages p{
    padding: 15px 15px;
    text-align: center;
}

@media (max-width: 768px) {
    .directory{
        width: calc(50% - 30px);
        margin: 0 0 20px 20px;
    }
    .advantages{
        width: calc(100% - 40px);
        margin: 0 0 20px 20px;
    }
}
@media (max-width: 480px) {
    .indexBanner{
        height: 200px;
        background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.8)30%, rgba(8, 8, 241, 0) 70%), url("../images/home.jpg");
    }
    .directory{
        width: calc(100% - 40px);
        margin: 0 0 20px 0;
    }
    .advantages{
        width: calc(100% - 40px);
        margin: 0 0 20px 0;
    }
}