*{margin:0;
  padding:0;
  box-sizing: border-box;
}

body {
    font-family: lato, sans-serif;
   
    
}



html {
    scroll-behavior: smooth;
  }

/**************/
/****TOP BAR***/
/**************/


.top-bar {
    
    width: 90%;
    margin:0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
   
    
    
}


.company-logo {

    flex:1 10rem;
}


.contact-time-email{
    flex: 3 10rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
   
}



.contact-time-email span {
    margin-right: 0.5rem;
    color: orangered;
    color:#7fe03a;
}
.contact, .time, .email, .quote {
    flex:1 5rem;
    
}

.quote {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.contact-title-p, .time-title-p, .email-title-p{
    color:grey;
}

.contact-title, .time-title, .email-title{
    display: flex;
    justify-content: flex-start;
  
    
}

.contact-number, .time, .email {
    color: black;
    font-weight: 500;
    line-height: 1.3rem;
}


.quote-request{
    display: inline-block;
    color:white;
    background-color:#7fe03a;
    text-decoration: none;
    font-weight: 500;
  
    padding: 0.5rem 0.8rem;
    border-radius: 0.2rem;
    transition: 0.5s;
}

.quote-request:hover {
    color:white;
    background-color: rgb(28, 116, 151);
}

.brand-logo{
    width:10rem;
    margin-bottom:0.5rem;
}


@media screen and (max-width:1140px){
    .contact-time-email{
        flex-direction: column;
    }

  

    .top-bar{
        flex-direction: column;
    }

    .company-logo{
        align-self: flex-start;
    }


}













    

    





.banner{
    text-align: center;
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
     
    
}



h1, h2,h3 {
    letter-spacing: 0.1rem;
}

.banner-h1 {
    text-transform: uppercase;
    font-size: 3rem;
   
    animation: slideFromRight ease-in-out 5s 1;
   
}

.banner-h2 {
    margin-top: 1rem;
    animation: slideFromLeft ease-in-out 5s 1;
    color: white;
    text-shadow: 0 0 0.3rem rgb(6, 6, 80);
    font-style: italic;
    font-size: 2rem;

}



.banner-link {
    text-decoration: none;
    margin-top: 1.5rem ;
    display: inline-block;
    color: whitesmoke;
    padding: 0.8rem 1rem;
    background-color: #a56a0c;;
    box-shadow: 0.2rem 0.1rem 0.3rem black;
    animation: show 5s linear 1;
    transition: 1s all;
    
}

.banner-link:hover {
  
    background-color: rgb(207, 177, 45);
    
}


   

    .banner-h1 { 
        margin-top: 3rem;
        font-size: 2rem;    
    }

    .banner-h2 { 
        font-size: 0.95rem;    
    }

    .banner-link {
       
        padding: 0.5rem 1rem;
       
    }



@media  screen and (min-width:481px)  and (max-width:767px){

    .banner-h1 { 
        font-size: 3rem;    
    }

    .banner-link {
       
        padding: 0.6rem 1rem;
       
    }
}

@media  screen and (min-width:768px)  and (max-width:1023px){

    .banner-h1 { 
        font-size: 3.5rem;    
    }

    .banner-link {
       
        padding: 0.7rem 1rem;
       
    }
}





  
  /*********************/
/*----FOOTER----**/
/********************/

.footer {
    padding: 3rem 0;
    background-color: #0d337a;
   padding-bottom: 0;
}

.footer-copy-center{
   
    width: 90%;
    margin: 0 auto;
    display: flex;
    padding-top: 1rem;
    justify-content: space-between;
    flex-wrap: wrap;
}

.footer-copy-center p {
    color:rgb(24, 156, 189);
}

.footer-copy-center a {
    color:rgb(248, 236, 122);
    text-decoration: none;
}

.footer-copy-center a:hover {
    color:rgb(248, 162, 122);
}

@media screen and (max-width:550px){
    .footer-copy-center{
        flex-direction: column;
        align-items: center;
    }

}

.footer-copyright {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    background-color: #06122a;
}

.footer-divs {
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items:flex-start;
    flex-wrap: wrap;
}

.footer-about, .footer-services, .footer-quote, .footer-facebook {
    flex: 1 15rem;
    max-width: 15rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 2rem;
}

.footer-facebook img{
width:100%;
}


.footer-h3 {
    color:white;
    font-size: 1.3rem;
}

.footer-p {
    color:rgb(202, 226, 236);
}

.footer-services-links{
    list-style: none;
  
 
    
}




.footer-link-a{
    text-decoration: none;
    color:rgb(202, 226, 236);
    display: flex;
}

.footer-link-a:hover{
    color:orange;
}

.footer-link-a p {
    line-height: 1.2rem;
}





/*PARTNERS*/

.partners-section{
    background-color: rgb(255, 255, 255);
    padding: 3rem 0;
    text-align: center;

}

.all-partners{
    width: 85%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
}



.partner-image {
  width: 10rem; 
}

.partner-logo{
    width: 100%;
}

.partner {
    flex: 1 20rem;
    max-width: 20rem;
    margin:1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.partner-name{
    color: rgb(47, 108, 165);
    text-transform: uppercase;
    text-align: center;
}



      

        #preloader{
            background: rgb(255, 255, 255) url('loading.gif');
            background-position: center;
            background-repeat: no-repeat;
            background-size: 20rem;
            width: 100%;
            height: 100vh;
            position: fixed;
            z-index: 3;
        }

       



     


          
  

          .section-center {
                    padding:3.5rem 0; 
                    margin: 0 auto;
                    width: 85%;
                    text-align: center;
                    
          }

          .about-center {
           padding-top: 0;
  }
          
          .who-we-are{
             display: flex;
             flex-direction: column;
             justify-content: center;
             align-items: center;
              
          }

          .who-we-are2{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-top: -4rem;
             
         }

          .audience {
            text-align: center; 
          }

         
.wwa-link {
    text-decoration: none;
    margin-top: 1.5rem ;
    display: inline-block;
    color: #0c5ba5;
    font-size: 1.3rem;
    padding: 0.3rem 0.8rem;
    background-color: #0c5ba500;
    border: 0.2rem solid #0c5ba5;
    box-shadow: 0.2rem 0.1rem 0.3rem black;
    transition: 1s all;
    border-radius: 2rem;
    
}

.wwa-link:hover {
  
    background-color: #0c5ba5;
    color:#ffffff;
    
}











.welcome-p{
    color:#0b70b3;
    font-size: 1.2rem;
    
    line-height: 1.7rem;
    text-align: justify;
    margin-top: 2rem;
    font-family: 'Poppins', sans-serif;
}

@media screen and (max-width:480px){
    
}





/**********************/
/*--CONTACT--**/
/*********************/
.contact-us-details{
    padding: 3rem 0;
}
.contact-section{
    padding: 3rem 0;
    width:85%;
    margin: 0 auto;
    text-align: center;
    padding-top: 0;
}

.contact-details {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;

    background-color: rgb(12, 36, 104);
    width: 90%;
    margin: 0 auto;
    
    padding-bottom: 1.5rem;
}

.contact-detail {
    flex: 1 20rem;
    max-width: 20rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-top: 2rem;
}




.contact-h3{
    font-size: 1.4rem;
    letter-spacing: 0.1rem;
    color:#d6961f;
    margin-bottom: 1rem;
}

.contact-p {
    font-size: 1.3rem;
    color: #ffffff;
    font-size: 1.2rem;
    text-align: center;
}









/**********************/
   /*--HEADER SLIDER--**/
/*********************/

header {
    z-index: -1;
    position: relative;
}
.d-block{
    height:25rem;
    object-fit: cover;
}

.project-1-slide {
    height: 70vh;
}

.vision-slide {
    height: 50vh;
}

.slide-link {
   /* background-color:rgb(108, 235, 35) ;*/
    background-color:rgb(255, 255, 255) ;
    color: rgb(90, 90, 90);
   border-radius: 0.1rem;
    display: inline-block;
    padding: 0.65rem 0.9rem;
   
    box-shadow: 0.1rem 0.2rem 0.3rem black;
    text-decoration: none;
    position: absolute;
    left:0rem;
    top: -2rem;
}

.slide-link:hover {
    background-color:rgb(21, 50, 179);
    color:white;
}

.slide-h1 {
    /*background-color: rgba(235, 135, 21, 0.746);*/
    position: absolute;
    top:-17rem;
    padding: 1rem 0;
    color: #21316f;
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 700;
    font-size: 2.7rem;
    text-align: left;
    text-shadow: 0.1rem 0.1rem 0.2rem rgb(255, 255, 255);
    letter-spacing: 0rem;
}


.slide-p {
    position: absolute;
    top: -8rem;
    font-size: 1.5rem;
    font-weight: 600;
    text-shadow: 0.1rem 0 0.1rem black;
    text-align: left;
    color:#7fe03a;
    line-height: 1.6rem;
 
}

.carousel-indicators{
    color: rgb(133, 202, 30) !important;
    display: none !important;
}

.carousel-control-prev, .carousel-control-next{
    display: none !important;
}



@media screen and (max-width:1023px){
.slide-h1 {
    font-size: 2.5rem;
    line-height: 2.9rem;
   
}

.slide-p{
    font-size: 1.5rem;
    line-height: 1.8rem;
}

}


@media screen and (max-width:480px){
    .slide-h1-2, .slide-h1-3, .slide-h1-4 {
        font-size: 2rem;
        line-height: 2.5rem;
    }
}

@media screen and (max-width:720px){
.slide-h1 {
    background-color: rgba(255, 255, 255, 0.548);
    font-size: 2rem;
    padding: 0 0.5rem;
    margin-top: -5rem;
}

.slide-p {
    margin-top: -2rem;
}

.slide-p2 {
    margin-top: 0;
}

.slide-link{
    margin-top: 1rem;
}

.d-block{
    height:30rem;
}
}
  

/**********************/
   /*--NAV BAR--**/
   /*********************/
 nav {
     background-color: #21316f;
     width:100%;
     border-top: 0.2rem solid rgb(246, 223, 50);
     position: sticky;
     top:0;
    z-index: 9999999999;
    
 }

 .nav-content{
     width: 90%;
     margin: 0 auto;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0.5rem 0;

 }



 .nav-links {
     margin-bottom: 0rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
    
     align-self: center;
    
 }

 .nav-link{
     margin: 0 0.3rem;
     line-height: 1.3rem;
 }

 .nav-link-item {
     text-decoration: none;
     color:white;
     font-size: 1.3rem;
     display: inline-block;
  
     padding: 0.3rem 0.8rem;
     position: relative;
 }

 .nav-link-item:hover {
     color:white;
 }
 .nav-link-item::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 0.3rem;
    top: 150%;
    left: 0;
    background: #ff7000;
    transition: transform 0.5s;
    transform: scaleX(0);
    transform-origin: left;
  }
 

  .nav-link-item:hover::after {
    transform: scaleX(1);
    
  }


 .facebook-icon1{
     cursor: pointer;
 }
 .facebook-icon1:hover{
    opacity: 0.8;
 }

 .facebook-icon{
    width: 2.5rem;
}


 .drop-down-service{
     position: relative;
 }

 .drop-down-ul {
     position: absolute;
     z-index: 1;
     background-color: rgb(255, 255, 255);
     min-width: 19rem;
     list-style: none;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
     top:3.2rem;
     display: none;
     box-shadow: 0.1rem 0.1rem 0.3rem  black;
 }

 .drop-down-service:hover .drop-down-ul{
     display: block;
 }
 
 .drop-down-li{
     border-top: 0.1rem solid gainsboro;
     width: 15rem;
 }

 .drop-down-a{
     text-decoration: none;
     display: inline-block;
     padding: 0.5rem 0;
     color: rgb(95, 94, 94);
     font-weight: 500;
 }

 .drop-down-a:hover {
     color:rgb(12, 11, 11);
 }
 

 @media screen and (max-width:840px){
     nav {
         display: none;
     }


 }

 /*MOBILE MENU*/

 .menu-open-button{
    position: absolute;
    top: 3rem;
    right:3rem;
    cursor: pointer;
 }

 .menu-open{
     width: 4rem;
     display: none;
 }

 /* MOBILE NAV*/

 .mobile-nav-container{
     position: absolute;
     background-color: rgb(255, 228, 179);
     z-index: 3;
     margin: 0 auto;
     width:100%;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 4rem 0;
     height: 100vh;
     transition: 0.5s all;
     transform: translateX(-110%);
     
 }

 

 .mobile-nav-links,.mobile-drop-down-ul{
     list-style: none;
 } 

 .mobile-drop-down-service{
     position: relative;
 }

 .mobile-drop-down-ul {
     background-color: white;
     display: none; 
   
 }

 .mobile-drop-down-service:hover .mobile-drop-down-ul{
     display: block;
     
 }

 

 .mobile-nav-link{
     margin: 1.5rem 0;
 }

 .mobile-drop-down-li{
     line-height: 2rem;
 }

 .mobile-nav-link-item{
     color: rgb(24, 83, 131);
     font-size: 1.4rem;
     font-weight: 500;
     text-decoration: none;
     
 }

 .mobile-drop-down-a {
     text-decoration: none;
 }

 
 .mobile-nav-close{
     width: 4rem;
     position: absolute;
    top:3rem;
    right:3rem;
 }
 
 .mobile-close-btn{
     width: 100%;
     cursor: pointer;
 }



 
 @media screen and (max-width:840px){
    .menu-open{
       
        display: block;
    }

    .mobile-nav-container.show{
        transform: translateX(0);
    }
     


}
 
 
 /**********************/
   /*--CONTACT FORM--**/
   /*********************/
  .contact-form {
    background:linear-gradient(rgba(16, 41, 122, 0.774),rgba(207, 157, 17, 0.808)), url('pexels-photo-172074.jpeg');
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
    background-attachment: fixed;
    
 }
 
 
 
 
 
 
 
 form {
 display: flex;
 flex-direction: column;
 padding:3rem 0;
 
 
 }
 
 .form-control {
     width: 25rem;
    
     font-size: 1.5rem;
     outline: none;
     border: none;
     box-shadow: 0 0 0.4rem rgb(63, 62, 61);
     border-radius: 0.2rem;
     
     padding: 0.5rem 0;
     padding-left: 0.5rem;
     color:rgb(146, 81, 7);
 }
 
 .submit{
     border:none;
     background-color: rgb(146, 81, 7);
     color:rgb(255, 255, 255);
     padding: 0.8rem 0;
     border:0.2rem solid rgb(146, 81, 7);
     font-size: 1.3rem;
     transition: 0.5s all;
     
 }
 
 .submit:hover {
     border:0.2rem solid rgb(146, 81, 7);
     color: rgb(146, 81, 7);
     background-color: transparent; 
 }
 
 @media screen and (max-width:507px){
     .form-control {
         width: 100%;
        
     }
 
     form {
         padding-left:0.5rem;
         padding-right:0.5rem;
     }
 
 }

 @media screen and (max-width:480px){
     .contact-email {
         font-size: 1.1rem;
     }

     .contact-section{
      
        width:95%;
        
    }


    




 }
 
 
 

  /**********************/
   /*--POP UP--**/
   /*********************/
.lightbox {
   
    padding-top: 2rem;
    display: none;
    
}

.popup-h2 {
    text-align: center;
    letter-spacing: 0.1rem;
    color: rgb(56, 133, 21);
    margin-bottom: 1rem;
}

.popup-p {
    text-align: justify;
    font-size: 1.1rem;
}
.popup-p, .lightbox ol, .lightbox ul{
    color: rgb(12, 82, 15);
    line-height: 1.5rem;
    font-size: 1.1rem;
}

.lightbox ol, .lightbox ul {
    width:60%;
    margin: 0 auto;
}
 











/*INTRO*/
.intro{
    width:90%;
    margin: 0 auto;
    padding: 3rem 0;
}

.intro-content{
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
}

.intro-photo{
    width: 100%;
    transition: 0.5s;
    height: 15rem;
    /* object-fit:contain; */
}

.intro-photo:hover {
    transform: scale(1.1);
    opacity: 0.6;
}

.intro-about, .intro-logistics, .intro-freight, .intro-warehousing{
    flex: 1 17.5rem;
    margin: 0.5rem;
    max-width: 17.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-top: 1.5rem;
}

.intro-h3 {
    margin: 1rem 0;
    letter-spacing: 0;
    font-size: 1.6rem;
    color:rgb(0, 140, 255);
    color: #7fe03a;   
}

.intro-about-h3 {
    color:rgb(0, 140, 255);
    color:#7fe03a;
}

.intro-p, .intro-about-p {
    color: rgb(39, 79, 143);
    font-size: 1.1rem;
    text-align: justify;
}

.intro-image {
    overflow: hidden;
    background-color: rgb(30, 66, 133);
}

.intro-readmore{
    display: flex;
    color:rgb(0, 140, 255);
    font-weight: 800;
}

.intro-readmore a {
    text-decoration: none;
}

.intro-readmore a:hover {
    color:rgb(21, 21, 90);
}

/*********************/
/*-PROPOSITION-------**/
/*********************/
.proposition{
    
    background:linear-gradient(rgba(9, 9, 82, 0.637), rgba(22, 28, 100, 0.644)) ,url('Networking.jpeg');
    width: 100%;
    height: 20rem;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
}

.proposition-h2{
    color:white;
    font-size: 2.5rem;
}

.proposition-center{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 35rem;
}

.proposition-p{
    font-size: 1.3rem;
    color:white;
    padding: 0.5rem 1rem;
    line-height: 2rem;
}

.underline{
    background-color:rgb(246, 223, 50);
    height:0.2rem;
    width: 90%;
}


/*********************/
/*--CORE SERVICES----**/
/*********************/

.core-services{
    padding: 3rem 0;
}

.core-services-center{
    width:90%;
    margin: 0 auto;
}

.core-services-line{
    width: 75%;
    background-color: orangered;
    height: 0.1rem;
    margin-right: 1rem;
   
}

.core-services-heading{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.core-services-h3{
    min-width: 12rem;
    font-weight: 800;
    color:rgb(0, 140, 255);
    margin-left: 1rem;
}

.core-services-contents {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content:center;
}

.core-services-contents a{
    text-decoration: none;
}

.core-services-content{
    transition: 0.5s all;
    margin: 1rem;
    
    max-width: 22rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 0.1rem solid rgb(246, 223, 50);
    border-bottom: 0.3rem solid rgb(246, 223, 50);
    padding:1rem;
    flex: 1 22rem;
}

.core-services-h4{
    color:#7fe03a;
    font-size: 1.2rem;
}

.core-services-p{
    color: rgb(39, 79, 143);
}

.core-services-icon .material-icons{
    color:#7fe03a;
    font-size: 2.8rem;  
}

.core-services-content:hover {
    box-shadow: 0.1rem 0.1rem 0.3rem rgb(53, 80, 102);
}

.core-services-content:hover .core-services-icon .material-icons{
    color:rgb(30, 66, 133);
}


/*********************/
/*--HOME COUNTER---**/
/*********************/

.home-counter{
    background: linear-gradient(rgba(8, 8, 44, 0.527), rgba(13, 13, 42, 0.534)), url('CUSTOMS.jpeg');
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    width: 100%;
    height: 20rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.home-counter-boxes{
    background-color: rgba(255, 255, 255, 0.849);
    width:70%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 0;
    padding-top: 2.5rem;
    box-shadow: 0 0 0.4rem black;
    flex-wrap: wrap;
}

.home-counter-box{
    flex: 1 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.home-counter-icon{
    display: flex;
    justify-content: center;
    align-items: center;
   
}

.home-counter-icon .material-icons, .home-counter-icon .counter {
    font-size: 3rem;
    color: orangered;
    /* color:#d6961f; */
}

.home-counter-icon .counter {
    color:rgb(24, 156, 189);
    margin-top: -0.4rem;
}

.home-counter-box p {
    color: rgb(0, 89, 255);
    font-size: 1.2rem;
    font-weight: 600;
}

.home-counter-box1{
    border-right: 0.1rem dashed blue;
    
}

.home-counter-box3{
    border-left: 0.1rem dashed blue;
    
}

@media screen and (max-width:1000px){
    .home-counter-boxes{
        flex-direction: column;
        height: 100%;
    }

    .home-counter{
        height: 30rem;
    }
.home-counter-box1, .home-counter-box3 {
    border: none;
}

}

/*********************/
/*----CLIENTS----**/
/********************/

.clients{
    padding: 3rem 0;
}

.clients-center{
    width:90%;
    margin: 0 auto;
}

.clients-heading{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.clients-h3{
    min-width: 12rem;
    font-weight: 800;
    color:rgb(0, 140, 255);
    margin-left: 1rem;
}

.clients-line{
    width: 65%;
    background-color: orangered;
    height: 0.1rem;
    margin-right: 1rem;
   
}

.client-logos{
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.client-logo{
    flex: 1 10rem;
    max-width: 10rem;
    margin: 0.5rem;
}

.client-logo-image{
    width:100%;
}


/**********************/
/*--SERVICES--**/
/*********************/
.services-header{
    height: 9rem;
    background-color: rgb(229, 229, 238);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.services-h1, .services-h2{
    color:rgb(24, 57, 110);
}

.services-h2{
    color:rgb(24, 57, 110);
    font-size: 1.2rem;
}

.services-container{
    width: 90%;
    margin:0 auto;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    padding: 2.5rem 0;
    
}

.services-links, .services-content, .services-photos{
    flex: 1 10rem;
    margin: 1rem;
    max-width: 25rem;
}

.services-content{
    flex: 2 10rem;
   
}

.service-image{
    width: 100%;
}





.services-links{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.services-h4 {
    color:rgb(33, 49, 138);
    font-size: 1rem;
}



.services-link {
    background-color: rgb(223, 223, 240);
    margin: 0.2rem;
   width: 18rem;
    padding: 0.3rem 1rem;
    border-radius: 0.1rem;
}



.service-photo {
    margin:0.5rem;
    

}

.service-image {
    display: block;
    border-radius: 0.2rem;
}


.services-a {
    text-decoration: none;
}

.services-link{
    transition: 0.5s;
}

.services-a:hover .services-link {
    background-color: #0b70b3;
}


.services-a:hover .services-h4 {
   color: #ffffff;
}


.services-p {
    color: rgb(30, 70, 104);
    font-size: 1.2rem;
    text-align: justify;
    padding-right: 1rem;
    
}

.freight-link{
    background-color: #0b70b3;  
}

.freight-h4  {
    color:white;
}

 
@media screen and (max-width:1023px){
    .services-container{
        flex-direction: column;
        align-items: center;
        
    }

    .services-p {
       
        padding-right: 0;
        
    }

    .services-links{
        order:1;
    }
 

}

@media screen and (max-width:480px){
    .services-link{
        width:15rem;
    }
}

/**************/
/*--ABOUT--**/
/***************/

.about-content{
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;

}

.about-p {
    text-align: justify;
    color:#0c5ba5;
    font-size: 1.2rem;
}

.about-photo{
    width:100%;
}

.about-image, .about-info {
    flex: 1 25rem;
    margin: 0.5rem;
    max-width: 30rem;
}