/*
Theme Name: Pembe
Theme URI: http://wgl-demo.net/pembe/
Author: WebGeniusLab
Author URI: http://webgeniuslab.net/
Description: WebGeniusLab team presents absolutely fresh and powerful WordPress theme. It combines new technologies and functional design that helps to showcase your content in better way. This WordPress theme is developed with attention to details, so you can create effective presentation of a website easily. Enjoy building web pages with our product!
Version: 1.0.3
Requires at least: 5.7
Requires PHP: 7.2
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: pembe
*/

/* Portfolio Detail Page CSS */
@import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap");
@import url("https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css");

.portfolio-template-default #main {
  padding: 0;
  background-color: #f9f9f9;
}
.portfolio-template-default .wgl-theme-header {
  position: absolute;
  z-index: 99;
  width: 100%;
  left: 0;
  top: 0;
}
.portfolio-template-default .portfolio-container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 30px;
  padding-right: 30px;
}
.portfolio-template-default h2 {
  color: #21293d;
  font-family: "Tenor Sans", Sans-serif;
  font-size: 48px;
  line-height: 1.25em;
  letter-spacing: -0.5px;
  text-transform: uppercase;
}
.portfolio-template-default h3 {
  color: #21293d;
  font-family: "Tenor Sans", Sans-serif;
  font-size: 32px;
  line-height: 1.25em;
  letter-spacing: -0.5px;
  text-transform: uppercase;
}
.portfolio-template-default h4 {
  color: #21293d;
  font-family: "Tenor Sans", Sans-serif;
  font-size: 24px;
  line-height: 1.25em;
  letter-spacing: -0.5px;
  text-transform: uppercase;
}

/* Hero */
.portfolio-template-default .portfolio-featured-hero {
  position: relative;
  height: 550px;
  padding-top: 0;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 100px;
}
.portfolio-template-default .portfolio-featured-hero::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.45);
  width: 100%;
  height: 100%;
  z-index: 0;
}
.portfolio-template-default .portfolio-hero-overlay {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  padding: 20px;
  z-index: 1;
}
.portfolio-template-default .portfolio-featured-hero .portfolio-title {
  color: #ffffff;
  font-family: "Tenor Sans", Sans-serif;
  font-size: 70px;
  line-height: 1.25em;
  letter-spacing: -0.5px;
}
.portfolio-template-default .portfolio-featured-hero .portfolio-subtitle {
  color: #fff;
  font-size: 20px;
}

/* Content */
.portfolio-content {
  padding: 80px 0;
}
.portfolio-main {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(1, 1fr);
  gap: 30px;
  align-items: stretch;
}
.portfolio-left {
  grid-column: span 8 / span 8;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.portfolio-aside {
  grid-column: span 4 / span 4;
  padding-bottom: 40px;
}
/* CONTACT */
.portfolio-contact {
  background-color: var(--pembe-tertiary-color);
  padding: 30px;
  border-radius: 12px;
  /* background: #ffffff;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05); */
  border: 1px solid #f5dec1;
}
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}
.portfolio-contact .contact-item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}
.portfolio-contact .contact-item .icon img {
  width: 30px;
  min-width: 30px;
}
.portfolio-contact .contact-item .content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.portfolio-contact .contact-item strong {
  font-size: 14px;
  letter-spacing: 0.7px;
  font-weight: 500;
  text-transform: uppercase;
  color: #94a3b8;
  line-height: 1;
}
.portfolio-contact .contact-item.address-item .content{
  width: 180px;
}
.portfolio-contact .contact-item p {
  font-size: 16px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: #000;
}
.portfolio-contact .contact-item p a {
  text-decoration: none;
  color: #000;
}

/* Portfiolio */
.portfolio-links {
  background-color: var(--e-global-color-f5984e4);
  padding: 30px;
  display: flex;
  gap: 20px;
  flex-direction: column;
  border-radius: 16px;
  height: 100%;
}
.portfolio-links h4 {
  font-size: 18px;
  color: #fff;
}
.portfolio-links .links-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.portfolio-links .portfolio-btn {
  display: block;
  padding: 14px;
  text-align: center;
  background: var(--pembe-button-bg-idle);
  color: var(--pembe-button-color-idle);
  text-decoration: none;
  border-radius: 12px;
  transition: 0.5s ease;
  font-weight: 500;
  text-transform: uppercase;
  font-family: "Jost";
  font-size: 14px;
  letter-spacing: 0.8px;
  border: 1px solid var(--pembe-button-bg-idle);
}
.portfolio-links .portfolio-btn:hover {
  background: var(--pembe-button-bg-hover);
  color: var(--pembe-button-color-hover);
}
.portfolio-links .portfolio-btn.dark-btn {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}
.portfolio-links .portfolio-btn.light-btn {
  background-color: #2d3c53;
  border-color: #334155;
}

/* GALLERY */
.portfolio-gallery {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.gallery-grid .swiper {
  width: 100%;
  height: 100%;
}
.gallery-grid .swiper .swiper-wrapper {
  margin-bottom: 40px;
}
.gallery-grid .swiper-slide img {
  display: block;
  width: 100%;
  height: 230px;
  object-fit: cover;
  border-radius: 12px;
}
.gallery-grid .swiper-pagination-bullet {
  background: #c96f56;
}
.gallery-grid .swiper-button-prev,
.gallery-grid .swiper-button-next {
  height: 30px;
  width: 30px;
  margin-top: -30px;
}
.gallery-grid .swiper-button-prev svg,
.gallery-grid .swiper-button-next svg {
  display: none;
}
.gallery-grid .swiper-button-prev,
.gallery-grid .swiper-container-rtl .swiper-button-next {
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.7071 4.29289C16.0976 4.68342 16.0976 5.31658 15.7071 5.70711L9.41421 12L15.7071 18.2929C16.0976 18.6834 16.0976 19.3166 15.7071 19.7071C15.3166 20.0976 14.6834 20.0976 14.2929 19.7071L7.29289 12.7071C7.10536 12.5196 7 12.2652 7 12C7 11.7348 7.10536 11.4804 7.29289 11.2929L14.2929 4.29289C14.6834 3.90237 15.3166 3.90237 15.7071 4.29289Z" fill="%23c96f56"></path></g></svg>');
}
.gallery-grid .swiper-button-next,
.gallery-grid .swiper-container-rtl .swiper-button-prev {
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.29289 4.29289C8.68342 3.90237 9.31658 3.90237 9.70711 4.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L9.70711 19.7071C9.31658 20.0976 8.68342 20.0976 8.29289 19.7071C7.90237 19.3166 7.90237 18.6834 8.29289 18.2929L14.5858 12L8.29289 5.70711C7.90237 5.31658 7.90237 4.68342 8.29289 4.29289Z" fill="%23c96f56"></path></g></svg>');
}

/* AMENITIES */
.portfolio-amenities {
  margin-bottom: 60px;
}
.portfolio-amenities .amenities-inner {
  display: flex;
  flex-direction: column;
  gap: 50px;
  background-color: var(--pembe-tertiary-color);
  padding: 60px 30px;
  align-items: center;
  border-radius: 16px;
  border: 1px solid #f5dec1;
}
.amenities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(1, 1fr);
  column-gap: 40px;
  row-gap: 50px;
  width: 100%;
}
.amenities-grid .amenity-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}
.amenities-grid .amenity-item h5 {
  font-size: 15px;
  line-height: 1.2;
  font-weight: 500;
  font-family: "Jost";
  text-transform: uppercase;
  text-align: center;
}
.amenities-grid .amenity-item img {
  width: 40px;
}
/* MAP */
.portfolio-map {
  margin-bottom: 60px;
}
.portfolio-map .portfolio-map-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.portfolio-map iframe {
  width: 100%;
  border-radius: 16px;
}
/* CONSENT */
.portfolio-consent {
  padding: 0 0 80px;
}
.portfolio-consent .consent-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 40px;
  gap: 20px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
}
.portfolio-consent h2 {
  font-size: 36px;
  text-align: center;
  text-transform: unset;
  margin-bottom: 15px;
  color: #1a2433;
  margin: 0;
}
.portfolio-consent p {
  text-align: left;
  font-size: 17px;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.5;
  color: #475569;
}
.portfolio-consent p strong{
  font-weight: 700;
}
/* ACCORDIAN */
.portfolio-accordion {
  background: #f3f3f3;
  padding: 60px 0;
}

.accordion-wrapper {
  margin: 30px 0 0;
}

.accordion-item {
  border-bottom: 1px solid #ddd;
  padding: 20px 0;
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  line-height: 1;
}

.accordion-header h4 {
  font-size: 20px;
  letter-spacing: 1px;
  margin: 0;
  text-transform: inherit;
  font-family: "Jost";
}

.accordion-icon {
  font-size: 24px;
  transition: 0.3s ease;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s ease;
  padding-top: 0;
  font-size: 18px;
  line-height: 1.4;
  text-align: left;
}

.accordion-item.active .accordion-content {
  max-height: 300px;
  padding-top: 15px;
}

.accordion-item.active .accordion-icon {
  transform: rotate(45deg);
}

.accordion-button-wrap {
  text-align: center;
  margin-top: 40px;
}

.start-application-btn {
  display: inline-block;
  padding: 16px 24px;
  text-align: center;
  background-color: transparent;
  color: var(--pembe-button-bg-idle);
  text-decoration: none;
  transition: 0.5s ease;
  font-weight: 500;
  text-transform: uppercase;
  font-family: "Jost";
  font-size: 16px;
  letter-spacing: 0.8px;
  border: 1px solid #bc6b50;
  line-height: 1;
}

.start-application-btn:hover {
  background: #bc6b50;
  color: #fff;
}
/* RESPONSIVE CSS */
@media screen and (max-width: 1023px) {
  .portfolio-main {
    display: flex;
    flex-direction: column;
  }
}

@media screen and (max-width: 767px) {
  .portfolio-template-default .portfolio-container {
    padding-left: 20px;
    padding-right: 20px;
  }
  .portfolio-template-default .portfolio-featured-hero .portfolio-title {
    font-size: 42px;
  }
  .portfolio-template-default h3 {
    font-size: 24px;
  }
  .portfolio-content {
    padding: 60px 0;
  }
  .portfolio-contact,
  .portfolio-links {
    padding: 30px 20px;
  }
  .gallery-grid .swiper-slide img {
    height: 180px;
  }
  .portfolio-aside {
    padding-bottom: 0;
  }
  .amenities-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 30px;
  }
  .portfolio-amenities .amenities-inner {
    gap: 30px;
    padding: 30px 20px;
  }
  .amenities-grid .amenity-item h5 {
    font-size: 13px;
  }
  .amenities-grid .amenity-item img {
    width: 35px;
  }
  .portfolio-consent {
    padding: 0 0 60px;
  }
  .portfolio-consent .consent-inner {
    padding: 40px 20px;
  }
  .portfolio-consent h2 {
    font-size: 30px;
  }
  .portfolio-consent p {
    font-size: 16px;
  }
  .accordion-content {
    font-size: 16px;
  }
}