/* Big Screen Device */
@media only screen and (min-width: 1800px) {
    .container {
        max-width: 1570px;
    }
}


/* XXL+ Device. */
@media only screen and (max-width: 1799px) {
    .container {
        max-width: 1570px;
    }

    .testimonial__slide {
        width: 550px;
    }
    .footer__logo {
        max-width: 200px;
    }
    .contact__inner {
        padding: 90px;
    }
}

/* XXL Device. */
@media only screen and (max-width: 1600px) {
    .container {
        max-width: 1320px;
    }

    .logo {
        max-width: 300px;
    }
    .header__nav {
        gap: 50px;
    }
    .header__ul {
        gap: 40px;
    }
    .service__top__wrapper {
        gap: 50px;
    }

    /* -----about-us.html + contact.html Page Responsive Start----- */
    .hero--common .fs-1 {
        font-size: 72px !important;
    }

    .contact__page__info {
        padding-left: 0;
    }
    /* -----about-us.html + contact.html Page Responsive End----- */
}

/* XL Device :1280px. */
@media only screen and (max-width: 1399px) {
    .container {
        width: 1140px;
    }

    .fs-1 {
        font-size: 72px !important;
    }
    .overview__contact__item {
        gap: 25px;
        padding: 24px;
        border-right: 1px solid var(--dark);
    }
    .overview__counter {
        gap: 20px;
    }
    .counter__box {
        max-width: 250px;
    }
    .service__top__wrapper {
        flex-direction: column;
    }
    .service__text {
        text-align: center;
        max-width: 90%;
    }
    .about {
        padding: 140px 0 100px;
    }
    .service__cards__row {
        gap: 30px 0;
    }
    .usedcar__thumb {
        height: 275px;
    }
    .usedcar__item {
        min-height: 350px;
    }

    /* -----about-us.html Page Responsive Start----- */
    .hero--common .fs-1 {
        font-size: 64px !important;
    }
    .timeline__item {
        min-height: 500px;
    }
    .owner::after {
        width: 100%;
        height: 70%;
        opacity: .4;
    }
    .owner__thumb {
        margin: auto;
    }
    /* -----about-us.html Page Responsive End----- */

    /* -----occasions.html + car-details.html Page Responsive Start----- */
    .occasions__list__itme {
        gap: 15px;
    }
    .occasions__icon {
        max-width: 25px;
    }


    .car__img__lg {
        height: 500px;
    }
    .car__pagination {
        font-size: 16px;
        padding: 10px 20px;
    }
    .car__next, .car__prev {
        height: 80px;
        width: 50px;
    }
    .car__all__info__text .sale__car__details {
        padding-left: 0;
    }
    .car__info__details__text {
        padding-left: 0;
    }
    .car__all__info__text .sale__car__title {
        font-size: 30px;
    }
    /* -----occasions.html + car-details.html Page Responsive End----- */


}


/* Large Device :992px. */
@media only screen and (max-width: 1199px) {
    .container {
        width: 960px;
    }

    .btn--mobileMenu, .btn--mobileMenuClose {
        padding: 10px;
        width: 45px;
        min-height: 45px;
        height: auto;
        font-size: 16px;
    }
    .btn--mobileMenuClose {
        font-size: 18px;
    }
    .mobile__menu__logo {
        max-width: 200px;
    }
    .mobile__menu .offcanvas-body {
        margin-top: 13px;
    }
    .header__nav__link {
        display: flex;
        padding: 14px 16px;
        border-bottom: 1px solid var(--primary);
    }
    .header__nav__item:first-child .header__nav__link {
        border-top: 1px solid var(--primary);
    }
    .header__nav__link:hover, .header__nav__link.active {
        background-color: rgba(255, 255, 255, 0.025);
    }
    .hero {
        margin-top: 90px;
        padding: 80px 0 100px;
    }
    .hero::after {
        display: none;
    }
    .fs-1 {
        font-size: 64px !important;
    }
    .fs-2 {
        font-size: 42px !important;
}
    .overview__wrapper {
        flex-direction: column;
    }
    .overview__contact__item {
        padding: 0;
        border: none;
    }
    .overview__contacts, .overview__counter {
        width: 80%;
        gap: 30px;
        justify-content: space-between;
    }
    .counter__box, .overview__contact__item {
        max-width: 40%;
        width: 100%;
    }
    .about__icon {
        width: 75px;
        height: 75px;
        top: -40px;
        left: 20px;
    }
    .about__icon__img {
        max-width: 32px;
    }
    .about__card {
        padding: 50px 20px 20px;
    }
    .testimonial__btns__wrapper {
        margin-right: 0;
    }
    .testimonial__slide {
        width: 450px;
    }
    .client__avatar {
        width: 50px;
        height: 50px;
    }
    .client__company {
        width: 25px;
        height: 25px;
    }
    .usedcar__detail {
        padding: 20px;
    }
    .usedcar__item {
        min-height: 340px;
    }
    .footer__logo {
        max-width: 150px;
    }
    .footer__wrapper {
        gap: 100px;
    }

    /* -----about-us.html Page Responsive Start----- */
    .hero__common__top {
        padding: 0;
    }
    .hero__bg__content::after {
        display: none;
    }
    .hero__para {
        color: var(--primary);
    }
    .hero__bg__content {
        color: #fff;
    }
    .hero--common {
        margin-bottom: 80px;
    }
    .timeline__contents {
        gap: 80px;
    }
    .timeline__item {
        min-height: auto;
    }
    .timeline__inner {
        padding: 25px;
    }
    .owner {
        min-height: auto;
        padding: 80px 0;
    }
    /* -----about-us.html Page Responsive End----- */


    /* -----occasions.html + car-details.html Page Responsive Start----- */
    .sale__car__card {
        min-height: auto;
    }
    .sale__car__thumb {
        width: 375px;
    }
    .sale__card__ticker {
        right: auto;
        left: 0;
    }
    .sale__car__title, .car__price {
        font-size: 22px;
        padding-bottom: 15px;
    }
    .car__details {
        padding: 15px 0;
    }


    .car__details__page {
        margin-top: 90px;
        padding: 80px 0;
    }
    .car__all__info__text .sale__car__title {
        color: var(--dark);
        padding-bottom: 25px;
    }
    /* -----occasions.html + car-details.html Page Responsive End----- */

    /* -----contact.html Page Responsive Start----- */
    .contact--page {
        margin-top: 90px;
        padding: 80px 0;
    }
    /* -----contact.html Page Responsive End----- */


}


/* Medium Device :768px. */
@media only screen and (max-width: 991px) {
    .container {
        width: 720px;
    }

    .logo {
        max-width: 225px;
    }
    .overview__icon, .contact__info__icon {
        font-size: 22px;
    }
    .counter__box, .overview__contact__item {
        max-width: 50%;
        gap: 16px;
    }
    .overview__contact__info {
        font-size: 16px;
    }
    .counter__number {
        font-size: 22px;
    }
    .counter__text {
        font-size: 16px;
    }
    .about__title, .service__card__title {
        font-size: 20px;
    }
    .service__thumb {
        height: 230px;
    }
    .service__img {
        max-height: calc(100% - 30px);
    }
    .service__card {
        min-height: 490px;
    }
    .about__text--williescars, .usedcars__content {
        max-width: 100%;
    }
    .about {
        padding: 80px 0;
    }
    .about__thumb {
        max-width: 80%;
        margin: auto;
    }
    .testimonial__slide {
        padding: 25px 35px;
    }
    .usedcars {
        padding: 200px 0 80px;
    }
    .contact__inner {
        padding: 40px;
    }
    .contact--section {
        padding-bottom: 80px;
    }
    .footer__logo {
        max-width: 125px;
    }
    .copyright {
        border-top: 1px solid var(--primary);
    }

    /* -----about-us.html Page Responsive Start----- */
    .timeline__contents {
        gap: 50px;
    }
    .timeline__contents::after, .timeline__item::after {
        display: none;
    }
    .timeline__inner {
        padding: 25px 0 0 !important;
    }
    .timeline__thumb {
        height: 350px;
    }
    .owner__thumb {
        max-width: 300px;
    }
    .owner__text {
        max-width: 100%;
    }
    /* -----about-us.html Page Responsive End----- */

    /* -----occasions.html + contact.html Page Responsive Start----- */
    .sale__car__thumb {
        width: 100%;
        height: 350px;
    }
    .sale__card__ticker {
        right: 0;
        left: auto;
        margin-top: 20px;
    }


    .contact__map {
        width: 100%;
        height: 400px;
    }
    .contact__page__info .contact__way br {
        display: none;
    }
    .contact__page__info .contact__info__item {
        max-width: 280px;
        margin: auto;
    }
    .contact__page__info .overview__icon, .contact__info__icon {
        width: 22px;
        margin-top: 0px;
    }
    .contact__map::after {
        background-color: rgba(0, 0, 0, 0.5);
    }
    .btn--location {
        opacity: 1;
        visibility: visible;
        background-color: var(--primary);
        border-color: var(--primary);
    }
    .contact__form__inner {
        max-width: 100%;
    }
    .contact__form__wrapper::after {
        width: 100%;
        opacity: .3;
    }
    /* -----occasions.html + contact.html Page Responsive End----- */

}


/* Small Device :550px. */
@media only screen and (max-width: 767px) {
    .container {
        width: 540px;
    }

    .header__wrapper {
        padding: 16px 0;
    }
    .hero, .hero--common {
        margin-top: 70px;
    }
    .fs-1, .hero--common .fs-1 {
        font-size: 52px !important;
    }
    .hero__service {
        font-size: 16px;
    }
    .btn {
        height: auto;
        padding: 14px 30px;
        font-size: 15px;
    }
    .btn__icon {
        font-size: 18px;
    }
    .btn--mobileMenu, .btn--mobileMenuClose {
        padding: 5px;
        width: 40px;
        min-height: 40px;
        font-size: 15px;
    }
    .counter__box, .overview__contact__item {
        max-width: 100%;
    }
    .overview__contacts, .overview__counter, .overview__wrapper {
        width: 100%;
        gap: 20px;
        flex-direction: column;
    }
    .overview__contact__info br {
        display: none;
    }
    .about__card {
        padding: 50px 20px 70px;
        min-height: auto;
    }
    .about__card__col:last-child .about__card {
        padding-bottom: 40px;
    }
    .btn--service {
        min-width: 100%;
        height: 60px;
        gap: 10px;
        font-size: 16px;
        padding: 15px 30px;
    }
    .service__btn__div {
        width: 100%;
    }
    .service__top {
        padding-bottom: 130px;
    }
    .usedcar__item {
        min-height: auto;
    }
    .usedcar__thumb {
        height: 250px;
    }
    .contact__info__item, .contact__details {
        gap: 25px;
    }
    .footer__wrapper {
        gap: 40px;
    }
    
    /* -----about-us.html + occasions.html + car-details.html Page Responsive End----- */
    .hero__para {
        font-size: 18px;
    }
    .timeline__year {
        font-size: 22px;
    }
    .timeline__thumb {
        height: 275px;
    }
    .owner__subtitle {
        font-size: 20px;
    }
    


    .sale__wrapper .fs-2 {
        font-size: 32px !important;
    }
    .sale__car__thumb {
        height: 275px;
    }


    .car__details__page {
        margin-top: 70px;
        padding: 50px 0;
    }
    .car__img__lg {
        height: 400px;
    }
    .car__all__info__text .car__price, .details__text__title {
        font-size: 30px;
    }
    /* -----about-us.html + occasions.html + car-details.html Page Responsive End----- */


    /* -----contact.html Page Responsive Start----- */
    .contact--page {
        margin-top: 70px;
    }
    .contact__map {
        height: 300px;
    }
    /* -----contact.html Page Responsive End----- */


}


/* Extra small Device. */
@media only screen and (max-width: 575px) {
    .container {
        width: 100%;
        padding: 0 15px;
    }
    .fs-1, .hero--common .fs-1 {
        font-size: 44px !important;
    }
    .fs-2 {
        font-size: 32px !important;
    }

    .logo {
        max-width: 190px;
    }
    .hero {
        padding: 60px 0 80px;
    }
    .about__icon {
        width: 65px;
        height: 65px;
        top: -33px;
    }
    .about__icon__img {
        max-width: 25px;
    }
    .about {
        padding: 50px 0;
    }
    .service__text {
        max-width: 100%;
    }
    .service__btn__text {
        font-size: 16px;
        padding: 16px;
    }
    .service__card {
        min-height: auto;
    }
    .service__cards__row {
        gap: 20px 0;
    }
    .service__thumb {
        height: 190px;
    }
    .service__card__text {
        padding: 20px;
    }
    .about__thumb {
        max-width: 100%;
    }
    .testimonial__slide {
        padding: 20px;
    }
    .testimonial__btns__wrapper {
        gap: 15px;
    }
    .usedcars {
        padding: 170px 0 50px;
    }
    .usedcar__thumb {
        height: 210px;
    }
    .contact__inner {
        padding: 20px;
    }
    .contact__info__item, .contact__details {
        gap: 15px;
    }
    .contact__way {
        font-size: 16px;
    }
    .contact--section {
        padding-bottom: 50px;
    }
    .footer__logo {
        max-width: 100px;
    }

    /* -----about-us.html Page Responsive Start----- */
    .hero__para {
        font-size: 16px;
    }
    .hero--common {
        margin-bottom: 50px;
    }
    .timeline__contents {
        padding: 40px 0;
        gap: 40px;
    }
    .timeline__year {
        font-size: 18px;
    }
    .timeline__thumb {
        height: 200px;
    }
    .owner {
        padding: 50px 0;
    }
    .owner__title.fs-2 {
        font-size: 28px !important;
    }
    /* -----about-us.html Page Responsive End----- */

    /* -----occasions.html + car-details.html Page Responsive Start----- */
    .sale__car__thumb {
        height: 200px;
    }
    .sale__car__contents {
        padding: 20px 15px;
    }
    .sale__car__title, .car__price {
        font-size: 18px;
        padding-bottom: 10px;
    }
    .sale__card__ticker {
        padding: 8px 15px;
        font-size: 14px;
    }



    .car__details__page::after {
        height: 255px;
    }
    .car__details__slider {
        margin-bottom: 40px;
    }
    .car__img__lg {
        height: 250px;
    }
    .car__pagination {
        font-size: 12px;
        padding: 5px 15px;
    }
    .car__next, .car__prev {
        height: 50px;
        width: 35px;
    }
    .car__img__sm {
        height: 75px;
    }
    .car__all__info__text {
	padding: 50px 0;
    }
    .car__all__info__text .sale__car__title {
        font-size: 22px;
        padding-bottom: 15px;
    }
    .car__all__info__text .car__price, .details__text__title {
        font-size: 22px;
    }
    .product__details--cta .btn {
        width: 100%;
    }
    /* -----occasions.html + car-details.html Page Responsive End----- */

    /* -----contact.html Page Responsive Start----- */
    .contact--page {
        padding: 60px 0;
    }
    .contact__page__info .contact__info__item {
        width: 100%;
    }
    .contact__map {
        height: 250px;
    }
    .contact__form__wrapper {
        margin-top: 50px;
    }
    .btn--submit {
        width: 100%;
    }
    /* -----contact.html Page Responsive End----- */


}

@media only screen and (max-width: 430px) {
    .mobile__menu .offcanvas-start {
        width: 100%;
    }
}