/* Start Main Header */

.main-header {
    background-image: url('../Img/1.png');
    background-size: contain;
    background-repeat: no-repeat;
    height: 600px;
    width: 100%;
}

@media only screen and (min-width: 320px) and (max-width: 480px){
    .main-header{
        height: 160px;
    }
}

@media only screen and (min-width: 481px) and (max-width: 576px){
    .main-header{
        height: 200px;
    }
}

@media only screen and (min-width: 577px) and (max-width: 767px){
    .main-header{
        height: 300px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px){
    .main-header{
        height: 300px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1024px){
    .main-header{
        height: 350px;
    }
}
/* End Main Header */
/* Start Head */
.header .img-fluid {
    max-width: 20%;
    height: auto;
}

.header > h1 {
        position: relative;
        display: inline-block;
        font-size: 4.5rem;
}

.about-us .header h1::after {
    content: "";
    width: 100px;
    height: 5px;
    position: absolute;
    top: 100%;
    left: 40%;
    background-color: #1b2c33;
}

.vision .header h1::after {
    content: "";
    width: 100px;
    height: 5px;
    position: absolute;
    top: 100%;
    left: 25%;
    background-color: #1b2c33;
}

.message .header h1::after {
    content: "";
    width: 100px;
    height: 5px;
    position: absolute;
    top: 100%;
    left: 44%;
    background-color: #1b2c33;
}

.value .header h1::after {
    content: "";
    width: 100px;
    height: 5px;
    position: absolute;
    top: 100%;
    left: 21%;
    background-color: #1b2c33;
}


@media only screen and (min-width: 320px) and (max-width: 480px){

    .header h1{
        font-size: 1.99rem;
    }

    .message .about-us ul li{
        font-size: 15px;
    }

    .value .about-us p{
        font-size: 15px;
    }
}

@media only screen and  (min-width: 481px) and (max-width: 576px){
     .header h1{
        font-size: 1.99rem;
    }
}

@media only screen and  (min-width: 577px) and (max-width: 767px){
    .header h1{
        font-size: 1.99rem;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px){
    .about-us .header h1::after {
    content: "";
    width: 100px;
    height: 5px;
    position: absolute;
    top: 100%;
    left: 54%;
    background-color: #1b2c33;
}

.vision .header h1::after {
    content: "";
    width: 100px;
    height: 5px;
    position: absolute;
    top: 100%;
    left: 32%;
    background-color: #1b2c33;
}

.message .header h1::after {
    content: "";
    width: 100px;
    height: 5px;
    position: absolute;
    top: 100%;
    left: 53%;
    background-color: #1b2c33;
}

.value .header h1::after {
    content: "";
    width: 100px;
    height: 5px;
    position: absolute;
    top: 100%;
    left: 35%;
    background-color: #1b2c33;
}
}

@media only screen and (min-width: 992px){
     .about-us .header h1::after {
    content: "";
    width: 100px;
    height: 5px;
    position: absolute;
    top: 100%;
    left: 54%;
    background-color: #1b2c33;
}

.vision .header h1::after {
    content: "";
    width: 100px;
    height: 5px;
    position: absolute;
    top: 100%;
    left: 33%;
    background-color: #1b2c33;
}

.message .header h1::after {
    content: "";
    width: 100px;
    height: 5px;
    position: absolute;
    top: 100%;
    left: 53%;
    background-color: #1b2c33;
}

.value .header h1::after {
    content: "";
    width: 100px;
    height: 5px;
    position: absolute;
    top: 100%;
    left: 35%;
    background-color: #1b2c33;
}
}
/* End Head */
/* Start Vision */



.mission{
    background-image: url('../Img/vision-2.png');
    background-size: contain;
    background-repeat: no-repeat;
    height: 600px;
    width: 100%;
    margin-top: 60px;
}

@media (min-width: 320px) and (max-width: 480px){
    .mission{
        height: 160px;
    }
}

@media (min-width: 481px) and (max-width: 576px){
    .mission{
        height: 200px;
    }
}

@media (min-width: 577px) and (max-width: 767px){
    .mission{
        height: 300px;
    }
}

@media (min-width: 768px) and (max-width: 991px){
    .mission{
        height: 300px;
    }
}

@media (min-width: 992px) and (max-width: 1024px){
    .mission{
        height: 350px;
    }
}
/* End Vision */

/* Start Message */


.message ul{
    padding-left: 7px;
}
.message ul li{
    font-size: 20px;
    color: #afafaf;
    line-height: 1.9;
}

/* End Message */

/* Start Values */
.values{
    background-image: url('../Img/value-1.png');
    background-size: contain;
    background-repeat: no-repeat;
    height: 600px;
    width: 100%;
}

@media (min-width: 320px) and (max-width: 480px){
    .values{
        height: 160px;
    }
}

@media (min-width: 481px) and (max-width: 576px){
    .values{
        height: 200px;
    }
}

@media (min-width: 577px) and (max-width: 767px){
    .values{
        height: 300px;
    }
}

@media (min-width: 768px) and (max-width: 991px){
    .values{
        height: 300px;
    }
}

@media (min-width: 992px) and (max-width: 1024px){
    .values{
        height: 350px;
    }
}
.value{
    margin-bottom: 40px;
}


.value p{
    font-size: 25px;
}

/* End Values */