#project{
    height: 100vh;
    padding:72px 0px;
    background-color:#111;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
}

@media screen and (max-width: 1200px){
    #project{
        padding:72px 20px;
    }
}
#project .project-container>div{
    background-color:#151515;
    margin-inline: 4vw;
    border:2px solid #1f1f1f;
    padding:40px;
    margin-top: 3rem;
    border-radius:4px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:auto
}

@media screen and (max-width: 1200px){#project .project-container>div{
    flex-wrap:wrap;
    gap:32px
}
}
#project .project-container>div #creator-photo{width:47%;
    background-image:url("../image/logo-white.png");
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
    border-radius:4px;
    height:600px
}

@media screen and (max-width: 1200px){#project .project-container>div #creator-photo{width:100%;
    height:400px}
}
@media screen and (max-width: 992px){#project .project-container>div #creator-photo{height:350px}
}
@media screen and (max-width: 768px){#project .project-container>div #creator-photo{height:300px}
}
#project .project-container>div #creator-photo h3{color:#111;
    background-color:#fff;
    padding:8px;
    border-radius:16px;
    width:180px;
    text-align:center;
    font-size:1.4rem;
    font-weight:500;
    margin:16px
}
#project .project-container>div div:nth-child(2){width:49%}
@media screen and (max-width: 1200px){
    #project .project-container>div div:nth-child(2){
        width:100%
    }
}
#project .project-container>div div:nth-child(2) h2{font-size:4rem;
    font-weight:500;
    margin:16px 0px;
    color:#fff}

@media screen and (max-width: 992px){#project .project-container>div div:nth-child(2) h2{font-size:7rem}

#project .project-container>div #creator-photo h3{color:#111;
    padding:3px;
    border-radius:16px;
    width:180px;
    text-align:center;
    font-size:1.9rem;
    font-weight:500;
    margin:16px
}

}

#project .project-container>div div:nth-child(2) h3{font-size:1.8rem;
    font-weight:300;
    margin-bottom:16px;
    color:#fff}
#project .project-container>div div:nth-child(2) h4{font-size:2rem;
    font-weight:500;
    color:#3884c2}
#project .project-container>div div:nth-child(2) p{font-size:2.6rem;
    color:#9ca3af;
    line-height:160%;
    margin:32px 0px 48px 0px
}
#project .project-container>div div:nth-child(2) nav ul{display:flex;
    align-items:center;
    gap:16px}
@media screen and (max-width: 1200px){#project .project-container>div 
    
div:nth-child(2) nav ul{
    flex-wrap:wrap
}

#project .project-container>div div:nth-child(2) p {
    font-size: 3.5rem;
}

}
#project .project-container>div div:nth-child(2) nav ul a{background-color:#111;
    border:2px solid #1f1f1f;
    border-radius:6px;
    padding:16px}
@media screen and (max-width: 1200px){#project .project-container>div div:nth-child(2) nav ul a img{width:40px}
}
#project .project-container>div div:nth-child(2) nav ul a:hover{border-color:#3884c2}