@import url('https://fonts.googleapis.com/css?family=Lato|Pacifico|chewy|Josefin+Sans|Righteous|Roboto+Condensed|Ubuntu&display=swap');



html,body{
    margin: 0%;
    padding: 0%;
    font-family: 'lato';
    height: 100%;


}



/*---------navbar---------------------------------------------------------------*/

#nav-bar{
    position: sticky;
    top: 0;
    z-index: 10;
    

}  

.navbar{
    position: relative;
    background-image: url(../images/footer_background.jpg); 
    padding: 0 !important;
    background-position: center ;
    background-repeat: no-repeat;
    background-size: cover;
} 

h2 {
   
    position: relative;
    text-decoration: none;
    font-family: 'Pacifico'  !important;
    font-size: 25px;
    font-weight: 300;
    line-height: 1.1em;
    color:rgb(247, 247, 247);
    margin-left: 15px;
    margin-top: 5px;
    outline: none; 
    text-align: center;
    user-select: none;
    background-color: black;
    border-radius: 50px;
    box-shadow: 0 0 3px rgba(0,0,0, 0.2), 0 5px 5px rgba(0,0,0, 0.7);
    padding: 5px 5px;

    
       
}
.navbar-nav li{
    padding: 0 10px;
}
.navbar-nav li a{
    color:white !important;
    border-radius: 20px;
    font-weight: 900;
    font-family: cursive;
    float: right;
    text-align: left;
    
}
.navbar-nav li a:hover{
    background-color:black;
    border-radius: 20px;
    color:white;
    box-shadow: 0 0 3px rgba(0,0,0, 0.2), 0 5px 5px rgba(0,0,0, 0.7);
    
    
}
.fa-bars{
    color:white;
    font-size: 20px !important;
}
.navbar-toggler{
    outline:none !important ;
}

.consul p{
    color:white;
    font-family: cursive;
}
.consul span{
    font-size: 20px;
    color: black;
}
.consul img{
    background-color:white;
    border-radius: 15px;
}

/*-------banner section-------*/

#banner{
    background-image:url("../images/homepage_background.jpg") ;
    color:white;
    text-decoration: solid;
    padding-top: 5%;
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
}

#banner4
{
    background-image:url("../images/blue-background.jpg") ;
    background-position: center ;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    color: #02efef; 
}
#banner5
{
    background-image:url("../images/light-blue.jpg") ;
    background-position: center ;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    color: #02efef; 
    color:black ;
}

.line
{
    height: 5px;
    border:  none;
    background-color: #FF00AA;
}

img
{
    max-width: 100%;
    
}

.promo-title
{
    font-size: 40px;
    font-weight: 600px;
    margin-top: 20px; 
    margin-bottom: 100px; 
    color: rgb(7, 7, 7);
    font-family: Georgia, serif;
    background: rgba(16, 117, 231, 0.2);
    height: 130px;
    text-align: center;
    border-radius: 20px;
}

.promo-title3{
    font-size: 30px;
    font-weight: 600px;
    margin-top: 30px; 
    margin-bottom: 30px; 
    color: hsl(310, 100%, 50%);
    text-shadow: -5px 5px  black;
    font-family: cursive,sans-serif ; 
}

.promo-title5
{
    font-size: 40px;
    font-weight: 600px;
    margin-top: 30px; 
    margin-bottom: 30px; 
    color:red;
    text-shadow: 5px 5px 3px #333;
    font-family: cursive ;
    text-align: center;
    font-style: normal;
}

.iframe-container{
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; 
    height: 0;
  }
  .iframe-container iframe{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  

.promo-title1{
    font-size: 32px;
    font-weight: 600;
    font-family:'ubantu' !important;
    margin-top: 50px;
    font-style:italic ;    
}
.fa-home{
    color:#fff;
    font-size: 30px !important;
    
}

#banner a{
    color: #fff;
    text-decoration: none;
}
.bottom-img{
    width: 100%;
    height: 100px;
    
}

/*------------services section-----------*/


*
{
    box-sizing: border-box;
    
}
.gallery1
{
    border: 5px solid white;
    margin: 7px;
}

.gallery1 img
{
    width: 100%;
    height: 250px;
    
}


.des
{
    padding: 5px ;
    text-align: center;
    background-color: white;
    color:rgb(5, 19, 100);
    text-decoration: 5px solid;
    font-weight: bold;
    
    
}
#services
{
    padding: 80px 0 30px;
    background-image: linear-gradient(to top, #4481eb 0%, #04befe 100%);
}
    

.service-img{
    width: 200px;
    margin-top: 20px;
    box-shadow: 0 10px 10px -5px black;
    border-radius: 10px;
}
.services
{
    padding: 15px;
    box-shadow: 0 10px 10px -5px black;
    background-image: linear-gradient(to top, #e6b980 0%, #eacda3 100%);
    margin-bottom: 10px;
    border-radius: 15px;
    
}
.services:hover
{
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 15px; 
    background: linear-gradient(180deg,#17141d,#17141d);
    color: white;
    box-shadow: 0 10px 10px -5px black; 
    box-sizing: border-box;
    
}  
.services h4{
    
    display: block;
    font-size: 1.75em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    color: #FF00AA;
    font-family: cursive;
    text-shadow: 0 0 black;
}
    


.serve
{
    text-align: justify;
}
.services h4:hover
{
    color: #FF00AA;
    
}

.services a
{
    text-decoration: none;
}




.serve
{
    text-align: justify;
    font-family: cursive,sans-serif;
}

.title
{
    color:black;
    font-weight: bold;
    font-size: xx-large;
}
.title::before{
    content: '';
    background: #7b1798;
    height: 5px;
    width: 200px;
    font-weight: bold;
    font-size: large;
    margin-left:auto ;
    margin-right: auto;
    display: block;
    transform: translateY(63px);
    -webkit-transform: translateY(63px);
    -moz-transform: translateY(63px);
    -ms-transform: translateY(63px);
    -o-transform: translateY(63px);
}

.title::after {
    content: '';
    background: #7b1798;
    height: 10px;
    width: 50px;
    margin-left:auto ;
    margin-right: auto;
    margin-bottom:40px ;
    display: block;
    transform: translateY(8px);
    -webkit-transform: translateY(8px);
    -moz-transform: translateY(8px);
    -ms-transform: translateY(8px);
    -o-transform: translateY(8px);
}


.more
{
    
text-align: center;
color: #FF00AA;
padding: 0;
float: right;
height: -2px;
border-radius: 10px;
font-weight: bolder;

}

.more:hover
{
    color: #FFF;
}
.slider-holder
{
    width: 800px;
    height: 400px;
    background-color: yellow;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    text-align: center;
    overflow: hidden;
}

.image-holder
{
    width: 2400px;
    background-color: red;
    height: 400px;
    clear: both;
    position: relative;
    -webkit-transition: left 2s;
    -moz-transition: left 2s;
    -o-transition: left 2s;
    transition: left 2s;
}

.slider-image
{
    float: left;
    margin: 0px;
    padding: 0px;
    position: relative;
}

#slider-image-1:target ~ .image-holder
{
    left: 0px;
}

#slider-image-2:target ~ .image-holder
{
    left: -800px;
}

#slider-image-3:target ~ .image-holder
{
    left: -1600px;
}

.button-holder
{
    position: relative;
    top: -20px;
}

.slider-change
{
    display: inline-block;
    height: 10px;
    width: 10px;
    border-radius: 5px;
    background-color: brown;
}




/*------------construction.html---------*/

.style1{
    color:white;
    font-weight: bold;
    font-size: 20px;
    
    
}
.style2{
    color:yellow;
    font-weight: bold;
    font-size: 20px;

}
.style3{
    color:red;
    font-weight: bold;
    font-size: 20px;
    
}





/*-------------about us----------*/

#pool-types{
    background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
    padding-bottom: 40px;
    padding-top: 10px;
    
}

.about-title{
    font-size: 30px;background-image: linear-gradient(to right, #868f96 0%, #596164 100%);
    font-weight: 300;
    margin-top: 5px;
}

.slider2
{
    max-width: 500px;
    margin:10px auto;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 7px  rgba(0,0,0, 0.3);
    background: #FFF;
    border-top: 10px solid #fff;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fff;
    transform: translate(0, 1px);
}

.slider2 .left-slide,.slider2 .right-slide
{
    position: absolute;
    height: 40px;
    width: 40px;
    background-color: #444444;
    border-radius: 50px;
    color: #ffffff;
    font-size: 20px;
    top: 50%;
    cursor: pointer;
    margin-top: -20px;
    text-align: center;
    line-height: 40px;
    transition: all .5s ease;
}

.slider2 .left-slide:hover,.slider2 .right-slide:hover
{
    box-shadow:0px 0px 10px black ;
    background-color: #02efef;
}


.slider2 .left-slide
{
    left: 10px;
}


.slider2 .right-slide
{
    right: 10px;
}

.slider2 .slider2-items .item2 img
{
    max-width:100%;
    display:block ;
    animation:zoom 1s ease;
}

@keyframes zoom
{
    0%{transform: scale(2);opacity:0}
    50%{transform: scale(2);}
    100%{transform: scale(1);opacity:1}
}

.slider2 .slider2-items .item2
{
    display: none;
    position: relative;
}

.slider2 .slider2-items .item2 .caption
{
    position: relative;
    width: 100%;
    height: 15%;
    bottom: 0px;
    left: 0px;
    background-color: rgba(0,0,0,.2);
    text-align: center;
    color:black ;
    font-size: 20px;  
}
 
.slider2 .slider2-items .item2.active
{
    display: block;
}


/*---------our projects---------*/

#our-projects
{   
    
    margin:0 ;
    background-image: linear-gradient(to top, #ff0846d0 0%, #ffb199 100%);  
      
}


.ourprojects1
{   
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 25px; 
    background: linear-gradient(180deg,#17141d,#17141d);
    color: white;
    box-shadow: 0 10px 10px -5px black; 
    box-sizing: border-box;
    border: #02efef solid 3px;
}
.ourprojects1 img
{
    height: 125px;
    width: 125px;
    border-radius: 30px;
    margin: 10px;
    box-shadow: 0 10px 10px -5px black;  
}


.ourprojects1 p
{
    font-family: cursive,sans-serif;
    margin: 8px;
    margin-bottom: 8px;
}
.ourprojects1:hover
{
    border: #ff0844 solid 3px;
    background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
    color: #100e17;
}

.ourprojects2
{
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 25px;  
    background-image:radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.75), #100e17);
    box-shadow: 0 10px 10px -5px black;
    color: white;
    border: #02efef solid 3px;   
}

.ourprojects2 img
{
    height: 125px;
    width: 125px;
    border-radius: 30px;
    margin: 10px;
    box-shadow: 0 10px 10px -5px black;
      
}


.ourprojects2 p
{
    font-family: cursive,sans-serif;
    margin-top: 8px;
    margin-bottom: 8px;
    
}
.ourprojects2:hover
{
    border: #ff0844 solid 3px;
    background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
    color: #100e17;
}

.ourprojects3
{
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 25px; 
    background: linear-gradient(180deg,#17141d,#17141d);
    color:white;
    box-shadow: 0 10px 10px -5px black;  
    border: #02efef solid 3px;
    
    
}

.ourprojects3 img
{
    height: 125px;
    width: 125px;
    border-radius: 30px;
    margin: 10px;
    box-shadow: 0 10px 10px -5px black;  
}


.ourprojects3 p
{
    font-family: cursive,sans-serif;
    margin-top: 8px;
    margin-bottom: 8px;
    
}
.ourprojects3:hover
{
    border: #ff0844 solid 3px;
    background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
    color: #100e17;
}


.ourprojects4
{
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 25px; 
    background-image:radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.75), #100e17);
    color: white; 
    box-shadow: 0 10px 10px -5px black;
    border: #02efef solid 3px;
    
}

.ourprojects4 img
{
    height: 125px;
    width: 125px;
    border-radius: 30px;
    margin: 10px;
    box-shadow: 0 10px 10px -5px black; 
     
}


.ourprojects4 p
{
    font-family: cursive,sans-serif;
    margin-top: 8px;
    margin-bottom: 8px;
    
}
.ourprojects4:hover
{
    border: #ff0844 solid 3px;
    background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
    color: #100e17;
}
.pool
{
    display: block;
    font-size: 1.75em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    color: #F27935;
    font-family: cursive;

}
.pool:hover
{
    display: block;
    font-size: 1.75em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    color: #ff0844;
    font-family: cursive;

}

.list
{
    color:#17141d ;
    font-family: cursive;
    text-align: center;
    margin-top:40px ;
    padding-bottom: 50px;
    
}
.responsive
{
    padding: 0 6px;
    float: left;
    width: 25%;
}

@media only screen and (max-width: 850px)
{
    .responsive{
        width: 100%;
    }
} 

.gallery
{
    margin: 10px 50px  0 50px;
    
    
}

.gallery img
{
width: 230px;
padding: 5px;
filter: grayscale(100%);
transition: 1s;
border-radius: 10px;
}

.gallery img:hover
{
    filter: grayscale(0);
    transform: scale(1.1);
    
}

div.gallery3 {
    border: 1px solid #ccc;
  }
  
  div.gallery3:hover {
    border: 1px solid #777;
  }
  
  div.gallery3 img {
    width: 100%;
    height: auto;
  }
  
  div.desc {
    padding: 15px;
    text-align: center;
  }
  
  * {
    box-sizing: border-box;
  }
  
  .responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
  }
  
  @media only screen and (max-width: 700px) {
    .responsive {
      width: 49.99999%;
      margin: 6px 0;
    }
  }
  
  @media only screen and (max-width: 500px) {
    .responsive {
      width: 100%;
    }
  }
  
  .clearfix:after {
    content: "";
    display: table;
    clear: both;
  }


.pdf h3:hover
{
    color:blue; 
}
.pdf a
{
    text-decoration: none;
}
.do
{  
    color: red;
    font-family: cursive;
    text-align: center;
    margin-top:40px ;
    padding-bottom: 20px; 
}
.btn-2 {
    background-color:  #F27935;
    border-radius: 20px;
    margin: 10px;
    
  }
  
  
  .txt  
  {
    
    font-size: 16px;
    color: white;
    font-family: cursive;

  }
  .btn-2:hover
  {
      background-color:#17141d;
  }
 
  
/*--------------social media section-------------*/

#social-media
{
    background: #fff;
    padding: 40px 0 ;
}

#social-media p
{
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 30px;
}

.social-icons img
{
    width: 60px;
    transition: 0.5s;
    
}

.social-icons a:hover img
{
    transform: translateY(-10px);
    
}

/*------------footer section------------*/

#footer
{
    width: auto;
    background-image: url(../images/footer_background.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    color:whitesmoke;
}

.footer-img 
{

    width: 100%;
    height: 80px;
}

.footer-box1 p
{
    text-transform: lowercase;
    text-align:justify ;
    font-family: cursive,sans-serif;
    margin-top: 50px;
}
   
.footer-box1 span
{
    text-transform: uppercase;
    color:yellow; 
    
}

.footer-box a  
{
    color: #fff;
    text-decoration: none;
    font-weight: bolder;
    font-size: larger;
}

.footer-box a:hover  
{
    color:gold;
    font-weight: bolder;
    font-size: larger;
}

.footer-box1  img
{
    width:200px;
    box-shadow: 0 10px 10px -5px black;
    margin-top: 50px;
    
}

.footer-box .fa
{
    margin-right: 8px;
    font-size: 25px;
    height: 40px;
    width: 40px;
    text-align: center;
    padding-top: 7px;
    border-radius:10px ;
    background-image: linear-gradient(to left,#a517ba,#5f1782);
    
}

.lead-form
{
    min-width: 210px;
    max-width: 280px;
    background:transparent;
    margin:  auto;
    border-radius: 30px;
}

.title-box
{
    background: rgba(255, 255, 255, 0.2);
    height: 160px;
    padding-top: 20px;
    border-bottom-left-radius:200px 50px;
    border-bottom-right-radius:200px 50px;
}

.tips
{
    color: #FF00AA;
    font-family: cursive,sans-serif;
    text-shadow: -2px -2px  black;
    font-weight: bold;
    font-size: 25px;
    text-transform: lowercase;
}

form label
{
    float: left;
    margin-left: 37px;
    color: black;
    margin-top: 10px;
    margin-bottom: 3px;
    font-size: 15px;
}

.input-box
{ 
    height: 40px;
    padding: 0 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
    color:#999;
}

.input-box::placeholder
{
    color: #999;
}  

.submit-btn
{
    width: 150px;
    height: 50px;
    color:white;
    font-weight: 600;
    background-color: rgb(221, 15, 204);
    border: none;
    border-radius: 25px;
    margin-top: 20px;
    margin-bottom: -5px;
    cursor: pointer;
    padding: 15px 10px;
    box-shadow: -7px -7px 20px 0 rgba(255, 255, 255, 0.7);

}

hr
{
    background-color: #fff;
}
.copyright
{
     margin-bottom: 0;
     padding-bottom: 15px;
     text-align: center;
     
}