/* ------------------------------ */
/* hero section here  */
/* ------------------------------ */
p{
    font-size: 18px !important;
}
#hero-about {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: 35vh;
    width: 100%;
}
#hero-about::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: linear-gradient(
        45deg,
        rgba(0, 0, 2555, 0.3),
        rgba(255, 0, 0, 0.4)
    );
}
#hero-about img {
    position: absolute;
    object-fit: cover;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* ------------------------------ */
/* about section here  */
/* ------------------------------ */

#about-section > div {
    width: 60%;
}
#about-video {
    display: flex;
    justify-content: center;
    align-items: center;
}

#about-video video {
    width: 70%;
}

/* ------------------------------ */
/* vision mission section here  */
/* ------------------------------ */

:is(#vision > div, #mission > div) {
    width: 55%;
}
#mission {
    padding-top: var(--gutter-xx-small);
    display: flex;
    justify-content: flex-end;
}
#vision {
    padding-top: var(--gutter-xx-small);
}

/* ------------------------------ */
/* man power section here  */
/* ------------------------------ */

#man-power div.image {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    width: 100%;
    margin: var(--gutter-small) 0;
}
#man-power div.image img {
    flex-basis: 50%;
    height: 400px;
}
@media (max-width: 1644px) {
    #man-power div.image > img:last-child {
        display: none;
    }
}

@media (max-width: 900px) {
    #man-power div.image img {
        height: auto;
    }
    #about-video video {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
}

@media (max-width: 900px) {
    :is(#vision > div, #mission > div) {
        width: 100%;
        text-align: center;
    }
    #about-section > div {
        width: 100%;
          }
}