/* css/styles */

    /* ========== ROOT VARIABLES ========== */

    
    @font-face {
  font-family: "Carlito";
  src: url("/fonts/Carlito-Regular.woff2") format("woff2"),
       url("/fonts/Carlito-Regular.woff") format("woff");

  font-weight: 400;
  font-style: normal;
    font-display: swap;

}

    :root {
      --primary-color: #0066CC;
      --primary-dark: #0055b3;
      --primary-light: #e6f0ff;
      --secondary-color: #333333;
      --light-gray: #F5F5F7;
      --gray: #86868B; 
      --p-gray: #65676b;
      --black: #000000;
      --dark-gray: #000000/* 333333 */;
      --white: #FFFFFF;
      --border-radius: 12px;
      --transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      --box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
      --box-shadow-light: 0 2px 10px rgba(0, 0, 0, 0.05);


--section-header-font: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);   /* 16px → 20px */
--sub-header-font:     clamp(0.885rem, 0.8rem + 0.3vw, 0.98rem); /* 15px → 18px */
--p-font:              clamp(0.875rem, 0.8rem + 0.3vw, 1rem);  /* 14px → 16px */
--tag-font:            clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem); /* 12px → 13px */
--header-font:         clamp(0.775rem, 0.75rem + 0.2vw, 0.95rem);  /* clamp(0.75rem, 0.7rem + 0.2vw,  0.85rem) */
--error-font:           clamp(0.68rem, 0.6rem + 0.19vw, 0.77rem); /* 12px → 13px */
--dr-name-font:     clamp(17px, 1rem + 0.5vw, 24px);;

--font-18: 18px;
--font-19: 19px;
--font-20: 20px;
--font-21: 21px;
--font-22: 22px;
--font-23: 23px;
--font-24: 24px;
--font-25: 25px;
--font-26: 26px;

--font-27: 27px;
--font-28: 28px;
--font-29: 29px;
--font-32: 32px;
--font-40: 40px;

--carlito: "Carlito", sans-serif;


      
    }

    /* ========== BASE STYLES ========== */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
        -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }

    body {
      font-family: var(--carlito) ;
      font-size: var(--p-font);
      color: var(--dark-gray);
      line-height: 1.6;
      background: var(--white);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
    }
    

    .container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;

    }

    a {
      color: var(--primary-color);
      text-decoration: none;
      transition: var(--transition);
      cursor: pointer;
    }

    a:hover, a:focus {
      color: var(--primary-dark);
    }

    img {
      width: 100%;
      height: auto;
      display: block;
      padding: 13px;
    }

    /* ========== HEADER & NAVIGATION ========== */
    header {
      position: sticky;
      top: 0;
      z-index: 100;
      background-color: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    .headerContainer {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 16px 0;
    }
    .container.headerBg{
      background: #0c234017 ;
    }

    .logo {
     /*  display: flex; */
      align-items: center;
      gap: 16px;
      cursor: pointer;
      transition: var(--transition);
    }


    .logo-image {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      overflow: hidden;
      background: var(--primary-color);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--white);
      font-size: var(--font-28);
      font-weight: 300;
      letter-spacing: 0.5px;
      box-shadow: var(--box-shadow-light);
      flex-shrink: 0;
    }

    .logo h1 {
      font-size: var(--font-24);
      font-weight: 600;
      margin: 0;
      line-height: 1.2;
    }

    .logo h1 .firstname {
      font-weight: 400;
      
    }
    .name{
font-family: var(--carlito) ;
font-size: var(--font-22) !important;
    }

   

    .headerTitle {
      list-style: none;
      text-align: right;
      line-height: 0.75;
      padding-top: 6px;
    }

   
    ul.headerTitle {
        margin: 0;
    }

    .headerTitle li:first-child {
      font-weight: 500;
    }

    .list{
      font-size: var(--p-font);
    }

    /* Navigation Menu */
    .navMenu {
      display: flex;
      list-style: none;
      gap: 40px;
      margin: 24px 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
      padding-bottom: 12px;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
    }

    .navMenu li a {
      color: var(--dark-gray);
      position: relative;
      padding-bottom: 8px;
      font-weight: 500;
      font-size: var(--p-font);
      transition: var(--transition);
    }

    .navMenu li a:hover {
      color: var(--primary-color);
    }

    .navMenu li.active a {
      color: var(--primary-color);
    }

    .navMenu li a::after {
      content: '';
      position: absolute;
      bottom: -13px;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: var(--primary-color);
      transform: scaleX(0);
      transition: var(--transition);
    }

    .navMenu li.active a::after,
    .navMenu li a:hover::after {
      transform: scaleX(1);
    }


    /* Mobile Navigation */
    .mobileNav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background: var(--white);
      z-index: 1000;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      opacity: 0;
      visibility: hidden;
      transition: var(--transition);
      padding: 60px 24px;
      text-align: center;
    }

    .mobileNav.active {
      opacity: 1;
      visibility: visible;
    }

    .mobileNavMenu {
      list-style: none;
      text-align: center;
    }

    .mobileNavMenu li {
      margin-bottom: 30px;
    }

    .mobileNavMenu a {
      font-size: var(--section-header-font);
      font-weight: 500;
      color: var(--dark-gray);
    }

    .mobileNavMenu a:hover {
      color: var(--primary-color);
    }

    .mobileNavClose {
      position: absolute;
      top: 24px;
      right: 24px;
      background: none;
      border: none;
      font-size: var(--font-32);
      color: var(--dark-gray);
      cursor: pointer;
      transition: var(--transition);
    }

    .mobileNavClose:hover {
      color: var(--primary-color);
    }

    /* ========== BANNER ========== */
    .banner {
      max-height: 415px;
      position: relative;
      overflow: hidden;
      margin-bottom: 60px;
      border-radius: var(--border-radius);
      box-shadow: var(--box-shadow);
      background-color: var(--light-gray);
      padding: 0 16px;
    }

    .video-container {
      position: relative;
      width: 100%;
/*       height: 0;
 */      padding-bottom: 42.5%;
      overflow: hidden;
      border-radius: 52px 52px 0 0;
    }

    .banner-video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 0.8s ease;
    }

    .banner-video.active {
      opacity: 1;
    }

    .fallback-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: none;
    }

   /*  @media (prefers-reduced-motion: reduce) {
      .banner-video {
        display: none;
      }
      
      .fallback-image {
        display: block;
      }
    } */

    /* ========== MAIN LAYOUT ========== */
    .mainLayout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 40px;
      padding-bottom: 90px;
      
    
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);

    }

  .mainLayout.allOptionsMode {
    background-color: rgb(240 242 245 / 36%);
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);

    animation: revealBlur 690ms ease-out;
    will-change: filter, opacity;
}

@keyframes revealBlur {
    from {
        filter: blur(4px);
        opacity: 0.9;
    }
    to {
        filter: blur(0);
        opacity: 1;
    }
}

    /* ========== HERO SECTION WITH PROFILE IMAGE ========== */
    .heroSection {
      display: grid;
      grid-template-columns: 1fr 400px;
      align-items: center;
      margin-bottom: 60px;
      padding: 0;
      
      border-radius: var(--border-radius);
    }

    .heroImage {
      border-radius: var(--border-radius);
      box-shadow: var(--box-shadow);
      overflow: hidden;
      margin-left: 40px;
    }

    .heroImage img {
      width: 100%;
      height: auto;
      display: block;
    }

    .heroContent h1 {
      font-size: var(--font-40);
      font-weight: 600;
      margin-bottom: 20px;
      color: var(--dark-gray);
      
    }

    .heroContent p {
      font-size: calc( var(--p-font) + 1px);
      line-height: 1.5;
      color: var(--dark-gray);
      margin-bottom: 20px;
      text-align: left;
      font-weight: 500;
font-family: var(--carlito) ;
font-weight: 500;

      }

  

    .heroContent .subtitle {
      color: var(--gray);
      font-size: var(--p-font);
      margin-top: 30px;
      padding-top: 20px;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      margin-bottom: 0;
    }
    .heroContent .secondSubtitle {
       color: var(--gray);
      font-size: var(--p-font);
    }

    /* ========== DUAL INTRO BOXES ========== */
    .dualIntroSection {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
      margin-bottom: 60px;
    }

    .introBox {
      padding: 40px;
      border-radius: var(--border-radius);
      background: var(--white);
      box-shadow: var(--box-shadow-light);
      transition: var(--transition);
      border: 1px solid rgba(0, 0, 0, 0.06);
    }

    .introBox:hover {
      transform: translateY(-5px);
      box-shadow: var(--box-shadow);
    }

    .introBox h2 {
      color: var(--primary-color);
      font-size: var(--font-28);
      margin-bottom: 20px;
      margin-top: 0;
    }

    .introBox p {
      font-size: var(--p-font);
      line-height: 1.8;
      color: var(--dark-gray);
      margin-bottom: 20px;
    }

    .introBox .readMore {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-weight: 500;
      color: var(--primary-color);
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid rgba(0, 0, 0, 0.08);
    }

    .introBox .readMore:hover {
      gap: 12px;
    }

    .introBox .readMore i {
      transition: var(--transition);
    }

    /* ========== EXPANDABLE SECTIONS (ACCORDION) ========== */
    .expandableSections {
background: #f0f2f5;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  padding-top: 0 ;
  padding-bottom: 90px ;
    }

    .expandableSection {
      margin-bottom: 16px;
      border-radius: var(--border-radius);
      background: var(--white);
      overflow: hidden;
      box-shadow: var(--box-shadow-light);
      border: 1px solid rgba(0, 0, 0, 0.06);
      transition: var(--transition);
    }

    .expandableSection:hover {
      box-shadow: var(--box-shadow);
    }

    .expandableHeader {
      padding: 24px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--white);
      transition: var(--transition);
    }

    .expandableHeader:hover {
      background: var(--light-gray);
    }

    .expandableHeader h3 {
     font-size: var(--section-header-font);
      margin: 0;
      color: var(--dark-gray);
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .expandableHeader .icon {
      width: 32px;
      height: 32px;
      background: var(--primary-light);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--primary-color);
      font-size: var(--p-font);
    }

    .expandableToggle {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--primary-color);
      font-size: var(--section-header-font);
      transition: var(--transition);
    }


    .expandableBody {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
      background: var(--white);
    }

    .expandableBody.open {
      max-height: 130000px; /* Increased for new content-rich sections */
    /*   transition: max-height 0.1s cubic-bezier(0.4, 0.0, 0.2, 1);  */
    }

       .expandableToggle.open {
      transform: rotate(180deg);
    }

    .expandableContent {
      padding: 8px 24px 24px;
    }

    .expandableContent p {
      font-weight: 400;
      font-size: var(--p-font);
    }

    /* ========== REGISTRATIONS DISPLAY ========== */
    .registrationGrid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 24px;
      margin-bottom: 40px;
    }

    .registrationItem {
      display: grid;
      grid-template-columns: 120px 1fr;
      gap: 20px;
      align-items: center;
      padding: 24px;
      background: var(--white);
      border-radius: var(--border-radius);
      box-shadow: var(--box-shadow-light);
      border: 1px solid rgba(0, 0, 0, 0.06);
    }

    .registrationItem img {
      width: 100%;
      height: auto;
      max-width: 120px;
    }

    .registrationItem img.smaller{
      max-width: 100px;
    }

    .registrationItem img.round {
      border-radius: 50%;
      object-fit: cover;
      aspect-ratio: 1;
    }

    .registrationContent h4 {
      font-size: var(--p-font);
      font-weight: 600;
      margin: 0 0 8px;
      color: var(--dark-gray);
    }

    .registrationContent p {
      font-size: var(--p-font);
      color: var(--gray);
      margin: 0;
    }

    /* ========== QUALIFICATIONS ========== */
    .qualificationsList {
      list-style: none;
      margin: 30px 0;
    }

    .qualificationsList li {
      padding: 16px;
      margin-bottom: 12px;
      background: var(--light-gray);
      border-radius: var(--border-radius);
      border-left: 4px solid var(--primary-color);
      transition: var(--transition);
    }

    .qualificationsList li:hover {
      background: #e8e8ec;
      transform: translateX(8px);
    }

    /* ========== ACTIVE ROLES ========== */
    .activeRoles {
      display: grid;
      margin-bottom: 40px;
    }

    .roleItem {
      padding: 24px;
      background: var(--white);
      border-radius: var(--border-radius);
      box-shadow: var(--box-shadow-light);
      border: 1px solid rgba(0, 0, 0, 0.06);
      transition: var(--transition);
    }

    .roleItem.second{
      margin-top: 20px;
    }

    .roleItem:hover {
      
      box-shadow: var(--box-shadow);
    }

    .roleItem h4 {
      font-size: var(--sub-header-font);
      font-weight: 600;
      margin: 0 0 12px;
      color: var(--primary-color);
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .roleItem p {
      font-size: var(--sub-header-font);
      color: var(--dark-gray);
      margin-bottom: 12px;
    }

    .roleItem a {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-weight: 500;
    }

    .roleItem a:hover {
      gap: 10px;
    }

    /* ========== AREAS OF INTEREST ========== */
    .interestGrid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 24px;
      margin-bottom: 40px;
    }

    .interestCard {
      padding: 30px;
      background: var(--white);
      border-radius: var(--border-radius);
      box-shadow: var(--box-shadow-light);
      border: 1px solid rgba(0, 0, 0, 0.06);
      transition: var(--transition);
    }

    .interestCard:hover {
      transform: translateY(-5px);
      box-shadow: var(--box-shadow);
    }

    .interestCard .icon {
      width: 50px;
      height: 50px;
      background: var(--primary-light);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--primary-color);
      font-size: var(--font-24);
      margin-bottom: 16px;
    }

    .interestCard h3 {
      font-size: var(--section-header-font);
      font-weight: 600;
      margin: 0 0 12px;
      color: var(--dark-gray);
    }

    .interestCard p {
      font-size: var(--sub-header-font);
      line-height: 1.7;
    }

    /* ========== TESTIMONIALS ========== */
    .testimonialGrid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
      gap: 24px;
      margin-bottom: 60px;
    }

    .testimonialCard {
          padding: 30px;
    background: var(--light-gray);
    border-radius: var(--border-radius);
    border: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: var(--transition);
    }

    .testimonialCard:hover {
      background: #e8e8ec;
    }

    .testimonialQuote {
      font-size: var(--p-font);
      font-style: italic;
      color: var(--dark-gray);
      margin-bottom: 20px;
      line-height: 1.8;
    }

    .testimonialQuote::before {
      content: '"';
      font-size: var(--font-40);
      color: var(--primary-color);
      opacity: 0.3;
      line-height: 0;
      vertical-align: -0.45em;
      margin-right: 8px;
    }

    .testimonialAuthor {
      font-weight: 600;
      color: var(--primary-color);
      font-size: var(--sub-header-font);
    }

    /* ========== RESEARCH PREVIEW ========== */
    .researchPreview {
      margin-bottom: 60px;
    }

    .publicationItem {
      padding: 24px;
      background: var(--white);
      border-radius: var(--border-radius);
      box-shadow: var(--box-shadow-light);
      border: 1px solid rgba(0, 0, 0, 0.06);
      margin-bottom: 20px;
      transition: var(--transition);
    }

    .publicationItem:hover {
      box-shadow: var(--box-shadow);
      transform: translateY(-3px);
    }

    .pubYear {
      font-size: var(--p-font);
      color: var(--gray);
      margin-bottom: 8px;
    }

    .pubTitle {
      font-size: var(--sub-header-font);
      font-weight: 600;
      color: var(--primary-color);
      margin-bottom: 8px;
      line-height: 1.6;
    }

    .pubAuthors {
      font-size: var(--p-font);
      color: var(--dark-gray);
      margin-bottom: 8px;
    }

    .pubCitation {
      font-size: var(--p-font);
      color: var(--gray);
      font-style: italic;
    }

    .viewAllButton {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 24px;
      background: var(--primary-color);
      color: var(--white);
      border-radius: 30px;
      font-weight: 500;
      transition: var(--transition);
      border: none;
      cursor: pointer;
    }

    .viewAllButton:hover {
      background: var(--primary-dark);
      gap: 12px;
    }

    /* ========== CONTENT TYPOGRAPHY ========== */
    h1 {
      font-size: var(--font-40);
      font-weight: 600;
      margin: 40px 0 24px;
      color: var(--dark-gray);
      line-height: 1.1;
    }

    h1:first-child {
      margin-top: 0;
    }

    h2 {
      font-size: var(--font-28);
      font-weight: 600;
      margin: 32px 0 16px;
      color: var(--dark-gray);
    }

    h3 {
      font-size: var(--p-font);
      font-weight: 600;
      /* margin: 24px 0 12px;
      color: var(--dark-gray); */
    }

    p {
      font-size: var(--p-font);
      margin-bottom: 20px;
      line-height: 1.8;
    }

    ul, ol {
      margin: 20px 0 24px 24px;
      line-height: 1.8;
    }

    li {
      margin-bottom: 12px;
    }

    blockquote {
      border-left: 4px solid var(--primary-color);
      padding: 24px 30px;
      margin: 40px 0;
      background-color: var(--light-gray);
      border-radius: 0 var(--border-radius) var(--border-radius) 0;
      font-style: italic;
      font-size: var(--sub-header-font);
      color: var(--dark-gray);
    }

    /* ========== BUTTONS ========== */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 28px;
      border: none;
      border-radius: 30px;
      cursor: pointer;
      font-size: var(--p-font);
      font-weight: 500;
      transition: var(--transition);
      background-color: var(--light-gray);
      color: var(--dark-gray);
      text-decoration: none;
    }

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

    .btn.primary {
      background-color: var(--primary-color);
      color: var(--white);
    }

    .btn.primary:hover {
      background-color: var(--primary-dark);
      box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
    }

    .btn.secondary {
      background-color: transparent;
      color: var(--primary-color);
      border: 2px solid var(--primary-color);
    }

    .btn.secondary:hover {
      background-color: var(--primary-light);
    }



/* Location Tabs */
.location-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
}

.tab-button {
  flex: 1;
  padding: 20px;
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
}

.tab-button:hover {
  border-color: var(--primary-color);
  transform: translateY(-2px);
}

.tab-button.active {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.tab-button i {
  display: block;
  font-size: var(--font-24);
  margin-bottom: 8px;
}

.tab-button span {
  display: block;
  font-size: var(--sub-header-font);
  font-weight: 600;
}

/* Selector Boxes */
.selector-box {
  background: white;
  padding: 20px;
  border-radius: var(--border-radius);
  margin-bottom: 20px;
  box-shadow: var(--box-shadow-light);
}

.selector-box label {
  display: block;
  font-weight: 600;
  margin-bottom: 15px;
  color: #333;
  font-size: var(--p-font);
}

.selector-box label i {
  margin-right: 8px;
  color: var(--primary-color);
}

/* Date Tabs */
.date-tabs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 10px;
/*   scrollbar-width: thin;
 */  scrollbar-color: transparent;
 padding-bottom: 10px !important;
  padding-top: 15px;
}

.date-tabs::-webkit-scrollbar {
  height: 6px;
}

.date-tabs::-webkit-scrollbar-track {
  background: var(--light-gray);
  border-radius: 3px;
}

.date-tabs::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 3px;
}

.date-tab {
  min-width: 80px;
  padding: 12px;
  background: #f8f9fa;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s;
  flex-shrink: 0;
}

.date-tab:hover {
  border-color: var(--primary-color);
  transform: translateY(-2px);
}

.date-tab.active {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.date-tab .day-name {
  font-size: var(--tag-font);
  text-transform: uppercase;
  opacity: 0.8;
  font-weight: 500;
}

.date-tab .day-num {
  font-size: var(--font-24);
  font-weight: bold;
  margin: 5px 0;
  line-height: 1;
}

.date-tab .month {
  font-size: var(--tag-font);
  opacity: 0.8;
}


/* Selection Summary */
.selection-summary {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
  color: white;
  padding: 20px;
  border-radius: var(--border-radius);
  margin-bottom: 20px;
  box-shadow: var(--box-shadow);
}

.summary-content {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 15px;
}

.summary-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.summary-item i {
  font-size: var(--font-20);
}

.summary-item span {
  font-size: var(--sub-header-font);
  font-weight: 500;
}

/* Buttons */
.btn-primary {
  background: var(--primary-color);
  color: white;
  border: none;
  padding: 15px 30px;
  border-radius: 8px;
  cursor: pointer;
  font-size: var(--p-font);
  font-weight: 600;
  transition: all 0.3s;
  width: 100%;
  font-family: inherit;
}

.btn-primary:hover:not(:disabled) {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

.btn-primary:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
}

.btn-large {
  padding: 18px 30px;
  font-size: var(--sub-header-font);
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 20px;
}

.modal-content {
  background: white;
  padding: 40px;
  border-radius: 16px;
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-content h2 {
  margin-top: 0;
  margin-bottom: 30px;
  text-align: center;
  color: var(--dark-gray);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #333;
  font-size: var(--sub-header-font);
}

.form-group input[type="text"],
.form-group input[type="tel"],
.form-group input[type="email"],
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: var(--p-font);
  transition: border-color 0.3s;
  font-family: inherit;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.form-group input[type="checkbox"] {
  width: auto;
  margin-right: 8px;
  cursor: pointer;
}

.form-group small {
  display: block;
  margin-top: 5px;
  color: #666;
  font-size: var(--p-font);
}

/* Admin Dashboard */
.dashboard-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.tab-btn {
  padding: 12px 24px;
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  font-size: var(--p-font);
  font-weight: 600;
  transition: all 0.3s;
  font-family: inherit;
}

.tab-btn:hover {
  border-color: var(--primary-color);
}

.tab-btn.active {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

.appointments-list {
  display: grid;
  gap: 15px;
}

.appointment-card {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: var(--border-radius);
  padding: 20px;
  transition: all 0.3s;
  box-shadow: var(--box-shadow-light);
}

.appointment-card:hover {
  box-shadow: var(--box-shadow);
  transform: translateY(-2px);
}

.apt-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e0e0e0;
}

.apt-id {
  font-weight: bold;
  color: var(--primary-color);
  font-size: var(--p-font);
}

.apt-location {
  background: #f0f0f0;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: var(--p-font);
  color: var(--dark-gray);
  font-weight: 500;
}

.apt-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.apt-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #555;
  font-size: var(--sub-header-font);
}

.apt-info i {
  color: var(--primary-color);
  width: 20px;
  font-size: var(--p-font);
}


img.mobile-only{
  display: none;
}
    img.pc-only{
        display: block;
      }

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

  .tab-button {
    padding: 16px;
  }
  
  .summary-content {
    flex-direction: column;
    gap: 12px;
  }
  
  .time-slots-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
  }
  
  .time-slot {
    padding: 12px 8px;
    font-size: var(--p-font);
  }
  
  .selector-box {
    padding: 16px;
    max-width: 85vw;
  }
  
  .date-tab {
    min-width: 70px;
    padding: 10px;
  }
  
  .date-tab .day-num {
    font-size: var(--font-20);
  }
  
  .modal-content {
    padding: 24px;
  }
  
  .apt-body {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .selector-box label {
    font-size: var(--sub-header-font);
  }

  .heroContent p{
/*     font-size:var(--p-font) ;
    text-align: left; */
  }
  
  .time-slots-grid {
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  }
  
  .btn-primary,
  .btn-large {
    font-size: var(--p-font);
    padding: 14px 20px;
  }
  
  .summary-item {
    font-size: var(--p-font);
  }
  
  .summary-item i {
    font-size: var(--font-18);
  }
}
   
    /* ========== FOOTER ========== */
    footer {
      background-color: #FFFFFF;
      padding: 60px 0 40px;
      margin-top: 0;/* 100px; */
      border-top: 1px solid rgba(0, 0, 0, 0.08);
    }

    .footerContent {
      display: grid;
      grid-template-columns: repeat(4, minmax(280px, 1fr));
      gap: clamp(0px 2vw 40px);
      margin-bottom: 40px;
    }


    @media (min-width: 1300px){
          .footerGroup.footer-quick-links{
      margin-bottom: 0;
        margin-left: 2.5rem;
    margin-top: 0.1rem;
  
    }
    }

    @media (max-width: 1300px){
      .footerContent{
              grid-template-columns: repeat(3, minmax(220px, 1fr));
      }

      .footerGroup h4 {
        margin-left: -100px;
    }
    
    .footer-quick-links{
        
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top:  clamp(30px, 6vh, 60px);;
      
    }

    .footerNav{
      margin: 5px 0 20px -15px;
    }
  }

  @media (max-width: 1210px){
        .container {
      padding-right: 16px;
      padding-left: 16px;

    }
  }


    @media (max-width: 1100px){
        .container {
      padding:  0 16px;
      

    }
  }


      @media (max-width: 855px){

      footer .container{
        padding-left: 0;
      }

      
    }

        @media (max-width: 657px){
      .footerContent{
              grid-template-columns: repeat(1, minmax(250px, 1fr));
      }
      .footer-quick-links{
          justify-self: baseline;
          margin-left: clamp(1px, 10vw, 30px);
          margin-top:  clamp(30px, 8vh, 80px);;
      }

    }
    .footerGroup.centered{
          align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin-bottom: 5px;
    }
    .footerGroup.centered p{
    font-size: var(--sub-header-font);

    }

    .footerGroup h4 {
      font-size: var(--sub-header-font);
      font-weight: 700;
      margin-bottom: 16px;
      color: var(--dark-gray);
    }


    .footerGroup.logo{
      margin:  0 auto;
    }

    .footerLogo img {
      max-height: 110px;
    }


.idc-logo.footerLogo {
      min-height: 104px;
    display: flex;  
}

    .footerNav {
      line-height: 1;
      /* list-style: none; */
    }

    .footerNav li {
      margin-bottom: 12px;
    }

    .footerNav a {
      color: var(--gray);
      font-size: var(--sub-header-font);
      transition: var(--transition);
    }

    .footerNav a:hover {
      color: var(--primary-color);
    }

    .socialLinks {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

    .socialLink {
      width: 44px;
      height: 44px;
      background: #f0f2f5;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--dark-gray);
      font-size: var(--font-20);
      transition: var(--transition);
      box-shadow: var(--box-shadow-light);
    }

    .socialLink:hover {
      color: var(--white);
      background: var(--primary-color);
      transform: translateY(-3px);
    }

    .footerBottom {
      padding-top: 30px;
      border-top: 1px solid rgba(0, 0, 0, 0.08);
      text-align: center;
      font-size: var(--p-font);
      color: var(--gray);
    }

    .footerBottom p,
    .footerBottom a{
      margin: 0;
      color: var(--gray);
    }

    /* ========== UTILITY CLASSES ========== */
    .fadeIn {
      opacity: 0;
      animation: fadeInAnim 0.8s ease forwards;
    }

    @keyframes fadeInAnim {
      to {
        opacity: 1;
      }
    }

    .muted {
      color: var(--gray);
    }

    .cta-section {
      text-align: center;
      padding: 60px 30px;
      background: var(--light-gray);
      border-radius: var(--border-radius);
      margin: 60px 0;
    }

    .cta-section h2 {
      margin-top: 0;
    }

    .cta-buttons {
      display: flex;
      gap: 16px;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 30px;
    }





    /* ========== ENHANCED EXPANDABLE SECTIONS ========== */
/* ========== PIONEERING HEALTHCARE SECTION ========== */
.pioneer-initiatives {
  display: grid;
  gap: 16px;
  margin: 24px 0;
}

.pioneer-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  align-items: start;
  padding: 20px;
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-left: 4px solid var(--primary-color);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow-light);
  transition: var(--transition);
  margin-left: 0;
  align-items: anchor-center;
  
}

.pioneer-item:hover {
  box-shadow: var(--box-shadow);
}

.pioneer-item i {
  width: 48px;
  height: 48px;
  background: var(--primary-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  font-size: var(--font-20);
  flex-shrink: 0;
}

.pioneer-item p {
  margin: 0 0 8px;
  font-size: var(--p-font);
  font-weight: 600;
  color: var(--dark-gray);
}

.impact-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin: 32px 0;
}

.stat-card {
  text-align: center;
  padding: 24px;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  border-radius: var(--border-radius);
  color: var(--white);
  box-shadow: var(--box-shadow);
  transition: var(--transition);
}

.stat-card:hover {
  transform: translateY(-5px) scale(1.05);
}

.stat-number {
  font-size: var(--font-32);
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1;
}

.stat-label {
  font-size: var(--tag-font);
  font-weight: 500;
  opacity: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.closing-note {
  margin-top: 24px;
  padding: 16px 20px;
  background: var(--light-gray);
  border-left: 4px solid var(--primary-color);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  font-style: italic;
  font-size: var(--p-font);
  color: var(--dark-gray);
}

/* ========== PREVENTIVE MEDICINE SECTION ========== */
.intro-text {
  font-size: var(--p-font);
  line-height: 1.8;
  margin-bottom: 24px;
  padding: 20px;
  font-weight: 500;
}

.preventive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin: 24px 0;
}

.preventive-card {
  padding: 24px;
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow-light);
  transition: var(--transition);
  text-align: center;
}

.preventive-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--box-shadow);
  border-color: var(--primary-color);
}

.preventive-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--font-28);
  margin: 0 auto 16px;
  transition: var(--transition);
}


.preventive-card p {
  margin: 0 0 12px;
  font-size: var(--sub-header-font);
  font-weight: 600;
  color: var(--dark-gray);
}

.prevention-quote {
  margin-top: 32px;
  padding: 32px;
  background: linear-gradient(135deg, var(--primary-light), #f0f7ff);
  border-radius: var(--border-radius);
  position: relative;
  box-shadow: var(--box-shadow-light);
}

.prevention-quote i {
  font-size: var(--font-32);
  color: var(--primary-color);
  opacity: 0.3;
  position: absolute;
  top: 24px;
  left: 24px;
}

.prevention-quote p {
  margin: 0 0 16px;
  font-size: var(--p-font);
  font-style: italic;
  line-height: 1.8;
  color: var(--dark-gray);
  padding-left: 40px;
}

.quote-author {
  display: block;
  font-size: var(--sub-header-font);
  font-weight: 600;
  color: var(--primary-color);
  text-align: right;
  font-style: normal;
}

/* ========== MEDIA & CONFERENCES SECTIONS ========== */
.media-content {
  margin-top: 24px;
}

.media-intro {
  font-size: var(--p-font);
  color: var(--dark-gray);
  margin-bottom: 24px;
  line-height: 1.7;
}

.media-categories {
  display: grid;
  gap: 16px;
  margin-bottom: 32px;
}

.media-category {
  background: var(--light-gray);
  padding: 12px 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: var(--transition);
}

.media-category:hover {
  background: #e8e8ec;
  transform: translateX(4px);
}

.media-category i {
  color: var(--primary-color);
  font-size: var(--font-18);
  width: 24px;
  text-align: center;
}

.media-category span {
  font-size: var(--sub-header-font);
  font-weight: 500;
  color: var(--dark-gray);
}

.section-label {
  font-size: var(--tag-font);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--primary-color);
  margin: 32px 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-label i {
  font-size: var(--p-font);
}

.media-links {
  display: grid;
  gap: 12px;
}

.media-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--border-radius);
  transition: var(--transition);
  color: var(--dark-gray);
  text-decoration: none;
}

.media-link:hover {
  border-color: var(--primary-color);
  background: var(--primary-light);
  transform: translateX(8px);
  box-shadow: var(--box-shadow-light);
}

.media-link i {
  color: #FF0000;
  font-size: var(--font-24);
  flex-shrink: 0;
}

.media-link span {
  font-size: var(--p-font);
  font-weight: 500;
  flex: 1;
}

.media-link .arrow {
  color: var(--primary-color);
  font-size: var(--p-font);
  opacity: 0;
  transition: var(--transition);
}

.media-link:hover .arrow {
  opacity: 1;
}

.conference-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.conference-item {
  padding: 20px;
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--border-radius);
  text-align: center;
  transition: var(--transition);
}

.conference-item:hover {
  border-color: var(--primary-color);
  transform: translateY(-4px);
  box-shadow: var(--box-shadow);
}

.conference-item i {
  font-size: var(--font-32);
  color: var(--primary-color);
  margin-bottom: 12px;
  display: block;
}

.conference-item h4 {
  margin: 0;
  font-size: var(--p-font);
  font-weight: 600;
  color: var(--dark-gray);
}

.conference-item p {
  margin: 4px 0 0;
  font-size: var(--tag-font);
  color: var(--gray);
}

.hideOnPC{
  display: none;
}

.hideOnMob{
  display: block;
}

/* Responsive adjustments for new sections */
@media (max-width: 768px) {
  .conference-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
  }

  .conference-item {
    padding: 16px;
  }

  .conference-item i {
    font-size: var(--font-28);
  }

  .conference-item h4 {
    font-size: var(--p-font);
  }

  .media-link {
    padding: 14px 16px;
  }
   .heroContent .subtitle,
    .heroContent .secondSubtitle{
  font-size: var(--tag-font); 
  }
}


    /* ========== RESPONSIVE DESIGN ========== */
    @media (max-width: 1024px) {
      .heroSection {
        grid-template-columns: 1fr 350px;
        gap: 30px;
        padding: 16px 0 16px 16px;
        margin-bottom: 40px;
      }

      
      
      .heroImage {
            align-self: flex-start;
            margin-left: 20px;
      }

      .dualIntroSection {
        grid-template-columns: 1fr;
      }

      .navMenu {
        gap: 24px;
        margin: 40px 0;
      }

      .bookingForm {
        padding: 30px;
      }

      .contactGrid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 768px) {
      body {
        font-size: var(--p-font);
      }

      .footerGroup.centered{
        align-items: center;
      }



      .footerLogo img{
        padding: 16px 16px 0;
        max-height: 110px;

      }

      .footerGroup p{
          /* padding-left: 16px;
          display: none; */
      }

      img.pc-only{
        display: none;
      }
      img.mobile-only{
        display: block;
      }

      .container {
        padding: 0 16px;
      }

      header {
        position: sticky;
        top: 0;
      }

      .headerContainer {
        flex-direction: row;
      
      }


    .headerTitle.mobile{
     text-align: center;
      /* display: block; */
    }
    .hideOnPC{
      display: block;
    }
    .hideOnMob{
      display: none;
    }
      

      .logo {
        flex: 1;
        min-width: 0;
      }

      .logo h1 {
        font-size: var(--font-20);
      }


      .banner {
        margin-bottom: 40px;
      }

      .heroSection {
        
        margin-bottom: 40px;
      }


      .idc-logo.footerLogo {
      min-height: 110px;
}



      .heroContent h1 {
        font-size: var(--font-32);
      }

      h1 {
        font-size: var(--font-32);
        margin: 32px 0 16px;
      }

      h2 {
        font-size: var(--font-24);
        margin: 24px 0 12px;
      }

      .dualIntroSection {
        gap: 20px;
      }

      .introBox {
        padding: 24px;
      }

      .bookingSteps {
        gap: 8px;
      }

      .bookingStep {
        min-width: 80px;
        padding: 12px 8px;
        font-size: var(--tag-font);
      }

      .registrationGrid {
        grid-template-columns: 1fr;
      }

      .registrationItem {
        grid-template-columns: 100px 1fr;
        gap: 16px;
      }

      .testimonialGrid {
        grid-template-columns: 1fr;
      }

      .formButtons {
        flex-direction: column;
      }

      .formButtons .btn {
        width: 100%;
      }

      .contactTabs {
        gap: 12px;
      }

      .contactTab {
        font-size: var(--p-font);
        padding: 12px 0;
      }

      .cta-section {
        padding: 40px 20px;
        margin: 40px 0;
      }

      .cta-buttons {
        flex-direction: column;
      }

      .cta-buttons .btn {
        width: 100%;
      }

      footer {
        padding: 40px 0 30px;
      }



    }

    @media (max-width: 480px) {
      .container {
        padding: 0 12px;
      }


   

      h1 {
        font-size: var(--font-28);
      }

      h2 {
        font-size: var(--font-22);
      }

      h3 {
        font-size: var(--section-header-font);
      }


      .heroContent h1 {
        font-size: var(--font-28);
      }

      .introBox {
        padding: 20px;
      }

      .expandableHeader h3 {
        font-size: var(--section-header-font);
      }

      .registrationItem {
        grid-template-columns: 80px 1fr;
        gap: 12px;
        padding: 16px;
      }

      .roleItem {
        padding: 16px;
      }

      .interestCard {
        padding: 20px;
      }

      .testimonialCard {
        padding: 20px;
      }

      .bookingForm {
        padding: 20px;
      }

      .contactCard {
        padding: 20px;
      }

      .mapContainer iframe {
        height: 250px;
      }

      p {
        font-size: var(--p-font);
      }

      ul, ol {
        margin-left: 20px;
        font-size: var(--p-font);
      }
    }
 




    @media (max-width: 768px) {
  .impact-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .stat-number {
    font-size: var(--font-28);
  }

  .stat-label {
    font-size: var(--tag-font);
  }

  .preventive-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .pioneer-item {
    grid-template-columns: 40px 1fr;
    gap: 12px;
    padding: 16px;
  }

  .pioneer-item i {
    width: 40px;
    height: 40px;
    font-size: var(--font-18);
  }

  .prevention-quote {
    padding: 24px 20px;
  }

  .prevention-quote p {
    font-size: var(--sub-header-font);
    padding-left: 0;
  }
}

@media (max-width: 480px) {
  .impact-stats {
    grid-template-columns: 1fr;
  }

  .stat-card {
    padding: 20px;
  }

  .preventive-icon {
    width: 56px;
    height: 56px;
    font-size: var(--font-24);
  }

  .preventive-card {
    padding: 20px;
  }
}













.clinic-selector {
    position: relative;

  }

.clinic-dropdown {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-5px);
  background: var(--white, #FFFFFF);
  border-radius: var(--border-radius, 12px);
  box-shadow: var(--box-shadow, 0 8px 30px rgba(0, 0, 0, 0.12));
  min-width: 260px;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition, all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94));
  z-index: 90;
  margin-bottom: 8px;
}

.clinic-selector:hover .clinic-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.location-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  
  border-bottom: 1px solid var(--light-gray, #F5F5F7);
  transition: var(--transition, all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94));
}

.location-item:last-child {
  border-bottom: none;
}

.location-item:hover {
  background: var(--light-gray, #F5F5F7);
  
}

.location-name {
  font-weight: 600;
  font-size: var(--sub-header-font);
  color: var(--dark-gray, #333333);
}

.action-icons {
  display: flex;
  gap: 8px;
}

.icon-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--primary-color, #0066CC);
  color: var(--white, #FFFFFF);
  transition: var(--transition, all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94));
  text-decoration: none;
}

.icon-btn svg {
  width: 18px;
  height: 18px;
}

.icon-btn:hover {
  background: var(--primary-dark, #0055b3);
  transform: translateY(-2px);
  box-shadow: var(--box-shadow-light, 0 2px 10px rgba(0, 0, 0, 0.05));
  color: #FFFFFF;
}

@media (max-width: 768px) {
  .clinic-dropdown {
    min-width: 240px;
  }
  
  .location-name {
    font-size: var(--p-font);
  }
  
  .icon-btn {
    width: 32px;
    height: 32px;
  }
}








input, textarea, button {
  display: block;
  margin: 10px 0;
  padding: 8px;
};












#siteHeader {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  transition: 
    box-shadow 0.5s ease,
    background-color 0.5s ease,
    border-color 0.5s ease;
  will-change: transform;
}

#siteHeader.headerScrolled {
  
  
}

/* ---- Full header text (visible on load) ---- */
.headerTextFull {
  overflow: hidden;
  max-height: 300px;
  opacity: 1;
  transform: translateY(0);
  transition:
    max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    opacity    0.4s  cubic-bezier(0.4, 0, 0.2, 1),
    transform  0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: max-height, opacity, transform;
}

#siteHeader.headerScrolled .headerTextFull {
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

/* ---- Minimal header text (visible on scroll) ---- */
.headerTextMinimal {
  position: absolute;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity   0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s,
    transform 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
  pointer-events: none;
  will-change: opacity, transform;
}

#siteHeader.headerScrolled .headerTextMinimal {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  position: relative;
}

/* ---- Logo wrapper needs relative positioning ---- */
.logo {
  position: relative;
}

/* ---- Minimal text styles ---- */
.nameSmall {
font-family: var(--carlito) ;
  font-size: var(--p-font);
  font-weight: 600;
  margin: 0 0 2px;
  line-height: 1.2;
  color: var(--dark-gray);
  letter-spacing: 0.2px;
}

.headerSublineSmall {
  font-size: var(--tag-font);
  margin: 0;
  line-height: 1.4;
  color: var(--gray);
  font-weight: 400;
  letter-spacing: 0.1px;
}

/* ---- Full header sublines ---- */
.headerSubline {
  font-size: var(--p-font);
  margin: 3px 0 0;
  line-height: 1.4;
  transition: opacity 0.3s ease;
}


      .footer-work-loc{
        margin-top: -28px;
        text-align: center;
      }


/* ========== PC HEADER (min-width 769px) ========== */
@media (min-width: 769px) {

  .headerContainer {
    padding: 22px 0;
    align-items: center;
    transition: padding 0.5s cubic-bezier(0.4, 0, 0.2, 1);


  }

  .headerExpanded{
    background-color: #0c234017;
  }

  .container.headerBg{
    background-color: transparent;
  }
  
  #siteHeader.headerScrolled .headerContainer {
    padding: 10px 0;
  }

  .name {
    font-size: var(--font-28) !important;
    letter-spacing: 0.3px;
    transition: font-size 0.4s ease;
    
  }

  #siteHeader.headerScrolled .name {
    font-size: var(--font-20) !important;
  }

  .headerTextFull .headerSubline {
    display: block;
  }

  /* PC: stagger the sublines fading out */
  #siteHeader.headerScrolled .headerTextFull .headerSubline:nth-child(2) {
    transition-delay: 0s;
  }
  #siteHeader.headerScrolled .headerTextFull .headerSubline:nth-child(3) {
    transition-delay: 0.04s;
  }
  #siteHeader.headerScrolled .headerTextFull .headerSubline:nth-child(4) {
    transition-delay: 0.08s;
  }

  /* Right side title block — PC only */
  .headerTitle {
    display: flex;
    flex-direction: column;
    text-align: right;
    line-height: 1.4;
    padding-top: 4px;
    transition:
      opacity   0.4s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 80px;
    overflow: hidden;
    opacity: 1;
    transform: translateY(0);
  }

  #siteHeader.headerScrolled .headerTitle {
    opacity: 0;
    transform: translateY(-6px);
    max-height: 0;
    pointer-events: none;
  }
}


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

  #siteHeader.headerExpanded .headerContainer {
    padding: 28px 0 24px;
    min-height: 38vh;
    align-items: flex-start;
    flex-direction: column;
    transition: 
      padding    0.55s cubic-bezier(0.4, 0, 0.2, 1),
      min-height 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  }

  #siteHeader.headerScrolled .headerContainer {
    min-height: unset;
    padding: 10px 0;
    flex-direction: row;
    align-items: center;
    transition:
      padding    0.5s cubic-bezier(0.4, 0, 0.2, 1),
      min-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  #siteHeader.headerExpanded .logo {
    width: 100%;
  }

  #siteHeader.headerExpanded .name {
    font-size: var(--font-26) !important;
    line-height: 1.25;
    margin-bottom: 8px;
    transition: font-size 0.4s ease;
  }

  #siteHeader.headerScrolled .name {
    font-size: var(--dr-name-font) !important;
  }

  #siteHeader.headerExpanded .headerSubline {
    
    display: block;
  }

  .heroSection{
    grid-template-columns: 1fr;
    padding: 24px;
    margin-bottom: 40px;
}

      .heroImage {
            max-width: 300px;
            margin: 0;
            margin-left: 40px;
            align-self: flex-start;
            justify-self: center;
                margin-left: 0;

      }

}

@media (max-width: 480px) {
  #siteHeader.headerExpanded .name {
    font-size: var(--font-22) !important;
  }


 .grayed-out{
  color: var(--gray) !important;
  font-size: var(--tag-font);
  
 }

       .footerContent{
              grid-template-columns: repeat(1, minmax(220px, 1fr));
      }
 .special-interest{
  font-weight: 400;
  text-align: justify;
 }

  .headerTextFull{
    padding: 0 2rem;
    text-align: left;
    
  }


      .expandableContent p {
      font-size: var(--p-font);
    }


    .list{
      font-size: var(--p-font);
    }


    .media-link span {
      font-size: var(--p-font);
    }

        .footerGroup h4 {
      font-size: var(--sub-header-font);
        }

  


    .footerGroup.centered p{
      font-size: var(--sub-header-font);

      }


.footerLogo img[alt="Shamshad Aslam Hospital"]{
  width: 300px; 
  padding: 0;

}

 

}







.footerLogo img{
  width:  210px;
}







    .si-card-icon img[src="img/svg/heart.svg"] {
  padding: 8px;
}


    .si-card-icon img[src="img/svg/lungs.svg"] {
  padding: 5px;
}


    .si-card-icon img[src="img/svg/kidneys.svg"] {
  padding: 2px;
}



[alt="Islamabad Diagnostic Centre"] {

  width: 230px; 

}


[alt="Islamabad Diagnostic Centre"] {

  width: 230px; 

}

[alt="Uppals Clinic"]{

  width: 170px; 

}