style.css

:root{
    --clr-primary-400: #18a035;
    --clr-secondary-400: #29a9e0;
    
    --clr-accent-400: #25d366;
    --clr-accent-500: #E1306C;
    --clr-accent-800: #007bb5;
    --clr-accent-900: #3B5998;


    --clr-ntural-100:hsl(0, 0%, 100%);
    --clr-ntural-200:#f2f3f5;
    --clr-ntural-300:#7f7f7f;
    --clr-ntural-400:#333333;
    --clr-ntural-900: hsl(0, 0%, 0%);
    
   
    

    --ff-primary: 'Lato', sans-serif;
    --ff-secondary:  'Alegreya', serif;
    --ff-btn:'poppis',sans-serif;

    --ff-body: var(--ff-primary);
    --ff-heading: var(--ff-secundary);
    --ff-btn: var(--ff-btn);

    --fw-n: 400;
    --fw-m: 500;
    --fw-b: 700;

    --fs-100: .937rem;/*15*/
    --fs-200: 1rem;/*16*/
    --fs-300: 1.125rem;/*18*/
    --fs-400: 1.25rem;/*20*/
    --fs-500: 1.56rem;/*25*/
    --fs-700: 2.25rem;/*36*/
    --fs-600: 2.43rem;/*39*/
    --fs-800: 3rem;/*48*/
    --fs-900: 3.125rem;/*50*/

      --size-100: .25rem;/*4*/
      --size-200: .5rem;/*8*/
      --size-250: .625rem;/*10*/
      --size-300: .875rem;/*14*/
      --size-400: 1rem;/*16*/
      --size-500: 1.25rem;/*20*/
      --size-600: 1.5rem;/*25*/
      --size-700: 2rem;/*32*/
      --size-800: 3rem;/*48*/
      --size-850: 3.75rem;/*60*/
      --size-900: 4rem;/*64*/
      --size-950: 6.25rem;/*100*/
      --size-1000: 12.5rem;/*200*/


    --fs-body: var(--fs-200);
    --fs-primary-heading: var(--fs-800);
    --fs-secondary-heading: var(--fs-600);
    --fs-third-heading: var(--fs-500);
    --fs-fourth-heading: var(--fs-400);

    --fs-nav: var(--fs-200);
    --fs-button: var(--fs-400);

}

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
* {
  margin: 0;
  padding: 0;
  font: inherit; 
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}
 html,
 body {
    height: 100%;
    font-size: 16px;
 }

/* Set core body defaults */
body {
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  font-size: var(--fs-body);
  font-family: var(--ff-body);
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture,
svg {
  max-width: 100%;
  display: block;
}

h1,
 h2,h3,
 h4,h5,h6 {
  font-family: var(--ff-heading);
  text-transform: capitalize;
  font-weight: var(--fw-b);
}

a{
  text-decoration: none;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/*utility classes*/

    
.text-primary-400 {
  color: var(--clr-primary-400);
}

.text-secondary-400 {
  color: var(--clr-secondary-400);
}

.text-accent-400 {
  color: var(--clr-primary-400);
}
.text-accent-500 {
    color: var(--clr-accent-500);
  }
  .text-accent-800 {
    color: var(--clr-accent-800);
  }
  .text-accent-900 {
    color: var(--clr-accent-900);
  }

.text-ntural-900 {
  color: var(--clr-ntural-900);
}
.text-ntural-400 {
    color: var(--clr-ntural-400);
  }
.text-ntural-300 {
  color:var(--clr-ntural-300);
}

.text-ntural-100 {
  color: var(--clr-ntural-100);
}

.bg-primary-400 {
  background-color: var(--clr-primary-400);
}

.bg-secondary-400 {
  background-color: var(--clr-secondary-400);
}

.bg-accent-400 {
  background-color: var(--clr-primary-400);
}

.bg-accent-500 {
    background-color: var(--clr-accent-500);
  }
.bg-accent-800 {
  background: var(--clr-accent-800);
}

.bg-accent-900 {
  background-color: var(--clr-accent-900);
}

.bg-ntural-900 {
  background-color: var(--clr-ntural-900);
}

.bg-ntural-300 {
  background-color:var(--clr-ntural-300);
}

.bg-ntural-400 {
    background-color: var(--clr-ntural-400);
  }
.bg-ntural-100 {
  background-color: var(--clr-ntural-100);
}

.ff-primary {
font-family: var(--ff-primary);
}

.ff-secondary {
  font-family: var(--ff-secondary);
}

.ff-btn {
  font-family: var(--ff-btn);
}

.fw-bold {font-weight: var(--fw-b);}
.fw-normal {font-weight: var(--fw-n);}
.fw-medium {font-weight: var(--fw-m);}

.fs-primary-heading {
  font-size: var(--fs-primary-heading);
  line-height: 1.2;
}

.fs-secondary-heading {
  font-size: var(--fs-secondary-heading);
}

.fs-third-heading {font-size: var(--fs-third-heading);}
.fs-fourth-heading {font-size: var(--fs-fourth-heading);}

.fs-100{font-size: var(--fs-100);}
.fs-200{font-size: var(--fs-200);}
.fs-300{font-size: var(--fs-300);}
.fs-400{font-size: var(--fs-400);}
.fs-500{font-size: var(--fs-500);}
.fs-600{font-size: var(--fs-600);}
.fs-700{font-size: var(--fs-700);}
.fs-800{font-size: var(--fs-800);}
.fs-900{font-size: var(--fs-900);}

.padding-block-100{padding: var(--size-100);}

.padding-block-200{padding: var(--size-200);}

.padding-block-300{padding: var(--size-300);}

.padding-block-400{padding: var(--size-400);}

.padding-block-500{padding: var(--size-500);}

.padding-block-700{padding: var(--size-700);}

.padding-block-800{padding: var(--size-800);}

.padding-block-900{padding: var(--size-900);}


.container {
  --max-width: 1092px;
  --padding: 1rem;

  width: min(var(--max-width), 100% - (var(--padding) * 2));
  margin-inline: auto;
}

.message-box h2{
  color: var(--clr-primary-400);
  font-size: var(--fs-secondary-heading);

}

h5{
  font-size: var(--fs-fourth-heading);
}

   /*-- buttons --*/

.get_btn{
font-size: var(--fs-button);
font-family: var(--ff-btn);
background: var(--clr-ntural-100);
color: var(--clr-primary-400);
padding: 14px 20px;
border-radius: var(--size-950);
overflow: hidden;
}

.get_btn:hover{
color: var(--clr-ntural-100);
text-decoration: none;

}

.hvr-bounce-to-top{
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;


}

.hvr-bounce-to-top::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--clr-accent-400);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-bounce-to-top:hover::before, .hvr-bounce-to-top:focus::before, .hvr-bounce-to-top:active::before {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

.sim-btn{
background: var(--clr-secondary-400) ;
color: var(--clr-ntural-100);
padding: 14px 20px;
border-radius: var(--size-950);
overflow: hidden;
border: none;
  text-align: center;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
cursor: pointer;
}

.sim-btn:hover{
color:var(--clr-ntural-100);
text-decoration: none;
}

 /* navigation */
 
 .navbar{
     padding: 0rem 8rem;
 }
 
  .navbar a{
     color:var(--clr-ntural-100);
     text-align: center;
     letter-spacing: 1px;
     text-transform: capitalize;
     padding: 5px;
   border-radius: 5px;
   -webkit-transition: all .3s;
   transition: all .3s;
  }
 
  .navbar a:hover{
      color: var(--clr-ntural-300);
    }

  #navbarDropdown.nav-link.dropdown-toggle{
      color: var(--clr-ntural-400);
    }

  .dropdown-menu .dropdown-item{
      color: var(--clr-primary-400) ;
    }
 
 .navbar .navbar-brand{
     padding-top: 10px;
    }
 
 .fixed-top-bg {
     background-color: var(--clr-ntural-100);
     box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
       top: -40px;
       transform: translateY(40px);
       transition: transform .3s; 
   }
   .fixed-top-bg a{
     color: var(--clr-primary-400) ;
   }
 
 
 .logo{
     width: 11.875rem;
 }


/*------ The social media icon bar ------*/


.menu-social{
 position: fixed;
 top: 50%;
 -webkit-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 transform: translateY(-50%);
 z-index: 1000;
}

.menu-social li{
 padding: var(--size-300);
 text-align: center;
}

.menu-social li:hover {
    background-color: var(--clr-ntural-300);
  }

.facebook {
  background: var(--clr-accent-900);
}

.whatsapp {
  background: var(--clr-primary-400);
}

.linkedin {
  background: var(--clr-accent-800);
}

.instagram  {
  background: var(--clr-accent-500);
}


/*------ wrapper ------*/

.wrapper{
    background-image:linear-gradient(rgba(0, 0, 0, 0.1),rgba(0, 0, 0,0.1)),
    url('images/logistic-company-background.jpg');
    height: 46.1875rem;
    background-size:cover ;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    flex-direction: column;
	padding: 0 var(--size-700);
    color: var(--clr-ntural-100);

}


/*------ services------*/

.service .message-box{  
  -webkit-box-align: center;
  -ms-flex-align: center;
   align-items: center;
}

.service_container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.service_container .box {
  margin: 1.5rem 0.625rem;
  min-width: var(--size-1000);
  width: 15.625rem;
}

.img-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: var(--size-1000);
  background-color: var(--clr-ntural-100);
  border-radius: var(--size-300);
  -webkit-transition: all .2s;
  transition: all .2s;
}

.img-box img {
  width: var(--size-1000);
  height: var(--size-1000);
  -webkit-transition: all .3s;
  transition: all .3s;
}

.detail-box {
  margin-top: var(--size-400);
}

.detail-box p{
  color:var(--clr-ntural-300);
}

.box:hover .img-box {
  background-color: var(--clr-primary-400);
}

.box:hover .img-box img {
  -webkit-filter: invert(1);
          filter: invert(1);
}

/*------ uplode file ------*/

 .file-wrapper{
   width:22rem;
   margin:auto;
   display: flex;
   align-items: center;
   justify-content: center;
}
.upload-btn-wrapper{
   position: relative;
   overflow: hidden;
   display: inline-block;
   cursor: pointer;
}
.upload-file{
   border:2px dashed #eee;
   color:#9b9b9b;
   background-color: var(--clr-ntural-100);
   min-width: 19rem;
   height:var(--size-1000);
   border-radius: var(--size-200);
   font-size:15px;
   cursor: pointer;
}
.upload-btn-wrapper input[type=file]{
   width:100%;
   position: absolute;
   left:0;
   right:0;
   top:0;
   opacity: 0;
   cursor: pointer;
   min-height: 18.75rem;
}
.success-uploaded{
   display:none;
}
.success-uploaded i{
   font-size:var(--fs-600);
   margin-left:6px;
   margin-top:10px;
   color: var(--clr-accent-400)
}

.d-block{
   display: block;
}
.btn .upload-file{
   font-size:var(--fs-200);
}
.upload-btn{
   display: block;
   font-size:var(--fs-300);
   color: var(--clr-accent-400);
}

  /*------ contact section ------*/
  .contact_form {
    border: 1px solid #ededed;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.1);
    background-color: var(--clr-ntural-200);
    padding: 40px 30px;
}

.contact_form .form-control {
    background-color: #c7c7c7 ;
    margin-bottom: 30px;
    border: 1px solid #ebebeb;
    box-sizing: border-box;
    color: var(--clr-ntural-100);
    font-size: var(--fs-200);
    outline: 0 none;
    padding: 10px 25px;
    min-height: 3.4375rem;
    resize: none;
    box-shadow: none !important;
    width: 100%;
	border-radius: 5px;
}

.contact_form .textarea {
    color: var(--clr-ntural-300);
    padding: 20px 25px !important;
    min-height: 160px !important;
}

.contact_form .form-control::-webkit-input-placeholder {
    color: var(--clr-ntural-100);
}

.contact_form .form-control::-moz-placeholder {
    opacity: 1;
    color: var(--clr-ntural-100);
}

.contact_form .form-control::-ms-input-placeholder {
    color: var(--clr-ntural-100);
}

#contact {
    background-image:url(images/contact-background.jpg);
    background-size:cover ;
    background-position: center;
    display: flex;
    justify-content: center;
    background-repeat: no-repeat;
   
}

.contact_form textarea.form-control{
	min-height: 14.1rem;
}

.form-group{
	position: relative;
}

.help-block{
	position: absolute;
	top: 100%;
	left: 0;
}



.contact-box{
    position: relative;
    padding: 10px 0;
    display: flex; 
}

.contact-icon{
  padding: var(--size-200);
  border-radius: 50%;
  background-color: var(--clr-ntural-400);
  color: var(--clr-ntural-100);
}
.contact-box p{
display: flex;
margin-left: var(--size-500);
font-size: 16px;
color: var(--clr-ntural-900);
flex-direction: column;
font-weight: 300;
}
 /*------ footer section ------*/

.copyrights {
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    background-color: #2e2d2d;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    padding: 30px 0px;
    overflow: hidden;
}

.copyrights .container .footer-distributed img{
    width: var(--size-950);
}

.footer-distributed .footer-links {
    margin: 0 0 10px;
    text-transform: uppercase;
    padding: 0;
}

.footer-distributed .footer-links a {
    display: inline-block;
    line-height: 1.8;
    margin: 0 10px 0 10px;
}

.footer-distributed .footer-company-name {
    font-weight: 300;
    margin: 0 10px;
    color: var(--clr-ntural-300);
    padding: 0;
}


.footer-distributed a{
	margin-bottom: var(--size-500);
	display: inline-block;
}



.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links a {
    color: var(--clr-ntural-300);
}

.footer-links a:hover,
.footer a:hover {
    color: #adadad !important;
}

.footer-links li {
    margin-bottom: 10px;
    display: block;
    width: 100%;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}


@media screen and (max-width:50em){
  .padding-block-700{padding: var(--size-600);}

  .padding-block-800{padding: var(--size-700);}
  
  .navbar{
      background-color:var(--clr-ntural-100);
      padding: var(--size-250);
  }
  .site-title{
      height: 39.375rem;
  }
.navbar .nav-link{
  color: var(--clr-primary-400);
}

#logo{
  height:var(--size-850);
}

.menu-social{
  top: 60%;

  }

  .menu-social li{
  padding: var(--size-300);
  text-align: center;
  }

.nav-link::after{
  display: none;
}


.navbar .navbar-toggler{
padding: 1px 5px;
}

.heading h1{
 
  font-size: 3rem;
  margin: 0;
  letter-spacing: 0.3rem;
}

.heading h4{
  font-size: var(--fs-500);
  
}


.container .message-box{
  text-align: center;
}

.address p{
  text-align: center;
}

h2{
  text-align: center;
}

#contact {
  text-align: center;
}

.address p{
  text-align: left;
}

}


@media screen and (max-width:700px){
  .upload-file{
    min-width: 17rem;
 }
      .menu-social{
      position: fixed;
      bottom: 0;
      display: flex;
      top: inherit;
      transform: none;
      margin: 0 auto;
      width: 100%;
      padding:0;
      justify-content: center;
      }
      .menu-social li{
      padding: 14px;
      width: 100%;
      list-style: none;
      }

      h1{
          font-size: 2rem;
      margin: 0;
      letter-spacing: 0.2rem;
      }
      footer{
        margin-bottom: var(--size-800);
      }
}