/* Make the body and main take full height */
html, body {
    height: 100%;  /* Full height */
}

body {
    display: flex;
    flex-direction: column;  /* Stack elements vertically */
    background-color: #fff8f5;
    color: #333;
}

/* Ensure the main content area takes the remaining space */
main.content {
    flex: 2;  /* Allow it to grow and take the remaining space */
    display: flex;
    flex-direction: column;  /* Stack the sections vertically */
    width: 100%;
}

/* Footer fixes */
footer {
    background-color: #CCBEB1;
    color: #331C08;
    text-align: center;
    padding: 15px 10px;
    margin-top: 30px;
    font-size: 0.9rem;
    /* Ensure footer always sticks to the bottom of the page */
    flex-shrink: 0; /* Prevent it from shrinking when the page content is small */
}

/* Navbar custom styling */
.navbar_main {
    display: flex;
    width: 100%;
    background-color: #CCBEB1; /* Updated navbar background */
}

.navbar_main a,
.navbar_main .nav-link,
.navbar_main span {
    color: #331C08 !important; /* Default font color */
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.navbar_main .nav-link:hover,
.navbar_main .nav-link.active {
    background-color: #664C36 !important; /* Hover/active background */
    color: #FFD3AC !important;           /* Hover font color */
}

/* Optional: remove unwanted border from header if needed */
.navbar_main header {
    border-bottom: none !important;
}

/* Ensure the container-fluid in footer takes up full width */
footer .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

/* Font customization classes */
.montserrat-small {
    font-family: "Montserrat", sans-serif;
    font-size: 0.7rem;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
}

.montserrat-small2h {
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 600;
}

.montserrat-small2b {
    font-family: "Montserrat", sans-serif;
    font-size: 0.875rem;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 300;
}

 Gradient Background
.gradient {
    min-height: 100vh;
    background: linear-gradient(to right, #ed6ea0, #ec8c69);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}
.headbox {
    display: flex;
    flex-direction: column;
    width: 100%;

}

.headbox1 {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row; /* Arrange child divs horizontally */
    width: 100%;
    height: 600px; /* Fixed height for first box */
    background-image: url('../src/images/back.jpg'); /* Add the background image */
    background-size: cover; /* Ensures the image covers the whole div */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
}

@media (min-width: 768px) {
    .headbox1left, .headbox1right {
        display: block;
        width: 50%;  /* Make them side by side on large screens */
    }
}

/* For small screens, switch the layout to column */
@media (max-width: 767px) {
    .headbox1left, .headbox1right {
        width: 100%;  /* Stack them on top of each other */
        display: block;
    }
}

.headbox2 {
    width: 100%;
    height: 100%;  /* Choose the appropriate height */
    background: linear-gradient(to right, #ed6ea0, #ec8c69);  /* Apply gradient */
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;/* Fixed height for second box */
}

.headbox3 {
    width: 100%;
    height: 800px; /* Fixed height for second box */
}

/* First box section - takes 1/3 of the space */
.headbox1left {
    display: flex;
    width: 50%;
    flex: 1; /* Takes up 1 part of the space */
    background: linear-gradient(272deg, transparent 0%, #1d1914 77%);
    url('path/to/your/back.jpg'); /* Gradient over the background image */
    background-size: cover; /* Ensures both gradient and image cover the div */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */

    align-items: center; /* Optional: center content horizontally */
    justify-content: center; /* Optional: center content vertically */
}

/* Second box section - takes 2/3 of the space */
.headbox1right {
    display: flex;
    flex: 2; /* Takes up 2 parts of the space */
     /* Example styling */
    width: 50%;
}


.welcome-text {
    font-family: "Montserrat", sans-serif;
    font-weight: bold;
    font-size: 2.5rem;
    color: white; /* Dark color for the title */
    margin-bottom: 10px;
}

.subtext {
    font-family: "Montserrat", sans-serif;
    font-weight: 300;
    font-size: 1rem;
    color: lightgray;
    margin-bottom: 20px;
}

/* Buttons container */
.button-container {
    margin-top: 20px;
    display: flex;
    gap: 20px;
    justify-content: left;
    font-family: "Montserrat", sans-serif;
}

/* Override Bootstrap's default .btn class */
/* Override Bootstrap's .btn class */
.btn,
.btn-primary {
    background-color: #CCBEB1 !important; /* Light peach background */
    border: 2px solid #331C08 !important; /* Light peach border */
    color: #331C08 !important; /* Dark brown text */
    box-shadow: none !important;
    outline: none !important;
}

/* Override .btn-primary hover and focus states */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #664C36 !important; /* Dark brown background */
    border-color: #664C36 !important; /* Dark brown border */
    color: #FFD3AC !important; /* Light peach text */
}

/* Override .btn-primary active state */
.btn-primary:active {
    background-color: #CCBEB1 !important; /* Light gray background */
    border-color: #CCBEB1 !important; /* Light gray border */
    color: #331C08 !important; /* Dark brown text */
}


/* Apply button styles to anchor tags */
/* Define the base button styles */
/* Define the base button styles */
/* Primary button */
/* Base button styles */
a.btn {
    --color: #FFD3AC; /* Light peach */
    font-family: inherit;
    display: inline-block;
    width: 9em;
    height: 3.2em;
    line-height: 2.5em;
    overflow: hidden;
    cursor: pointer;
    margin: 20px;
    font-size: 17px;
    z-index: 1;
    color: var(--color); /* Text color */
    border: 2px solid var(--color); /* Border color */
    border-radius: 6px;
    position: relative;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease; /* Smooth transition */
}

/* Hover effect */
a.btn:hover {
    color: #fff; /* Text color changes to white */
    background-color: #664C36; /* Dark brown background */
    border-color: #664C36; /* Dark brown border */
}

/* Circle effect behind the button */
a.btn::before {
    position: absolute;
    content: "";
    background: #FFD3AC; /* Light peach circle */
    width: 150px;
    height: 200px;
    z-index: -1;
    border-radius: 50%;
    top: 100%;
    left: 100%;
    transition: 0.3s all;
}

/* Hover effect on the circle */
a.btn:hover::before {
    top: -30px;
    left: -30px;
    background: #664C36; /* Dark brown circle */
}

/* Focus styles for accessibility */
a.btn:focus {
    outline: none;
    box-shadow: 0 0 5px 2px #CCBEB1; /* Light gray focus ring */
}

/* Secondary button styles */
a.btn-secondary {
    --color: #331C08; /* Dark brown */
    border-color: #331C08; /* Dark brown border */
}

a.btn-secondary:hover {
    color: #fff; /* Text color changes to white */
    background-color: #CCBEB1; /* Light gray background */
    border-color: #CCBEB1; /* Light gray border */
}

a.btn-secondary::before {
    background: #331C08; /* Dark brown circle */
}

a.btn-secondary:hover::before {
    background: #CCBEB1; /* Light gray circle */
}




.headbox1leftcont{
    height: 50%;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-left: 30px;
    right: 10px;
}