 @import url('https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Tiro+Devanagari+Marathi:ital@0;1&display=swap');
 

 .poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.poppins-thin-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.poppins-extralight-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.poppins-light-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.poppins-extrabold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.poppins-black-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: italic;
}



 :root {
   --primary: #1C3526;
   --primary-light: #2a4d38;
   --primary-dark: #122318;
   --title-color: #061B0E;
   --desc-color: rgba(0, 0, 0, 0.80);
   --white: #ffffff;
   --off-white: #f7f5f0;
   --border-radius: 12px;
   --shadow: 0 4px 24px rgba(28, 53, 38, 0.10);
 }

 * {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 html {
   scroll-behavior: smooth;
 }

 body {
   font-family: "Hind", "Poppins", sans-serif;
   color: var(--desc-color);
   background: #fff;
   font-size: 15px;
   line-height: 1.75;
 }

 h1,
 h2,
 h3,
 h4,
 h5 {
   font-family: 'Tiro Devanagari Marathi', serif;
   color: var(--title-color);
 }

 /* ============================================================
       NAVBAR
    ============================================================ */
 #mainNav {
   background: var(--primary);
   position: sticky;
   top: 0;
   z-index: 1050;
   padding: 0 1.5rem;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
   transition: box-shadow 0.3s;
 }

 #mainNav .navbar-brand {
   font-family: 'Tiro Devanagari Marathi', serif;
   color: var(--white) !important;
   font-size: 1.1rem;
   letter-spacing: 0.05em;
   padding: 1rem 0;
 }

 #mainNav .nav-link {
   color: rgba(255, 255, 255, 0.88) !important;
   font-family: "Hind", sans-serif;
   font-size: 0.9rem;
   font-weight: 500;
   padding: 1rem 0.85rem !important;
   transition: color 0.2s;
   position: relative;
 }

 #mainNav .nav-link::after {
   content: '';
   position: absolute;
   bottom: 0.5rem;
   left: 50%;
   width: 0;
   height: 2px;
   background: rgba(255, 255, 255, 0.7);
   transition: width 0.3s, left 0.3s;
 }

 #mainNav .nav-link:hover::after,
 #mainNav .nav-link.active::after {
   width: 60%;
   left: 20%;
 }

 #mainNav .nav-link:hover {
   color: #fff !important;
 }

 .navbar-toggler {
   border-color: rgba(255, 255, 255, 0.4);
 }

 .navbar-toggler-icon {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2c255%2c255%2c0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
 }

 /* ============================================================
       HERO SECTION
    ============================================================ */
 #hero {
   background: url(images/banner-background.jpg) center/cover no-repeat;
   min-height: 88vh;
   display: flex;
   align-items: center;
   position: relative;
   overflow: hidden;
   padding: 80px 0 60px;
 }

 /* Subtle grain texture */
 #hero::before {
   content: '';
   position: absolute;
   inset: 0;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
   opacity: 0.4;
   pointer-events: none;
 }

 .hero-text-col {
   position: relative;
   z-index: 2;
 }

 .hero-tagline {
   font-family: 'Tiro Devanagari Marathi', serif;
   font-size: clamp(1.8rem, 3.5vw, 2.7rem);
   color: var(--title-color);
   line-height: 1.45;
   margin-bottom: 1.2rem;
 }

 .hero-desc {
   font-size: 18px !important;
   color: var(--desc-color);
   max-width: 540px;
   margin-bottom: 0.5rem;
 }

 .hero-author-name {
   font-family: 'Tiro Devanagari Marathi', serif;
   color: var(--primary);
   font-size: 1.2rem;
   margin-top: 0.3rem;
 }

 /* Circular collage on right */
 .hero-collage {
   position: relative;
   margin: auto;
 }

 .hero-collage .main-circle {
   width: 220px;
   height: 220px;
   border-radius: 50%;
   overflow: hidden;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   border: 4px solid #fff;
   box-shadow: 0 8px 32px rgba(28, 53, 38, 0.18);
   background: #ddd;
 }

 .hero-collage .main-circle img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .orbit-item {
   width: 78px;
   height: 78px;
   border-radius: 50%;
   overflow: hidden;
   position: absolute;
   border: 3px solid #fff;
   box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
   background: #ccc;
 }

 .orbit-item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 /* Positions for orbit items */
 .orbit-item:nth-child(2) {
   top: 0;
   left: 50%;
   transform: translateX(-50%);
 }

 .orbit-item:nth-child(3) {
   top: 30px;
   right: 10px;
 }

 .orbit-item:nth-child(4) {
   bottom: 30px;
   right: 10px;
 }

 .orbit-item:nth-child(5) {
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
 }

 .orbit-item:nth-child(6) {
   bottom: 30px;
   left: 10px;
 }

 .orbit-item:nth-child(7) {
   top: 30px;
   left: 10px;
 }

 /* Book placeholder in hero collage */
 .book-card-hero {
   width: 110px;
   height: 155px;
   border-radius: 8px;
   overflow: hidden;
   position: absolute;
   top: 8px;
   right: -20px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
   transform: rotate(5deg);
   background: linear-gradient(135deg, #c8d8c0, #a3b89a);
   display: flex;
   align-items: center;
   justify-content: center;
 }

 /* ============================================================
       SECTION COMMON
    ============================================================ */
 section {
   padding: 72px 0;
 }

 .section-title {
   font-size: clamp(1.5rem, 2.5vw, 2rem);
   color: var(--title-color);
   margin-bottom: 0.5rem;
   text-align: center;
 }

 .section-subtitle {
   text-align: center;
   font-size: 16px;
   color: var(--desc-color);
   margin-bottom: 2.5rem;
 }

 .section-divider {
   width: 60px;
   height: 3px;
   background: var(--primary);
   margin: 0 auto 1.2rem;
   border-radius: 2px;
 }

 /* ============================================================
       ABOUT SECTION (लेखिकेबद्दल)
    ============================================================ */
 #about {
   background: #fff;
 }

 .about-img-wrap {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.6rem;
 }

 .about-img-wrap img {
   width: 180px;
   height: 180px;
   border-radius: 50%;
   object-fit: cover;
   border: 4px solid var(--primary);
   box-shadow: var(--shadow);
 }

 .about-author-caption {
   font-family: 'Tiro Devanagari Marathi', serif;
   color: var(--primary);
   font-size: 0.95rem;
   text-align: center;
 }

 .about-text p {
   color: var(--desc-color);
   font-size: 0.95rem;
   margin-bottom: 1rem;
   text-align: justify;
 }

 /* ============================================================
       MY JOURNEY SECTION (माझा प्रवास)
    ============================================================ */
 #journey {
   background: var(--primary);
   color: rgba(255, 255, 255, 0.88);
   position: relative;
   overflow: hidden;
   min-height: 360px;
 }

 #journey {
   background: url("images/About-us.jpg") center/cover no-repeat;
   position: relative;
   overflow: hidden;
   min-height: 360px;
 }

 #journey::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(91deg, #fff, transparent);
   z-index: 1;
 }

 #journey .journey-inner {
   position: relative;
   z-index: 2;
 }

 #journey .journey-title {
   font-family: 'Tiro Devanagari Marathi', serif;
   color: #061B0E;
   font-size: clamp(1.4rem, 2.5vw, 1.9rem);
   margin-bottom: 1.2rem;
 }

 #journey p {
   font-size: 16px;
   color: rgba(0, 0, 0, 0.8);
   text-align: justify;
   line-height: 1.85;
 }

 /* Paper boat decorative */
 .boat-img-col {
   display: flex;
   align-items: center;
   justify-content: center;
 }

 /* ============================================================
       BOOKS SECTION (निवडक लेखन)
    ============================================================ */
 #books {
   background: #fff;
 }

 .book-cover-placeholder {
   width: 100%;
   aspect-ratio: 3/4;
   background: linear-gradient(135deg, #c8d8c0, #8fab91);
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .book-info {
   padding: 10px 0;
   flex: 1;
   display: flex;
   flex-direction: column;
 }

 .book-title {
   font-family: 'Tiro Devanagari Marathi', serif;
   font-size: 1rem;
   color: var(--title-color);
   margin-bottom: 0.4rem;
 }

 .book-desc {
   font-size: 0.82rem;
   color: var(--desc-color);
   flex: 1;
   margin-bottom: 0.8rem;
   line-height: 1.6;
 }

 .btn-book {
   background: var(--primary);
   color: #fff;
   border: none;
   border-radius: 6px;
   padding: 0.4rem 1rem;
   font-size: 0.82rem;
   font-family: "Hind", sans-serif;
   cursor: pointer;
   text-decoration: none;
   display: inline-block;
   transition: background 0.2s;
 }

 .btn-book:hover {
   background: var(--primary-light);
   color: #fff;
 }

 .btn-book i {
   margin-left: 4px;
   font-size: 0.75rem;
 }

 /* ============================================================
       CONTACT SECTION (संपर्क साधा)
    ============================================================ */
 #contact {
   background: var(--primary);
   padding: 0;
 }

 .contact-form-col {
   background: var(--primary);
   padding: 72px 3rem 72px 4rem;
 }

 .contact-img-col {
   background: #8a9e87;
   min-height: 500px;
   background-image: url("https://images.unsplash.com/photo-1495640388908-05fa85288e61?w=800&q=80");
   background-size: cover;
   background-position: center;
   height: 100%;
 }

 .contact-title {
   font-family: 'Tiro Devanagari Marathi', serif;
   color: #fff;
   font-size: clamp(1.5rem, 2.5vw, 2rem);
   margin-bottom: 2rem;
   text-align: center;
 }

 .form-label-custom {
   font-family: "Hind", sans-serif;
   font-size: 0.85rem;
   color: #252525;
   margin-bottom: 0.3rem;
   display: block;
 }

 .form-control-custom {
   width: 100%;
   background: rgba(255, 255, 255, 0.12);
   border: 1px solid rgba(0, 0, 0, 0.3);
   border-radius: 8px;
   color: #6B7280;
   padding: 0.6rem 0.9rem;
   font-family: "Hind", sans-serif;
   font-size: 0.9rem;
   outline: none;
   transition: border-color 0.2s, background 0.2s;
   margin-bottom: 1.1rem;
 }

 .form-control-custom::placeholder {
   color: #6B7280;
 }

 .form-control-custom:focus {
   border-color: rgba(255, 255, 255, 0.6);
   background: rgba(255, 255, 255, 0.18);
 }

 textarea.form-control-custom {
   min-height: 120px;
   resize: vertical;
 }

 .btn-submit {
   background: rgba(255, 255, 255, 0.95);
   color: var(--primary);
   border: none;
   border-radius: 8px;
   padding: 0.6rem 1.8rem;
   font-family: "Hind", sans-serif;
   font-size: 0.9rem;
   font-weight: 600;
   cursor: pointer;
   transition: background 0.2s, transform 0.2s;
 }

 .btn-submit:hover {
   background: transparent;
   transform: translateY(-1px);
   border: 2px solid rgba(255, 255, 255, 0.95);
 }

 .btn-submit i {
   margin-left: 6px;
 }

 .contact-row-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 0 1.2rem;
 }

 /* ============================================================
       CONCEPTS SECTION (शब्द आणि संकल्पना)
    ============================================================ */
 #concepts {
   background: url(images/bg-pattern.jpg) center center no-repeat;
 }

 .concept-card {
   text-align: center;
   padding: 0;
 }

 .concept-icon {
   width: 110px;
   height: 110px;
   border-radius: 50%;
   background: var(--primary);
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 1rem;
   color: #fff;
   font-size: 1.5rem;
   box-shadow: 0 4px 16px rgba(28, 53, 38, 0.20);
   transition: transform 0.25s;
 }

 .concept-card:hover .concept-icon {
   transform: scale(1.1);
 }

 .concept-title {
   font-family: 'Tiro Devanagari Marathi', serif;
   color: var(--title-color);
   font-size: 1rem;
   margin-bottom: 0.3rem;
 }

 .concept-desc {
   font-size: 0.83rem;
   color: var(--desc-color);
 }

 /* ============================================================
       FOOTER
    ============================================================ */
 footer {
   background: var(--primary-dark);
   padding: 1.8rem 0;
 }

 .footer-brand {
   font-family: 'Tiro Devanagari Marathi', serif;
   color: #fff;
   font-size: 24px;
   letter-spacing: 0.05em;
 }

 .footer-links a {
   color: rgba(255, 255, 255, 0.70);
   text-decoration: none;
   font-size: 0.82rem;
   margin: 0 0.6rem;
   transition: color 0.2s;
 }

 .footer-links a:hover {
   color: #fff;
 }

 .footer-social a {
   color: rgba(255, 255, 255, 0.70);
   font-size: 1.05rem;
   margin-left: 0.7rem;
   transition: color 0.2s;
 }

 .footer-social a:hover {
   color: #fff;
 }

 .footer-copy {
   color: rgba(255, 255, 255, 0.45);
   font-size: 0.78rem;
   text-align: center;
   margin-top: 0.6rem;
   margin-bottom: 0;
 }

 .footer-contact-info {
   color: rgba(255, 255, 255, 0.70);
   font-size: 0.82rem;
   text-align: center;
 }

 .footer-contact-info span {
   margin: 0 0.6rem;
 }

 /* ============================================================
       SCROLL INDICATOR / ANIMATED ACTIVE NAV
    ============================================================ */
 #mainNav.scrolled {
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
 }

 /* ============================================================
       RESPONSIVE TWEAKS
    ============================================================ */
 @media (max-width: 991px) {
   .hero-collage {
     width: 280px;
     height: 280px;
     margin-top: 2.5rem;
   }

   .hero-collage .main-circle {
     width: 160px;
     height: 160px;
   }

   .orbit-item {
     width: 58px;
     height: 58px;
   }

   .contact-form-col {
     padding: 3rem 2rem;
   }

   .contact-row-grid {
     grid-template-columns: 1fr;
     gap: 0;
   }

   .contact-img-col {
     min-height: 280px;
   }
 }

 @media (max-width: 575px) {
   .hero-collage {
     width: 100%;
     height: 100%;
   }

   .hero-collage img {
     max-width: 100%!important;
   }

   .hero-collage .main-circle {
     width: 130px;
     height: 130px;
   }

   .orbit-item {
     width: 48px;
     height: 48px;
   }

   section {
     padding: 52px 0;
   }
 }

 /* Smooth image loading placeholder */
 img {
   transition: opacity 0.4s;
 }

 /* Book grid — exactly 4 cols on desktop, 2 tablet, 1 mobile */
 .books-row>[class*="col-"] {
   margin-bottom: 1.5rem;
 }

 /* Journey hand/boat image */
 .journey-visual {
   max-width: 320px;
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
 }

 .journey-visual img {
   width: 100%;
   display: block;
 }


 .hero-collage img {
   max-width: 700px;
 }

 .container-xxl {
   max-width: 1680px;
 }

 #mainNav .navbar-brand {
   font-size: 24px;
 }

 #mainNav .nav-link {
   font-size: 16px;
 }

 .hero-desc {
   font-size: 16px;
   color: var(--desc-color);
   max-width: 540px;
   margin-bottom: 0.5rem;
 }

 .about-author-caption {
   font-family: 'Tiro Devanagari Marathi', serif;
   color: var(--primary);
   font-size: 20px;
   text-align: center;
   margin: 0;
 }

 c

 .book-title {
   font-size: 20px;
   margin-top: 10px;
 }

 .book-desc {
   font-size: 16px;
   line-height: 1.6;
 }

 .btn-book {
   width: fit-content;
 }

 img.book-cover {
   max-width: 100% !important;
   object-fit: cover;
 }

 .book-card {
   padding: 10px;
 }

 section#concepts .col-6.col-md-3 {
   max-width: 250px;
 }

 .concept-title {
   font-size: 24px;
 }

 .concept-desc {
   font-size: 16px;
 }

 .contact-form-col {
   max-width: 561px;
   margin: auto;
   background: #fff;
   height: fit-content;
   border-radius: 15px;
 }

 .my-cst-100 {
   margin: 100px auto;
 }

 button.btn-submit {
   background: #1C3526;
   color: #ffff;
   margin: auto;
   display: block;
   border: 1px solid #1C3526;
 }

 .btn-submit:hover {
   background: transparent;
   transform: translateY(-1px);
   border: 1px solid #1C3526;
   color: #1C3526;
 }

 .bg-pattern-image {
   background: url("images/contact-pattern.jpg") center center no-repeat;
 }

 .form-control-custom:focus {
   border-color: #1c3526;
   background: rgba(255, 255, 255, 0.18);
 }

 .form-control-custom:focus {
   border-color: #1c3526;
 }

 .book-desc {
   font-size: 14px;
   line-height: 1.6;
   font-weight: 500;
 }

 .book-card {
   padding: 10px;
   height: 100%;
   display: flex;
   flex-direction: column;
 }

 .footer-divider {
   border: 0;
   height: 1px;
   background: rgb(255 255 255);
   margin: 1rem auto;
 }

 .footer-links {
   color: #fff;
   display: flex;
   justify-content: start;
   align-items: start;
   gap: 60px;
 }

 .footer-links p {
   margin: 0;
   font-size: 20px;
 }

 .footer-links a {
   color: #fff;
   font-size: 16px;
 }

 p.footer-copy.mt-2 {
   color: #fff;
   font-size: 16px;
 }

 .footer-links a {
   margin: 0 !important;
 }

 .btn-book {
   padding: 12px 20px;
   font-size: 16px;
 }

 @media (max-width: 575px) {
   .footer-links {
     flex-direction: column;
     gap: 20px;
     align-items: center;
   }

   .footer-links p {
     font-size: 18px;
   }

   .footer-links a {
     font-size: 16px;
   }
 }

 .book-title {
    font-family: 'Tiro Devanagari Marathi', serif;
    font-size: 24px!important; 
    margin-bottom: 5PX;
    margin-top: 15px;
}
.btn-book {
    padding: 12px 20px;
    font-size: 15px;
}


@media (max-width: 575px) {
.my-cst-100 {
    margin: 50px auto;
}
.d-flex.flex-wrap.justify-content-between.align-items-center.mb-2 {
    justify-content: center!important;
    text-align: center;
}
.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: none!important;
}
}