@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
        
body {
    font-family: 'Space Grotesk', sans-serif;
    background-color: #0a0a0a;
    color: #e2e2e2;
    overflow-x: hidden;
    scroll-behavior: smooth;
}
        
.gradient-text {
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
        
.project-card {
    position: relative;
    perspective: 1000px;
    transform-style: preserve-3d;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(145deg, #1a1a1a, #0f0f0f);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.project-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 15px 35px -5px rgba(59, 130, 246, 0.3);
}

.project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.project-card:hover::before {
    opacity: 1;
}
        
.project-image {
    transition: transform 0.5s ease;
}

.project-card:hover .project-image {
    transform: scale(1.05);
}

.modal-overlay {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
}

.modal-content {
    animation: modalFadeIn 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    transform: scale(0.9);
    opacity: 0;
    background: linear-gradient(145deg, #1a1a1a, #0f0f0f);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

@keyframes modalFadeIn {
    to {
        transform: scale(1);
        opacity: 1;
    }
}
        
.tech-badge {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    transition: all 0.3s ease;
}

.tech-badge:hover {
    background: rgba(59, 130, 246, 0.2);
    transform: translateY(-2px);
}

.glow {
    animation: glow 2s infinite alternate;
}

@keyframes glow {
    from {
        box-shadow: 0 0 5px -5px #3b82f6;
    }
    to {
        box-shadow: 0 0 20px 2px #3b82f6;
    }
}

.grid-pattern {
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}

.tool-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.tool-icon:hover {
    transform: translateY(-5px);
    background: rgba(59, 130, 246, 0.2);
}

.about-card {
    background: linear-gradient(145deg, #1a1a1a, #0f0f0f);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.about-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px -5px rgba(59, 130, 246, 0.2);
}

.timeline-item {
    position: relative;
    padding-left: 30px;
    margin-bottom: 30px;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
}

.timeline-item::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 21px;
    bottom: -30px;
    width: 2px;
    background: rgba(255, 255, 255, 0.1);
}

.timeline-item:last-child::after {
    display: none;
}

.cert-badge {
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: left center;
    overflow: hidden;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

.cert-badge:hover {
    transform: scale(1.015);
    background: linear-gradient(90deg, #2a5fb4, #462d81) !important;
    z-index: 20;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border: none !important;
    outline: none !important;
    background-clip: padding-box !important;
}

/* Text color on hover */
.cert-badge:hover h4 {
    color: white !important;
}

.cert-badge:hover p {
    color: #e0e7ff !important;
}

/* Eye icon styling */
.cert-badge:hover::after {
    content: "\f06e"; /* Font Awesome eye icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 1.1rem;
    opacity: 1;
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        right: 0.5rem;
    }
    to {
        opacity: 1;
        right: 1rem;
    }
}

.skill-tag {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    transition: all 0.3s ease;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
}

.skill-tag:hover {
    background: rgba(59, 130, 246, 0.2);
    transform: translateY(-2px);
}

.skill-meter {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.skill-progress {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    border-radius: 3px;
}

.scroll-down-dude {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 40px; /* Adjust this value to move it up/down */
}

.scroll-down-dude:before,
    .scroll-down-dude:after {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    border-bottom: 4px solid white;
    border-right: 4px solid white;
}

.scroll-down-dude:before {
    animation: down-arrow-before 2.6s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

.scroll-down-dude:after {
    animation: down-arrow-after 2.6s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

@keyframes down-arrow-before {
    50% {
        transform: rotate(45deg) translate(70%, 70%);
    }
    100% {
        transform: rotate(45deg) translate(70%, 70%);
    }
}

@keyframes down-arrow-after {
    50% {
        transform: rotate(45deg) translate(110%, 110%);
        opacity: 0;
    }
    51% {
        transform: rotate(45deg) translate(-130%, -130%);
    }
    100% {
        transform: rotate(45deg) translate(-70%, -70%);
        opacity: 1;
    }
}

#contact {
    padding: 6rem 1rem;
    background-color: transparent;
    position: relative;
    z-index: 10;
}

#contact .section-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 3rem;
    color: white;
}

#contact ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
}

#contact ul li {
    position: relative;
    list-style: none;
    width: 60px;
    height: 60px;
    background: white;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
    border-radius: 60px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
    backdrop-filter: blur(10px);
    border: none;
    outline: none;
}

#contact ul li::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 60px;
    background: linear-gradient(45deg, var(--i), var(--j));
    opacity: 0;
    transition: 0.5s;
    border: none;
    outline: none;
}

#contact ul li::after {
    content: "";
    position: absolute;
    top: 10px;
    width: 100%;
    height: 100%;
    border-radius: 60px;
    background: linear-gradient(45deg, var(--i), var(--j));
    filter: blur(15px);
    z-index: -1;
    opacity: 0;
    transition: 0.5s;
    border: none;
    outline: none;
}

#contact ul li:hover {
    width: 180px;
    box-shadow: none;
    border: none !important;
    outline: none !important;
}

#contact ul li:hover::before {
    opacity: 1;
    border: none;
    outline: none;
}

#contact ul li:hover::after {
    opacity: 0.5;
    border: none;
    outline: none;
}

#contact ul li ion-icon {
    color: #777;
    font-size: 1.75em;
    transition: 0.5s;
    transition-delay: 0.25s;
    display: block;
}

#contact ul li:hover ion-icon {
    transform: scale(0);
    color: white;
    transition-delay: 0s;
}

#contact ul li span {
    position: absolute;
}

#contact ul li .title {
    color: white;
    font-size: 1em;
    letter-spacing: 0.1em;
    transform: scale(0);
    transition: 0.5s;
    transition-delay: 0s;
}

#contact ul li:hover .title {
    transform: scale(1);
    transition-delay: 0.25s;
}

/* Parallax background for hero section only */
.parallax-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 0;
}

#stars, #stars2, #stars3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
    background: transparent;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}


#stars {
    width: 1px;
    height: 1px;
    background: transparent;
    position: absolute;
    box-shadow:
        1153px 950px #fff, 114px 1628px #fff, 1188px 1770px #fff, 1888px 1244px #fff,
        641px 1119px #fff, 208px 1470px #fff, 365px 1372px #fff, 1811px 1672px #fff,
        1977px 7px #fff, 1289px 969px #fff, 1359px 948px #fff, 170px 1775px #fff,
        145px 1180px #fff, 651px 1144px #fff, 1044px 1468px #fff, 1340px 477px #fff,
        1731px 694px #fff, 217px 187px #fff, 1590px 844px #fff, 169px 1563px #fff,
        952px 1032px #fff, 137px 299px #fff, 133px 1616px #fff, 1329px 639px #fff,
        148px 443px #fff, 1857px 582px #fff, 173px 1933px #fff, 999px 1280px #fff,
        250px 800px #fff, 780px 1450px #fff, 1500px 200px #fff, 450px 1650px #fff,
        920px 550px #fff, 300px 1300px #fff, 1650px 850px #fff, 200px 1900px #fff,
        1350px 300px #fff, 600px 1000px #fff, 1700px 1500px #fff, 100px 400px #fff,
        1200px 750px #fff, 850px 1800px #fff, 350px 950px #fff, 1550px 1250px #fff,
        500px 600px #fff, 950px 1350px #fff, 250px 1550px #fff, 1400px 500px #fff,
        700px 1150px #fff, 150px 1750px #fff, 1250px 900px #fff, 550px 1400px #fff,
        1600px 350px #fff, 800px 1600px #fff, 400px 1200px #fff, 1100px 700px #fff,
        1800px 1000px #fff, 650px 1300px #fff, 1300px 650px #fff, 200px 1450px #fff,
        950px 250px #fff, 1450px 1500px #fff, 300px 750px #fff, 1750px 450px #fff,
        100px 100px #fff, 200px 200px #fff, 300px 300px #fff, 400px 400px #fff,
        500px 500px #fff, 600px 600px #fff, 700px 700px #fff, 800px 800px #fff,
        900px 900px #fff, 1000px 1000px #fff, 1100px 1100px #fff, 1200px 1200px #fff,
        1300px 1300px #fff, 1400px 1400px #fff, 1500px 1500px #fff, 1600px 1600px #fff,
        1700px 1700px #fff, 1800px 1800px #fff, 1900px 1900px #fff, 1950px 1950px #fff,
        60px 1900px #fff, 180px 1820px #fff, 245px 1650px #fff, 333px 1400px #fff,
        420px 1550px #fff, 500px 1700px #fff, 580px 1780px #fff, 620px 1650px #fff,
        710px 1490px #fff, 790px 1750px #fff, 870px 1620px #fff, 960px 1510px #fff,
        1050px 1600px #fff, 1130px 1700px #fff, 1200px 1800px #fff, 1300px 1900px #fff,
        1400px 1950px #fff, 1500px 1600px #fff, 1600px 1700px #fff, 1700px 1800px #fff,
        1800px 1900px #fff, 1900px 1600px #fff, 1850px 1750px #fff, 1750px 1650px #fff,
        1650px 1550px #fff, 1550px 1450px #fff, 1450px 1350px #fff, 1350px 1250px #fff,
        1250px 1150px #fff, 1150px 1050px #fff, 1050px 950px #fff, 950px 850px #fff,
        55px 1880px #fff, 135px 1790px #fff, 175px 1640px #fff, 205px 1510px #fff,
        305px 1330px #fff, 355px 1290px #fff, 405px 1190px #fff, 455px 1070px #fff,
        505px 980px #fff, 555px 870px #fff, 605px 810px #fff, 655px 730px #fff,
        705px 640px #fff, 755px 560px #fff, 805px 460px #fff, 855px 380px #fff,
        905px 290px #fff, 955px 210px #fff, 1005px 180px #fff, 1055px 260px #fff,
        1105px 340px #fff, 1155px 420px #fff, 1205px 500px #fff, 1255px 580px #fff,
        1305px 660px #fff, 1355px 740px #fff, 1405px 820px #fff, 1455px 900px #fff,
        1505px 980px #fff, 1555px 1060px #fff, 1605px 1140px #fff, 1655px 1220px #fff,
        1705px 1300px #fff, 1755px 1380px #fff, 1805px 1460px #fff, 1855px 1540px #fff,
        1905px 1620px #fff, 1955px 1700px #fff, 185px 1780px #fff, 285px 1690px #fff,
        385px 1610px #fff, 485px 1530px #fff, 585px 1450px #fff, 685px 1370px #fff,
        785px 1290px #fff, 885px 1210px #fff, 985px 1130px #fff, 1085px 1050px #fff,
        1185px 970px #fff, 1285px 890px #fff, 1385px 810px #fff, 1485px 730px #fff,
        1585px 650px #fff, 1685px 570px #fff, 1785px 490px #fff, 1885px 410px #fff,
        1985px 330px #fff, 1995px 250px #fff, 1795px 170px #fff, 1695px 90px #fff,
        1595px 10px #fff, 1495px 100px #fff, 1395px 180px #fff, 1295px 260px #fff,
        1195px 340px #fff, 1095px 420px #fff, 995px 500px #fff, 895px 580px #fff,
        795px 660px #fff, 695px 740px #fff, 595px 820px #fff, 495px 900px #fff,
        395px 980px #fff, 295px 1060px #fff, 195px 1140px #fff, 95px 1220px #fff,
        45px 1300px #fff, 145px 1380px #fff, 245px 1460px #fff, 345px 1540px #fff,
        445px 1620px #fff, 545px 1700px #fff, 645px 1780px #fff, 745px 1860px #fff,
        845px 1940px #fff, 945px 1920px #fff, 1045px 1840px #fff, 1145px 1760px #fff,
        1245px 1680px #fff, 1345px 1600px #fff, 1445px 1520px #fff, 1545px 1440px #fff,
        1645px 1360px #fff, 1745px 1280px #fff, 1845px 1200px #fff, 1945px 1120px #fff;
    animation: animStarSmall 80s linear infinite;
}

#stars2 {
    width: 2px;
    height: 2px;
    background: transparent;
    position: absolute;
    box-shadow:
        222px 621px #fff, 834px 1945px #fff, 1414px 68px #fff, 317px 1184px #fff,
        1477px 201px #fff, 1834px 471px #fff, 885px 1355px #fff, 1806px 197px #fff,
        1672px 847px #fff, 1203px 1172px #fff, 1303px 1708px #fff, 356px 1593px #fff,
        1067px 377px #fff, 484px 271px #fff, 1708px 1191px #fff, 1206px 1941px #fff,
        1266px 337px #fff, 668px 1384px #fff, 1495px 972px #fff, 755px 1096px #fff,
        1159px 1063px #fff, 54px 132px #fff, 1053px 813px #fff, 398px 1059px #fff,
        1726px 1952px #fff, 1469px 20px #fff, 1074px 1080px #fff,
        450px 850px #fff, 950px 1650px #fff, 350px 350px #fff, 1550px 750px #fff,
        650px 1250px #fff, 250px 1550px #fff, 1350px 450px #fff, 550px 950px #fff,
        1750px 1350px #fff, 750px 550px #fff, 150px 1150px #fff, 1250px 850px #fff,
        850px 1550px #fff, 450px 250px #fff, 1650px 650px #fff, 950px 1450px #fff,
        180px 1800px #fff, 290px 700px #fff, 670px 1450px #fff, 1340px 1200px #fff,
        1430px 650px #fff, 1900px 1900px #fff, 400px 1350px #fff, 1550px 1650px #fff,
        1220px 480px #fff, 100px 100px #fff, 1850px 600px #fff, 300px 1400px #fff,
        600px 1100px #fff, 1450px 1500px #fff, 1300px 300px #fff, 1600px 1600px #fff,
        1400px 1350px #fff, 190px 1150px #fff, 1140px 870px #fff, 1020px 1420px #fff,
        620px 990px #fff, 840px 320px #fff, 1000px 730px #fff, 720px 1760px #fff;
    animation: animStarMedium 160s linear infinite;
}

#stars3 {
    width: 4px;
    height: 4px;
    background: transparent;
    position: absolute;
    box-shadow:
        1148px 438px #fff, 1717px 860px #fff, 1816px 864px #fff, 260px 214px #fff,
        516px 1758px #fff, 72px 1229px #fff, 1188px 1242px #fff, 702px 1680px #fff,
        934px 1291px #fff, 1007px 1868px #fff, 44px 1553px #fff, 1871px 1041px #fff,
        508px 500px #fff, 559px 1043px #fff, 1144px 1137px #fff, 215px 953px #fff,
        390px 552px #fff, 649px 1208px #fff, 60px 1419px #fff, 1923px 1238px #fff,
        895px 679px #fff, 1000px 1860px #fff, 1679px 457px #fff, 44px 1531px #fff,
        750px 950px #fff, 350px 1350px #fff, 1550px 250px #fff, 550px 650px #fff,
        1250px 850px #fff, 950px 1450px #fff, 250px 450px #fff, 1650px 750px #fff,
        850px 1550px #fff, 450px 1150px #fff, 1350px 350px #fff, 550px 1250px #fff,
        1800px 1800px #fff, 100px 100px #fff, 600px 1000px #fff, 900px 1700px #fff,
        1450px 1450px #fff, 300px 1600px #fff, 1600px 300px #fff, 1100px 1900px #fff,
        700px 1400px #fff, 1250px 1750px #fff, 1500px 1300px #fff, 850px 650px #fff,
        1150px 850px #fff, 1300px 1250px #fff, 750px 300px #fff, 950px 950px #fff,
        500px 1450px #fff, 250px 1600px #fff, 1450px 400px #fff, 1650px 1250px #fff,
        1700px 1400px #fff, 450px 1400px #fff, 1200px 600px #fff, 350px 300px #fff;
    animation: animStarBig 320s linear infinite;
}

@keyframes animStarSmall {
    from { transform: translateY(0); }
    to { transform: translateY(-2000px); }
}

@keyframes animStarMedium {
    from { transform: translateY(0); }
    to { transform: translateY(-2000px); }
}

@keyframes animStarBig {
    from { transform: translateY(0); }
    to { transform: translateY(-2000px); }
}

@keyframes moveStars {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}
    
.animate-stars {
    background: radial-gradient(white 1px, transparent 1px), black;
    background-size: 4px 4px;
    animation: moveStars 60s linear infinite;
    }

.copy-button.copied {
    background: transparent;
    border: 2px solid white;
    color: white;
}

html {
    scroll-behavior: smooth;
}

.disabled-link {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}

.badge-container {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    z-index: 10;
}
    
.badge-label {
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    position: relative;
    z-index: 1;
}

@media (max-width: 640px) {
    #home .flex.justify-center a {
      padding: 0.5rem 1.25rem; /* px-5 py-2 */
      font-size: 0.875rem;     /* text-sm */
    }
  }

.modal-content {
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Make modal scrollable on mobile */
.modal-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow-y: auto;
}
  
.modal-content {
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}  

.modal-content::-webkit-scrollbar {
    display: none;
}
  
.modal-content {
    -ms-overflow-style: none;  /* IE dan Edge */
    scrollbar-width: none;     /* Firefox */
}