/* -------------------------------------  
1. Reset CSS
-------------------------------------- */
html { scroll-behavior: smooth; }

body {
    margin: 0;
    padding: 0;
    font-family: Inter;
}

* {
    box-sizing: border-box;
    line-height: normal;
    font-family: inherit;
    margin: unset;
}

.card_border {
    backdrop-filter: blur(1px);

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, #ffffff19, #ffffff19);
        background-clip: border-box;
        mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        mask-composite: exclude !important;
        z-index: -10;
        border-radius: 24px;
        border: 1px solid transparent;
    }
}

.get_started_border {
    backdrop-filter: blur(1px);

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(140deg, #ffffff66, #ffffff19);
        background-clip: border-box;
        mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        mask-composite: exclude !important;
        z-index: -10;
        border-radius: 24px;
        border: 1px solid transparent;
    }
}

.get_started_border {
    backdrop-filter: blur(1px);

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, #1a6dcecc, #1b6ecf02);
        background-clip: border-box;
        mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        mask-composite: exclude !important;
        z-index: -10;
        border-radius: 20px;
        border: 1px solid transparent;
    }
}

a {
    text-decoration: none;
    display: block;
}

ul {
    margin: 0;
    margin-inline: unset !important;
    padding: 0;
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
}

[type='text'],
input:where(:not([type])),
[type='email'],
[type='url'],
[type='password'],
[type='number'],
[type='date'],
[type='datetime-local'],
[type='month'],
[type='search'],
[type='tel'],
[type='time'],
[type='week'],
[multiple],
textarea,
select,
button {
    appearance: none;
    background-color: transparent;
    border-color: unset;
    border-width: 0;
    border-radius: unset;
    padding: unset;
    font-size: unset;
    line-height: unset;
    color: inherit;
}

input:focus-visible,
[multiple]:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none
}

/*-------------------------------------  2. CSS Variables--------------------------------------*/
:root {
    /*------Color variables------*/
    --black_900: #000000;
    --black_900_72: #00000072;
    --blue_700: #1a6dce;
    --blue_700_00: #2476d700;
    --blue_700_01: #1b6ecf;
    --blue_700_02: #1a6dce33;
    --blue_700_4c: #1a6dce4c;
    --blue_700_66: #1a6dce66;
    --blue_700_cc: #1a6dcecc;
    --blue_a200: #3e90ef;
    --dark_level_1_0: #343839a2;
    --dark_level_1_1: #343839;
    --dark_level_2_0: #232627a2;
    --dark_level_2_1: #232627;
    --dark_level_3: #141718;
    --gray_900: #202223;
    --gray_900_01: #161618;
    --gray_900_cc: #141718cc;
    --indigo_400_33: #606acb33;
    --indigo_500_0c: #4f59bd0c;
    --light_level_1: #fdfdfd;
    --light_level_2: #f3f5f6;
    --light_level_4: #6c7174;
    --white_a700: #ffffff;
    --white_a700_19: #ffffff19;
    --white_a700_66: #ffffff66;
    --white_a700_cc: #ffffffcc;
    /*------Shadow variables------*/
    --shadow-xs: 0 11px 20px 0 #00000072;
    --shadow-sm: 0 -1px 2px 0 #1a6dce66;
    /*------Border radius variables------*/
    --radius-xs: 16px;
    --radius-sm: 20px;
    --radius-md: 24px;
    /*------Spacing variables------*/
    --space-xs: 0.6rem;
    --space-sm: 0.75rem;
    --space-md: 0.8rem;
    --space-lg: 0.8rem;
    --space-xl: 1rem;
    --space-2xl: 1.25rem;
    --space-3xl: 1.5rem;
    --space-4xl: 1.8rem;
    --space-5xl: 2rem;
    --space-6xl: 2.5rem;
    --space-7xl: 2.75rem;
}

/*-------------------------------------  3. Utility CSS--------------------------------------*/
.flex-col-center-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.flex-col-center-start {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    max-height: 13.5rem;
    overflow: hidden;
    gap: 1.5rem;

    @media only screen and (max-width: 550px) {
        max-height: max-content;
    }
}

.flex-row-center-center {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

/*-------------------------------------  4. Page CSS--------------------------------------*/
.home {
    background-color: var(--gray_900_01);
    width: 100%;
    position: relative;
    overflow: hidden;
 and (max-width: 1050px) {
        height: auto;
    }
}

#light_rays{
    transform: rotate(180deg);
    position: absolute;
    z-index: 0;
    top: 0;
    width: 100%;
    filter: blur(15px);
    
    @media only screen and (max-width: 550px) {
        width: 200%;
        left: calc(-50%);
    }
}

.home__background-image {
    height: 35.75rem;
    margin-top: 70rem;
    flex: 1;
    object-fit: cover;
}

.column_four {
    flex: 1;
    position: absolute;
    left: 0px;
    bottom: 0px;
    right: 0px;
    top: 0px;
    height: max-content;
    margin: auto;
}

.header {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
    z-index: 10;
    position: relative;
    display: flex;
    background-color: var(--gray_900_cc);
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid var(--blue_700_4c);
}

.header__row {
    padding-left: var(--space-2xl);
    padding-right: var(--space-2xl);
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 90rem;
    margin-left: auto;
    margin-right: auto;
    gap: var(--space-2xl);
}

.header__logo {
    height: 3rem;
    width: 11rem;
    object-fit: contain;
}

.header__menu {
    margin-right: 1.25rem;
    width: 70%;
    display: flex;
    justify-content: end;
    align-items: center;
    gap: var(--space-2xl);

 and (max-width: 1050px) {
        width: 100%;
        margin-right: 0px;
    }

    @media only screen and (max-width: 550px) {
        flex-direction: column;
    }
}

.header__menu-list {
    gap: 2rem;
    display: flex;
    flex-wrap: wrap;

    @media only screen and (max-width: 1050px) {
        gap: var(--space-2xl);
    }
}

.desktop-nav {
    @media only screen and (max-width: 1050px) {
        display: none
    }
}
.mobile-nav {
    
    height: 65px;
    width: 80px;

    @media only screen and (min-width: 1050px) {
        display: none
    }
}


#mobile-menu {
  display: flex;
  flex-direction: column;
  position: relative;
  top: 25px;
  left: 25px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#mobile-menu input
{
  display: flex;
  width: 40px;
  height: 32px;
  position: absolute;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
}

#mobile-menu span
{
  display: flex;
  width: 29px;
  height: 2px;
  margin-bottom: 5px;
  position: relative;
  background: #ffffff;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 5px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#mobile-menu span:first-child
{
  transform-origin: 0% 0%;
}

#mobile-menu span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

#mobile-menu input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-3px, -1px);
  background: var(--light_level_2);
}
#mobile-menu input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#mobile-menu input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

#menu
{
  position: absolute;
  width: 100vw;
  height: 100vh;
  margin: -45px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  background-color: var(--dark_level_2_1);
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(100%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  transition-delay: 2s;
}

#mobile-menu input:checked ~ ul
{
  transform: translate(-70%, 0);
}

body:has(input:checked) {
    overflow: hidden;
}

.header__button--get-started {
    color: var(--light_level_1);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
    text-align: center;
    min-width: 10rem;
    border-radius: var(--radius-sm);
}

.hero {
    height: 50rem;
    position: relative;
    background-image: url();
    background-size: cover;
    background-repeat: no-repeat;

    @media only screen and (max-width: 1050px) {
        height: auto;
        padding-top: var(--space-2xl);
        padding-bottom: var(--space-2xl);
    }
}

.hero_section {
    margin-bottom: 7rem;
    padding-top: 13.5rem;
    padding-bottom: 6.5rem;

    @media only screen and (max-width: 1050px) {
        padding-top: var(--space-2xl);
        padding-bottom: var(--space-2xl);
    }
}

.intro {
    padding-left: 3.5rem;
    padding-right: 3.5rem;
    gap: 3rem;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    max-width: 77.5rem;
    margin-left: auto;
    margin-right: auto;

    @media only screen and (max-width: 1050px) {
        padding-left: var(--space-2xl);
        padding-right: var(--space-2xl);
    }
}



.intro__title {
    color: var(--light_level_1) !important;
    text-align: center;
    font-size: 4rem;
    font-weight: 700;
    line-height: 4.5rem;
    text-shadow: 2px 2px black;
    min-height: 9rem;
    @media only screen and (max-width: 1050px) {
        font-size: 3rem;
        line-height: 3rem;
        font-size: 3rem;
    }
}

.intro__description {
    color: var(--light_level_4) !important;
    text-align: center;
    font-size: 1rem;
    font-weight: 300;
    line-height: 2rem;
    opacity: 0;
    transition: all 0.3s;
}

.intro__description.show {
    opacity: 1;
}

.intro__actions {
    gap: var(--space-5xl);
    display: flex;
}

.intro__button--get-started {
    font-weight: 600;
    text-align: center;
    min-width: 9rem;
}

.row {
    margin-top: -4.5rem;
    padding-left: 3.5rem;
    padding-right: 3.5rem;
    position: relative;

    @media only screen and (max-width: 1050px) {
        padding-left: var(--space-2xl);
        padding-right: var(--space-2xl);
    }
}

.content-section {
    display: flex;
    align-items: center;

    @media only screen and (max-width: 1050px) {
        flex-direction: column;
    }
}

.content-section__card {
    gap: var(--space-5xl);
    z-index: 3;
    display: flex;
    position: relative;
    background-color: var(--dark_level_2_0);
    backdrop-filter: opacity(0.8);
    filter: blur(3.00px);
    width: 34%;
    flex-direction: column;
    padding: var(--space-3xl);
    border-radius: var(--radius-md);
    border: 1px solid var(--dark_level_1_0);

    @media only screen and (max-width: 1050px) {
        width: 100%;
    }

    @media only screen and (max-width: 550px) {
        padding: var(--space-2xl);
    }
}

.content-section__card__image-container {
    margin-top: 1rem;
    border-radius: var(--radius-xs);
}

.content-section__card__image {
    height: 29rem;
    width: 100%;
    object-fit: cover;
    border-radius: var(--radius-xs);

    @media only screen and (max-width: 1050px) {
        height: auto;
    }
}

.content-section__card__text-stack {
    gap: var(--space-xl);
}

.content-section__row {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    @media only screen and (max-width: 1050px) {
        align-self: stretch;
        flex-direction: column;
        margin-left: 0px;
    }
}

.content-section__row__card {
    --offset: 2px;
    overflow: hidden;
    gap: var(--space-5xl);
    z-index: 2;
    display: flex;
    position: relative;
    background-color: var(--dark_level_2_1);
    box-shadow: var(--shadow-xs);
    flex: 1;
    flex-direction: column;
    padding: var(--space-6xl);
    border-radius: var(--radius-md);
    border: 1px solid var(--dark_level_1_1);

    @media only screen and (max-width: 1050px) {
        align-self: stretch;
    }

    @media only screen and (max-width: 800px) {
        padding: var(--space-2xl);
    }
}

.content-section__row__card::before { 
    content: '';
    background: conic-gradient(transparent 270deg, var(--blue_700_02), transparent);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    aspect-ratio: 1;
    width: 100%;
    animation: rotate-box-glow 2s linear infinite;
}

/* Overlay */
.content-section__row__card::after {
    content: '';
    background: inherit;
    border-radius: inherit;
    position: absolute;
    inset: var(--offset);
    height: calc(100% - 2 * var(--offset));
    width: calc(100% - 2 * var(--offset));
}

.content-section__row__card__image {
    z-index: 1;
    height: 25rem;
    width: 100%;
    object-fit: cover;
    border-radius: var(--radius-xs);

    @media only screen and (max-width: 1050px) {
        height: auto;
    }
}

.content-section__row__card__title {
    z-index: 1;
    color: var(--light_level_2) !important;
    font-size: 1.75rem;
    font-weight: 700;

    @media only screen and (max-width: 550px) {
        font-size: 1.5rem;
    }
}

.content-section__row__card__description {
    z-index: 1;
    color: var(--light_level_4) !important;
    font-size: 1rem;
    font-weight: 500;
    width: 100%;
    line-height: 1.5rem;

    @media only screen and (max-width: 550px) {
        font-size: 0.85rem;
    }
}

.content-section__card--alt {
    margin-left: -9.63rem;
    gap: var(--space-5xl);
    display: flex;
    position: relative;
    background-color: var(--dark_level_2_0);
    backdrop-filter: opacity(0.8);
    filter: blur(3.00px);
    width: 46%;
    flex-direction: column;
    align-items: center;
    padding: var(--space-2xl);
    border-radius: var(--radius-md);
    border: 1px solid var(--dark_level_1_0);

    @media only screen and (max-width: 1050px) {
        width: 100%;
        margin-left: 0px;
    }
}

.content-section__card--alt__image-container {
    margin-top: 1.13rem;
    width: 92%;
    border-radius: var(--radius-xs);

    @media only screen and (max-width: 1050px) {
        width: 100%;
    }
}

.content-section__card--alt__image {
    height: 29.63rem;
    width: 100%;
    object-fit: cover;
    border-radius: var(--radius-xs);

    @media only screen and (max-width: 1050px) {
        height: auto;
    }
}

.content-section__card--alt__text-stack {
    gap: 1.13rem;
    width: 92%;

    @media only screen and (max-width: 1050px) {
        width: 100%;
    }
}

.column {
    margin-top: 11.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.future_list {
    padding-left: var(--space-5xl);
    padding-right: var(--space-5xl);
    gap: var(--space-4xl);
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    max-width: 77.50rem;
    margin-left: auto;
    margin-right: auto;

    @media only screen and (max-width: 1050px) {
        padding-left: var(--space-2xl);
        padding-right: var(--space-2xl);
    }
}

.future_list__title {
    color: var(--light_level_1) !important;
    letter-spacing: -0.06rem;
    font-size: 3rem;
    font-weight: 700;
}

.future_list__cards {
    align-self: stretch;
    display: grid;
    gap: var(--space-7xl);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: center;

    @media only screen and (max-width: 1050px) {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

.section {
    margin-top: 5rem;
    gap: 7rem;
    display: flex;
    flex-direction: column;
    align-items: center;

    @media only screen and (max-width: 1050px) {
        gap: 5.5rem;
        margin-left: 0px;
        margin-right: 0px;
    }

    @media only screen and (max-width: 550px) {
        gap: 3.5rem;
    }
}

.content-simple-page {
    max-width: 90rem;
    margin: 2rem auto;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    color: white;
    box-shadow: 0 0 5px rgb(0 0 0 / 30%);
    background-color: rgb(58 61 62 / 60%);
    padding: 4rem;
    border-radius: 2rem;
    z-index: 1;
    position: relative;

    & h2 {
        margin-bottom: 1rem;
    }
    & p {
        line-height: 1.4;
        color: var(--light_level_2);
    }
}
.header-page{
    margin: 5rem auto;
    text-align: center;
    color: white;
    z-index: 1;
    position: relative;

    @media only screen and (max-width: 550px) {
        margin: 2rem auto;
    }
}

.content-contact {
    position: relative;
    z-index: 1;
    max-width: 90rem;
    margin: 2rem auto;
}

.contact-block {
    display: grid;
    justify-content: center;
    align-items: center;
    gap: 6rem;
    grid-template-columns: max(25rem) max(40rem);
    margin-bottom: 10rem;

    @media only screen and (max-width: 1200px) {
        gap: 0;
        margin-bottom: 2rem;
        display: flex;
    }
}

.contact-banner {
    height: 100%;
    padding: 2rem;
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xs);
    @media only screen and (max-width: 1200px) {
        display: none;
    }
}
.contact-from{
    display: flex;
    width: 100%;
    justify-content: center;
}
.contact-message{
    color: var(--light_level_1);
    max-width: 20rem;
    padding: 1rem;
}

.contact-message h2 {
    font-size: 3rem;
    font-weight: 800;
    text-shadow: 3px 3px 0px black;
}

.contact-message p {
    font-size: 1rem;
    line-height: 1.5rem;
    margin-top: 2rem;
    font-weight: 200;
    text-shadow: 3px 3px 0px #00000030;
}

#anybuild___cta_section {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(245, 245, 245, 1)) !important;
    padding: 10rem 0;
    display: flex;
    flex-direction: column;
    gap: 10rem;
}
#anybuild___features_list{
    margin: 10rem 0;
}

.cta__content {
    max-width: 90rem;
    margin: 0 auto;
    gap: var(--space-3xl);
    display: flex;
    align-self: stretch;
    align-items: center;
    @media only screen and (max-width: 1050px) {
        flex-direction: column;
    }
}

.cta__text-block {
    gap: 2rem;
    display: flex;
    width: 40%;
    flex-direction: column;
    align-items: flex-start;

    @media only screen and (max-width: 1050px) {
        width: 100%;
        padding-left: var(--space-2xl);
        padding-right: var(--space-2xl);
    }
}

.cta_title {
    color: transparent !important;
    letter-spacing: -0.06rem;
    font-size: 3rem;
    font-weight: 700;
    background: linear-gradient(180deg, #000000, #0000008c);
    background-clip: text;
}

.cta__description {
    color: var(--dark_level_2_1);
    font-size: 1.25rem;
    font-weight: 300;
    
}

.cta__description p {
    line-height: 1.5;
}

.cta__button-row {
    gap: var(--space-xs);
    align-self: stretch;
    display: flex;
}

.cta__button--get-started {
    color: var(--light_level_1);
    font-weight: 600;
    text-align: center;
    min-width: 10rem;
}

.cta__image {
    height: 32rem;
    width: 60%;
    object-fit: contain;

    @media only screen and (max-width: 1050px) {
        width: 100%;
    }
}

.pricing {
    padding-left: 1.38rem;
    padding-right: 1.38rem;
    width: 100%;
    max-width: 77.50rem;
    margin-left: auto;
    margin-right: auto;

    @media only screen and (max-width: 1050px) {
        padding-left: var(--space-2xl);
        padding-right: var(--space-2xl);
    }
}

.pricing__list {
    gap: var(--space-7xl);
    display: flex;

    @media only screen and (max-width: 1050px) {
        flex-direction: column;
    }
}

.footer {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    display: flex;
    background-color: var(--dark_level_3);
    border-top: 1px solid var(--dark_level_2_1);
    color: white;
    
    @media only screen and (max-width: 550px) {
        padding-top: var(--space-2xl);
        padding-bottom: var(--space-2xl);
    }
}

.footer__column {
    margin-top: 2.50rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}

.footer__column-content {
    gap: 3.63rem;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    max-width: 77.50rem;
    margin-left: auto;
    margin-right: auto;

    @media only screen and (max-width: 1050px) {
        padding-left: var(--space-2xl);
        padding-right: var(--space-2xl);
    }

    @media only screen and (max-width: 550px) {
        gap: 1.81rem;
    }
}

.footer__columns {
    align-self: stretch;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-2xl);

    @media only screen and (max-width: 1050px) {
        flex-direction: column;
    }
}

.footer__column-wrapper {
    display: flex;

    @media only screen and (max-width: 1050px) {
        width: 100%;
    }
}

.footer__logo {
    height: 3rem;
    margin-top: 1rem;
    width: 10rem;
    object-fit: contain;
}

.footer__row-company {
    margin-top: 1rem;
    margin-right: 3.25rem;
    align-self: flex-end;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-7xl);

    @media only screen and (max-width: 1050px) {
        width: 100%;
        margin-right: 0px;
    }

    @media only screen and (max-width: 550px) {
        flex-direction: column;
    }
}

.footer__column-company {
    gap: var(--space-2xl);
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    @media only screen and (max-width: 550px) {
        width: 100%;
    }
}

.footer__column-resources {
    gap: var(--space-2xl);
    align-self: center;
    display: flex;
    width: 38%;
    flex-direction: column;
    align-items: flex-start;

    @media only screen and (max-width: 550px) {
        width: 100%;
    }
}

.footer__column-about {
    gap: var(--space-2xl);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer__copyright {
    color: var(--light_level_1) !important;
    font-size: 0.88rem;
    font-weight: 400;
}
.footer__bg{
    position: absolute;
    bottom: 0;
    filter: blur(100px);
    pointer-events: none;
}

.header__menu-item--about {
    color: var(--light_level_1) !important;
    font-size: 1rem;
    font-weight: 600;
}

.cta__button--watch-demo {
    font-weight: 600;
    text-align: center;
    min-width: 11rem;
}

.content-section__card__tag {
    position: absolute;
    z-index: 10;
    padding: 5px 10px;
    font-weight: 300;
    font-size: .8rem;
    color: white;
    background-color: #1a6dce;
    border-radius: 5px;
    text-transform: uppercase;
    bottom: 1rem;
    left: 1rem;
}

.content-section__card__image-stack {
    position: relative;
    z-index: 1;
    line-height: 0;
    border-radius: var(--radius-xs);
    border: 1px solid var(--dark_level_1_1);
    background-image: linear-gradient(64deg, #565454, transparent);
}

.content-section__card__title {
    color: var(--light_level_2) !important;
    letter-spacing: 0.00rem;
    font-size: 1.5rem;
    font-weight: 700;

}

.content-section__card__description {
    color: var(--light_level_4) !important;
    font-weight: 500;
    width: 100%;
    line-height: 1.5rem;
}

.feature-card {
    gap: var(--space-2xl);
    display: flex;
    overflow: hidden;
    position: relative;
    background-color: var(--dark_level_2_1);
    width: 100%;
    flex-direction: column;
    padding: var(--space-5xl);
    border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 4px;
    border: 1px solid var(--dark_level_1_1);

    @media only screen and (max-width: 550px) {
        padding: var(--space-2xl);
    }
}

.feature-card__header {
    gap: var(--space-sm);
    display: flex;
    align-items: center;
    z-index: 1;
}

.feature-card__icon {
    height: 100%;
    position: absolute;
    right: -100px;
    top: 0;
    mix-blend-mode: color-dodge;
    opacity: .3;
}

.feature-card__title {
    color: var(--light_level_1) !important;
    font-size: 2rem;
    font-weight: 700;
}

.feature-card__description {
    z-index: 1;
    color: var(--light_level_1) !important;
    font-size: 1.2rem;
    font-weight: 200;
}

.feature-card__description p {
    line-height: 1.5;
}

.feature-list {
    gap: var(--space-4xl);
    display: flex;
    background: linear-gradient(180deg, #202223, #141718);
    width: 100%;
    flex-direction: column;
    max-width: 36.00rem;
    margin-left: auto;
    margin-right: auto;
    padding: var(--space-6xl);
    border-radius: var(--radius-md);

    @media only screen and (max-width: 1050px) {
        padding-left: var(--space-2xl);
        padding-right: var(--space-2xl);
    }

    @media only screen and (max-width: 550px) {
        padding: var(--space-2xl);
    }
}

.feature-list__category {
    gap: var(--space-xs);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.feature-list__title {
    color: var(--light_level_4) !important;
    letter-spacing: 0.00rem;
    font-size: 1.06rem;
    font-weight: 400;
}

.feature-list__status {
    color: var(--light_level_1) !important;
    margin-bottom: 1.38rem;
    letter-spacing: 0.00rem;
    font-size: 1.75rem;
    font-weight: 700;
}

.feature-list__divider {
    height: 0.06rem;
    background-color: var(--dark_level_1_1);
}

.feature-list__details {
    padding-left: 3.50rem;
    padding-right: 3.50rem;
    gap: var(--space-lg);

    @media only screen and (max-width: 1050px) {
        padding-left: var(--space-2xl);
        padding-right: var(--space-2xl);
    }
}

.feature-list__item {
    gap: var(--space-md);
    display: flex;
    align-items: center;
}

.feature-list__text {
    color: var(--light_level_1) !important;
    letter-spacing: 0.00rem;
    font-size: 1rem;
    font-weight: 500;
}

.feature-list__item-1 {
    gap: var(--space-md);
    display: flex;
    align-items: flex-start;
}

.feature-list__icon {
    height: 1.00rem;
}

.feature-list__text-1 {
    color: var(--light_level_1) !important;
    letter-spacing: 0.00rem;
    font-size: 1rem;
    font-weight: 500;
    align-self: center;
}

.feature-list__button {
    letter-spacing: 0.00rem;
    font-weight: 600;
    align-self: stretch;
    text-align: center;
}

.header__brand {
    display: flex;
}

.footer__title-company {
    color: var(--light_level_4) !important;
    font-weight: 500;
}

.footer__links-company {
    gap: var(--space-sm);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer__link {
    color: var(--light_level_1) !important;
    letter-spacing: 0.00rem;
    font-weight: 500;
}

/*-------------------------------------  5. Component CSS--------------------------------------*/
/*------Button CSS------*/


.animated-button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 0;
  padding: 10px 30px;
  border: 4px solid;
  border-color: transparent;
  font-size: 16px;
  background-color: inherit;
  width: max-content;
  border-radius: 100px;
  font-weight: 600;
  color: #ffffff;
  box-shadow: 0 0 0 2px #ffffff;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  &.secondary {
    box-shadow: 0 0 0 2px #1b6ecf;
    color: #1b6ecf;
  }
}

.animated-button svg {
  position: absolute;
  width: 24px;
  fill: #ffffff;
  z-index: 9;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  .secondary & {
    fill: #1b6ecf;
  }
}

.animated-button .arr-1 {
  right: 16px;
}

.animated-button .arr-2 {
  left: -25%;
}

.animated-button .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background-color: #1a6dce;
  border-radius: 50%;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button .text {
  position: relative;
  z-index: 1;
  transform: translateX(-12px);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button:hover {
  box-shadow: 0 0 0 12px transparent;
  color: #ffffff;
  border-radius: 12px;
}

.animated-button:hover .arr-1 {
  right: -25%;
}

.animated-button:hover .arr-2 {
  left: 16px;
}

.animated-button:hover .text {
  transform: translateX(12px);
}

.animated-button:hover svg {
  fill: #ffffff;
}

.animated-button:active {
  scale: 0.95;
  box-shadow: 0 0 0 4px #1a6dce;
}

.animated-button:hover .circle {
  width: 220px;
  height: 220px;
  opacity: 1;
}

#tools {
    padding-top: 100px;
    margin-top: -100px;
}
#features {
    padding-top: 5px;
    margin-top: -5px;
}


/*------Container CSS------*/
.container-xs {
    max-width: 36.00rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.container-sm {
    max-width: 77.50rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/*-----------Slider CSS-------------*/
.glide__slide{
    transition: all .2s;
    filter: blur(2px);
    opacity: .3;
}
.glide__slide--active{
    border-top: 2px solid var(--blue_700_66);
    border-radius: var(--radius-md);
    filter: none;
    z-index: 100;
    transform: scale(1.1);
    opacity: 1;
}
.glide__slides, .glide__track{
    overflow: visible !important;
    align-items: center;
}

/*------------Forms----------------*/

.form {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 45rem;

    @media only screen and (max-width: 550px) {
        width: 90%;
        margin: 0 auto;
    }
}
.form .column-2 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2rem;

    @media only screen and (max-width: 550px) {
        flex-direction: column;
    }
}
.form-input{
    width: 100%;
    margin-top: 0.2rem;
    padding: .5rem .75rem;
    border-radius: .3rem;
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--dark_level_1_1)
}
.form-label {
    font-size: .8rem;
    line-height: 1.2rem;
    color: white;
}
.form-resposne {
    position: absolute;
    padding: 2rem 3rem;
    border: 4px solid;
    border-radius: 2rem;
    font-weight: 200;
    height: max-content;
    box-shadow: 0 0 5px rgb(0 0 0 / 30%);
    inset: 0;
    margin: auto 2rem;
    background-color: var(--blue_700);
    color: white;
    font-size: 3rem;
    transform: translateY(-150vh);

    @media only screen and (max-width: 550px) {
        font-size: 1.5rem;
    }
}
.swoosh-out {
    animation: swoosh-out 1s forwards;
}
.swoosh-in {
    animation: swoosh-in 1s forwards;
}

/*---------- Animation ------------*/
@keyframes rotate-box-glow {
    from {
        transform: translate(-50%, -50%) scale(1.4) rotate(0turn);
    }

    to {
        transform: translate(-50%, -50%) scale(1.4) rotate(1turn);
    }
}

@keyframes swoosh-in {
  0% {
    transform: translateY(-150vh);
    opacity: 0;
  }
  10% {
    transform: translateY(-100vh);
    opacity: 0;
  }
  50%, 70% {
    transform: translateY(10px);
    opacity: .8;
  }
  100% {
    transform: translateY(0);
    opacity: 1;    
  }
}
@keyframes swoosh-out {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  10% {
    transform: translateY(10px);
    opacity: 1;
  }
  50%, 70% {
    transform: translateY(-100vh);
    opacity: .8;
  }
  100% {
    transform: translateY(-150vh);
    opacity: 0;
  }
}