:root{
    --primary-color: #373737;
    --secondary-color: #F5F1EC;
    --hover-color: #4c4b4b;
  }

  @font-face {
    font-family: "Playfair Display";
    src: url("/wp-content/themes/Portfolio/library/fonts/Playfair_Display/static/PlayfairDisplay-Regular.ttf");
    }

    @font-face{
      font-family: "Playfair Display Italic";
      src: url("/wp-content/themes/Portfolio/library/fonts/Playfair_Display/static/PlayfairDisplay-SemiBoldItalic.ttf");
    }

    @font-face {
      font-family: "Fira Sans";
      src: url("/wp-content/themes/Portfolio/library/fonts/Fira_Sans_Condensed/FiraSansCondensed-Regular.ttf");
      }

      @font-face {
        font-family: "Fira Sans Light";
        src: url("/wp-content/themes/Portfolio/library/fonts/Fira_Sans_Condensed/FiraSansCondensed-Light.ttf");
        }

  .primary-color {
    color: var(--primary-color);
  }

  .secondary-color {
    color: var(--secondary-color);
  }

  .bg-color-white {
    background-color: #fff;
  }

  .bg-color-primary {
    background-color: var(--primary-color);
  }

  .bg-color-secondary {
    background-color: var(--secondary-color);
  }

  .font-playfair {
    font-family: "Playfair Display";
  }

  .distinction-light {
    font-family: "Fira Sans Light";
  }
  
  .distinction {
    font-family: "Playfair Display Italic";
  }

  .btn-primary{
    background: var(--primary-color);
    width: 12.625rem;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--secondary-color);
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: 400;
    gap: 0.625rem;
  }

  .btn-primary:hover {
    background-color: var(--hover-color);
    color: var(--secondary-color);
    transition-duration: .6s;
  }

  .btn-secondary{
    background: var(--secondary-color);
    width: 12.625rem;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--primary-color);
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: 400;
    gap: 0.625rem;
  }

  .btn-secondary:hover {
    background-color: #fff;
    color: var(--primary-color);
    transition-duration: .6s;
  }


  .form-contact input[type="submit"]{
    background: var(--primary-color);
    padding: 0.75rem 1.5rem;
    color: var(--secondary-color) !important;
    font-family: "Fira Sans";
    text-transform: uppercase;
  }

  .top-nav li {
    position: relative;
  }

  .top-nav li a {
    color: var(--primary-color) !important;
  }

 
  .top-nav li:hover a,
  .top-nav .current_page_item a {
    text-decoration: none !important;
    background-image: url("/wp-content/themes/Portfolio/library/images/curve-line.svg");
    background-repeat: no-repeat;
    background-position: bottom;
  }

   .offer-text:hover {
    background-image: url("/wp-content/themes/Portfolio/library/images/curved-line-light.svg");
    background-repeat: no-repeat;
    background-position: bottom;
  }

  @media screen and (min-width:1200px) {
  .header-contact {
    position: absolute;
bottom: 10%;
right: 10%;
  }
}

.wpcf7-form-control-wrap {
  display: flex;
  flex-direction: column-reverse;
}

.form-contact input[type="text"],
.form-contact input[type="email"],
.form-contact select,
.form-contact textarea {
  background: #FFF;
  max-width: 100%;
  border-radius: 0px;
}

.form-contact input[type="submit"] {
  margin: 0 auto;
  margin-top: 1.5rem;
}

.form-contact input[type="submit"]:hover{
  background-color: var(--hover-color);
}

.form-contact textarea {
  padding-top: 12px !important;
}

.form-contact select {
  color: #98a2af;
  border-radius: 0px;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: 5px;
  background-color: #fff;
}

.section-heading {
  font-size: 0.9125rem;
font-style: normal;
font-weight: 300;
line-height: normal;
text-transform: uppercase;
}

.max-width-1280 {
  max-width: 1280px;
}

.max-width-1200 {
  max-width: 1200px;
}

.portfolio {
  width: 300px;
  overflow: hidden;
  position: relative;
}

.portfolio .portfolio_overlay {
  cursor: url("/wp-content/themes/Portfolio/library/images/bt-show.svg"), auto;
}

.portfolio img {
  transition: transform .8s ease;
}

@media screen and (min-width: 1200px) {
.portfolio:hover img {
  transform: scale(1.3);
}
}

.portfolio:hover .portfolio_overlay {
  opacity: 0;
  transition-duration: .8s;
}

.portfolio_overlay {
  background-color: rgba(55, 55, 55, 0.6);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* HAMBURGER MENU */

.hamburger {
  cursor: pointer;
  width: 48px;
  height: 48px;
  transition: all 0.25s;
}

.hamburger__top-bun,
.hamburger__bottom-bun {
  content: '';
  position: absolute;
  width: 24px;
  height: 2px;
  background: #000;
  transform: rotate(0);
  transition: all 0.5s;
}

.hamburger:hover [class*="-bun"] {
  background: #333;
}

.hamburger__top-bun {
  transform: translateY(-5px);
}

.hamburger__bottom-bun {
  transform: translateY(3px);
}

.open {
  transform: rotate(90deg);
  transform: translateY(-1px);
}

.open .hamburger__top-bun {
  transform:
    rotate(45deg)
    translateY(0px);
}

.open .hamburger__bottom-bun {
  transform:
    rotate(-45deg)
    translateY(0px);
}

@media screen and (max-width:1023px) {
  .mobile-hidden {
    display: none;
  }
  .mobile-menu {
    background-color: #fff;
    width: 100%;
    text-align: center;
    -webkit-box-shadow: 4px 4px 20px 0px rgba(222, 222, 228, 1);
-moz-box-shadow: 4px 4px 20px 0px rgba(222, 222, 228, 1);
box-shadow: 4px 4px 20px 0px rgba(222, 222, 228, 1);
  }
  .mobile-center {
    margin: 0 auto;
  }
}

.contact_form input[type="text"],
.contact_form input[type="email"],
.contact_form select,
.contact_form textarea {
border: 1px solid var(--hover-color);
}


.first-inf .wpcf7-not-valid-tip {
  position: absolute;
  top: -50%;
}