body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f8f8f8;
} 
      /* Header */
      header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #304e2f;
        color: #0b1344;
        padding: 250px;
        border-bottom: 0px solid rgb(0, 0, 0);
        position: relative;
    }
      
    .nav-container2 {
        position: relative;
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-bottom: 150px;
    }
    
    .polygon2 {
        position: absolute;
        right: 0;
        width: 255%;  /* Adjust width if needed */
        height: 150%;
        background: #40643f;
        clip-path: polygon(0% 0%, 69% 0%, 100% 100%, 0% 100%);
        border-bottom: 0px solid black;
        border-left: 0px solid rgb(255, 255, 255);
        transform: scaleX(-1);
        top: -163px; /* Adjust position independently */
        left: -960px;
        -webkit-transform: scaleX(1);
        -moz-transform: scaleX(1);
        -o-transform: scaleX(1);
    }
    
    .nav-container3 {
        position: relative;
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-bottom: 0px; /* Reduce any unnecessary gaps */
    }
    
    .polygon3 {
        position: absolute;
        right: 0;
        width: 954%;  /* Adjust width if needed */
        height: 300%;
        background: #40643f;
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        border-bottom: 0px solid black;
        border-left: 0px solid rgb(255, 255, 255);
        transform: scaleX(-1);
        top: -105px; /* Adjust position independently */
        left: -1160px;
        -webkit-transform: scaleX(1);
        -moz-transform: scaleX(1);
        -o-transform: scaleX(1);
    }

    .nav-container1 {
        position: relative;
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-bottom: 150px;
    }
    
    .polygon1 {
        position: absolute;
        right: 0;
        width: 774%;
        height: 115%;
        background: #40643f;
        clip-path: polygon(0% 0%, 100% 0%, 92% 100%, 0% 100%);
        border-bottom: 0px solid black;
        transform: scaleX(-1);
        top: -172px;
        left: -400px;
    }
    
    .nav-container {
        position: relative;
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-bottom: 150px;
    }
    
    .polygon {
        position: absolute;
        right: 0;
        width: 948%;  /* Adjust width if needed */
        height: 150%;
        background: #000000;
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        border-bottom: 0px solid black;
        border-left: 0px solid black;
        transform: scaleX(-1);
        top: -172px; /* Adjust position independently */
        left: -551px;
    }
    
    .logo img {
        position: absolute;
        width: 500px;
        height: 500px;
        top: -70px;
        left: 665px;
    }
        h1 { 
            position: absolute;
            font-style: italic;
            font-size: 70px;
            font-weight: bold;
            margin: 0 auto;
            text-align: center;
            flex-grow: 1;
            top: 370px;
            left: 610px;
        }
    
        nav a {
            font-size: 24px; /* Increase font size */
            font-weight: bold; /* Make text bolder */
            padding: 10px 20px; /* Add padding for larger clickable area */
            text-decoration: none;
            color: white; /* Ensure text is visible */
        }
        nav {
            position: absolute;
            top: 463px;
            right: 50px;
            z-index: 10;
            margin-left: auto;
            justify-content: space-between;
        }
        
        nav ul {
            display: flex;
            gap: 50px; /* Controls spacing between links */
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        nav li {
            display: inline-block;
        }
        
        nav a {
            padding: 10px 20px; /* Add padding for larger clickable area */
            color: white; /* Ensure text is visible */
            color: rgb(255, 255, 255); /* Adjust text color to be visible on the polygon */
            text-decoration: none;
            font-weight: bold;
            font-size: 28px;
            position: relative;
        }
        
        main {
            padding: 20px;
            min-height: 500vh; /* Increases height to require scrolling */
        }

        .content1 {
            display: flex;
            justify-content: space-between;
            max-width: 800px;
            margin: 100px auto;
            position: relative;
            min-height: 500px; /* Makes the box taller */
        }

        .content2 {
            display: flex;
            justify-content: space-between;
            border-bottom: 2px solid black;
            border-left:  2px solid black;
            border-right:  2px solid black;
            padding: 150px;
            max-width: 800px;
            margin: 100px auto;
            position: relative;
            min-height: 500px; /* Makes the box taller */
            z-index: 11;
            top: -557px; 
        }

        .column1 {
            position: absolute;
            display: flex;
            width: 38%;
            text-align: center;
            font-weight: bold;
            font-size: 2.2em;
            z-index: 10;
            top: -120px; 
            left: 557px;
        }
        .column1 h2 {
            border-bottom: 3px solid rgb(0, 0, 0);
            padding-bottom: 10px;
            z-index: 10;
        }

        .column {
            position: absolute;
            display: flex;
            width: 38%;
            text-align: center;
            font-weight: bold;
            font-size: 2.2em;
            z-index: 10;
            top: -120px; 
        }
        .column h2 {
            border-bottom: 3px solid rgb(0, 0, 0);
            padding-bottom: 10px;
            z-index: 10;
        }

        .home-link {
            position: absolute;
            top: -150px; /* Move it higher above polygon2 */
            left: -475px;
            font-size: 24px; /* Increase text size */
            font-weight: bold;
            color: rgb(255, 255, 255); /* Adjust text color if needed */
            background: none; /* Remove background box */
            border: none; /* Remove border */
            padding: 0; /* Remove extra padding */
            z-index: 10; /* Ensures it's above polygon2 */
        }

        @media (max-width: 768px) {
            /* Adjust header */
            header {
                flex-direction: column; /* Stack elements vertically */
                text-align: center;
                padding: 100px;
            }
        
            .logo img {
                position: absolute;
                height: 40px;
                margin-bottom: 10px; /* Add spacing */
                top: 30px; 
                left: 185px;
            }
        
            h1 {
                position: absolute;
                font-size: 2.0em;
                margin-bottom: 10px;
                top: 162px; 
            }
        
            /* Fix navigation */
            nav {
                position: absolute;
                width: 100%;
                text-align: center;
            }
        
            nav ul {
                flex-direction: column; /* Stack links vertically */
                align-items: center;
                gap: 10px;
            }
        
            nav a {
                position: relative;
                font-size: 18px; /* Make text readable */
                color: white; /* Ensure visibility */
            }
        
            /* Fix home link positioning */
            .home-link {
                position: absolute;
                position: relative;
                text-align: center;
                left: 0;
                top: 0;
                font-size: 18px;
            }
        
            /* Fix polygon positions */
            .polygon {
                position: absolute;
                width: 100%;
                height: auto;
                top: 162px; 
                left: -10;
            }
            .polygon1 {
                position: absolute;
                width: 100%;
                height: auto;
                top: 162px; 
                left: 0;
            }
            
            
            .polygon2 {
                position: absolute;
                width: 100%;
                left: 0;
                height: auto;
                top: 162px; 
            }
            
            .polygon3 {
                position: absolute;
                width: 100%;
                left: 0;
                height: auto;
                top: 162px; 
            }
        
            .content1 {
                position: absolute;
                margin: 20px;
                max-width: 90%;
                top: 162px; 
                left: 0;
            }
            
             .content2 {
                position: absolute;
                margin: 20px;
                max-width: 90%;
                top: 162px; 
                left: 0;
            }
        
        
            .column {
                width: 100%;
                text-align: center;
                top: 162px; 
                left: 0;
            }
            
              .column1 {
                width: 50%;
                text-align: center;
                top: 162px; 
                left: 0;
            }
        }
        
        
        
        
        @media (max-width: 768px) {
    /* Adjust header */
    header {
        flex-direction: column;
        text-align: center;
        padding: 50px;
        width: 84vw;
    }

    .logo img {
        height: 40px;
        margin-bottom: 10px;
        position: relative;
        top: 0;
        left: 0;
    }

    h1 {
        font-size: 1.8em;
        margin-bottom: 10px;
    }

    /* Fix navigation */
    nav ul {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    nav a {
        font-size: 18px;
        color: white;
    }

    /* Fix home link positioning */
    .home-link {
        text-align: center;
        font-size: 18px;
    }

    /*  Fix da Polygons PLZZZZZ */
    .polygon{
        width: 20vw;  /* Full screen width */
        height: 10px;   /* Adjust height automatically */
        left: 0;        /* Align with screen */
        top: 0;    /* Stack correctly */
        z-index: 12;
    }

    .polygon1{
        width: 75vw;
        height: 50px;   
        left: 0;      
        top: 0;    
        z-index: 12;
    }
    
    .polygon2{
        width: 30vw;  
        height: 50px;  
        left: -208px;      
        top: 10px; 
        z-index: 12;
    }
    
    .polygon3 { 
        width: 109vw; 
        height: 50px;  
        left: -291px;
        top: 100px;  
        z-index: 12;
    }


    /* Adjust content positioning */
    .content1, .content2 {
        max-width: 90%;
        margin: 10px auto; /* Center elements */
    }

    .column {
        width: 100%; /* Make sure text doesn't get too squished */
    }
}