*{
         margin: 0;
         padding: 0;
         box-sizing:border-box
         }
         body {
         font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
         background-color: #000;
         color: #fff;
         min-height: 100vh;
         display:flex;
         flex-direction: column;
         }
         nav {
         display: flex;
         justify-content: center;
         align-items: center;
         padding: 2rem 4rem;
         position: relative;
         }

         @media (max-width: 768px) {
  .greeting {
    font-size: 2rem;
  }

  .info-item {
    font-size: 1rem;
  }
}


         .theme-toggle {
         position: absolute;
         left: 4rem;
         width: 40px;
         height: 40px;
         border: 2px solid #fff;
         border-radius: 50%;
         display: flex;
         justify-content: center;
         align-items: center;
         cursor: progress;
         transition: all 0.3s ease;
         }
         .theme-toggle:hover {
         transform: rotate(180deg);
         background-color: rgba(255, 255, 255, 0.1);
         }
         .sun-icon {
         width: 24px;
         height: 24px;
         }
         .sun-icon circle {
         fill: #fff;
         } 
         .sun-icon line {
         stroke: #fff;
         stroke-width: 2;
         stroke-linecap: round;
         }
         .nav-links {
         display: flex;
         gap: 2rem;
         list-style: none;
         }
         .nav-links a {
         color: #fff;
         text-decoration: none;
         font-size: 1.5rem;
         transition: opacity 0.3s ease;
         }
         .nav-links a:hover {
         opacity:0.7;
         }
         main {
         flex: 1;
         display: flex;
         align-items: center;
         justify-content: center;
         padding-top: 40px;
         }
         .container {
         display: flex;
         align-items: center;
         gap: 4rem;
         max-width: 1200px;
         }
         .profile-section {
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 2rem;
         }
         .profile-image {
         width: 220px;
         height: 220px;
         border-radius: 50%;
         overflow: hidden;
         border: 4px solid #333;
         }
         /* Profile image border */
.profile-image {
    border: 3px solid #ffffff;
    border-radius: 50%;
    overflow: hidden;
}
         .profile-image img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         }
         /* Default (Dark mode) - white icons */
.social-links {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.social-links a {
    display: flex;
    align-items: center;
    transition: opacity 0.3s ease;
}

.social-links a:hover {
    opacity: 0.7;
}

.social-links svg {
    width: 1.8em;
    height: 1.8em;
    fill: #ffffff !important;
}

.social-links svg * {
    fill: #ffffff !important;
    stroke: none !important;
}

/* X (Twitter) icon needs stroke for the path */
.social-links svg path {
    fill: #ffffff !important;
}
         .cv-link {
         color: #fff;
         text-decoration: none;
         font-size: 1.1rem;
         margin-top: -0.95rem;
         transition: opacity 0.3s ease;
         }



         .cv-link:hover {
         opacity: 0.7;
         }
         .intro-section {
         max-width: 600px;
         }
         .greeting {
         font-size: 2.5rem;
         margin-bottom: 1rem;
         }
         .wave {
         display: inline-block;
         animation: wave 2s infinite;
         }
         @keyframes wave {
         0%, 100% {transform: rotate(0deg);}
         25% {transform: rotate(20deg);}
         75% {transform: rotate(-20deg);}
         }
         .pronounciation {
         font-size: 1.5rem;
         }
         .info-item{
         display: flex;
         align-items: center;
         gap: 1rem;
         font-size: 1.3rem;
         margin-bottom: 1rem;
         }
         .icon{
         font-size: 1.5rem;
         }
         
         .chatbot-button {
        position: fixed;
        bottom: 30px;
        background-color: #5a7a6f;
        color: #fff;
        padding: 1rem 2.5rem;
        border-radius: 50px;
        font-size: 0.8rem;
        cursor: pointer;
        margin-top: 4rem;
        transition: all 0.3s ease;
        outline: none;
        border: none;
        z-index: 1000;
        left: 616px;
      }

.chatbot-button:focus {
    outline: none;
}

.chatbot-button:hover {
    background-color: #6a8a7f;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(90, 112, 111, 0.4);
}

         /* Update theme-toggle for mobile */
@media (max-width: 968px) {
  .theme-toggle {
    left: 1.5rem;
    width: 35px;
    height: 35px;
  }
  
  .container {
    flex-direction: column;
    text-align: center;
    gap: 2rem;
    padding: 0 1rem;
  }
  
  nav {
    padding: 1.5rem 2rem;
    flex-wrap: wrap;
    margin-right: -1.0rem;
    margin-left: -0.05rem;
  }
  
  .nav-links a {
    font-size: 1.2rem;
  }
  
  .greeting {
    font-size: 2rem;
  }
  
  .profile-image {
    width: 180px;
    height: 180px;
  }
  
  .social-links {
    gap: 1.2rem;
  }
  
  .social-links svg {
    width: 1.5em;
    height: 1.5em;
  }
  
  .info-item {
    font-size: 1.1rem;
  }
  
  .chatbot-button {
    padding: 0.8rem 2rem;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);

  }
  
  .visitor-map-section {
    padding: 0 1rem;
    margin: 3rem auto 2rem;
  }
}

@media (max-width: 768px) {
  .theme-toggle {
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
  }

  .theme-toggle svg {
    width: 18px;
    height: 18px;
  }
}


/* Mobile responsive */
@media (max-width: 768px) {
    #voiceflow-chat iframe {
        width: calc(100vw - 40px) !important;
        right: 20px !important;
        height: 70vh !important;
        bottom: 90px !important;
    }
    
    .chatbot-button {
        padding: 0.8rem 2rem;
        left: 48.8%;
        transform: translateX(-52%);
        right: auto;
        bottom: 55px;
    }
}

@media (max-width: 640px) {
  .theme-toggle {
    left: 1rem;
    width: 32px;
    height: 32px;
  }
  
  .sun-icon, .moon-icon {
    width: 20px;
    height: 20px;
  }
  
  nav {
    padding: 1rem;
    margin-left: -0.1rem;
  }
  
  .nav-links {
    gap: 0.4rem;
  }
  
  .nav-links a {
    font-size: 1rem;
  }
  
  .greeting {
    font-size: 1.8rem;
  }
  
  .pronounciation {
    font-size: 1.2rem;
  }
  
  .profile-image {
    width: 150px;
    height: 150px;
  }
  
  .info-item {
    font-size: 1rem;
    gap: 0.7rem;
  }
  
  .icon {
    font-size: 1.2rem;
  }
  
  .social-links {
    gap: 1rem;
  }
  
  .social-links svg {
    width: 1.3em;
    height: 1.3em;
  }
  
  .cv-link {
    font-size: 1rem;
  }
  
  .chatbot-button {
    padding: 0.7rem 1.5rem;
  }
  
  .visitor-title {
    font-size: 1.4rem;
  }
  
  #visitor-map {
    height: 250px;
  }
}


@media (max-width: 380px) {
  .nav-links a {
    font-size: 0.9rem;
  }
  
  .greeting {
    font-size: 1.5rem;
  }
  
  .profile-image {
    width: 130px;
    height: 130px;
  }
  
  .theme-toggle {
    width: 30px;
    height: 30px;
  }
}
         /* Light mode styles */
         body.light-mode {
         background-color: #fff;
         color: #000;
         }
         body.light-mode nav,
         body.light-mode .theme-toggle,
         body.light-mode .nav-links a {
         color: #000;
         }
         body.light-mode .theme-toggle {
         border-color: #000;
         }
         body.light-mode .sun-icon circle,
         body.light-mode .sun-icon line {
         fill: #000;
         stroke: #000;
         }
         body.light-mode .timeline-line {
         background-color: #ddd;
         }
         body.light-mode .timeline-dot {
         background-color: #000;
         }
         body.light-mode .chatbot-button {
         background-color: #5a7a6f;
         color: #fff;
         }
         body.light-mode .chatbot-button:hover {
         background-color: #6a8a7f;
         }
         body.light-mode .scroll-top {
         border-color: #000;
         color: #000;
         }
         /* Hide sun in light mode, show moon */
         body.light-mode .sun-icon {
         display: none;
         }
         .moon-icon {
         display: none;
         width: 24px;
         height: 24px;
         }
         body.light-mode .moon-icon {
         display: block;
         }

         /* Light mode - black icons */
body.light-mode .social-links svg {
    fill: #000000 !important;
}

body.light-mode .social-links svg * {
    fill: #000000 !important;
}

body.light-mode .social-links svg path {
    fill: #000000 !important;
}

body.light-mode .cv-link {
    color: #000000;
}

body.light-mode .profile-image {
    border-color: #000000;
}

/* ============================
   VISITOR MAP SECTION
============================ */

.visitor-map-section {
  width: 100%;
  max-width: 1100px;
  margin: 5rem auto 3rem;
  padding: 0 1.5rem;
  text-align: center;
}

.visitor-title {
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

#visitor-map {
  width: 100%;
  height: 420px;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.15);
}

/* Visitor count text */
.visitor-count {
  margin-top: 0.8rem;
  font-size: 0.9rem;
  opacity: 0.7;
}

/* Light mode */
body.light-mode #visitor-map {
  border-color: rgba(0, 0, 0, 0.2);
}


/* Mobile */
@media (max-width: 640px) {
  #visitor-map {
    height: 300px;
  }

  .visitor-title {
    font-size: 1.6rem;
  }
}

.vfrc-launcher,
.vfrc-launcher-button,
.vfrc-launcher-container {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}