* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

body {
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    width: 100%;
}

/* Gaya umum untuk elemen navigasi */
nav {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 50%;
    margin-top: 70px;
    width: 100%;
    height: 93px;
}

nav ul {
    display: flex;
    position: relative;
    gap: 45px;
}

nav ul li a {
    display: flex;
    position: relative;
    text-decoration: none;
    color: white;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    transition: all 0.3s ease;
}

/* Gaya untuk elemen yang aktif */
nav ul li a.active::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 4px;
    background-color: #9DB2BF;
    border-radius: 18px;
    bottom: -5px;
    left: 0;
    transform: scaleX(1);
    transform-origin: center;
    transition: transform 0.3s ease;
}

/* Gaya untuk elemen saat hover */
nav ul li a:hover {
    transform: scale(1.1);
}

nav ul li a::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 4px;
    background-color: #9DB2BF;
    border-radius: 18px;
    bottom: -5px;
    left: 0;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}

nav ul li a:hover::after {
    transform: scaleX(1);
}


#main {
    display: inline-flex;
    align-items: center;
    gap: 40px;
    width: 90%;
    margin-top: 203px;
    padding: 49px;
}

#main .text-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}


#main .text-main span {
    color: #DDE6ED;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;

}

.square {
    width: 11px;
    height: 292px;
    border-radius: 10px;
    background: #27374D ;
}

#main p {
    color: #FFF;

    /* Subtext */
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.button {
    display: flex;
    width: 190px;
    height: 60px;
    padding: 6px 53px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    border-radius: 19px;
    background: #27374D;
    margin-left: 2%;
    text-decoration: none;
    color: #DDE6ED;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

footer {
    width: 100%;
    display: flex;
    position: relative;
    margin-top: 211px;
    justify-content: center;
    color: var(--Subtext, #9DB2BF);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    
}

#experience {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 106px;
    position: relative;
    margin-top: 106px;
    margin-left: 82px;
    margin-right: 82px;
    width: 70%;
}


#experience span {
    color:  #DDE6ED;
    font-family: Poppins;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

#experience .card-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
}

#experience .card-wrapper .card-inline{
    display: flex;
    align-items: flex-start;
    gap: 50px;
}

#experience .card-wrapper .card-inline .card{
    width: 399px;
    height: 386px;
    border-radius: 34px;
    background: rgba(217, 217, 217, 0.30);
}

#experience .card-wrapper .card-inline .card .text-wrapper{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 10px;
    gap: 10px;
    justify-content: center;
}

#experience .card-wrapper .card-inline .card .text-wrapper span{
    color: #27374D;
    font-size: 128px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

#experience .card-wrapper .card-inline .card .text-wrapper h1{
    color: #DDE6ED;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

#experience .card-wrapper .card-inline .card .text-wrapper p{
    color: #9DB2BF;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#project {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 75px;
    position: relative;
    margin-top: 106px;
    margin-left: 82px;
    margin-right: 82px;
    width: 70%;
}

#project span {
    color: #DDE6ED;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

#project .wrapper-card {
    display: flex;
    align-items: flex-end;
    gap: 48px;
}

#project .wrapper-card .card {
    width: 399px;
    height: 478px;
    border-radius: 34px;
    background: rgba(217, 217, 217, 0.30);
    transition: transform 0.3s ease, top 0.3s ease;
}

#project .wrapper-card .card:hover {
    transform: scale(1.1); 
    top: -10px;
}

#project .wrapper-card .card .content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 12px 13px 13px 12px;
    gap: 20px;
    justify-content: center;
}

#project .wrapper-card .card .content-wrapper a {
    text-decoration: none;
}

.image-card {
    width: 374px;
    height: 298px;
    border-radius: 34px 34px 0px 0px;
}

#project .wrapper-card .card .text-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

#project .wrapper-card .card .text-wrapper span {
    color: #DDE6ED;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-decoration: none;

}

#project .wrapper-card .card .text-wrapper p {
    color: #9DB2BF;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;

}

#project .wrapper-content {
    display: flex;
    align-items: center;
    gap: 98px;
    margin-right: 81px;
    margin-left: 66px;
}

#project .wrapper-content span {
    width: 530px;
}

.text-under {
    color: #FFF;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-top: 72px;
    display: flex;
    position: relative;
    justify-content: center;
}

#about {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 56px;
    margin-top: 198px;
    width: 90%;
}

#about header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 11px;
    color: #FFF;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-left: 5%;
}

#about .content-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 53px;
    width: 100%;
}

#about .content-wrapper img {
    width: 50%;
}

#about .content-wrapper .text-wrapper {
    color: #FFF;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    width: 50%;
}

#about .start-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 61px;
    margin-left: 5%;
}

#about .start-wrapper span {
    color: #FFF;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

#about .start-wrapper .logo-wrapper {
    display: flex;
    align-items: center;
    gap: 30px;
}

#about  .card-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 60px;
    width: 100%;
    margin-left: 5%;
}

#about  .card-wrapper .card {
    border-radius: 34px;
    background: rgba(217, 217, 217, 0.30);
    height: 386px;
    width: 30%;
}

#about  .card-wrapper .card .content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 2%;
    gap: 40px;
}

#about  .card-wrapper .card .content-wrapper span {
    color:  #27374D;
    font-size: 128px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

#about  .card-wrapper .card .content-wrapper p {
    color: #DDE6ED;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

#about  .card-wrapper .card .content-wrapper a {
    display: flex;
    padding: 10px 11px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 23px;
    background: #D9D9D9;
    text-decoration: none;
    color: #526D82;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    transition: transform 0.3s ease, top 0.3s ease;

}

#about  .card-wrapper .card .content-wrapper a:hover {
    transform: scale(1.1); 
    top: -10px;
}

#about .logo-wrapper {
    display: flex;
    width: 100%;
    height: 128px;
    align-items: center;
    gap: 50px;
    margin-left: 5%;
}

#about .logo-wrapper a:hover img {
    animation: bounce 0.5s infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0); /* Awal dan akhir posisi tidak berubah */
    }
    50% {
        transform: translateY(-10px); /* Posisi puncak ketika sedang memantul */
    }
}