*{
    padding: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
   
}
.HeroSection{
    background: url("../images/moving\ 1.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    height: 100vh ; 
    /* height: 100%; */
    opacity: 0.9; 
}
/* responsiveness of herosection */
@media only screen and (max-width: 593px){
    .HeroSection{
      height: 100%;
    
    }
}
@media only screen and (max-width: 699px){
     ul .line{
      padding-right: 5px;
    
    }
}
@media only screen and (max-width: 699px){
    .navbar{
     padding-right: 5px;
   
   }
}
@media only screen and (max-width: 547px){
    .HeroText > #yellow{
     font-size: 40px;
   
   }
}
@media only screen and (max-width: 490px){
    .HeroText > p.small{
     font-size: 25px;
   
   }
}

@media only screen and (max-width: 493px){
    button.navbutton{
     margin-left: 40px;
   
   }
}
.navbar {
    display: flex;
    padding-top: 60px;
    padding-right: 40px;
    justify-content: space-between;
    align-items: center;
}
#yellow{
    color: #FAFF00;
}
#white{
    color: white;
    
}

ul.line{
    padding-right: 50px;
}
ul.line li{
    display: inline-block;
}
    

button.navbutton{
    padding-top: 5px;
    padding-right: 20px;
    padding-bottom: 5px;
    padding-left: 20px;
    background-color: #FFAC12;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease 0s;
    
}   
button.navbutton:hover{
    background-color: black;
    color: #FFAC12;

}
.HeroText > p{
    padding-top: 90px;
    padding-left: 50px;
    font-size: 50px;

}
h1{
    padding-left: 30px;
}
.HeroText >p.small{
    font-size: 30px;
}
.navbar >h1{
    font-size: 40px;
    
}
.navbar >h1 > span#white{
    text-decoration: overline #FAFF00;
}
.navbar >h1 > span#move{
    text-decoration: underline #fff;
    

}
.links > .line > li> a{
    color: white;
    padding: 35px;
    transition: all 0.3s ease 0s;
}
.links > .line > li> a:hover{
    color: #FFAC12;
}
/* responsiveness for navbar */
@media only screen and (max-width: 943px){
    .links > .line > li> a{
      padding: 25px;
    
    }
}
@media only screen and (max-width: 861px){
    .links > .line > li> a{
      padding: 15px;
    
    }
}
@media only screen and (max-width: 777px){
    .links > .line > li> a{
      padding: 5px;
    
    }
}


/* SecondSection */

.SecondSection{
    display: grid;
    grid-template-columns:repeat(2,1fr);
    padding-top: 40px;
    width: 90%;
}
.firstimg{
    width: 100%;
}
.firstimg img{
    width: 100%;
}
.text1{
    padding: 50px;
    margin-top: auto;
    margin-bottom: auto;
}

.text1 > h1 {
    padding: 10px 0 10px 0;
}

.text1 > hr{
    height: 3px;
    width: 100px;
    background-image: linear-gradient(to right, #FAFF00 ,black);
    border: none;
}
.text1 > button{
    background-color: black;
    border-radius: 0 12px 0 0;
    border: none;
    padding: 5px 20px 10px 20px;
    margin-top: 50px;
}
.text1 > button > span#yellow > span.size{
    font-size: 25px;

}
.text1 > button > span#yellow {
    font-size: 12px;
} 
/* responsiveness of the second section */

@media only screen and (max-width: 718px){
    .text1 button{
      margin-top: 10px;
    
    }
}
@media only screen and (max-width: 777px){
    .text1 button{
      margin-top: 30px;
    
    }
}
@media only screen and (max-width: 604px){
    .text1 button{
      margin-top: 5px;
      
    }
}
@media only screen and (max-width: 515px){
    .text1 button{
      padding: 3px 10px 5px 10px;
    
    }
}
@media only screen and (max-width: 718px){
    .text1 {
      padding: 20px;
    
    }
}
@media only screen and (max-width: 604px){
    .text1 {
      padding: 10px;
    
    }
}
@media only screen and (max-width: 572px){
    .text1 h1{
      padding: 3px 0 3px 0;
      font-size: 20px;
    }
}
@media only screen and (max-width: 572px){
    .text1 p{
      font-size: 15px;
    }
}
/* ThirdSection */

.ThirdSection{
    background-color: #ECECEC;
    margin: 40px 0 0 0;
    padding: 90px 90px 70px 90px;
}
.ThirdSection > hr{
    height: 3px;
    width: 100px;
    background-image: linear-gradient(to right, #FAFF00 ,black);
    border: none;
}
.ThirdSection >h1{
    padding: 10px 0 150px 0;
}
.allimages{
display: grid;
/* grid-template-columns: repeat(3,2fr); */
grid-template-columns: repeat(auto-fit, minmax(300px, auto));
gap: 40px;

border: none;
}
.allimages{
    width: 100%;
    
}

.allimages img{
    width: 100%;
}
.allimages > .img >h4{
    padding: 20px 0 20px 40px;
    background-color: white;
    
}
.img >table{
    padding: 10px;
    border: 1px solid #ECECEC;
    border-collapse: collapse;
    margin: 0;
    width: 100%;
    background-color: white;
    border-radius: 0 0 30px 30px;
}

.img table tr td{
    padding: 10px 0 10px 40px ;
    border: 1px solid #ECECEC;
    border-collapse: collapse;

}

/* Footer */
.Footer{
    padding: 60px 120px 60px 120px;
    background-color: black;
    display: grid;
}
.Footer > h2 >span{
    color: #FFAC12;
}
.Footer > h2{
    padding: 0 0 30px 0;
}
.Footer > hr{
    height: 1px;
    background-color: #FFAC12;
    border: none;
}
.contactbox{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, auto ));
}
.list{
    color: #fff;
    margin-top: 50px;
    line-height: 20px;

}

.iconfooter{
    display: flex ;
    color: #fff; 
    margin-top: 80px; 
    gap: 20px;
}
/* movers.html */

/* navbar */
.nav{
    background-color: black;
    padding: 40px 90px 20px 90px;
}
.navlinks{
    display: flex;
    justify-content: center;
    gap: 50px;
    color: white;
    padding: 0 0 10px 0;
    align-items: center;
}

.navlinks > button{
    background-color: #FFAC12;
    padding: 0 20px 10px 20px;
    border: none;
    border-radius: 0 15px 0 0;
}
.titles{
    color: #fff;
    display: flex;
    justify-content: space-between;
    line-height: 30px;
    padding: 20px 0 0 0;
}
.nav  hr {
    background-color: #FFAC12;
    border: none;
    height: 1px;
}
.nav .navlinks button span {
    color: #fff;
    font-size: 30px;

}
.navlinks > li > a {
    color: white;
    padding: 35px;
    transition: all 0.3s ease 0s;

}
.navlinks > li > a:hover{
    color: #FFAC12;
}
/* responsiveness of navbar */
@media only screen and (max-width: 1041px){
    .navlinks{
      gap: 30px;
    }
}

@media only screen and (max-width: 889px){
    .navlinks{
      gap: 3px;
    }
}
@media only screen and (max-width: 860px){
    .navlinks > button{
      padding: 1px 10px 5px 5px;
      border-radius: 0 10px 0 0;
    }
}
@media only screen and (max-width: 826px){
    .nav .navlinks button span{
      font-size: 20px;
    }
}
@media only screen and (max-width: 820px){
    .navlinks > li > a{
      padding: 20px;
    }
}
@media only screen and (max-width: 686px){
    .navlinks > li > a{
      padding: 10px;
    }
}
@media only screen and (max-width: 689px){
    .nav{
      padding: 40px 50x 20px 50px;
    }
}
@media only screen and (max-width: 620px){
    .nav{
      padding: 40px 25px 20px 25px;
    }
}



/* herosection */
 
.herosection{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 60px 90px 0 200px ;
    background-color: #ECECEC;
    gap: 60px;
}

 .bigimg {
    width: 100%;
}
.bigimg img {
    width: 100%;
}
.smallimg{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}
.smallimg img {
    width: 100%;
}
.herocard{
    padding: 10px 10px 20px 30px;
    border: none;
    border-collapse: collapse;
    margin: 0;
    background-color: white;
    border-radius: 20px 20px 20px 20px;
    box-shadow:3px 3px 0 0 lightgray ;
    width: 70%;
}
.herocard td {
    padding: 20px 80px 20px 40px ;
    border: 2px solid #ECECEC;
    border-collapse: collapse;

}
.herocard td span{
    color: #FFAC12;
    padding-left: 28px;
}
.herocard td i{
    font-size: 30px;
    
}
.herocard td button{
    background-color: black;
    color: #fff;
    border: none;
    padding:10px 0 10px 20px ;
    border-radius: 0 15px 0 0;
}
.herocard td button span{
    font-size: 20px;
   
}
/* responsiveness of the hero section */
@media only screen and (max-width: 1305px){
    .herosection{
      padding: 60px 70px 0 150px;
    }
}
@media only screen and (max-width: 1231px){
    .herocard{
      width: 60%;
    }
}
@media only screen and (max-width: 1240px){
    .herocard tr td{
      padding: 15px 0 15px 30px;
    
    }
}
@media only screen and (max-width: 1100px){
    .herocard tr td{
      padding: 10px 0 10px 20px;
    
    }
}
@media only screen and (max-width: 986px){
    .herosection{
      padding: 60px 0 40px 100px;
    
    }
}
@media only screen and (max-width: 849px){
    .herosection{
      padding: 60px 0 40px 30px;
    
    }
}
@media only screen and (max-width: 784px){
    .herosection{
      gap: 20px;
    
    }
}
@media only screen and (max-width: 986px){
    .herocard td button{
      padding: 3px 0 3px 8px;
      border-radius: 0 10px 0 0;
    
    }
}
@media only screen and (max-width: 750px){
    .herocard td i{
      font-size: 20px;
    }
}
@media only screen and (max-width: 986px){
    .herosection{
      padding: 60px 30px 3px 60px;
    
    }
}
@media only screen and (max-width: 760px){
    .bigimg img{
      width: 120%;
    }
}
@media only screen and (max-width: 760px){
    .smallimg img{
      width: 120%;
    
    }
}
@media only screen and (max-width: 760px){
    .herosection{
      gap: 80px;
    
    }
}
@media only screen and (max-width: 720px){
    .herocard{
      width: 90%;
    
    }
}
@media only screen and (max-width: 694px){
    .heroimages{
      width: 120%;
      padding-right: 20px;
    
    }
}
@media only screen and (max-width: 645px){
    .heroimages{
      width: 130%;
      padding-right: 20px;
    
    }
}
@media only screen and (max-width: 602px){
    .heroimages{
      width: 140%;
      padding-right: 50px;
    
    }
}
@media only screen and (max-width: 608px){
    
    .herocard tr td {
        padding: 5px 0 5px 5px;
    }
}
@media only screen and (max-width: 608px){
    .heroimages{
      padding-right: 60px;
    
    }
}
@media only screen and (max-width: 551px){
    .heroimages{
      width: 140%;
      padding-right: 30px;
    
    }
}
@media only screen and (max-width: 540px){
    .herosection{
      padding: 60px 20px 0 20px;
      gap: 110px;
      
    }
}
@media only screen and (max-width: 540px){
    .herocard{
      padding: 1px 0 1px 1px;
      width: 82%;
    
    }
}
@media only screen and (max-width: 517px){
    .her0card td i{
      font-size: 8px;
    
    }
}

@media only screen and (max-width: 517px){
    .herocard{
      width: 100%;
    }
}
/* AboutUs */

.AboutUs{
    padding: 60px 0 20px 200px ;
    background-color: #ECECEC;
}
.Details{
    width: 43%;
    border-radius: 15px 15px 15px 15px ;
    background-color: #fff;
    border: none;
}
.Details h4{
    padding: 20px 0 20px 20px;
}
.details{
    border: 1px solid #ECECEC;
    border-collapse: collapse;
    margin-right: 380px;
    width: 100%;
}
.details  td {
    padding: 10px 0 10px 0 ;
    border: 1px solid #ECECEC;
    border-collapse: collapse;
    
}
.description{
    background-color: #fff;
    width: 43%;
    border-radius: 15px 15px 15px 15px ;
    margin-top: 60px;
    padding: 20px 0 20px 0;
}
.description h4{
    padding: 20px 0 20px 20px;
}
.description hr{
    height: 1px ;
    border: none;
    background-color: #ECECEC;
}
.description p {
    padding: 20px 10px 10px 20px;
}
.features{
    background-color: #fff;
    border-radius: 15px 15px 15px 15px ;
    margin-top: 60px;
    padding: 20px 0 20px 0;
    width: 43%;
}
.features ul {
    display: flex;
    justify-content: space-around;
    line-height: 25px;
    padding-top: 20px;
    font-size: 13px;
}
.features h4{
    padding: 20px 0 0 20px;
}
.features hr{
    height: 1px ;
    border: none;
    background-color: #ECECEC;
    
}
.features i {
    color: #FFAC12;
}
.AboutUs > hr {
    height: 3px;
    width: 100px;
    background-image: linear-gradient(to right, #FAFF00 ,black);
    border: none;
    margin-top: 90px;
}
.AboutUs h2{
    font-size: 30px;
    padding: 10px 0 10px 0;
}
.aboutusimg{
    display: grid;
    /* grid-template-columns: repeat(4, 1fr); */
    grid-template-columns: repeat(auto-fit, minmax(220px, auto));
    gap: 30px;
    margin-top: 40px;
    padding-bottom: 100px;
    width: 100%;
    
}
.aboutusimg img{
    width: 100%;  
}
#aboutimg4{
    height: 34vh;
}
.about{
    background-color:white;
    border-radius: 20px 20px 20px 20px;
}
.about table{
    padding: 10px;
    border: 1px solid #ECECEC;
    border-collapse: collapse;
    margin: 0;
    width: 100%;
    background-color: white;
    border-radius: 0 0 30px 30px;
}
.about table tr td{
    padding: 10px 0 10px 40px ;
    border: 1px solid #ECECEC;
    border-collapse: collapse;
}
.about h4{
    padding: 15px 0 15px 30px;
}

/* responsiveness of about us section */

@media only screen and (max-width: 1289px){
    .AboutUs{
      padding: 60px 0 20px 150px;
    }
}
@media only screen and (max-width: 974px){
    .AboutUs{
     padding: 60px 0 20px 60px;
    }
}
@media only screen and (max-width: 779px){
    .Details{
      width: 46%; 
    }
}
@media only screen and (max-width: 779px){
    .description{
        width: 46%; 
    }
}
@media only screen and (max-width: 779px){
    .features{
        width: 46%;
    }
}
@media only screen and (max-width: 750px){
    .features ul{
       line-height: 15px; 
    }
}
@media only screen and (max-width: 512px){
    .features{
        width: 50%;
    }
}
@media only screen and (max-width: 540px){
    .AboutUs{
        padding: 60px 0 20px 20px ;
    }
}
@media only screen and (max-width: 563px){
    .Details{
        width: 55%;
    }
}
@media only screen and (max-width: 563px){
    .description{
        width: 55% ;
    }
}
@media only screen and (max-width: 563px){
    .features{
        width: 55%;
    }
}
@media only screen and (max-width: 1140px){
    #aboutimg4 {
        height: 23vh;
    }
}
@media only screen and (max-width: 1114px){
    #aboutimg4 {
        height: 30vh;
    }
}
@media only screen and (max-width: 865px){
    #aboutimg4 {
        height: 26vh;
    }
}
@media only screen and (max-width: 763px){
    #aboutimg4 {
        height: 34vh;
    }
}
@media only screen and (max-width: 680px){
    #aboutimg4 {
        height: 28vh;
    }
}
@media only screen and (max-width: 540px){
    #aboutimg4 {
        height: 26vh;
    }
}
@media only screen and (max-width: 490px){
    #aboutimg4 {
        height: 45vh;
    }
}



/* footer */

.footerbutton{
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.footerbutton h2{
    font-size: 30px;
    margin-bottom: 10px;
}
.footerbutton h2 span {
    color: #FFAC12;
}
.footerbutton button{
    background-color: #FFAC12;
    padding: 0 20px 10px 20px;
    border: none;
    border-radius: 0 15px 0 0;
}
.footerbutton button span{
    color: #fff;
    font-size: 30px;
}

/* Responsiveness of footer */

@media only screen and (max-width: 1049px){
    .Footer {
        padding: 60px 80px 60px 80px;
    }
}
@media only screen and (max-width: 974px){
    .Footer {
        padding: 60px 40px 60px 40px;
    }
}
@media only screen and (max-width: 609px){
    .footerbutton h2{
        font-size: 25px;
    }
}
@media only screen and (max-width: 609px){
    .footerbutton button {
        padding: 0 5px 5px 5px;
    }
}
@media only screen and (max-width: 503px){
    .footerbutton button span {
        font-size: 18px;
    }
}