*{margin:0; padding: 0;}
body{  font-family: "Lexend", sans-serif;
}
a{text-decoration: none}
img,.img-responsive {
    max-width: 100%;
    margin: 0 auto;
        height: auto;
}

/** Header **/
nav.navbar.navbar-expand-lg {
    background: #FFFAF5E5;
}
.logo img {
    max-width: 100%;
    height: auto;
}
.header-buttons{
  display:flex;
  justify-content: end;
  gap:12px;
  padding: 30px 0px;

}
.btn{
  text-decoration:none;
  font-size:14px;
  padding:8px 18px;
  border-radius:4px;
  font-weight:500;
}

.track{
  background:#4c4c4c;
  color:#fff;
}
a.btn.login {
    background: #f99a26;
    border-radius: 3px;
}


/** Header Ends **/

/** bannersection1 **/

section.container-fluid.our-trusted {
    height: 950px;
    background: #87cefa26;
    position: relative;
    display: flex;
    align-items: center;

}
section.container-fluid.our-trusted .container{position: relative;z-index: 9}
section.our-trusted:before,section.our-trusted:after{
    content: "";
    position: absolute;
    top:0 ;
    left: 0;
    width: 100%;
    height: 100%;

}
section.our-trusted:before{
    background: linear-gradient(90deg, #F99A26 50%, #6C757D 50%);
}
section.our-trusted:after{
    background-image: url(../img/banner_bg.webp);
    background-position:center;
    background-size: cover;

}
section.container-fluid.our-trusted .container{width: 100%;max-width: 100%}
section.container-fluid.our-trusted .container.row {
    align-items: end;
}

section.container-fluid.our-trusted .container .row {
    align-items: end;
}
.hero-content {
    padding: 60px 0;
}

a.btn-movers,a.btn-Freight {
    padding: 15px 55px;
    background: #fff;
    border-radius: 3px;
    color: black;
    font-size: 20px;
    font-weight: 700;
    box-shadow: 0px 4px 4px #00000038;
}
img.icon {
    width: 200px;
    height: 200px;
}
h2 {
    color: #ffffff;
    font-size: 50px;
    font-weight: 700;
    line-height: 100%;
    padding-bottom: 20px;
}
a.btn-movers {
    background: #fff;
    color: black;
    font-size: 20px;
    font-weight: 700;
}
.hero-content h2{margin-bottom: 40px}
/** bannersection1 end **/

/** section2 **/

section.container-fluid.t-m-s {
    padding-bottom: 0px;
    padding-top: 50px;
}

.intro p {
    padding: 40px 90px;
}
p {
    font-weight: 400;
    color: #000;
    font-size: 20px;
}
/** section2 end **/



/** section3  **/


section.container-fluid.and-trust{    padding: 70px 0;
    background: #fffaf3;}

    .title h2 {
    color: #000;
}
.image-card{
  position:relative;
  height: 470px;
  border-radius:18px;
  overflow:hidden;
  background-size:cover;
  background-position:center;
  transition: .3s;
  display: flex;
  justify-content: right;
  align-items: end;
  padding: 40px;
}

/* BACKGROUNDS */
.bg-app{ background-image:url("../img/trusted-1.png"); }
.bg-supply{ background-image:url("../img/trusted-2.png"); }
.bg-delivery{ background-image:url("../img/trusted-3.png"); }
.bg-optimised{ background-image:url("../img/trusted-4.png"); }

/* OVERLAY */
.image-card::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(0, 0, 0, 1), rgb(217 217 217 / 20%));
}

/* TEXT */
.card-text{
  /* position:absolute; */
  bottom:25px;
  text-align: end;
  right:25px;
  z-index:1;
  color:#fff;
}
.image-card.bg-delivery, .image-card.bg-optimised {
    text-align: left;
    justify-content: start;
}
.image-card.bg-delivery .card-text, .image-card.bg-optimised .card-text {
    text-align: left;
}
.card-text h4{
  color:#f5a623;
  font-size:20px;
  font-weight:700;
  margin-bottom:8px;
}

.card-text p{
  margin:0;
  font-size: 16px;
  line-height:1.6;
  color: #fff;
  font-weight: 300;
}
/** section3 end **/

/** section4 FEATURES **/

section.container-fluid.features {
    padding: 80px 0;
}
section.container-fluid.features .title {
    margin-bottom: 40px;
}
.box-feature {
    background: #FFFAF5;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 4px 4px 4px rgb(0 0 0 / 25%);
    position: relative;
    height: 100%;
    /* display: flex; */
    /* align-items: stretch; */
    /* flex-direction: column; */
    /* justify-content: stretch; */
    overflow: hidden;
}
.box-feature:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 100%;
    left: 100%;
    background-color: #fffaf5;
    transition: .5s;
    border-radius:100%
}
.box-feature span {
    position: relative;
    z-index: 1;
}
.img-title {
    display: flex;
    align-items: center;
    gap: 20px;
}
.icon-img {
    /* position: absolute; */
    /* left: 10px; */
    /* top: 11px; */
    width: 70px;
    height: 70px;
    background: #f5a623;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .5s;
}
.box-feature h4 {
    font-size: 24px;
    font-weight: 700;
    text-align: left;
    transition: .5s;
}
.box-feature p {
    font-size: 15px;
    text-align: left;
    margin-top: 20px;
    transition: .5s;
}
/** section4 FEATURES end **/


/** section5 CONTACT **/

section.container-fluid.formsection {
    padding: 80px 0;
    position: relative;
}
section.container-fluid.formsection .container {
    z-index: 1;
    position: relative;
}
.contact-form textarea {
    height: 155px;
    padding: 15px;
}

section.container-fluid.formsection::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../img/form-img.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 5%;
}
.contact-info {
    padding-bottom: 70px;
}

.ci-bar {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 20px;
    padding-bottom: 40px;
}

.ci-icon {
    background: #f99f2e;
    padding: 21px;
    border-radius: 50px;
}
.ci-bar a {
    font-size: 20px;
    font-weight: 400;
    color: #000;
}
.contact-form input, .contact-form textarea {
    border-radius: 5px;
    font-size: 18px;
    margin-bottom: 15px;
    width: 100%;
    border: 1px solid #fcbc6e;
    padding: 10px;
}
a.btn-Request-Quote {
    background: #f99a26;
    color: #fff;
    border-radius: 5px;
    padding: 15px 50px;
    font-size: 18px;
}
/** section5 CONTACT end **/


/** section5 footer **/

section.container-fluid.footer-sce {
    padding: 20px 0;
}

/** section5 footer end **/

/** Hover **/
a.btn-Freight:hover, a.btn-movers:hover {
    background-color: #000;
    color: #fff;
}

a.btn-Request-Quote:hover  {
     background-color: #0d2a52;
        color: #fff;
}
a.btn.track:hover{
      background-color: #f99a26;
        color: #fff;

}
a.btn.login:hover {
    background: #4c4c4c;
    color: #fff;
}

.image-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    cursor: pointer;
}



.box-feature:hover:after {
    background-color: #f5a623;
    top:0;
    left:0;
    border-radius:0
}



.box-feature:hover p,.box-feature:hover h4 {
    color: #fff;
}

.box-feature:hover .icon-img {
    background-color: #fff;
}



/* 
   LAPTOP 
   =============================== */
@media (max-width: 1440px) {

  /* ---------- HEADER ---------- */
  .navbar {
    padding: 15px 0;
  }

  .logo img {
    max-width: 220px;
  }

  .header-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
  }

  /* ---------- HERO SECTION ---------- */
 section.container-fluid.our-trusted {
   height: auto;
    display: flex;
    align-items: center;
  }

  .hero-box {
    padding: 40px;
    height: 100%;
  }


  .hero-content h2 {
    font-size: 36px;
    line-height: 1.2;
  }

  .hero-content .icon {
    width: 70px;
    margin-bottom: 15px;
    height: auto;
  }

  .btn-Freight,
  .btn-movers {
    padding: 12px 28px;
    font-size: 16px;
  }

  /* ---------- INTRO SECTION ---------- */

  .intro p {
    font-size: 14px;
    line-height: 1.7;
  }

  /* ---------- IMAGE CARDS ---------- */
  .image-card {
    min-height: 280px;
    padding: 30px;
  }

  .card-text h4 {
    font-size: 22px;
  }

  .card-text p {
    font-size: 14px;
  }

  /* ---------- FEATURES ---------- */
  .title h2 {
    font-size: 36px;
  }

  .box-feature {
    padding: 30px;
    height: 100%;
  }

  .box-feature h4 {
    font-size: 20px;
  }

  .box-feature p {
    font-size: 15px;
  }

  /* ---------- CONTACT ---------- */
  .contact-info {
    padding-right: 35px;
  }
  .ci-icon img {
    width: 30px;
}
.ci-icon {
    padding: 16px;
}
.ci-bar a{ font-size:18px;
 }

  .contact-form h2 {
    font-size: 30px;
  }

  .contact-form input,
  .contact-form textarea {
    font-size: 15px;
    padding: 12px;
  }

  .btn-Request-Quote {
    padding: 14px 40px;
    font-size: 16px;
  }

  /* ---------- FOOTER ---------- */
  footer {
    font-size: 14px;
    padding: 20px 0;
  }

}


/* 
tablat
 =============================== */

@media (max-width: 991px) {

.hero-content h2 {
    font-size: 26px;
    margin-bottom: 20px;
}



a.btn-movers, a.btn-Freight {
    padding: 10px 20px;
    font-size: 18px;
}

.title h2 {
    font-size: 30px;
}

.title p {
    font-size: 18px;
}

.image-card {
    height: auto;
}


p.contact-text {
    font-size: 18px;
}
.image-card {
    padding: 20px;
}

.image-card p {
    font-size: 14px;
    line-height: 20px;
}

}

/* 
   mobile 
   =============================== */
@media (max-width: 767px) {
  
.logo img{
    max-width: 100px;
}

header .row {
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
   
}
header .row>*{width:auto;}

    .hero-content h2 {
    font-size: 20px;
    margin: 20px;
}
.btn{
    font-size: 10px;
}

.title h2 {font-size: 25px ;}
.features .title h2 {
    font-size: 25px;
}
.intro p {
    padding: 20px;
}

.hero-content .icon {
    width: 70px;
    margin-bottom: 0;
    height: auto;
}

section.container-fluid.our-trusted {
    height: auto;
    padding: 25px 0;
}

.hero-content {
    padding: 0;
}

a.btn-movers, a.btn-Freight {
    padding: 10px 25px;
    font-size: 16px;
}

.hero-box {
    padding: 20px 0;
}
}