#page1{
    height: 98vh;
    width: 100%;
    padding: 0 20px;
    background: #efeae3;
    position: relative;
    overflow: hidden;
}

#page1 #nav{
    height: 150px;
    width: 100%;
    /* background: #af8484; */
    position: relative;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

#page1 #nav #logo{
    height: 100%;
    width: 180px;
    position: relative;

}

#page1 #nav #logo img{
    height: 100%;
    width: 100%;
    position: relative;

    object-fit: contain;
    object-position: center;
}

#page1 #links {
    display: flex;
    gap: 25px;
}

#page1 #links a{
    position: relative;
    padding: 15px 26px;
    border-radius: 25px;
    border: 1px solid rgba(0, 0, 0, 0.308);

    display: flex;
    justify-content: center;
    align-items: center;

    font-weight: 200;
    font-size: 17px;
    color: rgba(19, 18, 18, 0.747);
    overflow: hidden;
    transition: all 0.2s 0.3s ease-in-out;
    z-index: 3;

}


#page1 #links a:hover{
    color: #efeea3;
}

#page1 #links a:hover::before {
    transform:translate(-50%,-50%) ;
}


#page1 #links a::before{
    content:"";
    background: #000;
    height:150px;
    width: 120px;
    border-radius: 50%;

    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%,50%);transition: all 0.2s 0.3s ease-in;
    z-index: -1;
}
 

#page1 #studio-info{
    height: calc(100% - 150px);
    width: 100%;
    /* background: #ca4646; */

    display: flex;
    justify-content: space-between;
    padding-bottom: 90px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.288);

}

#page1 #studio-info #left{
    display: flex;
    align-items: flex-end;
    width: 30%;
}

#page1 #studio-info #left h2{
    font-size: 35px;
    line-height: 0.9;
    word-spacing: -1px;
}


#page1 #studio-info #right{
    display: flex;
    align-items: flex-end;
}


#page1 #studio-info #right h1{
    font-size: 10vw;
    line-height: 0.8;
    font-weight: 900;
    text-align: end;
    /* z-index: 4; */
}

 #circle-wrapper{
    position: absolute;
    z-index: 3;
    height: 400px;
    width: 400px;
    background: #ffffff;
    right: 15%;
    bottom:-35%;
    filter: blur(65px);

}



 #circle-wrapper #shape1{
    position: absolute;
    height: 500px;
    width: 300px;
    border-radius: 50%;
    background: #fe330a;
    /* opacity: 1; */
    box-shadow:20px 10px 1300px #fe330a ;
    animation: blur 10s ease-in-out 0s infinite;
    
  } #circle-wrapper #shape2{
    height: 400px;
    width: 600px;
    border-radius: 50%; 
    box-shadow:20px 10px 1000px #fe330a ;
    /* background: #ff681e; */
    background-image:linear-gradient(219deg,#fe330a,#ff681e 73%);
}

@keyframes blur {
    0%{
        transform: translate(50px,-80px);

    }
    50%{
        transform: translate(-50px,140px);
    }
     100%{
        transform: translate(50px,-80px);

    }
}