/* css/styles.css */
body,
html {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.outlined-text {
    /* color: #43001E !important; Fill color */
    -webkit-text-stroke: 1px #6D244C !important;
    /* Stroke color */
    text-stroke: 1px #6D244C !important;
    /* For Firefox (currently limited support) */
}

.no-scrollbar::-webkit-scrollbar {
    display: none !important;
}

.no-scrollbar {
    -ms-overflow-style: none !important;
    /* IE and Edge */
    scrollbar-width: none !important;
    /* Firefox */
}

.relative.group:hover .consultation-submenu {
    opacity: 1 !important;
    visibility: visible !important;
    text-decoration: none !important;
    display: block !important;
}

.relative.group:hover .training-submenu {
    opacity: 1 !important;
    visibility: visible !important;
    text-decoration: none !important;
    display: block !important;
}

.training-submenu,
.consultation-submenu {
    box-shadow: 4px 3px 13px #00000030 !important;
    border-radius: 14px !important;
    opacity: 1 !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

li {
    text-decoration: none !important;
}


.gradient-border-top::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    /* same as border-t-4 */
    border-top-left-radius: 0.75rem;
    /* same as rounded-xl */
    border-top-right-radius: 0.75rem;
    background: linear-gradient(90deg, #AF3AC7, #D66BF3);
    /* Make sure it’s on top of the container */
    z-index: 10;
}


.modal-backdrop {
    --bs-backdrop-zindex: 1040;
    --bs-backdrop-bg: #000;
    --bs-backdrop-opacity: 1;
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--bs-backdrop-zindex) !important;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(10px) !important;
}

.modal-backdrop.fade {
    opacity: 0;
}

.modal-backdrop.show {
    opacity: 1 !important;
}


.gradient-button {
    background: linear-gradient(to right, #B4B5B5, #767777, #353535);
    transition: all .4s ease;
}

.gradient-button:hover {
    background: linear-gradient(to right, #044602, #027A0B, #00B116);
}

.gradient-button .icon,
.gradient-button .text {
    transition: all .4s ease;
}

.gradient-button .icon {
    order: 1;

}

.gradient-button .text {
    order: 2;
}

.gradient-button:hover .icon {
    order: 2;
    transform: translateX(2px);
}

.gradient-button:hover .text {
    order: 1;
    /* padding-left: 10px; */
    transform: translateX(-2px);
}

::-webkit-scrollbar {
    display: none;
}

@media (min-width: 768px) {
    .desktop-bg {
        background-image: url('/assets/Images/vision-mission-bg.png');
    }
    .car-services-div{
        background-image: url('/assets/Images/car-services-bg.png');

    }


    .modal-dialog-right {
        position: absolute !important;
        right: 50px !important;
        top: 20px !important;
        margin: 0 !important;
        height: 100% !important;
        min-width: 320px !important;
        transform: translateX(100%) !important;
        transition: transform 0.3s ease-in-out !important;
        pointer-events: none !important;
    }

    .modal.fade.show .modal-dialog-right {
        transform: translateX(0) !important;
        pointer-events: auto !important;
    }

    .modal-content.custom-modal-content {
        height: 100% !important;
        border-radius: 0.75rem !important;
        /* Tailwind: rounded-xl */
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
        overflow-y: auto !important;
    }

}

@media (max-width: 767px) {
    .mobile-bg {
        background-image: url('/assets/Images/vision-mission-mobile-bg.svg');
    }
     .modal-dialog-right {
      
        min-width: 300px !important;
    }
     .car-services-div{
        background-image: url('/assets/Images/car-services-bg-mobile.png');


    }

}