/**
* Template Name: Dr ijaz bashir
* Develop: May 08 2026 
* Developer: Laiba Maqsood
*/

/*--------------------------------------------------------------
# Font & Color Variables
--------------------------------------------------------------*/

/* Fonts */
:root {
  --default-font: "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Raleway",  sans-serif;
  --nav-font: "Inter",  sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #444444; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #273d4e; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #520aef; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}



/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #f1f4fa;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #000910;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #28323a;
  --contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
 
}*{
margin:0;
padding:0;
box-sizing:border-box;
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #ffffff;
  font-family: var(--heading-font);
}



/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  --background-color: rgba(0, 0, 0, 0);
  --default-color: #ffffff;
  --heading-color: #ffffff;
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 20px 0;
  transition: all 0.5s;
  z-index: 997;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 36px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 30px;
  margin: 0;
  font-weight: 700;
  color: var(--heading-color);
}

.header .cta-btn,
.header .cta-btn:focus {
  color: var(--contrast-color);
  font-size: 13px;
  padding: 7px 25px;
  margin: 0 0 0 30px;
  border-radius: 4px;
  transition: 0.3s;
  text-transform: uppercase;
  border: 2px solid var(--contrast-color);
}

.header .cta-btn:hover,
.header .cta-btn:focus:hover {
  color: var(--contrast-color);
  background: var(--accent-color);
  border-color: var(--accent-color);
}

@media (max-width: 1200px) {
  .header .logo {
    order: 1;
  }

  .header .cta-btn {
    order: 2;
    margin: 0 15px 0 0;
    padding: 6px 15px;
  }

  .header .navmenu {
    order: 3;
  }
}

.scrolled .header {
  box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
}

/* Global Header on Scroll
------------------------------*/
.scrolled .header {
  --background-color: rgba(21, 34, 43, 0.85);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu>ul>li {
    white-space: nowrap;
    padding: 15px 14px;
  }

  .navmenu>ul>li:last-child {
    padding-right: 0;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    font-size: 13px;
    padding: 0 2px;
    font-family: var(--nav-font);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
    position: relative;
    text-transform: uppercase;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu>ul>li>a:before {
    content: "";
    position: absolute;
    height: 2px;
    bottom: -6px;
    left: 0;
    background-color: var(--nav-hover-color);
    visibility: hidden;
    width: 0px;
    transition: all 0.3s ease-in-out 0s;
  }

  .navmenu a:hover:before,
  .navmenu li:hover>a:before,
  .navmenu .active:before {
    visibility: visible;
    width: 100%;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: color-mix(in srgb, var(--nav-color) 90%, white 15%);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Mobile Navigation */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-mobile-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  position: relative;
}

.footer .footer-top {
  padding-top: 50px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .footer-about .logo {
  line-height: 1;
  margin-bottom: 25px;
}

.footer .footer-about .logo img {
  max-height: 40px;
  margin-right: 6px;
}

.footer .footer-about .logo span {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1px;
  font-family: var(--heading-font);
  color: #4507ff;
}

.footer .footer-about p {
  font-size: 14px;
  font-family: var(--heading-font);
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-right: 10px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.footer h4 {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-bottom: 12px;
}

.footer .footer-links {
  margin-bottom: 30px;
}

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

.footer .footer-links ul i {
  padding-right: 3px;
  font-size: 13px;
  line-height: 0;
  color: var(--accent-color);
}

.footer .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-links ul a {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  display: inline-block;
  line-height: 1;
}

.footer .footer-links ul a:hover {
  color: var(--accent-color);
}

.footer .footer-contact p {
  margin-bottom: 5px;
}

.footer .footer-newsletter .newsletter-form {
  margin-top: 30px;
  margin-bottom: 15px;
  padding: 6px 8px;
  position: relative;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  display: flex;
  background-color: var(--background-color);
  transition: 0.3s;
}

.footer .footer-newsletter .newsletter-form:focus-within {
  border-color: var(--accent-color);
}

.footer .footer-newsletter .newsletter-form input[type=email] {
  border: 0;
  padding: 4px;
  width: 100%;
  background-color: var(--background-color);
  color: var(--default-color);
}

.footer .footer-newsletter .newsletter-form input[type=email]:focus-visible {
  outline: none;
}

.footer .footer-newsletter .newsletter-form input[type=submit] {
  border: 0;
  font-size: 16px;
  padding: 0 20px;
  margin: -7px -8px -7px 0;
  background: var(--accent-color);
  color: var(--contrast-color);
  transition: 0.3s;
  border-radius: 0 4px 4px 0;
}

.footer .footer-newsletter .newsletter-form input[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.footer .copyright {
  padding: 25px 0;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  margin-top: 6px;
  font-size: 13px;
}
/* =========================
   PREMIUM FOOTER UPGRADE
========================= */

.footer {
  background: linear-gradient(160deg, #000000, #0a0f2c, #000000);
  color: #bfc5d2;
  position: relative;
  overflow: hidden;
}

/* TOP GLOW LINE */
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;

  background: linear-gradient(to right, #3744d4, #2563eb, #3507cc);
  box-shadow: 0 0 20px rgba(212,175,55,0.7);
}

/* FLOATING LIGHTS */
.footer::after {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(212,175,55,0.15), transparent 70%);
  filter: blur(120px);
  top: -100px;
  right: -100px;
}

/* HEADINGS */
.footer h4 {
  color: #fff;
  font-size: 18px;
  margin-bottom: 20px;
  position: relative;
}

/* UNDERLINE EFFECT */
.footer h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 40px;
  height: 2px;
  background: #d4af37;
  box-shadow: 0 0 10px rgba(212,175,55,0.6);
}

/* LOGO */
.footer .sitename {
  color: #fff;
  letter-spacing: 1px;
}

/* TEXT */
.footer p {
  color: #9aa3b2;
  line-height: 1.7;
}

/* LINKS */
.footer .footer-links ul a {
  color: #9aa3b2;
  transition: 0.3s;
  position: relative;
}

.footer .footer-links ul a:hover {
  color: #d4af37;
  padding-left: 6px;
}

/* LINK ICON */
.footer .footer-links ul i {
  color: #d4af37;
}

/* SOCIAL ICONS */
.footer .social-links a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);

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

  color: #aaa;
  transition: 0.3s;
}

/* SOCIAL HOVER */
.footer .social-links a:hover {
  color: #fff;
  border-color: #d4af37;

  transform: translateY(-4px);
  box-shadow:
    0 0 12px rgba(212,175,55,0.5),
    0 0 25px rgba(37,99,235,0.3);
}

/* CONNECT BUTTONS */
.footer-connect .btn-connect {
  padding: 10px 16px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 500;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  transition: 0.3s;
}

/* WHATSAPP */
.btn-connect.whatsapp {
  background: #25D366;
  color: #fff;
}

.btn-connect.whatsapp:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 15px rgba(37,211,102,0.6);
}

/* FACEBOOK */
.btn-connect.facebook {
  background: #1877f2;
  color: #fff;
}

.btn-connect.facebook:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 15px rgba(24,119,242,0.6);
}

/* COPYRIGHT */
.footer .copyright {
  border-top: 1px solid rgba(255,255,255,0.05);
  color: #777;
  font-size: 13px;
}

/* CREDITS */
.footer .credits {
  color: #888;
}

.footer .credits a {
  color: #d4af37;
}

/* =========================
   OPTIONAL PARTICLES (SOFT)
========================= */

.footer .particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.footer .particles span {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #d4af37;
  border-radius: 50%;
  opacity: 0;

  animation: footerParticles 12s linear infinite;
}

.footer .particles span:nth-child(1) { left: 10%; animation-delay: 0s; }
.footer .particles span:nth-child(2) { left: 30%; animation-delay: 3s; }
.footer .particles span:nth-child(3) { left: 60%; animation-delay: 6s; }
.footer .particles span:nth-child(4) { left: 80%; animation-delay: 2s; }

@keyframes footerParticles {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-300px); opacity: 0; }
}
/* =========================
   ULTRA CINEMATIC FOOTER
========================= */

.footer {
  position: relative;
  overflow: hidden;
  color: #cbd5e1;

  /* MOVING GRADIENT */
  background: linear-gradient(270deg, #000000, #0a0f2c, #000000);
  background-size: 400% 400%;
  animation: footerGradient 12s ease infinite;
}

/* GRADIENT ANIMATION */
@keyframes footerGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* =========================
   GLOW LIGHTS
========================= */

.footer::before,
.footer::after {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.4;
  animation: footerGlowMove 10s ease-in-out infinite alternate;
}

/* BLUE LIGHT */
.footer::before {
  background: rgba(37,99,235,0.8);
  top: -150px;
  left: -150px;
}

/* GOLD LIGHT */
.footer::after {
  background: rgba(212,175,55,0.8);
  bottom: -150px;
  right: -150px;
}

/* GLOW MOTION */
@keyframes footerGlowMove {
  0% { transform: translate(0,0) scale(1); }
  100% { transform: translate(80px,60px) scale(1.3); }
}

/* =========================
   HEADINGS
========================= */

.footer h4 {
  color: #fff;
  font-size: 18px;
  margin-bottom: 20px;
  position: relative;
}

/* GOLD UNDERLINE */
.footer h4::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 40px;
  height: 2px;
  background: #d4af37;
  box-shadow: 0 0 10px rgba(212,175,55,0.6);
}

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

.footer p {
  color: #9aa3b2;
  line-height: 1.7;
}

/* =========================
   LINKS
========================= */

.footer .footer-links ul a {
  color: #9aa3b2;
  transition: 0.3s;
}

.footer .footer-links ul a:hover {
  color: #d4af37;
  padding-left: 6px;
}

/* =========================
   SOCIAL ICONS
========================= */

.footer .social-links a {
  width: 42px;
  height: 42px;
  border-radius: 50%;

  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);

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

  color: #aaa;
  transition: 0.3s;
}

.footer .social-links a:hover {
  color: #fff;
  border-color: #d4af37;

  transform: translateY(-4px);

  box-shadow:
    0 0 12px rgba(212,175,55,0.5),
    0 0 25px rgba(37,99,235,0.3);
}

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

.footer-connect .btn-connect {
  padding: 10px 16px;
  border-radius: 30px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: 0.3s;
}

/* WHATSAPP */
.btn-connect.whatsapp {
  background: #25D366;
  color: #fff;
}

.btn-connect.whatsapp:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 15px rgba(37,211,102,0.6);
}

/* FACEBOOK */
.btn-connect.facebook {
  background: #1877f2;
  color: #fff;
}

.btn-connect.facebook:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 15px rgba(24,119,242,0.6);
}

/* =========================
   PARTICLES
========================= */

.footer .particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.footer .particles span {
  position: absolute;
  bottom: -50px;
  width: 4px;
  height: 4px;
  background: #d4af37;
  border-radius: 50%;
  opacity: 0;

  animation: footerParticle 10s linear infinite;
}

/* RANDOM */
.footer .particles span:nth-child(1){ left:30%; animation-delay:0s;}
.footer .particles span:nth-child(2){ left:45%; animation-delay:2s;}
.footer .particles span:nth-child(3){ left:60%; animation-delay:4s;}
.footer .particles span:nth-child(4){ left:70%; animation-delay:1s;}
.footer .particles span:nth-child(5){ left:85%; animation-delay:3s;}

@keyframes footerParticle {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-400px); opacity: 0; }
}

/* =========================
   COPYRIGHT
========================= */

.footer .copyright {
  border-top: 1px solid rgba(255,255,255,0.05);
  color: #777;
  font-size: 13px;
}
/* =========================
   ULTRA 3D GOLD BRAND (FIXED)
========================= */

.footer-about .logo {
  position: relative;
  display: inline-block;
  perspective: 600px;
  overflow: hidden;
}

/* BRAND WRAPPER */
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

/* DR BADGE */
.brand-dr {
  font-size: 12px;
  letter-spacing: 2px;
  font-weight: 600;

  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.991);

  padding: 4px 8px;
  border-radius: 6px;

  background: rgba(212,175,55,0.08);

  box-shadow: 0 0 10px rgba(212,175,55,0.3);
}

/* MAIN NAME */
.brand-name {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 2px;
  position: relative;

  /* METALLIC GOLD */
  background: linear-gradient(
    120deg,
    #ffffff,
    #d4af37,
    #f5e6a5,
    #d4af37,
    #ffffff
  );
  background-size: 300% auto;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* 3D DEPTH */
  text-shadow:
    0 1px 0 #999,
    0 2px 0 #888,
    0 3px 0 #777,
    0 4px 0 #666,
    0 5px 10px rgba(0,0,0,0.8),

    0 0 10px rgba(212,175,55,0.6),
    0 0 25px rgba(212,175,55,0.4);

  animation: goldFlow 6s linear infinite;
}

/* GRADIENT FLOW */
@keyframes goldFlow {
  0% { background-position: 0% center; }
  100% { background-position: 300% center; }
}

/* =========================
   SHINE EFFECT (FIXED)
========================= */

.brand-name::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 50%;
  height: 100%;

  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.7),
    transparent
  );

  transform: skewX(-20deg);
  opacity: 0;
}

/* HOVER SHINE */
.footer-about .logo:hover .brand-name::before {
  animation: shineMove 1s ease;
}

@keyframes shineMove {
  100% {
    left: 120%;
    opacity: 1;
  }
}

/* =========================
   UNDERLINE GLOW
========================= */

.brand-name::after {
  content: "";
  display: block;
  width: 70%;
  height: 2px;
  margin-top: 6px;

  background: linear-gradient(to right, #f4f4f5, transparent);
  box-shadow: 0 0 15px rgba(252, 251, 248, 0.7);
}

/* =========================
   HOVER 3D EFFECT
========================= */

.footer-about .logo:hover .brand-name {
  transform: scale(1.08) rotateX(6deg);
  transition: 0.4s ease;
}

/* =========================
   SPARKLE EFFECT ✨
========================= */

.footer-brand::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;

  width: 5px;
  height: 5px;

  background: #e8e7e4;
  border-radius: 50%;
  opacity: 0;

  box-shadow:
    -20px -10px 0 #d4af37,
    20px -15px 0 #ffffff,
    -15px 15px 0 #d4af37,
    25px 10px 0 #ffffff;
}

/* SPARKLE ON HOVER */
.footer-about .logo:hover .footer-brand::after {
  animation: sparkleBurst 0.8s ease;
}

@keyframes sparkleBurst {
  0% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(0.8); }
}/* =========================
   SOCIAL ICONS (NEXT LEVEL)
========================= */

.footer .social-links {
  display: flex;
  gap: 12px;
}

/* BASE STYLE */
.footer .social-links a {
  position: relative;
  width: 45px;
  height: 45px;

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

  border-radius: 50%;
  text-decoration: none;

  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);

  color: #aaa;
  font-size: 18px;

  transition: 0.4s ease;
  overflow: hidden;
}

/* INNER GLOW */
.footer .social-links a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;

  background: radial-gradient(circle, rgba(255,255,255,0.2), transparent 70%);
  opacity: 0;
  transition: 0.3s;
}

/* HOVER COMMON */
.footer .social-links a:hover::before {
  opacity: 1;
}

.footer .social-links a:hover {
  transform: translateY(-6px) scale(1.1);
}

/* =========================
   FACEBOOK STYLE
========================= */

.footer .social-links a:nth-child(1):hover {
  background: linear-gradient(135deg, #1877f2, #0a58ca);
  color: #fff;

  box-shadow:
    0 0 15px rgba(24,119,242,0.6),
    0 0 35px rgba(24,119,242,0.3);
}

/* =========================
   WHATSAPP STYLE
========================= */

.footer .social-links a:nth-child(2):hover {
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #fff;

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

/* =========================
   ICON ANIMATION
========================= */

.footer .social-links a i {
  transition: 0.3s ease;
}

/* ICON POP */
.footer .social-links a:hover i {
  transform: scale(1.2);
}

/* =========================
   CLICK RIPPLE EFFECT
========================= */

.footer .social-links a:active {
  transform: scale(0.95);
}
/* WRAPPER */
.footer-logos a {
  display: inline-block;
  border-radius: 50%;
  cursor: pointer;

  /* FLOAT animation yahan shift */
  animation: logoFloat 6s ease-in-out infinite;
}

/* IMAGE */
.footer-logos a img {
  width: 65px;
  height: 65px;

  padding: 12px;
  border-radius: 50%;
  object-fit: contain;

  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(212,175,55,0.3);

  backdrop-filter: blur(8px);

  /* ONLY glow animation */
  animation: logoPulse 3s ease-in-out infinite;

  transition: 0.4s ease;
}

/* HOVER (AB PERFECT WORK KAREGA) */
.footer-logos a:hover img {
  transform: scale(1.15);

  border: 2px solid #d4af37;

  box-shadow:
    0 0 25px rgba(212,175,55,0.9),
    0 0 50px rgba(212,175,55,0.6),
    inset 0 0 15px rgba(255,255,255,0.2);

  background: rgba(212,175,55,0.1);
}

/* FLOAT */
@keyframes logoFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* GLOW */
@keyframes logoPulse {
  0%,100% {
    box-shadow: 0 0 10px rgba(212,175,55,0.3);
  }
  50% {
    box-shadow: 0 0 25px rgba(212,175,55,0.6);
  }
}/* =========================
   ULTRA PREMIUM LOGOS (ALL ACTIVE)
========================= */

.footer-logos img {
  width: 65px;
  height: 65px;

  object-fit: contain;
  padding: 12px;

  border-radius: 50%;

  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(212,175,55,0.3);

  backdrop-filter: blur(8px);

  /* BASE GLOW */
  box-shadow:
    0 0 10px rgba(246, 246, 249, 0.3),
    inset 0 0 8px rgba(255,255,255,0.05);

  /* 🔥 ANIMATION */
  animation: logoPulse 3s ease-in-out infinite,
             logoFloat 6s ease-in-out infinite;

  transition: 0.4s ease;
}

/* =========================
   PULSE GLOW (ALL LOGOS)
========================= */

@keyframes logoPulse {
  0%,100% {
    box-shadow:
      0 0 10px rgba(73, 55, 212, 0.3),
      0 0 20px rgba(250, 251, 252, 0.2),
      inset 0 0 8px rgba(255,255,255,0.05);
  }

  50% {
    box-shadow:
      0 0 20px rgba(249, 249, 249, 0.6),
      0 0 35px rgba(86, 55, 212, 0.4),
      inset 0 0 12px rgba(247, 247, 247, 0.1);
  }
}

/* =========================
   FLOAT EFFECT
========================= */

@keyframes logoFloat {
  0%,100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-6px);
  }
}

/* =========================
   HOVER (EXTRA POWER)
========================= */

.footer-logos img:hover {
  transform: translateY(-10px) scale(1.15);

  border-color: #ffffff;

  box-shadow:
    0 0 25px rgba(167, 172, 239, 0.9),
    0 0 50px rgba(255, 255, 255, 0.6),
    inset 0 0 15px rgba(89, 99, 236, 0.2);

  background: rgba(212,175,55,0.1);
}.footer-logos {
  margin-top: 50px;
}

.footer-logos img {
  margin-top: 5px;
}
/* =========================
   RESET OLD STYLES
========================= */

.footer-brand .brand-name {
  all: unset; /* ❌ purane sab styles remove */
}

/* =========================
   NEW CLEAN GOLD BRAND
========================= */

.footer-brand {
  display: flex;
  align-items: center;
  gap: 6px;
}

.brand-dr {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 2px;
}

/* MAIN NAME */
.brand-name {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 2px;

  color: #e6d8f5;

  /* CLEAN GLOW */
  text-shadow:
    0 0 8px rgba(167, 158, 239, 0.6),
    0 0 18px rgba(245, 245, 248, 0.4);
}

/* HOVER (SUBTLE PREMIUM) */
.footer-about .logo:hover .brand-name {
  transform: scale(1.05);
  transition: 0.3s ease;
}

/* =========================
   FOOTER PREMIUM BALANCED
========================= */

.footer{
  background:linear-gradient(160deg,#0a0a0a,#111,#0a0a0a) !important;
  color:#d1d5db !important;
  position:relative;
  overflow:hidden;
}

/* SUBTLE TOP LINE */
.footer::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:2px;

  background:linear-gradient(to right,#ffffff20,#ffffff60,#ffffff20);
}

/* SOFT GLOW (VERY LIGHT) */
.footer::after{
  content:"";
  position:absolute;
  width:300px;
  height:300px;
  background:radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%);
  top:-100px;
  right:-100px;
  filter:blur(80px);
}

/* HEADINGS */
.footer h4{
  color:#fff !important;
}

.footer h4::after{
  background:#ffffff !important;
  box-shadow:0 0 8px rgba(255,255,255,0.3);
}

/* TEXT */
.footer p{
  color:#9ca3af !important;
}

/* LINKS */
.footer .footer-links ul a{
  color:#9ca3af !important;
}

.footer .footer-links ul a:hover{
  color:#fff !important;
  padding-left:5px;
}

/* ICON */
.footer .footer-links ul i{
  color:#ffffff !important;
}

/* SOCIAL */
.footer .social-links a{
  background:rgba(255,255,255,0.05) !important;
  border:1px solid rgba(255,255,255,0.1) !important;
  color:#ccc !important;
}

.footer .social-links a:hover{
  background:#fff !important;
  color:#000 !important;
  transform:translateY(-4px);
}

/* BUTTONS */
.btn-connect.whatsapp,
.btn-connect.facebook{
  background:#fff !important;
  color:#000 !important;
}

.btn-connect.whatsapp:hover,
.btn-connect.facebook:hover{
  background:#ddd !important;
}

/* LOGOS */
.footer-logos img{
  background:rgba(255,255,255,0.05) !important;
  border:1px solid rgba(255,255,255,0.1) !important;
}

.footer-logos img:hover{
  transform:scale(1.1);
  border-color:#fff !important;
}

/* BRAND */
.brand-name,
.brand-dr{
  color:#fff !important;
  text-shadow:0 0 10px rgba(255,255,255,0.2);
}

/* COPYRIGHT */
.footer .copyright{
  border-top:1px solid rgba(255,255,255,0.08) !important;
  color:#888 !important;
}/* =========================
   FOOTER PARTICLES WHITE
========================= */

.footer .particles span{
  background:#ffffff !important;

  box-shadow:
    0 0 8px rgba(255,255,255,0.6),
    0 0 15px rgba(255,255,255,0.3);
}
/* =========================
   FOOTER PREMIUM BALANCED
========================= */

.footer{
  background:linear-gradient(160deg,#0a0a0a,#111,#0a0a0a) !important;
  color:#d1d5db !important;
  position:relative;
  overflow:hidden;
}

/* SUBTLE TOP LINE */
.footer::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:2px;

  background:linear-gradient(to right,#ffffff20,#ffffff60,#ffffff20);
}

/* SOFT GLOW (VERY LIGHT) */
.footer::after{
  content:"";
  position:absolute;
  width:300px;
  height:300px;
  background:radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%);
  top:-100px;
  right:-100px;
  filter:blur(80px);
}

/* HEADINGS */
.footer h4{
  color:#fff !important;
}

.footer h4::after{
  background:#ffffff !important;
  box-shadow:0 0 8px rgba(255,255,255,0.3);
}

/* TEXT */
.footer p{
  color:#9ca3af !important;
}

/* LINKS */
.footer .footer-links ul a{
  color:#9ca3af !important;
}

.footer .footer-links ul a:hover{
  color:#fff !important;
  padding-left:5px;
}

/* ICON */
.footer .footer-links ul i{
  color:#ffffff !important;
}

/* SOCIAL */
.footer .social-links a{
  background:rgba(255,255,255,0.05) !important;
  border:1px solid rgba(255,255,255,0.1) !important;
  color:#ccc !important;
}

.footer .social-links a:hover{
  background:#fff !important;
  color:#000 !important;
  transform:translateY(-4px);
}

/* BUTTONS */
.btn-connect.whatsapp,
.btn-connect.facebook{
  background:#fff !important;
  color:#000 !important;
}

.btn-connect.whatsapp:hover,
.btn-connect.facebook:hover{
  background:#ddd !important;
}

/* LOGOS */
.footer-logos img{
  background:rgba(255,255,255,0.05) !important;
  border:1px solid rgba(255,255,255,0.1) !important;
}

.footer-logos img:hover{
  transform:scale(1.1);
  border-color:#fff !important;
}

/* BRAND */
.brand-name,
.brand-dr{
  color:#fff !important;
  text-shadow:0 0 10px rgba(255,255,255,0.2);
}

/* COPYRIGHT */
.footer .copyright{
  border-top:1px solid rgba(255,255,255,0.08) !important;
  color:#888 !important;
}/* =========================
   FOOTER WHITE + BLACK + BLUE TOUCH
========================= */

.footer{
  background:linear-gradient(160deg,#0a0a0a,#0f172a,#0a0a0a) !important;
  color:#d1d5db !important;
  position:relative;
  overflow:hidden;
}

/* TOP LINE (SOFT BLUE) */
.footer::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:2px;

  background:linear-gradient(to right,#2563eb,#60a5fa,#2563eb);
  opacity:0.6;
}

/* SUBTLE BLUE GLOW */
.footer::after{
  content:"";
  position:absolute;
  width:300px;
  height:300px;

  background:radial-gradient(circle, rgba(37,99,235,0.15), transparent 70%);
  top:-100px;
  right:-100px;

  filter:blur(80px);
}

/* REMOVE GOLD EFFECT */
.footer h4::after{
  background:#2563eb !important;
  box-shadow:0 0 8px rgba(37,99,235,0.4);
}

/* HEADINGS */
.footer h4{
  color:#fff !important;
}

/* TEXT */
.footer p{
  color:#9ca3af !important;
}

/* LINKS */
.footer .footer-links ul a{
  color:#9ca3af !important;
}

.footer .footer-links ul a:hover{
  color:#60a5fa !important;
}

/* ICON */
.footer .footer-links ul i{
  color:#2563eb !important;
}

/* SOCIAL */
.footer .social-links a{
  background:rgba(255,255,255,0.05) !important;
  border:1px solid rgba(255,255,255,0.1) !important;
  color:#ccc !important;
}

.footer .social-links a:hover{
  background:#2563eb !important;
  color:#fff !important;
  transform:translateY(-4px);

  box-shadow:0 0 15px rgba(37,99,235,0.4);
}

/* BUTTONS */
.btn-connect.whatsapp,
.btn-connect.facebook{
  background:#2563eb !important;
  color:#fff !important;
}

.btn-connect.whatsapp:hover,
.btn-connect.facebook:hover{
  background:#1e40af !important;
}

/* LOGOS */
.footer-logos img{
  background:rgba(255,255,255,0.05) !important;
  border:1px solid rgba(255,255,255,0.1) !important;
}

.footer-logos img:hover{
  transform:scale(1.1);
  border-color:#2563eb !important;
}

/* BRAND */
.brand-name,
.brand-dr{
  color:#60a5fa !important;
  text-shadow:0 0 10px rgba(37,99,235,0.3);
}

/* COPYRIGHT */
.footer .copyright{
  border-top:1px solid rgba(255,255,255,0.08) !important;
  color:#888 !important;
}
/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
/* PARTICLES FIX */
.footer .particles{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none; /* 🔥 MAIN FIX */
}

/* FOOTER CONTENT ABOVE */
.footer .container{
  position:relative;
  z-index:2;
}

/* BUTTONS CLICKABLE */
.btn-connect{
  position:relative;
  z-index:5;
  pointer-events:auto;
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  color: var(--default-color);
  background-color: var(--background-color);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 160px 0 80px 0;
  text-align: center;
  position: relative;
}

.page-title:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 30%);
  position: absolute;
  inset: 0;
}

.page-title h1 {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 10px;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: center;
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
}

.page-title .breadcrumbs ol li+li {
  padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 90px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 76px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  padding-bottom: 60px;
  position: relative;
}

.section-title h2 {
  font-size: 14px;
  font-weight: 500;
  padding: 0;
  line-height: 1px;
  margin: 0;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  position: relative;
}

.section-title h2::after {
  content: "";
  width: 120px;
  height: 1px;
  display: inline-block;
  background: var(--accent-color);
  margin: 4px 10px;
}

.section-title p {
  color: var(--heading-color);
  margin: 0;
  font-size: 36px;
  font-weight: 800;
  text-transform: uppercase;
  font-family: var(--heading-font);
}

@media (max-width: 768px) {
  .section-title p {
    font-size: 24px;
  }
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
/* =========================================
   HERO SWIPER SLIDER FINAL STYLE
   ========================================= */

.hero {
  padding: 0 !important;
  overflow: hidden;
}

/* Full screen */
.hero-slider .swiper-slide {
  width: 100%;
  height: 100vh;
  position: relative;
}

/* Background image */
.hero-slider .swiper-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}.slide-2 img {
  object-position: center 50%;
}

/* Dark overlay */
.hero-slider .swiper-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(24, 24, 25, 0.68);
  z-index: 2;
}

/* Center text */
.hero-slider .container {
  position: relative;
   
  z-index: 3;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
   padding-top: 170px; /* 👈 ADD THIS */
}

/* =========================
   SMALL UNIQUE HERO TITLE
========================= */

.hero-slider h2{

  font-size: 64px;
  font-weight: 900;

  line-height: 1;
  letter-spacing: -1px;

  text-transform: uppercase;

  position: relative;
  display: inline-block;

  /* 🔥 UNIQUE TEXT STYLE */
  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #c4b5fd 35%,
      #4f46e5 70%,
      #ffffff 100%
    );

  background-size: 250% 250%;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* 🔥 PREMIUM DEPTH */
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,0.12))
    drop-shadow(0 0 18px rgba(79,70,229,0.22));

  animation:
    gradientFlow 5s ease infinite,
    fadeUp 1s ease forwards;
}

/* SOFT GLOW BEHIND TEXT */
.hero-slider h2::before{

  content:"";

  position:absolute;

  width:120%;
  height:120%;

  top:50%;
  left:50%;

  transform:translate(-50%,-50%);

  background:
    radial-gradient(
      circle,
      rgba(79,70,229,0.18),
      transparent 70%
    );

  filter:blur(25px);

  z-index:-1;
}

/* ANIMATION */
@keyframes gradientFlow{

  0%{
    background-position:0% 50%;
  }

  50%{
    background-position:100% 50%;
  }

  100%{
    background-position:0% 50%;
  }

}

/* MOBILE */
@media(max-width:768px){

.hero-slider h2{
  font-size:46px;
}

}

.hero-slider p {
  font-size: 22px;
  margin-bottom: 20px;
  animation: fadeUp 1.2s ease forwards;
}

/* =========================================
   WATCH VIDEO BUTTON
   ========================================= */

.hero .btn-watch-video {
  background: transparent;
  color: #000000;
  border: 1px solid #1d16f0;
  padding: 12px 20px;
  border-radius: 50px;
  transition: 0.3s ease;
  font-weight: 500;
}

.hero .btn-watch-video:hover {
  background: #000000;
  color: #000;
  box-shadow: 0 0 15px rgba(132, 92, 235, 0.6);
  transform: translateY(-2px);
}

.hero-slider p {
  font-size: 22px;
  margin-bottom: 20px;
  animation: fadeUp 1.2s ease forwards;
}

/* =========================================
   WATCH VIDEO BUTTON
   ========================================= */

.hero .btn-watch-video {
  background: transparent;
  color: #000000;
  border: 1px solid #1d16f0;
  padding: 12px 20px;
  border-radius: 50px;
  transition: 0.3s ease;
  font-weight: 500;
}

.hero .btn-watch-video:hover {
  background: #000000;
  color: #000;
  box-shadow: 0 0 15px rgba(132, 92, 235, 0.6);
  transform: translateY(-2px);
}

/* =========================================
   SLIDER ARROWS STYLE
   ========================================= */

/* =====================================
   ELITE HERO ARROWS — FLOATING STYLE
   ===================================== */

/* Remove default swiper icon */
.hero-slider .swiper-button-prev::after,
.hero-slider .swiper-button-next::after {
  content: "";
}

/* Arrow container */
.hero-slider .swiper-button-prev,
.hero-slider .swiper-button-next {
  width: 70px;
  height: 70px;
  background: transparent;
  border: none;
  transition: 0.3s ease;
}

/* Custom arrow */
.hero-slider .swiper-button-prev::before,
.hero-slider .swiper-button-next::before {
  content: "";
  width: 16px;
  height: 16px;
  border-top: 1.8px solid rgba(255,255,255,0.9);
  border-right: 1.8px solid rgba(255,255,255,0.9);
  transition: all 0.3s ease;
}

/* Base rotation */
.hero-slider .swiper-button-prev::before {
  transform: rotate(-135deg);
}

.hero-slider .swiper-button-next::before {
  transform: rotate(45deg);
}

/* =========================
   FLOATING IDLE ANIMATION
   ========================= */

.hero-slider .swiper-button-prev {
  animation: floatLeft 3s ease-in-out infinite;
}

.hero-slider .swiper-button-next {
  animation: floatRight 3s ease-in-out infinite;
}

@keyframes floatLeft {
  0%,100% { transform: translateX(0); }
  50% { transform: translateX(-6px); }
}

@keyframes floatRight {
  0%,100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}

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

.hero-slider .swiper-button-prev:hover::before {
  border-color: #3769d4;
  filter: drop-shadow(0 0 10px rgba(157, 158, 239, 0.9));
}

.hero-slider .swiper-button-next:hover::before {
  border-color: #341bed;
  filter: drop-shadow(0 0 10px rgba(113, 112, 114, 0.9));
}

/* =========================
   CLICK EFFECT
   ========================= */

.hero-slider .swiper-button-prev:active::before {
  border-color: #2563EB;
  transform: rotate(-135deg) scale(0.85);
}

.hero-slider .swiper-button-next:active::before {
  border-color: #2563EB;
  transform: rotate(45deg) scale(0.85);
}

/* =========================================
   Pagination Dots
   ========================================= */

.hero-slider .swiper-pagination-bullet {
  background: #fff;
  opacity: 0.5;
}

.hero-slider .swiper-pagination-bullet-active {
  background: #373cd4;
  opacity: 1;
}

/* =========================================
   Text Animation
   ========================================= */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(25px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Default rotation */
.hero-slider .swiper-button-prev::before {
  transform: rotate(-135deg) translateX(0);
}

.hero-slider .swiper-button-next::before {
  transform: rotate(45deg) translateX(0);
}

/* Hover effect */
.hero-slider .swiper-button-prev:hover::before {
  border-color: #3741d4;
  transform: rotate(-135deg) translateX(-5px);
  filter: drop-shadow(0 0 8px rgba(76, 55, 212, 0.8));
}

.hero-slider .swiper-button-next:hover::before {
  border-color: #3741d4;
  transform: rotate(45deg) translateX(5px);
  filter: drop-shadow(0 0 8px rgba(63, 55, 212, 0.8));
}

/* Click effect */
.hero-slider .swiper-button-prev:active::before {
  border-color: #2563EB;
  transform: rotate(-135deg) translateX(-5px) scale(0.85);
}

.hero-slider .swiper-button-next:active::before {
  border-color: #2563EB;
  transform: rotate(45deg) translateX(5px) scale(0.85);
}
/* =====================================
   ELITE HERO ARROWS — FLOATING STYLE
   ===================================== */

/* Remove default swiper icon */
.hero-slider .swiper-button-prev::after,
.hero-slider .swiper-button-next::after {
  content: "";
}

/* Arrow container */
.hero-slider .swiper-button-prev,
.hero-slider .swiper-button-next {
  width: 70px;
  height: 70px;
  background: transparent;
  border: none;
  transition: 0.3s ease;
}

/* Custom arrow */
.hero-slider .swiper-button-prev::before,
.hero-slider .swiper-button-next::before {
  content: "";
  width: 16px;
  height: 16px;
  border-top: 1.8px solid rgba(255,255,255,0.9);
  border-right: 1.8px solid rgba(255,255,255,0.9);
  transition: all 0.3s ease;
}

/* Base rotation */
.hero-slider .swiper-button-prev::before {
  transform: rotate(-135deg);
}

.hero-slider .swiper-button-next::before {
  transform: rotate(45deg);
}

/* =========================
   FLOATING IDLE ANIMATION
   ========================= */

.hero-slider .swiper-button-prev {
  animation: floatLeft 3s ease-in-out infinite;
}

.hero-slider .swiper-button-next {
  animation: floatRight 3s ease-in-out infinite;
}

@keyframes floatLeft {
  0%,100% { transform: translateX(0); }
  50% { transform: translateX(-6px); }
}

@keyframes floatRight {
  0%,100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}

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

.hero-slider .swiper-button-prev:hover::before {
  border-color: #0b1ae8;
  filter: drop-shadow(0 0 10px rgba(129, 117, 220, 0.9));
}

.hero-slider .swiper-button-next:hover::before {
  border-color: #3100e0;
  filter: drop-shadow(0 0 10px rgba(84, 55, 212, 0.9));
}

/* =========================
   CLICK EFFECT
   ========================= */

.hero-slider .swiper-button-prev:active::before {
  border-color: #2563EB;
  transform: rotate(-135deg) scale(0.85);
}

.hero-slider .swiper-button-next:active::before {
  border-color: #2563EB;
  transform: rotate(45deg) scale(0.85);
}


/* =========================
   ADVANCED CLICK ANIMATION
   ========================= */

.hero-slider .swiper-button-prev:active,
.hero-slider .swiper-button-next:active {
  animation: arrowClick 0.35s ease;
}

@keyframes arrowClick {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.85);
  }
  70% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* Arrow color press effect */
.hero-slider .swiper-button-prev:active::before,
.hero-slider .swiper-button-next:active::before {
  border-color: #2563EB;
  filter: drop-shadow(0 0 8px rgba(37,99,235,0.8));
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about h3 {
  font-weight: 700;
  font-size: 28px;
  margin-bottom: 20px;
}

.about .fst-italic {
  color: color-mix(in srgb, var(--default-color), var(--contrast-color) 50%);
}

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

/* =====================================
   MODERN GLASS HERO BUTTON STYLE
   ===================================== */
/* GET STARTED */
.hero .btn-get-started {
  background: rgba(114, 112, 112, 0.37);
  color: #ffffff;
  border: 1px solid #ffffff;
  backdrop-filter: blur(2px);
  padding: 12px 34px;
  border-radius: 50px;
  font-weight: 500;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

/* Hover → Gold + Glow */
.hero .btn-get-started:hover {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;

  box-shadow:
    0 0 10px rgba(133, 133, 211, 0.6),
    0 0 20px rgba(99, 90, 237, 0.5),
    0 0 40px rgba(95, 94, 93, 0.35);

  transform: translateY(-2px);
}

/* Click → Blue press */
.hero .btn-get-started:active {
  background: #2563EB;
  border-color: #2563EB;
  color: #fff;

  box-shadow:
    0 0 12px rgba(37,99,235,0.6);

  transform: scale(0.96);
}

/* WATCH VIDEO */
.hero .btn-watch-video {
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  backdrop-filter: blur(2px);
  padding: 12px 12px;
  border-radius: 50px;
  transition: 0.3s ease;
  margin-left: 15px;
}

/* WATCH VIDEO Hover */
.hero .btn-watch-video:hover {
  background: #ffffff;
  color: #000;
  border-color: #5437d4;

  box-shadow:
    0 0 8px rgba(255, 255, 200, 0.8),
    0 0 18px rgba(255, 223, 120, 0.7),
    0 0 30px rgba(255, 255, 255, 0.4);

  transform: translateY(-2px);
}
/* Click → Blue press */
.hero .btn-watch-video:active {
  background: #2563EB;
  border-color: #2563EB;
  color: #fff;

  box-shadow:
    0 0 12px rgba(37,99,235,0.6);

  transform: scale(0.96);
}
/* =====================================
   LUXURY PULSE GLOW ANIMATION
   ===================================== */

@keyframes goldPulse {
  0% {
    box-shadow:
      0 0 4px rgba(255,255,255,0.6),
      0 0 12px rgba(255,223,120,0.5);
  }
  50% {
    box-shadow:
      0 0 10px rgba(255,255,255,0.9),
      0 0 25px rgba(255,223,120,0.8);
  }
  100% {
    box-shadow:
      0 0 4px rgba(255,255,255,0.6),
      0 0 12px rgba(255,223,120,0.5);
  }
}

/* Apply animation on hover */
.hero .btn-get-started:hover,
.hero .btn-watch-video:hover {
  animation: goldPulse 1.8s infinite ease-in-out;
}

/* =========================
   SERVICES FINAL PRO CLEAN
=                   ======================== */
.services{
  position:relative;
  padding:100px 0;
  background:#ffffff;
  overflow:hidden;
}

/* TOP CURVED WAVE */
.services::before{
  content:"";
  position:absolute;
  top:-80px;
  left:-10%;
  width:120%;
  height:200px;

  background:#eaf1ff;

  border-radius:0 0 50% 50%;
  z-index:0;
}

/* BOTTOM CURVED WAVE */
.services::after{
  content:"";
  position:absolute;
  bottom:-80px;
  left:-10%;
  width:120%;
  height:200px;

  background:#f3f7ff;

  border-radius:50% 50% 0 0;
  z-index:0;
}

/* CONTENT ABOVE */
.services .container{
  position:relative;
  z-index:1;
}
/* =========================
   TITLE
========================= */

.services .section-title h2{
  color:#000;
  font-weight:700;
}

.services .section-title p{
  color:#555;
  font-size:14px;
}

/* =========================
   HORIZONTAL BOX (NEW)
========================= */

.service-box{
  display:flex;
  gap:25px;
  margin-bottom:35px;

  padding:25px;
  border-radius:18px;

  background:linear-gradient(135deg,#f4f8ff,#eef4ff);
  border:1px solid rgba(37,99,235,0.08);

  transition:0.3s;
}

.service-box:hover{
  box-shadow:
    0 20px 50px rgba(0,0,0,0.06),
    0 0 20px rgba(37,99,235,0.12);
}

/* =========================
   CARD (KEEP ORIGINAL STYLE)
========================= */

.services .service-item{
  flex:1;
  background:#fff;
  border-radius:14px;
  overflow:hidden;

  border:1px solid rgba(0,0,0,0.06);
  transition:0.3s;
}

/* IMAGE */
.services .service-item .img{
  overflow:hidden;
}

.services .service-item .img img{
  width:100%;
  height:170px;
  object-fit:cover;
  transition:0.4s;
}

/* =========================
   DETAILS FIX (IMPORTANT)
========================= */

.services .details{
  padding:18px;
  margin:0 !important;   /* ❗ remove broken negative margin */
  text-align:center;
  position:relative;
  box-shadow:none;
}

/* ICON FIX */
.services .details .icon{
  position:relative;
  top:0;
  left:0;

  width:50px;
  height:50px;

  background:#2563eb;
  color:#fff;

  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;

  margin:0 auto 10px;
  font-size:18px;
}

/* TEXT */
.services .details h3{
  font-size:18px;
  color:#000;
  margin-bottom:8px;
}

.services .details p{
  font-size:13px;
  color:#555;
  line-height:1.6;
}

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

.services .service-item:hover{
  transform:translateY(-6px);
  box-shadow:
    0 15px 40px rgba(0,0,0,0.08),
    0 0 15px rgba(37,99,235,0.12);
}

.services .service-item:hover img{
  transform:scale(1.06);
}

.services .service-item:hover .icon{
  background:#1e40af;
}

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

@media(max-width:768px){

  .service-box{
    flex-direction:column;
    padding:18px;
  }

}/* =========================
   PERFECT CARD SIZE
========================= */

.service-box .img img{
  height:160px; /* balanced size */
}

/* DETAILS */
.service-box .details{
  padding:18px;
}

/* TITLE */
.service-box h3{
  font-size:17px;
  margin-bottom:8px;
}

/* TEXT */
.service-box p{
  font-size:13px;
  line-height:1.6;
}

/* ICON */
.service-box .icon{
  width:48px;
  height:48px;
  font-size:18px;
}

/* =========================
   BOX WIDTH PERFECT CENTER
========================= */

.service-box{
  max-width:1100px; /* zyada narrow nahi */
  margin-left:auto;
  margin-right:auto;
}

/* =========================
   SPACING IMPROVE
========================= */

.service-box{
  padding:22px;
  gap:20px;
}

/* =========================
   HOVER CLEAN (NO OVER)
========================= */

.service-box .service-item:hover{
  transform:translateY(-5px);
}
/* WRAPPER */
.section-title{
  position:relative;
  text-align:center;
  margin-bottom:80px;
}

/* BACK TEXT */
.section-title .bg-text{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);

  font-size:95px;
  font-weight:800;

  color:rgba(37,99,235,0.05);
  letter-spacing:6px;

  z-index:0;
}

/* MAIN */
.section-title h2{
  position:relative;
  z-index:1;

  font-size:42px;
  font-weight:800;
  color:#111;
}

/* LINE */
.section-title h2::after{
  content:"";
  display:block;
  width:60px;
  height:3px;
  margin:12px auto 0;
  background:#2563eb;
  border-radius:10px;
}

.service-popup{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);

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

  z-index:9999;
}

.popup-box{
  background:#fff;
  padding:30px;
  border-radius:16px;
  max-width:500px;
  width:90%;
  text-align:center;
  position:relative;
}

.popup-img{
  width:100%;
  height:250px;
  object-fit:cover;
  border-radius:12px;
  margin-bottom:15px;
}

.popup-close{
  position:absolute;
  top:10px;
  right:15px;
  font-size:26px;
  cursor:pointer;
}

.read-more-btn{
  display:inline-block;
  margin-top:10px;
  color:#2563eb;
  cursor:pointer;
}/* =========================
   POPUP TEXT ALIGNMENT FIX
========================= */

.popup-box{
  text-align:left;   /* ❌ remove center */
}

/* HEADING */
.popup-box h3{
  font-size:22px;
  font-weight:700;
  color:#2153f8;

  margin-bottom:12px;
  text-align:left;
}

/* PARAGRAPH */
.popup-box p{
  color:#ffffff;
  font-size:15px;
  line-height:1.8;

  text-align:justify;   /* 🔥 best for paragraphs */
  margin-bottom:12px;
}

/* IMAGE CENTER ONLY */
.popup-img{
  display:block;
  margin:0 auto 20px auto;
}
/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
/* ==============================
   TRANSPARENT GLASS NAVBAR
   ============================== */

/* Header fully transparent */
.header {
  background: transparent !important;
  box-shadow: none !important;
}

/* Main navbar container (glass effect) */
.header .container-xl {
  background: rgba(255, 255, 255, 0.792); /* TRANSPARENT */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 999px;
  padding: 10px 26px;
  margin-top: 18px;
  border: 1px solid rgba(80, 78, 78, 0.075);
}


/* CTA button (transparent) */
.header .cta-btn {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 999px;
  padding: 8px 20px;
  transition: 0.3s;
}

.header .cta-btn:hover {
  background: #2563EB;
  border-color: #2563EB;
  color: #fff;
}

/* Mobile */
@media (max-width: 1199px) {
  .header .container-xl {
    border-radius: 20px;
    padding: 14px;
  }
}
/* ==============================
   GOLDEN NAVBAR TEXT (PREMIUM)
   ============================== */
/* ===============================
   NAVBAR TEXT — PREMIUM GOLD STYLE
   =============================== */

/* Base navbar links */
.navmenu a,
.navmenu a:focus {
  color: #f5f5f5 !important;   /* clear soft white */
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;

  /* clarity shadow (no heavy glow) */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  transition: all 0.3s ease;
}

/* Hover & active — luxury gold */
.navmenu a:hover,
.navmenu .active,
.navmenu li:hover > a {
  color: #1c1cf1 !important;   /* classic premium gold */

  text-shadow:
    0 0 6px rgba(101, 101, 103, 0.45),
    0 2px 4px rgba(105, 103, 103, 0.6);
}

/* Elegant underline indicator */
.navmenu > ul > li > a::before {
  background-color: #3c37d4 !important;
  height: 2px;
  bottom: -6px;
  box-shadow: 0 0 6px rgba(86, 85, 84, 0.45);
}

/* Dropdown menu text (clean & readable) */
.navmenu .dropdown ul a {
  color: #111 !important;
  text-shadow: none;
  font-weight: 500;
}/* ==================================================
   NAVBAR — GLASS + GOLD + PROFESSIONAL FINAL STYLE
   ================================================== */

/* ---------------- HEADER BASE ---------------- */
.header {
  background: transparent !important;
  backdrop-filter: blur(0px);
  transition: all 0.4s ease;
}

/* Glass effect on scroll */
.scrolled .header {
  background: rgba(105, 105, 105, 0.65) !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 30px rgba(94, 92, 92, 0.6);
}


/* ---------------- NAV LINKS ---------------- */
.navmenu a,
.navmenu a:focus {
  color: #080000 !important;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  transition: all 0.3s ease;
}

/* Hover & active — premium gold */
.navmenu a:hover,
.navmenu .active,
.navmenu li:hover > a {
  color: #000000 !important;
  text-shadow:
    0 0 6px rgba(132, 132, 132, 0.45),
    0 2px 4px rgba(0, 0, 0, 0.6);
}

/* Elegant underline */
.navmenu > ul > li > a::before {
  background-color: #3012de !important;
  height: 2px;
  bottom: -6px;
  box-shadow: 0 0 6px rgba(98, 98, 99, 0.45);
}


/* ---------------- GET STARTED BUTTON ---------------- */
.header .cta-btn {
  color: #000000 !important;
  border: 1px solid rgb(37, 4, 255);
  background: transparent;
  padding: 8px 26px;
  border-radius: 999px;
  letter-spacing: 1px;
  font-size: 12px;
  text-transform: uppercase;
  transition: all 0.35s ease;
}

/* Button hover shine */
.header .cta-btn:hover {
  background: linear-gradient(135deg, #1637f4, #0c39cf);
  color: #ffffff !important;
  box-shadow: 0 6px 22px rgba(96, 96, 95, 0.55);
  border-color: transparent;
}

/* ---------------- MOBILE MENU FIX ---------------- */
.mobile-nav-toggle {
  color: #f5f5f5 !important;
}

/* =====================================
   DR IJAZ BASHIR — MODIFIED ANIMATED LOGO
   (Works With .sitename)
   ===================================== */

#header .logo .sitename {
  position: relative;
  display: inline-block;
  margin: 0;
  font-family: "Raleway", "Inter", sans-serif;

  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #000000;

  opacity: 0;
  transform: translateY(8px);
  animation: logoFade 0.7s ease forwards;
}

/* DR small */
#header .logo .sitename small {
  font-size: 11px;
  font-weight: 600;
  color: #281ee0;
  letter-spacing: 2px;
  margin-right: 6px;
}

/* Gold underline animated */
#header .logo .sitename::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: #0927be;
  animation: lineGrow 1s ease forwards;
  animation-delay: 0.4s;
}

/* Thin subtle line */
#header .logo .sitename::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -9px;
  width: 0;
  height: 1px;
  background: rgba(181, 181, 181, 0.406);
  animation: lineGrow 1.2s ease forwards;
  animation-delay: 0.5s;
}

/* TEXT REVEAL */
@keyframes logoFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* LINE EXPAND */
@keyframes lineGrow {
  to {
    width: 85%;
  }
}

/* Hover refinement */
#header .logo:hover .sitename {
  letter-spacing: 1.3px;
  transition: 0.3s ease;
}
/* ==============================
   FORCE NAVBAR FIX
   ============================== */

/* Layout fix */
#header .container-xl {
  display: flex !important;
  align-items: center !important;
}

/* Logo left with spacing */
#header .logo {
  margin-right: 60px !important;
}

/* Menu left after logo */
#navmenu {
  margin-right: auto !important;
}

/* Make menu smaller */
#navmenu > ul > li {
  padding: 18px 12px !important;
}

#navmenu a {
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
}



/* =====================================
   LOGO LEFT — MENU RIGHT
   ===================================== */

#header .container-xl {
  display: flex !important;
  align-items: center !important;
}

/* Logo left */
#header .logo {
  margin-right: auto !important;  /* logo ke baad sab right chala jaye */
}

/* Menu right side */
#navmenu {
  margin-left: 0 !important;
}

/* Button thoda menu ke baad */
.cta-btn {
  margin-left: -80px !important;
}

/* Small menu */
#navmenu > ul > li {
  padding: 18px 12px !important;
}

#navmenu a {
  font-size: 12px !important;
  letter-spacing: 0.5px !important;
}

/* Remove dropdown arrow */
#navmenu a i {
  display: none !important;
}
/* =====================================
   MODERN GLASS DROPDOWN THEME
   ===================================== */

/* Dropdown container */
#navmenu .dropdown ul {
  background: rgba(255, 255, 255, 0.192) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border-radius: 12px !important;
  padding: 14px 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

/* Dropdown items */
#navmenu .dropdown ul li a {
  color: #ffffff !important;
  font-size: 14px !important;
  padding: 10px 24px !important;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
}

/* Hover effect */
#navmenu .dropdown ul li a:hover {
  background: rgba(185, 186, 186, 0.12); /* royal blue soft */
  border-left: 3px solid #2563EB;
  padding-left: 28px !important;
  color: #ffffff !important;
}

/* Smooth appearance */
#navmenu .dropdown ul {
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.3s ease;
}

#navmenu .dropdown:hover > ul {
  opacity: 1;
  transform: translateY(0);
}
/* =====================================
   CLEAR DROPDOWN + GOLD HOVER
   ===================================== */

/* Dropdown box — clear visible */
#navmenu .dropdown ul {
  background: #f6f5f58f !important;   /* solid dark */
  border-radius: 8px !important;
  padding: 10px 0 !important;
  border: 1px solid rgba(86, 55, 212, 0.25);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.68);
}

/* Dropdown items normal */
#navmenu .dropdown ul li a {
  color: #090909 !important;
  font-size: 14px !important;
  padding: 10px 22px !important;
  transition: 0.3s ease;
}

/* Hover = GOLD */
#navmenu .dropdown ul li a:hover {
  color: #fdfdfd !important;   /* gold */
  background: rgba(78, 55, 212, 0.265);
}

/* Smooth open effect */
#navmenu .dropdown ul {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.25s ease;
}

#navmenu .dropdown:hover > ul {
  opacity: 1;
  transform: translateY(0);
}

/* Typography */

/* ======================================
   ULTRA PREMIUM CINEMATIC HERO
====================================== */

/* Make header transparent & on top */
#header {
  position: absolute;
  width: 100%;
  background: transparent !important;
  box-shadow: none !important;
  z-index: 10;
}

/* Hero background */

 .about-hero-cinematic {
  position: relative;
  min-height: 100vh;
  padding-top: 260px;
  display: flex;
  align-items: center;
padding-bottom:0;   /* add this */
margin-bottom:0;    /* add this */
margin-right: -1%;

  background-image: url("../img/about-heros.png");
  background-size: cover;
  background-repeat: no-repeat;
background-position: -10px 125%;/* 👈 adjust here */
  overflow: hidden;

}

/* Animated watermark */
.hero-content-wrapper::after {
  content: "ABOUT";
  position: absolute;
  top: -1%;
  left: 5%;
  font-size: 110px;
  font-weight: 900;
  letter-spacing: 20px;
  color: rgba(178, 177, 179, 0.269);
  animation: fadeMove 8s ease-in-out infinite alternate;
}

@keyframes fadeMove {
  from { transform: translateY(0px); }
  to   { transform: translateY(20px); }
}
/* ================= CONTENT PANEL (FINAL CLEAN) ================= */
.hero-content-wrapper{
  position: relative;
  margin-left: auto;
  margin-right: 8%;
  max-width: 480px;
  padding: 65px 55px;

  /* ✅ REAL GLASS EFFECT */
  background: rgb(255, 255, 255); /* thoda increase kiya for visibility */

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  color:#111;

  border-radius: 30px;

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

  box-shadow: 0 15px 40px rgba(106, 74, 250, 0.703);

  transition: all 0.4s ease;
}

/* HOVER */
.hero-content-wrapper:hover {
  transform: translateY(-10px);

  box-shadow:
    0 25px 60px rgba(0,0,0,0.18),
    0 0 30px rgba(37,99,235,0.15);
}

/* ================= TAG ================= */

.hero-tag {
  font-size: 12px;
  letter-spacing: 6px;
  color: #2563eb; /* BLUE */
  text-transform: uppercase;
  font-weight: 600;
}

/* LINE */
.hero-tag::after {
  content: "";
  display: block;
  width: 70px;
  height: 2px;
  background: linear-gradient(to right, #2563eb, transparent);
  margin-top: 8px;
}

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

.hero-content-wrapper h1 {
  font-size: 50px;
  font-weight: 800;
  line-height: 1.1;
  margin: 20px 0;

  /* ✅ BLACK + BLUE */
  background: linear-gradient(to right, #000000, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

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

.hero-role {
  color: #000; /* BLACK */
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 25px;
}

/* ================= DESCRIPTION ================= */

.hero-desc {
  color: #444;
  line-height: 1.9;
  font-size: 16px;
}

/* ================= BUTTON ================= */

.bio-highlight-btn{
  margin-top:35px;
  padding:15px 34px;

  font-size:13px;
  letter-spacing:2px;
  text-transform:uppercase;

  color:#000;
  background:#fff;

  border:1px solid #000;
  border-radius:40px;

  transition:0.4s;
}

/* HOVER */
.bio-highlight-btn:hover{
  background:#000;
  color:#fff;
}

/* ACTIVE (BLUE TOUCH) */
.bio-highlight-btn.active{
  background:#2563eb;
  border-color:#2563eb;
  color:#fff;
}




/* =====================================
   BIOGRAPHY POPUP MODAL
===================================== */

.bio-modal{

  display:none;
  position:fixed;

  top:90px;
  left:0;

  width:100%;
  height:calc(100vh - 90px);

  background:rgba(244, 232, 232, 0.75);
  backdrop-filter:blur(6px);

  overflow-y:auto;

  padding:40px 20px;

  z-index:9999;

  animation:fadeOverlay .4s ease;
}


/* =====================================
   CARD
===================================== */

.bio-card{

  margin:auto;

  width:820px;
  max-width:95%;

  background:#ffffff;

  border-radius:16px;

  overflow:hidden;

  position:relative;

  backdrop-filter:blur(10px);

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

  box-shadow:
  0 30px 80px rgba(0,0,0,0.35),
  0 0 0 1px rgba(255,255,255,0.1);

  animation:popupScale .35s ease;

  transition:.3s;

}

.bio-card:hover{

  transform:translateY(-4px);

  box-shadow:
  0 40px 100px rgba(0,0,0,0.35);

}


/* =====================================
   GRADIENT BORDER EFFECT
===================================== */

.bio-card::before{

  content:"";
  position:absolute;

  inset:0;

  border-radius:16px;

  padding:1px;

  background:linear-gradient(
  120deg,
  rgba(255,255,255,0.4),
  rgba(15,76,255,0.4),
  rgba(255,255,255,0.3)
  );

  -webkit-mask:
  linear-gradient(#000 0 0) content-box,
  linear-gradient(#000 0 0);

  -webkit-mask-composite:xor;
  mask-composite:exclude;

  pointer-events:none;

}


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

.bio-header{

  padding:30px;

  background:linear-gradient(135deg,#0f4cff,#2c74ff);

  color:#fff;

  position:relative;

  overflow:hidden;

}

.bio-header h2{

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

  margin-bottom:6px;

}

.bio-role{

  font-size:14px;
  opacity:0.9;

}


/* HEADER LIGHT EFFECT */

.bio-header::after{

  content:"";

  position:absolute;

  width:200%;
  height:100%;

  left:-100%;
  top:0;

  background:linear-gradient(
  120deg,
  transparent,
  rgba(255,255,255,0.25),
  transparent
  );

  animation:headerShine 6s infinite;

}


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

.bio-content{

  padding:35px;

  max-height:420px;

  overflow-y:auto;

}

.bio-content h3{

  font-size:18px;

  margin-top:22px;

  color:#0f4cff;

}

.bio-content p{

  color:#555;

  line-height:1.8;

  transition:.25s;

}

.bio-content p:hover{

  transform:translateX(4px);

  color:#222;

}


/* =====================================
   SCROLLBAR
===================================== */

.bio-content::-webkit-scrollbar{

  width:6px;

}

.bio-content::-webkit-scrollbar-thumb{

  background:linear-gradient(#0f4cff,#2c74ff);

  border-radius:10px;

}

.bio-content::-webkit-scrollbar-track{

  background:#f2f2f2;

}


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

.bio-footer{

  padding:20px 35px;

  border-top:1px solid #eee;

  text-align:right;

}


/* =====================================
   CANCEL BUTTON
===================================== */

.bio-cancel-btn{

  padding:10px 22px;

  border:none;

  border-radius:25px;

  background:linear-gradient(135deg,#063ee8,#7a7cff);

  color:#fff;

  cursor:pointer;

  font-size:13px;

  transition:.3s;

}

.bio-cancel-btn:hover{

  transform:translateY(-3px);

  box-shadow:0 8px 20px rgba(255,77,77,0.35);

}


/* =====================================
   CLOSE ICON
===================================== */
.bio-close{

position:sticky;
right:20px;
top:10px;

float:right;

width:38px;
height:38px;

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

font-size:22px;

border-radius:50%;

background:#0f172a;

color:#140ad7;

cursor:pointer;

z-index:100;

transition:0.3s;

}


.bio-close{

  position:absolute;

  right:20px;
  top:18px;

  width:36px;
  height:36px;

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

  font-size:22px;

  border-radius:50%;

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

  color:#fff;

  cursor:pointer;

  z-index:10;

  transition:0.3s;

}

.bio-close:hover{

  background:#fff;

  color:#0f4cff;

  transform:rotate(90deg);

}

/* =====================================
   ANIMATIONS
===================================== */

@keyframes fadeOverlay{

  from{opacity:0;}
  to{opacity:1;}

}

@keyframes popupScale{

  from{
    transform:scale(.9) translateY(20px);
    opacity:0;
  }

  to{
    transform:scale(1) translateY(0);
    opacity:1;
  }

}

@keyframes headerShine{

  0%{left:-100%;}
  50%{left:120%;}
  100%{left:120%;}

}


/* =====================================
   NEW POPUP THEME
===================================== */

/* HEADER */

.bio-header{

  background:linear-gradient(135deg,#0a2a66,#1f5eff) !important;

  padding:35px !important;

  color:#fff !important;

  border-bottom:3px solid #5937d4;

}


/* MAIN TITLE */

.bio-header h2{

  font-size:32px !important;

  font-weight:700 !important;

  letter-spacing:0.5px !important;

  margin-bottom:6px !important;

  color:#fefefe !important;

}


/* ROLE TEXT */

.bio-role{

  font-size:15px !important;

  color:#e6e6e6 !important;

  letter-spacing:1px !important;

}


/* SECTION HEADINGS */

.bio-content h3{

  font-size:19px !important;

  margin-top:26px !important;

  margin-bottom:10px !important;

  font-weight:600 !important;

  color:#000000 !important;

  position:relative;

}


/* GOLD UNDERLINE */

.bio-content h3::after{

  content:"";

  display:block;

  width:45px;

  height:3px;

  background:#3418d1;

  margin-top:6px;

  border-radius:2px;

}


/* TEXT */

.bio-content p{

  color:#444 !important;

  line-height:1.9 !important;

  font-size:15px;

  transition:0.25s;

}


/* TEXT HOVER */

.bio-content p:hover{

  transform:translateX(5px);

  color:#111;

}
.aesthetic-divider{
width:100%;
height:80px;
display:flex;
align-items:center;
justify-content:center;
background:transparent;
position:relative;
}

/* GOLD LINE */

.aesthetic-divider::before{

content:"";

width:260px;
height:2px;

background:linear-gradient(
90deg,
transparent,
#f4f4f3,
#c8c8c7,
#411be7,
transparent
);

box-shadow:
0 0 10px rgba(125, 125, 125, 0.6);

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

}


/* SMOOTH GLOW */

@keyframes lineGlow{

0%{
opacity:0.6;
transform:scaleX(0.9);
}

50%{
opacity:1;
transform:scaleX(1);
}

100%{
opacity:0.6;
transform:scaleX(0.9);
}

}

/* divider*/
.hero-divider{
position:relative;
width:100%;
height:0;
background:transparent;
display:flex;
align-items:center;
justify-content:center;
overflow:visible;
}

/* CORE LIGHT */

.pulse-core{
position:absolute;
width:20px;
height:20px;
border-radius:50%;

background:radial-gradient(
circle,
#ffffff,
#0f4cff,
transparent
);

filter:blur(6px);

animation:corePulse 3s ease-in-out infinite;
}

/* EXPANDING RING */

.pulse-ring{
position:absolute;
width:40px;
height:40px;
border-radius:50%;

border:2px solid rgba(6, 5, 0, 0.5);

animation:ringExpand 3s ease-out infinite;
}

/* PARTICLES */

.pulse-particles{
position:absolute;
width:4px;
height:4px;
border-radius:50%;
background:#fffffd;

box-shadow:
20px -10px #ffffff,
-20px 10px #0f4cff,
35px 15px rgba(3, 3, 3, 0.6),
-30px -15px rgba(15,76,255,0.6);

animation:particlesMove 4s ease-in-out infinite;
}

/* CORE PULSE */

@keyframes corePulse{

0%{
transform:scale(0.6);
opacity:0.6;
}

50%{
transform:scale(1.4);
opacity:1;
}

100%{
transform:scale(0.6);
opacity:0.6;
}

}

/* RING EXPAND */

@keyframes ringExpand{

0%{
transform:scale(0.5);
opacity:0.7;
}

100%{
transform:scale(4);
opacity:0;
}

}

/* PARTICLES FLOAT */

@keyframes particlesMove{

0%{
transform:scale(0.7);
opacity:0.5;
}

50%{
transform:scale(1.3);
opacity:1;
}

100%{
transform:scale(0.7);
opacity:0.5;
}

}

/* ================= FAMILY SECTION ================= */

/* =================================
   FAMILY SECTION
================================= */

.family-services{
background:#ffffff;
color:#0000;
padding:100px 6%;
position:relative;
}

.family-section{
position:relative;
background:#d4d4d4;
overflow:hidden;
}

/* PARTICLES LAYER */

.particles-layer{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
}

/* PARTICLES */

.particles-layer::before,
.particles-layer::after{

content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;

background-image:
radial-gradient(circle,#080808 1px,transparent 1px),
radial-gradient(circle,#0f4cff 1px,transparent 1px);

background-size:
120px 120px,
180px 180px;

opacity:0.6;

animation:particlesMove 25s linear infinite;
}

/* SECOND LAYER */

.particles-layer::after{

background-size:
200px 200px,
260px 260px;

opacity:0.4;

animation:particlesMove2 40s linear infinite;

}

/* FLOAT ANIMATION */

@keyframes particlesMove{

0%{ transform:translateY(0); }

100%{ transform:translateY(-600px); }

}

@keyframes particlesMove2{

0%{ transform:translateY(0); }

100%{ transform:translateY(-800px); }

}

/* =================================
   FAMILY CARDS
================================= */

.family-item{

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

margin:0 auto 80px auto;
max-width:900px;
width:100%;

padding:30px;

border-radius:500px 0 0 500px;

background:linear-gradient(
90deg,
rgba(47, 34, 236, 0.12),
#f6f2f2
);

backdrop-filter:blur(10px);

transition:all 0.4s ease;

}

/* alternate card direction automatically */

.family-item:nth-child(even){

flex-direction:row-reverse;

border-radius:0 500px 500px 0;

background:linear-gradient(
-90deg,
rgba(43, 13, 244, 0.274),
#ffffff
);

}

/* =================================
   IMAGE AREA
================================= */

.family-img{
width:35%;
position:relative;
display:flex;
justify-content:center;
align-items:center;
}

.family-img img{

width:260px;
height:260px;

object-fit:cover;

border-radius:50%;

position:relative;
z-index:2;

border:5px solid rgba(61, 40, 220, 0.35);

box-shadow:
0 0 0 8px rgba(73, 55, 212, 0.08),
inset 0 0 20px rgba(255,255,255,0.06);

}

/* =================================
   ROTATING RING
================================= */

.family-img::before{

content:"";
position:absolute;

width:380px;
height:380px;

border-radius:50%;
border:1px dashed rgba(102, 55, 212, 0.3);

top:50%;
left:50%;

transform:translate(-50%,-50%);

animation:rotateRing 18s linear infinite;

}

@keyframes rotateRing{

from{ transform:translate(-50%,-50%) rotate(0deg); }

to{ transform:translate(-50%,-50%) rotate(360deg); }

}

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

.family-img::after{

content:"";
position:absolute;

width:420px;
height:420px;

border-radius:50%;

background:radial-gradient(
rgba(85, 85, 202, 0.15),
transparent 70%
);

top:50%;
left:50%;

transform:translate(-50%,-50%);

z-index:0;

}

/* =================================
   TEXT CONTENT
================================= */

.family-content{
width:55%;
padding:0 20px;
}

.family-content h3{
font-size:24px;
margin-bottom:15px;
color:#000000;
font-weight:600;
}

.family-content p{
color:#060000;
line-height:1.8;
margin-bottom:18px;
font-size:14px;
}

.family-content a{
color:#030200;
text-decoration:none;
font-weight:500;
letter-spacing:1px;
font-size:13px;
}

.family-content a:hover{
text-decoration:underline;
}
/* =================================
   SECTION TITLE
================================= */

.family-title{
text-align:center;
margin-bottom:70px;
}

.family-title h2{
font-size:34px;
margin-bottom:10px;
color:#0e0a00;
}

.family-title p{
color:#2c0ae9;
font-size:15px;
}


/* =================================
   FAMILY CARD
================================= */

.family-item{

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

margin:0 auto 90px auto;

max-width:950px;   /* main change */
width:100%;

padding:30px;

border-radius:500px 0 0 500px;

background:linear-gradient(
90deg,
rgba(125, 124, 124, 0.523),
hsl(0, 0%, 100%)
);

backdrop-filter:blur(10px);

transition:all 0.4s ease;

}

.family-item.right{

flex-direction:row-reverse;

border-radius:0 500px 500px 0;

background:linear-gradient(
-90deg,
rgba(134, 134, 134, 0.635),
hsl(0, 0%, 100%)
);

}



/* =================================
   IMAGE AREA
================================= */

.family-img{
width:35%;
position:relative;
display:flex;
justify-content:center;
align-items:center;
}

/* Profile Image */

.family-img img{

width:260px;
height:260px;

object-fit:cover;

border-radius:50%;

position:relative;
z-index:2;

border:5px solid rgba(76, 50, 223, 0.87);

box-shadow:
0 0 0 8px rgba(202, 191, 236, 0.169),
inset 0 0 20px rgba(255,255,255,0.06);

}


/* =================================
   ROTATING GOLD RING
================================= */

.family-img::before{

content:"";

position:absolute;

width:380px;
height:380px;

border-radius:50%;

border:1px dashed rgba(49, 52, 243, 0.836);

top:50%;
left:50%;

transform:translate(-50%,-50%);

animation:rotateRing 18s linear infinite;

}

@keyframes rotateRing{

from{
transform:translate(-50%,-50%) rotate(0deg);
}

to{
transform:translate(-50%,-50%) rotate(360deg);
}

}


/* =================================
   GOLD GLOW
================================= */

.family-img::after{

content:"";

position:absolute;

width:420px;
height:420px;

border-radius:50%;

background:radial-gradient(
rgba(65, 55, 212, 0.24),
transparent 70%
);

top:50%;
left:50%;

transform:translate(-50%,-50%);

z-index:0;

}


/* =================================
   TEXT CONTENT
================================= */

.family-content{
width:55%;
padding:0 20px;
}

.family-content h3{
font-size:24px;
margin-bottom:15px;
color:#01031c;
font-weight:600;
}

.family-content p{
color:#000000;
line-height:1.8;
margin-bottom:18px;
font-size:14px;
}

.family-content a{
color:#0c0cd7;
text-decoration:none;
font-weight:500;
letter-spacing:1px;
font-size:13px;
transition:0.3s;
}

.family-content a:hover{
text-decoration:underline;
}


/* =================================
   SCROLL REVEAL
================================= */

.family-item{
opacity:0;
transform:translateY(60px);
transition:all 0.8s ease;
}

.family-item.show{
opacity:1;
transform:translateY(0);
}


/* =================================
   IMAGE HOVER
================================= */

.family-img img{
transition:transform 0.6s ease, box-shadow 0.6s ease;
}

.family-item:hover .family-img img{

transform:scale(1.05);

box-shadow:
0 0 0 8px rgba(55, 76, 212, 0.15),
0 0 45px rgba(84, 55, 212, 0.35),
inset 0 0 20px rgba(190, 188, 196, 0.174);

}


/* =================================
   READ MORE BUTTON
================================= */

.read-more-btn{

color:#571ad1;
font-weight:500;
text-decoration:none;
transition:0.3s;

}

.read-more-btn:active{
color:#2563EB;
}
/* ================================
   POPUP BACKGROUND
================================ */

.family-popup{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.85);

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

z-index:9999;

padding:20px;

}


/* ================================
   POPUP BOX
================================ */

.popup-box{

background:#0f172a;

max-width:600px;
width:100%;

padding:40px;

border-radius:10px;

border:1px solid rgba(92, 55, 212, 0.4);

color:#fff;

position:relative;

box-shadow:0 25px 60px rgba(0,0,0,0.5);

animation:popupFade .35s ease;

}
/* ================================
   POPUP IMAGE
================================ */

.popup-img{

width:110px;
height:110px;

object-fit:cover;

border-radius:50%;

display:block;

margin:0 auto 20px auto;

border:3px solid rgba(0, 0, 0, 0.6);

box-shadow:
0 0 0 6px rgba(184, 184, 203, 0.15),
0 0 20px rgba(228, 222, 203, 0.25);

}


/* ================================
   CLOSE BUTTON
================================ */

.popup-close{

position:absolute;

top:12px;
right:18px;

font-size:26px;

cursor:pointer;

color:#f9f9f9;

transition:0.3s;

}

.popup-close:hover{

color:#faf7f7;
transform:rotate(90deg);

}


/* ================================
   READ MORE BUTTON
================================ */

.read-more-btn{

color:#2a0ee1;

font-weight:500;
font-size:15px;

text-decoration:none;
cursor:pointer;

display:inline-block;

transition:0.3s;

animation:readPulse 2s infinite;

}

.read-more-btn:hover{

color:#2563EB;

transform:scale(1.15);

}


/* ================================
   POPUP ANIMATION
================================ */

@keyframes popupFade{

from{
opacity:0;
transform:translateY(30px);
}

to{
opacity:1;
transform:translateY(0);
}

}


/* ================================
   BUTTON PULSE
================================ */

@keyframes readPulse{

0%{transform:scale(1);}
50%{transform:scale(1.05);}
100%{transform:scale(1);}

}
 .family-item{
  box-shadow:none !important;
}.family-item:hover{
  transform:translateY(-6px);

  box-shadow:
    0 18px 40px rgba(0,0,0,0.12),
    0 0 20px rgba(37,99,235,0.12) !important;
}
/* =========================
   REMOVE CARD HOVER EFFECT
========================= */

.family-item:hover{
  transform:none !important;
  box-shadow:none !important;
}

/* =========================
   APPLY EFFECT ONLY ON RING
========================= */

/* IMAGE SCALE */
.family-item:hover .family-img img{
  transform:scale(1.05);
}

/* ROTATING RING FAST */
.family-item:hover .family-img::before{
  animation:rotateRing 6s linear infinite; /* faster */
  border-color:#2563eb;
}

/* GLOW EFFECT */
.family-item:hover .family-img::after{
  background:radial-gradient(
    rgba(37,99,235,0.25),
    transparent 70%
  );
}
/**********Home family section***/
/* background*/
/* =========================
   HOME FAMILY SECTION
========================= */

.home-family-section{
position:relative;
padding:120px 8%;
background:
radial-gradient(circle at 30% 20%, rgba(37,99,235,0.25), transparent 50%),
radial-gradient(circle at 70% 80%, rgba(212,175,55,0.35), transparent 50%),
linear-gradient(160deg,#000000,#0c0c0c,#000000);
overflow:hidden;
}


/* =========================
   SECTION TITLE
========================= */

.home-family-section .section-title{
text-align:center;
margin-bottom:100px;
position:relative;
opacity:0;
transform:translateY(50px);
transition:all 0.9s ease;
}

.home-family-section .section-title.show{
opacity:1;
transform:translateY(0);
}

/* WATERMARK */

.home-family-section .section-title::before{
content:"FAMILY";
position:absolute;
left:50%;
top:-30px;
transform:translateX(-50%);
font-size:130px;
font-weight:900;
letter-spacing:12px;
color:rgba(255,255,255,0.03);
pointer-events:none;
animation:floatText 12s ease-in-out infinite;
}

/* MAIN TITLE */

.home-family-section .section-title h2{
font-size:52px;
font-weight:800;
letter-spacing:1px;
color:#ffffff;
position:relative;
display:inline-block;
}

/* GOLD LETTER */

.home-family-section .section-title .gold{
color:#d4af37;
text-shadow:
0 0 15px rgba(212,175,55,0.6),
0 0 25px rgba(37,99,235,0.4);
}

/* SUBTEXT */

.home-family-section .section-title p{
font-size:17px;
color:#bfc5d2;
max-width:640px;
margin:16px auto 0;
line-height:1.8;
}


/* =========================
   FAMILY GRID
========================= */

.family-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:40px;
}


/* =========================
   CARD BASE
========================= */

.family-card{
position:relative;
height:360px;
border-radius:16px;
overflow:hidden;
cursor:pointer;

border:1px solid rgba(37,99,235,0.25);

box-shadow:0 10px 40px rgba(0,0,0,0.8);

transform-style:preserve-3d;

opacity:0;
transform:translateY(70px) scale(0.95);

transition:all 0.8s ease;
}

/* REVEAL */

.family-card.show{
opacity:1;
transform:translateY(0) scale(1);
}


/* =========================
   IMAGE
========================= */

.family-card img{
position:absolute;
width:100%;
height:100%;
object-fit:cover;
transition:transform 0.7s ease;
}


/* =========================
   DARK OVERLAY
========================= */

.family-card::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
to top,
rgba(0,0,0,0.9),
transparent 60%
);
}


/* =========================
   GOLD SWEEP
========================= */

.family-card::before{
content:"";
position:absolute;
top:0;
left:-120%;
width:60%;
height:100%;
background:linear-gradient(
120deg,
transparent,
rgba(212,175,55,0.4),
transparent
);
transform:skewX(-25deg);
transition:0.8s;
z-index:2;
}


/* =========================
   TEXT BOX
========================= */

.family-info{
position:absolute;
bottom:5px;
left:0;
width:100%;
padding:22px 20px;

    background: linear-gradient(to top, rgba(31, 31, 35, 0.674), rgba(32, 69, 150, 0.308), transparent);
backdrop-filter:blur(6px);
z-index:3;
transition:0.4s;
}

.family-info h3{
color:#d4af37;
font-size:20px;
margin-bottom:4px;
}

.family-info span{
color:#e5e7eb;
font-size:14px;
}


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

.family-card:hover{
transform:translateY(-12px) rotateX(6deg) rotateY(-6deg);
border-color:#d4af37;
box-shadow:
0 30px 80px rgba(0,0,0,0.9),
0 0 40px rgba(37,99,235,0.35),
0 0 30px rgba(212,175,55,0.3);
}

.family-card:hover img{
transform:scale(1.15);
}

.family-card:hover::before{
left:120%;
}

.family-card:hover .family-info{
bottom:25px;
}


/* =========================
   ANIMATIONS
========================= */

@keyframes floatText{
0%{transform:translate(-50%,0)}
50%{transform:translate(-50%,15px)}
100%{transform:translate(-50%,0)}
}
/* =========================
   HOME FAMILY SECTION (LIGHT THEME)
========================= */

/* BACKGROUND */
.home-family-section{
  background:
  radial-gradient(circle at 30% 20%, rgba(37,99,235,0.08), transparent 50%),
  radial-gradient(circle at 70% 80%, rgba(37,99,235,0.08), transparent 50%),
  linear-gradient(160deg,#ffffff,#f5f7fb,#ffffff) !important;
}

/* TITLE */
.home-family-section .section-title h2{
  color:#111 !important;
}

/* WATERMARK */
.home-family-section .section-title::before{
  color:rgba(0,0,0,0.05) !important;
}

/* GOLD TEXT → BLUE */
.home-family-section .section-title .gold{
  color:#2563eb !important;
  text-shadow:none !important;
}

/* SUBTEXT */
.home-family-section .section-title p{
  color:#555 !important;
}
/* =========================
   NEW FAMILY LAYOUT
========================= */

.family-single{
  display:flex;
  align-items:center;
  gap:70px;
  margin-top:70px;
}

/* =========================
   IMAGE IMPROVE
========================= */

.family-image{
  flex:1.3;
  position:relative;
}

.family-image img{
  width:100%;
  border-radius:18px;
  box-shadow:0 20px 50px rgba(0,0,0,0.08);
  transition:0.4s;
}

/* HOVER EFFECT */
.family-image:hover img{
  transform:scale(1.05);
  box-shadow:0 25px 60px rgba(37,99,235,0.15);
}

/* =========================
   TEXT SIDE IMPROVE
========================= */

.family-detail{
  flex:1;
}

.family-detail h3{
  font-size:28px;
  color:#000;
  margin-bottom:10px;
}

.family-detail p{
  color:#444;
  line-height:1.8;
}

/* =========================
   ACTION AREA
========================= */

.family-actions{
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:25px;
}


/* =========================
   BUTTON IMPROVE
========================= */

.read-btn{
  padding:12px 26px;
  border-radius:30px;
  border:none;
  background:#2563eb;
  color:#fff;
  font-weight:500;
  cursor:pointer;
  transition:0.3s;
}

/* HOVER */
.read-btn:hover{
  background:#1e40af;
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(37,99,235,0.3);
}

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

@media(max-width:768px){
  .family-single{
    flex-direction:column;
    gap:40px;
  }
}/* =========================
   FADE IN ANIMATION
========================= */

.family-single{
  opacity:0;
  transform:translateY(40px);
  animation:fadeUp 1s ease forwards;
}

@keyframes fadeUp{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* =========================
   IMAGE GLASS + SHINE
========================= */

.family-image{
  flex:1.3;
  position:relative;
  overflow:hidden;
  border-radius:20px;
}

/* IMAGE */
.family-image img{
  width:100%;
  border-radius:20px;
  transition:0.5s;
}

/* GLASS OVERLAY */
.family-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.25),
    transparent
  );
  opacity:0;
  transition:0.5s;
}

/* HOVER EFFECT */
.family-image:hover img{
  transform:scale(1.06);
}

.family-image:hover::after{
  opacity:1;
}
/* =========================
   PLAY ICON ULTRA ANIMATION
========================= */

.video-icon{
  width:70px;
  height:70px;
  border-radius:50%;

  background:linear-gradient(120deg,#2563eb,#3b82f6);
  color:#fff;

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

  font-size:24px;
  text-decoration:none;

  cursor:pointer;
  position:relative;

  transition:0.3s ease;

  animation:zoomPulse 2s infinite;
}

/* =========================
   ZOOM ANIMATION
========================= */

@keyframes zoomPulse{
  0%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.1);
  }

  100%{
    transform:scale(1);
  }
}

/* =========================
   OUTER GLOW RING
========================= */

.video-icon::before{
  content:"";
  position:absolute;

  inset:0;

  border-radius:50%;

  background:rgba(37,99,235,0.3);

  z-index:-1;

  animation:ring 2s infinite;
}

@keyframes ring{

  0%{
    transform:scale(1);
    opacity:0.6;
  }

  70%{
    transform:scale(1.8);
    opacity:0;
  }

  100%{
    opacity:0;
  }
}

/* =========================
   HOVER
========================= */

.video-icon:hover{
  background:linear-gradient(120deg,#1d4ed8,#2563eb);

  box-shadow:
    0 15px 35px rgba(37,99,235,0.45);

  animation-play-state:paused;

  transform:scale(1.12);
}
/* =========================
   BUTTON ENHANCED
========================= */

.read-btn{
  padding:12px 26px;
  border-radius:30px;
  border:none;
  background:linear-gradient(120deg,#2563eb,#3b82f6);
  color:#fff;
  font-weight:500;
  cursor:pointer;
  transition:0.3s;
}

/* HOVER */
.read-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(37,99,235,0.35);
}

/* =========================
   TEXT POLISH
========================= */

.family-detail h3{
  font-size:30px;
  line-height:1.3;
}

.family-detail p{
  color:#444;
  line-height:1.8;
}
/* =========================
   TOP IMAGE FIX (NO CUT)
========================= */

.popup-top-image{
  position:relative;
  height:230px;
  overflow:hidden;
  border-bottom:1px solid rgba(0,0,0,0.05);
}

/* IMAGE FIX */
.popup-top-image img{
  width:100%;
  height:100%;
  object-fit:cover;

  /* 👇 IMPORTANT FIX */
  object-position:center top;

  transition:transform 6s ease;
}

/* =========================
   SLOW ZOOM (PARALLAX FEEL)
========================= */

.popup-box:hover .popup-top-image img{
  transform:scale(1.08);
}

/* =========================
   OVERLAY IMPROVE
========================= */

.popup-overlay{
  position:absolute;
  bottom:0;
  width:100%;
  padding:18px 20px;

  background:linear-gradient(
    to top,
    rgba(0,0,0,0.75),
    rgba(0,0,0,0.2),
    transparent
  );

  color:#fff;
}

.popup-overlay h3{
  margin:0;
  font-size:18px;
  font-weight:600;
}

.popup-overlay span{
  font-size:13px;
  opacity:0.9;
}

/* =========================
   EXTRA PREMIUM EFFECT
========================= */

/* soft shine animation */
.popup-top-image::after{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:60%;
  height:100%;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.3),
    transparent
  );
  transition:0.8s;
}

.popup-box:hover .popup-top-image::after{
  left:120%;
}
/******====================phian heros===========*****/
/* =========================
CINEMATIC HERO
========================= */

.philan-hero-cinematic{

position:relative;
height:100vh;
overflow:hidden;

display:flex;
align-items:center;

}


/* BACKGROUND IMAGE */
.hero-bg{
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;

  transform: scaleX(-1);
  object-position: center 5%;
  object-position: 550% 5%;
}

/* DARK + GRADIENT OVERLAY */

.hero-overlay{

position:absolute;
inset:0;

background:
linear-gradient(to right, rgba(0,0,0,0.85) 30%, transparent 80%),
radial-gradient(circle at 80% 30%, rgba(34, 20, 139, 0.445), transparent 50%),
radial-gradient(circle at 20% 70%, rgba(235, 232, 37, 0.447), transparent 50%);

z-index:2;

}


/* CONTENT */

.hero-content{

position:relative;
z-index:3;

max-width:600px;

padding-left:8%;

color:#fff;

}


/* TAG */

.hero-tag{
  font-size:12px;
  letter-spacing:5px;
  color:#411be7;

  display:inline-block;
  margin-bottom:15px;

  margin-top:120px; /* 👈 is value ko increase/decrease kr sakty ho */
}

/* TITLE */

.hero-content h1{

font-size:56px;
font-weight:800;
line-height:1.2;

margin-bottom:20px;

}


/* TEXT */

.hero-content p{

color:#d1d1d1;
line-height:1.8;

margin-bottom:30px;

}


/* BUTTON */

.hero-btn{

display:inline-block;
padding:12px 34px;

border-radius:40px;

background: blue;
color:#ffff;

text-decoration:none;

transition:0.3s;

}

.hero-btn:hover{


background:#ffffff;
color:#000;

}


/* RESPONSIVE */

@media(max-width:900px){

.hero-content{
padding:0 20px;
text-align:center;
margin:auto;
}

.hero-overlay{
background:
rgba(0,0,0,0.75);
}

}
/******====================phian journey===========*****/

/* =========================
   SECTION (FIXED + PREMIUM)
========================= */
.philan-journey {
  padding: 120px 10%;
  color: #fff;
  position: relative;
  overflow: hidden;

  /* STRONG MOVING GRADIENT */
  background: linear-gradient(270deg, #000000, #1a237e, #000000);
  background-size: 400% 400%;
  animation: gradientMove 6s ease infinite;
}
.philan-journey::before,
.philan-journey::after {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.6;
  animation: floatGlow 8s ease-in-out infinite alternate;
  z-index: 0;
}

/* BLUE */
.philan-journey::after {
  background: rgba(37, 100, 235, 0.324);
  top: -200px;
  left: -200px;
}

/* GOLD */
.philan-journey::before {
  background: rgba(212, 175, 55, 0.388);
  bottom: -200px;
  right: -200px;
}@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes floatGlow {
  0% {
    transform: translate(0,0) scale(1);
  }
  100% {
    transform: translate(100px,80px) scale(1.3);
  }
}
.timeline {
  position: relative;
  z-index: 2;
}


/* =========================
   HEADER (ENHANCED)
========================= */
.section-header {
  text-align: center;
  margin-bottom: 100px;
  position: relative;
}

/* BIG WATERMARK TEXT */
.section-header::before {
  content: "JOURNEY";
  position: absolute;
  left: 50%;
  top: -30px;
  transform: translateX(-50%);

  font-size: 100px;
  font-weight: 900;
  letter-spacing: 10px;

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

/* MAIN TITLE */
.section-header h2 {
  font-size: 44px;
  font-weight: 800;
  color: #fff;
}

/* GOLD ACCENT */
.section-header h2 span {
  color: #d4af37;
}

/* SUBTEXT */
.section-header p {
  margin-top: 10px;
  color: #bfc5d2;
  font-size: 16px;
}
/* SECTION */
.philan-journey {
  padding:120px 2%;
  background: linear-gradient(160deg,#000,#0a0f2c,#000);
  color:#fff;
}

/* HEADER */
.section-header {
  text-align:center;
  margin-bottom:80px;
}

.section-header h2 {
  font-size:42px;
}

.section-header p {
  color:#aaa;
}

/* TIMELINE */
.timeline {
  position:relative;
  max-width:700px;
  margin:auto;
}/* BASE LINE */
.timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 3px;
  height: 100%;
  background: rgba(255,255,255,0.1);
  transform: translateX(-50%);
}

/* PROGRESS LINE */

.timeline::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 3px;
  height: 0;

  background: linear-gradient(
    to bottom,
    #d4af37,
    #2563eb
  );

  box-shadow: 0 0 15px rgba(212,175,55,0.6);

  transform: translateX(-50%);
  transition: height 0.3s ease;
}
.timeline-dot::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;

  border: 2px solid rgba(212,175,55,0.4);

  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
/* CENTER LINE */
.timeline::before {
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:3px;
  height:100%;

  background: linear-gradient(
    to bottom,
    transparent,
    #d4af37,
    transparent
  );

  box-shadow: 0 0 20px rgba(212,175,55,0.6);

  transform:translateX(-50%);
}

/* ITEM */
.timeline-item {
  position:relative;
  margin-bottom:80px;
  text-align:center;
}


/* DOT WITH ICON */
.timeline-dot {
  width: 45px;
  height: 45px;
  background: #111;
  border-radius: 50%;
  margin: 0 auto;

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

  border: 2px solid #d4af37;

  box-shadow:
    0 0 10px rgba(212,175,55,0.6),
    0 0 20px rgba(212,175,55,0.4);

  position: relative;
  z-index: 2;
}

.timeline-dot i {
  color: #d4af37;
  font-size: 16px;
}

/* CONTENT */
.timeline-content {
  margin-top:20px;

  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(10px);

  padding:25px;
  border-radius:14px;

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

  transition:0.4s;
}

/* HOVER */
.timeline-content:hover {
  transform:translateY(-8px);

  border-color:#d4af37;

  box-shadow:
    0 10px 40px rgba(0,0,0,0.6),
    0 0 25px rgba(212,175,55,0.2);
}

/* TEXT */
.timeline-content h3 {
  color:#d4af37;
  margin-bottom:10px;
}

.timeline-content p {
  color:#bbb;
}

/* =========================
   PHILAN JOURNEY LIGHT THEME
========================= */

/* SECTION BACKGROUND */
.philan-journey{
  background:
    linear-gradient(160deg,#ffffff,#f5f7fb,#ffffff) !important;
  color:#111 !important;
}

/* GLOW COLORS */
.philan-journey::after{
  background: rgba(37,99,235,0.15) !important;
}

.philan-journey::before{
  background: rgba(37,99,235,0.10) !important;
}

/* HEADER */
.section-header h2{
  color:#111 !important;
}

/* ACCENT (gold → blue) */
.section-header h2 span{
  color:#2563eb !important;
}

/* WATERMARK */
.section-header::before{
  color:rgba(0,0,0,0.05) !important;
}

/* SUBTEXT */
.section-header p{
  color:#555 !important;
}

/* TIMELINE LINE */
.timeline::before{
  background: rgba(0,0,0,0.1) !important;
  box-shadow:none !important;
}

/* PROGRESS LINE */
.timeline::after{
  background: linear-gradient(
    to bottom,
    #2563eb,
    #60a5fa
  ) !important;

  box-shadow:0 0 10px rgba(37,99,235,0.3) !important;
}

/* DOT */
.timeline-dot{
  background:#ffffff !important;
  border:2px solid #2563eb !important;

  box-shadow:
    0 0 10px rgba(37,99,235,0.3),
    0 0 20px rgba(37,99,235,0.2) !important;
}

/* DOT ICON */
.timeline-dot i{
  color:#2563eb !important;
}

/* PULSE RING */
.timeline-dot::after{
  border:2px solid rgba(37,99,235,0.3) !important;
}

/* CONTENT CARD */
.timeline-content{
  background:#ffffff !important;
  border:1px solid rgba(0,0,0,0.08) !important;
}

/* HOVER */
.timeline-content:hover{
  border-color:#2563eb !important;

  box-shadow:
    0 10px 30px rgba(0,0,0,0.08),
    0 0 20px rgba(37,99,235,0.15) !important;
}

/* TEXT */
.timeline-content h3{
  color:#2563eb !important;
}

.timeline-content p{
  color:#444 !important;
}

.philan-journey::after{
  content:"";
  position:absolute;
  inset:0;

  background-image:
    linear-gradient(
      to bottom,
      rgba(37,99,235,0.08) 1px,
      transparent 1px
    );

  background-size:100% 80px;

  opacity:0.4;
  z-index:0;
}.philan-journey::before{
  content:"";
  position:absolute;
  inset:0;

  background-image:
    radial-gradient(circle at 20% 30%, rgba(37,99,235,0.08), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(37,99,235,0.06), transparent 40%);

  z-index:0;
}


/*=========hospitals============/
/* =========================
   COMPLEX SECTION (FINAL CLEAN)
========================= */

.complex-alt{

position:relative;

padding:140px 8%;

color:#fff;

/* CLEAN PREMIUM BACKGROUND */
background:
radial-gradient(circle at 15% 25%, rgba(55, 55, 212, 0.192), transparent 40%),
radial-gradient(circle at 85% 75%, rgba(235, 222, 37, 0.235), transparent 40%),
linear-gradient(160deg,#000000,#0c0c0c 40%,#000000);

overflow:hidden;

}


/* SOFT FLOATING LIGHTS */

.complex-alt::before{

content:"";

position:absolute;

top:-150px;
left:-150px;

width:400px;
height:400px;

background:radial-gradient(circle, rgba(212,175,55,0.15), transparent 70%);

filter:blur(100px);

animation:floatGlow1 20s ease-in-out infinite;

}

.complex-alt::after{

content:"";

position:absolute;

bottom:-150px;
right:-150px;

width:400px;
height:400px;

background:radial-gradient(circle, rgba(80, 37, 235, 0.237), transparent 70%);

filter:blur(110px);

animation:floatGlow2 22s ease-in-out infinite;

}
/* =========================
   TOP GRADIENT OVERLAY
========================= */

.complex-alt::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 250px;

  background: linear-gradient(
    to bottom,
    rgba(177, 170, 240, 0.121)
     rgba(242, 224, 92, 0.479),
  );

  pointer-events: none;
  z-index: 1;
}

/* ANIMATION */

@keyframes floatGlow1{
0%,100%{ transform:translate(0,0);}
50%{ transform:translate(60px,40px);}
}

@keyframes floatGlow2{
0%,100%{ transform:translate(0,0);}
50%{ transform:translate(-60px,-50px);}
}


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

.complex-heading{

text-align:center;

margin-bottom:120px;

position:relative;

}

/* WATERMARK */

.complex-heading::before{

content:"Organization";

position:absolute;

left:50%;
top:-20px;

transform:translateX(-50%);

font-size:100px;

font-weight:900;

letter-spacing:10px;

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

}

/* TITLE */

.complex-heading h2{

font-size:50px;

font-weight:800;

color:#fff;

}

/* GOLD WORD */

.complex-heading h2 span{

color:#d4af37;

text-shadow:
0 0 12px rgba(212,175,55,0.5);

}

/* SUBTEXT */

.complex-heading p{

margin-top:15px;

color:#bfc5d2;

font-size:16px;

max-width:600px;

margin-left:auto;
margin-right:auto;

line-height:1.8;

}


/* =========================
   ROW
========================= */

.complex-row{

display:flex;

align-items:center;

justify-content:space-between;

gap:80px;

margin-bottom:120px;

flex-wrap:wrap;

}

.complex-row.reverse{

flex-direction:row-reverse;

}


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

.complex-text{

flex:1;

max-width:520px;

}

.complex-text h2{

font-size:40px;

color:#d4af37;

margin-bottom:18px;

}

.complex-text p{

color:#cbd5e1;

line-height:1.8;

margin-bottom:25px;

}

.complex-text a{

color:#d4af37;

text-decoration:none;

font-weight:500;

transition:.3s;

}

.complex-text a:hover{

color:#064ce1;

}


/* =========================
   IMAGE STACK
========================= */

.complex-visual{

flex:1;

position:relative;

display:flex;

justify-content:center;

align-items:center;

}


/* MAIN IMAGE */

.main-img{

width:420px;

height:500px;

object-fit:cover;

border-radius:12px;

box-shadow:0 20px 60px rgba(0,0,0,0.8);

transition:0.5s;

}

/* FLOAT IMAGE → ROUND */
.float-img {
  position: absolute;

  width: 280px;   /* same width & height = circle */
  height: 280px;

  object-fit: cover;

  border-radius: 50%; /* 🔥 circle */

  top: 40px;
  right: -30px;

  border: 3px solid #d4af37;

  box-shadow:
    0 0 20px rgba(212,175,55,0.5),
    0 10px 40px rgba(0,0,0,0.8);

  transition: 0.4s;
}

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

.complex-visual:hover .main-img{

transform:scale(1.04);

}

.complex-visual:hover .float-img{

transform:translate(-15px,15px) scale(1.05);

border-color:#d4af37;

box-shadow:
0 0 25px rgba(212,175,55,0.3),
0 0 35px rgba(37,99,235,0.25);

}


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

@media(max-width:900px){

.complex-row{

flex-direction:column;

text-align:center;

}

.float-img{

position:relative;

top:auto;

right:auto;

margin-top:20px;

}

}
/* =========================
   ULTRA PREMIUM PARTICLES
========================= */

.particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

/* PARTICLES BASE */
.particles span {
  position: absolute;
  bottom: -100px;
  width: 4px;
  height: 4px;
  background: #d4af37;
  border-radius: 50%;
  opacity: 0;

  animation: floatParticle linear infinite,
             sparkle 2s ease-in-out infinite;

  box-shadow: 0 0 12px rgba(212,175,55,0.7);
}

/* RANDOM POSITIONS + SPEED */
.particles span:nth-child(1) { left: 10%; animation-duration: 12s, 2s; }
.particles span:nth-child(2) { left: 20%; animation-duration: 14s, 3s; }
.particles span:nth-child(3) { left: 35%; animation-duration: 10s, 2.5s; }
.particles span:nth-child(4) { left: 50%; animation-duration: 16s, 3s; }
.particles span:nth-child(5) { left: 65%; animation-duration: 11s, 2s; }
.particles span:nth-child(6) { left: 75%; animation-duration: 15s, 3s; }
.particles span:nth-child(7) { left: 85%; animation-duration: 13s, 2.5s; }
.particles span:nth-child(8) { left: 95%; animation-duration: 17s, 3s; }

/* SIZE VARIATION */
.particles span:nth-child(odd) {
  width: 3px;
  height: 3px;
}

.particles span:nth-child(even) {
  width: 6px;
  height: 6px;
}

/* FLOAT MOTION (DEPTH + ZIGZAG) */
@keyframes floatParticle {
  0% {
    transform: translate(0, 0) scale(0.8);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  25% {
    transform: translate(20px, -200px) scale(1);
  }

  50% {
    transform: translate(-25px, -400px) scale(1.2);
  }

  75% {
    transform: translate(30px, -650px) scale(0.9);
  }

  100% {
    transform: translate(-15px, -900px) scale(0.7);
    opacity: 0;
  }
}

/* SPARKLE EFFECT ✨ */
@keyframes sparkle {
  0%, 100% {
    opacity: 0.4;
    box-shadow: 0 0 8px rgba(212,175,55,0.4);
  }

  50% {
    opacity: 1;
    box-shadow: 0 0 18px rgba(212,175,55,0.9);
  }
}

/* =========================
   SCROLL FADE-IN
========================= */

/* INITIAL STATE */
.fade-up {
  opacity: 0;
  transform: translateY(60px);
  transition: all 0.8s ease;
}

/* WHEN VISIBLE */
.fade-up.show {
  opacity: 1;
  transform: translateY(0);
}
/* VIDEO BOX */
.video-box {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

/* PLAY BUTTON */
.play-btn {
  width: 80px;
  height: 80px;
  background: #ff4a17; /* orange */
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  z-index: 2;
}

/* Triangle icon */
.play-btn::after {
  content: "";
  position: absolute;
  left: 55%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-left: 18px solid #fff;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

/* Pulse animation */
.play-btn::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(255, 74, 23, 0.5);
  animation: pulse 2s infinite;
  z-index: -1;
}

/* Animation */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* Hover effect */
.play-btn:hover {
  background: #ff6a3a;
}
/* =========================
   COMPLEX SECTION (WHITE MEDICAL THEME)
========================= */

.complex-alt{
  position:relative;
  padding:140px 8%;

  /* TEXT DARK */
  color:#111;

  /* CLEAN WHITE BACKGROUND */
  background:
  radial-gradient(circle at 15% 25%, rgba(37,99,235,0.08), transparent 40%),
  radial-gradient(circle at 85% 75%, rgba(59,130,246,0.08), transparent 40%),
  linear-gradient(160deg,#ffffff,#f4f7fb 40%,#ffffff);

  overflow:hidden;
}

/* SOFT BLUE LIGHTS */
.complex-alt::before{
  content:"";
  position:absolute;
  top:-150px;
  left:-150px;

  width:400px;
  height:400px;

  background:radial-gradient(circle, rgba(37,99,235,0.12), transparent 70%);
  filter:blur(100px);

  animation:floatGlow1 20s ease-in-out infinite;
}

.complex-alt::after{
  content:"";
  position:absolute;
  bottom:-150px;
  right:-150px;

  width:400px;
  height:400px;

  background:radial-gradient(circle, rgba(59,130,246,0.10), transparent 70%);
  filter:blur(110px);

  animation:floatGlow2 22s ease-in-out infinite;
}

/* WATERMARK */
.complex-heading::before{
  color:rgba(0,0,0,0.05);
}

/* TITLE */
.complex-heading h2{
  color:#111;
}

/* BLUE ACCENT */
.complex-heading h2 span{
  color:#2563eb;

  text-shadow:
  0 0 10px rgba(37,99,235,0.3);
}

/* SUBTEXT */
.complex-heading p{
  color:#555;
}

/* TEXT */
.complex-text h2{
  color:#000000;
}

.complex-text p{
  color:#444;
}

.complex-text a{
  color:#2563eb;
}

.complex-text a:hover{
  color:#1e40af;
}

/* IMAGE */
.main-img{
  box-shadow:0 15px 40px rgba(0,0,0,0.12);
}

/* FLOAT IMAGE */
.float-img{
  border:3px solid #2563eb;

  box-shadow:
  0 0 15px rgba(37,99,235,0.3),
  0 10px 30px rgba(0,0,0,0.15);
}

/* HOVER */
.complex-visual:hover .float-img{
  border-color:#2563eb;

  box-shadow:
  0 0 25px rgba(37,99,235,0.4),
  0 0 35px rgba(37,99,235,0.2);
}

/* PARTICLES (BLUE) */
.particles span{
  background:#2563eb;

  box-shadow:
  0 0 10px rgba(37,99,235,0.5),
  0 0 15px rgba(37,99,235,0.3);
}

/* FORCE PHILANTHROPY BLACK (FINAL FIX) */
.complex-heading h2 span{
  color:#000 !important;

  /* BLUE SHINE KEEP */
  text-shadow:
  0 0 10px rgba(37,99,235,0.4),
  0 0 18px rgba(37,99,235,0.25) !important;
}
/* ===============================
   FINAL PREMIUM LOGO SLIDER (UPDATED)
=============================== */

.logo-slider {
  padding: 80px 0;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0b0b0b, #0f172a, #1e3a8a);
  
}

/* GLOW BACKGROUND */
.logo-slider::before,
.logo-slider::after {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  filter: blur(80px);
  z-index: 0;
}

.logo-slider::before {
  top: -120px;
  left: -120px;
  background: radial-gradient(circle, rgba(37,99,235,0.3), transparent);
}

.logo-slider::after {
  bottom: -120px;
  right: -120px;
  background: radial-gradient(circle, rgba(212,175,55,0.3), transparent);
}

/* TITLE */
.logo-title {
  color: #d4af37;
  font-size: 32px;
  text-align: center;
  margin-bottom: 40px;
  text-shadow: 0 0 10px rgba(212,175,55,0.4);
  position: relative;
  z-index: 2;
}

.logo-title::after {
  content: "";
  width: 60px;
  height: 3px;
  display: block;
  margin: 10px auto 0;
  background: linear-gradient(90deg, #2563eb, #d4af37);
}

/* WRAPPER */
.logo-wrapper {
  overflow: hidden;
  position: relative;
  z-index: 2;
}

/* FADE EDGES */
.logo-wrapper::before,
.logo-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100px;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.logo-wrapper::before {
  left: 0;
  background: linear-gradient(to right, #0b0b0b, transparent);
}

.logo-wrapper::after {
  right: 0;
  background: linear-gradient(to left, #0b0b0b, transparent);
}

/* TRACK */
.logo-track {
  display: flex;
  gap: 90px;
  width: max-content;
  animation: scroll 30s linear infinite;
  will-change: transform;
}
/* ===============================
   LOGO CARD (FIXED)
=============================== */

.logo-track img {
  height: 105px;
  flex-shrink: 0;

  padding: 12px 18px;
  border-radius: 14px;

  background: #32312d43;
  border: 1px solid rgba(255,255,255,0.1);

  filter: grayscale(60%) brightness(0.9);
  opacity: 0.85;

  position: relative;
  overflow: hidden;
  backdrop-filter: blur(6px);

  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out, opacity 0.2s;

  backface-visibility: hidden;

  /* fade */
  opacity: 0;
  transform: translateY(30px);

  /* wave */
  animation: wave 3s ease-in-out infinite;

  will-change: transform;
}
/* ===============================
   LOGO SLIDER FINAL FIXED
=============================== */

.logo-slider {
  padding: 80px 0;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0b0b0b, #0f172a, #1e3a8a);
}

/* BACKGROUND GLOW */
.logo-slider::before,
.logo-slider::after {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  filter: blur(80px);
  z-index: 0;
}

.logo-slider::before {
  top: -120px;
  left: -120px;
  background: radial-gradient(circle, rgba(37,99,235,0.3), transparent);
}

.logo-slider::after {
  bottom: -120px;
  right: -120px;
  background: radial-gradient(circle, rgba(212,175,55,0.3), transparent);
}

/* TITLE */
.logo-title {
  color: #d4af37;
  font-size: 32px;
  text-align: center;
  margin-bottom: 40px;
  position: relative;
  z-index: 2;
}

/* WRAPPER */
.logo-wrapper {
  overflow: visible; /* allow zoom */
  position: relative;
  z-index: 2;
}

/* TRACK */
.logo-track {
  display: flex;
  gap: 90px;
  width: max-content;
  animation: scroll 30s linear infinite;
}

/* ===============================
   LOGO STYLE
=============================== */

.logo-track img {
  height: 105px;
  flex-shrink: 0;

  padding: 12px 18px;
  border-radius: 14px;

  background: #32312d43;
  border: 1px solid rgba(255,255,255,0.1);

  filter: grayscale(60%) brightness(0.9);
  opacity: 0.9;

  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;

  will-change: transform;

  /* 🔥 REMOVE transform animation conflict */
}

/* ===============================
   WAVE (SAFE VERSION)
=============================== */

.logo-track img {
  animation: waveY 3s ease-in-out infinite;
}

@keyframes waveY {
  0% { translate: 0 0; }
  50% { translate: 0 -6px; }
  100% { translate: 0 0; }
}

/* ===============================
   INSTANT HOVER (MAIN FIX)
=============================== */
/* ===============================
   FINAL PREMIUM LOGO SLIDER\
=============================== */

.logo-slider {
  padding: 80px 0;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0b0b0b, #0f172a, #1e3a8a);
}

/* GLOW */
.logo-slider::before,
.logo-slider::after {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  filter: blur(80px);
  z-index: 0;
}

.logo-slider::before {
  top: -120px;
  left: -120px;
  background: radial-gradient(circle, rgba(37,99,235,0.3), transparent);
}

.logo-slider::after {
  bottom: -120px;
  right: -120px;
  background: radial-gradient(circle, rgba(212,175,55,0.3), transparent);
}

/* TITLE */
.logo-title {
  color: #d4af37;
  font-size: 32px;
  text-align: center;
  margin-bottom: 40px;
  text-shadow: 0 0 10px rgba(212,175,55,0.4);
  position: relative;
  z-index: 2;
}

/* WRAPPER */
.logo-wrapper {
  overflow: visible;
  position: relative;
  z-index: 2;
}

/* TRACK */
.logo-track {
  display: flex;
  gap: 90px;
  width: max-content;
  animation: scroll 30s linear infinite;

  /* 🔥 FIX */
  transform-style: flat;
}
/* STOP SCROLL WHEN HOVER */
.logo-track:has(img:hover) {
  animation-play-state: paused;
}
/* ===============================
   LOGO CARD
=============================== */

.logo-track img {
  height: 105px;
  flex-shrink: 0;

  padding: 12px 18px;
  border-radius: 14px;

  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);

  filter: grayscale(60%) brightness(0.9);
  opacity: 0.85;

  position: relative;
  overflow: hidden;

  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;

  will-change: transform;

  /* WAVE */
  animation: wave 3s ease-in-out infinite;
}

/* ===============================
   FINAL HOVER (FIXED)
=============================== */

.logo-track img:hover {
  filter: none;
  opacity: 1;

  transform: scale(1.12) translateY(-6px); /* 🔥 FIXED */

  box-shadow:
    0 15px 35px rgba(0,0,0,0.7),
    0 0 15px rgba(37,99,235,0.4),
    0 0 12px rgba(212,175,55,0.5);

  border-color: rgba(212,175,55,0.7);

  z-index: 10;

  animation: none; /* 🔥 IMPORTANT */
}

/* DIM OTHERS */
.logo-track:hover img {
  opacity: 0.4;
}

.logo-track img:hover {
  opacity: 1;
}

/* ===============================
   LIGHT SWEEP
=============================== */

.logo-track img::before {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.35),
    transparent
  );

  transform: translateX(-100%);
  transition: 0.5s ease;
}

.logo-track img:hover::before {
  transform: translateX(100%);
}

/* ===============================
   SHINE
=============================== */

.logo-track img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(102,55,212,0.7), transparent);
  opacity: 0;
}

.logo-track img:hover::after {
  animation: shineGold 0.8s ease;
  opacity: 1;
}

/* ===============================
   ANIMATIONS
=============================== */

@keyframes shineGold {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes wave {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}
/* ===============================
   FADE IN ON LOAD (NO JS)
=============================== */

.fade-up {
  opacity: 0;
  transform: translateY(40px);
  animation: fadeUp 1s ease forwards;
}

/* DELAYS */
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.5s; }
.delay-3 { animation-delay: 0.8s; }
.delay-4 { animation-delay: 1.1s; }

/* KEYFRAME */
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ===============================
   LOGO SLIDER (LIGHT THEME)
=============================== */

.logo-slider {
  padding: 80px 0;
  position: relative;
  overflow: hidden;

  /* WHITE BACKGROUND */
  background: linear-gradient(135deg, #ffffff, #f5f7ff, #ffffff);
}

/* GLOW BACKGROUND (BLUE) */
.logo-slider::before,
.logo-slider::after {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  filter: blur(80px);
  z-index: 0;
}

.logo-slider::before {
  top: -120px;
  left: -120px;
  background: radial-gradient(circle, rgba(37,99,235,0.2), transparent);
}

.logo-slider::after {
  bottom: -120px;
  right: -120px;
  background: radial-gradient(circle, rgba(37,99,235,0.15), transparent);
}

/* TITLE */
.logo-title {
  color: #000; /* BLACK TEXT */
  font-size: 32px;
  text-align: center;
  margin-bottom: 40px;

  /* BLUE GLOW */
  text-shadow:
    0 0 8px rgba(37,99,235,0.4),
    0 0 16px rgba(37,99,235,0.2);

  position: relative;
  z-index: 2;
}

.logo-title::after {
  content: "";
  width: 60px;
  height: 3px;
  display: block;
  margin: 10px auto 0;

  background: linear-gradient(90deg, #2563eb, #60a5fa);
}

/* WRAPPER */
.logo-wrapper {
  overflow: visible;
  position: relative;
  z-index: 2;
}

/* EDGE FADE (WHITE) */
.logo-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100%;
  background: linear-gradient(to right, #ffffff, transparent);
}

.logo-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100%;
  background: linear-gradient(to left, #ffffff, transparent);
}

/* TRACK */
.logo-track {
  display: flex;
  gap: 90px;
  width: max-content;
  animation: scroll 30s linear infinite;
  transform-style: flat;
}

/* STOP SCROLL ON HOVER */
.logo-track:has(img:hover) {
  animation-play-state: paused;
}

/* LOGO CARD */
.logo-track img {
  height: 105px;
  flex-shrink: 0;

  padding: 12px 18px;
  border-radius: 14px;

  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);

  filter: grayscale(20%);
  opacity: 0.9;

  position: relative;
  overflow: hidden;

  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;

  animation: wave 3s ease-in-out infinite;
}

/* HOVER */
.logo-track img:hover {
  filter: none;
  opacity: 1;

  transform: scale(1.12) translateY(-6px);

  box-shadow:
    0 15px 35px rgba(0,0,0,0.15),
    0 0 12px rgba(37,99,235,0.25);

  border-color: #2563eb;

  z-index: 10;

  animation: none;
}

/* DIM OTHERS */
.logo-track:hover img {
  opacity: 0.4;
}

.logo-track img:hover {
  opacity: 1;
}

/* LIGHT SWEEP */
.logo-track img::before {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    120deg,
    transparent,
    rgba(0,0,0,0.1),
    transparent
  );

  transform: translateX(-100%);
  transition: 0.5s ease;
}

.logo-track img:hover::before {
  transform: translateX(100%);
}

/* SHINE */
.logo-track img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(37,99,235,0.3), transparent);
  opacity: 0;
}

.logo-track img:hover::after {
  animation: shineGold 0.8s ease;
  opacity: 1;
}

/* ANIMATIONS */
@keyframes shineGold {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes wave {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}
/* =========================
   HERO ULTRA (BLUE GLOW)
========================= */

.contact-hero-ultra {
  position: relative;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #000000, #0a0f2c);
  overflow: hidden;
}

/* BLUE GLOW LEFT */
.contact-hero-ultra::before {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(37,99,235,0.25), transparent 70%);
  filter: blur(120px);
  top: -100px;
  left: -100px;
}

/* BLUE GLOW RIGHT */
.contact-hero-ultra::after {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(30,64,175,0.25), transparent 70%);
  filter: blur(120px);
  bottom: -100px;
  right: -100px;
}

.hero-content {
  text-align: center;
  color: #fff;
  z-index: 2;
}

.hero-content h1 {
  font-size: 60px;
  font-weight: 900;
}

.hero-content span {
  color: #2563eb;
}

.hero-content p {
  color: #aaa;
}

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

.contact-ultra {
  padding: 100px 8%;
  background: #050814;
}

/* GRID */
.contact-wrapper {
  display: flex;
  gap: 60px;
  flex-wrap: wrap;
}

/* LEFT */
.contact-left {
  flex: 1;
}

.contact-left h2 {
  color: #2563eb;
  margin-bottom: 20px;
}

/* CONTACT BOX */
.contact-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.05);
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 10px;
  transition: 0.3s;
}

.contact-box:hover {
  background: rgba(37,99,235,0.1);
}

/* SOCIAL */
.contact-social {
  margin-top: 20px;
  display: flex;
  gap: 15px;
}

.contact-social a {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 22px;
  transition: 0.3s;
}

.contact-social .whatsapp {
  background: #25D366;
  color: #fff;
}

.contact-social .facebook {
  background: #1877f2;
  color: #fff;
}
  
  /* =========================
   FORM (UPGRADED)
========================= */

/* FIX WIDTH (SAME AS BEFORE) */
.contact-right{
  flex:1;
  max-width:500px; /* 👈 control width */
}

/* FORM */
.contact-right form {
  width:100%;
  padding:25px; /* thoda balanced */
  box-sizing:border-box; /* 🔥 important */
}
/* INPUT GROUP */
.input-group{
  position:relative;
  margin-bottom:25px;
}

/* INPUT */
.input-group input,
.input-group textarea {
  width:100%;
  padding:14px 10px;
  border:none;
  outline:none;
  background:transparent;
  color:#111;
  border-bottom:1px solid #ccc;
  font-size:14px;
}

/* LABEL */
.input-group label {
  position:absolute;
  left:10px;
  top:14px;
  color:#888;
  transition:0.3s;
  font-size:14px;
}

/* FLOAT LABEL */
.input-group input:focus + label,
.input-group input:valid + label,
.input-group textarea:focus + label,
.input-group textarea:valid + label {
  top:-8px;
  font-size:12px;
  color:#2563eb;
}

/* BUTTON */
.contact-right button {
  width:100%;
  padding:14px;
  border:none;
  border-radius:30px;
  background:#2563eb;
  color:#fff;
  font-weight:600;
  cursor:pointer;
  transition:0.3s;
}

.contact-right button:hover {
  background:#1e40af;
  box-shadow:0 10px 25px rgba(37,99,235,0.3);
}

/* SUCCESS MESSAGE */
.success-msg{
  text-align:center;
  margin-top:15px;
  color:green;
  display:none;
}

/* MAP */
.contact-map {
  margin-top: 50px;
}
.contact-map iframe{
  filter: grayscale(100%) contrast(110%);
  transition:0.4s;
}

.contact-map iframe:hover{
  filter:none;
  transform:scale(1.01);
}
.contact-map iframe {
  width: 100%;
  height: 500px; /* 👈 bada kar diya */
  border-radius: 12px;
}
/* =========================
   LIGHT THEME OVERRIDE
========================= */

.contact-ultra {
  background: #ffffff !important;
  color: #111 !important;
}

.contact-left h2 {
  color: #000 !important;
}

.contact-box {
  color: #333 !important;
}

.contact-right form {
  background: #ffffff !important;
}

.input-group input,
.input-group textarea {
  background: #ffffff !important;
  color: #000 !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
}

/* =========================
   SUCCESS MESSAGE
========================= */

.success-msg {
  opacity: 0;
  transform: translateY(5px);
}

.success-msg.show {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   CONTACT STATS (BLUE TOUCH)
========================= */

.contact-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.stat-box {
  flex: 1;
  min-width: 150px;
  padding: 25px;
  border-radius: 14px;
  text-align: center;
  background: linear-gradient(145deg, #ffffff, #eef2ff);
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  transition: 0.3s;
}

/* BLUE SHINE */
.stat-box::before {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(37,99,235,0.25), transparent 70%);
  top: -60px;
  left: -60px;
  filter: blur(40px);
}

/* HOVER */
.stat-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 35px rgba(37,99,235,0.15);
}

/* TEXT */
.stat-box h3 {
  color: #2563eb;
  font-size: 28px;
  margin-bottom: 5px;
}

.stat-box p {
  color: #555;
  font-size: 14px;
}
/* =========================
   CONTACT STATS ANIMATION
========================= */

/* ENTRY ANIMATION */
.stat-box{
  opacity:0;
  transform:translateY(30px);
  animation:fadeUp 0.8s ease forwards;
}

/* delay for each card */
.stat-box:nth-child(1){ animation-delay:0.2s; }
.stat-box:nth-child(2){ animation-delay:0.4s; }
.stat-box:nth-child(3){ animation-delay:0.6s; }

@keyframes fadeUp{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* HOVER ENHANCED */
.stat-box:hover{
  transform:translateY(-10px) scale(1.03);
}

/* BLUE PULSE GLOW */
.stat-box::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;
  box-shadow:0 0 0 rgba(37,99,235,0.4);
  transition:0.4s;
}

.stat-box:hover::after{
  box-shadow:0 0 25px rgba(37,99,235,0.3);
}

/* LIGHT SWEEP */
.stat-box::before{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(37,99,235,0.2),
    transparent
  );
  transition:0.6s;
}

.stat-box:hover::before{
  left:100%;
}
.map-card{
  background:#fff;
  padding:15px 20px;
  border-radius:10px;
  box-shadow:0 5px 20px rgba(0,0,0,0.08);
  margin-bottom:15px;
  text-align:center;
}

.map-card h3{
  margin:0;
  color:#2563eb;
}

.map-card p{
  margin:5px 0 0;
  color:#555;
}
/* =========================
   HERO HTML IMAGE (FINAL PRO)
=                ======================== */

.se-hero-html{
  position:relative;
  padding:140px 8% 80px;
  min-height:90vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#000;
}

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

.hero-img{
  position:absolute;
  inset:0;
  z-index:0;
  top:40px; /* 👈 image thori neeche */
}

/* IMAGE */

.hero-img img{
  width:100%;
  height:100%;

  object-fit:contain;
  object-position:right bottom;

  /* NEW PRO ANIMATION */
  animation:heroMotion 20s ease-in-out infinite alternate;

  opacity:0.95;

  filter:brightness(0.9) contrast(1.05);
}@keyframes heroMotion{

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

  25%{
    transform:translateY(30px) translateX(-5px) scale(1.03);
  }

  50%{
    transform:translateY(40px) translateX(-10px) scale(1.06);
  }

  75%{
    transform:translateY(30px) translateX(-5px) scale(1.04);
  }

  100%{
    transform:translateY(20px) translateX(0px) scale(1.08);
  }

}.hero-img{
  perspective:1000px;
}

.hero-img img{
  transform-origin:center;
}
/* =========================
   SMOOTH MERGE OVERLAY 🔥
========================= */

.hero-overlay{
  position:absolute;
  inset:0;

  background:linear-gradient(
    90deg,
    #000 0%,
    rgba(0,0,0,0.85) 1%,
    rgba(0,0,0,0.55) 35%,
    rgba(0,0,0,0.25) 55%,
    rgba(0,0,0,0.05) 70%,
    transparent 100%
  );

  z-index:1;
}

/* EXTRA EDGE BLEND */

.hero-img::after{
  content:"";
  position:absolute;
  inset:0;

  background:linear-gradient(
    90deg,
    rgba(0,0,0,0.4),
    transparent 60%
  );

  pointer-events:none;
}

/* =========================
   CONTENT
========================= */
.hero-content{
  position:relative;
  z-index:2;

  max-width:600px;

  /* 🔥 LEFT ALIGN FIX */
  margin-left:0;
  text-align:left;

  /* spacing from left */
  padding-left:20px;

  color:#fff;
}
/* =========================
   BUTTONS
========================= */

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

.btn{
  padding:12px 28px;
  border-radius:10px;
  text-decoration:none;
  font-weight:500;
  transition:all 0.3s ease;
}

/* PRIMARY */

.btn.primary{
  background:#0d6efd;
  color:#fff;
  box-shadow:0 8px 20px rgba(13,110,253,0.3);
}

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

/* SECONDARY */

.btn.secondary{
  border:2px solid #fff;
  color:#fff;
}

.btn.secondary:hover{
  background:#fff;
  color:#111;
}

/* =========================
   OPTIONAL GLOW
========================= */

.se-hero-html::after{
  content:"";
  position:absolute;
  right:-150px;
  top:50%;
  width:400px;
  height:400px;

  background:radial-gradient(circle, rgba(32,201,151,0.25), transparent 70%);
  transform:translateY(-50%);
  z-index:1;
}

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

@media(max-width:992px){

  .hero-img img{
    object-fit:cover;
    object-position:center;
    transform:scale(1.05);
  }

}

@media(max-width:768px){

  .se-hero-html{
    padding:120px 6% 60px;
    text-align:center;
  }

  .hero-content{
    margin:auto;
  }

  .hero-content h1{
    font-size:38px;
  }

  .hero-buttons{
    justify-content:center;
  }

}/* =========================
   MODAL BASE
========================= */

.impact-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(8px);

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

  opacity:0;
  visibility:hidden;
  transition:0.4s ease;
  z-index:9999;
}

.impact-modal.active{
  opacity:1;
  visibility:visible;
}

/* =========================
   BOX
========================= */

.impact-modal-box{
  background:#fff;
  width:90%;
  max-width:700px;
  padding:40px;
  border-radius:18px;

  transform:translateY(40px) scale(0.9);
  opacity:0;

  transition:all 0.4s ease;
  position:relative;

  color:#111; /* ✅ TEXT FIX */
}

.impact-modal.active .impact-modal-box{
  transform:translateY(0) scale(1);
  opacity:1;
}

/* =========================
   CLOSE
========================= */

.close{
  position:absolute;
  top:15px;
  right:20px;
  font-size:24px;
  cursor:pointer;
  transition:0.3s;
}

.close:hover{
  transform:rotate(90deg);
}

/* =========================
   TITLE
========================= */

.impact-modal-box h2{
  text-align:center;
  margin-bottom:30px;
  font-size:30px;
  color:#111;
  position:relative;
}

/* subtle underline animation */

.impact-modal-box h2::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-8px;
  width:0;
  height:3px;
  background:linear-gradient(90deg,#0d6efd,#20c997);
  transform:translateX(-50%);
  animation:lineGrow 0.8s ease forwards;
}

@keyframes lineGrow{
  to{width:80px;}
}

/* =========================
   GRID
========================= */

.impact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px;
}

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

.impact-block{
  background:#f8f9fa;
  padding:20px;
  border-radius:15px;
  text-align:center;

  transform:translateY(30px);
  opacity:0;
  animation:fadeUp 0.5s ease forwards;
}

.impact-block:nth-child(1){ animation-delay:0.2s; }
.impact-block:nth-child(2){ animation-delay:0.4s; }

@keyframes fadeUp{
  to{
    transform:translateY(0);
    opacity:1;
  }
}

/* hover */

.impact-block:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 50px rgba(0,0,0,0.12);
}

/* =========================
   IMAGE
========================= */

.impact-block img{
  width:100%;
  height:140px;
  object-fit:cover;
  border-radius:10px;
  margin-bottom:10px;
  transition:0.4s ease;
}

.impact-block:hover img{
  transform:scale(1.05);
}

/* =========================
   SUB TITLE
========================= */

.impact-block h3{
  margin-bottom:10px;
  color:#111;
}

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

.stats{
  display:flex;
  justify-content:space-around;
  margin-top:10px;
}

.stats div{
  text-align:center;
}

/* numbers (gradient keep) */

.stats strong{
  display:block;
  font-size:20px;

  background:linear-gradient(135deg,#0d6efd,#20c997);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* text */

.stats span{
  font-size:12px;
  color:#555;
}

/* =========================
   EXTRA GLOW
========================= */

.impact-modal-box::before{
  content:"";
  position:absolute;
  width:160px;
  height:160px;
  top:-50px;
  right:-50px;

  background:radial-gradient(circle, rgba(32,201,151,0.2), transparent 70%);
  z-index:-1;
}

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

@media(max-width:600px){
  .impact-grid{
    grid-template-columns:1fr;
  }
}
/* =========================
   INFORMATICS (NEXT LEVEL)
========================= */
/* =========================
   BACKGROUND IMAGE (HTML)
========================= */

.info-section{
  position:relative;
  padding:120px 8%;
  overflow:hidden;
}

/* IMAGE */

.info-bg{
  position:absolute;
  inset:0;
  z-index:0;
}

.info-bg img{
  width:100%;
  height:100%;
  object-fit:cover;

  /* 🔥 image soft kar di */
  opacity:0.4;
}

/* OVERLAY (OPTIONAL) */

.info-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:black;
  opacity:0.3;
}

/* CONTENT ABOVE */

.info-wrapper{
  position:relative;
  z-index:2;
}

/* =========================
   WRAPPER (GLASS CARD)
========================= */

.info-wrapper
{
  display:flex;
  align-items:center;
  gap:60px;

  background:rgba(255,255,255,0.6);
  backdrop-filter:blur(12px);

  padding:40px;
  border-radius:25px;

  box-shadow:0 20px 60px rgba(0,0,0,0.08);

  transition:0.4s;
}

/* hover lift */

.info-wrapper:hover{
  transform:translateY(-10px);
}

/* =========================
   IMAGE
========================= */

.info-img{
  flex:1;
  border-radius:20px;
  overflow:hidden;
  position:relative;
}

.info-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:0.6s;
}

/* zoom effect */

.info-wrapper:hover .info-img img{
  transform:scale(1.1);
}

/* image overlay */

.info-img::after{
  content:"";
  position:absolute;
  inset:0;

  background:linear-gradient(to top, rgba(0,0,0,0.3), transparent);
}

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

.info-content{
  flex:1;
}

.info-content h2{
  font-size:42px;
  font-weight:800;
  margin-bottom:15px;
  color:#111;
}

.info-content p{
  color:#555;
  line-height:1.8;
  font-size:16px;
}

/* =========================
   BUTTONS (PREMIUM)
========================= */

.info-buttons{
  margin-top:25px;
  display:flex;
  gap:15px;
}

/* READ */

.btn-read{
  padding:12px 28px;
  border:none;
  border-radius:30px;

  background:linear-gradient(135deg,#0d6efd,#1e40af);
  color:#fff;

  font-weight:500;
  cursor:pointer;

  transition:0.3s;
}

.btn-read:hover{
  transform:translateY(-4px);
  box-shadow:0 15px 35px rgba(13,110,253,0.3);
}

/* EXPLORE */

.btn-explore{
  padding:12px 28px;
  border-radius:30px;

  border:2px solid #0d6efd;
  color:#0d6efd;

  text-decoration:none;
  font-weight:500;

  transition:0.3s;
}

.btn-explore:hover{
  background:#0d6efd;
  color:#fff;
  transform:translateY(-4px);
}

/* =========================
   MODAL (FINAL UI)
========================= */

.info-modal{
  position:fixed;
  inset:0;

  background:rgba(0,0,0,0.5);
  backdrop-filter:blur(8px);

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

  padding:20px;

  opacity:0;
  visibility:hidden;
  transition:0.4s;

  z-index:9999;
}

.info-modal.active{
  opacity:1;
  visibility:visible;
}

/* BOX */

.info-modal-box{
  background:#fff;

  width:100%;
  max-width:520px;

  border-radius:20px;
  overflow:hidden;

  max-height:85vh;
  overflow-y:auto;

  transform:translateY(40px) scale(0.95);
  transition:0.4s;

  box-shadow:0 30px 80px rgba(0,0,0,0.2);

  position:relative;
}

/* ACTIVE */

.info-modal.active .info-modal-box{
  transform:translateY(0) scale(1);
}

/* IMAGE */

.modal-img{
  height:180px;
}

.modal-img img{
  width:100%;
  height:100%;
  object-fit:cover;
}
/* =========================
   CONTENT ALIGN (FIXED)
========================= */

.info-modal-box h2{
  font-size:26px;

  text-align:left;   /* 🔥 FIX */
  margin:20px 0 10px;
  padding:0 25px;

  color:#111;
}

/* TEXT */

.info-modal-box p{
  text-align:left;   /* 🔥 FIX */
  padding:0 25px;
  margin-bottom:14px;

  color:#555;
  line-height:1.8;
  font-size:15px;
}

/* FIRST LINE (OPTIONAL HIGHLIGHT) */

.info-modal-box p:first-of-type{
  font-weight:500;
  color:#333;
}
/* CLOSE (TOP RIGHT) */

.close{
  position:absolute;
  top:10px;
  right:12px;

  width:32px;
  height:32px;

  background:#fff;
  border-radius:50%;

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

  font-size:18px;
  cursor:pointer;

  box-shadow:0 5px 15px rgba(0,0,0,0.2);
  transition:0.3s;
}

.close:hover{
  transform:rotate(90deg);
}

/* =========================
   BUTTONS (BOTTOM)
========================= */

.modal-actions{
  display:flex;
  justify-content:center;

  padding:20px;
}

/* CANCEL BUTTON */

.btn-cancel{
  padding:10px 26px;

  border-radius:30px;
  border:none;

  background:#e5e7eb;
  color:#111;

  cursor:pointer;
  font-weight:500;

  transition:0.3s;
}

.btn-cancel:hover{
  background:#0d6efd;
  color:#fff;
}

/* =========================
   SCROLLBAR
========================= */

.info-modal-box::-webkit-scrollbar{
  width:6px;
}

.info-modal-box::-webkit-scrollbar-thumb{
  background:#0d6efd;
  border-radius:10px;
}

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

@media(max-width:768px){
  .info-wrapper{
    flex-direction:column;
    text-align:center;
  }

  .info-content h2{
    font-size:30px;
  }
}
/* =========================
   ICON STRIP (FINAL DARK + 3D READY)
========================= */

.icon-strip{
  position:relative;
  display:flex;
  justify-content:center;
  gap:60px;
  padding:70px 8%;

  /* premium dark background */
  background:radial-gradient(circle at center, #0f172a 0%, #020617 100%);
}

/* =========================
   CONNECTOR LINE
========================= */

.icon-strip::before{
  content:"";
  position:absolute;
  top:50%;
  left:18%;
  right:18%;
  height:1px;

  background:linear-gradient(
    to right,
    transparent,
    rgba(96,165,250,0.4),
    transparent
  );
}

/* =========================
   ICON ITEM (GLASS + 3D)
========================= */

.icon-item{
  position:relative;
  z-index:2;
  text-align:center;

  padding:20px 30px;
  border-radius:16px;

  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter:blur(16px);

  box-shadow:
    0 10px 30px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.05);

  /* 🔥 3D setup */
  transform-style:preserve-3d;
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}

/* =========================
   INNER DEPTH
========================= */

.icon-item i,
.icon-item span{
  display:block;
  transform:translateZ(25px);
}

/* =========================
   ICON
========================= */

.icon-item i{
  font-size:28px;
  margin-bottom:8px;

  background:linear-gradient(135deg,#60a5fa,#2563eb);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

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

.icon-item span{
  font-size:13px;
  color:#cbd5f5;
  font-weight:500;
  letter-spacing:0.3px;
}

/* =========================
   HOVER
========================= */

.icon-item:hover{
  transform:translateY(-10px) scale(1.05);

  box-shadow:
    0 25px 60px rgba(0,0,0,0.6),
    0 0 25px rgba(37,99,235,0.25);
}

/* =========================
   ACTIVE CENTER
========================= */

.icon-item.active{
  transform:translateY(-6px) scale(1.08);

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

  box-shadow:
    0 20px 50px rgba(0,0,0,0.7),
    0 0 30px rgba(37,99,235,0.35);
}

/* =========================
   GLOW PULSE
========================= */

.icon-item.active::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:18px;

  background:radial-gradient(
    circle,
    rgba(37,99,235,0.25),
    transparent 70%
  );

  z-index:-1;
  animation:pulseGlow 3s infinite ease-in-out;
}

@keyframes pulseGlow{
  0%,100%{opacity:0.5; transform:scale(1);}
  50%{opacity:0.2; transform:scale(1.08);}
}/* =========================
   SHAPES LEFT + RIGHT
========================= */

.shape{
  position:absolute;
  z-index:0;
  pointer-events:none;
}

/* LEFT SHAPE */

.shape-left{
  width:200px;
  height:200px;

  top:20%;
  left:-60px;

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

  border-radius:50% 40% 60% 50%;

  filter:blur(10px);
}

/* RIGHT SHAPE */

.shape-right{
  width:220px;
  height:220px;

  bottom:20%;
  right:-70px;

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

  border-radius:60% 50% 40% 50%;

  filter:blur(12px);
}
/* =========================
   PRESS RELEASE PAGE
   PREMIUM ATTRACTIVE
========================= */

.press-release-section{

padding:110px 6%;
background:
radial-gradient(circle at top left,#1a2c52,#071126 45%),
#071126;

position:relative;
overflow:hidden;

}


/* GLOW EFFECTS */

.press-release-section::before{

content:"";
position:absolute;
top:-180px;
left:-180px;

width:500px;
height:500px;

background:rgba(212,175,55,0.10);
filter:blur(120px);
border-radius:50%;

}


.press-release-section::after{

content:"";
position:absolute;
bottom:-200px;
right:-200px;

width:450px;
height:450px;

background:rgba(59,130,246,0.12);
filter:blur(120px);
border-radius:50%;

}


/* MAIN PAPER */

.press-paper{

max-width:1220px;
margin:auto;

background:
linear-gradient(
180deg,
rgba(255,255,255,0.98),
rgba(248,248,248,0.97)
);

backdrop-filter:blur(10px);

padding:65px;

border-radius:28px;

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

position:relative;
z-index:2;
overflow:hidden;

}


/* GOLD TOP BAR */

.press-paper::before{

content:"";
position:absolute;
top:0;
left:0;

width:100%;
height:7px;

background:linear-gradient(
90deg,
#d4af37,
#f5d06f,
#d4af37
);

}


/* HEADER */

.press-heading{

text-align:center;
margin-bottom:70px;
position:relative;

}


/* TAG *//* =========================
   PRESS TAG (NEW SHAPE)
========================= */

.press-tag{

position:relative;
display:inline-flex;
align-items:center;
gap:10px;

padding:14px 34px 14px 26px;

background:linear-gradient(
135deg,
rgba(212,175,55,0.18),
rgba(255,255,255,0.08)
);

border:1px solid rgba(212,175,55,0.45);

color:#8b6b2e;

font-size:13px;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;

backdrop-filter:blur(8px);

clip-path:polygon(
0 0,
88% 0,
100% 50%,
88% 100%,
0 100%,
8% 50%
);

box-shadow:
0 8px 20px rgba(212,175,55,0.12);

margin-bottom:24px;

transition:0.4s ease;

}


/* SMALL GLOW DOT */

.press-tag::before{

content:"";

width:8px;
height:8px;

border-radius:50%;

background:#d4af37;

box-shadow:
0 0 10px rgba(212,175,55,0.7);

}


/* HOVER */

.press-tag:hover{

transform:translateY(-3px);

box-shadow:
0 12px 25px rgba(212,175,55,0.18),
0 0 20px rgba(212,175,55,0.15);

}


/* TITLE */

.press-heading h1{

font-size:72px;
font-family:Georgia, serif;
font-weight:800;
color:#111;

margin-bottom:18px;
line-height:1.2;

position:relative;
display:inline-block;

}


/* GOLD UNDERLINE */

.press-heading h1::after{

content:"";
position:absolute;
left:50%;
bottom:-14px;

transform:translateX(-50%);

width:120px;
height:4px;

border-radius:10px;

background:linear-gradient(
90deg,
#d4af37,
#f5d06f
);

}


/* SUBTEXT */

.press-heading p{

font-size:18px;
line-height:1.9;
color:#666;

max-width:760px;
margin:28px auto 0;

}


/* GRID */

.press-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:40px;

}


/* CARD */

.press-card{

background:#fff;

padding:14px;

border-radius:22px;

overflow:hidden;

position:relative;

transition:0.5s;

box-shadow:
0 10px 25px rgba(0,0,0,0.06);

}


/* SHINE EFFECT */

.press-card::before{

content:"";
position:absolute;
top:0;
left:-120%;

width:80%;
height:100%;

background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.6),
transparent
);

transition:0.8s;

z-index:2;

}


.press-card:hover::before{

left:130%;

}


/* IMAGE */

.press-image{

border-radius:18px;
overflow:hidden;
position:relative;

}

.press-image img{

width:100%;
display:block;
transition:0.7s;

}


/* CONTENT */

.press-content{

padding:26px 12px 14px;

}


/* DATE */

.press-date{

display:inline-block;

padding:8px 16px;

background:#f8f1dc;

color:#8b6b2e;

font-size:12px;
font-weight:700;
letter-spacing:1px;
text-transform:uppercase;

border-radius:50px;

margin-bottom:18px;

}


/* HEADING */

.press-content h3{

font-size:30px;
line-height:1.7;
font-family:'Noto Nastaliq Urdu', serif;
font-weight:700;
color:#111;

}


/* HOVER */

.press-card:hover{

transform:translateY(-12px);

box-shadow:
0 22px 50px rgba(0,0,0,0.15);

}

.press-card:hover img{

transform:scale(1.07);

}


/* RESPONSIVE */

@media(max-width:992px){

.press-heading h1{

font-size:54px;

}

}


@media(max-width:768px){

.press-release-section{

padding:80px 5%;

}

.press-paper{

padding:35px 20px;

}

.press-grid{

grid-template-columns:1fr;

}

.press-heading h1{

font-size:42px;

}

.press-content h3{

font-size:24px;

}

}/* =========================
   PUBLIC SERVICE SECTION
========================= */

.public-service-section{

padding:110px 6%;

background:
linear-gradient(
135deg,
#071326,
#0f172a,
#172554
);

position:relative;
overflow:hidden;

}


/* SECTION TITLE */

.public-service-section .section-title{

text-align:center;

max-width:1000px;

margin:auto auto 90px;

position:relative;
z-index:2;

}


.public-service-section .section-title span{

display:inline-block;

padding:12px 24px;

border-radius:50px;

background:rgba(59,130,246,0.12);

border:1px solid rgba(59,130,246,0.25);

color:#60a5fa;

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

letter-spacing:2px;
text-transform:uppercase;

margin-bottom:24px;

}


.public-service-section .section-title h2{

font-size:56px;
font-weight:800;

line-height:1.1;

color:#fff;

margin-bottom:28px;

position:relative;

display:inline-block;

overflow:hidden;

}


/* BLUE LIGHT SWEEP */

.public-service-section .section-title h2::after{

content:"";

position:absolute;

top:0;
left:-150%;

width:120%;
height:100%;

background:linear-gradient(
120deg,
transparent,
rgba(96,165,250,0.55),
transparent
);

animation:titleSweep 4s linear infinite;

}


.public-service-section .section-title p{

font-size:17px;

line-height:1.9;

color:#cbd5e1;

}



/* BLOCK */

.affiliation-block{

margin-bottom:80px;

position:relative;
z-index:2;

}


/* HEADING */

.block-heading{

margin-bottom:35px;

}
/* =========================
   PREMIUM BLOCK HEADING
========================= */

.block-heading{

position:relative;

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

gap:30px;

margin-bottom:55px;

padding-bottom:22px;

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

}


/* LEFT SIDE */

.block-heading-left{

display:flex;
align-items:center;

gap:18px;

}


/* GLOW BAR */

.block-heading-left::before{

content:"";

width:8px;
height:48px;

border-radius:30px;

background:linear-gradient(
180deg,
#2563eb,
#60a5fa,
#93c5fd
);

box-shadow:
0 0 18px rgba(59,130,246,0.5),
0 0 35px rgba(96,165,250,0.25);

flex-shrink:0;

animation:barGlow 3s ease-in-out infinite;

}


/* TITLE */

.block-heading h3{

font-size:42px;
font-weight:900;

line-height:1.1;

letter-spacing:-1px;

color:#ffffff;

margin:0;

position:relative;

}


/* LIGHT EFFECT */

.block-heading h3::after{

content:"";

position:absolute;

top:0;
left:-140%;

width:120%;
height:100%;

background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.35),
transparent
);

animation:titleLight 5s linear infinite;

}



/* SMALL TEXT */

.block-heading p{

font-size:15px;

color:#94a3b8;

max-width:500px;

line-height:1.7;

margin-top:10px;

}



/* GRID */

.affiliation-grid{

display:grid;

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

gap:34px;

align-items:stretch;

}



/* ANIMATIONS */

@keyframes titleLight{

0%{
left:-140%;
}

100%{
left:140%;
}

}


@keyframes barGlow{

0%{
transform:scaleY(1);
}

50%{
transform:scaleY(1.08);
}

100%{
transform:scaleY(1);
}

}



/* RESPONSIVE */

@media(max-width:768px){

.block-heading{

flex-direction:column;
align-items:flex-start;

gap:20px;

margin-bottom:40px;

padding-bottom:18px;

}

.block-heading h3{

font-size:30px;

}

.block-heading-left::before{

height:38px;

}

.affiliation-grid{

grid-template-columns:1fr;

gap:24px;

}

}

/* CARD */

.affiliation-card{

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

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

padding:38px 30px;

border-radius:28px;

position:relative;

overflow:hidden;

transition:0.45s;

backdrop-filter:blur(10px);

min-height:250px;

display:flex;
flex-direction:column;

justify-content:flex-start;

}


/* TOP GLOW */

.affiliation-card::before{

content:"";

position:absolute;

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

width:240px;
height:240px;

background:radial-gradient(
circle,
rgba(59,130,246,0.18),
transparent 70%
);

transition:0.5s;

}


.affiliation-card:hover{

transform:translateY(-10px);

border-color:rgba(96,165,250,0.35);

box-shadow:0 25px 45px rgba(0,0,0,0.28);

}


.affiliation-card:hover::before{

transform:scale(1.15);

}



/* ACTIVE CARD */

.affiliation-card.active{

background:linear-gradient(
135deg,
rgba(59,130,246,0.14),
rgba(255,255,255,0.04)
);

border-color:rgba(96,165,250,0.35);

}


.top-line{

position:absolute;

top:0;
left:0;

width:100%;
height:4px;

background:linear-gradient(
90deg,
#2563eb,
#60a5fa
);

}



/* ROLE */

.affiliation-card .role{

font-size:13px;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

color:#60a5fa;

margin-bottom:18px;

display:block;

}



/* TITLE */

.affiliation-card h4{

font-size:26px;
font-weight:800;

line-height:1.3;

color:#fff;

margin-bottom:16px;

}



/* TEXT */

.affiliation-card p{

font-size:15px;
line-height:1.8;

color:#cbd5e1;

margin-bottom:22px;

}



/* LINK */

.affiliation-card a{

margin-top:auto;

display:inline-flex;

align-items:center;

gap:10px;

color:#93c5fd;

text-decoration:none;

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

transition:0.3s;

}


.affiliation-card a:hover{

letter-spacing:1px;

}



/* ANIMATION */

@keyframes titleSweep{

0%{
left:-150%;
}

100%{
left:150%;
}

}



/* RESPONSIVE */

@media(max-width:768px){

.public-service-section{

padding:80px 5%;

}

.public-service-section .section-title h2{

font-size:38px;

}

.block-heading h3{

font-size:28px;

}

.affiliation-card{

min-height:auto;

}

} /* =========================
   PUBLIC SERVICE PAGE ONLY
========================= */

.public-service-page{

background:
linear-gradient(
180deg,
#071326 0%,
#0b1220 30%,
#111827 65%,
#172554 100%
);

overflow:hidden;

color:#fff;

font-family:'Inter',sans-serif;

}



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

.public-service-page .public-hero{

position:relative;

min-height:100vh;

padding:150px 6% 110px;

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

text-align:center;

overflow:hidden;

background:
radial-gradient(circle at top left,#1d4ed8,#071326 40%),
linear-gradient(135deg,#071326,#0f172a,#172554);

}


/* HERO CONTENT */

.public-service-page .hero-content{

max-width:900px;

margin:auto;

position:relative;
z-index:5;

display:flex;
flex-direction:column;
align-items:center;

text-align:center;

}


/* TITLE */

.public-service-page .hero-content h1{

font-size:68px;
font-weight:900;

line-height:1.05;

letter-spacing:-2px;

color:#ffffff;

max-width:850px;

margin-bottom:28px;

}


/* =========================
   AFFILIATION BLOCK
========================= */

.public-service-page .affiliation-block{

position:relative;

margin:90px 6%;

padding:55px;

border-radius:38px;

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);

backdrop-filter:blur(14px);

overflow:hidden;

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

}


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

.public-service-page .block-heading{

margin-bottom:55px;

padding-bottom:20px;

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

}


.public-service-page .block-heading h3{

font-size:42px;
font-weight:900;

color:#fff;

padding-left:28px;

position:relative;

}


/* =========================
   GRID
========================= */

.public-service-page .affiliation-grid{

display:grid;

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

gap:34px;

}



/* =========================
   CARD
========================= */

.public-service-page .affiliation-card{

position:relative;

padding:40px 32px;

border-radius:30px;

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

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

overflow:hidden;

transition:0.45s;

backdrop-filter:blur(12px);

min-height:270px;

display:flex;
flex-direction:column;

}



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

@media(max-width:768px){

.public-service-page .public-hero{

padding:120px 5% 90px;

}

.public-service-page .hero-content h1{

font-size:40px;

}

.public-service-page .affiliation-block{

margin:60px 5%;

padding:32px 22px;

}

.public-service-page .affiliation-grid{

grid-template-columns:1fr;

}

}
/* =========================
   PUBLIC SERVICE PAGE
========================= */

.ps-page{

font-family:'Inter',sans-serif;

background:
linear-gradient(
180deg,
#071326 0%,
#0b1220 35%,
#101827 65%,
#172554 100%
);

overflow:hidden;

color:#fff;

}



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

.ps-hero{

position:relative;

min-height:100vh;

padding:150px 6% 110px;

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

text-align:center;

overflow:hidden;

background:
radial-gradient(circle at top left,#1d4ed8,#071326 40%),
linear-gradient(135deg,#071326,#0f172a,#172554);

}


/* GRID EFFECT */

.ps-hero::before{

content:"";

position:absolute;
inset:0;

background-image:
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);

background-size:70px 70px;

opacity:0.4;

}


/* HERO CONTENT */

.ps-hero-content{

max-width:900px;

margin:auto;

position:relative;
z-index:5;

display:flex;
flex-direction:column;
align-items:center;

}


/* TAG */

.ps-hero-content span{

display:inline-flex;

padding:13px 26px;

border-radius:60px;

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

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

font-size:13px;
font-weight:700;

letter-spacing:2px;
text-transform:uppercase;

color:#93c5fd;

margin-bottom:28px;

}


/* TITLE */

.ps-hero-content h1{

font-size:64px;
font-weight:900;

line-height:1.05;

letter-spacing:-2px;

color:#ffffff;

max-width:850px;

margin-bottom:26px;

}


/* TEXT */

.ps-hero-content p{

font-size:18px;

line-height:1.9;

color:#cbd5e1;

max-width:760px;

}



/* FLOATING ICONS */

.ps-floating-icons{

position:absolute;
inset:0;

pointer-events:none;

}


/* ICON */

.ps-float-icon{

position:absolute;

width:92px;
height:92px;

border-radius:30px;

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

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

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

font-size:34px;

color:#60a5fa;

backdrop-filter:blur(14px);

animation:psFloat 6s ease-in-out infinite;

}


/* POSITIONS */

.ps-icon1{top:18%;left:8%;}
.ps-icon2{top:20%;right:10%;}
.ps-icon3{bottom:18%;left:10%;}
.ps-icon4{bottom:16%;right:12%;}
.ps-icon5{top:48%;left:4%;}
.ps-icon6{top:52%;right:5%;}



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

.ps-affiliation-block{

margin:90px 6%;

padding:55px;

border-radius:36px;

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);

}


/* HEADING */

.ps-block-heading{

margin-bottom:50px;

padding-bottom:18px;

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

}


.ps-block-heading h3{

font-size:40px;
font-weight:900;

color:#fff;

padding-left:26px;

position:relative;

}


.ps-block-heading h3::before{

content:"";

position:absolute;

left:0;
top:4px;

width:8px;
height:40px;

border-radius:30px;

background:linear-gradient(
180deg,
#2563eb,
#60a5fa
);

}



/* GRID */

.ps-affiliation-grid{

display:grid;

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

gap:32px;

}



/* CARD */

.ps-affiliation-card{

padding:40px 32px;

border-radius:30px;

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

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

transition:0.4s;

display:flex;
flex-direction:column;

min-height:260px;

}


.ps-affiliation-card:hover{

transform:translateY(-10px);

border-color:rgba(96,165,250,0.35);

}


/* ACTIVE */

.ps-affiliation-card.active{

background:
linear-gradient(
135deg,
rgba(37,99,235,0.18),
rgba(255,255,255,0.04)
);

}


/* ROLE */

.ps-role{

font-size:13px;
font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

color:#60a5fa;

margin-bottom:18px;

display:block;

}


/* TITLE */

.ps-affiliation-card h4{

font-size:27px;
font-weight:800;

line-height:1.3;

color:#fff;

margin-bottom:16px;

}


/* TEXT */

.ps-affiliation-card p{

font-size:15px;

line-height:1.9;

color:#cbd5e1;

margin-bottom:22px;

}


/* LINK */

.ps-affiliation-card a{

margin-top:auto;

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

color:#93c5fd;

text-decoration:none;

}



/* ANIMATION */

@keyframes psFloat{

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

50%{
transform:translateY(-18px);
}

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

}



/* RESPONSIVE */

@media(max-width:768px){

.ps-hero{

padding:120px 5% 90px;

min-height:auto;

}

.ps-hero-content h1{

font-size:38px;

line-height:1.15;

}

.ps-hero-content p{

font-size:16px;

}

.ps-float-icon{

width:68px;
height:68px;

font-size:24px;

}

.ps-icon5,
.ps-icon6{

display:none;

}

.ps-affiliation-block{

margin:60px 5%;

padding:32px 22px;

}

.ps-affiliation-grid{

grid-template-columns:1fr;

}

}
/* =========================
   PREMIUM GALLERY
========================= */

.gallery-section{

padding:120px 6%;

background:
linear-gradient(
180deg,
#071326,
#0f172a,
#172554
);

}

.gallery-title{

text-align:center;

max-width:850px;

margin:0 auto 70px;

}

.gallery-title span{

color:#60a5fa;

font-size:14px;

font-weight:700;

letter-spacing:3px;

text-transform:uppercase;

}

.gallery-title h2{

font-size:60px;
font-weight:900;

color:#fff;

margin:15px 0;

}

.gallery-title p{

font-size:18px;

line-height:1.9;

color:#cbd5e1;

}



/* GRID */

.gallery-grid{

display:grid;

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

gap:30px;

}



/* CARD */

.gallery-item{

position:relative;

height:320px;

overflow:hidden;

border-radius:28px;

cursor:pointer;

background:#111827;

box-shadow:
0 20px 50px rgba(0,0,0,.25);

transition:.5s;

}


/* IMAGE & VIDEO */

.gallery-item img,
.gallery-item video{

width:100%;
height:100%;

object-fit:cover;

display:block;

transition:.8s;

}


/* OVERLAY */

.gallery-item::before{

content:"";

position:absolute;
inset:0;

background:
linear-gradient(
transparent,
rgba(0,0,0,.85)
);

z-index:1;

}


/* CONTENT */

.gallery-info{

position:absolute;

left:25px;
bottom:25px;

z-index:2;

}

.gallery-info h3{

font-size:24px;
font-weight:800;

color:#fff;

margin-bottom:8px;

}

.gallery-info span{

color:#cbd5e1;

font-size:14px;

}


/* HOVER */

.gallery-item:hover{

transform:translateY(-12px);

}

.gallery-item:hover img,
.gallery-item:hover video{

transform:scale(1.08);

}



/* ==========================
   GLOBAL MOBILE FIX
========================== */

@media screen and (max-width:768px){

body{
overflow-x:hidden;
}

/* Header */
.header .container-fluid{
padding:0 15px;
}

.logo h1{
font-size:22px !important;
}

.cta-btn{
display:none;
}

/* Hero */
.hero h1,
.hero-content h1,
.ps-hero-content h1{
font-size:32px !important;
line-height:1.3;
}

.hero p,
.hero-content p,
.ps-hero-content p{
font-size:15px;
}

/* Gallery */
.gallery-grid{
grid-template-columns:1fr !important;
}

.gallery-item img{
width:100%;
height:250px;
object-fit:cover;
}

/* Service Cards */
.service-box{
flex-direction:column;
}

.service-item{
width:100% !important;
margin-bottom:20px;
}

/* Family Section */
.family-single,
.family-item,
.info-wrapper,
.complex-row{
flex-direction:column !important;
}

.family-image,
.family-detail,
.family-img,
.family-content,
.info-img,
.info-content,
.complex-text,
.complex-visual{
width:100% !important;
}

/* Stats */
.contact-stats{
flex-direction:column;
gap:15px;
}

/* Logos */
.logo-track img{
height:60px;
}

/* Footer */
.footer{
text-align:center;
}

.footer-buttons{
flex-direction:column;
}

.footer-logos{
justify-content:center;
flex-wrap:wrap;
}

.footer-logos img{
width:55px;
height:55px;
}
}@media (max-width:768px){

.home-family-section .section-title h2{
    display:flex !important;
    flex-direction:row !important;
    justify-content:center;
    align-items:center;
    flex-wrap:nowrap !important;
    gap:5px;
    font-size:28px !important;
}

.home-family-section .section-title h2 .gold{
    display:inline !important;
}

}