/* Base size and color palette */
:root {
    --camp-detail-padding: 2vw; /* Fluid padding */
    --yellow-color: rgb(248, 184, 51); /* Yellow color */
    --orange-color: rgb(168, 62, 0); /* Orange shadow */
    --burgundy-color: rgb(121, 6, 0); /* Burgundy background */
}

/* General styles for select dropdown */
select.form-control {
    appearance: auto; /* Ensure default dropdown appearance */
    font-size: 1rem; /* Set a standard font size */
    color: black; /* Ensure text color is visible */
    padding: 0.5rem; /* Add some padding for better UX */
    background-color: white; /* Set background color */
    border: 1px solid var(--yellow-color); /* Match the theme */
    border-radius: 0.5rem; /* Add slight rounding to match overall design */
    width: 100%; /* Ensure it fills its container */
    outline: none; /* Remove default browser outline */
    box-shadow: none; /* Remove unwanted shadow effects */
    margin-bottom: 1rem; /* Add space below the dropdown */
    line-height: 1.5; /* Adjust line height for proper vertical alignment */
    height: auto; /* Allow height to adjust with padding and font size */
}

    /* Ensure the text inside the dropdown is vertically aligned */
    select.form-control option {
        line-height: normal; /* Reset any inherited line height */
        padding: 0.2rem; /* Optional: Adjust padding inside the dropdown options */
        font-size: 1rem; /* Match font size */
    }

    /* Hover and focus effects for dropdown */
    select.form-control:hover,
    select.form-control:focus {
        border-color: var(--orange-color); /* Highlight border on hover/focus */
        box-shadow: 0 0 5px var(--orange-color); /* Add subtle shadow */
    }

/* Adjust for smaller screens */
@media (max-width: 768px) {
    select.form-control {
        font-size: 1.2rem; /* Slightly larger font size for mobile */
    }
}



/* Global settings */
html, body {
    margin: 0;
    padding: 2vh;
    width: 95vw;
    height: 100vh;
    overflow-x: hidden;
    font-family: 'Changa', sans-serif;
}

/* Background color for the page */
body {
    background-color: var(--burgundy-color) !important;
}

/* Remove default margin and padding from all elements */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Add some top padding or margin to the section containing the card */
.section {
    margin-top: 5vw; /* Add space between navbar and card */
}

/* Camp details card styling (standalone) */
.camp-detail-card {
    background-color: white;
    border: 0.5vw solid var(--yellow-color); /* Fluid border */
    color: black;
    padding: var(--camp-detail-padding); /* Fluid padding */
    margin: 2vw; /* Fluid margin */
    width: 100%; /* Full width card */
    box-shadow: 0.5vw 0.8vw 1vw rgba(0, 0, 0, 0.3); /* Fluid shadow */
    border-radius: 1vw; /* Fluid rounded corners */
    display: block;
    vertical-align: top;
}

    /* Ensure the image fits nicely within the details card */
    .camp-detail-card .camp-image {
        width: 100%;
        height: 20vw; /* Fluid image height */
        border-radius: 0.8vw; /* Fluid border-radius */
        object-fit: cover; /* Ensures the image maintains aspect ratio */
        margin-bottom: 1vw;
    }

    /* Set text color for elements inside the camp detail card */
    .camp-detail-card h3,
    .camp-detail-card p,
    .camp-detail-card strong,
    .camp-detail-card a {
        color: black !important;
        font-size: 1.5vw; /* Fluid font size for text */
        margin-bottom: 1vw;
    }

/* Button inside the camp details card */
.camp-detail-btn {
    font-family: 'Changa', sans-serif;
    font-weight: 700;
    color: var(--orange-color) !important;
    background-color: var(--yellow-color);
    border: none;
    padding: 1vw 2vw; /* Fluid padding */
    font-size: 1.3vw; /* Fluid font size */
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-shadow: -0.5vw 0.5vw 0px var(--orange-color); /* Fluid shadow */
    display: inline-block;
    width: 100%; /* Full width button */
    border-radius: 0; /* No rounded corners */
    text-align: center;
}

    .camp-detail-btn:hover {
        background-color: var(--orange-color);
        color: white !important;
        box-shadow: none;
        transform: translate(0.2vw, 0.2vw); /* Small fluid transform */
    }

/* Responsive adjustments */

/* Large devices (desktops, laptops, tablets in landscape mode) */
@media (max-width: 1200px) {
    .camp-detail-card {
        padding: 3vw;
        margin: 3vw;
    }

        .camp-detail-card h3,
        .camp-detail-card p,
        .camp-detail-card strong,
        .camp-detail-card a {
            font-size: 1.8vw;
        }

    .camp-detail-btn {
        padding: 1.5vw 2vw;
        font-size: 1.5vw;
    }

    .camp-detail-card .camp-image {
        height: 22vw;
    }
}

/* Medium devices (tablets, phones in landscape mode) */
@media (max-width: 768px) {
    .camp-detail-card {
        padding: 4vw;
        margin: 4vw;
    }

        .camp-detail-card h3,
        .camp-detail-card p,
        .camp-detail-card strong,
        .camp-detail-card a {
            font-size: 2.0vw;
        }

    .camp-detail-btn {
        padding: 2vw;
        font-size: 1.8vw;
    }

    .camp-detail-card .camp-image {
        height: 25vw;
    }
}

/* Small devices (large phones, small tablets) */
@media (max-width: 576px) {
    .camp-detail-card {
        padding: 5vw;
        margin: 5vw;
    }

        .camp-detail-card h3,
        .camp-detail-card p,
        .camp-detail-card strong,
        .camp-detail-card a {
            font-size: 2.5vw;
        }

    .camp-detail-btn {
        padding: 2.5vw;
        font-size: 2.2vw;
    }

    .camp-detail-card .camp-image {
        height: 30vw;
    }
}

/* Extra small devices (small phones) */
@media (max-width: 390px) {
    .camp-detail-card {
        padding: 6vw;
        margin: 6vw;
    }

        .camp-detail-card h3,
        .camp-detail-card p,
        .camp-detail-card strong,
        .camp-detail-card a {
            font-size: 3.5vw;
        }

    .camp-detail-btn {
        padding: 3vw;
        font-size: 2.8vw;
    }

    .camp-detail-card .camp-image {
        height: 35vw;
    }
}