/* =========================
   ABOUT PAGE
========================= */

body{

  background:
    linear-gradient(
      135deg,
      #041120 0%,
      #071B34 45%,
      #0A2B4A 100%
    );

  color:white;

  overflow-x:hidden;
}


/* =========================
   GLOBAL SECTION SPACING
========================= */

.about-section{

  position:relative;

  padding:90px 0;

  overflow:hidden;
}


/* GLOW ORBS */

.about-glow{

  position:absolute;

  border-radius:50%;

  filter:blur(120px);

  opacity:0.18;

  z-index:0;
}

.about-glow-1{

  width:420px;
  height:420px;

  background:#00B8C4;

  top:-140px;
  left:-120px;
}

.about-glow-2{

  width:420px;
  height:420px;

  background:#F97316;

  bottom:-140px;
  right:-120px;
}


/* =========================
   HERO SECTION
========================= */

.about-hero{

  min-height:78vh;

  display:flex;
  align-items:center;

  position:relative;

  padding-top:110px;
}

.about-hero-content{

  position:relative;

  z-index:2;

  max-width:900px;
}

.about-badge{

  display:inline-flex;

  align-items:center;

  padding:12px 20px;

  border-radius:999px;

  background:
    rgba(249,115,22,0.12);

  border:
    1px solid rgba(249,115,22,0.22);

  color:#FDBA74;

  font-size:0.82rem;

  font-weight:700;

  letter-spacing:1.5px;

  margin-bottom:30px;
}

.about-hero h1{

  font-size:clamp(4rem, 7vw, 5rem);

  line-height:1.02;

  margin-bottom:30px;

  font-family:"Merriweather", serif;
}

.about-hero h1 span{

  color:#00C2D1;
}

.about-hero p{

  max-width:760px;

  font-size:1.2rem;

  line-height:2;

  color:
    rgba(255,255,255,0.74);
}


/* =========================
   SECTION HEADER
========================= */

.section-header{

  text-align:center;

  max-width:900px;

  margin:0 auto 55px;
}

.section-header h2{

    font-size:clamp(2.8rem,4vw,5rem);

  line-height:1.05;

  color:white;

  margin-bottom:18px;

  font-family:"Merriweather", serif;
}

.section-header h2 span{

  color:#00C2D1;
}

.section-header p{

  color:
    rgba(255,255,255,0.72);

  line-height:1.9;

  font-size:1.15rem;
}


/* =========================
   DOCTOR SECTION
========================= */

.doctor-section{

  position:relative;
}

.doctor-card{

  position:relative;

  display:grid;

  grid-template-columns:
    360px 1fr;

  gap:60px;

  align-items:center;

  background:
    rgba(255,255,255,0.05);

  border:
    1px solid rgba(255,255,255,0.08);

  border-radius:40px;

  padding:50px;

  backdrop-filter:blur(20px);

  overflow:hidden;
}


/* IMAGE */

.doctor-image-wrapper{

  position:relative;
}

.doctor-image{

  width:100%;
transform:scale(1.02);
transition:0.4s ease;
  border-radius:32px;

  object-fit:cover;

  border:
    1px solid rgba(255,255,255,0.08);

  box-shadow:
    0 20px 50px rgba(0,0,0,0.45);
}


/* INFO */

.doctor-info h2{

  font-size:3rem;

  margin-bottom:14px;

  font-family:"Merriweather", serif;
}

.doctor-role{

  color:#00C2D1;

  font-size:1.1rem;

  margin-bottom:28px;

  font-weight:600;
}

.doctor-description{

  color:
    rgba(255,255,255,0.74);

  line-height:2;

  margin-bottom:34px;

  font-size:1.05rem;
}


/* TAGS */

.expertise-tags{

  display:flex;

  flex-wrap:wrap;

  gap:14px;

  margin-bottom:34px;
}

.expertise-tag{

  padding:12px 18px;

  border-radius:999px;

  background:
    rgba(255,255,255,0.05);

  border:
    1px solid rgba(255,255,255,0.08);

  color:
    rgba(255,255,255,0.82);

  font-size:0.92rem;
}


/* SOCIALS */

.social-links{

  display:flex;

  gap:18px;
}

.social-links a{

  width:52px;
  height:52px;

  border-radius:18px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
    rgba(255,255,255,0.06);

  border:
    1px solid rgba(255,255,255,0.08);

  color:white;

  text-decoration:none;

  transition:0.35s ease;
}

.social-links a:hover{

  transform:
    translateY(-4px);

  border-color:
    rgba(0,184,196,0.4);

  color:#00C2D1;
}


/* =========================
   PHILOSOPHY SECTION
========================= */

.philosophy-grid{

  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

  gap:32px;
}

.philosophy-card{

  padding:42px 36px;

  border-radius:32px;

  background:
    rgba(255,255,255,0.05);

  border:
    1px solid rgba(255,255,255,0.08);

  backdrop-filter:blur(16px);

  transition:0.35s ease;
}

.philosophy-card:hover{

  transform:
    translateY(-10px);

  border-color:
    rgba(0,184,196,0.35);

  box-shadow:
    0 20px 50px rgba(0,0,0,0.35);
}

.philosophy-icon{

  width:78px;
  height:78px;

  border-radius:24px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin-bottom:28px;

  background:
    linear-gradient(
      135deg,
      #F97316,
      #FB923C
    );

  color:white;

  font-size:1.8rem;

  box-shadow:
    0 12px 30px rgba(249,115,22,0.28);
}

.philosophy-card h3{

  font-size:1.6rem;

  margin-bottom:18px;

  color:white;
}

.philosophy-card p{

  color:
    rgba(255,255,255,0.72);

  line-height:1.9;
}


/* =========================
   CTA SECTION
========================= */

.about-cta{

  text-align:center;

  max-width:900px;

  margin:auto;
}

.about-cta h2{

  font-size:4rem;

  margin-bottom:24px;

  font-family:"Merriweather", serif;
}

.about-cta p{

  color:
    rgba(255,255,255,0.72);

  line-height:1.9;

  margin-bottom:40px;

  font-size:1.15rem;
}

.about-btn{

  display:inline-flex;

  align-items:center;

  gap:12px;

  padding:18px 32px;

  border-radius:20px;

  background:
    linear-gradient(
      135deg,
      #F97316,
      #FB923C
    );

  color:white;

  text-decoration:none;

  font-weight:600;

  transition:0.35s ease;
}

.about-btn:hover{

  transform:
    translateY(-4px);

  box-shadow:
    0 14px 34px rgba(249,115,22,0.28);
}


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

@media(max-width:992px){

  .doctor-card{

    grid-template-columns:1fr;
  }

  .about-hero h1{

    font-size:4.2rem;
  }
}

@media(max-width:768px){

  .about-section{

    padding:100px 0;
  }

  .about-hero{

    min-height:auto;
    padding-top:140px;
  }

  .about-hero h1{

    font-size:3rem;
  }

  .section-header h2,
  .about-cta h2{

    font-size:2.6rem;
  }

  .doctor-card{

    padding:32px 24px;
  }

  .doctor-info h2{

    font-size:2.2rem;
  }

}
.doctor-stats{

  display:flex;

  flex-wrap:wrap;

  gap:18px;

  margin:38px 0 34px;
}


.doctor-stat{

  min-width:170px;

  padding:22px 24px;

  border-radius:22px;

  background:
    rgba(255,255,255,0.05);

  border:
    1px solid rgba(255,255,255,0.08);

  backdrop-filter:blur(10px);

  transition:0.3s ease;
}


.doctor-stat:hover{

  transform:
    translateY(-4px);

  border-color:
    rgba(0,184,196,0.35);

  box-shadow:
    0 12px 30px rgba(0,0,0,0.22);
}


.doctor-stat h3{

  font-size:2rem;

  color:#00C2D1;

  margin-bottom:10px;

  font-family:"Merriweather", serif;
}


.doctor-stat p{

  color:
    rgba(255,255,255,0.72);

  font-size:0.95rem;

  line-height:1.5;
}
.social-links{
  margin-top:42px;
}
.doctor-quote{

  margin-top:42px;
  margin-bottom:48px;

  padding:32px;

  border-radius:28px;

  position:relative;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.05),
      rgba(255,255,255,0.02)
    );

  border:
    1px solid rgba(255,255,255,0.08);

  color:white;

  font-size:1.15rem;

  line-height:1.8;

  font-style:italic;

  font-family:"Merriweather", serif;

  overflow:hidden;
}


.doctor-quote::before{

  content:"“";

  position:absolute;

  top:-10px;
  left:20px;

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

  color:
    rgba(0,184,196,0.15);

  font-family:serif;
}
/* =========================
   WHY SAVIGENIX
========================= */

.why-section{

  position: relative;

  padding: 90px 0 70px;

  background:
    linear-gradient(
      180deg,
      #041B36 0%,
      #052247 100%
    );
}


/* GRID */

.why-grid{

  display: grid;

  grid-template-columns:
    1fr 1.1fr;

  gap: 80px;

  align-items: center;
}


/* LEFT */

.why-left h2{

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

  line-height: 1.05;

  color: white;

  font-family:
    "Merriweather", serif;

  font-weight: 700;

  max-width: 520px;

  margin-top: 24px;
}

.why-left h2 span{

  color: #00C2D1;
}


/* RIGHT */

.why-right{

  position: relative;
}

.why-right p{

  font-size: 1.18rem;

  line-height: 2;

  color:
    rgba(255,255,255,0.74);

  background:
    rgba(255,255,255,0.04);

  border:
    1px solid rgba(255,255,255,0.06);

  padding: 42px;

  border-radius: 28px;

  backdrop-filter: blur(12px);

  box-shadow:
    0 15px 40px rgba(0,0,0,0.18);
}


/* OPTIONAL GLOW */

.about-section::before{

  content: "";

  position: absolute;

  width: 400px;
  height: 400px;

  background:
    rgba(0,184,196,0.08);

  filter: blur(120px);

  border-radius: 50%;

  top: 10%;

  left: -120px;

  pointer-events: none;
}


/* MOBILE */

@media(max-width:992px){

  .why-grid{

    grid-template-columns: 1fr;

    gap: 50px;
  }

  .why-left h2{

    max-width: 100%;
  }

  .why-right p{

    padding: 32px;
  }
}

@media(max-width:768px){

  .about-section{

    padding: 70px 0 50px;
  }

  .why-left h2{

    font-size: 2.6rem;
  }

  .why-right p{

    font-size: 1rem;

    line-height: 1.9;
  }
}
/* =========================
   ABOUT DEEP SECTION
========================= */

.about-deep-grid{

  display:grid;

  grid-template-columns:
    1.1fr 0.9fr;

  gap:48px;

  align-items:start;

  margin-top:60px;
}


/* LEFT CONTENT */

.about-deep-content h2{

  font-size:3rem;

  line-height:1.15;

  margin:18px 0 26px;

  font-family:"Merriweather", serif;

  max-width:700px;
}

.about-deep-content p{

  color:rgba(255,255,255,0.74);

  line-height:1.9;

  font-size:1.08rem;

  margin-bottom:20px;

  max-width:760px;
}

.about-mini-cards{

  display:grid;

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

  gap:18px;

  margin-top:36px;
}

.mini-card{

  background:
    rgba(255,255,255,0.04);

  border:
    1px solid rgba(255,255,255,0.06);

  border-radius:22px;

  padding:22px;

  transition:0.3s ease;
}

.mini-card:hover{

  transform:translateY(-4px);

  border-color:
    rgba(0,194,209,0.2);
}

.mini-card i{

  font-size:18px;

  color:#00C2D1;

  margin-bottom:14px;
}

.mini-card h4{

  font-size:1.1rem;

  margin-bottom:10px;
}

.mini-card p{

  font-size:0.95rem;

  line-height:1.6;

  margin:0;

  opacity:0.75;
}
.faq-container{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.faq-item{
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  overflow:hidden;
}

.faq-question{
  width:100%;
  background:none;
  border:none;
  color:white;
  padding:22px;
  font-size:16px;
  text-align:left;
  display:flex;
  justify-content:space-between;
  cursor:pointer;
}

.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:0.3s;
}

.faq-answer p{
  padding:0 22px 22px;
}

.faq-item.active .faq-answer{
  max-height:300px;
}
.difference-grid{
  margin-top:60px;

  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;
}

.difference-card{

  background:rgba(255,255,255,0.03);

  border:1px solid rgba(255,255,255,0.08);

  border-radius:24px;

  padding:28px;

  transition:0.3s ease;

}

.difference-card:hover{

  transform:translateY(-6px);

  border-color:rgba(255,180,70,0.25);

}

.difference-icon{

  width:56px;
  height:56px;

  border-radius:16px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:rgba(255,170,50,0.08);

  margin-bottom:20px;

}

.difference-icon i{

  color:#ffb347;

  font-size:20px;

}

.difference-card h3{

  margin-bottom:14px;

  font-size:20px;

}

.difference-card p{

  line-height:1.7;

  opacity:0.82;

}
.about-quote-card{

  position:sticky;

  top:120px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.05),
      rgba(255,255,255,0.02)
    );

  border:
    1px solid rgba(255,255,255,0.08);

  border-radius:32px;

  padding:38px;

  height:fit-content;

  backdrop-filter:blur(18px);
}


/* QUOTE */

.quote-text{

  font-size:2rem;

  line-height:1.45;

  font-family:"Merriweather", serif;

  margin-bottom:24px;

  color:white;
}

.quote-author{

  color:#00C2D1;

  font-weight:600;

  margin-bottom:36px;

  font-size:0.95rem;

  letter-spacing:1px;

  text-transform:uppercase;
}


/* DOCTOR NOTE */

.doctor-note{

  padding-top:28px;

  border-top:
    1px solid rgba(255,255,255,0.08);
}

.doctor-note h4{

  color:#FDBA74;

  margin-bottom:18px;

  letter-spacing:1px;

  font-size:0.9rem;
}

.doctor-note p{

  color:rgba(255,255,255,0.72);

  line-height:1.8;

  margin-bottom:14px;
}
.who-grid{

  display:grid;

  grid-template-columns:
    repeat(3, minmax(0,1fr));

  gap:28px;

  margin-top:50px;
}
@media(max-width:992px){

  .who-grid{

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

}

@media(max-width:768px){

  .who-grid{

    grid-template-columns:1fr;
  }

}
.who-card{

  background:
    rgba(255,255,255,0.04);

  border:
    1px solid rgba(255,255,255,0.06);

  border-radius:26px;

  padding:26px;

  min-height:220px;

  transition:0.3s ease;
}

.who-card i{

  font-size:22px;

  color:#FDBA74;

  margin-bottom:20px;
}

.who-card h3{

  font-size:1.5rem;

  margin-bottom:16px;

  font-family:"Merriweather", serif;
}

.who-card p{

  line-height:1.8;

  color:rgba(255,255,255,0.72);
}
/* =========================
   CTA CARD
========================= */

.cta-card{

  position:relative;

  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      rgba(249,115,22,0.14),
      rgba(249,115,22,0.04)
    );

  border:
    1px solid rgba(249,115,22,0.18);
}


/* GLOW */

.cta-card::before{

  content:"";

  position:absolute;

  width:180px;
  height:180px;

  background:
    rgba(249,115,22,0.14);

  border-radius:50%;

  filter:blur(70px);

  top:-60px;
  right:-60px;

  pointer-events:none;
}


/* ICON */

.cta-icon{

  width:56px;
  height:56px;

  border-radius:18px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
    rgba(255,255,255,0.08);

  margin-bottom:22px;
}

.cta-icon i{

  color:#FDBA74;

  font-size:22px;
}


/* BUTTON */

.cta-card-btn{

  display:inline-flex;

  align-items:center;
  justify-content:center;

  margin-top:24px;

  padding:14px 22px;

  border-radius:999px;

  background:
    linear-gradient(
      135deg,
      #60A5FA,
      #3B82F6
    );

  color:white;

  text-decoration:none;

  font-weight:600;

  font-size:0.95rem;

  transition:0.3s ease;
}

.cta-card-btn:hover{

  transform:translateY(-3px);

  box-shadow:
    0 10px 24px rgba(59,130,246,0.28);
}