* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

:root {
    --font-size-xxlg: clamp(40px, 5vw + 1rem, 60px);
    --font-size-xlg: clamp(28px, 3.5vw + 1rem, 40px);
    --font-size-lg: clamp(22px, 3vw + 1rem, 32px);
    --font-size-md: clamp(18px, 2.5vw + 1rem, 24px);
    --font-size-sm: clamp(16px, 2vw + 1rem, 20px);
    --font-size-xsm: clamp(16px, 2vw + 1rem, 18px);
    --font-face-heading: "Nunito Sans", sans-serif;
    --font-face-base: "Fira Sans", sans-serif;
    --black: 13, 13, 12;
    --dark-green: 24, 87, 67;
    --primary: 80, 185, 150;
    --secondary: 224, 120, 41;
    --secondary-accent: 240, 138, 60;
    --white: 255, 247, 236;
    --header-shadow: 0 3px 14px 0 #0f5740;
    --wave-shadow: drop-shadow(0px 0px 10px #121E19);
    --box-shadow: 10px 10px 17px 4px #121e19;
    --btn-shadow: 0px 12px 17px -9px #0000005e;
    --card-shadow: 0 0 19px 0 rgb(var(--black));
    --wave-bottom-mask: radial-gradient(223.61px at 50% calc(100% - 300px), #000 99%, #0000 101%) calc(50% - 200px) 0/400px 100%, radial-gradient(223.61px at 50% calc(100% + 200px), #0000 99%, #000 101%) 50% calc(100% - 100px)/400px 100% repeat-x;
    --default-border-radius: 20px;

    --theme-text-color: 13, 13, 12;
    --theme-container-bg: 152, 229, 204;
    --theme-body-bg: 255, 247, 236;
    --theme-mini-box: 255, 247, 236;
    --theme-input-active: 24, 87, 67;
    --bg-filter: brightness(0) saturate(100%) invert(81%) sepia(27%) saturate(323%) hue-rotate(287deg) brightness(91%) contrast(93%);

    font-family: var(--font-face-base), serif;
}

[data-theme=light] {
    --theme-text-color: 13, 13, 12;
    --theme-container-bg: 152, 229, 204;
    --theme-body-bg: 255, 247, 236;
    --theme-mini-box: 255, 247, 236;
    --theme-input-active: 24, 87, 67;
    --bg-filter: brightness(0) saturate(100%) invert(81%) sepia(27%) saturate(323%) hue-rotate(287deg) brightness(91%) contrast(93%)
}

@media (prefers-color-scheme: dark) {
    :root, [data-theme=dark] {
        --theme-text-color: 255, 247, 236;
        --theme-container-bg: 18, 30, 25;
        --theme-body-bg: 13, 13, 12;
        --theme-mini-box: 24, 87, 67;
        --bg-filter: none;
        --theme-input-active: 50, 173, 138;
    }
}

h1, .h1, h1 *, .h1 * {
    font-size: var(--font-size-xxlg);
    line-height: var(--font-size-xxlg);
    font-family: var(--font-face-heading);
    font-style: normal;
    font-weight: 800;
    margin-bottom: .5em;
    letter-spacing: 2%;
    text-wrap: balance
}

h2, .h2, h2 *, .h2 * {
    font-size: var(--font-size-xlg);
    line-height: var(--font-size-xlg);
    font-family: var(--font-face-heading);
    font-style: normal;
    font-weight: 800;
    margin-bottom: .5em;
    letter-spacing: 2%;
    text-wrap: balance
}

h3, .h3, h3 *, .h3 * {
    font-size: var(--font-size-lg);
    line-height: var(--font-size-lg);
    font-family: var(--font-face-heading);
    font-style: normal;
    font-weight: 600;
    letter-spacing: 2%;
    text-wrap: balance
}

h4, .h4, h4 *, .h4 * {
    font-size: var(--font-size-md);
    line-height: var(--font-size-md);
    font-family: var(--font-face-heading);
    font-style: normal;
    font-weight: 500;
    letter-spacing: 2%;
    text-wrap: balance
}

h5, .h5, h5 *, .h5 * {
    font-size: var(--font-size-sm);
    line-height: var(--font-size-sm);
    font-family: var(--font-face-heading);
    font-style: normal;
    font-weight: 500;
    letter-spacing: 2%;
    text-wrap: balance
}

p, .p, p *, .p *, label, label *, input, input *, span, button {
    font-size: var(--font-size-xsm);
    line-height: 32px;
    letter-spacing: 2%;
    font-family: var(--font-face-base);
    font-style: normal;
    font-weight: 400;
    text-wrap: balance
}

a:not(.icon,.btn) {
    font-size: var(--font-size-xsm);
    font-family: var(--font-face-base);
    color: rgb(var(--secondary));
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: 2%;
    text-wrap: balance
}

a:is(.btn), .btn span, button {
    font-size: var(--font-size-xsm);
    font-weight: 600;
    color: rgb(var(--theme-text-color));
    font-family: var(--font-face-base);
    text-decoration: none
}

a:is(.btn) i:not(.submit-icon), .btn span i:not(.submit-icon), button i:not(.submit-icon) {
    font-size: var(--font-size-md);
    vertical-align: middle;
    margin-left: 10px
}

body {
    background: rgb(var(--theme-body-bg));
    color: rgb(var(--theme-text-color));
    -webkit-transition: .5s;
    transition: .5s;
    position: relative;
    overflow-x: hidden
}

.main-nav {
    list-style: none;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.main-nav a {
    text-decoration: none;
    color: rgb(var(--theme-text-color))
}

.btn, .header .nav_item a {
    padding: 10px 20px;
    min-width: 50px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-box-shadow: var(--btn-shadow);
    box-shadow: var(--btn-shadow);
    overflow: hidden;
    position: relative;
    display: inline-block;
    border-radius: 20px;
    background-color: rgb(var(--theme-container-bg));
    cursor: pointer;
    text-align: center
}

.btn-secondary, .header .nav_item a-secondary {
    background-color: rgb(var(--theme-mini-box));
    -webkit-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
    outline: none;
    border: none;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.btn-secondary:hover, .btn-secondary:active, .header .nav_item a-secondary:hover, .header .nav_item a-secondary:active {
    -webkit-box-shadow: var(--header-shadow);
    box-shadow: var(--header-shadow)
}

.btn-secondary:hover .btn-arrow, .btn-secondary:active .btn-arrow, .header .nav_item a-secondary:hover .btn-arrow, .header .nav_item a-secondary:active .btn-arrow {
    -webkit-transform: translateX(5px);
    transform: translateX(5px)
}

.btn-secondary *, .header .nav_item a-secondary * {
    -webkit-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 1s cubic-bezier(0.19, 1, 0.22, 1)
}

.btn-cta, .header .nav_item a-cta {
    background-color: rgb(var(--secondary))
}

.btn-cta #button-shine, .header .nav_item a-cta #button-shine {
    -webkit-clip-path: polygon(30% 0%, 100% 0%, 70% 100%, 0% 100%);
    clip-path: polygon(30% 0%, 100% 0%, 70% 100%, 0% 100%);
    background-color: rgb(var(--secondary-accent));
    height: 100%;
    width: 50px;
    position: absolute;
    left: -50px;
    bottom: 0;
    -webkit-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 1s cubic-bezier(0.19, 1, 0.22, 1)
}

.btn-cta:hover #button-shine, .btn-cta:active #button-shine, .header .nav_item a-cta:hover #button-shine, .header .nav_item a-cta:active #button-shine {
    left: 100%
}

.btn span, .header .nav_item a span {
    position: relative;
    z-index: 1
}

.btn .blobs, .header .nav_item a .blobs {
    height: 100%;
    position: absolute;
    inset: 0;
    display: inline-block;
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

.btn .blobs div, .header .nav_item a .blobs div {
    -webkit-clip-path: circle(50% at 50% 50%);
    clip-path: circle(50% at 50% 50%);
    background-color: rgb(var(--primary));
    width: 38%;
    min-width: 45px;
    min-height: 100%;
    aspect-ratio: 1;
    position: absolute;
    -webkit-transform: scale(1.4) translateY(125%) translateZ(0);
    transform: scale(1.4) translateY(125%) translateZ(0);
    -webkit-transition: all 700ms ease;
    transition: all 700ms ease
}

.btn .blobs div:nth-child(2), .header .nav_item a .blobs div:nth-child(2) {
    left: 30%;
    -webkit-transition-delay: 100ms;
    transition-delay: 100ms
}

.btn .blobs div:nth-child(3), .header .nav_item a .blobs div:nth-child(3) {
    left: 66%;
    -webkit-transition-delay: 50ms;
    transition-delay: 50ms
}

.btn:hover .blobs div, .btn:active .blobs div, .header .nav_item a:hover .blobs div, .header .nav_item a:active .blobs div {
    -webkit-transform: scale(1.4) translateY(0) translateZ(0);
    transform: scale(1.4) translateY(0) translateZ(0)
}

.icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-decoration: none;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    text-align: center;
    color: rgb(var(--black));
    font-size: var(--font-size-md)
}

.icon i {
    width: 32px
}

.icon-bg {
    background-color: rgb(var(--primary));
    height: 2em;
    width: 2em;
    border-radius: 100%
}

@media screen and (max-width: 1000px) {
    a.btn-secondary {
        border-radius: 15px
    }

    a.btn-secondary i {
        display: none
    }

}

.container {
    position: relative
}

.container .content {
    padding: 5% 20%;
    background-color: rgb(var(--theme-container-bg));
    position: relative;
    z-index: 4
}

.container .content section:not(:last-child,.grid-containter) {
    margin-bottom: 100px
}

.container .content-mini-box {
    padding: 2em;
    border-radius: var(--default-border-radius);
    background-color: rgb(var(--theme-mini-box))
}

.container .content-mini-box--grid {
    display: grid;
    grid-template-columns:2fr 1fr;
    padding: 2em 4em
}

.container .content-mini-box--grid div {
    display: grid;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.container .content-mini-box--grid div a {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content
}

@media screen and (max-width: 1000px) {
    .container .content section:not(.content-mini-box,.grid-containter,.contact-info) {
        margin-left: 10%;
        margin-right: 10%
    }

    .container .content {
        padding: 10% 0;
        text-align: center
    }

    .container .content-mini-box {
        padding: 2em
    }

    .container .content-mini-box--grid {
        grid-template-columns:1fr;
        gap: 1em
    }

    .container .content-mini-box--grid div {
        -webkit-box-pack: unset;
        -ms-flex-pack: unset;
        justify-content: unset
    }

    .container .content-mini-box--grid a {
        margin: 1em auto
    }

}

.container .content {
    padding-top: 10em
}

.container.home .content {
    padding-top: 4em
}