.arvrmr {
    position: relative;
    width: 100%;
    margin-top: 40%;
    justify-content: center;
    display: flex;
}

.arvr-section {
    position: relative;
    width: 100%;
}

.arvr-absolute-content {
    position: absolute;
    margin-top: -5%;
    z-index: 1;
    width: 100%;
}

.arvr-images-box {
    position: relative;
    justify-content: center;
    display: flex;
    z-index: 0;
    margin-top: -20%;
    overflow: hidden;
}

.arvr-tabs-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

.arvr-tabs {
    width: 100%;
    position: relative;
}

.tabs {
    display: flex;
    width: 80vw;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
}

.tabs>input[type="radio"] {
    display: none;
}

.tabs-buttons {
    width: 70%;
    margin: 0 auto;
}

.tab-labels {
    display: flex;
    justify-content: space-between;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 20px;
    text-align: center;
}

.tab-label {
    flex: 1;
    align-content: center;
    padding: 10px 20px;
    color: #888;
    cursor: pointer;
    font-size: 2.5vh;
    position: relative;
    padding-bottom: 0.8rem;
    transition: all 0.3s ease;
    font-family: Arial, Helvetica, sans-serif;
}

.tab-label::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: linear-gradient(to right, #7e4eff, #ff4185);
    transition: width 0.3s ease;
}

#tab-1:checked~.tabs-buttons [for="tab-1"]::after,
#tab-2:checked~.tabs-buttons [for="tab-2"]::after,
#tab-3:checked~.tabs-buttons [for="tab-3"]::after {
    width: 100%;
}

/* Active Tab Styling */
#tab-1:checked~.tabs-buttons [for="tab-1"],
#tab-2:checked~.tabs-buttons [for="tab-2"],
#tab-3:checked~.tabs-buttons [for="tab-3"] {
    background: linear-gradient(to right, #7e4eff, #ff4185);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tabs-content {
    width: 70%;
    display: flex;
    align-items: center;
    margin-top: 0.5rem;
    position: relative;
}

.desktop-tab-content {
    display: none;
    color: white;
    margin-top: 1rem;
}

/* Show Active Content */
#tab-1:checked~.tabs-content #content-1,
#tab-2:checked~.tabs-content #content-2,
#tab-3:checked~.tabs-content #content-3 {
    display: flex;
}

#tab-1:checked~.tabs-content #content-1 .tab-width {
    animation: swipeIn 0.35s ease-in forwards;
}

#tab-2:checked~.tabs-content #content-2 .tab-width {
    animation: swipeIn 0.35s ease-in forwards;
}

#tab-3:checked~.tabs-content #content-3 .tab-width {
    animation: swipeIn 0.35s ease-in forwards;
}


#mobile-tab-1:checked~.tab-content .content-1 .side-container {
    animation: swipeIn 0.7s ease-in forwards;
}

#mobile-tab-2:checked~.tab-content .content-2 .side-container {
    animation: swipeIn 0.7s ease-in forwards;
}

#mobile-tab-3:checked~.tab-content .content-3 .side-container {
    animation: swipeIn 0.7s ease-in forwards;
}

@keyframes swipeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


.tab-content-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.tab-content-middle {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center
}

.tab-content-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: end;
}

.tab-video {
    margin-top: 10%;
    transition: filter 1.5s ease, opacity 1.5s ease, transform 1.5s ease;
    pointer-events: none;
    mix-blend-mode: multiply;
}

video::-webkit-media-controls {
    display: none;
}

.tab-width {
    width: 90%;
    margin-bottom: 1rem;
}

.tab-item-icon {
    width: 100px !important;
    height: 100px !important;
    transition: filter 1.5s ease, opacity 1.5s ease, transform 1.5s ease;
    margin-bottom: 10px;
}

.tab-item-title {
    background: linear-gradient(to right, #7e4eff, #ff4185);
    transition: filter 1.5s ease, opacity 1.5s ease, transform 1.5s ease;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2.5vh;
    overflow-wrap: anywhere;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
}

.tab-item-description {
    font-size: 1.5vh;
}

.tab1 {
    filter: hue-rotate(-90deg);
}

.tab2 {
    filter: hue-rotate(0deg);
}

.tab3 {
    filter: hue-rotate(40deg);
}

.ar-vr-text {
    color: white;
    font-size: 1.5vh;
    text-align: justify;
    display: block;
    opacity: 0;
    transform: translateY(-1vw);
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.ar-vr-text.animated {
    transform: translateY(1vw);
    opacity: 1;
}

.section-tabs {
    transform: translateY(-1vw);
    opacity: 0;
    width: 100%;
    position: relative;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.section-tabs.animated {
    transform: translateY(1vw);
    opacity: 1;
}

.ar-vr-outter-div {
    width: 50%;
    margin-bottom: 2%;
    text-align: justify;
}

.vr-experience {
    position: absolute;
    top: 8.5%;
    right: 14%;
    height: 6%;
    width: 16%;
    text-align: center;
    align-content: center;
}

.ar-experience {
    position: absolute;
    top: 12%;
    left: 15.5%;
    text-align: center;
    height: 6%;
    width: 16%;
    align-content: center;
}

.mr-experience {
    position: absolute;
    top: 28%;
    left: 5%;
    height: 6%;
    width: 16%;
    text-align: center;
    align-content: center;
}

.bubbles-text {
    color: white;
    font-family: 'Optika', sans-serif;
}

.vr-text {
    font-size: 2vw;
    font-weight: bold;
}

.experience-text {
    font-size: 1.5vw;
}

.text-outline-arvr {
    position: absolute;
    top: 0;
    font-size: 10vw;
    transform: translateY(-5vw);
    color: transparent;
    -webkit-text-stroke: 2px #343434;
    text-align: center;
    font-family: 'Optika', sans-serif;
    cursor: default;
}

.arvr-header {
    font-size: 10vw;
    color: white;
    transform: translateY(-5vw);
    transition: transform 0.5s ease, font-size 0.5s ease;
}

.arvr-header.animated {
    font-size: 8vw;
    transform: translateY(1vw);
}

.arvr-portal {
    mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 0%,
            /* Fully transparent at the top */
            rgba(0, 0, 0, 1) 20%,
            /* Fully opaque starting from 20% */
            rgba(0, 0, 0, 1) 100%
            /* Fully opaque at the bottom */
        );
    -webkit-mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 1) 5%,
            rgba(0, 0, 0, 1) 100%);

    position: absolute;
    z-index: -1;
    width: 100vw;
}

.arvr-guy {
    max-width: 100% !important;
    max-height: 100% !important;
    transform: scale(0);
    transition: transform 1.5s ease;
}

.arvr-guy.animated {
    transform: scale(1);
}

.arvr-guy-extras {
    position: absolute;
    max-width: 100% !important;
    max-height: 100% !important;
    transform-origin: center;
}

.arvr-lines {
    transform: scale(0.5);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.arvr-lines.animated {
    transform: scale(1);
    opacity: 1;
}

.arvr-bubbles {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.arvr-bubbles.animated {
    opacity: 1;
}

.arvrmr-section {
    position: relative;
    display: flex;
    width: 100%;
    z-index: 1;
    align-items: center;
    flex-direction: column;
    margin-top: 8%;
}

.mobile-tabs {
    position: relative;
    overflow: hidden;
    padding: 0 1rem;
}

/* Background Video */
.mobile-background {
    max-width: 100%;
    height: auto;
    max-height: 800px;
    width: auto;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.25;
    z-index: -1;
    transition: filter 1.5s ease, opacity 1.5s ease, transform 1.5s ease;
    mix-blend-mode: multiply;
}

/* Tab Titles */
.mobile-tab-titles {
    background: transparent;
    display: flex;
    justify-content: center;
    text-align: center;
}

.mobile-tab-title-box {
    width: 100%;
    text-align: center;
    margin-top: 1.5rem;
}

.mobile-tab-title {
    transition: filter 1s ease, opacity 1s ease, transform 1s ease;
    font-size: 3vh;
    background: linear-gradient(to right, #7e4eff, #ff4185);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: none;
}

.swipe-indicator {
    display: block;
    margin-top: 8px;
    font-size: 1.6vh;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
    animation: pulseFade 2s infinite alternate, jump 2s infinite ease-in-out;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

@keyframes pulseFade {
    0% {
        opacity: 0.7;
    }

    100% {
        opacity: 1;
    }
}

@keyframes jump {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-2.5px);
    }
}


/* Tab Content */
.tab-content {
    position: relative;
    color: white;
    display: flex;
    margin-top: 0.5rem;
    width: 100%;
}

.mobile-tab-content {
    position: relative;
    color: white;
    margin-top: 0.5rem;
    width: 100%;
    display: none;
}

.mobile-tab-content .side-container:nth-child(odd) {
    border-left: none;
    border-right: none;
}

.tab-content .side-container:nth-child(even) {
    border-right: none;
}

.tab-content .side-container:last-child {
    grid-column: span 2;
    justify-self: center;
    width: 100%;
    border-right: none;
    box-sizing: border-box;
}

.side-container {
    text-align: center;
    padding: 1rem;
}

.tab-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.tab-item-icon {
    width: 60px;
    height: 60px;
    filter: hue-rotate(0deg);
    transition: filter 0.5s ease;
}

/* Dots Navigation */
.dots-container {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
    position: relative;
    z-index: 2;
}

.dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot:hover {
    transform: scale(1.2);
}

/* Radio Inputs for Tabs */
#mobile-tab-1,
#mobile-tab-2,
#mobile-tab-3 {
    display: none;
}

/* Tab 1 Styling */
#mobile-tab-1:checked~.mobile-tab-titles .title-1,
#mobile-tab-2:checked~.mobile-tab-titles .title-2,
#mobile-tab-3:checked~.mobile-tab-titles .title-3 {
    display: block;
}

#mobile-tab-1:checked~.tab-content .content-1,
#mobile-tab-2:checked~.tab-content .content-2,
#mobile-tab-3:checked~.tab-content .content-3 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#mobile-tab-1:checked~.dots-container .dot-1,
#mobile-tab-2:checked~.dots-container .dot-2,
#mobile-tab-3:checked~.dots-container .dot-3 {
    background: linear-gradient(to right, #7e4eff, #ff4185);
    transform: scale(1.2);
}

/* Hue rotation for different tabs */
#mobile-tab-1:checked~.mobile-background {
    filter: hue-rotate(-90deg);
}

#mobile-tab-2:checked~.mobile-background {
    filter: hue-rotate(0deg);
}

#mobile-tab-3:checked~.mobile-background {
    filter: hue-rotate(40deg);
}

/* Tab item hue rotation */
.tab-item-icon.tab1 {
    filter: hue-rotate(-90deg);
}

.tab-item-icon.tab2 {
    filter: hue-rotate(0deg);
}

.tab-item-icon.tab3 {
    filter: hue-rotate(40deg);
}

.mobile-layout {
    display: none;
}

.desktop-layout {
    display: block;
}

@media (max-width: 1350px) {
    .tabs {
        width: unset;
    }
}

@media (max-width: 970px) {
    .ar-vr-outter-div {
        width: 80%;
        margin-bottom: 2%;
    }

    .mobile-layout {
        display: block;
    }

    .desktop-layout {
        display: none;
    }
}

@media (max-width: 600px) {

    .bubbles-text,
    .vr-experience,
    .ar-experience,
    .mr-experience {
        line-height: 1;
    }
}

@media (max-width: 450px) {

    .bubbles-text,
    .vr-experience,
    .ar-experience,
    .mr-experience {
        line-height: 0.6;
    }

    .vr-experience {
        top: 7.5%;
    }

    .ar-experience {
        top: 11%;
    }

    .mr-experience {
        top: 27%;
    }
}