body{
    font-family: 'Roboto', sans-serif;
    background-color: white;
    margin: 0 ;
    color: black;
}


.pgwrapper{

    display: none;
}

#wrp_home{

    display: block;
}

#topmenu{ 

    height: 100px;
    width: 100%;
    position: fixed;
    top: 00;
    z-index: 100;
}

#menuupdown{

    display: inline-block;
}

#smalllogo{

    display: inline-block;
}

#left_topmenu { 

width: 60%;
height: 85%;
background-color: rgba(255, 255, 255, 0.866);
float: right;
text-align: center;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;


}


#right_topmenu {

   
        width: 40%;
        height: 85%;
        text-align: left;
        background-color: rgb(255 255 255);
        float: left;
        color: white;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        
    
  

 }



 #wrp_home{
position: relative;

 }

 #banner{

    position: relative;
    height: 800px;
 }

 #bannerbg{


    width: 100%;
    height: 800px;
    position: absolute;
    object-fit: cover;
    z-index: -1;
    left: 0;
    right: 0;
    border-width: 0;
    top: 0;
    margin: 0; padding: 0;

}

#mbg{


    width: 40%;
    height: 65px;
    position: fixed;
    object-fit: cover;
    z-index: 1;
    left: 0;
    right: 0;
    border-width: 0;
    top: 30;
    margin: 0;
    padding: 0;

}


#menu{

    width: 80%;
    display: flex;
    list-style-type: none;
    margin: auto;
    height: 100%;
    justify-content: center;
    margin-left: 0;


    
}


#menu2{

    width: 80%;
    display: flex;
    list-style-type: none;
    margin: auto;
    justify-content: center;
    margin-left: 20px;
    padding-left: 0;
  

}

#menu li, #menu2 li{

    display: inline-block;
    margin-left: 2%;
    margin-right: 2%;
    vertical-align: middle;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    font-size: clamp(12px, 1vw, 14px);
    font-weight: 500;
    color: #515151;

}

#menu2 li{

    color: #16375f;
    font-size: clamp(9px, 1vw, 14px);
    font-weight: 400;
    z-index: 3;
}

#mainlogo{

    height: 77%;
    margin-bottom: -14px;
    border-radius: 3px;
    
  
}


#logoli{
    margin-top: -7px;
    height: 80px;
}

#tagline{


    
    max-height: 80px;
    max-height: 48px;
    margin-top: 15px;
    text-align: left;
}

#companyname{

    font-weight: 600;
    font-size: clamp(12px, 1.2vw, 18px);
    border-bottom-style: solid;
    padding-bottom: 5px;
    text-transform: uppercase;
  
    
}
#tagline > * {

    text-align: left;
    width: 100%;
}

#banneritem{


 
width: 45%;

position: absolute;
top: 200;
left: 10%;
z-index: 2;
background-color: #264f6bdc;
padding: 2%;

}

#bigtext{

    font-size: 5vw;
    font-weight: 900;
    color: #ffffff;
    font-size: clamp(12px, 5vw, 90px);
}

.lnkbtn:hover{

    text-decoration: underline;
    cursor: pointer;

}

#smalltext{

    font-size: 1vw;
    font-weight: 300;
    color: #ffffff;
    margin-top: 2%;
    font-size: clamp(12px, 1vw, 24px);

}


.linktext{

    font-size: 1vw;
    font-weight: 900;
    color: #ffffff;
    margin-top: 2%;
    width: 70%;
    font-size: clamp(12px, 1vw, 14px);

}

#wmudifwrapper{ 

   
}
#wmudif, #millenniumethos{

    width: 80%;
    margin: auto;
    margin-top: 2%;
}

#title_dif{

 
    font-weight: 900;
    color: rgba(38, 79, 107, 0.864);
    font-size: clamp(12px, 2vw, 40px);
}

#diful{ 

    margin-left: 0;
    padding-left: 0;
    margin-top: 0;
}



.brick{

    width: 20px;
    vertical-align: middle;
    margin-right: 10px;
}

.linking{

    margin-top: 1%;
    font-size: clamp(12px, 1vw, 14px);
    color: #515151;
}


.longwrap{

    margin-top: 2%;
    white-space: nowrap;
    display: inline-block;
    background-size: cover;
    width: 49%;
    vertical-align: top;
   height: 500px;
}

.longwrapleft{

    display: flex;
    margin: 0;
    padding: 0;
    vertical-align: top;
    white-space: nowrap;
}

.longwrapright{

    width: 100%;
    margin: 0;
    padding: 0;
    vertical-align: top;
    white-space: normal;

}

.longwraplist{

    list-style:circle;
    width: 90%;
    padding-left: 0;
    margin-left: 5%;
    margin-top: 5%;
}

.longwraplist li{

    background-color: rgb(255, 255, 255);
    margin: 1%;
    width: 90%;
    display: inline-block;
    list-style-image: url(img/brick.svg);
    padding: 2%;
    font-size: clamp(12px, 1vw, 14px);
}




.longwrapbox{


    width: 100%;
   background-color: rgba(38, 79, 107, 0.864);   padding-bottom: 2%;
   
    padding-left: 10%; padding-right: 10%;
  
}



#lr1{

    background-image: url(img/consultancy.jpg);
}

#lr2{
    background-image: url(img/products.jpg);

}

#lr3{
    background-image: url(img/waterproofing.jpg);

}


.longwrapboxtitle{
    white-space: normal;
    padding: 2%;
    font-size: clamp(12px, 3vw, 30px);
    font-weight: 900;
    color: white;
    margin-top: 10%;

}

.longwrapboxsubtitle{
    white-space: normal;
    padding: 2%;
    font-size: clamp(12px, 1vw, 14px);
    line-height: 1.5em;
    color: white;;
}


#millenniumethos{

    text-align: left;
}

#ethosul{

    list-style: none;
    margin-left: 0;
  padding-left: 0;

}

#ethosul li{

display: inline-block;
height: 420px;
width: 33%;
background-color: rgba(38, 79, 107, 0.18);
margin-left: 0;
vertical-align: top;
position: relative;
margin-top: 0.2%;
}

.ethostitle{

padding: 3%;
font-size: clamp(12px, 3vw, 30px);
line-height: 1.1em;
font-weight: 600;
width: 69%;



margin: auto;
margin-top: 22%;
margin-right: 17%;
}


.ethossubtitle{
    padding: 3%;
    width: 80%;
    padding-top: 1%;
    margin: auto;
    line-height: 1.5em;font-size: clamp(12px, 1vw, 14px);


}
.topright{

    width: 20%;
    position: absolute;
    top: 0;
    right: 0;

}

#ethosimage1{

    background-image: url(img/colomboskylinestaple.png);
    background-size: cover;

    background-repeat: no-repeat;
}


.ethostitle_desc{ margin-top: 23%; margin-left: 6%; font-size: clamp(12px, 3vw, 30px); font-weight: 600; }

.ethossubtitle_desc{ margin-top: 2%; margin-left: 5%;}

.ethossubtitle_desclink{    margin-left: 0;
    position: absolute;
    background-color: #fb6464;
    bottom: 0;
    width: 98%;
    padding-left: 2%;
    line-height: 50px;}