html,body{
    margin: 0;
    height: 100%;
    width: 100%;
overflow: inherit;


}

#main{width: 100%;height: auto;float: left}


.bg{
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 20px;
    position: relative;
    background-position:top center;
    overflow: hidden;


}

.bg h3{margin-bottom: 20px;font-family:BarlowSemiBold;line-height: 1;font-size: 72px;}
.bg p{line-height: 25px;font-family: BarlowRegular;font-size: 18px}

.bg1{
    background-image: url('../images/adboutimg_slxg.jpg');

}

.bg1 h3{margin-bottom: 10px;}

.bg2{
    background: #fff;
    display: block;
    height: auto;

}
.bg3{
    background-image: url('../images/bannerN1_img.jpg');
    color: #fff;
}
.bg4{
    background-image: url('../images/about_santecobg4img.jpg');
    color: #fff;

}

.bg5{
    background-image: url('../images/about_santecobg5img.jpg');
    color: #fff;
    text-align: center;

}
.bg6{

    background-image: url('../images/about_santecobg6img.jpg') ;
    color: #000;
    background-attachment: local;
    /*background-position: center;*/

}


h3{
    font-size:50px;
}
#footer{padding-bottom: 100px}
/*#footer{padding-bottom: 100px;position: fixed;bottom: -100%;left: 0;margin-bottom: 0;padding-top: 50px;transition: all .7s}*/
/*#footer.cur{bottom: 0}*/

.bg4 h3{font-size: 200px;text-align: center;margin-top: 148px;}
.bg4 p{font-size: 48px;    line-height: 60px;text-align: center;display: flex;align-items: center}
.bg4 p span{margin-top: 10px;display: inline-block;margin-right: 5px;}
.bg4 p:nth-of-type(1){width: 95%;  margin-left: 2%;}
.bg4 p:nth-of-type(2){width: 100%;font-size: 18px;position: absolute;bottom: 50px;}
.bg5 p{width: 95%;margin: 0 auto}


.bg6 p{width: 30%}

.box ul{width:calc(100% - 120px);height: 100%;float: left;margin: 0 60px 0 60px;}
.box ul li{width: 100%;height: 100%;float: left;display: flex;align-items: center;color: #000;}
.box ul li .liL{width:50%;height: 100%;float: left;margin-right: 171px;}
/*.box ul li .liL2{background: url("../images/about_santecoN2img.jpg") no-repeat center;background-size: 100%;}*/
/*.box ul li .liL1{background: url("../images/about_santecoN1img.jpg") no-repeat center;background-size: 100%;}*/
.box ul li:nth-of-type(2){flex-direction: row-reverse;margin-top: 105px;margin-bottom: 105px;}
.box ul li:nth-of-type(2) .liL{margin-right: 0;margin-left: 171px;}

.box ul li .liL img{width: 100%;    height: 100%;
    }
.box ul li .liR{width: auto;height: auto;float: left;}

.box ul li .liR h3{margin-bottom: 45px;}
.bg2 ul li .liR{width: 33%}
.box ul.row{width:calc(100% - 206px);height: 100%;float: left;margin: 0 60px 0 146px;}
.box ul.row li{flex-direction: row-reverse}

.box ul.row li .liL{margin:0 0 0 171px}



@media only screen and (max-width: 768px) {
    #footer{padding-bottom: 0}
    .appIn{width: 92%}
    /* styles to be applied when screen width is less than 768px */
    .bg1{    background-attachment: local; background-image: url('../images/wapadboutimg_slxg.jpg');}

    .bg1 h3{width: 180px !important}

    .bg1 p{width: calc(100% - 3rem) !important;
        margin: 0 1.5rem !important;font-size: 1rem !important;line-height: 1.3rem !important;opacity: 0.7}
    .bg2 .box{margin:3.8rem 0 0 0;width:100% !important;text-align: center}
    .bg2 .box ul{width: 100%;margin: 0}
    .bg2 .box ul li{flex-wrap: wrap;
        flex-direction: column-reverse;}


    .bg2 .box ul li .liL{width: 100%;margin: 2rem 0 0 0 !important;}
    .bg2 .box ul li .liR{width: 100%;margin: 0}
    .bg2 .box ul li .liR{text-align: left;width: calc(100% - 3rem);
        margin: 0 1.5rem;}
    .bg2 .box ul li .liR img{display: block;max-width: 160px !important;margin: 0 auto 2rem auto !important}
    .bg2 p{font-size: 1rem;text-align: left;line-height: 1.3rem  }




    .box ul li .liR h3{font-size: 2rem;margin-bottom: 2rem}

    .box ul li:nth-of-type(2){margin: 4rem 0 0 0}
    .bg4{background-attachment: local; background-image: url('../images/wapabout_santecobg4img.jpg');}

    .bg4 h3{font-size: 4.5rem;margin: 7rem 0 1rem 0}
    .bg4 p:nth-of-type(1){width: 100%;margin: 0;text-align: left;line-height: 3rem;font-size: 2.6rem}
    .bg4 p:nth-of-type(2){width: 90%;
        font-size: 1rem;
        line-height: 1.3rem;
        text-align: left;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);}

    .bg5{background-attachment: local;background-image: url('../images/wapabout_santecobg5img.jpg');}
    .bg5 .box{margin: 0 1.5rem  !important; text-align: left;width: calc(100% - 3rem) !important;height: 100% !important;  }
    .bg5 h3{font-size: 2.6rem;margin-top: 8rem;color: #000}
    .bg5 p{width: 70% !important;color: #000;font-size: 1rem;line-height: 1.3rem;margin: 0}

    .bg6{ background-image: url('../images/wapabout_santecobg6img.jpg');}
    .bg6 .box{height: 100% !important;margin: 0 1.5rem  !important;width: calc(100% - 3rem) !important;}
    .bg6 h3{font-size: 2rem;margin-top: 11rem}
    .bg6 p{width: 70% !important;  font-size: 1rem;  line-height: 1.3rem;}

}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    #footer{padding-bottom: 5rem}
    /* styles to be applied when screen width is between 768px and 1024px */
    .appIn{width: 92%}
    .bg1{background-size: cover; background-image: url('../images/wapadboutimg_slxg.jpg');}

    .bg2 .box{margin:3.8rem 0 0 0;width:100% !important;text-align: center}
    .bg2 .box ul{width: 100%;margin: 0}
    .bg2 .box ul li{flex-wrap: wrap;
        flex-direction: column-reverse;}


    .bg2 .box ul li .liL{width: 100%;margin: 2rem 0 0 0 !important;}
    .bg2 .box ul li .liR{width: 100%;margin: 0}
    .bg2 .box ul li .liR img{display: block;max-width: 160px !important;margin: 0 auto 2rem auto !important}
    .bg2 p{font-size: 1.4rem;text-align: left;        width: calc(100% - 3rem);
        margin: 0 1.5rem;}

    .box ul li .liR h3{font-size: 2rem;margin-bottom: 2rem}

    .box ul li:nth-of-type(2){margin: 4rem 0 0 0}
    .bg4{background-size: cover; background-image: url('../images/wapabout_santecobg4img.jpg');}

    .bg4 h3{font-size: 5rem;margin: 7rem 0 0 0}
    .bg4 p:nth-of-type(1){width: 100%;margin: 0;text-align: left;line-height: 3rem;font-size: 2rem}
    .bg4 p:nth-of-type(2){width: 90%;
        font-size: 1.5rem;
        line-height: 2rem;
        text-align: left;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);}

    .bg5{background-size: cover; background-image: url('../images/wapabout_santecobg5img.jpg');}
    .bg5 .box{margin: 0 1.5rem  !important; text-align: left;width: calc(100% - 3rem) !important;height: 100% !important;  }
    .bg5 h3{font-size: 2rem;margin-top: 8rem;color: #000}
    .bg5 p{width: auto !important;color: #000}

    .bg6{background-size: cover; background-image: url('../images/wapabout_santecobg6img.jpg');}
    .bg6 .box{height: 100% !important;margin: 0 1.5rem  !important;width: calc(100% - 3rem) !important;}
    .bg6 h3{font-size: 3rem;margin-top: 11rem}
    .bg6 p{width: 50% !important;  font-size: 1.1rem;  line-height: 2rem;}


}