@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&family=Merienda:wght@300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Quicksand:wght@300..700&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

:root {
    --web_body_bg: #f4f5fa;
    --menu_bg_color: #18202d;
    --menu-text-color: #d1d1d1;
    --menu-active-txt: #7f8791;
    --orange: #e7362e;
    --title_text: #3d444f;
    --background: #121212;
    --text: #E0E0E0;
    --button: #E50914;
    --highlight: #B0B0B0;
    --notification: #FFC107;
    /* #00B8D4  sky blue*/
    /* #E50914  red */
    /* #FFC107  yellow */
    /* #129990  mixed green */
    /* #A0C878  light green */
    /* #E53888 pink */
    /* #ff6600 orange */
    /* #FF8383 sandle */
    /* #F72C5B dark pink */
    --hover: #022AC0;
    --green: rgb(0, 171, 0);
    --button-radius: 50%/10%;
    --sub_font: 'Merienda', cursive;
}

body {
    background: var(--background) !important;
    color: var(--text) !important;
    overflow-x: hidden;
}

.text-light-50 {
    color: #B1B8CC !important;
}

.text-justify {
    text-align: justify !important;
}

.menu-text {
    color: var(--menu-text-color) !important;
}

video {
    pointer-events: none;
    border: none;
    outline: none;
    background: transparent;
    display: block;
}

header {
    width: 100%;
    /* min-height: 100vh; */
    /* background: var(--background); */
}

/* breadcrumb */
.title-of-webpage {
    .breadcrumb {
        height: 50px;
        display: flex;
        align-items: center;

        .list-unstyled a {
            font-size: 12px;
        }
    }
}

/* custome-container */
.cus-container {
    width: 100%;
    padding-inline: 100px;
}

/* page title start */

.page-title {
    width: fit-content;
    height: fit-content;
    /* background: grey; */
    overflow: hidden;
    position: relative;

    h3 {
        padding-inline: 30px;
        padding-block: 10px;
        text-transform: uppercase;
        font-size: 15px;
    }

    .page-title-layer {
        width: 2px;
        height: 100%;
        background-color: var(--hover);
        position: absolute;
        top: 0px;
        right: 0px;
        transform: rotate(45deg);
    }

    .page-title-layer::before {
        content: '';
        width: 2px;
        height: 100%;
        background-color: var(--hover);
        position: absolute;
        bottom: 0px;
        right: 5px;
        /* transform: rotate(45deg); */
    }

    .page-title-layer-1 {
        width: 2px;
        height: 100%;
        background-color: var(--hover);
        position: absolute;
        top: 0px;
        left: 0px;
        transform: rotate(45deg);
    }

    .page-title-layer-1::before {
        content: '';
        width: 2px;
        height: 100%;
        background-color: var(--hover);
        position: absolute;
        bottom: 0px;
        left: 5px;
    }
}

/* ---------------------- header menu start  --------------------------- */

.navbar-header {
    width: 100%;
    height: 80px;
    background: var(--menu_bg_color);
    position: relative;
    border-bottom: 3px solid rgb(255, 255, 255);
    position: fixed;
    top: 0px;
    z-index: 9999;

    .border-layer {
        width: 200px;
        height: 1px;
        position: absolute;
        bottom: 0px;
        left: 100px;
        /* background:#ffffff; */
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    .inside-menu-layer {
        width: 255px;
        height: 100%;
        background: white;
        position: absolute;
        top: 0px;
        left: 0px;
        clip-path: polygon(0 0, 100% 0%, 60% 100%, 0% 100%);
    }

    .navbar-title {
        position: relative;
        width: 250px;
        padding-left: 30px;
        height: 100%;
        overflow: hidden;

        .menu-layer {
            width: 100%;
            height: 100%;
            background: #232e3e;
            position: absolute;
            left: 0px;
            clip-path: polygon(0 0, 100% 0%, 60% 100%, 0% 100%);
        }

        img {
            position: relative;
            z-index: 2;
        }
    }

    .menu-icon {
        height: 100%;
        display: flex;
        align-items: center;

        button {
            width: 40px;
            height: 100%;
            background: transparent;
            border: none;
            color: var(--text);
            margin-inline: 5px;
            font-size: 17px;
            position: relative;

            span {
                position: absolute;
                top: 45%;
                left: 80%;
                transform: translate(-45%, -80%);
                background: var(--hover);
                width: 20px;
                height: 20px;
                border-radius: 50%;
                font-size: 13px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
}


/* home page */

.home-page-bike {
    width: 100%;
    height: 300px;
    background: rgb(30, 30, 30);
    position: relative;
    box-shadow: 1px 1px 20px rgb(30, 30, 30);

    .left-side {
        width: 70%;
        height: 100%;
        clip-path: polygon(0 0, 24% 0, 93% 0, 100% 36%, 90% 100%, 0 100%);
        background: url(../img/images.jfif);
        background-size: 100% 100%;

        .inside-image-content {
            width: 100%;
            height: 100%;
            padding-left: 150px;
            /* background: linear-gradient(to right, var(--hover), #ffc107cb, #ffc10782); yellow */
            /* background: linear-gradient(to right, var(--hover), #129990b4, #1299905f); */
            /* background: linear-gradient(to right, var(--hover), #a0c878cc, #a0c87892); */
            /* background: linear-gradient(to right, var(--hover), #e53889c0, #e538897e); */
            /* background: linear-gradient(to right, var(--hover), #ff6600af, #ff660096); */
            /* background: linear-gradient(to right, var(--hover), #f72c5be6, #f72c5bb4); */
            background: linear-gradient(to right, var(--hover), #022bc0d8, #022bc0b7);
            display: flex;
            align-items: center;
        }

        h1 {
            font-size: 65px;
            font-weight: bold;
            color: white;
            text-transform: uppercase;
        }
    }

    .right-side {
        position: absolute;
        right: 10%;
        top: 0px;

        button {
            width: 150px;
            height: 35px;
            position: absolute;
            top: 50px;
            left: 500px;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            border: none;
            border-radius: 30px;
        }
    }
}

/* search section */

.search-container-spare {
    width: 100%;
    height: 550px;
    background: #ffffff;

    .top-search-content {
        width: 100%;
        height: 80px;

        /* background: #000; */
        .search-form {
            width: 100%;
            height: 35px;
            background: none;
            color: rgb(0, 0, 0);
            border: none;
            outline: none;
            border-bottom: 1px solid #000000;
        }
    }

    .bottom-container {
        width: 100%;
        height: calc(100% - 80px);
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        .all-content {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0px;
            left: 0px;

            .top {
                width: 100%;
                position: absolute;
                top: 0px;
                left: 0px;
            }

            .bottom {
                width: 100%;
                position: absolute;
                bottom: 0px;
                left: 0px;
            }

            .left {
                /* width:; */
                position: absolute;
                left: 0px;
                top: 0px;
            }

            .right {
                /* width:; */
                position: absolute;
                right: 0px;
                top: 0px;
            }

            .parts {
                p {
                    font-size: 14px;
                }

                p:nth-child(1) {
                    color: rgb(84, 84, 84);
                }

                p:nth-child(2) {
                    color: var(--text);
                    background-color: rgb(120, 120, 120);
                    padding-inline: 5px;
                    border-radius: 10px;
                }
            }

            .parts:hover {
                cursor: pointer;

                p:nth-child(1) {
                    color: var(--hover);
                }

                p:nth-child(2) {
                    background-color: var(--hover);
                }
            }
        }
    }
}

/* about */
.about-page {
    .image-about {
        width: 450px;
        height: 350px;
        display: flex;
        justify-content: end;
        position: relative;

        .layers {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0px;
            left: 0px;

            .layer {
                background: var(--hover);
                border-radius: 10px;
            }

            .top-left::after {
                content: '';
                width: 300px;
                height: 3px;
                position: absolute;
                border-radius: 10px;
                background: var(--hover);
                top: 10px;
                left: -10px;
            }

            .top-left {
                width: 3px;
                height: 70%;
                position: absolute;
                top: -10px;
                left: 0px;
            }

            .bottom-right {
                width: 3px;
                height: 70%;
                position: absolute;
                bottom: -10px;
                right: 0px;
            }

            .bottom-right::after {
                content: '';
                width: 300px;
                height: 3px;
                position: absolute;
                border-radius: 10px;
                background: var(--hover);
                bottom: 10px;
                right: -10px;
            }

        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            padding: 10px;
            position: relative;
        }
    }

    .about-content {
        width: 450px;

        .strong-text {
            color: var(--hover);
        }

        p.con {
            font-size: 13px;
            color: var(--text);
            font-weight: 400;
            text-align: justify;
            padding-inline: 20px;
            padding-block: 10px;
            position: relative;
        }

        p.con::before {
            content: '';
            width: 4px;
            height: 100%;
            display: block;
            background: linear-gradient(120deg, var(--hover), rgb(0, 167, 164));
            position: absolute;
            left: 0px;
            top: 0px;
        }

        .contact-us {
            border-top: 1px solid var(--menu-active-txt);

            .inside {
                height: 100px;
                width: 100%;
                display: flex;
                justify-content: space-evenly;
                align-items: center;

                button {
                    width: 150px;
                    height: 40px;
                    background: var(--hover);
                    color: var(--text);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 10px;
                    border: none;
                    border-radius: 30px;
                }

                .icon {
                    width: 40px;
                    height: 40px;
                    border: 1px solid var(--menu-active-txt);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 50%/10%;
                    color: var(--hover);
                    font-size: 23px;
                }

                .number {
                    .call-help {
                        font-size: 12px;
                        font-weight: 400;
                    }

                    .call-number {
                        font-size: 14px;
                    }
                }
            }
        }
    }
}


/* accessories */
.card-accessories {
    min-height: 150px;

    .img-card {
        width: 100%;
        height: 50%;

        img {
            width: 100%;
            height: 100px;
            object-fit: contain;
        }
    }

    .con-card {
        p {
            font-size: 20px;
            font-weight: 600;
            text-transform: uppercase;
        }
    }
}

/* extra */

.extra-tings {
    /* height: 400px; */
    display: flex;
    justify-content: end;
    align-items: end;

    .first-img {
        img {
            border-radius: 9px 0px 0px 9px;
        }
    }

    .third-img {
        img {
            border-radius: 0px 9px 9px 0px;
        }
    }

    .first-img,
    .third-img {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: end;
        align-items: center;

        img {
            width: 100%;
            height: 300px;
            /* object-fit: contain; */
        }
    }

    .second-img {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
            width: 100%;
            height: 500px;
            border-radius: 9px 9px 0px 0px;
            /* object-fit: contain; */
        }
    }
}

/* offer sales */
.offer-sales {
    width: 100%;
    height: 400px;
    background-image: url(../img/pexels-pixabay-207555.jpg);
    clip-path: polygon(0 10%, 100% 0%, 100% 91%, 0% 100%);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
    overflow: hidden;

    .layer {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.671);
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 1;
    }

    .img-layer {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        position: absolute;
        top: 50%;
        left: 10%;
        z-index: 0;
        transform: rotate(-45deg);

        /* animation: slide 5s linear infinite; */
        img {
            width: 150px;
            height: 150px;
            object-fit: cover;
        }
    }

    .img-layer:nth-child(2) {
        left: 30%;
    }

    .offer-sale-content {
        position: relative;
        z-index: 2;
    }

    .inside-product .offers {
        background: var(--notification);
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
        position: absolute;
        top: 10px;
        left: 10px;

        p {
            font-size: 20px;
            font-weight: 600;
            color: var(--text);
            text-transform: uppercase;
        }
    }

    .inside-product .cat-name {
        position: absolute;
        bottom: 10px;
        right: 10px;
        color: var(--text);
        font-size: 16px;
        padding-inline: 10px;
        font-weight: 400;
        text-transform: uppercase;
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.605);
    }
}

/* product */
.card.product-card {
    min-height: 400px;

    .product {
        height: 100%;

        .card-img {
            width: 100%;
            height: 250px;
            background: #efeded;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;

            .product-details {
                position: absolute;
                top: 5px;
                left: 5px;
                display: flex;
                gap: 5px;

                .data {
                    width: fit-content;
                    height: 30px;
                    color: var(--web_body_bg);
                    font-weight: 700;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 12px;
                    border-radius: 8px;
                    padding-inline: 5px;
                }

                .offers {
                    background: var(--notification);
                }

                .new {
                    background: var(--green);
                }
            }
        }

        .card-content {
            p {
                text-transform: capitalize;
            }

            .product-title {
                font-size: 14px;
                color: rgb(123, 123, 123);
                font-weight: 600;
                letter-spacing: 0.8px;
                padding-top: 5px;
            }

            .product-des {
                font-size: 15px;
                color: rgb(36, 36, 36);
                font-weight: 900;
                padding-block: 5px;
            }

            .price-card {
                p:nth-child(1) {
                    font-size: 16px;
                    color: rgb(0, 0, 0);
                    font-weight: 700;
                    letter-spacing: 0.8px;
                }

                p:nth-child(2) {
                    font-size: 15px;
                    color: rgb(0, 0, 0);
                    font-weight: 400;
                    padding-block: 5px;
                    text-decoration: line-through;
                }
            }

            .shipping-card {
                p {
                    font-size: 12px;
                    color: var(--hover);
                    font-weight: 600;
                    letter-spacing: 0.8px;
                    text-transform: uppercase;

                    i {
                        transform: rotateY(180deg);
                    }
                }
            }
        }
    }
}

/* testimonail */

/* .title-section-of-testimonial {
    .indicators {
        button {
            width: 40px;
            height: 40px;
            border-radius: var(--button-radius);
            border: none;
            color: var(--title_text);
            transition: all 0.1s ease;
            background-color: var(--web_body_bg);
        }

        button:hover {
            background: var(--hover);
            color: var(--web_body_bg);
        }
    }
} */
.testi-contents {
    width: 100vw;
    /* overflow-x: hidden; */
}


.inside-testimonial {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    /* transform: translateX(-40px); */
    .card-testi {
        min-width: 300px;
        height: 160px;
        background: rgb(255, 255, 255);
        padding: 10px;
        border-radius: 10px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
        /* border: 1px solid var(--text); */
        box-shadow: 0px 0px 10px rgba(156, 156, 156, 0.68);


        .content {
            p {
                font-size: 14px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                line-clamp: 4;
                -webkit-line-clamp: 4;
                overflow: hidden;
                color: rgb(83, 83, 83);
            }
        }

        p {
            text-align: justify;
            color: rgb(83, 83, 83);

        }

        .pro-testi {
            width: 100%;
            height: 50px;
            /* background: red; */
            display: flex;
            justify-content: space-between;
            align-items: center;

            .rating {
                i {
                    color: rgb(83, 83, 83);
                }

                i:nth-child(1) {
                    color: rgb(255, 204, 0);
                }

                i:nth-child(2) {
                    color: rgb(255, 204, 0);
                }

                i:nth-child(3) {
                    color: rgb(255, 204, 0);
                }
            }

            .img {
                img {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    object-fit: contain;
                }
            }
        }
    }
}

/* social followers */
.counter-section {
    height: 400px;
    width: 100%;
    background-color: white;
    border-radius: 10px;
    overflow: hidden;

    .top,
    .bottom {
        display: flex;
        height: 50%;
        position: relative;

        .border-layer {
            width: 100%;
            height: 5px;
            background-color: var(--background);
            position: absolute;
            top: 100%;
            left: 0px;
            transform: translateY(-100%);
        }

        .data:last-child {
            .title-hover {
                right: 40px;
            }
        }

        .data {
            width: calc(100% / 3);
            height: 100%;
            transform: skew(20deg);
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            position: relative;

            .title-hover {
                position: absolute;
                bottom: 0px;
                right: 10px;
                transform: skew(-20deg);
                color: rgb(135, 135, 135);
                font-weight: 500;
                text-transform: capitalize;
            }

            .icons {
                transform: skew(-20deg);
                width: 70px;
                height: 70px;
                font-size: 70px;
                display: flex;
                align-items: center;
                justify-content: center;

                .fa-instagram {
                    color: red;
                }

                .fa-facebook-f {
                    color: #3B5998;
                }

                .fa-twitter {
                    color: #1da1f2;
                }

                .fa-comment {
                    color: #535248;
                }

                .fa-person {
                    color: #4CAF50;
                }
            }

            .text-feild {
                transform: skew(-20deg);
                color: var(--background);
                font-size: 15px;
                font-weight: 400;
                /* line-height: 0px; */
                line-height: 90%;
                font-family: var(--sub_font);
            }

            .text-feild:not(.counter) {
                text-align: center;
            }

            .counter {
                font-size: 50px !important;
                font-weight: 700;
            }
        }

        .data:not(:last-child) {
            border-right: 5px solid var(--background);
        }
    }

    .bottom {
        .data {
            width: calc(100% / 2);
            border-bottom: none;
            transform: skew(20deg) translateX(0px);
        }
    }
}

/* .custome-container {
    padding-inline: 50px;
}

.social-followers {
    .card-social {
        background-color: var(--menu_bg_color);
        height: 70px;
        border-radius: 10px;
        position: relative;
        width: calc(100% / 3 - 50px);
        cursor: pointer;
    }

    .social-name {
        padding-left: 25px;
        font-size: 25px;
        text-transform: capitalize;
    }

    .icon {

        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        background: var(--hover);
        position: absolute;
        top: 50%;
        left: -25px;
        transform: translateY(-50%);

        i {
            font-size: 30px;
        }
    }

    .counting {
        display: none !important;
        padding-left: 25px;

        p {
            font-size: 25px;
            line-height: 1.2;
        }
    }
} */

/* faqs  */

.faqs .accordion-button::after {
    filter: brightness(0) invert(1);
}

/* our details */

.our-details {
    width: 95%;
    height: 100px;
    background: rgb(234, 231, 231);
    /* display: flex;
    justify-content: center;
    align-items: center; */
    position: absolute;
    left: 50%;
    top: 0px;
    transform: translate(-50%, -50%);
    overflow: hidden;
    /* box-shadow: 1px 1px 20px var(--hover); */

    .all-details {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    .data-detail {
        height: 100%;
        width: calc(100% / 4);

        .content-sec {

            p {
                color: var(--title_text);
            }

            p:nth-child(1) {
                font-size: 15px;
                font-weight: 600;
                text-transform: uppercase;
            }

            p:nth-child(2) {
                font-size: 13px;
                font-weight: 400;
                color: var(--title_text);
            }
        }
    }
}

/* footer */

footer {
    width: 100%;
    min-height: 300px;
    background-color: var(--menu_bg_color);

    .top-footer {
        width: 100%;
        padding-block: 20px;
        border-bottom: 1px solid var(--menu-active-txt);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 5px;

        h1 {
            font-size: 20px;
        }

        .input-feild {
            width: 50%;
            height: 35px;
            position: relative;

            input {
                width: 100%;
                height: 100%;
                border: none;
                outline: none;
                border-radius: 30px;
                padding-left: 10px;
            }

            button {
                width: 120px;
                height: 30px;
                border: none;
                background-color: var(--hover);
                border-radius: 30px;
                position: absolute;
                top: 50%;
                right: 2px;
                transform: translateY(-50%);
                color: var(--text);
            }
        }
    }

    .footer-section {
        display: flex;
        /* justify-content: center;
        align-items: center; */
        gap: 30px;

        .content-section:nth-child(1) {
            width: 400px !important;
        }

        .content-section:not(:nth-child(1)) {
            width: calc(100% / 3);

        }

        .content-section {
            min-height: 250px;

            .footer-title {
                font-weight: 600;
                color: var(--text);
                text-transform: uppercase;
                padding-block: 10px;

                /* text-align: center ; */
                h4 {
                    font-size: 18px;
                }
            }

            .menu-content {
                ul {
                    li {
                        height: 40px;
                    }

                    a {
                        text-transform: capitalize;

                        span {
                            padding-left: 10px;
                            transition: all 0.3s ease;
                        }
                    }

                    a:hover {
                        i {
                            color: var(--hover);
                        }

                        span {
                            padding-left: 15px;
                        }
                    }
                }
            }

            .icons {
                button {
                    width: 40px;
                    height: 40px;
                    background: white;
                    border: none;
                    color: var(--hover);
                    margin-inline: 5px;
                    font-size: 17px;
                    border-radius: var(--button-radius);
                    transition: all 0.3s ease;

                    i {
                        transition: all 0.3s ease;
                    }
                }

                button:hover {
                    transform: rotate(45deg) perspective(100px);
                    background: var(--hover);
                    color: white;

                    i {
                        transform: rotate(-45deg);
                    }
                }
            }
        }
    }

    .second-footer {
        width: 150px;
        height: 50px;
        background-image: url(../img/payments-removebg-preview.png);
        background-size: cover;
        background-position: center;
        border-radius: 10px;
        background-color: white;
    }
}

/* other home section */

.other-section {
    position: fixed;
    left: 100%;
    top: 50%;
    transform: translate(-100%, -50%);
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    .empty-content {
        button {
            width: 40px;
            height: 40px;
            background: var(--hover);
            color: white;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;

            span {
                display: none;
            }
        }

        button:hover {
            transition-delay: .3s;
            transition: .2s linear;
            text-align: left;
            width: fit-content;
            padding-right: 45px;

            i {
                padding-inline: 10px;
            }

            span {
                display: inline;
                font-weight: 250;
                font-size: 13px;
            }
        }
    }
}

/* chat bot */
.chatbot {
    position: fixed;
    bottom: 30px;
    right: 30px;

    .chat-bot-image {
        width: 60px;
        cursor: pointer;

        img {
            width: 100%;
        }
    }
}


.chat-bot {
    width: 300px;
    height: 75vh;
    background-color: rgba(255, 255, 255, 0.858);
    backdrop-filter: blur(10px);
    position: fixed;
    bottom: 30px;
    right: 30px;
    border-radius: 20px;
    overflow: hidden;
    transform: scale(0);
    transition: all 0.3s ease;
    transform-origin: right bottom;

    .header {
        height: 50px;
        width: 100%;
        background: var(--hover);
        border-bottom: 1px solid var(--hover);
        box-shadow: 1px 1px 10px var(--hover);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-inline: 10px;

        .left {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;

            img {
                width: 50px;
                height: 50px;
                border-radius: 50%/10%;
                object-fit: cover;
            }

            p {
                font-size: 12px;
            }
        }

        .right {
            button {
                width: 30px;
                height: 30px;
                background: transparent;
                border: none;
                color: var(--text);
                font-size: 20px;
                cursor: pointer;
            }
        }
    }

    .chat-box {
        width: 100%;
        height: calc(100% - 100px);
        overflow-y: auto;
        padding: 10px;
    }

    .sender {
        background-color: var(--menu-text-color);
        width: 100%;
        height: 50px;
        box-shadow: -1px -1px 10px var(--menu-text-color);

        .input-field {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-inline: 10px;

            input {
                width: calc(100% - 55px);
                height: 30px;
                border: none;
                outline: none;
                font-size: 13px;
                padding-left: 10px;
                border-radius: 8px;
            }

            button:first-child {
                width: 20px;
            }

            button {
                width: 30px;
                height: 30px;
                background: transparent;
                border: none;
            }
        }
    }
}

/* book services */
.booking-services {
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.563);
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 10000;
    backdrop-filter: blur(5px);
    display: none;
    justify-content: center;
    align-items: center;

    .booking-service-form {
        width: 1000px;
        height: 100%;
        background-color: var(--background);
        border: 1px solid var(--hover);
        border-radius: 10px;
        padding-inline: 10px;

        .title {
            height: 50px;
            display: flex;
            align-items: center;

            h5 {
                font-size: 20px;
                font-weight: 500;
                text-transform: capitalize;
            }
        }
    }

    .booking-form {
        width: 100%;
        height: calc(100vh - 100px);

        .left-side {
            width: 30%;
            height: 100%;
            border-right: 1px solid rgb(84, 84, 84);
            padding-right: 10px;

            .input-field {
                margin-block: 20px;

                label {
                    font-size: 14px;
                    font-weight: 500;
                    color: var(--text);
                    display: block;
                }

                input {
                    width: 100%;
                    height: 30px;
                    padding-inline: 10px;
                    color: var(--text);
                    outline: none;
                    background: transparent;
                    border: none;
                    border-bottom: 1px solid var(--text);
                }
            }
        }

        .right-side {
            width: 70%;
            height: 100%;
            padding-left: 10px;
            padding-top: 10px;

            .input-field {
                margin-block: 10px 10px;

                label {
                    font-size: 14px;
                    font-weight: 500;
                    color: var(--text);
                    display: block;
                }

                input:not(input[type='radio']),
                select {
                    width: 100%;
                    height: 30px;
                    padding-inline: 10px;
                    color: var(--text);
                    outline: none;
                    background: transparent;
                    border: none;
                    border-bottom: 1px solid var(--text);
                }
            }
        }
    }

    .buttons-book-services {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: end;
        align-items: center;
        gap: 10px;
    }
}