@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

/*
 * 
 * 
 * 
 */
 
*,
*::before,
*::after {
  box-sizing: border-box; }
  
html, body{
  font-family:'Jost', sans-serif;
}

/* ====================================
    Header CSS Start From Here
======================================= 
*/
.site-nav {
  background: #efece4;
  padding:1.1rem 0;
}
.site-nav .nav-link{
  color: #141414;
  font-weight:500;
  font-size:1.02rem;
  padding:.4rem .9rem !important;
}
.site-nav .search-box {
  display:flex;
  align-items:center;
  gap: 5px;
  color:#333;
  font-size:.875rem;
  margin-right:.25rem;
  flex-shrink:0;
}

/* ====================================
    Hero Section CSS Start From Here
======================================= 
*/
.hero-exact{
  position:relative;
  height:89vh;
  overflow:hidden;
  background:#000;
}
.hero-flash{
  position:absolute; 
  inset:0; 
  z-index:50;
  background:#000; 
  opacity:0; pointer-events:none;
}
.hero-image-outer {
  position:absolute; inset:0;
  opacity:0;
  animation:heroFadeIn 1.5s ease-in-out forwards;
}
.hero-image-inner {
  position:relative; 
  width:100%; 
  height:100%;
  transform:scale(1.2);
  overflow: hidden;
}
.hero-image-inner img{
  position:absolute; 
  inset:0;
  width:100%; 
  height:100%;
  object-fit:cover;
  object-position:50% 40%;
  color:transparent;
  opacity: 0;
  transform: scale(1.4);
  animation: bannerZoomOut 3s ease-out forwards;
}
@keyframes bannerZoomOut {
  0% {
    opacity: 0;
    transform: scale(1.4);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1.2);
  }
}
@keyframes heroFadeIn{
  from { opacity:0; }
  to { opacity:1; }
}
.hero-vignette{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom,rgba(0, 0, 0, 0.45),rgba(0, 0, 0, 0.05) 45%,rgba(0, 0, 0, 0.65));
}
.hero-noise{
  position:absolute; inset:0; z-index:20; pointer-events:none;
  opacity:.03;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}
.hero-credit{
  position:absolute; 
  bottom:1rem; 
  right:1.5rem; 
  z-index:30;
  color:#fff; 
  font-size:.75rem; 
  font-weight:300; 
  letter-spacing:.02em;
  text-shadow:0 2px 4px rgba(0,0,0,.8);
  opacity:.6;
}
.hero-content {
  position:relative; 
  z-index:30; 
  height:100%; 
}
.hero-title-wrap{
  position:absolute;
  top:3rem; 
  left:2rem;
  opacity:0; filter:blur(6px); 
  transform:translateY(14px);
  animation:heroContentIn .8s cubic-bezier(.22,.68,.35,1) .2s forwards;
}
.hero-title {
  color:#fff; 
  font-weight:700; 
  line-height:1;
  margin:0;
  text-shadow:0 2px 8px rgba(0,0,0,.8);
}
.hero-title span {
  display:block;
  font-family:'Playfair Display', serif;
  font-size:2.25rem;
  letter-spacing:.2em;
}
.hero-title span + span { 
  margin-top:.25rem; 
}
.hero-tags-wrap {
  position:absolute;
  right:2rem;
  top:33.333%;
  transform:translateY(-50%);
  opacity:0; filter:blur(6px);
  animation:heroContentIn .8s cubic-bezier(.22,.68,.35,1) .45s forwards;
}
.hero-tags {
  color:#fff; 
  font-weight:300; 
  font-size:1.125rem; 
  line-height:1.7;
  text-shadow:0 2px 8px rgba(0,0,0,.8);
  max-width:24rem;
}
.hero-tags span { 
  display:block; 
}
.hero-tags span + span { 
 margin-top:.5rem; 
} 

@keyframes heroContentIn{
  to{ opacity:1; filter:blur(0); transform:translateY(0); }
}

.hero-chevron-wrap {
  position:absolute;
  bottom:3rem; left:50%;
  transform:translateX(-50%);
}
.hero-chevron-btn {
  background:none; 
  border:0; 
  padding:0; 
  line-height:0; 
  cursor:pointer;
}
.hero-chevron-btn svg {
  width:2rem; 
  height:2rem;
  color:rgba(255,255,255,.7);
  transition:color .2s ease;
  animation:chevronBounce 2.2s ease-in-out infinite;
}
.hero-chevron-btn:hover svg { 
  color:#fff; 
}

@keyframes chevronBounce {
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(8px); }
}

@media (min-width:768px){
  .hero-title-wrap{ top:4rem; left:3rem; }
  .hero-title span{ font-size:3rem; }
  .hero-tags-wrap{ right:3rem; }
  .hero-tags{ font-size:1.25rem; max-width:24rem; }
}
@media (min-width:1024px){
  .hero-title-wrap{ top:5rem; left:4rem; }
  .hero-title span{ font-size:3.75rem; }
  .hero-tags-wrap{ right:4rem; }
  .hero-tags{ font-size:1.3rem; max-width:28rem; }
}

@media (prefers-reduced-motion: reduce){
  .hero-image-outer, .hero-title-wrap, .hero-tags-wrap {
    animation:none; opacity:1; filter:none; transform:none;
  }
  .hero-chevron-btn svg{ animation:none; }
}

/* ====================================
    About Us CSS Start From Here
======================================= 
*/
.bio-section{
  padding: 1.5rem 0 6rem;
}
.bio-content{
  max-width:52rem;
  margin:0 auto;
}
.bio-content p{
  font-size:1.08rem;
  line-height:1.85;
  color:#26261f;
  margin-bottom:1.6rem;
}
.intro { 
  padding: 3.5rem 0 5rem; 
}
.intro h1 {
  font-family: 'Playfair Display', serif;
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 2.4rem);
  margin: 0;
  text-align: center;
  padding-bottom: 15px;
}
.bio-banner {
  width: 100%;
  margin-bottom: 20px;
}
.bio-banner img {
  width: 100%;
  object-fit: cover;
}

/* ====================================
    Book Page CSS Start From Here
======================================= 
*/
.featured { 
  padding: 1.5rem 0 6rem; 
}
.featuredbox {
  max-width: 65rem;
  margin: 0 auto;
}
.featured-panel {
  display:grid;
  grid-template-columns: 0.3fr 0.7fr;
  gap:0;
  background: #FFF;
  box-shadow: 0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;
  border-radius: 15px;
  border-top: 1px solid rgba(27,27,23,0.14);
  border-bottom: 1px solid rgba(27,27,23,0.14);
}
@media (max-width:900px) {
  .featured-panel { 
    grid-template-columns:1fr; 
  }
}
.feat-cover {
  color:#f2efe6;
  padding: 0px;
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative;
  min-height: 400px;
  border-radius: 15px 0px 0px 15px;
}
.feat-cover .cover-frame{
  flex:1;
  padding: 0px;
  display:flex;
  border-radius: 15px 0px 0px 15px;
}
.feat-cover .cover-frame img{
  width:100%; height:100%;
  flex:1;
  object-fit:cover;
  display:block;
  border-radius: 15px 0px 0px 15px;
}
.feat-body {
  padding: 2rem 3rem;
  display:flex; 
  flex-direction:column; 
  justify-content:center;
}
.feat-label { 
  font-size:.72rem; 
  letter-spacing:.28em; 
  text-transform:uppercase; 
  color:#a3844f;
  margin-bottom: 0.6rem; 
}
.feat-body h2 {
  font-family:'Playfair Display', serif; 
  font-weight:700; 
  font-size:2.1rem; 
  margin-bottom:.8rem;
}
.feat-body .fsub { 
  color: #6e6b60; 
  font-size:1rem; 
  margin-bottom:1rem; 
}
.feat-meta { 
  display:flex; 
  gap:2rem; 
  margin-bottom: 1rem; 
  flex-wrap:wrap; 
}
.feat-meta div { 
  font-size:.8rem; 
  color: #6e6b60; 
}
.feat-meta strong { 
  display:block; 
  font-family:'Playfair Display', serif; 
  font-size:1rem; 
  color: #1b1b17; 
  font-style:normal; 
  font-weight:700; 
  margin-top:.15rem; 
}
.quote-mark {
  font-family:'Playfair Display', serif; 
  font-size:3.5rem; 
  line-height:0; 
  color: #a3844f;
  position:relative; 
  top:1.2rem; 
  opacity:.6;
}
.feat-quote{
  font-family:'Playfair Display', serif; 
  font-style:italic; 
  font-size:1.18rem;
  line-height:1.6; 
  color:#26261f; 
  margin:.4rem 0 1.8rem;
  max-width:32rem;
}
.btn-elegant {
  display:inline-flex;
  align-items:center; 
  gap:.6rem;
  border:1px solid #1b1b17; 
  color: #1b1b17;
  background:transparent;
  padding:.7rem 1.7rem; 
  font-size:.82rem; 
  letter-spacing:.1em; 
  text-transform:uppercase;
  width:fit-content; 
  text-decoration:none; 
  transition:.25s ease;
  border-radius: 10px;
}
.btn-elegant:hover { 
  background: #1b1b17; 
  color: #faf8f3; 
}

/* ====================================
    Contact Page CSS Start From Here
======================================= 
*/
.contact-wrap { 
  padding: 1.5rem 0 6rem; 
}
.contact-list { 
  max-width:44rem; 
  margin:0 auto; 
}
.contact-block {
  padding:1.9rem 0;
  border-top:1px solid rgba(27,27,23,0.14);
  opacity:0; 
  transform:translateY(16px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}
.contact-block.in-view { 
  opacity:1; 
  transform:translateY(0); 
}
.contact-list .contact-block:last-child { 
  border-bottom:1px solid rgba(27,27,23,0.14); 
}
.contact-heading { 
  display:flex; 
  gap:.7rem;
  align-items:baseline;
  margin-bottom:.9rem; 
}
.contact-heading .bullet { 
  color: #a3844f; 
  font-size:1rem; 
}
.contact-heading h3 { 
  font-family:'Playfair Display', serif; 
  font-weight:700; 
  font-style:italic; 
  font-size:1.15rem; 
  margin:0; 
}
.contact-heading .desc { 
  color: #6e6b60; 
  font-size:.9rem; 
}
.contact-detail {  
  margin-left:1.1rem; 
  font-size:.95rem; 
  line-height:1.9; 
  color:#33322c; 
}
.contact-detail a { 
  color: #3c6e63; 
  text-decoration:none; 
  border-bottom:1px solid rgba(60,110,99,.3); 
}
.contact-detail a:hover { 
  border-bottom-color: #3c6e63; 
}
.contact-detail .name { 
  color: #1b1b17;
}













/* ====================================
    Footer CSS Start From Here
======================================= 
*/
.site-footer {
  background: #efece4;
  padding-top:4rem;
}
.site-footer h5 {
  font-family:'Playfair Display', serif;
  font-weight:700;
  font-size:1.7rem;
  margin-bottom:1.3rem;
}
.site-footer a {
  color: #3c6e63;
  text-decoration:none;
  display:block;
  margin-bottom:.85rem;
  font-size:1.02rem;
}
.site-footer a:hover {
  text-decoration:underline;
}
.site-footer p {
  font-size:1.02rem;
  line-height:1.6;
  max-width:26ch;
}
.footer-bottom {
  border-top:1px solid rgba(0,0,0,.15);
  margin-top:2.8rem;
  padding:1.4rem 0;
  text-align:center;
  font-size:.92rem;
  color:#333;
}
.social-icons {
  display:flex;
  gap:1rem;
  margin-top:.3rem;
}
.social-icons a {
  color:#3c6e63;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid rgba(60,110,99,.3);
  transition: background .2s ease, color .2s ease;
}
.social-icons a:hover {
  background:#3c6e63;
  color:#efece4;
}

@media (max-width:767px){
  .site-footer .col-md-4{ margin-bottom:2rem; }
}