/* importing styles */
@import "./base.css";
/* HEADER - CAROUSEL SECTION */
@import "./navbar.css";
@import "./hero.css";
/* FOOTER */
@import "./footer.css";
/* all other styles go below here */


/* MAIN - MISSION SECTION */
section#mission {
    padding: 5.5% 12%;
}
section#mission > p {
    text-align: center;
}
/* tab/ipad/medium screen width */
@media screen and (max-width:768px) {
    section#mission {
        padding: 8% 14%;
    }
    /* mobile phone/small screen width */
    @media screen and (max-width:425px) {
        section#mission {
            padding: 13% 6%;
        }
        section#mission > p {
            text-align: justify;
        }
    }
}
/* MAIN - ABOUT SECTION */
section#about {
    background: #F5F5F5;
    padding: 0 10% 0 11.3%;
    height: calc(100vh - 72px);
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 7.8%;
}
section#about img {
    width: 375px;
    height: auto;
}
section#about h2, section#about p {
    text-align: left;
}
@media screen and (max-width:1150px) {
    section#about {
        padding: 0 7.5% 0 8.5%;
        gap: 7%;
    }
    @media screen and (max-width:1001px) {
        p {
            font-size: 17px;
            line-height: 1.7;
        }
        section#about {
            padding: 0 5.8% 0 6.8%;
            gap: 6%;
        }
        section#about img {
            width: 370px;
        }
        @media screen and (max-width:865px) {
            p {
                font-size: 15.7px;
                line-height: 1.6;
            }
            section#about {
                padding: 0 5.5% 0 6.5%;
                gap: 6%;
            }
            section#about img {
                width: 350px;
            }
            /* tab/ipad/medium screen width */
            @media screen and (max-width:768px) {
                p {
                    font-size: 16px;
                    line-height: 1.8;
                }
                section#about {
                    padding: 0 6.4%;
                    gap: 9%;
                    flex-flow: column nowrap;
                    justify-content: center;
                    height: 125vh;
                }
                section#about h2 {
                    text-align: center;
                }
                section#about p {
                    text-align: justify;
                }
                section#about > article {
                    display: flex;
                    flex-flow: column nowrap;
                    justify-content: center;
                    align-items: center;
                    padding: 0 9%;
                }
                /* mobile phone/small screen width */
                @media screen and (max-width:425px) {
                    h2 {
                        font-size: 22px;
                    }
                    p {
                        font-size: 15px;
                        line-height: 1.7;
                    }
                    section#about {
                        padding: 0;
                        gap: 7%;
                        height: 100vh;
                    }
                    section#about img {
                        width: 84%;
                    }
                }
            }
        }
    }
}
/* MAIN - OUR SERVICES SECTION */
/* mobile screen */
section#our-services {
    padding: 14% 5%;
}
section#our-services h2 {
    margin-bottom: 0px;
}
section#our-services > div {
    padding-top: 20px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    max-width:  1037px;
    margin: 0 auto;
}
section#our-services > div > ul {
    width: 220px;
    display: flex;
    flex-flow: column nowrap;
    row-gap: 20px;
    list-style: none;
}
section#our-services > div > ul > li {
    text-align: center;
}
section#our-services > div > ul > li > a {
    font-size: 17px;
    color: var(--black);
    font-weight: 400;
}
section#our-services > div > div#service-images {
    display: none;
}
/* medium screens */
@media screen and (min-width: 680px) {
    section#our-services > div {
        justify-content: space-between;
    }
    section#our-services > div > ul {
        row-gap: 15;
        width: 190px;
    }
    section#our-services > div > ul > li {
        text-align: left;
    }
    section#our-services > div > ul > li > a {
        font-size: 15px;
    }
    section#our-services > div > div#service-images {
        display: flex;
        flex-flow: column nowrap;
        gap: 40px;
    }
    section#our-services > div > div#service-images > figure {
        display: flex;
        flex-flow: row nowrap;
        gap: 30px;
        justify-content: flex-start;
    }
    section#our-services > div > div#service-images > figure img {
        width: auto;
        height: calc(8.5vw + 50px);
        max-height: 173px;
    }
    /* larger screens ( > 768px) */
    @media screen and (min-width: 768px) {
        section#our-services {
            padding: 8% 12%;
        }
        section#our-services > div > ul {
            row-gap: 20px;
            width: 230px;
        }
        section#our-services > div > ul > li > a {
            font-size: 16px;
        }
        @media screen and (min-width: 900px) {
            section#our-services > div > ul {
                row-gap: 28px;
            }
            section#our-services > div > ul > li > a {
                font-size: 17px;
            }
            @media screen and (min-width: 1200px) {
                section#our-services {
                    padding: 6% 14%;
                }
                section#our-services > div > ul {
                    row-gap: 34px;
                }
                section#our-services > div > ul > li > a {
                    font-size: 18px;
                }
                section#our-services > div > div#service-images > figure {
                    gap: 75px;
                }
            }
        }
    }
}

/* MAIN - ABOUT SECTION */
section#partners {
    width: 100%;
    background: #FFF;
    padding: 6% 0;
    position: relative;
}
section#partners > div {
    display: flex;
    flex-flow: row nowrap;
    overflow-x: scroll;
    scroll-behavior: smooth;
    width: 90%;
    margin: 0 auto;
    gap: 25px;
    padding: 0 15px;
}
section#partners > button {
    display: none;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translate(0,-50%);
    background: transparent;
    width: 30px;
    z-index: 999;
}
section#partners > button > svg {
    fill: #E7A704;
    max-height: auto;
    max-width: 30px;
}
#chevron-left {
    left: 25px;
}
#chevron-right {
    right: 25px;
}
@media screen and (min-width: 500px) {
    section#partners > div {
        overflow: hidden;
    }
    section#partners > button {
        display: block;
    }
}