/* =========================================
   FAIRYTALES ACADEMY — ABOUT PAGE CSS
   ========================================= */

/* ── CSS Variables ── */
:root {
  --purple-dark:   #3b1f6b;   /* headings, year labels */
  --purple-mid:    #5c2d91;   /* subheadings, accents */
  --purple-light:  #f0e9f8;   /* world_wonder bg */
  --pink:          #e91e8c;   /* badge, counter, dot accent */
  --pink-muted:    #c45c9a;   /* avatar bg in stories */
  --white:         #ffffff;
  --text-body:     #4a4a5a;   /* paragraphs */
  --text-muted:    #7a7a8a;   /* small labels */
  --border-radius: 20px;
  --font-display:  'Playfair Display', Georgia, serif;
  --font-body:     'Playfair Display', Georgia, serif;
}

/* =========================================
   SECTION 1 — ABOUT US
   ========================================= */
.about_us {
  padding: 80px 0 80px;
  background: #FFFBFF;
}

.about_us .about_wrap_txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* height: 100%; */
  padding-right: 40px;
}

/* Badge */
.about_us .top_txt_badge {
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #E02890;
  margin-bottom: 18px;
}

/* H1 */
.about_us h1 {
  font-family: var(--font-display);
  font-size: 96px;
  font-weight: 700;
  line-height: 96px;
  color: #602C7F;
  margin: 0 0 28px;
}

/* Body paragraph */
.about_us p {
  font-size: 19px;
  line-height: 32.5px;
  color: #4B454D;
  max-width: 520px;
  margin-bottom: 26px;
}

/* Number blocks row */
.about_us .num_blocks {
  display: flex;
  gap: 0;
}

.about_us .num_block {
  flex: 0 0 auto;
  background: var(--white);
  border-radius: 24px;
  padding: 21px 36px;
  margin-right: 16px;
  min-width: 150px;
  box-shadow: 0px 20px 40px 0px #602C7F0F;
  border: 1px solid #F2EAF5;
}

.about_us .num_block h2 {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 800;
  color: var(--pink);
  margin: 0 0 -5px;
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.about_us .num_block h2 .appened_sign {
  font-size: 32px;
  color: var(--pink);
}

.about_us .num_block > span {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.7px;
  text-transform: uppercase;
  color: #4B454D;
}
.about_us .num_blocks .num_block:last-child h2,
 .about_us .num_blocks .num_block:last-child h2 .appened_sign {
    color: #A24CA1;
}
/* Image wrapper */
.about_us .about_wrap_image {
  /* height: 100%; */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* Added padding to ensure the shadow isn't clipped */
  /* padding: 40px; */
}

.about_us .about_wrap_image img {
  width: 100%;
  max-width: 540px;
  /* Increased radius to match the softer look in the image */
  border-radius: 60px; 
  object-fit: cover;
  /* Matches the vertical/portrait orientation shown in the design */
  aspect-ratio: 4 / 5; 
  display: block;
  
  /* The "Design" White Border */
  border: 15px solid #ffffff;
  
  /* Soft, colored shadow to match the Fairytales aesthetic */
  box-shadow: 0px 30px 60px -10px rgba(75, 36, 117, 0.15);
}

/* =========================================
   SECTION 2 — WORLD OF WONDER (Timeline)
   ========================================= */
.world_wonder {
  background: #F8F0F8;
  padding: 80px 0 100px;
}
.world_wonder.wonder1 .container{  max-width: 1024px; margin: 0 auto;}
.world_wonder .heading {
  text-align: center;
  margin-bottom: 60px;
}

.world_wonder .heading h2 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 800;
  color: #602C7F;
  margin: 0 0 14px;
}

.world_wonder .heading p {
  /* font-family: var(--font-body); */
  font-size: 16px;
  color: #4B454D;
  margin: 0;
}

/* Timeline blocks container */
.world_wonder .blocks {
  display: flex;
  flex-direction: column;
  gap: 40px;
  position: relative;
}

/* Individual block */
.world_wonder .block {
  position: relative;
  background: var(--white);
  border-radius: 20px;
  padding: 32px 36px 32px;
  max-width: 420px;
  width: 55%;
  box-shadow: 0 2px 20px rgba(91, 45, 145, 0.06);
}

/* Alternating left / right */
.world_wonder .block:nth-child(odd) {
  align-self: flex-start;
  border-top: 5px solid var(--pink);
}

.world_wonder .block:nth-child(even) {
  align-self: flex-end;
  border-top: 5px solid var(--purple-mid);
}

/* Year */
.world_wonder .block .year {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--pink);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.world_wonder .block:nth-child(even) .year {
  color: var(--purple-mid);
}

/* Block h3 */
.world_wonder .block h3 {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  color: var(--purple-dark);
  margin: 0 0 10px;
}

/* Block p */
.world_wonder .block p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-body);
  margin: 0;
}

/* Central dot on timeline */
.world_wonder .block::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pink);
  border: 5px solid #c8aee8;
}

.world_wonder .block:nth-child(odd)::after {
  right: -52px;
  background: var(--pink);
  border-color: #c5b3e0;
}

.world_wonder .block:nth-child(even)::after {
  left: -52px;
  background: var(--purple-mid);
  border-color: #c5b3e0;
}


/* =========================================
   SECTION 3 — OUR DREAM-MAKERS
   ========================================= */
/* Reuses .world_wonder heading styles, different bg */
.world_wonder + .world_wonder {
  background: var(--white);
}

.dream_makers {
  display: flex;
  justify-content: center;
  gap: 60px;
  flex-wrap: wrap;
  padding-top: 20px;
}

.dream_maker {
  text-align: center;
}

/* Avatar circle */
.dream_maker .avatar {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  background: #dde4f0;
  margin: 0 auto 20px;
  border: 6px solid #c8d6ee;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dream_maker .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Name */
.dream_maker h3 {
  font-size: 20px;
  font-weight: 700;
  color: #1E1A20;
  margin: 0 0 6px;
}

/* Title/Role */
.dream_maker p {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #E02890;
  margin: 0;
}


/* =========================================
   SECTION 4 — STORIES
   ========================================= */
.stories {
  background: #602C7F;
  border-radius: 28px;
  margin: 60px auto;
  max-width: 1200px;
  padding: 64px 60px 64px;
  position: relative;
  overflow: hidden;
}

/* Big decorative 99 */
.stories .heading {
  position: relative;
  text-align: center;
  margin-bottom: 48px;
}

.stories .heading h2 {
  font-family: var(--font-display);
  font-size: 60px;
  font-weight: 700;
  color: var(--white);
  margin: 0 auto;
  position: relative;
  z-index: 1;
  max-width: 860px;
  line-height: 60px;
}

.stories .heading .float_num {
  position: absolute;
  top: -99px;
  right: -36px;
  font-family: var(--font-display);
  font-size: 120px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.08);
  line-height: 1;
  pointer-events: none;
  margin: 0;
  z-index: 0;
}

/* Stories grid */
.stories > .stories {
  /* Inner .stories div acting as grid */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  background: transparent;
  margin: 0;
  padding: 0;
  border-radius: 0;
  max-width: none;
}

/* Individual story card */
.story {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 32px 28px 28px;
  backdrop-filter: blur(4px);
}

.story > p {
  font-size: 20px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 28px;
}

.wrap_story_details {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Avatar initials circle */
.story .avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--pink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.story .avatar h3 {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
  margin: 0;
}

.story .txt h3 {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 3px;
}

.story .txt span {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}


/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 991px) {
  .about_us .about_wrap_txt {
    padding-right: 0;
    margin-bottom: 40px;
  }

  .about_us .about_wrap_image {
    justify-content: center;
  }

  .world_wonder .block {
    width: 80%;
  }

  .world_wonder .block:nth-child(odd)::after,
  .world_wonder .block:nth-child(even)::after {
    display: none;
  }

  .dream_makers {
    gap: 36px;
  }
}

@media (max-width: 767px) {
  .about_us {
    padding: 48px 0;
  }

  .world_wonder {
    padding: 48px 0 64px;
  }

  .world_wonder .block {
    width: 100%;
    align-self: stretch !important;
  }

  .stories {
    padding: 48px 24px;
    border-radius: 20px;
    margin: 32px 16px;
  }

  .stories > .stories {
    grid-template-columns: 1fr;
  }

  .dream_makers {
    gap: 28px;
  }

  .dream_maker .avatar {
    width: 130px;
    height: 130px;
  }
}