* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.pl-30 {
    padding-left: 30px !important;
}

.min-width {
    max-width: 180px !important;
}

header .nav-wrap {
    gap: 0px !important;
}

.h-100 {
    height: 100% !important;
}

.height-100 {
    height: 100% !important;
}

.font-weight-700 {
    font-weight: 700 !important;
}

header .brand {
    min-width: 180px !important;
}

.hero-form .action {
    display: flex;
    height: 53px;
    padding: 13px 17px;
    justify-content: center;
    align-items: center;
    gap: 3px;
    border-radius: 26.5px;
    background: #FB5736;
    box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.20);
    color: #fff;
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
}
.hero-form .action button{
    border: none;
    background: transparent;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
}





/* body,
html {
    height: 100%;
    background-color: #E4E5E8;
} */

:focus {
    box-shadow: none !important;
    outline: none !important;
}

.h1 {
    font-family: 'Outfit', sans-serif;
    ;
    font-weight: 700;
    font-size: 32px;
    text-align: center;
    text-transform: uppercase;
    color: #0A2463;
    margin: 30px 0;
}

.select2-container .select2-selection--single {
    height: 48px;
    width: 100%;
    border-radius: 4px;
    border: none;
    display: flex;
    align-items: center;
    background-image: url('../images/chevron-down.svg');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px 14px;
    padding-right: 30px;
}

.select2-container .select2-selection--single .select2-selection__arrow {
    display: none;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #e2edf8;
    color: #164FDA;
}

.select2-container--default .select2-results>.select2-results__options {
    font-family: 'Outfit';
    font-size: 14px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #0A2463;
    border-radius: 6px;
    font-family: 'Outfit';
    font-size: 14px;
    color: #0A2463
}

.select2-dropdown {
    border: 1px solid #0A2463;
}

.select2-search--dropdown {
    padding: 10px;
}

.select2-results__option {
    padding: 10px;
    user-select: none;
    -webkit-user-select: none;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #0A2463;
}

.select2-search--dropdown .select2-search__field {
    padding: 6px;
}

.select2-container--open .select2-dropdown {
    left: -1px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #0A2463;
}

.custom-dropdown.select2-dropdown {
    width: 114px !important;
}

.custom-dropdown-brands.select2-dropdown {
    width: 232px !important;
}

.custom-dropdown-brandTypes.select2-dropdown {
    width: 242px !important;
}

.column {
    width: 112px;
}

.column.brands {
    width: 230px
}

.column label {
    font-family: Outfit;
    font-weight: 700;
    font-size: 16px;
    line-height: 100%;
    margin-bottom: 2px;
}

.column.brandTypes {
    width: 240px
}

.tyre-search-bar {
    background-image: url('../images/bg-tyres-searchbar.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 25px 0 30px;
    color: white;
    font-family: 'Outfit', sans-serif;
}

.tyre-search-bar .container {
    max-width: 870px;
    margin: 0 auto;
    padding: 0;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 12px;
}

.form-col {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-grow: 1;
}

.form-row:not(.bottom-row) {
    align-items: end;
}

.form-row select {
    background: white;
    color: #0A2463;
    font-weight: 600;
    border-radius: 8px;
    padding: 10px 16px;
    border: none;
    font-size: 16px;
    width: 114px;
    height: 48px;
}

.season-row {
    display: flex;
    gap: 28px;
    align-items: center;
    font-size: 16px;
}

.season-row .form-check-input {
    appearance: none;
    -webkit-appearance: none;
    border-radius: 2px;
    width: 16px;
    height: 16px;
    background: transparent;
    border: 2px solid white;
    position: relative;
    cursor: pointer;
}

.season-row .form-check-input:checked {
    background-color: white;
    border-color: white;
}

.season-row .form-check-input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 0px;
    left: 3px;
    width: 6px;
    height: 11px;
    border: solid #0A2463;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

.season-row label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 4px;
    color: white;
    font-weight: 400;
    font-size: 16px;
}

.season-row img {
    height: 24px;
}

.bottom-row {
    display: flex;
    gap: 15px;
    margin-bottom: 0;
}

.search-btn {
    position: relative;
    background-color: #164FDA;
    border: none;
    border-radius: 4px;
    color: white;
    min-width: 230px;
    padding: 0 32px 0 60px;
    height: 48px;
    cursor: pointer;
    display: flex;
    gap: 34px;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
    font-family: Lato;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.9px;
}

.category-search {
    padding: 35px 20px;
    text-align: center;
}

.category-search .container {
    max-width: 1240px;
    padding: 0;
}

.section-title {
    color: #0A2463;
    margin-bottom: 25px;
    font-family: Outfit;
    font-weight: 700;
    font-size: 32px;
    line-height: 100%;
    text-align: center;
    text-transform: uppercase;
}

.category-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
}

.category-card {
    background-color: white;
    color: #0A2463;
    font-weight: 700;
    font-family: Outfit;
    font-size: 16px;
    width: 161px;
    height: 109px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    text-decoration: none;
    border-radius: 5px;
}

.category-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.workshopdata-banner {
    padding: 0 0 35px;
}

.workshopdata-banner .container {
    max-width: 1240px;
    background: linear-gradient(99.76deg, #1F317A 57.6%, #152151 102.97%);
    padding: 15px;
}

.banner-content {
    display: flex;
    align-items: center;
    gap: 13px;
    flex-wrap: wrap;
}

.banner-image img {
    max-width: 253px;
    height: auto;
    display: block;
}

.banner-text {
    color: white;
    flex: 1;
}

.banner-text h2 {
    font-family: Outfit;
    font-weight: 400;
    font-size: 19px;
    line-height: 130%;
    margin-bottom: 15px;
}

.banner-text p {
    font-family: Outfit;
    font-weight: 400;
    font-size: 16px;
    line-height: 135%;
    margin-bottom: 15px;
    width: 916px;
}

.green-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #56BA48;
    color: white;
    width: 291px;
    height: 40px;
    border-radius: 4px;
    text-decoration: none;
    font-family: Lato;
    font-weight: 700;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0.7px;
    gap: 8px;
    transition: background-color 0.3s ease;
}

.green-button:hover {
    background-color: #4cb132;
}

.green-button .arrow {
    margin-left: 10px;
    font-size: 20px;
}

.brand-section {
    text-align: center;
}

.brand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 20px;
    max-width: 1240px;
    margin: 0 auto;
}

.brand-card {
    background-color: #F2F2F4;
    width: 190px;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    padding: 0 20px;
    text-decoration: none;
    transition: transform 0.2s ease;
    border-radius: 5px;
}

@media (max-width: 600px) {
    .brand-card {
        width: unset;
    }
}

.brand-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.brand-card img {
    height: 50px;
    width: auto;
    max-width: 95%;
    mix-blend-mode: multiply;
    display: flex;
    align-items: center;
}

.brand-card p {
    color: #0A2463;
    font-family: Outfit;
    font-weight: 700;
    font-size: 16px;
    line-height: 100%;
}

.brand-btn-wrapper {
    margin-top: 30px;
}

.brand-button {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    background-color: #164FDA;
    color: white;
    width: 312px;
    height: 48px;
    border-radius: 4px;
    text-decoration: none;
    font-family: Lato;
    font-weight: 700;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0.7px;
    transition: background-color 0.3s ease;
}

.faq-section {
    padding: 35px 0;
}

@media (max-width: 600px) {
    .faq-section {
        padding: 5px 0;
    }
}

.faq-section .accordion {
    max-width: 1240px;
    background-color: #F2F2F4;
    padding: 30px 50px 30px;
    border-radius: 10px;
    margin: 0 auto;
}

.accordion-item {
    color: #1f2f45;
    background-color: transparent;
}

.accordion-body {
    font-family: Outfit;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    padding-top: 5px;
    color: #395561;
}

.accordion-button {
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
    font-family: Outfit;
    font-weight: 600;
    font-size: 20px;
    line-height: 20px;
    color: #395561;
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-button:not(.collapsed) {
    background-color: transparent;
    color: #395561;
    box-shadow: none;
}

.accordion-button::after {
    content: url('../images/plus-sign.svg');
    background-image: none;
}

.accordion-button:not(.collapsed)::after {
    content: url('../images/minus-sign.svg');
    background-image: none;
    /* margin-right: -20px;
    margin-top: 15px; */
    transform: none !important;
}

.breadcrumb {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0.5px;
    color: #677198;
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 30px
}

.breadcrumb a {
    color: #0A2463;
    text-decoration: none;
}

.results-container {
    width: 1240px;
    padding: 30px 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin: 0 auto;
}

.filter-bar {
    width: 294px;
    border-radius: 8px;
    background: #FBFBFB;
    padding: 16px;
}

.filter-bar .filter {
    margin-bottom: 15px;
}

.filter-bar .filter-type {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.filter-bar .filter-type-name {
    color: #0A2463;
    font-family: 'Outfit', sans-serif;
    font-size: 19px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.filter-bar .icon {
    color: #0A2463;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.filter-bar .filter-options {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 0;
    color: #0A2463;
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.filter-bar .filter-options.has-scroll {
    max-height: 110px;
    overflow-y: auto;
}

.filter-bar .filter-options::-webkit-scrollbar {
    width: 4px;
}

.filter-bar .filter-options::-webkit-scrollbar-track {
    background-color: #D9D9D9;
    border-radius: 8px;
}

.filter-bar .filter-options::-webkit-scrollbar-thumb {
    background-color: #0A2463;
    border-radius: 8px;
}

.filter-bar .filter-options li:not(:last-child) {
    margin-bottom: 10px;
}

.filter-bar .filter-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #0A2463;
    text-overflow: ellipsis;
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.filter-bar .checkbox-wrapper.disabled span {
    cursor: not-allowed !important;
    color: #C6C7CF;
}

.filter-bar .filter-option span:first-child {
    display: -webkit-box;
    width: 175px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.filter-bar .filter-option span:last-child {
    margin-right: 10px;
}

.filter-bar .brand-search {
    display: flex;
    width: 262px;
    height: 38px;
    padding: 10px 16px;
    align-items: center;
    align-content: center;
    border-radius: 4px;
    border: 1px solid #0A2463;
    margin-bottom: 16px;
    color: #727690;
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 130%;
    background: transparent;
}

.filter-bar .brand-filter {
    position: relative;
}

.filter-bar .brand-filter .icon {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 16px;
    height: 16px;
    color: #727690
}

.checkbox-wrapper .control {
    display: block;
    position: relative;
    padding-left: 27px;
    cursor: pointer;
}

.checkbox-wrapper.disabled .control {
    cursor: not-allowed;
}

.checkbox-wrapper .control input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.checkbox-wrapper .control__indicator {
    position: absolute;
    top: 2px;
    left: 0;
    height: 16px;
    width: 16px;
    border: 1px solid #0A2463;
    border-radius: 2px;
}

.checkbox-wrapper.disabled .control__indicator,
.checkbox-wrapper.disabled .control input:checked~.control__indicator {
    border: 1px solid #C6C7CF;
    cursor: not-allowed;
}

.checkbox-wrapper .control input:checked~.control__indicator {
    background: #0A2463
}

.checkbox-wrapper .control:hover input:not([disabled]):checked~.control__indicator,
.checkbox-wrapper .control input:not([disabled]):checked:focus~.control__indicator {
    background: #0A2463
}

.checkbox-wrapper .control input:disabled~.control__indicator {
    background: #e6e6e6;
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
}

.checkbox-wrapper .control__indicator:after {
    content: '';
    position: absolute;
    display: none;
}

.checkbox-wrapper .control input:checked~.control__indicator:after {
    display: block;
}

.checkbox-wrapper .control--checkbox .control__indicator:after {
    left: 6px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-wrapper .control input:disabled~.control__indicator {
    border-color: #C6C7CF !important;
    background: transparent;
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
}

.qty {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    margin-bottom: 16px;
}

.qty .qty-selector {
    width: 32px;
    height: 32px;
    font-size: 20px;
    background: transparent;
    color: #0A2463;
    border: 0 solid #0A2463;
    cursor: pointer;
    border: 1px solid #0A2463;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qty .qty-selector:hover {
    background: #dadada;
    color: #555555;
}

.qty .qty-selector:first-child {
    border-radius: 4px 0 0 4px;
}

.qty .qty-selector:last-child {
    border-radius: 0 3px 3px 0;
}

.qty .qty-input {
    width: 198px;
    height: 32px;
    text-align: center;
    border-color: #0A2463;
    border-width: 1px 0 1px 0;
    color: #727690;
    font-family: "Outfit", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    background: transparent;
}

.qty .iconMinus {
    width: 12px;
    height: 14px;
}

.qty .iconPlus {
    width: 13px;
    height: 13px;
}

.product-list {
    width: 925px;
}

.product-card {
    width: 100%;
    border-radius: 8px;
    background: #FBFBFB;
    padding: 15px 20px 15px 0;
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 10px;
}

.product-card .icons img {
    max-height: 24px;
}

.product-card .product-img-desc {
    display: flex;
    gap: 30px;
}

.product-card .product-image {
    width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    justify-content: space-between;
}

.product-image img {
    mix-blend-mode: multiply;
}

.product-image .img-container {
    max-width: 85px;
    max-height: 89px;
    position: relative;
    display: flex;
}

.product-image .img-container.spareparts {
    max-width: 140px;
    max-height: 100px;
}

.product-image .brand-container {
    max-height: 40px;
    max-width: 100px;
    position: relative;
    display: flex;
}

.product-image .brand-container img,
.product-image .img-container img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.product-card-desc {
    width: 470px;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.product-card-desc .name {
    width: 100%;
    color: #0A2463;
    font-family: "Outfit", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-top: -3px;
    text-decoration: none !important;
    margin-bottom: 0;
}

.product-card-desc .product-description {
    color: #0A2463;
    font-family: "Outfit", sans-serif;
    font-size: 16px !important;
    font-style: normal;
    font-weight: 500 !important;
    line-height: normal;
    text-transform: uppercase;
}

.product-card-desc .product-ref {
    color: #0A2463;
    font-family: "Outfit", sans-serif;
    font-size: 20px !important;
    font-style: normal;
    font-weight: 500 !important;
    line-height: normal;
}

.product-card-desc img {
    max-height: 24px;
}

.filter-by,
.filter-by:hover,
.filter-by:focus,
.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
    display: flex;
    /* width: 140px; */
    height: 32px;
    padding: 0px 16px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 4px;
    background: #164FDA;
    color: #F2F2F4;
    font-family: "Outfit", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.6px;
}

.filter-by .icon {
    width: 14px;
    height: 16px;
}

.filter-list {
    width: 100%;
    border-radius: 8px;
    background: #FBFBFB;
    padding: 9px 16px 16px;
    margin-bottom: 10px;
    display: block;
}

.filter-list.hidden {
    display: none !important;
}

.filter-list .title {
    font-family: "Outfit", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-right: 5px;
    color: #0A2463;
}

.filter-list .filter {
    width: fit-content;
    height: 30px;
    display: inline-block;
    white-space: nowrap;
    align-content: center;
    padding: 0 8px;
    border-radius: 4px;
    border: 1px solid #164FDA;
    color: #164FDA;
    font-family: "Outfit", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.6px;
    margin-right: 9px;
    margin-top: 10px;
}

.filter-list .filter span {
    font-weight: 700;
}

.filter-list .filter.delete-all {
    border-color: #FB5736;
    color: #FB5736;
    cursor: pointer;
}

.filter-list .filter .icon {
    width: 14px;
    height: 14px;
    margin-left: 5px;
    color: #FB5736;
    cursor: pointer;
}

.product-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 11px;
    background: #FBFBFB;
    padding: 5px 20px;
    border-radius: 8px;
}

.total-number {
    color: #0A2463;
    font-family: "Outfit", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.total-number strong {
    font-weight: 700;
}

.dropdown-toggle::after {
    display: none;
}

.dropdown-menu {
    width: 200px;
    height: 76px;
    flex-shrink: 0;
    background: #f2f2f4 !important;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .25);
    border-radius: 0;
    font-family: "Outfit"
}

.dropdown-item {
    color: #727690;
    font-size: 13px;
    font-style: normal;
    font-weight: 300;
    line-height: 130%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dropdown-item:focus,
.dropdown-item:hover,
.dropdown-item.active,
.dropdown-item:active {
    color: #727690;
    background-color: rgba(52, 152, 255, .1) !important;
}

.quality {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 98px;
    width: fit-content;
    padding: 0 5px;
    height: 22px;
    border-radius: 4px;
    color: #FFF;
    font-family: "Outfit", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: capitalize;
}

.quality.premium {
    background: #E1A200 !important;
}

.quality.budget {
    background: #7587FF !important;
}

.quality.budget\+,
.quality.budgetPlus,
.quality.budgetplus {
    background: #625DA1 !important;
}

.quality.quality {
    background: #E1671F;
}

.quality.rechape {
    background: #43984E;
}

.quality.quality-premium {
    border-color: #e1a200;
    background: #e1a200;
}

.quality.quality-quality {
    border-color: #e1671f;
    background: #e1671f;
}

.quality.quality-budget+ {
    border-color: #4159d9;
    background: #4159d9;
}

.quality.quality-budget {
    border-color: #7587ff;
    background: #7587ff;
}

.quality.quality-rechape {
    border-color: #43984e;
    background: #43984e;
}

.livraison {
    height: 24px;
    border-radius: 4px;
    border: 1px solid #FB5736;
    display: flex;
    align-items: center;
    padding: 0 8px;
    color: #FB5736;
    font-family: "Outfit", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.3px;
    white-space: nowrap;
    gap: 10px;
}

.livraison .icon {
    width: 20px;
    height: 16px;
}

.offres {
    height: 24px;
    border-radius: 4px;
    border: 1px solid #164FDA;
    display: flex;
    align-items: center;
    padding: 0 8px;
    color: #164FDA;
    font-family: "Outfit", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.3px;
    white-space: nowrap;
    gap: 20px
}

.offres .icon {
    width: 16px;
    height: 16px;
}

.form-switch .form-check-input {
    width: 42px;
    height: 23px;
    border-radius: 5px;
    background-color: #b6b7b8;
    border: 1px solid #b6b7b8;
    transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
    background-image: none !important;
    appearance: none;
    position: relative;
}

.form-switch .form-check-input::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    border-radius: 2px;
    height: 17px;
    width: 17px;
    background-color: white;
    transition: transform 0.3s ease-in-out;
}

.form-switch .form-check-input:checked::before {
    transform: translateX(1.2rem);
}

.form-switch .form-check-input:checked {
    background-color: #4caf50 !important;
    border-color: #4caf50 !important;
}

.form-switch .form-check-label {
    font-family: "Outfit", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #0a2463;
    letter-spacing: 0.6px;
    padding-left: 10px;
}

.arrow-label {
    width: 26px;
    height: 18px;
    background-color: #35525C;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    font-family: "Inter", sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 5px;
    clip-path: polygon(8px 0%, 100% 0%, 100% 100%, 8px 100%, 0% 50%);
}

.arrow-label.B {
    background-color: #015CA6;
}

.arrow-label.C {
    background-color: #9CCA3D;
}

.specificityTag {
    display: flex;
    height: 16px;
    padding: 0 5px;
    justify-content: center;
    align-items: center;
    background: #677198;
    border-radius: 4px;
    color: #FFF;
    font-family: "Outfit", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
    white-space: nowrap;
}

.w-194 {
    width: 194px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-family: "Outfit", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: 0%;
    color: #0a2463;
}

.w-194 .btn {
    width: 100%;
    height: 48px;
    border-radius: 4px;
    gap: 10px;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.5px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.w-194 .btn:first-of-type {
    background-color: #0A2463;
}

.w-194 .btn:last-of-type {
    background-color: #164FDA;
}

.pagination {
    margin: 20px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: 0 10px;
    height: 32px;
    margin-right: 8px;
    text-decoration: none;
    border-radius: 4px;
    border: 1px solid #C6C7CF;
    color: #727690;
    font-family: "Outfit", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    background-color: transparent;
}

.page-item.active .page-link,
.page-link:hover,
.page-item .page-link:hover .icon {
    background: #164FDA;
    font-weight: 700;
    color: #F2F2F4;
    cursor: pointer;
}

.pagination .icon {
    width: 16px;
    height: 16px;
    color: #0A2463
}

.breadcrumbs-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1240px;
    margin: 0 auto;
    padding-top: 30px;
}

.breadcrumbs-container .breadcrumb {
    max-width: unset;
    margin: unset;
    padding: unset;
}

.backToSearch,
.backToSearch:hover {
    position: relative;
    display: flex;
    width: fit-content;
    min-width: 188px;
    height: 36px;
    padding: 0 16px;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: 1px solid #164FDA;
    color: #164FDA;
    font-family: var(--font-outfit);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.6px;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.backToSearch .icon {
    margin-right: 10px;
}

.backToSearch.brand .icon {
    margin-right: unset;
    position: absolute;
    left: 15px;
}

.product-info-container {
    width: 1240px;
    margin: 20px auto;
}

.product-card.info {
    padding: 30px 40px;
}

.product-info-image-desc {
    display: flex;
    gap: 55px;
}

.product-info-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 207px;
    justify-content: space-between;
    /* gap: 25px */
}

.product-info-image .brand-container {
    max-width: 150px;
    max-height: 70px;
    display: flex;
    min-height: 70px;
    padding: 8px 0;
}

.product-info-image .brand-container img,
.product-info-image .img-container img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.product-info-image .img-container,
.product-info-image .img-container a.image_preview {
    width: 197px;
    max-height: 197px;
    display: flex;
}

.product-card-desc.info {
    width: 647px;
}

.product-card-desc .name.info {
    font-size: 32px;
    line-height: 110%;
    margin-top: 0;
}

.product-card-desc .product-description.info {
    font-size: 24px !important;
    line-height: 110%;
}

.specs {
    max-height: 156px;
    overflow-y: auto;
}

.specs.search {
    max-height: 95px;
}

.specs::-webkit-scrollbar {
    width: 5px;
}

.specs::-webkit-scrollbar-track {
    background-color: #D9D9D9;
    border-radius: 8px;
}

.specs::-webkit-scrollbar-thumb {
    background-color: #0A2463;
    border-radius: 8px;
}

.product-card .specs .row {
    width: 100%;
    min-height: 32px;
    border-bottom: 1px solid #A1A4B3;
    color: #677198;
    font-family: "Outfit", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: flex;
    align-items: center;
    margin-left: 0;
}

.product-card .specs .row:last-child {
    border: 0;
}

.product-card .specs .row * {
    width: unset;
    padding-right: unset;
    padding-left: 0;
}

.product-card .specs .row strong {
    font-weight: 700;
}

.connect-text {
    padding-top: 10px;
    border-top: 1px solid rgba(10, 36, 99, 0.1);
    width: 100%;
    margin: 10px auto 0;
    text-align: center;
}

.key-benefits {
    padding: 20px 0 30px;
    width: 1240px;
    margin: 0 auto;
}

.key-benefits-card {
    background-color: #fbfbfb;
    border-radius: 12px;
    padding: 25px 40px;
    font-family: "Outfit", sans-serif;
}

.key-benefits-title {
    font-family: Outfit;
    font-weight: 600;
    font-size: 20px;
    line-height: 26px;
    color: #395561;
    margin-bottom: 16px;
}

.key-benefits-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 32px;
    border-top: 1px solid rgba(10, 36, 99, 0.1);
    padding-top: 20px;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 30%;
    max-width: 30%;
    color: #395561;
}

.benefit-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.benefit-item p {
    margin: 0;
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    max-width: 267px;
}

.faq-section.info {
    padding: 0;
}

.faq-section.info .accordion {
    background-color: #FBFBFB;
    padding: 25px 50px 25px 20px;
}

.faq-section.info .title {
    font-family: Outfit;
    font-weight: 600;
    font-size: 20px;
    line-height: 26px;
    color: #395561;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(10, 36, 99, 0.1);
    padding-bottom: 20px;
    margin-left: 20px;
}

.labeling-section {
    padding: 10px 0;
    width: 1240px;
    margin: 0 auto;
}

.labeling-card {
    background-color: #fbfbfb;
    border-radius: 12px;
    padding: 25px 40px;
    font-family: "Outfit", sans-serif;
}

.labeling-title {
    font-family: Outfit;
    font-weight: 600;
    font-size: 20px;
    line-height: 26px;
    color: #395561;
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(10, 36, 99, 0.1);
    padding-bottom: 20px;
}

.labeling-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.labeling-item {
    flex: 1 1 30%;
    min-width: 280px;
    max-width: 100%;
}

.labeling-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: #0a2463;
    font-weight: 600;
}

.labeling-icon {
    width: 15px;
    height: 17px;
    flex-shrink: 0;
}

.labeling-label {
    font-family: Outfit;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: #395561;
}

.labeling-description {
    color: #2a3e52;
    font-family: Outfit;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    margin: 0;
}

.selected-products-section {
    padding: 10px 30px 30px 30px;
}

.selected-products-section .selected-products-wrapper {
    position: relative;
    width: 1240px;
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

.selected-products-section .selected-products-swiper {
    max-width: 1240px;
    position: relative;
    margin: 0 auto;
}

.selected-products-section .section-title {
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 32px;
    text-transform: uppercase;
    color: #0a2463;
    margin-bottom: 20px;
}

.selected-products-section .product-card {
    background: white;
    border-radius: 10px;
    padding: 20px 16px;
    height: 100%;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
    width: 295px !important;
    display: flex;
    flex-direction: column;
}

.selected-products-section .product-info-image {
    gap: 20px
}

.selected-products-section .product-info-image .img-container {
    width: 172px;
    height: 172px;
    max-height: 172px;
    display: flex;
}

.selected-products-section .product-info-image .quality {
    margin-top: -10px;
}

.selected-products-section .product-title {
    font-family: Outfit, sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #0A2463;
    margin-top: 20px;
    margin-bottom: 15px;
    max-width: 260px;
    min-height: 60px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}

.selected-products-section .product-title a {
    color: #0A2463;
    text-decoration: none !important;
}

.selected-products-section .icons {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;

    img {
        max-height: 20px;
    }
}

.selected-products-section .product-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #164FDA;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0.6px;
    width: 100%;
    height: 48px;
}

.swiper-button-prev.custom-prev,
.swiper-button-next.custom-next {
    width: 36px;
    height: 36px;
    background: transparent;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.swiper-button-prev.custom-prev {
    left: -60px;
}

.swiper-button-next.custom-next {
    right: -60px;
}

.swiper-button-prev.custom-prev img,
.swiper-button-next.custom-next img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.swiper-button-prev:after,
.swiper-button-next:after {
    content: '';
}

.brand-card-section {
    width: 1240px;
    height: 70px;
    border-radius: 8px;
    padding: 0 10px;
    background-color: #FBFBFB;
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 30px auto 0;
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 32px;
    text-transform: uppercase;
    color: #0A2463;
}

.brand-card-section .brand-container {
    width: 250px;
    height: 30px;
    display: flex;
}

.brand-card-section .brand-container img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.tyre-slider-section {
    padding: 0 0 30px;
    text-align: center;
}

.tyre-slider-section .slider-title {
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 32px;
    text-transform: uppercase;
    color: #0A2463;
    margin-bottom: 20px;
}

.tyre-slider-section .tyre-swiper-wrapper {
    position: relative;
    width: 1240px;
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

.tyre-slider-section .tyre-swiper {
    max-width: 1240px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
}

.tyre-slider-section .swiper-wrapper {
    display: flex;
}

.tyre-swiper .swiper-slide {
    background: #FBFBFB;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 190px;
    width: 190px;
    flex-shrink: 0;
}

.tyre-swiper .swiper-slide img {
    height: 28px;
    width: auto;
    object-fit: contain;
    margin-bottom: 38px;
}

.tyre-swiper .swiper-slide p {
    margin: 0;
    color: #0A2463;
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
}

.tyre-profile-section {
    text-align: center;
}

.tyre-profile-section .section-subtitle {
    font-size: 25px;
    font-weight: 700;
    color: #0a2463;
    font-family: "Outfit", sans-serif;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.tyre-profile-section .profile-grid {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 1240px;
    margin: 0 auto 15px auto;
}

.tyre-profile-section .profile-grid ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    min-width: 155px;
}

.tyre-profile-section .profile-grid .profil-item {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    column-gap: 10px;
}


.tyre-profile-section .profile-grid li,
.tyre-profile-section .profile-grid li a {
    font-family: "Outfit", sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #0a2463;
    text-decoration: none;
    flex-basis: 18%;
}

@media(max-width:1040px) {

    .tyre-profile-section .profile-grid li,
    .tyre-profile-section .profile-grid li a {
        flex-basis: 30%;
    }
}

@media(max-width:767px) {

    .tyre-profile-section .profile-grid li,
    .tyre-profile-section .profile-grid li a {
        flex-basis: 45%;
    }
}

.tyre-profile-section .see-more-btn {
    background-color: #164FDA;
    width: 312px;
    height: 48px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    letter-spacing: 0.5px;
    cursor: pointer;
}

.video-section {
    background-color: #e6e8ec;
    padding: 20px 0 40px;
    display: flex;
    justify-content: center;
}

.video-wrapper {
    width: 1240px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.video-poster {
    position: relative;
    cursor: pointer;
}

.video-poster img {
    width: 100%;
    display: block;
    border-radius: 10px;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: none;
    background-color: transparent;
}

.brand-section {
    padding-top: 30px;
}

@media (max-width: 768px) {
    .brand-section {
        padding: 30px 15px 0;
    }
}

.brand-section .section-subtitle {
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 28px;
    text-align: center;
    text-transform: uppercase;
    color: #0A2463;
    margin: 40px 0 30px;
}

.brand-section .brand-grid.budget .brand-card {
    height: 109px;
}

.brand-section .brand-grid.budget .brand-card p {
    margin: 0;
}

.dimension-search {
    background-color: #fff;
    padding: 20px 40px;
    border-radius: 12px;
    max-width: 1240px;
    margin: 0px auto 30px;
}

.dimension-title {
    font-family: "Outfit", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 26px;
    color: #395561;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #F2F4F5
}

.dimension-form {
    display: flex;
    justify-content: space-between;
    align-items: end;
    flex-wrap: wrap;
}

.dimension-search .form-group {
    display: flex;
    flex-direction: column;
    width: 142px;
}

.dimension-search .form-group label {
    margin-bottom: 3px;
    font-size: 16px;
    color: #0A2463;
    font-weight: 300;
    font-family: 'Outfit', sans-serif;
}

.dimension-search .button-group {
    display: flex;
    align-items: flex-end;
    padding-top: 22px;
}

.dimension-search .select2-container {
    width: 100% !important;
    max-width: 142px;
}

.dimension-search .select2-selection {
    border: 2px solid #a4b2c2 !important;
    border-radius: 6px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 10px !important;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
}

.select2-dropdown.dimension-dropdown {
    border: 2px solid #a4b2c2;
    border-top: 0;
    margin-top: -4px;
    margin-left: 1px;
    border-radius: 0 0 6px 6px;
}

.dimension-search .select2-selection__arrow {
    top: 7px !important;
    right: 10px !important;
}

.dimension-search .search-button {
    width: 198px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #164FDA;
    color: white;
    border: none;
    border-radius: 6px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 16px;
    gap: 15px;
    cursor: pointer;
}

.tyre-list-section {
    padding: 0 0 30px;
    width: 1240px;
    margin: 0 auto;
}

.tyre-list-container {
    background: #fff;
    border-radius: 8px;
    padding: 20px 40px;
}

.tyre-list-container .tyre-profile-title {
    font-family: "Outfit", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 26px;
    padding-bottom: 20px;
    border-bottom: 1px solid #F2F4F5;
    margin-bottom: 20px;
    color: #395561;
}

.tyre-list-container .tyre-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px solid #F2F4F5;
    margin-bottom: 20px;
}

.tyre-list-container .tyre-brand img,
.tyre-list-container .tyre-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.tyre-list-container .tyre-brand {
    width: 142px;
    height: auto;
}

.tyre-list-container .tyre-image {
    width: 120px;
    height: auto;
}

.tyre-list-container .tyre-details {
    width: 538px;
}

.tyre-list-container .tyre-dimension {
    font-family: Outfit;
    font-weight: 700;
    font-size: 24px;
    line-height: 115%;
    color: #0A2463;
    text-decoration: none;
}

.tyre-list-container .tyre-name {
    font-family: Outfit;
    font-weight: 500;
    font-size: 20px;
    margin-bottom: 5px;
    line-height: 115%;
    color: #0A2463
}

.tyre-list-container .tyre-cta {
    min-width: 198px;
    height: 48px;
    background: #164FDA;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 32px 0 50px;
    gap: 25px;
    text-decoration: none;
}

.product-list .equivalent {
    background: linear-gradient(99.76deg, #1F317A 57.6%, #152151 102.97%);
    border-radius: 4px;
    width: 100%;
    height: 57px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "Outfit", sans-serif;
    font-weight: 400;
    font-size: 20px;
    color: #fff;
    padding: 0 10px;
    margin-bottom: 10px;
}

.product-list .equivalent strong {
    font-weight: 600;
}

.filter-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.filter-wrapper h2 {
    margin: 0;
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #0A2463;
    white-space: nowrap;
}

.filter-slider {
    position: relative;
    flex: 1;
    overflow: hidden;
}

.filter-swiper {
    width: 666px;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
}

.filter-swiper .swiper-wrapper {
    display: flex;
    align-items: center;
    width: auto;
}

.filter-swiper .swiper-slide {
    width: auto !important;
    flex-shrink: 0;
}

.filter-wrapper .swiper-slide button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 17px;
    background: transparent;
    color: #164FDA;
    border: 1px solid #164FDA;
    border-radius: 4px;
    font-family: "Outfit", sans-serif;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.3px;
    cursor: pointer;
    white-space: nowrap;
}

.filter-wrapper .custom-next {
    position: absolute;
    background-color: #164FDA;
    color: white;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    right: 0;
    top: 61%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: none !important;
}

.filter-wrapper .custom-next i {
    font-size: 16px;
    color: white;
}

.product-image-gallery {
    width: 100%;
}

.main-swiper {
    width: 100%;
    margin-bottom: 20px;
}

.main-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.thumb-swiper {
    height: 40px;
    box-sizing: border-box;
}

.thumb-swiper .swiper-slide {
    height: 100%;
    opacity: 0.4;
    cursor: pointer;
}

.thumb-swiper .swiper-slide-thumb-active {
    opacity: 1;
}

.thumb-swiper .swiper-slide img {
    height: 100%;
    object-fit: contain;
    padding: 2px;
    border: 1px solid #ccc;
}

.thumb-swiper-wrapper {
    position: relative;
    padding: 0 30px;
    /* space for arrows */
}

.thumb-swiper-wrapper .custom-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    cursor: pointer;
    width: 20px;
    height: 20px;
    background: #164FDA;
    border-radius: 50%;
}

.thumb-swiper-wrapper .custom-arrow i {
    color: white;
    font-size: 12px;
}

.thumb-swiper-wrapper .thumb-prev {
    left: 0;
    top: 100%;
}

.thumb-swiper-wrapper .thumb-next {
    right: 0;
    top: 100%;
}

.main-swiper-wrapper {
    position: relative;
}

/* .zoom-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.zoom-overlay img {
    width: 40px;
    height: 40px;
}

.main-swiper-wrapper:hover .zoom-overlay {
    opacity: 1;
}

.img-container:hover .zoom-overlay {
    opacity: 1;
} */

.compatibility-container {
    background: #fff;
    padding: 20px 30px;
    border-radius: 10px;
    max-width: 1240px;
    margin: 0px auto 20px;
}

.compatibility-container h2 {
    font-family: Outfit;
    font-weight: 600;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: 0%;
    color: #395561;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #F2F4F5;
}

.compatibility-container .brand-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.compatibility-container .brand-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 20px;
    border: 1px solid #004047;
    border-radius: 10px;
    background: #fff;
    color: #004047;
    cursor: pointer;
    transition: 0.3s;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
}

.compatibility-container .brand-btn.selected {
    border-width: 2px;
    font-weight: 700;
}

.compatibility-container .brand-btn img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: grayscale(100%);
}

.compatibility-container .brand-btn.selected img {
    filter: none;
}

.compatibility-container .model-list {
    max-height: 200px;
    overflow-y: auto;
    padding-right: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.model-list::-webkit-scrollbar {
    width: 6px;
}

.model-list::-webkit-scrollbar-thumb {
    background: #0A2463;
    border-radius: 3px;
}

.model-list::-webkit-scrollbar-track {
    background: #D9D9D9;
    border-radius: 10px;
}

.model {
    background: #fff;
    padding: 8px 15px;
    border-radius: 6px;
    font-family: Roboto;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #395561;
}

.model.highlighted {
    background: #F8F8F8;
    font-weight: 600;
}

.hero-section-static {
    height: 318px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* .hero-section-static.histoire {
    background: url('../images/truck-bg.jpg') center 100%/cover no-repeat;
}

.hero-section-static.espace-fournisseurs {
    background: url('../images/espace-frs.jpg') center 100%/cover no-repeat;
}

.hero-section-static.contact {
    background: url('../images/contact.jpg') center 100%/cover no-repeat;
}

.hero-section-static.cgv {
    background: url('../images/cgv.png') center 100%/cover no-repeat;
} */

@media (min-width: 1201px) {
    .hero-section-static.testimonials {
        height: 585px;
    }

    .hero-section-static.testimonials .text-testimonials {
        padding-bottom: 200px !important;
    }

    .avis-section {
        margin-top: -100px !important;
    }
}

@media (max-width: 1200px) {
    .hero-section-static.testimonials {
        height: 500px;
    }
}

.hero-section-static.testimonials {
    width: 100%;
    background: url(../images/block_avis.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
    position: relative;
}

.hero-section-static.testimonials .container {
    max-width: 1240px;
    padding: 0;
}

.hero-section-static h1 {
    color: #fff;
    letter-spacing: 1px;
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 100%;
    text-transform: uppercase;
}

.hero-section-static.testimonials .title-hero {
    font-weight: 900;
    font-size: 60px;
    text-align: left;
    color: #fff;
    position: unset !important;

}

.hero-section-static.testimonials .title-hero span {
    letter-spacing: 5px;
}



.hero-section-static.testimonials .text-testimonials {
    text-align: left;
    padding-bottom: 20px;
    padding-left: 0px;
}

.hero-section-static.testimonials .number {
    font-weight: 900;
    font-size: 68px;
    color: #fb5736;
    line-height: 100%;
    position: relative;
    display: inline-block;

}

.hero-section-static.testimonials .number::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, transparent, #fff, transparent);
    border-radius: 50%;
}



.hero-section-static.testimonials .text {
    display: flex;
    flex-direction: column;

}

.hero-section-static.testimonials .text span {
    color: #fff;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: 1px;

}

.hero-section-static.testimonials .text .big {
    font-size: 40px;

}

.hero-section-static.testimonials .text .medium {
    font-size: 38px;

}

.hero-section-static.testimonials .text .small {
    font-size: 29px;
    position: relative;
    width: fit-content;

}

.hero-section-static.testimonials .text .small::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, transparent, #fff, transparent);
    border-radius: 50%;
}

@media(max-width:1200px) {
    .hero-section-static.testimonials {
        height: 500px;
    }


    .hero-section-static.testimonials .title-hero {
        font-size: 34px;
    }

    .hero-section-static.testimonials .title-hero span {
        letter-spacing: 3.5px;
    }

    .hero-section-static.testimonials .text-testimonials {
        padding-bottom: 80px;
        padding-left: 60px;
    }

    .hero-section-static.testimonials .text span {
        line-height: 30px;
        letter-spacing: 0px;
    }

    .hero-section-static.testimonials .number {
        font-size: 38px;


    }

    .hero-section-static.testimonials .text .big {
        font-size: 24px;

    }

    .hero-section-static.testimonials .text .medium {
        font-size: 23px;

    }

    .hero-section-static.testimonials .text .small {
        font-size: 18px;

    }

}

@media(max-width:950px) {
    .hero-section-static.testimonials .title-hero {
        font-size: 32px;
    }

    .hero-section-static.testimonials {
        height: 290px;
    }

    .hero-section-static.testimonials .text-testimonials {
        padding-bottom: 60px;
        padding-left: 50px;
    }

    .hero-section-static.testimonials .text span {
        line-height: 26px;
        letter-spacing: 0px;
    }

    .hero-section-static.testimonials .number {
        font-size: 36px;


    }

    .hero-section-static.testimonials .number::after,
    .hero-section-static.testimonials .text .small::after {
        height: 1px;
    }

    .hero-section-static.testimonials .text .big {
        font-size: 22px;
        line-height: normal;

    }

    .hero-section-static.testimonials .text .medium {
        font-size: 21px;
        line-height: normal;

    }

    .hero-section-static.testimonials .text .small {
        font-size: 16px;
        line-height: normal;

    }

}

@media(max-width:600px) {
    .hero-section-static.testimonials .title-hero {
        font-size: 18px;
    }

    .hero-section-static.testimonials .title-hero span {
        letter-spacing: 2px;
    }

    .hero-section-static.testimonials {
        height: 160px;
    }

    .hero-section-static.testimonials .text-testimonials {
        padding-bottom: 40px;
        padding-left: 2px;
    }

    .hero-section-static.testimonials .text span {
        line-height: 16px;
        letter-spacing: 0px;
    }

    .hero-section-static.testimonials .number {
        font-size: 20px;
        line-height: 26px;


    }

    .hero-section-static.testimonials .text .big {
        font-size: 12px;
        line-height: 12px;

    }

    .hero-section-static.testimonials .text .medium {
        font-size: 11px;
        line-height: 10px;

    }

    .hero-section-static.testimonials .text .small {
        font-size: 8px;
        line-height: 6px;

    }

}


.hero-section-static.testimonials p {
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 115%;
    color: white;
    width: 498px;
    margin-top: 15px;
}

.intro-block {
    padding: 20px 0px;
}

.intro-block .container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0
}

.intro-block h2 {
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 130%;
    margin-top: 20px;
    margin-bottom: 15px;
    color: #092A7C;
}

.intro-block p {
    font-family: "Outfit", sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 130%;
    color: #0A2463;
}

.info-split {
    background: linear-gradient(97.63deg, #0A2463 47.86%, #247BA0 100%);
    position: relative
}

.split-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px;
    margin: 0 auto;
    align-items: center;
    max-width: 1240px;
    padding: 0;
}

.split-content .text-column {
    width: 400px;
    color: white;
    padding: 45px 0 25px;
}

.split-content .text-column h3 {
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 130%;
    margin-bottom: 30px;
}

.split-content .text-column p {
    font-family: "Outfit", sans-serif;
    font-size: 20px;
    line-height: 130%;
    margin-bottom: 0;
}

.split-content .text-column hr {
    margin: 45px 0;
    opacity: 1
}

.info-split .ipad-float {
    position: absolute;
    bottom: 0px;
    right: 15px;
    z-index: 1;
}

.supplier-section {
    padding: 40px 0 20px;
}

.supplier-section .intro-text {
    max-width: 1240px;
    font-family: "Outfit", sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 130%;
    margin: 0 auto 30px;
    color: #0A2463;
}

.supplier-section .supplier-content {
    background: linear-gradient(97.63deg, #0A2463 47.86%, #247BA0 100%);
    padding: 45px 0 100px;
    position: relative
}

.supplier-section .supplier-content .img {
    position: absolute;
    bottom: 0;
    right: -9%;
    width: 590px;
}

.supplier-section .supplier-content .container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0;
}

.supplier-section .supplier-content .container h2 {
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 130%;
    color: white;
    width: 394px;
    padding-bottom: 20px;
    border-bottom: 1px solid white;
    margin-bottom: 30px;
}

.supplier-section .supplier-cards {
    display: flex;
    flex-direction: row;
    gap: 20px;
    flex-wrap: wrap;
}

.supplier-section .card {
    background-color: transparent;
    border: 1px solid white;
    padding: 15px;
    border-radius: 4px;
    width: 300px;
    position: relative;
    font-family: "Outfit", sans-serif;
    color: white;
}

.supplier-section .card p {
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    margin: 0;
}

.supplier-section .card-header {
    font-family: "Outfit", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 110%;
    margin-bottom: 5px;
    color: white;
    padding: 0;
    position: relative;
    border-bottom: 0;
}

.supplier-section .card-tag {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top-right-radius: 4px;
    border-top: 50px solid #FB5736;
    /* triangle height and color */
    border-left: 100px solid transparent;
    /* triangle width */
    z-index: 2;
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 14px;
    line-height: 0;
    padding: 0;
}

.card-tag-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 50px;
    z-index: 2;
}

.card-tag-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 53px solid white;
    border-left: 105px solid transparent;
    border-top-right-radius: 4px;
    z-index: 1;
}

.supplier-section .card-tag::after {
    content: attr(data-tag);
    position: absolute;
    top: -45px;
    right: 15px;
    font-size: 14px;
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 130%;
    z-index: 3;
}

.contact-section {
    padding: 40px 0 20px;
    text-align: center;
    background: #EEEFF1;
}

.contact-section.contact {
    /* margin-top: 30px; */
    padding: 40px 0
}

.contact-section h2 {
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 130%;
    margin-bottom: 10px;
    color: #0A2463;
    width: 400px;
    border-bottom: 1px solid #0A2463;
    margin: 0 auto 15px;
    padding-bottom: 15px;
}

.contact-section h2.contact-title {
    width: unset;
    border-bottom: 0;
    padding-bottom: 0px;
    margin-bottom: 20px;
}

.contact-section hr {
    width: 400px;
    margin: 0 auto;
    opacity: 1;
    color: #0A2463;
    margin-bottom: 20px;
}

.contact-section p {
    font-family: "Outfit", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    color: #0A2463;
}

.contact-section .contact-form {
    max-width: 960px;
    margin: 0 auto;
    padding-top: 20px;
}

.contact-section .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 17px;
    justify-content: center;
}

.contact-section .form-row.start {
    justify-content: flex-start;
}

.contact-section .form-row input,
.contact-form textarea,
.contact-section .form-row select {
    padding: 10px;
    height: 48px;
    border: 1px solid #0A2463;
    background-color: transparent;
    border-radius: 4px;
    font-family: "Outfit", sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 130%;
    color: #0A2463
}

.contact-section .select2-container--default .select2-selection--single {
    background-color: transparent;
    border: 1px solid #0A2463;
}

.contact-section .form-row::placeholder,
.contact-section .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #727690;
    font-family: "Outfit", sans-serif;
    font-weight: 300;
    font-size: 16px;
}

.contact-section .form-row input,
.contact-section .form-row select {
    width: 245px;
}

.contact-section .form-row input.email {
    width: 100%;
}

.contact-form textarea {
    height: 176px;
    width: 100%;
    resize: vertical;
}

.contact-section .form-consent {
    display: flex;
    align-items: flex-start;
    justify-content: space-between
}

.contact-section .form-consent div {
    width: 615px;
    display: flex;
}

.contact-section .form-switch .form-check-input {
    width: 110px;
    height: 32px;
    border-radius: 30px;
}

.contact-section .form-switch .form-check-input::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    border-radius: 30px;
    height: 24px;
    width: 24px;
    background-color: white;
    transition: transform 0.3s ease-in-out;
}

.contact-section .form-switch .form-check-input:checked::before {
    transform: translateX(1.7rem);
}

.contact-section .form-switch .form-check-label {
    font-family: "Outfit", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 130%;
    color: #0A2463;
    letter-spacing: 0;
    text-align: left;
}

.contact-section .submit-btn {
    position: relative;
    background: #164FDA;
    width: 312px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #F2F2F4;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: Lato;
    font-weight: 700;
    font-size: 16px;
    line-height: 100%;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.contact-section .submit-btn i {
    position: absolute;
    right: 32px
}

.contact-section label.error {
    color: red;
    font-size: 13px;
    text-align: left;
}

.cgv-section {
    width: 1240px;
    margin: 0 auto;
    padding: 30px 0;
}

.cgv-section h2 {
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 130%;
    color: #0A2463;
}

.cgv-section h3 {
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 130%;
    color: #0A2463;
    margin: 20px 0;
}

.cgv-section p {
    font-family: "Outfit", sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 130%;
    color: #0A2463;
}

.testimonials.breadcrumb {
    padding-top: 20px;
    padding-bottom: 20px;
}

.testimonials .col-lg-4 {
    width: 40%;
}

.testimonials .col-lg-8 {
    width: 60%;
}

.testimonial-slider-wrapper {
    position: relative;
    padding: 0 30px;
}

.testimonials .testimonial-card {
    background: rgb(10, 36, 99);
    border-radius: 12px;
    padding: 30px 40px;
    height: 100%;
    color: #00174f;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.testimonials .testimonial-card h5 {
    font-weight: 700;
    font-size: 18px;
    line-height: 36px;
    color: #0A2463;
    margin: 0;
}

.testimonials .testimonial-card .text-primary {
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 20px !important;
    letter-spacing: -0.2px !important;
    color: #fff !important;
}

.testimonials .testimonial-card small {
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.2px;
    color: #fff;
}

.testimonials .testimonial-card p {
    font-weight: 400 !important;
    font-size: 16px !important;
    color: #fff !important;
    width: unset !important;
}

.testimonials .testimonial-card .stars {
    font-size: 1.2rem;
    color: #ffc107;
}

.testimonials .testimonial-card .info-testimonial {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
}

.testimonials .swiper-button-next,
.testimonials .swiper-button-prev {
    background: #164FDA;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    top: 60%;
    transform: translateY(-50%);
    color: white;
    z-index: 10;
}

.swiper-button-next i,
.swiper-button-prev i {
    font-size: 16px;
}

.testimonials .swiper-button-prev {
    left: -20px;
}

.testimonials .swiper-button-next {
    right: -20px;
}

.avis-section {
    width: 1240px;
    max-width: 90%;
    margin: 0 auto 40px;
}

.avis-section .section-left {
    display: flex;
    gap: 20px;

}

.avis-section .left-card {
    flex-basis: 30%;

}

.avis-section .card-client-experince {
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0 10px 24px 0 rgba(0, 0, 0, 0.08);
    padding: 30px;
    height: 400px;


}

.avis-section .left-card img {
    margin-top: 20px;
    width: 100%;

}

@media (max-width: 768px) {
    .avis-section .left-card {
        display: none;
    }

    .avis-section .left-card img {
        display: none;

    }
}

.avis-section .card-client-experince a {
    display: flex;
    width: 345px;
    padding: 16px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background: #FB5736;
    color: white;
    cursor: pointer;
    font-family: "Outfit", sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.5px;
    text-decoration: none;
}

.avis-section .card-client-experince a:hover {
    background: #e04e2f;
    text-decoration: none;
    color: white;
}

.avis-section .card-client-experince h2 {
    color: #0A2463;
    font-family: Outfit;
    font-size: 21px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    margin-bottom: 20px;
    text-align: left;
}


.avis-section .card-client-experince p {
    color: #0A2463;
    font-family: Outfit;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 22px;
}

.avis-section h2 {
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 32px;
    text-align: center;
    text-transform: uppercase;
    color: #0A2463
}

.avis-section p.text {
    font-family: "Outfit", sans-serif;
    font-weight: 400;
    font-size: 25px;
    line-height: 120%;
    text-align: center;
    color: #0A2463;
    margin-bottom: 30px;
    margin-top: 15px;
}

.faq-wrapper {
    display: flex;
    flex-direction: column;
    width: 1280px;
    max-width: 90%;
    margin: 0 auto;
    padding: 10px 20px 40px;
}

.faq-wrapper .faq-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.faq-wrapper .faq-header h2 {
    color: #0A2463;
    font-family: Inter;
    font-weight: 900;
    font-size: 33px;
    line-height: 100%;
    letter-spacing: -0.9px;
    text-align: center;
}

.faq-wrapper .faq-header h2 span {
    color: #2563EB;
}

.faq-wrapper .faq-header .faq-toggle {
    background-color: #F7F7FF;
    border: none;
    border-radius: 8px;
    min-width: 42px;
    min-height: 42px;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.faq-wrapper .faq-header .faq-toggle:hover {
    background-color: #e0e7ff;
}

.faq-wrapper .faq-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 20px;
    margin-top: 0px;
    align-items: start;
}

.faq-wrapper .faq-item {
    background: white;
    border-radius: 16px;
    padding: 1px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.faq-wrapper .faq-item .accordion-header button {
    font-family: Inter;
    font-weight: 500;
    font-size: 22px;
    line-height: 28px;
    color: #092A7C
}

.faq-wrapper .faq-item .accordion-body {
    font-family: Inter;
    font-weight: 400;
    font-size: 18px;
    line-height: 120%;
    color: #092A7C
}

.faq-wrapper .faq-header .faq-toggle:not(.collapsed) img {
    content: url(../images/icons/minus-square.svg);
    width: 100%;
    height: 100%;
}

.faq-wrapper .faq-item .accordion-button:not(.collapsed)::after {
    content: url(../images/icons/minus-square.svg);
    background-image: none;
}

.faq-wrapper .faq-item .accordion-button::after {
    width: 35px;
    height: 42px;
    margin-top: 0;
    margin-right: unset;
}

.faq-wrapper .faq-item .accordion-button::after {
    content: url(../images/icons/plus-square.svg);
    background-image: none;
}

.modal-dialog {
    max-width: 900px;
}

.modal-content {
    border-radius: 8px;
}

.modal-content h5 {
    font-family: "Outfit", sans-serif;
    font-weight: 800;
    font-size: 16px;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 15px;
    color: #0A2463;
    margin-top: 40px;
    line-height: 120%;
}

.modal-content p {
    font-family: "Outfit", sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 120%;
    text-align: center;
    color: #0A2463;
    margin-top: 25px;
}

.modal-content a,
.modal-content a:hover,
.modal-content a:focus {
    width: 191px;
    height: 55px;
    border: 0;
    background-color: #0A2463;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0.5px;
    margin: 0 auto;
    border-radius: 4px
}

.modal-content a:last-child {
    background-color: #164FDA
}

.modal-content .btn-close {
    background: transparent url(../images/icons/close-btn-icon.svg) center / 1em auto no-repeat;
    opacity: 1
}

@media (min-width: 1280px) and (max-width: 1399px) {
    .swiper-button-prev.custom-prev {
        left: -20px;
    }

    .swiper-button-next.custom-next {
        right: -20px;
    }

    .faq-wrapper .faq-item .accordion-header button {
        font-size: 18px;
        line-height: 1.3;
    }

    .faq-wrapper .faq-item .accordion-body {
        font-size: 16px;
    }
}

@media (min-width: 1025px) and (max-width: 1279px) {
    .tyre-search-bar {
        background-image: none;
        background: #0A2463;
    }

    .breadcrumb {
        max-width: 980px;
    }

    .category-search {
        padding: 35px 0px;
    }

    .category-search .container {
        max-width: 1000px;
    }

    .category-card {
        width: 130px;
    }

    .workshopdata-banner .container {
        max-width: 1000px;
    }

    .banner-image img {
        max-width: 200px;
    }

    .banner-text p {
        width: unset;
    }

    .brand-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        max-width: 1000px;
    }

    .brand-card {
        width: 150px;
        height: 150px;
    }

    .faq-section .accordion {
        max-width: 1000px;
        padding: 30px;
    }

    .results-container {
        width: 1000px;
    }

    .filter-bar {
        width: 250px;
    }

    .qty .qty-input {
        width: 150px;
    }

    .filter-bar .brand-search {
        width: 215px;
    }

    .product-list {
        width: 740px;
    }

    .product-card .product-img-desc {
        gap: 5px;
    }

    .product-card .product-image {
        width: 135px;
    }

    .product-card-desc {
        width: 435px;
    }

    .breadcrumbs-container {
        max-width: 980px;
    }

    .product-info-container {
        width: 980px;
    }

    .product-card.info {
        flex-wrap: wrap;
        row-gap: 20px;
    }

    .w-194.info {
        flex-direction: row;
        width: 100%;
    }

    .connect-text {
        border-top: none;
        margin: 0;
        padding: 0;
    }

    .mr-40 {
        margin-right: 40px;
    }

    .key-benefits {
        width: 980px;
    }

    .labeling-section {
        width: 980px;
    }

    .faq-section.info {
        width: 980px;
        margin: 0 auto;
    }

    .selected-products-section .selected-products-wrapper {
        width: 980px;
    }

    .selected-products-section .selected-products-swiper {
        max-width: 980px;
    }

    .swiper-button-prev.custom-prev {
        left: -20px;
    }

    .swiper-button-next.custom-next {
        right: -20px;
    }

    .selected-products-section .product-card {
        max-width: 310px;
    }

    .brand-card-section {
        width: 1000px;
        font-size: 24px;
    }

    .tyre-slider-section .tyre-swiper-wrapper {
        width: 960px;
    }

    .tyre-slider-section .tyre-swiper {
        max-width: 960px;
    }

    .tyre-profile-section .profile-grid {
        width: 980px;
    }

    .video-wrapper {
        width: 980px;
    }

    .dimension-search {
        max-width: 980px;
    }

    .dimension-search .form-group {
        width: 120px;
    }

    .dimension-search .select2-container {
        max-width: 120px;
    }

    .tyre-list-section {
        width: 980px;
    }

    .tyre-list-container .tyre-details {
        width: 400px;
    }

    .intro-block .container {
        max-width: 980px;
    }

    .split-content {
        max-width: 980px;
    }

    .info-split .ipad-float {
        right: -13%;
        width: 70%;
    }

    .supplier-section .intro-text {
        max-width: 980px;
    }

    .supplier-section .supplier-content .container {
        max-width: 980px;
    }

    .supplier-section .card {
        width: 220px;
    }

    .card-tag-wrapper::before {
        border-left: 74px solid transparent;
    }

    .supplier-section {
        overflow: hidden;
    }

    .supplier-section .card-tag {
        border-left: 70px solid transparent;
    }

    .supplier-section .card-header {
        width: 85%;
    }

    .supplier-section .supplier-content .img {
        right: -15%;
        width: 530px;
    }

    .hero-section-static.testimonials .container {
        max-width: 1000px;
    }

    .testimonials .col-lg-4 {
        width: 35%;
        padding-left: 30px;
    }

    .testimonials .col-lg-8 {
        width: 65%;
    }



    .hero-section-static.testimonials p {
        width: unset;
        font-size: 20px
    }

    .testimonial-slider-wrapper {
        padding: 0px 40px;
    }

    .testimonials .swiper-button-next {
        right: 20px;
    }

    .testimonials .swiper-button-prev {
        left: 20px;
    }

    .avis-section {
        width: 980px;
        margin: 40px auto;
    }

    .avis-section p.text {
        font-size: 20px;
    }

    .faq-wrapper {
        width: 980px;
    }

    .faq-list {
        grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
        gap: 15px;
    }

    .specs.search {
        width: 95%;
    }

    .filter-swiper {
        width: 486px;
    }

    .filter-wrapper .swiper-button-next.custom-next {
        right: 0;
    }

    .compatibility-container {
        max-width: 980px;
    }

    .cgv-section {
        width: 980px;
    }
}

@media (max-width: 767px) {
    .tyre-search-bar {
        background-image: none;
        padding: 20px 0px;
        background: #0A2463;
    }

    .form-row {
        max-width: 330px;
        margin-left: auto;
        margin-right: auto;
    }

    .tyre-search-bar .container {
        max-width: 100%;
    }

    .column {
        width: 100px;
    }

    .column.load,
    .column.speed {
        width: 157px;
    }

    .column.brands,
    .column.brandTypes {
        width: 100%;
    }

    .column.brandTypes {
        order: 0;
    }

    .season-row {
        order: 1;
    }

    .search-btn {
        order: 2;
        width: 100%
    }

    .custom-dropdown.select2-dropdown {
        width: 102px !important;
    }

    .custom-dropdown-mobile.select2-dropdown {
        width: 159px !important;
    }

    .custom-dropdown-brands.select2-dropdown,
    .custom-dropdown-brandTypes.select2-dropdown {
        width: 332px !important;
    }

    .season-row {
        gap: unset;
        justify-content: space-between;
        width: 100%;
    }

    .breadcrumb {
        max-width: 90%;
    }

    .section-title {
        font-size: 28px;
        line-height: 110%;
    }

    .category-search {
        padding: 35px 10px;
    }

    .category-search .container {
        max-width: 100%;
    }

    .category-grid {
        gap: 12px;
    }

    .category-card {
        width: 48%;
    }

    .workshopdata-banner .container {
        max-width: 100%;
    }

    .banner-content {
        justify-content: center;
        padding: 0 5px;
    }

    .banner-text p {
        width: 100%;
    }

    .green-button {
        margin-bottom: 20px;
    }

    .brand-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        max-width: 100%;
    }

    .faq-section {
        width: 95%;
        margin: 0 auto;
    }

    .faq-section .accordion {
        max-width: 100%;
        padding: 10px;
    }

    /* .accordion-button:not(.collapsed)::after {
        margin-right: -17px;
    } */
    .results-container {
        width: 95%;
        display: block;
    }

    .product-filter {
        padding: 5px 10px;
    }

    .product-list {
        width: 100%;
        margin: 0 auto;
    }

    .filter-list {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        background: none;
        padding: 0px;
    }

    .filter-list .title {
        display: block;
    }

    .filter-list .filter {
        height: 24px;
        font-size: 12px;
    }

    .product-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 16px 10px;
        position: relative;
        margin-bottom: 15px;
    }

    .product-card .product-img-desc {
        gap: 10px;
        width: 100%;
    }

    .product-card .product-image {
        margin-right: 0px;
        margin-left: 0px;
    }

    .product-card-desc {
        width: 100%
    }

    .product-card-img {
        width: 135px;
        margin-right: 10px;
    }

    .product-card-img .img-container {
        max-width: 121px;
        max-height: 121px
    }

    .product-image .brand-container {
        max-width: 103px;
        max-height: 16px;
    }

    .product-card-img .brand-container {
        max-width: 120px;
        max-height: 25px;
        margin-bottom: 15px;
    }

    .product-card-desc .name {
        width: 100%;
        display: block;
        margin-top: 0px;
        font-size: 28px;
        margin-bottom: 0;
        line-height: 30px;
    }

    .product-card-desc .product-description {
        margin-top: 5px;
        word-break: break-word;
    }

    .w-194 {
        width: 100%;
    }

    .mobile-filter-button {
        display: flex;
        height: 40px;
        width: 100%;
        justify-content: center;
        align-items: center;
        border-radius: 4px;
        border: 3px solid #164FDA;
        color: #164FDA;
        font-family: "Lato", sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        letter-spacing: 0.8px;
        margin-bottom: 20px;
        background-color: transparent;
    }

    .mobile-filter-panel {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
        overflow-y: auto;
    }

    .mobile-filter-panel .filter-bar {
        width: 100%;
        border-radius: 0;
    }

    .mobile-filter-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0 15px;
        border-bottom: 1px solid rgba(10, 36, 99, 0.30);
        margin-bottom: 20px;
    }

    .mobile-filter-title {
        color: #0A2463;
        font-family: "Outfit", sans-serif;
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin-bottom: 0;
    }

    .mobile-filter-close {
        background: none;
        border: none;
        font-size: 20px;
        cursor: pointer;
    }

    .mobile-filter-panel {
        display: none;
    }

    .mobile-filter-panel.active {
        display: block;
    }

    .benefit-item {
        max-width: 100%;
        flex: 1 1 100%;
    }

    .breadcrumbs-container {
        max-width: 90%;
    }

    .backToSearch {
        display: none;
    }

    .product-info-container {
        width: 95%;
    }

    .product-card.info {
        padding: 16px 15px 16px 0;
        gap: 15px;
    }

    .product-info-image-desc {
        gap: 5px;
    }

    .product-info-image {
        width: 135px;
    }

    .product-info-image .brand-container {
        max-width: 103px;
        max-height: 16px;
    }

    .product-info-image .img-container {
        max-width: 134px;
        max-height: 134px;
    }

    .product-card-desc.info {
        width: unset;
    }

    .product-card-desc .name.info {
        font-size: 28px;
    }

    .w-194.info {
        padding: 0 0 0 15px;
    }

    .key-benefits {
        width: 95%;
    }

    .key-benefits-card {
        padding: 20px;
    }

    .faq-section.info {
        width: 95%;
        margin: 0 auto;
    }

    .faq-section.info .accordion {
        padding: 20px 20px 20px 10px;
        max-width: 100%;
    }

    .faq-section.info .accordion-button::after {
        margin-left: 10% !important;
    }

    .labeling-section {
        width: 95%;
    }

    .labeling-card {
        padding: 20px 30px;
    }

    .selected-products-section .selected-products-wrapper {
        width: 325px;
    }

    .selected-products-section .selected-products-swiper {
        max-width: 325px;
    }

    .selected-products-section .product-card {
        max-width: 325px;
    }

    .swiper-button-prev.custom-prev {
        left: -20px;
    }

    .swiper-button-next.custom-next {
        right: -20px;
    }

    .brand-card-section {
        flex-direction: column;
        gap: 10px;
        height: auto;
        padding: 10px;
        width: 95%;
        font-size: 20px;
        text-align: center;
    }

    .tyre-slider-section .tyre-swiper-wrapper {
        width: 95%;
    }

    .tyre-slider-section .tyre-swiper {
        max-width: 95%;
    }

    .tyre-slider-section .swiper-button-prev.custom-prev {
        left: -5px;
    }

    .tyre-slider-section .swiper-button-next.custom-next {
        right: -5px;
    }

    .tyre-slider-section .slider-title {
        font-size: 28px;
        width: 95%;
    }

    .tyre-profile-section .secttion-title,
    .tyre-profile-section .secttion-subtitle {
        width: 95%;
    }

    .tyre-profile-section .profile-grid {
        width: 85%;
        row-gap: 15px;
    }

    .tyre-profile-section .profile-grid ul {
        min-width: 100px;
    }

    .tyre-profile-section .see-more-btn {
        width: 90%;
    }

    .video-wrapper {
        width: 95%;
    }

    .brand-section .section-subtitle {
        font-size: 24px;
    }

    .dimension-form {
        gap: 10px;
    }

    .dimension-search {
        padding: 20px;
        max-width: 95%;
    }

    .dimension-search .search-button {
        width: 100%;
        margin-top: 10px;
    }

    .tyre-list-section {
        width: 95%;
    }

    .tyre-list-container {
        padding: 20px;
    }

    .tyre-list-container .tyre-card {
        flex-direction: column;
        gap: 10px;
    }

    .tyre-list-container .tyre-details {
        width: 100%;
        text-align: center;
    }

    .tyre-list-container .tyre-cta {
        min-width: 100%;
    }

    .hero-section-static {
        height: 200px;
    }

    .hero-section-static h1 {
        font-size: 35px;
        text-align: center;
    }

    .intro-block .container {
        max-width: 90%;
    }

    .info-split {
        display: flex;
        flex-direction: column-reverse;
    }

    .split-content {
        max-width: 90%;
    }

    .info-split .ipad-float {
        position: relative;
        right: 0;
    }

    .supplier-section .intro-text {
        max-width: 90%;
    }

    .supplier-section .supplier-content {
        display: flex;
        flex-direction: column-reverse;
        padding: 30px 0 0px;
    }

    .supplier-section .supplier-content .img {
        right: 0;
        width: 100%;
        position: relative;
    }

    .supplier-section .supplier-content .container {
        max-width: 90%;
    }

    .supplier-section .supplier-content .container h2 {
        width: 100%;
    }

    .supplier-section .card {
        width: 100%;
    }

    .contact-section {
        padding: 20px 20px 80px;
    }

    .contact-section h2 {
        width: 100%;
    }

    .contact-section .form-row {
        gap: 15px;
    }

    .contact-section .form-row input,
    .contact-section .form-row select {
        width: 100% !important;
    }

    .contact-form textarea {
        width: 100%;
        max-width: 330px;
        margin: 0 auto;
    }

    .contact-section .form-consent {
        flex-direction: column;
        gap: 15px;
    }

    .contact-section .form-consent div {
        width: 100%;
        margin-top: 5px;
    }

    .contact-section .submit-btn {
        width: 100%;
    }

    .contact-section.contact {
        max-width: 90%;
        margin: 30px auto;
        padding: 20px;
    }

    .contact-section hr {
        width: 100%;
    }

    .contact-section .contact-form {
        max-width: 100%;
        padding-top: 10px;
    }

    .help-contact .container {
        max-width: 90%;
    }

    .help-contact .support-icon {
        width: 55px;
    }

    .help-contact .icon-square {
        width: 35px;
        height: 28px
    }

    .hero-section-static.testimonials {
        background-position: 16% top;
    }

    .hero-section-static.testimonials .container {
        max-width: 90%;
    }

    .testimonials .col-lg-4 {
        width: 100%;
    }

    .testimonials .col-lg-8 {
        display: none;
    }


    .hero-section-static.testimonials p {
        width: unset;
        text-align: center;
    }

    .avis-section {
        width: 90%;
    }

    .avis-section h2 {
        font-size: 28px;
    }

    .avis-section p.text {
        font-size: 20px;
    }

    .faq-wrapper {
        width: 100%;
        padding: 10px 0px;
    }
    .faq-wrapper .faq-header {
        justify-content: space-between;
    }


    .faq-list {
        grid-template-columns: 1fr;
    }

    .cgv-section {
        width: 90%;
    }

    .faq-wrapper .faq-header h2 {
        font-size: 26px;
        text-align: left;
    }

    .faq-wrapper .faq-list {
        grid-template-columns: 1fr;
    }

    .faq-wrapper .faq-item .accordion-header button {
        font-size: 18px;
        line-height: 21px;
    }

    .faq-wrapper .faq-item .accordion-body {
        font-size: 16px;
    }

    .faq-wrapper .faq-item {
        padding: 10px;
    }

    .thumb-swiper-wrapper .custom-arrow {
        width: 15px;
        height: 15px;
    }

    .thumb-swiper-wrapper .custom-arrow i {
        font-size: 10px;
    }

    .thumb-swiper-wrapper {
        padding: 0 20px;
    }

    .compatibility-container {
        max-width: 90%;
    }

    .filter-wrapper {
        flex-direction: column;
        align-items: start;
        gap: 10px
    }

    .filter-swiper {
        width: unset;
    }

    .filter-swiper .swiper-wrapper {
        flex-wrap: wrap;
        gap: 10px;
    }

    .filter-wrapper .custom-next {
        display: none;
    }

    .product-list .equivalent {
        display: inline-block;
        font-size: 15px;
        height: auto;
        padding: 10px;
    }

    .product-list .equivalent img {
        transform: scale(.5);
    }

    .filter-by,
    .filter-by:hover,
    .filter-by:focus,
    .btn-check:checked+.btn,
    .btn.active,
    .btn.show,
    .btn:first-child:active,
    :not(.btn-check)+.btn:active {
        width: 120px;
    }
}