@font-face {
    font-family: "gadugi";
    src: url('../fonts/gadugi.ttf');
}
@font-face {
    font-family: "gadugib";
    src: url('../fonts/gadugib.ttf');
}
body {
    font-family: "gadugi" !important;
    font-size: 14px;
    color: #000 !important;
    letter-spacing: 1px;
    background-color: transparent;
    line-height: 1.5;
    font-weight: 400;
}
a:hover {
    text-decoration: none !important;
}
button:focus{
    outline: 0;
}
img{
  width: 100%;
}
.content-container {
    overflow: hidden;
}
.portfolio-title {
    text-align: center;
    margin: 100px 0;
    position: relative;
}
.portfolio-title::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 4px;
    background: #88b4bf;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 0;
}
.portfolio-title-border {
    display: inline-block;
    position: relative;
}
.portfolio-title-border::before, .portfolio-title-border::after {
    content: "";
    position: absolute;
    width: 23.382%;
    height: 4px;
    background: #88b4bf;
    left: 23%;
    bottom: 0;
}
.portfolio-title-border::after {
    left: auto;
    right: 23%;
}
.portfolio-title h3 {
    font-size: 100px;
    font-family: "gadugib";
}
.tab-gallery {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
}
@media (min-width: 1200px) {
    .tab-gallery .container {
        max-width: 1200px;
    }
}
@media (max-width: 1440px){
    .portfolio-title h3{
        font-size: 70px;
    }
}
@media (max-width: 1199px){
    .portfolio-title{
      margin: 50px 0;
    }
  }
  @media (max-width: 991px){
    .portfolio-title h3{
      font-size: 60px;
    }
    .portfolio-title {
      margin: 40px 0 30px;
    }
  }
  @media (max-width: 767px){
    .portfolio-title {
      margin: 30px 0 20px;
    }
    .portfolio-title h3 {
      font-size: 40px;
    }
    .portfolio-title-border::before{
      left: 20%;
    }
    .portfolio-title-border::after{
      right: 20%;
    }
}
/* ------------------------------ */
.gallery-box{
  margin: 0 7%;
}
.gallery-tab{
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  text-align: center;
  margin-bottom: 50px;
  padding: 0;
}
.filter-button{
  font-size: 26px;
  text-align: center;
  color: #8a8a8a;
  padding-bottom: 20px;
  position: relative;
  cursor: pointer;
}

.filter-button.active,
.filter-button:hover{
  color: #1d1d1d;
  font-weight: bold;
}
.filter-button:before{
  content: "";
  background: #1d1d1d;
  width: 0px;
  height: 5px;
  border-radius: 10px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: block;
  position: absolute;
  transition: all .3s ease;
  -moz-transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
}
.filter-button.active:before,
.filter-button:hover:before{
  width: 50%;
}
.gallery-tab li + li{
  margin-left: 50px;
}
.gallery-content-box .gallery-content.firstchild{
  background-color: #ebf2ff;
}
.gallery-content-box .gallery-content.secondchild{
  background-color: #fffeeb;
}
.gallery-content-box .gallery-content.thirdchild{
  background-color: #ffebef;
}
.gallery-content-box .gallery-content.fourthchild{
  background-color: #e5fffe;
}
.gallery-content-box .gallery-content.fifthchild{
  background-color: #e3f7ff;
}
.gallery-content-box .gallery-content.sixthchild{
  background-color: #fff3eb;
}
.gallery-content-box .gallery-content.seventhchild{
  background-color: #ffebeb;
}
.gallery-content-box .gallery-content.eighthchild{
  background-color: #ebebeb;
}
.gallery-content-box .gallery-content.firstchild .pro-description{
  color: #a4b5d6;
}
.gallery-content-box .gallery-content.secondchild .pro-description{
  color: #c7c491;
}
.gallery-content-box .gallery-content.thirdchild .pro-description{
  color: #ce98a7;
}
.gallery-content-box .gallery-content.fourthchild .pro-description{
  color: #68bfbc;
}
.gallery-content-box .gallery-content.fifthchild .pro-description{
  color: #6dadc7;
}
.gallery-content-box .gallery-content.sixthchild .pro-description{
  color: #d29064;
}
.gallery-content-box .gallery-content.seventhchild .pro-description{
  color: #d78b8b;
}
.gallery-content-box .gallery-content.eighthchild .pro-description{
  color: #9a9a9a;
}
.gallery-content-box .gallery-content.firstchild img{
  box-shadow: 0 0 25px 10px rgb(57 62 130 / 6%);
}
.gallery-content-box .gallery-content.secondchild img{
  box-shadow: 0 0 25px 10px rgb(130 121 57 / 6%);
}
.gallery-content-box .gallery-content.thirdchild img{
  box-shadow: 0 0 25px 10px rgb(184 31 71 / 6%);
}
.gallery-content-box .gallery-content.fourthchild img{
  box-shadow: 0 0 25px 10px rgb(54 156 152 / 6%);
}
.gallery-content-box .gallery-content.fifthchild img{
  box-shadow: 0 0 25px 10px rgb(37 119 151 / 6%);
}
.gallery-content-box .gallery-content.sixthchild img{
  box-shadow: 0 0 25px 10px rgb(158 86 38 / 6%);
}
.gallery-content-box .gallery-content.seventhchild img{
  box-shadow: 0 0 25px 10px rgb(134 34 34 / 6%);
}
.gallery-content-box .gallery-content.eighthchild img{
  box-shadow: 0 0 25px 10px rgb(112 112 112 / 6%);
}
.gallery_product{
  margin-bottom: 50px;
}
.gallery-content{
  padding: 30px;

  border-radius: 30px;
  box-shadow: 0 0 20px 5px rgb(0 0 0 / 6%);
}
.gallery-content img{
  border-radius: 30px;
}
.pro-title{
  font-weight: bold;
  font-size: 28px;
  margin: 25px 0 0px;
  color: #161616;
}
.pro-description{
  font-size: 26px;
}
#loadMore {
  text-align: center;
  margin: 40px auto 90px;
  display: none;
}
#loadMore span{
  text-align: center;
  padding: 10px 20px;
  display: none;
  border-radius: 25px;
  color: #000;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  box-shadow: 0 0 8px 3px rgb(24 95 113 / 10%);
  background-image: linear-gradient(rgb(224,248,255) 0%, rgb(190,242,255) 100%);
}
@media (min-width: 1441px){
  .gallery_product{
    padding: 0 30px;
  }
}
@media (max-width: 1440px){
  .gallery-tab li + li {
    margin-left: 30px;
  }
}
@media (max-width: 1199px){
  .filter-button{
    font-size: 22px;
  }
}
@media (max-width: 991px){
  .gallery-box {
    margin: 0 30px;
  }
  .gallery-tab {
    margin-bottom: 25px;
  }
  .gallery-tab li + li {
    margin-left: 10px;
  }
  .filter-button {
    font-size: 18px;
    padding-bottom: 10px;
  }
  .gallery_product {
    margin-bottom: 30px;
  }
  .gallery-content {
    padding: 15px 15px 20px;
    border-radius: 20px;
  }
  .gallery-content img {
    border-radius: 20px;
  }
  .pro-title {
    font-size: 24px;
    margin: 15px 0 0px;
  }
  .pro-description {
    font-size: 15px;
  }
  #loadMore {
    margin: 0px auto 40px;
  }
}
@media (min-width:576px){
  .gallery-tab{
    justify-content: center;
  }
}
@media (max-width: 575px){
  .gallery-box {
    margin: 0px 15px;
  }
  .gallery-tab{
    display: flex;
    flex-wrap: unset;
    overflow: hidden;
    overflow-x: auto;
  }
  .gallery-tab li {
    min-width: 135px;
  }
  .pro-title {
    font-size: 20px;
    margin: 15px 0 0px;
  }
}