@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@500;600;700&display=swap');

:root{
 --color-body:#b6cbce;
 --color-heading:#eef3db ;
 --color-base:#033f47;
 --color-base2:#022a30;
 --color-brand:#e0f780 ;
 --color-brand2:#deff58 ;
 --sidebar-width:240px ;
 --font-base:"Bai Jamjuree" ;

}

body{
background-color: var(--color-base2);
color: var(--color-body);
font-family: var(--font-base),sans-serif;
}


h1,h2,h3,h4,h5,h6{
color: var(--color-heading);
font-weight: 700;
}

a{
 text-decoration: none;
 color:var(--color-body);
 transition: all 0.4s ease;
}
a:hover{
 color:var(--color-brand);
}

img{
 width: 100%;
}



/* Helper classes */

.full-height{
min-height: 100vh;
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
/* padding-top: 80px;
padding-bottom: 80px; */
border-bottom: 2px solid rgba(255,255,255,0.1);
}

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

.btn{
    padding: 12px 28px; 
    font-weight: 700; 
  }
  
  .btn-brand{
  background-color: var(--color-brand);
  border-color: var(--color-brand);
  
  }
  
  .btn-brand:hover,.btn-brand:focus{
      background-color: var(--color-brand2);
      color: var(--color-base);
      border-color: var(--color-brand2);
  
  
  }

  .link-custom{
   font-weight: 700;
   position: relative;
  }

  .link-custom::after{
   content: "";
   width: 0%;
   height: 2px;
   background-color: var(--color-brand);
   position: absolute;
   left:0;
   top:110%;
   transition: all 0.4s;

  }

  .link-custom:hover::after{
   width: 100%;
  }
  .bg-base{
  background-color: var(--color-base);
  }

  .shadow-effect{
   transition: all 0.5s;
  }

  .shadow-effect:hover{
    box-shadow:  -6px 6px 0 0 var(--color-brand);
  }
  .iconbox{
    width:60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    background-color: var(--color-brand);
    color:var(--color-base);

  }

  .edu-title:hover{
  color:var(--color-brand);
  }

  .exp-title:hover{
  color:#DC3545;
  }

  .skill-back{
    background: linear-gradient(rgba(3,63,71,0.9),rgba(3,63,71,0.753)),url(../images/5484597.jpg);
    background-size:cover ;
    background-position: center;
  }
  


  #home,#services,#work,#about,#skills,#contact{
  overflow: hidden;
  }


/* navbar */

.nav-link{
color:#fff;
font-weight: 700;
text-transform: uppercase;

}

.nav-link:hover{
    color:var(--color-brand);
}

.navbar .nav-link.active{
    color: var(--color-brand2);
}


.navbar{
background-color: var(--color-base);

}

/* card */

.card-custom .card-custom-image{
  overflow: hidden;
}

.card-custom .card-custom-image img{
  transition: all 0.4s ease;
}

.card-custom:hover .card-custom-image img{
transform: scale(1.1);
}





@media (min-width:992px){
    .navbar{
      min-height: 100vh;
      width:var(--sidebar-width);
      background: linear-gradient(rgba(3,63,71,0.9),rgba(3,63,71,0.753)),url(../images/sidebar.avif);
      background-size:cover ;
      background-position: center;

    }
    nav img{
     border: 4px solid var(--color-brand);
    }
    #content-wrapper{
     padding-left: var(--sidebar-width);

    }

}