/* =========================
   GLOBAL RESPONSIVE FIX
========================= */

 html,
 body {
   overflow-x: hidden;
   font-family: 'Inter', sans-serif;
   background: #fffdfb;
   overflow-x: hidden;
 }

 * {
   max-width: 100%;
 }

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


 h1,
 h2,
 h3,
 h4 {
   font-family: 'Playfair Display', serif;
 }

 .container,
 .container-fluid {
   overflow: hidden;
 }

 /* =========================
       NAVBAR
    ========================== */

 .navbar {
   padding: 18px 0;
   background: transparent;
   position: fixed;
   width: 100%;
   z-index: 1000;
 }

 .navbar-brand {
   color: #fff;
   font-size: 32px;
   font-weight: 700;
 }

 .navbar-brand span {
   color: #ec4899;
 }

 .nav-link {
   color: #fff !important;
   margin-left: 20px;
   font-weight: 500;
   transition: .3s;
 }

 .nav-link:hover {
   color: #f9a8d4 !important;
 }

 .nav-btn {
   background: #ec4899;
   color: #fff;
   border: none;
   padding: 12px 24px;
   border-radius: 50px;
   font-weight: 600;
   transition: .4s;
   box-shadow: 0 10px 25px rgba(236, 72, 153, .3);
 }

 .nav-btn:hover {
   transform: translateY(-3px);
   background: #db2777;
 }

 /* =========================
   STICKY GLASS NAVBAR
========================= */

 .navbar {
   transition: .4s ease;
 }

 .navbar.scrolled {

   background: rgba(15, 23, 42, .75);

   backdrop-filter: blur(18px);

   padding: 14px 0;

   box-shadow: 0 10px 35px rgba(0, 0, 0, .12);
 }


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

 .hero {
   min-height: 100vh;
   background:
     linear-gradient(rgba(15, 23, 42, .75), rgba(15, 23, 42, .75)),
     url('https://images.unsplash.com/photo-1516589178581-6cd7833ae3b2?q=80&w=1600&auto=format&fit=crop');
   background-size: cover;
   background-position: center;
   display: flex;
   align-items: center;
   position: relative;
   overflow: hidden;
 }

 /* Floating Blur Effects */

 .blur1,
 .blur2 {
   position: absolute;
   border-radius: 50%;
   filter: blur(100px);
   opacity: .35;
 }

 .blur1 {
   width: 300px;
   height: 300px;
   background: #ec4899;
   top: -80px;
   left: -80px;
 }

 .blur2 {
   width: 250px;
   height: 250px;
   background: #7c3aed;
   bottom: -80px;
   right: -80px;
 }

 .hero-content {
   position: relative;
   z-index: 2;
 }

 .hero-subtitle {
   color: #f9a8d4;
   letter-spacing: 2px;
   text-transform: uppercase;
   font-size: 14px;
   font-weight: 600;
   margin-bottom: 20px;
 }

 .hero-title {
   color: #fff;
   font-size: 72px;
   line-height: 1.1;
   font-weight: 800;
   margin-bottom: 25px;
 }

 .hero-title span {
   color: #ec4899;
 }

 .hero-text {
   color: #e2e8f0;
   font-size: 18px;
   line-height: 1.8;
   max-width: 620px;
   margin-bottom: 40px;
 }

 .hero-buttons {
   display: flex;
   gap: 20px;
   flex-wrap: wrap;
 }

 .btn-primary-custom {
   background: #ec4899;
   color: #fff;
   padding: 16px 34px;
   border: none;
   border-radius: 60px;
   font-weight: 600;
   transition: .4s;
   box-shadow: 0 15px 30px rgba(236, 72, 153, .35);
 }

 .btn-primary-custom:hover {
   transform: translateY(-4px);
   background: #db2777;
 }

 .btn-outline-custom {
   background: transparent;
   color: #fff;
   border: 1px solid rgba(255, 255, 255, .3);
   padding: 16px 34px;
   border-radius: 60px;
   font-weight: 600;
   backdrop-filter: blur(10px);
   transition: .4s;
 }

 .btn-outline-custom:hover {
   background: #fff;
   color: #0f172a;
 }

 /* =========================
   MOBILE NAVBAR FIX
========================= */

 @media(max-width:992px) {

   .navbar {
     background: rgba(15, 23, 42, .95);
     backdrop-filter: blur(10px);
     padding: 15px 0;
   }

   .navbar-collapse {
     background: rgba(15, 23, 42, .98);
     padding: 25px;
     border-radius: 20px;
     margin-top: 15px;
   }

   .navbar-nav {
     gap: 10px;
   }

   .nav-link {
     margin-left: 0;
     padding: 12px 0;
     font-size: 18px;
   }

   .nav-btn {
     width: 100%;
     margin-top: 10px;
   }

   .hero {
     padding-top: 120px;
   }

   .hero-title {
     font-size: 42px;
     line-height: 1.2;
   }

 }

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

 .stats-section {
   padding: 100px 0;
   background: #fffdfb;
   position: relative;
 }

 .stats-card {
   background: #ffffff;
   border-radius: 28px;
   padding: 40px 30px;
   text-align: center;
   transition: .4s;
   position: relative;
   overflow: hidden;
   border: 1px solid #f3f4f6;
   box-shadow: 0 15px 40px rgba(15, 23, 42, .06);
 }

 .stats-card::before {
   content: '';
   position: absolute;
   width: 180px;
   height: 180px;
   background: rgba(236, 72, 153, .08);
   border-radius: 50%;
   top: -80px;
   right: -80px;
 }

 .stats-card:hover {
   transform: translateY(-10px);
   box-shadow: 0 25px 60px rgba(236, 72, 153, .18);
 }

 .stats-icon {
   width: 80px;
   height: 80px;
   background: linear-gradient(135deg, #ec4899, #db2777);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: auto;
   border-radius: 50%;
   font-size: 32px;
   margin-bottom: 25px;
   box-shadow: 0 15px 35px rgba(236, 72, 153, .35);
 }

 .stats-card h2 {
   font-size: 48px;
   color: #0f172a;
   font-weight: 800;
   margin-bottom: 10px;
 }

 .stats-card p {
   color: #64748b;
   font-size: 17px;
   margin: 0;
   font-weight: 500;
 }

 /* Responsive */

 @media(max-width:768px) {

   .stats-section {
     padding: 70px 0;
   }

   .stats-card {
     padding: 35px 25px;
   }

   .stats-card h2 {
     font-size: 38px;
   }

 }

 /* =========================
   TREATMENTS SECTION
========================= */

 .treatments-section {
   padding: 110px 0;
   background: #fffdfb;
   position: relative;
 }

 .section-subtitle {
   color: #ec4899;
   text-transform: uppercase;
   letter-spacing: 2px;
   font-size: 14px;
   font-weight: 700;
 }

 .section-title {
   font-size: 52px;
   line-height: 1.3;
   color: #0f172a;
   margin-top: 15px;
   font-weight: 800;
 }

 .treatment-card {
   background: #ffffff;
   padding: 45px 35px;
   border-radius: 30px;
   transition: .4s;
   border: 1px solid #f3f4f6;
   height: 100%;
   position: relative;
   overflow: hidden;
   box-shadow: 0 10px 30px rgba(15, 23, 42, .05);
 }

 .treatment-card::before {
   content: '';
   position: absolute;
   width: 220px;
   height: 220px;
   background: rgba(236, 72, 153, .06);
   border-radius: 50%;
   top: -100px;
   right: -100px;
 }

 .treatment-card:hover {
   transform: translateY(-10px);
   box-shadow: 0 25px 60px rgba(236, 72, 153, .15);
 }

 .treatment-icon {
   width: 85px;
   height: 85px;
   background: linear-gradient(135deg, #ec4899, #db2777);
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 24px;
   color: #fff;
   font-size: 34px;
   margin-bottom: 30px;
   box-shadow: 0 15px 35px rgba(236, 72, 153, .3);
 }

 .treatment-card h3 {
   font-size: 30px;
   color: #0f172a;
   margin-bottom: 18px;
 }

 .treatment-card p {
   color: #64748b;
   line-height: 1.9;
   font-size: 16px;
   margin-bottom: 25px;
 }

 .treatment-card a {
   text-decoration: none;
   color: #ec4899;
   font-weight: 700;
   transition: .3s;
 }

 .treatment-card a i {
   margin-left: 6px;
   transition: .3s;
 }

 .treatment-card:hover a i {
   margin-left: 12px;
 }

 /* Responsive */

 @media(max-width:768px) {

   .treatments-section {
     padding: 80px 0;
   }

   .section-title {
     font-size: 36px;
   }

   .treatment-card {
     padding: 35px 25px;
   }

 }

 /* =========================
   TESTIMONIAL SECTION
========================= */

 .testimonial-section {
   padding: 110px 0;
   background: #fff7fb;
 }

 .testimonial-card {
   background: #ffffff;
   padding: 35px;
   border-radius: 28px;
   transition: .4s;
   height: 100%;
   border: 1px solid #f3f4f6;
   box-shadow: 0 10px 35px rgba(15, 23, 42, .05);
 }

 .testimonial-card:hover {
   transform: translateY(-10px);
   box-shadow: 0 25px 60px rgba(236, 72, 153, .15);
 }

 .testimonial-top {
   display: flex;
   align-items: center;
   gap: 18px;
   margin-bottom: 25px;
 }

 .testimonial-top img {
   width: 75px;
   height: 75px;
   border-radius: 50%;
   object-fit: cover;
 }

 .testimonial-top h4 {
   margin: 0;
   color: #0f172a;
   font-size: 24px;
 }

 .testimonial-top span {
   color: #ec4899;
   font-size: 14px;
   font-weight: 600;
 }

 .testimonial-card p {
   color: #64748b;
   line-height: 1.9;
   font-size: 16px;
   margin-bottom: 25px;
 }

 .stars {
   color: #f59e0b;
   font-size: 18px;
 }

 /* Responsive */

 @media(max-width:768px) {

   .testimonial-section {
     padding: 80px 0;
   }

   .testimonial-card {
     padding: 30px 24px;
   }

   .testimonial-top h4 {
     font-size: 20px;
   }

 }

 /* =========================
   JOURNEY TIMELINE SECTION
========================= */

 .journey-section {
   padding: 110px 0;
   background: #fffdfb;
   position: relative;
 }

 .timeline {
   position: relative;
   max-width: 900px;
   margin: auto;
 }

 .timeline::before {
   content: '';
   position: absolute;
   left: 40px;
   top: 0;
   width: 4px;
   height: 100%;
   background: linear-gradient(to bottom, #ec4899, #f9a8d4);
   border-radius: 20px;
 }

 .timeline-item {
   position: relative;
   padding-left: 110px;
   margin-bottom: 60px;
 }

 .timeline-icon {
   position: absolute;
   left: 0;
   top: 0;

   width: 80px;
   height: 80px;

   background: linear-gradient(135deg, #ec4899, #db2777);

   border-radius: 50%;

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

   color: #fff;
   font-size: 32px;

   box-shadow: 0 15px 35px rgba(236, 72, 153, .3);
 }

 .timeline-content {
   background: #ffffff;
   padding: 35px;
   border-radius: 28px;
   border: 1px solid #f3f4f6;
   box-shadow: 0 10px 35px rgba(15, 23, 42, .05);
   transition: .4s;
 }

 .timeline-content:hover {
   transform: translateY(-8px);
   box-shadow: 0 25px 60px rgba(236, 72, 153, .15);
 }

 .timeline-content h3 {
   color: #0f172a;
   margin-bottom: 15px;
   font-size: 28px;
 }

 .timeline-content p {
   color: #64748b;
   line-height: 1.9;
   margin: 0;
 }

 /* Responsive */

 @media(max-width:768px) {

   .journey-section {
     padding: 80px 0;
   }

   .timeline::before {
     left: 30px;
   }

   .timeline-item {
     padding-left: 85px;
   }

   .timeline-icon {
     width: 60px;
     height: 60px;
     font-size: 24px;
   }

   .timeline-content {
     padding: 28px 22px;
   }

   .timeline-content h3 {
     font-size: 22px;
   }

 }

 /* =========================
   DOCTORS SECTION
========================= */

 .doctors-section {
   padding: 110px 0;
   background: #fff7fb;
 }

 .doctor-card {
   background: #ffffff;
   border-radius: 30px;
   overflow: hidden;
   transition: .4s;
   border: 1px solid #f3f4f6;
   box-shadow: 0 10px 35px rgba(15, 23, 42, .05);
   height: 100%;
 }

 .doctor-card:hover {
   transform: translateY(-10px);
   box-shadow: 0 25px 60px rgba(236, 72, 153, .15);
 }

 .doctor-image {
   position: relative;
   overflow: hidden;
 }

 .doctor-image img {
   width: 100%;
   height: 380px;
   object-fit: cover;
   transition: .5s;
 }

 .doctor-card:hover img {
   transform: scale(1.05);
 }

 .experience-badge {
   position: absolute;
   bottom: 20px;
   left: 20px;

   background: #ec4899;
   color: #fff;

   padding: 10px 18px;

   border-radius: 50px;

   font-size: 14px;
   font-weight: 600;

   box-shadow: 0 10px 25px rgba(236, 72, 153, .3);
 }

 .doctor-content {
   padding: 35px;
 }

 .doctor-content h3 {
   color: #0f172a;
   font-size: 30px;
   margin-bottom: 10px;
 }

 .doctor-content span {
   color: #ec4899;
   font-weight: 600;
   display: block;
   margin-bottom: 18px;
 }

 .doctor-content p {
   color: #64748b;
   line-height: 1.9;
   margin-bottom: 25px;
 }

 .doctor-socials {
   display: flex;
   gap: 14px;
 }

 .doctor-socials a {
   width: 45px;
   height: 45px;

   background: #fff1f7;
   color: #ec4899;

   border-radius: 50%;

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

   text-decoration: none;

   transition: .3s;
 }

 .doctor-socials a:hover {
   background: #ec4899;
   color: #fff;
 }

 /* Responsive */

 @media(max-width:768px) {

   .doctors-section {
     padding: 80px 0;
   }

   .doctor-image img {
     height: 320px;
   }

   .doctor-content {
     padding: 28px 22px;
   }

   .doctor-content h3 {
     font-size: 24px;
   }

 }

 /* =========================
   FAQ SECTION
========================= */

 .faq-section {
   padding: 110px 0;
   background: #fffdfb;
 }

 /* Accordion */

 .custom-accordion .accordion-item {
   border: none;
   margin-bottom: 20px;
   border-radius: 24px !important;
   overflow: hidden;
   box-shadow: 0 10px 35px rgba(15, 23, 42, .05);
 }

 .custom-accordion .accordion-button {
   background: #ffffff;
   color: #0f172a;
   font-size: 18px;
   font-weight: 600;
   padding: 24px 28px;
   box-shadow: none !important;
 }

 .custom-accordion .accordion-button:not(.collapsed) {
   background: #fff1f7;
   color: #ec4899;
 }

 .custom-accordion .accordion-body {
   padding: 0 28px 28px;
   color: #64748b;
   line-height: 1.9;
 }

 /* CTA CARD */

 .cta-card {
   background: linear-gradient(135deg, #ec4899, #db2777);

   padding: 50px 40px;

   border-radius: 32px;

   color: #fff;

   position: relative;
   overflow: hidden;

   box-shadow: 0 25px 60px rgba(236, 72, 153, .25);
 }

 .cta-card::before {
   content: '';
   position: absolute;

   width: 250px;
   height: 250px;

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

   border-radius: 50%;

   top: -120px;
   right: -120px;
 }

 .cta-badge {
   display: inline-block;

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

   padding: 10px 18px;

   border-radius: 50px;

   font-size: 14px;
   font-weight: 600;

   margin-bottom: 25px;
 }

 .cta-card h3 {
   font-size: 42px;
   line-height: 1.3;
   margin-bottom: 20px;
 }

 .cta-card p {
   line-height: 1.9;
   color: #fdf2f8;
   margin-bottom: 35px;
 }

 .cta-btn {
   background: #fff;
   color: #ec4899;

   border: none;

   padding: 16px 32px;

   border-radius: 50px;

   font-weight: 700;

   transition: .3s;
 }

 .cta-btn:hover {
   transform: translateY(-5px);
 }

 /* Responsive */

 @media(max-width:768px) {

   .faq-section {
     padding: 80px 0;
   }

   .cta-card {
     padding: 40px 28px;
   }

   .cta-card h3 {
     font-size: 32px;
   }

 }

 /* =========================
   CONTACT SECTION
========================= */

 .contact-section {
   padding: 110px 0;
   background: #fff7fb;
 }

 .contact-text {
   color: #64748b;
   line-height: 1.9;
   margin-bottom: 35px;
 }

 .contact-info {
   display: flex;
   flex-direction: column;
   gap: 20px;
 }

 .contact-box {
   display: flex;
   align-items: center;
   gap: 20px;

   background: #fff;
   padding: 24px;

   border-radius: 24px;

   box-shadow: 0 10px 35px rgba(15, 23, 42, .05);
 }

 .contact-box i {
   width: 65px;
   height: 65px;

   background: linear-gradient(135deg, #ec4899, #db2777);

   color: #fff;

   border-radius: 20px;

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

   font-size: 24px;
 }

 .contact-box h5 {
   margin-bottom: 6px;
   color: #0f172a;
 }

 .contact-box p {
   margin: 0;
   color: #64748b;
 }

 /* FORM */

 .contact-form-box {
   background: #fff;
   padding: 50px;
   border-radius: 32px;
   box-shadow: 0 15px 50px rgba(15, 23, 42, .06);
 }

 .contact-form-box h3 {
   font-size: 36px;
   margin-bottom: 35px;
   color: #0f172a;
 }

 .form-control {
   height: 60px;
   border: none;
   background: #fff7fb;
   border-radius: 18px;
   padding: 15px 20px;
   box-shadow: none !important;
 }

 textarea.form-control {
   height: auto;
 }

 .submit-btn {
   background: linear-gradient(135deg, #ec4899, #db2777);

   color: #fff;

   border: none;

   padding: 18px 35px;

   border-radius: 50px;

   font-weight: 700;

   transition: .3s;

   box-shadow: 0 15px 35px rgba(236, 72, 153, .25);
 }

 .submit-btn:hover {
   transform: translateY(-5px);
 }

 /* =========================
   FOOTER
========================= */

 .footer {
   background: #0f172a;
   padding: 90px 0 30px;
   color: #fff;
 }

 .footer-logo {
   font-size: 36px;
   font-weight: 800;
   text-decoration: none;
   color: #fff;
 }

 .footer-logo span {
   color: #ec4899;
 }

 .footer-text {
   color: #cbd5e1;
   line-height: 1.9;
   margin: 25px 0;
 }

 .footer-socials {
   display: flex;
   gap: 15px;
 }

 .footer-socials a {
   width: 45px;
   height: 45px;

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

   color: #fff;

   border-radius: 50%;

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

   text-decoration: none;

   transition: .3s;
 }

 .footer-socials a:hover {
   background: #ec4899;
 }

 .footer h5 {
   margin-bottom: 25px;
   font-size: 22px;
 }

 .footer ul {
   list-style: none;
   padding: 0;
 }

 .footer ul li {
   margin-bottom: 14px;
 }

 .footer ul li a {
   text-decoration: none;
   color: #cbd5e1;
   transition: .3s;
 }

 .footer ul li a:hover {
   color: #ec4899;
 }

 .newsletter-text {
   color: #cbd5e1;
   line-height: 1.8;
 }

 .newsletter-form {
   margin-top: 20px;
 }

 .newsletter-form input {
   width: 100%;
   height: 58px;

   border: none;

   border-radius: 18px;

   padding: 0 18px;

   margin-bottom: 15px;
 }

 .newsletter-form button {
   width: 100%;

   height: 58px;

   border: none;

   border-radius: 18px;

   background: #ec4899;

   color: #fff;

   font-weight: 700;
 }

 .footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, .08);
   margin-top: 70px;
   padding-top: 25px;
   text-align: center;
 }

 .footer-bottom p {
   margin: 0;
   color: #94a3b8;
 }

 /* Responsive */

 @media(max-width:768px) {

   .contact-section {
     padding: 80px 0;
   }

   .contact-form-box {
     padding: 35px 25px;
   }

   .contact-form-box h3 {
     font-size: 30px;
   }

   .footer {
     padding: 70px 0 30px;
   }

 }

 /* =========================
   FLOATING BLOBS
========================= */

 .gradient-blob {
   position: fixed;

   border-radius: 50%;

   filter: blur(120px);

   z-index: -1;

   opacity: .18;

   animation: blobFloat 12s infinite ease-in-out;
 }

 .blob1 {
   width: 300px;
   height: 300px;

   background: #ec4899;

   top: 10%;
   left: -100px;
 }

 .blob2 {
   width: 350px;
   height: 350px;

   background: #7c3aed;

   bottom: 10%;
   right: -120px;

   animation-delay: 3s;
 }

 .blob3 {
   width: 250px;
   height: 250px;

   background: #3b82f6;

   top: 50%;
   left: 40%;

   animation-delay: 6s;
 }

 @keyframes blobFloat {

   0% {
     transform: translateY(0px) scale(1);
   }

   50% {
     transform: translateY(-40px) scale(1.08);
   }

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

 }

 /* =========================
   WHATSAPP FLOAT BUTTON
========================= */

 .whatsapp-float {

   position: fixed;

   bottom: 25px;
   right: 25px;

   width: 68px;
   height: 68px;

   background: linear-gradient(135deg, #25d366, #1ebe5d);

   color: #fff;

   border-radius: 50%;

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

   text-decoration: none;

   font-size: 34px;

   z-index: 9999;

   box-shadow: 0 15px 35px rgba(37, 211, 102, .35);

   transition: .4s ease;

   animation: whatsappPulse 2s infinite;
 }

 .whatsapp-float:hover {

   transform: translateY(-8px) scale(1.08);

   color: #fff;
 }

 /* Pulse Animation */

 @keyframes whatsappPulse {

   0% {
     box-shadow: 0 0 0 0 rgba(37, 211, 102, .5);
   }

   70% {
     box-shadow: 0 0 0 18px rgba(37, 211, 102, 0);
   }

   100% {
     box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
   }

 }

 /* Mobile */

 @media(max-width:768px) {

   .whatsapp-float {

     width: 60px;
     height: 60px;

     font-size: 30px;

     right: 18px;
     bottom: 18px;
   }

 }