.{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'poppins' sans-serif;
}
.protfolio-container{
min-height: 100vh;
width:100%;
display: flex;
}
.navlist{
     display:flex;
    gap: 3.5rem;
    height: 10vh;
     width: 100%;
    justify-content: center;
    align-items: center;
    position: fixed;
       }
.navlist li{
    list-style: none;
       }
 .navlist li a{
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1rem;
    color: #fff;
    position: relative;
       }
       .left-container, .right-container{
        height: 100vh;
        display: flex;
        align-items: center;
       }
.left-container{
    background: #262525;
    width: 70%;
padding-left: 3rem;
}
.right-container{
    background:linear-gradient(-45deg, #3877FF, #262525 80%);
    width: 30%;
}
.icons .fa-brands{
    color: #bbb;
    font-size: 1.5rem;
}
.icons{
    display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 3rem;
}
.content{
    margin-left: 4rem;
}
.content h2{
    font-size: 1.3rem;
}
.content h1{
    font-size: 2.5rem;
}
.content .intro{
    font-size: 2rem;
    color: #fff;
}
.content .intro span{
    color: #5DB9EE;
}
.content h1{
            font-size: 4rem;
            color: #5DB9EE;
          }
.content .detail{
    font-size: 1.5rem;
    color: #fff;
    max-width: 37rem;
    margin: 1.1rem 0 3rem 0;
    line-height: 1.8rem;
}
.btn-container button{
    border: .1rem solid #5DB9EE;
    font-size: 1.1rem;
    padding: .8rem 1.5rem;
    border-radius: .5rem;
    cursor: pointer;
    transition: .5s ease;
}
button:nth-child(1){
    background: #5D89EE;
    color: #262525;
}
button:nth-child(2){
    background: transparent;
    color: #5DB9EE;
    margin-left: 2rem;
}
button:nth-child(1):hover{
    background: transparent;
    color: #5D89EE;
}
button:nth-child(2):hover{
    background: #5D89EE;
    color: #262525;
}
.icon .fa-brands:hover{
    cursor: pointer;
    background: linear-gradient(#fff,#3877FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.design .circle{
    aspect-ratio: 1;
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 70%;
    transform: translate(-50%, -50%);
}
.circle:nth-child(1){
    background: linear-gradient(90deg, transparent 50%,#262525 50%);
    width: 20rem;
}
.circle:nth-child(2){
    width: 15rem;
    background-image: url("image/WhatsApp\ Image\ 2024-06-05\ at\ 1.23.31\ PM.jpeg");
    background-size: 100%;
    background-repeat: no-repeat;
    border: .1rem solid white;
    box-shadow: 
    0 0 1rem #fff,
    inset 0 0 1rem #fff,
    0 0 2rem#3877FF,
    0 0 4rem #3877FF,
    inset 0 0 4rem #3877FF
    ;
}
.navlist li a::after, .navlist .active::after{
    content: "";
    position: absolute;
    background: #fff;
    width: 100%;
    height: .1rem;
    left: 0;
    bottom: -5px;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform .5s;
}
.navlist li a :hover::after, .navlist .active::after{
    transform: scaleX(1);
    transform-origin: bottom left;
}