body {
    margin: 0;
    padding: 0;
    font-family: 'Monserrat', sans-serif;
    background-color: black;
    color: white;
}

#navbar {
    display: flex;
    padding: 1rem;
    justify-content: space-between;
    background-color: #051340;
}

#title-logo img {
    width: 10rem;
    display: flex;
    align-items: center;
}

#title-menu {
    display: flex;
    align-items: center;
}

#title-menu ul {
    display: flex;
    list-style: none;
}

#title-menu ul li {
    margin-left: 2rem;
}

#title-menu ul li a {
    text-decoration: none;
    color: white;
    font-size: 1.1rem;
}

#title-menu ul li a:hover {
    color: #09B778;
}

#title-button {
    display: flex;
    align-items: center;
}

#title-button button {
    background-color: #09B778;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    margin-left: 2rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
}

#hero {
    height: 100vh;
    /* background-image: url(../files/hero-home-bg.png); */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#hero-content-home {
    display: flex;
    align-items: center;
    height: 80%;
}

#hero-content-home-left {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: baseline;
    padding-left: 8rem;
}

#hero-content-home-left h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 500;
}

#hero-content-home-left span {
    font-weight: 600;
}

#hero-content-home-left button {
    background-color: #09B778;
    border: none;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    margin-top: 1rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
}

#hero-content-home-left a {
    text-decoration: none;
    color: white;
    font-weight: 500;
}

#hero-content-home-left a:hover {
    cursor: pointer;
}

#hero-content-home-right {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-right: 8rem;
}

#hero-content-home-right img {
    width: 90%
}

/* hide title-menu */
#title-menu-phone {
    display: none;
}

/* tablet */
@media screen and (max-width: 767px) {
    #title-logo img {
        width: 9rem;
    }

    #title-menu ul li {
        margin-left: 1.5rem;
    }

    #title-menu ul li a {
        font-size: 0.9rem;
    }

    #title-button button {
        margin-left: 1.5rem;
        padding: 0.4rem 0.8rem;
        font-size: 0.9rem;
    }

    #hero-content-home-left {
        padding-left: 4rem;

    }

    #hero-content-home-left h1 {
        font-size: 2.2rem;

    }

    #hero-content-home-left button {
        padding: 0.8rem 1.3rem;
        font-size: 0.9rem;
    }

    #hero-content-home-right {
        padding-right: 4rem;
    }

    #title-menu-phone {
        display: none;
    }
}

@media screen and (max-width: 479px) {

    #title-menu {
        display: none;
    }

    #title-button {
        display: none;
    }

    #title-menu-phone {
        display: flex;
        align-items: center;
    }

    #navbar {
        padding: 0.6rem;
    }

    #menu img {
        width: 2rem;
    }

    #close img {
        width: 2rem;
    }


    #close {
        /* everything of this div should be on the right */
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    #title-menu-phone-links {
        display: flex;
        flex-direction: column;
        margin-right: 1rem;
    }

    #title-menu-phone-links a {
        margin-bottom: 0.6rem;
        color: white;
        font-size: 0.9rem;
        text-decoration: none;
    }

    #title-button-phone {
        display: flex;
        flex-direction: column;
        margin-right: 1rem;
    }

    #title-button-phone button {
        margin-bottom: 0.6rem;
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
        /* change button color */
        color: white;
        background-color: #09B778;
        border: none;
        border-radius: 0.5rem;
    }

    #title-button-phone button:hover {
        cursor: pointer;
    }

    #title-button-phone a {
        color: white;
        font-size: 0.9rem;
        text-decoration: none;
    }

    #hero-content-home {
        flex-direction: column-reverse;
    }

    #hero-content-home-left {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        text-align: center;
        align-items: center;

    }

    #hero-content-home-left h1 {
        font-size: 2rem;
    }

    #hero-content-home-left button {
        margin-top: 1rem;
        padding: 0.8rem 1.3rem;
        font-size: 1rem;
    }

    #hero-content-home-right {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        text-align: center;
        align-items: center;
    }

}


#clients-home {
    padding: 3rem 8rem;
}

#client-home-heading {
    text-align: center;
    margin-bottom: 3rem;
}

#client-home-heading span {
    color: #09B778;
}

#client-home-heading h1 {
    font-size: 2.5rem;
    font-weight: 500;
}

.client-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
    width: 30%;
}



#client-home-content {
    /* it should be seperated row wise */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

}



/* solution home */
#solutions-home {
    padding: 3rem 8rem;

}

#solutions-home-heading {
    text-align: center;
    margin-bottom: 3rem;
}

#solutions-home-heading span {
    color: #09B778;
}

#solutions-home-heading h1 {
    font-size: 2.5rem;
    font-weight: 500;
}

#solution-home-item-1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 30%;
    background-image: url(../files/Group\ 9119\ \(1\).png);
}

#solution-home-item-2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 30%;
    background-image: url(../files/Group\ 9458.png);
}

#solution-home-item-3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 30%;
    background-image: url(../files/Frame\ 9151.png);
}

#solution-home-item-4 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 30%;
    background-image: url(../files/Frame\ 9144.png);
}

#solution-home-item-5 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 30%;
    background-image: url(../files/Frame\ 9145.png);
}

#solution-home-item-6 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 30%;
    background-image: url(../files/Group\ 9619.png);
}

#solution-home-item-7 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 30%;
    background-image: url(../files/Frame\ 9150.png);
}


#solution-home-item-8 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 30%;
    background-image: url(../files/Group\ 9620.png);
}

#solution-home-item-9 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 30%;
    background-image: url(../files/Group\ 9619.png);
}

#solutions-home-content img {
    width: 25%;
}

#solutions-home-content {
    /* it should be seperated row wise */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#solutions-home-content div {
    margin-bottom: 2rem;
    padding: 1rem;
}

#solutions-home-content div p {
    text-align: center;
    color: white;
    font-size: 1.1rem;
    font-weight: 500;
}

#solutions-home-content div p a {
    color: white;
    text-decoration: none;
}

#solutions-home-content div p a:hover {
    color: #09B778;
}

#proud-home {
    padding: 3rem 8rem;
}

#proud-home-heading {
    text-align: center;
    margin-bottom: 3rem;
}

#proud-home-heading span {
    color: #09B778;
}

#proud-home-heading h1 {
    font-size: 2.5rem;
    font-weight: 500;
}

#proud-home-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

#proud-home-content-item h1 {
    font-size: 3rem;
    font-weight: 700;
    color: #09B778;
}

.client-item img {
    width: 80%;
}

@media screen and (max-width: 767px) {
    #clients-home {
        padding: 3rem 4rem;
    }

    .client-item {
        width: 50%;
    }

    .client-item img {
        width: 50%;
    }

    #solutions-home {
        padding: 3rem 4rem;
    }

    #solutions-home-content {
        justify-content: space-around;
    }

    #proud-home {
        padding: 3rem 4rem;
    }
}

@media screen and (max-width: 479px) {
    #clients-home {
        padding: 3rem 2rem;
    }

    #client-home-heading h2 {
        font-size: 1.3rem;
    }

    .client-item {
        width: 50%;
    }

    .client-item img {
        width: 60%;
    }

    .client-item p {
        font-size: 0.9rem;
        text-align: center;
    }

    #solutions-home {
        padding: 3rem 2rem;
    }

    #solutions-home-content {
        width: 100%;
        flex-direction: column;
    }

    #proud-home {
        padding: 3rem 2rem;
    }

    #solutions-home-heading h2 {
        font-size: 1.3rem;
    }


    #hero-content-home-left h1 {
        font-size: 1.8rem;
        width: 90%;
    }

    #solutions-home-content div {
        margin-bottom: 0;
        padding: 1rem 0;
    }

    #solution-home-item-1 {
        width: 100%;
    }

    #solution-home-item-2 {
        width: 100%;
    }

    #solution-home-item-3 {
        width: 100%;
    }

    #solution-home-item-4 {
        width: 100%;
    }

    #solution-home-item-5 {
        width: 100%;
    }

    #solution-home-item-6 {
        width: 100%;
    }

    #solution-home-item-7 {
        width: 100%;
    }

    #solution-home-item-8 {
        width: 100%;
    }

    #solution-home-item-9 {
        width: 100%;
    }

    #proud-home-heading h2 {
        font-size: 1.3rem;
    }

    #proud-home-content-item {
        width: 100%;
        align-items: center;
        text-align: center;

    }

    #proud-home-content-item h1 {
        font-size: 2.5rem;
    }

    #proud-home-content-item h2 {
        font-size: 1.5rem;
    }
}

#about-home {
    padding: 3rem 8rem;
    display: flex;
}

#about-home-left {
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

#about-home-left img {
    width: 80%;
}

#about-home-right {
    width: 60%;
    display: flex;
    flex-direction: column;
}

#about-home-right-heading h2 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

#about-home-right-content p {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 1rem;
    text-align: justify;
    width: 80%;
}

#about-home-right-button button {
    background-color: #09B778;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    margin-top: 1rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
}

#about-home-right-button a {
    text-decoration: none;
    color: white;
    font-weight: 500;
}

#about-home-right-button a:hover {
    cursor: pointer;
}

@media screen and (max-width: 767px) {
    #about-home {
        padding: 3rem 4rem;
        flex-direction: column;
    }

    #about-home-left {
        width: 100%;
    }

    #about-home-left img {
        width: 50%;
    }

    #about-home-right {
        width: 100%;
        align-items: center;


    }

    #about-home-right-heading h2 {
        font-size: 1.3rem;
    }

    #about-home-right-content {
        align-items: center;
        text-align: center;
    }

    #about-home-right-content p {
        font-size: 1rem;
        width: 100%;
    }

}

@media screen and (max-width: 479px) {
    #about-home {
        padding: 3rem 2rem;
        flex-direction: column;
    }

    #about-home-left {
        width: 100%;
    }

    #about-home-left img {
        width: 60%;
    }

    #about-home-right {
        width: 100%;
        align-items: center;
    }

    #about-home-right-heading h2 {
        font-size: 1.3rem;
    }

    #about-home-right-content {
        align-items: center;
        text-align: center;
    }

    #about-home-right-content p {
        font-size: 1rem;
        width: 100%;
    }

    #about-home-right-button button {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }

    #about-home-right-button a {
        font-size: 0.9rem;
    }

}

#works-home {
    padding: 3rem 8rem;
    display: flex;
    flex-direction: column;
}

#works-home h2 {
    text-align: center;

    margin-bottom: 3rem;
}

#works-home h2 span {
    color: #09B778;
}

#works-home img {
    width: 70%;
    /* center */
    margin: 0 auto;
}

@media screen and (max-width: 767px) {
    #works-home {
        padding: 3rem 4rem;
    }

    #works-home img {
        width: 80%;
    }
}

@media screen and (max-width: 479px) {
    #works-home {
        padding: 3rem 0rem;
    }

    #works-home img {
        width: 90%;
    }

    #works-home h2 {
        font-size: 1.3rem;
    }
}

#choose-home {
    padding: 3rem 8rem;
}

#choose-home-heading {
    text-align: center;
    margin-bottom: 3rem;
}

#choose-home-heading span {
    color: #09B778;
}

#choose-home-content {
    display: flex;
    justify-content: space-between;
}

#choose-home-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    background-color: white;
    border-radius: 0.5rem;
    margin: 0 1rem;
}

#choose-home-item img {
    width: 50%;
}

#choose-home-item p {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 500;
    margin-top: 1rem;
    color: #09B778;
}

@media screen and (max-width: 767px) {
    #choose-home {
        padding: 3rem 4rem;
    }

    #choose-home-content {
        flex-direction: column;
    }

    #choose-home-item {
        margin-bottom: 2rem;
    }

    #choose-home-item img {
        width: 60%;
    }

    #choose-home-item p {
        font-size: 1rem;
    }
}

@media screen and (max-width: 479px) {
    #choose-home {
        padding: 3rem 2rem;
    }

    #choose-home-content {
        flex-direction: column;
    }

    #choose-home-item {
        margin-bottom: 2rem;
    }

    #choose-home-item img {
        width: 70%;
    }

    #choose-home-item p {
        font-size: 0.9rem;
    }
}

#demo-home {
    padding: 3rem 8rem;
    display: flex;
    flex-direction: column;
}

#demo-home h2 {
    text-align: center;
}

#demo-home h2 span {
    color: #09B778;
}

#demo-home h3 {
    text-align: center;
    font-size: 1.5rem;
}

#demo-home button {
    background-color: #09B778;
    border: none;
    padding: 0.8rem 1.3rem;
    border-radius: 0.5rem;
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
}

#demo-home div {
    display: flex;
    align-items: center;
    justify-content: center;
}

#demo-home div a {
    text-decoration: none;
    color: white;
    font-weight: 500;
}

#demo-home div a:hover {
    cursor: pointer;
}

@media screen and (max-width: 767px) {
    #demo-home {
        padding: 3rem 4rem;
    }

    #demo-home h2 {
        font-size: 1.3rem;
    }

    #demo-home h3 {
        font-size: 1.3rem;
    }

    #demo-home button {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }

    #demo-home div a {
        font-size: 0.9rem;
    }
}

@media screen and (max-width: 479px) {
    #demo-home {
        padding: 3rem 2rem;
    }

    #demo-home h2 {
        font-size: 1.3rem;
    }

    #demo-home h3 {
        font-size: 1.3rem;
    }

    #demo-home button {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }

    #demo-home div a {
        font-size: 0.9rem;
    }
}

#footer {
    background-color: #051340;
    padding: 3rem 8rem;
}

#footer-heading {
    color: #09B778;
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 1rem;
    /* bottom border - px, color */
    border-bottom: 2px solid #09B778;
}

#footer-heading h2 {
    margin-bottom: 0.5rem;
}

#footer-main {
    display: flex;
    justify-content: space-evenly;
    margin-top: 2rem;
}

#f1 {
    /* width: 30%; */
    /* center all contents */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

#f1 img {
    width: 35%;
}

#f1 h3 {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: white;
    text-align: center;
}

#f2,
#f3 {
    width: 30%;
    /* center all contents */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 1rem;
}

#f2 a,
#f3 a {
    text-decoration: none;
    color: #09B778;
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

#f2 a:hover,
#f3 a:hover {
    color: white;
}

#f4 {
    color: #09B778;
}

#footer-contact p a {
    text-decoration: none;
    color: #09B778;
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

#footer-contact p a:hover {
    color: white;
}

#footer-social {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
}

#footer-social a {
    text-decoration: none;
    color: #09B778;
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

#footer-social a:hover {
    color: white;
}

@media screen and (max-width: 767px) {
    #footer {
        padding: 3rem 4rem;
    }

    #footer-main {
        flex-direction: column;
    }

    #f1 {
        width: 100%;
        padding: 0.5rem;
    }

    #f1 img {
        width: 15%;
    }

    #f1 h3 {
        font-size: 1rem;
    }

    #f2,
    #f3 {
        width: 100%;
        padding: 0.5rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    #f2 a,
    #f3 a {
        font-size: 1rem;
        width: 22%;
    }

    #footer-contact p a {
        font-size: 1rem;
    }
}


@media screen and (max-width: 479px) {
    #footer {
        padding: 3rem 2rem;
    }

    #footer-main {
        flex-direction: column;
    }

    #f1 {
        padding: 0.5rem;
        flex-direction: row;
        width: auto;
        margin-bottom: 1rem;
    }

    #f1 img {
        width: 15%;
    }

    #f1 h3 {
        font-size: 0.9rem;
        margin-left: 1rem;
    }

    #f2,
    #f3 {
        width: auto;
        padding: 0.5rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    #f2 a,
    #f3 a {
        font-size: 0.9rem;
        width: 22%;
    }

    #footer-contact p a {
        font-size: 1rem;
    }

    #footer-heading h2 {
        font-size: 1.5rem;
    }

    #f4 p {
        font-size: 0.9rem;
    }
}

#footer-last {
    padding: 0.01rem 8rem;
    background-color: #09B778;
}

#footer-last p {
    text-align: center;
    color: white;
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

@media screen and (max-width: 767px) {
    #footer-last {
        padding: 0.01rem 4rem;
    }

    #footer-last p {
        font-size: 0.9rem;
    }
}

@media screen and (max-width: 479px) {
    #footer-last {
        padding: 0.01rem 2rem;
    }

    #footer-last p {
        font-size: 0.8rem;
    }
}

.hch {
    background-image: url(../files/hero-home-bg.png) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.pbg {
    background-image: url(../files/Group\ 9623.png) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* product page styles */

#hero-content-home {
    /* background-image: url(../files/Group\ 9623.png) !important; */
    /* cover, no repeat */
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;

}

#hero-content-home-left p {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 1rem;
    color: white;
    text-align: justify;
    width: 80%;
}

#industry-product {
    padding: 3rem 8rem;
    display: flex;
    background-image: url(../files/Group\ 9623\ \(2\).png);
}

#ip-left {
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#ip-right {
    width: 60%;
    display: flex;
    flex-direction: column;
}

#ip-left img {
    width: 80%;
}

#ip-right h1 {
    font-size: 2.5rem;
    font-weight: 500;
    margin-bottom: 1rem;
    color: white;
}

#ip-right p {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 1rem;
    color: white;
    text-align: justify;
    width: 80%;
}

#ip-right span {
    color: #09B778;
}

#ip-right button {
    background-color: #09B778;
    border: none;
    padding: 0.8rem 1.3rem;
    border-radius: 0.5rem;
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    margin-top: 1rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
    width: 40%;
}

#ip-right button a {
    text-decoration: none;
    color: white;
    font-weight: 500;
}

#ip-right button a:hover {
    cursor: pointer;
}

@media screen and (max-width: 767px) {
    #industry-product {
        padding: 3rem 4rem;
    }

    #ip-left {
        width: 100%;
    }

    #ip-left img {
        width: 50%;
    }

    #ip-right {
        width: 100%;
        align-items: center;
    }

    #ip-right h1 {
        font-size: 1.5rem;
    }

    #ip-right p {
        font-size: 1rem;
        width: 100%;
    }

    #ip-right button {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
        width: 50%;
    }

    #ip-right button a {
        font-size: 0.9rem;
    }
}

@media screen and (max-width: 479px) {
    #industry-product {
        padding: 3rem 2rem;
        flex-direction: column;
    }

    #ip-left img {
        width: 70%;
    }

    #ip-right h1 {
        font-size: 1.5rem;
    }

    #ip-right p {
        font-size: 1rem;
        width: 100%;
    }

    #ip-right button {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
        width: 70%;
    }

    #ip-right button a {
        font-size: 0.9rem;
    }

}

#industry-serve {
    padding: 3rem 8rem;
    background-color: #1E1D1D;
}

#industry-serve-heading {
    text-align: center;
    margin-bottom: 3rem;
}

#industry-serve-heading span {
    color: #09B778;
}

#client-home-heading h1 {
    font-size: 2.5rem;
    font-weight: 500;
}

#industry-serve-content {
    display: flex;
    justify-content: space-around;
}

#industry-serve-content img {
    width: 75%;
}

@media screen and (max-width: 767px) {
    #industry-serve {
        padding: 3rem 4rem;
    }


    #industry-serve-content img {
        width: 80%;
    }

    #industry-serve-heading h1 {
        font-size: 1.5rem;
    }
}

@media screen and (max-width: 479px) {
    #industry-serve {
        padding: 3rem 2rem;
    }

    #industry-serve-content {
        flex-direction: column;
    }

    #industry-serve-heading h1 {
        font-size: 1.5rem;
    }

    #industry-serve-content img {
        width: 90%;
    }

    #industry-serve-heading h2 {
        font-size: 1.3rem;
    }
}

#solutions-product {
    padding: 3rem 8rem;
    background-color: #1E1D1D;
}

#solutions-product-heading {
    text-align: center;
    margin-bottom: 3rem;
}

#solutions-product-heading span {
    color: #09B778;
}

#solutions-product-heading h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: white;
}

#solutions-product-heading h3 {
    font-size: 1.1rem;
    font-weight: 500;
}

.spc-left-item,
.spc-right-item {
    display: flex;
    padding: 3rem;
}

.spc-content {
    width: 60%;
}

.spc-image {
    width: 40%;
    display: flex;
    /* justify-content: center; */
}

.spc-content h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #09B778;
}

.spc-content p {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 1rem;
    color: white;
    text-align: justify;
    width: 80%;
}

.spc-image img {
    width: 80%;
}

@media screen and (max-width: 767px) {
    #solutions-product {
        padding: 3rem 4rem;
    }

    .spc-left-item {
        flex-direction: column-reverse;
    }

    .spc-content {
        width: 100%;
    }

    .spc-image {
        width: 100%;
        justify-content: center;
    }

    .spc-image img {
        width: 80%;
    }

    .spc-content h2 {
        text-align: center;
    }

    .spc-content p {
        width: 100%;
    }

    .spc-right-item {
        flex-direction: column;
    }

}

@media screen and (max-width: 479px) {
    #solutions-product {
        padding: 3rem 1.4rem;
    }

    .spc-left-item {
        flex-direction: column-reverse;
        padding: 0.8rem 0;
    }

    .spc-content {
        width: 100%;
    }

    .spc-image {
        width: 100%;
        justify-content: center;
    }

    .spc-image img {
        width: 80%;
    }

    .spc-content h2 {
        text-align: center;
        font-size: 1.3rem;
    }

    .spc-content p {
        width: 100%;
        font-size: 1rem;
    }

    .spc-right-item {
        flex-direction: column;
        padding: 0.8rem 0;
    }

    #solutions-product-heading h2 {
        font-size: 1.3rem;
    }

    #solutions-product-heading h3 {
        font-size: 1rem;
    }
}

#demo-product {
    padding: 1.2rem 8rem;
    background-color: #1E1D1D;
}

#dp-content {
    background: linear-gradient(90deg, #152968 0%, #09B778 100%);
    border-radius: 0.7rem;
    -webkit-border-radius: 0.7rem;
    -moz-border-radius: 0.7rem;
    -ms-border-radius: 0.7rem;
    -o-border-radius: 0.7rem;
    padding: 1rem 3rem;
    display: flex;
}

#dp-content p {
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    width: 50%;
}

#dp-content button {
    background-color: #152968;
    border: none;
    padding: 0.8rem 1.3rem;
    border-radius: 0.5rem;
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
    width: 40%;
}

#dp-content button a {
    text-decoration: none;
    color: white;
    font-weight: 500;
}

#dp-content button a:hover {
    cursor: pointer;
    color: #09B778;
}

@media screen and (max-width: 767px) {
    #demo-product {
        padding: 1.2rem 4rem;
    }
}

@media screen and (max-width: 479px) {
    #demo-product {
        padding: 1.2rem 2rem;
    }

    #dp-content {
        flex-direction: column;
    }

    #dp-content p {
        width: 100%;
    }

    #dp-content button {
        width: 100%;
    }
}

/* freight sourcing page */

#hero-content-product-inside {
    background-color: #1E1D1D;
    height: 100vh;
    display: flex;
    border-bottom: 2px solid #09B778;
}

#hcpi-left {
    width: 50%;
    padding: 2rem 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 8rem;

}

#hcpi-left h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #09B778;
}

#hcpi-left p {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 1rem;
    color: white;
    text-align: justify;
    width: 80%;
}

#hcpi-left button {
    background-color: #09B778;
    border: none;
    padding: 0.8rem 1.3rem;
    border-radius: 0.5rem;
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    margin-top: 1rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
    width: 40%;
}

#hcpi-left button a {
    text-decoration: none;
    color: white;
    font-weight: 500;
}

#hcpi-right {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#hcpi-right img {
    width: 70%;
}



#hcpi-main {
    padding: 3rem 8rem;
    margin-top: 3rem;
    background-color: #1E1D1D;
}

#hcpi-main-top-heading {
    text-align: center;
    margin-bottom: 3rem;
}

#hcpi-main-top-heading h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #09B778;
}

#hcpi-main-top-content {
    display: flex;
}

#hcpi-mtc-left {
    width: 60%;
}

#hcpi-mtc-left p {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 1rem;
    text-align: justify;
    width: 80%;
}

#hcpi-mtc-right {
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#hcpi-mtc-right img {
    width: 70%;
}

#hcpi-m2 {
    padding: 3rem 8rem;
    margin-top: 3rem;
    background-color: #1E1D1D;
}

#hcpi-m2-heading {
    text-align: center;
    margin-bottom: 3rem;
}

#hcpi-m2-heading h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #09B778;
}

#hcpi-m2-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
}

#hcpi-m2-item-content {
    width: 50%;
}

#hcpi-m2-item-content h3 {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 1rem;
    color: #09B778;
}

#hcpi-m2-item-content p {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 1rem;
    text-align: justify;
    width: 80%;
}

#hcpi-m2-item-image {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#hcpi-m2-item-image img {
    width: 70%;
}

#hcpi-m2-footer {
    text-align: center;
    margin-top: 3rem;
}

#hcpi-m2-footer p {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 1rem;
    width: 70%;
    align-items: center;
    margin: 0 auto;
}

#hcpi-path {
    padding: 3rem 8rem;
    margin-top: 3rem;
    background-color: #1E1D1D;
}

#hcpi-path-heading {
    text-align: center;
    margin-bottom: 3rem;
}

#hcpi-path-heading h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #09B778;
}

#hcpi-path-content {
    display: flex;
    justify-content: center;
}

#hcpi-path-content img {
    width: 70%;
}

#fp-benefits {
    padding: 3rem 8rem;
    margin-top: 3rem;
    background-color: #1E1D1D;
}

#fp-benefits-heading {
    text-align: center;
    margin-bottom: 3rem;
}

#fp-benefits-heading h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #09B778;
}

#fb-benefits-content {
    display: flex;
    justify-content: space-between;
}

#fb-bc-item {
    width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
    border-radius: 0.5rem;
    padding: 1rem;
}

#fb-bc-i-img {
    width: 50%;
    display: flex;
    justify-content: center;
}

#fb-bc-i-img img {
    width: 80%;
}

#fb-bc-i-text {
    text-align: center;
    margin-top: 1rem;
}

#fb-bc-i-text p {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #152968;
}

#fb-bc-i-text p span {
    color: #09B778;
}

#fp-benefits-footer {
    text-align: center;
    margin-top: 3rem;
}

#fp-benefits-footer p {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 1rem;
    width: 70%;
    align-items: center;
    margin: 0 auto;
}

#fp-demo {
    padding: 3rem 8rem;
    margin-top: 3rem;
    background-color: #1E1D1D;
}

#fp-demo-heading {
    text-align: center;
    margin-bottom: 3rem;
}

#fp-demo-heading h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #09B778;
}

#fp-demo-btn {
    display: flex;
    justify-content: center;
}

#fp-demo-btn button {
    background-color: #09B778;
    border: none;
    padding: 0.8rem 1.3rem;
    border-radius: 0.5rem;
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    margin-top: 1rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
    width: 40%;
}

#fp-demo-btn button a {
    text-decoration: none;
    color: white;
    font-weight: 500;
}

#fp-demo-btn button a:hover {
    cursor: pointer;
    color: #152968;
}


@media screen and (max-width: 767px) {

    #hero-content-product-inside,
    #hcpi-main,
    #hcpi-m2,
    #hcpi-path,
    #fp-benefits,
    #fp-demo {
        padding: 2rem 3rem;
    }

    #hero-content-product-inside {
        flex-direction: column-reverse;
        margin-bottom: 3rem;
    }

    #hcpi-right {
        width: 100%;
    }

    #hcpi-left {
        width: 100%;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #hcpi-left h2 {
        text-align: center;
    }

    #hcpi-main {
        margin-top: 6rem;
    }

    /* just change the font size and padding for entire page */
    #hcpi-main-top-heading h2 {
        font-size: 1.3rem;
    }



    #hcpi-mtc-left p {
        font-size: 1rem;
        width: 100%;
    }

    #hcpi-mtc-right img {
        width: 80%;
    }

    #hcpi-m2-heading h2 {
        font-size: 1.3rem;
    }

}

@media screen and (max-width: 479px) {
    #hero-content-product-inside {
        padding: 1rem 1.2rem;
        height: auto;
    }

    #hero {
        height: auto;
    }

    #hcpi-left h2 {
        font-size: 1.2rem;
    }

    #hcpi-left p {
        font-size: 1rem;
        width: 100%;
    }

    #hcpi-left button {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
        width: 50%;
    }

    #hcpi-left button a {
        font-size: 0.9rem;
    }

    #hcpi-main {
        margin-top: 0;
        padding: 2rem 1.2rem;
    }

    #hcpi-main-top-heading h2 {
        font-size: 1.3rem;
    }

    #hcpi-mtc-left p {
        font-size: 1rem;
        width: 100%;
    }

    #hcpi-main-top-content {
        flex-direction: column-reverse;
    }

    #hcpi-mtc-right img {
        width: 70%;
    }

    #hcpi-mtc-left {
        width: 100%;
    }

    #hcpi-mtc-right {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #hcpi-m2 {
        padding: 2rem 1.2rem;
        margin-top: 0;
    }

    #hcpi-m2-heading h2 {
        font-size: 1.3rem;
    }

    #hcpi-m2-item {
        flex-direction: column;
    }

    #hcpi-m2-item-content h3 {
        font-size: 1.1rem;
    }

    #hcpi-m2-item-content p {
        font-size: 1rem;
        width: 100%;
    }

    #hcpi-m2-item-content {
        width: 100%;
    }

    #hcpi-m2-item-image {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #hcpi-m2-item-image img {
        width: 70%;
    }

    #hcpi-m2-footer {
        text-align: center;
    }

    #hcpi-m2-footer p {
        font-size: 1rem;
        width: 100%;
    }

    #hcpi-path {
        padding: 2rem 1.2rem;
        margin-top: 0;
    }

    #hcpi-path-heading h2 {
        font-size: 1.3rem;
    }

    #hcpi-path-content img {
        width: 95%;
    }

    #fp-benefits {
        padding: 2rem 1.2rem;
        margin-top: 0;
    }

    #fp-benefits-heading h2 {
        font-size: 1.3rem;
    }

    #fb-benefits-content {
        flex-direction: column;
        align-items: center;
    }

    #fb-bc-item {
        width: 70%;
        margin-bottom: 1rem;
    }

    #fb-bc-i-img img {
        width: 50%;
    }

    #fb-bc-i-text p {
        font-size: 1rem;
    }

    #fp-benefits-footer {
        text-align: center;
        margin-top: 1rem;
    }

    #fp-benefits-footer p {
        font-size: 1rem;
        width: 90%;
    }

    #fp-demo {
        padding: 2rem 1.2rem;
        margin-top: 0;
    }

    #fp-demo-heading h3 {
        font-size: 1.3rem;
    }

    #fp-demo-btn {
        display: flex;
        justify-content: center;
    }

    #fp-demo-btn button {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
        width: 50%;
        margin-top: 0;
    }
}

/* About Us */


#who-we-are {
    padding: 3rem 8rem;
    background-color: #1E1D1D;
    display: flex;
}

#wwa-left {
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#wwa-left img {
    width: 70%;
}

#wwa-right {
    width: 60%;
    display: flex;
    flex-direction: column;

}


#wwa-right-heading h1 {
    font-size: 2.5rem;
    font-weight: 600;
    color: #09B778;
}

#wwa-right-p p {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 1rem;
    color: white;
    text-align: justify;
    width: 80%;
}


#about-help {
    padding: 3rem 0;
    background-color: #1E1D1D;
}

#about-help-heading {
    text-align: center;
    margin-bottom: 3rem;
}

#about-help-heading h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

#about-help-heading span {
    color: #09B778;
}

#about-help-heading h3 {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 1rem;
    color: white;
}

#ah-content {
    display: flex;
}

#ah-c-left {
    width: 50%;
    background-color: #152968;
    border-radius: 2rem;
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    -ms-border-radius: 2rem;
    -o-border-radius: 2rem;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

#ah-c-left img {
    width: 60%
}

#ah-c-right {
    width: 50%;
    display: flex;
    flex-direction: column;
    padding: 2rem 4rem;
    background-color: black;
    border-radius: 2rem;
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    -ms-border-radius: 2rem;
    -o-border-radius: 2rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

#ah-c-r-headings h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #09B778;
}

#ah-c-r-headings h3 {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 1rem;
    color: white;
}

#ah-c-r-btns button {
    background-color: #09B778;
    border: none;
    padding: 0.8rem 1.3rem;
    border-radius: 0.5rem;
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    margin-top: 1rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
    width: 40%;
}

#ah-c-r-btns button a {
    text-decoration: none;
    color: white;
    font-weight: 500;
}

#ah-c-r-btns button a:hover {
    cursor: pointer;
    color: #152968;
}

#ah-c-r-points {
    margin-top: 2rem;
}

#ah-c-r-points li {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 1rem;
    color: white;
}

@media screen and (max-width: 767px) {
    #who-we-are {
        padding: 3rem 4rem;
        flex-direction: column;
        margin-top: 6rem;
    }

    #wwa-left {
        width: 100%;
    }

    #wwa-left img {
        width: 70%;
    }

    #wwa-right {
        width: 100%;
        align-items: center;
    }

    #wwa-right-p {
        width: 100%;
        align-items: center;
    }

    #wwa-right-p p {
        width: 100%;

    }

    #wwa-right-heading h1 {
        font-size: 1.5rem;
    }

    #wwa-right-p p {
        font-size: 1rem;
    }

    #ah-content {
        flex-direction: column;
    }

    #ah-c-left {
        width: 100%;
        border-radius: 2rem;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }

    #ah-c-left img {
        width: 60%;
    }

    #ah-c-right {
        width: auto;
        border-radius: 2rem;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

}

@media screen and (max-width: 479px) {
    #hcpi-left h1 {
        font-size: 1.5rem;
    }

    #hcpi-left h2 {
        font-size: 1rem;
    }

    #hcpi-left p {
        font-size: 0.9rem;
    }

    #who-we-are {
        padding: 3rem 2rem;
        margin-top: 0;
    }

    #wwa-right-heading h1 {
        font-size: 1.2rem;
    }

    #wwa-right-p p {
        font-size: 0.9rem;
    }

    #ah-c-right {
        padding: 1rem 2rem;
    }

    #ah-c-r-headings h2 {
        font-size: 1.1rem;
    }

    #ah-c-r-headings h3 {
        font-size: 1rem;
    }

    #ah-c-r-btns button {
        font-size: 0.9rem;
        width: auto;
    }

    #ah-c-r-points li {
        font-size: 0.9rem;
    }
}