:root {
        --section-url: url(https://cdn.midjourney.com/7614ba59-50b2-49e0-a549-d2d9fc2b1307/0_2.png);
        /* Variables for different gradients using the above color combinations */
        --gradient-1: linear-gradient(to bottom right, var(--tan), var(--champagne-pink));
        --gradient-2: linear-gradient(to bottom right, var(--champagne-pink), var(--tan));
        --gradient-3: linear-gradient(to bottom right, var(--tan), var(--seashell));
        --gradient-4: linear-gradient(to bottom right, var(--seashell), var(--tan));
        --gradient-5: linear-gradient(to bottom right, var(--tan), var(--linen));
        --gradient-6: linear-gradient(to bottom right, var(--linen), var(--tan));
        --white: #ffffffff;
        --seashell: #fdeee6ff;
        --seashell-text: rgb(146, 146, 146);
        --tan: #d9b99bff;
        --champagne-pink: #e8d3c3ff;
        --linen: #f5e9dcff;
    }
.ttan {
    color: var(--tan);
}
.tan {
    background: var(--tan)
}
.champ {
    background: var(--champagne-pink)
}
.sea {
    background: var(--seashell)
}
.sea-text {
    color: var(--seashell)
}

#hero-drawing-bg {
    fill: var(--champagne-pink);
}
.vh-80 {
    height: 80vh;
}

.hero {
    /* background-image: url(https://cdn.midjourney.com/cdf41264-c365-4ec9-a9b8-6fca009f952c/0_0.png); */
    background-image: url(https://media.discordapp.net/attachments/1086597045437075536/1086643096399392829/image.png?width=2262&height=1274);
    background-size: cover;
    background-position: center;
    height: 80vh;
    width: 100%;
}
.section-img {
    background-image: var(--section-url);
    background-size: cover;
    background-position: center;
    height: 100vh;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: var(--seashell);
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--white);
    padding: 16px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.logo {
    font-size: 24px;
    font-weight: bold;
    color: var(--tan);
}

.cta {
    background-color: var(--champagne-pink);
    color: var(--white);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

.cta:hover {
    background-color: var(--linen);
}

section {
    background-image: linear-gradient(to bottom right, var(--champagne-pink), var(--linen));
}

h1 {
    font-size: 48px;
    font-weight: bold;
    color: var(--tan);
    text-align: center;
    margin-bottom: 32px;
}

p {
    color: var(--tan);
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--tan);
    color: var(--white);
}

.contact-info h3,
.social-media h3 {
    margin-bottom: 16px;
    font-weight: bold;
}

.contact-info ul,
.social-media ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-info li,
.social-media li {
    margin-bottom: 8px;
}

.social-media a {
    color: var(--white);
    text-decoration: none;
    transition: opacity 0.2s ease-in-out;
}

.social-media a:hover {
    opacity: 0.8;
}

/* Responsive styles */
@media screen and (max-width: 768px) {

    .contact-info,
    .social-media {
        margin-bottom: 32px;
    }
}

.button {
    /* Use --gradient-1 for the background */
    background: var(--gradient-2);
    border: none;
    border-radius: 50px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4);
    color: #FFFFFF;
    font-size: 18px;
    font-weight: bold;
    padding: 16px 32px;
    text-align: center;
    text-transform: uppercase;
    transition: transform 0.2s ease-in-out;
}

.button:hover {
    transform: translateY(-2px);
}