/*FONTS*/
/* <style> */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
/* </style> */

/*VARIABEL*/
:root {
    --primary-color: #FB6A27;
    --dark-color : #0F0F0F;
    --gray-color : gray;

    --h1-font-size : 40px;
    --h2-font-size : 32px;
    --small-font-size :14px;

}

/*RESET CSS*/
* {
    margin :0 ;
    padding : 0 ;
    box-sizing : border-box;
    font-family : 'Poppins', sans-serif;
}

img {
    max-width : 100%;
}

a {
    text-decoration : none;
}

/*GLOBAL CSS*/
section {
    padding : 70px 0;
    
}

section .section-title {
    font-size : var(--h2-font-size);
    font-weight : bold ;
    text-transform : uppercase ;
}

.btn-orange {
    background-color : var(--primary-color);
    color : white ;
}

.btn-orange:hover {
    background-color : var(--dark-color);
    color : white ;
}

.text-orange {
    color : var(--primary-color);
}

.text-dark {
    color : var(--dark-color);
}

.fs-7 {
    font-size : var(--small-font-size);
}

.form-control:focus {
    box-shadow : none;
    border-color : var(--primary-color);
}
/*CSS PER SECTION*/

/* NAVBAR */
.navbar .nav-item .nav-link:hover,
.navbar .nav-item .nav-link.active {
    color : var(--primary-color);
}

/* HEADER */
.header-section .header-title {
    font-size : var(--h1-font-size);
}

.header-section .header-skill,{
    color : var(--dark-color);
}

.header-section .header-skill:hover {
    color : var(--primary-color);
}

.header-section .header-skill i {
    transition : .3s ;
}

.header-section .header-skill:hover i {
    transform : rotate(-45deg);
}

.header-section .header-img, .skills-section .skills-img {
    width : 90%;
}

/* PORTOFOLIO */
    
    /* Pastikan semua card memiliki tinggi yang sama */
.portofolio-section .card {
    display: flex;
    flex-direction: column;
    height: 100%; /* Semua card akan memiliki tinggi yang sama */
}

/* Pastikan teks tidak melebihi batas card */
.portofolio-section .card-body {
    flex-grow: 1; /* Mengisi ruang yang tersedia agar semua card seragam */
    display: flex;
    flex-direction: column;
}

/* Supaya tombol "Detail Portofolio" tetap di bawah */
.portofolio-section .card-body a {
    margin-top: auto; /* Menempatkan link ke bawah */
}


 .portofolio-section .card .card-img-top {
    height : 200px;
    width : 100%;
    object-fit : cover;
/*     REVISI */
     display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 10px;
} 

@media screen and (max-width: 768px) {
    .portofolio-section .card .card-img-top {
        height : 100px;
    }
}

/* SKILLS */

.skills-section {
    padding: 50px 0;
}

.skill-item {
    margin-bottom: 15px;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background-color : var(--gray-color);
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}

.progress-bar .progress {
    display: block;
    height: 100%;
    background-color : var(--primary-color);
    border-radius: 5px;
}
    
    
.skills-section, footer {
    background-color : #030304;

}
/* 
.skills-section .progress-bar {
    width : 100%;
    height : 10px;
    border-radius : 10px;
    background-color : var(--gray-color);
}

.skills-section .progress-bar .progress{
    background-color : var(--primary-color);
}
 */
/* REVISI */
    @media (max-width: 768px) {
    h1 {
        font-size: 24px; /* Atur agar lebih kecil di layar kecil */
    }
}

    /* Mobile Phone */
@media (max-width: 450px){
    html {
        font-size: 55%;
    }
}