.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
}

.plan-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 4rem 2.5rem;
    transition: all 0.4s;
    position: relative;
    display: flex;
    flex-direction: column;
    font-size: 18px;
}

.plan-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(102, 126, 234, 0.5);
    box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);
}


.plan-card h2 {
    text-align: center; /* Center the header */
    margin-bottom: 4rem; /* Optional: spacing below the header */
    font-size: 4rem;
}
.iframe-container {
    width: 80%;
    max-width: 1080px;  /* Maximum width of the container */
    margin: 0 auto;  /* Centers the container horizontally */
    border-radius: 15px;  /* Rounded corners for the container */
    overflow: hidden;  /* Hide overflow to keep rounded corners */
    position: relative;  /* Allows absolute positioning of the iframe */
    display: flex;  /* Flexbox to align content */
    justify-content: center;  /* Horizontally center iframe */
    align-items: center;  /* Vertically center iframe */
    /* Maintain aspect ratio for 16:9 (height: width) */
    padding-top: 56.25%;  /* 16:9 aspect ratio: 9/16 = 56.25% */
    background: #000;  /* Optional: black background to match video */
}

.iframe-container iframe {
    position: absolute;  /* Absolute positioning inside the container */
    top: 0;
    left: 0;
    width: 100%;  /* Ensure iframe takes full width */
    height: 100%;  /* Ensure iframe takes full height */
    border: none;  /* Remove any border */
    object-fit: cover;  /* Ensures video scales properly without distortion */
}

/* Mobile-specific styles */
@media (max-width: 768px) {
    .iframe-container {
        max-width: 100%;  /* Make sure it scales on mobile */
        padding-top: 56.25%;  /* Maintain the aspect ratio of 16:9 on mobile */
    }
}

/* Optional: Adjust iframe on larger screens */
@media (min-width: 1080px) {
    .iframe-container {
        max-width: 100%;  /* Remove max-width for large screens to make full use of available width */
        padding-top: 56.25%;  /* Maintain aspect ratio */
    }
}
