@media(max-width:1200px) {
    html {
        font-size: 55%;
    }
}

/* -------media for 991px------- */
@media(max-width:991px) {

    .header-1,
    .header-2 {
        padding: 2rem;
    }

    .header-2 #menu-bar {
        display: initial;
    }

    .header-2 .navbar {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        padding: 1rem 2rem;
        display: none;
    }

    .header-2 .navbar a {
        font-size: 1.2rem;
        display: block;
        padding: 1rem;
        margin: 1rem 0;
        border: .1rem solid #fafafa;
        border-left: .5rem solid var(--green);
    }

    section {
        padding: 2rem;
    }

    .box-container {
        grid-template-columns: .7fr 2fr;
    }

    .box-container .left-col .box a {
        justify-content: space-between;
    }
    section{
        padding: 2rem;
    }
    .box-container{
        grid-template-columns: .7fr 2fr;
    }
    .box-container .left-col .box a{
        justify-content: space-between;
    }
    .box-container .right-col{
        margin-top: 2rem;
    }

    .about .box-container .right-col .box,
    .about .box-container .right-col .heading-2,
    .service .box-container .box {
        text-align: center;
    }
    .blog .box-container {
        grid-template-columns: 2.5fr 1fr;
        gap: 1.5rem;
    }

}

/* -------media for 768px------- */

@media(max-width:768px){
    .header-1 .search-box-container{
        width: 30rem;
    }
    .box-container{
        grid-template-columns: 1fr;
        gap: 0;
    }
    .box-container .right-col{
        margin-top: 2rem;
    }
    .blog .box-container{
        grid-template-columns: 1fr;
    }
    .contact .box-container .left {
        flex-basis: 100%;
        padding-bottom: 3rem;
    }

    .contact .box-container .right {
        flex-basis: 100%;
    }
}

/* -------media for 768px------- */

@media(max-width:450px){
    html{
        font-size: 50%;
    }
    .header-1{
        flex-flow: column;
    }
    .header-1 .search-box-container{
        width: 100%;
        margin-top: 2rem;
    }
    .brands .owl-carousel .item img {
        width: 100%;
        height: 100%;
        padding: 1.5rem;
    }

    .footer .box-container .box .icons a {
        font-size: 1.5rem;
    }

    .cradit,
    .cradit span {
        font-size: 1rem;
    }

    .footer .box-container .box iframe {
        width: 250px;
        height: 200px;
    }
    tr td {
        font-size: 1.0rem;
    }
    .contact form .inputBox input{
        width: 100%;
    }
}