/* .row > * {

  margin-left: 0 !important;

  margin-right: 0 !important;

  padding-left: 0 !important;

  padding-right: 0 !important;

} */



:root {

	--yellow: #FF9C2E;

	--yellow-hover: #dd821d;

	--blue: #08317A;

	--grey: #808080;

	--pink: #CE0E97;

}



.gallery_product {

  margin-bottom: 30px;

}



.category-buttons {

  text-align: center;

  margin: 0 0 60px 0;

}

.projectfilter {

  background: #f0f1f1;

  position: absolute;

  inset: 0;

  align-items: center;

  height: 70vh;

}

.projects{

  height: 70vh;

}



.project-section {

  height: 70vh;

  overflow-y: auto;

}



/* width */

.project-section::-webkit-scrollbar {

  width: 3px;

}



/* Track */

.project-section::-webkit-scrollbar-track {

  background: #f1f1f1;

}



/* Handle */

.project-section::-webkit-scrollbar-thumb {

  background:var(--yellow)

}



/* Handle on hover */

.project-section::-webkit-scrollbar-thumb:hover {

  background: #555;

}

.projectfilter a {

  font-family: "Poppins-Regular";

  color: #808184;

  border-bottom: 1px solid #ff9c2e;

  text-decoration: none;

}



.projectfilter a.active {

  /*   color: var(--blue); */

   color: var(--blue);

  }





.projectfilter a:last-child {

  border-bottom: 0;

  

}

.projectfilter a h4 {

}

.category-buttons a.active {

  color: var(--blue);

  font-family: "Poppins-Black";

}

.grid {

  margin-top: 40px;

  width: 100%;

  max-width: 960px;

  margin: 0 auto;

  position: relative;

  -webkit-transition: all 750ms cubic-bezier(1, 0, 0, 1);

  transition: all 750ms cubic-bezier(1, 0, 0, 1);

}

.grid .animating {

  -webkit-transition: all 750ms cubic-bezier(0.175, 0.885, 0.32, 1.1);

  transition: all 750ms cubic-bezier(0.175, 0.885, 0.32, 1.1);

}

.grid .setScale {

  -webkit-transform: scale(1);

  -ms-transform: scale(1);

  transform: scale(1);

}

.grid .show {

  -webkit-transform: scale(1);

  -ms-transform: scale(1);

  transform: scale(1);

  opacity: 1;

}

.card {

  background: #fff;

  display: block;

  text-decoration: none;

  border: 0;

  color: #2b2b2b;

  /* width: 32%; */

  /* box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 5px rgba(0, 0, 0, 0.15); */

  transform-origin: center center;

  /* -webkit-transform: translateZ(0);

  -moz-transform: translateZ(0);

  -ms-transform: translateZ(0);

  -o-transform: translateZ(0);

  transform: translateZ(0);

  -webkit-transform: scale(0);

  -ms-transform: scale(0);

  transform: scale(0);

  opacity: 0; */

  /* overflow: hidden; */

  border-radius: 10px;

}

/* .card{

  

  display:none;

} */

.card img {

  display: block;

  width: 100%;

}

.card .title {

  padding: 0;

  color: #2b2b2b;

}

.guide {

  width: 32%;

  position: absolute;

  left: 0;

  top: 0;

  z-index: -1000;

}

.carousel-box {

  position: absolute;

  z-index: 1;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  transition: opacity 0.8s cubic-bezier(0, 0.02, 0, 1);

  opacity: var(--opacity);

  /* font-family: "Orelo-sw-db", serif; */

  border-radius: 10px;

  overflow: hidden;

}



.error{

  color: red;

}

#grid .carousel-box:before {

  content: "";

  position: absolute;

  z-index: 1;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(

    to bottom,

    rgba(0, 0, 0, 0.3),

    rgba(0, 0, 0, 0) 30%,

    rgba(0, 0, 0, 0) 50%,

    rgba(0, 0, 0, 0.5)

  );

}

#grid .carousel_content {

  position: absolute;

  inset: 0;

}

#grid .carousel_content .num {

  z-index: 1;

  top: 10px;

  left: 20px;

  transition: opacity 0.8s cubic-bezier(0, 0.02, 0, 1);

  font-size: clamp(20px, 10vw, 60px);

  font-family: "Poppins-Bold";

  color: var(--yellow);

}



#grid .carousel_content .title {

  /* position: absolute; */

  z-index: 1;

  color: #fff;

  bottom: 20px;

  left: 20px;

  transition: opacity 0.8s cubic-bezier(0, 0.02, 0, 1);

  font-size: 25px;

  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);

  font-family: "Poppins-Bold";

  line-height: 1;

}



#grid .projectlink {

  color: #fff;

  font-family: "Poppins-Bold";

  position: absolute;

  bottom: 12%;

  z-index: 9;

  outline: 0;

  font-size: 20px;

  text-decoration: none;

  border: 0;

  padding: 0 0 3px 0;

  border-bottom: 2px solid var(--yellow);

}



#grid .carousel-item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  pointer-events: none;

}

.dropdown-toggle {

  white-space: nowrap;

  width: 100%;

  background: var(--blue) !important;

}

@media only screen and (max-width: 1600px) {

  .projectfilter,   .project-section, .projects {

    height: 85vh;

  }

  .projectfilter a h5{

    font-size: 15px;

    padding: 7% 0 !important;

  }



}

@media only screen and (max-width: 1500px) {

  #grid .carousel_content .num {

    font-size: 38px;

}



#grid .carousel_content .title {

  font-size: 22px;

  padding: 0;

}

#grid .carousel_content {

  padding: 10px !important;

}

}

@media only screen and (max-width: 767px) {

  .category-buttons {

    margin: 0 0 30px 0;

    overflow: hidden;

  }

  /* #grid .carousel_content {

    padding: 30px !important;

} */

  .category-buttons a {

    display: inline-block;

    border-bottom: 1px solid #ff9c2e;

    padding: 8px 10px !important;

    margin: 0 1% !important;

    color: var(--blue)

  }

  .category-buttons a.active {

    color: var(--blue);

    background: transparent;

  }

  .category-buttons a:nth-child(even) {

    margin-right: 0;

  }

  .category-buttons a:nth-child(odd) {

    margin-left: 0;

  }

  .project-section {

    height: auto;

    overflow-y: hidden;

  }

  .projectfilter,   .project-section, .projects {

    height: auto;

  }

  #grid .carousel_content .num {

    font-size: 28px;

}

#grid .carousel_content .title {

  font-size: 20px;

  padding: 0;

}

#grid .projectlink {

   font-size: 15px;

}

}

@media (min-width: 611px) {

  .category-buttons a:first-child {

    margin-left: 0;

  }

  .category-buttons a:last-child {

    margin-right: 0;

  }

}



@media (max-width: 960px) {

  .grid {

    width: 700px;

  }

}

@media (max-width: 720px) {

  .grid {

    width: 100%;

  }

  .grid {

    width: 100%;

    height: 70vh !important;

    overflow-y: auto;

  }

}



@media (max-width: 700px) {

  .card {

    width: 49.25%;

  }

}

@media (max-width: 480px) {

  /* .card {

    width: 100%;

  } */

}



@media (max-width: 700px) {

  .guide {

    width: 49.25%;

  }

}

@media (max-width: 480px) {

  .guide {

    width: 100%;

  }

}