@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

*{ 
    margin:0;
    padding:0;
    box-sizing: border-box;
}

body{
    background-color: #f3f2f2f6;
    font-family:Montserrat, sans-serif;
    position: relative;
   }


/*------------nav-bar style------------*/
nav{
   background: -webkit-linear-gradient(rgb(0,0,0,), rgba(0,8,2,0.19));
   background: -moz-linear-gradient(rgb(0,0,0,), rgba(0,8,2,0.19));
   background: -o-linear-gradient(rgb(0,0,0,), rgba(0,8,2,0.19));
   background:linear-gradient(rgb(0,0,0,1),rgba(0, 8, 2, 0));
   width:100%;
   max-width: 100%;
   height:70px;
   display:flex;
   justify-content: space-between;
   position:fixed;
   top:0;
   z-index: 2000;
   transition: background-color 0.4s ease-in-out; 
}

/*----Nav-Bar background -----*/
.navbar.scrolled{
    background-color: rgb(1, 46, 1);
   }
   
nav ul{
    float:right;
    margin-right: 10em;
}
   
/*--------------Logo Container----------*/
.logo{
    padding: 10px 100px;
   }

/*--------------Navigation List Style------------*/
nav ul li{
    color:#fff; 
    margin: 30px 5px; 
    display: inline-block;
}

/*---------------Link Style------------------*/
   .navlink{
    color:#ffff;
    padding: 4px 5px;
    text-decoration: none;
    text-transform: uppercase;
    border-bottom: yellow;
    transition: border-bottom 0.3s ease-in;
    
}

.navlink:hover{
    border-bottom: yellow 0.2em solid;
    color:yellow;
}

 .icon{
    margin-right:3em;
    margin-top: 0.5em;
    font-size:2rem;
    color:white;
    cursor: pointer;
    display: none;
}




/*-------------------Slide-Banner------------*/
.main-banner{
    width: 100%;
    height:100vh;
    margin:0;
    overflow: hidden;
    position: relative;
}

.main-banner .imgban{
    width:100%;
    height: 100%;
    position:absolute;
    top:0px;
    -webkit-transition: all ease-in-out 600ms;
    -moz-transition: all ease-in-out 500ms;
    -o-transition: all ease-in-out 500ms;
    transition: all ease-in-out 500ms;
}

/*------------Main-Banner Text box------------------*/
.main-banner .imgtext-box h1{
    font-size: 3.5rem;
    color:#ffffff;
    text-shadow: 3px 3px 6px #000;
    text-transform: uppercase; 
}


.main-banner #imgban3 .imgtext-box{
    margin-top:20em;
    padding-left:5em;  
    width:50%;
    font-weight: 400;
}

.main-banner #imgban2 .imgtext-box{
    margin-top:20em;
    padding-left:5em;
    width:40%;
}

.main-banner #imgban1 .imgtext-box{
    margin-top:20em;
    padding-left:6em;
    padding-right:5em;
    width: 40%;
}

/*--------------Slide Button----------*/
.imgbanbtn{
    width:40px;
    height:40px;
    border-radius: 100%;
    background-color: rgba(0,8,2,0.4);
    position:absolute;
    top:50%;
    z-index: 1800;
    cursor: pointer;
}

.imgbanbtn:hover{
    background-color: rgba(0,8,2,0.6);
    
}

.imgbanbtn-prev{
    left:20px;
    background-image:url(./images/mensinGoldiming/btn_left.png);
    background-size: 60%;
    background-position: center;
    background-repeat: no-repeat;
}

.imgbanbtn-next{
    right:20px;
    background-image:url(./images/mensinGoldiming/btn_right.png);
    background-size: 60%;
    background-position: center;
    background-repeat: no-repeat;
}

/*-------------Banner-Background--------*/
.main-banner #imgban3{
    background-image:url(./images/mensinGoldiming/slidepage.jpg);
    background-size: cover;
    background-position:center;
    background-repeat: no-repeat;
}
.main-banner #imgban2{
    background-image: url(./images/mensinGoldiming/bibani.jpg);
    background-size: cover;
    background-position:center;
    background-repeat: no-repeat;
}
.main-banner #imgban1{
    background-image: url(./images/mensinGoldiming/service2.jpg);
    background-size: cover;
    background-position:center;
    background-repeat: no-repeat;
}

.content{
    background-color: #e9e9e9;
    display: flex;
    flex-direction: column;
    justify-content:space-around;
    flex-flow:wrap;
    align-items: center;
    align-content: center;
   
}
.intro{
    padding:0.5em;
    width:50%;
}

.intro p{
    margin: 2em;
    font-size:1rem;
    margin-top: 1em;
}

.contentdis{
    padding:0.5em;
    margin-left:1em;
    width:40%;
}


.contentdis h1{
    padding:0.1em;
    text-transform: uppercase;
    font-size: 2rem;
    color: #800333;
    z-index: 1;
} 


.content p{
    line-height:2em;

}


.ser-container{
    background-color: rgb(1, 63, 11);
    max-width:100%;
    min-height:90vh;
    margin-inline: auto;
    display: flex;
    gap:1rem;
    justify-content:space-evenly;
    flex-direction:row;
    flex-wrap: wrap;
    align-items:flex-start;
    align-content: center;
}

.description{
    min-width:20%;
    min-height:50%;
    line-height: 1.5em;
    padding:0.5em;
    color:#e7e3e3;
}
.description h2{
    color:#54f813;
}
.description hr{
    width:120%;
}
.description img{
    
}

.description a{
    color:#44f16f;
    text-decoration: none;
}
.description a:hover{
    color:#ddec08;
    text-decoration: underline;
}

.description a:visited{
    color:#ddec08;
    
}
    
#description1{
   
    width:20%;
    height:auto;
}
#description2{
   
    width:20%;
    height:auto;
}
#description3{
    width:20%;
    height:auto;
}

#description4{
   
    width:20%;
    height:auto;
}






@media only screen and (max-width:600px){
    nav{
        background: -webkit-linear-gradient(rgb(0,0,0,), rgba(0,8,2,0.19));
        background: -moz-linear-gradient(rgb(0,0,0,), rgba(0,8,2,0.19));
        background: -o-linear-gradient(rgb(0,0,0,), rgba(0,8,2,0.19));
        background:linear-gradient(rgb(0,0,0,1),rgba(0, 8, 2, 0));
        width:100%;
        max-width: 100%;
        height:70px;
        display:flex;
        justify-content: space-between;
        position:fixed;
        top:0;
        z-index: 2000;
        transition: background-color 0.4s ease-in-out; 
     }
     
     /*----Nav-Bar background -----*/
     .navbar.scrolled{
         background-color: rgb(1, 46, 1);
        }
        
     nav ul{
         float:right;
         margin-right: 10em;
     }
        
     /*--------------Logo Container----------*/
     .logo{
         padding: 10px 100px;
        }
     
     /*--------------Navigation List Style------------*/
     nav ul li{
         color:#fff; 
         margin: 30px 5px; 
         display: inline-block;
     }
     
     /*---------------Link Style------------------*/
        .navlink{
         color:#ffff;
         padding: 4px 5px;
         text-decoration: none;
         text-transform: uppercase;
         border-bottom: yellow;
         transition: border-bottom 0.3s ease-in;
         
     }
     
     .navlink:hover{
         border-bottom: yellow 0.2em solid;
         color:yellow;
     }
     
      .icon{
         margin-right:3em;
         margin-top: 0.5em;
         font-size:2rem;
         color:white;
         cursor: pointer;
         display: none;
     }
     
     
     
     
     /*-------------------Slide-Banner------------*/
     .main-banner{
         width: 100%;
         height:100vh;
         margin:0;
         overflow: hidden;
         position: relative;
     }
     
     .main-banner .imgban{
         width:100%;
         height: 100%;
         position:absolute;
         top:0px;
         -webkit-transition: all ease-in-out 600ms;
         -moz-transition: all ease-in-out 500ms;
         -o-transition: all ease-in-out 500ms;
         transition: all ease-in-out 500ms;
     }
     
     /*------------Main-Banner Text box------------------*/
     .main-banner .imgtext-box h1{
         font-size: 2.5rem;
         color:#ffffff;
         text-shadow: 3px 3px 6px #000;
         text-transform: uppercase; 
     }
     
     
     .main-banner #imgban3 .imgtext-box{
         margin-top:15em;
         padding-left:5em;  
         width:50%;
         font-weight: 400;
     }
     
     .main-banner #imgban2 .imgtext-box{
         margin-top:15em;
         padding-left:5em;
         width:40%;
     }
     
     .main-banner #imgban1 .imgtext-box{
         margin-top:20em;
         padding-left:6em;
         padding-right:5em;
         width: 40%;
     }
     
     /*--------------Slide Button----------*/
     .imgbanbtn{
         width:40px;
         height:40px;
         border-radius: 100%;
         background-color: rgba(0,8,2,0.4);
         position:absolute;
         top:50%;
         z-index: 1800;
         cursor: pointer;
     }
     
     .imgbanbtn:hover{
         background-color: rgba(0,8,2,0.6);
         
     }
     
     .imgbanbtn-prev{
         left:20px;
         background-image:url(./images/mensinGoldiming/btn_left.png);
         background-size: 60%;
         background-position: center;
         background-repeat: no-repeat;
     }
     
     .imgbanbtn-next{
         right:20px;
         background-image:url(./images/mensinGoldiming/btn_right.png);
         background-size: 60%;
         background-position: center;
         background-repeat: no-repeat;
     }
     
     /*-------------Banner-Background--------*/
     .main-banner #imgban3{
         background-image:url(./images/mensinGoldiming/slidepage.jpg);
         background-size: cover;
         background-position:center;
         background-repeat: no-repeat;
     }
     .main-banner #imgban2{
         background-image: url(./images/mensinGoldiming/bibani.jpg);
         background-size: cover;
         background-position:center;
         background-repeat: no-repeat;
     }
     .main-banner #imgban1{
         background-image: url(./images/mensinGoldiming/service2.jpg);
         background-size: cover;
         background-position:center;
         background-repeat: no-repeat;
     }
     
     .content{
         background-color: #e9e9e9;
         display: flex;
         flex-direction: column;
         justify-content:space-around;
         flex-flow:wrap;
         align-items: center;
         align-content: center;
        
     }
     .intro{
         padding:0.5em;
         width:100%;
     }
     
     .intro p{
         margin: 2em;
         font-size:1rem;
         margin-top: 1em;
     }
     
     .contentdis{
         padding:0.5em;
         margin-left:1em;
         width:100%;
     }
     
     
     .contentdis h1{
         padding:0.1em;
         text-transform: uppercase;
         font-size: 2rem;
         color: #800333;
         z-index: 1;
     } 
     
     
     .content p{
         line-height:2em;
     
     }
     
     
     .ser-container{
         background-color: rgb(20, 83, 7);
         max-width:100%;
         height:auto;
         margin-inline: auto;
         display: flex;
         justify-content:space-around;
         flex-direction:column;
         flex-wrap: wrap;
         align-items:flex-start;
         align-content: center;
     }
     
     .description{
         min-width:80%;
         min-height:50%;
         line-height: 1.5em;
         padding:0.5em;
         color:#e7e3e3;
     }
     .description h2{
         color:#54f813;
     }
     .description hr{
         width:100%;
     }
     .description img{
        width:100%;
        height:auto;
         
     }
     
     .description a{
         color:#44f16f;
         text-decoration: none;
     }
     .description a:hover{
         color:#ddec08;
         text-decoration: underline;
     }
     
     .description a:visited{
         color:#ddec08;
         
     }
         
     #description1{
        
         width:20%;
         height:auto;
     }
     #description2{
        
         width:20%;
         height:auto;
     }
     #description3{
         width:20%;
         height:auto;
     }
     
     #description4{
        
         width:20%;
         height:auto;
     }
}

@media only screen and (max-width:768px){
    nav{
        background: -webkit-linear-gradient(rgb(0,0,0,), rgba(0,8,2,0.19));
        background: -moz-linear-gradient(rgb(0,0,0,), rgba(0,8,2,0.19));
        background: -o-linear-gradient(rgb(0,0,0,), rgba(0,8,2,0.19));
        background:linear-gradient(rgb(0,0,0,1),rgba(0, 8, 2, 0));
        width:100%;
        max-width: 100%;
        height:70px;
        display:flex;
        justify-content: space-between;
        position:fixed;
        top:0;
        z-index: 2000;
        transition: background-color 0.4s ease-in-out; 
     }
     
     /*----Nav-Bar background -----*/
     .navbar.scrolled{
         background-color: rgb(1, 46, 1);
        }
        
     nav ul{
         float:right;
         margin-right: 10em;
     }
        
     /*--------------Logo Container----------*/
     .logo{
         padding: 10px 100px;
        }
     
     /*--------------Navigation List Style------------*/
     nav ul li{
         color:#fff; 
         margin: 30px 5px; 
         display: inline-block;
     }
     
     /*---------------Link Style------------------*/
        .navlink{
         color:#ffff;
         padding: 4px 5px;
         text-decoration: none;
         text-transform: uppercase;
         border-bottom: yellow;
         transition: border-bottom 0.3s ease-in;
         
     }
     
     .navlink:hover{
         border-bottom: yellow 0.2em solid;
         color:yellow;
     }
     
      .icon{
         margin-right:3em;
         margin-top: 0.5em;
         font-size:2rem;
         color:white;
         cursor: pointer;
         display: none;
     }
     
     
     
     
     /*-------------------Slide-Banner------------*/
     .main-banner{
         width: 100%;
         height:100vh;
         margin:0;
         overflow: hidden;
         position: relative;
     }
     
     .main-banner .imgban{
         width:100%;
         height: 100%;
         position:absolute;
         top:0px;
         -webkit-transition: all ease-in-out 600ms;
         -moz-transition: all ease-in-out 500ms;
         -o-transition: all ease-in-out 500ms;
         transition: all ease-in-out 500ms;
     }
     
     /*------------Main-Banner Text box------------------*/
     .main-banner .imgtext-box h1{
         font-size: 2.5rem;
         color:#ffffff;
         text-shadow: 3px 3px 6px #000;
         text-transform: uppercase; 
     }
     
     
     .main-banner #imgban3 .imgtext-box{
         margin-top:15em;
         padding-left:5em;  
         width:50%;
         font-weight: 400;
     }
     
     .main-banner #imgban2 .imgtext-box{
         margin-top:15em;
         padding-left:5em;
         width:40%;
     }
     
     .main-banner #imgban1 .imgtext-box{
         margin-top:20em;
         padding-left:6em;
         padding-right:5em;
         width: 40%;
     }
     
     /*--------------Slide Button----------*/
     .imgbanbtn{
         width:40px;
         height:40px;
         border-radius: 100%;
         background-color: rgba(0,8,2,0.4);
         position:absolute;
         top:50%;
         z-index: 1800;
         cursor: pointer;
     }
     
     .imgbanbtn:hover{
         background-color: rgba(0,8,2,0.6);
         
     }
     
     .imgbanbtn-prev{
         left:20px;
         background-image:url(./images/mensinGoldiming/btn_left.png);
         background-size: 60%;
         background-position: center;
         background-repeat: no-repeat;
     }
     
     .imgbanbtn-next{
         right:20px;
         background-image:url(./images/mensinGoldiming/btn_right.png);
         background-size: 60%;
         background-position: center;
         background-repeat: no-repeat;
     }
     
     /*-------------Banner-Background--------*/
     .main-banner #imgban3{
         background-image:url(./images/mensinGoldiming/slidepage.jpg);
         background-size: cover;
         background-position:center;
         background-repeat: no-repeat;
     }
     .main-banner #imgban2{
         background-image: url(./images/mensinGoldiming/bibani.jpg);
         background-size: cover;
         background-position:center;
         background-repeat: no-repeat;
     }
     .main-banner #imgban1{
         background-image: url(./images/mensinGoldiming/service2.jpg);
         background-size: cover;
         background-position:center;
         background-repeat: no-repeat;
     }
     
     .content{
         background-color: #e9e9e9;
         display: flex;
         flex-direction: column;
         justify-content:space-around;
         flex-flow:wrap;
         align-items: center;
         align-content: center;
        
     }
     .intro{
         padding:0.5em;
         width:100%;
     }
     
     .intro p{
         margin: 2em;
         font-size:1rem;
         margin-top: 1em;
     }
     
     .contentdis{
         padding:0.5em;
         margin-left:1em;
         width:100%;
     }
     
     
     .contentdis h1{
         padding:0.1em;
         text-transform: uppercase;
         font-size: 2rem;
         color: #800333;
         z-index: 1;
     } 
     
     
     .content p{
         line-height:2em;
     
     }
     
     
     .ser-container{
         background-color: rgb(20, 83, 7);
         max-width:100%;
         height:auto;
         margin-inline: auto;
         display: flex;
         justify-content:space-around;
         flex-direction:column;
         flex-wrap: wrap;
         align-items:flex-start;
         align-content: center;
     }
     
     .description{
         min-width:80%;
         min-height:50%;
         line-height: 1.5em;
         padding:0.5em;
         color:#e7e3e3;
     }
     .description h2{
         color:#54f813;
     }
     .description hr{
         width:100%;
     }
     .description img{
        width:100%;
        height:auto;
         
     }
     
     .description a{
         color:#44f16f;
         text-decoration: none;
     }
     .description a:hover{
         color:#ddec08;
         text-decoration: underline;
     }
     
     .description a:visited{
         color:#ddec08;
         
     }
         
     #description1{
        
         width:20%;
         height:auto;
     }
     #description2{
        
         width:20%;
         height:auto;
     }
     #description3{
         width:20%;
         height:auto;
     }
     
     #description4{
        
         width:20%;
         height:auto;
     }
}

@media only screen and (min-width:1024px){
    nav{
        background: -webkit-linear-gradient(rgb(0,0,0,), rgba(0,8,2,0.19));
        background: -moz-linear-gradient(rgb(0,0,0,), rgba(0,8,2,0.19));
        background: -o-linear-gradient(rgb(0,0,0,), rgba(0,8,2,0.19));
        background:linear-gradient(rgb(0,0,0,1),rgba(0, 8, 2, 0));
        width:100%;
        max-width: 100%;
        height:70px;
        display:flex;
        justify-content: space-between;
        position:fixed;
        top:0;
        z-index: 2000;
        transition: background-color 0.4s ease-in-out; 
     }
     
     /*----Nav-Bar background -----*/
     .navbar.scrolled{
         background-color: rgb(1, 46, 1);
        }
        
     nav ul{
         float:right;
         margin-right: 10em;
     }
        
     /*--------------Logo Container----------*/
     .logo{
         padding: 10px 100px;
        }
     
     /*--------------Navigation List Style------------*/
     nav ul li{
         color:#fff; 
         margin: 30px 5px; 
         display: inline-block;
     }
     
     /*---------------Link Style------------------*/
        .navlink{
         color:#ffff;
         padding: 4px 5px;
         text-decoration: none;
         text-transform: uppercase;
         border-bottom: yellow;
         transition: border-bottom 0.3s ease-in;
         
     }
     
     .navlink:hover{
         border-bottom: yellow 0.2em solid;
         color:yellow;
     }
     
      .icon{
         margin-right:3em;
         margin-top: 0.5em;
         font-size:2rem;
         color:white;
         cursor: pointer;
         display: none;
     }
     
     
     
     
     /*-------------------Slide-Banner------------*/
     .main-banner{
         width: 100%;
         height:100vh;
         margin:0;
         overflow: hidden;
         position: relative;
     }
     
     .main-banner .imgban{
         width:100%;
         height: 100%;
         position:absolute;
         top:0px;
         -webkit-transition: all ease-in-out 600ms;
         -moz-transition: all ease-in-out 500ms;
         -o-transition: all ease-in-out 500ms;
         transition: all ease-in-out 500ms;
     }
     
     /*------------Main-Banner Text box------------------*/
     .main-banner .imgtext-box h1{
         font-size: 3.5rem;
         color:#ffffff;
         text-shadow: 3px 3px 6px #000;
         text-transform: uppercase; 
     }
     
     
     .main-banner #imgban3 .imgtext-box{
         margin-top:20em;
         padding-left:5em;  
         width:50%;
         font-weight: 400;
     }
     
     .main-banner #imgban2 .imgtext-box{
         margin-top:20em;
         padding-left:5em;
         width:40%;
     }
     
     .main-banner #imgban1 .imgtext-box{
         margin-top:20em;
         padding-left:6em;
         padding-right:5em;
         width: 40%;
     }
     
     /*--------------Slide Button----------*/
     .imgbanbtn{
         width:40px;
         height:40px;
         border-radius: 100%;
         background-color: rgba(0,8,2,0.4);
         position:absolute;
         top:50%;
         z-index: 1800;
         cursor: pointer;
     }
     
     .imgbanbtn:hover{
         background-color: rgba(0,8,2,0.6);
         
     }
     
     .imgbanbtn-prev{
         left:20px;
         background-image:url(./images/mensinGoldiming/btn_left.png);
         background-size: 60%;
         background-position: center;
         background-repeat: no-repeat;
     }
     
     .imgbanbtn-next{
         right:20px;
         background-image:url(./images/mensinGoldiming/btn_right.png);
         background-size: 60%;
         background-position: center;
         background-repeat: no-repeat;
     }
     
     /*-------------Banner-Background--------*/
     .main-banner #imgban3{
         background-image:url(./images/mensinGoldiming/slidepage.jpg);
         background-size: cover;
         background-position:center;
         background-repeat: no-repeat;
     }
     .main-banner #imgban2{
         background-image: url(./images/mensinGoldiming/bibani.jpg);
         background-size: cover;
         background-position:center;
         background-repeat: no-repeat;
     }
     .main-banner #imgban1{
         background-image: url(./images/mensinGoldiming/service2.jpg);
         background-size: cover;
         background-position:center;
         background-repeat: no-repeat;
     }
     
     .content{
         background-color: #e9e9e9;
         display: flex;
         flex-direction: column;
         justify-content:space-around;
         flex-flow:wrap;
         align-items: center;
         align-content: center;
        
     }
     .intro{
         padding:0.5em;
         width:50%;
     }
     
     .intro p{
         margin: 2em;
         font-size:1rem;
         margin-top: 1em;
     }
     
     .contentdis{
         padding:0.5em;
         margin-left:1em;
         width:40%;
     }
     
     
     .contentdis h1{
         padding:0.1em;
         text-transform: uppercase;
         font-size: 2rem;
         color: #800333;
         z-index: 1;
     } 
     
     
     .content p{
         line-height:2em;
     
     }
     
     
     .ser-container{
         background-color: rgb(1, 63, 11);
         padding-top: 4em;
         padding-bottom: 4em;
         max-width:100%;
         min-height:120vh;
         margin-inline: auto;
         display: flex;
         gap:1rem;
         justify-content:space-evenly;
         flex-direction:row;
         flex-flow: row;
         flex-wrap: wrap;
         align-items:flex-start;
         align-content: center;
     }
     
     .description{
         min-width:40%;
         min-height:50%;
         line-height: 1.5em;
         padding:0.5em;
         color:#e7e3e3;
     }
     .description h2{
         color:#54f813;
     }
     .description hr{
         width:100%;
     }
     .description img{
        min-width:100%;
        height:auto;
         
     }
     
     .description a{
         color:#44f16f;
         text-decoration: none;
     }
     .description a:hover{
         color:#ddec08;
         text-decoration: underline;
     }
     
     .description a:visited{
         color:#ddec08;
         
     }
         
     #description1{
        
         width:20%;
         height:auto;
     }
     #description2{
        
         width:20%;
         height:auto;
     }
     #description3{
         width:20%;
         height:auto;
     }
     
     #description4{
        
         width:20%;
         height:auto;
     }
     

}
@media(min-width:1400px){

}
       

/*-----------About Page----------*/

main{
    display: flex;
    gap:0.5em;
    justify-content:space-between;
    flex-flow:row wrap;
    
}

.aboutBanner{
    width: 100%;
    height:100vh;
    margin:0;
    overflow: hidden;
    position: relative;
}

.aboutBanner .aboutImgban{
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
}

.aboutQuote p{
    font-size: 1rem;
    padding: 0.8em;
    line-height: 1.3;
    width:100%;
    max-width: 100%;
}

.aboutTitle{
    margin:20em 40em 0em 0em;
    width:100%;
    max-width: 100%;
    height: 56%;
    background:-webkit-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
    background:-moz-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
    background:-o-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
    background:linear-gradient(rgba(0,8,2,0.01),rgb(0, 0, 0));
}


.aboutTitle h1{
    margin:5em 0em 0em 2em;
    padding-top: 0.5em;
    font-size: 5rem;
    text-transform: uppercase;
    color:rgb(255, 255, 255);
    animation:about_ani 4s ease-in-out  1 alternate both;
}

@keyframes about_ani {
    0%{opacity:0; transform: translateY(80%);}
    30%{opacity:0;}
    50%{opacity:0.5; transform: translateY(0%);}
    100%{opacity:1; transform:translateY(0%)}   
}

.aboutTitle hr{
    width: 32%;
    margin-left:10em;
    animation:hr 4s ease-in-out  1 alternate both;
}

@keyframes hr{
    0%{opacity:0; transform: translateX(80%);}
    30%{opacity:0;}
    50%{opacity:0.5; transform: translateX(0%);}
    100%{opacity:1; transform:translateX(0%)}   
}

#aboutTitle h5{
    margin:0.5em 4em 4em 6.5em;
    font-size: 1.5rem;
    text-transform: uppercase;
    color: rgb(255, 255, 255);
    font-display: bold;
    animation: est 4s ease-in-out 1 alternate both;
}

@keyframes est{
    0%{opacity:0; transform: translateX(80%);}
    30%{opacity:0;}
    50%{opacity:0.5; transform: translateX(0%);}
    100%{opacity:1; transform:translateX(0%)}   
}

.aboutBanner #aboutImgban{
    background-image: url(./images/mensinGoldiming/DJI_0089.jpg);
    background-size: cover;
    background-position:center;
    background-repeat: no-repeat;  
    animation:about-back 6s ease-in alternate both; 
}

@keyframes about-back {
    0%{opacity: 1; background-size:300%;}
    100%{opacity:1; background-size:100%}
}
.about-kaslive{
    margin: 2em 1em 1em 1em;
    line-height: 1.8em;
    width:50%;
    max-width: 45%;
}
.about-kaslive p{
    margin: 1em;
}

.about-kaslive h1{
    color:#313030;
    padding: 0.5em;
    font-size: 2rem;
}


.aboutKaslive h2{
    color:#7c7c7c;
    padding: 0.3em;
}

.aboutKaslive p{
    line-height: 1.5em;
    padding:0.3em;
}
.aboutKaslive hr{
    margin:0.3em;
}

#aboutKasliveTeam{
width: 45%;
max-width:45%;
line-height:1.8em;
margin: 2em 1em 1em 1em;
}

#ourProject{
width: 40%;
max-width:40%;
line-height:1.8em;
margin: 2em 2em 2em 1em;
min-width:40%;
}

#ourEquipment{
width: 45%;
border: #03500d 2px;
background-image: url(images/img/contact11.jpg);
background-size:cover;
background-position: center;
}



.imgTeam{
    margin: 1em 1em 1em 1em;
    width:45%;
    background-image: url(images/mensinGoldiming/service.jpg);
    background-size: cover;
    background-position: center;
}
#history{
    margin: 1em 1em 1em 1em;
    width:45%;
    line-height: 1.8em;
    background-color: #dddddc;
} 

#history p{
    margin: 1em;
    padding:0.5em;

}

#history h2{
    margin:0.5em;
}

#history hr{
    margin:0.5em;
}

@media only screen and (max-width:600px){
    main{
    display: flex;
    gap:0.5em;
    justify-content:space-between;
    flex-flow:row wrap;  
}

.aboutBanner{
    width: 100%;
    height:100vh;
    margin:0;
    overflow: hidden;
    position: relative;
}

.aboutBanner .aboutImgban{
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
}

.aboutQuote p{
    font-size: 1rem;
    padding: 0.8em;
    line-height: 1.3;
    width:100%;
    max-width: 100%;
}

.aboutTitle{
    margin:20em 40em 0em 0em;
    width:100%;
    max-width: 100%;
    height: 56%;
    background:-webkit-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
    background:-moz-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
    background:-o-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
    background:linear-gradient(rgba(0,8,2,0.01),rgb(0, 0, 0));
}


.aboutTitle h1{
    margin:5em 0em 0em 2em;
    padding-top: 0.5em;
    font-size: 4rem;
    text-transform: uppercase;
    color:rgb(255, 255, 255);
    animation:about_ani 4s ease-in-out  1 alternate both;
}

@keyframes about_ani {
    0%{opacity:0; transform: translateY(80%);}
    30%{opacity:0;}
    50%{opacity:0.5; transform: translateY(0%);}
    100%{opacity:1; transform:translateY(0%)}   
}

.aboutTitle hr{
    width: 32%;
    margin-left:10em;
    animation:hr 4s ease-in-out  1 alternate both;
}

@keyframes hr{
    0%{opacity:0; transform: translateX(80%);}
    30%{opacity:0;}
    50%{opacity:0.5; transform: translateX(0%);}
    100%{opacity:1; transform:translateX(0%)}   
}

#aboutTitle h5{
    margin:0.5em 4em 4em 6.5em;
    font-size: 1.5rem;
    text-transform: uppercase;
    color: rgb(255, 255, 255);
    font-display: bold;
    animation: est 4s ease-in-out 1 alternate both;
}

@keyframes est{
    0%{opacity:0; transform: translateX(80%);}
    30%{opacity:0;}
    50%{opacity:0.5; transform: translateX(0%);}
    100%{opacity:1; transform:translateX(0%)}   
}

.aboutBanner #aboutImgban{
    background-image: url(./images/mensinGoldiming/DJI_0089.jpg);
    background-size: cover;
    background-position:center;
    background-repeat: no-repeat;  
    animation:about-back 6s ease-in alternate both; 
}

@keyframes about-back {
    0%{opacity: 1; background-size:300%;}
    100%{opacity:1; background-size:180%}
}
.about-kaslive{
    margin: 2em 1em 1em 0.5em;
    line-height: 1.8em;
    width:100%;
    max-width: 100%;
}
.about-kaslive p{
    margin: 1em;
}

.about-kaslive h1{
    color:#313030;
    padding: 0.5em;
    font-size: 2rem;
}


.aboutKaslive h2{
    color:#7c7c7c;
    padding: 0.3em;
}

.aboutKaslive p{
    line-height: 1.5em;
    padding:0.3em;
}
.aboutKaslive hr{
    margin:0.3em;
}

#aboutKasliveTeam{
width: 100%;
max-width:100%;
line-height:1.8em;
margin: 2em 1em 1em 1em;
}

#ourProject{
width: 100%;
max-width:100%;
line-height:1.8em;
margin: 2em 2em 2em 1em;
min-width:40%;
}

#ourEquipment{
width: 50%;
height:60vh;
border: #03500d 2px;
background-image: url(images/img/contact11.jpg);
background-size:cover;
background-position: center;
}



.imgTeam{
    margin: 1em 1em 1em 1em;
    width:100%;
    height:100%
    background-image: url(images/mensinGoldiming/service.jpg);
    background-size: cover;
    background-position: center;
}
#history{
    margin: 1em 1em 1em 1em;
    width:100%;
    line-height: 1.8em;
    background-color: #dddddc;
} 

#history p{
    margin: 1em;
    padding:0.5em;

}

#history h2{
    margin:0.5em;
}

#history hr{
    margin:0.5em;
}
}

@media only screen and (max-width:768px){
    main{
        display: flex;
        gap:0.5em;
        justify-content:space-between;
        flex-flow:row wrap;
        
    }
    
    .aboutBanner{
        width: 100%;
        height:100vh;
        margin:0;
        overflow: hidden;
        position: relative;
    }
    
    .aboutBanner .aboutImgban{
        width:100%;
        height:100%;
        position:absolute;
        top:0px;
    }
    
    .aboutQuote p{
        font-size: 1rem;
        padding: 0.8em;
        line-height: 1.3;
        width:100%;
        max-width: 100%;
    }
    
    .aboutTitle{
        margin:20em 40em 0em 0em;
        width:100%;
        max-width: 100%;
        height: 56%;
        background:-webkit-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
        background:-moz-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
        background:-o-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
        background:linear-gradient(rgba(0,8,2,0.01),rgb(0, 0, 0));
    }
    
    
    .aboutTitle h1{
        margin:6em 0em 0em 2em;
        padding-top: 0.5em;
        font-size: 5rem;
        text-transform: uppercase;
        color:rgb(255, 255, 255);
        animation:about_ani 4s ease-in-out  1 alternate both;
    }
    
    @keyframes about_ani {
        0%{opacity:0; transform: translateY(80%);}
        30%{opacity:0;}
        50%{opacity:0.5; transform: translateY(0%);}
        100%{opacity:1; transform:translateY(0%)}   
    }
    
    .aboutTitle hr{
        width: 32%;
        margin-left:10em;
        animation:hr 4s ease-in-out  1 alternate both;
    }
    
    @keyframes hr{
        0%{opacity:0; transform: translateX(80%);}
        30%{opacity:0;}
        50%{opacity:0.5; transform: translateX(0%);}
        100%{opacity:1; transform:translateX(0%)}   
    }
    
    #aboutTitle h5{
        margin:0.5em 4em 4em 6.5em;
        font-size: 1.5rem;
        text-transform: uppercase;
        color: rgb(255, 255, 255);
        font-display: bold;
        animation: est 4s ease-in-out 1 alternate both;
    }
    
    @keyframes est{
        0%{opacity:0; transform: translateX(80%);}
        30%{opacity:0;}
        50%{opacity:0.5; transform: translateX(0%);}
        100%{opacity:1; transform:translateX(0%)}   
    }
    
    .aboutBanner #aboutImgban{
        background-image: url(./images/mensinGoldiming/DJI_0089.jpg);
        background-size: cover;
        background-position:center;
        background-repeat: no-repeat;  
        animation:about-back 6s ease-in alternate both; 
    }
    
    @keyframes about-back {
        0%{opacity: 1; background-size:300%;}
        100%{opacity:1; background-size:200%}
    }
    .about-kaslive{
        margin: 2em 1em 1em 0.5em;
        line-height: 1.8em;
        width:100%;
        max-width: 100%;
    }
    .about-kaslive p{
        margin: 1em;
    }
    
    .about-kaslive h1{
        color:#313030;
        padding: 0.5em;
        font-size: 2rem;
    } 
    .aboutKaslive h2{
        color:#7c7c7c;
        padding: 0.3em;
    }
    
    .aboutKaslive p{
        line-height: 1.5em;
        padding:0.3em;
    }
    .aboutKaslive hr{
        margin:0.3em;
    }
    
    #aboutKasliveTeam{
    width: 100%;
    max-width:100%;
    line-height:1.8em;
    margin: 2em 1em 1em 1em;
    }
    
    #ourProject{
    width: 100%;
    max-width:100%;
    line-height:1.8em;
    margin: 2em 2em 2em 1em;
    min-width:40%;
    }
    
    #ourEquipment{
    width: 100%;
    height:50vh;
    border: #03500d 2px;
    background-image: url(images/img/contact11.jpg);
    background-size:cover;
    background-position: center;
    }
    
    .imgTeam{
        width:100%;
        height:60vh;
        background-image:url(images/mensinGoldiming/service.jpg);
        background-size: cover;
        background-position: center;
    }
    #history{
        margin: 1em 1em 1em 1em;
        width:100%;
        line-height: 1.8em;
        background-color: #dddddc;
    } 
    
    #history p{
        margin: 1em;
        padding:0.5em;
    
    }
    
    #history h2{
        margin:0.5em;
    }
    
    #history hr{
        margin:0.5em;
    }
}


/*-------------Service Page------------*/
main{
    display: flex;
    gap:0.5em;
    justify-content:space-around;
    flex-flow:row;
    flex-wrap:wrap;
}
.serviceban{
    width:100%;
    height:100vh;
    overflow: hidden;
    position: relative;
    
}


.serviceban .serviceimgban{
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    -webkit-transition: all ease-in-out 600ms;
    -moz-transition: all ease-in-out 500ms;
    -o-transition: all ease-in-out 500ms;
    transition: all ease-in-out 500ms;
}

.service-title h2{
    margin:6em 0em 0em 1em;
    font-size: 3rem;
    text-transform: uppercase;
    color:rgb(255, 255, 255);
    animation:service_title 4s ease-in-out  1 alternate both;
}



@keyframes service_title {
    0%{opacity:0; transform: translateY(80%);}
    30%{opacity:0;}
    50%{opacity:0.5; transform: translateY(0%);}
    100%{opacity:1; transform:translateY(0%)}   
}
.service-title{
    margin-top:10em;
    width:100%;
    height:100%;
    background:-webkit-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
    background:-moz-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
    background:-o-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
    background:linear-gradient(rgba(0,8,2,0.01),rgb(0, 0, 0));
}

    @keyframes grow{
        from{width:0%;}
        to{width:25%}
    }

.service-title h2{
    font-size:3.5rem;
    color:#f3f3f3;
    text-transform: uppercase;
    padding-left:1em;
    margin-top: 4em;
    font-weight: bolder;
    overflow: hidden;
    animation:ser_ani 4s ease-in-out  1 alternate both;
}

@keyframes ser_ani {
    0%{opacity:0; transform: translateY(80%);}
    30%{opacity:0;}
    50%{opacity:0.5; transform: translateY(0%);}
    100%{opacity:1; transform:translateY(0%)}   
}

.service-title hr{
    width:25em;
    margin-left: 8em;
    animation:hr 4s ease-in-out  1 alternate both;
}
@keyframes hr{
    0%{opacity:0; transform: translateX(80%);}
    30%{opacity:0;}
    50%{opacity:0.5; transform: translateX(0%);}
    100%{opacity:1; transform:translateX(0%)}   
}
.kasService{
    margin:1em 8em;
    line-height:1.5em;
    list-style-type: none;
    color:#e9e9e9
 }

 kasService li{
    margin:0.5em 10em;
    line-height:1.5em;
    
 }

 .kasService li a{
    line-height: 1.7;
    text-decoration: none;
    text-transform: uppercase;
    color:#fff;
    font-weight: bold;
    text-shadow:2px 2px 5px #000;
    animation: ani_services 4s ease-in-out 1 alternate both;
}
 
 
 .kasService li a:hover{
    line-height: 1.7;
    text-decoration: none;
    text-transform: uppercase;
    color:#ddec08;
 }

 @keyframes ani_services{
    0%{opacity:0; transform: translateX(80%);}
    30%{opacity:0;}
    50%{opacity:0.5; transform: translateX(0%);}
    100%{opacity:1; transform:translateX(0%)}   
}


@keyframes ani{
    from{opacity: 0%;}
    to{opacity:100%}
    }

#serviceimgban{
    background:url(./images/mensinGoldiming/service.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size:300%;
    height:100vh;
    animation: first-animation 8s ease-out 1 both;
}

@keyframes first-animation{
from{background-size: 300%;}
to{background-size: 100%;}
}
.service-box{
    width:100%;
    max-width:90%;
    margin:3em 3em 3em 3em;
}
hr{
    margin-top:0.5em;
    margin-bottom:0.5em;
}
#buildingConstruction{
    margin:0.8em;
}
.buildingConstruction h2 {
    margin: 0.2em;
    font-size: 2rem;
    text-transform: uppercase;
    color:#525151;
    animation: bc-Animation 2s ease  1 alternate both;
}

@keyframes bc-Animation{
    0%{opacity:0; transform: translateY(80%); }
    20%{opacity:0;}
    50%{opacity: 1; transform: translateY(0%);}
    100%{opacity: 1; transform:translateY(0%)}
}

.bc-sector{
    line-height: 1.5rem;
    font-size: 1rem;
}
.buildingConstruction h3{
    margin: 0.5em 0em 0.5em 0em;
    color:#525151;
}

.buildingConstruction ul{
    line-height:1.7em;
}
.sector-covered{
    margin-left:3em;
}

#civilEng-infra h2{
    margin-top: 1em;
    color:#525151;
    font-size:2rem;
    animation: bc-Animation 5s ease  1 alternate both;
}

@keyframes bc-Animation{
    0%{opacity:0; transform: translateY(80%); }
    20%{opacity:0;}
    50%{opacity: 1; transform: translateY(0%);}
    100%{opacity: 1; transform:translateY(0%)}
}
.civilEng-infra h3{
    margin: 0.5em 0em 0.5em 0em;
    color:#525151;
}

.civilEng-infra ul{
    line-height: 1.7em;
}
#roads-earthworks h2{
    margin-top: 1em;
    font-size:2rem;
    color:#525151;
    animation: bc-Animation 5s ease  1 alternate both;
}

@keyframes bc-Animation{
    0%{opacity:0; transform: translateY(80%); }
    20%{opacity:0;}
    50%{opacity: 1; transform: translateY(0%);}
    100%{opacity: 1; transform:translateY(0%)}
}

.roads-earthworks h3{
    margin: 0.5em 0em 0.5em 0em;
    color:#525151;
}
.roads-earthworks ul{
    line-height:1.7em;
}

#fabrication h2{
    margin-top: 1em;
    font-size: 2rem;
    text-transform:uppercase;
    color:#525151;
    animation: bc-Animation 5s ease  1 alternate both;
}

@keyframes bc-Animation{
    0%{opacity:0; transform: translateY(80%); }
    20%{opacity:0;}
    50%{opacity: 1; transform: translateY(0%);}
    100%{opacity: 1; transform:translateY(0%)}
}

.fabrication ul{
 line-height:1.7em;
}

#painting_Galvan h2{
    margin-top: 1em;
    font-size: 2rem;
    text-transform: uppercase;
    color:#525151;
    animation: bc-Animation 5s ease  1 alternate both;
}

@keyframes bc-Animation{
    0%{opacity:0; transform: translateY(80%); }
    20%{opacity:0;}
    50%{opacity: 1; transform: translateY(0%);}
    100%{opacity: 1; transform:translateY(0%)}
}

.painting_Galvan ul{
    line-height: 1.7em;
}
.supply h2{
    margin-top: 1em;
    font-size: 2rem;
    color:#525151;
    text-transform: uppercase;
    animation: bc-Animation 5s ease  1 alternate both;
}

@keyframes bc-Animation{
    0%{opacity:0; transform: translateY(80%); }
    20%{opacity:0;}
    50%{opacity: 1; transform: translateY(0%);}
    100%{opacity: 1; transform:translateY(0%)}
}
.supply p{
    line-height:1.7em;
}




@media only screen and (max-width:600px){
    main{
        display: block;
        
    }
    .serviceban{
        width:100%;
        height:100vh;
        overflow: hidden;
        position: relative;
        
    }
    
    
    .serviceban .serviceimgban{
        width:100%;
        height:100%;
        position:absolute;
        top:0px;
        -webkit-transition: all ease-in-out 600ms;
        -moz-transition: all ease-in-out 500ms;
        -o-transition: all ease-in-out 500ms;
        transition: all ease-in-out 500ms;
    }
    
    .service-title h2{
        margin:3em 0em 0em 0em;
        font-size: 2rem;
        text-transform: uppercase;
        color:rgb(255, 255, 254);
        animation:service_title 4s ease-in-out  1 alternate both;
        width:50%;
    }
    
    @keyframes service_title {
        0%{opacity:0; transform:translateY(80%);}
        30%{opacity:0;}
        50%{opacity:0.5; transform:translateY(50%);}
        100%{opacity:1; transform:translateY(50%)}   
    }

    .service-title{
        margin-top:10em;
        min-width:100%;
        min-height:100%;
        background:-webkit-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
        background:-moz-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
        background:-o-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
        background:linear-gradient(rgba(0,8,2,0.01),rgb(0, 0, 0));
    }
    
        @keyframes grow{
            from{width:0%;}
            to{width:100%}
        }
    
    .service-title h2{
        font-size:3.5rem;
        color:#f3f3f3;
        text-transform: uppercase;
        margin-top: 1em;
        font-weight: bolder;
        overflow: hidden;
        animation:ser_ani 4s ease-in-out  1 alternate both;
    }
    
    @keyframes ser_ani {
        0%{opacity:0; transform: translateY(80%);}
        30%{opacity:0;}
        50%{opacity:0.5; transform: translateY(80%);}
        100%{opacity:1; transform:translateY(80%)}   
    }
    
    .service-title hr{
        width:25em;
        margin-left: 5em;
        animation:hr 4s ease-in-out  1 alternate both;
    }

    @keyframes hr{
        0%{opacity:0; transform: translateX(80%);}
        30%{opacity:0;}
        50%{opacity:0.5; transform: translateX(0%);}
        100%{opacity:1; transform:translateX(0%)}   
    }
    .kasService{
        margin:1em 2em;
        line-height:1.5em;
        list-style-type: none;
        color:#e9e9e9
     }
    
     kasService li{
        margin:0.5em 5em;
        line-height:1.5em;
        
     }
    
     .kasService li a{
        line-height: 1.7;
        text-decoration: none;
        text-transform: uppercase;
        color:#fff;
        font-weight: bold;
        text-shadow:2px 2px 5px #000;
        animation: ani_services 4s ease-in-out 1 alternate both;
    }
     
     
     .kasService li a:hover{
        line-height: 1.7;
        text-decoration: none;
        text-transform: uppercase;
        color:#ddec08;
     }
    
     @keyframes ani_services{
        0%{opacity:0; transform: translateX(80%);}
        30%{opacity:0;}
        50%{opacity:0.5; transform: translateX(0%);}
        100%{opacity:1; transform:translateX(0%)}   
    }
    
    
    @keyframes ani{
        from{opacity: 0%;}
        to{opacity:100%}
        }
    
    #serviceimgban{
        background:url(./images/mensinGoldiming/service.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size:300%;
        height:100vh;
        animation: first-animation 8s ease-out 1 both;
    }
    
    @keyframes first-animation{
    from{background-size: 300%;}
    to{background-size: 100%;}
    }
    .service-box{
        width:100%;
        max-width:90%;
        margin:3em 3em 3em 3em;
    }
    hr{
        margin-top:0.5em;
        margin-bottom:0.5em;
    }
    #buildingConstruction{
        margin:0.8em;
    }
    .buildingConstruction h2 {
        margin: 0.2em;
        font-size: 2rem;
        text-transform: uppercase;
        color:#525151;
        animation: bc-Animation 2s ease  1 alternate both;
    }
    
    @keyframes bc-Animation{
        0%{opacity:0; transform: translateY(80%); }
        20%{opacity:0;}
        50%{opacity: 1; transform: translateY(0%);}
        100%{opacity: 1; transform:translateY(0%)}
    }
    
    .bc-sector{
        line-height: 1.5rem;
        font-size: 1rem;
    }
    .buildingConstruction h3{
        margin: 0.5em 0em 0.5em 0em;
        color:#525151;
    }
    
    .buildingConstruction ul{
        line-height:1.7em;
    }
    .sector-covered{
        margin-left:3em;
    }
    
    #civilEng-infra h2{
        margin-top: 1em;
        color:#525151;
        font-size:2rem;
        animation: bc-Animation 5s ease  1 alternate both;
    }
    
    @keyframes bc-Animation{
        0%{opacity:0; transform: translateY(80%); }
        20%{opacity:0;}
        50%{opacity: 1; transform: translateY(0%);}
        100%{opacity: 1; transform:translateY(0%)}
    }
    .civilEng-infra h3{
        margin: 0.5em 0em 0.5em 0em;
        color:#525151;
    }
    
    .civilEng-infra ul{
        line-height: 1.7em;
    }
    #roads-earthworks h2{
        margin-top: 1em;
        font-size:2rem;
        color:#525151;
        animation: bc-Animation 5s ease  1 alternate both;
    }
    
    @keyframes bc-Animation{
        0%{opacity:0; transform: translateY(80%); }
        20%{opacity:0;}
        50%{opacity: 1; transform: translateY(0%);}
        100%{opacity: 1; transform:translateY(0%)}
    }
    
    .roads-earthworks h3{
        margin: 0.5em 0em 0.5em 0em;
        color:#525151;
    }
    .roads-earthworks ul{
        line-height:1.7em;
    }
    
    #fabrication h2{
        margin-top: 1em;
        font-size: 2rem;
        text-transform:uppercase;
        color:#525151;
        animation: bc-Animation 5s ease  1 alternate both;
    }
    
    @keyframes bc-Animation{
        0%{opacity:0; transform: translateY(80%); }
        20%{opacity:0;}
        50%{opacity: 1; transform: translateY(0%);}
        100%{opacity: 1; transform:translateY(0%)}
    }
    
    .fabrication ul{
     line-height:1.7em;
    }
    
    #painting_Galvan h2{
        margin-top: 1em;
        font-size: 2rem;
        text-transform: uppercase;
        color:#525151;
        animation: bc-Animation 5s ease  1 alternate both;
    }
    
    @keyframes bc-Animation{
        0%{opacity:0; transform: translateY(80%); }
        20%{opacity:0;}
        50%{opacity: 1; transform: translateY(0%);}
        100%{opacity: 1; transform:translateY(0%)}
    }
    
    .painting_Galvan ul{
        line-height: 1.7em;
    }
    .supply h2{
        margin-top: 1em;
        font-size: 2rem;
        color:#525151;
        text-transform: uppercase;
        animation: bc-Animation 5s ease  1 alternate both;
    }
    
    @keyframes bc-Animation{
        0%{opacity:0; transform: translateY(80%); }
        20%{opacity:0;}
        50%{opacity: 1; transform: translateY(0%);}
        100%{opacity: 1; transform:translateY(0%)}
    }
    .supply p{
        line-height:1.7em;
    }
    

}


/*-------------Portfolio-----------------*/
.portfolio-container{
    display:block;
    background: url(/images/mensinGoldiming/bbb.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #083502;
    background-blend-mode:soft-light;
}


.portfolio-title{
    padding-top:10em;
    padding-left:10em;
}
.portfolio-title h2{
    font-size: 3rem;
    color:#fcfcfc;
    text-transform: uppercase;
    animation: portfolio-title 2s ease-in-out  1 alternate both;
}
@keyframes portfolio-title {
    0%{opacity:0; transform:translateY(80%);}
    20%{opacity:0}
    50%{opacity:1; transform:translateY(0%)} 
    100%{opacity:1; transform:translateY(0%)}
}

.portfolio-quote{
    padding-top:0.2em;
    width:100%;
    max-width:70%;
    animation: portfolio-quote 2s ease-in-out  1 alternate both;
}
.portfolio-quote p{
    color:#ffffff;
}
@keyframes portfolio-quote {
    0%{opacity:0; transform:translateX(5%);}
    20%{opacity:0}
    50%{opacity:1; transform:translateX(0%)} 
    100%{opacity:1; transform:translateX(0%)}
}
#contact-btn{
  width:10em;
  height:3em;
  margin-top:1em;
  border-radius:20px;
  background-color:#54f813;
  animation: portfolio-quote 2s ease-in-out  1 alternate both;
  
}

.portfolio-container ul{
    margin:1em 1em ;
    display: flex;
    gap:1.2em;
    flex-flow:row wrap;
}


.projects-profile li{
    display: inline-block;
    padding:0.5em;
}
.port-link{
    color:#f3f3f3;
    font-weight: 600;
    text-decoration: none;
    padding:0.3em;
    border-bottom: #54f813;
    transition:border-bottom 0.8s ease-in;

}
.projects-profile  a:hover{
    border-bottom:#54f813 0.2em solid ;
    color:#54f813;
    
}

#contact-btn h5{
padding:0.5em;
text-align: center;
color:rgba(1, 26, 1, 0.933);
animation: portfolio-title 2s ease-in-out  1 alternate both;
}

.port-project{
    margin-top:3em;
    margin-bottom:4em;
    display: flex;
    gap:1.5em;
    justify-content:center;
    flex-flow:row wrap;
   align-items: center;
   align-content: center;
    
}

.portImg-container{
    width:30em;
    height:20em;
    background-color:#083502;
    
}

.portImg-container h2{
    margin:6em 2em;
    color:#f3f3f3;
    text-transform: uppercase;
    text-shadow: #000 2px 2px 6px;
    font-weight: 800;
}

#portImg-container1{
    background-image: url(./images/portfolio/MENSIN\ GOLD\ BIBINI\ LIMITED\ TSF\ REHABILITATION\ PROJECT\ 1-1.jpg);
    background-size: cover;
    background-repeat:no-repeat;
}
#portImg-container2{
    background-image: url(./images/portfolio/IMG-20220103-WA0030.jpg);
    background-size: cover;
    background-repeat:no-repeat;
}
#portImg-container3{
    background-image: url(./images/portfolio/IMG-20220103-WA0010.jpg);
    background-size: cover;
    background-repeat:no-repeat;
}
#portImg-container4{
    background-image: url(./images/portfolio/IMG-20220103-WA0018.jpg);
    background-size: cover;
    background-repeat:no-repeat;
}
#portImg-container5{
    background-image: url(./images/portfolio/IMG-20220103-WA0018.jpg);
    background-size: cover;
    background-repeat:no-repeat;
}
#portImg-container6{
    background-image: url(./images/portfolio/IMG-20220103-WA0019.jpg);
    background-size: cover;
    background-repeat:no-repeat;
}
#portImg-container7{
    background-image: url(./images/portfolio/IMG-20220103-WA0024.jpg);
    background-size: cover;
    background-repeat:no-repeat;
}
#portImg-container8{
    background-image: url(./images/portfolio/newwkaslive\ profile-4.jpg);
    background-size: cover;
    background-repeat:no-repeat;
}

@media(max-width:480px){
    main{
        margin: 1em 2em;
    }
    .serviceban{
        width:100%;
        height:100vh;
        overflow: hidden;
        position: relative;
    }
    
    
    .serviceban .serviceimgban{
        width:100%;
        height:100%;
        position:absolute;
        top:0px;
        -webkit-transition: all ease-in-out 600ms;
        -moz-transition: all ease-in-out 500ms;
        -o-transition: all ease-in-out 500ms;
        transition: all ease-in-out 500ms;
    }
    
    .service-title h2{
        margin:6em 0em 0em 1em;
        font-size: 3rem;
        text-transform: uppercase;
        color:rgb(255, 255, 255);
        animation:service_title 4s ease-in-out  1 alternate both;
    }
    
    @keyframes service_title {
        0%{opacity:0; transform: translateY(80%);}
        30%{opacity:0;}
        50%{opacity:0.5; transform: translateY(0%);}
        100%{opacity:1; transform:translateY(0%)}   
    }
    .service-title{
        margin-top:20em;
        width:100%;
        height:40%;
        background:-webkit-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
        background:-moz-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
        background:-o-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
        background:linear-gradient(rgba(0,8,2,0.01),rgb(0, 0, 0));
    }
    
        @keyframes grow{
            from{width:0%;}
            to{width:25%}
        }
    
    .service-title h2{
        font-size:5rem;
        color:#f3f3f3;
        text-transform: uppercase;
        padding-left:0.5em;
        font-weight: bolder;
        animation-name:ani;
        animation-duration:5s;
        animation-timing-function:ease-in-out;
        animation-iteration-count: 1;
        animation-direction: both;
    }
    @keyframes ani{
        from{opacity: 0%;}
        to{opacity:100%}
        }
    
    #serviceimgban{
        background:url(./images/mensinGoldiming/service.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size:300%;
        height:100vh;
        animation: first-animation 8s ease-out 1 both;
    }
    
    @keyframes first-animation{
    from{background-size: 300%;}
    to{background-size: 100%;}
    }
    .service-box{
        width:100%;
        max-width:90%;
        margin:3em 3em 3em 3em;
    }
    hr{
        margin-top:0.5em;
        margin-bottom:0.5em;
    }
    #buildingConstruction{
        margin:0.8em;
    }
    .buildingConstruction h2 {
        margin: 0.2em;
        font-size: 2rem;
        text-transform: uppercase;
        color:#525151;
        animation: bc-Animation 2s ease  1 alternate both;
    }
    
    @keyframes bc-Animation{
        0%{opacity:0; transform: translateY(80%); }
        20%{opacity:0;}
        50%{opacity: 1; transform: translateY(0%);}
        100%{opacity: 1; transform:translateY(0%)}
    }
    
    .bc-sector{
        line-height: 1.5rem;
        font-size: 1rem;
    }
    .buildingConstruction h3{
        margin: 0.5em 0em 0.5em 0em;
        color:#525151;
    }
    
    .buildingConstruction ul{
        line-height:1.7em;
    }
    .sector-covered{
        margin-left:3em;
    }
    
    #civilEng-infra h2{
        margin-top: 1em;
        color:#525151;
        font-size:2rem;
        animation: bc-Animation 5s ease  1 alternate both;
    }
    
    @keyframes bc-Animation{
        0%{opacity:0; transform: translateY(80%); }
        20%{opacity:0;}
        50%{opacity: 1; transform: translateY(0%);}
        100%{opacity: 1; transform:translateY(0%)}
    }
    .civilEng-infra h3{
        margin: 0.5em 0em 0.5em 0em;
        color:#525151;
    }
    
    .civilEng-infra ul{
        line-height: 1.7em;
    }
    #roads-earthworks h2{
        margin-top: 1em;
        font-size:2rem;
        color:#525151;
        animation: bc-Animation 5s ease  1 alternate both;
    }
    
    @keyframes bc-Animation{
        0%{opacity:0; transform: translateY(80%); }
        20%{opacity:0;}
        50%{opacity: 1; transform: translateY(0%);}
        100%{opacity: 1; transform:translateY(0%)}
    }
    
    .roads-earthworks h3{
        margin: 0.5em 0em 0.5em 0em;
        color:#525151;
    }
    .roads-earthworks ul{
        line-height:1.7em;
    }
    
    #fabrication h2{
        margin-top: 1em;
        font-size: 2rem;
        color:#525151;
        animation: bc-Animation 5s ease  1 alternate both;
    }
    
    @keyframes bc-Animation{
        0%{opacity:0; transform: translateY(80%); }
        20%{opacity:0;}
        50%{opacity: 1; transform: translateY(0%);}
        100%{opacity: 1; transform:translateY(0%)}
    }
    
    .fabrication ul{
     line-height:1.7em;
    }
    
    #pipiConst h2{
        margin-top: 1em;
        font-size: 2rem;
        color:#525151;
        animation: bc-Animation 5s ease  1 alternate both;
    }
    
    @keyframes bc-Animation{
        0%{opacity:0; transform: translateY(80%); }
        20%{opacity:0;}
        50%{opacity: 1; transform: translateY(0%);}
        100%{opacity: 1; transform:translateY(0%)}
    }
    
    .pipiConst p{
        line-height: 1.7em;
    }
    .supply h2{
        margin-top: 1em;
        font-size: 2rem;
        color:#525151;
        animation: bc-Animation 5s ease  1 alternate both;
    }
    
    @keyframes bc-Animation{
        0%{opacity:0; transform: translateY(80%); }
        20%{opacity:0;}
        50%{opacity: 1; transform: translateY(0%);}
        100%{opacity: 1; transform:translateY(0%)}
    }
    .supply p{
        line-height:1.7em;
    }
     .kasService{
    
        margin:2em 0 0 3em;
        line-height:1.5em;
     }
    
    
     @media (max-width:658px){
       
        .service-title{
            margin-top:30em;
            margin-left:10em;
            width:50%;
            background-color: rgba(8, 2, 2, 0.6)
    }
    .service-title h2{
            font-size:3rem;
            color:#f3f3f3;
            padding-left:0.5em;
            font-weight: bolder;   
     }
    }
    
    @media (max-width:800px){
       
        main{
            margin: 1em 2em;
        }
        .serviceban{
            width:100%;
            height:100vh;
            overflow: hidden;
            position: relative;
        }
        
        
        .serviceban .serviceimgban{
            width:100%;
            height:100%;
            position:absolute;
            top:0px;
            -webkit-transition: all ease-in-out 600ms;
            -moz-transition: all ease-in-out 500ms;
            -o-transition: all ease-in-out 500ms;
            transition: all ease-in-out 500ms;
        }
        
        .service-title h2{
            margin:6em 0em 0em 1em;
            font-size: 4rem;
            text-transform: uppercase;
            color:rgb(255, 255, 255);
            animation:service_title 4s ease-in-out  1 alternate both;
        }
        
        @keyframes service_title {
            0%{opacity:0; transform: translateY(80%);}
            30%{opacity:0;}
            50%{opacity:0.5; transform: translateY(0%);}
            100%{opacity:1; transform:translateY(0%)}   
        }
        .service-title{
            margin:10em 10em 0em 0em;
            width:100%;
            max-width: 100%;
            height:56%;
            background:-webkit-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
            background:-moz-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
            background:-o-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
            background:linear-gradient(rgba(0,8,2,0.01),rgb(0, 0, 0));
        }
        @keyframes grow{
            from{width:0%;}
            to{width:100%}
        }
        .service-title h2{
            font-size:4rem;
            color:#f3f3f3;
            text-transform: uppercase;
            padding-left:0.5em;
            font-weight: bolder;
            animation-name:ani;
            animation-duration:5s;
            animation-timing-function:ease-in-out;
            animation-iteration-count: 1;
            animation-direction: both;
        }
        @keyframes ani{
            from{opacity: 0%;}
            to{opacity:100%}
            }
        
        #serviceimgban{
            background:url(./images/mensinGoldiming/service.jpg);
            background-position: center;
            background-repeat: no-repeat;
            background-size:300%;
            height:100vh;
            animation: first-animation 8s ease-out 1 both;
        }
        
        
        @keyframes first-animation{
            0%{opacity: 1; background-size:500%;}
            100%{opacity:1; background-size:200%;}
        }
        .service-box{
            width:100%;
            max-width:100%;
            margin:3em 3em 3em 3em;
        }
        hr{
            margin-top:0.5em;
            margin-bottom:0.5em;
        }
        #buildingConstruction{
            margin:0.8em;
        }
        .buildingConstruction h2 {
            margin: 0.2em;
            font-size: 2rem;
            text-transform: uppercase;
            color:#525151;
            animation: bc-Animation 2s ease  1 alternate both;
        }
        
        @keyframes bc-Animation{
            0%{opacity:0; transform: translateY(80%); }
            20%{opacity:0;}
            50%{opacity: 1; transform: translateY(0%);}
            100%{opacity: 1; transform:translateY(0%)}
        }
        
        
        .bc-sector{
            line-height: 1.5rem;
            font-size: 1rem;
        }
        .buildingConstruction h3{
            margin: 0.5em 0em 0.5em 0em;
            color:#525151;
        }
        
        .buildingConstruction ul{
            line-height:1.7em;
        }
        .sector-covered{
            margin-left:3em;
        }
        
        #civilEng-infra h2{
            margin-top: 1em;
            color:#525151;
            font-size:2rem;
            animation: bc-Animation 5s ease  1 alternate both;
        }
        
        @keyframes bc-Animation{
            0%{opacity:0; transform: translateY(80%); }
            20%{opacity:0;}
            50%{opacity: 1; transform: translateY(0%);}
            100%{opacity: 1; transform:translateY(0%)}
        }
        .civilEng-infra h3{
            margin: 0.5em 0em 0.5em 0em;
            color:#525151;
        }
        
        .civilEng-infra ul{
            line-height: 1.7em;
        }
        #roads-earthworks h2{
            margin-top: 1em;
            font-size:2rem;
            color:#525151;
            animation: bc-Animation 5s ease  1 alternate both;
        }
        
        @keyframes bc-Animation{
            0%{opacity:0; transform: translateY(80%); }
            20%{opacity:0;}
            50%{opacity: 1; transform: translateY(0%);}
            100%{opacity: 1; transform:translateY(0%)}
        }
        
        .roads-earthworks h3{
            margin: 0.5em 0em 0.5em 0em;
            color:#525151;
        }
        .roads-earthworks ul{
            line-height:1.7em;
        }
        
        #fabrication h2{
            margin-top: 1em;
            font-size: 2rem;
            color:#525151;
            animation: bc-Animation 5s ease  1 alternate both;
        }
        
        @keyframes bc-Animation{
            0%{opacity:0; transform: translateY(80%); }
            20%{opacity:0;}
            50%{opacity: 1; transform: translateY(0%);}
            100%{opacity: 1; transform:translateY(0%)}
        }
        
        .fabrication ul{
         line-height:1.7em;
        }
        
        #pipiConst h2{
            margin-top: 1em;
            font-size: 2rem;
            color:#525151;
            animation: bc-Animation 5s ease  1 alternate both;
        }
        
        @keyframes bc-Animation{
            0%{opacity:0; transform: translateY(80%); }
            20%{opacity:0;}
            50%{opacity: 1; transform: translateY(0%);}
            100%{opacity: 1; transform:translateY(0%)}
        }
        
        .pipiConst p{
            line-height: 1.7em;
        }
        .supply h2{
            margin-top: 1em;
            font-size: 2rem;
            color:#525151;
            animation: bc-Animation 5s ease  1 alternate both;
        }
        
        @keyframes bc-Animation{
            0%{opacity:0; transform: translateY(80%); }
            20%{opacity:0;}
            50%{opacity: 1; transform: translateY(0%);}
            100%{opacity: 1; transform:translateY(0%)}
        }
        .supply p{
            line-height:1.7em;
        }
         .kasService{
        
            margin:2em 0 0 3em;
            line-height:1.5em;
         }
        
        
         @media (max-width:658px){
           
            .service-title{
                margin-top:30em;
                margin-left:10em;
                width:50%;
                background-color: rgba(8, 2, 2, 0.6)
        }
        .service-title h2{
                font-size:3rem;
                color:#f3f3f3;
                padding-left:0.5em;
                font-weight: bolder;   
         }
        }
    }
    
    
    /*-------------Portfolio-----------------*/
    .portfolio-container{
        display:block;
        background: url(/images/mensinGoldiming/bbb.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #083502;
        background-blend-mode:soft-light;
    }
    
    
    .portfolio-title{
        padding-top:10em;
        padding-left:10em;
    }
    .portfolio-title h2{
        font-size: 3rem;
        color:#fcfcfc;
        text-transform: uppercase;
        animation: portfolio-title 2s ease-in-out  1 alternate both;
    }
    @keyframes portfolio-title {
        0%{opacity:0; transform:translateY(80%);}
        20%{opacity:0}
        50%{opacity:1; transform:translateY(0%)} 
        100%{opacity:1; transform:translateY(0%)}
    }
    
    .portfolio-quote{
        padding-top:0.2em;
        width:100%;
        max-width:70%;
        animation: portfolio-quote 2s ease-in-out  1 alternate both;
    }
    .portfolio-quote p{
        color:#ffffff;
    }
    @keyframes portfolio-quote {
        0%{opacity:0; transform:translateX(5%);}
        20%{opacity:0}
        50%{opacity:1; transform:translateX(0%)} 
        100%{opacity:1; transform:translateX(0%)}
    }
    #contact-btn{
      width:10em;
      height:3em;
      margin-top:1em;
      border-radius:20px;
      background-color:#54f813;
      animation: portfolio-quote 2s ease-in-out  1 alternate both;
      
    }
    
    .portfolio-container ul{
        margin:1em 1em ;
        display: flex;
        gap:1.2em;
        flex-flow:row wrap;
    }
    
    
    .projects-profile li{
        display: inline-block;
        padding:0.5em;
    }
    .port-link{
        color:#f3f3f3;
        font-weight: 600;
        text-decoration: none;
        padding:0.3em;
        border-bottom: #54f813;
        transition:border-bottom 0.8s ease-in;
    
    }
    .projects-profile  a:hover{
        border-bottom:#54f813 0.2em solid ;
        color:#54f813;
        
    }
    
    #contact-btn h5{
    padding:0.5em;
    text-align: center;
    color:rgba(1, 26, 1, 0.933);
    animation: portfolio-title 2s ease-in-out  1 alternate both;
    }
    
    .port-project{
        margin-top:3em;
        margin-bottom:4em;
        display: flex;
        gap:1.5em;
        justify-content:center;
        flex-flow:row wrap;
       align-items: center;
       align-content: center;
        
    }
    
    .portImg-container{
        width:30em;
        height:20em;
        background-color:#083502;
        
    }
    
    .portImg-container h2{
        margin:6em 2em;
        color:#f3f3f3;
        text-transform: uppercase;
        text-shadow: #000 2px 2px 6px;
        font-weight: 800;
    }
    
    #portImg-container1{
        background-image: url(./images/portfolio/MENSIN\ GOLD\ BIBINI\ LIMITED\ TSF\ REHABILITATION\ PROJECT\ 1-1.jpg);
        background-size: cover;
        background-repeat:no-repeat;
    }
    #portImg-container2{
        background-image: url(./images/portfolio/IMG-20220103-WA0030.jpg);
        background-size: cover;
        background-repeat:no-repeat;
    }
    #portImg-container3{
        background-image: url(./images/portfolio/IMG-20220103-WA0010.jpg);
        background-size: cover;
        background-repeat:no-repeat;
    }
    #portImg-container4{
        background-image: url(./images/portfolio/IMG-20220103-WA0018.jpg);
        background-size: cover;
        background-repeat:no-repeat;
    }
    #portImg-container5{
        background-image: url(./images/portfolio/IMG-20220103-WA0018.jpg);
        background-size: cover;
        background-repeat:no-repeat;
    }
    #portImg-container6{
        background-image: url(./images/portfolio/IMG-20220103-WA0019.jpg);
        background-size: cover;
        background-repeat:no-repeat;
    }
    #portImg-container7{
        background-image: url(./images/portfolio/IMG-20220103-WA0024.jpg);
        background-size: cover;
        background-repeat:no-repeat;
    }
    #portImg-container8{
        background-image: url(./images/portfolio/newwkaslive\ profile-4.jpg);
        background-size: cover;
        background-repeat:no-repeat;
    }
}
@media(max-width:768px){
    main{
        margin: 1em 2em;
    }
    .serviceban{
        width:100%;
        height:100vh;
        overflow: hidden;
        position: relative;
    }
    
    
    .serviceban .serviceimgban{
        width:100%;
        height:100%;
        position:absolute;
        top:0px;
        -webkit-transition: all ease-in-out 600ms;
        -moz-transition: all ease-in-out 500ms;
        -o-transition: all ease-in-out 500ms;
        transition: all ease-in-out 500ms;
    }
    
    .service-title h2{
        margin:6em 0em 0em 1em;
        font-size: 3rem;
        text-transform: uppercase;
        color:rgb(255, 255, 255);
        animation:service_title 4s ease-in-out  1 alternate both;
    }
    
    @keyframes service_title {
        0%{opacity:0; transform: translateY(80%);}
        30%{opacity:0;}
        50%{opacity:0.5; transform: translateY(0%);}
        100%{opacity:1; transform:translateY(0%)}   
    }
    .service-title{
        margin-top:20em;
        width:100%;
        height:40%;
        background:-webkit-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
        background:-moz-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
        background:-o-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
        background:linear-gradient(rgba(0,8,2,0.01),rgb(0, 0, 0));
    }
    
        @keyframes grow{
            from{width:0%;}
            to{width:25%}
        }
    
    .service-title h2{
        font-size:5rem;
        color:#f3f3f3;
        text-transform: uppercase;
        padding-left:0.5em;
        font-weight: bolder;
        animation-name:ani;
        animation-duration:5s;
        animation-timing-function:ease-in-out;
        animation-iteration-count: 1;
        animation-direction: both;
    }
    @keyframes ani{
        from{opacity: 0%;}
        to{opacity:100%}
        }
    
    #serviceimgban{
        background:url(./images/mensinGoldiming/service.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size:300%;
        height:100vh;
        animation: first-animation 8s ease-out 1 both;
    }
    
    @keyframes first-animation{
    from{background-size: 300%;}
    to{background-size: 100%;}
    }
    .service-box{
        width:100%;
        max-width:90%;
        margin:3em 3em 3em 3em;
    }
    hr{
        margin-top:0.5em;
        margin-bottom:0.5em;
    }
    #buildingConstruction{
        margin:0.8em;
    }
    .buildingConstruction h2 {
        margin: 0.2em;
        font-size: 2rem;
        text-transform: uppercase;
        color:#525151;
        animation: bc-Animation 2s ease  1 alternate both;
    }
    
    @keyframes bc-Animation{
        0%{opacity:0; transform: translateY(80%); }
        20%{opacity:0;}
        50%{opacity: 1; transform: translateY(0%);}
        100%{opacity: 1; transform:translateY(0%)}
    }
    
    .bc-sector{
        line-height: 1.5rem;
        font-size: 1rem;
    }
    .buildingConstruction h3{
        margin: 0.5em 0em 0.5em 0em;
        color:#525151;
    }
    
    .buildingConstruction ul{
        line-height:1.7em;
    }
    .sector-covered{
        margin-left:3em;
    }
    
    #civilEng-infra h2{
        margin-top: 1em;
        color:#525151;
        font-size:2rem;
        animation: bc-Animation 5s ease  1 alternate both;
    }
    
    @keyframes bc-Animation{
        0%{opacity:0; transform: translateY(80%); }
        20%{opacity:0;}
        50%{opacity: 1; transform: translateY(0%);}
        100%{opacity: 1; transform:translateY(0%)}
    }
    .civilEng-infra h3{
        margin: 0.5em 0em 0.5em 0em;
        color:#525151;
    }
    
    .civilEng-infra ul{
        line-height: 1.7em;
    }
    #roads-earthworks h2{
        margin-top: 1em;
        font-size:2rem;
        color:#525151;
        animation: bc-Animation 5s ease  1 alternate both;
    }
    
    @keyframes bc-Animation{
        0%{opacity:0; transform: translateY(80%); }
        20%{opacity:0;}
        50%{opacity: 1; transform: translateY(0%);}
        100%{opacity: 1; transform:translateY(0%)}
    }
    
    .roads-earthworks h3{
        margin: 0.5em 0em 0.5em 0em;
        color:#525151;
    }
    .roads-earthworks ul{
        line-height:1.7em;
    }
    
    #fabrication h2{
        margin-top: 1em;
        font-size: 2rem;
        color:#525151;
        animation: bc-Animation 5s ease  1 alternate both;
    }
    
    @keyframes bc-Animation{
        0%{opacity:0; transform: translateY(80%); }
        20%{opacity:0;}
        50%{opacity: 1; transform: translateY(0%);}
        100%{opacity: 1; transform:translateY(0%)}
    }
    
    .fabrication ul{
     line-height:1.7em;
    }
    
    #pipiConst h2{
        margin-top: 1em;
        font-size: 2rem;
        color:#525151;
        animation: bc-Animation 5s ease  1 alternate both;
    }
    
    @keyframes bc-Animation{
        0%{opacity:0; transform: translateY(80%); }
        20%{opacity:0;}
        50%{opacity: 1; transform: translateY(0%);}
        100%{opacity: 1; transform:translateY(0%)}
    }
    
    .pipiConst p{
        line-height: 1.7em;
    }
    .supply h2{
        margin-top: 1em;
        font-size: 2rem;
        color:#525151;
        animation: bc-Animation 5s ease  1 alternate both;
    }
    
    @keyframes bc-Animation{
        0%{opacity:0; transform: translateY(80%); }
        20%{opacity:0;}
        50%{opacity: 1; transform: translateY(0%);}
        100%{opacity: 1; transform:translateY(0%)}
    }
    .supply p{
        line-height:1.7em;
    }
     .kasService{
    
        margin:2em 0 0 3em;
        line-height:1.5em;
     }
    
    
     @media (max-width:658px){
       
        .service-title{
            margin-top:30em;
            margin-left:10em;
            width:50%;
            background-color: rgba(8, 2, 2, 0.6)
    }
    .service-title h2{
            font-size:3rem;
            color:#f3f3f3;
            padding-left:0.5em;
            font-weight: bolder;   
     }
    }
    
    @media (max-width:800px){
       
        main{
            margin: 1em 2em;
        }
        .serviceban{
            width:100%;
            height:100vh;
            overflow: hidden;
            position: relative;
        }
        
        
        .serviceban .serviceimgban{
            width:100%;
            height:100%;
            position:absolute;
            top:0px;
            -webkit-transition: all ease-in-out 600ms;
            -moz-transition: all ease-in-out 500ms;
            -o-transition: all ease-in-out 500ms;
            transition: all ease-in-out 500ms;
        }
        
        .service-title h2{
            margin:6em 0em 0em 1em;
            font-size: 4rem;
            text-transform: uppercase;
            color:rgb(255, 255, 255);
            animation:service_title 4s ease-in-out  1 alternate both;
        }
        
        @keyframes service_title {
            0%{opacity:0; transform: translateY(80%);}
            30%{opacity:0;}
            50%{opacity:0.5; transform: translateY(0%);}
            100%{opacity:1; transform:translateY(0%)}   
        }
        .service-title{
            margin:10em 10em 0em 0em;
            width:100%;
            max-width: 100%;
            height:56%;
            background:-webkit-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
            background:-moz-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
            background:-o-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
            background:linear-gradient(rgba(0,8,2,0.01),rgb(0, 0, 0));
        }
        @keyframes grow{
            from{width:0%;}
            to{width:100%}
        }
        .service-title h2{
            font-size:4rem;
            color:#f3f3f3;
            text-transform: uppercase;
            padding-left:0.5em;
            font-weight: bolder;
            animation-name:ani;
            animation-duration:5s;
            animation-timing-function:ease-in-out;
            animation-iteration-count: 1;
            animation-direction: both;
        }
        @keyframes ani{
            from{opacity: 0%;}
            to{opacity:100%}
            }
        
        #serviceimgban{
            background:url(./images/mensinGoldiming/service.jpg);
            background-position: center;
            background-repeat: no-repeat;
            background-size:300%;
            height:100vh;
            animation: first-animation 8s ease-out 1 both;
        }
        
        
        @keyframes first-animation{
            0%{opacity: 1; background-size:500%;}
            100%{opacity:1; background-size:200%;}
        }
        .service-box{
            width:100%;
            max-width:100%;
            margin:3em 3em 3em 3em;
        }
        hr{
            margin-top:0.5em;
            margin-bottom:0.5em;
        }
        #buildingConstruction{
            margin:0.8em;
        }
        .buildingConstruction h2 {
            margin: 0.2em;
            font-size: 2rem;
            text-transform: uppercase;
            color:#525151;
            animation: bc-Animation 2s ease  1 alternate both;
        }
        
        @keyframes bc-Animation{
            0%{opacity:0; transform: translateY(80%); }
            20%{opacity:0;}
            50%{opacity: 1; transform: translateY(0%);}
            100%{opacity: 1; transform:translateY(0%)}
        }
        
        
        .bc-sector{
            line-height: 1.5rem;
            font-size: 1rem;
        }
        .buildingConstruction h3{
            margin: 0.5em 0em 0.5em 0em;
            color:#525151;
        }
        
        .buildingConstruction ul{
            line-height:1.7em;
        }
        .sector-covered{
            margin-left:3em;
        }
        
        #civilEng-infra h2{
            margin-top: 1em;
            color:#525151;
            font-size:2rem;
            animation: bc-Animation 5s ease  1 alternate both;
        }
        
        @keyframes bc-Animation{
            0%{opacity:0; transform: translateY(80%); }
            20%{opacity:0;}
            50%{opacity: 1; transform: translateY(0%);}
            100%{opacity: 1; transform:translateY(0%)}
        }
        .civilEng-infra h3{
            margin: 0.5em 0em 0.5em 0em;
            color:#525151;
        }
        
        .civilEng-infra ul{
            line-height: 1.7em;
        }
        #roads-earthworks h2{
            margin-top: 1em;
            font-size:2rem;
            color:#525151;
            animation: bc-Animation 5s ease  1 alternate both;
        }
        
        @keyframes bc-Animation{
            0%{opacity:0; transform: translateY(80%); }
            20%{opacity:0;}
            50%{opacity: 1; transform: translateY(0%);}
            100%{opacity: 1; transform:translateY(0%)}
        }
        
        .roads-earthworks h3{
            margin: 0.5em 0em 0.5em 0em;
            color:#525151;
        }
        .roads-earthworks ul{
            line-height:1.7em;
        }
        
        #fabrication h2{
            margin-top: 1em;
            font-size: 2rem;
            color:#525151;
            animation: bc-Animation 5s ease  1 alternate both;
        }
        
        @keyframes bc-Animation{
            0%{opacity:0; transform: translateY(80%); }
            20%{opacity:0;}
            50%{opacity: 1; transform: translateY(0%);}
            100%{opacity: 1; transform:translateY(0%)}
        }
        
        .fabrication ul{
         line-height:1.7em;
        }
        
        #pipiConst h2{
            margin-top: 1em;
            font-size: 2rem;
            color:#525151;
            animation: bc-Animation 5s ease  1 alternate both;
        }
        
        @keyframes bc-Animation{
            0%{opacity:0; transform: translateY(80%); }
            20%{opacity:0;}
            50%{opacity: 1; transform: translateY(0%);}
            100%{opacity: 1; transform:translateY(0%)}
        }
        
        .pipiConst p{
            line-height: 1.7em;
        }
        .supply h2{
            margin-top: 1em;
            font-size: 2rem;
            color:#525151;
            animation: bc-Animation 5s ease  1 alternate both;
        }
        
        @keyframes bc-Animation{
            0%{opacity:0; transform: translateY(80%); }
            20%{opacity:0;}
            50%{opacity: 1; transform: translateY(0%);}
            100%{opacity: 1; transform:translateY(0%)}
        }
        .supply p{
            line-height:1.7em;
        }
         .kasService{
        
            margin:2em 0 0 3em;
            line-height:1.5em;
         }
        
        
         @media (max-width:658px){
           
            .service-title{
                margin-top:30em;
                margin-left:10em;
                width:50%;
                background-color: rgba(8, 2, 2, 0.6)
        }
        .service-title h2{
                font-size:3rem;
                color:#f3f3f3;
                padding-left:0.5em;
                font-weight: bolder;   
         }
        }
    }
    
    
    /*-------------Portfolio-----------------*/
    .portfolio-container{
        display:block;
        background: url(/images/mensinGoldiming/bbb.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #083502;
        background-blend-mode:soft-light;
    }
    
    
    .portfolio-title{
        padding-top:10em;
        padding-left:10em;
    }
    .portfolio-title h2{
        font-size: 3rem;
        color:#fcfcfc;
        text-transform: uppercase;
        animation: portfolio-title 2s ease-in-out  1 alternate both;
    }
    @keyframes portfolio-title {
        0%{opacity:0; transform:translateY(80%);}
        20%{opacity:0}
        50%{opacity:1; transform:translateY(0%)} 
        100%{opacity:1; transform:translateY(0%)}
    }
    
    .portfolio-quote{
        padding-top:0.2em;
        width:100%;
        max-width:70%;
        animation: portfolio-quote 2s ease-in-out  1 alternate both;
    }
    .portfolio-quote p{
        color:#ffffff;
    }
    @keyframes portfolio-quote {
        0%{opacity:0; transform:translateX(5%);}
        20%{opacity:0}
        50%{opacity:1; transform:translateX(0%)} 
        100%{opacity:1; transform:translateX(0%)}
    }
    #contact-btn{
      width:10em;
      height:3em;
      margin-top:1em;
      border-radius:20px;
      background-color:#54f813;
      animation: portfolio-quote 2s ease-in-out  1 alternate both;
      
    }
    
    .portfolio-container ul{
        margin:1em 1em ;
        display: flex;
        gap:1.2em;
        flex-flow:row wrap;
    }
    
    
    .projects-profile li{
        display: inline-block;
        padding:0.5em;
    }
    .port-link{
        color:#f3f3f3;
        font-weight: 600;
        text-decoration: none;
        padding:0.3em;
        border-bottom: #54f813;
        transition:border-bottom 0.8s ease-in;
    
    }
    .projects-profile  a:hover{
        border-bottom:#54f813 0.2em solid ;
        color:#54f813;
        
    }
    
    #contact-btn h5{
    padding:0.5em;
    text-align: center;
    color:rgba(1, 26, 1, 0.933);
    animation: portfolio-title 2s ease-in-out  1 alternate both;
    }
    
    .port-project{
        margin-top:3em;
        margin-bottom:4em;
        display: flex;
        gap:1.5em;
        justify-content:center;
        flex-flow:row wrap;
       align-items: center;
       align-content: center;
        
    }
    
    .portImg-container{
        width:30em;
        height:20em;
        background-color:#083502;
        
    }
    
    .portImg-container h2{
        margin:6em 2em;
        color:#f3f3f3;
        text-transform: uppercase;
        text-shadow: #000 2px 2px 6px;
        font-weight: 800;
    }
    
    #portImg-container1{
        background-image: url(./images/portfolio/MENSIN\ GOLD\ BIBINI\ LIMITED\ TSF\ REHABILITATION\ PROJECT\ 1-1.jpg);
        background-size: cover;
        background-repeat:no-repeat;
    }
    #portImg-container2{
        background-image: url(./images/portfolio/IMG-20220103-WA0030.jpg);
        background-size: cover;
        background-repeat:no-repeat;
    }
    #portImg-container3{
        background-image: url(./images/portfolio/IMG-20220103-WA0010.jpg);
        background-size: cover;
        background-repeat:no-repeat;
    }
    #portImg-container4{
        background-image: url(./images/portfolio/IMG-20220103-WA0018.jpg);
        background-size: cover;
        background-repeat:no-repeat;
    }
    #portImg-container5{
        background-image: url(./images/portfolio/IMG-20220103-WA0018.jpg);
        background-size: cover;
        background-repeat:no-repeat;
    }
    #portImg-container6{
        background-image: url(./images/portfolio/IMG-20220103-WA0019.jpg);
        background-size: cover;
        background-repeat:no-repeat;
    }
    #portImg-container7{
        background-image: url(./images/portfolio/IMG-20220103-WA0024.jpg);
        background-size: cover;
        background-repeat:no-repeat;
    }
    #portImg-container8{
        background-image: url(./images/portfolio/newwkaslive\ profile-4.jpg);
        background-size: cover;
        background-repeat:no-repeat;
    }
}
@media(max-width:1024px){
    main{
        margin: 1em 2em;
    }
    .serviceban{
        width:100%;
        height:100vh;
        overflow: hidden;
        position: relative;
    }
    
    
    .serviceban .serviceimgban{
        width:100%;
        height:100%;
        position:absolute;
        top:0px;
        -webkit-transition: all ease-in-out 600ms;
        -moz-transition: all ease-in-out 500ms;
        -o-transition: all ease-in-out 500ms;
        transition: all ease-in-out 500ms;
    }
    
    .service-title h2{
        margin:6em 0em 0em 1em;
        font-size: 3rem;
        text-transform: uppercase;
        color:rgb(255, 255, 255);
        animation:service_title 4s ease-in-out  1 alternate both;
    }
    
    @keyframes service_title {
        0%{opacity:0; transform: translateY(80%);}
        30%{opacity:0;}
        50%{opacity:0.5; transform: translateY(0%);}
        100%{opacity:1; transform:translateY(0%)}   
    }
    .service-title{
        margin-top:20em;
        width:100%;
        height:40%;
        background:-webkit-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
        background:-moz-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
        background:-o-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
        background:linear-gradient(rgba(0,8,2,0.01),rgb(0, 0, 0));
    }
    
        @keyframes grow{
            from{width:0%;}
            to{width:25%}
        }
    
    .service-title h2{
        font-size:5rem;
        color:#f3f3f3;
        text-transform: uppercase;
        padding-left:0.5em;
        font-weight: bolder;
        animation-name:ani;
        animation-duration:5s;
        animation-timing-function:ease-in-out;
        animation-iteration-count: 1;
        animation-direction: both;
    }
    @keyframes ani{
        from{opacity: 0%;}
        to{opacity:100%}
        }
    
    #serviceimgban{
        background:url(./images/mensinGoldiming/service.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size:300%;
        height:100vh;
        animation: first-animation 8s ease-out 1 both;
    }
    
    @keyframes first-animation{
    from{background-size: 300%;}
    to{background-size: 100%;}
    }
    .service-box{
        width:100%;
        max-width:90%;
        margin:3em 3em 3em 3em;
    }
    hr{
        margin-top:0.5em;
        margin-bottom:0.5em;
    }
    #buildingConstruction{
        margin:0.8em;
    }
    .buildingConstruction h2 {
        margin: 0.2em;
        font-size: 2rem;
        text-transform: uppercase;
        color:#525151;
        animation: bc-Animation 2s ease  1 alternate both;
    }
    
    @keyframes bc-Animation{
        0%{opacity:0; transform: translateY(80%); }
        20%{opacity:0;}
        50%{opacity: 1; transform: translateY(0%);}
        100%{opacity: 1; transform:translateY(0%)}
    }
    
    .bc-sector{
        line-height: 1.5rem;
        font-size: 1rem;
    }
    .buildingConstruction h3{
        margin: 0.5em 0em 0.5em 0em;
        color:#525151;
    }
    
    .buildingConstruction ul{
        line-height:1.7em;
    }
    .sector-covered{
        margin-left:3em;
    }
    
    #civilEng-infra h2{
        margin-top: 1em;
        color:#525151;
        font-size:2rem;
        animation: bc-Animation 5s ease  1 alternate both;
    }
    
    @keyframes bc-Animation{
        0%{opacity:0; transform: translateY(80%); }
        20%{opacity:0;}
        50%{opacity: 1; transform: translateY(0%);}
        100%{opacity: 1; transform:translateY(0%)}
    }
    .civilEng-infra h3{
        margin: 0.5em 0em 0.5em 0em;
        color:#525151;
    }
    
    .civilEng-infra ul{
        line-height: 1.7em;
    }
    #roads-earthworks h2{
        margin-top: 1em;
        font-size:2rem;
        color:#525151;
        animation: bc-Animation 5s ease  1 alternate both;
    }
    
    @keyframes bc-Animation{
        0%{opacity:0; transform: translateY(80%); }
        20%{opacity:0;}
        50%{opacity: 1; transform: translateY(0%);}
        100%{opacity: 1; transform:translateY(0%)}
    }
    
    .roads-earthworks h3{
        margin: 0.5em 0em 0.5em 0em;
        color:#525151;
    }
    .roads-earthworks ul{
        line-height:1.7em;
    }
    
    #fabrication h2{
        margin-top: 1em;
        font-size: 2rem;
        color:#525151;
        animation: bc-Animation 5s ease  1 alternate both;
    }
    
    @keyframes bc-Animation{
        0%{opacity:0; transform: translateY(80%); }
        20%{opacity:0;}
        50%{opacity: 1; transform: translateY(0%);}
        100%{opacity: 1; transform:translateY(0%)}
    }
    
    .fabrication ul{
     line-height:1.7em;
    }
    
    #pipiConst h2{
        margin-top: 1em;
        font-size: 2rem;
        color:#525151;
        animation: bc-Animation 5s ease  1 alternate both;
    }
    
    @keyframes bc-Animation{
        0%{opacity:0; transform: translateY(80%); }
        20%{opacity:0;}
        50%{opacity: 1; transform: translateY(0%);}
        100%{opacity: 1; transform:translateY(0%)}
    }
    
    .pipiConst p{
        line-height: 1.7em;
    }
    .supply h2{
        margin-top: 1em;
        font-size: 2rem;
        color:#525151;
        animation: bc-Animation 5s ease  1 alternate both;
    }
    
    @keyframes bc-Animation{
        0%{opacity:0; transform: translateY(80%); }
        20%{opacity:0;}
        50%{opacity: 1; transform: translateY(0%);}
        100%{opacity: 1; transform:translateY(0%)}
    }
    .supply p{
        line-height:1.7em;
    }
     .kasService{
    
        margin:2em 0 0 3em;
        line-height:1.5em;
     }
    
    
     @media (max-width:658px){
       
        .service-title{
            margin-top:30em;
            margin-left:10em;
            width:50%;
            background-color: rgba(8, 2, 2, 0.6)
    }
    .service-title h2{
            font-size:3rem;
            color:#f3f3f3;
            padding-left:0.5em;
            font-weight: bolder;   
     }
    }
    
    @media (max-width:800px){
       
        main{
            margin: 1em 2em;
        }
        .serviceban{
            width:100%;
            height:100vh;
            overflow: hidden;
            position: relative;
        }
        
        
        .serviceban .serviceimgban{
            width:100%;
            height:100%;
            position:absolute;
            top:0px;
            -webkit-transition: all ease-in-out 600ms;
            -moz-transition: all ease-in-out 500ms;
            -o-transition: all ease-in-out 500ms;
            transition: all ease-in-out 500ms;
        }
        
        .service-title h2{
            margin:6em 0em 0em 1em;
            font-size: 4rem;
            text-transform: uppercase;
            color:rgb(255, 255, 255);
            animation:service_title 4s ease-in-out  1 alternate both;
        }
        
        @keyframes service_title {
            0%{opacity:0; transform: translateY(80%);}
            30%{opacity:0;}
            50%{opacity:0.5; transform: translateY(0%);}
            100%{opacity:1; transform:translateY(0%)}   
        }
        .service-title{
            margin:10em 10em 0em 0em;
            width:100%;
            max-width: 100%;
            height:56%;
            background:-webkit-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
            background:-moz-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
            background:-o-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
            background:linear-gradient(rgba(0,8,2,0.01),rgb(0, 0, 0));
        }
        @keyframes grow{
            from{width:0%;}
            to{width:100%}
        }
        .service-title h2{
            font-size:4rem;
            color:#f3f3f3;
            text-transform: uppercase;
            padding-left:0.5em;
            font-weight: bolder;
            animation-name:ani;
            animation-duration:5s;
            animation-timing-function:ease-in-out;
            animation-iteration-count: 1;
            animation-direction: both;
        }
        @keyframes ani{
            from{opacity: 0%;}
            to{opacity:100%}
            }
        
        #serviceimgban{
            background:url(./images/mensinGoldiming/service.jpg);
            background-position: center;
            background-repeat: no-repeat;
            background-size:300%;
            height:100vh;
            animation: first-animation 8s ease-out 1 both;
        }
        
        
        @keyframes first-animation{
            0%{opacity: 1; background-size:500%;}
            100%{opacity:1; background-size:200%;}
        }
        .service-box{
            width:100%;
            max-width:100%;
            margin:3em 3em 3em 3em;
        }
        hr{
            margin-top:0.5em;
            margin-bottom:0.5em;
        }
        #buildingConstruction{
            margin:0.8em;
        }
        .buildingConstruction h2 {
            margin: 0.2em;
            font-size: 2rem;
            text-transform: uppercase;
            color:#525151;
            animation: bc-Animation 2s ease  1 alternate both;
        }
        
        @keyframes bc-Animation{
            0%{opacity:0; transform: translateY(80%); }
            20%{opacity:0;}
            50%{opacity: 1; transform: translateY(0%);}
            100%{opacity: 1; transform:translateY(0%)}
        }
        
        
        .bc-sector{
            line-height: 1.5rem;
            font-size: 1rem;
        }
        .buildingConstruction h3{
            margin: 0.5em 0em 0.5em 0em;
            color:#525151;
        }
        
        .buildingConstruction ul{
            line-height:1.7em;
        }
        .sector-covered{
            margin-left:3em;
        }
        
        #civilEng-infra h2{
            margin-top: 1em;
            color:#525151;
            font-size:2rem;
            animation: bc-Animation 5s ease  1 alternate both;
        }
        
        @keyframes bc-Animation{
            0%{opacity:0; transform: translateY(80%); }
            20%{opacity:0;}
            50%{opacity: 1; transform: translateY(0%);}
            100%{opacity: 1; transform:translateY(0%)}
        }
        .civilEng-infra h3{
            margin: 0.5em 0em 0.5em 0em;
            color:#525151;
        }
        
        .civilEng-infra ul{
            line-height: 1.7em;
        }
        #roads-earthworks h2{
            margin-top: 1em;
            font-size:2rem;
            color:#525151;
            animation: bc-Animation 5s ease  1 alternate both;
        }
        
        @keyframes bc-Animation{
            0%{opacity:0; transform: translateY(80%); }
            20%{opacity:0;}
            50%{opacity: 1; transform: translateY(0%);}
            100%{opacity: 1; transform:translateY(0%)}
        }
        
        .roads-earthworks h3{
            margin: 0.5em 0em 0.5em 0em;
            color:#525151;
        }
        .roads-earthworks ul{
            line-height:1.7em;
        }
        
        #fabrication h2{
            margin-top: 1em;
            font-size: 2rem;
            color:#525151;
            animation: bc-Animation 5s ease  1 alternate both;
        }
        
        @keyframes bc-Animation{
            0%{opacity:0; transform: translateY(80%); }
            20%{opacity:0;}
            50%{opacity: 1; transform: translateY(0%);}
            100%{opacity: 1; transform:translateY(0%)}
        }
        
        .fabrication ul{
         line-height:1.7em;
        }
        
        #pipiConst h2{
            margin-top: 1em;
            font-size: 2rem;
            color:#525151;
            animation: bc-Animation 5s ease  1 alternate both;
        }
        
        @keyframes bc-Animation{
            0%{opacity:0; transform: translateY(80%); }
            20%{opacity:0;}
            50%{opacity: 1; transform: translateY(0%);}
            100%{opacity: 1; transform:translateY(0%)}
        }
        
        .pipiConst p{
            line-height: 1.7em;
        }
        .supply h2{
            margin-top: 1em;
            font-size: 2rem;
            color:#525151;
            animation: bc-Animation 5s ease  1 alternate both;
        }
        
        @keyframes bc-Animation{
            0%{opacity:0; transform: translateY(80%); }
            20%{opacity:0;}
            50%{opacity: 1; transform: translateY(0%);}
            100%{opacity: 1; transform:translateY(0%)}
        }
        .supply p{
            line-height:1.7em;
        }
         .kasService{
        
            margin:2em 0 0 3em;
            line-height:1.5em;
         }
        
        
         @media (max-width:658px){
           
            .service-title{
                margin-top:30em;
                margin-left:10em;
                width:50%;
                background-color: rgba(8, 2, 2, 0.6)
        }
        .service-title h2{
                font-size:3rem;
                color:#f3f3f3;
                padding-left:0.5em;
                font-weight: bolder;   
         }
        }
    }
    
    
    /*-------------Portfolio-----------------*/
    .portfolio-container{
        display:block;
        background: url(/images/mensinGoldiming/bbb.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #083502;
        background-blend-mode:soft-light;
    }
    
    
    .portfolio-title{
        padding-top:10em;
        padding-left:10em;
    }
    .portfolio-title h2{
        font-size: 3rem;
        color:#fcfcfc;
        text-transform: uppercase;
        animation: portfolio-title 2s ease-in-out  1 alternate both;
    }
    @keyframes portfolio-title {
        0%{opacity:0; transform:translateY(80%);}
        20%{opacity:0}
        50%{opacity:1; transform:translateY(0%)} 
        100%{opacity:1; transform:translateY(0%)}
    }
    
    .portfolio-quote{
        padding-top:0.2em;
        width:100%;
        max-width:70%;
        animation: portfolio-quote 2s ease-in-out  1 alternate both;
    }
    .portfolio-quote p{
        color:#ffffff;
    }
    @keyframes portfolio-quote {
        0%{opacity:0; transform:translateX(5%);}
        20%{opacity:0}
        50%{opacity:1; transform:translateX(0%)} 
        100%{opacity:1; transform:translateX(0%)}
    }
    #contact-btn{
      width:10em;
      height:3em;
      margin-top:1em;
      border-radius:20px;
      background-color:#54f813;
      animation: portfolio-quote 2s ease-in-out  1 alternate both;
      
    }
    
    .portfolio-container ul{
        margin:1em 1em ;
        display: flex;
        gap:1.2em;
        flex-flow:row wrap;
    }
    
    
    .projects-profile li{
        display: inline-block;
        padding:0.5em;
    }
    .port-link{
        color:#f3f3f3;
        font-weight: 600;
        text-decoration: none;
        padding:0.3em;
        border-bottom: #54f813;
        transition:border-bottom 0.8s ease-in;
    
    }
    .projects-profile  a:hover{
        border-bottom:#54f813 0.2em solid ;
        color:#54f813;
        
    }
    
    #contact-btn h5{
    padding:0.5em;
    text-align: center;
    color:rgba(1, 26, 1, 0.933);
    animation: portfolio-title 2s ease-in-out  1 alternate both;
    }
    
    .port-project{
        margin-top:3em;
        margin-bottom:4em;
        display: flex;
        gap:1.5em;
        justify-content:center;
        flex-flow:row wrap;
       align-items: center;
       align-content: center;
        
    }
    
    .portImg-container{
        width:30em;
        height:20em;
        background-color:#083502;
        
    }
    
    .portImg-container h2{
        margin:6em 2em;
        color:#f3f3f3;
        text-transform: uppercase;
        text-shadow: #000 2px 2px 6px;
        font-weight: 800;
    }
    
    #portImg-container1{
        background-image: url(./images/portfolio/MENSIN\ GOLD\ BIBINI\ LIMITED\ TSF\ REHABILITATION\ PROJECT\ 1-1.jpg);
        background-size: cover;
        background-repeat:no-repeat;
    }
    #portImg-container2{
        background-image: url(./images/portfolio/IMG-20220103-WA0030.jpg);
        background-size: cover;
        background-repeat:no-repeat;
    }
    #portImg-container3{
        background-image: url(./images/portfolio/IMG-20220103-WA0010.jpg);
        background-size: cover;
        background-repeat:no-repeat;
    }
    #portImg-container4{
        background-image: url(./images/portfolio/IMG-20220103-WA0018.jpg);
        background-size: cover;
        background-repeat:no-repeat;
    }
    #portImg-container5{
        background-image: url(./images/portfolio/IMG-20220103-WA0018.jpg);
        background-size: cover;
        background-repeat:no-repeat;
    }
    #portImg-container6{
        background-image: url(./images/portfolio/IMG-20220103-WA0019.jpg);
        background-size: cover;
        background-repeat:no-repeat;
    }
    #portImg-container7{
        background-image: url(./images/portfolio/IMG-20220103-WA0024.jpg);
        background-size: cover;
        background-repeat:no-repeat;
    }
    #portImg-container8{
        background-image: url(./images/portfolio/newwkaslive\ profile-4.jpg);
        background-size: cover;
        background-repeat:no-repeat;
    }
}
@media(max-width:1200px){
    main{
        margin: 1em 2em;
    }
    .serviceban{
        width:100%;
        height:100vh;
        overflow: hidden;
        position: relative;
    }
    
    
    .serviceban .serviceimgban{
        width:100%;
        height:100%;
        position:absolute;
        top:0px;
        -webkit-transition: all ease-in-out 600ms;
        -moz-transition: all ease-in-out 500ms;
        -o-transition: all ease-in-out 500ms;
        transition: all ease-in-out 500ms;
    }
    
    .service-title h2{
        margin:6em 0em 0em 1em;
        font-size: 3rem;
        text-transform: uppercase;
        color:rgb(255, 255, 255);
        animation:service_title 4s ease-in-out  1 alternate both;
    }
    
    @keyframes service_title {
        0%{opacity:0; transform: translateY(80%);}
        30%{opacity:0;}
        50%{opacity:0.5; transform: translateY(0%);}
        100%{opacity:1; transform:translateY(0%)}   
    }
    .service-title{
        margin-top:20em;
        width:100%;
        height:40%;
        background:-webkit-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
        background:-moz-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
        background:-o-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
        background:linear-gradient(rgba(0,8,2,0.01),rgb(0, 0, 0));
    }
    
        @keyframes grow{
            from{width:0%;}
            to{width:25%}
        }
    
    .service-title h2{
        font-size:5rem;
        color:#f3f3f3;
        text-transform: uppercase;
        padding-left:0.5em;
        font-weight: bolder;
        animation-name:ani;
        animation-duration:5s;
        animation-timing-function:ease-in-out;
        animation-iteration-count: 1;
        animation-direction: both;
    }
    @keyframes ani{
        from{opacity: 0%;}
        to{opacity:100%}
        }
    
    #serviceimgban{
        background:url(./images/mensinGoldiming/service.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size:300%;
        height:100vh;
        animation: first-animation 8s ease-out 1 both;
    }
    
    @keyframes first-animation{
    from{background-size: 300%;}
    to{background-size: 100%;}
    }
    .service-box{
        width:100%;
        max-width:90%;
        margin:3em 3em 3em 3em;
    }
    hr{
        margin-top:0.5em;
        margin-bottom:0.5em;
    }
    #buildingConstruction{
        margin:0.8em;
    }
    .buildingConstruction h2 {
        margin: 0.2em;
        font-size: 2rem;
        text-transform: uppercase;
        color:#525151;
        animation: bc-Animation 2s ease  1 alternate both;
    }
    
    @keyframes bc-Animation{
        0%{opacity:0; transform: translateY(80%); }
        20%{opacity:0;}
        50%{opacity: 1; transform: translateY(0%);}
        100%{opacity: 1; transform:translateY(0%)}
    }
    
    .bc-sector{
        line-height: 1.5rem;
        font-size: 1rem;
    }
    .buildingConstruction h3{
        margin: 0.5em 0em 0.5em 0em;
        color:#525151;
    }
    
    .buildingConstruction ul{
        line-height:1.7em;
    }
    .sector-covered{
        margin-left:3em;
    }
    
    #civilEng-infra h2{
        margin-top: 1em;
        color:#525151;
        font-size:2rem;
        animation: bc-Animation 5s ease  1 alternate both;
    }
    
    @keyframes bc-Animation{
        0%{opacity:0; transform: translateY(80%); }
        20%{opacity:0;}
        50%{opacity: 1; transform: translateY(0%);}
        100%{opacity: 1; transform:translateY(0%)}
    }
    .civilEng-infra h3{
        margin: 0.5em 0em 0.5em 0em;
        color:#525151;
    }
    
    .civilEng-infra ul{
        line-height: 1.7em;
    }
    #roads-earthworks h2{
        margin-top: 1em;
        font-size:2rem;
        color:#525151;
        animation: bc-Animation 5s ease  1 alternate both;
    }
    
    @keyframes bc-Animation{
        0%{opacity:0; transform: translateY(80%); }
        20%{opacity:0;}
        50%{opacity: 1; transform: translateY(0%);}
        100%{opacity: 1; transform:translateY(0%)}
    }
    
    .roads-earthworks h3{
        margin: 0.5em 0em 0.5em 0em;
        color:#525151;
    }
    .roads-earthworks ul{
        line-height:1.7em;
    }
    
    #fabrication h2{
        margin-top: 1em;
        font-size: 2rem;
        color:#525151;
        animation: bc-Animation 5s ease  1 alternate both;
    }
    
    @keyframes bc-Animation{
        0%{opacity:0; transform: translateY(80%); }
        20%{opacity:0;}
        50%{opacity: 1; transform: translateY(0%);}
        100%{opacity: 1; transform:translateY(0%)}
    }
    
    .fabrication ul{
     line-height:1.7em;
    }
    
    #pipiConst h2{
        margin-top: 1em;
        font-size: 2rem;
        color:#525151;
        animation: bc-Animation 5s ease  1 alternate both;
    }
    
    @keyframes bc-Animation{
        0%{opacity:0; transform: translateY(80%); }
        20%{opacity:0;}
        50%{opacity: 1; transform: translateY(0%);}
        100%{opacity: 1; transform:translateY(0%)}
    }
    
    .pipiConst p{
        line-height: 1.7em;
    }
    .supply h2{
        margin-top: 1em;
        font-size: 2rem;
        color:#525151;
        animation: bc-Animation 5s ease  1 alternate both;
    }
    
    @keyframes bc-Animation{
        0%{opacity:0; transform: translateY(80%); }
        20%{opacity:0;}
        50%{opacity: 1; transform: translateY(0%);}
        100%{opacity: 1; transform:translateY(0%)}
    }
    .supply p{
        line-height:1.7em;
    }
     .kasService{
    
        margin:2em 0 0 3em;
        line-height:1.5em;
     }
    
    
     @media (max-width:658px){
       
        .service-title{
            margin-top:30em;
            margin-left:10em;
            width:50%;
            background-color: rgba(8, 2, 2, 0.6)
    }
    .service-title h2{
            font-size:3rem;
            color:#f3f3f3;
            padding-left:0.5em;
            font-weight: bolder;   
     }
    }
    
    @media (max-width:800px){
       
        main{
            margin: 1em 2em;
        }
        .serviceban{
            width:100%;
            height:100vh;
            overflow: hidden;
            position: relative;
        }
        
        
        .serviceban .serviceimgban{
            width:100%;
            height:100%;
            position:absolute;
            top:0px;
            -webkit-transition: all ease-in-out 600ms;
            -moz-transition: all ease-in-out 500ms;
            -o-transition: all ease-in-out 500ms;
            transition: all ease-in-out 500ms;
        }
        
        .service-title h2{
            margin:6em 0em 0em 1em;
            font-size: 4rem;
            text-transform: uppercase;
            color:rgb(255, 255, 255);
            animation:service_title 4s ease-in-out  1 alternate both;
        }
        
        @keyframes service_title {
            0%{opacity:0; transform: translateY(80%);}
            30%{opacity:0;}
            50%{opacity:0.5; transform: translateY(0%);}
            100%{opacity:1; transform:translateY(0%)}   
        }
        .service-title{
            margin:10em 10em 0em 0em;
            width:100%;
            max-width: 100%;
            height:56%;
            background:-webkit-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
            background:-moz-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
            background:-o-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
            background:linear-gradient(rgba(0,8,2,0.01),rgb(0, 0, 0));
        }
        @keyframes grow{
            from{width:0%;}
            to{width:100%}
        }
        .service-title h2{
            font-size:4rem;
            color:#f3f3f3;
            text-transform: uppercase;
            padding-left:0.5em;
            font-weight: bolder;
            animation-name:ani;
            animation-duration:5s;
            animation-timing-function:ease-in-out;
            animation-iteration-count: 1;
            animation-direction: both;
        }
        @keyframes ani{
            from{opacity: 0%;}
            to{opacity:100%}
            }
        
        #serviceimgban{
            background:url(./images/mensinGoldiming/service.jpg);
            background-position: center;
            background-repeat: no-repeat;
            background-size:300%;
            height:100vh;
            animation: first-animation 8s ease-out 1 both;
        }
        
        
        @keyframes first-animation{
            0%{opacity: 1; background-size:500%;}
            100%{opacity:1; background-size:200%;}
        }
        .service-box{
            width:100%;
            max-width:100%;
            margin:3em 3em 3em 3em;
        }
        hr{
            margin-top:0.5em;
            margin-bottom:0.5em;
        }
        #buildingConstruction{
            margin:0.8em;
        }
        .buildingConstruction h2 {
            margin: 0.2em;
            font-size: 2rem;
            text-transform: uppercase;
            color:#525151;
            animation: bc-Animation 2s ease  1 alternate both;
        }
        
        @keyframes bc-Animation{
            0%{opacity:0; transform: translateY(80%); }
            20%{opacity:0;}
            50%{opacity: 1; transform: translateY(0%);}
            100%{opacity: 1; transform:translateY(0%)}
        }
        
        
        .bc-sector{
            line-height: 1.5rem;
            font-size: 1rem;
        }
        .buildingConstruction h3{
            margin: 0.5em 0em 0.5em 0em;
            color:#525151;
        }
        
        .buildingConstruction ul{
            line-height:1.7em;
        }
        .sector-covered{
            margin-left:3em;
        }
        
        #civilEng-infra h2{
            margin-top: 1em;
            color:#525151;
            font-size:2rem;
            animation: bc-Animation 5s ease  1 alternate both;
        }
        
        @keyframes bc-Animation{
            0%{opacity:0; transform: translateY(80%); }
            20%{opacity:0;}
            50%{opacity: 1; transform: translateY(0%);}
            100%{opacity: 1; transform:translateY(0%)}
        }
        .civilEng-infra h3{
            margin: 0.5em 0em 0.5em 0em;
            color:#525151;
        }
        
        .civilEng-infra ul{
            line-height: 1.7em;
        }
        #roads-earthworks h2{
            margin-top: 1em;
            font-size:2rem;
            color:#525151;
            animation: bc-Animation 5s ease  1 alternate both;
        }
        
        @keyframes bc-Animation{
            0%{opacity:0; transform: translateY(80%); }
            20%{opacity:0;}
            50%{opacity: 1; transform: translateY(0%);}
            100%{opacity: 1; transform:translateY(0%)}
        }
        
        .roads-earthworks h3{
            margin: 0.5em 0em 0.5em 0em;
            color:#525151;
        }
        .roads-earthworks ul{
            line-height:1.7em;
        }
        
        #fabrication h2{
            margin-top: 1em;
            font-size: 2rem;
            color:#525151;
            animation: bc-Animation 5s ease  1 alternate both;
        }
        
        @keyframes bc-Animation{
            0%{opacity:0; transform: translateY(80%); }
            20%{opacity:0;}
            50%{opacity: 1; transform: translateY(0%);}
            100%{opacity: 1; transform:translateY(0%)}
        }
        
        .fabrication ul{
         line-height:1.7em;
        }
        
        #pipiConst h2{
            margin-top: 1em;
            font-size: 2rem;
            color:#525151;
            animation: bc-Animation 5s ease  1 alternate both;
        }
        
        @keyframes bc-Animation{
            0%{opacity:0; transform: translateY(80%); }
            20%{opacity:0;}
            50%{opacity: 1; transform: translateY(0%);}
            100%{opacity: 1; transform:translateY(0%)}
        }
        
        .pipiConst p{
            line-height: 1.7em;
        }
        .supply h2{
            margin-top: 1em;
            font-size: 2rem;
            color:#525151;
            animation: bc-Animation 5s ease  1 alternate both;
        }
        
        @keyframes bc-Animation{
            0%{opacity:0; transform: translateY(80%); }
            20%{opacity:0;}
            50%{opacity: 1; transform: translateY(0%);}
            100%{opacity: 1; transform:translateY(0%)}
        }
        .supply p{
            line-height:1.7em;
        }
         .kasService{
        
            margin:2em 0 0 3em;
            line-height:1.5em;
         }
        
        
         @media (max-width:658px){
           
            .service-title{
                margin-top:30em;
                margin-left:10em;
                width:50%;
                background-color: rgba(8, 2, 2, 0.6)
        }
        .service-title h2{
                font-size:3rem;
                color:#f3f3f3;
                padding-left:0.5em;
                font-weight: bolder;   
         }
        }
    }
    
    
    /*-------------Portfolio-----------------*/
    .portfolio-container{
        display:block;
        background: url(/images/mensinGoldiming/bbb.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #083502;
        background-blend-mode:soft-light;
    }
    
    
    .portfolio-title{
        padding-top:10em;
        padding-left:10em;
    }
    .portfolio-title h2{
        font-size: 3rem;
        color:#fcfcfc;
        text-transform: uppercase;
        animation: portfolio-title 2s ease-in-out  1 alternate both;
    }
    @keyframes portfolio-title {
        0%{opacity:0; transform:translateY(80%);}
        20%{opacity:0}
        50%{opacity:1; transform:translateY(0%)} 
        100%{opacity:1; transform:translateY(0%)}
    }
    
    .portfolio-quote{
        padding-top:0.2em;
        width:100%;
        max-width:70%;
        animation: portfolio-quote 2s ease-in-out  1 alternate both;
    }
    .portfolio-quote p{
        color:#ffffff;
    }
    @keyframes portfolio-quote {
        0%{opacity:0; transform:translateX(5%);}
        20%{opacity:0}
        50%{opacity:1; transform:translateX(0%)} 
        100%{opacity:1; transform:translateX(0%)}
    }
    #contact-btn{
      width:10em;
      height:3em;
      margin-top:1em;
      border-radius:20px;
      background-color:#54f813;
      animation: portfolio-quote 2s ease-in-out  1 alternate both;
      
    }
    
    .portfolio-container ul{
        margin:1em 1em ;
        display: flex;
        gap:1.2em;
        flex-flow:row wrap;
    }
    
    
    .projects-profile li{
        display: inline-block;
        padding:0.5em;
    }
    .port-link{
        color:#f3f3f3;
        font-weight: 600;
        text-decoration: none;
        padding:0.3em;
        border-bottom: #54f813;
        transition:border-bottom 0.8s ease-in;
    
    }
    .projects-profile  a:hover{
        border-bottom:#54f813 0.2em solid ;
        color:#54f813;
        
    }
    
    #contact-btn h5{
    padding:0.5em;
    text-align: center;
    color:rgba(1, 26, 1, 0.933);
    animation: portfolio-title 2s ease-in-out  1 alternate both;
    }
    
    .port-project{
        margin-top:3em;
        margin-bottom:4em;
        display: flex;
        gap:1.5em;
        justify-content:center;
        flex-flow:row wrap;
       align-items: center;
       align-content: center;
        
    }
    
    .portImg-container{
        width:30em;
        height:20em;
        background-color:#083502;
        
    }
    
    .portImg-container h2{
        margin:6em 2em;
        color:#f3f3f3;
        text-transform: uppercase;
        text-shadow: #000 2px 2px 6px;
        font-weight: 800;
    }
    
    #portImg-container1{
        background-image: url(./images/portfolio/MENSIN\ GOLD\ BIBINI\ LIMITED\ TSF\ REHABILITATION\ PROJECT\ 1-1.jpg);
        background-size: cover;
        background-repeat:no-repeat;
    }
    #portImg-container2{
        background-image: url(./images/portfolio/IMG-20220103-WA0030.jpg);
        background-size: cover;
        background-repeat:no-repeat;
    }
    #portImg-container3{
        background-image: url(./images/portfolio/IMG-20220103-WA0010.jpg);
        background-size: cover;
        background-repeat:no-repeat;
    }
    #portImg-container4{
        background-image: url(./images/portfolio/IMG-20220103-WA0018.jpg);
        background-size: cover;
        background-repeat:no-repeat;
    }
    #portImg-container5{
        background-image: url(./images/portfolio/IMG-20220103-WA0018.jpg);
        background-size: cover;
        background-repeat:no-repeat;
    }
    #portImg-container6{
        background-image: url(./images/portfolio/IMG-20220103-WA0019.jpg);
        background-size: cover;
        background-repeat:no-repeat;
    }
    #portImg-container7{
        background-image: url(./images/portfolio/IMG-20220103-WA0024.jpg);
        background-size: cover;
        background-repeat:no-repeat;
    }
    #portImg-container8{
        background-image: url(./images/portfolio/newwkaslive\ profile-4.jpg);
        background-size: cover;
        background-repeat:no-repeat;
    }
}
@media(max-width:1400){
    main{
        margin: 1em 2em;
    }
    .serviceban{
        width:100%;
        height:100vh;
        overflow: hidden;
        position: relative;
    }
    
    
    .serviceban .serviceimgban{
        width:100%;
        height:100%;
        position:absolute;
        top:0px;
        -webkit-transition: all ease-in-out 600ms;
        -moz-transition: all ease-in-out 500ms;
        -o-transition: all ease-in-out 500ms;
        transition: all ease-in-out 500ms;
    }
    
    .service-title h2{
        margin:6em 0em 0em 1em;
        font-size: 3rem;
        text-transform: uppercase;
        color:rgb(255, 255, 255);
        animation:service_title 4s ease-in-out  1 alternate both;
    }
    
    @keyframes service_title {
        0%{opacity:0; transform: translateY(80%);}
        30%{opacity:0;}
        50%{opacity:0.5; transform: translateY(0%);}
        100%{opacity:1; transform:translateY(0%)}   
    }
    .service-title{
        margin-top:20em;
        width:100%;
        height:40%;
        background:-webkit-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
        background:-moz-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
        background:-o-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
        background:linear-gradient(rgba(0,8,2,0.01),rgb(0, 0, 0));
    }
    
        @keyframes grow{
            from{width:0%;}
            to{width:25%}
        }
    
    .service-title h2{
        font-size:5rem;
        color:#f3f3f3;
        text-transform: uppercase;
        padding-left:0.5em;
        font-weight: bolder;
        animation-name:ani;
        animation-duration:5s;
        animation-timing-function:ease-in-out;
        animation-iteration-count: 1;
        animation-direction: both;
    }
    @keyframes ani{
        from{opacity: 0%;}
        to{opacity:100%}
        }
    
    #serviceimgban{
        background:url(./images/mensinGoldiming/service.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size:300%;
        height:100vh;
        animation: first-animation 8s ease-out 1 both;
    }
    
    @keyframes first-animation{
    from{background-size: 300%;}
    to{background-size: 100%;}
    }
    .service-box{
        width:100%;
        max-width:90%;
        margin:3em 3em 3em 3em;
    }
    hr{
        margin-top:0.5em;
        margin-bottom:0.5em;
    }
    #buildingConstruction{
        margin:0.8em;
    }
    .buildingConstruction h2 {
        margin: 0.2em;
        font-size: 2rem;
        text-transform: uppercase;
        color:#525151;
        animation: bc-Animation 2s ease  1 alternate both;
    }
    
    @keyframes bc-Animation{
        0%{opacity:0; transform: translateY(80%); }
        20%{opacity:0;}
        50%{opacity: 1; transform: translateY(0%);}
        100%{opacity: 1; transform:translateY(0%)}
    }
    
    .bc-sector{
        line-height: 1.5rem;
        font-size: 1rem;
    }
    .buildingConstruction h3{
        margin: 0.5em 0em 0.5em 0em;
        color:#525151;
    }
    
    .buildingConstruction ul{
        line-height:1.7em;
    }
    .sector-covered{
        margin-left:3em;
    }
    
    #civilEng-infra h2{
        margin-top: 1em;
        color:#525151;
        font-size:2rem;
        animation: bc-Animation 5s ease  1 alternate both;
    }
    
    @keyframes bc-Animation{
        0%{opacity:0; transform: translateY(80%); }
        20%{opacity:0;}
        50%{opacity: 1; transform: translateY(0%);}
        100%{opacity: 1; transform:translateY(0%)}
    }
    .civilEng-infra h3{
        margin: 0.5em 0em 0.5em 0em;
        color:#525151;
    }
    
    .civilEng-infra ul{
        line-height: 1.7em;
    }
    #roads-earthworks h2{
        margin-top: 1em;
        font-size:2rem;
        color:#525151;
        animation: bc-Animation 5s ease  1 alternate both;
    }
    
    @keyframes bc-Animation{
        0%{opacity:0; transform: translateY(80%); }
        20%{opacity:0;}
        50%{opacity: 1; transform: translateY(0%);}
        100%{opacity: 1; transform:translateY(0%)}
    }
    
    .roads-earthworks h3{
        margin: 0.5em 0em 0.5em 0em;
        color:#525151;
    }
    .roads-earthworks ul{
        line-height:1.7em;
    }
    
    #fabrication h2{
        margin-top: 1em;
        font-size: 2rem;
        color:#525151;
        animation: bc-Animation 5s ease  1 alternate both;
    }
    
    @keyframes bc-Animation{
        0%{opacity:0; transform: translateY(80%); }
        20%{opacity:0;}
        50%{opacity: 1; transform: translateY(0%);}
        100%{opacity: 1; transform:translateY(0%)}
    }
    
    .fabrication ul{
     line-height:1.7em;
    }
    
    #pipiConst h2{
        margin-top: 1em;
        font-size: 2rem;
        color:#525151;
        animation: bc-Animation 5s ease  1 alternate both;
    }
    
    @keyframes bc-Animation{
        0%{opacity:0; transform: translateY(80%); }
        20%{opacity:0;}
        50%{opacity: 1; transform: translateY(0%);}
        100%{opacity: 1; transform:translateY(0%)}
    }
    
    .pipiConst p{
        line-height: 1.7em;
    }
    .supply h2{
        margin-top: 1em;
        font-size: 2rem;
        color:#525151;
        animation: bc-Animation 5s ease  1 alternate both;
    }
    
    @keyframes bc-Animation{
        0%{opacity:0; transform: translateY(80%); }
        20%{opacity:0;}
        50%{opacity: 1; transform: translateY(0%);}
        100%{opacity: 1; transform:translateY(0%)}
    }
    .supply p{
        line-height:1.7em;
    }
     .kasService{
    
        margin:2em 0 0 3em;
        line-height:1.5em;
     }
    
    
     @media (max-width:658px){
       
        .service-title{
            margin-top:30em;
            margin-left:10em;
            width:50%;
            background-color: rgba(8, 2, 2, 0.6)
    }
    .service-title h2{
            font-size:3rem;
            color:#f3f3f3;
            padding-left:0.5em;
            font-weight: bolder;   
     }
    }
    
    @media (max-width:800px){
       
        main{
            margin: 1em 2em;
        }
        .serviceban{
            width:100%;
            height:100vh;
            overflow: hidden;
            position: relative;
        }
        
        
        .serviceban .serviceimgban{
            width:100%;
            height:100%;
            position:absolute;
            top:0px;
            -webkit-transition: all ease-in-out 600ms;
            -moz-transition: all ease-in-out 500ms;
            -o-transition: all ease-in-out 500ms;
            transition: all ease-in-out 500ms;
        }
        
        .service-title h2{
            margin:6em 0em 0em 1em;
            font-size: 4rem;
            text-transform: uppercase;
            color:rgb(255, 255, 255);
            animation:service_title 4s ease-in-out  1 alternate both;
        }
        
        @keyframes service_title {
            0%{opacity:0; transform: translateY(80%);}
            30%{opacity:0;}
            50%{opacity:0.5; transform: translateY(0%);}
            100%{opacity:1; transform:translateY(0%)}   
        }
        .service-title{
            margin:10em 10em 0em 0em;
            width:100%;
            max-width: 100%;
            height:56%;
            background:-webkit-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
            background:-moz-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
            background:-o-linear-gradient(rgba(0,8,2,0.01), rgb(0,0,0));
            background:linear-gradient(rgba(0,8,2,0.01),rgb(0, 0, 0));
        }
        @keyframes grow{
            from{width:0%;}
            to{width:100%}
        }
        .service-title h2{
            font-size:4rem;
            color:#f3f3f3;
            text-transform: uppercase;
            padding-left:0.5em;
            font-weight: bolder;
            animation-name:ani;
            animation-duration:5s;
            animation-timing-function:ease-in-out;
            animation-iteration-count: 1;
            animation-direction: both;
        }
        @keyframes ani{
            from{opacity: 0%;}
            to{opacity:100%}
            }
        
        #serviceimgban{
            background:url(./images/mensinGoldiming/service.jpg);
            background-position: center;
            background-repeat: no-repeat;
            background-size:300%;
            height:100vh;
            animation: first-animation 8s ease-out 1 both;
        }
        
        
        @keyframes first-animation{
            0%{opacity: 1; background-size:500%;}
            100%{opacity:1; background-size:200%;}
        }
        .service-box{
            width:100%;
            max-width:100%;
            margin:3em 3em 3em 3em;
        }
        hr{
            margin-top:0.5em;
            margin-bottom:0.5em;
        }
        #buildingConstruction{
            margin:0.8em;
        }
        .buildingConstruction h2 {
            margin: 0.2em;
            font-size: 2rem;
            text-transform: uppercase;
            color:#525151;
            animation: bc-Animation 2s ease  1 alternate both;
        }
        
        @keyframes bc-Animation{
            0%{opacity:0; transform: translateY(80%); }
            20%{opacity:0;}
            50%{opacity: 1; transform: translateY(0%);}
            100%{opacity: 1; transform:translateY(0%)}
        }
        
        
        .bc-sector{
            line-height: 1.5rem;
            font-size: 1rem;
        }
        .buildingConstruction h3{
            margin: 0.5em 0em 0.5em 0em;
            color:#525151;
        }
        
        .buildingConstruction ul{
            line-height:1.7em;
        }
        .sector-covered{
            margin-left:3em;
        }
        
        #civilEng-infra h2{
            margin-top: 1em;
            color:#525151;
            font-size:2rem;
            animation: bc-Animation 5s ease  1 alternate both;
        }
        
        @keyframes bc-Animation{
            0%{opacity:0; transform: translateY(80%); }
            20%{opacity:0;}
            50%{opacity: 1; transform: translateY(0%);}
            100%{opacity: 1; transform:translateY(0%)}
        }
        .civilEng-infra h3{
            margin: 0.5em 0em 0.5em 0em;
            color:#525151;
        }
        
        .civilEng-infra ul{
            line-height: 1.7em;
        }
        #roads-earthworks h2{
            margin-top: 1em;
            font-size:2rem;
            color:#525151;
            animation: bc-Animation 5s ease  1 alternate both;
        }
        
        @keyframes bc-Animation{
            0%{opacity:0; transform: translateY(80%); }
            20%{opacity:0;}
            50%{opacity: 1; transform: translateY(0%);}
            100%{opacity: 1; transform:translateY(0%)}
        }
        
        .roads-earthworks h3{
            margin: 0.5em 0em 0.5em 0em;
            color:#525151;
        }
        .roads-earthworks ul{
            line-height:1.7em;
        }
        
        #fabrication h2{
            margin-top: 1em;
            font-size: 2rem;
            color:#525151;
            animation: bc-Animation 5s ease  1 alternate both;
        }
        
        @keyframes bc-Animation{
            0%{opacity:0; transform: translateY(80%); }
            20%{opacity:0;}
            50%{opacity: 1; transform: translateY(0%);}
            100%{opacity: 1; transform:translateY(0%)}
        }
        
        .fabrication ul{
         line-height:1.7em;
        }
        
        #pipiConst h2{
            margin-top: 1em;
            font-size: 2rem;
            color:#525151;
            animation: bc-Animation 5s ease  1 alternate both;
        }
        
        @keyframes bc-Animation{
            0%{opacity:0; transform: translateY(80%); }
            20%{opacity:0;}
            50%{opacity: 1; transform: translateY(0%);}
            100%{opacity: 1; transform:translateY(0%)}
        }
        
        .pipiConst p{
            line-height: 1.7em;
        }
        .supply h2{
            margin-top: 1em;
            font-size: 2rem;
            color:#525151;
            animation: bc-Animation 5s ease  1 alternate both;
        }
        
        @keyframes bc-Animation{
            0%{opacity:0; transform: translateY(80%); }
            20%{opacity:0;}
            50%{opacity: 1; transform: translateY(0%);}
            100%{opacity: 1; transform:translateY(0%)}
        }
        .supply p{
            line-height:1.7em;
        }
         .kasService{
        
            margin:2em 0 0 3em;
            line-height:1.5em;
         }
        
        
         @media (max-width:658px){
           
            .service-title{
                margin-top:30em;
                margin-left:10em;
                width:50%;
                background-color: rgba(8, 2, 2, 0.6)
        }
        .service-title h2{
                font-size:3rem;
                color:#f3f3f3;
                padding-left:0.5em;
                font-weight: bolder;   
         }
        }
    }
    
    
    /*-------------Portfolio-----------------*/
    .portfolio-container{
        display:block;
        background: url(/images/mensinGoldiming/bbb.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #083502;
        background-blend-mode:soft-light;
    }
    
    
    .portfolio-title{
        padding-top:10em;
        padding-left:10em;
    }
    .portfolio-title h2{
        font-size: 3rem;
        color:#fcfcfc;
        text-transform: uppercase;
        animation: portfolio-title 2s ease-in-out  1 alternate both;
    }
    @keyframes portfolio-title {
        0%{opacity:0; transform:translateY(80%);}
        20%{opacity:0}
        50%{opacity:1; transform:translateY(0%)} 
        100%{opacity:1; transform:translateY(0%)}
    }
    
    .portfolio-quote{
        padding-top:0.2em;
        width:100%;
        max-width:70%;
        animation: portfolio-quote 2s ease-in-out  1 alternate both;
    }
    .portfolio-quote p{
        color:#ffffff;
    }
    @keyframes portfolio-quote {
        0%{opacity:0; transform:translateX(5%);}
        20%{opacity:0}
        50%{opacity:1; transform:translateX(0%)} 
        100%{opacity:1; transform:translateX(0%)}
    }
    #contact-btn{
      width:10em;
      height:3em;
      margin-top:1em;
      border-radius:20px;
      background-color:#54f813;
      animation: portfolio-quote 2s ease-in-out  1 alternate both;
      
    }
    
    .portfolio-container ul{
        margin:1em 1em ;
        display: flex;
        gap:1.2em;
        flex-flow:row wrap;
    }
    
    
    .projects-profile li{
        display: inline-block;
        padding:0.5em;
    }
    .port-link{
        color:#f3f3f3;
        font-weight: 600;
        text-decoration: none;
        padding:0.3em;
        border-bottom: #54f813;
        transition:border-bottom 0.8s ease-in;
    
    }
    .projects-profile  a:hover{
        border-bottom:#54f813 0.2em solid ;
        color:#54f813;
        
    }
    
    #contact-btn h5{
    padding:0.5em;
    text-align: center;
    color:rgba(1, 26, 1, 0.933);
    animation: portfolio-title 2s ease-in-out  1 alternate both;
    }
    
    .port-project{
        margin-top:3em;
        margin-bottom:4em;
        display: flex;
        gap:1.5em;
        justify-content:center;
        flex-flow:row wrap;
       align-items: center;
       align-content: center;
        
    }
    
    .portImg-container{
        width:30em;
        height:20em;
        background-color:#083502;
        
    }
    
    .portImg-container h2{
        margin:6em 2em;
        color:#f3f3f3;
        text-transform: uppercase;
        text-shadow: #000 2px 2px 6px;
        font-weight: 800;
    }
    
    #portImg-container1{
        background-image: url(./images/portfolio/MENSIN\ GOLD\ BIBINI\ LIMITED\ TSF\ REHABILITATION\ PROJECT\ 1-1.jpg);
        background-size: cover;
        background-repeat:no-repeat;
    }
    #portImg-container2{
        background-image: url(./images/portfolio/IMG-20220103-WA0030.jpg);
        background-size: cover;
        background-repeat:no-repeat;
    }
    #portImg-container3{
        background-image: url(./images/portfolio/IMG-20220103-WA0010.jpg);
        background-size: cover;
        background-repeat:no-repeat;
    }
    #portImg-container4{
        background-image: url(./images/portfolio/IMG-20220103-WA0018.jpg);
        background-size: cover;
        background-repeat:no-repeat;
    }
    #portImg-container5{
        background-image: url(./images/portfolio/IMG-20220103-WA0018.jpg);
        background-size: cover;
        background-repeat:no-repeat;
    }
    #portImg-container6{
        background-image: url(./images/portfolio/IMG-20220103-WA0019.jpg);
        background-size: cover;
        background-repeat:no-repeat;
    }
    #portImg-container7{
        background-image: url(./images/portfolio/IMG-20220103-WA0024.jpg);
        background-size: cover;
        background-repeat:no-repeat;
    }
    #portImg-container8{
        background-image: url(./images/portfolio/newwkaslive\ profile-4.jpg);
        background-size: cover;
        background-repeat:no-repeat;
    }
}
/*--------------CONTACT PAGE----------------*/

.contactbanner{
    
        width:100%;
        height:100vh;
        overflow: hidden;
        position: relative;
    
}
.contactImg{
    width:100%;
    height:100vh;
    background-image: url(./images/img/contact11.jpg);
    background-size:cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    
}

#addressDetails{
    height:80vh;
    
}


.contactImg h1{
    max-width:700px;
    padding-top:3em;
    margin-left: 2em;
    margin-top:3em;
    color:#fcfcfc;
    font-size: 4rem;
    text-transform: uppercase;
}

.kaslive-Address{
    background-color:#e7e3e3;
    padding: 2em;
    width:100%;

}
.kumasi-Address h2{
    margin:1em 3em 0 3em;
    background-color: #a7a7a7;
    padding:1em;
    font-size:1rem;
    color:#e7e3e3;
    max-width:100%;
    text-transform: uppercase;
}
.kumasi-Address address{
    background-color:#f3f3f3;
    max-width: 100%;
    margin:0 3em 0 3em;
    padding:2em;
}

/*------------Page footer --------------*/
.footer{
    width: 100%;
    height: 60vh;
    background-color: #800333;
    position: relative;
}

 .ourMission p{
    font-size:1.3rem;
    width: 40%;
    margin-left:3em;
    font-weight: bolder;
    color:#f5a3c2;
    font-style: italic;
    padding-top:1em;
}

.ourMission hr{
    max-width: 40%;         
    margin-left:3em;
    color: rgb(250, 156, 187);
}

#kas-add{
    margin: 2em;
    display: flex;
    justify-content:flex-start;
    flex-flow: row;
}

#kas-add h2{
    font-size: 1em;
    text-transform:uppercase;
    color:#f3f3f3;

}
.footer-link{
    width:100%;
    max-width:80%;
    text-align: left;
    margin-left: 8em; 
}

@media(max-width:858px) {
    .footer-link{
        width:100%;
        max-width:80%; 
        margin-left: 4em;
        display: flex;
        align-items: center; 
    }

    .ourMission p{
        font-size:1rem;
        width: 80%;
        margin-left:3em;
        font-weight: bolder;
        color:#f5a3c2;
        font-style: italic;
        padding-top:1em;
    }
}
.footer-navlink  {
    margin:1em 1em; 
}

.footer-navlink li{
    display: inline-block;
    list-style: none;
    text-decoration: none;
    padding: 0.3em 0.3em;
    text-align: left;
}

.footer-navlink a{
    color: white;
    text-decoration:none;
    text-transform: uppercase;
    text-align: left;
    
}
.footer-navlink a:hover{
    color:  #800333;
    text-decoration:none;
    text-align: right;
    background-color: #f5a3c2;
    border-radius: 5px;
    padding:3px;
}

.address{
    margin:1em 2em;
}
.address p{
    color:#ffff;
    font-size: 0.8rem;
    margin-top:0.4em;
}
.copyRight{
    color:white;
    margin:2em;
    font-size: 0.7rem;
    text-align: left;
}

.copyRight p{
    text-align:left;
    margin:2em;
}