/* Navbar styling */
.navbar {
    z-index: 1000; /* Ensures the navbar stays on top of other elements */
}

/* Section One styling */
.section-one {
    background-image: url('Resources/luge_title.webp'); /* Background image for section one */
    background-position: bottom; /* Position the image at the bottom */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    background-size: cover; /* Cover the entire section with the image */
    box-shadow: 0 1vh 1vh rgba(0, 0, 0, 0.3), /* Adds a shadow for depth */
                0 0.3vh 0.5vh rgba(0, 0, 0, 0.1); /* Lighter shadow for subtlety */
    padding-bottom: 5vh; /* Bottom padding for spacing */
}

.section-one h1 {
    margin-top: 25vh; /* Top margin to position the heading */
    font-size: 10rem; /* Large font size for the heading */
}

.section-one p {
    margin-top: 5vh; /* Space above the paragraph */
    font-size: 2rem; /* Font size for the paragraph */
}

#section-one-button {
    margin-top: 10vh; /* Margin above the button */
}

/* Section Two - Left Column */
.section-two-section-left {
    background-image: url('Resources/luge_section2.webp'); /* Background image for the left section */
    background-position: center; /* Center the background image */
    background-repeat: no-repeat; /* Prevent image repetition */
    background-size: cover; /* Cover the section with the image */
    width: 40%; /* Width of the left section */
    box-shadow: 0 1vh 1vh rgba(0, 0, 0, 0.3), /* Shadow for depth */
                0 0.3vh 0.5vh rgba(0, 0, 0, 0.1); /* Lighter shadow */
    margin-left: 4vw; /* Margin to the left */
    margin-top: 4vw; /* Margin at the top */
    border-radius: 2vh; /* Rounded corners */
}

/* Section Two - Right Column */
.section-two-section-right {
    text-align: center; /* Center the text in this section */
    width: 40%; /* Width of the right section */
    margin-left: 10vw; /* Margin to the left */
    margin-top: 4vw; /* Margin at the top */
}

.section-two-section-right h1 {
    margin-top: 6vh; /* Top margin for the heading */
    color: #ffffff; /* White color for the heading text */
    font-size: 4rem; /* Font size for the heading */
}

.section-two-section-right p {
    text-align: left; /* Align text to the left */
    color: #edfaff; /* Light blue color for the paragraph text */
    margin-top: 3vh; /* Top margin for spacing */
    margin-left: 3vw; /* Left margin for spacing */
    font-size: 1.5rem; /* Font size for the paragraph */
}

#section-two-button {
    margin-top: 5vh; /* Margin above the button */
}

/* Section Three styling */
.section-three-section {
    height: 90vh; /* Set height of the section */
    margin-left: 5vw; /* Left margin for positioning */
    margin-top: 4vw; /* Top margin for spacing */
}

/* Column styling for grid layout */
.col-md-4 {
    z-index: 0; /* Default stacking context */
    margin-top: 10vh; /* Margin at the top */
}

/* Card link styling */
.card-link {
    text-decoration: none; /* Remove underline from links */
}

/* Card container styling */
.card-container {
    margin-left: 4vw; /* Left margin for positioning */
    transition: transform 0.3s ease; /* Smooth transform transition */
    transform-origin: center; /* Transform effect originates from the center */
}

/* Hover effect for card container */
.card-container:hover {
    transform: scale(1.1); /* Scale the card on hover */
}

/* Card body styling */
.card-body {
    text-align: center; /* Center the text in the card body */
    color: black; /* Black color for text */
}

/* Card text styling */
.card-text {
    color: #000000; /* Black color for card text */
    margin-bottom: 0vh; /* No margin at the bottom */
}

/* Card title styling */
.card-title {
    margin-top: 0vh; /* No margin at the top */
    color: #09526d; /* Dark blue color for the title */
    font-size: 2rem; /* Font size for the title */
}

/* Card bottom styling */
#card-bottom {
    border-radius: 0.5vh; /* Rounded corners */
    background-color: #09526d; /* Dark blue background color */
}

/* Section Three overall styling */
.section-three {
    margin-top: 10vh; /* Margin at the top */
}

/* Section Three heading styling */
.section-three h1 {
    font-size: 4rem; /* Font size for the heading */
    margin-bottom: 10vh; /* Margin below the heading */
}

/* Button styling in Section Three */
.section-three button {
    margin-bottom: 20vh; /* Margin below the button */
}

/* General button styling */
.btn {
    border-width: 0; /* Remove border */
    border-radius: 20rem; /* Circular button edges */
    background-color: #10bb3d; /* Green background color */
    font-size: 2rem; /* Font size for the button */
    transition: background-color 0.2s; /* Smooth background color transition */
}

/* Paragraph styling within the button */
.btn p {
    margin: 1vh; /* Margin around the paragraph */
    font-size: 1.5rem; /* Font size for the paragraph */
    color: #000000; /* Black color for the paragraph text */
    transition: color 0.2s; /* Smooth color transition */
    font-weight: 700; /* Bold font weight */
}

/* Hover effect for button */
.btn:hover {
    background-color: #09526d; /* Change background color on hover */
}

/* Hover effect for paragraph within button */
.btn:hover p {
    color: #10bb3d; /* Change text color on hover */
}