/* HOME PAGE */

/* Modify the home page feature area background */
#home-page .feature-region {
    background-repeat: no-repeat; /* Prevent background image from repeating */
    background: linear-gradient(to right, #4c1464, #840171, #4c1464); /* Create a linear gradient background from left to right with specified colors */
}

/* Modify the H1 text style in the feature area. The actual text is added by JavaScript */
#home-page #feature h1 {
    letter-spacing: 0.1em; /* Adjust the spacing between characters in the text */
    font-size: 4.2em; /* Set the font size for the heading */
    opacity: 0; /* Initially make the text invisible (for the fade-in animation below) */
    animation: fadeIn 1s ease-in-out forwards; /* Apply a fading-in animation with a duration of 1 second */
}

/* Add the fade-in animation keyframes; this part can be applied any element */
@keyframes fadeIn {
    from {
        opacity: 0; /* Start the animation with text being invisible */
    }
    to {
        opacity: 1; /* End the animation with text fully visible */
    }
}

/* Modify the H3 text style in the feature area. Add actual text via JavaScript */
#home-page #feature h3 {
    text-align: left; /* Align text to the left */
    font-size: 1.9em; /* Set the font size for the heading */
    font-weight: 500; /* Adjust the thickness of the font */
    margin-top: 1em; /* Add space above the heading */
    padding-top: 2em; /* Add space at the top of the element */
    margin-left: 7%; /* Set the left margin for the element */
    line-height: 1; /* Adjust the space between lines of text */
    color: black; /* Set the text color to black */
    font-family: Roboto, sans-serif; /* Choose the font for the text */
    opacity: 0; /* Initially make the text invisible */
    animation: fadeIn 1s ease-in-out forwards; /* Apply a fading-in animation with a duration of 1 second */
}

/* Modify the P text style in the feature area. Add actual text via JavaScript */
#home-page #feature p {
    text-align: left; /* Align text to the left */
    font-size: 1.2em; /* Set the font size for the text */
    font-weight: 400; /* Adjust the thickness of the font */
    margin-top: 2em; /* Add space above the text */
    margin-bottom: 2em; /* Add space below the text */
    margin-left: 7%; /* Set the left margin for the text */
    line-height: 1.5; /* Adjust the space between lines of text */
    padding-bottom: 5em; /* Add space at the bottom of the element */
    font-family: Inter, sans-serif; /* Choose the font for the text */
    color: black; /* Set the text color to black */
    opacity: 0; /* Initially make the text invisible */
    animation: fadeIn 1s ease-in-out forwards; /* Apply a fading-in animation with a duration of 1 second */
}

/* Modify the search box background color */
#search-form.callout-region {
    background: linear-gradient(to right, #4c1464, #840171, #530260, #530260, #530260, #530260); /* Create a gradient background with specified colors */
}

/* Modify the layout of the search box label */
.search-form .search-label {
    line-height: 1.5; /* Adjust the space between lines of text */
    font-size: 26px; /* Set the font size for the label */
    font-weight: 500; /* Adjust the thickness of the font */
    color: #4c1464; /* Set the text color to a specific shade */
}

/* Modify the layout of the search box */
.search-form .search-box-wrapper {
    margin: 0 auto; /* Center-align the box horizontally */
    display: block; /* Make the box a block-level element */
    width: 50%; /* Set the width of the box to 50% of its container */
    padding: 0 0 0 0; /* Add padding to the box */
}

/* Modify the corners and size of the search box */
.search-form .search-box {
    border-radius: 4px; /* Round the corners of the box */
    height: 44px; /* Set the height of the box */
}

/* Modify the layout of the search box submit icon */
.search-form .search-submit {
    color: #4c1464; /* Set the color of the submit icon */
    width: 30px; /* Set the width of the icon */
    height: 30px; /* Set the height of the icon */
    top: 8px; /* Adjust the vertical position of the icon */
}

/* Modify the listing page footer background */
.callout-region {
    background-color: #4c1464; /* Set the background color of the footer section */
}

/* Define the styling for the banner container */
.banner-container {
    position: relative; /* Set the position relative to its parent */
    text-align: center; /* Center-align content horizontally */
    background-image: url('https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2970&q=80'); /* Set a background banner image */
    background-size: cover; /* Adjust the background size to cover the entire element */
    background-repeat: no-repeat; /* Prevent background image from repeating */
    background-position: center center; /* Center-align the background image horizontally and vertically */
    height: 28em; /* Set the height of the banner area */
    overflow: hidden; /* Hide any content that overflows the area */
}

/* Create a dark overlay for the banner container */
.banner-container::before {
    content: ""; /* Generate a content box */
    position: absolute; /* Set the position absolute to the parent container */
    top: 0; /* Position at the top */
    left: 0; /* Position at the left */
    width: 100%; /* Cover the full width of the parent container */
    height: 100%; /* Cover the full height of the parent container */
    background: rgba(0, 0, 0, 0.7); /* Create a semi-transparent overlay with a specific color, 0.7 is the alpha value, or opacity*/
    mix-blend-mode: multiply; /* Apply a blending mode to darken the background image */
    pointer-events: none; /* Allow interactions with the underlying text */
}

/* Define styling for the banner title */
.banner-title {
    position: absolute; /* Set the position to absolute */
    top: 50%; /* Position it vertically at the center */
    left: 0; /* Position it at the left of its container */
    width: 100%; /* Cover the full width of its container */
    padding: 10px; /* Add padding to the element */
    padding-bottom: 20px; /* Add extra padding at the bottom of the element */
    font-family: Roboto, sans-serif; /* Choose the font for the text */
    color: #fff !important; /* Set the text color to white */
    background-color: transparent; /* Make the background color transparent */
    opacity: 1 !important; /* Set the text opacity to fully visible */
    white-space: normal; /* Allow text to wrap to the next line */
    text-align: center; /* Center-align the text horizontally */
    transform: translate(0, -50%); /* Vertically center-align the text */
}

/* Define styling for the gray box (the container for the course description section) */
.gray-box {
    background-color: #e8e8e8; /* Set the background color of the gray box */
    color: white; /* Set the text color to white */
    padding: 0px; /* Add padding to the gray box */
}

/* Styling for the Contact Section */
.contact-section {
    background-color: #ffffff; /* Set the background color of the contact section */
    padding: 20px; /* Add padding around the section */
    text-align: center; /* Center-align the content */
}

/* Styling for the Contact Button */
.contact-button {
    display: inline-block; /* Display the button as an inline block */
    background-color: #4c1464; /* Set the background color of the button */
    color: #fff; /* Set the text color to white */
    padding: 12px 28px; /* Add padding around the button text */
    border: none; /* Remove the button border */
    border-radius: 0px; /* Do not round the corners of the button */
    font-size: 1.2em; /* Set the font size for the button text */
    font-family: Inter, sans-serif; /* Choose the font for the button text */
    font-weight: 500; /* Set the thickness of the font */
    text-decoration: none; /* Remove underlines from the button text */
    margin-top: 10px; /* Add space above the button */
    margin-bottom: 10px; /* Add space below the button */
    transition: background-color 0.3s, color 0.3s; /* Apply a smooth color transition on hover */
    white-space: nowrap; /* Prevent line break */

    /* Hover effect */
    &:hover {
        background-color: #ab6ba2; /* Change the background color on hover */
        color: black; /* Change the text color on hover */
        text-decoration: none; /* Remove underlines on hover */
    }
}