/* ____________________________________NEW CSS __________________________________ */

@import url('https://fonts.googleapis.com/css2?family=Kanit: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=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Parkinsans:wght@300..800&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=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

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

body {
    font-family: "Parkinsans", sans-serif;
}

:root {
    --primary-colors: #B0C4DE;
    --secondary-colors: #E5E4E2;
    --text-color: #373A40;
    --light-color: #F8F9D7;
    --tertiary-color: #2c3968;
}

h4 {
    color: var(--text-color);
}

.spad {
    margin-bottom: 50px;
    margin-top: 30px;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++__________NAVIGATION CSS ______________++++++++++++++++++++++++++++++++++ */
.topbar {
    background-color: #fff;
    padding: 7px;
 
    box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
}

.top-left {
    justify-content: start;
}

.top-right {
    display: flex;
    justify-content: space-around;
}

.nav .nav-item .nav-link {
    color: var(--text-color);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
}

.offcanvas_btn {
    /* background-color: var(--text-color); */
    color: var(--text-color);
    padding: 5px 10px;
    border-radius: 1px;
    font-size: 20px;
    border: 1px solid var(--text-color);
}

.btn-close {
    background-color: var(--primary-colors);
    border: 1px solid var(--text-color);
}

.offcanvas-header {
    background-color: var(--primary-colors);
}


/* -______________________________________FORM____________________________________ */

.select_form {
    background-color: #fff;
    padding: 10px 15px;
    min-height: 65vh;
    margin-bottom: 30px;
    box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
}

.select_form1 {
    min-height: 60vh;
}

.select_form p {
    padding-left: 20px;
}

h5 {
    color: var(--text-color);
    padding: 20px 0 10px 0;
    border-block-end: 1px var(--text-color) solid;
}

/*input {
    margin: 13px 0;
}*/

input[type=radio] {
    accent-color: var(--tertiary-color);
}


.submit_btn {
    border: none;
    background-color: #3dbf57;
    padding: 5px 15px;
    width: 100%;
    color: black;
}



.sign_up {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}

    .sign_up p {
        font-size: 18px;
    }

        .sign_up p a,
        .sign_up a {
            color: var(--tertiary-color);
        }

.sign_up_form {
    border: 2px solid var(--primary-colors);
}

/* _____________________________________________FOOTER_________________________________________ */
.vendor-title h4 {
    text-align: center;
}

.vendor-order {
    margin: 0 auto;
    width: 80%;
}

.about {
    background-color: var(--secondary-colors);
    padding: 20px;
    width: 95%;
    margin: 10px auto 70px;
}

footer {
    background-color: #fff;
    box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
}

.footer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 15px 0 0 0;
   
}

    .footer .footer-box {
        text-align: center;
    }

        .footer .footer-box a {
            color: var(--tertiary-color);
        }

        .footer .footer-box p {
            font-size: 13px;
            text-align: start;
        }

/* _____________________________________________DASHBOARD______________________________ */

.box-div {
    /*    background-color: var(--secondary-colors);*/
    background-color: #fff;
    padding: 15px 10px;
    width: 90%;
    margin: 0 auto;
    box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
}

    .box-div a {
        text-decoration: none;
    }



/* ____________________________________TASK CSS __________________________________ */
.task-spad {
    margin-bottom: 80px;
    margin-top: 30px;
}

.task-list input {
    background-color: var(--secondary-colors);
    padding: 11px 7px;
}

.task-box {
    padding: 5px 10px;
    background-color: #fff;
    margin: 10px 0;
    box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
}

    .task-box h6 {
        background-color: transparent;
        border-bottom: 1px solid var(--primary-colors);
        color: var(--text-color);
        font-weight: 600;
    }

/* ____________________________________Complain CSS__________________________________ */

.service-charges-vendor {
    background-color: #fff;
    margin: 8px auto;
    width: 95%;
    padding: 8px 12px;
    border-radius: 5px;
}


    .service-charges-vendor input, .service-charges-vendor input:focus {
        border: none;
        outline: none;
    }

    .service-charges-vendor textarea {
        background-color: var(--secondary-colors);
    }


.service-charges {
    display: flex;
    justify-content: space-around;
    background-color: var(--secondary-colors);
    width: 90%;
    margin: 8px auto;
    padding: 8px;
    border-radius: 5px;
}

    .service-charges:hover {
        box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
    }

    .service-charges .charges {
        color: rgb(156, 19, 19);
    }

.service {
    background-color: var(--secondary-colors);
    text-align: center;
    align-items: center;
    padding: 10px 5px;
    border-radius: 8px;
}

    .service a {
        color: var(--tertiary-color);
        text-decoration: none;
    }

.service-text h5 {
    border: none;
}

.bgcolor {
    background-color: white;
    width: 100%;
    border: 1px solid var(--primary-colors);
}

.gradient-bg {
    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,0.7147233893557423) 0%, rgba(9,9,121,0.5718662464985995) 35%, rgba(0,212,255,0.45702030812324934) 100%);
}

.about {
    /*  background-color: var(--secondary-colors);*/
    background-color: #fff;
    padding: 20px;
    width: 95%;
    margin: 10px auto 70px;
    box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
}

.gradient-bg h3 {
    color: white;
}


.shodow1 {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    background-color: #5f61e6;
    color: white;
    transition: .3s ease-in-out;
    font-size: 14px;
    padding: 3px 5px;
    text-decoration: none;
    border-radius: 4px;
    border: none;
}

    .shodow1:hover {
        color: whitesmoke;
        background-color: #4648cf;
    }

/*   for red button shodow2*/

.shodow2 {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    background-color: #f11212;
    color: white;
    transition: .3s ease-in-out;
    font-size: 14px;
    padding: 3px 5px;
    text-decoration: none;
    border-radius: 4px;
    border: none;
}

    .shodow2:hover {
        color: whitesmoke;
        background-color: #df1e1e;
    }


.sta {
    font-weight: bold;
    color: #0096ff;
}

.small-box1 {
    background-color: #add8e6;
}

.alert-dismissible .btn-close {
    padding: 5px;
    top: 12px;
    right: 1%;
    border: none;
    color: rgba(2,0,36,0.7147233893557423);
    background-color: #f1aeb5;
}

.msg {
    height: 60px;
}

.box-div1 {
    width: 200px;
    margin: 0 auto;
}

.sta1 {
    color: orangered;
    font-weight: bold;
}

.rating {
    color: #FFAA33;
}


/*   Layout css */

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(-20px);
    }
}

.fade-out {
    animation: fadeOut 1s forwards;
}

.sta1 {
    color: orangered;
    font-weight: bold;
}

.maxdiv {
    min-height: 53vh;
}