* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    
}
        body, html {            
        height: 100%;
        font-family: 'Saira Condensed', sans-serif;
                
        }

        header {
            
            display: flex;
            justify-content: space-between; 
            align-items: center; 
            background-color: rgb(0, 20, 27, 1); 
            opacity: 95%;
            position: fixed; 
            top: 0; 
            left: 0; 
            right: 0; 
            padding: 10px 50px; 
            z-index: 1000; 
            height: 80px;
        }
        .logo {
            width: 250px; 
           
        }
        nav {
            
            display: flex;
            gap: 30px;
            
        }
        nav a {
            font-weight: 800;
            font-size: 40px;
            text-decoration: none;
            color: white;
            transition: color 0.3s;
        }
        nav a:hover {
            color: #98ff98;
        }


        

        .Homepagina {
            width: 100%;
            height: 100vh;            
            position: relative;
            color: white;
            
            
            
        }
        .background-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: brightness(0.7);
            

        }
        
        h1 {
            
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-weight: bold;
            font-size: calc(160px * 0.5 + 2vw); /* Voor verschillende schermen */
            text-align: center;
            line-height: 1;
            z-index: 2;
        }
        h1 span {
            color: #98ff98;
        }

        section {
            padding: 100px; 
            min-height: 100vh; 
            background-color: #f0f0f0; 
        }
        
        h2 {
            font-size: 50px;
            margin-bottom: 20px;
        }
        
        .overlay {
            position: absolute;
            width: 100%;
            height: 100%;
            background: linear-gradient(0deg, #01141C 0%, rgba(255,255,255,0) 10%);
            z-index: 500;

        }










        #about {
            position: relative;
            padding: 100px 50px;
            background-color: #f0f0f0; 
            min-height: 100vh; 
            z-index: 1;
            
        }
        
        #about::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #01141C; 
            clip-path: polygon(0 0, 100% 0, 100% 70%, 0 30%); 
            z-index: -1; 
        }



        
        
        .trainer {
            display: flex;  
            margin: 20px;
            width: 100%; 
            min-width: 300px;
            max-width: 1200px;
            
        }

        .trainer img {
            width: 300px;
            height: 300px;
            margin: 20px;
            
        }
        
        
        
    
        .text-block {
            flex:1;
            padding: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;  
        }
        
        .text-block h3 {
            font-family: 'Saira Condensed', sans-serif;
            font-size: 24px;
            margin: 0;
            color:white
        }
        
        .text-block span {
            color: #98ff98;
            font-weight: 700;
        }

        .text-block p {
            margin-top: 10px;
            line-height: 1.6;
            color: #ffffff;
            font-size: 16px;
        }

        .text-block-ermin {
            flex:1;
            padding: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            
        }
        
        .text-block-ermin span {
            color: #98ff98;
            font-weight: 700;
        }
        
        .text-block-ermin h3 {
            font-family: 'Saira Condensed', sans-serif;
            font-size: 24px;
            font-weight: 700;
            margin: 0;
            color:black
        }
        

        .text-block-ermin p {
            margin-top: 10px;
            line-height: 1.6;
            color: black;
            font-size: 16px;
        }
        
        #twan {
            position: absolute ;
            top: 60px; 
            right: 20px;
            width: 680px; 
            flex-direction: row-reverse;
        }

        #ermin {
            position: absolute;
            bottom: 100px; 
            left: 20px;
            width: 680px; 
    
        }

      
        #aanmelden{
            position: relative;
            padding: 100px 50px; 
            
            z-index: 1;
        }
        
        #aanmelden::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #01141C; 
            clip-path: polygon(0 70%, 100% 30%, 100% 100%, 0 100%); 
            z-index: -1; 
        }

        h4 {
            
            position: absolute;
            top: 25%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-weight: bold;
            font-size: calc(160px * 0.5 + 2vw); /* Voor verschillende schermen */
            text-align: center;
            line-height: 1;
            z-index: 2;
            
            color: #98ff98; 
            
            
        }

        h5 {
            position: absolute;
            top: 65%; 
            left: 50%;
            transform: translate(-50%, -50%);
            font-family: 'Saira Condensed', sans-serif;
            font-size: 24px;
            margin: 0;
            color: white;
        }


        #aanmelden2 {
            position: relative;  
        }
        
        .overlay2 {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(0deg, #FDFEF9 0%, rgba(255, 255, 255, 0) 10%);
            z-index: 2; 
            
        }
        
        .container {
            display: flex;
            position: relative;
            gap: 20px;
            z-index: 3;
        }
        
        .form-container {
            width: 300px;
            margin-left: 200px;
            margin-top: 100px;
        }
        
        label {
            font-weight: bold;
            font-size: 20px;
            margin-top: 10px;
            display: block;
        }
        
        input, textarea {
            width: 100%;
            padding: 8px;
            margin-top: 5px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        
        textarea {
            height: 60px;
        }
        
        .image-container {
            text-align: center;
            margin-top: 90px; 
            margin-left: 600px;  
            width: 680px;
        }
        
        .image-container img {
            border-radius: 10px;
            width: 550px;
            height: auto;
            
        }
        
        .image-container p {
            font-size: 24px;
            font-weight: 600;
            margin-top: 10px;
            color: #333;
        }

        .image-container p span {
            color: #98ff98;
        }

       

        .contact-section1 {
            width: 40%;
            max-width: 400px; 
            margin-left: 350px;
            margin-top: 430px;
            border-radius: 8px;
            text-align: center;
        }
        
        .contact-section2 {
            width: 40%;
            max-width: 400px;
            margin-left: 950px;
            margin-top: -263px;
            padding: 20px;
            text-align: center;
        }
        

        .contact-sections span {
            font-size: 28px;
            margin-bottom: 10px;
            font-weight: 500;
            color: #ffffff;
            text-shadow: 0px 0px 3px #000000, 0px 0px 8px #000000, 0px 0px 10px #000000, 0px 0px 10px #000000;
        }
        
        
        .contact-item {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 5px 0;
            justify-content: center;
        }
        
        
        .contact-item i {
            font-size: 1.2em;
        }

        

        #contact {
           background-image:url("assets/ruben-leija-Qlrcw3yOKec-unsplash.jpg");
           background-repeat: no-repeat;
           background-size: cover;
           background-position: center;  
           
        }