@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Quicksand:wght@300;400;500;600;700&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    border: none;
    outline: 0;
    scroll-behavior: smooth;
    font-family: 'quicksand',sans-serif;
}
:root{
    --bg-color:#f1eeee;
    --text-color:#000;
    --main-color:#87C1FF;
    --transition:  .5s ease;
}
html{
    overflow-x: hidden;
}
 section{
    min-height: 100vh;
    padding: 13rem 9% 2rem;
   
} 
body{
    background-color: #87C1FF;
}
/* navbar */
.header{
position: sticky;
top: 0;
left: 0;
width: 100%;
background: white;
justify-content: space-between;
align-items: center;
display: flex;
z-index: 100;
}
.logo img {
    height: 60px;
    cursor: default;
    margin-left: 3rem;
    margin-bottom: 1rem;
    padding-top: 1rem;


}
.navbar a {
    font-size: 1.2rem;
    color: var(--text-color);
    margin-left: 1rem ;
    margin-right: 3rem;
    transition: var(--transition);font-weight: 600;

}
.navbar a:hover {
    color: var(--main-color);
   
}
.navbar a:hover,
.navbar a.active {
    color: var(--main-color);
 text-decoration: underline;
}
#menu-icon {
    font-size: 3.6rem;
    color: var(--text-color);
    display: none;
}
.home{
  
        background: url(https://lh3.googleusercontent.com/p/AF1QipPPfiIPkEhEXxDgPb-oJT46mdxM0kR4POY5wzwK=s1360-w1360-h1020) no-repeat;
        height: 100%;
        width: 100%;
        background-position:center;
        background-size: cover;
        position: relative;
   
}

.center{
    width: 100%;
    position: absolute;
    top:25%;
    left:50%;
    color: var(--bg-color) ;
    padding: 0 20px;
    text-align: center;
    transform: translate(-50%, 50%);
}
.center .title{
    color: var(--bg-color);
    font-size: 55px;
    font-weight: 800;
  
-webkit-text-stroke: 2px black;
}
.center .subtitle{
    color:var(--main-color);
    font-size: 35px;
    font-weight: 500;
}
.center .btn{
    margin-top: 20px;
    list-style: none;
    
    }
    .center .btn button{
        height: 45px;
        width: 100px;
        border-radius: 5px;
        border: none;
        margin: 0 20px;
        border:2px solid var(--text-color);
        font-size: 20px;
        padding: 0 10px;
        font-weight:500;
        transition: all 0.3s ease;
        outline:none;
        cursor:pointer;
        background: #87C1FF;

    }
    .center .btn button:hover{
        color: #87C1FF;
        background:whitesmoke;
        border:2px solid var(--main-color) ;
        box-shadow: solid 20px #87C1FF;
        -webkit-text-stroke: 1px black;
    }
    .about {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 30px;
        
    }
    .h3-ab{
        text-align: center;
        margin-bottom: 100px;
        margin-left: 450px;
    }
    .about-content h3 {
        font-size: 2rem;
        font-weight: 700;
    }
    
    span {
        color: var(--bg-color);
      
    }
    
    .underline {
        text-decoration: underline;
    }
    
    .about-content h3:nth-of-type(2) {
        margin-bottom: 2rem;
    }
    
    .about-content h1 {
        font-size: 2rem;
        font-weight: 800;
       
    }
    
    .about-img img {
        width: 50vw;
        border-radius: 10px;
        
        animation: floatImage 4s ease-in-out infinite;
    }
    @keyframes floatImage{
        0%{
            transform: translateY(0);
        }
        50%{
            transform: translateY(-2rem);
        }
        100%{
            transform: translateY(0);
        }
    }
    .about-content{
        margin-left: 70px;
        line-height: 45px;
    }
    .about-content p {
        font-size: 1rem;
    
    }
    
    .social-media a {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 3rem;
        background: transparent;
        height: 3rem;
        border: .2rem solid var(--text-color);
        border-radius: 50%;
        color: var(--text-color);
        font-size: 2rem;
        margin: 3rem 1.5rem 3rem 0;
        transition: .5s;
    }
    
    .social-media a:hover {
        background: var(--text-color);
        color: var(--main-color);
        box-shadow: 0 0 1rem var(--text-color);
    }
    
    .bton {
        display: inline-block;
        padding: .5rem  1.2rem;
        background: var(--bg-color);
        box-shadow: 0 0 3rem black;
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-color);
        letter-spacing: .1rem;
        border-radius: 4rem;
        transition: .5s ease;
        width: 100px;
    }
    
    .bton:hover {
        box-shadow: none;
    }
    .h3-pr{
        text-align: center;
        margin-top: 50px;
       /*  margin-left: 510px; */
        font-size: 2rem;
        color: var(--main-color);
    }
    .h2-pr{
        text-align: center;
        margin-top: 10px;
        margin-left: 10px;
    }
    .p-pr{
        text-align: center;
        margin-top: 10px;
        font-size: 1rem;
        font-weight: 600;
    }
    .card-c{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, auto));
    grid-gap: 1.5rem;
    align-items: center;
    }
    .card{
        position: relative;
    margin-top: 4rem;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: white;
    padding: 20px;
    border-radius: 0.5rem;
    box-shadow: 0 0 0 2px black, 8px 8px 0 0 black;
    }
    .card-img{
        width: 170px;
    height: 170px;
    }
    .card-img img{
        width: 70%;
        height: 70%;
      margin-top: 10px;
        margin-left: 20px;

    }
    .card-logo{
        width: 170px;
        height: 170px;
    }
    .card-logo img{
        width: 130%;
        height: 100%;
       
    }
    #img-b{
        align-items: center;
        margin-right: 80px;
    }
    .skills{
        background-color: var(--main-color);
    }
   .h3-sk {
    text-align: center;
   
   /*  margin-left: 510px; */
    font-size: 2rem;
    color: var(--bg-color);
   }
   .h2-sk{
    text-align: center;
    margin-top: 10px;
    margin-left: 10px;
   }
   .p-sk{
    text-align: center;
    margin-top: 10px;
    font-size: 1rem;
    font-weight: 600;
   }
   .c-sk{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, auto));
    grid-gap: 1.5rem;
    align-items: center;
    }
    .c{
        position: relative;
    margin-top: 4rem;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: white;
    padding: 20px;
    border-radius: 0.5rem;
    box-shadow: -10px 10px 0px rgba(33, 33, 33, 1), -20px 20px 0px rgba(33, 33, 33, 0.7), -30px 30px 0px rgba(33, 33, 33, 0.4), -40px 40px 0px rgba(33, 33, 33, 0.1);
    }
    .card-sk{
        width: 170px;
    height: 170px;
    }
    .card-sk img{
        width: 70%;
        height: 70%;
      margin-top: 10px;
        margin-left: 20px;

    }
    /* contact */
    /* Contact section */

#contact{
    padding: 6rem 0;
    padding-left: 2rem;
}

.contact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 3rem;
}


.contact-from div {
    margin-bottom: 1.4rem;
    box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.22), 1px 0px 0px 0px rgba(0,0,0,0.22), 1px 2px 0px 0px rgba(0,0,0,0.22), 2px 1px 0px 0px rgba(0,0,0,0.22), 2px 3px 0px 0px rgba(0,0,0,0.22), 3px 2px 0px 0px rgba(0,0,0,0.22), 3px 4px 0px 0px rgba(0,0,0,0.22), 4px 3px 0px 0px rgba(0,0,0,0.22), 4px 5px 0px 0px rgba(0,0,0,0.22), 5px 4px 0px 0px rgba(0,0,0,0.22), 5px 6px 0px 0px rgba(0,0,0,0.22), 6px 5px 0px 0px rgba(0,0,0,0.22), 6px 7px 0px 0px rgba(0,0,0,0.22), 7px 6px 0px 0px rgba(0,0,0,0.22), 7px 8px 0px 0px rgba(0,0,0,0.22), 8px 7px 0px 0px rgba(0,0,0,0.22);
    
}

.contact-from input,
.contact-from textarea {
    width: 100%;
    padding: 0.75rem 1.3rem;
    
    border: 2px solid black;
    border-radius: 3px;
    resize: none;
   
}

.contact-from input::placeholder,
.contact-from textarea::placeholder{
    color:var(--main-color);
    
}

.contact-from input:focus,
.contact-from textarea:focus{
    outline: none;
    border: 1px solid #031920;
}

.btn-submit{
    width: 100%;
    padding: 0.75rem 1.3rem;
    background-color: var(--bg-color);
    color: var(--main-color);
    border: 2px solid black;
    border-radius: 3px;
    cursor: pointer;
    transition: .5s ease;
    box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.22), 1px 0px 0px 0px rgba(0,0,0,0.22), 1px 2px 0px 0px rgba(0,0,0,0.22), 2px 1px 0px 0px rgba(0,0,0,0.22), 2px 3px 0px 0px rgba(0,0,0,0.22), 3px 2px 0px 0px rgba(0,0,0,0.22), 3px 4px 0px 0px rgba(0,0,0,0.22), 4px 3px 0px 0px rgba(0,0,0,0.22), 4px 5px 0px 0px rgba(0,0,0,0.22), 5px 4px 0px 0px rgba(0,0,0,0.22), 5px 6px 0px 0px rgba(0,0,0,0.22), 6px 5px 0px 0px rgba(0,0,0,0.22), 6px 7px 0px 0px rgba(0,0,0,0.22), 7px 6px 0px 0px rgba(0,0,0,0.22), 7px 8px 0px 0px rgba(0,0,0,0.22), 8px 7px 0px 0px rgba(0,0,0,0.22);
}

.btn-submit:hover{
   background: transparent;
color: var(--text-color);
box-shadow: none;
}

.contact-item-icon{
    background: var(--bg-color);
    width: 53px;
    height: 53px;
    border-radius: 9px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.contact-item-icon svg {
    fill: var(--text-color);
}

.contact-item-detail h4 {
    margin-bottom: 0.6rem;
}

.contact-item{
    display: flex;
    gap: 3rem;
    margin-bottom: 2.5rem;
}

footer {
    padding: 4rem 0;
    background: var(--bg-color);
    text-align: center;
    color: #87C1FF;
  }
  footer p:hover{
    color: #000;
  }
  
  .footer-icons {
    margin-bottom: 1rem;
  }
  
  .footer-icons a {
    margin: 0 0.5rem;
  }
  
  .footer-icons svg {
    fill: var(--main-color);
  }
  
  .footer-icons a:hover svg {
    fill: #000;
  }

  /* responsive */
  @media only screen and (max-width: 768px) {
    .navbar {
        flex-direction: column;
        align-items: center;
        text-align: center;
        display: none;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background: white;
        z-index: 99;
    }

    .navbar a {
        margin: 0.5rem;
    }

  
    .navbar.active {
        display: flex;
    }

    header {
        flex-direction: column;
        align-items: center;
    }

    .center {
        top: 10%;
    }

    .about {
        flex-direction: column;
        text-align: center;
    }

    .about-content {
        margin-left: 0;
        text-align: center;
    }

    .about-img {
        margin-top: 2rem;
    }

    .about-img img {
        width: 100%;
    }

    .profile h2-pr,
    .profile p-pr {
        margin-left: 0;
    }

    .card-c {
        grid-template-columns: repeat(1, minmax(220px, auto));
    }

    .skills h2-sk,
    .skills p-sk {
        margin-left: 0;
    }

    .c-sk {
        grid-template-columns: repeat(1, minmax(220px, auto));
    }

    .contact-form input,
    .contact-form textarea {
        width: 100%;
    }
      .logo{
      margin-right: 100px ;}
}


@media (max-width: 991px) {
    .header {
        padding: 2rem 3%;
    }

    section {
        padding: 10rem 3% 2rem;
    }

    .footer {
        padding: 2rem 3%;
    }
    .service{
        padding-bottom: 7rem;
    }
    .portofolio{
        padding-bottom: 7rem;
    }
    .contact{
        min-height: auto;
    }

}

@media(max-width: 768px) {
    #menu-icon {
        display: block;
    }

    .navbar {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        padding: 1rem 3%;
        background: var(--secondbg-color);
        border-top: .1rem solid rgba(0, 0, 0, .2);
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
        display: none;
    }
    

    .navbar.active {
        display: block;
    }

    .navbar a {
        display: block;
        font-size: 2rem;
        margin: 3rem 0;
    }

    .home {
        flex-direction: column;
    }

    .home-content h3 {
        font-size: 2.6rem;
    }

    .home-content h1 {
        font-size: 5rem;
    }

    .home-img img {
        width: 70vw;
        margin-top: 4rem;
    }
    .about{
        flex-direction: column-reverse;
    }
    .about-img img{
        width: 70vw;
        margin-top: 4rem;
    }
    .service h2{
        margin-bottom: 3rem;
    }
    .portofolio{
        margin-bottom: 3rem;
    }
    .portofolio-container{
        grid-template-columns: repeat(2,1fr);
    }

}
@media (max-width: 617px){
    .portofolio-container{
        grid-template-columns: 1fr;
    }
}
@media (max-width: 450px){
    html{
        font-size: 50%;
    }
    .contact form .input-box input{
        width: 100%;
    }
}
@media (max-width: 365px){
    .home-img img{
        width: 90vw;
    }
    .footer{
        flex-direction: column-reverse;
    }
    .footer p{
        text-align: center;
        margin-top: 2rem;
    }
}


@media screen and (max-width: 100px) {
    p{
        font-size: 0.9rem;
        line-height: 1.8rem;
    }

    .grid-3{
        gap: 1rem;
    }

    .skills-right ul li{
        font-size: 0.9rem;
    }
} 

@media screen and (max-width: 825px) {
    /* Burger */

    .burger{
        display: block;
        cursor: pointer;
    }

    /* Burger animation */


    .toggle-burger .line-1 {
       transform: rotate(-45deg) translate(-5px, 7px);
       }

    .toggle-burger .line-2 {
        opacity: 0;
       }

    .toggle-burger .line-3 {
         transform: rotate(45deg) translate(-5px, -7px);
       }
    
    /* Navigation */

    nav{
        position: fixed;
        width: 50%;
        right: 0;
        top: 0;
        height: 100vh;
        flex-direction: column;
        background: var(--primaryBackgroundColor);
        border-left: 1px solid var(--bordercolor);
        z-index: 9;
        transform: translateX(100%);
        transition: 0.2 ease-in-out;
    }

    nav ul {
        height: 100vh;
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }

    .nav-active{
        transform: translateX(0%);
    }

    /* End of Navigation */

    :root {
        --sectionPadding: 4rem 0;
      }
    
      /* Titles */
      .section-title {
        font-size: 1.6rem;
        margin: 0.6rem 0 2.5rem;
      }
    
      .pre-title {
        font-size: 0.8rem;
      }
    
      /* Hero Section */
      #hero {
        grid-template-columns: 1fr;
        height: fit-content;
      }
    
      .hero-right {
        order: -1;
      }
    
      .hero-right img {
        width: 70%;
      }
    
      .hero-left {
        text-align: center;
        padding-bottom: 5rem;
      }
    
      .hero-left .pre-title {
        margin: 0 auto;
      }
    
      .hero-name {
        font-size: 2.3rem;
        margin-bottom: 0.5rem;
      }
    
      /* Skills Section */
      .skills-grid {
        gap: 1rem;
      }
    
      /* Footer */
      footer {
        padding: 2rem 0;
      }
}


/* Mobile size */
@media screen and (max-width: 640px) {

    .section-title{
        font-size: 1.3rem;
    }

    .pre-title{
        font-size: 0.7rem;
    }
    
}
.burger div {
    width: 25px;
    height: 2px;
    background-color: black;
    margin-top: 7px;
    transition: all 0.3s;
    z-index: 99;
    color: #000;
}

.burger {
    display: none;
    z-index: 99;
    position: fixed;
    top: 33px;
    right: 35px;
}