/*******/
/*Basic*/
/*******/
:root {
    --brand-50: #ebfaf7;
  --brand-100: #d6f5f0;
  --brand-200: #adebe0;
  --brand-300: #85e0d1;
  --brand-400: #5cd6c2;
  --brand-500: #33ccb3;
  --brand-600: #29a38f;
  --brand-700: #1f7a6b;
  --brand-800: #145247;
  --brand-900: #0a2924;
  --brand-950: #071d19;
  --black: #0a0a0a;
  --white: #e2e4e5;
  --gray-50: #f2f2f2;
  --gray-100: #e6e6e6;
  --gray-200: #ccc;
  --gray-300: #b3b3b3;
  --gray-400: #999;
  --gray-500: #808080;
  --gray-600: #666;
  --gray-700: #4d4d4d;
  --gray-800: #333;
  --gray-900: #1A1A1A;
  --gray-950: #121212;
}

html {
    margin: 0;
    padding: 0;
}

body {
    position: relative;
    background-color: var(--black);
    color: var(--white);
    margin: 0;
    padding: 0;
}

.container-large.is-align-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container-large {
    position: relative;
    z-index: 100;
}

.button-group {
    column-gap: 1.5rem;
}

.icon-box {
    display: flex;
    flex-direction: row;
    position: relative;
    width: 1rem;
    height: 1rem;
    overflow: hidden;
}

.icon-1x1-small.left {
    position: absolute;
    left: -1rem;    
    transition: all .35s ease-out;
}

.icon-1x1-small.right {
    position: absolute;
    left: 0rem;
    transition: all .35s ease-out ;
}

.button {
    transition: all 350ms ease;
    font-weight: 500;
    font-size: 1rem;
    color: var(--black);
    background-color: var(--brand-100);
    border: 1px solid var(--brand-100);
}

.button:hover {
    background-color: var(--brand-500);
    border: 1px solid var(--brand-500);
}

.button.is-secondary:hover {
    color: var(--brand-500);
    border: 1px solid var(--brand-500);
    background: none;
}

.button.is-icon:hover .icon-1x1-small.left{
    animation: button_icon-left 500ms forwards ease;
}

.button.is-icon:hover .icon-1x1-small.right{
    animation: button_icon-right 500ms forwards ease;
}

@keyframes button_icon-left {
    0% {
        left: -1rem;
    }
    100% {
        left: 0rem;
    }
}

@keyframes button_icon-right {
    0% {
        left: 0rem;
    }
    100% {
        left: 1rem;
    }
}
/******/
/*Navbar*/
/******/

nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    width: 100%;
    padding: 2rem 3rem;
}

.nav-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
}

.nav-logo { 
    object-fit: contain;
    margin-top: -1rem;
}

.nav-menu {
    display: flex;
    flex-direction: row;
    list-style: none;
    gap: .5rem;
}

.nav-menu_item_link {
    padding: .75rem 1.5rem;
    color: var(--brand-100);
    text-decoration: none;
    font-size: 1rem;
    transition: all 300ms ease-in-out;
}

.nav-menu_item_link:hover {
    color: var(--brand-50);
    text-shadow: 1px 2px 30px var(--brand-50);
}

.nav-cta {
    margin-left: 3rem;
}

.button.nav-cta-button {
    padding: .75rem 1.25rem;
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
    background: var(--brand-800);
    color: var(--white);
    border: 1px solid var(--brand-800);
    transition: all 500ms forwards ease;
}

.button.nav-cta-button:hover {
    background: var(--brand-600);
    color: var(--black);
    border: 1px solid var(--brand-600);
}

/******/
/*Hero*/
/******/

.home_hero {
    position:relative;
    text-align: center;
    height: 100vh;
    overflow: hidden;
}

.home_hero .button-group {
    margin-top: 35%;
}

.home_hero_background {
    position: absolute;
    top: 0%;
    left: 0%;
    right: 0%;
    bottom: 0%;
    z-index: 0;
    height: 150vh;
    width: 150vw;
    overflow: visible;
}

.home_hero_background_overlay {
    position: absolute;
    top: 0%;
    left: 0%;
    right: 0%;
    bottom: 0%;
    z-index: 2;
    background-color: rgba(10, 10, 10, 0.9);
    backdrop-filter: blur(50px);
}

.home_hero_title {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.home_hero_title h1 {
    position: relative;
    font-size: 4.5rem;
    color:rgba(0, 0, 0, 0);
}
 
.home_hero_title h1::after {
    content: attr(data-text);
    position: absolute;
    top: 0%;
    left: 0%;
    bottom: -8%;
    right: 0%;

    background: linear-gradient(135deg, #29a38f 0%,#85e0d1 50%, #145247 100%);
    background-clip: text;
    background-size: 450% 450%;
    animation: home_title_animate 10s infinite ease-in-out;
} 

@keyframes home_title_animate {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.section.home_info-about {
    background: var(--gray-900);
}

.home_info-about_layout {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 4rem;
}

.info-about_right img {
    border-radius: .5rem;
    overflow: hidden;
    object-fit: cover;
    object-position: bottom;
    width: 35rem;
    max-height: 25rem;
}