:root {
  --beige-bg: #FFEBCA;
  --beige-bright: #FFF1DA;
  --beige-mid: #F2DDBB;
  --purple-text-primary: #3D0944;
  --purple-bg: #731181;
  --purple-mid: #803d8a;
  --white-text: #FBF4EA;
  --orange: #C44900;
}

body {
    background-color: var(--beige-bg);
    color: var(--purple-text-primary);
    margin: 0;
}

.hero-container {
    display: block;
    margin: auto;
    width: fit-content;
}

.home-headline {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
    margin-bottom: -65px;
    width: fit-content;

}

@media screen and (max-width: 768px) {
    .home-headline {
        flex-direction: column;
        margin: 0 auto 1em auto;
    }
}

.home-headline > img {
    width: 300px;
    color: inherit;
    background-color: var(--beige-bright);
    border-radius: 50%;
    margin-right: 1em;
}

@media screen and (max-width: 768px) {
    .home-headline > img {
        width: 165px;
    }
}


.home-headline h1, .home-headline p {
    margin: 0;
} 

.home-headline h1 {
    font-size: 68px;
}

@media screen and (max-width: 768px) {
    .home-headline h1 {
        font-size: 36px;
    }
}

.home-headline p {  
    font-size: 34px;
    margin-bottom: 1em;  
}

@media screen and (max-width: 768px) {
    .home-headline p {  
        font-size: 24px;
        text-align: center;  
        margin-bottom: initial;
    }
}

.carousel {
    position: relative;
    height: 60vh;
    min-height: 320px;
    border-radius: 10px;
    border: 4px solid var(--purple-text-primary);
    background-color: var(--beige-bright);
    overflow: hidden;
    display: block;
    max-width: 975px;
    margin: auto;
}

.carousel > .carousel-track {
    display: flex;
    height: 100%;
    width: 100%;
    transition: transform 0.6s ease;
}

.carousel > .carousel-track > .slide {
    min-width: 100%;
    height: 100%;
    display: flex;
}

.carousel > .carousel-track > .slide > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    margin: 1em 0;
    gap: 0.5em;
}

.carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--purple-text-primary);
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 0;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.carousel-dot.active {
    background: var(--orange);
    transform: scale(1.1);
}

.carousel-caption {
    position: absolute;
    bottom: 0;
    padding: 0.5em 1em;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 75%, rgba(0,0,0,0.45) 100%);
    color: var(--white-text);
    font-weight: 600;
}

@media screen and (max-width: 768px) {
    .carousel {
        height: 40vh;
        min-height: 240px;
    }
}

form { 
    display: flex;
    flex-direction: column;
    width: 50%;
    margin: auto;
    background-color: var(--beige-bright);
    border-radius: 10px;
    padding: 15px;
    margin: auto;
}

@media screen and (max-width: 768px) {
    form {
        width: initial;
    }
}

form > select, form > input { 
    padding: 1em;        
    margin-bottom: 1.5em;
    border-radius: 5px;
}

form > select, form > select > option {
    background-color: #FBF4EA;
}

.options-group {
    margin-bottom: 2em;
}

form > label, form > .options-group > .options-group-label {
    font-weight: 600;
}

form > .options-group > .options-container {
    margin-bottom: 0.5em;
}

form > .options-group > .options-container > input {
    transform: scale(1.5);
    margin-right: 1em;
}

.hide {
    display: none !important;
}

.input-error { 
    border: 2px solid red;
}


.donate {
    /* hard coded value from give-butter*/
    max-width: 480px; 
    display: block;
    margin: auto;
}

@media screen and (max-width:768px) {
    .donate {
        max-width: initial;
    }
}