/* menu open */
.colony_menu_open {
    cursor: pointer;
}
.menu_bars_wrp {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 22px;
    width: 30px;
    transition: all 0.3s ease;
}
.menu_bar {
    height: 2px;
    width: 100%;
    background: var(--black);
    transition: all 0.3s ease;
}
.colony_menu_open.active .menu_bars_wrp .menu_bar:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}
.colony_menu_open.active .menu_bars_wrp .menu_bar:nth-child(2) {
    opacity: 0;
}
.colony_menu_open.active .menu_bars_wrp .menu_bar:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}

/* navbars */
.colony_navbar,
.colony_relume_navbar {
    z-index: 100;
}

/* navbar dropdowns */
.colony_dropdown_control {
    cursor: pointer;
    position: relative;
}
.colony_dropdown_control i {
    display: block;
    transition: 0.3s;
    margin-left: 7px;
}
.colony_dropdown_control.active i {
    transform: rotate(180deg);
}
.colony_dropdown_wrp {
    visibility: hidden;
    position: absolute;
    padding-top: var(--space-xs);
    transform: translateX(-25%) translateY(20px);
    z-index: 100;
    opacity: 0;
    transition: transform 0.3s, opacity 0.3s;
}
.colony_dropdown {
    list-style: none;
    padding-left: 0;
    background: var(--white);
    color: var(--black);
    padding: var(--space-xs) var(--space-sm);
    border: var(--border);
    background: white;
}
.colony_dropdown li {
    margin-bottom: var(--space-xs);
}
.colony_dropdown li:last-of-type {
    margin-bottom: 0;
}
.colony_dropdown a {
    white-space: nowrap;
}
.colony_dropdown_wrp.active {
    visibility: visible;
    transform: translateX(-25%) translateY(0);
    opacity: 1;
}

/* menu dropdowns */
.colony_menu_dropdown_control {
    cursor: pointer;
    position: relative;
}
.colony_menu_dropdown_control i {
    display: block;
    transition: 0.3s;
    margin-left: 7px;
}
.colony_menu_dropdown_control.active i {
    transform: rotate(180deg);
}
.colony_menu_dropdown {
    padding-left: calc(var(--space-sm) * 1.5);
    overflow: hidden;
    transition: all 0.3s;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
}
.colony_menu_dropdown.active {
    max-height: 100vh;
    opacity: 1;
    visibility: visible;
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
}

/* video */
.colony_video_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}
.colony_video_bg_16x9 {
    width: 100vw;
    height: 56.25vw;
    min-height: 102vh;
    min-width: 177.77vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.colony_video_bg_2x1 {
    width: 100vw;
    height: 50vw; /* 2:1 aspect ratio */
    min-height: 102vh;
    min-width: 204vh; /* Adjusted for 2:1 ratio */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.colony_video_bg_9x16 {
    width: 100vw;
    height: 200vw;
    min-height: 56.25vh;
    min-width: 102vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.colony_video_bg_1x2 {
    width: 50vh;
    height: 100vh;
    min-width: 102vw;
    min-height: 204vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}