/* Hair Transplant Turkey - Landing Page */

#landing-banner{
    position: relative;
}

#landing-banner .banner-image {
    width: 100%;
    max-height: 900px;
    object-fit: cover;
}

#landing-banner .landing-col{
  margin-bottom: 25px;
}

#landing-banner .section-title {
    color: #fff;
    font-size: 52px;
    margin-bottom: 15px;
    text-align: center;
}

#landing-banner .section-title span{
    color: var(--subtitle-color);
}

#landing-banner .section-desc {
    color: #fff;
    margin-bottom: 15px;
    text-align: center;
}

#landing-banner .banner-content{
  position: absolute;
  bottom: 0;
  width: 100%;
}

#landing-banner .wp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(to bottom, #58d164 0%, #2cb842 100%);
  padding: 10px 15px;
  border-radius: 15px;
  color: #fff;
  transition: 0.3s ease-in;
  margin: 0 auto;
}

@media (max-width: 768px) {
  #landing-banner .wp-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(to bottom, #58d164 0%, #2cb842 100%);
    padding: 5px 9px;
    border-radius: 15px;
    color: #fff;
    transition: 0.3s ease-in;
    margin: 0 auto;
    font-size: 14px;
  }
}

/* Brands */
#home-brands {
    margin-bottom: 60px;
}

#home-brands .logo-slide-outer{
    gap: 40px;
}

#home-brands .logos-general-container{
    border-bottom: 1px solid #000;
}

#home-brands .logos-container {
    display: flex;
    gap: 40px;
}

#home-brands .rotating-brand-logo  {
    overflow: hidden;
    gap: 40px;
}

#home-brands .rotating-brand-logo .logos-container {
    animation: scroll-left 85s linear infinite;
}

#home-brands .logo{
    width: 120px;
    aspect-ratio: 1;
    object-fit: contain;
}

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* why hair center */
#why-haircenter{
    margin-bottom: 80px;
}

#why-haircenter .section-title , #why-haircenter .section-desc {
    margin-bottom: 10px;
}

#why-haircenter .why-list .list-item{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

#why-haircenter .why-list .list-item svg{
    color: var(--subtitle-color);
}

#why-haircenter .cta-btns {
    gap: 10px;
}

#why-haircenter .cta-btns .cta-btn {
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #58d164 0%, #2cb842 100%);
    border-radius: 10px;
    padding: 10px;
    color: #fff;
    font-size: 16px;
}

#why-haircenter .cta-btns .cta-btn.instagram-btn {
  background: transparent;
  border: 2px solid #ce0656;
  color: #ce0656;
  font-weight: 600;
}


#why-haircenter .owl-nav .owl-prev,
#why-haircenter .owl-nav .owl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

#why-haircenter .owl-nav .owl-prev {
  left: -10px;
  z-index: 1000; 
}

#why-haircenter .owl-nav .owl-next {
  right: -10px;
  z-index: 1000;
}

#why-haircenter .owl-nav .owl-prev,
#why-haircenter .owl-nav .owl-next {
  background: var(--subtitle-color);
  color: #fff;
  width: 40px;
  height: 40px;
}

#why-haircenter .owl-nav .owl-prev:hover,
#why-haircenter .owl-nav .owl-next:hover {
  background: var(--subtitle-color);
  transition: 0.3s;
}


/* carousel */

 /* ====== Reset ====== */
    .sr-only-1{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
    *{box-sizing:border-box;margin:0;padding:0}

    /* ====== Container ====== */
    .carousel-container-1{width:100%;max-width:900px;display:flex;flex-direction:column;align-items:center;gap:24px;margin:0 auto;padding:16px}
    .carousel-title-1{font-size:32px;font-weight:700;text-align:center}

    /* ====== Layout ====== */
    .carousel-1{width:100%;display:grid;grid-template-columns:220px 1fr 220px;gap:16px;align-items:center}
    .preview-container-1{display:flex;flex-direction:column;gap:12px;opacity:.8;transition:opacity .2s ease;max-height:400px;overflow:auto;padding:4px}
    .preview-container-1:hover{opacity:1}
    .preview-container-1::-webkit-scrollbar{width:8px}
    .preview-container-1::-webkit-scrollbar-thumb{background:#e1e1e1;border-radius:8px}

    /* ====== Thumbs ====== */
    .preview-image-1{
      width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;cursor:pointer;
      box-shadow:0 2px 8px rgba(0,0,0,.08);transition:transform .25s ease,box-shadow .25s ease,opacity .2s ease;
      background:#f2f2f2;
    }
    .preview-image-1:hover{transform:scale(1.04);box-shadow:0 6px 18px rgba(0,0,0,.12)}
    .left-previews-1{grid-column:1}
    .right-previews-1{grid-column:3}

    /* ====== Main ====== */
    .main-container-1{
      grid-column:2;position:relative;border-radius:18px;background:#f5f5f5;
      box-shadow:0 12px 36px rgba(0,0,0,.12)
    }
    .main-image-1{
      width:100%;aspect-ratio:1/1;object-fit:cover;display:block;transition:transform .5s ease
    }
    .main-image-1:hover{transform:scale(1.02)}

    /* ====== Nav Buttons ====== */
    .nav-btn-1{
      position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border:none;border-radius:999px;background:#fff;
      display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.15);transition:transform .2s ease,background .2s ease;z-index:5
    }
    .nav-btn-1:hover{background:#fafafa;transform:translateY(-50%) scale(1.08)}
    .nav-btn-1:active{transform:translateY(-50%) scale(.96)}
    .nav-btn-prev-1{left:-15px}
    .nav-btn-next-1{right:-15px}
    .nav-btn-1 svg{width:24px;height:24px;stroke:#2a2a2a}

    /* ====== Info overlay (KALDIRILDI) ====== */
    .image-info-1{display:none !important;}

    /* ====== Indicators ====== */
    .indicators-1{display:flex;gap:8px;margin-top:6px}
    .indicator-1{width:8px;height:8px;border-radius:999px;background:#d5d5d5;cursor:pointer;transition:transform .2s ease,background .2s ease}
    .indicator-1.active{background:#2a2a2a;transform:scale(1.2)}

    /* ====== Responsive ====== */
    @media (max-width: 1024px){
      .carousel-1{grid-template-columns:160px 1fr 160px}
      .preview-container-1{max-height:460px}
    }

    /* --- MOBILE FIXES --- */
    @media (max-width: 820px){
      .carousel-1{
        grid-template-columns:1fr;     /* tek sütun */
        gap:16px;
      }
      .left-previews-1,.right-previews-1{grid-column:1}

      /* Önizlemeleri yatay şerit yap & scrollbar gizle */
      .preview-container-1{
        flex-direction:row;
        overflow-x:auto;               /* yatay scroll */
        overflow-y:hidden;             /* dikey scroll kapalı => yan şerit yok */
        max-height:none;
        scrollbar-width:none;          /* Firefox */
        -ms-overflow-style:none;       /* IE/Edge eski */
        padding:6px 2px;
      }
      .preview-container-1::-webkit-scrollbar{display:none} /* WebKit */

      .preview-image-1{width:96px;flex:0 0 auto}

      /* Ana görsel güvenli genişlik + merkezleme */
      .main-container-1{
        max-width:min(92vw, 420px);
        margin-inline:auto;
      }

      .nav-btn-1{width:42px;height:42px}
      .nav-btn-prev-1{left:8px}
      .nav-btn-next-1{right:8px}
      .indicators-1{justify-content:center}
      .carousel-title-1{font-size:24px}
    }

    @media (max-width: 480px){
      .preview-image-1{width:78px}
    }


    /* ===== MOBILE GRID FIX (5 + 5) ===== */
@media (max-width: 820px){

  /* Carousel tek kolon */
  .carousel-1{
    display:flex;
    flex-direction:column;
    gap:16px;
  }

  /* Ana görsel üstte */
  .main-container-1{
    order:1;
    max-width: min(92vw, 420px);
    margin-inline:auto;
  }

  /* Preview alanları altta birleşsin */
  .left-previews-1,
  .right-previews-1{
    order:2;
    display:grid;
    grid-template-columns: repeat(5, 1fr); /* 5'erli */
    gap:10px;
    max-height:none;
    overflow:visible;
    padding:0;
  }

  /* Sağ-sol ayrımı mobilde anlamsız */
  .left-previews-1,
  .right-previews-1{
    grid-column:1;
  }

  /* Thumbnail boyutları */
  .preview-image-1{
    width:100%;
    aspect-ratio:1/1;
    border-radius:10px;
  }

  /* Indicator ortala */
  .indicators-1{
    justify-content:center;
    order:3;
  }
}


/* landing stepform */

#landing-stepform {
    position: relative;
}

#landing-stepform .pattern-bg {
    position: absolute;
    bottom: 0;
}

/* videos */

#home-videos{
  margin-bottom: 80px;
}

#home-videos .section-title-head{
  text-align: center;
  margin-bottom: 15px;
}

#home-videos .section-title-head .section-title{
  font-size: 36px;
}

#home-videos .video-box .video-thumb {
  border-radius: 20px;
  margin-bottom: 10px;
}

#home-videos .video-box{
  color: #000;
}

#home-videos .video-box .video-image{
  position: relative;
}

#home-videos .video-box .play-icon {
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-90%, -30%);
  width: 50px;
}

#home-videos .video-box .video-title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 10px;
}

#home-videos .video-box .video-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

#home-videos .btn-row{
  gap: 25px;
}

#home-videos .btn-row .link {
  background: var(--subtitle-color);
  padding: 12px 15px;
  border-radius: 7px;
  min-width: 240px;
  color: #fff;
  text-align: center;
  transition: 0.3s ease-in;
}

#home-videos .btn-row .link:hover{
  box-shadow: -8.19px -5.74px 16px #63876885;
}

#home-videos .btn-row .link:nth-child(2){
  background: #242424;
  padding: 12px 15px;
  border-radius: 7px;
  min-width: 240px;
  color: #fff;
  text-align: center;
}

#home-videos .owl-nav .owl-prev,
#home-videos .owl-nav .owl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

#home-videos .owl-nav .owl-prev {
  left: -10px;
  z-index: 1000; 
}

#home-videos .owl-nav .owl-next {
  right: -10px;
  z-index: 1000;
}

#home-videos .owl-nav .owl-prev,
#home-videos .owl-nav .owl-next {
  background: var(--subtitle-color);
  color: #fff;
  width: 40px;
  height: 40px;
}

#home-videos .owl-nav .owl-prev:hover,
#home-videos .owl-nav .owl-next:hover {
  background: var(--subtitle-color);
  transition: 0.3s;
}

/* packages */
#landing-packages {
    margin-bottom: 80px;
}
#landing-packages .section-title-head {
    text-align: center;
    margin-bottom: 40px;
}

#landing-packages .package-box {
    background: linear-gradient(  180deg,  #c9a660 0%,  #b9a26f 40%,  #8b7e5c 70%,  #3a372f 100%) 0% 0% no-repeat padding-box;
    padding: 20px;
    border-radius: 20px;
    height: 100%;
    margin-bottom: 15px
}

#landing-packages .package-col {
    margin-bottom: 10px
}

#landing-packages .package-box .title {
    color: #fff;
    text-align: center;
    font-size: 24px;
    font-weight: 600
}

#landing-packages .package-box .desc {
    color: #fff;
    text-align: center;
    font-size: 16px;
    margin-bottom: 10px
}

#landing-packages .package-box .price {
    display: inline-block;
    padding: 5px 15px;
    text-align: center;
    background: var(--color-2);
    color: #fff;
    border-radius: 10px;
    margin-bottom: 10px
}

#landing-packages .package-box .list .list-item {
    margin-bottom: 10px;
    gap: 5px
}

#landing-packages .package-box .list .list-item p {
    margin: 0
}

#landing-packages .package-box .package-head {
    text-align: center;
    color: #fff;
    margin-bottom: 16px;
}

#landing-packages .package-box .package-head .package-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
}

#landing-packages .package-box .package-features .feature-item {
    color: #fff;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
    font-size: 20px;
    font-weight: 600;
}

#landing-packages .package-box .wp-btn {
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #58d164 0%, #2cb842 100%);
    border-radius: 10px;
    padding: 10px;
    color: #fff;
    font-size: 16px;
}


/* =========================
   PACKAGE TABS – FULL STYLE
   Scoped with -1
========================= */

.pkg-1 {
  margin: 80px auto;
  background: #f3f3f3;
  padding: 75px 0;
}
.section-title-head {
  text-align: center;
  margin-bottom: 25px;
}

/* ---------- TABS ---------- */
.pkg__tabs-1{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.pkg__tab-1{
  appearance: none;
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  border-radius: 16px;
  padding: 14px 10px;
  font-weight: 600;
  line-height: 1.05;
  text-align: center;
  cursor: pointer;
  background: #3d3d3d;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    filter .15s ease,
    outline-color .15s ease;
}

/* Hover effect */
.pkg__tab-1:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
}

/* Click feedback */
.pkg__tab-1:active{
  transform: scale(.97);
}

/* Keyboard focus */
.pkg__tab-1:focus-visible{
  outline: 2px solid rgba(255,255,255,.28);
  outline-offset: 3px;
}

/* ---------- TAB COLORS ---------- */
.pkg__tab--standard-1{
  background: #3d3d3d;
  box-shadow: 0 14px 34px rgba(61,61,61,.45);
}
.pkg__tab--silver-1{
  background: #6f6f6f;
  box-shadow: 0 14px 34px rgba(111,111,111,.45);
}
.pkg__tab--gold-1{
  background: #e1c871;
  box-shadow: 0 14px 34px rgba(225,200,113,.45);
  color:#fff;
}

/* Hover shadows – same color family */
.pkg__tab--standard-1:hover{
  box-shadow: 0 18px 44px rgba(61,61,61,.60);
}
.pkg__tab--silver-1:hover{
  box-shadow: 0 18px 44px rgba(111,111,111,.60);
}
.pkg__tab--gold-1:hover{
  box-shadow: 0 18px 44px rgba(225,200,113,.60);
}

/* ---------- ACTIVE / SELECTED TAB ---------- */
.pkg__tab-1.is-active-1{
  transform: translateY(-1px);
  filter: saturate(.90) brightness(.96); /* selected = slightly muted */
  outline: 2px solid rgba(255,255,255,.22);
  outline-offset: 3px;
  background: var(--subtitle-color);
}

/* Active shadows */
.pkg__tab--standard-1.is-active-1{
  box-shadow: 0 22px 56px rgba(61,61,61,.70);
}
.pkg__tab--silver-1.is-active-1{
  box-shadow: 0 22px 56px rgba(111,111,111,.70);
}
.pkg__tab--gold-1.is-active-1{
  box-shadow: 0 22px 56px rgba(225,200,113,.70);
}

/* ---------- CARD ---------- */
.pkg__card-1{
  background: #3d3d3d;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 18px 50px rgba(61,61,61,.55);
  position: relative;
  overflow: hidden;
}

.pkg__title-1{
  margin: 4px 0 6px;
  font-size: 18px;
  letter-spacing: -.2px;
  color: #fff !important;
}

.pkg__subtitle-1{
  margin: 0 0 14px;
  font-size: 14px;
  color: rgba(255,255,255,.85);
}

.pkg__panel-desc-1 {
    color: #fff;
    margin-bottom: 5px;
}

/* ---------- PANELS ---------- */
.pkg__panel-1{
  animation: fadeUp-1 .18s ease;
}
.pkg__panel-1[hidden]{
  display: none;
}

@keyframes fadeUp-1{
  from{
    opacity:0;
    transform: translateY(6px);
  }
  to{
    opacity:1;
    transform: translateY(0);
  }
}

/* ---------- LIST ---------- */
.pkg__list-1{
  list-style: none;
  padding: 14px 12px;
  margin: 0;
  border-top: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.10);
  border-radius: 16px;
}

.pkg__item-1{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 8px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  font-size: 13px;
  line-height: 1.25;
  color: #fff;
}

.pkg__item-1:last-child{
  border-bottom: none;
}

.pkg__icon-1{
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  margin-top: 1px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}

.pkg__icon-1 svg{
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* OK / NO */
.is-ok-1 .pkg__icon-1{
  color: #20c06a;
}
.is-no-1 .pkg__icon-1{
  color: #ff4d4d;
}
.is-no-1{
  opacity: .9;
}

/* ---------- RESPONSIVE ---------- */
@media (min-width: 640px){
  /* .pkg-1{ max-width: 820px; } */
  .pkg__title-1{ font-size: 23px; }
  .pkg__item-1{ font-size: 15px; }
}

.whatsapp-box {
  background: radial-gradient(circle at center center, #009607 35%, #017c47 100%);
  padding: 40px 25px;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.whatsapp-box .whatsapp-title {
  color: #fff;
  text-align: center;
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 10px;
    word-wrap: break-word;
}

.whatsapp-box .whatsapp-desc {
  color: #fff;
  text-align: center;
  margin-bottom: 10px;
}

.whatsapp-box .wp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(to bottom, #58d164 0%, #2cb842 100%);
  padding: 10px 15px;
  border-radius: 15px;
  color: #fff;
  transition: 0.3s ease-in;
  margin: 0 auto;
}

/* reviews */

#home-reviews{
  margin-bottom: 80px;
}

#home-reviews .reviews-content{
  padding: 20px 0 120px;
  background: #F3F3F3;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

#home-reviews .reviews-content .section-title-head{
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 35px;
}

#home-reviews .reviews {
  margin-bottom: 35px;
}

#home-reviews .reviews .dIlOny{
  min-height: auto!important;
}

#home-reviews .reviews .Dlbjh{
  height: auto!important;
}

#home-reviews .reviews-content .btn-row{
  gap: 25px;
}

#home-reviews .btn-row .link {
  background: var(--subtitle-color);
  padding: 12px 15px;
  border-radius: 7px;
  min-width: 240px;
  color: #fff;
  text-align: center;
  transition: 0.3s ease-in;
}

#home-reviews .btn-row .link:hover{
  box-shadow: -8.19px -5.74px 16px #63876885;
}

#home-reviews .btn-row .link:nth-child(2){
  background: #242424;
  padding: 12px 15px;
  border-radius: 7px;
  min-width: 240px;
  color: #fff;
  text-align: center;
}

/* process */
#landing-hair-transplant-process {
  margin-bottom: 80px;
}
#landing-hair-transplant-process .section-inner {

}

#landing-hair-transplant-process .section-inner .section-title-head{
  text-align: center;
  margin-bottom: 35px;
}

/* #landing-hair-transplant-process .section-inner .section-title-head .section-title{
  color: #fff;
} */

#landing-hair-transplant-process .section-inner .process-row{
  margin-bottom: 35px;
}

#landing-hair-transplant-process .section-inner .process-col{
  margin-bottom: 25px;
}

#landing-hair-transplant-process .section-inner .process-col .process-box {
    padding: 25px;
    backdrop-filter: blur(8px);
    color: #fff;
    border-radius: 15px;
    border: 1px solid #fff;
    height: 100%;
    background: #242424;
}

#landing-hair-transplant-process .section-inner .process-col .process-box .process-head{
  margin-bottom: 25px;
  text-align: center;
}

#landing-hair-transplant-process .section-inner .process-col .process-box .process-head .title {
  font-size: 28px;
  position: relative;
  font-weight: 700;
}

#landing-hair-transplant-process .section-inner .process-col .process-box .process-title{
  gap: 10px;
  margin-bottom: 15px;
} 

#landing-hair-transplant-process .section-inner .process-col .process-box .process-head .title::after {
  position: absolute;
  bottom: -11%;
  width: 60%;
  height: 2px;
  background: #fff;
  content: "";
  left: 50%;
  /* margin: 0 auto; */
  display: block;
  transform: translateX(-50%);
}

#landing-hair-transplant-process .section-inner .process-col .process-box .proces-desc {
  line-height: 1.4;
}

#landing-hair-transplant-process .section-inner .btn-row .link {
  background: var(--bg-color-2);
  padding: 10px 25px;
  color: #fff;
  min-width: 230px;
  text-align: center;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: 0.3s ease-in-out;
  position: relative;
  z-index: 1;
}

#landing-hair-transplant-process .section-inner .btn-row .link svg{
  transition: 0.3s ease-in-out;
}

#landing-hair-transplant-process .section-inner .btn-row .link:hover{
  box-shadow: 0 2px 12px 0 var(--bg-color-2);
}


/* home-reels */

#home-reels{
  margin-bottom: 80px;
}

#home-reels .section-title-area {
  margin-bottom: 35px;
  text-align: center;
}

#home-reels-patients .section-title-area .section-title{
  margin-bottom: 15px;
}

#home-reels .item img {
  border-radius: 14px;
}

#home-reels .owl-dots {
  margin-top:15px;
  margin-bottom:15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#home-reels .owl-dots .owl-dot span{
  width: 16px;
  height: 16px;
  background-color: var(--bg-color-3);
  margin: 3px;
}

#home-reels .owl-dots .owl-dot.active span{
  background-color: var(--bg-color-2);
  width: 21px;
  height: 21px;
}

#home-reels .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-15px, -15px);
  width: 50px !important;
}

#home-reels .item .reels-img {
    aspect-ratio: 9 / 16;
}

/* bottom form area */
#landing-form-area {
    margin-bottom: 80px;
}
#landing-form-area .section-title {
    text-align: center;
    margin-bottom: 25px;
}

#landing-form-area .input-area {
  margin-bottom: 20px;
}

#landing-form-area .input-area input {
    width: 100%;
    background: linear-gradient(127deg, #242424 0%, #242424 1%, #3C3E49 52%, var(--subtitle-color) 95%, var(--subtitle-color) 100%) 0% 0% no-repeat padding-box;
    padding: 10px 15px;
    color: #fff;
    border-radius: 10px;
    height: 50px;
}

#landing-form-area .input-area input#phoneNumber{
  color: var(--text-color-2);
}

#landing-form-area .input-area input::placeholder{
  color: var(--text-color-2);
}

#landing-form-area .input-area textarea::placeholder{
  color: var(--text-color-2);
}

#landing-form-area .input-area textarea{
  width: 100%;
  height: 150px;
  outline: none;
  resize: none;
  background:linear-gradient(127deg, #242424 0%, #242424 1%, #3C3E49 52%, var(--subtitle-color) 95%, var(--subtitle-color) 100%) 0% 0% no-repeat padding-box;
  padding: 20px 15px;
  border-radius: 10px;
  color: #fff;
}

#landing-form-area .input-area .send-btn {
  min-width: 250px;
  padding: 10px;
  border-radius: 10px;
  background:linear-gradient(127deg, #242424 0%, #242424 1%, #3C3E49 52%, var(--subtitle-color) 95%, var(--subtitle-color) 100%) 0% 0% no-repeat padding-box;
  color: var(--text-light);
  cursor: pointer;
  transition: 0.3s ease-in;
  border: 1px solid transparent;
}

#landing-form-area .input-area .send-btn:hover{
  transform: scale(1.1);
}

@media (max-width:991px) {
    #landing-banner .banner-image {
        width: 100%;
        min-height: 800px;
        object-fit: cover;
    }

    #why-haircenter .why-col{
        margin-bottom: 25px;
    }

    #landing-packages .package-col{
        margin-bottom: 25px;
    }
    #landing-packages .package-box .package-features .feature-item{
        font-size: 18px;
    }
}


@media (max-width: 575px) {
    header .wp-btn {
        min-width: 200px !important;
        font-size: 14px;
    }
    #landing-banner .banner-image {
        width: 100%;
        min-height: 550px;
        object-fit: cover;
    }
    #landing-banner .row{
        --gutter-x: 0px;
    }
    #home-brands .rotating-brand-logo .logos-container{
        gap: 20px;
    }
    #home-brands .rotating-brand-logo .logos-container img {
        width: 100px;
        height: auto;
        object-fit: contain;
    }
    #why-haircenter .cta-btns{
        flex-direction: column;
        gap: 15px;
    }

    #landing-stepform .step-form-header .step-form-title {
        font-size: 28px;
    }
    #landing-stepform .step-form-container {
        padding: 20px;
    }
    #landing-stepform .method-option{
        flex: 0 0 100%;
        width: 100%;
    }
    #landing-hair-transplant-process .row{
        --gutter-x: 0px;
    }
    #landing-packages .package-box .package-head .package-title{
        font-size: 24px;
    }
    #landing-form-area .row {
        --gutter-x: 0px;
    }
    .pkg__card-1{
      margin-bottom: 25px;
    }
}


/* PAGE - PRESS  */

#post-detail .press-col{
    margin-bottom: 35px;
}

#post-detail .press-content{
    margin-top: 10px;
}

#post-detail .press-content .press-title {
    text-align: center;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 22px;
}

#post-detail .press-content .press-link {
    background: var(--bg-color-2);
    padding: 10px 10px;
    color: #fff;
    min-width: 230px;
    text-align: center;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: 0.3s ease-in-out;
    position: relative;
    z-index: 1;
}

#post-detail .press-content .press-link svg{
  transition: 0.3s ease-in-out;
}

#post-detail .press-content .press-link:hover{
  box-shadow: 0 2px 12px 0 var(--bg-color-2);
}

/* video */

#post-detail .video-box {
    position: relative;
}

#post-detail .video-box .yt-icon{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: 60px;
    transition: 0.3s ease-in-out;
}

#post-detail .video-box .video-image{
    border-radius: 20px;
}

#post-detail .video-box .yt-icon:hover{
    transform:translate(-50%, -50%) scale(1.1);
}

/* patient */

.patient-value-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 15px;
}

.patient-value-grid .patient-col {
    background: #242424;
    padding: 15px;
    color: #fff;
    border-radius: 10px;
}

.patient-value-grid .patient-col .title {
    font-weight: 600;
    font-size: 24px;
    margin-bottom: 5px;
}

.custom-separator {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 30px 0;
}

.custom-separator .line {
    flex: 1;
    border-top: 3px solid #eaeaea;
}

.custom-separator .icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 1.75em;
    height: 1.75em;
    margin: 0 12px;
    margin-top: -1.5px;

    border: 3px solid #eaeaea;
    background-color: transparent;
    font-size: 32px;
}

.custom-separator .icon-wrapper i {
    color: #ff0000;
    font-size: inherit;
}


@media (max-width: 767px) {
    .patient-value-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .patient-value-grid .patient-col:last-child {
        grid-column: 1 / -1;
    }
    .patient-text {
        margin-top: 20px;
    }
    .video-col{
        margin-bottom: 25px;
    }
}

/* Before & After */

#page-before-after-enterance{
  margin-bottom: 80px;
}

#page-before-after-enterance .section-title{
  margin-bottom: 25px;
}

#page-before-after-enterance .section-desc{
  margin-bottom: 25px;
}

#page-before-after-enterance .ba-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

#page-before-after-enterance .ba-grid .ba-col {
  background: var(--bg-color-3);
  padding: 15px;
  border-radius: 10px;
  color: #fff;
}

#page-before-after-enterance .ba-grid .ba-col .number {
  font-size: 24px;
  font-weight: 700;
  color: #242424;
}

#page-before-after-enterance .ba-grid .ba-col .text{
  font-size: 20px;
}

#page-before-after-enterance .img-responsive{
  border-radius: 10px;
}

@media (max-width: 768px) {
  #page-before-after-enterance .ba-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  #page-before-after-enterance .ba-grid > :nth-child(3) {
    grid-column: 1 / -1;
  }
  #page-before-after-enterance .ba-col-left{
    margin-bottom: 25px;
  }
}

/* gallery */

#page-before-after-gallery{
  margin-bottom: 80px;
}

#page-before-after-gallery .ba-gallery-col{
  margin-bottom: 25px;
}

#page-before-after-gallery .ba-gallery-item {
  border-radius: 15px;
  overflow: hidden;
  display: block;
  border: 4px solid var(--subtitle-color);
}

#page-before-after-gallery .ba-gallery-col img {
  height: 100%;
}

/* celebrity */
#page-before-after-celebrity {
  margin-bottom: 80px;
}

#page-before-after-celebrity .section-title-head {
  text-align: center;
  margin-bottom: 40px;
}

#page-before-after-celebrity .celebrity-col {
  margin-bottom: 25px;
  position: relative;
}

#page-before-after-celebrity .celebrity-col .celebrity-content {
  position: relative;
  /* display: block; */
  overflow: hidden;
  border-radius: 10px;
  border: 4px solid #000;
}

#page-before-after-celebrity .celebrity-col .celebrity-content .celebrity-name {
  position: absolute;
  bottom: 0;
  padding: 10px;
  width: 100%;
  text-align: center;
  background: var(--subtitle-color);
  color: var(--title-color);
  font-weight: 700;
}

#page-before-after-post .ba-post-image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

#page-before-after-post .before-after-tech-row{
  margin-bottom: 25px;
}