* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;




}

.container {
   min-height: 100vh;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;



   }


/* NAVBAR SECTION*/



.custom-nav-item {
letter-spacing: 2px;
font-weight: lighter;



}

.navbar-custom {
    background-color: #0f0f0f;
    padding: 32px;

    }


.custom-toggler.navbar-toggler  {
border-color:  #66b266;



}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,250,250, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");





}

.navbar-custom .navbar-brand {
  font-family: 'Unica One', cursive;
  font-size: 30px;
 background: linear-gradient(to right, #008000, #329932 , #66b266);
 background-size: cover;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;



  }




.custom-nav-item a {
font-family: 'Unica One', cursive;
 color: white;
 padding: 28px;
 font-weight: bold;
 font-size: 22px;



  }


.custom-nav-item>a:hover {

font-weight: bold;
font-size: 24px;
color: #66b266;


}


/* END NAVBAR*/





/* PORTFOLIO SECTION*/



#portfolio {
display: flex;
justify-content: center;
align-items: center;
padding-top: 45px;
padding-top: -100px;
background-color: #b2d8b2;


}

#portfolio h1  {
font-size: 40px;
color: white;
letter-spacing: 6px;
margin-bottom: 50px;


}



#portfolio h1 span {
  background-color: #0f0f0f;
  font-family: 'Unica One', cursive;

}


#portfolio .wrapper{
    width: 95%;
    padding: 30px 0;
    text-align: center;
}



#portfolio .content {
  padding: 10%;
  
}


#portfolio .content h2 {
font-family: 'Unica One', cursive;
color: #66b266;
  font-size: 35px;
  margin-top: 25px;
  text-align: center;
  font-weight: bold;
  

}

a:link {
  text-decoration: none;
}



#portfolio .content p {
  font-size: 20px;
  font-family: 'Unica One', cursive;





}


#portfolio .portfolio-content {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-column-gap: 15px;
}


#portfolio .portfolio-content .box{
    position: relative;
    cursor: crosshair;
    margin-bottom: 15px;
    box-shadow: 15px 15px 40px rgba(0, 0, 0, 0.30);
    height: 250px;
    overflow: hidden;
}


#portfolio .portfolio-content .box::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    transition: all 0.3s ease-in-out;
}


#portfolio .portfolio-content .box:hover:before{
    top: 0;
    right: calc(100% - 5px);
    z-index: 10;
}


#portfolio .portfolio-content .box img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}


#portfolio .portfolio-content .box .img-text {
	position: absolute;
    display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(255,255,255,0.9);
	width: 100%;
	height: 100%;
	top: 0;
	right: 100%;
	transition: all 0.5s ease-in-out;
}

#portfolio .portfolio-content .box:hover .img-text{
    top: 0;
    right: 0;
}



/* END PORTFOLIO SECTION*/



/* FOOTER section */


#footer {
  display: flex;
  justify-content:center;
  align-items: center;
  background-color: #0f0f0f;
  height: 100px;




  }


#footer a {
  font-family: 'Unica One', cursive;
  color: white;
  font-weight: bold;
  text-decoration: none;
  font-size: 22px;
  letter-spacing: 5PX;

}

  
  #footer a span {
    color: #66b266;

 }

   #footer a:hover {
    color: #66b266;
    font-size: 24px;


 }


/* END footer section */







/* MEDIA QUERY MOBILE Styles */
@media only screen and (max-width: 660px) {

#portfolio h1  {
  padding-top: 50px;

}



#portfolio  {
  padding-bottom: 50px;

 }




 #footer a {
  font-family: 'Unica One', cursive;
  color: white;
  font-weight: bold;
  text-decoration: none;
  font-size: 18px;
  

}

  


   #footer a:hover {
    color: #66b266;
    


 }


}




/* MEDIA QUERY TABLET Styles  */
    @media only screen and (min-width: 661px) and (max-width: 960px) {

    #portfolio h1  {
      padding-top: 50px;

    }



    #portfolio  {
      padding-bottom: 50px;

    }


    #footer a {
    font-size: 23px;


    }

     }