:root{
    --site-color-01:#6DCFF6;
    --site-color-01-hover:#0a5674;
}

body{
    background: color #000;
}

.wrapper-main {
    
    width: auto;
    margin: 0 auto;
}
a {cursor: pointer;
}



h1{
    font-size: 98px;
    line-height: 32px;
    color:#0d0d0d;
    font-family: "Poetsen One", sans-serif;
    font-weight: 400;
    text-transform: uppercase; 

    
   
}

h2{
    font-size: 40px;
    line-height: 32px;
    color:#0d0d0d;
    font-family: "Poetsen One", sans-serif;
    font-weight: 400;
    text-transform: uppercase; 
    text-align: center;
    margin: 0 auto;
    padding-bottom: 60px;
    
   
}
h3{
    font-size: 28px;
    line-height: 32px;
    color:#0d0d0d;
    font-family: "Poetsen One", sans-serif;
    font-weight: 400;
    text-transform: uppercase; 

    
   
}
h4{
    font-size: 22px;
    line-height: 32px;
    color:#0d0d0d;
    font-family: "Poetsen One", sans-serif;
    font-weight: 100;
    text-transform: uppercase; 

    
   
}
p{
    font-size: 18px;
    line-height: 30px;
    color: #0d0d0d;
    font-family: "Poetsen One", sans-serif;
      
}

a{
    font-size: 14px;
    line-height: 18px;
    color: #0d0d0d;
    font-family: "Poetsen One", sans-serif;  
}
.subtitle{
    font-size: 24px;
    line-height: 30px;
    color: #0d0d0d;
    font-family: "Poetsen One", sans-serif;
    font-weight: 10;
    text-align: center;
    padding: 0 30 30 0;
}

.centeredText {
    text-align: center;
}
.header-main{
    position: fixed;
    top: 0px;
    width: 100%;
    height: 60px;
   background-color:#fcca46;
   display:flex;
    flex-direction: row;
    justify-content:space-between;
    z-index: 1000;
    
    
}
.header-main-logo{
    width:fit-content;
    height:100%;
    background-color:#fcca46;
    display: flex;
    padding-left: 60px;
    
   
       }
       .header-main-logo img{
        height: 60px;
        align-self: center;
       }
       
       
        
       
.header-main-nav {
    width:fit-content;
    height:100%;
    background-color:#fcca46;
    display: flex;
    


}
.header-main-nav ul {
    list-style: none;
    margin-left: 30px;
    margin-right: 30px;

}
.header-main-nav ul li {
    display: inline;
    float: left;
    
    
}
.header-main-nav ul li a{
    padding: 0 10px;
    font-family: "Poetsen One", sans-serif;
    line-height: 60px;
    color: #0d0d0d;
    display: block;
    height:100%
}
.header-main-nav ul li a:hover{
    color:#6DCFF6
}

.header-main-sm{
    width:fit-content;
    height:100%;
    background-color: #7fb285;
    display: flex;
    padding-right: 60px;
    padding-left: 20px;
    align-items: center;
    column-gap: 10px;
}
.header-main-sm-yt{
    width: 20px;
    height: 20px;
    background-image: url(../css/image/youtubebw.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.header-main-sm-fb{
    width: 20px;
    height: 20px;
    background-image: url(../css/image/facebook.png);
    background-repeat: no-repeat;
    background-size: cover;

    }

.header-main-sm-in{
    width: 20px;
    height: 20px;
    background-image: url(../css/image/instagram.png);
    background-repeat: no-repeat;
    background-size: cover;
}


/*footer*/

.footer-main{
    width: 100%;
    padding: 60px 0 100px;
    background-color:#7fb2a5;
    
}
.footer-main-flex{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.footer-testimony-1{
    flex-basis: 20%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

}
.footer-testimony-1 img{
    width: 50%;
    border-radius: 100px;

}
.footer-testimony-1 p{
    text-align: center;
    font-size: 16px;
    padding: 20px 20px 0px;
}
.footer-getintouch {
padding:  10px 20px;
margin: 40px 0 60px;
border: 2px solid #386641;
font-weight: 600;
color:#386641;
font-size: 18;
background-color: white;
transition: all ease-in-out 200ms;
}
.footer-getintouch:hover {
 border: 2px solid var(--site-color-01)
 ;
    }

.footer-sitemap {
    flex-basis: 100%;
    display: flex
    }

    .footer-sitemap a{
        line-height: 30px;
    
    }
    .footer-sitemap a:hover{
        opacity: 0.8;
    }

 .footer-sitemap ul:nth-child(1) {
        flex-basis: 180px;
        border-left: 4px solid var(--site-color-01);
        padding-left: 20px;
        text-transform: uppercase;
        margin-left: 20px;
        }
 .footer-sitemap ul:nth-child(2){
            flex-basis: 340px;
            text-transform: uppercase;
            text-align: center;
            }
 .footer-sitemap ul:nth-child(3){
                flex-grow: 1;
                text-align: right;
                margin-right: 20px;
                
                }


.burger-menu, .burger-menu-btn {
    display: none;
}

/*mobile version*/
           
            @media only screen and (max-width:600px) {
             
                .burger-menu-btn{
                display: block;
                width: 50px;
                height: 50px;
                background-image:url(../css/image/icons/burger-menu.png), url(../css/image/icons/close.png);
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center, center left 50px;
               }

               .burger-menu{
                display:none;
                position: fixed;
                width: 100%;
                height: 100vh;
                z-index: 900;
                background-color: #fcca46;
                

               }
               
               .burger-menu ul{
                width: 100%;
                height: calc(100vh - 60px);
                padding-top: 60px;
                display:flex;
                flex-wrap: wrap;
                align-content: flex-start;
                

                
               }

               .burger-menu ul li{
              flex-basis: 100%;
              border-top: 2px solid #6DCFF6;
                            
                
               }
               .burger-menu ul li:last-child{
                border-bottom: 2px solid #6DCFF6;

               }

               .burger-menu ul li a{
               display: block;
               height: 100%;
               font-size: 3rem;
               padding: 30px 0;
               flex-basis: 100%;
               text-align: center;
               color:#ffff;
               
                              
                  
                 }
                .wrapper-main {
                    width: 100%;
                    
                }          
                .header-main{
                    height: auto;
                   
                }
                .header-main-logo{
                   
                    padding-left: 10px;
                    justify-content: center;             
                       }

                       .header-main-nav {
                        width:fit-content;
                        
                        display: none;
                       }
                    .header-main-sm {
                       
                        padding-right: 10px;
                        padding-left: 5px;
                        height: auto;
                      
                    }
                    h2{
                        
                        margin: 0 auto;
                       width:100%;
                       
                    }



.footer-getintouch {

margin: 0px 0 60px;

}
.footer-getintouch:hover {
 border: 2px solid var(--site-color-01)
 ;
    }

.footer-sitemap {
  flex-wrap: wrap;
    }

   

 .footer-sitemap ul:nth-child(1) {
        
        border-left: none;
        padding-left: 0px;
        margin-left: 0px;
        text-align: center;
        
        }
        .footer-sitemap ul:nth-child(1),
 .footer-sitemap ul:nth-child(2),
 .footer-sitemap ul:nth-child(3){
            flex-basis: 100%;
            text-align: center;
            padding-bottom: 20px;
            }
 
                
                
        
        }