@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

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

body {
    background: url('Asset/img/photo-1475274047050-1d0c0975c63e.jpg') no-repeat center center fixed;
    background-size: cover;
}

/* Navbar */
        .hero-container {
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
        }

nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 0;
    z-index: 1000; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: transparent; 
    transition: background-color 0.3s ease; 
}

.logo img {
    height: 50px;
    margin-left: 40px;
}

.top {
    display: flex;
    justify-content: flex-start;
    margin-right: -30px;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 30px;
}

nav ul li {
    margin: 0 20px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.3s ease;
}

nav ul li a:hover {
    color: #ccc;
}

nav.scrolled {
    background-color: #000000; 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.media-social{
    display: flex;
    justify-content: flex-start;
    margin-right: 70px;
    gap: 18px;
}

.media-social a svg {
    color: white; 
    stroke: white !important;
}

.media-social a:hover svg {
    color: #ccc;
    stroke: #ccc !important;
}

/* End Of Navbar */

/* Hero */
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow-x: hidden; 
    overflow-y: hidden; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero img {
    position: absolute;
    pointer-events: none;
}

/* Background */
.hero #background {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

/* Moon */
.hero #moon {
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
    transform: translateX(10px) translateY(-100px);
}

/* Earth */
.hero #earth {
    width: 80%;
    height: 80%;
    bottom: 10%;
    right: 10%;
    transform: translateX(-13.5%) translateY(80px);
}

/* Astronaut  */
.hero #astranout {
    width: 35%;
    bottom: 20%;
    left: 50%;
    margin-left: 300px;
    transform: translateX(-53%) translateY(150px);
    z-index: 500;
}

/* merkuarius*/
.hero #merkuarius {
    width: 15%;
    bottom: 10%;
    right: 10%;
    transform: translateX(20%) translateY(-90px);
}

/* saturnus */
.hero #saturnus {
    width: 15%;
    bottom: 10%;
    right: 10%;
    transform: translateX(-300%) translateY(-500px);
}

.hero #text {
    position: relative;
    color: #fff;
    font-size: 20rem;
    z-index: 1;
    margin-left: 50px;
}

.hero:before{
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, #000000, transparent);
    z-index: 1;
}

.hero:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    mix-blend-mode: color;
}


.hero img {
    transition: transform 0.1s ease-out;
}

/* End Of Hero */

/* About */
/* Shooting Stars*/
.shooting-star {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px; 
    height: 2px; 
    background: #7aa2f7; 
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(122, 162, 247, 0.2),
                0 0 0 4px rgba(122, 162, 247, 0.1),
                0 0 10px rgba(122, 162, 247, 0.8);
    animation: shooting 10s linear forwards; 
    opacity: 0; 
    z-index: -1;
    transition: opacity 0.5s ease-out;
}

.shooting-star::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 150px; 
    height: 1px;
    background: linear-gradient(90deg, #7aa2f7, transparent);
}

@keyframes shooting {
    0% {
        transform: rotate(var(--angle, 215deg)) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 1; /* Muncul cepat */
    }
    70% {
        opacity: 1; /* Tetap terlihat */
    }
    80% {
        opacity: 0.5; /* Mulai fade out */
    }
    90% {
        opacity: 0.2; /* Fade out lebih lanjut */
    }
    100% {
        transform: rotate(var(--angle, 215deg)) translateX(-500px);
        opacity: 0; /* menghilang */
    }
}

.kotak {
    background-color: black;
    width: 1520.5px;
    height: 180px;
    transform: translateY(-10px);
}

.kotak-1 {
    background: linear-gradient(to bottom, black, transparent);
    width: 100%;
    height: 200px;
    position: relative;
    z-index: 2; 
    transform: translateY(-10px);
}

/* about */
.about {
    position: relative;
    overflow: hidden;
    min-height: 20vh; 
}

/* About Shooting Stars until end */
.about-shooting-star {
    position: fixed;
    width: 2px;
    height: 2px;
    background: #7aa2f7;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(122, 162, 247, 0.2),
                0 0 0 4px rgba(122, 162, 247, 0.1),
                0 0 10px rgba(122, 162, 247, 0.8);
    animation: aboutShooting 10s linear forwards;
    opacity: 0;
    z-index: -5;
    transition: 
    opacity 0.8s ease-out,
    transform 0.5s linear;
    will-change: transform, opacity;
}

.about-shooting-star::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 150px;
    height: 1px;
    background: linear-gradient(90deg, #7aa2f7, transparent);
}

@keyframes aboutShooting {
    0% {
        transform: rotate(var(--angle, 215deg)) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 1; /* Muncul cepat */
    }
    70% {
        opacity: 1; /* Tetap terlihat */
    }
    80% {
        opacity: 0.5; /* Mulai fade out */
    }
    90% {
        opacity: 0.2; /* Fade out lebih lanjut */
    }
    100% {
        transform: rotate(var(--angle, 215deg)) translateX(-500px);
        opacity: 0; /* menghilang */
    }
}

/* Content About */
.about {
    position: relative;
    overflow: hidden;
    min-height: 20vh;
    padding: 20px; 
}

.container-about {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.content-block {
    display: flex;
    align-items: flex-start;
    gap: 50px;
}

.content-block-reverse {
    display: flex;
    align-items: flex-start-reverse;
    gap: 50px;
    margin-left: 10px;
}

.content-block img {
    width: 50%;
    height: auto;
    border-radius: 10px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}

.content-block-reverse img {
    width: 50%;
    height: auto;
    border-radius: 25px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    margin-top: 200px;
}

.text-3{
    margin-top: 200px;
}

.text-content {
    flex: 1;
    color: white;
}

.text-content h1 {
    font-size: 2.5rem;
    line-height: 1.5;
    margin-bottom: 10px;
    color: #7aa2f7;
}

.text-content h4 {
    font-size: 1rem;
    line-height: 1.6;
    font-weight: normal;
}

.content-block #rocket{
    margin-top: 205px;
}

.text-5{
    margin-top: 205px;
}

/* End Of About */

/* Planet */
.planet{
    padding: 10px;
    margin-top: 50px;
}

.text-7 {
    color: white;
    text-align: center;
    margin-top: 205px;
    font-size: 3rem;
    margin-left: 8px;
    align-items: center;
    background: linear-gradient(90deg, #fff, #7aa2f7);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.text-8 {
    color: white;
    text-align: center;
    font-size: 1rem;
    margin: 20px auto; 
    max-width: 1000px; 
    line-height: 1.6; 
    padding: 0 20px;
}

.content-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 210px auto;
    padding: 0 20px;
    position: relative;
}

.neptune-text {
    flex: 1;
    padding-right: 50px;
    color: white;
    margin-bottom: 30px;
}

.neptune-title {
    font-size: 3rem;
    margin-bottom: 20px;
    opacity: 1; 
    visibility: visible;
    color: #7aa2f7;
}

.neptune-content {
    font-size: 1.1rem;
    line-height: 1.6;
    font-weight: normal;
    opacity: 1; 
    visibility: visible;
}

#neptune {
    width: 400px;
    height: auto;
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 1s ease, transform 1s ease;
}

.content-1.in-view #neptune {
    opacity: 1;
    transform: translateX(0);
}

.content-2 {
    display: flex;
    flex-direction: row-reverse; 
    justify-content: space-between;
    align-items: center;
    max-width: 1500px;
    position: relative;
    transform: translateX(-80px);
    margin-bottom: 100px;
}

.uranus-text {
    flex: 1;
    transform: translateX(-80px);
    color: white;
}

.uranus-title {
    font-size: 3rem;
    margin-bottom: 20px;
    opacity: 1; 
    visibility: visible;
    color: #7aa2f7;
}

.uranus-content {
    font-size: 1.1rem;
    line-height: 1.6;
    font-weight: normal;
    opacity: 1; 
    visibility: visible;
}

#uranus {
    width: 50%;
    height: auto;
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 1s ease, transform 1s ease;
}

.content-2.in-view #uranus {
    opacity: 1;
    transform: translateX(0);
}

.content-3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 210px auto;
    padding: 0 20px;
    position: relative;
}

.saturn-text {
    flex: 1;
    padding-right: 50px;
    color: white;
    margin-bottom: 30px;
}

.saturn-title {
    font-size: 3rem;
    margin-bottom: 20px;
    opacity: 1; 
    visibility: visible;
    color: #7aa2f7;
}

.saturn-content {
    font-size: 1.1rem;
    line-height: 1.6;
    font-weight: normal;
    opacity: 1; 
    visibility: visible;
}

#saturn {
    width: 400px;
    height: auto;
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 1s ease, transform 1s ease;
}

.content-3.in-view #saturn {
    opacity: 1;
    transform: translateX(0);
}

.content-4 {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 210px auto;
    padding: 0 20px;
    position: relative;
}

.jupiter-text {
    flex: 1;
    padding-left: 50px;
    color: white;
}

.jupiter-title {
    font-size: 3rem;
    margin-bottom: 20px;
    opacity: 1;
    visibility: visible;
    color: #7aa2f7;
}

.jupiter-content {
    font-size: 1.1rem;
    line-height: 1.6;
    font-weight: normal;
    opacity: 1;
    visibility: visible;
}

#jupiter {
    width: 400px;
    height: auto;
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 1s ease, transform 1s ease;
}

.content-4.in-view #jupiter {
    opacity: 1;
    transform: translateX(0);
}

.content-5 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 210px auto;
    padding: 0 20px;
    position: relative;
}

.mars-text {
    flex: 1;
    padding-right: 50px;
    color: white;
}

.mars-title {
    font-size: 3rem;
    margin-bottom: 20px;
    opacity: 1;
    visibility: visible;
    color: #7aa2f7;
}

.mars-content {
    font-size: 1.1rem;
    line-height: 1.6;
    font-weight: normal;
    opacity: 1;
    visibility: visible;
}

#mars {
    width: 500px;
    height: auto;
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 1s ease, transform 1s ease;
}

.content-5.in-view #mars {
    opacity: 1;
    transform: translateX(0);
}

.content-6 {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 210px auto;
    padding: 0 20px;
    position: relative;
    transform: translateX(-50px)
}

.bumi-text {
    flex: 1;
    color: white;
    transform: translateX(20px)
}

.bumi-title {
    font-size: 3rem;
    margin-bottom: 20px;
    opacity: 1;
    visibility: visible;
    color: #7aa2f7;
}

.bumi-content {
    font-size: 1.1rem;
    line-height: 1.6;
    font-weight: normal;
    opacity: 1;
    visibility: visible;
}

#bumi {
    width: 500px;
    height: auto;
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 1s ease, transform 1s ease;
    z-index: 10;
}

.content-6.in-view #bumi {
    opacity: 1;
    transform: translateX(0);
}

.content-7 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 210px auto;
    padding: 0 20px;
    position: relative;
}

.venus-text {
    flex: 1;
    padding-right: 50px;
    color: white;
}

.venus-title {
    font-size: 3rem;
    margin-bottom: 20px;
    opacity: 1;
    visibility: visible;
    color: #7aa2f7;
}

.venus-content {
    font-size: 1.1rem;
    line-height: 1.6;
    font-weight: normal;
    opacity: 1;
    visibility: visible;
}

#venus {
    width: 500px;
    height: auto;
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 1s ease, transform 1s ease;
}

.content-7.in-view #venus {  
    opacity: 1;
    transform: translateX(0);
}

.content-8 {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 210px auto;
    padding: 0 20px;
    position: relative;
}

.mercury-text {
    flex: 1;
    padding-left: 50px;
    color: white;
}

.mercury-title {
    font-size: 3rem;
    margin-bottom: 20px;
    opacity: 1;
    visibility: visible;
    color: #7aa2f7;
}

.mercury-content {
    font-size: 1.1rem;
    line-height: 1.6;
    font-weight: normal;
    opacity: 1;
    visibility: visible;
}

#mercury {
    width: 400px;
    height: auto;
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 1s ease, transform 1s ease;
}

.content-8.in-view #mercury {
    opacity: 1;
    transform: translateX(0);
}

/* Typing animation */
.typing {
    position: relative;
}

.typing::after {
    content: "|";
    position: absolute;
    right: -8px;
    animation: blink 1s infinite;
    color: #7aa2f7;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* When section is in view */
.content-1.in-view .neptune-title,
.content-1.in-view .neptune-content {
    opacity: 1;
    transform: translateY(0);
}

/* Animation for Uranus when in view */
.content-2.in-view .uranus-title,
.content-2.in-view .uranus-content,
.content-2.in-view #uranus {
    opacity: 1;
    transform: translateY(0) translateX(0);
}

/* End Of Planet */

/* Space Exploration */
.space-exploration {
    padding: 80px 20px;
    color: white;
    position: relative;
}

.container-exploration {
    max-width: 1200px;
    margin: 0 auto 60px;
    text-align: center;
}

.text-9 {
    font-size: 3rem;
    margin-bottom: 20px;
    background: linear-gradient(90deg, #fff, #7aa2f7);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-left: 25px;
}

.text-10 {
    font-size: 1rem;
    line-height: 1.6;
    max-width: 1200px;
    margin: 0 100px;
}

.apollo-container {
    max-width: 1200px;
    margin: 200px auto;
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.apollo-image {
    flex: 1;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.apollo-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.apollo-image:hover img {
    transform: scale(1.03);
}

.image-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    padding: 10px;
    font-size: 0.8rem;
    text-align: center;
    color: #aaa;
}

.apollo-content {
    flex: 1;
    padding: 20px 0;
}

.apollo-header {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(122, 162, 247, 0.3);
}

.apollo-title {
    font-size: 2.5rem;
    color: #7aa2f7;
    margin-bottom: 15px;
}

.mission-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 20px;
}

.fact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(122, 162, 247, 0.1);
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    border: 1px solid rgba(122, 162, 247, 0.3);
}

.fact-item i {
    width: 16px;
    height: 16px;
}

.apollo-details {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.detail-section h3 {
    color: #7aa2f7;
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.detail-section p {
    line-height: 1.7;
    margin-bottom: 15px;
}

.timeline-list {
    list-style: none;
    padding-left: 0;
}

.timeline-list li {
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
}

.timeline-list li:before {
    content: "•";
    color: #7aa2f7;
    font-size: 1.5rem;
    position: absolute;
    left: 0;
    top: -5px;
}

.timeline-list strong {
    color: #fff;
}

.quote-box {
    background: rgba(122, 162, 247, 0.1);
    border-left: 3px solid #7aa2f7;
    padding: 15px;
    margin: 20px 0;
    font-style: italic;
}

.quote-box p {
    margin-bottom: 5px;
}

.quote-box cite {
    display: block;
    text-align: right;
    font-style: normal;
    color: #aaa;
    font-size: 0.9rem;
}


/* Animation when in view */
.space-exploration.in-view .text-9,
.space-exploration.in-view .text-10,
.space-exploration.in-view .apollo-title,
.space-exploration.in-view .apollo-content,
.space-exploration.in-view .apollo img {
    opacity: 1;
    transform: translate(0);
}

.voyager-container,
.hubble-container {
    max-width: 1200px;
    margin: 200px auto;
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.voyager-image,
.hubble-image {
    flex: 1;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.voyager-image img,
.hubble-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.voyager-image:hover img,
.hubble-image:hover img {
    transform: scale(1.03);
}

.voyager-content,
.hubble-content {
    flex: 1;
    padding: 20px 0;
}

.voyager-header,
.hubble-header {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(122, 162, 247, 0.3);
}

.voyager-title,
.hubble-title {
    font-size: 2.5rem;
    color: #7aa2f7;
    margin-bottom: 15px;
}



/* End Of Space Exploration */

/* Gallery */
.gallery {
    padding: 5px 20px;
    position: relative;
}

.container-gallery {
    max-width: 1200px;
    margin: 0 auto 40px;
    text-align: center;
}

.text-11 {
    color: white;
    font-size: 3rem;
    margin-bottom: 20px;
    background: linear-gradient(90deg, #fff, #7aa2f7);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.text-12 {
    color: white;
    font-size: 1rem;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    aspect-ratio: 1/1;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 25px rgba(122, 162, 247, 0.5);
    z-index: 10;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

/* End Of Gallery */

/* quizz */
.quiz {
    padding: 5px 20px;
    position: relative;
    margin-top: 160px;
}

.heading {
    max-width: 1200px;
    margin: 0 auto 40px;
    text-align: center;
}

.text-13 {
    color: white;
    font-size: 3rem;
    margin-bottom: 20px;
    background: linear-gradient(90deg, #fff, #7aa2f7);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.text-14 {
    color: white;
    font-size: 1rem;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

.link-quiz {
    position: relative;
    text-align: center;
}

.quiz-button {
    padding: 15px 35px;
    background-color: #7aa2f7;
    color: #fff;
    text-decoration: none;
    font-size: 1.2rem;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(122, 162, 247, 0.4);
    transition: background-color 0.3s ease, transform 0.3s ease;
}


/* Footer */
footer {
    background-color: #000;
    color: #fff;
    padding: 60px 0 0;
    position: relative;
    z-index: 10;
    border-top: 1px solid rgba(122, 162, 247, 0.2);
    margin-top: 200px;
    width: 100%;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    /* Hapus height yang fixed */
    min-height: 300px; /* Ganti dengan min-height */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 40px;
    width: 100%;
}

.footer-logo {
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-logo img {
    height: 70px;
    margin-bottom: 15px;
    /* Hapus transform yang tidak perlu */
}

.footer-logo h1 {
    color: white;
    line-height: 1.6;
    max-width: 500px;
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.footer-logo p {
    color: #aaa;
    line-height: 1.6;
    max-width: 500px;
    font-size: 1rem;
}

.footer-contact {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.social-media {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.social-media a {
    color: #fff;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(122, 162, 247, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.social-media a:hover {
    background: #7aa2f7;
    transform: translateY(-3px);
}

.footer-bottom-container {
    width: 100%;
    border-top: 1px solid rgba(167, 167, 167, 0.29);
    margin-top: 40px; /* Kurangi margin atas */
    padding-top: 20px;
}

.footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 20px;
    text-align: center;
}

.footer-bottom p {
    color: #aaa;
    font-size: 0.9rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    footer {
        padding: 40px 0 0;
        margin-top: 100px;
    }
    
    .footer-logo h1 {
        font-size: 2rem;
    }
    
    .footer-logo img {
        height: 50px;
    }
    
    .social-media {
        gap: 15px;
    }
    
    .social-media a {
        width: 40px;
        height: 40px;
    }
}