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

.hero-section{

    position:relative;

    overflow:hidden;

    min-height:100vh;

    display:flex;

    align-items:center;

    padding:130px 0 80px;

    background:linear-gradient(
    135deg,
    #94007a 0%,
    #4a0f8d 35%,
    #0b5d7c 70%,
    #22c55e 100%);

}

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

.hero-bg{

    position:absolute;

    inset:0;

    overflow:hidden;

    z-index:1;

}

/* Moving Gradient */

.hero-bg::before{

    content:"";

    position:absolute;

    width:900px;

    height:900px;

    background:radial-gradient(circle,
    rgba(255,255,255,.15),
    transparent 70%);

    top:-250px;

    left:-250px;

    animation:moveGlow 15s linear infinite;

}

.hero-bg::after{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    background:radial-gradient(circle,
    rgba(34,197,94,.18),
    transparent 70%);

    bottom:-200px;

    right:-200px;

    animation:moveGlow2 18s linear infinite;

}

/* Floating Blobs */

.shape{

    position:absolute;

    border-radius:50%;

    filter:blur(60px);

}

.shape-1{

    width:260px;

    height:260px;

    background:#22c55e;

    opacity:.18;

    top:10%;

    left:8%;

    animation:floatBlob 10s ease-in-out infinite;

}

.shape-2{

    width:220px;

    height:220px;

    background:#94007a;

    opacity:.22;

    bottom:8%;

    left:30%;

    animation:floatBlob 12s ease-in-out infinite;

}

.shape-3{

    width:320px;

    height:320px;

    background:#38bdf8;

    opacity:.12;

    top:15%;

    right:5%;

    animation:floatBlob 15s ease-in-out infinite;

}

/* Grid */

.hero-grid{

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),

    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);

    background-size:60px 60px;

    mask-image:linear-gradient(to bottom,
    rgba(0,0,0,.8),
    transparent);

}

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

.hero-section .container{

    position:relative;

    z-index:10;

}

/*==================================
LEFT CONTENT
==================================*/

.hero-content{

    max-width:620px;

}

/* Badge */

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 20px;

    border-radius:40px;

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

    backdrop-filter:blur(18px);

    color:#fff;

    font-size:14px;

    font-weight:600;

    margin-bottom:28px;

    border:1px solid rgba(255,255,255,.18);

}

.hero-badge i{

    color:#ffd54f;

}

/*==================================
HEADING
==================================*/

.hero-content h1{

    font-size:68px;

    line-height:1.08;

    color:#fff;

    font-weight:800;

    margin-bottom:25px;

}

.hero-content h1 span{

    color:#a7f3d0;

}

.hero-content h1 strong{

    display:block;

    margin-top:12px;

    font-size:72px;

    background:linear-gradient(
    90deg,
    #ffffff,
    #d1fae5,
    #22c55e);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

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

.hero-content p{

    font-size:20px;

    line-height:1.9;

    color:rgba(255,255,255,.88);

    margin-bottom:35px;

}

/*==================================
BUTTONS
==================================*/

.hero-buttons{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:45px;

}

.btn-start{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:18px 34px;

    border-radius:60px;

    background:#fff;

    color:#0f172a;

    font-weight:700;

    text-decoration:none;

    transition:.35s;

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

}

.btn-start:hover{

    transform:translateY(-5px);

    color:#111;

}

.btn-watch{

    display:flex;

    align-items:center;

    gap:12px;

    color:#fff;

    font-weight:600;

    text-decoration:none;

}

.btn-watch span{

    width:56px;

    height:56px;

    border-radius:50%;

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

    display:flex;

    align-items:center;

    justify-content:center;

    backdrop-filter:blur(20px);

    transition:.35s;

}

.btn-watch:hover span{

    background:#fff;

    color:#22c55e;

    transform:scale(1.1);

}

/*==================================
TRUST
==================================*/

.hero-trust{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

    margin-bottom:45px;

}

.trust-item{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 18px;

    border-radius:30px;

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

    border:1px solid rgba(255,255,255,.18);

    color:#fff;

    backdrop-filter:blur(16px);

}

.trust-item i{

    color:#22c55e;

}

/*==================================
STATS
==================================*/

.hero-stats{

    display:flex;

    gap:22px;

}

.stat{

    flex:1;

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

    backdrop-filter:blur(20px);

    border-radius:18px;

    text-align:center;

    padding:22px;

    border:1px solid rgba(255,255,255,.12);

}

.stat h3{

    color:#fff;

    font-size:34px;

    font-weight:800;

    margin-bottom:6px;

}

.stat span{

    color:rgba(255,255,255,.75);

    font-size:15px;

}

/*=========================================================
            HERO SECTION - PART 2B
            RIGHT SIDE VISUAL
=========================================================*/

.hero-visual{

    position:relative;

    width:620px;

    height:620px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:center;

}

/*=============================
MAIN GLOW
==============================*/

.main-glow{

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(34,197,94,.35),
    rgba(148,0,122,.18),
    transparent 75%);

    filter:blur(60px);

    animation:pulseGlow 5s ease-in-out infinite;

}

/*=============================
ORBITS
==============================*/

.orbit{

    position:absolute;

    border-radius:50%;

    border:1px dashed rgba(255,255,255,.18);

}

.orbit-1{

    width:220px;

    height:220px;

    animation:rotateOrbit 12s linear infinite;

}

.orbit-2{

    width:360px;

    height:360px;

    animation:rotateOrbitReverse 20s linear infinite;

}

.orbit-3{

    width:500px;

    height:500px;

    animation:rotateOrbit 30s linear infinite;

}

/*=============================
CENTER NODE
==============================*/

.center-node{

    position:absolute;

    width:120px;

    height:120px;

    border-radius:50%;

    background:linear-gradient(
    135deg,
    #25d366,
    #128c7e);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:56px;

    z-index:20;

    box-shadow:
    0 25px 70px rgba(37,211,102,.45);

    animation:centerPulse 3s ease infinite;

}

.center-node::before{

    content:"";

    position:absolute;

    inset:-12px;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.15);

}

/*=============================
COMMON NODE
==============================*/

.node{

    position:absolute;

    width:110px;

    height:110px;

    border-radius:50%;

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

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.20);

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    color:#fff;

    z-index:15;

    transition:.35s;

    box-shadow:
    0 15px 35px rgba(0,0,0,.18);

}

.node:hover{

    transform:scale(1.08);

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

}

.node i{

    font-size:28px;

    margin-bottom:8px;

    color:#fff;

}

.node span{

    font-size:14px;

    font-weight:600;

}

/*=============================
NODE POSITION
==============================*/

.doctor{

    top:0;

    left:50%;

    transform:translateX(-50%);

}

.clinic{

    right:40px;

    top:150px;

}

.hospital{

    right:65px;

    bottom:95px;

}

.lab{

    left:60px;

    bottom:95px;

}

.patient{

    left:30px;

    top:150px;

}



/*End Of Hero Section*/


/*FAQ*/

/* SECTION */
.faq-modern {
  padding: 110px 0;
  background: linear-gradient(135deg, #dcfce7, #f5d0fe);
}

/* LEFT SIDE */
.faq-left .tag {
  color: #ff0000;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1.5px;
}

.faq-left h2 {
  font-size: 42px;  /* 🔥 big */
  font-weight: 700;
  margin: 15px 0;
  line-height: 1.2;
}

.faq-left h2 span {
  background: linear-gradient(135deg, #94007a, #2bb432);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.faq-left p {
  font-size: 17px;
  color: #64748b;
  margin-bottom: 25px;
}

/* BUTTON */
.btn-main {
  background: linear-gradient(135deg, #94007a, #2bb432);
  color: #fff;
  padding: 12px 26px;
  border-radius: 30px;
  text-decoration: none;
  transition: 0.3s;
}

.btn-main:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(99,102,241,0.3);
}

/* FAQ WRAPPER */
.faq-wrapper {
  max-width: 100%;
}

/* ITEM */
.faq-item {
  background: #fff;
  padding: 18px 22px;
  border-radius: 14px;
  margin-bottom: 15px;
  border: 1px solid #f1f5f9;
  transition: 0.3s;
}

/* hover */
.faq-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

/* ACTIVE */
.faq-item.active {
  border-color: #94007a;
  box-shadow: 0 15px 35px rgba(99,102,241,0.15);
}

/* HEADER */
.faq-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

/* QUESTION */
.faq-header h4 {
  font-size: 18px;  /* 🔥 bigger */
  font-weight: 600;
  margin: 0;
}

/* TOGGLE */
.faq-header span {
  font-size: 22px;
  color: #6366f1;
  transition: 0.3s;
}

/* ROTATE */
.faq-item.active .faq-header span {
  transform: rotate(45deg);
}

/* CONTENT */
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: 0.4s ease;
}

.faq-item.active .faq-content {
  max-height: 200px;
  margin-top: 10px;
}

.faq-content p {
  font-size: 15px;
  color: #64748b;
}

/* RESPONSIVE */
@media (max-width: 991px) {
  .faq-left {
    text-align: center;
    margin-bottom: 40px;
  }

  .faq-left h2 {
    font-size: 32px;
  }
}

/*End Of FAQ*/