@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Handlee&display=swap');




:root {
	--font-default: 'Manrope', sans-serif;
	--font-secondary: 'Handlee', cursive;
	--fontawesome: "Font Awesome 5 Pro";
    --bs-font-sans-serif: "Plus Jakarta Sans", sans-serif;
}

.fst-1{
    font-family: var(--font-default);
}
.fst-2{
    font-family: var(--font-secondary);
}
.fst-3{
    font-family: var(--fontawesome);
}
.fst-4{
    font-family: var(--bs-font-sans-serif);
}


.bg-f{

    background-color: #f4ba4e !important;
}

.navlinks{

  }
 
  .navlinks li a{
    position: relative;
    color: #333;
    font-size: 20px;
    font-weight: 500;
    padding: 6px 0;
    text-decoration: none;
  }
  .navlinks li a:before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: #f7c35f;
    border-radius: 12px;
    transition: all 0.4s ease;
  }
  .navlinks li a:hover:before{
    width: 100%;
  }
  .navlinks li.center a:before{
    left: 50%;
    transform: translateX(-50%);
  }
  .navlinks li.upward a:before{
    width: 100%;
    bottom: -5px;
    opacity: 0;
  }
  .navlinks li.upward a:hover:before{
    bottom: 0px;
    opacity: 1;
  }
  .navlinks li.forward a:before{
    width: 100%;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s ease;
  }
  .navlinks li.forward a:hover:before{
    transform: scaleX(1);
    transform-origin: left;
  }
  
  .text-hover{

  }

  .text-hover:hover{
    cursor: pointer;
    color: #f7c35f !important;
  }

  .text-hover-black{
    
  }

  .text-hover-black:hover{
    cursor: pointer;
    color: #000000 !important;
  }