@import url(./header.css);
@import url(./homepage.css);
@import url(./footer.css);
@import url(./productspage.css);
@import url(./userbooking.css);
@import url(./login.css);
@import url(./signup.css);
@import url(./bookingprice.css);
@import url(./teacher.css);
@import url(./welcome.css);
@import url(./loader.css);
@import url(./account.css);
@import url(./toast.css);
@import url(./payment.css);
@import url(./studenthome.css);
@import url(./bookinghistory.css);
@import url(./dashboard.css);
@import url(./favourite.css);
@import url(./approval.css);
@import url(./chat.css);
@import url(./teachereditmodal.css);
@import url(./about.css);
@import url(./userpage.css);
@import url(./project.css);

* {
    margin: 0px;
    font-family: "Raleway", sans-serif;
}

/* Testing */
body {
    line-height: 1.45 !important;
}

/*! Root variable includes sidebar layout too do not change */
:root {
    --header-height: 3rem;
    --nav-width: 68px;
    --first-color: #4723d9;
    --first-color-light: #afa5d9;
    --black: #000000;
    --orange: #fe5e4f;
    --radius-10: 10px;
    /* --white-color: #f7f6fb; */
    --font-small: 13px;
    --font-primary: 34px;
    --font-secondary: 24px;
    --font-description: 16px;
    --main-heading-1440: 24px;
    --white-color: #ffffff;
    --grey: #919191;
    /* --body-font: "Nunito", sans-serif; */
    /* --normal-font-size: 1rem; */
    --z-fixed: 100;
    --font-main: "Raleway", sans-serif;
    --font-thin: 100;
    --font-extralight: 200;
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

*,
::before,
::after {
    box-sizing: border-box;
}

/* Works on Firefox */
* {
    scrollbar-width: thin;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 12px;
}

/* Lightbox css do not change */
.lb-next {
    background: url("/images/next.png") right 48% no-repeat !important;
}

.lb-prev {
    background: url("/images/prev.png") left 48% no-repeat !important;
}

.lb-close {
    background: url("/images/close.png") top right no-repeat !important;
}

.lb-nav a.lb-next,
.lb-nav a.lb-prev {
    width: 14% !important;
}

.h-full {
    height: calc(100vh - 400px) !important;
}

.middle-content {
    vertical-align: middle;
}

/* Tooltip css do not change */
.tooltip-container {
    /* position: relative; */
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    /* Optional: removes underline from links */
}

.tooltip-text {
    visibility: hidden;
    background-color: #ebe8e8;
    font-family: var(--font-main);
    color: var(--black);
    font-weight: var(--font-medium);
    font-size: 12px;
    text-align: center;
    padding: 2px 6px;
    border-radius: 4px;
    position: absolute;
    top: 125%;
    /* Position the tooltip below the button */
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.tooltip-text::after {
    content: "";
    position: absolute;
    bottom: 100%;
    /* Arrow points upwards */
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #f0f0f0 transparent;
}

.tooltip-container:hover .tooltip-text {
    visibility: visible;
}

button:focus {
    outline: none !important;
}

*::-webkit-scrollbar-thumb {
    border-radius: 20px;
}

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

.flex-d-col {
    flex-direction: column !important;
}

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

.text-sm {
    font-size: 12px !important;
}

.text-md {
    font-size: 14px !important;
}

.text-lg {
    font-size: 18px !important;
}

.text-dark-grey {
    color: #636363;
}

.bg-grey {
    background: #f5f5f5;
}

.border-grey {
    border: 1px solid #b7b7b7 !important;
}

.description-common-text {
    color: var(--black);
    font-weight: var(--font-medium) !important;
    font-family: var(--font-main);
    font-size: var(--font-small) !important;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    /* Show only 4 lines initially */
    -webkit-box-orient: vertical;
}

.card.overview p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    /* Show only 4 lines initially */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    /* Optional: Adds '...' for truncated text */
}

.gap-items {
    gap: 20px;
}

.w-80 {
    width: 80% !important;
}

.w-30 {
    width: 30% !important;
}

.radius-15 {
    border-radius: 15px !important;
}

.common-btn {
    font-family: "Raleway", sans-serif;
    border-radius: 13px;
    background: #fe5e4f !important;
    color: #fff !important;
    min-height: 45px;
    font-weight: 600;
    font-size: 16px;
}

.apply-btn {
    border-radius: 10px !important;
}

.eye-icon {
    right: 30px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 18px;
}

.error_msg,
.error_msg_service {
    color: red;
    padding-top: 5px;
    font-size: 13px;
    font-family: var(--font-main);
    padding-left: 8px;
}

.error_msg_service {
    padding: 0;
    font-size: 12px;
}

.password-error {
    color: red !important;
    padding-top: 5px;
    font-size: 13px;
    font-family: var(--font-main);
    padding-left: 8px;
}

.cus-filter {
    width: 300px;
    border: 0.5px solid #d1d3d4;
    border: 0 !important;
    box-shadow: 0px 4px 37px 0px #00000024;
    padding: 20px !important;
    border-radius: 20px !important;
    left: -258px !important;
    margin-top: 10px !important;
}

/* To clip text into a single line to be used commonly */
.truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.view-btn {
    width: 26px;
    height: 26px;
    border: 1px solid #BFBFBF !important;
    border-radius: 6px;
    background: #fff;
}

.height-details {
    padding-top: 80px !important;
}

.overflow-auto {
    overflow: auto !important;
}

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

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

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

.cursor-pointer {
    cursor: pointer !important;
}

.notify {
    z-index: 99999999;
}

.custom-timepicker.input-group {
    flex-wrap: nowrap !important;
}

/* Hide scrollbar on the bootstrap modal styles  */
.modal-body::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.modal-body {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* Hide ck editor notification box */
.cke_notifications_area {
    display: none !important;
}

.delete_package_button.btn,
.delete_package_latest_btn.btn {
    background-color: transparent !important;
    border-color: transparent !important;
    border-radius: 13px !important;
    padding: 16px;
}

.delete-icon {
    height: 20px;
    width: 20px;
}

.welcome-text {
    font-size: 44px;
}

/* error message  */
label.error,
.error_message {
    color: red !important;
    font-size: 12px !important;
    padding-left: 8px;
}

.error_message {
    padding: 0;
    font-weight: var(--font-medium) !important;
}

/* Testing */
input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

.date_and_time_icon {
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    pointer-events: none;
}

.input_date_time_space {
    padding-left: 50px !important;
    cursor: pointer !important;
}

/* Payment Styles */
.complete-payment-process {
    border-width: 1px 1px 1px 4px;
    /* top, right, bottom, left */
    border-style: solid;
    border-color: var(--orange);
    border-radius: 12px;
    min-height: 105px;
    display: flex;
    /* align-items: center; */
}

.complete-payment-process h2 {
    font-family: var(--font-main);
    font-size: 18px;
    font-weight: 600;
    line-height: 21.13px;
    text-align: left;
}

.complete-payment-process p {
    font-family: var(--font-main);
    color: #10101099;
    font-size: 16px;
    font-weight: var(--font-semibold);
    line-height: 20px;
    text-align: left;
}

.complete-payment-process p span a {
    color: var(--orange);
    text-decoration: underline;
}

.dropdown-mobile-view {
    min-width: 50px !important;
    padding: 0 !important;
}

/* Multiselect styles */
/* Styling for Select2 dropdown and count */
.select2-selection__rendered {
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* .select2-container {
    width: 100% !important;
} */
.select2-container {
    width: 100% !important;
    /* max-width: 400px; */
}

.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--black) !important;
    /* padding: 20px; */
    border-radius: 14px !important;
    color: var(--black);
    min-height: 50px !important;
    padding-right: 0 !important;
    font-family: var(--font-main);
    font-weight: var(--font-medium) !important;
    font-size: var(--font-description);
    display: flex !important;
    align-items: center !important;
    padding-bottom: 0 !important;
    padding-left: 5px !important;
}

.booking-select .select2-container--default .select2-selection--multiple {
    border: 1px solid var(--black) !important;
    padding: 13px;
    border-radius: 14px !important;
    color: var(--black);
    min-height: 50px !important;
    padding-right: 0 !important;
    font-family: var(--font-main);
    font-weight: var(--font-medium) !important;
    font-size: var(--font-description);
    display: flex !important;
    align-items: center !important;
    padding-left: 5px !important;
}

.selected-tags .remove-icon {
    margin-left: 5px;
    color: var(--white-color);
    font-weight: bold;
    cursor: pointer;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--orange) !important;
    border: 0 !important;
    border-radius: 14px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__clear {
    margin-top: 0 !important;
    padding: 0 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
    background-color: var(--orange) !important;
}

.select2-container .select2-selection--multiple .select2-selection__rendered {
    margin: 0 !important;
}

.select2-container--default .select2-results__option--selected {
    background-color: var(--orange) !important;
    color: var(--white-color) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    border-right: 0 !important;
    color: #fff !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    color: var(--white-color) !important;
    font-size: 12px !important;
}

.selected-tags {
    display: inline-flex;
    align-items: center;
    margin-right: 5px;
    font-family: var(--font-main);
    font-weight: var(--font-medium) !important;
    background-color: var(--orange);
    color: var(--white-color);
    font-size: 12px !important;
    padding: 3px 6px;
    border-radius: 14px;
    cursor: default;
}

.select2-container--default .select2-selection--multiple .select2-selection__clear {
    display: none;
}

.select2-container .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    /* overflow: scroll; */
}

.select2-container--default .select2-selection--multiple textarea::placeholder {
    font-weight: var(--font-medium);
    color: var(--black) !important;
}

.select2-container--open .select2-dropdown--below {
    border-top: 1px solid var(--black) !important;
}

.amenities-input-box .select2-container {
    width: 100% !important;
    max-width: 100% !important;
}

.remove-icon-amenity {
    padding-left: 3px;
}

.selection-count {
    margin-left: 5px;
    font-weight: var(--font-medium);
    color: var(--orange);
    font-size: 14px;
    font-weight: var(--font-medium);
}

.radius-5 {
    border-radius: 15px !important;
}

.selection-count-amenity {
    color: var(--orange);
}

.select2-container .select2-search--inline .select2-search__field {
    margin-top: 0 !important;
    height: 28px !important;
}

.user-profile-img {
    height: 35px;
    width: 35px;
    border-radius: 100%;
}

.pr_50 {
    padding-right: 53px;
}

/* .spotify_content{
    position: absolute;
    bottom: 0;
    left: 275px;
} */

#spotify-playlist-btn,
#connect-spotify-btn {
    text-align: right;
    float: right;
}

.playlist_label {
    text-align: left;
}

.popup-desc {
    color: #10101099;
}

.decoration-none {
    text-decoration: none !important;
}

.outline-none {
    outline: none !important;
}

.radius-10 {
    border-radius: 10px !important;
}

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

.font-light {
    font-weight: var(--font-medium) !important;
}

.font-semibold {
    font-weight: var(--font-semibold) !important;
}

.w-140 {
    width: 140px;
}

.back-btn-text {
    font-size: 16px;
    font-weight: var(--font-semibold);
    color: #676767;
}

.bg-orange {
    background: #fff5f4 !important;
}

.bg-orange-primary {
    background: var(--orange) !important;
}

.bg-transparent {
    background-color: transparent !important;
}

.shadow-none {
    box-shadow: none !important;
}

.event-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.event-details {
    display: flex;
    align-items: start;
    flex-direction: column;
}

.history-content-center {
    display: flex;
    height: 70px;
    justify-content: start;
    align-items: center;
}

.event-date {
    margin-right: 15px;
}

.event-date-time {
    font-size: 20px;
    font-weight: 600;
    text-align: left;
    color: var(--black);
}

.event-participants {
    font-size: 16px;
    font-weight: var(--font-semibold);
    line-height: 21.13px;
    color: var(--black);
}

.object-contain {
    object-fit: contain !important;
}

.participant-count {
    color: var(--grey);
}

.font-semibold {
    font-weight: var(--font-semibold) !important;
}

.calendar-icon {
    margin-right: 5px;
}

.participants {
    margin-left: 15px;
}

.underline-1 {
    text-decoration: underline !important;
}

.total-amount {
    color: #f00;
    /* Red color for total amount */
}

@media screen and (min-width: 820px) and (max-width: 1920px) {
    .select2-results__option {
        font-size: 13px !important;
    }

    .select2-container--default .select2-selection--multiple {
        min-height: 40px !important;
    }

    .select2-container .select2-search--inline .select2-search__field {
        font-size: 13px !important;
    }

    .select2-container .select2-search--inline .select2-search__field {
        height: 22px !important;
    }
}

@media (max-width: 912px) {
    .mobile-autocomplete-suggestions.autocomplete-suggestions {
        width: 119% !important;
        top: 71px !important;
        left: -23px !important;
    }

    .autocomplete-suggestions {
        top: 50px !important;
    }
}

@media (max-width: 480px) {
    .img-gallery-carousel {
        max-height: 230px !important;
        object-position: top;
    }

    .section-title-dashbord {
        font-size: 24px;
    }

}

@media (max-width: 768px) {
    .img-gallery-carousel {
        max-height: 400px;
        object-position: top;
    }

    .autocomplete-suggestions {
        width: 100% !important;
    }

    .height-details {
        padding-top: 50px !important;
    }

    .complete-payment-process {
        display: block;
    }

    /* .select2-container--default .select2-selection--multiple{
        padding-bottom: 5px !important;
    } */

    .select2-container .select2-selection--multiple .select2-selection__rendered {
        overflow: scroll;
    }

    .select2-container .select2-search--inline .select2-search__field {
        height: 28px !important;
    }

    .welcome-text {
        font-size: 24px;
    }

    .select2-container {
        max-width: 100%;
    }

    .selected-tags .remove-icon {
        margin-left: 25px;
        font-size: 20px;
    }

    .selected-tags {
        font-size: 14px !important;
    }

    .delete_package_button.btn,
    .delete_package_latest_btn.btn,
    .first_delete_pricing_package_button .btn,
    .delete_pricing_package_button.btn {
        width: 100%;
        background-color: #f4f4f4 !important;
    }
}

/* Date picker z index */
.ui-datepicker {
    z-index: 99999 !important;
}

/*  */
/* Styles for modal */
.mylightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: rgba(0, 0, 0, 0.8); */
    background: rgb(0 0 0 / 87%);
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

.mylightbox.active {
    display: flex;
    z-index: 999999;
}

.mylightbox img,
.mylightbox video {
    max-width: 90%;
    max-height: 90%;
}

.mylightbox .close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 50px;
    color: white;
    cursor: pointer;
}

.mylightbox .arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    color: white;
    cursor: pointer;
    user-select: none;
}

.mylightbox .arrow.left {
    left: 20px;
}

.mylightbox .arrow.right {
    right: 20px;
}

.classes-carousel .owl-dots {
    display: none;
}

/* Map Styles */
.cus-map {
    height: calc(100vh - 80px) !important;
}

.map-data-cont {
    min-width: 240px;
    max-width: 327px;
    background-color: var(--white-color);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border-radius: 20px;
}

.map-images img {
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    object-fit: cover;
    max-height: 180px;
    object-position: top;
}

.map-preview-img {
    height: 180px;
}

.map-details h6 {
    color: var(--black);
    font-size: 14px;
    font-weight: var(--font-medium);
    font-family: var(--font-main);
}

.map-details p {
    color: var(--orange);
    font-size: 12px;
    font-weight: var(--font-normal);
    font-family: var(--font-main);
}

.map-data-cont .owl-carousel .owl-nav .owl-prev {
    position: absolute;
    top: 35%;
    transform: translateY(-50%);
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.9) !important;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    /* padding: 0 20px !important; */
    font-size: 24px;
    font-family: var(--font-main);
    font-weight: var(--font-bold);
    color: var(--black) !important;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

.map-data-cont .owl-theme .owl-nav .disabled {
    display: none !important;
}

.map-data-cont .owl-carousel .owl-nav .owl-next {
    position: absolute;
    right: 10px;
    top: 35%;
    transform: translateY(-50%);
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.9) !important;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    /* padding: 0 20px !important; */
    font-size: 24px;
    font-family: var(--font-main);
    font-weight: var(--font-bold);
    color: var(--black) !important;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

.map-data-cont .owl-carousel .owl-nav .owl-next span {
    padding-bottom: 2px;
}

.map-data-cont .owl-carousel .owl-nav .owl-prev {
    padding-bottom: 2px;
}

.map-data-cont .owl-dots {
    position: absolute;
    top: 96%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.map-data-cont .owl-theme .owl-dots .owl-dot span {
    width: 6px;
    height: 6px;
    margin: 2px 4px;
}

.map-data-cont .owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: var(--orange) !important;
}

.gm-style-iw-d {
    overflow: hidden !important;
}

.gm-style .gm-style-iw-c {
    padding: 0 !important;
    border-radius: 20px;
}

.gm-ui-hover-effect {
    top: 38px;
    right: 8px;
    z-index: 9999 !important;
    background: var(--white-color) !important;
    opacity: 1;
    border-radius: 50%;
    display: flex !important;
    justify-content: center;
    align-items: center;
    font-size: 14px !important;
    width: 30px !important;
    height: 30px !important;
}

.gm-ui-hover-effect>span {
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
}

.gm-style-iw-chr {
    margin-top: -31px;
}

.gm-style-iw-d {
    background-color: var(--white-color) !important;
    margin-bottom: -10px;
}

.cus-dropdown.dropdown-menu[style] {
    right: auto !important;
}

/* Pagination Styles Global */
.page-link {
    border-radius: 5px;
}

.page-item.active .page-link {
    background-color: #ffefed !important;
    border-color: #fe5e4f !important;
    color: var(--bs-orange) !important;
}

.page-link {
    color: var(--bs-orange) !important;
}

.page-item.disabled .page-link {
    color: #6c757d !important;
    font-weight: var(--font-bold);
}

.page-item:last-child .page-link {
    color: var(--black) !important;
    font-weight: var(--font-bold);
}

.pagination {
    gap: 7px;
    margin: 0;
}

.pagination_data {
    background-color: #fffcfc !important;
    border-radius: 8px;
    border-color: #fe5e4f !important;
    color: var(--bs-orange) !important;
    height: 40px;
    padding: 0 4px;
}

.total-products {
    background-color: #ffefed !important;
}

.total-products p {
    margin: 0;
    color: var(--orange);
    font-weight: var(--font-bold);
    padding: 15px 10px;
    font-size: 14px;
}

.ml-5 {
    margin-left: 5px;
}

/* .unique-schduele-icon{
    width: 82px;
    height: 82px;
    background-color: #FFF5F4;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
} */
.desc-class p {
    color: black;
    margin-bottom: 0;
}



#popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

/* .autocomplete-suggestions {
    display: none;
    border: 1px solid #ccc;
    background: #fff;
    position: absolute;
    z-index: 1000;
    max-height: 250px;
    overflow-y: auto;
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    top: 33px;
    color: black;
}

.autocomplete-suggestion {
    display: flex;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s ease-in-out;
    border-bottom: 1px solid lightgray;
}
.autocomplete-suggestion img {
    width: 18px;
} */

.blur-item {
    filter: blur(3px);
}

/* Autocomplete  */
.autocomplete-suggestions {
    display: none;
    border: 1px solid #ccc;
    background: #fff;
    position: absolute;
    z-index: 1000;
    width: 135%;
    max-height: 250px;
    overflow-y: auto;
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    top: 33px;
    left: -6px;
}

.new_autocomplete.autocomplete-suggestions {
    width: 103%;
    left: -8px;
}

.autocomplete-suggestion {
    display: flex;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    font-size: 12px;
    color: black;
    transition: background 0.2s ease-in-out;
}

.autocomplete-suggestion:hover {
    background: #f0f0f0;
}

.location-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

/* .schedule-location-input {
    margin-top: 76px;
    position: relative;
} */

/* Onboarding Tutorial Button - matches the "Find Classes Now" button style */
.onboarding-tutorial-btn {
    background-color: #FF6B6B !important;
    color: white !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 12px 24px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    font-family: "Raleway", sans-serif !important;
    text-decoration: none !important;
    display: inline-block !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    min-height: 45px !important;
    line-height: 1.2 !important;
}

.onboarding-tutorial-btn:hover {
    background-color: #ff5252 !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

.onboarding-tutorial-btn:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.3) !important;
}