/* Ensure the body has no default margin and padding */
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: black;
}

.logo{
    position: fixed;
    top: 2%;
    left: 1%;

}

.logo img {
    width: 400px; /* Set the width of your logo */
    height: auto; /* Maintain the aspect ratio of the logo */

}

.contact{
    position: fixed;
    bottom: 5%;
    right: 3%;

}

.contact img{
    width: 400px;
}

/* Style the image grid */
video {
height: 100vh;
}

.image-grid {
    display: grid;
    grid-template-columns: 1fr; /* Default to one image per row */
    gap: 10px; /* Adjust the gap between images as needed */
    padding: 0px;
}

.image-grid img {
    width: 100%;
    height: auto; /* Maintain the aspect ratio of the images */
}
.image-grid video {
    width: 100%;
    height: auto; /* Maintain the aspect ratio of the images */
}

.centered-div {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Center items vertically */
    height: 100vh; /* Full viewport height to ensure vertical centering */
    text-align: center; /* Align the text within the div */
}

.centered-div h1 {
    font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 300;
font-style: normal;
    font-size: 5rem;
    margin-bottom: 0;  
    color: white;  
}

.centered-div p {
    font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 300;
font-style: normal;;
    font-size: 3rem;
    color: white;  
    
}
.centered-div a {
    font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 300;
font-style: normal;
    font-size: 3rem;
    text-align: left;
    padding-left: 50px;
    margin-bottom: 20px; /* Space below the paragraph */
    color: red;
}



/* Responsive adjustments */
@media (min-width: 800px) {
    .image-grid {
        grid-template-columns: repeat(2, 1fr); /* Two images per row on wider screens */
    }
    
}
/* Responsive adjustments */
@media (max-width: 800px) {
    
    .contact img{
        width: 300px;
    }
    .contact {
        position: fixed;
        bottom: 5%;
        right: 7%;
        
        
    }
    .centered-div{
        height: auto;
    }
    .centered-div h1{
        font-size: 1.4rem;
    }
    .centered-div p{
        font-size: 1.4rem;
    }
    .centered-div a{
        font-size: 1.4rem;
    }
    
    .logo {
          position: absolute;
            top: 10%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .logo img{
        width: 300px;
    }
}