/* ! All Custom Styling  */

/* === PRELOADER PAGE === */

.custom-percentage-first {
  color: var(--white-color);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 400;
}

.custom-percentage-last {
  color: var(--white-color);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 600;
}

/* === PRELOADER PAGE === */



.light-content .custom-button-wrap {
  color: var(--secondary-color);
}

.custom-button-text {
  font-family: "Hubot Sans", sans-serif;
  font-style: normal;
  font-weight: 500;
}

.light-content .custom-hero-subtitle {
  color: var(--secondary-color);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 600;
}

.light-content .custom-secondary-font {
  color: var(--secondary-color);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 400;
}

.custom-pinned-lists-wrapper {
  padding-bottom: 150px;
}

.light-content .light-section .custom-pinned-lists li {
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: calc(1rem + 4.3vw);
  color: var(--primary-color);
}

.light-content .light-section .custom-pinned-lists li {
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: calc(1rem + 4.3vw);
  color: var(--primary-color);
}

.light-content .light-section .custom-pinned-lists li.custom-secondary-font {
  color: var(--primary-color);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 700;
}

.light-content .light-section .custom-bigger-secondary-font {
  color: var(--secondary-color);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 400;
}

.custom-bigger-secondary-font {
  color: var(--darkblue-color);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 400;
}

.light-content .light-section .custom-bigger-secondary-font {
  color: var(--secondary-color);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 400;
}

.custom-copy-email {
  color: var(--primary-color) !important;
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 600;
}

.light-content .custom-slide-date {
  display: block;
  color: var(--darkblue-color) !important;
  position: absolute;
  top: 30px;
  left: 30px;
  padding: 10px 18px !important;
  background: var(--secondary-color) !important;
  border-radius: 5px;
  font-size: 14px !important;
  font-family: "Hubot Sans", sans-serif !important;
  font-style: normal;
  font-weight: 600 !important;
}

.light-content .custom-no-margins {
  color: var(--darkblue-color);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 400;
}

.light-content .custom-no-margins-p {
  color: var(--darkblue-color);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 400;
}

.custom-footer-background {
  margin-top: 150px;
  background-image: url("../images/footer-background.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.custom-footer-background-contact {
  background-color: var(--white-color);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.custom-button-wrap {
  color: var(--darkblue-color);
}

.custom-footer-middle .copyright {
  color: var(--darkblue-color);
}

.custom-footer-middle a {
  color: var(--darkblue-color);
}

.light-content .custom-button-wrap {
  color: var(--secondary-color);
}

.light-content .custom-footer-middle a {
  color: var(--darkblue-color);
}

.light-content .custom-socials-wrap {
  color: var(--darkblue-color);
}

.light-content .custom-socials-wrap .socials li a {
  color: var(--darkblue-color);
}

.light-content .custom-button-wrap {
  color: var(--darkblue-color);
}

.light-content .custom-button-wrap-index {
  color: var(--secondary-color);
}

.custom-footer-logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-footer-logo {
  width: 90px;
  height: 90px;
  background-image: url("../images/footer-logo.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 20;
}

.classic-menu .flexnav li ul li {
  color: var(--darkblue-color);
}

.classic-menu .custom-flexnav li {
  color: var(--secondary-color);
  transition: color 0s ease-out 0.2s;
}

.classic-menu .custom-flexnav > li:not(:hover) a:not(.active) {
  color: var(--darkblue-color);
  transition: color 0s ease-out 0.2s;
}

.classic-menu .custom-flexnav li a span::after {
  color: var(--darkblue-color);
  filter: invert(0) !important;
  transition: color 0s ease-out 0.2s;
}

.classic-menu .custom-flexnav li > ul li {
  color: var(--darkblue-color);
  filter: invert(0);
}

.classic-menu .custom-flexnav > li:hover > a {
  color: var(--secondary-color) !important;
}

.light-content .classic-menu .custom-flexnav > li:hover > a {
  color: var(--secondary-color) !important;
}

.classic-menu .custom-flexnav > li > a.active {
  color: var(--secondary-color) !important;
}

.light-content .classic-menu .custom-flexnav > li > a.active {
  color: var(--secondary-color) !important;
}

.light-content .classic-menu .custom-flexnav li {
  color: var(--secondary-color);
  transition: color 0s ease-out 0.2s;
}

.light-content .classic-menu .custom-flexnav > li:not(:hover) a:not(.active) {
  color: var(--white-color);
  transition: color 0s ease-out 0.2s;
}

.light-content .classic-menu .custom-flexnav li a span::after {
  color: var(--darkblue-color);
  filter: invert(0) !important;
  transition: color 0s ease-out 0.2s;
}

.light-content .classic-menu .custom-flexnav > li:not(:hover) a:not(.active) {
  color: var(--white-color);
  transition: color 0s ease-out 0.2s;
}

.light-content .classic-menu .flexnav li ul li {
  color: var(--darkblue-color);
}

.custom-button-icon-link {
  color: var(--darkblue-color);
}

.light-content .custom-button-icon-link {
  color: var(--white-color);
}

.custom-button-icon-link:hover {
  background-color: var(--secondary-color);
  color: var(--darkblue-color);
  border-color: transparent;
  box-shadow: none;
}

.custom-button-icon-link .button-icon {
  color: var(--white-color);
  background-color: var(--primary-color);
}

.light-content .custom-button-icon-link .button-icon {
  color: var(--white-color);
  background-color: var(--primary-color);
}

.custom-button-icon-link:hover .button-text span {
  filter: invert(0);
}

.custom-box-icon {
  margin-top: 0px;
  margin-bottom: 14px !important;
}

.custom-box-icon img {
  position: relative;
  margin-bottom: 0px;
  width: 32px;
  height: 32px;
}

.custom-snap-slider-captions-wrapper {
  width: 100%;
  height: 230px;
  display: block;
  position: relative;
  overflow: hidden;
  /* mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 15%,
    rgba(0, 0, 0, 1) 20%,
    rgba(0, 0, 0, 1) 80%,
    rgba(0, 0, 0, 0) 85%,
    rgba(0, 0, 0, 0) 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 15%,
    rgba(0, 0, 0, 1) 20%,
    rgba(0, 0, 0, 1) 80%,
    rgba(0, 0, 0, 0) 85%,
    rgba(0, 0, 0, 0) 100%
  ); */
}

.custom-snap-slide-caption {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  text-align: center;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 20px;
  opacity: 1;
  -webkit-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
}


.snap-slider-captions .custom-slide-title {
  font-size: 100px;
  line-height: 1.2;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 600;
  padding: 8px 0;
  text-wrap: balance;
  text-align: center;
}

.snap-slider-captions .custom-slide-subtitle {
  font-size: 24px;
  line-height: 1.2;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 400;
  text-wrap: balance;
  text-align: center;
}

.custom-footer-background .custom-link p {
  color: var(--white-color);
}

.custom-footer-background .custom-link h6 {
  color: var(--white-color);
}

.light-content .custom-hero-title {
  color: var(--secondary-color);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 600;
}

/* === PORTFOLIOS PAGE === */

.light-content .custom-hero-title-portfolios {
  color: var(--secondary-color);
  font-family: "Hubot Sans", sans-serif;
  font-style: normal;
  font-weight: 600;
}

.showcase-gallery .slide-caption .custom-slide-title-showcase {
  color: var(--secondary-color) !important;
  font-size: 28px;
  font-family: "Hubot Sans", sans-serif;
  font-style: normal;
  font-weight: 600;
}

.showcase-gallery .slide-caption .custom-slide-cat-showcase {
  font-size: 20px;
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 400;
}

.showcase-gallery .clapat-sync-slide.active .custom-slide-title-showcase {
  font-family: "Hubot Sans", sans-serif;
  font-style: normal;
  font-weight: 400;
}

.custom-grid-option-portfolios,
.custom-list-option-portfolios {
  color: var(--darkblue-color);
  filter: invert(0);
  -webkit-filter: invert(0);
}

.custom-current-option-portfolios {
  background-color: var(--secondary-color);
  filter: invert(0);
}

/* === PORTFOLIOS PAGE === */

/* === PORTFOLIO PAGE === */

.custom-hero-title-portfolio {
  color: var(--darkblue-color);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 600;
}

.custom-hero-subtitle-portfolio {
  color: var(--darkblue-color);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 400;
}

.custom-has-opacity-portfolio {
  color: var(--darkblue-color);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
}

.custom-no-margins-portfolio {
  color: var(--darkblue-color);
  font-family: "Hubot Sans", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
}

.custom-portfolio-detail-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.custom-portfolio-list {
   font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
}

.custom-portofolio-fact-sheet-image {
  width: 100%;
  height: 80vh;
  object-fit: cover;
  border-radius: 12px;
}

.custom-portfolio-fact-sheet-wrapper {
  margin-top: 20px;
}

.custom-portofolio-fact-sheet-key {
  color: var(--darkblue-color);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  margin-bottom: 10px;
}

.custom-portofolio-fact-sheet-value {
  color: var(--darkblue-color);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  margin-bottom: 10px;
}

/* === PORTFOLIO PAGE === */

/* === PRODUCT PAGE === */

.custom-hero-title-product {
  color: var(--darkblue-color);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 600;
}

.custom-hero-subtitle-product {
  color: var(--darkblue-color);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 400;
}

.custom-has-opacity-bottom-product {
  color: var(--darkblue-color);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 22px;
}

.custom-has-opacity-top-product {
  color: var(--darkblue-color);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 22px;
}

/* === PRODUCT PAGE === */

/* === PRODUCTS PAGE === */

.external-titles .custom-slide-title-products.change-header {
  color: var(--white-color);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 600;
}

.custom-external-categories-products .slide-cat {
  position: absolute;
  opacity: 1;
  display: block;
  color: var(--white-color);
  overflow: visible;
  margin: 0;
  font-size: 24px;
  line-height: 30px;
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 400;
}

.external-categories .custom-slide-cat-products.change-header {
  color: var(--white-color);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 400;
}

/* === PRODUCTS PAGE === */

/* === CONTACT PAGE === */

.custom-hero-title-contact {
  color: var(--primary-color);
  font-family: "Hubot Sans", sans-serif;
  font-style: normal;
  font-weight: 600;
}

.custom-hero-subtitle-contact {
  color: var(--primary-color);
  font-family: "Hubot Sans", sans-serif;
  font-style: normal;
  font-weight: 600;
}

.custom-bigger-contact {
  color: var(--darkblue-color);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 400;
}

.custom-no-margins {
  color: var(--darkblue-color);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 400;
}

.custom-no-margins-p {
  color: var(--darkblue-color);
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 400;
}

.light-content a.custom-link {
  color: var(--darkblue-color);
}

/* === CONTACT PAGE === */


@media only screen and (max-width: 479px) {
  .custom-portfolio-detail-wrapper {
    display: block;
  }
}