.elementor-525 .elementor-element.elementor-element-714ae43{--display:flex;--min-height:0vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-525 .elementor-element.elementor-element-48b1edc{--display:flex;}.elementor-525 .elementor-element.elementor-element-ffc34bb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-525 .elementor-element.elementor-element-1d54e0d6{--display:flex;--margin-top:-100px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--z-index:0;}.elementor-525 .elementor-element.elementor-element-1d54e0d6.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-525 .elementor-element.elementor-element-82edb59{z-index:1000;}.elementor-525 .elementor-element.elementor-element-b7d8f8e > .elementor-widget-container{margin:-150px 0px 0px 0px;}.elementor-525 .elementor-element.elementor-element-9f4d67b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-200px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-525 .elementor-element.elementor-element-ffe1093{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-150px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-525 .elementor-element.elementor-element-06c1779{--display:flex;--margin-top:-150px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-525 .elementor-element.elementor-element-e2e10cc{--display:flex;--margin-top:-150px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-525 .elementor-element.elementor-element-d66cf1e{--display:flex;--margin-top:-150px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-525 .elementor-element.elementor-element-9d08a4c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-150px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-525 .elementor-element.elementor-element-1e8470c{--display:flex;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-525 .elementor-element.elementor-element-1d54e0d6{--width:100vw;}}/* Start custom CSS for html, class: .elementor-element-b7d8f8e */@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

@layer reset, base, utilities, components, layout, overrides;

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@layer base {
  html {
    --surface-1: transparent; 
    --accent: #1a73e8;
    
    /* Light Theme Text Colors */
    --text-main: #1a1a1a; 
    --text-sub: #5f6368;  
    
    /* Font setup */
    --font-family: 'Poppins', sans-serif;
    --display: 700 4rem/1.1 var(--font-family);
    --body: 400 1rem/1.6 var(--font-family);
  }
}

@layer layout {
  .section {
    display: grid;
    place-items: center;
    min-block-size: 100vh;
    background: transparent !important;
    overflow: hidden;
    padding: 100px 20px;
    font-family: var(--font-family);
  }

  .section-wrapper {
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 1200px;
    position: relative;
    background: transparent !important;
  }

  /* --- STACKED CENTER HEADER --- */
  .header {
    grid-area: 1/1; /* This centers the text inside the orbit */
    display: grid;
    place-items: center;
    text-align: center;
    gap: 15px;
    z-index: 10;
    pointer-events: none;
  }

  .header > * { pointer-events: auto; }

  .headline { 
    font: var(--display); 
    color: var(--text-main);
    letter-spacing: -0.01em;
  }

  .tagline { 
    font-size: 1.15rem; 
    color: var(--text-sub); 
    font-weight: 400;
  }
  
  .Meeting {
    background: var(--accent);
    color: white;
    padding: 14px 36px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    margin-top: 15px;
  }

  .Meeting:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 8px 20px rgba(26, 115, 232, 0.3);
  }

  /* --- ORBITAL CARDS --- */
  .cards {
    grid-area: 1/1; /* Stacks the icons in the same spot as the header */
    list-style: none;
    padding: 0;
    display: grid;
    place-items: center;
    width: 100%;
    min-block-size: 800px;
    container-type: inline-size;
    background: transparent !important;
  }

  @media (min-width: 1024px) {
    .card {
      grid-area: 1/1;
      --radius: 36cqi; 
      --offset-per-child: calc(360deg / (var(--nth-siblings) + 1));
      --angle-offset: calc(var(--nth-child) * var(--offset-per-child));
      
      /* Trigonometric positioning */
      translate: calc(cos(var(--angle) + var(--angle-offset)) * var(--radius))
                 calc(sin(var(--angle) + var(--angle-offset)) * var(--radius) * 0.55);
      
      animation: rotate-orbit 60s linear infinite;
    }
    .cards:has(.avatar-link-wrapper:hover) .card {
      animation-play-state: paused;
    }
  }

  @keyframes rotate-orbit {
    to { --angle: 360deg; }
  }

  /* --- ICON STYLING --- */
  .visual {
    inline-size: 105px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid rgba(0, 0, 0, 0.08); 
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
  }

  .avatar-link-wrapper:hover .visual {
    border-color: var(--accent);
    background: rgba(26, 115, 232, 0.05);
    transform: scale(1.1);
  }

  .avatar-img {
    width: 60%;
    height: 60%;
    object-fit: contain;
    background: transparent !important;
  }

  /* --- GLASSMORPHISM TOOLTIPS --- */
  .tooltiptext {
    position: absolute;
    top: 50%;
    left: 125%;
    transform: translateY(-50%);
    width: 280px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.85); /* Greyish-white translucent */
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.2, 0, 0.2, 1);
    z-index: 100;
    pointer-events: none;
    text-align: left;
  }

  .avatar-link-wrapper:hover .tooltiptext {
    opacity: 1;
    visibility: visible;
    left: 115%;
  }

  .team-name { 
    color: #1a1a1a !important; 
    font-size: 1.15rem; 
    font-weight: 700; 
    margin-bottom: 8px; 
    line-height: 1.2;
    display: block;
  }

  .team-bio { 
    color: #334155 !important; 
    font-size: 0.9rem; 
    line-height: 1.6; 
    font-weight: 500;
    display: block;
  }

  @media (max-width: 1023px) {
    .headline { font-size: 2.5rem; }
    .cards { 
      display: flex; 
      flex-wrap: wrap; 
      justify-content: center; 
      gap: 30px; 
      min-block-size: auto;
      margin-top: 40px;
    }
    .tooltiptext { display: none; }
  }
}/* End custom CSS */