/*==================================
         RESPONSIVE WEBSITE
====================================*/
@media only screen and (min-width : 1920px) {/* to 1366px */
}
@media only screen and (max-width : 1919px) {/* to 1366px */
}
@media only screen and (max-width : 1620px) {/* to 1366px */
}
@media only screen and (max-width : 1536px) {/* to 1366px */
}
@media only screen and (max-width : 1440px) {/* to 1366px */
}
@media only screen and (max-width : 1365px) { /* to 1024 */
}
@media only screen and (max-width : 1280px) { /* to 1024 */
}
@media only screen and (max-width : 1120px) { /* to 1024 */
    div.car-slider-grid .car-card {
        margin: 0;
        width: calc(33% - 40px);
    }
    section.contact-Info-pg .boxes-container {
        width: 100%;
        max-width: 1000px;
    }
    section.contactFormHere .formBoxInfo {
        flex-flow: column;
    }
    section.contactFormHere .formBoxInfo .left {
        width: 100%;
    }
    section.contactFormHere .formBoxInfo {
        gap: 50px;
    }
    section.contactFormHere .formBoxInfo .right {
        width: 100%;
        max-width: 100%;
    }
    section#pageTopBanner .content h2 {
        font-size: 50px;
    }
    section.contactFormHere {
        padding: 40px 0px 60px;
    }
    section.contact-Info-pg {
        margin: 60px 0px;
    }
}
@media only screen and (max-width : 1023px) { /* to 980 */
    div.container {
        max-width: calc(100% - 60px);
    }
    header#siteHeader .headerTop {
        width: calc(100% - 60px);
    }
    section.hero-section .hero-title {
        font-size: 30px;
    }
    div.bannerTextAbc .hero-button.couldFindYourCar {
        width: 250px;
        padding: 13px 10px;
    }
}
@media only screen and (max-width : 979px) { /* to 800 */
    section#couldYouFind .overlayItem .manText {
        flex-flow: column;
        gap: 20px;
    }
    section.video-section {
        height: 350px;
    }
    footer.footer {
        padding: 60px 0px 20px;
    }
    .footer-container .footer-brand {
        width: 100%;
    }
    .footer-container .footer-links {
        width: 100%;
        padding-left: 0;
    }
    .footer-container .newsletter {
        width: 100%;
    }
    .footer-container {
        flex-flow: column;
    }
    section.how-works-home .content p {
        font-size: 16px;
    }
    div.secHeading {
        margin-bottom: 20px;
    }
    div.contentColumn .box h3 {
        font-size: 16px; 
    }
    div.contentColumn .box p {
        font-size: 16px;
    }
    .footer-container {
        max-width: calc(100% - 60px);
        flex-flow: column;
    }
    section.why-choose .feature-title {
        font-weight: 600;
        font-size: 14px;
        text-align: left;
    }
    .banner-content h1 {
        font-size: 50px;
    }
    div.car-card .image {
        height: 108px;
    }
    section.mission-section .mission-content {
        display: flex;
        gap: 60px;
        align-items: flex-start;
        flex-flow: column-reverse;
    }
    section.mission-section .mission-text h2 br {
        display: none;
    }
    section.mission-section .mission-image {
        flex: auto;
        width: 100%;
    }
}
@media only screen and (max-width : 799px) { /* to 768 */
    header#siteHeader .nav-right span {
        margin-left: 10px;
    }
    header#siteHeader .nav-container #mainHumburg {
        display: block !important;
    }
    header#siteHeader .nav-right {
        display: none;
        color: white;
        position: absolute;
        top: 100px;
        left: 0;
        background: #000;
        width: calc(100% - 80px);
        padding: 20px 40px 40px;
        border-top: 1px solid #303030;
        z-index: 123456;
    }
    header#siteHeader .nav-right span {
        margin-left: 0;
    }
    div#mainHumburg #barItem {
        border: 0;
        width: 40px;
        height: 40px;
        font-size: 25px;
        border-radius: 3px;
        cursor: pointer;
        background: #fff;
    }
    header#siteHeader .nav-right a {
        font-weight: 500;
        font-size: 16px;
        width: 100%;
        display: block;
        padding: 12px 0px;
    }
    section.banner-bgsec .banner-title {
        font-size: 50px;
    }
    div.secHeading .siteH {
        font-size: 28px;
    }
    section.hero-section .hero-box {
        flex-flow: column;
    }
    section.team-section .team-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    section.contact-Info-pg .boxes-container {
        flex-flow: column;
    }
}
@media only screen and (max-width : 767px) { /* to 600 */
    div.car-slider-grid .car-card {
        margin: 0;
        width: calc(50% - 40px);
    }
    div.body-type-tabs .m-tab-item {
        padding: 8px 10px;
        border-radius: 4px;
    }
    div.body-type-tabs .m-tab-item span {
        font-weight: 600;
        font-size: 10px;
    }
    div.body-type-tabs {
        display: flex;
        justify-content: center;
        padding: 7px;
        border-radius: 4px;
        margin-bottom: 25px;
        flex-wrap: wrap;
    }
    div.contentColumn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 25px;
        margin-top: 25px;
        flex-flow: column;
    }
    section.how-works-home {
        margin: 40px 0px 40px;
    }
    section#couldYouFind .overlayItem {
        margin-bottom: 40px;
    }
    section#couldYouFind.nextItemHere {
        margin-top: 40px;
    }
    section.banner-bgsec .banner-title {
        font-size: 32px;
    }
    .check-button {
        padding: 12px 20px;
        font-size: 14px;
    }
    section.brands-section {
        padding: 40px 0px;
    }
    section.hero-section {
        padding: 40px 0px;
    }
    section.why-choose .feature {
        gap: 7px;
    }
    section.faq-section {
        margin: 40px auto;
        padding: 0;
    }
    footer.footer .footer-bottom-links {
        margin-right: 0;
    }
    section.brands-section .brands-grid {
        gap: 10px;
    }
    section.brands-section .brand-item {
        padding: 20px 20px;
    }
    div.secHeading .siteH {
        font-size: 24px;
    }
    section.mission-section {
        padding: 40px 0;
    }
    section.mission-section .mission-text p {
        font-size: 16px;
    }
    section.mission-section .mission-text h2 {
        margin-bottom: 10px;
    }
    section.mission-section .mission-content {
        gap: 40px;
    }
    section.mission-section .years-counter {
        margin-top: 20px;
    }
    section.mission-section .mission-text p {
        margin-bottom: 20px;
    }
    section.team-section .secHeading {
        margin-bottom: 30px;
    }
    section.team-section {
        padding: 40px 0;
    }
    section#pageTopBanner .content {
        padding-top: 90px;
    }
    section.mission-section .mission-text h2 {
        font-size: 28px;
    }
    section.mission-section .mission-text p {
        margin-bottom: 20px;
        line-height: 1.3em;
    }
}
@media only screen and (max-width : 599px) { /* to 480 */ 
    banner-content h1 {
        font-size: 40px;
    }
    section#mainTabsSec {
        margin-top: 40px;
    }
    section#couldYouFind .overlayItem .manText {
        gap: 40px;
    }
    section.banner-bgsec .banner-title {
        text-align: center;
    }
    section.brands-section .brands-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }
    .banner-content h1 {
        font-size: 40px;
    }
    .banner-content p {
        font-size: 18px;
        margin-bottom: 30px;
        line-height: 1.5em;
    }
    header#siteHeader .logo {
        width: 80px;
    }
    header#siteHeader .logo img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
    }
    header#siteHeader .headerTop {
        height: 70px;
    }
    header#siteHeader .nav-right {
        top: 70px;
    }
    section.team-section .team-member h3 {
        font-size: 16px;
    }
    section.team-section .team-member p {
        font-size: 14px;
    }
    section.faq-section .faq-answer p {
        line-height: 1.3em;
        padding: 5px 0 15px;
    }
    section#pageTopBanner .content h2 {
        font-size: 40px;
    }
    section.mission-section .counter-number {
        font-size: 60px;
    }
    section#pageTopBanner .content {
        max-width: 100%;
    }
    section.contact-Info-pg .top-text {
        font-size: 16px;
    }
    .formBoxInfo .left p {
        font-size: 16px;
    }
    .formBoxInfo .left h2 {
        margin-bottom: 12px;
    }
    .formBoxInfo .right form {
        padding: 15px;
    }
    .formBoxInfo .right form label {
        font-size: 16px;
    }
}
@media only screen and (max-width : 479px) { /* to 375 */
    header#siteHeader .headerTop {
        width: calc(100% - 30px);
    }
    div.container {
        max-width: calc(100% - 30px);
    }
    section.car-tabs-section {
        padding: 40px 0;
    }
    div.car-card {
        padding: 8px;
    }
    div.car-slider-grid .car-card {
        width: calc(50% - 24px);
    }
    section#couldYouFind .overlayItem .manText h3 {
        text-align: center;
        line-height: 1.5em;
        font-size: 32px;
    }
    section.hero-section .hero-content {
        padding: 0;
        width: 100%;
    }
    section.hero-section .hero-title {
        font-size: 24px;
        margin-bottom: 10px;
    }
    footer.footer .footer-bottom .container {
        flex-flow: column-reverse;
        gap: 10px;
        z-index: 1234;
        position: relative;
    }
    section.brands-section .brands-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    section.banner-bgsec .banner-bg .bannerTextAbc {
        flex-flow: column;
    }
    section.banner-bgsec .banner-bg .bannerTextAbc .check-button {
        width: 250px;
        padding: 12px 0px;
        text-align: center;
    }
    section.team-section .team-grid {
        gap: 15px;
    }
    section.mission-section .mission-text p {
        text-align: left;
    }
}
@media only screen and (max-width : 420px) {
    section.car-tabs-section .tab-button {
        padding: 10px 18px;
    }
    section.video-section {
        height: 190px;
    }
    section.video-section .play-button {
        width: 40px;
        height: 40px;
    }
    section.video-section .play-button::after {
        border-width: 8px 0 8px 15px;
    }
    header#siteHeader .nav-right {
        width: calc(100% - 40px);
        padding: 20px 20px 20px;
        z-index: 12345;
    }
    div.bannerTextAbc .hero-button.couldFindYourCar {
        font-size: 14px;
    }
}
@media only screen and (max-width : 374px) { /* to 360 */
    section.banner-bgsec .banner-content {
        padding: 0;
    }
    div.car-card .image {
        height: 75px;
    }
    div.car-card .car-specs {
        font-size: 12px;
    }
}
@media only screen and (max-width : 359px) { /* to 320 */
}