body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
}


.price {
    font-size: 24px;
    color: #ff5733;
}
:root {
  --bs-gutter-y: 2rem; /* Change the vertical gutter spacing to 2rem */
}

.options {
  --bs-gutter-y: 2rem; /* Change the vertical gutter spacing to 2rem */
}

.card-body ul li i {
    font-size: 0.9rem;
}

.hero {
    background: linear-gradient(to right, #007bff, #00c6ff);
    position: relative;
}

.hero h2 {
    padding: 20px; /* Padding for some space around the text */
    border-radius: 5px; /* Optional: rounded corners */
    display: inline-block; /* Ensures the background wraps tightly around the text */
}

.card {
    transition: transform 0.3s;
    border: none;
}

.card:hover {
    transform: scale(1.05);
}

.card-header {
    font-size: 1.5rem;
    font-weight: bold;
}

.card-body h4 {
    margin-bottom: 1rem;
    font-weight: bold;
}

.card-body ul li {
    font-size: 1.1rem;
    margin: 0.5rem 0;
}

.hide_element {
    display: none;
  }

.show_element {
    display: block;
  }


 fieldset, fieldset legend {
    all: revert;
 }


fieldset {
    border: none;              /* Remove default border */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
    border-radius: 10px;       /* Rounded corners */
    padding: 20px;             /* Space inside */
    background-color: #f8f9fa; /* Light background */
}

fieldset legend {
    font-size: 1.5rem;         /* Larger font for legend */
    font-weight: bold;
    padding: 0 10px;           /* Padding around the text */
    background-color: #007bff; /* Blue background */
    color: white;              /* White text */
    border-radius: 5px;        /* Rounded corners */
}

.btn-custom {
    background-color: #007bff;
    color: white;
    border: none;
    transition: background-color 0.3s, transform 0.2s;
    font-size: 1.4rem;
    padding: 1rem 1.8rem;
    border-radius: 1rem;
}

.btn-custom:hover {
    background-color: #0056b3;
    transform: scale(1.05);
}

.label-helper-text{

    padding-right:calc(var(--bs-gutter-x) * .5);
    padding-left:calc(var(--bs-gutter-x) * .5);
    font-size:calc(var(--bs-body-font-size) * 0.85);
    font-style: italic;

}



.navbar-large .nav-link {
    font-size: 1.5rem; /* twice the default size */
}

.navbar-midlarge .nav-link {
    font-size: 1.25rem; /* twice the default size */
}

.navbar-nav .nav-link {
    color: #ffffff !important;        /* bright yellow text */
    font-weight: 700;                 /* bold text */
    text-shadow: 1px 1px 2px #000;   /* subtle shadow for contrast */
    transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover {
    color: #0d6efd !important;        /* changes on hover */
    background-color: #ffffff70; /* slight highlight */
    border-radius: 5px;               /* rounded hover background */
}


.logo_text {
            font-family: 'Lobster', cursive; /* Fallback to cursive if needed */
            font-weight: bold; 
            margin-top: -4px;
            font-size: 1rem; 
            line-height: 1; 
            color: #ffffff;
            text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4); /* Optional shadow for depth */
            text-align: center;
        }


.login_text {
            font-weight: bold; 
            margin-top: -4px;
            font-size: 1rem; 
            line-height: 1; 
            color: #ffffff;
            text-align: center;
        }


header.navbar {
    position: relative;
    z-index: 2000;
}


/* Ensure mobile dropdown overlaps hero section */
.navbar .dropdown-menu {
    position: absolute !important;
    z-index: 9999 !important;
}

/* Ensure navbar does not clip the dropdown */
.navbar {
    overflow: visible !important;
}



/* ---- MOBILE MENU (icon-only) ---- */
@media (max-width: 768px) {
    .profile-menu {
        width: 60px !important;
        padding: 0;
    }
    .profile-menu .text-label {
        display: none;
    }
    .profile-menu .list-group-item {
        text-align: center;
        padding-left: 0;
        padding-right: 0;
    }
}

/* ---- ACTIVE MENU ITEM styling ---- */
.list-group-item.active {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #fff !important;
    font-weight: 600;

    /* Remove right corners so it connects to profile content */
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* ---- PROFILE CONTENT CARD merges with active item ---- */
.profile-content-card {
    border-left: none !important;             /* remove dividing line */
    border-radius: 0.5rem;                    /* regular rounding */
    border-top-left-radius: 0 !important;     /* merge with active menu item */
    border-bottom-left-radius: 0 !important;
}

/* Fix icon alignment */
.list-group-item i {
    width: 22px;
}

/* Compact form styling for profile subpages */
.compact-form .row {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.compact-form .form-control,
.compact-form .form-select {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

.compact-form label {
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.compact-form .btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}