*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    scroll-behavior:smooth;
}

@keyframes TruckMove {
    
    0%{
       left: -200px;
    }
    100%{
        left:100%;
    }
}
@keyframes wheelsRoted {
    
    form{
       rotate:0deg;
    }
    to{
        rotate: 360deg;
    }
}
.Truck{
    position: fixed;
    z-index:99;
    bottom: 0px;
    animation:TruckMove 6s 0s infinite linear;
}
.truckwheels{
         display: flex;
         gap: 50px;
         padding-left:10px;
}

 .truckwheels   img{
        animation:wheelsRoted 2s 0s infinite linear;
    }

.Icons{
    width: 100%;
    position: fixed;
    bottom: 0px;
    display:none;
    text-align: center;
    z-index: 2;
    
}
.Icons .Call{
       flex-grow: 1;
       padding: 10px;
       background-color:#2B6DD5;
}
.Icons .whatapp{
       flex-grow: 1;
       padding: 10px;
       background-color:gold;
}
header{
    width: 100%;
    display: flex;
    justify-content:space-around;
    align-items: center;
    padding: 10px 20px;
    position: sticky;
    top: 0px;
    background-color: #fff;
    z-index: 999;
    box-shadow: 0px 0px 10px 0px #ccc;

}

@keyframes colorChange {
    0%{
        background-color:yellow;
    }
    25%{
        background-color: orange;
    }
    50%{
        background-color:purple;
    }
    75%{
        background-color: black;
    }
    100%{
        background-color: #3C79D9;
    }
}
header button{
    padding:10px 20px;
    border: none;
    color: white;
    background-color:yellow;
    border-radius: 30px 30px 0 30px;
    animation:colorChange 1s 2s infinite linear;
}
header button a{
    text-decoration: none;
    color: white;
}
header button i{
    font-size:20px;
    color: #fff;
}

.banner{
    width: 100%;
    height: 500px;
    background:url("../images/banner.jpg") center;
    background-size:cover;
}
.banner .bannermid{
    width: 1170px;
    margin: auto;
    display: flex;
}
.banner .bannermid .content{
    flex-basis:70%;
    text-transform: uppercase;
    padding:60px 20px;
}

.banner .bannermid .content h2{
    font-size: 25px;
    color: white;
    font-weight: bold;
    
}
.content h3{
    font-size: 20px;
    color: #fff;
      text-transform: uppercase;
}
.content p{
    font-size: 15px;
    color: #fff;
}

.banner .bannermid .Form{
    flex-basis:30%;
    margin:30px;
}

.Form form {
    display: flex;
    flex-direction: column;
    gap:10px;
    background-color:#F3F3F3;
    padding: 50px 30px;
    border-radius: 20px;
}
.Form form input{
    width: 100%;
    padding:5px 0px;
    border: grey;
    outline: none;
}
.Form form input:hover{
    box-shadow: 0px 0px 5px 2px cyan;
}
form button{
    background-color:#2B6DD5;color: white;border: none;padding:5px 0px;
}
.Form form button:hover{
    background-color:gold;
    transition:1s;
    cursor: pointer;
}
.videoSection{
    width: 100%;
}
.videoSection h3,.Service h3,.IconArea h3,.AchivementSection  h3,.HappyCustomer h3,.PosterSection h3,.AddressSection h3{
    text-align: center;
    font-size: 30px;
    padding:20px 0px;
    color: gold;
    text-transform: uppercase;
}
.videoSection h3 i,.Service h3 i,.IconArea h3 i,.AchivementSection  h3 i,.HappyCustomer h3 i,.PosterSection h3 i,.AddressSection h3 i{
    color: #2B6DD5;
}
.videoSection h3 span,.Service h3 span,.IconArea h3 span,.AchivementSection h3 span,.HappyCustomer h3 span,.PosterSection h3 span,.AddressSection h3 span{
    color: #2B6DD5;
}
.videoSection .midSection{
    max-width: 1170px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
}
.videoSection .midSection figure{
    flex-basis: 30%;
    margin: 1.5%;
}
.videoSection .midSection figure iframe{
    border-radius: 20px;
}
.videoSection .midSection figure figcaption h3{
    color: #2B6DD5;
    font-size:20px;
}
.Service{
    width: 100%;
    background-color: #F4F4F4;
}
.Service h3{
    text-transform: uppercase;
}
.midService{
    max-width: 1170px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
}
.midService .item1{
    flex-basis:48%;
    margin: 1%;
    border: 1px solid #ccc;
    border-radius: 20px;
    
}
.midService .item1 .photo img{
    width: 100%;
    border-top-left-radius:20px;
    border-top-right-radius:20px;
}
.midService .item1 .content h4{
    color:#2B6DD5;
    padding: 20px;
    text-align: center;
    text-transform: uppercase;
}
.midService .item1 .content p{
    color:#6C717B;
    padding: 10px;
}
.midService .item1 .content button{
    border: none;
    padding: 15px 30px; 
    background-color:gold;
    position: relative;
    bottom: 5px;
    left: 50px;
    border-radius: 20px;
    z-index:1;
    
}
.IconArea{
    width: 100%;
}
.IconAreaMid{
      max-width: 1170px;
      margin: auto;
      display: flex;
      flex-wrap: wrap;
      margin-top:20px;
}
.IconAreaMid .IconSection{
    flex-basis:23%;
    margin: 1%;
    background-color:#F4F4F4;
    border-radius: 20px;
}
.IconAreaMid .IconSection img{
    padding: 10px 90px;

    
}
.IconAreaMid .IconSection p{
    text-align: center;
    padding: 10px 0px;
}
.AchivementSection{
    width: 100%;
    background-color: #3C79D9;
    margin-top:20px;
}
.AchiventSectionMid{
    max-width: 1170px;
    color: white;
    margin: auto;
    display: flex;
    gap:20px;
}
.AchivementIcons{
    padding: 10px 0px;
    box-sizing: border-box;
}
.AchivementIcons b{
    display: block;
    font-size: 20px;
    color: white;
    font-weight: bolder;
    padding: 5px 0px;
}
.HappyCustomer{
    width: 100%;
}

.HappyCustomer .HappyMid{
    max-width: 1170px;
    display: flex;
    margin: auto;

}
.HappyMid .profile{
    width:15%;
    height: 165px;
    background-color:yellow;
    text-align: center;
    border-radius: 0 10px 0 10px;
    position: relative;
    top: 50px;
    left: 30px;
}
.profile img{
    width: 100%;
    height: 140px;
}
.HappyMid .content{
    width:85%;
    display: flex;
    height: 300px;
    background-color:#3C79D9;
    color: white;
    justify-content: center;
    align-items: center;
    border-radius:20px;
     font-size: 15px;
   
}
.PosterSection{
    width: 100%;
    background-color: #F4F4F4;
}
.PosterMid{
    max-width: 1170px;
    margin: auto;
    display: flex;
}
.Posters{
  flex-basis: 18%;
  margin: 1%;
  
}
.Posters img{
    width: 100%;
    border-radius: 10px;
    border: 1px solid purple;
}

.AddressSection{
    width: 100%;
   
}
.AddressMid{
    max-width: 500px;
    text-align: center;
    margin: auto;
    padding: 10px;
    border-radius: 10px;
    background-color: #F4F4F4;

}
.AddressMid i{
    font-size:40px;
    color: gold;
}

.AddressMid button{
    padding:10px 20px;
    border: none;
    color: white;
    background-color:yellow;
    border-radius: 30px 30px 0 30px;
    animation:colorChange 1s 2s infinite linear;
}
.AddressMid button a{
    text-decoration: none;
    color: white;
}
.AddressMid button i{
    font-size:20px;
    color: #fff;
}

footer{
    width: 100%;
    background-color: #2B6DD5;
}
.footermidSection{
   max-width: 1120px;
   margin: auto;
   
}
.Itemfoot1{
    display: flex;
    justify-content:space-between;
    padding: 10px;
}
.Itemfoot1 i{
    font-size: 20px;
    color:blue;
}
.Itemfoot1 i:nth-child(2){
      font-size: 20px;
      color:red;
}
.Itemfoot1 .icons a{
    font-size: 15px;
    color:white;
    padding: 10px;
    
}

.Itemfoot2{
  color: #fff;
  text-align: center;
  padding: 10px 0px;
}