/* ===== SHOW/HIDE ===== */
.desktop-header{
    display:flex;
}

.mobile-header,
.mobile-menu{
    display:none;
}

@media(max-width:768px){

    .desktop-header{
        display:none;
    }

    .mobile-header{
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:20px;
        position:fixed;
        width:100%;
        z-index:200;
    }

    .mobile-menu{
        display:block;
        position:fixed;
        top:0;
        right:0;
        width:80%;
        height:100vh;
        background:#000;
        transform:translateX(100%);
        transition:0.4s;
        z-index:150;
        padding:80px 30px;
    }

    .mobile-menu.active{
        transform:translateX(0);
    }

    .mobile-menu ul{
        list-style:none;
        display:flex;
        flex-direction:column;
        gap:25px;
    }

    .mobile-menu li{
        color:#fff;
        font-size:18px;
    }

    /* hamburger */
    .hamburger{
        display:flex;
        flex-direction:column;
        gap:5px;
        cursor:pointer;
    }

    .hamburger span{
        width:25px;
        height:2px;
        background:#fff;
    }
}

@media(max-width:768px){
  body{
/*    overflow:auto !important;
*/  }


img.ring-layer.l3 {
    position: absolute;
    z-index: 1;
    left: -40px;
    top: 0;
}
img.ring-layer.l4 {
    position: absolute;
    z-index: 1;
    top: -14px;
    left: 58px;
}

img.ring-layer.center {
    position: absolute;
    z-index: 1;
    top: 103px;
    width: 80%;
    left: -18px;
}

img.ring-layer.l2 {
    position: absolute;
    z-index: 1;
    top: 87px;
    left: 78px;
    width: 78%;
}

.ring-wrapper {
   
    left: 54%;
    
}















}




/* DEFAULT */
.desktop-only{ display:block; }
.mobile-only{ display:none; }

/* MOBILE */
@media(max-width:768px){
  .desktop-only{ display:none; }
  .mobile-only{ display:block; }



/* HEADING */
.mobile-heading {
        position: absolute;
        top: 18%;
        width: 100%;
        text-align: center;
        color: #fff;
        font-size: 33px;
        line-height: 1.4;
        transform: translateY(60px);
        opacity: 0;
    }












/* ALL <?php echo get_template_directory_uri(); ?>/images STACK */
.m-ring{
  position:absolute;
  width:100%;
  top:0;
  left:0;
}

/* PERFECT CLOSED POSITION */
.one,
.two,
.three,
.four{
  transform:translate(0,0) rotate(0deg);
}

/* SCROLL TEXT */
.scroll-text{
  position:absolute;
  right:10px;
  bottom:40px;
  color:#ccc;
  font-size:10px;
  letter-spacing:2px;
  writing-mode: vertical-rl;
}


















}




















.mobile-heading {
  transform: translateY(60px);
  opacity: 0;
}



    .mobile-hero {
        height: 800px;
        background: url(../images/bg.png) center / cover no-repeat;
        position: relative;
        overflow: hidden;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    @media(max-width:768px){
        
.one {
    left: -33% !important;
    z-index: 2 !important;
}

.two {
    left: 7%;
    top: -9px;
    z-index: 2;
}

.three {
    left: -28%;
    top: 105px;
    z-index: 2;
}

.four {
    left: 11%;
    z-index: 2;
    top: 86px;
}

    .mobile-ring {
        position: absolute;
        left: 55%;
        transform: translateX(-50%) scale(0.9);
        width: 260px;
        height: 260px;
        opacity: 0;
        bottom: 200px !important;
    }





    }