/* =============================
        HERO BACKGROUND
============================= */

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
}

/* =============================
        LIGHT OVERLAY
============================= */

.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.12);
  z-index: -1;
}

/* =============================
        HERO CONTENT
============================= */

.about-hero .container {
  color: #fff;
}

.about-hero {
  position: relative;
  width: 100%;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

/* =============================
        TITLE
============================= */

.drop-text {
  font-family: Georgia, serif;
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: bold;
  color: #f7e6c4;
  letter-spacing: 1px;
  text-shadow: 0 5px 18px rgba(0, 0, 0, 0.25);
}

.drop-text span {
  display: inline-block;
  opacity: 0;
  transform: translateY(-180px);
  animation: dropLetter 0.7s forwards;
}

/* Animation Delay */

.drop-text span:nth-child(1) {
  animation-delay: 0.1s;
}
.drop-text span:nth-child(2) {
  animation-delay: 0.18s;
}
.drop-text span:nth-child(3) {
  animation-delay: 0.26s;
}
.drop-text span:nth-child(4) {
  animation-delay: 0.34s;
}
.drop-text span:nth-child(5) {
  animation-delay: 0.42s;
}
.drop-text span:nth-child(6) {
  animation-delay: 0.5s;
}
.drop-text span:nth-child(7) {
  animation-delay: 0.58s;
}
.drop-text span:nth-child(8) {
  animation-delay: 0.66s;
}
.drop-text span:nth-child(9) {
  animation-delay: 0.74s;
}
.drop-text span:nth-child(10) {
  animation-delay: 0.82s;
}
.drop-text span:nth-child(11) {
  animation-delay: 0.9s;
}
.drop-text span:nth-child(12) {
  animation-delay: 0.98s;
}
.drop-text span:nth-child(13) {
  animation-delay: 1.06s;
}
.drop-text span:nth-child(14) {
  animation-delay: 1.14s;
}
.drop-text span:nth-child(15) {
  animation-delay: 1.22s;
}
.drop-text span:nth-child(16) {
  animation-delay: 1.3s;
}

@keyframes dropLetter {
  0% {
    opacity: 0;
    transform: translateY(-180px);
  }

  60% {
    opacity: 1;
    transform: translateY(18px);
  }

  80% {
    transform: translateY(-8px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =============================
        DESCRIPTION
============================= */

.hero-description {
  margin-top: 25px;
  font-size: 1.35rem;
  color: #f8f2e7;

  display: inline-block;

  overflow: hidden;
  white-space: nowrap;

  width: 0;

  animation:
    typing 3.5s steps(20, end) 1.7s forwards,
    blink 0.7s step-end 1.7s 5;
}

@keyframes typing {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

/* =============================
        RESPONSIVE
============================= */

@media (max-width: 768px) {
  .drop-text {
    font-size: 2.6rem;
  }

  .hero-description {
    font-size: 1rem;
    width: auto;
    max-width: 90%;
  }
}

/* =========================================
   ABOUT AUTHOR SECTION
========================================= */

.about-section {
  position: relative;
  width: 100%;
  padding: 100px 0;
  background: #f4e5c5;
  overflow: hidden;
}

/* Decorative background removed */
.about-section::before {
  display: none;
}

/* Container */

.about-section .container {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px;
}

/* =========================================
   MAIN LAYOUT
========================================= */

.about-wrapper {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 80px;
}

/* =========================================
   LEFT SIDE
========================================= */

.about-left {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Author Frame */

.author-frame {
  position: relative;
  width: 380px;
  max-width: 100%;
  padding: 12px;

  background: linear-gradient(135deg, #6b3f1d, #c89b4a, #7a4b24);

  border-radius: 4px;

  box-shadow:
    0 12px 25px rgba(50, 25, 10, 0.18),
    0 4px 8px rgba(50, 25, 10, 0.08);
}

/* Inner Border */

.author-frame::before {
  content: "";
  position: absolute;
  inset: 7px;

  border: 1px solid rgba(255, 235, 180, 0.7);

  pointer-events: none;
}

/* Author Photo */

.author-photo {
  display: block;
  width: 100%;
  height: 450px;

  object-fit: cover;
  object-position: center;

  border-radius: 2px;
}

/* =========================================
   QUOTE CARD
========================================= */

.quote-card {
  position: relative;

  width: 90%;
  max-width: 380px;

  margin-top: 35px;
  padding: 30px 35px;

  background: rgba(255, 250, 235, 0.95);

  border-left: 4px solid #a8752b;

  box-shadow: 0 8px 18px rgba(70, 40, 15, 0.1);

  text-align: center;
}

.quote-card i {
  display: block;

  margin-bottom: 15px;

  font-size: 28px;

  color: #a8752b;
}

.quote-card p {
  margin: 0;

  font-family: "Playfair Display", Georgia, serif;

  font-size: 18px;

  line-height: 1.7;

  font-style: italic;

  color: #4a2c18;
}

.quote-card span {
  display: block;

  margin-top: 15px;

  font-family: "Playfair Display", Georgia, serif;

  font-size: 15px;

  color: #7b5128;

  font-weight: 600;
}

/* =========================================
   RESPONSIVE - MOBILE
========================================= */

@media (max-width: 576px) {
  .about-section {
    padding: 60px 0;
  }

  .about-section .container {
    padding: 0 20px;
  }

  .about-wrapper {
    gap: 45px;
  }

  .author-frame {
    width: 100%;
    max-width: 330px;
  }

  .author-photo {
    height: 390px;
  }

  .quote-card {
    width: 100%;
    padding: 25px 22px;
  }

  .quote-card p {
    font-size: 16px;
  }

  .about-right h2 {
    font-size: 38px;
  }

  .featured-label {
    font-size: 12px;
    letter-spacing: 1.5px;
  }

  .about-right p,
  .about-right .intro {
    font-size: 16px;
    line-height: 1.8;
    text-align: justify;
  }
}

/* =========================================
   INTRO PARAGRAPH
========================================= */

.about-right .intro {
  
  text-align: justify;
  line-height: 1.9;
}

.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: -1;
}

.about-right h2 {
  font-family: "Playfair Display", serif;
  font-size: 58px;
  font-weight: 700;
  color: #4b2b17;
  margin-bottom: 25px;
}

.intro {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.8rem;
  line-height: 1.8;
  letter-spacing: 0.3px;
  color: #444;
}

/* =========================================
   ABOUT SECTION SCROLL ANIMATION
========================================= */

/* Image starts from left */
.about-left {
  opacity: 0;
  transform: translateX(-100px);
  transition: all 1s ease;
}

/* Text starts from right */
.about-right {
  opacity: 0;
  transform: translateX(100px);
  transition: all 1s ease;
}

/* When visible */
.about-section.show .about-left,
.about-section.show .about-right {
  opacity: 1;
  transform: translateX(0);
}

/* Slight delay for text */
.about-section.show .about-right {
  transition-delay: 0.2s;
}

.hero-description.typing.typing-about {
  max-width: 700px;
  margin: auto;
  font-family: "Cormorant Garamond", serif;
  font-size: 2rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1.8;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

/* ==========================================
   ABOUT SECTION BACKGROUND
========================================== */

.about-section {
  position: relative;
  padding: 100px 0;
  background-image: url("Images/aboutpageBG.png"); /* Replace with your image */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: hidden;
}

.about-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.1); /* Slight dark overlay */
  z-index: 1;
}

.about-section .container {
  position: relative;
  z-index: 2;
}











.featured-label{
    font-family: Georgia, serif;
    font-size:1.5rem;
    font-weight:bold;
    color:#8b5a24;
    letter-spacing:1px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    text-align:center;
}

.featured-label i{
    font-size:1.5rem;
}




.about-right h2 {
    font-family: Georgia, serif;
    font-weight: bold;
    color: #5c3a1b;
    letter-spacing: 1px;
    text-shadow: 0 5px 18px rgba(0, 0, 0, 0.25);
}



































































/*=========================================
        ABOUT SECTION
=========================================*/

.about-section{

    position:relative;

    padding:120px 0;

    overflow:hidden;

    background:url("Images/2222.png") center/cover no-repeat;

}


/*=========================================
        CONTAINER
=========================================*/

.about-section .container{

    width:min(1200px,92%);

    margin:auto;

    position:relative;

    z-index:2;

}


/*=========================================
        SECTION TITLE
=========================================*/

.about-heading{

    display:flex;

    flex-direction:column;

    align-items:center;

    margin-bottom:90px;

}

.feather-icon{

    font-size:2.6rem;

    color:#8d6432;

    margin-bottom:12px;

}

.about-heading h2{

    font-family:Georgia,serif;

    font-size:clamp(2.rem,5vw,4.5rem);

    font-weight:bold;

    letter-spacing:2px;

    color:#5d3b1f;

    text-transform:uppercase;

    margin-bottom:22px;

    text-shadow:0 3px 12px rgba(0,0,0,.08);

}


/* Decorative Line */

.heading-divider{

    width:260px;

    height:2px;

    background:#b98b46;

    position:relative;

}

.heading-divider::before{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:18px;

    height:18px;

    border:2px solid #b98b46;

    transform:translate(-50%,-50%) rotate(45deg);

    background:#f8f1e3;

}



/*=========================================
        CONTENT WRAPPER
=========================================*/

.about-wrapper{

    display:grid;

    grid-template-columns:430px 1fr;

    gap:75px;

    align-items:center;

}



/*=========================================
        LEFT COLUMN
=========================================*/

.about-left{

    display:flex;

    justify-content:center;

}



/*=========================================
        AUTHOR FRAME
=========================================*/

.author-frame{

    position:relative;

    width:390px;

    padding:12px;

    border-radius:6px;

    background:linear-gradient(
        145deg,
        #d8b06a,
        #8d6230
    );

    box-shadow:

        0 18px 45px rgba(0,0,0,.20),

        0 4px 12px rgba(0,0,0,.18);

}



/* Soft watercolor glow behind portrait */

.author-frame::before{

    content:"";

    position:absolute;

    width:120%;

    height:120%;

    left:-10%;

    top:-10%;

    background:

        radial-gradient(
            circle,
            rgba(193,146,72,.22),
            transparent 72%
        );

    z-index:-1;

}



/*=========================================
        AUTHOR PHOTO
=========================================*/

.author-photo{

    width:100%;

    display:block;

    border:6px solid #f6efe4;

    object-fit:cover;

}



/*=========================================
        RIGHT COLUMN
=========================================*/

.about-right{

    display:flex;

    justify-content:center;

}



/*=========================================
        BIOGRAPHY CARD
=========================================*/

.paper-card{

    width:100%;

    max-width:620px;

    background:

        linear-gradient(
            rgba(255,255,255,.70),
            rgba(255,255,255,.70)
        ),

        url("Images/paper-texture.webp");

    background-size:cover;

    padding:65px;

    border-radius:2px;

    box-shadow:

        0 22px 55px rgba(0,0,0,.14);

    position:relative;

}



/* Soft paper edges */

.paper-card::before{

    content:"";

    position:absolute;

    inset:12px;

    border:1px solid rgba(167,118,55,.18);

    pointer-events:none;

}



/* Decorative stain */

.paper-card::after{

    content:"";

    position:absolute;

    width:160px;

    height:160px;

    right:-60px;

    bottom:-60px;

    background:

        radial-gradient(
            circle,
            rgba(198,164,104,.18),
            transparent 70%
        );

    border-radius:50%;

}







/*=========================================
        AUTHOR NAME
=========================================*/

.paper-card h3{

    font-family:Georgia,serif;

    font-size:clamp(3rem,3vw,2rem);

    font-weight:bold;

    color:#4b2e16;

    line-height:1;

    letter-spacing:1px;

    margin-bottom:28px;

    text-shadow:
        0 3px 10px rgba(0,0,0,.08);

}



/*=========================================
        GOLD DIVIDER
=========================================*/

.gold-divider{

    width:340px;

    height:2px;

    background:#b98b46;

    margin-bottom:38px;

    position:relative;

}

.gold-divider::before{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    width:16px;

    height:16px;

    transform:
        translate(-50%,-50%)
        rotate(45deg);

    background:#ffffff;

    border:2px solid #b98b46;

}

.gold-divider::after{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:70px;

    height:2px;

    background:#b98b46;

}



/*=========================================
        BIOGRAPHY
=========================================*/

.intro{

    font-family:Georgia,serif;

    font-size:1.42rem;

    line-height:2.1;

    color:#4f463d;

    text-align:justify;

    letter-spacing:.25px;

    margin-bottom:55px;

}



/* Drop Cap */

.intro::first-letter{

    float:left;

    font-size:4.3rem;

    line-height:1;

    padding-right:10px;

    color:#9b6a31;

    font-weight:bold;

}



/*=========================================
        QUOTE BOX
=========================================*/

.quote-box{

    position:relative;

    text-align:center;

    padding:30px 20px;

    margin-top:10px;

}



/* Top Divider */

.quote-box::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    transform:translateX(-50%);

    width:160px;

    height:1px;

    background:#c9a061;

}



/* Bottom Divider */

.quote-box::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:0;

    transform:translateX(-50%);

    width:160px;

    height:1px;

    background:#c9a061;

}



/*=========================================
        QUOTE TEXT
=========================================*/




/*=========================================
        QUOTE ICONS
=========================================*/




/*=========================================
        PAPER HOVER
=========================================*/

.paper-card{

    transition:
        transform .45s ease,
        box-shadow .45s ease;

}

.paper-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 28px 70px rgba(0,0,0,.18);

}



/*=========================================
        IMAGE HOVER
=========================================*/

.author-frame{

    transition:
        transform .5s ease,
        box-shadow .5s ease;

}

.author-frame:hover{

    transform:translateY(-10px);

    box-shadow:

        0 35px 70px rgba(0,0,0,.22),

        0 8px 18px rgba(0,0,0,.20);

}



/*=========================================
        IMAGE ZOOM
=========================================*/

.author-photo{

    transition:transform .6s ease;

}

.author-frame:hover .author-photo{

    transform:scale(1.03);

}



/*=========================================
        AUTHOR HIGHLIGHTS
=========================================*/

.author-highlights{

    margin-top:90px;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

    position:relative;

}



/* Decorative top line */

.author-highlights::before{

    content:"";

    position:absolute;

    top:-40px;

    left:0;

    width:100%;

    height:1px;

    background:rgba(171,129,69,.28);

}



/*=========================================
        HIGHLIGHT CARD
=========================================*/

.highlight{

    background:rgba(255,255,255,.28);

    backdrop-filter:blur(6px);

    border:1px solid rgba(184,146,84,.25);

    padding:35px 22px;

    text-align:center;

    border-radius:10px;

    transition:
        transform .45s ease,
        box-shadow .45s ease,
        border-color .45s ease;

}



/*=========================================
        ICON
=========================================*/

.highlight i{

    font-size:2.2rem;

    color:#9c6b32;

    margin-bottom:18px;

}



/*=========================================
        TITLE
=========================================*/

.highlight h4{

    font-family:Georgia,serif;

    font-size:1.15rem;

    letter-spacing:1.5px;

    color:#5b3b1c;

    margin-bottom:14px;

}



/*=========================================
        DESCRIPTION
=========================================*/

.highlight span{

    display:block;

    font-family:Georgia,serif;

    color:#6f6358;

    font-size:1rem;

    line-height:1.7;

}



/*=========================================
        HOVER
=========================================*/

.highlight:hover{

    transform:translateY(-10px);

    border-color:#b88b4d;

    box-shadow:

        0 20px 45px rgba(0,0,0,.10);

}

.highlight:hover i{

    transform:scale(1.15);

    transition:.4s;

}



/*=========================================
        SECTION FADE
=========================================*/

.about-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle at top,

            rgba(255,255,255,.18),

            transparent 70%

        );

    pointer-events:none;

}



/*=========================================
        SCROLL ANIMATION
=========================================*/

.about-heading,

.about-left,

.paper-card,

.highlight{

    opacity:0;

    transform:translateY(60px);

    transition:

        opacity .9s ease,

        transform .9s ease;

}



.about-heading.show,

.about-left.show,

.paper-card.show,

.highlight.show{

    opacity:1;

    transform:translateY(0);

}



/*=========================================
        RESPONSIVE
=========================================*/

@media(max-width:1100px){

.about-wrapper{

    grid-template-columns:1fr;

    gap:70px;

}

.about-left{

    order:1;

}

.about-right{

    order:2;

}

.author-highlights{

    grid-template-columns:repeat(2,1fr);

}

.author-frame{

    width:360px;

}

}



@media(max-width:768px){

.about-section{

    padding:90px 0;

}

.paper-card{

    padding:40px;

}

.author-frame{

    width:300px;

}

.author-highlights{

    grid-template-columns:1fr;

}

.paper-card h3{

    font-size:3rem;

}

.about-heading h2{

    font-size:2.5rem;

}

.intro{

    font-size:1.1rem;

    line-height:1.9;

}

.quote-box p{

    font-size:1.45rem;

}

.gold-divider{

    width:220px;

}

}



@media(max-width:500px){

.author-frame{

    width:250px;

}

.paper-card{

    padding:30px;

}

.paper-card h3{

    font-size:2.3rem;

}

.about-heading h2{

    font-size:2rem;

}

.feather-icon{

    font-size:2rem;

}

.quote-box i{

    font-size:2rem;

}

}


.about-section{
    min-height:100vh;
    padding:40px 0;
    display:flex;
    align-items:center;
}