* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Header Styles */
.main-header {
    width: 61.8%; /* Full width across the page */
    height: 11.6vw;
    box-sizing: border-box; /* Include padding in width/height calculation */
    padding: 1.6%; /* Optional padding */
    background-color: #fffffff6; /* Semi-transparent background */
    text-align: center; /* Center text horizontally */
    display: flex; /* Use flexbox for alignment */
    justify-content: center; /* Center text horizontally */
    align-items: center; /* Center text vertically */
    margin: 0 auto; /* Center the header horizontally */
}

.company-name {
    font-size: 4.5vw; /* Larger font size for the name */
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    color: #181515; /* White text for visibility */
    text-transform: uppercase; /* Make the name all uppercase */
    letter-spacing: 0.2%; /* Add spacing between letters */
    margin: 0; /* Remove default margin */
    display: flex; 
    align-items: center;
}

.company-name::before,
.company-name::after {
    content: "•"; /* Unicode for a bullet point */
    font-size: 3.8vw; /* Adjust to match text size */
    margin: 0 1vw; /* Space between text and dots */
}

/* Main Content Container */
.content-container {
    position: relative;
    width: 38.2%;
    display: flex; /* Use flexbox */
    flex-direction: column; /* Stack elements vertically */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    padding: 32px 64px; /* Add padding around the container */
}

body {
    font-family: Arial, sans-serif;
    background-color: #181515; /* Black background */
    display: flex;
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    min-height: 100vh; /* Full viewport height */
    margin: 0;
    
}

/* Background Container */
.background-container {
    position: relative;
    width: 38.2%; /* Relative size to viewport width (4x larger than before) */
    height: 40vw; /* Keep it proportional */
    /*max-width: 1200px; /* Set a maximum size */
    /*max-height: 1200px; /* Set a maximum size */
    min-width: 200px;  /*Set a minimum size */
    min-height: 200px; /*Set a minimum size */
    overflow: hidden; /* Prevent overflow */
    z-index: 0; /* Place below everything */
}

/* Background Image */
.background-image {
    position: absolute; /* Ensure overlapping */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Match the container size */
    display: block;
    object-fit: cover; /* Ensure the image scales proportionally */
    transition: transform 0.3s ease; /* Smooth zooming */
    overflow: hidden;
    z-index: 0;
}

/* Overlapping Container */
.overlap-container {
    position: absolute; /* Overlapping background */
    display: flex;
    top: 0;
    left: 0;
    width: 100%; /* Match the background container */
    height: 100%; /* Match the background container */
    z-index: 1; /* Place above the background */
}

/* General Polygon Link Styles */
.polygon-link {
    position: absolute; /* Ensure overlapping */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Match the container size */
    display: block;
    cursor: pointer;
    clip-path: polygon(0% 0%, 67% 0%, 71% 5%, 73% 9%, 70% 14%, 70% 19%, 69% 24%, 70% 30%, 69% 35%, 66% 40%, 60% 44%, 53% 48%, 49% 52%, 43% 53%, 38% 56%, 35% 58%, 34% 65%, 39% 71%, 40% 78%, 47% 81%, 60% 94%, 60% 100%, 43% 100%, 23% 100%, 0% 100%);
    -webkit-clip-path: polygon(0% 0%, 68% 0%, 70% 5%, 71% 9%, 71.5% 14%, 72% 19%, 72% 24%, 71% 30%, 69% 35%, 65% 40%, 57% 43%, 50% 48%, 44% 51%, 42% 53%, 40% 56%, 39% 58%, 36% 64%, 35% 71%, 37% 78%, 37.5% 81%, 44% 90%, 50% 94%, 51% 95%, 55% 100%, 42% 100%, 23% 100%, 0% 100%);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 2; /* Place above the background */
    
}

/* Text Inside Buttons */
.button-text {
    position: absolute;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for perfect centering */
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;;
    font-size: 3.6vw; /* Adjust size for visibility */
    color: rgba(0, 0, 0, 0.95);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.87); /* Add text shadow for readability */
    pointer-events: none; /* Ensure text does not interfere with clicks */
}

/* Specific Placement for Each Button */
.first .button-text {
    top: 18%; /* Position text near the top of the first button */
    left: 10.95%; /* Offset from the left */
    transform: translate(0, 0); /* No centering */
    text-shadow: 0 1px 15px rgb(255, 255, 255); /* Add text shadow for readability */
}

.second .button-text {
    top: 60%; /* Position text near the bottom of the second button */
    left: 52%; /* Offset from the right */
    transform: translate(0, 0); /* No centering */
    text-shadow: 0 1px 37px rgba(250, 237, 164, 0.70);
}

/* Second Button with Different Shape */
.polygon-link.second {
    clip-path: polygon(100% 0%, 57% 0%, 59% 5%, 60% 8%, 60% 13%, 60% 16%, 60% 21%, 60% 26%, 57% 31%, 55% 34%, 49% 39%, 44% 42%, 41% 45%, 35% 49%, 32% 56%, 29% 62%, 27% 67%, 27% 73%, 27% 81%, 31% 91%, 37% 98%, 42% 100%, 46% 100%, 100% 100%);
    -webkit-clip-path: polygon(100% 0%, 57% 0%, 59% 5%, 60% 8%, 60% 13%, 60% 16%, 60% 21%, 60% 26%, 57% 31%, 55% 34%, 49% 39%, 44% 42%, 41% 45%, 35% 49%, 32% 56%, 29% 62%, 27% 67%, 27% 73%, 27% 81%, 31% 91%, 37% 98%, 42% 100%, 46% 100%, 100% 100%);
    z-index: 1; /* Place above the background */
}

/* Images */
.polygon-button {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure image fits within the container */
    display: block;
    transition: transform 0.3s ease; /* Ensure scaling matches background */
    border: none; /* Ensure no border on the image itself */
}

/* Hover Effects (Common for Both) */
.polygon-link.first:hover,
.polygon-link.second:hover {
    transform: scale(1.05); /* Slightly enlarge */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5); /* Add shadow */
}

/* Hover effect for background image */
.overlap-container:hover ~ .background-image {
    transform: scale(1.05); /* Scale background with buttons */
}
footer {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    background-color: #181515;
    color: #faf9f9;
    padding: 1em;
    z-index: 1000;
}