.bg-light{
    background-color: rgb(243, 246, 250);
}
.bg-blue{
    background-color: var(--blue);
}
.bg-fixed{
    background-attachment: fixed;
}
.bg-cover{
    background-size: cover;
}
.fw-100{
    font-weight: 100 !important;
}
.fw-300{
    font-weight: 300 !important;
}
.fw-400{
    font-weight: 400 !important;
}
.fw-500{
    font-weight: 500 !important;
}
.fw-700{
    font-weight: 700 !important;
}
.btn{
    letter-spacing: 2px;
    font-size: 0.9rem;
    font-weight: 500;

}
.btn-outline-light{
    border: 2px solid white;
    border-radius: 0;
    background-color: transparent !important;
    color: white;
    padding: 0.8rem  2rem;
}
.btn-outline-light:hover{
    background-color: white !important;
    color: black;
}
.btn-outline-black{
    border: 2px solid black;
    border-radius: 0;
    background-color: transparent !important;
    color: black;
    padding: 0.8rem  2rem;
}
.btn-outline-black:hover{
    background-color: black !important;
    color: white;
}

.text-blue{
    color: var(--blue);
}
.text-black-10{ color: rgba(0,0,0,0.1) !important;}
.text-black-20{ color: rgba(0,0,0,0.2) !important;}
.text-black-30{ color: rgba(0,0,0,0.3) !important;}
.text-black-40{ color: rgba(0,0,0,0.4) !important;}
.text-black-50{ color: rgba(0,0,0,0.5) !important;}
.text-black-60{ color: rgba(0,0,0,0.6) !important;}
.text-black-70{ color: rgba(0,0,0,0.7) !important;}
.text-black-80{ color: rgba(0,0,0,0.8) !important;}
.text-black-90{ color: rgba(0,0,0,0.9) !important;}
.bg-black-10{ background-color: rgba(0,0,0,0.1) !important;}
.bg-black-20{ background-color: rgba(0,0,0,0.2) !important;}
.bg-black-30{ background-color: rgba(0,0,0,0.3) !important;}
.bg-black-40{ background-color: rgba(0,0,0,0.4) !important;}
.bg-black-50{ background-color: rgba(0,0,0,0.5) !important;}
.bg-black-60{ background-color: rgba(0,0,0,0.6) !important;}
.bg-black-70{ background-color: rgba(0,0,0,0.7) !important;}
.bg-black-80{ background-color: rgba(0,0,0,0.8) !important;}
.bg-black-90{ background-color: rgba(0,0,0,0.9) !important;}
.after-bg-black-10:after{ background-color: rgba(0,0,0,0.1) !important;}
.after-bg-black-20:after{ background-color: rgba(0,0,0,0.2) !important;}
.after-bg-black-30:after{ background-color: rgba(0,0,0,0.3) !important;}
.after-bg-black-40:after{ background-color: rgba(0,0,0,0.4) !important;}
.after-bg-black-50:after{ background-color: rgba(0,0,0,0.5) !important;}
.after-bg-black-60:after{ background-color: rgba(0,0,0,0.6) !important;}
.after-bg-black-70:after{ background-color: rgba(0,0,0,0.7) !important;}
.after-bg-black-80:after{ background-color: rgba(0,0,0,0.8) !important;}
.after-bg-black-90:after{ background-color: rgba(0,0,0,0.9) !important;}

.bg-top{
    background-position-y: top;
}
.bg-bottom {
    background-position-y: bottom;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
    background-color: #F08080 !important;
    border-color: #F08080 !important;
	border-radius: 0px !important;
	text-decoration-line: none !important;
}

.btn-primary:hover {
    background-color: #EC5E5E !important;
    border-color: #EC5E5E !important;
	text-decoration-line: none !important;

}

.virtual p {
	margin-bottom:0px;
	color: #F08080;
	font-size: 16px;
	padding: 3px 0px 1px 0px;
}


/* Show dropdown on hover (desktop only) */
@media (min-width: 992px) { /* matches lg breakpoint */
    .navbar-nav .dropdown:hover > .dropdown-menu {
        display: block;
    }

    .navbar-nav .dropdown > .dropdown-toggle::after {
        transition: transform 0.3s;
    }

    .navbar-nav .dropdown:hover > .dropdown-toggle::after {
        transform: rotate(180deg);
    }
}


/* Remove dropdown arrow */
.navbar .dropdown-toggle::after {
    display: none;
}

/* Fix hover gap between parent and dropdown */
.navbar .dropdown-menu {
    margin-top: 0;       /* remove default top margin */
    border-top-left-radius: 0;  /* optional: make menu flush */
    border-top-right-radius: 0; /* optional */
}

/* Optional: smooth hover background on menu items */
.navbar .dropdown-menu .dropdown-item:hover {
    background-color: #f8f9fa; /* light highlight */
}

