*{
    margin: 0;
    padding: 0;
}


html{
    scroll-behavior: smooth;
}


body{
    font-family:'Poppins','sans-serif';
}


#hero{
    width: 100%;
    height: 900px;
    background:rgba(0, 0, 0, 0.55)url("../images/background.jpg");
    background-position: center;
    background-size: cover;
    background-blend-mode: darken;
    position:relative;
    overflow: hidden;
    top: 0;
    left: 0;
    position:relative;
}


#hero .navbar{
    height: 100px;
    background-color: transparent;
}

.bg-dark{
    background-color: black;
}


#hero .navbar .navbar-nav .nav-link{
    color: rgb(255, 255, 255);
    font-size: 14pt;
    font-weight: bold;
}

#hero .navbar .navbar-nav .active{
    color: rgb(255, 174, 0);
}


#hero .navbar-brand img{
    display: block;
    width: 100px;
    height: 100px;
}


#hero .intro{
    color: white;
    margin-top: 30vh;
    position: absolute;
    margin-left: 12vw;
}


#hero .intro h2{
    color: white;
    font-weight: bold;
    font-size: 30pt;
}


#hero .intro h4{
    color: white;
    font-weight: bold;
    font-size: 30pt;
}

#hero .intro #apex{
    background:linear-gradient(to right, #FFAF13, #1D9BF0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 100%;
    font-weight: 800;
    font-size: 45pt;
}


#hero .intro #greet{
    color: rgb(240, 237, 237);
    font-size: 35pt;
}


/*-------------------------about----------------------*/
#about {
    margin-top: 40vh;
    width: 100%;
    height: 500px;
}


#about .about-heading{
    color: black;
    font-size: 20pt;
    font-weight: bold;
}


#about .about-us{
    font-size: 18pt;
    text-align: left;
    font-weight: 400;
    color: #8a8a8a;
    margin-top: 5vw;
}


#about .img-wrapper{
    height: 220px;
    width: 220px;
    position: relative;
    margin-top: 5vw;
    float: right;
}


#about .img-wrapper img{
    width: 200px;
    height: 200px;
    display: block;
}



/*-------------------------services----------------------*/
#services {
    margin-top: 40vh;
    width: 100%;
    height: auto;
    position: relative;
}


#services .services-heading{
    color: black;
    font-size: 20pt;
    font-weight: bold;
}


#services .image-gallery{
    margin-top: 100px;
    height: auto;
    display: block;
}


#services  #carouselExampleIndicators .carousel-inner{
    height: auto;
    
    
}


#services #carouselExampleIndicators .carousel-inner .carousel-item img{
   background-size: cover;
   filter: brightness(0.7);
    
}


#services #carouselExampleIndicators .carousel-inner .carousel-item .carousel-caption{
    color: #FFAF13;
}


#services .services-title{
    font-weight: 800;
    margin-top: 40px;
}



#services .services-subtitle{
    margin-top: 20px;
    color: #A8938A;
}



#services .services-underline{
    width: 60px;
    height: 4px;
    background-color: #A8938A;
    margin-top: 10px;
    margin-bottom: 25px;
}


#serivces .services-desc{
    margin-top: 10px;
    text-align: left;
}



  




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

  #contact {
    margin-top: 40vh;
    width: 100%;
    height: auto;
}


#contact .contact-heading{
    color: black;
    font-size: 20pt;
    font-weight: bold;
}


#contact .bi{
    font-size: 22pt;
    margin-right: 10px;
    display: inline-block;
}


#contact .contact-details{
    margin-top: 100px;
    text-align: left;
}


#contact .contact-details h5{
    margin-top: 40px;
    color: #626262;
}


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

 #footer{
    height: 120px;
    width: 100%;
    background-color: #139FDA;
    margin-top: 100px;
 }


 #footer .bi{
    font-size: 20pt;
    letter-spacing: 20px;
    float: left;
    margin-top: 49px;
    color: white;
 }

 #footer #copy{
    position: absolute;
    float: right;
    color: rgb(255, 255, 255);
    margin-top: 50px;
 }



  /*-----------------------mobil view---------------------*/


@media screen and (max-width: 600px){
    #hero .navbar{
        height: 100px;
        background-color: transparent;
    }

    #hero{
        width: 100%;
        background:rgba(0, 0, 0, 0.55)url("../images/background.jpg");
        background-position: center;
        background-size: cover;
        background-blend-mode: darken;
        position:relative;
        overflow: hidden;
    }
    
    #hero .navbar .navbar-nav .nav-link{
        color: rgb(88, 88, 88);
        font-size: 14pt;
        font-weight: bold;
        margin-left: 40px;
    }
    
    #hero .navbar .navbar-nav .active{
        color: rgb(255, 174, 0);
    }
    
    
    #hero .navbar-brand img{
        display: block;
        width: 80px;
        height: 80px;
        margin-bottom: 20px;
    }
    
    
    #hero .intro{
        color: white;
        margin-top: 35vh;
        position: absolute;
        margin-left: 12vw;
    }
    
    
    #hero .intro h2{
        color: white;
        font-weight: bold;
        font-size: 20pt;
    }
    
    
    #hero .intro h4{
        color: white;
        font-weight: bold;
        font-size: 20pt;
    }
    
    #hero .intro #apex{
        background:linear-gradient(to right, #FFAF13, #1D9BF0);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-size: 100%;
        font-weight: 800;
        font-size: 30pt;
    }

    #hero .intro #greet{
        color: rgb(235, 234, 234);
        font-size: 30pt;
    }

    #hero .navbar-toggler{
        background-color: white;
        margin-bottom: 20px;
        
    }
    

    #hero .collapse.navbar-collapse{
        background-color: white;
        width: 100%;
  }


  #about {
    margin-top: 20vh;
    width: 100%;
    height: auto;
}


#about .img-wrapper{
    background-color: #FFAF13;
    margin: 0 auto;
    height: 200px;
    width: 100%;

    
}


#about .img-fluid{
    width: 200px;
    height: 200px;
    display: block;
    margin: 0 auto;
    
}


#contact {
    margin-top: 10vh;
    width: 100%;
    height: auto;
}


#contact iframe{
    width: 100%;
}


#services  #carouselExampleIndicators .carousel-inner{
    height: 400px;
    
}


#services #carouselExampleIndicators .carousel-inner .carousel-item img{
    background-size: cover;
    background-repeat: no-repeat;
    filter: brightness(0.7);
    height: 400px;
     
 }


 #services #carouselExampleIndicators .carousel-inner .carousel-item .carousel-caption{
    color: #FFAF13;
    margin-bottom: 26vh;
 }


 #services .img-fluid{
    width: 80px;
    height: 80px;
 }


 #footer{
    height: 180px;
    width: 100%;
    background-color: #139FDA;
    margin-top: 100px;
 }


 #footer #social-media{
    width: 100%;
    height: 100px;
    padding-left: 28vw;
 }

 #footer .social{
    font-size: 20pt;
    letter-spacing: 20px;
    margin-top: 49px;
    color: rgb(233, 230, 230);
    text-align: center;
    
    
 }

 #footer #copy{
    color: rgb(224, 218, 218);
    margin-top: 20px;
    text-align: center;
 }




}