.banner {
            position: relative;
            height: 350px;
            padding: 11px 0 16px;
            margin: 0 auto;
            text-align: center;
        }

        .dg-container {
            position: relative;
            width: 100%;
            height: 350px;
        }

        .dg-wrapper {
            width: 400px;
            height: 250px;
            margin: 0 auto;
            position: relative;
            transform-style: preserve-3d;
            perspective: 1000px;
        }

 main.homepage #banner .advanced-search{
            z-index: 1;
        }
        @media only screen and (max-width: 600px) {
            .dg-wrapper {
                width: 320px;
            }
        }


        .dg-wrapper a {
            width: 100%;
            height: 250px;
            display: block;
            position: absolute;
            left: 0;
            top: 0;
        }

        .dg-wrapper a:first-child {
            z-index: 2;
        }

        .dg-wrapper a img {
            display: block;
            box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.20);
            border-radius: 4px;
            width: 100%;
            height: 260px;
            background: #fff;
            position: absolute;
        }
        .dg-wrapper a h3 {
            display: block;
            box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.20);
            border-radius: 4px;
            width: 100%;
            background: #000;
            position: relative;
            padding: 10px;
            color: #ffffff;
            font-size: 20px;
        }

        .dg-wrapper a.dg-transition {
            transition: all 0.5s ease-in-out;
        }

        .dg-wrapper a.dg-transition-fast {
            transition: all 0.2s ease-in-out;
        }

        .dg-container nav {
            display: none;
        }

        .dg-container nav span:hover {
            opacity: 1;
        }

        .dg-container nav span.dg-next {
            background-position: top right;
            margin-left: 10px;
        }

        .dg-container #lightButton2 {
            bottom: 20px;
        }

        .dg-container .button {
            position: relative;
            z-index: 5;
            top: 20px;
        }

        .dg-container .button li {
            cursor: pointer;
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 5px;
            background: rgba(255, 255, 255, 0.30);
            border: 1px solid rgba(0, 0, 0, 0.20);
        }

        .dg-container .button .light {
            background: #e83433;
        }

        .form-container form {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 1rem;
            padding:20px;
            border-radius: 0.5rem;
        }
        .input-box {
            flex: 1 1 7rem;
            flex-direction: column;
        }

        .input-box span {
            font-weight: 500;
            color: #fff;
        }
        .input-box input {
            padding: 7px;
            outline: none;
            border: none;
            background-color: #eeeff1;
            border-radius: 0.5rem;
            font-size: 1rem;
            color: #000;
        }
        .form-container form .btn {
            flex: 1 1 7rem;
            padding: 10px 34px;
            border: none;
            border-radius: 0.5rem;
            background-color: #474fa0;
            color: #fff;
            font-size: 1rem;
        }
        .form-container form .btn:hover {
            background-color: #474ea0b0;
        }

        .search-dropdown {
            position: absolute;
            width: 250px;
            box-shadow:  rgba(0, 0, 0, 0.05) 0px 6px 10px 0px,
            rgba(0, 0, 0, 0.1) 0px 0px 0px 1px;
            border-radius: 0.5rem;
            margin-top: 0.3rem;
            background: white;
            transition: all 0.1s cubic-bezier(0.16, 1, 0.5, 1);

            transform: translateY(0.5rem);
            visibility: hidden;
            opacity: 0;
        }

        .search-dropdown a {
            display: flex;
            align-items: center;
            column-gap: 0.5rem;
            padding: 0.8rem 1rem;
            text-decoration: none;
            color: black;
        }

        .search-dropdown a:hover {
            background-color: #166e67;
            color: white;
        }

        .show {
            transform: translateY(0rem);
            visibility: visible;
            opacity: 1;
        }

        .offer-section {
            margin-block: 60px;
        }

        .offer-section .responsive-two-columns {
            display:flex;
            flex-wrap: wrap;
            column-gap:2rem;
        }
        .responsive-two-columns > * {
            width: 100%;
            padding:1rem;
        }

        .responsive-two-columns div {
            overflow: hidden;
            border-radius: 0.5rem;
        }

        .responsive-two-columns img {
            display: block;
            max-width: 100%;
            cursor: pointer;
            border-radius: 0.5rem;
            transition: 0.3s;
        }

        /* tablet breakpoint */
        @media (min-width:768px) {
            .responsive-two-columns > * {
                width: calc(50% - 1rem);
                padding: 0;
            }

            .responsive-two-columns img:hover {
                scale: 1.1;
            }
        }

        .car-img > span {
            display: block;
            width: 34px;
            position: absolute;
            bottom:20px;
            right: 20px;
            height: 34px;
            z-index: 99;
            transition: 0.7s;

        }


        .car-img > span img {
            display: block;
            max-width: 100%;
            mix-blend-mode: color-dodge;
        }

        .car-img:hover > span {
            transform: rotateY(360deg);
        }

        .swiper-slide-brand {
            border: 1px solid #fafafa;
            padding: 10px ;
            box-shadow:0px 1px 2px rgb(0 0 0 / 8%), 0px 4px 12px rgb(0 0 0 / 5%) ;
            border-radius: 0.7rem;
            position: relative;
            overflow: hidden;
        }

        .swiper-slide-brand::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 0%;
            background-color:#7F7F7F;
            bottom:0;
            left:0;
            z-index: -1;
            transition: 0.4s all
        }


        .swiper-slide-brand:hover:before {
            height: 100%;
        }

        .swiper-slide-brand img {
            display: block;
            max-width: 100%;
            mix-blend-mode: multiply;
        }
        main.homepage #brands #brands_slider .brand-img {
            margin: auto;
        }
        .text_under_line_image img{
            height:10px;
        }