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);
        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);
        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: #ffffff;
        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: 650px;
    }
    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 {
            margin-left: auto;
            justify-content: space-between;
        }
        nav ul {
            justify-content: space-between;
            list-style: none;
            display: flex;
            gap: 20px;
            margin: 0;
            padding: 0;
        }
        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;
        }
        
        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 */
        }
        
        .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 */
        }


        .container2 {
            position: relative;
            display: flex;
            justify-content: center; /* Centers horizontally */
            align-items: center; /* Centers vertically */
            gap: 0px;  /* Adjust spacing between boxes */
            margin-top: -100px; /* Adjust the top margin as needed to lift box2 */
            position: relative; /* Ensures proper stacking of elements */
            z-index: 2; /* Ensures box2 stays above the other boxes */
        }

        .box-container2 {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .box2 {
            width: 1850px;
            height: 150px;
            background-color: #ffffff;
            display: flex;
            justify-content: flex-start;  /* Aligns content to the left */
            align-items: center; /* Vertically centers content */
            color: rgb(0, 0, 0);
            font-size: 50px;
            border-radius: 10px 10px 10px 10px;
            border: 2px solid black; 
            margin-bottom: 10px; /* Space between box and description */
            position: absolute; /* Position independently from other boxes */
            top: -520px;
            padding-left: 20px;  /* Adds some space to the left side */
            text-align: left; /* Ensures text is aligned to the left */
        }

    


        .container1 {
            display: flex;
            justify-content: center; /* Centers horizontally */
            align-items: center; /* Centers vertically */
            gap: 100px;  /* Adjust spacing between boxes */
            margin-top: -300px; /* Adjust spacing from top */
            z-index: 1;
        }
        
        .box-container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .box {
            width: 550px;
            height: 650px;
            background-color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            color: rgb(0, 0, 0);
            font-size: 24px;
            border-radius: 10px 10px 0 0;
            border: 2px solid black; 
            margin-bottom: 10px; /* Space between box and description */
        }
        
        .description {
            width: 530px;
            height: 50px;
            background-color: #ffffff;
            color: rgb(0, 0, 0);
            text-align: center;
            padding: 10px;
            border-radius: 0 0 10px 10px;
            border: 2px solid black; 
            font-size: 60px;
            line-height: 50px;
            margin-top: -10px;

        } 

