.text_desk {
    font-family: 'Waiting for the Sunrise', cursive;

    font-size: 60px;
    margin: 10px 50px;
    letter-spacing: 6px;
    font-weight: bold;
}
/* Text tablet */
.text_tablet {
    font-family: 'Waiting for the Sunrise', cursive;

    font-size: 30px;
    margin: 5px 20px;
    letter-spacing: 3px;
    font-weight: bold;
}
.text_mobi {
    font-family: 'Waiting for the Sunrise', cursive;

    font-size: 20px;
    margin: 3px 10px;
    letter-spacing: 1.5px;
    font-weight: bold;
}
/* network */
.section-title>span, .number {
    background: -webkit-linear-gradient(rgba(27, 137, 188, 1), rgba(22, 135, 56, 1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.icon-box-text h5 {
    color: #fff
}

button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    position: relative;
    padding: 0 20px;
    font-size: 18px;
    text-transform: uppercase;
    border: 0;
    box-shadow: linear-gradient(90deg, rgba(27, 137, 188, 1) 0%,
            rgba(22, 135, 56, 1) 100%);
    background: rgb(27, 137, 188);
    background: linear-gradient(90deg, rgba(27, 137, 188, 1) 0%,
            rgba(22, 135, 56, 1) 100%);
    border-radius: 12px;
    overflow: hidden;
    transition: 31ms cubic-bezier(.5, .7, .4, 1);
}

button:before {
    content: attr(alt);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    font-size: 15px;
    font-weight: bold;
    color: white;
    letter-spacing: 4px;
    opacity: 1;
}

button:active {
    box-shadow: none;
    transform: translateY(7px);
    transition: 35ms cubic-bezier(.5, .7, .4, 1);
}

button:hover:before {
    transition: all .0s;
    transform: translateY(100%);
    opacity: 0;
}

button i {
    color: white;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 4px;
    font-style: normal;
    transition: all 2s ease;
    transform: translateY(-20px);
    opacity: 0;
}

button:hover i {
    transition: all .2s ease;
    transform: translateY(0px);
    opacity: 1;
}

button:hover i:nth-child(1) {
    transition-delay: 0.045s;
}

button:hover i:nth-child(2) {
    transition-delay: calc(0.045s * 3);
}

button:hover i:nth-child(3) {
    transition-delay: calc(0.045s * 4);
}

button:hover i:nth-child(4) {
    transition-delay: calc(0.045s * 5);
}

button:hover i:nth-child(6) {
    transition-delay: calc(0.045s * 6);
}

button:hover i:nth-child(7) {
    transition-delay: calc(0.045s * 7);
}

button:hover i:nth-child(8) {
    transition-delay: calc(0.045s * 8);
}

button:hover i:nth-child(9) {
    transition-delay: calc(0.045s * 9);
}

button:hover i:nth-child(10) {
    transition-delay: calc(0.045s * 10);
}

/*  */
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Montserrat:wght@700&display=swap");

:root {
    /* Colors */
    --brand-color: hsl(209, 85%, 43%);
    --black: hsl(0, 0%, 0%);
    --white: hsl(0, 0%, 100%);
    /* Fonts */
    --font-title: "Montserrat", sans-serif;
    --font-text: "Lato", sans-serif;
}

/* RESET */

/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Remove default margin */
body,
h2,
p {
    margin: 0;
}

/* GLOBAL STYLES */
/* body {
display: grid;
place-items: center;
height: 100vh;
} */

h2 {
    font-size: 2.25rem;
    font-family: var(--font-title);
    /*   color: var(--white); */
    line-height: 1.1;
}

p {
    font-family: var(--font-text);
    font-size: 1rem;
    line-height: 1.5;
    /*   color: var(--white); */
}

.flow>*+* {
    margin-top: var(--flow-space, 1em);
}

/* CARD_tan COMPONENT */

.card_tan {
    display: grid;
    place-items: center;
    height: 28.125rem; 
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
}

.card_tan>* {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.card_tan__background {
    object-fit: cover;
    max-width: 100%;
    height:  28.125rem;
}

.card_tan__content {
    --flow-space: 0.9375rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-self: flex-end;
	  width:100%;
    height: 100%;
    padding: 12% 1.25rem 1.875rem;
    background: linear-gradient(180deg,
            hsla(0, 0%, 0%, 0) 0%,
            hsla(0, 0%, 0%, 0.4) 0%,
            hsla(0, 0%, 0%, 0.7) 20%,
            hsl(0, 0%, 0%) 100%);
    /* background-color: rgba(0, 0, 0, 0.7); */
}

.card_tan__content--container {
    --flow-space: 1.25rem;
}


.lists {
    padding: 0px;
    margin-bottom: 1.5rem;
    flex: 1 1 0%;
    color: rgba(156, 163, 175, 1);
}

.lists .list {
    margin-bottom: 0.5rem;
    margin-left: 0px;
    display: flex;
    align-items: center;
    /* margin-left: 0.5rem */
}

.lists .list svg {
    height: 1.5rem;
    width: 1.5rem;
    flex-shrink: 0;
    margin-right: 0.5rem;
    color: rgba(167, 139, 250, 1);
}


.card_tan__title {
    position: relative;
    width: fit-content;
    width: -moz-fit-content;
    color: #fff;
    /* Prefijo necesario para Firefox  */
}

.card_tan__button {
    padding: 0.75em 1.6em;
    width: fit-content;
    width: -moz-fit-content;
    /* Prefijo necesario para Firefox  */
    font-variant: small-caps;
    font-weight: bold;
    border-radius: 0.45em;
    border: none;
    background-color: var(--brand-color);
    font-family: var(--font-title);
    font-size: 1.125rem;
    color: var(--black);
}

.card_tan__button:focus {
    outline: 2px solid black;
    outline-offset: -5px;
}

@media (any-hover: hover) and (any-pointer: fine) {
    .card_tan__content {
        transform: translateY(70%);
        transition: transform 500ms ease-out;
        transition-delay: 500ms;
    }

    .card_tan__title::after {
        opacity: 0.9;
        transform: scaleX(0);
        transition: opacity 1000ms ease-in, transform 500ms ease-out;
        transition-delay: 500ms;
        transform-origin: right;
    }

    .card_tan__background {
        transition: transform 500ms ease-in;
    }

    .card_tan__content--container> :not(.card_tan__title),
    .card_tan__button {
        opacity: 0;
        transition: transform 500ms ease-out, opacity 500ms ease-out;
    }

    .card_tan:hover,
    .card_tan:focus-within {
        transform: scale(1);
        transition: transform 500ms ease-in;
    }

    .card_tan:hover .card_tan__content,
    .card_tan:focus-within .card_tan__content {
        transform: translateY(0);
        transition: transform 500ms ease-in;
    }

    .card_tan:focus-within .card_tan__content {
        transition-duration: 0ms;
    }

    .card_tan:hover .card_tan__background,
    .card_tan:focus-within .card_tan__background {
        transform: scale(1.3);
    }

    .card_tan:hover .card_tan__content--container> :not(.card_tan__title),
    .card_tan:hover .card_tan__button,
    .card_tan:focus-within .card_tan__content--container> :not(.card_tan__title),
    .card_tan:focus-within .card_tan__button {
        opacity: 1;
        transition: opacity 500ms ease-in;
        transition-delay: 1000ms;
    }

    .card_tan:hover .card_tan__title::after,
    .card_tan:focus-within .card_tan__title::after {
        opacity: 1;
        transform: scaleX(1);
        transform-origin: left;
        transition: opacity 500ms ease-in, transform 500ms ease-in;
        transition-delay: 500ms;
    }
}