/* CSS RESET */
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* 1rem=16px */
}
html{
    scroll-behavior: smooth;
}
/* CSS VARIABLES */
:root{
    --nav-height: 3.7rem;
}
/* NAVBAR */
#navbar{
    display: flex;
    align-items: center;
    position: sticky;
    top: 0rem;
    z-index: 2;
}
/* LOGO AND IMAGE */
#logo{
    margin: 0.6rem 2rem;
}
#logo img{
    height: 6.9rem;
    margin: 0.5rem 1.25rem;
    border-radius: 4.7rem;
}
#navbar ul{
    display: flex;
    flex-flow: row wrap;
    font-family: 'Itim', cursive;
}
#navbar::before{
    content: "";
    background-color: black;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
    opacity: 0.4;
}
#navbar ul li{
    list-style: none;
    font-size: 1.2rem;
    
}
#navbar ul li a{
    display: block;
    padding: 0.3rem 1.5rem;
    border-radius: 1.5rem;
    text-decoration: none;
    color: white;
    
}
#navbar ul li a:hover{
    background-color: whitesmoke;
    color: black;
    
}

/* HOME section */
#home{
    display: flex;
    flex-flow: column;
    padding: 0.3rem 9.3rem;
    padding-top: 12rem;
    height: 25rem;
    margin: 3.25rem 0.3rem;
    justify-content: center;
    align-items: center;
    color: white;
}
#home::before{
    content: "";
    background: url('img/BG.jpg') no-repeat center center/cover ;
    position: absolute;
    height: 41rem;
    width: 100%;
    top:0;
    z-index: -1;
    opacity: 0.85;
}
/* SERVICE SECTION */
#services{
    margin: 1.9rem;
    display: flex;
    justify-content: center;
    align-self: center;
    /* flex-flow: row wrap; */
}
#services .box{
    width: 32%;
    border: 0.2rem solid blue;
    padding: 0.6rem 1.9rem;
    margin: 0.2rem 0.5rem;
    border-radius: 1.7rem;
    background: rgb(199, 201, 228);
    text-decoration: none;
    color: black;
}
#services .box img{
    width: 100%;
    padding: 0.2rem;
    margin: auto;
    display: block;
    transition: all 2s;
}
#services .box p{
    font-family: 'Patrick Hand', cursive;
}
#services .box img:hover{
        transform: scale(1.1);
}
/* CLIENT SECTION */
#client-sec{
    /* height: 21.9rem; */
    position: relative;
}
#client-sec::before{
    content: "";
    position: absolute;
    background: url("img/kop14.jpg") no-repeat center center/cover;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.8;
}

#clients{
    display: flex;
    height: 18.75rem;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 3.4rem;
}
#clients img{
    height: 10.3rem;
}


/* CONTACT SECTION */
#contact{
    position: relative;
    
}
#contact::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.45;
    background: url("img/kop5.jpg") no-repeat center center/cover;
}
#contact-box{
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
}
#contact-box input, #contact-box textarea{
    width: 100%;
    padding: 0.5rem;
    border-radius: 1rem;
    font-size: 1.2rem;
}
#contact-box form{
    width: 50%;
}
#contact-box label{
    font-size: 1.1rem;
    font-family: 'Itim', cursive;

}




footer{
    background: black;
    color: white;
    padding: 1.25rem 1rem;
    margin: 0.5rem 0.2rem;
    padding-bottom: 2rem;
}
/* Utility CLASS*/

.p-prime
{
    font-size: 1.5rem;    
    padding: 0.2rem;
    font-family: 'Patrick Hand', cursive;
}
#title{
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
}
.main{
    color: rgb(242,242,40)
}
.h-prime
{
    font-size: 2.8rem;
    padding: 0.5rem;
    font-family: 'Itim', cursive;
    
}
.h-sec
{
    font-size: 150%;
    padding: 0.5rem;
    font-family: 'Itim', cursive;
}
.btn{
    padding: 0.2rem 1.3rem;
    border: 0.2rem groove white;
    background-color: black;
    color: white;
    margin: 0.5rem 0.4rem;
    border-radius: 19px;
    cursor: pointer;
    font-family: 'Itim', cursive;
}
.btn:hover{
    background-color: white;
    color: black;
}
.btn:active{
    background-color: green;
}
.center{
    text-align: center;
}