/* ===== Start - Intro Section Details ===== */
.Intro-Details {
    background-image: url(../Assets/Image/About/BG.jpg);
    height: 350px;
}
    @media (max-width: 768px) {
        .Intro-Details {
            height: 560px;
        }
    }


.Intro-Details h1 span {
    color: var(--orange);
}

.Intro-Details > p {
    color: var(--white);
}
/* ===== End - Intro Section Details ===== */



/* ===== Start - About Section ===== */
.About-Wrapper {
    padding: 0 var(--page-pad);
    margin: 45px 0 var(--section-pad) 0;
}


/* Faculty Members */
.Faculty {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;

    padding: var(--sub-section-pad) 0 120px 0;
}
    @media (max-width: 1000px) {
        .Faculty {
            padding: var(--sub-section-pad) 0 100px 0;
        }
    }
    @media (max-width: 500px) {
        .Faculty {
            padding: var(--sub-section-pad) 0 90px 0;
        }
    }

.Faculty .Member {
    flex-basis: calc(calc(100% - var(--page-pad)) / 4);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border-radius: 5px;
    background-color: var(--bg-blue);
    padding: 25px 17px;

    text-align: center;
}
    .Faculty .Member:hover {
        outline: 4px solid var(--till-light);
    }
    @media (max-width: 1200px) {
        .Faculty .Member {
            flex-basis: calc(calc(100% - var(--page-pad)) / 3);
        }
    }
    @media (max-width: 1000px) {
        .Faculty .Member {
            flex-basis: calc(calc(100% - var(--page-pad)) / 2);
        }
    }
    @media (max-width: 550px) {
        .Faculty .Member {
            flex-basis: calc(calc(100% - var(--page-pad)) / 1);
        }
    }

.Faculty .Member img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 1000px;
}

.Faculty .Member h3,
.Faculty .Member h4 span {
    font-weight: var(--weight-semi-bold);
}

.Faculty .Member h3 {
    padding: 10px 0;
}



/* Our Services */
.Service {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;

    padding: var(--sub-section-pad) 0 120px 0;
}
    @media (max-width: 1000px) {
        .Service {
            padding: var(--sub-section-pad) 0 100px 0;
        }
    }
    @media (max-width: 500px) {
        .Service {
            padding: var(--sub-section-pad) 0 90px 0;
        }
    }

.Service .Item {
    flex-basis: calc(calc(100% - var(--page-pad)) / 4);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border-radius: 5px;
    background-color: var(--bg-blue);
    padding: 30px 25px;

    text-align: center;
}
    @media (max-width: 1200px) {
        .Service .Item {
            flex-basis: calc(calc(100% - var(--page-pad)) / 3);
        }
    }
    @media (max-width: 1000px) {
        .Service .Item {
            flex-basis: calc(calc(100% - var(--page-pad)) / 2);
        }
    }
    @media (max-width: 550px) {
        .Service .Item {
            flex-basis: calc(calc(100% - var(--page-pad)) / 1);
        }
    }

.Service .Item img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 1000px;
}

.Service .Item h3 {
    font-weight: var(--weight-semi-bold);
    padding: 10px 0 0 0;
}



/* Our Principles */
.Our-Principle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 80px;
}
    @media (max-width: 500px) {
        .Our-Principle {
            gap: 60px;
        }
    }


/* Image */
.Our-Principle .Item img {
    width: 50%;
}
    @media (max-width: 1300px) {
        .Our-Principle .Item img {
            width: 45%;
        }
    }
    @media (max-width: 1100px) {
        .Our-Principle .Item img {
            width: 40%;
        }
    }
    @media (max-width: 1000px) {
        .Our-Principle .Item img {
            width: 70%;
            display: block;
            margin: 0 auto 30px auto;
        }
    }
    @media (max-width: 768px) {
        .Our-Principle .Item img {
            width: 80%;
        }
    }
    @media (max-width: 500px) {
        .Our-Principle .Item img {
            width: 95%;
        }
    }

.Our-Principle .Image-01 {
    float: left;
    margin: 0 40px 20px 0;
}
    @media (max-width: 1000px) {
        .Our-Principle .Image-01 {
            float: none;
        }
    }

.Our-Principle .Image-02 {
    float: right;
    margin: 0 0 20px 40px;
}
    @media (max-width: 1000px) {
        .Our-Principle .Image-02 {
            float: none;
        }
    }


/* Details */
.Our-Principle h2 {
    display: inline-block;

    font-size: calc(var(--size-medium) + 4rem);
    font-weight: var(--weight-medium);
    color: var(--white);
    
    background-color: var(--orange);
    padding: 5px 20px;
    border-radius: 5px;
}

.Our-Principle h4 {
    color: var(--grey);
    line-height: 27rem;
    padding: 20px 0;
}
    @media (max-width: 1400px) {
        .Our-Principle h4 {
            padding: 10px 0;
        }
    }
    @media (max-width: 1200px) {
        .Our-Principle h4 {
            line-height: 25rem;
        }
    }


.Our-Principle h4 .Gap {
    display: block;
    margin: 12px 0;
}

.Our-Principle h4 .Pre {
    white-space: pre-wrap;
    word-wrap: normal;
}
/* ===== End - About Section ===== */