body {
    font-family: "Gothic A1", sans-serif;
    font-weight: 400;
    font-style: normal;
    /* font-family: "Neuton", serif; */
}

.site-navigation{
    background: linear-gradient(to right, #020617, #0f172a, #1e293b, #334155);
}

.nav-link {
    color: #ffffff;
    font-size: 15px;
    margin-right: 0 5px;
}

.nav-link:hover {
    color: #fde047;
    transition: all 0.2s ease-in-out;
}

.landing-view {
    background: linear-gradient(
        135deg,
        #020617,
        #0f172a,
        #1e293b,
        #334155,
        #64748b
    );
    /* height: 100vh; */
}

.headline {
    font-size: 100px;
    font-weight: 900;
}

.tagline {
    font-size: 22px;
    margin-top: 50px;
}

.collect-gradient {
    background: linear-gradient(to right, #22c55e, #dcfce7);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text-color;
    color: transparent;
}

.manage-gradient {
    background: linear-gradient(to right, #bfdbfe, #3b82f6);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text-color;
    color: transparent;
}

.send-gradient {
    background: linear-gradient(to right, #f87171, #fca5a5, #fcd5ce);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text-color;
    color: transparent;
}

.link-sign-in {
    background: linear-gradient(to right, #020617, #0f172a, #1e293b, #334155);
    color: #ffffff;
    padding: 7px 20px;
    border-radius: 25px;
    border: 1px solid #ffffff;
}

.link-sign-in:hover {
    padding: 7px 25px;
    transition: all 0.2s ease-in-out;
    color: #ffffff;
}

.link-sign-up {
    padding: 7px 20px;
    border-radius: 25px;
    background: linear-gradient(to right, #ffffff, #f3f4f6);
    color: #020617;
    border: 1px solid #ffffff;
}

.link-sign-up:hover {
    padding: 7px 25px;
    transition: all 0.2s ease-in-out;
    color: orange;
    border: 1.5px solid orange;
}

.get-started-two {
    background: linear-gradient(to right, #ffffff, #f8fafc);
    color: #020617;
    padding: 12px 25px;
    border-radius: 25px;
    cursor: pointer;
}

.get-started-two a {
    color: #020617;
}

.get-started-two:hover {
    background: linear-gradient(to right, #020617, #0f172a, #1e293b, #334155);
    color: #ffffff;
    border: 1px solid #ffffff;
}

.get-started-two:hover a {
    color: #ffffff;
    margin-right: 2px;
    transition: all 0.2s ease-in-out;
}

.main-image {
    margin-top: 0px;
}

/* About section */

#about-section {
    background: #ffffff;
    padding-top: 8rem;
    padding-bottom: 8rem;
}

.why-ssentezo {
    background: linear-gradient(to right, #f97316, #ff0000, #16a34a);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text-color;
    color: transparent;
    font-size: 30px;
    font-weight: 600;
}

.why-ssentezo-desc {
    margin-top: 3rem;
}

.why-ssentezo-card-container {
    margin-top: 3rem;
}

.benefits-card {
    padding: 20px;
    cursor: pointer;
    background: #ffffff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    margin: 10px;
}

.benefits-card:hover {
    border-radius: 10px;
    transition: all 0.2s ease-in-out;
    margin-top: -10px;
}

.why-headings {
    background: linear-gradient(to right, #65a30d, #ff0000, #16a34a);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text-color;
    color: transparent;
}

/* Collections Section */
#collections {
    /* background: red; */
    background: linear-gradient(
        135deg,
        #15803d,
        #16a34a,
        #22c55e,
        #4ade80,
        #86efac
    );
    /* padding: 4rem 0; */
    padding-top: 8rem;
    padding-bottom: 8rem;
}

.service-heading{
    font-weight: 700;
}

/* Payments Section */
#payments {
    /* background: linear-gradient(to right, #f87171, #fca5a5, #fcd5ce); */
    background-color: #ffffff;
    padding-top: 8rem;
    padding-bottom: 8rem;
}

.effortless-payments {
    background: linear-gradient(to right, red, #facc15, #c2410c);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text-color;
    color: transparent;
}

#push-to-bank {
    /* background: linear-gradient(to right, #bae6fd, #22d3ee, #60a5fa); */
    padding-top: 8rem;
    padding-bottom: 8rem;
}

.integrate-banks {
    background: linear-gradient(to right, #c026d3, #fb7185, #e879f9);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text-color;
    color: transparent;
}

/* Start Pricing Section */

#pricing {
    background-color: #ffffff;
    padding-top: 8rem;
    padding-bottom: 8rem;
}

.wallet-charges {
    background: linear-gradient(to right, #8b5cf6, #1d4ed8, #d946ef, #f87171, #ffe4e6);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text-color;
    color: transparent;
}

.deposit-percentage {
    background: linear-gradient(to right, #292524, #dc2626, #f97316, #fde047);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text-color;
    color: transparent;
    font-size: 80px;
}

/* End Pricing Section */

/* Developer section */

#developers {
    /* background-color: #ffffff; */

    /* background: linear-gradient(to right, #bae6fd, #22d3ee, #60a5fa); */

    /* background: linear-gradient(to right, #f87171, #fca5a5, #fcd5ce); */
    padding-top: 8rem;
    padding-bottom: 8rem;
}

.for-developers {
    background: linear-gradient(to right, #1d4ed8, #22d3ee, #6b21a8);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text-color;
    color: transparent;
}

.documentation {
    background: linear-gradient(to right, #020617, #0f172a, #1e293b, #334155);
    border: 1px solid #ffffff;
    color: #ffffff;
    padding: 12px 25px;
    border-radius: 25px;
    cursor: pointer;
}

.documentation:hover  {
    transition: all 0.2s ease-in-out;
    color: #baf638;
}



/* End Developer Section */

/* Depending on the screen size, add margin-top to the div */
/* Mobile Small */
@media (min-width: 320px) {
    /* Start Landing Section */
    .landing-view div {
        padding: 1rem 0;
    }

    .section-container {
        padding: 0 1.8rem;
    }

    .navbar-brand span {
        font-size: 14px;
    }

    .link-sign-in {
        font-size: 13px;
        padding: 5px 10px;
        height: 30px;
        border-radius: 15px;
        margin-right: 10px;
    }

    .link-sign-up {
        font-size: 13px;
        padding: 5px 10px;
        height: 30px;
        border-radius: 15px;
    }

    .headline {
        font-size: 40px;
    }

    .tagline {
        font-size: 17px;
        margin-top: 25px;
        line-height: 35px;
    }

    .get-started-two {
        padding: 10px 20px;
        font-size: 13px;
    }

    .main-image {
        /* margin-top: 2rem; */
    }
    /* End Landing Section */


    /* Start About Section */
    #about-section {
        padding: 2.5rem 1rem 2.5rem;
    }

    .why-ssentezo {
        font-size: 25px;
    }

    .why-ssentezo-desc {
        margin-top: 1.5rem;
        font-size: 16px;
        line-height: 30px;
    }

    .why-ssentezo-card-two,
    .why-ssentezo-card-three,
    .why-ssentezo-card-four {
        margin-top: 1.5rem;
    }

    .benefits-card:hover {
        margin: 10px;
    }
    /* End about section */


    /* Start Collections Section */
    #collections {
        padding: 2.5rem 1rem 2.5rem;
    }

    .service-heading{
        font-size: 22px;
    }

    .service-desc{
        margin-top: 1.5rem;
        font-size: 17px;
        line-height: 30px;
    }
    /* End Collections Section */


    /* Start Payments Section */
    #payments {
        padding: 2.5rem 1rem 2.5rem;
    }

    /* End Payments Section */


    /* Start Push to Bank Section */
    #push-to-bank {
        padding: 2.5rem 1rem 2.5rem;
    }
    /* End Push to Bank Section */

    /* Start Pricing Section */
    #pricing {
        padding: 2.5rem 1rem 2.5rem;
    }

    .deposit-percentage {
        font-size: 60px;
    }

    /* End Pricing Section */


    /* Start Developers Section */
    #developers {
        padding: 2.5rem 1rem 2.5rem;
    }
    /* End Developers Section */
}

/* Tablet size devices */
@media (min-width: 768px) {
    .section-container {
        padding: 0 3rem;
    }

    .navbar-brand a span {
        font-size: 15px;
    }

    /* .link-sign-in {
        font-size: 13px;
        padding: 5px 10px;
        height: 30px;
        border-radius: 15px;
        margin-right: 10px;
    } */

    /* .link-sign-up {
        font-size: 13px;
        padding: 5px 10px;
        height: 30px;
        border-radius: 15px;
    } */

    .headline {
        font-size: 50px;
    }

    .tagline {
        font-size: 19px;
        margin-top: 25px;
        line-height: 35px;
    }

    .get-started-two {
        padding: 10px 20px;
        font-size: 15px;
    }

    .main-image {
        /* margin-top: 2.5rem; */
    }
    /* End Landing Section */


    /* Start About Section */
    #about-section {
        padding: 2.5rem 2.5rem 2.5rem;
    }

    .why-ssentezo {
        font-size: 30px;
    }

    .why-ssentezo-desc {
        margin-top: 1.5rem;
        font-size: 18px;
        line-height: 30px;
    }

    .why-ssentezo-card-one,
    .why-ssentezo-card-two,
    .why-ssentezo-card-three,
    .why-ssentezo-card-four {
        margin-top: 1.5rem;
    }

    .benefits-card:hover {
        margin: 10px;
    }
    /* End about section */


    /* Start Collections Section */
    #collections {
        padding: 2.5rem 2.5rem 2.5rem;
    }

    .service-heading{
        font-size: 27px;
    }

    .service-desc{
        margin-top: 1.5rem;
        font-size: 18px;
        line-height: 30px;
    }
    /* End Collections Section */


    /* Start Payments Section */
    #payments {
        padding: 2.5rem 2.5rem 2.5rem;
    }

    /* End Payments Section */


    /* Start Push to Bank Section */
    #push-to-bank {
        padding: 2.5rem 2.5rem 2.5rem;
    }
    /* End Push to Bank Section */

    /* Start Pricing Section */

    #pricing {
        padding: 2.5rem 2.5rem 2.5rem;
    }

    .deposit-percentage {
        font-size: 70px;
    }

    /* End Pricing Section */


    /* Start Developers Section */
    #developers {
        padding: 2.5rem 2.5rem 2.5rem;
    }
    /* End Developers Section */
}

/* For medium devices(Laptops) */
@media (min-width: 1024px) {
    .landing-view div {
        padding: 4rem 0;
    }

    .section-container {
        padding: 0 5rem;
    }

    .navbar-brand a span {
        font-size: 16px;
    }

    .link-sign-in {
        font-size: 15px;
        padding: 7px 20px;
        border-radius: 25px;
        height: 35px;
        margin-right: 10px;

    }

    .link-sign-up {
        font-size: 15px;
        padding: 7px 20px;
        border-radius: 25px;
        height: 35px;
    }

    .headline {
        font-size: 70px;
    }

    .tagline {
        font-size: 20px;
        margin-top: 25px;
        line-height: 35px;
    }

    .get-started-two {
        padding: 10px 20px;
        font-size: 15px;
    }

    .main-image {
        padding-left: 20px;
    }
    /* End Landing Section */


    /* Start About Section */
    #about-section {
        padding: 10rem;
    }

    .why-ssentezo {
        font-size: 30px;
    }

    .why-ssentezo-desc {
        margin-top: 1.5rem;
        font-size: 18px;
        line-height: 30px;
    }

    .why-ssentezo-card-one,
    .why-ssentezo-card-two,
    .why-ssentezo-card-three,
    .why-ssentezo-card-four {
        margin-top: 1.5rem;
    }

    .benefits-card:hover {
        margin: 10px;
    }
    /* End about section */


    /* Start Collections Section */
    #collections {
        padding: 10rem;
    }

    .service-heading{
        font-size: 27px;
    }

    .service-desc{
        margin-top: 1.5rem;
        font-size: 18px;
        line-height: 30px;
    }
    /* End Collections Section */


    /* Start Payments Section */
    #payments {
        padding: 10rem;
    }

    /* End Payments Section */


    /* Start Push to Bank Section */
    #push-to-bank {
        padding: 10rem;
    }
    /* End Push to Bank Section */

    /* Start Pricing Section */

    #pricing {
        padding: 10rem;
    }

    .deposit-percentage {
        font-size: 80px;
    }

    /* End Pricing Section */


    /* Start Developers Section */
    #developers {
        padding: 10rem;
    }
    /* End Developers Section */
}

/* For large devices */
@media (min-width: 1440px) {
    .section-container {
        padding: 0 5rem;
    }

    .navbar-brand a span {
        font-size: 17px;
    }

    .link-sign-in {
        font-size: 15px;
        padding: 7px 20px;
        border-radius: 25px;
        height: 35px;
        margin-right: 10px;

    }

    .link-sign-up {
        font-size: 15px;
        padding: 7px 20px;
        border-radius: 25px;
        height: 35px;
    }

    /* .headline {
        font-size: 55px;
    }

    .tagline {
        font-size: 19px;
        margin-top: 25px;
        line-height: 35px;
    }

    .get-started-two {
        padding: 10px 20px;
        font-size: 15px;
    } */

    .main-image {
        /* margin-top: 2.5rem; */
    }
    /* End Landing Section */


    /* Start About Section */
    /* #about-section {
        padding: 2.5rem 5rem;
    } */

    /* .why-ssentezo {
        font-size: 30px;
    } */

    /* .why-ssentezo-desc {
        margin-top: 1.5rem;
        font-size: 18px;
        line-height: 30px;
    } */

    /* .why-ssentezo-card-one,
    .why-ssentezo-card-two,
    .why-ssentezo-card-three,
    .why-ssentezo-card-four {
        margin-top: 1.5rem;
    } */

    /* .benefits-card:hover {
        margin: 10px;
    } */
    /* End about section */


    /* Start Collections Section */
    /* #collections {
        padding: 5rem;
    } */

    /* .service-heading{
        font-size: 27px;
    } */

    /* .service-desc{
        margin-top: 1.5rem;
        font-size: 18px;
        line-height: 30px;
    } */
    /* End Collections Section */


    /* Start Payments Section */
    /* #payments {
        padding: 5rem;
    } */

    /* End Payments Section */


    /* Start Push to Bank Section */
    /* #push-to-bank {
        padding: 5rem;
    } */
    /* End Push to Bank Section */


    /* Start Developers Section */
    /* #developers {
        padding: 5rem;
    } */
    /* End Developers Section */
}