@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Sansita+Swashed:wght@300..900&display=swap');


/* variables */
:root {
    --main-green: #4d8b55;
}

/* fonts */

body {
    font-family: Oswald, sans-serif;
    background-color: var(--main-green);
    background-image: url(../images/random/leaves_pattern.png);
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    font-family: 'Sansita Swashed', cursive;
}

.fs-xl {
    font-size: calc(2rem + 4vw);
}

.fs-lg {
    font-size: calc(1.5rem + 3vw) !important;
}

.fs-m {
    font-size: calc(1rem + 2vw) !important;
}

/* colors */
.text-green {
    color: var(--main-green);
}

.bg-green {
    background-color: var(--main-green) !important;
}

.border-green {
    border-color: var(--main-green) !important;
}

.square {
    width: 8px !important;
    height: 8px !important;
}

/* letter spacing */
.spaced-1 {
    letter-spacing: 1px;
}

.spaced-2 {
    letter-spacing: 2px;
}

/* navbar */
/* overwrite navbar toggler icon */
.navbar-toggler-icon {
    display: flex;
    width: 100%;
    height: 100%;
    font-size: 32px;
    justify-content: center;
    align-items: center;
    background-image: none;
}

/* overwrite navbar toggler */
.navbar-toggler {
    box-shadow: none !important;
    transition: all 0.5s;
}

.navbar-toggler[aria-expanded=true] {
    background-color: var(--bs-light) !important;
}

/* call to action button style 1 */
.cta-1 {
    position: relative;
    width: 100%;
    height: 100%;
    color: var(--bs-light);
    background-color: transparent;
    border-radius: var(--bs-border-radius);
    overflow: hidden;
}

.cta-1 .cta-1-bar {
    position: absolute;
    display: block;
    width: 0;
    height: calc(100% / 3);
    top: calc(100% / 3 * var(--index));
    background-color: var(--main-green);
    transition: all 0.5s;
}

.cta-1 .cta-1-bar.left {
    left: 0;
}

.cta-1 .cta-1-bar.right {
    right: 0;
}

.cta-1 a.nav-link {
    color: var(--bs-light);
}

.cta-1:hover .cta-1-bar {
    width: 100%;
}

.cta-1 :not(.cta-1-bar) {
    position: relative;
    z-index: 0;
}

/* call to action button style 2 */

.cta-2 {
    display: inline-block;
    position: relative;
    color: var(--main-green);
    background-color: transparent;
    border: 1px solid var(--main-green);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    transition: all 1s;
}

.cta-2::before,
.cta-2::after {
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--main-green);
    transition: all 1s;
    z-index: -1;
}

.cta-2::before {
    left: -100%;
    clip-path: polygon(0 0, 100% 0, 75% 50%, 100% 100%, 0 100%);
}

.cta-2::after {
    right: -100%;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 25% 50%);
}

.cta-2:hover::after {
    right: 0;
}

.cta-2:hover::before {
    left: 0;
}

.cta-2:hover {
    color: var(--bs-light);
}

/* call to action button style 3 */
.cta-3 {
    position: relative;
    display: inline-block;
    color: var(--bs-light);
    text-decoration: none;
    border: 1px solid;
    padding: 0.375rem 0.75rem;
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    transition: all 1s;
}

.cta-3::before,
.cta-3::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bs-light);
    z-index: -1;
    transition: all 1s;
}

.cta-3::before {
    transform: translateY(-100%);
}

.cta-3::after {
    transform: translateY(100%);
}

.cta-3:hover {
    color: var(--main-green);
}

.cta-3:hover:before,
.cta-3:hover:after {
    transform: translate(0);
}

/* call to action button style 4 */
.cta-4 {
    color: inherit;
    text-decoration: none;
    border: 1px solid;
    border-radius: 1rem;
    margin-bottom: 1rem;
    padding: 0.25rem 1.25rem;
    transition: all 500ms;
}

.cta-4 .fa-angles-right {
    transition: all 500ms;
}

.cta-4:hover {
    color: var(--bg-color);
    background-color: var(--bs-light);
}

.cta-4:hover .fa-angles-right {
    margin-left: 0.25rem;
}

/* call to action button style 5 */
.cta-5 {
    color: var(--bs-light);
    background-color: transparent;
    transition: all 0.5s;
}

.cta-5:hover,
.cta-5.active {
    color: var(--main-green) !important;
    background-color: var(--bs-light) !important;
}

/* play btn */
.play-btn {
    color: var(--bs-light);
    transition: color 250ms;
}

.play-btn:hover {
    color: var(--main-green);
}

/* input */
.input {
    resize: none;
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 200;
    line-height: 1.5;
    color: var(--bs-body-color);
    appearance: none;
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    outline: none;
    transition: border-color .15s ease-in-out;
}

.input:focus {
    border-color: var(--main-green);
}

/* form btn */
.form-btn {
    position: relative;
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--main-green);
    border-radius: var(--bs-border-radius);
    outline: none;
    overflow: hidden;
    transition: border-color 0.25s ease-in-out;
}

.form-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--main-green);
    transform: translateY(100%);
    z-index: 0;
    transition: transform 0.5s;
}

.form-btn .text {
    position: relative;
    z-index: 1;
}

.form-btn:hover {
    border-color: var(--bs-light);
}

.form-btn:hover::before {
    transform: translateY(0);
}