@import url('https://fonts.googleapis.com/css?family=Poppins');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: none;
    outline: none;
    scroll-behavior: smooth;
    font-family: 'Poppins', sans-serif;
}

:root{
    --text-color: wheat;
    --second-text-color: #DCDCDC;
}

html {
    font-size: 70.5%;
    overflow-x: hidden;
}

body {
    background-image: url("../../philip-oroni-uW6N7dj9HjM-unsplash.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--text-color);
}


section {
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
}


.headerr{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1.25rem 10%;
    background: transparent;
    z-index: 1000;
    display: flex;
    justify-content: flex-end;

}

.logo {
  font-size: 2.8rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 2px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.logo:hover {
  color: #2f2fe0; /* efek hover */
}

.navigation {
    display: flex;
    margin-left: auto;

}

.navigation a {
    font-size: 1.7rem;
    color: var(--text-color);
    text-decoration: none;
    font-weight: 500;
    margin-left: 2.5rem;
    transition: .10s;
}

.navigation a:hover, 
.navigation a.activate {

    color: blue;
}

#menu-icon{
    font-size: 3.6rem;
    color: var(--text-color);
    display: none;
}

.home{
    background: #081b29;
    padding: 5% 10%;
    gap: 5%;
}

.homecontent{
    max-width: min(90%, 600px);
    flex: 1 1 60%;
    /* background: #f00008; */
}

.homecontent h1{
    font-size: clamp(5rem, 5vw, 3.5rem);
    font-weight: 700;
    color: var(--second-text-color);
    margin: 15px;
    

}

.homecontent h3{
    font-size: 3.2rem;
    font-weight: 700;
    color: rgb(44, 179, 172);
    margin: 15px;

}

.homecontent p{
    margin-left: 20px;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--second-text-color);
}

.home-image {
    flex: 1 1 45%;
    max-width: 400px;
    margin: 0 5% 0 10%;
    /* background: blueviolet; */
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 20%;
    box-shadow: 0 0 40px 20px #041a4d;
}

.home-image img {
    
    width: 100%; 
    height: auto; 
    display: block;
}

.sosmed a{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    border: .4rem solid blanchedalmond;
    border-radius: 30%;
    font-size: 5rem;
    color: var(--second-text-color);
    margin: 3rem 1.5rem;
    transition: .5s ease;
}

.sosmed :hover{
    background: transparent;
    color: var(--second-text-color);
    box-shadow: 0 0 2rem #FFFAFA;
}

.botton{
    display: inline-block;
    padding: 1rem 2.5rem;
    background: #191970;
    border: .4rem solid blanchedalmond;
    border-radius: 4rem;
    font-size: 2rem;
    color: var(--second-text-color);
    letter-spacing: .1rem;
    font-weight: 800;
    transition: .5s ease;
    margin: 1rem 1.5rem ;

}

.botton:hover{
    background: transparent;
    color: var(--second-text-color);
    box-shadow: 0 0 2rem #FFFAFA;
}

.about-section{
    gap: 5%; 
    padding: 5% 10%;
    background: #081b2986;
    background: linear-gradient(to bottom, #081b29, #1f2a8b10);

}

.about-image{
    order: 2;
    flex: 1 1 45%; 
    max-width: 500px;
    /* background: blueviolet; */
}

.about-image img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20%;
    box-shadow: 0 0 40px 20px #031641;
}

.about-content{
    order: 1;
    max-width: min(90%, 600px);
    flex: 1 1 60%;
    font-weight: 700;
    margin: 0 3% 10% 6%;
    /* background: #f00008; */
}


.about-content h2{
    font-size: 5rem;
    color: var(--text-color);
    padding-bottom: 6px; 
    margin: 0 0 3% 0;
    border-bottom: 0.4rem solid #2f2fe0;
    border-radius: 5%;
    display: inline-block;

}

.about-content h3{
    font-size: 2.5rem;
    color: rgb(44, 179, 172);
    margin-bottom: 2%;
}

.about-content p{
    font-size: 2rem;
    color: var(--second-text-color);
    text-align: justify;
    text-indent: 2em;
}

.skills-section{
    gap: 5%; 
    padding: 5% 10%;
    font-weight: 700;
    /* align-items: center; */
}

.head-skill{
    /* background: #f00008; */
    text-align: center;
    align-items: center;
    margin: 0 0 1% 45%;
    font-size: 2.5rem;
    font-weight: 800;
    border-bottom: 0.4rem solid #2f2fe0;
    border-radius: 5%;
    display: inline-block;
}

.softskil, .hardskil, .tools{
    max-width: min(90%, 600px);
    margin: 2% 0;
    flex: 1 1 60%;
    font-size: 3rem;
    box-shadow: 0 0 40px 20px #030d24;
    display: inline-block;
    border-radius: 10%;
    /* background: #f00008; */
}

.softskil{
    margin: 0 6% 2% 8%;

}

.softskil h2, .hardskil h2, .tools h2{
    color: var(--text-color);
    /* font-size: 3.5rem; */
    text-align: center;
    border-bottom: 0.4rem solid #2f2fe0;
    border-radius: 5%;
    display: inline-block;

}

.softskil p, .hardskil p{
    color: var(--second-text-color);
    /* font-size: 3.5rem; */
    text-align: justify;

}

hardskil p{
    margin: 0 0 5% 0;
}

.softskil p{
    margin: 0 0 5% 0;
}

.tools{
    margin-left: 30%;
}

.tools p{
    background: rgb(2, 23, 37);
    color: var(--second-text-color);
    display: inline-block;
    margin: 2% 3.2%;
    justify-content: center;
    text-align: justify;
    border: .4rem solid rgb(10, 48, 117);
    border-radius: 10%;
}

.experiences-section {
    display: flex;
    flex-direction: column; /* agar item menurun */
    align-items: center; /* item tetap rata tengah */
    gap: 5%;
    padding: 5% 10%;
    /* max-width: 400px; */

}


.head-exp{
    /* background: #f00008; */
    text-align: center;
    align-items: center;
    margin: 0 3% 5% 3%;
    font-size: 2.5rem;
    font-weight: 800;
    border-bottom: 0.4rem solid #2f2fe0;
    border-radius: 5%;
    display: inline-block;
}

.experience-item {
    /* background: blueviolet; */
    display: flex;
    justify-content: center;
    gap: 5%;
    margin: 0 1.5% 5% 1.5%; 
}

.experience-item:nth-child(even){
    flex-direction: row;
    text-align: left;

}

.experience-item:nth-child(odd){
    flex-direction: row-reverse;
    text-align: center;
    /* justify-content: center; */

}

.experience-item img {

    flex: 1 1 20px;      
    max-width: 400px;
    height: auto;
    border-radius: 0.5rem;
    display: block;
    border-radius: 20%;
    box-shadow: 0 0 40px 20px #374d86;
    transition: all 0.3s ease-in-out;

}

.experience-item img:hover{
    transform: scale(1.15);      
    filter: brightness(1.1);
    box-shadow: 0 0 50px 25px #4a6eff;
}

.inter{
    background-color: rgba(0, 0, 0, 0.7) ;
}
.exp-text {
    margin: 3% 0 0 0;
    flex: 1;
    font-size: 2.5rem;
    color: var(--second-text-color);
}

.exp-text h2 {
    margin: 0 0 3% 0;
    color: var(--text-color);
}

.exp-text p{
    text-indent: 10%;
}

.projects-section{
    padding: 5% 10%;
    gap: 5%;
    align-items: flex-start;

}
.head-pro{
    /* background: #f00008; */
    text-align: center;
    margin: 0 10% 3% 42%;
    font-size: 2.5rem;
    font-weight: 800;
    border-bottom: 0.4rem solid #2f2fe0;
    border-radius: 5%;
    display: inline-block;
}

.project-item {
    /* background: blueviolet; */
    display: flex;
    flex-direction: column;
    margin: 0 1.5% 2% 1.5%;
}

.project-item img {

    flex: 1 1 25%;     
    max-width: 400px;   
    height: auto;
    margin: 15% 0 15% 0;
    border-radius: 0.5rem;
    display: block;
    border-radius: 20%;
    box-shadow: 0 0 40px 20px #031641;
    transition: all 0.3s ease-in-out;
}

.project-item img:hover{
    transform: scale(1.15);      
    filter: brightness(1.1);
    box-shadow: 0 0 50px 25px #4a6eff;
}

.pro-text {
    max-width: 400px;
    flex: 1 1 25%;     
    text-align: center;
    font-size: 2.5rem;


}
.pro-text p{
    color: var(--second-text-color);
    text-align: center;
}

.footer {
  /* background: #031641; */
  padding: 1.5rem 2rem;
  text-align: center;
  margin-top: 3rem;
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.footer p {
  font-size: 1.9rem;
  color: #ffffffcc; /* putih agak transparan */
  margin: 0;
}

.footer a {
  color: #131381;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer a:hover {
  color: #ffffff;
}


/* Responsive for HP */

@media (max-width: 480px) {

    .navigation {
        position: absolute;
        margin: 5% 5% 0 0;
        top: 100%;
        right: -100%; 
        width: 40%;
        height: 20vh;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        gap: 2rem;
        transition: 0.4s;
    }

    .navigation.active {
        right: 0; 
    }

    #menu-icon {
        display: block; 
    }

    section {
        padding: 2rem 1rem; 
    }

    h1 { font-size: clamp(1.7rem, 6vw, 2.5rem); }
    h2 { font-size: clamp(1.5rem, 5vw, 2rem); }
    h3 { font-size: clamp(1.2rem, 4.5vw, 1.6rem); }
    p  { font-size: clamp(1rem, 4vw, 1.4rem); }
    .home, .experience-item, .project-item, .softskilm .hardskil, .tools{
        flex-direction: column !important;
        align-items: center;
        justify-content: center;
        font-size: small;
    }
    .logo {
        margin: 5% 60% 0 0;
        font-size: 1.4rem;
        left: 0;
    }
   .home-image{

        margin-top: 20%;
        overflow: hidden;
    }

    .sosmed a{
        margin-right: 1%;
    }

    .hardskil{
        margin: 0 0 0 5%;
    }

    .tools{
        margin: 0 5% 0 5%;
    }

    img {
        width: 100%;
        margin: 15% 0 10% 0;
    }

    .exp-text {
        text-align: center;
    }

    .footer{
        font-size: 0.1rem;
        padding: 0.5em 0;
    }
}

@media (min-width: 481px) and (max-width: 1024px) {

    .navigation {
        position: absolute;
        top: 100%;
        right: -100%;
        width: 50%;
        height: 40vh;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        gap: 2rem;
        transition: 0.4s;
    }

    .navigation.active {
        right: 0;
    }

    #menu-icon {
        display: block;
    }

    section {
        padding: 3rem 2rem;
    }

    h1 { font-size: clamp(2rem, 5vw, 3rem); }
    h2 { font-size: clamp(1.8rem, 4.5vw, 2.5rem); }
    h3 { font-size: clamp(1.4rem, 4vw, 2rem); }
    p  { font-size: clamp(1rem, 3.5vw, 1.6rem); }

    .home, .experience-item, .project-item, .softskil, .hardskil, .tools {
        flex-direction: column !important;
        align-items: center;
        justify-content: center;
        font-size: medium;
    }

    .logo {
        margin: 3% 70% 0 0;
        font-size: 1.6rem;
        left: 0;
    }

    .home-image {
        margin-top: 10%;
        overflow: hidden;
    }

    .about-image{
        margin: 0 0 0 10%;
    }

    .sosmed a {
        margin: 2rem;
    }

    .hardskil {
        margin: 0 0 0 8%;
    }

    .tools {
        margin: 0 0 0 8%;
    }

    img {
        width: 90%;
        margin: 10% 0 5% 0;
    }

    .exp-text {
        text-align: center;
    }

    .footer {
        font-size: 0.9rem;
        padding: 1em 0;
    }

    .project-item{
        margin: 0 0 0 20%;
    }

}