*,
*::before,
*::after {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

.logo {
    width: 100px;
    height: 50px;
}
.nav-link {
    color: black;
    float: right;
}
.nav-link:hover {
    background: #3eba94;
    color: white;
    border-radius: 3px;
}

.sect-intro {
    display: flex;
    flex-direction: row;
}

.sect-content {
    width: 50%;
    margin-top: 3em;
    padding: 2em;
}
.sect-content h1 {
    font-size: 2rem;
    color: #385a64;
    font-weight: bold;
}

.btn-intro {
    background: #3eba94;
    color: white;
}
.btn-intro:hover {
    background: white;
    color: #3eba94;
}
.cont-illustration {
    width: 50%;
}
.cont-illustration img {
    width: 100%;
    height: 450px;
}

.info {
    width: 100%;
    background: #3eba94;
    margin-top: 3em;
    display: flex;
    flex-direction: row;
    padding: 2em;
    border-radius: 5px;
}
.cont-illustration2 {
    width: 40%;
}
.cont-illustration2 img {
    width: 100%;
    height: 300px;
    border-radius: 70%;
}

.info-content {
    width: 30%;
    margin-left: 9em;
}
.info-content h2 {
    color: white;
    font-size: 2rem;
}
.info-content p {
    color: white;
}
.choose {
    margin-left: 5em;
    margin-top: 2em;
    margin: 0 auto;
}

.choose ul {
    color: white;
    font-size: 1.1rem;
    padding-left: 1em;
    font-family: Cambria, Cochin, Georgia, Times,
        "Times New Roman", serif;
}
.choose a {
    text-decoration: none;
}
.btn-opt {
    background: white;
    color: #3eba94;
    display: block;
    margin-left: 2em;
}
.btn-opt:hover {
    background: black;
    color: white;
}

.loan-section {
    display: flex;
    flex-direction: row;
    margin-top: 3em;
    justify-content: space-between;
    margin-top: 2em;
}

.loanCont {
    width: 30%;
    padding: 2em;
    margin-top: 2em;
}
.loanCont a {
    text-decoration: none;
}
.loanCont h3 {
    margin-top: 3em;
}

.loanCont p {
    text-align: justify;
}

.micro {
    width: 30%;
    padding: 2em;
    margin-top: 2em;
    box-shadow: 5px 10px 8px 10px #888888;
    border-radius: 5px;
}

.micro p {
    line-height: 1em;
}

.micro:hover {
    background: #3eba94;
    color: white;
}

.sme {
    width: 30%;
    padding: 2em;
    box-shadow: 5px 10px 8px 10px #888888;
    border-radius: 5px;
}

.sme h3 {
    font-size: 1.5rem;
}
.sme:hover {
    background: #3eba94;
    color: white;
}

.btn-loan {
    background: #3eba94;
    color: white;
    display: block;
}

.btn-loan:hover {
    background: black;
    color: white;
}

/* process section */
.process {
    margin-top: 5em;
}
.process a {
    text-decoration: none;
}
.process h2 {
    text-align: center;
    margin-bottom: 2em;
}
.pro-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.pro-container h3 {
    text-align: center;
}

.one {
    width: 30%;
    padding: 2em;
}

.two {
    width: 30%;
    padding: 2em;
}

.three {
    width: 30%;
    padding: 2em;
}

.circle {
    border-radius: 50%;
    background: #3eba94;
    color: white;
    width: 80px;
    height: 80px;
    margin: 0 auto;
    margin-bottom: 3em;
}

.circle h3 {
    text-align: center;
    padding-top: 20px;
}

.btn-apply {
    display: block;
    margin: 0 auto;
}

/* eligibilty check */
.loanForm h3 {
    text-align: center;
    font-weight: bold;
}

.form-container {
    display: block;
    margin: 0 auto;
    width: 50%;
}

.date-inline {
    display: flex;
}

label {
    padding-right: 1em;
    font-weight: bold;
}

input {
    padding: 2em;
    margin-bottom: 0.5em;
}
select {
    margin-bottom: 0.5em;
    text-align: center;
}

.day {
    margin-right: 0.5em;
}
.month {
    margin-right: 0.5em;
}

.amount {
    margin-left: 0.5em;
}

#formbtn {
    padding: 0.5em;
    width: 200px;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}
.foot {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.goal {
    width: 60%;
}

.add {
    margin-top: 3.5em;
}

.foot-input {
    width: 100px;
}
.foot-form {
    margin-left: 8em;
    margin-top: 3.5em;
}

@media screen and (min-width: 300px) and (max-width: 750px) {
    .sect-intro {
        width: 100%;
        display: flex;
        flex-direction: column-reverse;
    }

    .sect-content {
        width: 100%;
    }
    .sect-content h1 {
        font-size: 1.1rem;
        text-align: left;
    }

    .sect-content p {
        font-size: 0.7rem;
        text-align: justify;
    }

    .cont-illustration {
        width: 100%;
    }

    .cont-illustration img {
        display: none;
        width: 100%;
        height: 300px;
    }

    .cont-illustration2 {
        width: 60%;
    }

    .cont-illustration2 img {
        width: 100%;
        height: 150px;
        border-radius: 50%;
        margin-top: 6em;
    }
    .info {
        height: 400px;
    }
    .info-content {
        width: 100%;
        margin-left: 3em;
    }

    .info-content h2 {
        color: white;
        font-size: 1rem;
        font-weight: bold;
        text-align: center;
    }
    .info-content p {
        font-size: 0.65em;
        text-align: left;
    }

    .info-content li {
        font-size: 0.7em;
    }

    .btn-opt {
        width: 100%;
        font-size: 0.7em;
    }

    .loan-section {
        display: flex;
        flex-direction: column;
    }

    .loanCont {
        width: 100%;
    }

    .loanCont h3 {
        margin-top: 0.5em;
    }

    .micro {
        width: 100%;
    }

    .sme {
        width: 100%;
    }

    .process {
        margin-top: 3em;
    }
    .process h2 {
        font-size: 1.5rem;
    }
    .pro-container {
        display: flex;
        flex-direction: column;
    }

    .one {
        width: 100%;
    }

    .one h5 {
        text-align: center;
    }

    .two {
        width: 100%;
    }

    .two h5 {
        text-align: center;
    }

    .two p {
        text-align: justify;
    }

    .three {
        width: 100%;
    }

    .three h5 {
        text-align: center;
    }

    .loanForm h3 {
        font-size: 1.5rem;
    }
    .foot {
        display: flex;
        flex-direction: column;
    }

    .goal {
        width: 90%;
    }

    .goal p {
        text-align: justify;
    }
    .foot-input {
        width: 100%;
    }
    .foot-form {
        margin-left: 0.5em;
        margin-top: 0.5em;
    }
}