/* responsive design for extra small device */

@media only screen and (max-width: 576px){
    section{
        width: 100%;
    }
    .scroll-top-btn{
      position: fixed;
      bottom: -60px; /* Initial position */
    right: 40px;
    z-index: 1;
    }
    .scroll-top-btn.show {
      bottom: 40px; /* Show button */
  }

    /* pre-header-css-here */
    .pre-header{
        height: 50px;
    }
    .pre-header__container{
        width: 85%;
        height: 100%;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }
    .pre-header__icon{
        margin-right: 10px;
        width: 12px;
        height: 12px;
    }
    .pre-header__divider {
        width: 1px;
        height: 14px;
        background-color: var(--gray-color);
    }
    .pre-header__info {
        font-size: 12px;
        letter-spacing: 0px;
        color: var(--gray-color);
        font-family: poppins-400;
    }

    /* main-header-css-here */

    .main-header{
        height: 70px;
    }
    .main-header__container{
        width: 85%;
        height: 100%;
        margin: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .main-header__logo{
        width: 80px;
        height: auto;
    }
    .main-header__nav-btn-wrapper{
        display: none;
    }
    .toggle{
        display: block;
    }

    /* banner-css-here */

    .banner{
        width: 100%;
        height: 700px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-size: cover;
        background-position: center;
    }
    .banner-wrapper{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .banner-container{
        width: 85%;
        height: 100%;
        margin: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
    }
    .banner-left,
    .banner-right {
    width: 100%;
    }
    .banner-content{
        padding-right: 0px;

    }
    .banner-heading{
        text-align: center;
        font-size: 40px;
    }
    .banner-paragraph{
        font-size: 20px;
        width: 100%;
        text-align: center;
        margin-top: 12px;
    }

    /* card-section-css-here */

  .card-wrapper{
    width: 100%;
    height: 100vh;
    

  }
  .card-container{
    width: 85%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .card{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
  }
  .card-header{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0;
  }
  .card:first-child, .card:last-child{
    border-right: 0px;
    border-bottom: 1px solid var(--gray-color);
    border-top: 1px solid var(--gray-color);
  }
  .card-icon{
    margin-right: 0;
   margin-bottom: 10px;
  }
  .card-heading{
    font-size: 20px;
    line-height: 28px;
  }
  .card-paragraph{
    font-size: 12px;
    padding: 0px 15px 0px 15px;
    text-align: center;
    margin-top: 10px;
  }

  /* why-anncar-section-css-here */
  .why-anncar__wrapper{
    width: 100%;
    height: 650px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
    
  }
  .why-anncar__container{
    width: 85%;
    height: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    gap: 0;
  }
  .why-anncar__left, .why-anncar__right{
    width: 100%;
  }
  .why-anncar-img{
    width: 100%;
  }
  .why-anncar__heading{
    text-align: center;
  }
  .why-anncar__divider{
    display: flex;
    margin-left: 130px;
    
  }
  .why-anncar__paragraph {
    width: 100%;
    font-size: 16px;
    margin-top: 18px;
    text-align: center;
}

/* bg-with-card-css-here */
.bg-with-card__wrapper{
  width: 100%;
  height: 1050px;
  display: flex;
  flex-direction: column;
  background-position: center;
  background-size: cover;
  align-items: center;
  justify-content: space-evenly;
  margin-top: 50px;
}
.bg-with-card__container{
  width: 85%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  margin: auto;
  gap: 0px;
}
.bg-with-card__column{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0;

}
.bg-with-card__column:nth-child(2){
  margin-top: 0px;
}
.bg-with-card__icon{
  width: 40px;
  height: 40px;
}
.bg-with-card__heading{
  font-size: 18px;
  margin-top: 10px;
  
}
.bg-with-card__paragraph{
  font-size: 12px;
  width: 100%;
  margin-top: 10px;
  text-align: center;
}

/* top-brands-sell-section-css-here */
.brands__wrapper{
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
.brands__container{
  width: 85%;
  height: 100vh;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
.brands__left, .brands__right {
  width: 100%;
}
.brands__heading{
  font-size: 24px;
}
.brands__divider{
  width: 150px;
}
.brands__identity{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
.brands__identity-item{
  width: 100%;
}
.brands__identity-heading{
  margin-top: 10px;
  text-align: center;
}
.brands__identity-paragraph{
  width: 100%;
  text-align: center;
}
.brands-image{
  width: 100%;
  height: 100%;
}

/* pre-footer-section-css-here */
.pre-footer__wrapper{
  width: 100%;
  height: 500px;
  background-position: center;
  background-size: cover;
  
}
.pre-footer__container{
  width: 85%;
  height: 100%;
  margin: auto;
  display: flex;
}
.pre-footer__left-img{
  display: none;
}
.pre-footer__right-box{
  width: 100%;
  height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 10%;
  right: 0;
}
.pre-footer__heading{
  text-align: center;
  font-size: 24px;
  padding: 0px 15px 0px 15px;
}
.pre-footer__paragraph{
  width: 100%;
  text-align: center;
  padding: 10px 15px 10px 15px;
}
.pre-footer__btn{
  margin: 10px 0px 0px 0px;
}

/* main-footer-css-here */

.footer-wrapper{
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.footer-logo__container{
  width: 85%;
  margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer-nav__container{
  width: 85%;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 0;
  
  
}
.social-heading{
  text-align: center;
}
.social-paragraph{
  width: 100%;
  text-align: center;
  margin-top: 10px;
}
.footer-social__icon{
  width: 100%;
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.contact-heading, .link-heading, .btn-heading{
  text-align: center;
  margin-bottom: 10px;
  margin-top: 20px;
}
.call-info{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 10px;
}
.email-info{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 10px;

}
.location-info{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 10px;

}
.useful-link{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.btn-paragraph{
  width: 100%;
  text-align: center;
}
.btn{
  margin-left: 80px;
}

/* copyright-css-css-here */

.copyright-wrapper{
  width: 100%;
  height: 40px;
}

  
}

/* responsive design for small device */

@media only screen and (min-width: 576px){}

/* responsive design for medium device */

@media only screen and (min-width: 768px){}

/* responsive design for large device */

@media only screen and (min-width: 992px){}

/* responsive design for extra-large device */

@media only screen and (min-width: 1200px){}