/* =========================
   GLOBAL STYLES
========================= */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter', sans-serif;
    background:#ffffff;
    color:#111;
    line-height:1.8;
}

/* =========================
   NAVBAR
========================= */
nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 8%;
    background:#fff;
    border-bottom:1px solid #eee;
    position:sticky;
    top:0;
    z-index:1000;
}

.logo img{
    height:55px;
}

/* =========================
   DESKTOP NAV LINKS
========================= */

nav ul{
    display:flex;
    gap:30px;
    list-style:none;
    align-items:center;
}

nav ul a{
    text-decoration:none;
    color:#111;
    font-weight:500;
    transition:.3s ease;
    position:relative;
}

/* luxury hover underline */
nav ul a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-5px;
    width:0%;
    height:2px;
    background:#5B1166;
    transition:0.3s ease;
}

nav ul a:hover::after,
nav ul a.active::after{
    width:100%;
}

nav ul a:hover,
nav ul a.active{
    color:#5B1166;
}

/* =========================
   BUTTONS (LUXURY SYSTEM)
========================= */

.primary-btn,
.secondary-btn,
.nav-btn{
    background:#5B1166;
    color:#fff;
    text-decoration:none;
    padding:12px 24px;
    border-radius:8px;
    font-weight:600;
    transition:.3s ease;
}

.nav-btn:hover{
    background:#430c4b;
    transform:translateY(-2px);
}

/* =========================
   HAMBURGER MENU (LUXURY)
========================= */

.menu-toggle{
    display:none;
    flex-direction:column;
    gap:5px;
    cursor:pointer;
}

.menu-toggle span{
    width:28px;
    height:2px;
    background:#5B1166;
    border-radius:3px;
    transition:0.3s ease;
}

/* hover effect */
.menu-toggle:hover span{
    background:#430c4b;
}

/* =========================
   MOBILE NAV
========================= */

@media (max-width: 768px){

    .menu-toggle{
        display:flex;
    }

    nav ul{
        position:absolute;
        top:80px;
        left:0;
        right:0;
        background:#fff;
        flex-direction:column;
        gap:20px;
        padding:20px 8%;
        display:none;
        border-bottom:1px solid #eee;
        box-shadow:0 10px 30px rgba(0,0,0,0.05);
    }

    nav ul.active{
        display:flex;
        animation:fadeDown 0.4s ease;
    }

    .nav-btn{
        display:none;
    }
}

/* smooth luxury dropdown */
@keyframes fadeDown{
    from{
        opacity:0;
        transform:translateY(-10px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}
/* =========================
   HERO STORY SECTION
   MODERN + SLEEK
========================= */

.page-section{
  padding: 140px 8%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  background: linear-gradient(135deg, #ffffff, #f7f2fa);
  position: relative;
  overflow: hidden;
}

/* SOFT PURPLE GLOW BACKGROUND */
.page-section::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at top,
    rgba(124,58,237,0.12),
    transparent 60%
  );
  opacity: 0.6;
  pointer-events: none;
}

/* CONTENT WRAPPER */
.section-title{
  max-width: 800px;
  position: relative;
  z-index: 2;
  animation: fadeUp 1s ease forwards;
}

/* MAIN HEADING */
.section-title h1{
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 700;
  color: #111;
  letter-spacing: -1px;
  margin-bottom: 18px;

  transition: 0.4s ease;
}

/* HOVER TEXT GLOW */
.section-title h1:hover{
  color: #5B1166;
  transform: translateY(-3px);
}

/* PARAGRAPH */
.section-title p{
  font-size: 1.1rem;
  color: #6b7280;
  line-height: 1.9;

  max-width: 650px;
  margin: 0 auto;

  transition: 0.4s ease;
}

/* SOFT HOVER EFFECT */
.section-title p:hover{
  color: #333;
  transform: translateY(-2px);
}

/* ENTRY ANIMATION */
@keyframes fadeUp{
  from{
    opacity: 0;
    transform: translateY(20px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

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

@media(max-width:768px){
  .page-section{
    padding: 100px 6%;
  }

  .section-title p{
    font-size: 1rem;
  }
}
/* Reverse Layout */

.reverse{
    direction:rtl;
}

.reverse .split-text,
.reverse .split-image{
    direction:ltr;
}
/* =========================
   CTA SECTION - PREMIUM
========================= */

.cta-section{
  padding: 100px 8%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* CTA BOX */
.cta-box{
  width: 100%;
  max-width: 850px;
  text-align: center;

  background: linear-gradient(135deg, #ffffff, #f7f2fa);
  border: 1px solid rgba(234,234,234,0.8);
  border-radius: 30px;

  padding: 70px 40px;

  position: relative;
  overflow: hidden;

  box-shadow: 0 25px 70px rgba(0,0,0,0.08);

  transition: all 0.4s ease;
}

/* SOFT PURPLE GLOW BACKGROUND */
.cta-box::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at top,
    rgba(124,58,237,0.15),
    transparent 60%
  );
  opacity: 0;
  transition: 0.5s ease;
}

/* HOVER LIFT */
.cta-box:hover{
  transform: translateY(-8px);
  box-shadow: 0 35px 90px rgba(124,58,237,0.18);
  border-color: rgba(124,58,237,0.4);
}

.cta-box:hover::before{
  opacity: 1;
}

/* TITLE */
.cta-box h2{
  font-size: 2.6rem;
  color: #111;
  margin-bottom: 15px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

/* SUBTEXT */
.cta-box p{
  font-size: 1.1rem;
  color: #6b7280;
  margin-bottom: 30px;
  line-height: 1.8;
}

/* BUTTON ENHANCEMENT */
.cta-box .primary-btn{
  padding: 16px 32px;
  font-size: 1rem;
  border-radius: 50px;

  box-shadow: 0 15px 40px rgba(124,58,237,0.25);
  transition: all 0.35s ease;
}

/* BUTTON HOVER */
.cta-box .primary-btn:hover{
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 25px 60px rgba(0,0,0,0.2);
}
/* =========================
   CTA BUTTON HOVER EFFECT
========================= */

.primary-btn{
  position: relative;
  overflow: hidden;
  text-decoration: none;
  transition: all 0.35s ease;
}

/* LIFT + GLOW ON HOVER */
.primary-btn:hover{
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 20px 50px rgba(124,58,237,0.35);
}

/* SHINE EFFECT */
.primary-btn::before{
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.4),
    transparent
  );
  transform: skewX(-20deg);
}

/* ANIMATE SHINE ON HOVER */
.primary-btn:hover::before{
  animation: shine 0.8s ease;
}

@keyframes shine{
  0%{
    left: -75%;
  }
  100%{
    left: 130%;
  }
}
/* =========================
   RESPONSIVE
========================= */

@media(max-width:768px){
  .cta-box{
    padding: 50px 25px;
  }

  .cta-box h2{
    font-size: 2rem;
  }

  .cta-box p{
    font-size: 1rem;
  }
}
/* =========================
   FOOTER - LUXURY MODERN
========================= */

footer{
  background: #0d0d0d;
  color: #ffffff;
  padding: 80px 8% 25px;
  margin-top: 100px;
  position: relative;
  overflow: hidden;
}

/* SOFT PURPLE GLOW BACKGROUND */
footer::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at top,
    rgba(124,58,237,0.18),
    transparent 60%
  );
  opacity: 0.4;
  pointer-events: none;
}

/* GRID LAYOUT */
.footer-container{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
  position: relative;
  z-index: 2;
}

/* BRAND SECTION */
.footer-brand h2{
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.footer-brand h2 span{
  color: #7c3aed;
}

.footer-brand p{
  color: #b3b3b3;
  line-height: 1.8;
  font-size: 0.95rem;
}

/* LINKS */
.footer-links h4,
.footer-contact h4{
  font-size: 1.1rem;
  margin-bottom: 15px;
  color: #ffffff;
  position: relative;
}

.footer-links a{
  display: block;
  color: #b3b3b3;
  text-decoration: none;
  margin: 8px 0;
  font-size: 0.95rem;

  transition: all 0.3s ease;
  position: relative;
}

/* LINK HOVER */
.footer-links a:hover{
  color: #7c3aed;
  transform: translateX(6px);
}

/* CONTACT */
.footer-contact p{
  color: #b3b3b3;
  font-size: 0.95rem;
  margin-bottom: 8px;
  transition: 0.3s ease;
}

.footer-contact p:hover{
  color: #ffffff;
}

/* BOTTOM BAR */
.footer-bottom{
  text-align: center;
  margin-top: 50px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.08);

  color: #777;
  font-size: 0.9rem;

  position: relative;
  z-index: 2;
}

/* =========================
   HOVER GLOW EFFECT
========================= */

footer:hover::before{
  opacity: 0.7;
  transition: 0.5s ease;
}

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

@media(max-width:768px){
  footer{
    padding: 60px 6% 20px;
    text-align: center;
  }

  .footer-links a:hover{
    transform: none;
  }
}
/* =========================
   RESPONSIVE
========================= */

@media(max-width:900px){
    .split-section{
        grid-template-columns:1fr;
        gap:40px;
        padding:70px 8%;
    }

    .reverse{
        direction:ltr;
    }

    .section-title h1{
        font-size:2.3rem;
    }

    .split-text h2{
        font-size:1.7rem;
    }

    .cta-box h2{
        font-size:2rem;
    }
}
/* =========================
   HIGH SCHOOL STORY SECTION
========================= */

.highschool-story{
    padding:120px 8%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
    background:linear-gradient(
        135deg,
        #ffffff,
        #faf5fc
    );
}

/* IMAGE */

.story-image{
    overflow:hidden;
    border-radius:25px;
}

.story-image img{
    width:100%;
    display:block;
    border-radius:25px;
    transition:0.6s ease;
    box-shadow:0 20px 40px rgba(0,0,0,0.15);
}

.story-image:hover img{
    transform:scale(1.06);
}

/* CONTENT */

.story-content h2{
    font-size:2.5rem;
    color:#5B1166;
    margin-bottom:25px;
    position:relative;
}

.story-content h2::after{
    content:"";
    width:80px;
    height:4px;
    background:#5B1166;
    display:block;
    margin-top:12px;
    border-radius:10px;
}

/* PARAGRAPHS */

.story-content p{
    position:relative;
    padding:18px 22px;
    margin-bottom:20px;
    background:#fff;
    border-left:4px solid #5B1166;
    border-radius:12px;
    line-height:1.9;
    color:#333;
    transition:all 0.4s ease;
    cursor:default;
}

/* FIRE GLOW EFFECT */

.story-content p:hover{
    transform:translateX(10px) scale(1.02);

    box-shadow:
    0 0 10px rgba(91,17,102,.4),
    0 0 20px rgba(91,17,102,.5),
    0 0 40px rgba(91,17,102,.4),
    0 0 60px rgba(91,17,102,.3);

    background:#5B1166;
    color:#fff;

    animation:flameGlow 1.5s infinite alternate;
}

@keyframes flameGlow{

    0%{
        box-shadow:
        0 0 10px rgba(91,17,102,.4),
        0 0 25px rgba(91,17,102,.5),
        0 0 45px rgba(91,17,102,.3);
    }

    50%{
        box-shadow:
        0 0 15px rgba(91,17,102,.7),
        0 0 35px rgba(91,17,102,.6),
        0 0 65px rgba(91,17,102,.4);
    }

    100%{
        box-shadow:
        0 0 20px rgba(91,17,102,.8),
        0 0 45px rgba(91,17,102,.7),
        0 0 85px rgba(91,17,102,.5);
    }
}

/* RESPONSIVE */

@media(max-width:900px){

    .highschool-story{
        grid-template-columns:1fr;
        padding:80px 8%;
    }

    .story-content h2{
        font-size:2rem;
    }

}
/* =========================
   PROFESSIONAL LIFE SECTION
========================= */

.professional-life{
    padding:120px 8%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
    background:linear-gradient(135deg,#ffffff,#f7f2fa);
}

/* IMAGE */

.life-image{
    overflow:hidden;
    border-radius:25px;
}

.life-image img{
    width:100%;
    display:block;
    border-radius:25px;
    box-shadow:0 20px 40px rgba(0,0,0,0.15);
    transition:0.6s ease;
}

.life-image img:hover{
    transform:scale(1.05);
}

/* TEXT SECTION */

.life-content .section-tag{
    display:inline-block;
    background:#5B1166;
    color:#fff;
    padding:6px 14px;
    border-radius:20px;
    font-size:0.85rem;
    margin-bottom:15px;
}

.life-content h2{
    font-size:2.5rem;
    color:#5B1166;
    margin-bottom:25px;
    position:relative;
}

.life-content h2::after{
    content:"";
    width:90px;
    height:4px;
    background:#5B1166;
    display:block;
    margin-top:10px;
    border-radius:10px;
}

/* PARAGRAPHS */

.life-content p{
    background:#ffffff;
    border-left:4px solid #5B1166;
    padding:18px 22px;
    margin-bottom:18px;
    border-radius:12px;
    color:#333;
    line-height:1.8;
    transition:0.4s ease;
    cursor:default;
    position:relative;
    overflow:hidden;
}

/* =========================
   FIRE + PURPLE GLOW EFFECT
========================= */

.life-content p:hover{
    background:#5B1166;
    color:#fff;
    transform:translateX(10px) scale(1.02);

    box-shadow:
    0 0 15px rgba(91,17,102,0.6),
    0 0 30px rgba(91,17,102,0.5),
    0 0 60px rgba(91,17,102,0.4);

    animation:purpleFlame 1.2s infinite alternate;
}

/* Animated glow "fire effect" */

@keyframes purpleFlame{
    0%{
        box-shadow:
        0 0 10px rgba(91,17,102,0.5),
        0 0 25px rgba(91,17,102,0.4),
        0 0 45px rgba(91,17,102,0.3);
    }

    50%{
        box-shadow:
        0 0 20px rgba(91,17,102,0.7),
        0 0 40px rgba(91,17,102,0.6),
        0 0 70px rgba(91,17,102,0.4);
    }

    100%{
        box-shadow:
        0 0 25px rgba(91,17,102,0.8),
        0 0 55px rgba(91,17,102,0.7),
        0 0 90px rgba(91,17,102,0.5);
    }
}

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

@media(max-width:900px){
    .professional-life{
        grid-template-columns:1fr;
        padding:80px 8%;
    }

    .life-content h2{
        font-size:2rem;
    }
}
/* =========================
   MOTHERHOOD STORY SECTION
   (SOFT + PREMIUM STYLE)
========================= */

.motherhood-story{
    padding:120px 8%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
    background:linear-gradient(135deg,#ffffff,#f8f4fb);
}

/* IMAGE */

.motherhood-image{
    overflow:hidden;
    border-radius:25px;
}

.motherhood-image img{
    width:100%;
    display:block;
    border-radius:25px;
    box-shadow:0 25px 50px rgba(0,0,0,0.12);
    transition:0.7s ease;
}

.motherhood-image img:hover{
    transform:scale(1.06);
}

/* TAG */

.motherhood-content .section-tag{
    display:inline-block;
    background:#5B1166;
    color:#fff;
    padding:6px 14px;
    border-radius:20px;
    font-size:0.85rem;
    margin-bottom:15px;
}

/* TITLE */

.motherhood-content h2{
    font-size:2.5rem;
    color:#5B1166;
    margin-bottom:25px;
    position:relative;
}

.motherhood-content h2::after{
    content:"";
    width:90px;
    height:4px;
    background:#5B1166;
    display:block;
    margin-top:10px;
    border-radius:10px;
}

/* =========================
   PARAGRAPHS (SMOOTH + FLOAT)
========================= */

.motherhood-content p{
    background:#ffffff;
    border-left:4px solid #5B1166;
    padding:18px 22px;
    margin-bottom:18px;
    border-radius:14px;
    color:#333;
    line-height:1.9;

    transition:0.5s ease;
    position:relative;
    cursor:default;

    /* soft floating feel */
    transform:translateY(0);
}

/* =========================
   SOFT GLOW HOVER EFFECT
========================= */

.motherhood-content p:hover{
    transform:translateY(-8px) scale(1.02);

    background:linear-gradient(135deg,#5B1166,#7a1f88);
    color:#fff;

    box-shadow:
    0 10px 25px rgba(91,17,102,0.3),
    0 20px 60px rgba(91,17,102,0.35);

    border-left:4px solid #ffffff;

    animation:softPulse 1.6s infinite alternate;
}

/* gentle pulse (not fire, more emotional glow) */

@keyframes softPulse{
    0%{
        box-shadow:
        0 10px 20px rgba(91,17,102,0.25),
        0 15px 40px rgba(91,17,102,0.2);
    }

    100%{
        box-shadow:
        0 15px 35px rgba(91,17,102,0.4),
        0 25px 70px rgba(91,17,102,0.3);
    }
}

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

@media(max-width:900px){
    .motherhood-story{
        grid-template-columns:1fr;
        padding:80px 8%;
    }

    .motherhood-content h2{
        font-size:2rem;
    }
}
/* =========================
   VA ABOUT SECTION
   (PROFESSIONAL + PREMIUM)
========================= */

.va-about{
    padding:120px 8%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;

    background:linear-gradient(135deg,#ffffff,#f6f1f8);
}

/* IMAGE */

.va-about-image{
    overflow:hidden;
    border-radius:25px;
}

.va-about-image img{
    width:100%;
    display:block;
    border-radius:25px;
    box-shadow:0 25px 60px rgba(0,0,0,0.15);
    transition:0.7s ease;
}

.va-about-image img:hover{
    transform:scale(1.06);
}

/* TAG */

.va-about-content .section-tag{
    display:inline-block;
    background:#5B1166;
    color:#fff;
    padding:6px 14px;
    border-radius:20px;
    font-size:0.85rem;
    margin-bottom:15px;
}

/* TITLE */

.va-about-content h2{
    font-size:2.6rem;
    color:#5B1166;
    margin-bottom:25px;
    position:relative;
}

.va-about-content h2::after{
    content:"";
    width:100px;
    height:4px;
    background:#5B1166;
    display:block;
    margin-top:10px;
    border-radius:10px;
}

/* =========================
   PARAGRAPHS (PROFESSIONAL FLOW)
========================= */

.va-about-content p{
    background:#ffffff;
    border-left:4px solid #5B1166;
    padding:18px 22px;
    margin-bottom:18px;
    border-radius:14px;

    color:#333;
    line-height:1.9;

    transition:0.5s ease;
    cursor:default;

    position:relative;
}

/* =========================
   TRUST + AUTHORITY HOVER EFFECT
========================= */

.va-about-content p:hover{
    transform:translateY(-6px) scale(1.015);

    background:linear-gradient(135deg,#5B1166,#6f1b7e);
    color:#fff;

    border-left:4px solid #ffffff;

    box-shadow:
    0 10px 25px rgba(91,17,102,0.25),
    0 25px 70px rgba(91,17,102,0.35);

    animation:trustGlow 1.8s infinite alternate;
}

/* soft professional pulse (not fire, more “authority glow”) */

@keyframes trustGlow{
    0%{
        box-shadow:
        0 10px 20px rgba(91,17,102,0.2),
        0 15px 40px rgba(91,17,102,0.15);
    }

    100%{
        box-shadow:
        0 20px 50px rgba(91,17,102,0.35),
        0 30px 90px rgba(91,17,102,0.25);
    }
}

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

@media(max-width:900px){
    .va-about{
        grid-template-columns:1fr;
        padding:80px 8%;
    }

    .va-about-content h2{
        font-size:2rem;
    }
}
/* =========================
   HOBBIES SECTION
   PREMIUM STORY STYLE
========================= */

.hobbies-section{
    padding:120px 8%;
    background:linear-gradient(135deg,#ffffff,#f7f2fa);
}

/* EACH ROW */

.hobby-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;
    margin-bottom:100px;
}

/* ALTERNATING LAYOUT */

.hobby-row.reverse{
    flex-direction:row-reverse;
}

/* =========================
   CIRCULAR IMAGE STYLE
========================= */

.hobby-image img {
    width: 280px;
    height: 280px;
    object-fit: cover;

    /* smooth square corners */
    border-radius: 18px;

    /* remove border completely */
    border: none;

    /* cleaner modern shadow */
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);

    transition: all 0.5s ease;
}

/* hover effect */
.hobby-image img:hover {
    transform: scale(1.08);
    box-shadow: 0 25px 70px rgba(91, 17, 102, 0.25);
}

/* =========================
   TEXT BLOCK
========================= */

.hobby-text{
    flex:1;
}

.hobby-text h2{
    font-size:2.3rem;
    color:#5B1166;
    margin-bottom:18px;
    position:relative;
}

.hobby-text h2::after{
    content:"";
    width:70px;
    height:4px;
    background:#5B1166;
    display:block;
    margin-top:10px;
    border-radius:10px;
}

/* =========================
   PARAGRAPH STYLE
========================= */

.hobby-text p{
    background:#ffffff;
    border-left:4px solid #5B1166;
    padding:18px 22px;
    border-radius:14px;

    color:#333;
    line-height:1.9;

    transition:0.5s ease;
    cursor:default;

    box-shadow:0 5px 15px rgba(0,0,0,0.05);
}

/* =========================
   HOVER EFFECT (SOFT GLOW)
========================= */

.hobby-text p:hover{
    transform:translateY(-8px) scale(1.02);

    background:linear-gradient(135deg,#5B1166,#7a1f88);
    color:#fff;

    border-left:4px solid #fff;

    box-shadow:
    0 10px 25px rgba(91,17,102,0.25),
    0 30px 80px rgba(91,17,102,0.35);

    animation:hobbyGlow 1.6s infinite alternate;
}

/* soft glow pulse */

@keyframes hobbyGlow{
    0%{
        box-shadow:
        0 10px 20px rgba(91,17,102,0.2),
        0 20px 50px rgba(91,17,102,0.15);
    }

    100%{
        box-shadow:
        0 20px 50px rgba(91,17,102,0.35),
        0 40px 100px rgba(91,17,102,0.25);
    }
}

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

@media(max-width:900px){
    .hobbies-section{
        padding:80px 8%;
    }

    .hobby-row,
    .hobby-row.reverse{
        flex-direction:column;
        text-align:center;
    }

    .hobby-image img{
        width:220px;
        height:220px;
    }

    .hobby-text h2{
        font-size:2rem;
    }
}