@import url('https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Albert+Sans&display=swap');

:root {
    --color-brand-primary: #6400DC;
    --color-brand-primary-dark: #32006B;
    --color-brand-primary-light: #D5C3F8;
    --color-secondary-yellow: #FFC05D;
    --color-secondary-teal: #2D9FB2;
    --color-secondary-teal-light: #81C5D1;
    --color-cream: #F2EADA;
    --color-white: #fff;
    --color-black: #000;
    --color-border-focus: #77B7EE;

    
    --btn-background-default: #237b89;
    --btn-background-hover: #185661;
    --btn-background-active: #185661;

    --font-size-extra: 60px;
    --font-size-big:   56px;
    --font-size-xl:    40px;
    --font-size-l:     32px;
    --font-size-m:     24px;
    --font-size-base:  20px;
    --font-size-s:     16px;
}

html {
    scroll-behavior: smooth;
}

body {
    background: linear-gradient(180deg, var(--color-brand-primary) 0%,  var(--color-secondary-teal) 80%);       
    color: var(--color-white);
    font-family: "Albert Sans", Arial, Helvetica, sans-serif;
    font-size: var(--font-size-base);
    font-style: normal;
    font-weight: 400;
    margin: 0;
    padding: 0;

    font-optical-sizing: auto;
}

:focus {
    /* box-shadow: 0 0 0 3px var(--color-border-focus); */
    outline: 3px solid var(--color-border-focus);
    outline-offset: 2px;
}

.container {
    margin: 0 auto;
    max-width: 1256px;
    padding: 0 100px;
}

/* Useful Classes > Typography ******************************************** */
h1, h2, h3, h4, h5 {
    font-family: "Sora", "Albert Sans", Arial, Helvetica, sans-serif;
    font-weight: 300;
    margin: 0;
}

p {
    font-size: var(--font-size-base);
    line-height: 1.4;
    margin: 0;
}

/* Useful Classes > Gradients ********************************************* */
.bg-gradient-primary            { background: linear-gradient(180deg, var(--color-brand-primary) 0%,  var(--color-secondary-teal) 100%);       }
.bg-gradient-primary-light      { background: linear-gradient(180deg, var(--color-brand-primary) 0%,  var(--color-secondary-teal-light) 100%); }
.bg-gradient-secondary          { background: linear-gradient(180deg, var(--color-secondary-teal) 0%, var(--color-cream) 100%);                }
.bg-gradient-secondary-inverted { background: linear-gradient(180deg, var(--color-cream) 0%,          var(--color-secondary-teal-light) 100%); }


/* Useful Classes > Buttons *********************************************** */
.btn {
    background-color: var(--btn-background-default);
    border: none;
    color: var(--color-white);
    cursor: pointer;
    display: inline-block;
    font-weight: 600;
    padding: 16px;
    text-decoration: none;
    /* text-shadow:  rgba(0,0,0, 1) 1px 0 10px; */
    text-transform: uppercase;
    transition: all .2s ease-in-out;
}

.btn:hover {
    background-color: var(--btn-background-hover);
    border: none;
    box-shadow: 4px 4px 6px 0 rgba(0,0,0, 0.1);
    color: var(--color-white);
    text-decoration: none;
}

.btn:hover:active {
    background-color: var(--btn-background-active);
    border: none;
    box-shadow: 4px 4px 6px 0 rgba(0,0,0, 0.1), inset 0px 0px 2px 2px rgba(0,0,0, 0.1);
    color: var(--color-white);
    text-decoration: none;
}

button.btn {
    font-family: "Sora", "Albert Sans", Arial, Helvetica, sans-serif;
    font-size: var(--font-size-base);
}

/* ************************************************************************ */
/*          ******************** Page Sections ********************         */
/* ************************************************************************ */

/* Section > Header ******************************************************* */
header {
    color: var(--color-white);
    height: 140px;
    left: 0;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-content__right {
    font-size: var(--font-size-s);
}

.logo {
    height: 100px;
    position: relative;
    width: 180px;
}

.logo img {
    filter: invert(1);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 160px;
}

.logo-color-fill {
    fill: var(--color-white);
}

/* Section > Hero Section ************************************************* */
.hero {
    color: var(--color-white);
    padding: 185px 0 150px;
}

.hero-content {
    display: grid;
    align-items: center;
    gap: 60px;
    grid-template-columns: 510px minmax(150px, 1fr);
    position: relative;
}

.hero h1 {
    font-size: var(--font-size-big);
    margin: 0 0 16px;
    max-width: 12ch;
}

.hero p {
    font-size: var(--font-size-m);
    margin: 48px 0 0;
    max-width: 30ch;
}

.hero .hero-image {
    max-width: 100%;
    max-height: 400px;
    height: auto;
}

.hero-badge-container {
    position: absolute;
    width: 100%;
    height: 100%;
}

.hero-badge {
    position: absolute;
    right: 160px;
    bottom: -50px;
}



/* Section > Enter Penpot ************************************************* */
.enter-penpot {
    padding: 64px 0;
}

.enter-penpot-content {
    display: grid;
    align-items: center;
    gap: 40px;
    grid-template-columns: 1fr 1fr;
}

.enter-penpot h2 {
    font-size: var(--font-size-big);
    margin: 0 0 40px;
}

.enter-penpot p {
    font-size: var(--font-size-m);
    margin: 0 0 40px;
}

.enter-penpot__image {
    display: flex;
    justify-content: flex-end;
}

/* Section > Why Consider ************************************************* */
.why-consider {
    padding: 128px 0;
}

.why-consider h2 {
    font-size: var(--font-size-big);
    margin: 0 0 64px;
}

.features {
    display: grid;
    gap: 32px;
    grid-template-columns: repeat(2, 1fr);
}

.feature-icon {
    display: flex;
    filter: invert(1);
    height: 64px;
    margin-bottom: 10px;
    width: 64px;
    align-items: center;
    justify-content: center;
}

.features h3 {
    font-size: var(--font-size-m);
    font-weight: 600;
    margin: 8px 0;
}

/* Section > Migration Service ******************************************** */
.migration-service {
    padding: 100px 0;
}

.migration-service h2 {
    font-size: var(--font-size-s);
    font-weight: 600;
    letter-spacing: .3em;
    margin: 0 0 48px;
    text-transform: uppercase;
}

.migration-service h3 {
    font-size: var(--font-size-extra);
    margin: 0 0 102px;
}

.migration-service-columns {
    display: flex;
    margin-top: 102px;
    justify-content: space-between;
    gap: 50px;
    text-wrap-style: pretty;
}

.service-list {
    counter-reset: service-counter; /* Initialize the counter */
    display: flex;
    list-style: none; /* Remove default list styles */
    max-width: 42ch;
    padding-left: 40px;
    flex-flow: column nowrap;
    gap: 64px;
}

.service-item {
    counter-increment: service-counter; /* Increment the counter for each item */
    position: relative;
}

.service-item::before {
    content: counter(service-counter) "."; /* Display the counter value */
    font-family: "Sora", "Albert Sans", Arial, Helvetica, sans-serif;
    font-size: var(--font-size-l);
    font-weight: 400;
    left: -40px;
    position: absolute;
    top: 0;
}

.service-item h4 {
    font-size: var(--font-size-l);
    font-weight: 400;
    margin: 0 0 25px;
}

/* Section > Migration Process ******************************************** */
.migration-process {
    padding: 128px 0;
}

.migration-process h2 {
    font-size: var(--font-size-big);
    margin: 0 0 8px;
}

.migration-process .steps {
    --step-card-height: 280px;
    display: grid;
    margin: 64px auto 0;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.migration-process .step {
    height: var(--step-card-height); /*Altura fixa para manter o eixo central */
    position: relative;
    width: 100%;
    perspective: 1000px; /* Define a perspectiva para o efeito 3D */
}

.migration-process .card {
    color: var(--color-black);
    display: flex;
    height: var(--step-card-height);
    position: relative;
    transform: rotateY(0deg); /* Define a rotação inicial */
    transition: transform .6s ease-in-out; /* Transição suave */
    width: 100%;
    align-items: center;
    justify-content: center;

    transform-style: preserve-3d; /* Ativa a renderização 3D */
}

.migration-process .card-front,
.migration-process .card-back {
    align-items: center;
    backface-visibility: hidden;
    background: linear-gradient(0deg, #A2E5F5 -106.85%, #FFF 151.89%);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: var(--step-card-height);
    left: 0;
    padding: 24px;
    position: absolute;
    top: 0;
    width: 100%;
}

.migration-process .card-back {
    transform: rotateY(180deg); /* Define a rotação do lado traseiro */
}

.migration-process .step:hover .card {
    transform: rotateY(180deg); /* Aplica a rotação ao passar o rato */
}

.migration-process .card-title {
    display: flex;
    margin: 0 0 16px 0;
    width: 100%;
    justify-content: flex-start;
}

.migration-process .card-title h3 {
    font-size: var(--font-size-m);
    font-weight: 400;
    margin: 0;
}

.migration-process .card-title + img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.migration-process .card-back p {
    font-size: var(--font-size-s);
}

.migration-process .step-pointer-arrow {
    bottom: 24px;
    position: absolute;
    right: 24px;
}

.migration-process .step-pointer-arrow img {
    display: block;
}

/* Section > FAQS ********************************************************* */
.faqs-section {
    font-size: var(--font-size-base);
    padding: 48px 0 128px;
}

.faqs-section h2 {
    font-size: var(--font-size-big);
    margin: 0 0 40px;
}

/* Section > Contact Form ************************************************* */
.contact-form-section {
    padding: 64px 0;
}

.contact-form-section h2 {
    color: var(--color-black);
    font-family: "Sora", "Albert Sans", Arial, Helvetica, sans-serif;
    font-size: var(--font-size-xl);
    font-weight: 400;
    margin: 0 0 32px;
    max-width: 17ch;
}

.contact-form-content {
    display: grid;
    align-items: center;
    gap: 64px;
    grid-template-columns: 1fr 1fr;
}

.contact-form {
    background: var(--color-brand-primary);
    color: var(--color-white);
    padding: 64px;
}

.contact-form h3 {
    font-size: var(--font-size-m);
    margin: 0 0 32px;
}

::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); }
:-moz-placeholder           { color: rgba(255, 255, 255, 0.6); }
::-moz-placeholder          { color: rgba(255, 255, 255, 0.6); }
:-ms-input-placeholder      { color: rgba(255, 255, 255, 0.6); }

.form-group {
    margin-bottom: 32px;
}

.form-group label {
    color: #ced4da;
    display: block;
    font-size: var(--font-size-s);
    margin: 0 0 4px;
}

.form-group input {
    background-color: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 0;
    box-sizing: border-box;
    color: var(--color-white);
    display: block;
    font-size: var(--font-size-s);
    padding: 12px 8px;
    transition: all .2s ease-in-out;
    width: 100%;
}

.form-group input:hover {
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .6);
    box-shadow: 4px 4px 6px 0 rgba(0, 0, 0, .1);
}

.form-group.checkboxes {
    display: flex;
    padding: 0;
    position: relative;
    align-items: center;
}

.form-group.checkboxes label {
    color: #f1f3f5;
    cursor: pointer;
    padding-left: 32px;
    position: relative;
}

.form-group.checkboxes input[type="checkbox"] {
    background-color: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-block;
    height: 24px;
    left: 0;
    margin: 0;
    margin-right: 8px;
    padding: 0;
    position: relative;
    position: absolute;
    top: 0;
    width: 24px;

    -webkit-appearance: none;
}

.form-group.checkboxes input[type="checkbox"] + label:before {
    background-color: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 0;
    content: "";
    height: 22px;
    left: 0;
    position: absolute;
    top: 0;
    transition: all 180ms linear;
    width: 22px;
}

.form-group.checkboxes input[type="checkbox"]:hover + label:before {
    background-color: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .6);
}

.form-group.checkboxes input[type="checkbox"]:checked + label:before {
    background: #dacdff;
    border-color: #dacdff;
}

.form-group.checkboxes input[type="checkbox"]:checked + label:after {
    border: 2px solid var(--color-black);
    border-right: 0 !important;
    border-top: 0 !important;
    content: "";
    display: block;
    height: 5px;
    left: 6px;
    position: absolute;
    top: 7px;
    transform: rotate(-45deg);
    width: 10px;
}

.form-group.checkboxes input[type="checkbox"][disabled] {
    pointer-events: none;
}

.contact-form .btn {
    width: 100%;
}

.contact-form {
    position: relative;
}

.form-badge-container {
    position: absolute;
    width: 100%;
    height: 100%;
}

.form-badge {
    position: absolute;
    right: 0;
    top: -120px;
}

/* Section > Footer ******************************************************* */
footer {
    color: var(--color-white);
    padding: 24px 0;
}

.footer-content {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.footer-content p {
    font-size: var(--font-size-s);
    margin: 0;
}

.footer-content a {
    color: var(--color-white);
}

.social-icons a {
    align-items: center;
    border-radius: 0;
    color: var(--color-black);
    display: inline-flex;
    height: 34px;
    justify-content: center;
    margin-left: 4px;
    text-decoration: none;
    transition: all .2s ease-in-out;
    width: 34px;
}

.social-icons a img {
    display: block;
}

.social-icons a:hover {
    background-color: rgba(255, 255, 255, .6);
    box-shadow: 4px 4px 6px 0 rgba(0, 0, 0, .1);
}

/* ************************************************************************ */
/*          ******************** Responsive ********************            */
/* ************************************************************************ */


@media (max-width: 1360px) {
    .container {
        padding: 0 60px;
    }

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

    .hero-content {
        gap: 100px;
        /* grid-template-columns: 510px minmax(150px, 1fr); */
    }

    img.penpot-logo {
        height: 60px;
    }

    .hero-badge {
        max-height: 180px;
        position: absolute;
        right: 62px;
        bottom: -50px;
    }
    

    .form-badge {
        max-height:180px;
        right: 0px;
        top: -50px;
    }
}


@media (max-width: 1100px) {
    :root {    
        --font-size-extra: 52px;
        --font-size-big:   48px;
        --font-size-xl:    36px;
        --font-size-l:     28px;
        --font-size-m:     20px;
        --font-size-base:  16px;
        --font-size-s:     14px;
    }

    
    .hero-badge {
        max-height: 150px;
        right: 55px;
        bottom: 16px;
    }

    .migration-process .steps {
        grid-template-columns: 1fr 1fr;
        max-width: 760px;
    }

    .contact-form {
        padding: 56px;
    }

    .form-badge {
        max-height: 150px;
        right: 10px;
        top: -120px;
    }
}


@media (max-width: 950px) {
    .container {
        padding: 0 80px;
    }

    .hero-badge {
        max-height:180px;
        right: 80px;
        bottom: -50px;
    }

    .hero-content,
    .enter-penpot-content,
    .contact-form-content {
        grid-template-columns: 1fr;
        margin: 0 auto;
        max-width: 600px;
    }

    
    .form-badge {
        max-height: 180px;
        right: -8px;
        top: -120px;
    }
}

@media (max-width: 768px) {
    :root {    
        --font-size-extra: 48px;
        --font-size-big:   40px;
        --font-size-xl:    32px;
        --font-size-l:     28px;
        --font-size-m:     18px;
        --font-size-base:  16px;
        --font-size-s:     14px;
    }


    .container {
        padding: 0 50px;
    }

    
    .hero-badge {
        max-height:180px;
        right: 50px;
        bottom: -50px;
    }

    .features {
        grid-template-columns: 1fr;
        gap: 64px;
    }

    .services {
        grid-template-columns: 1fr;
        gap: 64px;
    }

    .migration-service-columns {
        display: block;
    }

    .migration-service-columns .hero-goncalo {
        display: none;
    }

    .migration-process-content {
        grid-template-columns: 1fr;
    }

    .contact-form {
        padding: 48px;
    }


    .footer-content {
        flex-direction: column;
        gap: 24px;
    }
}

@media (max-width: 550px) {
    .container {
        padding: 0 24px;
    }

    .hero-badge {
        max-height: 100px;
        right: 24px;
        bottom: -30px;
    }

    .migration-process .steps {
        gap: 64px;
        grid-template-columns: 1fr;
        max-width: 320px;
    }

    .form-badge {
        max-height: 100px;
        right: 24px;
        top: -80px;
    }

}



/* ************************************************************************ */
/*          ******************** Animations ********************            */
/* ************************************************************************ */

.animate--not-visible {
    visibility: hidden;
}

.hero h1 + img {
    animation-delay: 0.2s;
}

.hero .hero-badge {
    animation-delay: 1s;
}

.hero p {
    animation-delay: 0.4s;
}

.hero .hero-image {
    animation-delay: 0.7s;
}

.enter-penpot h2,
.enter-penpot p,
.enter-penpot .btn,
.enter-penpot img {
    animation-delay: .4s;
}

@media (min-height: 850px) {
    .enter-penpot h2,
    .enter-penpot img {
        animation-delay: .9s;
    }
    
    .enter-penpot p {
        animation-delay: .2s;
    }
    .enter-penpot .btn  {
        animation-duration: .8s;
        /* animation-delay: .2s; */
    }
}

@media (min-height: 950px) {
    .enter-penpot h2,
    .enter-penpot p,
    .enter-penpot .btn,
    .enter-penpot img {
        animation-delay: .9s;
    }
}

.features .animate__animated:nth-child(2) {
    animation-delay: .3s;
}

.features .animate__animated:nth-child(3) {
    animation-delay: .6s;
}

.features .animate__animated:nth-child(4) {
    animation-delay: .9s;
}


.service-list .animate__animated:nth-child(2) {
    animation-delay: .2s;
}

.service-list .animate__animated:nth-child(3) {
    animation-delay: .4s;
}

.service-list .animate__animated:nth-child(4) {
    animation-delay: .6s;
}

.migration-service img {
    animation-delay: .4s;
}


.steps .animate__animated:nth-child(2) {
    animation-delay: .3s;
}

.steps .animate__animated:nth-child(3) {
    animation-delay: .6s;
}

.steps .animate__animated:nth-child(4) {
    animation-delay: .9s;
}



.social-icons .animate__animated:nth-child(2) {
    animation-delay: .2s;
}

.social-icons .animate__animated:nth-child(3) {
    animation-delay: .4s;
}