/*mobile devices*/
@media only screen and (min-width: 1024px) {

    /* #mobile-menu-btn{
        display: none;
    } */
}
/* @media only screen and (max-width: 1024px) { */


#mobile-menu-btn{
    /* position: absolute; */
    right: 5rem;
    top:0;
    height: 100%;
    width: 5rem;
    display: flex;
    /* flex-direction: column; */
    justify-content: center;
    align-items: center;
    background: none;
    border: none;
    z-index: 9999999999999 !important;
    padding: 0;
    justify-content: flex-start;

}

    .dot{
        height: 0.5rem;
        width: 0.5rem    ;
        background-color: black;
        border-radius: 100%;
        transition: .3s all;
    }


    .dot-1{
        transform: translateX(-12px);
        position: relative;
    }

    .dot-1:before {
        
    content: '';
    position: absolute;
    display: block;
    height: 0.5rem;
    width: 0.5rem    ;
    background-color: black;
    border-radius: 100%;
    transition: .3s all;
    top: 0;
    left: 0;
    right:0;
    bottom:0;
    margin: auto;
    transform: translate(0, 0);



    }

    .dot-3:before {
        
        content: '';
        position: absolute;
        display: block;
        height: 0.5rem;
        width: 0.5rem    ;
        background-color: black;
        border-radius: 100%;
        transition: .3s all;
        top: 0;
        left: 0;
        right:0;
        bottom:0;
        margin: auto;
        transform: translate(0, 0);

    
        }
    

    .dot-3{
        transform: translate(12px, 0);
    }



    #mobile-menu-btn:hover .dot-1, .menu-opened  #mobile-menu-btn .dot-1{
        transform: translate(-12px, 7px);
    }


    #mobile-menu-btn:hover .dot-1:before, .menu-opened #mobile-menu-btn .dot-1:before{
        transform: translate(0px, -15px);
    }

    
    #mobile-menu-btn:hover .dot-3:before, .menu-opened #mobile-menu-btn .dot-3:before{
        transform: translate(0, -15px);
    }

    #mobile-menu-btn:hover .dot-3, .menu-opened  #mobile-menu-btn .dot-3{
        transform: translate(12px, 7px);
    }



    .menu-opened .dot-2, .menu-opened .dot-1, .menu-opened .dot-1:before, .menu-opened .dot-3, .menu-opened .dot-3:before{
    background-color: white;
    }





header .h-third:first-child{
    position: absolute;
    z-index: 9999999999999999;
}
   .social-menu{
        position: absolute;
        top: 24px;
        left: 14rem;
    }
.main-nav{
    position: fixed;
    top:0;
    left: -100vw;
    width: 100vw;
    height: 100%;
transition: .5s all ease-in-out;
    background: rgba(46, 66, 213,.5);
    backdrop-filter: blur(3px);
}

    .menu-opened .main-nav{
        left: 0;
    }
    .main-nav>div,.main-nav>ul{
    height: 100%;
}
    .main-nav ul{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;

    }


    .main-nav ul li{
        margin: 2rem 0 !important;
    }

/* } */