﻿/* >= 0px */
@media (max-width: 1399.98px) {
    .world-wide {
        width: 992px !important;
    }

    .simple-content,
    .bread-crumbs,
    h2 {
        margin: auto 20px;
    }

    .bespoke-form-description,
    .fit-content,
    .recaptcha-notice,
    #ContactForm {
        margin: 20px 20px;
    }

        #ContactForm h2 {
            margin: 0;
        }

    .recaptcha-notice {
        font-size: inherit;
    }

    .no-full-width {
        max-width: 80%;
    }
}

@media (max-width: 1349.98px) {
    .product-list-box {
        max-width: 1125px !important;
    }
}

@media (max-width: 1249.98px) {
    .product-list-box {
        max-width: 1050px !important;
    }

    .filter-by {
        font-size: 1.9rem;
    }

    .grid-2 {
        grid-template-columns: 60% 40%;
    }

    .contact-company-details {
        margin: 0;
        width: 100%;
    }

    .contact-form-description {
        width: 100%;
    }
}

@media (max-width: 1199.98px) {
    .world-wide {
        width: 762px !important;
    }

    .slider .button {
        right: 25px;
        bottom: 10px;
    }

    .overlay h1 {
        font-size: 3rem;
        padding: 20px;
    }

    .filter-by {
        font-size: 1.58rem;
        margin: 20px;
    }

    .product-list-search .input-select {
        font-size: 1.58rem;
        margin: 20px;
    }

    .product-list-grid-item div img {
        width: 60%;
    }

    .product-list-box .product-list-grid-item {
        grid-template-columns: repeat(2, 1fr);
        margin: 20px;
        gap: 40px;
    }

    .product-list-item {
        height:100%;
    }

        .product-list-item h2 {
            margin-bottom: 0;
        }

    .product-list-search form {
        margin: 20px;
    }
    .no-mobile {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    h2 {
        margin: 0;
    }

    .bread-crumbs ul {
        font-size: 0.8rem;
    }

    .world-wide {
        width: 575px !important;
        display: grid;
        justify-items: center;
        text-align: center;
    }

    .input-field {
        font-size: 0.95rem;
    }

    .main-menu-item a {
        font-size: 1.155rem;
    }

    .overlay h1 {
        font-size: 2rem;
        padding: 50px;
    }

    .simple-paragraph {
        display: block;
    }

        .simple-paragraph:has(img) {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            align-items: start;
        }

        .simple-paragraph img {
            width: 100%;
            height: auto;
            display: block;
        }

    .simple-paragraph {
        margin-left: 0 !important;
    }

    .search-results {
        display: block;
    }

    .product-list-item {
        height: auto;
    }

    .btn-list {
        margin-bottom: 30px;
    }

        .btn-list ul {
            display: grid;
            grid-template-columns: repeat(4,1fr);
            align-items: center;
            justify-content: center;
        }

            .btn-list ul li:first-child, .btn-list ul li {
                margin: 0;
            }

                .btn-list ul li a {
                    font-size: 0.9rem;
                }

    .icons-box {
        height: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 0;
    }

    .icon-item {
        flex: 0 0 calc(33.33% - 20px);
        margin: 10px;
    }

    .news-article-image {
        grid-template-columns: 1fr;
    }

    .news-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-2 {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contact-form form {
        margin: 0 !important;
    }

    .recaptcha-notice {
        margin: 20px 0 !important;
    }

    .enquiry-form {
        display: block;
    }

    .project-card-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .porsche-group a {
        flex: 0 0 25%;
        padding: 20px;
        text-align: center;
    }
    .search-results-box .product-list-grid-item {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767.98px) {
    .diameters-input {
        grid-template-columns: repeat(2, 1fr);
    }

    .schema-img.active {
        top: 30%;
        left: 30%;
        transform: translate(-20%, -20%);
    }

    .icon-item {
        flex: 0 0 calc(50% - 20px);
        margin: 10px;
    }

    .world-wide {
        max-width: 575px !important;
    }

    .header-box {
        grid-template-columns: 0.2fr 1fr;
    }

        .header-box > :last-child {
            grid-column: 1 / -1;
        }

    .contact-nav {
        display: flex;
        align-items: center;
        justify-content: end;
        gap: 20px;
        margin-top: 10px;
    }

        .contact-nav span {
            padding-bottom: 0
        }

    .footer-container {
        grid-template-columns: repeat(3, 1fr);
    }

        .footer-container > :last-child {
            grid-column: 1 / -1;
        }

    .footer-img {
        height: auto;
    }

    .footer-logo img {
        margin-bottom: 0;
    }

    .footer-logo {
        display: flex !important;
        flex-direction: row !important;
    }

    .content-banner {
        width: 100%;
        left: 0;
    }

    .btn-list ul li a {
        margin: auto;
    }

    .btn-list ul {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .search-results-box .product-list-grid-item {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-list-box .product-list-grid-item {
        grid-template-columns: repeat(1, 1fr);
        margin: auto;
        width: 80%;
    }

    .product-list-search form {
        display: block;
        margin: 0;
    }

    .input-field, .FilterBySize button {
        display: inline-block;
        margin-right: 20px;
    }

    .product-list-search {
        display: block;
    }

    .filter-by {
        width: auto;
    }

    .product-list-search .input-select, .product-list-search {
        width: 90%;
        margin: auto;
        display: block;
    }

    .news-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (max-width: 575.98px) {
  

    .nav-search-box {
        display: block;
        width: 100%;
        margin: auto;
    }

    .schema-img.active {
        top: 25%;
        left: 0px;
        transform: none;
    }

    .schema-img {
        width: auto;
        margin: auto auto 20px auto;
    }

    .diameters-input,
    .form-your-details {
        grid-template-columns: repeat(1, 1fr);
    }

    .icons-box {
        display: grid;
        grid-template-columns: 1fr;
        flex-wrap: wrap;
    }

    .icon-item {
        margin: 10px;
    }

    .icons-box svg, .icons-box i {
        font-size: 5rem;
        width: 5rem;
        height: 5rem;
        margin: 5px auto;
    }

    .world-wide {
        max-width: 350px !important;
    }

    .simple-paragraph {
        display: block;
    }

        .simple-paragraph img {
            width: 100%;
        }

        .simple-paragraph:has(img) {
            grid-template-columns: 1fr;
        }

    .product-list-item h2 {
        font-size: 1.6rem;
    }

        .product-list-item h2 span {
            font-size: 1rem;
            display: block;
        }

    .item-details {
        display: block;
    }

    .search-item-img-box {
        margin-top: 20px;
    }

    .footer-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .input-field {
        width: 40%;
        margin: auto;
    }

    .button-search {
        margin: 20px auto;
        width: 100%;
    }

    .contact-nav span a {
        font-size: 1.5rem;
    }

    .filter-by {
        margin: 0;
        padding-bottom: 20px;
    }

    .FilterBySize button {
        display: block;
        margin: 20px auto;
    }

    .cta-simple-box {
        padding: 0;
        display: block;
    }

    .form-footer {
        display: block;
    }

        .form-footer button {
            margin: 10px auto;
        }

    .bespoke-form-description, .fit-content {
        margin: 20px 0;
        width: auto;
    }

    .fit-content {
        font-size: 0.9rem !important;
    }

    #ContactForm h2 {
        margin: 30px 0 !important;
    }

    .project-card-grid {
        grid-template-columns: repeat(1,1fr);
    }

    .porsche-group {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
    }

        .porsche-group a {
            padding: 0;
        }
}

@media (max-width: 479.98px) {
    .nav {
        display: block;
        width: 100%;
        margin: 20px auto;
    }

    .header-box {
        grid-template-columns: 1fr;
    }

    .hamburger-btn {
        cursor: pointer;
        display: block;
        position: absolute;
        top: 10px;
        right: 20px;
    }

    .hamburger-menu {
        top: 0;
        position: fixed;
        width: 85%;
    }

    .search-bar form {
        display: block;
    }

    .input-search-bar {
        width: 100%;
        text-align: center;
    }

    .main-menu {
        width: 100%;
        margin-bottom: 10px;
        justify-content: center;
    }

        .main-menu li {
            display: inline-block;
        }

    button {
        margin-top: 20px;
    }

    .main-menu-item a {
        font-size: 1.25rem;
    }

    form button {
        width: 100%;
    }

    .contact-nav {
        justify-content: center;
        display: grid;
        margin-top: 20px;
    }

    .slider img {
        width: auto;
        height: 250px;
    }

    .overlay h1 {
        font-size: 1.455rem;
    }

    .footer-container {
        grid-template-columns: repeat(1, 1fr);
    }

    .footer-column {
        justify-content: center;
        text-align: center;
    }

    .footer-bottom {
        text-align: center;
        font-size: 0.85rem;
    }

    .btn-list ul {
        grid-template-columns: repeat(1, 1fr);
    }

    .search-results-box .product-list-grid-item {
        grid-template-columns: repeat(1, 1fr);
    }
}
