/* Updated youtube video modal */
.video-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    background: linear-gradient(218deg, rgba(175, 148, 222, 0.25) 34.06%, rgba(102, 183, 237, 0.25) 137.42%), #FFF;
    z-index: 9999;
    box-sizing: border-box;
    padding: 20px;
    /* Add some padding for small screens */
    overflow-y: auto;
    /* Allow browser scroll */
    overflow-x: hidden;
    /* Prevent horizontal scroll */
}

/* Center the modal content and limit its size */
.video-modal-content {
    margin: 5% auto;
    /* Vertically center */
    max-width: 63%;
    /* Limit width */
    max-height: 80vh;
    /* Limit height */
    overflow: hidden;
    /* Avoid inner scroll */
    box-sizing: border-box;
}

/* Responsive iframe container */
.iframe-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    /* 16:9 Aspect Ratio */
    overflow: hidden;
    border-radius: 8px;
    /* Optional for rounded corners */
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Close button styling */
.video-modal-close-btn {
    position: absolute;
    top: 48px;
    right: 48px;
    font-size: 30px;
    color: #3B2E58;
    background: none;
    border: 2px solid #3B2E58;
    border-radius: 8px;
    padding: 5px 10px;
    cursor: pointer;
    z-index: 10;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .video-modal-content {
        width: 90%;
        margin: 5% auto;
    }

    .video-modal-close-btn {
        top: 10px;
        right: 10px;
    }
}

.side-posts .side-post:not(:last-child) {
    border-bottom: 1px solid #BDC5D2;
    padding-bottom: 16px;
    /* Optional: Adds spacing between items */
}


/* Community slider */
/* First card spans 2 columns */
.span-2 {
    grid-column: span 2;
}

/* Other cards take one column */
.span-1 {
    grid-column: span 1;
}


/* Start drop down styling */
#discover {
    background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), radial-gradient(circle at 87% 35%, rgb(248, 103, 202) 0%, rgba(248, 103, 202, 0) 20%), radial-gradient(circle at 15% 72%, rgb(145, 119, 249) 0%, rgba(145, 119, 249, 0) 22%);
    }

.release-post.hidden {
    display: none;
}

#release-posts-container {
    padding-top: 30px;
}

.load-more-container {
    text-align: center;
}

.load-more-container a {
    margin: auto;
}


.custom-select {
    position: relative;
    font-family: inherit;
    padding: 16px;
    border-radius: 16px;
}

.custom-select .dropdown-btn {
    font-family: 'Segoe UI 600';
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0px;
    margin: 0px;
    text-align: left;
    cursor: pointer;
    font-weight: 600;
    border: none;
    background: none;
    color: var(--clr-drk-blue-gray);
}

.custom-select .options-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: white;
    z-index: 10;
    box-shadow: var(--sh-light-02);
    border-radius: 8px;
}

.dropdown-item:hover {
    background-color: var(--clr-purple-15);
}

.dropdown-item:hover {
    border-radius: 8px;
}

.custom-select.open .options-list {
    display: block;
    padding: 8px;
    margin-top: 8px;
    border-radius: 16px;
}

.custom-select.open svg {
    transform: rotate(180deg);
    /* Rotate the chevron 90 degrees when open */
}


/* Style for the dropdown menu */
.options-list {
    max-height: 600px;
    /* Set the maximum height */
    overflow-y: auto;
    /* Enable vertical scrolling */
    padding-right: 20px;
    /* Add extra space to the right */
    box-sizing: border-box;
    /* Ensure padding is inside the element width */
}

.options-list li {
    cursor: pointer;
}

/* Modern scrollbar styling for Webkit-based browsers */
.options-list::-webkit-scrollbar {
    width: 22px;
    /* Scrollbar width */
}

.options-list::-webkit-scrollbar-thumb {
    background-color: #DFDFDF;
    border: 8px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    border-radius: 9999px;
}

.options-list::-webkit-scrollbar-thumb:hover {
    background-color: #AAAAAA;
    /* Optional: hover effect */
}

.options-list::-webkit-scrollbar-track {
    background: transparent;
}


/* Smooth scrolling */
.options-list {
    scroll-behavior: smooth;
    /* Smooth scrolling for better UX */
}

.blog-section h3 a {
    word-break: break-word;
}

.events-slider-devhub .vscom-slider {
    padding-top: 180px;
}

#events-section {
    position: absolute;
    z-index: 1;
    left: 0px;
    width: 100%;
}

.sh-day-2:hover {
    box-shadow: 0px 14px 28px 0px rgba(0, 0, 0, 0.24), 0px 0px 8px 0px rgba(0, 0, 0, 0.20);
}

/* Dev Hub Social Slider */
.bg-dev-hub-social .vscom-slider.vscom-slider--modern-mini .vscom-slider-slides-wrapper {
    max-width: 630px;
    height: 358px;
}

.bg-dev-hub-social .vscom-slider--modern-mini .vscom-slider-slide {
    box-shadow: 0 4.8px 14.4px rgba(0, 0, 0, .18), 0 25.6px 57.6px rgba(0, 0, 0, .22);
}