/* Mobile responsive layouts */
@media screen and (max-width: 768px) {
    .video-container {
        padding: 10px;
        gap: 10px; /* Uniform gap between rows */
        grid-template-rows: auto;
    }
}
    
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* ...existing code... */

@media screen and (min-width: 1080px) {
    .presentation-text {
        font-size: 96px;
        width: calc(100% - 240px);
        padding: 60px 120px; /* Reduced top padding */
        line-height: 1.2;
        max-width: 2000px;
        margin: 0 auto;
    }

    .marquee {
        padding: 20px 0;
    }
}

@media screen and (max-width: 768px) {
    .video-container {
        padding: 0 20px 20px 20px;  /* Reduced padding for mobile */
    }
    
    .presentation-text {
        width: calc(100% - 40px);
        padding: 30px;
        font-size: 32px;
    }

    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }
}

/* Mobile responsive layouts */
@media screen and (max-width: 768px) {
    .video-container {
        padding: 10px;
        gap: 10px; /* Uniform gap between rows */
        grid-template-rows: auto;
    }

    .row4, .row7 {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px; /* Uniform gap between videos in each row */
        margin: 0;
    }

    .video-wrapper {
        margin: 0;
        padding: 0;
    }


    /* Remove all extra spacing */
    .video-wrapper {
        margin: 0;
        padding: 0;
    }

    /* Maintain aspect ratios */
    .video-wrapper video {
        width: 100%;
        height: auto;
    }

    .row2, .row6 {
        grid-template-columns: repeat(1, 1fr);
        gap: 10px; /* Uniform gap between videos in each row */
        margin: 0;
    }

    .row1 .video-wrapper video {
        aspect-ratio: 16/9; /* Horizontal format for hero video */
    }

    .row2 .video-wrapper video {
        aspect-ratio: 4/5; /* Vertical format */
    }

    .row3 .video-wrapper video {
        aspect-ratio: 5/4; /* Slightly horizontal format */
    }

    .row4 .video-wrapper video,
    .row4 .video-wrapper img {
        aspect-ratio: 1/1; /* Square format */
    }
}

/* Ensure hero video remains full width on mobile */
@media screen and (max-width: 768px) {
    .row1, .row3{
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 768px) {
    .contact-about {
        text-align: left;
        justify-self: start;
    }
    
    .contact-about p {
        max-width: 100%;
        margin: 0;
    }
}

@media screen and (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
        padding: 0 20px;
        gap: 30px;
    }

    .contact-info,
    .contact-social,
    .contact-about {
        padding-right: 0;
    }
}



@media screen and (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
        padding: 0 20px;
        gap: 20px;
    }
}

@media screen and (max-width: 768px) {
    .contact-social {
        text-align: left;
        justify-self: start;
    }
    
    .social-links {
        justify-content: flex-start;
    }
}


@media screen and (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
        padding: 0 20px;
        gap: 20px;
    }
}