body
{
    padding: 0;
    margin: 0;
    font-family: "Geist", sans-serif;
    position: relative;
    background-color: white;
    scroll-behavior: smooth;
}

html
{
    scroll-behavior: smooth;
}

/*Variables*/
/* ********************************************** */
:root
{
    --colorPrincipal: #059669;
    --colorDarkerPrincipal: rgb(4 120 87);
    --colorbackground: #ecfdf5;
    --colorLittleLetters: rgb(75 85 99 / 1);
    --lighterColorLittleLetters: hsl(240 4.8% 95.9%);
    --ligtherColorPrincipal: rgb(209 250 229 / 1);

    /*--font_Size_h1: 3.75rem;
    --font_Size_h2: 2.25rem;
    --font_Size_h3: 1.25rem;
    --font_Size_span: 0.875rem;
    --font_Size_span_Step: 1.5rem;
    --font_Size_p: 1.25rem;
    --font_Size_p_Definition: initial;
    --font_Size_button: 1.125rem;
    --font_Size_icon: 0.875rem;*/
}
/* ********************************************** */

/*FontSize*/
/* ********************************************** */
.font_Size_h1
{
    font-size: 3.75rem;
}
.font_Size_h2
{
    font-size: 2.25rem;
}
.font_Size_h3
{
    font-size: 1.25rem;
}
.font_Size_h4
{
    font-size: inherit;
}
.font_Size_span
{
    font-size: 0.875rem;
}
.font_Size_span_Step
{
    font-size: 1.5rem;
}
.font_Size_p
{
    font-size: 1.25rem;
}
.font_Size_p_Definition
{
    font-size: initial;
}
.font_Size_button
{
    font-size: 1.125rem;
}
.font_Size_little_button
{
    font-size: 0.875rem;;
}
/* ********************************************** */

.svgCheck, .colorPrincipalTableField, .buttonSignUpFinal_CTA
{
    color: var(--colorPrincipal);
}

.container_Steps, .buttonSignUp, .callToAction
{
    background-color: var(--colorPrincipal);
}

.colorLittleLettersTableField, p, a, .textRequierments
{
    color: var(--colorLittleLetters);
}

#How_It_Work, #Comparison
{
    background-color: var(--lighterColorLittleLetters);
}

.container_Comparison > span
{
    background-color: var(--ligtherColorPrincipal);
}

.finalCTAText
{
    color: var(--ligtherColorPrincipal);
}

.finalCTATitel
{
    color: white;
}

/*Sections*/
/* ********************************************** */
.section_Principal
{
    padding: 8rem 0;
    background-color: var(--colorbackground);
}

section
{
    padding: 4rem 0;
}
/* ********************************************** */

/*Labels*/
/* ********************************************** */
footer
{
    background-color: rgb(17 24 39 / 1);
    padding: 2rem;
}

button
{
    background-color: inherit;
    border: 0;
    padding: 0.50rem 1.25rem 0.50rem 1.25rem;
    font-family: "Geist", sans-serif;
    font-weight: 500;
    border-radius: 5px;
    cursor: pointer;
}

img
{
    width: 600px;
    max-width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0px 20px 25px 2px rgb(0 0 0 / 20%);
}

h1
{
    font-weight: 700;
    line-height: 3.5rem;
    margin: 0;
}

h2
{
    font-weight: 700;
    line-height: 2.5rem;
    margin: 0;
}

h3
{
    line-height: 1.75rem;
    font-weight: 600;
    margin: 1rem 0 1rem 0;
}

h4
{
    font-weight: 600;
    margin: 0;
}

p
{
    margin: 1rem 0 0 0;
    line-height: 1.625rem;
}

footer p, footer span, .navbarFooter a
{
    color: rgb(156 163 175 / 1);
}

footer div div
{
    border: rgb(31 41 55 / 1) solid;
    border-width: 0.5px 0 0 0;
    width: 90%;
    padding-top: 1rem;
}

.paragraph_Definitions
{
    margin: 0;
}

span
{
    line-height: 2rem;
}

.container_Steps > span
{
    font-weight: 700;
}

a
{
    text-decoration: none;
}

svg
{
    margin-left: 0.5rem;
    width: 1rem;
    height: 1rem;
}

table
{
    border-width: 0;
    border-collapse: collapse;
    width: 100%;
}

th
{
    font-weight: 600;
}

td:first-child
{
    font-weight: 500;
}

th, td
{
    line-height: 1.25rem;
    padding: 1rem 1.5rem 1rem 1.5rem;
}

th:first-child, td:first-child
{
    text-align: left;
}

tbody tr:nth-child(odd)
{
    background-color: white;
    border: solid rgb(229 231 235 / 1);
    border-width: 1px 0 1px 0;
}

/* ********************************************** */

/*No requierments information*/
/* ********************************************** */
.textRequierments
{
    margin-left: 0.5rem;
}
.textPlusIcon
{
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
/* ********************************************** */

.navbarHeader a:hover
{
    color: black;
}

ul
{
    padding: 0;
}

li
{
    display: inline;
}

li:nth-last-child(-n + 3)
{
    margin-left: 1.25rem;
}

.navbarFooter li:first-child
{
    margin: 0;
}

.navbarFooter a:hover
{
    color: white;
}

/*Containers*/
/* ********************************************** */
header
{
    position: sticky;
    top: 0;
    background-color: inherit;
    border: 0 solid var(--lighterColorLittleLetters);
    border-bottom-width: 1.5px;
    padding: 1rem 0;
}

#final_CTA
{
    background-image: linear-gradient(to right, #059669 , #2563eb);
}

.container
{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.container_Vertically
{
    justify-items: center;
    text-align: center;
}

.container_Vertically > p
{
    margin-top: 1rem ;
    margin-bottom: 1.5rem;
    max-width: 48rem;
}

.container_Horizontally
{
    display: flex;
    align-items: center;
    margin-top: 1rem;
}

.containerHeader
{
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: center;
}

.container_Informative
{
    display: grid;
    gap: 2rem;
    align-items: center;
}

.container_Step_Of_Work
{
    margin-top: 4rem;
    gap: 2rem;
}

.container_Steps
{
    border-radius: 50%;
    width: 4rem;
    height: 4rem;
    margin: auto;
    align-items: center;
    color: white;
    justify-content: center;
    display: flex;
}

.container_Security_Info
{
    display: flex;
    justify-content: flex-start;
    margin-top: 1rem;
}

.comparition_Table
{
    margin: 4rem auto 0 auto;
    max-width: 56rem;
    width: 100%;
    overflow: auto;
    box-shadow:  0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    border-radius: 10px;
}

.icon_Container_Comparison
{
    padding: 0;
}

.icon_Container_Comparison > svg 
{
    margin: auto;
    display: block;
    line-height: 0;
}

.icon_Container_Comparison > span 
{
    line-height: 0;
}

.container_Comparison
{
    padding: 0;
}

.container_Comparison > span
{
    padding: 0.25rem 0.75rem 0.25rem 0.75rem;
    border-radius: 20px;
    margin: 0;
}
/* ********************************************** */

.Ording_Cards
{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.icon_Cards
{
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.5rem;
    align-items: center;
    justify-content: center;
    display: flex;
    border-radius: 10px;
}

.svg_Icon
{
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
}

.icon_Cards_1
{
    background-color: var(--ligtherColorPrincipal);
}
.svg_Icon_1
{
    color: rgb(5 150 105 / 1);
}

.icon_Cards_2
{
    background-color: rgb(219 234 254 / 1);
}
.svg_Icon_2
{
    color: rgb(37 99 235 / 1);
}

.icon_Cards_3
{
    background-color: rgb(243 232 255 / 1);
}
.svg_Icon_3
{
    color: rgb(147 51 234 / 1);
}

.icon_Cards_4
{
    background-color: rgb(255 237 213 / 1);
}
.svg_Icon_4
{
    color: rgb(234 88 12 / 1);
}

.icon_Cards_5
{
    background-color: rgb(220 252 231 / 1);
}
.svg_Icon_5
{
    color: rgb(22 163 74 / 1);
}

.icon_Cards_6
{
    background-color: rgb(254 226 226 / 1);
}
.svg_Icon_6
{
    color: rgb(220 38 38 / 1);
}

.cards
{
    flex: 1 1 262px;
    padding: 1rem;
    margin: 1rem;
    box-shadow: 0px 8px 8px 4px rgb(0 0 0 / 8%);
    border-radius: 10px;
    /*min-width: 262px;*/
}

.cards:hover
{
    box-shadow: 0px 10px 10px 6px rgb(0 0 0 / 8%);
}

/* ********************************************** */


.buttonSignUp
{
    color: white;
}

.buttonSignUp:hover
{
    background-color: var(--colorDarkerPrincipal);
}

.buttonSignUpFinal_CTA
{
    background-color: white;
}

.callToAction
{
    margin-top: 1rem;
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.callToAction:hover
{
    background-color: var(--colorDarkerPrincipal);
}

.buttonLogin
{
    margin-right: 1rem;
}

.buttonLogin:hover, .buttonSignUpFinal_CTA:hover
{
    background-color: var(--lighterColorLittleLetters);
}

.iconCheckSecurity
{
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 1rem;
}
/* Queries

| Dispositivo                        | Ancho aprox. | Media query típica           |
| ---------------------------------- | ------------ | ---------------------------- |
| **Teléfonos pequeños**             | ≤ 480px      | `@media (max-width: 480px)`  |
| **Teléfonos grandes**              | 481px–767px  | `@media (max-width: 767px)`  |
| **Tabletas verticales**            | 768px–991px  | `@media (max-width: 991px)`  |
| **Portátiles pequeños**            | 992px–1199px | `@media (max-width: 1199px)` |
| **Pantallas grandes (escritorio)** | ≥ 1200px     | `@media (min-width: 1200px)` |

*/

@media screen and (width >= 1024px)
{
    .container_Informative
    {
        display: grid;
        gap: 3rem;
        align-items: center;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (width < 1024px)
{
    .font_Size_h1
    {
        font-size: 2.25rem;
        line-height: normal;
    }
    .font_Size_h2
    {
        font-size: 1.875rem;
    }
    .section_Principal
    {
        padding: 5rem 0;
    }
    section
    {
        padding: 5rem 0;
    }
    .container
    {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .container_Horizontally
    {
        display: grid;
    }
    .Ording_Cards
    {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (width < 860px)
{
    .navbarHeader
    {
        display: none;
    }
}

@media screen and (width < 640px)
{
    .callToAction, .buttonSignUpFinal_CTA
    {
        width: 100%;
        text-align: center;
    }
    .navbarFooter ul
    {
        display: grid;
    }
    .navbarFooter li
    {
        margin: 0;
    }
    .buttonLogin
    {
        display: none;
    }
    .Ording_Cards
    {
        grid-template-columns: 1fr;
    }
}