/* UTILS START */
:root {
    --border-radius-button: 5px;
    --border-radius: 10px;
    --border-radius-form-control: 5px;
    --border-radius-form-content: 10px;
    --box-shadow: 0px 2px 2px 0px #fff8f3;
    --transition: all 0.3s ease;
    --gradient-background: linear-gradient(180deg, #f9f9f9 0%, #d0d0d0 100%);
    --color-white: #ffffff;
    --color-light: #fcfcfc;
    --color-black: #000;
    --color-light-black: #1a1a1a;
    --color-gray: #c0c0c0;
    --color-orange: #fc940b;
    --color-success: #3fc443;
    --color-danger: #c9144e;
    --color-blue: #007aff;
    --color-light-gray2: #eff0f3;
    --color-label: #121212;
    --color-placeholder: #757575;
    --color-price: #585965;
    --line-height: 31px;
    --letter-spacing: 0.11px;
    --font-primary: "Open Sans", sans-serif;
    --font-secondary: "Montserrat", sans-serif;
}

.fl-flasher .fl-wrapper .fl-wrapper {
    z-index: 999999999999 !important;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: never;
    position: relative;
    font-family: var(--font-primary);
    overflow-x: hidden !important;
}



ul,
li {
    list-style: none;
}

.text-yellow {
    color: #ffc700;
}

.text-orange {
    color: #ff9501 !important;
}

.bg-blue {
    background: #0378ff !important;
}

.text-blue {
    color: #0378ff !important;
}

.text-orange {
    color: var(--color-orange);
}

.text-success {
    color: var(--color-success);
}

.text-danger {
    color: var(--color-danger);
}

.page {
    min-height: calc(100vh - 75px);
}

.fw-400 {
    font-weight: 400;
}

::-webkit-scrollbar {
    width: 7px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #ff9501;
    border-radius: 4px;
}

.bg-primary {
    background-color: #ff9501 !important;
}

.btn,
.btn-primary,
.button-primary {
    background-color: #ff9501 !important;
}

.text-shadow {
    text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 1px #000,
        0 0 1px var(--color-black);
}

.bg-black {
    background: var(--color-black) !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.form-select:focus,
.uneditable-input:focus,
input[type="color"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="datetime"]:focus,
input[type="email"]:focus,
input[type="month"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
input[type="week"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus,
textarea:focus {
    box-shadow: none !important;
    outline: 0 !important;
}

textarea {
    min-height: 100px !important;
}

ul li a,
button a {
    text-decoration: none !important;
}

.modal .modal-title {
    font-weight: 700;
    font-size: 14px;
}

.mb-4 {
    margin-bottom: 50px !important;
}

.bg-blue {
    background: #0378ff;
}

.create-request-card {
    position: relative !important;
}

.create-request-li {
    border-radius: 4px;
    height: 40px;
    display: flex;
    align-items: center;
}

.create-request-li:hover {
    background: #ff9501 !important;
    transition: var(--transition);
    color: white !important;
}

.form-check {
    min-height: 0px;
    min-width: 0px;
    display: flex;
    -webkit-box-align: stretch;
    align-items: stretch;
    flex: 0 0 auto;
    flex-flow: row;
    -webkit-box-flex: 0;
    -webkit-box-pack: start;
    justify-content: flex-start;
}

.form-check-input {
    background-color: var(--color-white);
    width: 20px;
    height: 20px;
    margin-right: 12px !important;
}

.form-check-label {
    font-size: 13px;
    font-weight: 400;
    line-height: 19.5px;
    text-align: left;
    color: var(--color-label);
    padding-top: 4px;
}

.success-form-title {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    color: rgb(14, 15, 17);
    font-family: __Figtree_3d843a, __Cairo_1b277e, system-ui, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
        "Segoe UI Symbol";
}

.success-form-desc {
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: rgb(106, 116, 130);
    font-family: __Figtree_3d843a, __Cairo_1b277e, system-ui, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
        "Segoe UI Symbol";
}

.form-floating-label {
    font-size: 13px;
    font-weight: 400;
    line-height: 19.5px;
    text-align: left;
    color: var(--color-label);
}

.form-content p {
    font-weight: 400;
    font-size: 20px;
}

.form-content-user p {
    font-weight: 400;
    font-size: 13px;
}

/*BUTTTONS START*/
button {
    border: none;
}

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

/*SM BUTTONS START*/
.button-secondary-sm {
    height: 40px;
    width: 100%;
    width: 100% !important;
    height: 100% !important;
    background: transparent;
    border: 1px solid var(--color-orange);
    border-radius: 6px;
}

.button-secondary-sm a {
    color: var(--color-white);
    font-size: 12px !important;
}

.button-primary-sm {
    height: 40px;
    width: 100%;
    background: #ff9501 !important;
    border-radius: 6px;
}

.button-primary-sm a {
    color: var(--color-white);
    font-size: 12px !important;
}

/*SM BUTTONS END*/

/*INFO BUTTON START*/

.button-info {
    background: var(--color-blue);
    color: var(--color-white);
    border-radius: var(--border-radius-button);
    transition: var(--transition);
}

.button-info:hover {
    background: var(--color-blue);
    opacity: 0.9;
    transition: var(--transition);
}

.button-info a {
    color: var(--color-white);
}

/*INFO BUTTON END*/

/*PRIMARY BUTTON START*/

.button-primary {
    background: #ff9501;
    color: var(--color-white);
    border-radius: var(--border-radius-button);
    transition: var(--transition);
}

.button-primary:hover {
    background: #ff9501;
    opacity: 0.9;
    transition: var(--transition);
}

.button-primary a,
.button-primary {
    color: var(--color-white);
    transition: var(--transition);
}

.button-primary a {
    color: var(--color-white);
}

.button-primary:hover a {
    color: var(--color-white);
    transition: var(--transition);
}

/*PRIMARY BUTTON END*/

.delete-button {
    background-color: transparent !important;
}

@media only screen and (min-width: 1024px) {
    .button-primary {
        background: #ff9501 !important;
        color: var(--color-white);
        transition: var(--transition);
    }

    .button-primary-authentication {
        border-radius: 40px !important;
    }

    .button-secondary {
        background: transparent;
        border: 1px solid var(--color-orange);
        color: var(--color-orange);
    }

    .button-secondary a {
        color: var(--color-orange);
    }

    .btn,
    .btn-primary,
    .button-primary,
    .button-secondary,
    .button-info {
        border-radius: var(--border-radius-button) !important;
        box-shadow: var(--box-shadow);
        transition: var(--transition);
        text-transform: uppercase;
        height: 50px !important;
        min-width: 140px !important;
    }

    /*BUTTONS END*/

    .delete-button {
        background-color: transparent !important;
    }

    @media only screen and (min-width: 1024px) {
        .delete-button {
            height: 45px;
            width: 45px;
        }
    }

    /*BUTTTONS END*/

    .slider-btn a,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: 600 !important;
    }

    .modal .modal-title,
    h6 {
        text-transform: uppercase;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: var(--font-secondary);
        font-weight: 600;
    }

    h1 {
        font-size: 64px;
        font-weight: 800;
        font-family: var(--font-secondary);
    }

    @media only screen and (max-width: 768px) {
        h1 {
            font-size: 45px;
        }
    }

    h2 {
        font-family: var(--font-secondary);
        font-weight: 600;
    }

    h3 {
        font-family: var(--font-secondary);
        font-weight: 600 !important;
        font-size: 24px;
        font-weight: 500;
        line-height: 31px;
        letter-spacing: 0.1120000034570694px;
        text-align: left;
    }

    h4 {
        font-family: var(--font-secondary);
        font-weight: 600;
        font-size: 20px;
    }

    h5 {
        font-family: var(--font-secondary);
        font-weight: 600;
    }

    h6 {
        font-size: 14px;
        font-family: var(--font-secondary);
        font-weight: 600;
    }

    .opacity-0 {
        opacity: 0;
    }

    /*FORM START*/
    label {
        font-size: 15px;
        font-weight: 500;
        line-height: 22.5px;
        text-align: left;
        margin-bottom: 10px;
        color: var(--color-label);
    }

    .label-bottom-description {
        font-size: 10px;
        font-weight: 400;
        line-height: 15px;
        text-align: left;
        color: var(--color-label);
    }

    .label-top-description {
        font-size: 15px;
        font-weight: 500;
        line-height: 22.5px;
        text-align: left;
        margin-bottom: 10px;
    }

    .form-desc {
        font-size: 16px !important;
        color: #fc940b;
        font-weight: 600;
        line-height: 24px;
    }

    .form-control,
    .form-select {
        background-color: #fff !important;
        margin-bottom: 14px;
        border: 1px solid #e8e8e8 !important;
        height: 42px;
        border-radius: var(--border-radius-form-control);
        -webkit-tap-highlight-color: transparent;
        background-color: #fff;
        border-radius: 5px;
        border: 1px solid #e8e8e8;
        box-sizing: border-box;
        clear: both;
        cursor: pointer;
        display: block;
        float: left;
        font-family: inherit;
        font-size: 14px;
        font-weight: 400;
        height: 42px;
        line-height: 40px;
        outline: 0;
        padding-left: 18px;
        padding-right: 30px;
        position: relative;
        text-align: left !important;
        -webkit-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        white-space: nowrap;
    }

    .form-check-input:checked {
        background-color: var(--color-orange) !important;
        border-color: var(--color-orange) !important;
    }

    .form-control::placeholder,
    .search-input::placeholder {
        font-size: 15px;
        font-weight: 400;
        line-height: 19.5px;
        text-align: left;
        color: var(--color-placeholder);
        font-family: "Raleway", sans-serif !important;
    }

    .intl-tel-input {
        display: table-cell;
    }

    .intl-tel-input .selected-flag {
        z-index: 4;
    }

    .intl-tel-input .country-list {
        z-index: 5;
    }

    .input-group .intl-tel-input .form-control {
        border-top-left-radius: 4px;
        border-top-right-radius: 0;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 0;
    }

    /*FORM END*/
    .alert-info {
        background: #007aff;
        font-family: var(--font-secondary);
        font-size: 20px;
        font-weight: 700;
        line-height: 24.38px;
        text-align: left;
        color: var(--color-white);
    }

    /*UTILS END*/

    /*SLIDER HOME START*/
    .slick-slider-home {
        height: 70vh;
    }

    .slick-slider-home-item {
        position: relative;
        z-index: 1;
        background-image: url("../images/slider-background.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        height: 70vh;
    }

    .slick-slider-home-item::after {
        position: absolute;
        z-index: 2;
        content: "";
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        opacity: 1;
        background: linear-gradient(180deg,
                rgba(144, 144, 144, 0.35) 0%,
                rgba(42, 42, 42, 0.4565) 40.5%,
                rgba(0, 0, 0, 0.5) 100%);
    }

    .slick-slider-home .slick-slider-home-item-inner {
        position: relative;
        z-index: 100;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .slick-slider-home .slick-slider-home-item-inner h1 {
        font-family: var(--font-secondary);
        line-height: 78.02px;
        text-align: left;
        color: var(--color-white);
    }

    .slick-slider-home .slick-slider-home-item-inner h2 {
        font-size: 20px;
        font-weight: 600;
        line-height: 31px;
        letter-spacing: 0.1120000034570694px;
        text-align: left;
        color: var(--color-white);
    }

    .FlexContainer {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        align-content: flex-start;
        width: 65%;
        height: 60vh;
        flex-direction: row;
    }

    @media only screen and (max-width: 540px) {
        .slick-slider-home {
            height: 50vh;
        }

        .slick-slider-home-item {
            height: 50vh;
        }

        .FlexContainer {
            height: 50vh;
            width: 100%;
        }
    }

    @media only screen and (min-width: 541px) and (max-width: 1024px) {
        .slick-slider-home {
            height: 50vh;
        }

        .slick-slider-home-item {
            height: 50vh;
        }

        .FlexContainer {
            height: 50vh;
        }
    }

    /*SLIDER HOME END*/

    /*SOCIAL FONT AWESOME ICONS START*/
    .fab {
        font-size: 20px;
    }

    .fa {
        font-size: 11px;
    }

    .fa-twitter:hover {
        color: #1da1f2 !important;
        transition: var(--transition);
    }

    .fa-instagram:hover {
        color: #cd486b !important;
        transition: var(--transition);
    }

    .fa-facebook:hover {
        color: #1877f2 !important;
        transition: var(--transition);
    }

    /*SOCIAL FONT AWESOME ICONS END*/

    /* UTILS END */

    /*PRELOADER START*/
    .preloader {
        display: flex;
    }

    .preloader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--color-black);
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }

    .preloader img {
        animation: 1.5s ease-in-out infinite alternate preloaderAnimation;
        max-width: 300px;
    }

    @keyframes preloaderAnimation {
        0% {
            transform: scale(1);
        }

        100% {
            transform: scale(1.2);
        }
    }

    /*PRELOADER START*/

    /*NAVBAR START*/
    .navbar {
        height: 74.5px !important;
        background: var(--color-gray);
        box-shadow: 0px 2px 1px 0px #00000033;
    }

    .navbar .nav-link {
        font-family: var(--font-primary);
        font-size: 13px;
        line-height: 15.73px;
        font-weight: 500 !important;
        color: var(--color-light-black) !important;
        margin-top: 10px;
    }

    @media only screen and (max-width: 768px) {
        .navbar .nav-link {
            color: var(--color-white) !important;
        }
    }

    @media only screen and (min-width: 768px) {
        .navbar {
            height: 74.5px !important;
            background: var(--color-gray) !important;
            box-shadow: 0px 2px 1px 0px #00000033;
        }
    }

    .navbar .nav-link:hover {
        transition: var(--transition);
        color: var(--color-blue) !important;
    }

    .nav-link.active {
        color: var(--color-blue) !important;
        font-weight: 600 !important;
    }

    .navbar-right-content a {
        margin-right: 7px;
    }

    .navbar .nav-item {
        margin-right: 28px;
        margin-bottom: -5px !important;
    }

    @media only screen and (min-width: 99px) and (max-width: 1200px) {
        .navbar .nav-item {
            margin-right: 2px;
        }

        .navbar-expand-md .navbar-nav .nav-link {
            font-size: 12px;
        }
    }

    @media only screen and (min-width: 769px) and (max-width: 992px) {
        .navbar-expand-md .navbar-nav {
            margin-right: 11px !important;
        }

        .navbar-expand-md .navbar-nav .nav-link {
            font-size: 13px;
        }
    }

    @media only screen and (max-width: 768px) {
        .text-justify {
            text-align: justify;
        }

        .navbar .nav-item,
        .navbar-right-content a {
            font-size: 10px !important;
        }

        .navbar {
            height: 60px;
        }

        .navbar-expand-md .navbar-nav {
            margin-right: -32px !important;
        }

        @media only screen and (max-width: 768px) {
            .navbar-expand-lg .navbar-nav {
                width: 100% !important;
                min-width: 100% !important;
                margin-right: 0px !important;
                box-shadow: 0px 2px 1px 0px #00000033;
                background: #c0c0c0;
                padding: 20px;
                border-radius: 4px;
            }
        }

        .navbar-expand-md .navbar-nav .nav-link {
            padding-left: 0 !important;
            padding-right: 0 !important;
            font-size: 10px;
        }

        .navbar-right-content a {
            margin-top: 20px !important;
            margin-right: 0;
        }
    }

    @media only screen and (min-width: 540px) and (max-width: 768px) {
        .navbar-right-content {
            margin-top: -17px !important;
        }

        .navbar-nav {
            margin-left: -6px !important;
        }
    }

    @media only screen and (min-width: 768px) {
        .navbar-collapse {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }

    .nav-item .content {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav-item .content .title {
        font-family: var(--font-secondary);
        font-size: 13px;
        font-weight: 600;
        line-height: 15.85px;
        text-align: center;
        color: #0378ff;
        border-bottom: 1px solid #0378ff;
    }

    .nav-item .content .description {
        font-size: 14px;
        font-weight: 400;
        line-height: 30px;
        color: #000 !important;
        text-decoration: none !important;
        text-align: center;
    }

    .menu-user-welcome {
        color: #939393;
        font-family: var(--font-secondary);
        font-size: 10px;
        font-weight: 500;
        line-height: 12.19px;
        text-align: left;
    }

    .menu-username {
        font-family: var(--font-secondary);
        font-size: 11px;
        font-weight: 500;
        line-height: 13.41px;
        text-align: left;
        color: var(--color-black);
    }
    /*NAVBAR END*/

    /*FOOTER START*/
    .footer {
        background: linear-gradient(180deg, #f9f9f9 0%, #d0d0d0 100%);
    }

    .footer-custom-grid {
        display: grid;
        gap: 2%;
        grid-template-columns: repeat(5, 1fr);
    }

    @media only screen and (min-width: 769px) and (max-width: 992px) {
        .footer-custom-grid {
            grid-template-columns: repeat(3, 1fr);
            gap: 5%;
        }
    }

    @media only screen and (max-width: 768px) {
        .footer-custom-grid {
            grid-template-columns: repeat(3, 1fr);
            gap: 5%;
        }
    }

    @media only screen and (max-width: 540px) {
        .navbar-expand-md .navbar-nav .nav-link {
            font-size: 16px;
            margin-bottom: 16px;
        }

        .navbar-right-content a {
            font-size: 16px !important;
        }

        .footer-custom-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media only screen and (max-width: 320px) {
        .footer-custom-grid {
            display: block !important;
        }
    }

    .footer-custom-grid-title {
        font-family: var(--font-secondary);
        font-size: 15px;
        font-weight: 600;
        line-height: 24px;
        letter-spacing: 0.1120000034570694px;
        text-align: left;
        color: var(--color-black);
    }

    footer p {
        font-family: var(--font-secondary);
        font-size: 12px;
        font-weight: 500;
        line-height: 20px;
        color: var(--color-black);
    }

    .footer .footer-custom-grid ul li {
        margin-bottom: 6px;
        list-style: none !important;
    }

    .footer ul li a {
        font-family: var(--font-secondary);
        font-size: 12px;
        font-weight: 500;
        line-height: 31px;
        letter-spacing: 0.1120000034570694px;
        text-align: left;
        color: var(--color-black);
    }

    .footer-bottom .footer-bottom-left-content ul li a {
        font-family: var(--font-secondary);
        font-size: 12px;
        font-weight: 400;
        line-height: 31px;
        letter-spacing: 0.1120000034570694px;
        text-align: left;
        color: var(--color-black);
    }

    .footer-bottom .footer-bottom-left-content ul li {
        list-style-type: circle !important;
    }

    .footer-bottom .footer-bottom-right-content p,
    .footer-bottom .footer-bottom-right-content a {
        font-size: 16px;
        font-weight: 500;
        line-height: 31px;
        letter-spacing: 0.1120000034570694px;
        color: var(--color-black);
    }

    .footer-bottom .footer-bottom-right-content a {
        text-decoration: underline !important;
    }

    /*FOOTER END*/

    /*COPYRIGHT START*/
    .copy a:hover,
    .footer ul li:hover a {
        transition: var(--transition);
        color: var(--color-blue);
    }

    .copy {
        background-color: var(--color-white) !important;
    }

    .copy a,
    .copy p {
        font-family: var(--font-secondary);
        font-size: 10px;
        font-weight: 400;
        line-height: 31px;
        letter-spacing: 0.1120000034570694px;
        color: var(--color-black);
    }

    /*COPYRIGHT END*/

    /*ROWS WITH ROUTES START*/

    .rows-with-routes .rows-with-routes-row {
        box-shadow: 0px 4px 4px 0px #0000001d;
        background: #fff;
        border-radius: var(--border-radius);
    }

    .rows-with-routes .rows-with-routes-row2 {
        box-shadow: 0px 4px 4px 0px #0000001d;
        background: #fff !important;
        border-radius: var(--border-radius);
    }

    .rows-with-routes .rows-with-routes-row .col-md-6 {
        padding: 0px !important;
    }

    .rows-with-routes .rows-with-routes-row .text-content .title {
        font-family: var(--font-primary);
        font-size: 24px;
        font-weight: 500;
        line-height: 29.05px;
    }

    .rows-with-routes .rows-with-routes-row .text-content .description {
        font-family: var(--font-secondary);
        font-size: 14px;
        font-weight: 500;
        line-height: 24px;
        letter-spacing: 0.1120000034570694px;
        text-align: left;
    }

    /*ROWS WITH ROUTES END*/

    /*SLOGAN START*/
    .slogan {
        background-image: url("../images/slogan-background.png");
        height: 100%;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        object-fit: cover;
        position: relative;
    }

    .slogan::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(0deg, #e4e4e4 0%, #7e7e7e 100%);
        opacity: 0.2;
    }

    .slogan .text-content .title {
        font-family: var(--font-primary);
        font-size: 64px;
        font-weight: 500;
        line-height: 77.45px;
        text-align: center;
        color: var(--color-white);
    }

    @media only screen and (max-width: 768px) {
        .slogan .text-content .title {
            font-size: 45px;
            line-height: 47.45px;
        }
    }

    .slogan .text-content strong {
        font-weight: 700;
    }

    .slogan .text-content .description {
        font-family: var(--font-secondary);
        font-size: 14px;
        font-weight: 500;
        line-height: 24px;
        letter-spacing: 0.1120000034570694px;
        text-align: left;
        color: var(--color-white);
    }

    /*SLOGAN END*/

    /*POPULAR SERVICES START*/
    .popular-services {
        height: 100%;
    }

    .popular-services-row {
        display: grid;
        gap: 4%;
        grid-template-columns: repeat(4, 1fr);
    }

    @media only screen and (min-width: 769px) and (max-width: 992px) {
        .popular-services-row {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    @media only screen and (max-width: 768px) {
        .popular-services-row {
            grid-template-columns: repeat(2, 1fr);
            gap: 5%;
        }
    }

    @media only screen and (max-width: 475px) {
        .popular-services-row {
            grid-template-columns: repeat(1, 1fr);
        }
    }

    .popular-services-row ul li {
        list-style: none;
        margin-bottom: 16px;
    }

    .popular-services-row ul li:hover a {
        color: var(--color-orange);
        transition: var(--transition);
    }

    .popular-services-row ul li a {
        font-family: var(--font-secondary);
        font-size: 18px;
        font-weight: 400;
        line-height: 31px;
        letter-spacing: 0.1120000034570694px;
        text-align: left;
        color: var(--color-black);
    }

    /*POPULAR SERVICES END*/

    /*HOW TO USE START*/

    .how-to-use .how-to-use-card {
        --borderWidth: 1px;
        position: relative;
        border-radius: var(--borderWidth);
        position: relative;
        background: var(--color-white);
        background: linear-gradient(180deg, #fcfcfc 0%, #e6e6e6 100%);
        box-shadow: 0px 4px 4px 0px #00000040;
        min-height: 520px;
    }

    .how-to-use .how-to-use-card:after {
        content: "";
        position: absolute;
        top: calc(-1 * var(--borderWidth));
        left: calc(-1 * var(--borderWidth));
        height: calc(100% + var(--borderWidth) * 2);
        width: calc(100% + var(--borderWidth) * 2);
        background: linear-gradient(60deg,
                #e6e6e6,
                #d3d3d3,
                #d3d3d3,
                #bab9b9,
                #bab9b9,
                #fcfcfc,
                #bab9b9,
                #fcfcfc);
        border-radius: calc(2 * var(--borderWidth));
        z-index: -1;
        animation: animatedgradient 3s ease alternate infinite;
        background-size: 300% 300%;
    }

    @keyframes animatedgradient {
        0% {
            background-position: 0% 50%;
        }

        50% {
            background-position: 100% 50%;
        }

        100% {
            background-position: 0% 50%;
        }
    }

    .how-to-use .how-to-use-card .number {
        font-family: var(--font-secondary);
        font-size: 24px;
        font-weight: 600;
        line-height: 31px;
        letter-spacing: 0.1120000034570694px;
        text-align: left;
        color: var(--color-orange);
    }

    .how-to-use .how-to-use-card .title {
        font-family: var(--font-secondary);
        font-size: 24px;
        font-weight: 600;
        line-height: 31px;
        letter-spacing: 0.1120000034570694px;
        text-align: left;
        color: var(--color-black);
    }

    .how-to-use .how-to-use-card .description {
        font-size: 16px;
        font-weight: 400;
        line-height: 31px;
        letter-spacing: 0.1120000034570694px;
        text-align: center;
        color: var(--color-black);
    }

    /*HOW TO USE END*/

    /* SERVICES START*/
    .services-card {
        border-radius: 10px;
        box-shadow: 1px 1px 2px 1px #00000040;
    }

    .main-container {
        position: relative;
        width: 100%;
        height: 500px;
        margin-bottom: -40px!important;
    }

    .image {
        position: relative;
        background-image: url("../images/trend-service-image.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        height: 200px;
        z-index: -1;
        border-top-left-radius: var(--border-radius);
        border-top-right-radius: var(--border-radius);
    }

    .overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 10px;
        box-shadow: 1px 1px 2px 1px #00000040;
        background-color: rgba(0, 0, 0, 0.75);
        overflow: hidden;
        width: 100%;
        height: 0;
        transition: 0.5s ease;
        z-index: 99 !important;
    }

    .main-container {
        height: 100%;
    }

    .main-container:hover .overlay {
        height: 100%;
    }

    .overlay .content {
        position: absolute;
        margin-top: 0%;
        text-align: center;
        width: 100%;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        height: 100%;
    }

    .overlay .content .list-content {
        position: absolute;
        margin-top: 0%;
        text-align: center;
        width: 100%;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        height: 100%;
        height: 350px;
    }

    .services-card:hover .bottom-content {
        opacity: 0;
    }

    .overlay .content ul {
        margin: 0px !important;
        padding: 0px !important;
    }

    .overlay .content ul li {
        list-style: none !important;
    }

    .overlay .content ul li {
        border: 1px solid var(--color-white);
        color: var(--color-dark);
        font-size: 11px;
        font-weight: 400;
        line-height: 22px;
        letter-spacing: 0.1120000034570694px;
        text-align: left;
        margin-top: 20px;
        border-radius: 5px;
        padding-left: 10px;
        background-color: var(--color-white) !important;
        border: 1px solid var(--color-white) !important;
    }

    .services-card-hover-overlay-content ul {
        list-style: none;
        margin: 0px !important;
        padding: 0px !important;
    }

    .services-card-inner1 {
        position: relative;
        background-image: url("../images/trend-service-image.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        height: 400px;
        z-index: -1;
        border-radius: var(--border-radius);
        box-shadow: 0px 4px 4px 0px #00000040;
        background-size: cover;
    }

    .services .services-card img {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        box-shadow: 1px 1px 2px 1px #00000040;
    }

    .services .services-card .bottom-content {
        box-shadow: 0px 4px 4px 0px #00000040;
        background: var(--color-light);
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
    }

    .services .services-card .title {
        font-family: var(--font-primary);
        font-size: 15px;
        font-weight: 500;
        line-height: 31px;
        letter-spacing: 0.1120000034570694px;
        text-align: left;
        color: var(--color-orange);
        text-transform: capitalize !important;
    }

    .services .services-card .description {
        font-family: var(--font-primary);
        font-size: 13px;
        font-weight: 500;
        line-height: 31px;
        letter-spacing: 0.1120000034570694px;
        text-align: left;
        color: var(--color-black);
    }

    .services-bottom-link {
        font-size: 13px;
        font-weight: 400;
        line-height: 31px;
        letter-spacing: 0.1120000034570694px;
        text-align: left;
        color: #929292 !important;
        text-decoration: none !important;
    }

    /* SERVICES END*/

    /*BREADCRUMB START*/
    .breadcrumb {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 350px;
        z-index: 1;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }


    .breadcrumb::after {
        position: absolute;
        z-index: 2;
        content: "";
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        opacity: 1;
        background: linear-gradient(180deg,
                rgba(144, 144, 144, 0.35) 0%,
                rgba(42, 42, 42, 0.4565) 40.5%,
                rgba(0, 0, 0, 0.5) 100%);
    }

    .breadcrumb-inner {
        position: relative;
        z-index: 100;
        height: 320px;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 3;
    }

    .breadcrumb-inner h1 {
        color: var(--color-white);
    }

    @media only screen and (max-width: 767px) {
        .breadcrumb-inner h1 {
            font-size: 34px !important;
        }
    }

    /*BREADCRUMB END*/

    /*LOGIN START*/
  
    .login .login-card,
    .register .register-card,
    .forgot-password .forgot-password-card {
        border: 1px solid #e3e3e3;
        box-shadow: 0px 4px 4px 0px #00000040;
        background: var(--color-light);
        border-radius: 40px;
        width: 100%;
        max-width: 512px;
    }

    .login .login-card h1,
    .register .register-card h1,
    .forgot-password .forgot-password-card h1 {
        font-family: var(--font-secondary);
        font-size: 24px;
        font-weight: 600;
        line-height: 31px;
        letter-spacing: 0.1120000034570694px;
        text-align: left;
        color: var(--color-orange);
        border-bottom: 2px solid var(--color-orange);
        padding-bottom: 8px;
    }

    .login .login-card .forgot-password-text,
    .forgot-password .forgot-password-card .forgot-password-text {
        font-size: 13px;
        font-weight: 500;
        line-height: 19.5px;
        text-align: left;
        color: var(--color-placeholder);
    }

    .login .login-card label,
    .register .register-card label,
    .forgot-password .forgot-password-card label,
    .forgot-password-text {
        color: #0378ff !important;
        font-weight: 600 !important;
        font-size: 15px !important;
    }

    /*LOGIN END*/

    /*REGISTER START*/
    .register .register-card .description {
        font-size: 15px;
        font-weight: 400;
        line-height: 31px;
        letter-spacing: 0.1120000034570694px;
        text-align: left;
        color: var(--color-black);
    }

    .form-bottom-text-button {
        position: relative;
        text-align: center;
    }

    .form-bottom-text-button::before,
    .form-bottom-text-button::after {
        content: "";
        position: absolute;
        top: 26%;
        width: 10%;
        height: 1px;
        background-color: var(--color-orange);
    }

    .form-bottom-text-button::before {
        left: -30px;
    }

    .form-bottom-text-button::after {
        right: -30px;
    }

    .form-bottom-text-button p {
        color: var(--color-black);
        font-size: 12px;
        font-weight: 600;
        line-height: 18px;
        text-align: left;
    }

    .form-bottom-text-button a {
        color: var(--color-orange);
        font-size: 12px;
        font-weight: 600;
        line-height: 18px;
        text-align: left;
    }

    /*REGISTER END*/

    /*FORGOT PASSWORD START*/

    .forgot-password-form-bottom-text {
        font-size: 13px;
        font-weight: 400;
        line-height: 30px;
        text-align: left;
        color: var(--color-orange);
    }

    .forgot-password-form-bottom-clock {
        font-size: 13px;
        font-weight: 400;
        line-height: 19.5px;
        color: var(--color-placeholder);
    }

    /*FORGOT PASSWORD END*/

    /*CREATE REQUEST START*/
    .bg-dark-gray {
        background: #404259 !important;
        height: 100vh;
    }

    .bg-image-create-request {
        position: relative;
        z-index: 1;
        background-image: url("../images/slider-background.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        // height: 100vh;
    }

    .create-request-name-text-icon-content {
        background-color: rgb(231, 250, 201);
        overflow: hidden;
        border-radius: 20px;
        height: 40px;
        width: 40px;
        min-height: 0px;
        min-width: 0px;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        flex: 0 0 auto;
        flex-flow: column;
        -webkit-box-flex: 0;
        -webkit-box-pack: center;
        justify-content: center;
    }

    /*CREATE REQUEST END*/

    /*CREATE REQUEST CARD START*/
    .create-request .create-request-card {
        border: 1px solid rgb(227, 229, 232);
        box-shadow: 0px 2px 2px 0px rgb(227, 229, 232);
        background: var(--color-light);
        border-radius: 8px;
        width: 612px;
        min-height: 670px;
        border-radius: 40px;
    }

    @media only screen and (max-width: 540px) {
        .create-request .create-request-card {
            width: 100%;
            min-height: 400px;
        }
    }

    .create-request .create-request-card .form-content {
        font-size: 13px;
        font-weight: 400;
        line-height: 18px;
        text-align: left;
        color: var(--color-black);
    }

    .create-request .create-request-card .header h1 {
        color: var(--color-black);
        font-family: var(--font-secondary);
        font-size: 24px !important;
        font-weight: 700 !important;
        line-height: 20px;
        text-align: left;
        position: relative;
        padding-bottom: 10px;
    }

    .create-request .create-request-card .flex-title {
        border-bottom: 3px solid #ff9501;
    }

    .create-request .create-request-card .header .price-range {
        font-family: var(--font-secondary);
        font-size: 13px;
        font-weight: 400;
        line-height: 48px;
        text-align: left;
        color: var(--color-price);
    }

    .other-price-input {
        display: none;
    }

    .create-request .create-request-card .header .top-header {
        border-bottom: 4px solid var(--color-orange);
    }

    .create-request .create-request-card .header .see-service-profile {
        color: var(--color-black);
        font-family: var(--font-secondary);
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 20px;
        text-align: left;
    }

    .create-request .create-request-card .header h2 {
        color: var(--color-black);
        font-family: var(--font-secondary);
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 20px;
        text-align: left;
    }

    .create-request .create-request-card .header .price {
        font-family: var(--font-secondary);
        font-size: 24px;
        font-weight: 700;
        line-height: 48px;
        text-align: left;
        color: var(--color-price);
    }

    .create-request .create-request-card .form-content .title {
        font-family: var(--font-secondary);
        font-size: 26px;
        font-weight: 700 !important;
        line-height: 34.43px;
        text-align: center;
        color: #333;
        margin-bottom: 20px !important;
        margin-top: -20px;
        display: flex;
        justify-content: center;
    }

    .create-request-card-form-check-input {
        width: 100%;
        border: 1px solid red;
        background: white;
    }

    .form-check {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    .form-check-input {
        position: static !important;
        margin-top: 0;
        margin-right: 10px;
    }

    .form-check-label {
        margin: 0;
    }

    .create-request .create-request-card .form-content .description {
        font-size: 13px;
        font-weight: 400;
        line-height: 18px;
        text-align: center;
        color: #9c9da9;
        margin-bottom: 35px !important;
    }

    .request-card-detail {
        box-shadow: 0px 1px 1px 0px #00000040;
        border: 1px solid #c5c6cd;
        background: var(--color-white);
        height: 150px;
        overflow-y: auto;
        border-radius: 10px;
    }

    .request-card-detail .title {
        font-family: var(--font-secondary);
        font-size: 13px;
        font-weight: 700;
        line-height: 15.85px;
        color: var(--color-black);
    }

    .request-card-detail .description {
        font-size: 13px;
        font-weight: 400;
        line-height: 18px;
        color: var(--color-black);
    }

    /*CREATE REQUEST CARD END*/

    /*PROFILE START*/
    .payment-method-title {
        font-size: 18px;
        font-weight: 600;
        line-height: 21px;
        text-align: left;
        color: var(--color-black);
    }

    .payment-method-card {
        border: 1px solid #b5b5b5;
        box-shadow: 0px 2px 2px 0px #e6e6e6;
        background: #e6e6e6;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
    }

    .payment-method-card .form-check-label {
        font-size: 16px !important;
        font-weight: 600;
    }

    .customProfileOuter {
        width: 100%;
        min-height: 50vh;
        float: left;
    }

    .customProfileInner {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 15px;
        padding: 15px 0px;
    }

    .customProfileSidebar {
        width: 330px;
        border: 1px solid #ddd;
        box-shadow: 0px 5px 15px 0px #ddd;
        border-radius: 10px;
        float: left;
        display: flex;
        align-items: center;
        justify-content: start;
        flex-direction: column;
        gap: 10px;
        min-height: 115vh;
    }

    .customProfileContentsOuter {
        flex: 1;
        min-height: 10px;
        float: left;
    }

    .customProfileSidebarImage {
        width: 70px;
        height: 70px;
        background-color: #dadada;
        border-radius: 50%;
        float: left;
    }

    .customSidebarInfıbox {
        width: 100%;
        min-height: 10px;
        height: 86px;
        float: left;
        margin-bottom: 15px;
        background-color: var(--color-orange);
        box-shadow: 0px 2px 3px 0px #0000001a;
        box-shadow: 0px 2px 3px 0px #0000001a;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        padding: 10px 20px;
    }

    @media only screen and (max-width: 768px) {
        .customSidebarInfıbox {
            height: 130px;
        }
    }

    .customSidebarInfıbox span {
        font-family: var(--font-secondary);
        font-size: 15px;
        font-weight: 500;
        line-height: 18.29px;
        color: var(--color-white);
    }

    .customSidebarInfıbox a {
        font-family: var(--font-secondary);
        font-size: 15px;
        font-weight: 700;
        color: var(--color-white) !important;
    }

    .customSidebarInfıbox img {
        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(4061%) hue-rotate(154deg) brightness(114%) contrast(94%);
    }

    .customSidebarMenuline {
        min-width: 100%;
        text-decoration: none !important;
        min-height: 10px;
        float: left;
        gap: 10px;
        cursor: pointer;
        margin-bottom: 20px;
    }

    .customSidebarMenulineIcon {
        width: 25px;
        height: 25px;
        float: left;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        color: #333;
    }

    .customSidebarMenulineIcon img {
        width: 25px;
        height: 25px;
    }

    .customSidebarMenulineIconFilter {
        filter: brightness(0) saturate(100%) invert(51%) sepia(1%) saturate(4176%) hue-rotate(52deg) brightness(97%) contrast(87%);
    }

    .customSidebarMenuLineText {
        font-size: 14px;
        font-weight: 400;
        line-height: 30px;
        text-align: left;
        color: var(--color-black);
        text-decoration: none !important;
    }

    .customSidebarMenuLineText .cuzdan-tl-yukle-content {
        background: #f0f0f0;
        border: 0.5px solid #fc940b;
        box-shadow: 0px 4px 4px 0px #00000040;
        border-radius: 10px;
        height: 60px;
        padding: 10px;
        margin-bottom: -25px !important;
        margin-top: -25px !important;
    }

    .customSidebarMenuLineText .cuzdan-tl-yukle-content .title {
        font-family: var(--font-secondary);
        font-size: 13px;
        font-weight: 700;
        line-height: 19.5px;
        text-align: left;
        color: var(--color-black);
        text-decoration: none !important;
    }

    .customSidebarMenuLineText .cuzdan-tl-yukle-content .price {
        font-family: var(--font-secondary);
        font-size: 16px;
        font-weight: 600;
        line-height: 19.5px;
        text-align: center;
        color: var(--color-orange);
    }

    .customSidebarMenuLineText .cuzdan-tl-yukle-content .plus {
        background: var(--color-orange);
        border-radius: 50%;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .customSidebarMenuLineText .cuzdan-tl-yukle-content .amount {
        background: #7d7d7d;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .customSidebarMenuLineTitle {
        font-family: var(--font-secondary);
        font-size: 20px;
        font-weight: 700;
        line-height: 24.38px;
        text-align: left;
        color: var(--color-black);
    }

    @media only screen and (max-width: 1024px) {

        .ga-10,
        .ga-8 {
            gap: 1rem !important;
        }

        .sidebar-icon {
            width: 24px;
            height: 24px;
            object-fit: contain;
        }

        .nav-pills .nav-link {
            font-size: 16px;
        }

        .profile .sidebar {
            min-height: 100vh;
        }
    }

    @media only screen and (max-width: 768px) {
        .customProfileInner {
            flex-direction: column;
        }

        .customProfileContentsOuter {
            display: block;
            width: 100% !important;
        }
    }

    @media only screen and (max-width: 992px) and (max-width: 1024px) {
        .customProfileSidebar {
            width: 280px;
        }

        .customSidebarInfıbox {
            padding: 30px 10px;
        }
    }

    @media only screen and (max-width: 768px) {
        .customProfileSidebar {
            width: 100%;
            min-height: 30vh;
        }

        .customSidebarInfıbox {
            padding: 30px 10px;
        }
    }

    @media only screen and (max-width: 475px) {
        .customProfileSidebar {
            width: 100%;
            min-height: 50vh;
        }

        .customSidebarInfıbox {
            padding: 50px 10px;
        }
    }

    @media only screen and (max-width: 992px) {
        .profile .sidebar {
            min-height: 150vh;
        }
    }

    @media only screen and (max-width: 475px) {
        .nav-pills .nav-link {
            font-size: 12px;
        }

        .customSidebarMenuLineContent {
            display: flex;
            flex-wrap: wrap;
        }
    }

    .nav-pills .nav-link.active,
    .nav-pills .show>.nav-link {
        color: #fff !important;
        background-color: #fff !important;
        border-color: #ff9501 !important;
    }

    .nav-pills .nav-link.active,
    .nav-pills .show>.sidebar-icon {
        color: #f90 !important;
    }

    .profile .sidebar .user-email {
        font-size: 16px;
        line-height: 15px;
        font-weight: 500;
        color: var(--color-black) !important;
    }

    .pagination {
        border: none !important;
    }

    .page-link {
        border: none !important;
    }

    /* SSS ACCORDION START */
    .accordion-button:not(.collapsed) {
        color: var(--color-white) !important;
        background-color: var(--color-orange) !important;
    }

    .accordion-button {
        font-size: 1rem;
        font-weight: 600 !important;
    }

    .accordion-body {
        font-size: 14px !important;
    }

    /* SSS ACCORDION END */

    /* PROFILE REQUESTS START */
    .profile-requests .title {
        font-size: 20px;
        font-weight: 500;
        line-height: 30px;
        text-align: left;
        color: var(--color-orange);
    }

    .profile-requests .description {
        font-size: 15px;
        font-weight: 500;
        line-height: 30px;
        text-align: left;
        color: var(--color-white);
    }

    /* PROFILE REQUESTS END */

    /*PROFILE TAB START */
    .nav-tabs {
        margin: 0px !important;
        padding: 0px !important;
    }

    .nav-tabs .nav-item.show .nav-link,
    .nav-tabs .nav-link.active {
        color: var(--bs-nav-tabs-link-active-color);
        background-color: transparent !important;
        border: none !important;
        color: var(--color-black) !important;
    }

    .nav-tabs .nav-link {
        border: none !important;
        color: #b5b5b5;
    }

    .requests-card {
        border: 0.5px solid #b5b5b5;
        box-shadow: 0px 4px 4px 0px #00000040;
        background: #fcfcfc;
        border-radius: 15px;
    }

    .requests-card .requests-card-left p {
        font-size: 13px;
        font-weight: 500;
        color: var(--color-black);
        margin-bottom: 5px !important;
    }

    .requests-card .requests-card-left span {
        font-size: 13px;
        font-weight: 400;
        color: #020202;
    }

    .requests-card .requests-card-center .badge {
        font-size: 15px;
        font-weight: 500;
        line-height: 22.5px;
        color: var(--color-orange);
        border: 0.5px solid #b5b5b5;
        box-shadow: 0px 4px 4px 0px #00000040;
        border-radius: 10px;
    }

    .requests-card .requests-card-center p {
        font-size: 13px;
        font-weight: 400;
        line-height: 18px;
        text-align: center;
        color: #9c9da9;
    }

    .requests-card .requests-card-right p {
        font-family: var(--font-secondary);
        font-size: 13px;
        font-weight: 400;
        line-height: 18px;
        text-align: center;
        color: #9c9da9;
    }

    /*PROFILE TAB END */

    /* NOTIFICATIONS START */
    .notifications {}

    .notifications .notification {
        border-bottom: 1px solid var(--color-black);
    }

    .notification-title {
        font-size: 13px;
        font-weight: 400;
        line-height: 18px;
        text-align: left;
        color: var(--color-black);
    }

    /* NOTIFICATIONS END */

    /* MESSAGES FORM START */
    .messages-form .messages-form-header {
        background: #e8e6e6;
        height: 86px;
    }

    .messages-form .messages-form-header .title {
        font-size: 15px;
        font-weight: 500;
        line-height: 22.5px;
        color: var(--color-black);
    }

    .messages-form .date {
        font-family: var(--font-secondary);
        font-size: 10px;
        font-weight: 500;
        line-height: 12.19px;
        color: #939393;
        position: relative;
    }

    .messages-form .date::before {
        content: "";
        top: 5px;
        left: 0px;
        bottom: 0px;
        width: 43%;
        height: 1px;
        background-color: #d0d0d0;
        position: absolute;
    }

    .messages-form .date::after {
        content: "";
        top: 5px;
        right: 0px;
        bottom: 0px;
        width: 43%;
        height: 1px;
        background-color: #d0d0d0;
        position: absolute;
    }

    .messages-form .message-card {
        border: 1px solid #c5c6cd;
        box-shadow: 0px 1px 1px 0px #00000040;
        background: #ffffff;
        border-radius: 10px;
    }

    .messages-form .message-card .text {
        font-size: 13px;
        font-weight: 400;
        line-height: 18px;
        color: var(--color-black);
    }

    .messages-form-control {
        border: 1px solid #c5c6cd;
        background: #ffffff;
        box-shadow: 0px 1px 1px 0px #00000040;
        height: 50px !important;
        border-radius: 6px !important;
    }

    .input-group-text {
        font-size: 13px;
        font-weight: 400;
        line-height: 18px;
        text-align: center;
        color: #000000;
        background: transparent !important;
        height: 50px !important;
        border: 1px solid #c5c6cd;
        background: #ffffff;
        box-shadow: 0px 1px 1px 0px #00000040;
        border-radius: none !important;
    }

    /* MESSAGES FORM END */

    /* HELP START */
    .help-card {
        border: 1px solid #00000033;
        background: #ffffff;
        box-shadow: 0px 5px 15px 0px #00000080;
        height: 100%;
        border-radius: 10px;
    }

    .help-card .title {
        font-family: var(--font-secondary);
        font-size: 20px;
        font-weight: 600;
        line-height: 40px;
        text-align: center;
        border-bottom: 4px solid var(--color-orange);
        text-transform: uppercase;
    }

    .help-card .description {
        font-size: 13px;
        font-weight: 400;
        line-height: 18px;
        text-align: center;
        color: var(--color-black);
    }

    /* HELP END */

    /* SMS VERIFICATION START */
    .sms-verification-card {
        border: 1px solid #e3e3e3;
        box-shadow: 0px 4px 4px 0px #00000040;
        background: #fcfcfc;
        border-radius: 10px;
    }

    .sms-verification-card .title {
        font-size: 24px;
        font-weight: 600;
        letter-spacing: 0.1120000034570694px;
        text-align: left;
        color: var(--color-black);
    }

    .sms-verification-card .description {
        color: #757575;
        font-size: 13px;
        font-weight: 400;
        text-align: left;
        margin-top: -20px;
    }

    .sms-verification-card .inputs input {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #d9d9d9;
        border: 1px solid #b5b5b5;
        box-shadow: 0px 1px 1px 0px #00000040;
        color: var(--color-black);
        border-radius: 5px;
        font-size: 20px;
        font-weight: 600;
        line-height: 19.5px;
        text-align: center;
    }

    .sms-verification-card .clock {
        font-size: 13px;
        font-weight: 400;
        line-height: 19.5px;
        text-align: center;
        color: #757575;
    }

    .sms-verification-card .repeat-code {
        background-color: transparent;
        font-size: 13px;
        font-weight: 600;
        line-height: 30px;
        text-align: center;
        color: var(--color-orange);
    }

    @media only screen and (min-width: 1024px) {
        .sms-verification-card .inputs input {
            height: 95px;
            border-radius: 10px;
        }
    }

    @media only screen and (max-width: 1023px) {
        .sms-verification-card .inputs input {
            height: 50px;
            border-radius: 8px;
        }
    }

    /* SMS VERIFICATION  END */

    /* balance-transactions */
    .balance-transactions .balance-transactions-card {
        box-shadow: 0px 2px 2px 0px #00000040;
        border: 1px solid #b5b5b5;
        box-shadow: 0px 2px 2px 0px #00000040;
        border-radius: 10px;
    }

    .balance-transactions .balance-transactions-card .title {
        font-family: var(--font-secondary);
        font-size: 15px;
        font-weight: 500;
        line-height: 18.29px;
        text-align: left;
        color: #000000;
    }

    .balance-transactions .balance-transactions-card .price {
        color: #000000;
        font-family: var(--font-secondary);
        font-size: 40px;
        font-weight: 700;
        line-height: 48.76px;
        text-align: left;
    }

    /* SERVICE PERSON PROFILE POINTS PAGE START */
    .points-page .title {
        font-family: var(--font-secondary);
        font-size: 15px;
        font-weight: 600;
        line-height: 18.29px;
        text-align: left;
        color: var(--color-black);
    }

    .points-page .point-card {
        font-family: var(--font-secondary);
        font-size: 15px;
        font-weight: 600;
        line-height: 18.29px;
        color: var(--color-black);
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .points-page .point-card .title {
        font-family: var(--font-secondary);
        font-size: 15px;
        font-weight: 600;
        line-height: 18.29px;
        text-align: left;
        color: var(--color-black);
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 3px;
    }

    .points-page .point-card .right-number {
        font-family: var(--font-secondary);
        font-size: 15px;
        font-weight: 500;
        line-height: 18.29px;
        text-align: left;
        color: var(--color-black);
        margin-left: auto;
    }

    .progress {
        width: 100% !important;
        border-radius: 2px !important;
    }

    .points-page .number-card .number {
        font-family: var(--font-secondary);
        font-size: 48px;
        font-weight: 600;
        line-height: 58.51px;
        color: var(--color-black);
    }

    .points-page .number-card .star i {
        width: 42px;
        height: 42px;
    }

    .points-page .number-card .text {
        font-family: var(--font-secondary);
        font-size: 15px;
        font-weight: 500;
        line-height: 18.29px;
        color: var(--color-black);
    }

    /* SERVICE PERSON PROFILE POINTS PAGE END */

    /* SERVICE PERSON PROFILE COMMENT PAGE START */
    .comments-page .comment-card {
        background: #d9d9d9;
        border: 1px solid #b5b5b5;
        box-shadow: 0px 2px 2px 0px #00000040;
        border-radius: 10px;
        padding: 24px 12px;
    }

    .comments-page .comment-card .title {
        font-size: 14px;
        font-weight: 400;
        line-height: 21px;
        text-align: left;
        color: #757575;
    }

    .comments-page .comment-card .description {
        font-size: 15px;
        font-weight: 400;
        line-height: 18px;
        text-align: left;
        color: #000000;
    }

    /* SERVICE PERSON PROFILE COMMENT PAGE END */

    /* SERVICE PERSON PROFILE SERVICES PAGE START */
    .user-services-page .title {
        font-family: var(--font-secondary);
        font-size: 15px;
        font-weight: 700;
        line-height: 18.29px;
        text-align: left;
        color: var(--color-black);
    }

    .user-services-page .description {
        font-size: 15px;
        font-weight: 400;
        line-height: 18px;
        text-align: left;
        color: #929292;
    }

    .user-services-page .service-card {
        background: #e6e6e6;
        border: 1px solid #b5b5b5;
        box-shadow: 0px 2px 2px 0px #e6e6e6;
        border-radius: 10px;
        padding: 24px 12px;
        color: var(--color-black);
        line-height: 19.5px;
        text-align: left;
        font-size: 13px;
    }

    .service-card img {
        height: 200px;
    }

    .user-services-page .service-card .title {
        font-weight: 500;
    }

    .user-services-page .service-card .description {
        font-weight: 400;
    }

    /* SERVICE PERSON PROFILE SERVICES PAGE END */

    /* SERVICE PERSON PROFILE SERVICE DETAIL PAGE END */
    .user-service-detail-title {
        font-family: var(--font-secondary);
        font-size: 15px;
        font-weight: 700;
        line-height: 28.29px;
        text-align: left;
        color: var(--color-black);
        border-bottom: 2px solid var(--color-black);
    }

    .user-service-detail-topbar-image {
        width: 83px;
        height: 83px;
    }

    .user-service-detail-topbar-title {
        font-size: 20px;
        font-weight: 500;
        line-height: 30px;
        text-align: left;
        color: var(--color-black);
    }

    .user-service-detail-topbar-delete-icon {
        width: 34px;
        height: 34px;
    }

    .user-service-detail-center-item-left i {
        font-size: 20px;
        color: #7b7a7a;
    }

    .user-service-detail-center-item-right {
        font-size: 15px;
        font-weight: 400;
        line-height: 18px;
        text-align: left;
        color: var(--color-black);
    }

    .user-service-detail-bottom-title {
        font-family: var(--font-secondary);
        font-size: 20px;
        font-weight: 700;
        line-height: 24.38px;
        text-align: left;
        color: var(--color-black);
    }

    .user-service-detail-bottom-description {
        font-size: 15px;
        font-weight: 400;
        line-height: 18px;
        text-align: left;
        color: var(--color-black);
    }

    /* SERVICE PERSON PROFILE SERVICE DETAIL PAGE END */
    .create-support h1 {
        font-family: var(--font-secondary);
        font-size: 22px;
        font-weight: 700;
        line-height: 31.43px;
        text-align: left;
        color: #585965;
    }

    /*user service modal evaluate start*/
    .modal-evaluate .modal-header {
        border-bottom: 3px solid var(--color-orange);
    }

    .modal-evaluate-title {
        font-family: var(--font-secondary);
        font-size: 20px;
        font-weight: 700;
        line-height: 20px;
        text-align: center;
        color: var(--color-black);
    }

    .modal-evaluate-stars i {
        font-size: 20px !important;
    }

    /*user service modal evaluate end*/

    /*CONTACT START*/
    .contact-card {
        border: 1px solid #e3e3e3;
        box-shadow: 0px 4px 4px 0px #00000040;
        background: var(--color-light);
        border-radius: var(--border-radius-form-control);
        width: 100%;
    }

    /*CONTACT END*/

    /*BLOG START*/
    .bg-gray {
        background: #eee !important;
    }

    .blog-card {
        border-radius: 10px;
        background: white !important;
    }

    .blog-card img {
        height: 300px;
    }

    .blog-card .title {
        border-radius: 10px;
    }

    .blog-card .description {
        border-radius: 10px;
    }

    /*BLOG END*/

    /*APP IMAGES END*/

    .app-image {
        width: 24px;
        height: 24px;
    }

    /*APP IMAGES END*/

    /*BLOG PAGE START*/
    .blog-card {
        overflow: hidden;
        max-height: 900px;
    }

    .blog-card-image {
        object-fit: contain;
        position: relative;
        z-index: 0;
    }

    .blog-card-header {
        color: #ff9501;
        margin-top: 10px;
    }

    .blog-card-title {
        padding-top: 20px;
        letter-spacing: 0px;
        font-weight: 700;
        font-style: normal;
        font-size: 23px;
        letter-spacing: 0em;
        line-height: 1.3em;
        text-decoration: none;
        text-transform: none;
    }

    .blog-card-description {
        margin-top: 0;
        font-weight: 400;
        font-style: normal;
        font-size: 16px;
        letter-spacing: 0px;
        line-height: 2em;
        color: #aaa;
        text-decoration: none;
        text-transform: none;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        padding: 20px;
    }

    .blog-card-date-wrapper {
        background: #ff9501;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        color: #fff;
        margin-top: -30px;
        z-index: 99;
    }

    .blog-detail-image {
        width: 100%;
        height: 600px;
    }

    /* The blogPageSidebar menu */
    .blogPageSidebar {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 99999999;
        top: 70px;
        left: 0;
        background-color: #e9e9e9;
        overflow-x: hidden;
        padding-top: 60px;
        transition: 0.5s;
        border-right: solid 1px #e9e9e9;
    }

    /* The blogPageSidebar links */
    .blogPageSidebar a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        color: #292d33;
        display: block;
        transition: 0.3s;
        font-weight: 400;
        font-style: normal;
        font-size: 18px;
        letter-spacing: 0px;
        line-height: 1.6em;
    }

    .blogPageSidebar .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 40px;
        margin-left: 50px;
        color: #ff9501;
    }

    .blogPageSidebarOpenbtn {
        font-size: 20px;
        cursor: pointer;
        color: white;
        padding: 10px 15px;
        border: none;
        width: 35px;
        height: 35px;
        background: transparent !important;
    }

    @media screen and (max-height: 450px) {
        .blogPageSidebar {
            padding-top: 15px;
        }

        .blogPageSidebar a {
            font-size: 18px;
        }
    }

    /*BLOG PAGE END*/

    /*BLOG DETAIL PAGE START*/

    .blog-detail-right-image {
        height: 100px;
        border-radius: 8px;
    }

    .blog-detail-right-title {
        color: #002438;
        font-weight: 700;
        font-style: normal;
        letter-spacing: 0em;
        text-transform: none;
        text-decoration: none;
    }

    .blog-detail-right-date {
        font-weight: 700;
        font-style: normal;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        text-decoration: none;
        color: #a3a3a3;
        margin-top: -20px;
    }

    .blog-detail-right-category {
        font-family: Raleway;
        font-weight: 700;
        font-style: normal;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        text-decoration: none;
        color: #a3a3a3;
    }

    /*BLOG DETAIL PAGE END*/

    /*TIMELINE START*/
    .color-orange {
        color: #ff9501;
    }

    .continue-button {
        position: absolute !important;
        bottom: -0px !important;
        right: 0% !important;
        bottom: 0px !important;
        right: 37% !important;
        z-index: 99999 !important;
        margin-top: 20px;
        margin-bottom: 20px;
        width: 30% !important;
        border-radius: 50px !important;
        font-size: 20px !important;
        font-weight: 600;
    }

    .continue-button-form {
        position: absolute !important;
        bottom: -0px !important;
        right: 0% !important;
        bottom: 0px !important;
        right: 0px !important;
        z-index: 99999 !important;
        margin-top: 20px;
        margin-bottom: 20px;
        width: 30% !important;
        border-radius: 50px !important;
        font-size: 20px !important;
        font-weight: 600;
    }

    .continue-button2 {
        bottom: 0px !important;
        position: absolute !important;
        bottom: -0px !important;
        left: 0% !important;
        right: 20px !important;
        z-index: 99999 !important;
        margin-top: 20px;
        margin-bottom: 20px;
        width: 30% !important;
        border-radius: 50px !important;
        font-size: 20px !important;
        font-weight: 600;
    }

    .continue-button-right {
        background: #0378ff;
        width: 44% !important;
    }

    .back-button-left {
        background: #ff9501;
        color: #fff;
        width: 44% !important;
    }

    @media only screen and (max-width: 475px) {
        .continue-button {
            bottom: -10px !important;
        }
    }

    @media only screen and (max-width: 375px) {
        .continue-button {
            bottom: -30px !important;
        }

        .continue-button-right {
            width: 14% !important;
        }

        .back-button-left {
            width: 14% !important;
            margin-right: -500px !important;
        }
    }

    .form-item {
        min-height: 50vh;
    }

    ul,
    li {
        margin: 0;
        padding: 0;
    }

    span::first-letter {
        text-transform: capitalize;
    }

    .base-timeline {
        list-style-type: none;
        counter-reset: number;
        /* number 2021*/
        position: relative;
        display: block;
        z-index: 2;
        width: 100%;
        /* change or remove*/
        margin-bottom: 60px;
        border-bottom: 3px solid #ff9501;
        padding-bottom: 60px;
    }

    .base-timeline__item {
        position: relative;
        display: inline-block;
        width: calc(100% / 3 - 15px);
        /* change width */
    }

    .base-timeline__item::before {
        display: flex;
        justify-content: center;
        align-items: center;
        counter-increment: number;
        /* number -1*/
        content: counter(number) "";
        border-radius: 50%;
        width: 40px;
        height: 40px;
        background-color: #0378ff;
        color: white;
        font-weight: bold;
        transition: all 0.6s ease-in-out;
        box-sizing: border-box;
    }

    /* modifier with use of the data-year attribute */
    .base-timeline__item--data::before {
        content: attr(data-year);
        width: 60px;
        height: 60px;
    }

    /* hover element */
    .base-timeline__item:hover::before {
        background-color: #ff9501;
        transform: scale(1.2);
    }

    .base-timeline__item--active::before {
        background-color: #ff9501;
        border-color: rgba(0, 0, 0, 0.3);
    }

    .base-timeline__item span {
        margin-left: -10px;
        color: #0378ff;
        font-weight: 500;
    }

    @media only screen and (max-width: 600px) {
        .base-timeline__item span {
            margin-top: 100px !important;
        }
    }

    .base-timeline__item--active span {
        color: #ff9501;
        font-weight: 600;
    }

    .base-timeline__item:last-child {
        width: 0;
    }

    /* summary text is optional and can be anything */

    .base-timeline__summary-text {
        position: absolute;
        bottom: -2em;
        left: 5px;
    }

    /*TIMELINE END*/

    /*SEARCH START*/

    input[type="search"] {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        -webkit-appearance: textfield;
    }

    input[type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
    }

    .search-results {
        position: absolute;
        top: calc(100% + 5px);
        left: 0;
        width: 100%;
        height: 166px;
        overflow-y: auto;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 5px;
        display: none;
    }

    .search-results .title {
        border: none;
        background: transparent;
        color: #111321;
        line-height: 32px;
        display: block;
        width: 100%;
        text-align: left;
        text-transform: unset;
        font-style: normal;
        font-size: 16px;
        padding-left: 20px;
        font-weight: 600;
        padding-top: 10px;
    }

    .search-results ul {
        margin: 0px;
        padding: 0px;
        margin-left: 20px;
        list-style: none !important;
    }

    .search-results ul li {
        margin-bottom: 20px;
    }

    .search-results ul li a {
        border: none;
        background: transparent;
        color: #111321;
        line-height: 28px;
        display: block;
        width: 100%;
        text-align: left;
        text-transform: unset;
        font-style: normal;
        font-size: 14px;
    }

    .search-form-container .search-form__input {
        border: 0;
        font-size: 20px;
        height: 56px;
        padding: 0 24px;
        width: 100% !important;
    }

    .search-form-container .search-form__input2 {
        border: 0;
        font-size: 20px;
        height: 56px;
        padding: 0 24px;
        width: 100% !important;
    }

    .search-form-container2 .search-form__input2 {
        border: 0;
        font-size: 20px;
        height: 56px;
        padding: 0 24px;
        width: 100% !important;
    }

    .search-form-container .search-container .icon-search {
        display: none;
    }

    .search-form-container .search-container {
        position: relative;
        width: 100%;
    }

    .search-form-container .search-container2 {
        position: relative;
        width: 100%;
        border: 1px solid #ff9501;
    }

    .search-form-container .search-form .search {
        width: calc(100% - 120px);
        box-shadow: 0px 0px 8px 0.7px #ff9501;
    }

    .search-form-container2 .search-form .search {
        width: calc(100% - 120px);
        box-shadow: 0px 0px 8px 0.7px #ff9501;
    }

    .search-form__input2 {
        box-shadow: 0px 0px 3px 0.2px #ff9501;
    }

    .search-form-container .search-form {
        width: 100%;
        display: flex;
    }

    .search-form-container {
        display: block;
        max-width: 486px;
        margin: auto;
        position: relative;
    }

    .search-form-container .search-form__submit {
        display: inline-block;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -webkit-user-select: none;
        user-select: none;
        border: none;
        cursor: pointer;
        font-weight: 700;
        font-size: 20px;
        border-radius: 0 3px 3px 0;
        padding: 16px 6px;
        line-height: 14px;
        width: auto;
        min-width: 120px;
        background-color: #ff9501;
        color: #fff !important;
        height: 56px;
        outline: none;
        box-shadow: 0px 0px 6px 0.2px #ff9501;
    }

    .search-form-container2 .search-form__submit {
        box-shadow: none !important;
    }

    .search-form-container .search-container {
        position: relative;
        width: 100%;
        background: white;
    }

    .search-results {
        display: none;
    }

    .search-form__input:focus+.search-results {
        display: block !important;
    }

    @media screen and (max-width: 992px) {
        .search-form-container {
            width: 310px !important;
        }

        .search-form-container2 {
            width: 310px !important;
        }

        .search-form__input::placeholder,
        .search-form-container2 .search-form__input2::placeholder {
            font-size: 13px !important;
        }
    }

    @media screen and (max-width: 320px) {
        .search-form-container {
            width: 290px !important;
        }

        .search-form-container2 {
            width: 290px !important;
        }

        .search-form__input::placeholder,
        .search-form-container2 .search-form__input2::placeholder {
            font-size: 13px !important;
        }
    }

    /*SEARCH END*/

    /* Blog Page Menu Icon */

    .cutsomBlogPageMenuBtn {
        width: 35px;
        height: 35px;
        float: left;
        background-color: #ff9501;
        display: none;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
        color: #fff;
        text-decoration: none !important;
    }

    /* Blog Page Menu Icon */

    /*FEATURES*/

    .section#features {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem 10% 0rem;
        position: relative;
        flex-flow: wrap;
    }

    .section#features .features-img {
        z-index: 998;
        margin-bottom: 24px;
    }

    .section#features .features-rows {
        display: flex;
        flex-flow: column;
        z-index: 998;
    }

    .section#features .features-rows .features-row {
        display: flex;
        align-items: center;
        justify-content: space-around;
        z-index: 998;
        padding: 24px;
    }

    .section#features .features-rows .features-row .features-row-icon {
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 70px;
        height: 70px;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
    }

    .section#features .features-rows .features-row .features-row-icon .feature {
        width: 32px;
        height: 32px;
        text-align: center;
    }

    .section#features .features-rows .features-row .features-row-icon .feature.first {
        background: url(../../images/home/icon-feature-1.svg);
        background-repeat: no-repeat;
        background-size: 32px 32px;
    }

    .section#features .features-rows .features-row .features-row-icon .feature.second {
        background: url(../../images/home/icon-feature-2.svg);
        background-repeat: no-repeat;
        background-size: 32px 32px;
    }

    .section#features .features-rows .features-row .features-row-icon .feature.third {
        background: url(../../images/home/icon-feature-3.svg);
        background-repeat: no-repeat;
        background-size: 32px 32px;
    }

    .section#features .features-rows .features-row .features-row-content {
        margin-left: 24px;
        width: 70%;
    }

    .section#features .features-rows .features-row .features-row-content h3 {
        color: #20252e;
        font-size: 16px;
        font-weight: 500;
        margin: 0;
    }

    .section#features .features-rows .features-row .features-row-content span {
        color: #5a657c;
        font-size: 14px;
    }

    .section#features .features-rows .features-row:hover {
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        box-shadow: 0 1px 30px 3px rgba(0, 0, 0, 0.07);
        background-color: #fff;
    }

    .section#features .features-rows .features-row:hover .features-row-icon .feature {
        width: 70px;
        height: 70px;
    }

    .section#features .features-rows .features-row:hover .features-row-icon .feature.first {
        background: url(../../images/home/icon-feature-1-hover.svg);
        background-repeat: no-repeat;
        background-size: 70px 70px;
    }

    .section#features .features-rows .features-row:hover .features-row-icon .feature.second {
        background: url(../../images/home/icon-feature-2-hover.svg);
        background-repeat: no-repeat;
        background-size: 70px 70px;
    }

    .section#features .features-rows .features-row:hover .features-row-icon .feature.third {
        background: url(../../images/home/icon-feature-3-hover.svg);
        background-repeat: no-repeat;
        background-size: 70px 70px;
    }

    .section#features .effect-feature {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        max-height: 350px;
        z-index: 997;
    }

    @media only screen and (max-width: 600px) {
        .section#features {
            display: block;
        }

        .section#features .features-rows .features-row {
            display: block;
        }

        .section#features p {
            width: 100% !important;
        }
    }

    /*FEATURES*/

    /* PACKAGE CARD START
 */

    .package-card {
        border: 1px solid #ddd;
        box-shadow: 0px 5px 15px 0px #ddd;
        border-radius: 10px;
        float: left;
        display: flex;
        align-items: center;
        justify-content: start;
        flex-direction: column;
        gap: 10px;
    }

    .package-card .card-header {
        height: 200px;
        width: 80%;
        margin-top: -35px;
        border-radius: 4px;
        height: 100%;
    }

    .package-card .card-header h3 {
        color: white;
        font-weight: 700;
        font-size: 28px;
    }

    .package-card .card-header span {
        color: white;
        font-weight: 800;
        font-size: 36px;
    }

    .package-card .card-header p {
        color: white;
        font-weight: 500;
        font-size: 26px;
    }

    .text-primary {
        color: #ff9501 !important;
    }

    .page-link {
        color: #ff9501 !important;
    }

    .active>.page-link,
    .page-link.active {
        background-color: #ff9501 !important;
        color: white !important;
    }

    /* Kategori Seçim Stilleri */
    .selected-categories {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .selected-category-item {
        display: flex;
        align-items: center;
        background-color: #f0f7ff;
        border: 1px solid #cce4ff;
        border-radius: 4px;
        padding: 8px 12px;
        margin-bottom: 8px;
        gap: 8px;
    }

    .category-name {
        color: #0056b3;
        font-size: 14px;
        font-weight: 500;
    }

    .remove-category-btn {
        background: none;
        border: none;
        color: #dc3545;
        cursor: pointer;
        padding: 0;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        transition: background-color 0.2s;
    }

    .remove-category-btn:hover {
        background-color: #ffe0e3;
    }

    .search-results {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        border: 1px solid #ddd;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        max-height: 300px;
        overflow-y: auto;
    }

    .search-results ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .search-results li {
        padding: 8px 12px;
        border-bottom: 1px solid #eee;
    }

    .search-results li:last-child {
        border-bottom: none;
    }

    .search-results a {
        color: #333;
        text-decoration: none;
        display: block;
        transition: color 0.2s;
    }

    .search-results a:hover {
        color: #0056b3;
        background-color: #f8f9fa;
    }

    .authentication {
        background: #0378ff !important;
    }

    .search-form-container {
      max-width: 100%!important;
    }