@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css');


:root {
    --orange: #F58216;
    --white: #ffffff;
}

.history {
    background-color: var(--orange);
    padding: 3em;
}

.history p {
    font-family: sans-serif;
    font-size: 20px;
    color: var(--white);
}

.history .content-right {
    display: flex;
    align-items: end;
    width: 30%;
}

.history .content-left {
    width: 30%;
}

#iphone {
    padding: 0 4em 0 4em;
    width: 40%;
}

#iphone img {
    height: 100%;
    -moz-object-fit: cover;
    -webkit-object-fit: cover;
    -ms-object-fit: cover;
    object-fit: cover;
    -moz-object-position: center;
    -webkit-object-position: center;
    -ms-object-position: center;
    object-position: center;
    width: 100%;
}

@media screen and (max-width: 1000px) {
    /* #iphone{border: 1px solid green;} */
}



/**css for our product**/
.features .products {
    -ms-flex: 1;
    flex: 1;
    margin-right: 1em;
}



/**css for our footer**/
#footer {
    background-color: var(--orange);
}

#footer .contacts {
    color: var(--white);
    padding: 4em 4em 0 4em;
}

#footer .contacts h1 {
    color: var(--white);
    padding: 12px 0 12px 0;
}

#contact-details .content {
    margin-top: 15px;
}

#contact-details .content .value {
    margin-left: 15px;
}

#contact-details img {
    height: 2em;
}

#footer .mail-icon img{height: 23px; width: 33px;}


#merolagani {
    background-color: #1193a9;
}

#merolagani .asterisk-logo img {
    width: 13em;
    padding: 0 0 4em 0;
}

#merolagani .image-content img {
    width: 35em;
    margin-left: 8em;
}

#merolagani p {
    color: var(--white);
    text-align: justify;
    font-size: 18px;
}


@media screen and (max-width: 1200px) {
    #merolagani .image-content img {
        width: 50%;
        display: block;
        margin: 0 auto 2em auto;
    }
    .history p{ font-size: 18px;}
    #special p{font-size: 12px;}
}


@media screen and (max-width: 940px) {
    .meroschool-image img{
        width: 30%;
        display: block;
        margin: 2em auto 0 auto;
    }
}


#special p{
    text-align: justify;
    font-size: 22px;
}


@media screen and (max-width: 600px) {
    body {
        margin: 0;
        padding: 0;
      }
    .history p, .meroschool-image{ font-size: 15px;}
    .history{border: 1px solid black;}
    #footer-image img{display: none;}
    #iphone img{display: none;}
    #footer .footer-logo img{width: 95%;}
    #contact-details img { height: 1em;}
    .location-icon img{display: none;}
    #footer .mail-icon img{height: 12px; width: 13px;}
}