:root{
--blue_crl:#336db6;
--red_clr:#e3444a;
}
@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');
*{
  font-family: 'Rubik', sans-serif;
}
/*....................... animations ...................................*/
 @-webkit-keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}



 @-webkit-keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes zoom {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(1.5, 1.5);
  }
}

@keyframes dropdown {
  0%{
    display: flex;
    transform: translateY(20px);
    opacity: 0;
  }
  100%{
    display: flex;
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rotate{
  0%{
    transform: rotate(0) scale(1.1);
  }
  50%{
    transform: rotate(180deg) scale(1.1);
  }
  100%{
    transform: rotate(360deg) scale(1.1);
  }
}
/* .................................. common styles ......................... */
.section-1,.section-2,.section-3,.section-4,.section-5,.section-6,.section-7,.section-8{
  padding: 50px 0;
}
@media screen and (min-width:992px) {
  .hide-on-lg{
    display: none;
  }
}
@media screen and (max-width:992px) and (min-width:765px) {
  .hide-on-md{
    display: none;
  }
}
@media screen and (max-width:765px) {
  .hide-on-sm{
    display: none;
  }
}


/*....................... header ...................................*/
@media screen and (min-width:992px) {
header{
  .collapse.navbar-collapse.d-flex{
    display: flex !important;
  }
    #mainNavigation a.nav-link {
      z-index: 1000;
        font-family: 'Cabin', sans-serif;
        font-size:14px;
        text-transform:uppercase;
        letter-spacing:2px;
        font-weight: bold;
       /*  text-shadow:1px 1px 2px #fff; */
      }
      .invert{/*nav logo*/
        width: 200px;
        transition: 0.4s;
     }
     .scrolled .invert{
        width: 100px;
     }

      .dropdown-menu {/* dropdown */
        border: 0;
        left: -50%;
        background-color: #ffffffb0;
        padding: 20px;
        li .dropdown-item{
          display: flex;
          flex-direction: column;
          text-align: center;
          align-items: center;
          text-transform: capitalize;
          padding: 10px 0;
          img{
            width: 50px;
            filter: grayscale(1);
          }
        }
        li .dropdown-item:hover{
          color: black;
          background: transparent;
          font-weight: 600;
          img{
            filter: grayscale(0);
          }
        }
      }/* end-dropdown */



      
      .nav-item a{
        color:#dfdfdf;
      }
      .nav-item a:hover {
        color:#fff
      }
      .nav-item{
        min-width:12vw;
      }
      #mainNavigation {
        position:fixed;
        top:0;
        left:0;
        width:100%;
        z-index:123;
        padding-bottom:10px;
        transition: 0.5s;
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
      }
      #navbarNavDropdown.collapsing .navbar-nav,
      #navbarNavDropdown.show .navbar-nav{
        padding:12px;
      }
      .navbar-toggler-icon{/*nav icon sand*/
        background: url('../img/icons/sanwich-nav-icon.png')center/100% auto no-repeat !important;
        height: 30px;
    }
    
}
header  .dropdown:hover .dropdown-menu,.dropdown-menu.show{/* hover dropdown */
  display: flex !important;
  animation: dropdown 0.3s linear both;
  width: 800px;
  flex-wrap: wrap;
  left: -300px !important;
}
#mainNavigation.scrolled{/*...... navbar when scrolled .....*/
  background-color: white;
  .nav-item a{
    color: #000000c4;
  }
  .dropdown-menu{
    background: white;
  }
}
}
@media screen and (max-width:992px) {/* ..................navbar in medium devices............... */
  header{
    .collapse.navbar-collapse.d-flex{
      display: flex !important;
      position: fixed;
      right: 0;
      height: 100vh !important;
      background: white;
      top: 0;
      width: 80%;
      margin-top: 0 !important;
      flex-direction: column;
      overflow: scroll !important;
      padding-left: 30px;
      transform: translateX(100%);
      opacity: 0;
      transition: 0.4s;
    }.collapse.navbar-collapse.d-flex.show{
      transform: translateX(0);
      opacity: 1;
    }
    .close-div{
      padding: 10px 5px;
      text-align: right;
      width: 100%;
      .close-btn{
        background: white;
        border-radius: 50%;
        width: 50px;
        height: 50px;
      }
    }

    .navbar-nav{
      width: 100%;
      text-align: left;
    }

      #mainNavigation a.nav-link {
        z-index: 1000;
          font-family: 'Cabin', sans-serif;
          font-size:14px;
          text-transform:uppercase;
          letter-spacing:2px;
          font-weight: bold;
         /*  text-shadow:1px 1px 2px #fff; */
        }
        .invert{/*nav logo*/
          width: 200px;
          transition: 0.4s;
       }
       .scrolled .invert{
          width: 100px;
       }
  
        .dropdown-menu {/* dropdown */
          border: 0;
          top: 0;
          height: 0;
          overflow: hidden;
          left: -50%;
          padding: 0;
          transition: 1s;
          background-color: #ffffffb0;
          padding: 20px;
          position: relative;
          box-shadow: none;
          width: 100%;
          li .dropdown-item{
            display: flex;
            flex-direction: column;
            text-align: center;
            align-items: center;
            text-transform: capitalize;
            padding: 10px 0;
            img{
              width: 50px;
              filter: grayscale(1);
            }
          }
          li .dropdown-item:hover{
            color: black;
            background: transparent;
            font-weight: 600;
            img{
              filter: grayscale(0);
            }
          }
        }/* end-dropdown */
  
  
  
        
        .nav-item a{
          color:#000000c4;
        }
        .nav-item a:hover {
          color:#000000c4
        }
        .nav-item{
          min-width:12vw;
        }
        #mainNavigation {
          position:fixed;
          align-items: center;
          top:0;
          left:0;
          width:100%;
          z-index:123;
          padding-bottom:10px;
          transition: 0.5s;
          display: flex;
          justify-content: space-between;
          padding: 0 30px;
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
        .navbar-expand-lg{
          display: flex;
          align-items: center;
        }
        }
        #navbarNavDropdown.collapsing .navbar-nav,
        #navbarNavDropdown.show .navbar-nav{
          padding:12px;
        }
        .navbar-toggler{
          height: 50px;
          width: 50px;
          padding: 5px;
          border: 0;
        }
        .navbar-toggler-icon{/*nav icon sand*/
          background: url('../img/icons/sanwich-nav-icon.png')center/100% auto no-repeat !important;
          filter: invert(97%) sepia(1%) saturate(65%) hue-rotate(114deg) brightness(118%) contrast(100%);
      }
      
  }
  header .dropdown:hover .dropdown-menu{
    display: none;
  }
  header .navbar-expand-lg .dropdown-menu.show{/* hover dropdown */
    position: relative !important;
    display: flex !important;
    animation: dropdown 0.3s linear both;
    width: 100%;
    flex-wrap: wrap;
    left: 0 !important;
    height: auto;
  }
  #mainNavigation.scrolled{/*...... navbar when scrolled .....*/
    background-color: white;
    .navbar-toggler-icon{/*nav icon sand*/
      filter: none;
  }
  }


}
@media screen and (max-width:765px) {/* ..................navbar in small devices............... */
  header{
    .collapse.navbar-collapse.d-flex{
      display: flex !important;
      position: fixed;
      right: 0;
      height: 100vh !important;
      background: white;
      top: 0;
      width: 90%;
      margin-top: 0 !important;
      flex-direction: column;
      overflow: scroll !important;
      padding-left: 30px;
      transform: translateX(100%);
      opacity: 0;
      transition: 0.4s;
    }.collapse.navbar-collapse.d-flex.show{
      transform: translateX(0);
      opacity: 1;
    }
    .close-div{
      padding: 10px 5px;
      text-align: right;
      width: 100%;
      .close-btn{
        background: white;
        border-radius: 50%;
        width: 50px;
        height: 50px;
      }
    }

    .navbar-nav{
      width: 100%;
      text-align: left;
    }

      #mainNavigation a.nav-link {
        z-index: 1000;
          font-family: 'Cabin', sans-serif;
          font-size:14px;
          text-transform:uppercase;
          letter-spacing:2px;
          font-weight: bold;
         /*  text-shadow:1px 1px 2px #fff; */
        }
        .invert{/*nav logo*/
          width: 160px;
          transition: 0.4s;
       }
       .scrolled .invert{
          width: 160px;
       }
  
        .dropdown-menu {/* dropdown */
          border: 0;
          top: 0;
          height: 0;
          overflow: hidden;
          left: -50%;
          padding: 0;
          transition: 1s;
          background-color: #ffffffb0;
          position: relative;
          box-shadow: none;
          width: 100%;
          li .dropdown-item{
            display: flex;
            flex-direction: column;
            text-align: center;
            align-items: center;
            text-transform: capitalize;
            padding: 10px 0;
            img{
              width: 35px;
              filter: grayscale(1);
            }
          }
          li .dropdown-item:hover{
            color: black;
            background: transparent;
            font-weight: 600;
            img{
              filter: grayscale(0);
            }
          }
        }/* end-dropdown */
  
  
  
        
        .nav-item a{
          color:#000000c4;
        }
        .nav-item a:hover {
          color:#000000c4
        }
        .nav-item{
          min-width:12vw;
        }
        #mainNavigation {
          position:fixed;
          align-items: center;
          top:0;
          left:0;
          width:100%;
          z-index:123;
          padding-bottom:20px;
          transition: 0.5s;
          display: flex;
          justify-content: space-between;
          padding: 0 15px;
          height: 90px;
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
        .navbar-expand-lg{
          display: flex;
          align-items: center;
        }
        }
        #navbarNavDropdown.collapsing .navbar-nav,
        #navbarNavDropdown.show .navbar-nav{
          padding:12px;
        }
        .navbar-toggler{
          height: 50px;
          width: 50px;
          padding: 5px;
          border: 0;
        }
        .navbar-toggler-icon{/*nav icon sand*/
          background: url('../img/icons/sanwich-nav-icon.png')center/100% auto no-repeat !important;
          filter: invert(97%) sepia(1%) saturate(65%) hue-rotate(114deg) brightness(118%) contrast(100%);
      }
      
  }
  header .dropdown:hover .dropdown-menu{
    display: none;
  }
  header .navbar-expand-lg .dropdown-menu.show{/* hover dropdown */
    position: relative !important;
    display: flex !important;
    animation: dropdown 0.3s linear both;
    width: 100%;
    flex-wrap: wrap;
    left: 0 !important;
    height: auto;
  }
  #mainNavigation.scrolled{/*...... navbar when scrolled .....*/
    background-color: white;
    box-shadow: 0px 1px 2px 2px #00000042;
    position: fixed;
    width: 100%;
    .navbar-toggler-icon{/*nav icon sand*/
      filter: none;
  }
  }

  
}
/*................................................................ header END  -................................................................*/

/*....................... carousel ...................................*/
.carousel,.item,.active {
    height: 100%;
}
.carousel{
.carousel-inner {
  height: 100%;
  background: #000;
}
/* .item.active{
  display: flex;
  align-items: center;
  height: 700px;
} */
.carousel-caption{
  bottom: auto;
  top: 33%;
  .btn{
    background-color: var(--red_clr);
    color: white;
  }
}


h2{font-size: 60px;}
p{padding:10px}

/* Background images are set within the HTML using inline CSS, not here */
.fill{
  width: 100%;
}
.fill img{
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    opacity:0.6;
}
}
@media screen and (max-width:992px) {
.carousel,.item,.active {
    height: 600px;
}

.carousel-caption{
  bottom: auto;
  top: 30%;
}



/* Background images are set within the HTML using inline CSS, not here */
.fill{
  width: 100%;
  height: 100%;
}
.fill img{
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    opacity:0.6;
    object-fit: cover;
}
}

@media screen and (max-width:765px) {
.carousel,.item,.active {
    height: 600px;
}
.carousel{
.carousel-inner {
  height: 100%;
  background: #000;
}
/* .item.active{
  display: flex;
  align-items: center;
  height: 700px;
} */
.carousel-caption{
  bottom: auto;
  top: 28%;
  .btn{
    background-color: var(--red_clr);
    color: white;
  }
}


h2{font-size: 30px;}
p{padding:10px}

/* Background images are set within the HTML using inline CSS, not here */
.fill{
  width: 100%;
  height: 100%;
}
.fill img{
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    opacity:0.6;
    object-fit: cover;
}
}
}
/*....................... carousel END ...................................*/




/*....................... section-1 ...................................*/
.section-1{
   .slick-slide {
    margin: 0px 20px;
}
.logo-sldr .slick-track{
  display: flex !important;
  align-items: center;
}
 .slick-slide img {
    width: 100%;
}

 .slick-slider
{
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
      user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

 .slick-list
{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
 .slick-list:focus
{
    outline: none;
}
 .slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

 .slick-slider .slick-track,
 .slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

 .slick-track
{
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
 .slick-track:before,
 .slick-track:after
{
    display: table;
    content: '';
}
 .slick-track:after
{
    clear: both;
}
 .slick-loading .slick-track
{
    visibility: hidden;
}

 .slick-slide
{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
    padding: 10px;
}
[dir='rtl'].slick-slide
{
    float: right;
}
 .slick-slide img
{
    display: block;
}
 .slick-slide.slick-loading img
{
    display: none;
}
 .slick-slide.dragging img
{
    pointer-events: none;
}
 .slick-initialized .slick-slide
{
    display: block;
}
 .slick-loading .slick-slide
{
    visibility: hidden;
}
 .slick-vertical .slick-slide
{
    display: block;
    height: auto;
    border: 1px solid transparent;
}
 .slick-arrow.slick-hidden {
    display: none;
}
}
@media screen and (max-width:765px) {
  .section-1{
    .section-1-2{
      padding: 0;
    }
    .slick-slide {
     margin: 0px 20px;
 }
 .logo-sldr .slick-track{
   display: flex !important;
   align-items: center;
 }
  .slick-slide img {
     width: 100%;
 }
 
  .slick-slider
 {
     position: relative;
     display: block;
     box-sizing: border-box;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
       user-select: none;
     -webkit-touch-callout: none;
     -khtml-user-select: none;
     -ms-touch-action: pan-y;
         touch-action: pan-y;
     -webkit-tap-highlight-color: transparent;
 }
 
  .slick-list
 {
     position: relative;
     display: block;
     overflow: hidden;
     margin: 0;
     padding: 0;
 }
  .slick-list:focus
 {
     outline: none;
 }
  .slick-list.dragging
 {
     cursor: pointer;
     cursor: hand;
 }
 
  .slick-slider .slick-track,
  .slick-slider .slick-list
 {
     -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
         -ms-transform: translate3d(0, 0, 0);
          -o-transform: translate3d(0, 0, 0);
             transform: translate3d(0, 0, 0);
 }
 
  .slick-track
 {
     position: relative;
     top: 0;
     left: 0;
     display: block;
 }
  .slick-track:before,
  .slick-track:after
 {
     display: table;
     content: '';
 }
  .slick-track:after
 {
     clear: both;
 }
  .slick-loading .slick-track
 {
     visibility: hidden;
 }
 
  .slick-slide
 {
     display: none;
     float: left;
     height: 100%;
     min-height: 1px;
     padding: 5px;
 }
 [dir='rtl'].slick-slide
 {
     float: right;
 }
  .slick-slide img
 {
     display: block;
 }
  .slick-slide.slick-loading img
 {
     display: none;
 }
  .slick-slide.dragging img
 {
     pointer-events: none;
 }
  .slick-initialized .slick-slide
 {
     display: block;
 }
  .slick-loading .slick-slide
 {
     visibility: hidden;
 }
  .slick-vertical .slick-slide
 {
     display: block;
     height: auto;
     border: 1px solid transparent;
 }
  .slick-arrow.slick-hidden {
     display: none;
 }
 }
}
/*................................................................ section-1 END  -................................................................*/

/*....................... section-2 ...................................*/
@media screen and (min-width:765px) {
.section-2{
  .col-md-12{
    padding: 0;
  }
  .col-md-5{
    padding: 0;
  }
  .card{
    width: 100%;
    position: relative;
    border-radius: 10px;
    border: 0;
    overflow: hidden;
    color: white;
    cursor: pointer;
    .card-body{
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .card-details{
      width: 70%;
    }
    .product-img{
      position: absolute;
      width: 50%;
      right: 0;
      bottom: 0;
      transform: translate(30%,30%);
      transition: 0.5s;
    }
    .highlight{
      height: 110%;
      position: absolute;
      bottom: 0;
      right: 0;
      transform: translate(30%,30%);
    }
    .btn{
      background: white;
      border: 0;
      padding: 5px 10px;
      color: rgb(205, 83, 83);
      font-size: 18px;
      font-weight: 600;
    }
  }
  .card-1{
    height: 410px;
    background-color: rgb(205, 83, 83);
    padding-left: 10%;
    .card-title{
      font-size: 35px;
      font-weight: bold;
    }
  }
  .card-2,.card-3{
    height: 200px;
    padding-left: 10%;
    .card-title{
      font-size: 25px;
      font-weight: bold;
    }
  }
  .card-2{
    background-color: rgb(58, 196, 58);
    margin-bottom: 10px;
  }
  .card-3{
    background-color: rgb(212, 216, 86);
  }
  .card:hover{
    .product-img{
      transform: translate(20%,20%);
    }
  }
}
}
@media screen and (max-width:765px) {
  .section-2{
    .col-md-12{
      padding: 0;
    }
    .card{
      width: 100%;
      position: relative;
      border-radius: 10px;
      border: 0;
      overflow: hidden;
      color: white;
      cursor: pointer;
      .card-body{
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .card-details{
        width: 70%;
      }
      .product-img{
        position: absolute;
        width: 50%;
        right: 0;
        bottom: 0;
        transform: translate(30%,30%);
        transition: 0.5s;
      }
      .highlight{
        height: 110%;
        position: absolute;
        bottom: 0;
        right: 0;
        transform: translate(30%,30%);
      }
      .btn{
        background: white;
        border: 0;
        padding: 5px 10px;
        color: rgb(205, 83, 83);
        font-size: 18px;
        font-weight: 600;
      }
    }
    .card-1{
      height: 300px;
      background-color: rgb(205, 83, 83);
      padding-left: 10%;
      margin-bottom: 20px;
      .card-title{
        font-size: 35px;
        font-weight: bold;
      }
    }
    .card-2,.card-3{
      height: 200px;
      padding-left: 10%;
      .card-title{
        font-size: 25px;
        font-weight: bold;
      }
    }
    .card-2{
      background-color: rgb(58, 196, 58);
      margin-bottom: 10px;
    }
    .card-3{
      background-color: rgb(212, 216, 86);
    }
    .card:hover{
      .product-img{
        transform: translate(20%,20%);
      }
    }
  }
}
/*................................................................ section-2 END  -................................................................*/

/*....................... section-3 ...................................*/
.section-3{
  .card{
    width: auto;
    text-align: center;
    margin-bottom: 30px;
    border: 0;
    .img-div{
      width: 150px;
      height: 150px;
      margin: auto;
      transition: 0.4s;
      position: relative;
      z-index: 1;
    }
    .img-div::before{
      content: '';
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      border: 4px solid #326db580;
      z-index: 0;
      opacity: 0;
      transform: scale(-0.5);
      transition: 0.2s;
      animation: rotate 3s linear infinite;
      border-top: 0;
    }
    .img-div img{
      width: 100%;
      height: 100%;
      object-fit: contain;
      position: relative;
    }
    .card-title{
      transition: 0.4s;
    }
  }
  .card:hover{
    cursor: pointer;
    .img-div{
      transform: scale(0.9);
    }
    .img-div::before{
      opacity: 1;
      transform: scale(1.2);
    }
    .card-title{
      letter-spacing: 2px;
    }
  }
}
/*................................................................ section-3 END  -................................................................*/

/*....................... section-4 brands ...................................*/
.section-4{
  .card{
    position: relative;
    width: 80%;
    height: 400px;
    background: url(../img/banner/truck.jpg);
    background-size: cover;
    padding: 20px;
    display: flex;
    border-radius: 15px;
    margin: auto;
    justify-content: center;
    background-attachment: fixed;
    overflow: hidden;
    text-align: center;
    .cnts{
      width: 100%;
      line-height: 1;
      display: flex;
      flex-direction: column;
      gap: 10px;
      .title{
        font-size: 50px;
        font-weight: bold;
        color: white;
      }
      .caption{
        color: white;
        font-size: 25px;
        font-weight: bold;
        margin-bottom: 20px;
      }
      .btn-div button{
        color: white;
        border: 2px solid white;
        background: transparent;
        font-size: 20px;
        transition: 0.4s;
      }
      .btn-div button:hover{
        background: white;
        color: black;
      }
    }
  }
  .card::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 0;
    background: rgba(32, 31, 31, 0.299);
    left: 0;
  }
}
@media screen and (max-width:765px) {
  .section-4{
    .card{
      position: relative;
      width: 90%;
      height: 250px;
      background: url(../img/banner/truck.jpg);
      background-size: cover;
      padding: 0;
      display: flex;
      background-position: center;
      border-radius: 15px;
      margin: auto;
      justify-content: center;
      background-attachment: fixed;
      overflow: hidden;
      text-align: center;
      .cnts{
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
        .title{
          font-size: 25px;
          font-weight: bold;
          color: white;
        }
        .caption{
          color: white;
          font-size: 14px;
          font-weight: bold;
          margin-bottom: 20px;
        }
        .btn-div button{
          color: white;
          border: 2px solid white;
          background: transparent;
          font-size: 15px;
          transition: 0.4s;
        }
        .btn-div button:hover{
          background: white;
          color: black;
        }
      }
    }
    .card::before{
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      z-index: 0;
      background: rgba(32, 31, 31, 0.299);
      left: 0;
    }
  }
}
/*................................................................ section-4 brands END  -................................................................*/




/*....................... footer ...................................*/

footer{
  padding: 7rem 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  color: #777;
  position: relative;
  font-family: "Poppins", sans-serif;
  .container{
    z-index: 2;
    position: relative;
  }
  h3 {
    font-size: 16px;
    font-weight: bold;
    color: var(--red_clr);
    margin-bottom: 30px; }
  .footer-site-logo {
      font-size: 1.5rem;
      color: #fff; }
  .nav-links li {
        margin-bottom: 10px; }
  .nav-links li a {
    text-decoration: none;
          color: #141212; }
  .nav-links li a:hover {
            color: #fff; }
  .btn.btn-tertiary {
              background-color: #e42c64;
              color: #fff;
              border-radius: 30px;
              border: none;
              padding: 10px 20px; }
  .social li {
   display: inline-block; }
  .social li a {
    color: gray;
    padding: 7px; }
  .social li a:hover {
      color: #fff; }
  .copyright {
        border-top: 1px solid #595959; }

  .pos-abs-img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 50%;
    object-fit: cover;
  }

  .whatsapp-btn,.call-btn{
    position: fixed;
    right: 20px;
    height: 60px;
    width: 60px;
    display: flex;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    bottom: 20px;
    border-radius: 50%;
    font-size: 30px;
    z-index: 9999;
    color: white;
  }
  .whatsapp-btn{
    background-color: rgb(29, 157, 29);
  }
  .call-btn{
    background-color: var(--blue_crl);
    bottom: 90px;
  }
  .whatsapp-btn:hover,.call-btn:hover{
    color: white;
    text-decoration: none;
  }
}
footer:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(80 105 137 / 39%); 
  z-index: 1;
  backdrop-filter: blur(3px);
}
@media screen and (max-width:765px) {
  footer{
    text-align: center;
  }
}