@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

/* START AND RESET */

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    scroll-behavior: smooth;
    }   

:root {
    --white: #fff;
    --white-light: #f0f0f5;

    --green: #0AC5A8;
    --green-dark: #0aac93;

    --yellow: #ffa600;
    --blue: #00b4d8;

    --gray-light: #eef0f0;
    --gray: #c9cfcf;
    --gray-200: #AAB0B0;
    --gray-400: #888d8d;
    --gray-800: #616666;
    --gray-1000: #242424;
    --gray-1200: #101010;
}

body, hmtl {
    height: 100%;
    background: var(--gray-1000);
    animation: fadeIn 2s ease;
}

@keyframes fadeIn {
    from{ opacity: 0;
    }
    to{ opacity: 1; 
    }
}

img {
    max-width: 100%;
}

a {
    text-decoration: none;
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--gray-1000);
}

body::-webkit-scrollbar-thumb {
    background-color: var(--green);
    border-radius: 1rem;
    border: 3px solid var(--gray-1000);
}
  
/* =============== */
/* HEADER */
/* =============== */

.overlay {
    position: absolute; /* Sit on top of the page content */
    width: 100%; /* Full width (cover the whole page) */
    height: 80vh; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(rgba(0,0,0, .5), rgba(255,255,255,0), var(--gray-1000)); /* Black background with opacity */
    z-index: 10; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}

header {
    width: 100%;
    height: 80vh;
    padding: 3rem 6rem;

    position: relative;
    top: 0;
    left: 0;
    z-index: 1;


    background: url('/assets/img/server2verdeopaco.jpg');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}

header .container {
    position: relative;
    display: flex;
    justify-content: space-between;
    z-index: 10;
}

header .logo img{
    max-width: 300px;
    cursor: pointer;
}

header .menu ul {
    display: flex;
    align-items: center;

    list-style-type: none;
}

header .menu ul li {
    margin-left: 1rem;
}

header .menu li a {
    color: var(--white);
    font-size: 1.2rem;
    font-weight: 200;
    text-decoration: none;
    text-transform: uppercase;
    transition: .5s ease;
}

header .menu li .contact {
    cursor: pointer;
    font-size: 1.5rem;
    padding: .5rem;
    border-radius: .2rem;
    background-size: 300% 100%;
    background-image: linear-gradient(to right, #0ba360, #3cba92, #30dd8a, #2bb673);
    box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

header .menu li .contact:hover {
    background-image: linear-gradient(to right, #0ba360, #3cba92, #30dd8a, #2bb673);
    box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);
    background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

header .menu li a:hover {
    color: var(--white);
}

/* =============== */
/* BANNER MAIN */
/* =============== */

main {
    width: 100%;
    height: 70vh;
    position: relative;
    z-index: 20;
}

main .containerText {
    height: 100%;
    
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    text-align: center;
}

main .containerText h2 {
    color: var(--white);
    font-size: 4rem;
    font-weight: 300;
    line-height: 1.1;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.2);
    transition: 1s ease;
    letter-spacing: 1px;
}

main .containerText h2 span {
    animation: animatedDash 1.5s infinite forwards;
}

@keyframes animatedDash {
    0%, 90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

main .containerText h2:hover {
    letter-spacing: 2px;
}

main .containerText p {
    color: var(--white-light);
    font-size: 1.4rem;
    font-weight: 300;
    margin: 1rem 0 3rem 0;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.2);
}

main .containerText .cta {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 60px;
    color: var(--white);
    font-size: 1.2rem;
    font-weight: 400;
    text-transform: uppercase;
    padding: .5rem;
    background-size: 300% 100%;
    border-radius: .2rem;
    border: 0;
    cursor: pointer;
    background-image: linear-gradient(to right, #0ba360, #3cba92, #30dd8a, #2bb673);
    box-shadow: 0 4px 15px 0 rgba(23, 168, 108, 0.75);
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

main .containerText .cta:hover {
    background-image: linear-gradient(to right, #0ba360, #3cba92, #30dd8a, #2bb673);
    box-shadow: 0 4px 15px 0 rgba(23, 168, 108, 0.75);
    background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

main .containerText .cta i {
    color: --white;;
    font-size: 1.6rem;
    margin-left: .5rem;
}

/* main .socialIcons {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateX(-50%);

    height: 100px;

    padding: .5rem;

    display: flex;
    justify-content: center;
    flex-direction: column;

    background: rgba(0,0,0,.4);
    border-radius: .2rem;

    transition: .2s ease;
} */

main .socialIcons a {
    color: var(--green);
    font-size: 2rem;
}

main .socialIcons a:hover {
    color: var(--white);
    font-size: 2rem;
}

main .indicator {
    color: var(--white-light);
    opacity: .5;
    font-size: 2rem;
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translate(-50%, 2rem);

    -webkit-animation-name: bounce;
    animation-name: bounce;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  }
  40%, 43% {
  -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  -webkit-transform: translate3d(0, -30px, 0);
  transform: translate3d(0, -30px, 0);
  }
  70% {
  -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  -webkit-transform: translate3d(0, -15px, 0);
  transform: translate3d(0, -15px, 0);
  }
  90% {
  -webkit-transform: translate3d(0,-4px,0);
  transform: translate3d(0,-4px,0);
  }
  }
  
  @keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  }
  40%, 43% {
  -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  -webkit-transform: translate3d(0, -30px, 0);
  transform: translate3d(0, -30px, 0);
  }
  70% {
  -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  -webkit-transform: translate3d(0, -15px, 0);
  transform: translate3d(0, -15px, 0);
  }
  90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0);
  }
} 

/* =============== */
/* COMPANY */
/* =============== */

.company {
    width: 100%;
    padding: 2rem;
}

.company h2 {
    color: var(--gray);
    font-size: 3rem;
    font-weight: 200;
    text-align: center;
    margin-bottom: 2rem;
}

.company .companyTotal {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
    background-image: linear-gradient(140deg, #29323c, #485563, #2b5876, #485563, #29323c);
    box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);
    border-radius: 1rem;
}


.companyTotal .companyItems {
    display: flex;
    justify-items: center;
    align-items: center;
    flex-direction: column;
    margin: 1rem 2rem;
}

.companyTotal .companyItems i {
    color: #ffa600;
    font-size: 2rem;
    margin-bottom: .5rem;
}

.companyTotal .companyItems p {
    color: var(--gray-200);
    font-size: 1.4rem;
    font-weight: 300;
}

/* =============== */
/* WHO */
/* =============== */

section#who {
    width: 100%;
    height: 60vh;
    position: relative;
}

section .circles {
    width: 250px;
    position: absolute;
    left: 6rem;
    top: 6rem;
    z-index: 1;
    filter: hue-rotate(50deg);
    opacity: .1;
}

section .circles2 {
    width: 350px;
    position: absolute;
    right: 6rem;
    bottom: -30rem;
    z-index: 1;
    filter: hue-rotate(80deg);
    opacity: .1;
}

section .containerMain {
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
}

section .textMain {
    z-index: 10;
    padding: 1rem;
    border-radius: 1rem;
    background: rgba(0,0,0,.1);
    box-shadow: rgba(17, 16, 16, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}

section .textMain h2 {
    width: 600px;
    color: var(--green);
    font-weight: 300;
    font-size: 3rem;
    line-height: 1;
    letter-spacing: 1px;
}

section .textMain p {
    max-width: 600px;
    color: var(--white-light);
    font-size: 1.2rem;
    font-weight: 200;
    margin: 1rem 0;
    line-height: 1.4;
}

/* section .textMain ul {
    list-style-type: circle;
    list-style-position: inside;
}

section .textMain ul li {
    color: var(--gray-200);
    font-size: 1rem;
} */

section .textMain .ctaOne {
    color: var(--white);
    font-weight: 200;
    font-size: 1rem;
    padding: .5rem;
    border: 0;
    border-radius: .2rem;
    background-image: linear-gradient(to right, #29323c, #485563, #2b5876, #29323c);
    /* box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75); */
    background-size: 300% 100%;
    cursor: pointer;
    margin-top: 1rem;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

section .textMain .ctaOne:hover {
    background-image: linear-gradient(to right, #29323c, #485563, #2b5876, #29323c);
    background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

section .textServer img {
    opacity: .8;
    width: 700px;
    height: 400px;
    border-radius: 1rem;
    margin-left: 2rem;
    margin-right: 2rem;
    box-shadow: rgba(255,255,255, 0.4) 5px 5px;
    transition: 1s ease;
}

section .textServer img:hover {
    opacity: 1;
    transform: scale(1.02);
    cursor: pointer;
    box-shadow: rgba(10, 197, 168, 0.4) 5px 5px;
}

section .textServer2 img {
    opacity: .8;
    width: 700px;
    height: 400px;
    border-radius: 1rem;
    margin-left: 2rem;
    margin-right: 2rem;
    box-shadow: rgba(255,255,255, 0.4) -5px -5px;
    transition: 1s ease;

}

section .textServer2 img:hover {
    opacity: 1;
    transform: scale(1.02);
    cursor: pointer;
    box-shadow: rgba(10, 197, 168, 0.4) -5px -5px;
}

#midWho {
    width: 100%;
    height: 20vh;
}

#midWho::after {
    width: 100%;
    height: 25vh;
    content: '';
    position: absolute;
    background: rgba(0,0,0,.5);
    z-index: 10;
}

#midWho video {
    width: 99.4vw;
    height: 25vh;
    position: absolute;
    z-index: 5;
    object-fit: cover;
    filter: grayscale(1);
}

#midWho .caption {
    position: relative;
    z-index: 100;
}

/* =============== */
/* PLANS */
/* =============== */

.plans {
    width: 100%;
    height: auto;
    margin-bottom: 2.5rem;
}

.plans .titlePlans {
    width: 100%;
    color: var(--gray);
    font-size: 2rem;
    font-weight: 400;
    text-align: center;
    padding-bottom: .5rem;
    margin-bottom: 2rem;
    letter-spacing: 1px;
    transition: .5s ease;
}

.plans .titlePlans:hover {
    letter-spacing: 2px;
}

.plans .containerMain {
    max-width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
}

.plans .card {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    padding: .5rem;
    border-radius: .5rem;
    background: rgba(0,0,0,.5);    
    margin: 0 1rem 0;
    min-height: 200px;
}

.plans .card .colorCard1 {
    width: 100%;
    height: 100px;
    border-radius: .5rem;
    background: linear-gradient(to right, rgba(0,0,0,.5), var(--gray-200));
}

.plans .card .colorCard2 {
    width: 100%;
    height: 100px;
    border-radius: .5rem;
    background: linear-gradient(to right, rgba(0,0,0,.5), var(--yellow));
}

.plans .card .colorCard3 {
    width: 100%;
    height: 100px;
    border-radius: .5rem;
    background: linear-gradient(to right, rgba(0,0,0,.5), var(--blue));
}

.plans .card h2 {
    color: var(--white);
    font-size: 2rem;
    font-weight: 400;
    margin: 1rem 0;
}

.plans .card h2 span {
    font-size: 2.4rem;
}

.plans .card h2 .standart {
    background: -webkit-linear-gradient(var(--gray-1000), var(--gray-200));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.plans .card h2 .medium {
    background: -webkit-linear-gradient(var(--gray-1000), var(--yellow));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.plans .card h2 .expert {
    background: -webkit-linear-gradient(var(--gray-1000), var(--blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.plans .card p, .plans .card p:nth-child(6) {
    color: var(--white);
    margin-bottom: .5rem;
    display: flex;
    justify-items: center;
}

.plans .card p:nth-child(6) {
    margin-bottom: 2rem;
}

.plans .card p > i {
    color: var(--green-dark);
    font-size: .6rem;
    margin-right: .5rem;
}

.plans .card .ctaCard {
    color: var(--white);
    background-image: linear-gradient(to right, #0ba360, #3cba92, #30dd8a, #2bb673);
    /* box-shadow: 0 4px 15px 0 rgba(23, 168, 108, 0.75); */
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    background-size: 300% 100%;
    border: 0;
    padding: .5rem;
    width: 100px;
    height: 40px;
    cursor: pointer;
    border-radius: .2rem;
}

.plans .card .ctaCard:hover {
    background-image: linear-gradient(to right, #0ba360, #3cba92, #30dd8a, #2bb673);
    /* box-shadow: 0 4px 15px 0 rgba(23, 168, 108, 0.75); */
    background-image: linear-gradient(to right, #0ba360, #3cba92, #30dd8a, #2bb673);
    /* box-shadow: 0 4px 15px 0 rgba(23, 168, 108, 0.75); */
    background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

/* =============== */
/* FOOTER */
/* =============== */

footer {
    width: 100%;
    height: calc(100vh - 80vh);
    background: var(--gray-1200);
    position: relative;
    left: 0;
    bottom: 0;

    display: flex;
    justify-content: center;
    align-items: center;
}

footer .containerFooter {
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    gap: 4rem;
}

footer .containerFooter h2{
    color: var(--white);
    font-size: 1.8rem;
    font-weight: 300;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--green);
}

footer .containerFooter p{
    padding-top: .5rem;
    color: var(--gray-200);
    font-size: 1.2rem;
    font-weight: 200;
}

footer .containerFooter i {
    color: var(--green);
    font-size: 1.2em;
    margin-right: .5rem;
    margin-top: .5rem;
}

/**/
/* MEDIA */
/**/

/* 1700px */

@media(max-width: 1700px) {
    header .logo img{
        max-width: 250px;
    }

    header .menu li a {
        font-size: 1.2rem;
    }

    main .containerText h2 {
        font-size: 2.6rem;
    }

    main .containerText p {
        font-size: 1.2rem;
    }

    main .containerText .cta {
        width: 250px;
        height: 50px;
        font-size: 1rem;
    }

    main .indicator {
        font-size: 1.4rem;
    }

    .company h2 {
        color: var(--gray);
        font-size: 2rem;
        font-weight: 400;
        text-align: center;
        margin-bottom: 2rem;
    }

    .companyTotal .companyItems i {
        color: #ffa600;
        font-size: 1.4rem;
        margin-bottom: .5rem;
    }
    
    .companyTotal .companyItems p {
        color: var(--gray-200);
        font-size: 1rem;
    }

    section#who {
        width: 100%;
        height: 45vh;
        position: relative;
    }

    section .containerMain {

        margin-bottom: 2rem;
    }

    section .circles {
        width: 150px;
        position: absolute;
        left: 6rem;
        top: 6rem;
    }
    
    section .circles2 {
        width: 250px;
        position: absolute;
        right: 6rem;
        bottom: -30rem;
        z-index: 1;
        filter: hue-rotate(50deg);
        opacity: .2;
    }

    section .textMain h2 {
        font-size: 2rem;
    }
    
    section .textMain p {
        font-size: 1rem;
    }

    section .textServer img {
        width: 500px;
        height: 300px;
    }

    section .textServer2 img {
        width: 500px;
        height: 300px;
    }
    
    footer .containerFooter h2{
        font-size: 1.4rem;
    }
    
    footer .containerFooter p{
        font-size: 1rem;
    }
    
    footer .containerFooter i {
        font-size: 1.4rem;
    }
}

/* 1220px */

@media(max-width: 1220px) {
    header .logo img{
        max-width: 200px;
    }

    header .menu li a {
        font-size: 1rem;
    }

    main .containerText h2 {
        font-size: 2rem;
    }

    main .containerText p {
        font-size: 1.2rem;
    }

    main .containerText .cta {
        width: 250px;
        height: 50px;
        font-size: 1rem;
    }

    main .indicator {
        font-size: 1.4rem;
    }

    section .containerMain {
        height: 50%;
        flex-direction: column-reverse;
        margin-bottom: 0;
    }

    .company h2 {
        color: var(--gray);
        font-size: 1.8rem;
        font-weight: 400;
        text-align: center;
        margin-bottom: 2rem;
    }

    section#who {
        width: 100%;
        height: 35vh;
        position: relative;
    }

    section .circles {
        display: none;
    }

    section .circles2 {
        display: none;
    }

    section .containerMain {
        width: 100%;
        height: 100%;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    section .textMain {
        z-index: 10;
        padding: 1rem;
        border-radius: 1rem;
        background: rgba(0,0,0,.1);
        box-shadow: rgba(17, 16, 16, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
        margin-bottom: 2rem;
    }

    section .textMain h2 {
        font-size: 2rem;
    }
    
    section .textMain p {
        font-size: 1rem;
    }

    section .textServer {
        display: none;
    }

    section .textServer2 {
        display: none;
    }

    footer .containerFooter h2{
        font-size: 1.2rem;
    }
    
    footer .containerFooter p{
        font-size: 1rem;
    }
    
    footer .containerFooter i {
        font-size: 1.2rem;
    }
}

@media(max-width: 1000px) {
    footer {
        width: 100%;
        height: calc(100vh - 70vh);
        background: var(--gray-1200);
        position: relative;
        left: 0;
        bottom: 0;
    
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    footer .containerFooter {
        display: flex;
        justify-content: center;
        text-align: center;
        padding: 1rem;
        gap: 2rem;
        flex-wrap: wrap;
    }
}

/* 720px */

@media(max-width: 720px) {
    header .logo img{
        max-width: 150px;
    }

    header .menu li a {
        display: none;
    }

    main .containerText h2 {
        font-size: 2rem;
    }

    main .containerText p {
        font-size: 1.2rem;
    }

    main .containerText .cta {
        width: 250px;
        height: 50px;
        font-size: 1rem;
    }

    main .indicator {
        font-size: 1.4rem;
    }

    section .containerMain {
        height: 50%;
        flex-direction: column-reverse;
    }

    section#who {
        max-width: 100%;
        height: 20vh;
        position: relative;
    }

    section .containerMain {
        max-width: 100%;
        height: 100%;
    
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 5rem;
    }

    section .textServer {
        display: none;
    }

    section .textServer2 {
        display: none;
    }

    footer .containerFooter h2{
        font-size: 1.2rem;
    }
    
    footer .containerFooter p{
        font-size: 1rem;
    }
    
    footer .containerFooter i {
        font-size: 1.2rem;
    }
}