/* General
--------------------------------------------- */
h2 {
    text-align: center;
    margin: 0;
    font-size: 2em;
}

a:hover,
a:focus {
    background-color: var(--button-active-green)
}

/* Hero Section
--------------------------------------------- */

.hero-content {
    width: 100%;
    max-height: 75vh;
    /* Used to eliminate strange white bar on top... */
    margin-top: -1.25em;
    background-color: var(--background-color);
}

.hero-content img {
    max-height: 75vh;
    object-fit: cover;
    object-position: bottom;
    width: 100%;
    clip-path: url(#hero-jagged);
    -webkit-clip-path: url(#hero-jagged);
}

/* Subheading
--------------------------------------------- */

.subheading {
    background-color: var(--background-color);
    padding: 1.5em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.subheading video {
    width: 5%;
    min-width: 50px;
}

/* Featured Content Section
--------------------------------------------- */

.feature-1,
.feature-2,
.feature-3 {
    width: 100%;
    height: calc(55 * var(--vh));
    padding: 3em;
    display: flex;
    justify-content: center;
}

.feature-2 {
    background-color: var(--background-color);
}

.feature-image-container {
    background-image: url(../images/img-background-green.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    aspect-ratio: 4 / 3;
    width: 50%;
}

.feature-2 .feature-image-container {
    background-image: url(../images/img-background-brown.png);
}

.feature-image-container div {
    display: flex;
    justify-content: center;

}

.feature-image-container img {
    object-fit: contain;
    width: 70%;
}

.feature-content-container {
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 1.5em;
}

.feature-content-container h3 {
    font-size: 1.75em;
    text-align: center;
    margin: 0;
}

.feature-content-container p {
    text-align: center;
    margin: 2em 0;
    max-width: 400px;
}

.feature-content-container a {
    background-color: var(--accent-color-green);
    text-decoration: none;
    color: #000;
    border-radius: 10px;
    padding: 1em 5em;
}

.feature-2 .feature-content-container a {
    background-color: var(--accent-color-brown);
}

.feature-2 .feature-content-container a:hover,
.feature-2 .feature-content-container a:focus {
    background-color: var(--button-active-brown)
}

/* About Section
--------------------------------------------- */

.about-banner {
    width: 100%;
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-position: center;
    clip-path: url(#about-jagged);
    -webkit-clip-path: url(#about-jagged);
    /* For paralax effect */
    background-attachment: fixed;
}

.about-banner h2 {
    color: #fff;
    font-size: 5em;
    font-weight: 700;
}

.about-content {
    display: flex;
    gap: 3em;
    padding: 4em 6em;
    align-items: center;
    justify-content: center;
}

.about-content p {
    width: 45%;
}

.about-content img {
    max-width: 420px;
    height: auto;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

.about-content > {
    width: 40%;
    object-fit: contain
}

/* Contact CTA Section
--------------------------------------------- */

.contact-cta {
    background-color: #e7e4e1;
    text-align: center;
    padding: 3.5em 1.5em;
}

.contact-cta p {
    margin: 0.5em 0 1.5em;
    font-size: 2em;
    font-family: "noto-serif-tibetan", "Noto Serif", serif;
}

.contact-cta a {
    display: inline-block;
    background-color: var(--accent-color-green);
    color: #000;
    text-decoration: none;
    padding: 0.75em 10em;
    border-radius: 10px;
}