body {
    background-color: #EFF0FC;
    /* font-family: 'Archivo', sans-serif; */
    font-family: "Roboto", sans-serif;
    font-size: 3em;
    /* font-weight: 200; */
    /* color: #686755; */
    /* color: #68675f; */
    margin: 0;
    overflow-x: hidden;
}

.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-content: space-between;
    /* height: 100vh; */
    height: auto;
    background: linear-gradient(45deg, #D0D7FF, #d1d8ff);
    padding: 2vh 5vh 0 5vh;
    
    h5 {
        color: #68675f;
        font-weight: 400;
    }
}

.create-invoice-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-content: space-between;
    height: auto;
    background: linear-gradient(45deg, #ec895b, #F7A072);
    padding: 0 5vh 0 5vh;
}

.track-invoice-section {
    display: grid;
    /* grid-template-columns: 40% 60%; */
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-content: space-between;
    height: auto;
    background: linear-gradient(45deg, #00C1FF, #00C1FF);
    padding: 0 5vh 0 5vh;
    gap: 2rem;
    
    p {
        color: #EFF0FC;
        font-weight: 400;
    }
}

.fund-policies-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-content: space-between;
    height: auto;
    /* background: linear-gradient(45deg, #ee6b97, #f73b7a); */
    background: linear-gradient(45deg, #D0D7FF, #d1d8ff);
    padding: 0 5vh 0 5vh;
}

.online-pay-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: space-between;
    height: auto;
    /* background: linear-gradient(45deg, #655dffce, #645DFF); */
    background: linear-gradient(45deg, #D0D7FF, #d1d8ff);
    padding: 0 5vh 0 5vh;
}

.contact-us {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    padding: 0 5vh 4vh 5vh;  /* extra bottom 1vh is in the button */
    text-align: center;
    background-color: #EFF0FC;
    background: linear-gradient(45deg, #EFF0FC, #D9E4FF);
}

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

.tall-image {
    max-height: 80vh;
    justify-self: center;
    align-self: center;
}

.demo-image {
    max-width: 100%;
    margin: 0 auto;
}

svg {
    width: 100%;
    /* max-width: 600px; */
    height: auto;
}

#file {
    animation: flyIn 2.5s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}

#dropzone {
    animation: pulseZone 2.5s ease-in-out infinite;
}

@keyframes flyIn {
    0% {
        transform: translateX(180px) rotate(0deg);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    60% {
        transform: translateX(20px) rotate(-5deg);
    }

    100% {
        transform: translateX(0px) rotate(0deg);
        opacity: 1;
    }
}

@keyframes pulseZone {

    0%,
    100% {
        stroke: #cccccc;
        stroke-width: 3;
    }

    50% {
        stroke: #00c1ff;
        stroke-width: 4;
    }
}

.plane-wrapper {
    position: relative;
    top: 0;
    height: 14vh;
    z-index: 10;
    background: linear-gradient(45deg, #EFF0FC, #D9E4FF);
}

.paper-plane {
    position: absolute;
    top: 0;
    left: 0;
    width: 8vw;
    transition: transform 0.05s linear;
}

p, li {
    font-size: x-large;
    color: #68675f;
    font-weight: 400;
}

h1 {
    font-size: 2em;
    font-weight: 600;
    font-family: "Lufga", sans-serif;
    /* font-family: "Roboto", sans-serif; */
    color: #070814;
}

.footer {
    text-align: center;
    font-size: small;
    padding: 2vh 0;
}

.footer p {
    font-size: 1.5em;
}

.form-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 600px;
}

.form-grid button {
    width: 50%;
    margin: 1vh auto;
    padding: 1rem;
    background-color: #007BFF;
    color: #EFF0FC;
    border: none;
}

.contact-us h1 {
    margin-bottom: -2vh;
}

.form-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    align-items: center;
    gap: 1rem;
}

.form-row label {
    text-align: left;
    font-size: large;
}

.form-row input,
.form-row select,
.form-row textarea {
    width: 100%;
}

/* Base hidden state for animation */
.slide-in-section>* {
    opacity: 0;
    transform: translateX(0);
    /* will be overridden below */
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Slide direction: first item comes from left, second from right */
.slide-in-section> :first-child {
    transform: translateX(-50px);
}

.slide-in-section> :last-child {
    transform: translateX(50px);
}

/* When visible */
.slide-in-section.show>* {
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 1030px) {
    .plane-wrapper, .paper-plane {
        height: 0;
    }

    h1 {
        text-align: center;
    }

    .hero {
        grid-template-columns: 1fr;
        padding: 5vh 3vw 1vh 3vw;
        height: auto;
    }

    .hero h5 {
        text-align: center;
    }

    .hero-image {
        width: 80%;
        margin: 0 auto;
    }

    .create-invoice-section,
    .track-invoice-section,
    .fund-policies-section,
    .online-pay-section {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        height: auto;
        padding: 1vh 5vw 1vh 5vw;
    }

    .tall-image {
        width: 80%;
        margin: 0 auto;
    }
}