/* Constrain .right-content to 75% width and center it */
.right-content {
    width: 75%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* The video container takes 95% width of the parent 
   but is optionally capped at 800px */
.video-container {
    width: 95%;
    max-width: 800px;
    margin-bottom: 20px;
    text-align: center;
}

.video-container video {
    width: 95%; 
    height: auto;
}

/* Static image container takes 90% width of .right-content, 
   optionally capped at 800px for consistency */
.image-container {
    width: 90%;
    max-width: 800px;
    text-align: center;
    margin-top: 40px; /* Adjust spacing as needed */
}

/* Make the image responsive */
.image-container img {
    max-width: 100%;
    height: auto;
}

/* Button container and styles */
.button-container {
    margin-top: 20px;
    text-align: center;
}

.button-container .btn {
    display: inline-block;
    padding: 15px 30px; /* Increased padding for a larger button */
    background-color: #858585;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    font-size: 1.2em;  /* Larger font size */
}

.button-container .btn:hover {
    background-color: #555;
}

/* Style for the arrow element */
.button-container .btn .arrow {
    margin-left: 10px;
}

/* For mobile devices (<= 480px) */
@media (max-width: 480px) {
    .video-container {
        /* Make the container fully fluid but cap it at 380px */
        width: 100%;
        max-width: 380px;
        margin: 0 auto;       /* Center it horizontally */
    }
    .video-container video {
        width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
}

/* Base layout (desktop) */
.main-box {
    display: flex;
    /* flex-direction: row;  (implicit default) */
    /* Other styling... */
}

/* Swap order on mobile */
@media (max-width: 480px) {
    .main-box {
        flex-direction: column; /* Stack them vertically */
    }
    .right-content {
        order: 1; /* Show this first */
    }
    .left-content {
        order: 2; /* Show this second */
    }
}