/*first Hero Section CSS By Rishabh Starts*/
/*==================================================
ABOUT PAGE - HERO SECTION
==================================================*/

:root{
    --axv9qk-bg:#181009;
    --axv9qk-bg2:#23170d;
    --axv9qk-card:rgba(39,25,16,.82);
    --axv9qk-gold:#d9a441;
    --axv9qk-gold2:#f1cb76;
    --axv9qk-text:#f7edd8;
    --axv9qk-para:#d6c2a3;
    --axv9qk-border:rgba(223,173,72,.20);
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

.axv9qk_about_wrapper{
    width:100%;
    background:linear-gradient(180deg,#181009 0%,#1b110a 40%,#1f140c 100%);
    overflow:hidden;
    position:relative;
}

.axv9qk_authorHero{
    position:relative;
    padding:67px 0 90px;
    min-height:auto;
    overflow:hidden;
}

.axv9qk_container{
    width:min(1320px,92%);
    margin:auto;
    display:grid;
    grid-template-columns:1fr 520px;
    align-items:center;
    gap:80px;
}

.axv9qk_bgGlow{
    width:850px;
    height:850px;
    position:absolute;
    left:-300px;
    top:-260px;
    background:radial-gradient(circle,var(--axv9qk-gold) 0%,transparent 70%);
    opacity:.07;
    filter:blur(60px);
}

.axv9qk_bgCircleOne{
    width:500px;
    height:500px;
    border-radius:50%;
    position:absolute;
    right:-160px;
    top:100px;
    border:1px solid rgba(255,201,92,.08);
}

.axv9qk_bgCircleTwo{
    width:750px;
    height:750px;
    border-radius:50%;
    position:absolute;
    left:-260px;
    bottom:-350px;
    border:1px solid rgba(255,201,92,.05);
}

.axv9qk_topLabel{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:25px;
}

.axv9qk_topLabel span{
    width:70px;
    height:1px;
    background:var(--axv9qk-gold);
}

.axv9qk_topLabel p{
    color:var(--axv9qk-gold2);
    font-size:14px;
    letter-spacing:5px;
    text-transform:uppercase;
}

.axv9qk_heading{
    font-size:clamp(62px,6vw,92px);
    line-height:.95;
    margin-bottom:18px;
    word-break:normal;
    color: white;
}

.axv9qk_subHeading{
    color:var(--axv9qk-gold2);
    font-size:20px;
    font-weight:400;
    letter-spacing:5px;
    margin-bottom:42px;
}

.axv9qk_quoteBox{
    display:flex;
    gap:28px;
    margin-bottom:40px;
    align-items:flex-start;
}

.axv9qk_quoteLine{
    width:3px;
    min-width:3px;
    height:120px;
    background:linear-gradient(var(--axv9qk-gold),transparent);
    border-radius:10px;
}

.axv9qk_quoteBox h4{
    color:var(--axv9qk-text);
    font-size:30px;
    line-height:1.55;
    margin-bottom:18px;
    font-weight:500;
}

.axv9qk_quoteBox p{
    color:var(--axv9qk-para);
    font-size:18px;
    line-height:1.9;
}

.axv9qk_storyText{
    display:flex;
    flex-direction:column;
    gap:25px;
    margin-bottom:42px;
}

.axv9qk_storyText p{
    color:var(--axv9qk-para);
    font-size:19px;
    line-height:2;
}

.axv9qk_storyText strong{
    color:var(--axv9qk-gold2);
    font-weight:600;
}

.axv9qk_badges{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-bottom:48px;
}

.axv9qk_badges span{
    padding:13px 22px;
    border:1px solid var(--axv9qk-border);
    border-radius:40px;
    color:var(--axv9qk-gold2);
    background:rgba(255,255,255,.02);
    transition:.35s;
    cursor:default;
}

.axv9qk_badges span:hover{
    transform:translateY(-5px);
    background:rgba(255,193,73,.08);
    box-shadow:0 0 25px rgba(214,163,61,.18);
}

.axv9qk_buttonArea{
    display:flex;
    flex-wrap:wrap;
    gap:22px;
}

.axv9qk_primaryBtn,
.axv9qk_secondaryBtn{
    text-decoration:none;
    padding:18px 38px;
    border-radius:60px;
    transition:.35s;
    letter-spacing:1px;
}

.axv9qk_primaryBtn{
    background:linear-gradient(135deg,#dca63f,#f1ca74);
    color:#21140a;
    font-weight:700;
}

.axv9qk_primaryBtn:hover{
    transform:translateY(-5px);
    box-shadow:0 20px 45px rgba(233,178,63,.30);
}

.axv9qk_secondaryBtn{
    border:1px solid var(--axv9qk-border);
    color:var(--axv9qk-text);
}

.axv9qk_secondaryBtn:hover{
    background:rgba(255,197,82,.08);
    transform:translateY(-5px);
}

.axv9qk_rightContent{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}

.axv9qk_photoFrame{
    width:100%;
    max-width:520px;
    aspect-ratio:4/5;
    border-radius:34px;
    overflow:hidden;
    margin-left:auto;
}

.axv9qk_photoFrame img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    display:block;
}

.axv9qk_photoGlow{
    position:absolute;
    inset:-1px;
    border-radius:36px;
    border:1px solid rgba(255,207,108,.25);
    pointer-events:none;
}

.axv9qk_signatureCard{
    position:absolute;
    right:-30px;
    bottom:6px;
    width:240px;
    padding:24px;
    background:rgba(34,22,13,.92);
    border:1px solid var(--axv9qk-border);
    border-radius:24px;
    backdrop-filter:blur(14px);
}

.axv9qk_signatureCard h5{
    color:var(--axv9qk-gold2);
    font-size:14px;
    letter-spacing:3px;
    margin-bottom:15px;
    text-transform:uppercase;
}

.axv9qk_signatureCard img{
    width:100%;
    display:block;
}

.axv9qk_smallFloatingCard{
    position:absolute;
    width:150px;
    padding:18px;
    background:rgba(32,21,12,.95);
    border-radius:22px;
    border:1px solid var(--axv9qk-border);
    backdrop-filter:blur(12px);
    text-align:center;
    transition:.4s;
}

.axv9qk_smallFloatingCard:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,0,.30);
}

.axv9qk_smallFloatingCard h4{
    color:var(--axv9qk-gold2);
    font-size:34px;
    margin-bottom:10px;
}

.axv9qk_smallFloatingCard p{
    color:var(--axv9qk-para);
    font-size:14px;
    line-height:1.6;
}

.axv9qk_cardOne{
    left:-55px;
    top:90px;
}

.axv9qk_cardTwo{
    right:-60px;
    top:120px;
}

.axv9qk_cardThree{
    left:-40px;
    bottom:70px;
}

.axv9qk_scrollBox{
    margin-top:60px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:15px;
}

.axv9qk_scrollBox span{
    width:1px;
    height:70px;
    background:linear-gradient(var(--axv9qk-gold),transparent);
}

.axv9qk_scrollBox p{
    color:var(--axv9qk-gold2);
    font-size:13px;
    letter-spacing:4px;
    text-transform:uppercase;
}

@media(max-width:1200px){

.axv9qk_container{

grid-template-columns:1fr;
gap:60px;

}

.axv9qk_leftContent{

order:2;

}

.axv9qk_rightContent{

order:1;
justify-content:center;

}

.axv9qk_photoFrame{

max-width:460px;
margin:auto;

}

.axv9qk_signatureCard{

position:relative;
right:auto;
bottom:auto;
margin:25px auto 0;
width:280px;

}

.axv9qk_cardOne,
.axv9qk_cardTwo,
.axv9qk_cardThree{

display:none;

}

}

@media(max-width:768px){

.axv9qk_authorHero{

padding:110px 0 60px;

}

.axv9qk_container{

grid-template-columns:1fr;
gap:40px;

}

.axv9qk_leftContent{

order:2;
text-align:left;

}

.axv9qk_rightContent{

order:1;

}

.axv9qk_photoFrame{

width:100%;
max-width:320px;
margin:auto;
border-radius:26px;

}

.axv9qk_heading{

font-size:58px;

}

.axv9qk_subHeading{

font-size:15px;
letter-spacing:2px;

}

.axv9qk_quoteBox{

flex-direction:column;
gap:18px;

}

.axv9qk_quoteLine{

width:100%;
height:2px;

}

.axv9qk_quoteBox h4{

font-size:20px;
line-height:1.6;

}

.axv9qk_storyText p{

font-size:16px;
line-height:1.9;

}

.axv9qk_badges{

justify-content:flex-start;
gap:10px;

}

.axv9qk_badges span{

padding:10px 16px;
font-size:14px;

}

.axv9qk_buttonArea{

flex-direction:column;

}

.axv9qk_primaryBtn,
.axv9qk_secondaryBtn{

width:100%;
text-align:center;

}

.axv9qk_signatureCard{

width:100%;
max-width:320px;

}

}

@media(max-width:480px){

.axv9qk_container{

width:90%;

}

.axv9qk_heading{

font-size:48px;

}

.axv9qk_subHeading{

font-size:14px;

}

.axv9qk_quoteBox h4{

font-size:18px;

}

.axv9qk_topLabel{

justify-content:flex-start;

}

.axv9qk_topLabel p{

font-size:12px;
letter-spacing:3px;

}

.axv9qk_badges{

flex-direction:column;

}

.axv9qk_badges span{

width:100%;
text-align:center;

}

.axv9qk_scrollBox{

margin-top:40px;

}

}

/*first Hero Section CSS By Rishabh Ends*/

/*Second Section CSS By Rishabh Starts*/
/* ==============================================================
   RADHESHYAM — "ABOUT" CONTENT SECTION STYLES
   --------------------------------------------------------------
   Every single class in this file starts with "rsauX7-" on
   purpose. That prefix was made up specifically for this
   section so it will NOT clash with any class already used
   elsewhere on your website (Home, Books, Genres, etc).

   You can paste this file's content into a new file called
   about-section.css, or paste it at the very BOTTOM of your
   site's main CSS file — either works.
   ============================================================== */

/* ---- Fonts (add these two lines in your <head> instead if you
   already load fonts elsewhere — see FONTS.txt for the tags) ---- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Lora:ital,wght@0,400;0,500;1,400&family=Jost:wght@400;500;600&family=Caveat:wght@500;600&display=swap');

/* ---------------------------------------------------------------
   0. Design tokens (colours, spacing) — scoped to this section
      only, so nothing else on the page is affected.
   --------------------------------------------------------------- */
.rsauX7-about {
  --rsauX7-bg: #F8F2E7;
  --rsauX7-bg-soft: #F0E6D2;
  --rsauX7-paper: #F1E8D5;
  --rsauX7-ink: #34241A;
  --rsauX7-ink-soft: #6E5A46;
  --rsauX7-brass: #A9803D;
  --rsauX7-brass-light: #C9A24E;
  --rsauX7-maroon: #7C2A2A;
  --rsauX7-line: rgba(52, 36, 26, 0.16);
  --rsauX7-shadow: rgba(52, 36, 26, 0.18);

  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(201, 162, 78, 0.10), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(124, 42, 42, 0.06), transparent 50%),
    var(--rsauX7-bg);
  color: var(--rsauX7-ink);
  padding: clamp(64px, 9vw, 132px) clamp(20px, 5vw, 64px);
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
}

.rsauX7-about *,
.rsauX7-about *::before,
.rsauX7-about *::after {
  box-sizing: border-box;
}

.rsauX7-about em {
  font-style: italic;
  color: var(--rsauX7-brass);
}

/* faint paper-grain texture, done in pure CSS (no extra image needed) */
.rsauX7-about::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(90deg, rgba(52,36,26,0.015) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(52,36,26,0.015) 0 1px, transparent 1px 3px);
}

.rsauX7-container {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 440px) 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

/* ---------------------------------------------------------------
   1. LEFT: photo collage
   --------------------------------------------------------------- */
.rsauX7-collage {
  position: relative;
  min-height: 420px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.rsauX7-collage.rsauX7-in-view {
  opacity: 1;
  transform: translateY(0);
}

.rsauX7-photo {
  margin: 0;
  background: var(--rsauX7-paper);
  padding: 10px 10px 34px;
  border: 1px solid var(--rsauX7-line);
  box-shadow: 0 18px 40px -14px var(--rsauX7-shadow), 0 2px 8px rgba(52,36,26,0.10);
  border-radius: 2px;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.rsauX7-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(8%) saturate(105%);
}

.rsauX7-photo--main {
  position: relative;
  width: 82%;
  aspect-ratio: 4 / 5;
  transform: rotate(-2.5deg);
  z-index: 1;
}

.rsauX7-photo--small {
  position: absolute;
  width: 46%;
  aspect-ratio: 1 / 1;
  z-index: 2;
}

.rsauX7-photo--one {
  right: -4%;
  top: 6%;
  transform: rotate(6deg);
}

.rsauX7-photo--two {
  left: 2%;
  bottom: -6%;
  transform: rotate(-5deg);
}

.rsauX7-photo:hover {
  transform: rotate(0deg) translateY(-4px) scale(1.015);
  box-shadow: 0 26px 48px -16px var(--rsauX7-shadow);
  z-index: 3;
}

/* washi-tape accents pinning the photos down */
.rsauX7-tape {
  position: absolute;
  width: 78px;
  height: 26px;
  background: linear-gradient(180deg, rgba(201,162,78,0.55), rgba(201,162,78,0.35));
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: 0 4px 10px rgba(52,36,26,0.12);
  opacity: 0.9;
  z-index: 4;
}

.rsauX7-tape--one {
  top: 2%;
  left: 30%;
  transform: rotate(-8deg);
}

.rsauX7-tape--two {
  bottom: 8%;
  right: 12%;
  transform: rotate(10deg);
}

.rsauX7-caption {
  position: absolute;
  left: 6%;
  bottom: -34px;
  font-family: 'Caveat', cursive;
  font-size: 1.4rem;
  color: var(--rsauX7-ink-soft);
  margin: 0;
}

.rsauX7-inkblot {
  position: absolute;
  width: 130px;
  height: 130px;
  right: -40px;
  bottom: -60px;
  color: var(--rsauX7-brass);
  opacity: 0.14;
  z-index: 0;
}

.rsauX7-inkblot svg { width: 100%; height: 100%; }

/* ---------------------------------------------------------------
   2. RIGHT: written content
   --------------------------------------------------------------- */
.rsauX7-content {
  padding-top: 4px;
}

.rsauX7-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Jost', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rsauX7-brass);
  margin: 0 0 20px;
}

.rsauX7-eyebrow span {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--rsauX7-brass);
  opacity: 0.6;
}

.rsauX7-heading {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  line-height: 1.14;
  margin: 0 0 24px;
  color: var(--rsauX7-ink);
}

.rsauX7-intro {
  font-size: 1.08rem;
  line-height: 1.8;
  color: var(--rsauX7-ink-soft);
  max-width: 56ch;
  margin: 0 0 36px;
}

/* ---- Signature element: torn journal-page pull quote ---- */
.rsauX7-quotecard {
  position: relative;
  background: var(--rsauX7-paper);
  border: 1px solid var(--rsauX7-line);
  border-left: 3px solid var(--rsauX7-brass);
  padding: 34px clamp(24px, 4vw, 44px) 30px;
  margin: 0 0 40px;
  max-width: 640px;
  box-shadow: 0 16px 30px -18px var(--rsauX7-shadow);
  clip-path: polygon(
    0% 2%, 4% 0%, 12% 1.5%, 20% 0%, 30% 1.2%, 40% 0%, 52% 1.5%,
    64% 0%, 76% 1.2%, 88% 0%, 100% 1.6%, 100% 100%, 0% 100%
  );
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.rsauX7-quotecard.rsauX7-in-view {
  opacity: 1;
  transform: translateY(0);
}

.rsauX7-seal {
  position: absolute;
  top: -22px;
  right: 28px;
  width: 52px;
  height: 52px;
  color: var(--rsauX7-maroon);
  background: var(--rsauX7-bg);
  border-radius: 50%;
  padding: 4px;
}

.rsauX7-seal svg { width: 100%; height: 100%; }

.rsauX7-quote-hi {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.6;
  margin: 0 0 10px;
  color: var(--rsauX7-ink);
}

.rsauX7-quote-en {
  font-family: 'Jost', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: var(--rsauX7-ink-soft);
  margin: 0;
}

/* ---- Stats row ---- */
.rsauX7-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 4vw, 56px);
  padding: 24px 0 36px;
  border-top: 1px solid var(--rsauX7-line);
  border-bottom: 1px solid var(--rsauX7-line);
  margin: 0 0 44px;
}

.rsauX7-stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  min-width: 120px;
}

.rsauX7-stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--rsauX7-brass);
  line-height: 1;
}

.rsauX7-stat-plus {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--rsauX7-brass);
}

.rsauX7-stat-label {
  flex-basis: 100%;
  font-family: 'Jost', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rsauX7-ink-soft);
}

/* ---- Chronological journey ---- */
.rsauX7-timeline {
  position: relative;
  display: grid;
  gap: 30px;
  margin: 0 0 48px;
  padding-left: 26px;
  border-left: 1px solid var(--rsauX7-line);
}

.rsauX7-chapter {
  position: relative;
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.rsauX7-chapter.rsauX7-in-view {
  opacity: 1;
  transform: translateX(0);
}

.rsauX7-chapter::before {
  content: "";
  position: absolute;
  left: -31px;
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rsauX7-brass-light);
  box-shadow: 0 0 0 4px var(--rsauX7-bg);
}

.rsauX7-chapter-no {
  display: block;
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rsauX7-brass);
  margin-bottom: 6px;
}

.rsauX7-chapter-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.28rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--rsauX7-ink);
}

.rsauX7-chapter-text {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--rsauX7-ink-soft);
  max-width: 56ch;
  margin: 0;
}

/* ---- CTA button ---- */
.rsauX7-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Jost', sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--rsauX7-bg);
  background: linear-gradient(120deg, var(--rsauX7-brass), var(--rsauX7-brass-light));
  padding: 16px 30px;
  border-radius: 3px;
  box-shadow: 0 14px 26px -12px rgba(169, 128, 61, 0.55);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.rsauX7-cta svg {
  width: 18px;
  height: 18px;
  transition: transform 0.25s ease;
}

.rsauX7-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 32px -12px rgba(169, 128, 61, 0.65);
}

.rsauX7-cta:hover svg {
  transform: translateX(4px);
}

.rsauX7-cta:focus-visible,
.rsauX7-about a:focus-visible {
  outline: 2px solid var(--rsauX7-maroon);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------
   3. Responsive breakpoints
   --------------------------------------------------------------- */
@media (max-width: 980px) {
  .rsauX7-container {
    grid-template-columns: 1fr;
  }
  .rsauX7-collage {
    max-width: 420px;
    margin: 0 auto 64px;
  }
  .rsauX7-intro,
  .rsauX7-chapter-text {
    max-width: none;
  }
}

@media (max-width: 560px) {
  .rsauX7-about {
    padding: 56px 18px;
  }
  .rsauX7-photo--main { width: 88%; }
  .rsauX7-caption { bottom: -30px; font-size: 1.2rem; }
  .rsauX7-stats { gap: 24px; }
  .rsauX7-quotecard { padding: 30px 20px 26px; }
  .rsauX7-timeline { padding-left: 20px; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .rsauX7-collage,
  .rsauX7-quotecard,
  .rsauX7-chapter,
  .rsauX7-photo,
  .rsauX7-cta,
  .rsauX7-cta svg {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/*Second Section CSS By Rishabh Ends*/