/*------------ media query starts -----------------*/

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


    .navbar .navbar-brand{
        /* font-size: 1.2rem; */
    }
    .navbar .navbar-nav .nav-item{
        margin: 0.2em 0.5em;
    }
    
    .navbar .dropdown-mega h5 {
        padding-bottom: 0.4em;
        border-bottom: 1px solid rgba(0, 0, 0, 0.125);
        margin: 0;
        color: var(--font4);
    }
    .navbar .dropdown-mega .dropdown-menu {
        width: 100%;
    }
    .navbar .list-group-item {
        font-size: 0.8rem;
        color: var(--text-third-color);
        border: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.125);
        padding: 0.6em 0;
        border-radius: 0;
    
    }
    .dropdown-menu .dropdown-item {
        font-size: 1.2rem;
    }
    nav {
        background-color: var(--bg5);
        border: none;
    }

    nav#Nav {
        background-color: var(--bg5);
        border: none;
    }

    #menu {
        font-size: 1rem;
    }

    .dropdown-menu .dropdown-item {
        padding-top: 0.2em;
    }

    #head #banner {
        /* width: 100vw; */
        min-height: 48vh;
        background-image: url('assets/img/banner_image_mb.png');
        /*background-image:linear-gradient(black,black); */
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
        background-color: transparent;
        /* background-attachment: fixed; */
        padding-top: 2em;
    }

    #head #banner #text {
        padding: 1em 1em 0 1em !important;
    }

    #head #banner #text h1 {
        font-size: 1.6rem;
    }

    #head #banner #text p {
        font-size: 1rem;
    }

    #head #banner #text .satisfy {
        font-size: 1rem;
        margin-bottom: 0;
        padding-top: 0.2em;
    }

    #head #banner #text .satisfy svg {
        height: 0.8em;
        width: 1em;
    }

    #header-client {
        /*padding-top:1em;*/
    }

    #header-client #text h3 {
        font-size: 1.4rem;
    }

    #header-client #text p {
        font-size: 1rem;
    }

    #header-client {
        /* width: 100vw; */
        /* height: 12vh; */
        background-image: linear-gradient(#000000, #414141);
        /*padding-left: 10px;*/
        /*padding-right: 10px;*/
        padding: 2px 10px;
        align-self: center;
    }

    #header-client #clients {
        padding-top: 2em;
        padding-bottom: 2em;
    }

    #header-client #text {
        text-align: center;
    }

    #header-client #clients #headerCarousel1 svg {
        width: 3em !important;
        height: 1.1em !important;
    }

    #headerCarousel2 {
        display: block;
        padding-left: 3em;
        padding-right: 3em;
        padding-top: 1em;
    }

    #headerCarousel2 .owl-item {
        text-align: center;
        padding-top: 0.2%;
    }

    #header-client #clients #headerCarousel2 svg {
        width: 3em !important;
        height: 1em !important;
    }

    #head #banner #text button {
        font-size: 0.6rem;
    }

    #head #banner button {
        width: 60%;
        background-color: var(--bg4);
        color: var(--font1);
        padding: 1.1em 1.1em;
        border: none;
        border-radius: 2px;
        letter-spacing: 1px;
        transition: all 0.5s;
    }

    #head #banner button:hover {
        /* background-color: transparent; */
        /* color: var(--bg4); */
        padding: 1.1em 1.1em;
        border: none;
        border-radius: 2px;
        letter-spacing: 3px;
    }

    #stats #banner {
        /* width: 80%; */
        height: 50%;
        background-image: url('assets/img/map.png');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 96% 55%;

    }

    #stats #banner #img1 {
        width: 60%;
        height: 50%;
        padding-top: 60%;
    }

    #stats #banner #img2 {
        width: 68%;
        height: 50%;
        padding-top: 60%;
    }

    #stats #banner #img3 {
        width: 78%;
        height: 50%;
        padding-top: 60%;
    }

    #stats #banner .subText {
        font-size: 15px;
    }

    #stats .head {
        font-size: 1.2rem;
        padding: 0.6em 0.6em;
    }

    #stats .counter-item .counter {
        font-size: 1.8rem;
    }

    #welcome .head {
        font-size: 1.2rem;
        padding: 0.6em 0.6em;
    }

    #welcome .row {
        padding: 2px 5px;
    }

    #welcome .text-box {
        padding: 0.6em;
        text-align: left;
    }

    #welcome .text-box h4 {
        font-size: 1em;
        font-weight: bold;
        margin-bottom: 0px;
    }

    #welcome .text-box p {
        font-size: 0.8rem;
        padding-top: 0.6em;
    }

    #welcome .border-box {

        height: 40vh;
        width: 90vw;
        /* border: 1px solid black; */
        padding: 0.5rem;
        position: relative;
        /* overflow: hidden; */
    }

    #welcome .border-box:hover .limit-box .image-box {
        transform: scale(1, 1);
        overflow: hidden;
    }

    #welcome .border-box::before {
        content: "";
        width: 20%;
        height: 20%;
        top: 0;
        right: 0;
        position: absolute;
        transition: all 0.6s;
        box-sizing: border-box;
        border-top: 2px solid var(--font4);
        border-right: 2px solid var(--font4);
    }

    #welcome .border-box::after {
        content: "";
        width: 20%;
        height: 20%;
        bottom: 0;
        left: 0;
        position: absolute;
        transition: all 0.6s;
        box-sizing: border-box;
        border-bottom: 2px solid var(--font4);
        border-left: 2px solid var(--font4);
    }

    #welcome .border-box:hover:before,
    #welcome .border-box:hover:after {
        width: 20%;
        height: 20%;
        border-color: var(--font4);
    }

    #working .head {
        font-size: 1.2rem;
        padding: 0.6em 0.6em;
    }

    #working #banner #text {
        padding: 2px 5px;
        margin-top: 0.5em;
        text-align: left;
    }

    #working #banner #text h1 {
        font-size: 1rem;
    }

    #working #banner #text p {
        font-size: 0.8rem;
        margin-bottom: 0;
    }

    #working #banner #text button {
        font-size: 0.6rem;
    }

    #working #banner {
        /* width: 100vw; */
        min-height: 70vh;
        /* background-image:url('assets/img/airless.png'); */
        background-image: linear-gradient(black, black);
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
        background-color: transparent;
        padding: 1.1em 0.6em;
        margin-top: 0;

    }

    #working #banner .small-image {
        /* width: 80%; */
        min-height: 40vh;
        background-image: url('assets/img/airless.png');
        background-repeat: no-repeat;
        background-position: right center;
        background-size: cover;
        display: block;
    }

    #working #banner2 {
        /* width: 100vw; */
        min-height: 70vh;
        /* background-image:url('assets/img/workstop.png'); */
        background-image: linear-gradient(black, black);
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
        background-color: transparent;
        padding: 1.1em 0.6em;
        margin-top: 1em;

    }

    #working #banner2 .small-image {
        /* width: 80%; */
        min-height: 40vh;
        background-image: url('assets/img/workstop.png');
        background-repeat: no-repeat;
        background-position: left center;
        background-size: cover;
        display: block;
    }

    #working .separator {
        color: var(--font8);
        margin: 1em 1em;
        /* border: 1px solid var(--font8); */
    }

    #working #banner2 #text {
        padding: 2px 5px;
        margin-top: 0.5em;
        text-align: left;
    }

    #working #banner2 #text h1 {
        font-size: 1rem;
    }

    #working #banner2 #text p {
        font-size: 0.8rem;
        margin-bottom: 0;
    }

    #working #banner2 #text button {
        font-size: 0.6rem;
    }

    #working #banner button {
        width: 60%;
        background-color: var(--bg4);
        color: var(--font1);
        padding: 1.1em 1.1em;
        border: none;
        border-radius: 2px;
        letter-spacing: 1px;
        transition: all 0.5s;
    }

    #working #banner button:hover {
        background-color: transparent;
        color: var(--bg4);
        padding: 1.1em 1.1em;
        border: 1px solid var(--font4);
        border-radius: 2px;
        letter-spacing: 4px;
    }

    #working #banner2 button {
        width: 60%;
        background-color: var(--bg4);
        color: var(--font1);
        padding: 1.1em 1.1em;
        border: none;
        border-radius: 2px;
        letter-spacing: 1px;
        transition: all 0.5s;
    }

    #working #banner2 button:hover {
        background-color: transparent;
        color: var(--bg4);
        padding: 1.1em 1.1em;
        border: 1px solid var(--font4);
        border-radius: 2px;
        letter-spacing: 4px;
    }

    #products .head {
        font-size: 1.2rem;
        padding: 0.6em 0.6em;
    }

    #products #border-box #text h1 {
        font-size: 1rem;
    }

    #products #border-box #text h2 {
        font-size: 1rem;
    }

    #products #border-box #text p {
        font-size: 0.8rem;
    }

    #products #border-box1 #text h1 {
        font-size: 0.8rem;
    }

    #products #border-box1 #text h2 {
        font-size: 0.8rem;
    }

    #products #border-box1 #text p {
        font-size: 0.6rem;
    }

    #products #border-box {
        /* border: 4px solid var(--font10); */
        position: relative;
        padding: 1em;
        margin: 1em;
    }

    #products #border-box1 {
        /* border: 4px solid var(--font10); */
        position: relative;
        padding: 1em;
        margin: 1em;
    }

    #products #banner #text {
        padding: 5px;
        /* margin-top: 5rem; */
    }

    #products #border-box::before {
        content: "";
        width: 25%;
        height: 20%;
        top: 0;
        right: 0;
        position: absolute;
        transition: all 0.6s;
        box-sizing: border-box;
        border-top: 2px solid var(--font4);
        border-right: 2px solid var(--font4);
    }

    #products #border-box::after {
        content: "";
        width: 25%;
        height: 20%;
        bottom: 0;
        left: 0;
        position: absolute;
        transition: all 0.6s;
        box-sizing: border-box;
        border-bottom: 2px solid var(--font4);
        border-left: 2px solid var(--font4);
    }

    #products #border-box:hover:before,
    #products #border-box:hover:after {
        width: 25%;
        height: 20%;
    }

    #products #banner {
        /* width: 100vw; */
        /* height: 40vh; */
        /* background-image:url('assets/img/services.png'); */
        background-image: linear-gradient(black, black);
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
        background-color: transparent;
        padding: 0.6em;
    }

    #products #banner .small-image2 {
        /* width: 80%; */
        min-height: 30vh;
        background-image: url('assets/img/banners_image.png');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        display: block;
    }

    #products #see-more-banner {
        /* width: 100vw; */
        min-height: 30vh;
        background-image: url('assets/img/see_more.png');
        background-image: linear-gradient(black, black);
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
        background-color: transparent;
        /* padding: 10px; */
    }

    #products #see-more-banner #text {
        /* align-items: center; */
        min-height: 6em;
        padding-top: 2em;
    }

    #products #see-more-banner #text button {
        font-size: 0.6rem;
    }

    #products #see-more-banner button {
        background-color: transparent;
        color: var(--font8);
        padding: 0.8em 1.4em;
        border: 2px solid var(--font8);
        border-radius: 2px;
        letter-spacing: 4px;
        transition: all 0.5s;
        /* cursor: pointer; */
    }

    #products #see-more-banner button:hover {
        background-color: var(--bg4);
        color: var(--font1);
        padding: 0.8em 1.4em;
        border: none;
        border-radius: 2px;
        letter-spacing: 5px;
        transition: all 0.5s;
    }

    #products #border-box1 {
        display: none;
    }

    #products #smallDevice {
        display: block;
    }

    #products #smallDevice #text button {
        font-size: 0.6rem;
    }

    #products #smallDevice button {
        width: 80%;
        padding: 1em;
    }

    #products #smallDevice button {
        background-color: var(--bg4);
        color: var(--font1);
        padding: 1.4em 4em;
        border: none;
        border-radius: 2px;
        letter-spacing: 4px;
        transition: all 0.5s;
    }

    /* #products #smallDevice button:hover{
        background-color: transparent;
        color: var(--bg4);
        padding: 20px 60px;
        border: 1px solid var(--font4);
        border-radius: 2px;
        letter-spacing: 5px;
    } */
    #morals .head {
        font-size: 1.2rem;
        padding: 1.2em 0.6em;
    }

    #morals #banner {
        /* width: 100vw; */
        height: auto;
        background-image: linear-gradient(black, black);
        padding: 0.5em;
    }

    #morals #banner #moral {
        width: 6em;
        height: 7.4em;
        border: 1px solid var(--font8);
        padding: 3px;
        border-radius: 4px;
        transition: 0.1s ease-in-out;
    }

    #moral h1 {
        padding-top: 1em;
        font-size: 0.6rem;

    }

    #moral svg {
        width: 40px;
        height: 30px;
    }

    #moral path {
        fill: var(--font4);
    }

    #moral {
        background-color: var(--bg1);
    }

    #moral h1 {
        color: var(--font2);
    }

    #moral:hover path {
        fill: var(--font4);
    }

    #moral:hover {
        background-color: var(--bg1);
    }

    #moral:hover h1 {
        color: var(--font2);
    }

    #morals #banner .head {
        font-size: 1.2rem;
    }

    #clients .head {
        font-size: 1.2rem;
        padding: 1.2em 0.6em;
    }

    #clients #client-logo img {
        width: 4.4em;
        height: 3em;
    }

    #blogs #banner .head {
        font-size: 1.2em;
        padding: 1.2em 0.6em;
    }

    #blogs #blogCarousel .item {
        /* margin: 20px; */
        max-width: 14em;
        height: auto;
        margin: auto;
    }

    #blogCarousel img {
        width: 14em;
        margin: auto;
    }

    #blogCarousel .item #btn {
        padding-top: 0.6em;
    }
    #blogCarousel .item #btn a{
        width: 100%;
    }

    #blogCarousel .item button {
        font-size: 0.6rem;
    }

    #blogCarousel .item button {
        max-width: 100%;
        background-color: var(--bg4);
        color: var(--font1);
        padding: 1.1em 1.1em;
        border: 1px solid var(--bg4);
        border-radius: 2px;
        letter-spacing: 3px;
        transition: all 0.5s;
        align-self: center;
    }

    #blogCarousel .item button:hover {
        background-color: var(--bg4);
        color: var(--font1);
        padding: 1.1em 1.1em;
        border: 1px solid var(--bg4);
        border-radius: 2px;
        letter-spacing: 3px;
    }

    #blogs #blogCarousel .text {
        text-align: center;
    }

    #blogCarousel .item .text h1 {
        font-size: 1rem;
    }

    #blogCarousel .item .text p {
        font-size: 0.8rem;
    }

    #reviews #banner .head {
        font-size: 1.2rem;
        padding: 1.2em 0.6em;
    }

    #reviews #reviewCarousel {
        height: auto;
        margin: 0.6em;
        padding: 5px 30px;
    }

    #reviews #reviewCarousel .text p {
        font-size: 0.8rem;
    }

    #reviews #reviewCarousel .item {
        /* margin: 20px; */
        max-width: 15em;
        margin: auto;
        height: auto;
    }

    #reviews #reviewCarousel .text {
        height: auto;
        text-align: center;
        color: var(--font8);
        font-size: 1.2rem !important;
    }

    #reviewCarousel .img {
        max-width: 8em;
        margin: auto;
        position: relative;
    }

    #newsletter #banner {
        padding-top: 0.6em;
    }

    #newsletter #banner #text .searchBox {
        padding-right: 0rem;
        padding-top: 1em;
        padding-bottom: 2em;
        font-size: 12px;
    }

    #newsletter #banner #text {
        padding: 0.5em 0.5em;
    }

    #newsletter #banner #text h1 {
        font-size: 1.2rem;
        font-weight: bold;
        padding-top: 5px;
    }

    #newsletter #banner #text p {
        font-size: 0.8rem;
        margin-bottom: 0;
    }

    #newsletter #banner #text #sent {
        font-size: 0.8rem;
    }

    /*#newsletter #banner span#success svg{*/
    /*width:12px;*/
    /*height:12px;*/
    /*}*/

    #newsletter .searchBox .search-field {
        width: 60%;
        padding: 0.6em 0 0.6em 0.6em;
        border: none;
        border-radius: 3px 0 0 3px;
        outline: none;
    }

    #newsletter #emailSubmit {
        padding-top: 1.2em;
    }

    #newsletter #emailSubmit button {
        font-size: 0.8rem;
    }

    #newsletter #emailSubmit button {
        max-width: 60%;
        background-color: var(--bg4);
        color: var(--font1);
        padding: 0.4em 1.6em;
        border: none;
        border-radius: 0 3px 3px 0;
        letter-spacing: 1px;
        transition: all 0.5s;
        /* cursor: pointer; */
    }

    #newsletter #emailSubmit button:hover {
        background-color: var(--bg4);
        color: var(--font1);
        padding: 0.4em 1.6em;
        border: none;
        border-radius: 2px;
        letter-spacing: 1px;
        transition: all 0.5s;
    }

    /*#newsletter .searchBox  .searchButton {*/
    /*background: transparent;*/
    /*border: none;*/
    /*outline: none;*/
    /*margin-left: -40px;*/
    /*padding-right: 20px;*/
    /*}*/

    /*#newsletter .searchBox  .searchButton svg {*/
    /*width: 17px;*/
    /*height: 17px;*/
    /*object-fit: cover;*/
    /*margin-right: 20px;*/
    /*}*/
    #newsletter #banner #letterIcon {
        display: none;
    }

    /* #footer #banner {
    
        height: auto;
        background-color: var(--bg2);
        background-image: url('assets/img/watermark.png');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 21em 22em;
       
        padding: 1rem;
    }

    #footer #banner .sub-col .logo {
        width: 14em;
        height: 4em;
    }

    #footer #banner .sub-col {
        text-align: center
    }

    #footer .sub-col1,
    #footer .sub-col2,
    #footer .sub-col3,
    #footer .sub-col4 {
        text-align: center;
    }

    #footer #banner .sub-col .logo {
        width: 60%;
        height: auto;
        margin: auto;
    }

    #footer .sub-col1 h1,
    #footer .sub-col2 h1,
    #footer .sub-col3 h1,
    #footer .sub-col4 h1 {
        font-size: 1.6rem;
    }

    #footer .sub-col1 p,
    #footer .sub-col2 p,
    #footer .sub-col3 p,
    #footer .sub-col4 p {
        font-size: 1rem;
    }

    #footer .sub-col1,
    #footer .sub-col2 {
        display: none;
    }

    #footer #copyright {

        background-color: transparent;
        color: var(--font1);
        padding-top: 2em;
        font-size: 0.8rem;

    }

    #footer #copyright hr {
        color: var(--font8);
   
    }

    .scroll {
        font-size: 2.5rem;
        color: var(--font4);
        padding: 1em 0 0 0;
   
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #footer #copyright .left {
        text-align: center;
    }

    #footer #copyright .right {
        text-align: center;

    } */


    /*----footer 1 ----*/
#footer1 #banner {
        /* width: 100vw; */
        height: auto;
        background-color: var(--bg2);
        background-image: url('assets/img/watermark.png');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 21em 22em;
        /*background-origin: content-box;*/
        padding: 1rem;
}
#footer1 #copyright {
    /*background-image:linear-gradient(var(--bg2),var(--bg2));*/
    background-color: transparent;
    color: var(--font1);
    padding-top: 1em;
    font-size: 1rem;
}
#footer1 .logo {
    display: flex;
    justify-content: center;
    padding-top: 6em;
}

#footer1 .sub-col1 h1,
#footer1 .sub-col2 h1
 {
    font-size: 1.2rem;
    padding-bottom: 0.4em;
    text-align: center;
}
#footer1 .sub-col1 h4 a,
#footer1 .sub-col2 h4 a
 {
    font-size: 1rem;
    padding-bottom: 0.4em;
    color: var(--font4);
}

#footer1 .sub-col1 p,
#footer1 .sub-col2 p {
    font-size: 0.6rem;
    margin-bottom: 0.2rem;
}
#footer1 .sub-col1 p a:hover,
#footer1 .sub-col2 p a:hover
 {
    font-size: 0.6rem;
    color: var(--font1);
}

#footer1 .media {
    display: flex;
    justify-content: center;
}

#footer1 .media svg {
    margin-left: 0.8em;
    margin-top: 1em;
    padding: 2px;
}

#footer1 .media1 path {
    transition: 0.1s ease-in-out;
}

#footer1 .media1:hover path {
    fill: var(--font4);
}

#footer1 .media2:hover path {
    fill: var(--font4);
}

#footer1 .media3:hover path {
    fill: var(--font4);
}

#footer1 .media4:hover path {
    fill: var(--font4);
}

#footer1 #copyright .left {
    float: left;
}
#footer1 #copyright {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 0.7rem;
}

#footer1 #copyright .right {
    float: right;
}


#footer1 #copyright hr {
    color: var(--font8);
    padding: 0 1em;
}
.scroll {
    font-size: 2.5rem;
    color: var(--font4);
    /* padding-top: 1em; */
    /* padding-right: 4em; */
    text-align: right;
    margin: auto;

}

#scroll-top {
    cursor: pointer;
}
.whatsApp{
    position: fixed;
    bottom: 2em;
    right: 1em;
}

    /* --about section ---*/
    #head #banner2 {
        /* width: 100vw; */
        min-height: 50vh;
        background-image: url('assets/img/banner_image_mb.png');
        /* background-image:linear-gradient(black,black); */
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
        background-color: transparent;
        /* background-attachment: fixed; */
        padding-top: 5em;
    }

    #head #banner2 #text {
        padding-bottom: 2em;
    }

    #head #banner2 #text h1 {
        font-size: 1.2rem;
    }

    #head #banner2 #text p {
        font-size: 0.8rem;
    }

    #about1 .row {
        padding: 2px 5px;
    }

    #about2 .row {
        padding: 2px 5px;
    }

    #about1 .head {
        font-size: 1.2rem;
    }

    #about1 .sub-head {
        font-size: 1rem;
        padding: 0 1em;
        line-height: 110%;
        margin-bottom: 0;
    }

    #about1 .text-box h4 {
        font-size: 1rem;
    }

    #about1 .text-box p {
        font-size: 0.8rem;
    }

    #about2 .text-box h4 {
        font-size: 1rem;
    }

    #about2 .text-box p {
        font-size: 0.8rem;
    }

    #about1 .text-box {
        padding: 1em;
    }

    #about2 .text-box {
        padding: 1em;
    }

    #about1 .border-box {
        height: 40vh;
        width: 90vw;
        /* border: 1px solid black; */
        padding: 0.5rem;
        position: relative;
        /* overflow: hidden; */
    }

    #about2 .border-box {
        height: 40vh;
        width: 90vw;
        /* border: 1px solid black; */
        padding: 0.5rem;
        position: relative;
        /* overflow: hidden; */
    }

    #achievements {
        display: none;
    }

    #achievementsMobile {
        display: block;
    }

    #achievementsMobile #banner .head {
        font-size: 1.2rem;
        padding: 1.2em 0.6em;
    }

    #achievementsMobile #banner {
        min-height: 80vh;
        background-image: linear-gradient(var(--bg2), var(--bg2));
        /* padding: 10px; */
        transition: all 1s ease-in-out;
        padding-left: 1em;
        padding-right: 1em;
    }

    /*#achievementsMobile #banner .head{*/
    /*    font-size: 1.2rem;*/
    /*}*/
    #achievementsMobile #banner #achievement {
        /* width: 12%; */
        min-height: 20vh;
        /* border-left: 1px solid var(--font8); */
        transition: all 1s ease-in-out;
        /* z-index: 11; */
    }

    #achievementsMobile #banner #achievement .subHead {
        padding-left: 4em;
        padding-right: 2em;
    }

    /*  #achievementsMobile #banner #achievement:hover p{
        display: block;
    }
    #achievementsMobile #banner #achievement:hover .inside_odd {
        margin-bottom: auto;
    }
    #achievementsMobile #banner #achievement:hover .inside_even {
        margin-top: auto;
    } */

    #achievementsMobile #achievement .inside_odd .dotOdd {
        position: absolute;
        width: 0.6em;
        height: 0.6em;
        border-radius: 60%;
        background-color: var(--bg4);
        top: 0;
        left: -5px;
    }

    #achievementsMobile #achievement .inside_odd {
        margin-top: auto;
        margin-bottom: auto;
        border-left: 1px solid var(--font8);
        transition: all 1s ease-in-out;
        position: relative;
    }

    #achievementsMobile #achievement .inside_odd h1 {
        color: var(--font1);
        transition: color 1s;
    }

    #achievementsMobile #achievement:hover .inside_odd h1 {
        color: var(--font4);
    }

    #achievementsMobile #achievement .inside_even .dotEven {
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: var(--bg4);
        top: 0;
        right: -5px;
    }

    #achievementsMobile #achievement .inside_even {
        margin-top: auto;
        margin-bottom: auto;
        border-left: none;
        border-right: 1px solid var(--font8);
        transition: all 1s ease-in-out;
        position: relative;
    }


    #achievement h1 {
        min-height: 2em;
        font-size: 4rem;
        font-weight: bold;
    }

    #achievement h2 {
        min-height: 2em;
        font-size: 2rem;
        padding-left: 2px;
    }

    #achievement p {
        font-size: 0.8rem;
        padding-left: 2px;
        color: var(--font8);
    }

    #achievement .inside_even h1 {
        color: var(--font1);
        transition: color 1s;
    }

    #achievement:hover .inside_even h1 {
        color: var(--font4);
    }

    /* #achievement:hover .inside_even h2{
        color: var(--font4);
        transition: color 2s;
    } */
    #achievement .inside_odd hr {
        /* border: 10px solid var(--font4); */
        opacity: 1 !important;
        height: 1em;
        background-color: var(--font4);
    }

    #achievement .inside_even hr {
        /* border: 10px solid var(--bg1); */
        opacity: 1 !important;
        height: 1rem;
        background-color: var(--bg1);
    }


    /*---product1 section-----  */
    #head #banner3 {
        /* width: 100vw; */
        min-height: 50vh;
        background-image: url('assets/img/banner_image_mb.png');
        /* background-image:linear-gradient(black,black); */
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
        background-color: transparent;
        /* background-attachment: fixed; */
        padding-top: 5em;
    }

    #head #banner3 #text {
        padding-bottom: 2em;
    }

    #head #banner3 #text h1 {
        font-size: 1.2rem;
    }

    #head #banner3 #text p {
        font-size: 1rem;
    }

    #product1 .border-box {

        height: 40vh;
        width: 90vw;
        /* border: 1px solid black; */
        padding: 0.5em;
        position: relative;
        overflow: hidden
    }

    #product1 .row {
        padding: 2px 5px;
    }

    #product1 .text-box {
        text-align: left;
        padding: 1em;
    }

    #product1 .text-box h2 {
        font-size: 1.2rem;
    }

    #product1 .text-box h4 {
        font-size: 1rem;
    }

    #product1 .text-box p {
        font-size: 0.8rem;
    }

    #product1 .text-box ul {
        font-size: 0.8rem;
    }

    ::marker {
        color: var(--font4);
        font-weight: bold;
        font-size: 1rem;
    }

    #product1 #charts h1 {
        font-size: 1.2rem;
    }

    #charts #table2 {
        display: block;
    }

    #charts #table3 {
        display: none;
    }

    /*-----contact section-------*/

    #nav2 {
        /* height: 10vh; */
        /* width: 100vw; */
        padding: 0px;
        /* background-color: black; */
        background-image: none;
    }

    #contactUs #text .head {
        font-size: 1.8rem;
        padding-top: 5px;
    }

    #contactUs #text label {
        font-size: 1rem;
    }

    #contactUs #text input {
        font-size: 0.8rem;
    }

    .form-control-1 {
        max-width: 80%;
        border-radius: 0;
        color: var(--font2);
        padding-left: 0;
        background-color: transparent;
    }

    .form-control-2 {
        max-width: 80%;
        border-radius: 0;
        color: var(--font2);
        padding-left: 0;
        background-color: transparent;
    }

    #contactUs #banner #form button {
        font-size: 0.8rem;
    }

    #contactUs #banner {
        background-image: url('assets/img/graphic.png');
        background-size: 90% 50%;
        background-position: right bottom;
        background-repeat: no-repeat;
        /* background-size: cover; */
    }

    #contactUs #banner #form button {
        width: 60%;
        background-color: var(--bg4);
        color: var(--font1);
        padding: 1.1em 1.2em;
        border: none;
        border-radius: 2px;
        letter-spacing: 3px;
        transition: all 0.5s;
    }

    #contactUs #banner #form button:hover {
        background-color: var(--bg4);
        color: var(--font1);
        padding: 1.1em 1.2em;
        border: none;
        border-radius: 2px;
        letter-spacing: 4px;

    }

    #contactUs #banner #form #submit {
        padding-top: 5px;
    }

    /*---blogOne section starts-----  */
    #head #banner4 {
        /* width: 100vw; */
        min-height: 60vh;
        background-image: url('assets/img/banner_image_mb.png');
        /* background-image:linear-gradient(black,black); */
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
        background-color: transparent;
        /* background-attachment: fixed; */
        padding-top: 6em;
    }
    #blogOne .head {
        font-size: 1.6rem;
        padding: 0.6em 0.6em;
        color: var(--font2);
    }
 
    
    #blogOne .border-box {

        height: 40vh;
        width: 90vw;
        /* border: 1px solid black; */
        padding: 0.5rem;
        position: relative;
        overflow: hidden
    }

    #blogOne .row {
        padding: 2px 5px;
    }

    #blogOne .text-box {
        text-align: left;
        padding: 1rem;
    }
    #blogOne .text-box1 {
        text-align: left;
        padding: 1rem;
    }

    #blogOne .text-box1 h2 {
        font-size: 1.2rem;
    }

    #blogOne .text-box1 h4 {
        font-size: 1rem;
    }

    #blogOne .text-box1 p {
        font-size: 0.8rem;
    }
    #blogOne .text-box h2 {
        font-size: 1.2rem;
    }

    #blogOne .text-box h4 {
        font-size: 1rem;
    }

    #blogOne .text-box p {
        font-size: 0.8rem;
    }

    #blogOne .text-box ul {
        font-size: 0.8rem;
    }

    ::marker {
        color: var(--font4);
        font-weight: bold;
        font-size: 1rem;
    }

    #blogOne #charts h1 {
        font-size: 1.4rem;
    }

    #charts #table2 {
        display: block;
    }

    #charts #table3 {
        display: none;
    }


    /* --blogOne section ends ---*/
   
    /*---------- blogPage starts here -------------*/

#head #banner18 {
    /* width: 100vw; */
    min-height: 40vh;
    background-image: url('assets/img/blog_image.png');
    /* background-image:linear-gradient(black,black); */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-color: transparent;
    /* background-attachment: fixed; */
    padding-top: 6em;
    padding-bottom: 4em;
}

#head #banner18 #text {
    padding-bottom: 0.4em;
}

#head #banner18 #text h1 {
    font-size: 2.1rem;
}

#head #banner18 #text p {
    font-size: 1.3rem;
}


::marker {
    color: var(--font4);
    font-weight: bold;
    font-size: 2rem;
}
#blogSearch{
    padding: 0.5em 0.5em 0 0.5em;
}
#subBlogs{
    /* padding: 0.2em 0.2em; */
    font-size: 0.5rem;
}

#subBlogs .arrow{
    width: 1em;
    height: 1em;
    border-radius: 50%;
    border: 1px solid var(--bg1);
    padding: 0 0.4em;
}
#subBlogs .btn{
    color: var(--font1);
    font-size: 0.8rem;
}

#blog0:hover .fa-angle-right,#blog1:hover .fa-angle-right,#blog2:hover .fa-angle-right,#blog3:hover .fa-angle-right,#blog4:hover .fa-angle-right,#blog5:hover .fa-angle-right{
    color:var(--font1);
   }
#blog0:hover .arrow,#blog1:hover .arrow,#blog2:hover .arrow,#blog3:hover .arrow,#blog4:hover .arrow,#blog5:hover .arrow{
 border: 1px solid var(--bg1);
}
#blog0:hover ,#blog1:hover , #blog2:hover , #blog3:hover , #blog4:hover , #blog5:hover { 
  color: var(--font1);
  cursor: pointer;
}



#blogSearch .form-control {
    display: block;
    width: 60%;
    padding: 0.4rem 1rem ;
    font-size: 1.2rem ;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .25rem ;
      /* border-top-right-radius: 0; */
      /* border-bottom-right-radius: 0; */
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  }
#blogSearch .btn {
    display: block;
    /* width: 60%; */
    padding: 0.8rem 1rem ;
    font-size: 1.2rem ;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-left: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .25rem ;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  }
#blogPage .heading {
    text-align: center;
    padding-top: 3%;
    line-height: 5px;
}
#blogGalleryHead .head{
    font-size: 2.1rem;
    color: var(--font2);
    padding: 0.8rem 0;
}


#blogGallery .gallery {
    margin: 5px;
    /* border: 1px solid #ccc; */
    margin: 1em auto;
    width: 22em;
  }
  
  #blogGallery .gallery img {
    width: 100%;
    height: auto;
  }
  
  #blogGallery .text {
    /* padding: 1em; */
    text-align: center;
  }
  #blogGallery .text h1{
    padding: 0.6em ;
    text-align: left;
    color: var(--font2);
    font-size: 1.2rem;
  }
  #blogGallery .text p{
    padding: 0.6em;
    text-align: left;
    font-size: 0.8rem;

  }
#blogGallery .gallery a{
    width: 100%;
}
#blogGallery .gallery button{
    width: 100%;
    background-color: var(--bg4);
    color: var(--font1);
    padding: 1.2em 3em;
    border: none;
    border-radius: 2px;
    letter-spacing: 4px;
    transition: all 0.5s;
    align-self: center;
}
#blogGallery .gallery button:hover{
    background-color: var(--bg4);
    color: var(--font1);
    padding: 1.2em 3em;
    border: none;
    border-radius: 2px;
    letter-spacing: 4px;
}




/*----------blogPage ends ----------------------*/









}


@media only screen and (min-width:576px) and (max-width:767px) {
    #newsletter #letterIcon {
        display: none;
    }

    #newsletter #letterIcon {
        display: none;
    }

    #head #banner {
        min-height: 20vh;
    }

    #footer #banner .sub-col {
        text-align: center;
    }


    #welcome .border-box {

        height: 40vh;
        width: 60vw;
        /* border: 1px solid black; */
        padding: 1rem;
        position: relative;
        margin: auto;
    }

    #product1 .border-box {

        height: 30vh;
        width: 50vw;
        /* border: 1px solid black; */
        padding: 1rem;
        position: relative;
    }

    #about1 .border-box {

        height: 40vh;
        width: 60vw;
        /* border: 1px solid black; */
        padding: 1rem;
        position: relative;
        margin: auto;
    }

    #about2 .border-box {

        height: 40vh;
        width: 60vw;
        /* border: 1px solid black; */
        padding: 1rem;
        position: relative;
        margin: auto;
    }

    #newsletter #banner #letterIcon {
        display: none;
    }

}

@media only screen and (min-width:768px) and (max-width:992px) {

    nav {
        background-color: var(--bg5);
        border: none;
    }

    nav#nav2 {
        background-color: var(--bg5);
        border: none;
    }

    #menu {
        font-size: 1rem;
    }

    #welcome .border-box {

        height: 60vh;
        width: 60vw;
        /* border: 1px solid black; */
        padding: 1rem;
        position: relative;
        margin: auto;
    }

    #product1 .border-box {

        height: 50vh;
        width: 60vw;
        /* border: 1px solid black; */
        padding: 1rem;
        position: relative;
    }

    #about1 .border-box {

        height: 60vh;
        width: 60vw;
        /* border: 1px solid black; */
        padding: 1rem;
        position: relative;
        margin: auto;
    }

    #about2 .border-box {

        height: 60vh;
        width: 60vw;
        /* border: 1px solid black; */
        padding: 1rem;
        position: relative;
        margin: auto;
    }

    #footer #banner .sub-col {
        text-align: center;
    }

    #contactUs #contactIcon {
        display: none;
    }

    #newsletter #banner #letterIcon {
        display: none;
    }

}

/*   @media only screen and (max-width: 768px) {
        .aos-animate {
      
          -o-transition-property: none !important;
          -moz-transition-property: none !important;
          -ms-transition-property: none !important;
          -webkit-transition-property: none !important;
          transition-property: none !important;
      
          -o-transform: none !important;
          -moz-transform: none !important;
          -ms-transform: none !important;
          -webkit-transform: none !important;
          transform: none !important;
      
          -webkit-animation: none !important;
          -moz-animation: none !important;
          -o-animation: none !important;
          -ms-animation: none !important;
          animation: none !important;
        }
      } */
@media only screen and (min-width: 568px) and (max-width: 1024px) {


    #nav {
        /* height: 10vh; */
        /* width: 100vw; */
        padding: 0px;
        /* background-color: black; */
        background-image: none;
    }

    #nav #menu {
        font-size: 1rem;
    }

    .dropdown-menu .dropdown-item {
        padding-top: 0.2em;
    }

    #head #banner {
        /* width: 100vw; */
        min-height: 50vh;
        background-image: url('assets/img/banner_image_mb.png');
        /*background-image:linear-gradient(black,black); */
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
        background-color: transparent;
        /* background-attachment: fixed; */
        padding-top: 2em;
    }

    #head #banner #text {
        padding: 1em 1em !important;
    }

    #head #banner #text h1 {
        font-size: 2rem;
    }

    #head #banner #text p {
        font-size: 1rem;
    }

    #head #banner #text .satisfy {
        font-size: 1rem;
    }

    #head #banner #text .satisfy svg {
        height: 0.8em;
        width: 1em;
    }

    #header-client #text h3 {
        font-size: 20px;
    }

    #header-client #text p {
        font-size: 14px;
    }

    #header-client {
        /* width: 100vw; */
        /* height: 12vh; */
        background-image: linear-gradient(#000000, #414141);
        /*padding-left: 10px;*/
        /*padding-right: 10px;*/
        padding: 2px 10px;
        align-self: center;
    }

    #header-client #clients {
        padding-top: 1em;
        padding-bottom: 1em;
    }

    #header-client #text {
        padding-top: 2em !important;
        text-align: center;
    }

    #header-client #clients #headerCarousel1 svg {
        width: 4em !important;
        height: 2em !important;
    }

    #headerCarousel2 {
        display: block;
        padding-left: 3rem;
        padding-right: 3rem;
        padding-top: 1rem;
    }

    #headerCarousel2 .owl-item {
        text-align: center;
        padding-top: 0.2%;
    }

    #header-client #clients #headerCarousel2 svg {
        width: 4em !important;
        height: 2em !important;
    }

    #head #banner #text button {
        font-size: 0.8rem;
    }

    #head #banner button {
        max-width: 40%;
        background-color: var(--bg4);
        color: var(--font1);
        padding: 1em 1em;
        border: none;
        border-radius: 2px;
        letter-spacing: 1px;
        transition: all 0.5s;
    }

    #head #banner button:hover {
        /* background-color: transparent; */
        /* color: var(--bg4); */
        padding: 1.5em 1em;
        border: none;
        border-radius: 2px;
        letter-spacing: 1px;
    }

    #stats #banner {
        /* width: 80%; */
        height: 50%;
        background-image: url('assets/img/map.png');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 96% 75%;

    }

    #stats #banner #img1 {
        width: 60%;
        height: 50%;
        padding-top: 60%;
    }

    #stats #banner #img2 {
        width: 68%;
        height: 50%;
        padding-top: 60%;
    }

    #stats #banner #img3 {
        width: 78%;
        height: 50%;
        padding-top: 60%;
    }

    #stats #banner .subText {
        font-size: 1rem;
    }

    #stats .head {
        font-size: 1rem;
        padding: 10px 10px;
    }

    #stats .counter-item .counter {
        font-size: 2rem;
    }

    #welcome .head {
        font-size: 1rem;
        padding: 0.6em 0.6em;
    }

    #welcome .row {
        padding: 2px 5px;
    }

    #welcome .text-box {
        padding: 10px;
        text-align: left;
    }

    #welcome .text-box h4 {
        font-size: 1rem;
        font-weight: bold;
        margin-bottom: 0px;
    }

    #welcome .text-box p {
        font-size: 0.8rem;
    }

    #welcome .border-box {

        height: 60vh;
        width: 50vw;
        /* border: 1px solid black; */
        padding: 0.5em;
        position: relative;
        /* overflow: hidden; */
    }

    #welcome .border-box:hover .limit-box .image-box {
        transform: scale(1, 1);
        overflow: hidden;
    }

    #welcome .border-box::before {
        content: "";
        width: 20%;
        height: 20%;
        top: 0;
        right: 0;
        position: absolute;
        transition: all 0.6s;
        box-sizing: border-box;
        border-top: 2px solid var(--font4);
        border-right: 2px solid var(--font4);
    }

    #welcome .border-box::after {
        content: "";
        width: 20%;
        height: 20%;
        bottom: 0;
        left: 0;
        position: absolute;
        transition: all 0.6s;
        box-sizing: border-box;
        border-bottom: 2px solid var(--font4);
        border-left: 2px solid var(--font4);
    }

    #welcome .border-box:hover:before,
    #welcome .border-box:hover:after {
        width: 20%;
        height: 20%;
        border-color: var(--font4);
    }

    #working .head {
        font-size: 1rem;
        padding: 0.6em 0.6em;
    }

    #working #banner #text {
        padding: 2px 5px;
        margin-top: 0.5rem;
        text-align: left;
    }

    #working #banner #text h1 {
        font-size: 1rem;
    }

    #working #banner #text p {
        font-size: 0.8rem;
    }

    #working #banner #text button {
        font-size: 0.8rem;
    }

    #working #banner {
        /* width: 100vw; */
        min-height: 70vh;
        background-image: url('assets/img/airless.png');
        background-image: linear-gradient(black, black);
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
        background-color: transparent;
        padding: 1em 0.6em;
        margin-top: 0;

    }

    #working #banner .small-image {
        display: none;
    }

    #working #banner #landscapePic {
        min-height: 50vh;
        background-image: url('assets/img/airless.png');
        background-repeat: no-repeat;
        background-position: right center;
        background-size: cover;
        display: block;
    }

    /*#working #banner .small-image{*/
    /* width: 80%; */
    /*    min-height: 50vh;*/
    /*    background-image:url('assets/img/airless.png');*/
    /*    background-repeat: no-repeat;*/
    /*    background-position: center center;*/
    /*    background-size: cover;*/
    /*    display: block;*/
    /*}*/
    #working #banner2 {
        /* width: 100vw; */
        min-height: 70vh;
        /* background-image:url('assets/img/workstop.png'); */
        background-image: linear-gradient(black, black);
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
        background-color: transparent;
        padding: 1em 0.6em;
        margin-top: 1rem;

    }

    #working #banner2 .small-image {
        display: none;
    }

    #working #banner2 #landscapePic {
        min-height: 50vh;
        background-image: url('assets/img/workstop.png');
        background-repeat: no-repeat;
        background-position: left center;
        background-size: cover;
        display: block;
    }

    /*#working #banner2 .small-image{*/
    /* width: 80%; */
    /*    min-height: 50vh;*/
    /*    background-image:url('assets/img/workstop.png');*/
    /*    background-repeat: no-repeat;*/
    /*    background-position: left center;*/
    /*    background-size: cover;*/
    /*    display: block;*/
    /*}*/
    #working .separator {
        color: var(--font8);
        margin: 0 1rem;
        /* border: 1px solid var(--font8); */
    }

    #working #banner2 #text {
        padding: 2px 5px;
        margin-top: 0.5rem;
        text-align: left;
    }

    #working #banner2 #text h1 {
        font-size: 1rem;
    }

    #working #banner2 #text p {
        font-size: 0.8rem;
    }

    #working #banner2 #text button {
        font-size: 0.8rem;
    }

    #working #banner button {
        width: 50%;
        background-color: var(--bg4);
        color: var(--font1);
        padding: 1em 1em;
        border: none;
        border-radius: 2px;
        letter-spacing: 1px;
        transition: all 0.5s;

    }

    #working #banner button:hover {
        width: 50%;
        background-color: var(--bg4);
        color: var(--font1);
        padding: 1em 1em;
        border: none;
        border-radius: 2px;
        letter-spacing: 1px;
        transition: all 0.5s;

    }

    #working #banner2 button {
        width: 50%;
        background-color: var(--bg4);
        color: var(--font1);
        padding: 1em 1em;
        border: none;
        border-radius: 2px;
        letter-spacing: 1px;
        transition: all 0.5s;

    }

    #working #banner2 button:hover {
        width: 50%;
        background-color: var(--bg4);
        color: var(--font1);
        padding: 1em 1em;
        border: none;
        border-radius: 2px;
        letter-spacing: 1px;
        transition: all 0.5s;

    }

    #products .head {
        font-size: 1rem;
        padding: 0.6em 0.6em;
    }

    #products #border-box #text h1 {
        font-size: 1rem;
    }

    #products #border-box #text h2 {
        font-size: 1rem;
    }

    #products #border-box #text p {
        font-size: 0.8rem;
    }

    #products #border-box1 #text h1 {
        font-size: 1rem;
    }

    #products #border-box1 #text h2 {
        font-size: 1rem;
    }

    #products #border-box1 #text p {
        font-size: 0.8rem;
    }

    #products #border-box {
        /* border: 4px solid var(--font10); */
        position: relative;
        padding: 1rem;
        margin: 1rem;
    }

    #products #border-box1 {
        /* border: 4px solid var(--font10); */
        position: relative;
        padding: 1rem;
        margin: 1rem;
    }

    #products #banner #text {
        padding: 5px;
        /* margin-top: 5rem; */
    }

    #products #border-box::before {
        content: "";
        width: 25%;
        height: 20%;
        top: 0;
        right: 0;
        position: absolute;
        transition: all 0.6s;
        box-sizing: border-box;
        border-top: 2px solid var(--font4);
        border-right: 2px solid var(--font4);
    }

    #products #border-box::after {
        content: "";
        width: 25%;
        height: 20%;
        bottom: 0;
        left: 0;
        position: absolute;
        transition: all 0.6s;
        box-sizing: border-box;
        border-bottom: 2px solid var(--font4);
        border-left: 2px solid var(--font4);
    }

    #products #border-box:hover:before,
    #products #border-box:hover:after {
        width: 25%;
        height: 20%;
    }

    #products #banner {
        /* width: 100vw; */
        /* height: 40vh; */
        /* background-image:url('assets/img/services.png'); */
        background-image: linear-gradient(black, black);
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
        background-color: transparent;
        padding: 10px;
    }

    #products #banner .small-image2 {
        /* width: 80%; */
        min-height: 30vh;
        background-image: url('assets/img/banners_image.png');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        display: block;
    }

    #products #see-more-banner {
        /* width: 100vw; */
        min-height: 30vh;
        background-image: url('assets/img/see_more.png');
        background-image: linear-gradient(black, black);
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
        background-color: transparent;
        /* padding: 10px; */
    }

    #products #see-more-banner #text {
        /* align-items: center; */
        min-height: 6em;
        padding-top: 3.5em;
    }

    #products #see-more-banner #text button {
        font-size: 0.6rem;
    }

    #products #see-more-banner button {
        background-color: transparent;
        color: var(--font8);
        padding: 0.6em 1.4em;
        border: 2px solid var(--font8);
        border-radius: 2px;
        letter-spacing: 4px;
        transition: all 0.5s;
        /* cursor: pointer; */
    }

    #products #see-more-banner button:hover {
        background-color: var(--bg4);
        color: var(--font1);
        padding: 0.6em 1.4em;
        border: none;
        border-radius: 2px;
        letter-spacing: 5px;
        transition: all 0.5s;
    }

    #products #border-box1 {
        display: none;
    }

    #products #smallDevice {
        display: block;
    }

    #products #smallDevice #text button {
        font-size: 0.8rem;
    }

    #products #smallDevice button {
        width: 80%;
        padding: 1em;
    }

    #products #smallDevice button {
        background-color: var(--bg4);
        color: var(--font1);
        padding: 1em 8em;
        border: none;
        border-radius: 2px;
        letter-spacing: 1px;
        transition: all 0.5s;
    }

    #morals .head {
        font-size: 25px;
        padding: 20px 10px;
    }

    #morals #banner #moral {
        width: 90px;
        height: 110px;
        border: 1px solid var(--font8);
        padding: 3px;
        border-radius: 4px;
        transition: 0.1s ease-in-out;
    }

    #moral h1 {
        padding-top: 1rem;
        font-size: 8px;

    }

    #moral svg {
        width: 40px;
        height: 30px;
    }

    #moral path {
        fill: var(--font4);
    }

    #moral {
        background-color: var(--bg1);
    }

    #moral h1 {
        color: var(--font2);
    }

    #moral:hover path {
        fill: var(--font1);
    }

    #moral:hover {
        background-color: var(--bg2);
    }

    #moral:hover h1 {
        color: var(--font1);
    }

    #morals #banner .head {
        font-size: 25px;
    }

    #clients .head {
        font-size: 25px;
        padding: 20px 10px;
    }

    #clients #client-logo img {
        width: 65px;
        height: 46px;
    }

    #blogs #banner .head {
        font-size: 25px;
        padding: 20px 10px;
    }

    #blogs #blogCarousel .item {
        /* margin: 20px; */
        max-width: 40%;
        height: auto;
        margin: auto;
    }

    #blogCarousel img {
        width: 100%;
        margin: auto;
    }

    #blogCarousel .item #btn {
        padding-top: 0.6em;
    }

    #blogCarousel .item button {
        font-size: 0.8rem;
    }

    #blogCarousel .item button {
        background-color: var(--bg4);
        color: var(--font1);
        padding: 0.8em 1.4em;
        border: 1px solid var(--bg4);
        border-radius: 2px;
        letter-spacing: 3px;
        transition: all 0.5s;
        align-self: center;
    }

    #blogCarousel .item button:hover {
        background-color: var(--bg4);
        color: var(--font1);
        padding: 0.8em 1.4em;
        border: 1px solid var(--bg4);
        border-radius: 2px;
        letter-spacing: 3px;
    }

    #blogs #blogCarousel .text {
        text-align: center;
    }

    #blogCarousel .item .text h1 {
        font-size: 1rem;
    }

    #blogCarousel .item .text p {
        font-size: 0.8rem;
    }

    #reviews #banner .head {
        font-size: 25px;
        padding: 20px 10px;
    }

    #reviews #reviewCarousel {
        height: auto;
        margin: 0.6em;
        padding: 0.5em 1.8em;
    }

    #reviews #reviewCarousel .text p {
        font-size: 0.8rem;
    }

    #reviews #reviewCarousel .item {
        /* margin: 20px; */
        width: 40%;
        margin: auto;
        height: auto;
    }

    #reviews #reviewCarousel .text {
        height: auto;
        text-align: center;
        color: var(--font8);
        font-size: 1.1rem !important;
    }

    #reviewCarousel .img {
        width: 40%;
        margin: auto;
        position: relative;
    }

    #newsletter #banner {
        padding-top: 0.6em;
    }

    #newsletter #banner #text .searchBox {
        padding-right: 0rem;
    }

    #newsletter #banner #text {
        padding: 0.5rem 0.5rem;
    }

    #newsletter #banner #text h1 {
        font-size: 1.4rem;
        font-weight: bold;
        padding-top: 5px;
    }

    #newsletter #banner #text p {
        font-size: 0.8rem;
    }

    #newsletter #banner #text #sent {
        font-size: 0.8rem;
    }

    /*#newsletter #banner span#success svg{*/
    /*width:12px;*/
    /*height:12px;*/
    /*}*/
    #newsletter #banner #text .searchBox {
        /*padding-right: 18rem;*/
        font-size: 0.8rem;
        /*width: 500px;*/
        height: auto;
    }

    /*#newsletter .searchBox  .form {*/
    /*display: flex;*/
    /*flex-direction: row;*/
    /*}*/
    #newsletter .searchBox .search-field {
        width: 60%;
        padding: 0.6em 0px 0.6em 0.6em;
        border: none;
        border-radius: 3px 0 0 3px;
        outline: none;
    }

    #newsletter #emailSubmit button {
        width: 40%;
        background-color: var(--bg4);
        color: var(--font1);
        padding: 0.5em 1em;
        border: none;
        border-radius: 2px;
        letter-spacing: 1px;
        transition: all 0.5s;
        /* cursor: pointer; */
    }

    #newsletter #emailSubmit button:hover {
        background-color: var(--bg4);
        color: var(--font1);
        padding: 0.5em 1em;
        border: none;
        border-radius: 2px;
        letter-spacing: 1px;
        transition: all 0.5s;
    }

    #newsletter #banner #letterIcon {
        display: none;
    }

    #footer #banner {
        /* width: 100vw; */
        height: auto;
        background-color: var(--bg2);
        background-image: url('assets/img/watermark.png');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 21rem 22rem;
        /*background-origin: content-box;*/
        padding: 1rem;
    }

    #footer #banner .sub-col .logo {
        width: 60%;
        height: auto;
        margin: auto;
    }

    #footer #banner .sub-col {
        text-align: center;
    }

    #footer .sub-col1 h1,
    #footer .sub-col2 h1,
    #footer .sub-col3 h1,
    #footer .sub-col4 h1 {
        font-size: 1.6rem;
    }

    #footer .sub-col1 p,
    #footer .sub-col2 p,
    #footer .sub-col3 p,
    #footer .sub-col4 p {
        font-size: 1rem;
    }

    #footer .sub-col3,
    #footer .sub-col4 {
        text-align: center;
    }

    #footer .sub-col1,
    #footer .sub-col2 {
        display: none;
    }

    #footer #copyright {
        /*background-image:linear-gradient(var(--bg2),var(--bg2));*/
        background-color: transparent;
        color: var(--font1);
        padding-top: 2rem;
        font-size: 0.6rem;
    }

    #footer #copyright hr {
        color: var(--font8);
        /*padding: 0 0.5rem;*/
    }
    .scroll {
        font-size: 2.5rem;
        color: var(--font4);
        /* padding-top: 1em; */
        /* padding-right: 4em; */
        /* text-align: right; */
        margin: auto;
    
    }

    /*-----contact section-------*/

    #nav2 {
        /* height: 10vh; */
        /* width: 100vw; */
        padding: 0px;
        /* background-color: black; */
        background-image: none;
    }

    #contactUs #text .head {
        font-size: 2rem;
        padding-top: 5px;
    }

    #contactUs #text label {
        font-size: 1rem;
    }

    #contactUs #text input {
        font-size: 0.6rem;
    }

    .form-control-1 {
        max-width: 80%;
        border-radius: 0;
        color: var(--font2);
        padding-left: 0;
        background-color: transparent;
    }

    .form-control-2 {
        max-width: 80%;
        border-radius: 0;
        color: var(--font2);
        padding-left: 0;
        background-color: transparent;
    }

    #contactUs #banner #form button {
        font-size: 0.8rem;
    }

    #contactUs #banner {
        background-image: url('assets/img/graphic.png');
        background-size: 90% 90%;
        background-position: right bottom;
        background-repeat: no-repeat;
        /* background-size: cover; */
    }

    #contactUs #banner #form button {
        width: 40%;
        background-color: var(--bg4);
        color: var(--font1);
        padding: 0.8em 1.4em;
        border: none;
        border-radius: 2px;
        letter-spacing: 3px;
        transition: all 0.5s;
    }

    #contactUs #banner #form button:hover {
        background-color: var(--bg4);
        color: var(--font1);
        padding: 0.8em 1.4em;
        border: none;
        border-radius: 2px;
        letter-spacing: 4px;

    }

    #contactUs #banner #form #submit {
        padding-top: 5px;
    }


    /*---product1 section-----  */
    #head #banner3 {
        /* width: 100vw; */
        min-height: 60vh;
        background-image: url('assets/img/banner_image_mb.png');
        /* background-image:linear-gradient(black,black); */
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
        background-color: transparent;
        /* background-attachment: fixed; */
        padding-top: 6em;
    }

    #head #banner3 #text {
        padding-bottom: 1em;
    }

    #head #banner3 #text h1 {
        font-size: 1.8rem;
    }

    #head #banner3 #text p {
        font-size: 1.2rem;
    }

    #product1 .border-box {

        height: 60vh;
        width: 40vw;
        /* border: 1px solid black; */
        padding: 0.5rem;
        position: relative;
        overflow: hidden
    }

    #product1 .row {
        padding: 2px 5px;
    }

    #product1 .text-box {
        text-align: left;
        padding: 1rem;
    }

    #product1 .text-box h2 {
        font-size: 1.2rem;
    }

    #product1 .text-box h4 {
        font-size: 1rem;
    }

    #product1 .text-box p {
        font-size: 0.8rem;
    }

    #product1 .text-box ul {
        font-size: 0.8rem;
    }

    ::marker {
        color: var(--font4);
        font-weight: bold;
        font-size: 1rem;
    }

    #product1 #charts h1 {
        font-size: 1.4rem;
    }

    #charts #table2 {
        display: block;
    }

    #charts #table3 {
        display: none;
    }


    /* --about section ---*/
    #head #banner2 {
        /* width: 100vw; */
        min-height: 60vh;
        background-image: url('assets/img/banner_image_mb.png');
        /* background-image:linear-gradient(black,black); */
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
        background-color: transparent;
        /* background-attachment: fixed; */
        padding-top: 6rem;
    }

    #head #banner2 #text {
        padding-bottom: 1rem;
    }

    #head #banner2 #text h1 {
        font-size: 1.2rem;
    }

    #head #banner2 #text p {
        font-size: 1.2rem;
    }

    #about1 .row {
        padding: 2px 5px;
    }

    #about2 .row {
        padding: 2px 5px;
    }

    #about1 .head {
        font-size: 1.2rem;
    }

    #about1 .sub-head {
        font-size: 0.8rem;
        padding: 0 1em;
        line-height: 110%;
        margin-bottom: 0;
    }

    #about1 .text-box h4 {
        font-size: 1rem;
    }

    #about1 .text-box p {
        font-size: 0.8rem;
    }

    #about2 .text-box h4 {
        font-size: 1rem;
    }

    #about2 .text-box p {
        font-size: 0.8rem;
    }

    #about1 .text-box {
        padding: 1em;
    }

    #about2 .text-box {
        padding: 1em;
    }

    #about1 .border-box {
        height: 60vh;
        width: 40vw;
        /* border: 1px solid black; */
        padding: 0.5rem;
        position: relative;
        /* overflow: hidden; */
    }

    #about2 .border-box {
        height: 60vh;
        width: 40vw;
        /* border: 1px solid black; */
        padding: 0.5em;
        position: relative;
        /* overflow: hidden; */
    }

    #achievements {
        display: none;
    }

    #achievementsMobile {
        display: block;
    }

    #achievementsMobile #banner .head {
        font-size: 1.4rem;
        padding: 1.2em 0.6em;
    }

    #achievementsMobile #banner {
        min-height: 80vh;
        background-image: linear-gradient(var(--bg2), var(--bg2));
        /* padding: 10px; */
        transition: all 1s ease-in-out;
        padding-left: 40px;
        padding-right: 40px;
    }

    #achievementsMobile #banner .head {
        font-size: 1.2rem;
    }

    #achievementsMobile #banner #achievement {
        /* width: 12%; */
        min-height: 20vh;
        /* border-left: 1px solid var(--font8); */
        transition: all 1s ease-in-out;
        /* z-index: 11; */
    }

    #achievementsMobile #banner #achievement .subHead {
        padding-left: 45px;
        padding-right: 40px;
    }

    /*  #achievementsMobile #banner #achievement:hover p{
            display: block;
        }
        #achievementsMobile #banner #achievement:hover .inside_odd {
            margin-bottom: auto;
        }
        #achievementsMobile #banner #achievement:hover .inside_even {
            margin-top: auto;
        } */

    #achievementsMobile #achievement .inside_odd .dotOdd {
        position: absolute;
        width: 0.6em;
        height: 0.6em;
        border-radius: 60%;
        background-color: var(--bg4);
        top: 0;
        left: -5px;
    }

    #achievementsMobile #achievement .inside_odd {
        margin-top: auto;
        margin-bottom: auto;
        border-left: 1px solid var(--font8);
        transition: all 1s ease-in-out;
        position: relative;
    }

    #achievementsMobile #achievement .inside_odd h1 {
        color: var(--font1);
        transition: color 1s;
    }

    #achievementsMobile #achievement:hover .inside_odd h1 {
        color: var(--font4);
    }

    #achievementsMobile #achievement .inside_even .dotEven {
        position: absolute;
        width: 0.6em;
        height: 0.6em;
        border-radius: 50%;
        background-color: var(--bg4);
        top: 0;
        right: -5px;
    }

    #achievementsMobile #achievement .inside_even {
        margin-top: auto;
        margin-bottom: auto;
        border-left: none;
        border-right: 1px solid var(--font8);
        transition: all 1s ease-in-out;
        position: relative;
    }


    #achievement h1 {
        min-height: 2rem;
        font-size: 5rem;
        font-weight: bold;
    }

    #achievement h2 {
        min-height: 2rem;
        font-size: 3rem;
        padding-left: 2px;
    }

    #achievement p {
        font-size: 0.8rem;
        padding-left: 2px;
        color: var(--font8);
    }

    #achievement .inside_even h1 {
        color: var(--font1);
        transition: color 1s;
    }

    #achievement:hover .inside_even h1 {
        color: var(--font4);
    }

    /* #achievement:hover .inside_even h2{
            color: var(--font4);
            transition: color 2s;
        } */
    #achievement .inside_odd hr {
        /* border: 10px solid var(--font4); */
        opacity: 1 !important;
        height: 1rem;
        background-color: var(--font4);
    }

    #achievement .inside_even hr {
        /* border: 10px solid var(--bg1); */
        opacity: 1 !important;
        height: 1rem;
        background-color: var(--bg1);
    }


}