/* Navigation */
@media (min-width: 992px) {
    .navbar-nav {
        padding-inline: 0.75rem;
    }

    .header-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .navbar-nav {
        padding-inline: none;
    }
}

/* Untuk browser berbasis WebKit (Chrome, Safari, dll.) */
::-webkit-scrollbar {
    width: 10px; /* Lebar scrollbar */
}

::-webkit-scrollbar-track {
    background-color: #3f3f46; /* Warna track scrollbar */
    border-radius: 10px; /* Sudut melengkung pada track */
}

::-webkit-scrollbar-thumb {
    background-color: #71717a; /* Warna thumb (bagian yang bisa di-scroll) */
    border-radius: 10px; /* Sudut melengkung pada thumb */
    border: 2px solid #3f3f46; /* Tambahan border pada thumb */
}

::-webkit-scrollbar-thumb:hover {
    background-color: #5c5c63; /* Warna thumb saat di-hover */
}

/* CSS untuk browser lain */
body {
    scrollbar-width: thin; /* Lebar tipis */
    scrollbar-color: #71717a #3f3f46; /* Warna thumb dan track */
}

.navbar-brand:hover{
    color: #fafafa;
}

.nav-link:hover {
    color: #2dd4bf;
}


/* Button Social Media */
.icon a {
    display: inline;
}

.icon a:hover {
    color: #a3a3a3;
}

/* Button CV */
.button a {
    display: inline;
}

.btn-link-cv {
    text-decoration: none;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-radius: 10px;
    background-color: #2dd4bf;
    color: white;
    font-weight: 500;
}

.btn-link-cv:hover {
    background-color: #5eead4;
}

.date {
    border-left: 2px solid #18181b;
}

/* Style Slider */
/* General styles for the slider */
.slider {
    height: 96px;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 100%; /* Use percentage for responsiveness */
    max-width: 1200px; /* Maximum width */
    box-sizing: border-box; /* Include padding and border in width calculations */
    mask-image: linear-gradient(
        to right,
        transparent,
        white 20%,
        white 80%,
        transparent
    );
}

/* Slide track to hold the slides */
.slide-track {
    display: flex;
    animation: scroll 40s linear infinite;
    width: calc(
        250px * 14
    ); /* Adjust this dynamically with JavaScript for better responsiveness */
}

/* Individual slide */
.slide {
    flex: 0 0 auto; /* Prevent flex items from growing or shrinking */
    height: 100px;
    width: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-250px * 7));
    } /* Adjust based on number of slides */
}

.slide-track:hover,
.slider {
    animation-play-state: paused !important;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .slide {
        width: 200px; /* Smaller width for tablets */
    }
    .slide-track {
        width: calc(200px * 14);
    }
    @keyframes scroll {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc(-200px * 7));
        }
    }
}

@media (max-width: 768px) {
    .slide {
        width: 175px; /* Smaller width for mobile */
    }
    .slide-track {
        width: calc(175px * 14);
    }
    @keyframes scroll {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc(-150px * 7));
        }
    }
}

@media (max-width: 480px) {
    .slide {
        width: 175px; /* Smaller width for small mobile */
    }
    .slide-track {
        width: calc(125px * 14);
    }
    @keyframes scroll {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc(-100px * 7));
        }
    }
}

.project .project-link {
    text-decoration: none;
}

.icon-project a {
    display: inline;
}

.icon-project .icon-view {
    color: #6d6d6d;
    text-decoration: none;
    transition: ease-in-out;
}

.icon-project .icon-view:hover {
    color: #5eead4;
}

.btn-submit {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-radius: 5px;
    background-color: #2dd4bf;
    color: white;
    border: none;
    font-weight: 500;
}

.btn-submit:hover {
    background-color: #5eead4;
}

.link-footer a:hover {
    color: #2dd4bf;
}

.toggle-button {
    cursor: pointer;
}

/* Slider */
.slide:hover {
    cursor: pointer;
}

.portfolio-image {
    width: 100%;
    height: auto;
}

.items {
    position: relative;
    overflow: hidden;
}

.items figcaption {
    position: absolute;
    bottom: -3.8rem;
    color: white;
    padding-top: 1rem;
    width: 100%;
    text-align: center;
    background-color: #2dd4bf;
    transition: all ease-in-out 300ms;
    border-radius: 8px 8px 0 0;
}

.items:hover figcaption {
    bottom: 0;
}

.wrapping-card {
    text-decoration: none;
    padding: 1rem;
    border-radius: 8px;
}

.wrapping-card:hover {
    background-color:  #18181b;
}

.wrapping-card:hover .title-card {
    color: #2dd4bf;
}

.wrapping-card:hover .link-fake {
    color: #2dd4bf;
}

.zona-media .content-zona:hover {
    background-color: #18181b;
    border-radius: 8px;
}

.zona-media {
    text-decoration: none;
}

.helios {
    text-decoration: none;
}

.helios .content-helios {
    padding: 1rem;
    border-radius: 8px;
}

.helios .content-helios:hover {
    background-color: #18181b;
    border-radius: 8px;
}

.zona-media .content-zona {
    padding: 1rem;
    border-radius: 8px;
}

.wrapper-testimoni {
    border-radius: 8px;
    border: 0.5px solid #3f3f46;
    box-sizing: border-box;
}

.profile-picture {
    background-image: url(../img/profile-1.jpg);
    width: 60px;
    height: 60px;
    background-position: center;
    background-size: cover;
    border-radius: 100%;
}

.profile-picture-2 {
    background-image: url(../img/profile-2.jpg);
    width: 60px;
    height: 60px;
    background-position: center;
    background-size: cover;
    border-radius: 100%;
}

.profile-picture-3 {
    background-image: url(../img/profile-3.jpg);
    width: 60px;
    height: 60px;
    background-position: center;
    background-size: cover;
    border-radius: 100%;
}

.profile-picture-4 {
    background-image: url(../img/profile-4.jpg);
    width: 60px;
    height: 60px;
    background-position: center;
    background-size: cover;
    border-radius: 100%;
}

.profile-picture-5 {
    background-image: url(../img/profile-5.jpg);
    width: 60px;
    height: 60px;
    background-position: center;
    background-size: cover;
    border-radius: 100%;
}
.profile-picture-6 {
    background-image: url(../img/profile-6.jpg);
    width: 60px;
    height: 60px;
    background-position: center;
    background-size: cover;
    border-radius: 100%;
}

.card-4-testimoni {
    margin-top: -24px;
}

.card-5-testimoni {
    margin-top: -64px;
}

.card-6-testimoni {
    margin-top: 16px;
}

.icon-like {
    cursor: pointer;
}

.button-comment {
    border: none;
    border-radius: 4px;
    display: flex;
    justify-content: center;
}

.button-comment:hover{
    background-color: #27272a;
}

.wrapper-articles{
    box-sizing: border-box;
    border-left: 0.5px solid #18181b;
}

.wrapper-articles a{
    text-decoration: none;
    padding: 1rem;
    border-radius: 8px;

}

.wrapper-articles a:hover{
    background-color: #18181b;
}

/* Form */
/* Custom styling for form-control in dark mode */
.custom-form {
    background-color: #3f3f46; /* Background sesuai keinginan */
    border: 1px solid rgba(113, 113, 122, 0.7); /* Border lebih halus dengan opacity */
    color: #f4f4f5; /* Text color in dark mode */
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Keep background consistent on focus */
.custom-form:focus {
    background-color: #3f3f46; /* Tetap sama saat focus */
    border-color: #71717a; /* Warna border saat focus */
    box-shadow: 0 0 0 0.25rem rgba(63, 63, 70, 0.7); /* Custom ring dengan shadow */
    color: #f4f4f5;
    outline: none; /* Remove default outline */
}


/* Optional: Tambahkan hover untuk interaksi lebih smooth */
.custom-form:hover {
    border-color: rgba(113, 113, 122, 0.7); /* Warna border lebih terang saat di-hover */
}


.modal-header{
    border-bottom: none;
}

.modal-footer{
    border-top: none;
}

.photo-profile{
    background-image: url(../img/astro.jpeg);
    width: 48px;
    height: 48px;
    background-position: center;
    background-size: cover;
    border-radius: 100%;
}

.experience{
    border: 1px solid rgba(209, 209, 209, 0.1);
    border-radius: 8px;
}

.wrapper-exp{
    box-sizing: border-box;
}

.background-rounded{
    width: 48px;
    height: 42px;
    border-radius: 100%;
    background-color: #27272a;
    border: 1px solid rgba(209, 209, 209, 0.1);
}

.profile-company-1{
    background-image: url(../img/logo-zona.png);
    width: 32px;
    height: 32px;
    background-position: center;
    background-size: cover;
    border-radius: 100%;
}

.profile-company-2{
    background-image: url(../img/Helios.jpeg);
    width: 32px;
    height: 32px;
    background-position: center;
    background-size: cover;
    border-radius: 100%;
}

.button-cv{
    border-radius: 4px;
    background-color: #18181b;
}

.button-cv:hover{
    background-color: #27272a;
}



/* Dark Mode */

/* body.dark-theme{
    background-color: #09090b;
} */

/* Responsive */
@media (max-width: 576px) {
    /* Navigation */
    .navbar-nav {
        border: none;
        border-radius: none;
    }

    /* Home */
    .header {
        margin-top: 5rem;
    }

    .hero-image {
        display: none;
    }

    /* About */
    .what {
        margin-top: 2rem;
    }

    .skills {
        margin-top: 2rem;
    }

    .contacts {
        margin-top: 2rem;
    }

    .link-footer {
        display: none;
    }

    .card-4-testimoni {
        margin-top: 16px;
    }

    .card-5-testimoni {
        margin-top: 16px;
    }
}

@media (min-width: 576px) and (max-width: 992px) {
    .card-4-testimoni {
        margin-top: -24px;
    }

    .card-5-testimoni {
        margin-top: 16px;
    }

    .card-6-testimoni {
        margin-top: -44px;
    }
}


.service-border{
    border: 1px solid #18181b;
}