@font-face {
    font-family: 'myfont';
    src: url('../fonts/HacenTunisia.ttf');
    font-weight: normal;
    font-style: normal;
    
  }

main{
    margin-bottom: 2vw;

}
.loc-tim-conn{
    width: 95%;
    padding-top: 2vw;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 2vw;
margin: 1vw 2.5vw 1vw 2.5vw;
}



.loc,.conn,.time{
    width: 30vw;
    height: 24vw;
    padding: 3vw;
    display: flex;
    flex-direction: column;
    justify-self:center;
    align-items: center;
    box-shadow: 0 0 0.5vw rgba(0,0,0,0.5);

}


.loc-tim-conn img{
    width:25% ;
    height: auto;
}

.loc-tim-conn h1{
    width:100%;
    color: #000;
   font-family:'myfont';
    font-size: 1.6vw;
    text-align: center;
    font-weight: bold;
    margin-top: 2vw;
}

.loc-tim-conn p {
    width:100%;
    color: #000;
   font-family:'myfont';
    font-size: 1vw;
    margin-top: 1.5vw;
    text-align: center;
  }

.affable{
   width: 97%;
       display: flex;
          justify-content: center;
          align-items: center;
          margin: 1vw;
          padding: 1vw;
          margin-top: 2vw;
}


  .social-media-icons2{
      width: 50%;
        display: flex;
        flex-direction:row;
         justify-content: center;
          align-items: center;
  }

     .social2{
        width: 4vw;
        height: auto; 
        margin-right: 2vw;
      }





 

    @media screen and (max-width:768px) {

           .social2{
        width: 7vw;
        height: auto; 
        margin-right: 3vw;
      }

   
        .loc-tim-conn{
            width: 95%;
            padding-top: 2vw;
            grid-template-columns: repeat(2,1fr);
            gap: 3vw;
        margin: 1vw 2.5vw 1vw 2.5vw;
        }
        
        
        
        .loc,.conn,.time{
            width: 46vw;
            height: 38vw;
            padding: 3vw;
            box-shadow: 0 0 0.5vw rgba(0,0,0,0.5);
        
        }
        
        
        .loc-tim-conn img{
            width:25% ;
            height: auto;
        }
        
        .loc-tim-conn h1{
            font-size: 3vw;
            margin-top: 3vw;
        }
        
        .loc-tim-conn p {
            font-size: 2.3vw;
            margin-top: 2vw;
          }
        

    }
    @media screen and (max-width:480px) {
           .social2{
        width: 10vw;
        height: auto; 
        margin-right: 4vw;
      }


        main{
            margin-bottom: 5vw;
        }

        .loc-tim-conn{
            width: 95%;
            padding-top: 5vw;
            grid-template-columns: repeat(1,1fr);
            gap: 6vw;
        margin: 1vw 2.5vw 1vw 2.5vw;
        }
        
        
        
        .loc,.conn,.time{
            width: 90vw;
            height: 72vw;
            padding: 6vw;
            box-shadow: 0 0 0.7vw rgba(0,0,0,0.5);
        
        }
        
        
        .loc-tim-conn img{
            width:25% ;
            height: auto;
        }
        
        .loc-tim-conn h1{
            font-size: 5.3vw;
            margin-top: 6vw;
        }
        
        .loc-tim-conn p {
            font-size: 4.3vw;
            margin-top: 3.6vw;
          }
        
    }