/* --------------------------------- Responsive --------------------------------- */


/* less then 1024px */

@media only screen and (max-width: 1024px) {
    /* ------------------------ Header ------------------------ */
    section.header .header-swiper .swiper-wrapper .swiper-slide .content .left .heading {
        font-size: 45px;
        font-weight: 700;
        margin-bottom: 20px;
    }
    section.similar .content .heading {
        font-size: 40px;
        font-weight: 800;
    }
    /* ---------------------- Machineries ---------------------- */
    .banner-area h1.heading {
        font-size: 60px;
    }
    .machineries .heading {
        font-size: 40px;
    }
    .machineries .products-parent {
        gap: 20px;
    }
    .machineries .products-parent .product-box {
        width: calc(33.3% - 13.1px);
    }
}


/* less then 972px */

@media only screen and (max-width: 972px) {
    /* ------------------------ Footer ------------------------ */
    footer .content {
        align-items: flex-start;
        flex-wrap: wrap;
    }
    footer .content .col {
        width: calc(50% - 20px);
    }
}


/* less then 900px */

@media only screen and (max-width: 900px) {
    /* ---------------------- Container ---------------------- */
    .container {
        padding: 0 20px;
    }
    /* --------------------- Subs Diaries --------------------- */
    section.subs-diary figure a {
        width: calc(25% - 20px);
    }
}


/* less then 845px */

@media only screen and (max-width: 845px) {
    /* ------------------------ Header ------------------------ */
    header .content .right {
        display: none;
    }
}


/* less then 768px */

@media only screen and (max-width: 768px) {
    /* ------------------------ Head ------------------------ */
    body::after {
        content: "";
        background-size: 180% auto;
    }
    /* ------------------------- Nav ------------------------- */
    nav.open {
        height: 200px;
    }
    nav {
        overflow: hidden;
        height: 50px;
    }
    nav .content {
        align-items: center;
        flex-wrap: wrap;
    }
    nav .content .nav-ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px 0;
        width: 100%;
        margin-top: 10px;
    }
    nav .content .nav-ul .nav-link.with-dropdown {
        display: block;
    }
    nav .content .nav-ul .nav-link.with-dropdown::after {
        display: none;
    }
    nav .content .nav-ul .nav-link .dropdown {
        display: block;
    }
    nav .content .nav-ul .nav-link .dropdown .nav-link-with-dropdown {
        display: block;
    }
    nav .content .nav-ul .nav-link .dropdown .nav-link-with-dropdown .icon {
        display: none;
    }
    nav .content .nav-ul .nav-link .dropdown .dropdown-content {
        padding: 10px 0 0 0;
        display: block;
        position: unset;
    }
    nav .content .nav-ul .nav-link .dropdown:hover .dropdown-content {
        display: flex;
    }
    nav .content .nav-ul .nav-link .dropdown .dropdown-content .dropdown-link {
        margin: 0 0 0 15px;
    }
    nav .content button.toggle {
        display: block;
    }
    /* ------------------------ Header ------------------------ */
    section.header .header-swiper .swiper-wrapper .swiper-slide .content {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        overflow: hidden;
    }
    section.header .header-swiper .swiper-wrapper .swiper-slide .content .left,
    section.header .header-swiper .swiper-wrapper .swiper-slide .content .right {
        width: 100%;
    }
    section.header .header-swiper .swiper-wrapper .swiper-slide .content .left .car-image {
        width: 50%;
    }
    section.header .header-swiper .swiper-wrapper .swiper-slide .content .right {
        text-align: right;
    }
    section.header .header-swiper .swiper-wrapper .swiper-slide .content .left .heading {
        font-size: 50px;
        font-weight: 700;
        margin-bottom: 20px;
    }
    section.header .header-swiper .swiper-wrapper .swiper-slide .content .right .car-image {
        width: 70%;
    }
    /* ------------------- Similar Sections ------------------- */
    section.similar .seprator {
        width: 100%;
    }
    section.similar .content {
        flex-direction: column;
        align-items: flex-start;
    }
    section.similar .content.rev {
        flex-direction: column-reverse;
    }
    section.similar .content .left {
        width: 100%;
    }
    section.similar .content .right {
        width: 100%;
    }
    section.similar .content .right .paragraph {
        margin: 15px 0 0 0;
    }
    section.similar .content .right .small-paragraph {
        margin: 15px 0 0 0;
    }
    section.similar .content .right ul {
        margin-top: 30px;
    }
    /* ---------------------- Machineries ---------------------- */
    .banner-area h1.heading {
        font-size: 50px;
    }
    .machineries .heading {
        font-size: 35px;
    }
    .machineries .products-parent {
        gap: 20px;
    }
    .machineries .products-parent .product-box {
        width: calc(50% - 10px);
    }
}


/* less then 600px */

@media only screen and (max-width: 600px) {
    /* ---------------------- Container ---------------------- */
    .container {
        padding: 0 10px;
    }
    /* ------------------------ Header ------------------------ */
    section.header .header-swiper .swiper-wrapper .swiper-slide .content .left .car-image {
        width: 80%;
    }
    section.header .header-swiper .swiper-wrapper .swiper-slide .content .right {
        text-align: right;
    }
    section.header .header-swiper .swiper-wrapper .swiper-slide .content .left .heading {
        font-size: 35px;
        font-weight: 700;
        margin-bottom: 20px;
    }
    section.header .header-swiper .swiper-wrapper .swiper-slide .content .right .car-image {
        width: 80%;
    }
    /* ------------------- Similar Sections ------------------- */
    section.similar .content {
        gap: 30px 0;
    }
    section.similar .content .heading {
        font-size: 30px;
        font-weight: 800;
    }
    section.similar .content .right .paragraph {
        font-size: 16px;
    }
    section.similar .content .right .small-paragraph {
        font-size: 15px;
    }
    section.similar .content .right ul li .icon {
        width: 20px;
    }
    section.similar .content .right ul li .text {
        font-size: 16px;
        line-height: 20px;
        font-weight: 600;
    }
    /* --------------------- Subs Diaries --------------------- */
    section.subs-diary figure a {
        width: calc(50% - 40px);
    }
    /* ---------------------- Machineries ---------------------- */
    .banner-area .banner {
        width: 200%;
    }
    .banner-area h1.heading {
        font-size: 40px;
    }
    .machineries .heading {
        font-size: 30px;
    }
    .machineries .products-parent {
        gap: 20px;
    }
    .machineries .products-parent .product-box {
        width: 100%;
    }
    /* ------------------------ Footer ------------------------ */
    footer {
        padding: 30px 0;
    }
    footer .content .col {
        width: 100%;
    }
    footer .content .col .about-us .paragraph {
        width: 100%;
    }
    footer .content .col .contact-info .paragraph {
        width: 100%;
    }
}


/* less then 564px */

@media only screen and (max-width: 564px) {
    /* ------------------------ Header ------------------------ */
    header .content .left {
        flex-wrap: wrap;
        justify-content: space-around;
        flex: 1 1 auto;
        gap: 12px;
    }
    header .content .left .link {
        flex-wrap: wrap;
        gap: 0 8px;
    }
    header .content .left .link:nth-child(3) {
        justify-content: center;
        width: 100%;
    }
}