/* variables to store theme colors */
:root {
    --dark-brown-text: #231E19;
    --red-accent: #AD004E;
    --white-background: #E7E0D4;
}

/* Main Hero Section */
.hero-section {
    background-color: var(--white-background); /* Backup color */
    position: relative;
    padding: 3rem 0;
}

/* Left Section Styling */
.left-section {
    background-color: var(--white-background); /* Background image for left side */
    background-size: cover;
    background-position: center;
    color: #ffffff;
    padding: 2rem;
    text-align: center;
    min-height: 100vh;
}

/* Right Section Styling */
.right-section {
    background: linear-gradient(60deg, #7E5936, #F5CB86); /* Gradient background for right side */
    background-size: cover;
    background-position: center;
    padding: 2rem;
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100vh;
}

/* Circular Image Styling */
.circular-image-wrapper {
    position: relative;
    border-radius: 50%;
    transform: translateX(-20%); /* Protrude into left section by 10% */
}

.circular-image {
    width: 100%;
    transform: scale(1.2);
    height: auto;
}

/* Text Styling */
.logo {
    /* margin-top: -5rem; */
    animation: scaleUp 1s ease-out forwards; /* Customize duration and easing as needed */
    transform-origin: center; /* Keep the scale centered */
    opacity: 0; /* Initial state */
}

.subheadline {
    font-size: 16px;
    color: #222121;
    font-weight: 200;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.headline {
    font-size: 36px;
    font-weight: 700;
    color: var(--red-accent);
    margin-top: 1.5rem;
    margin-bottom: 3rem;
}

.color-headline {
    color: var(--red-accent);
}

.headline-wrap {
    display: block;
}

.headline-container{
    text-align: left;
    width: 80%;
}
.subheadline-bottom {
    font-size: 18px;
    color: #222121;
}

.call-to-action-container {
    display: flex;
    justify-content: flex-start; /* Align items to the left */
    width: 80%;
}

.call-to-action-button {
    display: inline-block; /* Ensure it's treated like a button */
    padding: 10px 20px;
    margin: 0;
    background-color: var(--red-accent); /* Button background */
    color: white; /* Button text color */
    text-decoration: none; /* Remove underline */
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif; /* Button font */
    font-weight: 500;
    font-size: 1.2rem;
    letter-spacing: 1.5px;
    cursor: pointer;
    margin-top: 2rem;
    border-radius: 8px; /* Optional: rounded corners */
}

.call-to-action-container :hover {
    background-color: #85003B;
    transform: scale(1.03); 
}

.logo-container{
    overflow: hidden;
    width: 80%;
    text-align: left;
    margin-bottom: 3rem;
}

/* Override primary and secondary colors */
:root {
    --bs-primary: #bd184f;     /* New primary color */
    --bs-secondary: #4b6584;   /* New secondary color */
    --bs-success: #28a745;
    --bs-danger: #dc3545;
    --bs-body-bg: #bd184f;
}
.title {
    color: var(--dark-brown-text);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 54px;
    margin-bottom:1rem;
}
.text-muted {
    color: #6c757d !important;
}
  
body {
font-family: 'Montserrat', sans-serif;
background-color: var(--white-background);
}

.hero-content {
display: flex;
align-items: start;
}

.hero-title {
font-size: 2.5rem;
font-weight: bold;
text-transform: uppercase;
color: goldenrod;
}

.hero-button {
    position: relative;
z-index: 100;
margin-top: 20px;
font-size: 30px;
border-radius: 15px;
padding: 25px 25px;
}

/* Custom CSS for styling sections and footer */
.section {
padding: 50px 0;
text-align: center;
}

.section-dark {
background-color: var(--dark-brown-text);
}

.footer {
padding: 20px 0;
text-align: center;
background-color: #f8f9fa;
}

.icon {
font-size: 2.5rem;
color: var(--bs-primary);
margin-bottom: 10px;
}

/* Loading Spinner Styles */
.spinner-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #efece7f8; /* Light background */
display: flex;
justify-content: center;
align-items: center;
z-index: 9999; /* Ensure it's on top */
}

.spinner {
background-position: center;
animation: pulse 1s linear infinite;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

@keyframes pulse {
0% {
    transform: scale(0.9);
}
50% {
    transform: scale(1);
}
100% {
    transform: scale(0.9);
}
}
.spacer {
    margin-top: 5rem;
}

.section-title {
    color: var(--white-background);
    font-family: 'Montserrat', serif;
    font-weight: 600;
    font-size: 40px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 4rem;
}

.small-title {
    color: var(--red-accent);
    font-family: 'Montserrat', serif;
    font-weight: 600;
    font-size: 28px;
    margin-bottom: 2rem;
}

.course-shower {
    width: 70%;
    position: relative;
    z-index: 2;
}

.course-shower-button {
    position: absolute;
    font-size: 1.2rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    padding: 10px 20px;
    letter-spacing: 1.5px;
    border-radius: 8px;
    text-transform: uppercase;
    bottom: 40px; 
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--red-accent);
    color: #FAF5EE;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.5);
}

.course-shower-button-mobile {
    display: none;
}

.course-shower-button:hover {
    background-color: #85003B;
}

.drop-shadow {
    filter: drop-shadow(0px 16px 16px rgba(0, 0, 0, 0.5));
}

.section-light {
    overflow: hidden;
    background-color: var(--white-background);
}

.custom-paragraph
{   
    font-size: 20px;
    line-height: 1.5;
}

.section-magenta {
    padding: 25px;
    background-color: var(--red-accent);
}

.section-overlay-top {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background:linear-gradient(#0d0b09, var(--dark-brown-text));
    z-index: 0;
}  

.img-section {
    transform: scale(1.4);
}


/* Responsive Adjustments */
@media screen and (max-width: 790px) {
    .title {
        font-size: 42px;
    }

    .subheadline {
        font-size: 14px;
        color: #222121;
        font-weight: 200;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        line-height: 1.5;
    }

    .force-new-line {
        display: block; /* Forces the span to appear on a new line */
    }

    .call-to-action-container {
        display: flex;
        justify-content: center; /* Align items to the left */
        width: 100%;
    }

    .call-to-action-button {
        text-align: center;
        font-size: 16px;
        width: 90%;
        padding: 20px 30px;
    }
    /* Stack left and right sections vertically */
    .hero-content {
        flex-direction: column;
    }
    .left-section, .right-section {
        overflow: hidden;
        padding: 1.5rem;
        text-align: center;
        min-height: auto;
    }
    .circular-image-wrapper {
        margin-top: 2rem;
        transform: translateX(5%); /* Remove protrusion on mobile */
    }

    .logo {
        margin-top: 0;
        animation: scaleUpMobile 1s ease-out forwards; /* Customize duration and easing as needed */
        transform-origin: center; /* Keep the scale centered */
        opacity: 0; /* Initial state */
        width:100%;
    }

    .logo-container{
        margin-bottom: 1rem;
    }

    .headline-container {
        text-align: center;
        width: 100%;
        margin-top: 3rem;
        margin-bottom: 2rem;
    }
    .headline {
        font-size: 28px;
        margin-bottom: 2rem;
    }
    .spacer {
        margin-top: 0 !important;
    }
    .course-shower {
        width: 90% !important;
        position: relative;
        z-index: 1;
    }

    .course-shower-button {
       display: none !important;
    }

    .course-shower-button-mobile {
        display: block !important;
        position: relative;
        font-family: 'Montserrat', sans-serif;
        font-weight: 500;
        font-size: 16px;
        letter-spacing: 1.5px;
        padding: 1rem 2rem;;
        border-radius: 8px;
        margin-top: 2rem;
        text-transform: uppercase;
        color: white;
        background-color: var(--red-accent);
        cursor: pointer;
        text-decoration: none;
    }

    .text-order {
        order: 1;
    }

    .picture-order{
        order: 2;
    }

    .subheadline-bottom {
        margin-bottom: 1rem;
    }
    .img-section {
        transform: scale(1.25) translateY(3%);
    }

    .custom-paragraph
{   
    font-size: 14px;
    line-height: 1.5;
    padding: 10px 30px;
}
.small-title {
    font-size: 20px;
    margin-top: -30px;
}

.section-title {
    font-size: 26px;
    margin-bottom: 50px;
}

}

@keyframes scaleUpMobile {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    100% {
        transform: scale(0.7);
        opacity: 1;
    }
}

@keyframes scaleUp {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}