@font-face {
    font-family: 'Proxima_Nova_Soft';
    src: url('../../fonts/FontsFree-Net-Proxima-Nova-Soft-W03-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Big_Shoulders_Text';
    src: url('../../fonts/BigShouldersText-Regular.ttf') format('truetype');

}
@font-face {
    font-family: 'Big_Shoulders_semobold';
    src: url('../fonts/BigShouldersDisplay-SemiBold.ttf') format('truetype');
  
}
#logo {
    width: 9vw;
    cursor: pointer;
    z-index: 9999;
}

header {
    position: fixed;
    z-index: 9999;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    align-items: center;
    padding: 7vh 8vw;
    width: 100vw;

}

.nav-links li {
    display: inline-block;
    padding: 0 1.5vw;
}

.nav-link {
    cursor: pointer;
    font-family: 'Proxima_Nova_Soft';
    color: #fff;
    font-size: 1.1vw;
    font-weight: 400;
    letter-spacing: -0.45px;
    width: 400;
}

button {
    font-family: 'Proxima_Nova_Soft';
    font-size: 0.9vw;
    padding: 1% 1.5%;
    background-color: rgb(255, 255, 255);
    color: #BA0767;
    border: none;
    border-radius: 2vw;
    cursor: pointer;
    font-weight: 400;
}
navmobile{
    visibility: hidden;
    display: none;
}
#eclipse_navmobile {
    visibility: hidden;
    display: none;
}
@media (max-width: 1024px) {
    #logo {
    width: 14vw;
    }
    .nav-link {
    font-size: 1.8vw;
    }
    button {
    font-size: 1.5vw;
    padding: 1.7% 2.2%;
    
   
}

#eclipse_navmobile{
    visibility: hidden;
    display: none;
}
}
@media (max-width: 768px) {
    header {
        align-items: flex-start;
     
    }
    header a {
        z-index: 9999;
    }
    #header-button,nav{
        visibility: hidden;
    }
    navmobile{
        opacity: 0;
        visibility: visible;
        width: 181vw;
        height: 181vw;
        background-color: black;
        position: fixed;
        display: flex;
        border-radius: 50%;
        padding: 0;
        margin: -28vw -50vw;
        align-items: center;
        justify-content: flex-start;
    }
    navmobile ul {
        margin-top: 5vw;
        margin-left: 43vw;
    }
    navmobile div {
        width: 50vw;
        margin-top: 5vw;
        display: flex;
        justify-content: space-around;
    }
    .bg_circle_ready_mobile{
        display: flex;
        position: absolute;
        width: 139vw;
        height: 139vh;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
        align-content: center;
        margin-left: 22vw;
    }
    .circle1_mobile{
        display: flex;
        width: calc(55vw + 60vh);
        height: calc(55vw + 60vh);
        border: 0.1px solid #ffffff2e;
        border-radius: 50%;
        position: relative;
        top: -10vh;
        left: 0vw;
        justify-content: center;
        align-content: center;
        align-items: center;
        flex-wrap: wrap;
        transition: transform 0.9s ease;
    }
    .circle4_mobile{
        display: flex;
        width: calc(45vw + 50vh);
        height: calc(45vw + 50vh);
        border: 0.1px solid #ffffff2e;
        border-radius: 50%;
        position: relative;
        /* top: -10vh; */
        justify-content: center;
        align-content: center;
        align-items: center;
        flex-wrap: wrap;
        transition: transform 1.9s ease;
    }
    .circle2_mobile{
        display: flex;
        width: calc(30vw + 30vh);
        height: calc(30vw + 30vh);
        border: 0.1px solid #ffffff2e;
        border-radius: 50%;
        position: relative;
        /* top: -10vh; */
        /* left: 10vw; */
        justify-content: center;
        align-content: center;
        align-items: center;
        flex-wrap: wrap;
        transition: transform 1.9s ease;
    
    }
    .circle3_mobile{
        display: flex;
        width: calc(20vw + 20vh);
        height: calc(20vw + 20vh);
        border: 0.1px solid #ffffff2e;
        border-radius: 50%;
        position: relative;
        top: -3vh;
       
        justify-content: center;
        align-content: center;
        align-items: center;
        flex-wrap: wrap;
        transition: transform 1.9s ease;
    
    }
    .circle5_mobile{
        display: flex;
        width: calc(10vw + 10vh);
        height: calc(10vw + 10vh);
        border: 0.1px solid #ffffff2e;
        border-radius: 50%;
        position: relative;
        /* top: -10vh; */
        /* left: 10vw; */
        justify-content: center;
        align-content: center;
        align-items: center;
        flex-wrap: wrap;
        transition: transform 1.9s ease;
    
    }
    #eclipse_navmobile{
        visibility: visible;
        width: 7vw;
        z-index: 9999;
        display: flex;
    }
    .nav-links-mobile li a{
        font-family: 'Big_Shoulders_semobold';
        font-size: 9vw;

    }
    
    button {
        font-size: 1.8vw;
    }
    .nav-link {
        font-size: 2vw;
    }
    
}
@media(max-width : 500px){
    header {
   
    padding: 5vh 4vw;
    }
    #logo {
        width: 25vw;
        margin-left: 4vw;
    }
        .nav-link {
        font-size: 2.6vw;
    }
        button {
        font-size: 2vw;
    }
    nav{
        margin-left: -9vw;
    }
    navmobile ul {
        margin-top: 28vw;
        margin-left: 43vw;
    }
    .nav-links-mobile li a {
        font-family: 'Big_Shoulders_semobold';
        font-size: 17vw;
        letter-spacing: 1.5px;
        color: white;
    }
    navmobile {
        width: 220vw;
        height: 220vw;
        margin: -39vw -62vw;
    }
    .bg_circle_ready_mobile {
        margin-left: 40vw;
    }
    navmobile ul {
        margin-top: 30vw;
        margin-left: 56vw;
    }
    #eclipse_navmobile {
        visibility: visible;
        width: 9vw;
    
}
}