/* ../fonts */

         @font-face {
        font-family: 'Rubik';
        src: local('Rubik Bold'), local('Rubik-Bold'),
            url('../fonts/Rubik-Bold.ttf') format('truetype');
        font-weight: bold;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Rubik';
        src: local('Rubik ExtraBold'), local('Rubik-ExtraBold'),
            url('../fonts/Rubik-ExtraBold.ttf') format('truetype');
        font-weight: bold;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Rubik';
        src: local('Rubik Black'), local('Rubik-Black'),
            url('../fonts/Rubik-Black.ttf') format('truetype');
        font-weight: 900;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Rubik';
        src: local('Rubik Medium'), local('Rubik-Medium'),
            url('../fonts/Rubik-Medium.ttf') format('truetype');
        font-weight: 500;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Rubik';
        src: local('Rubik Regular'), local('Rubik-Regular'),
            url('../fonts/Rubik-Regular.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Rubik';
        src: local('Rubik Light'), local('Rubik-Light'),
            url('../fonts/Rubik-Light.ttf') format('truetype');
        font-weight: 300;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Rubik';
        src: local('Rubik SemiBold'), local('Rubik-SemiBold'),
            url('../fonts/Rubik-SemiBold.ttf') format('truetype');
        font-weight: 600;
        font-style: normal;
        font-display: swap;
    }

*{
        font-family: 'Rubik';
    }

    .form-label{
        display: block;
        margin-bottom: .25rem;
    }
    .form-input{
        display: inline-block;
        min-height: 50px;
        width: 100%;
        padding:.5rem 1rem;
        color:#000;
        font-size: 15px;
        border: 1px #DEDEDE solid;
        outline: none;
    }
    .form-input:focus{
        border-color:#264FBE
    }
    .form-input::placeholder,
    .form-select:disabled option{
        color: #777777;
    }
    .form-select{
        background-image: url('images/downarrow.svg');
        background-position: 95%;
        background-size: 18px;
        background-repeat: no-repeat;
        appearance: none;
    }
    .nav-item{
        padding-inline:20px;
    }
    .nav-link{
        color:#000;
        font-size: 1rem;
        font-weight: 400;
        padding-block:5px;
        transition: all .5s ease-in-out;
        position: relative;
        display: inline-block;
    }
    .nav-link:hover{
        color: #264FBE;
    }
    .nav-link:hover:after {
        transform: scaleX(1);
        transform-origin: bottom left;
    }
    .nav-link:after{
        content: "";
        position: absolute;
        width: 100%;
        transform: scaleX(0);
        height: 2px;
        bottom: 0;
        left: 0;
        background-color: #264FBE;
        transform-origin: bottom right;
        transition: transform .25s ease-out;
    }
    .sub-menu{
        background-color: #fff;
        box-shadow: 0px 6px 12px rgba(0,0,0,0.05);
        min-width: 200px;
        position: absolute;
        top: 80px;
        opacity: 0;
        visibility: hidden;
        transition: all .5s ease-in-out;
        padding: 1rem;
        display: flex;
        gap:.5rem;
        flex-flow: column;
    }
    .dropdown-menu:hover .sub-menu{
        visibility: visible!important;
        opacity: 1!important;
    }
    .hero-section{
        overflow-x: hidden;

    }
    .banner .owl-item {
        height: 409px;
        max-width: 1091px;
        overflow:hidden;
        margin-inline:auto;
        border-radius: 15px;
    }
    .banner .owl-item img {
        height:100%;
        aspect-ratio: 16/9;
        overflow: hidden;
    }
    .banner .owl-dots {
        width: fit-content;
        margin-inline:auto;
        margin-top: 1rem
    }
    .banner .owl-dots .owl-dot span {
        width: 10px;
        height: 10px;
        margin: 5px 7px;
        background: #D6D6D6;
        display: block;
        transition: opacity .2s ease;
        border-radius: 30px;
    }
    .banner .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
        background: #869791;
    }
    .search-bar:hover .search-form{
        visibility: visible!important;
        opacity: 1!important;
    }
    .search-form{
        background-color: #fff;
        box-shadow: 0px 6px 12px rgba(0,0,0,0.05);
        min-width: 300px;
        position: absolute;
        top: 50px;
        opacity: 0;
        visibility: hidden;
        transition: all .5s ease-in-out;
        padding: 1rem;
        display: flex;
        gap:.5rem;
        left: -100px;
        right: 0;
    }
    @media screen and (max-width:768px){
        .mobile-navbar{
            position: fixed;
            transform: translateX(-100%);
            background-color: #fff;
            padding: 5rem 1rem;
            height: 100dvh;
            left: 0;
            top:0;
            bottom:0;
            transition: all .5s ease-in-out;
            min-width: 200px;
            box-shadow: 0px 4px 9px 0px rgba(191, 191, 191, 0.25);
            z-index:999 ;
        }
        .mobile-navbar.active{
            transform: translateX(0%);
        }
    .hero-section{
        padding-inline: 12px;
    }
  

    }
a.w-32.h-9.rounded-3xl.border.border-blue-800.hover\:text-white.hover\:bg-blue-800.transition-all.text-center.text-blue-800.text-sm.font-semibold {
    padding: 10px 33px;
}
.bg-white {border : 1px solid #F1F1F1;}
.heart {position: absolute;
    right: 15px;
    top: 14px;}
.events button[aria-selected=true] {
    background: #264FBE !important;
    color: #FFFFFF !important;
    border-radius: 28px;
}
.events button {
    color: #1d2126a6 !important;
    background: #FFFFFF !important;
    border-radius: 28px;
}
.margintop{
margin-top:2rem;
}
.logo-hight{
    height:68px !important;
}
.logo-on-login{
    height:127px;
}
.error {color: red;}
.alert {
         padding: 15px;
         border-radius: 4px;
         margin-bottom: 20px;
}

.alert-success {
         color: #155724;
         background-color: #d4edda;
         border-color: #c3e6cb;
}

.alert-danger {
         color: #721c24;
         background-color: #f8d7da;
         border-color: #f5c6cb;
}