/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* This creates the side-by-side layout */
@font-face {
    font-family: 'Roxborough';
    src: url('roxborough-cf-regular.woff2'); 
}
/* No bracket here */
.hero-container {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 50px;
    /* This creates that cool Canva gradient */
    background: linear-gradient(to right, #92a2a6, #a59e9a, #dcccc0, #f6dac4, #cbb4a6);
    min-height: 400px;
}

/* This styles the text side */
.hero-text {
    flex: 1;
    color: #2d1b4d; /* That dark purple color from the image */
    font-family: 'Roxborough', sans-serif;
    padding: 40px;
}

/* This makes sure the image doesn't get too huge */
.hero-image img {
    max-width: 500px;
    height: auto;
    border-radius: 8px; /* Optional: rounds the corners of your image */
}
h1 {
    /* Replace 'RoxboroughCF' with whatever font you chose */
    font-family: 'Roxborough', serif; 
    font-size: 3.5em; /* Makes it big like the Canva design */
    font-weight: 700; /* Makes it bold */
    color: #2d1b4d;
    margin-bottom: 10px;
}

.button-row {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.highlight {
    color: #f1eeee8;
} /* Make sure this bracket is here! */

.hero-btn {
    background-color: white !important;
    color: #2d1b4d;
    padding: 12px 24px;
    text-decoration: none;
    font-family: sans-serif;
    font-weight: bold;
    display: inline-block;
    border: none;
}
.hero-subtext {
    color: #f1eee8; /* This is the light cream/pink color from your buttons */
    font-family: 'Roxborough', serif;
    font-size: 3.5em; /* Adjust this to make it smaller/larger than the 'Hi' header */
    line-height: 1.2;
    margin-top: 20px;
    text-transform: uppercase;
}