@font-face {
    font-family: baskerville;
    src: url(/font/baskerville-old-face.ttf);
}


.bg-primary {
    background-color: #196bbb !important;
    /* Custom primary color */
}

.border-primary {
    border-color: #196bbb !important;
}

.btn-primary {
    background-color: #196bbb !important;

}

.btn-primary:hover {
    background-color: #005dbb !important;

}


.custom-text-primary {
    color: #196bbb;
    /* Custom primary text color */
}

.custom-bg-secondary {
    background-color: #EF8613;
    /* Custom primary text color */
}

.custom-text-secondary {
    background-color: #EF8613;
    /* Custom primary text color */
}

.active {
    border-bottom: 2px solid #EF8613;
    border-radius: none;
}



.custom-small {
    font-size: small;
}


.custom-text-secondary {
    color: #EF8613;
    /* Custom primary text color */
}

/* Custom style to make all navbar text white */
.navbar .nav-link,
.navbar .navbar-brand,
.navbar .navbar-toggler {
    color: black;
    /* Force text color to white */
}

.navbar-toggler-icon {
    filter: invert(1);
    /* Make the hamburger icon white */
}

/* Center the navbar menu on mobile view */
.navbar-collapse {
    justify-content: center;
    /* Center items when collapsed */
}

.banner-text {
    font-size: 80px;
    font-weight: bold;
    color: white;
    text-shadow:
        -4px 4px 0 #000,
        4px 4px 0 #000;

}

.custom-hover:hover {
    background-color: #f89c33;

}



.bg-costom {
    background-color: #ED8713;

}

.nav-link {
    margin-right: 35px;

}

.primary1 {
    background-color: #196bbb !;

}

.section {
    margin-top: 200px;

}

.card-border {
    border-color: #ED8713;
}

.costom-border {
    border: 1px solid #196bbb;
    border-radius: 10px;
}

.btn-primary {
    background-color: #196bbb;
}

.co-bg-secondary {
    background-color: #ED8713;
}

.text-c-primary {
    color: #196bbb;
}

.text-c-secondary {
    color: #ED8713;
}

/*accordion Remove focus outline */
.no-focus:focus {
    outline: none;
    box-shadow: none;

}

/* accordion Remove hover effects */
.no-hover:hover {
    background-color: none;
    color: none;
}

/*  accordion items */
.accordion-item {
    border-width: 2px;
    border-style: solid;
}

.accordion-button:not(.collapsed) {
    background-color: transparent;
    box-shadow: none;
}

/* booking imge  opacity */
.bg-booking {
    background-color: #0F61A5;
    opacity: 0.9;
}

/* wallet image opacity */
.bg-wallet {
    background-color: #D17213;
    opacity: 0.9;
}

.reservation {
    position: relative;
}

.reservation-badge {
    background-color: chartreuse;
    padding: 10px;
    border-radius: 50px;
    height: 5px;
    width: 5px;
    position: absolute;
    left: 30px;
    top: 20px;
}

.pay-btn-shadow {
    background-color: #477DBD;
    border-radius: 12px;
    box-shadow: 0 4px 0 #365a91;
    transition: all 0.2s ease-in-out;
}


/* media query */

@media (min-width: 992px) {

    /* Applies from large screens (lg) and up */
    .custom-width {
        max-width: 800px;
        /* Restricts width on larger screens */
    }
}

@media (max-width: 767px) {
    .banner-text {
        font-size: 36px;

        /* Adjust to fit mobile view */
    }

    .option-section {
        flex-direction: column;
        text-align: center;
    }

    .ranking-section {
        flex-direction: column;
        text-align: center;
    }

    .accept-btn {
        text-align: center;
        margin-bottom: 20px;
    }

    .section {
        margin-top: 100px;

    }

    .dropdown-btn {
        width: 100%;
        margin-bottom: 10px;
    }


}