/* ///////////////////////////// Strart Image Slider ////////////////////////////////// */


.sectionTitle {
    font-size: var(--Xlarg-font-size);
    color: var(--main-color);
    margin: 20px auto 20px;
    text-align: center;
    width: 100%;
}

.offerLable {
    border-radius: 10px;
    background-color: var(--main-color);
    font-size:12px;
    padding:5px !important;
}

.imageSlider {
    width: 100%;
    position: relative;
    background-color: var(--main-section-color);
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
}

.swiper-slide {
    position: relative;
}

    .swiper-slide img {
        width: 100%;
        aspect-ratio: 2/1;
        object-fit: cover;
    }

    .swiper-slide .overLay {
        position: absolute;
        inset: 0;
        background: rgb(24, 19, 28);
        background: linear-gradient( 180deg, var(--slider-overLayDark) 1%, rgba(103, 90, 112, 0) 99% );
        z-index: 1;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 10% 6%;
        transition: 0.5s;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -ms-transition: 0.5s;
        -o-transition: 0.5s;
    }

.imageSlider .buttonLay {
    position: absolute;
    inset: 0;
    background-color: transparent;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;
    padding: 15% 6%;
    gap: 20px;
}

    .imageSlider .buttonLay .searchContainer {
        position: absolute;
        top: 90%;
        left: 0px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .imageSlider .buttonLay .searchUnit {
        width: 90%;
        padding: 50px;
        background-color: var(--second-section-color);
        opacity: 0.9;
        backdrop-filter: blur(10px);
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        transition: 0.5s;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -ms-transition: 0.5s;
        -o-transition: 0.5s;
    }

        .imageSlider .buttonLay .searchUnit form {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            gap: 20px;
        }

            .imageSlider .buttonLay .searchUnit form .inputContainer {
                display: flex;
                justify-content: center;
                align-items: flex-start;
                flex-direction: column;
                gap: 20px;
                flex-grow: 1;
                position: relative;
                width: 25%;
            }

            .imageSlider .buttonLay .searchUnit form label {
                font-size: var(--main-font-size);
                color: white;
            }

            .imageSlider .buttonLay .searchUnit form .searchButton {
                padding: 10px 40px;
                border-radius: 10px;
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                -ms-border-radius: 10px;
                -o-border-radius: 10px;
                background-color: var(--main-color);
                color: white;
                outline: none;
                border: none;
                font-size: var(--main-font-size);
                box-shadow: none;
                cursor: pointer;
            }

                .imageSlider .buttonLay .searchUnit form .searchButton:hover {
                    transform: scale(0.9);
                    -webkit-transform: scale(0.9);
                    -moz-transform: scale(0.9);
                    -ms-transform: scale(0.9);
                    -o-transform: scale(0.9);
                }

    .imageSlider .buttonLay button {
        padding: 6px 40px;
        font-size: 22px;
        box-shadow: 0px 0px 10px 2px rgba(26, 26, 26, 0.74);
        transition: 0.5s;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -ms-transition: 0.5s;
        -o-transition: 0.5s;
        border-radius: 30px;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        -ms-border-radius: 30px;
        -o-border-radius: 30px;
    }

        .imageSlider .buttonLay button:hover {
            transform: translateY(-5px) scale(1.1);
            -webkit-transform: translateY(-5px) scale(1.1);
            -moz-transform: translateY(-5px) scale(1.1);
            -ms-transform: translateY(-5px) scale(1.1);
            -o-transform: translateY(-5px) scale(1.1);
        }

.swiper-slide .overLay p {
    font-size: var(--larg-font-size);
    color: white;
    width: 50%;
    text-align: center;
}

/* ///////////////////////////// Strart SpecialUnits Section ////////////////////////////////// */

.specialUnits {
    padding: 200px 0px 100px;
    background-color: var(--main-section-color);
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    width:100%;
}

    .specialUnits h1 {
        color: var(--main-color);
        text-align: center;
        font-size: var(--Xlarg-font-size);
        display:inline-block;
        width:100%;
        margin:50px auto;
    }
.specialUnitsContainer {
    width: 100% !important;
}

    .specialUnitsContainer .swiper-wrapper {
        width: 100%;
      
    }



        .specialUnitsContainer .swiper-wrapper .swiper-slide {
            border-radius: 10px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            -ms-border-radius: 10px;
            -o-border-radius: 10px;
            overflow: hidden;
            background-color: var(--card-color);
            border: 1px solid var(--border-card-color);
            cursor: pointer;
            position: relative;
            width: 380px;
           height:500px;
        }
         .specialUnitsContainer  .swiper-wrapper .swiper-slide img {
            height: 220px;
            border-radius: 10px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            -ms-border-radius: 10px;
            -o-border-radius: 10px;
            object-fit:cover;
        }

            .specialUnitsContainer  .swiper-wrapper .swiper-slide .favoriteIcon {
                position: absolute;
                top: 15px;
                left: 15px;
                font-size: var(--main-font-size);
                color: white;
            }

            .specialUnitsContainer  .swiper-wrapper .swiper-slide .info {
                padding: 0px 8px 20px;
                display:flex;
                flex-direction:column;
                gap:10px;
            }

                .specialUnitsContainer  .swiper-wrapper .swiper-slide .info .rateAndOffer {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    color: var(--text-black-white);
                    padding: 10px 0px 0px;
                }

                    .specialUnitsContainer  .swiper-wrapper .swiper-slide .info .rateAndOffer .icons {
                        font-size: 16px;
                        color: var(--main-color);
                        margin: 0px 5px;
                    }

                .specialUnitsContainer  .swiper-wrapper .swiper-slide .info .specialUnitsStatistics {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 10px;

                }
                .specialUnitsContainer  .swiper-wrapper .swiper-slide .info .uintName {
                    font-size: var( --larg-font-size);
                    color: var(--text-black-white);
                    margin:0px;
                }
                .specialUnitsContainer .swiper-wrapper .swiper-slide
                .info
                .specialUnitsStatistics
                span {
                    padding: 10px;
                    color: var(--text-black-white);
                    font-size: 14px;
                    background-color: rgba(0, 0, 0, 0.185);
                    border-radius: 10px;
                    -webkit-border-radius: 10px;
                    -moz-border-radius: 10px;
                    -ms-border-radius: 10px;
                    -o-border-radius: 10px;
                    width: 23%;
                    text-align: center;
                    margin: 0px;
                }


                .specialUnitsContainer .swiper-wrapper .swiper-slide .info p {
                    font-size: var(--small-font-size);
                    line-height: 1.5rem;
                    color: var(--text-black-white);
                    display: block;
                    margin:0px;
                }

                .specialUnitsContainer .swiper-wrapper .swiper-slide .info .price {
                    font-size: var(--main-font-size);
                    color: var(--text-black-white);
                    margin: 0px;
                }
                .specialUnitsContainer .swiper-wrapper .swiper-slide .info .unitCode {
                    font-size: var(--main-font-size);
                    color: var(--text-black-white);
                }

       



/* ///////////////////////////// Strart Offers Section ////////////////////////////////// */

.offers {
    background-color: var(--second-section-color);
    padding: 50px 0px;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
}

    .offers .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
        gap: 50px;
    }

        .offers .container > div {
            width: 49%;
        }

        .offers .container .offerInfo {
            padding: 30px;
            background-color: rgba(255, 255, 255, 0.075);
            border-radius: 10px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            -ms-border-radius: 10px;
            -o-border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            gap: 30px;
        }

            .offers .container .offerInfo h1 {
                margin: 0px;
                color: var(--main-color);
                font-size: var(--Xlarg-font-size);
            }

            .offers .container .offerInfo h2 {
                margin: 0px;
                color: white;
                font-size: var(--larg-font-size);
            }

            .offers .container .offerInfo button {
                margin: 0px;
                padding: 10px 40px;
                color: white;
                background-color: var(--main-color);
                font-size: var(--main-font-size);
                border-radius: 10px;
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                -ms-border-radius: 10px;
                -o-border-radius: 10px;
                border: none;
                outline: none;
                transition: 0.5s;
                -webkit-transition: 0.5s;
                -moz-transition: 0.5s;
                -ms-transition: 0.5s;
                -o-transition: 0.5s;
                cursor: pointer;
                text-align: center;
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 10px;
            }

                .offers .container .offerInfo button:hover {
                    transform: scale(0.9);
                    -webkit-transform: scale(0.9);
                    -moz-transform: scale(0.9);
                    -ms-transform: scale(0.9);
                    -o-transform: scale(0.9);
                    box-shadow: 0px 0px 2px 1px var(--main-color);
                }

            .offers .container .offerInfo p {
                margin: 0px;
                color: white;
                font-size: var(--main-font-size);
                width: 70%;
                line-height: 1.5rem;
            }
        .offers .container .offerSlider {
            overflow: hidden;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            height: 100%;
            gap:15px;
        }

         

        .offers .container .swiper-container {
            width: 32%;
            height: 100%;
            overflow: hidden;
        }

            

                .offers .container .swiper-container .swiper-wrapper .swiper-slide{
                    height: 240px;
                    width: 100%;
                    transition: 0.5s;
                    -webkit-transition: 0.5s;
                    -moz-transition: 0.5s;
                    -ms-transition: 0.5s;
                    -o-transition: 0.5s;
                    cursor: pointer;
                }


                    .offers .container .swiper-container .swiper-wrapper .swiper-slide .imageBox {
                        height: 100%;
                        border-radius: 10px;
                        -webkit-border-radius: 10px;
                        -moz-border-radius: 10px;
                        -ms-border-radius: 10px;
                        -o-border-radius: 10px;
                        overflow: hidden;
                        position: relative;
                    }

                        .offers
                        .container
                        .swiper-container .swiper-wrapper .swiper-slide .imageBox
                        .offerLable {
                            position: absolute;
                            left: 10px;
                            top: 10px;
                            padding: 6px 10px;
                            border-radius: 10px;
                            -webkit-border-radius: 10px;
                            -moz-border-radius: 10px;
                            -ms-border-radius: 10px;
                            -o-border-radius: 10px;
                            background-color: #8a7650;
                            color: rgb(255, 255, 255);
                            font-size: 12px;
                        }
        .offers
        .container
        .offerSlider
        .swiper-wrapper
        .swiper-slide
        .imageBox
        .unitNameInOffer {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 0px;
            padding: 6px 10px;
            background-color: rgba(0, 0, 0, 0.212);
            backdrop-filter: blur(10px);
            color: rgb(255, 255, 255);
            font-size: 16px;
            width: 100%;
            text-align: center;
        }

                        .offers .container .swiper-container .swiper-wrapper .swiper-slide:hover {
                            transform: scale(0.9);
                            -webkit-transform: scale(0.9);
                            -moz-transform: scale(0.9);
                            -ms-transform: scale(0.9);
                            -o-transform: scale(0.9);
                        }


        .offers .container .swiper-container .swiper-wrapper .swiper-slide .imageBox img {
            height: 100%;
            width: 100%;
            object-fit: cover;
        }

        .offers .container .swiper-container {
            height: 50vh;
            overflow: hidden;
        }

/* ///////////////////////////// Strart WhoAreWe Section ////////////////////////////////// */

.whoAreWe {
    background-color: var(--main-section-color);
    padding: 150px 0px;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
}

    .whoAreWe .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
        gap: 30px;
    }

        .whoAreWe .container > div {
            width: 50%;
        }

        .whoAreWe .container .whoAreWeInfo {
            padding: 30px;
            display:flex;
            flex-direction:column;
            justify-content:center;
            align-items:flex-start;
            gap:20px;
        }

            .whoAreWe .container .whoAreWeInfo h1 {
                font-size: var(--Xlarg-font-size);
                color: var(--text-black-white);
            }

            .whoAreWe .container .whoAreWeInfo p {
                font-size: var(--main-font-size);
                line-height: 1.5rem;
                color: var(--text-black-white);
            }

        .whoAreWe .container .whoAreWeSlider {
            width: 30%;
        }

            .whoAreWe .container .whoAreWeSlider .swiper-slide {
                border: 4px solid var(--main-color);
                background-color: var(--main-color);
            }

                .whoAreWe .container .whoAreWeSlider .swiper-slide img {
                    width: 160%;
                    object-fit: cover;
                }

/* ///////////////////////////// Strart Statistics Section ////////////////////////////////// */

.statistics {
    padding: 100px 0px;
    background-color: var(--second-section-color);
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
}

    .statistics h1 {
        font-size: var(--Xlarg-font-size);
        color: var(--main-color);
        margin: 20px auto 50px;
        text-align: center;
    }

    .statistics .container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        justify-content: center; /* Center items horizontally */
        align-items: center;
        gap: 30px;
    }

        .statistics .container .staitsticBox {
            padding: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 30px;
            background-color: rgba(255, 255, 255, 0.075);
            border-radius: 15px;
            -webkit-border-radius: 15px;
            -moz-border-radius: 15px;
            -ms-border-radius: 15px;
            -o-border-radius: 15px;
            position: relative;
            cursor: pointer;
        }

            .statistics .container .staitsticBox::after {
                content: "";
                position: absolute;
                width: 2px;
                height: 0%;
                background-color: var(--main-color);
                left: -2px;
                top: 5%;
                transition: 0.5s;
                -webkit-transition: 0.5s;
                -moz-transition: 0.5s;
                -ms-transition: 0.5s;
                -o-transition: 0.5s;
            }

            .statistics .container .staitsticBox::before {
                content: "";
                position: absolute;
                width: 2px;
                height: 0%;
                background-color: var(--main-color);
                right: -2px;
                bottom: 5%;
                transition: 0.5s;
                -webkit-transition: 0.5s;
                -moz-transition: 0.5s;
                -ms-transition: 0.5s;
                -o-transition: 0.5s;
            }

            .statistics .container .staitsticBox:hover::after,
            .statistics .container .staitsticBox:hover::before {
                height: 90%;
            }

            .statistics .container .staitsticBox i,
            .statistics .container .staitsticBox span {
                font-size: var(--Xlarg-font-size);
                color: var(--main-color);
                font-weight: bold;
            }

            .statistics .container .staitsticBox p {
                margin: 0px;
                color: white;
            }

/* ///////////////////////////// Strart OurServices Section ////////////////////////////////// */

.ourServices {
    padding: 100px 0px;
    background-color: var(--main-section-color);
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
}

    .ourServices h1 {
        font-size: var(--Xlarg-font-size);
        color: var(--main-color);
        margin: 20px auto 50px;
        text-align: center;
    }

    .ourServices .container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        justify-content: center;
        gap: 20px;
        grid-template-rows: max-content;
    }

        .ourServices .container .ourServicesBox {
            padding: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 30px;
            background-color: var(--card-backgrond);
            border-radius: 20px;
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            -ms-border-radius: 20px;
            -o-border-radius: 20px;
            position: relative;
            transition: 0.5s;
            -webkit-transition: 0.5s;
            -moz-transition: 0.5s;
            -ms-transition: 0.5s;
            -o-transition: 0.5s;
            cursor: pointer;
        }

            .ourServices .container .ourServicesBox::after {
                content: "";
                position: absolute;
                height: 2px;
                width: 0%;
                background-color: var(--main-color);
                left: 5%;
                top: -2px;
                transition: 0.5s;
                -webkit-transition: 0.5s;
                -moz-transition: 0.5s;
                -ms-transition: 0.5s;
                -o-transition: 0.5s;
            }

            .ourServices .container .ourServicesBox::before {
                content: "";
                position: absolute;
                height: 2px;
                width: 0%;
                background-color: var(--main-color);
                right: 5%;
                bottom: -2px;
                transition: 0.5s;
                -webkit-transition: 0.5s;
                -moz-transition: 0.5s;
                -ms-transition: 0.5s;
                -o-transition: 0.5s;
            }

            .ourServices .container .ourServicesBox:hover {
                transform: translateY(-15px);
                -webkit-transform: translateY(-15px);
                -moz-transform: translateY(-15px);
                -ms-transform: translateY(-15px);
                -o-transform: translateY(-15px);
            }

                .ourServices .container .ourServicesBox:hover::after,
                .ourServices .container .ourServicesBox:hover::before {
                    width: 90%;
                }

            .ourServices .container .ourServicesBox i {
                font-size: var(--larg-font-size);
                color: white;
            }

            .ourServices .container .ourServicesBox span {
                font-size: var(--larg-font-size);
                color: var(--main-color);
            }

            .ourServices .container .ourServicesBox p {
                margin: 0px;
                color: white;
                line-height: 1.5rem;
                font-size: var(--main-font-size);
                text-align:center;
            }

/* ///////////////////////////// Strart KeyFrames Section ////////////////////////////////// */

.unitSearchOutput {
    padding: 150px 0px 0px;
    background-color: var(--main-section-color);
    display: none;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
}

.offersSectionScreen {
    padding: 120px 0px 0px;
    background-color: var(--main-section-color);
    display: none;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
}

.container .cardsContainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 310px));
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
}

.container .searchOutputHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
    width: 100%;
    padding: 30px 0px;
}

.container .close {
    width: 100%;
    padding: 10px 20px;
}

    .container .close i {
        font-size: var(--larg-font-size);
        color: var(--text-black-white);
        cursor: pointer;
    }

.container .searchOutputHeader .mapBox {
    padding: 10px 40px;
    color: var(--main-color);
    border: 2px solid var(--main-color);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    background-color: transparent;
    font-size: 18px;
    font-weight: bold;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    cursor: pointer;
    text-decoration: none;
}

    .container .searchOutputHeader .mapBox:hover {
        background-color: var(--main-color);
        color: var(--text-black-white);
    }

    .container .searchOutputHeader .mapBox i {
        margin: 0px 5px;
        font-size: 18px;
    }

.container .searchOutputHeader .filterBox {
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    border-radius: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
    background-color: var(--main-color);
}

    .container .searchOutputHeader .filterBox .filter,
    .container .searchOutputHeader .filterBox .order {
        color: white;
        cursor: pointer;
        transition: 0.5s;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -ms-transition: 0.5s;
        -o-transition: 0.5s;
    }

    .container .searchOutputHeader .filterBox i {
        margin: 0px 5px;
    }

    .container .searchOutputHeader .filterBox .filter:hover,
    .container .searchOutputHeader .filterBox .order:hover {
        filter: brightness(70%);
        -webkit-filter: brightness(70%);
    }

.container .cardsContainer .card {
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    overflow: hidden;
    background-color: var(--card-color);
    border: 1px solid var(--border-card-color);
    cursor: pointer;
    position: relative;
    height:470px;
}

    .container .cardsContainer .card img {
        width: 100%;
        aspect-ratio: 2/1.25;
        object-fit: cover;
    }

    .container .cardsContainer .card .favoriteIcon {
        position: absolute;
        top: 15px;
        left: 15px;
        color: white;
    }
.fa-solid.fa-heart {
    color: darkred;
}

.fa-heart {
    font-size: 20px;
}

.container .cardsContainer .card .info {
    padding: 20px;
    width: 100%
}

        .container .cardsContainer .card .info .rateAndOffer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: var(--text-black-white);
            padding: 20px 0px;
        }

            .container .cardsContainer .card .info .rateAndOffer .icons {
                font-size: 16px;
                color: var(--main-color);
                margin: 0px 5px;
            }

        .container .cardsContainer .card .info .specialUnitsStatistics {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
        }

            .container .cardsContainer .card .info .specialUnitsStatistics span {
                padding: 10px;
                color: var(--text-black-white);
                font-size: 14px;
                background-color: rgba(0, 0, 0, 0.185);
                border-radius: 10px;
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                -ms-border-radius: 10px;
                -o-border-radius: 10px;
                width: 23%;
                text-align: center;
            }

        .container .cardsContainer .card .info p {
            font-size: var(--small-font-size);
            line-height: 1.5rem;
            color: var(--text-black-white);
        }



        .container .cardsContainer .card .info .price {
            font-size: var(--main-font-size);
            color: var(--text-black-white);
        }
        .container .cardsContainer .card .info h3.uintName {
            font-size: var( --larg-font-size);
            margin: 10px 0px;
            color: var(--text-black-white);
        }
        .orderContainer {
            display: none;
            position: fixed;
            inset: 0;
            background-color: rgba(0, 0, 0, 0.384);
            backdrop-filter: blur(10px);
            z-index: 999999;
        }

.orderBoxContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    inset: 0;
}

    .orderBoxContainer .orderBox {
        padding: 20px;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        background-color: var(--section-color);
        width: 600px;
    }

        .orderBoxContainer .orderBox .outputOrderHeader {
            border-bottom: 1px solid var(--main-color);
            position: relative;
        }

            .orderBoxContainer .orderBox .outputOrderHeader h1 {
                font-size: var(--Xlarg-font-size);
                color: white;
                margin: 0px;
                padding: 30px;
                width: 100%;
                text-align: center;
            }

            .orderBoxContainer .orderBox .outputOrderHeader i {
                position: absolute;
                top: 10px;
                left: 10px;
                font-size: var(--larg-font-size);
                color: white;
                cursor: pointer;
            }

        .orderBoxContainer .orderBox .outputOrderForm {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
        }

            .orderBoxContainer .orderBox .outputOrderForm .inputContainer {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 20px;
                gap: 20px;
                width: 100%;
            }

                .orderBoxContainer .orderBox .outputOrderForm .inputContainer span {
                    color: white;
                    font-weight: bold;
                    font-size: var(--larg-font-size);
                }

                .orderBoxContainer
                .orderBox
                .outputOrderForm
                .inputContainer
                input[type="radio"] {
                    width: 18px;
                    height: 18px;
                    border-radius: 50%;
                    accent-color: var(--main-color);
                    cursor: pointer;
                }

#displayInputsValue {
    font-size: var(--larg-font-size);
    color: var(--main-color);
    text-align: center;
}


/* /////////////////////////////////////////////////////////////////////////////////////////////// */

.filterContainer {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.384);
    backdrop-filter: blur(10px);
    z-index: 999999;
}

.filterBoxContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    inset: 0;
}

    .filterBoxContainer .filterBox {
        padding: 20px;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        background-color: var(--second-section-color);
        width: 600px;
        height: 80vh;
        overflow-y: auto;
    }

        .filterBoxContainer .filterBox::-webkit-scrollbar {
            width: 5px;
        }

        .filterBoxContainer .filterBox::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 25px;
        }

        .filterBoxContainer .filterBox::-webkit-scrollbar-thumb {
            background: #a5a5a5;
            border-radius: 25px;
        }

            .filterBoxContainer .filterBox::-webkit-scrollbar-thumb:hover {
                background: #b3b3b3;
            }

        .filterBoxContainer .filterBox .outputFilterHeader {
            border-bottom: 1px solid var(--main-color);
            position: relative;
        }

            .filterBoxContainer .filterBox .outputFilterHeader h1 {
                font-size: var(--Xlarg-font-size);
                color: white;
                margin: 0px;
                padding: 30px;
                width: 100%;
                text-align: center;
            }

            .filterBoxContainer .filterBox .outputFilterHeader i {
                position: absolute;
                top: 10px;
                left: 10px;
                font-size: var(--larg-font-size);
                color: white;
                cursor: pointer;
            }

        .filterBoxContainer .filterBox .outputFilterForm {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
        }

            .filterBoxContainer .filterBox .outputFilterForm > div:not(:last-child) {
                border-bottom: 2px solid #18131c;
                padding: 20px 0px;
            }

            .filterBoxContainer .filterBox .outputFilterForm > div {
                width: 100%;
            }

            .filterBoxContainer .filterBox .outputFilterForm .priceSection {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 10px;
                width: 100%;
            }

                .filterBoxContainer .filterBox .outputFilterForm .priceSection > div {
                    width: 100%;
                }


            /* ///////////////////////////// Strart KeyFrames Section ////////////////////////////////// */
            .filterBoxContainer .filterBox .outputFilterForm h2 {
                font-size: var(--header-font-size);
                color: white;
                margin-top: 0px;
                text-align: center;
            }

            .filterBoxContainer .filterBox .outputFilterForm .priceSection .price-input {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 20px;
            }

                .filterBoxContainer
                .filterBox
                .outputFilterForm
                .priceSection
                .price-input
                .field {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    gap: 5px;
                    overflow: hidden;
                }

                    .filterBoxContainer
                    .filterBox
                    .outputFilterForm
                    .priceSection
                    .price-input
                    .field
                    span {
                        width: max-content;
                        color: #ddd;
                    }

            .filterBoxContainer .filterBox .outputFilterForm .priceSection .field input {
                outline: none;
                font-size: 19px;
                border: none;
                text-align: center;
                width: 100px;
                background-color: transparent;
                color: #ddd;
            }

            .filterBoxContainer
            .filterBox
            .outputFilterForm
            .priceSection
            input[type="number"]::-webkit-outer-spin-button,
            .filterBoxContainer
            .filterBox
            .outputFilterForm
            .priceSection
            input[type="number"]::-webkit-inner-spin-button {
                -webkit-appearance: none;
            }

            .filterBoxContainer .filterBox .outputFilterForm .slider {
                height: 10px;
                position: relative;
                background: #ddd;
                border-radius: 5px;
                width: 100%;
            }

            .filterBoxContainer
            .filterBox
            .outputFilterForm
            .priceSection
            .slider
            .progress {
                height: 100%;
                left: 25%;
                right: 25%;
                position: absolute;
                border-radius: 5px;
                background: var(--main-color);
                opacity: 0.6;
            }

            .filterBoxContainer .filterBox .outputFilterForm .priceSection .range-input {
                position: relative;
            }

                .filterBoxContainer
                .filterBox
                .outputFilterForm
                .priceSection
                .range-input
                input {
                    position: absolute;
                    width: 100%;
                    height: 10px;
                    top: -10px;
                    background: none;
                    pointer-events: none;
                    -webkit-appearance: none;
                    -moz-appearance: none;
                }

            .filterBoxContainer
            .filterBox
            .outputFilterForm
            .priceSection
            input[type="range"]::-webkit-slider-thumb {
                height: 25px;
                width: 25px;
                border-radius: 50%;
                background: var(--main-color);
                pointer-events: auto;
                -webkit-appearance: none;
                box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
                position: relative;
                cursor: grab;
            }

            .filterBoxContainer
            .filterBox
            .outputFilterForm
            .priceSection
            input[type="range"]::-moz-range-thumb {
                height: 25px;
                width: 25px;
                border: none;
                border-radius: 50%;
                background: #17a2b8;
                pointer-events: auto;
                -moz-appearance: none;
                box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
                cursor: pointer;
            }

            .filterBoxContainer
            .filterBox
            .outputFilterForm
            .numberOfVehiclesSection
            .numberOfVehiclesForm,
            .filterBoxContainer
            .filterBox
            .outputFilterForm
            .capacitySection
            .capacityForm {
                width: 80%;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                flex-wrap: wrap;
                gap: 10px;
            }

                .filterBoxContainer
                .filterBox
                .outputFilterForm
                .capacitySection
                .capacityForm
                .inputContainer,
                .filterBoxContainer
                .filterBox
                .outputFilterForm
                .numberOfVehiclesSection
                .numberOfVehiclesForm
                .inputContainer {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    gap: 5px;
                    padding: 10px;
                    border-radius: 10px;
                    -webkit-border-radius: 10px;
                    -moz-border-radius: 10px;
                    -ms-border-radius: 10px;
                    -o-border-radius: 10px;
                    background-color: #ffffff46;
                    color: white;
                    font-size: var(--main-font-size);
                }

            .filterBoxContainer
            .filterBox
            .outputFilterForm
            .inputContainer
            input[type="radio"] {
                width: 18px;
                height: 18px;
                border-radius: 50%;
                accent-color: #2b65e2;
                cursor: pointer;
            }

            .filterBoxContainer
            .filterBox
            .outputFilterForm
            .advancedSearchSection
            .inputContainer {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: center;
                gap: 20px;
                margin: 20px 0px;
            }

                .filterBoxContainer
                .filterBox
                .outputFilterForm
                .advancedSearchSection
                .inputContainer
                label {
                    font-size: 18px;
                    color: white;
                }

                .filterBoxContainer
                .filterBox
                .outputFilterForm
                .advancedSearchSection
                .inputContainer
                .content
                .options {
                    max-height: 200px;
                }

            .filterBoxContainer .filterBox .outputFilterForm .displayButton {
                width: 100%;
                padding: 20px;
                text-align: center;
            }

                .filterBoxContainer .filterBox .outputFilterForm .displayButton button {
                    padding: 10px 40px;
                    font-size: var(--larg-font-size);
                    border-radius: 10px;
                    -webkit-border-radius: 10px;
                    -moz-border-radius: 10px;
                    -ms-border-radius: 10px;
                    -o-border-radius: 10px;
                    border: none;
                    background-color: var(--main-color);
                    color: white;
                    cursor: pointer;
                }

.pagenation {
    color: var(--main-color);
    font-size: var(--Xlarg-font-size);
    display: inline-block;
    width: 100%;
    margin: 100px auto 20px;
    text-align: center;
}

    .pagenation i {
        margin: 0px 10px;
        font-size: var(--larg-font-size);
        cursor: pointer;
    }

    .pagenation span {
        display: inline-block;
        transform: translateY(-5px);
        -webkit-transform: translateY(-5px);
        -moz-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
        -o-transform: translateY(-5px);
        margin: 0px 10px;
    }

.select-btn {
    height: 35px;
}

    .select-btn > span {
        color: #6c6c6d;
    }

.submitOrder {
    font-size: var(--larg-font-size);
    padding: 10px 40px;
    background-color: var(--main-color);
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 10px;
    transition: 00.5s;
    -webkit-transition: 00.5s;
    -moz-transition: 00.5s;
    -ms-transition: 00.5s;
    -o-transition: 00.5s;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

    .submitOrder:hover {
        transform: scale(1.05);
        -webkit-transform: scale(1.05);
        -moz-transform: scale(1.05);
        -ms-transform: scale(1.05);
        -o-transform: scale(1.05);
    }

/* ///////////////////////////// Strart KeyFrames Section ////////////////////////////////// */

@keyframes swipeLeft {
    from {
        transform: translateX(0%);
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
    }

    to {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
    }
}

@keyframes swipeRight {
    from {
        transform: translateX(0%);
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
    }

    to {
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
    }
}

@keyframes swipeUp {
    from {
        transform: translateY(0%);
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
        -o-transform: translateY(0%);
    }

    to {
        transform: translateY(-75%);
        -webkit-transform: translateY(-75%);
        -moz-transform: translateY(-75%);
        -ms-transform: translateY(-75%);
        -o-transform: translateY(-75%);
    }
}

@keyframes swipeDown {
    from {
        transform: translateY(0%);
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
        -o-transform: translateY(0%);
    }

    to {
        transform: translateY(75%);
        -webkit-transform: translateY(75%);
        -moz-transform: translateY(75%);
        -ms-transform: translateY(75%);
        -o-transform: translateY(75%);
    }
}

/* ///////////////////////////// Strart MediaQuery Section ////////////////////////////////// */

@media (max-width: 1200px) {
    .imageSlider .buttonLay .searchUnit form .inputContainer:nth-child(1) {
        display: none;
    }
}

@media (max-width: 991px) {
    .swiper-slide img {
        width: 100%;
        aspect-ratio: 4/3;
    }

    .imageSlider .buttonLay {
        padding: 15%;
    }

    .swiper-slide .overLay {
        justify-content: center;
        align-items: center;
        padding: 8% 6%;
    }

        .swiper-slide .overLay p {
            font-size: 25px;
            text-align: center;
            width: 80%;
        }

    .offers {
        padding: 100px 0px 50px;
    }

        .offers .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-direction: column;
            gap: 50px;
        }

            .offers .container > div {
                width: 100%;
            }

            .offers .container .offerSlider .swiper-wrapper .swiper-slide{
                height: 160px;
            }

                .offers
                .container
                .offerSlider
                .swiper-wrapper
                .swiper-slide
                .imageBox
                .offerLable {
                    position: absolute;
                    left: 5px;
                    top: 10px;
                    padding: 4px 10px;
                    font-size: 10px;
                }
                .offers
                .container
                .offerSlider
                .swiper-wrapper
                .swiper-slide
                .imageBox
                .unitNameInOffer {
                    padding: 4px 10px;
                    font-size: 12px;
                }

            .offers .container .offerSlider .swiper-wrapper .slideContainer .swiper-slide.imageBox img {
                height: 100%;
                width: 100%;
            }

    .whoAreWe .container {
        flex-direction: column;
    }

        .whoAreWe .container > div {
            width: 100%;
            text-align: center;
        }

        .whoAreWe .container .whoAreWeSlider {
            width: 70%;
        }

    .imageSlider .buttonLay .searchUnit {
        padding: 20px;
    }

        .imageSlider .buttonLay .searchUnit form {
            flex-wrap: wrap;
        }

            .imageSlider .buttonLay .searchUnit form .inputContainer:nth-child(2) {
                display: none;
            }

    .dateDropDown {
        width: 400px;
    }

    .orderBoxContainer .orderBox {
        padding: 20px;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        background-color: var(--second-section-color);
        width: 90%;
    }

    .filterBoxContainer .filterBox {
        width: 90%;
    }

        .filterBoxContainer
        .filterBox
        .outputFilterForm
        .numberOfVehiclesSection
        .numberOfVehiclesForm,
        .filterBoxContainer
        .filterBox
        .outputFilterForm
        .capacitySection
        .capacityForm {
            width: 100%;
        }

   
}

@media (max-width: 767px) {
    .swiper-slide .overLay p {
        font-size: 18px;
        text-align: center;
        width: 90%;
    }

    .offers .container .offerInfo p {
        width: 90%;
    }

    .specialUnits {
        padding-top: 300px;
    }

    .container .searchOutputHeader {
        flex-direction: column;
        justify-content: center;
        gap: 20px;
    }

    .imageSlider .buttonLay .searchUnit form {
        flex-direction: column;
    }

        .imageSlider .buttonLay .searchUnit form .inputContainer {
            width: 100%;
        }

    .container .cardsContainer {
        grid-template-columns: repeat(auto-fit, minmax(250px, 310px));
    }

    .unitSearchOutput {
        padding-top: 250px;
    }
}




/* ///////////////////////////// Strart MediaQuery Section ////////////////////////////////// */

@media (max-width: 1200px) {
    .imageSlider .buttonLay .searchUnit form .inputContainer:nth-child(1) {
        display: none;
    }
}

@media (max-width: 991px) {
    .swiper-slide img {
        width: 100%;
        aspect-ratio: 4/3;
    }

    .imageSlider .buttonLay {
        padding: 15%;
    }

    .swiper-slide .overLay {
        justify-content: center;
        align-items: center;
        padding: 8% 6%;
    }

        .swiper-slide .overLay p {
            font-size: 25px;
            text-align: center;
            width: 80%;
        }

    .offers {
        padding: 100px 0px 50px;
    }

        .offers .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-direction: column;
            gap: 50px;
        }

            .offers .container > div {
                width: 100%;
            }

            .offers .container .offerSlider .swiper-wrapper .swiper-slide{
                height: 160px;
            }
                .offers
                .container
                .offerSlider
                .swiper-wrapper
                .swiper-slide
                .imageBox
                .offerLable {
                    position: absolute;
                    left: 5px;
                    top: 10px;
                    padding: 4px 10px;
                    font-size: 10px;
                }
         

            .offers .container .offerSlider .swiper-wrapper .slideContainer .swiper-slide.imageBox img {
                height: 100%;
                width: 100%;
            }

    .whoAreWe .container {
        flex-direction: column;
    }

        .whoAreWe .container > div {
            width: 100%;
            text-align: center;
        }

        .whoAreWe .container .whoAreWeSlider {
            width: 70%;
        }

    .imageSlider .buttonLay .searchUnit {
        padding: 20px;
    }

        .imageSlider .buttonLay .searchUnit form {
            flex-wrap: wrap;
        }

            .imageSlider .buttonLay .searchUnit form .inputContainer:nth-child(2) {
                display: none;
            }

            .imageSlider .buttonLay .searchUnit form .inputContainer .dateDropDown {
                width: 400px;
            }

    .orderBoxContainer .orderBox {
        padding: 20px;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        background-color: var(--second-section-color);
        width: 90%;
    }

    .filterBoxContainer .filterBox {
        width: 90%;
    }

        .filterBoxContainer
        .filterBox
        .outputFilterForm
        .numberOfVehiclesSection
        .numberOfVehiclesForm,
        .filterBoxContainer
        .filterBox
        .outputFilterForm
        .capacitySection
        .capacityForm {
            width: 100%;
        }


}

@media (max-width: 1500px) {
    .container .cardsContainer {
     ;
        min-height: 110vh;
    }
}

@media (max-width: 767px) {
    .swiper-slide .overLay p {
        font-size: 18px;
        text-align: center;
        width: 90%;
    }

    .offers .container .offerInfo p {
        width: 90%;
    }

    .specialUnits {
        padding-top: 300px;
    }

    .container .searchOutputHeader {
        flex-direction: column;
        justify-content: center;
        gap: 20px;
    }

    .imageSlider .buttonLay .searchUnit form {
        flex-direction: column;
    }

        .imageSlider .buttonLay .searchUnit form .inputContainer {
            width: 100%;
        }

         

    .container .cardsContainer {
        grid-template-columns: repeat(auto-fit, minmax(250px, 310px));
    }

    .unitSearchOutput {
        padding-top: 250px;
    }
    .specialUnits {
        padding-left :  30px;
        padding-right : 30px;

    }
}