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

body {
  font-family: 'Lexend', sans-serif;
  background-color: #ffffff;
  color: #000000;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

header {
  position: sticky;
  top: 0;
  z-index: 10;
  width: 100%;
  margin-bottom: 50px;
}

nav {
  height: 50px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  padding-right: 15vw;
  z-index: 10;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
  gap: 15px;
}

nav ul li a {
  color: #505050;
  text-decoration: none;
  font-size: 16px;
  font-weight: normal;
  position: relative;
}

nav ul li a:hover {
  color: #000000;
}

nav ul li a:hover::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 2px;
  background: 
      linear-gradient(90deg, #00BFFF, #1E90FF, #4169E1, #1E90FF, #00BFFF),
      linear-gradient(180deg, #00BFFF, #1E90FF, #4169E1, #1E90FF, #00BFFF),
      linear-gradient(45deg, #00BFFF, #1E90FF, #4169E1, #1E90FF, #00BFFF),
      linear-gradient(135deg, #00BFFF, #1E90FF, #4169E1, #1E90FF, #00BFFF);
  background-size: 200% 200%;
  background-position: 50% 50%;
  animation: gradientFlow 3s linear infinite;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #ffffff;
  min-height: calc(100vh - 100px);
  padding: 0;
}

.container {
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  padding-top: 25px;
  padding-bottom: 25px;
  overflow: visible !important;
  position: relative;
}

.centered-box {
  width: 70vw;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  font-weight: normal;
  position: relative;
  min-height: 0;
}

#logo-container {
  display: flex;
  align-items: center;
  margin-right: auto;
  margin-left: 15vw;
}

#logo-text {
  font-size: 24px;
  font-weight: bold;
  color: #505050;
  transition: color 0.2s ease;
}

#logo-link {
  text-decoration: none;
}

#logo-link:hover #logo-text {
  background: 
      linear-gradient(90deg, #00BFFF, #1E90FF, #4169E1, #1E90FF, #00BFFF),
      linear-gradient(180deg, #00BFFF, #1E90FF, #4169E1, #1E90FF, #00BFFF),
      linear-gradient(45deg, #00BFFF, #1E90FF, #4169E1, #1E90FF, #00BFFF),
      linear-gradient(135deg, #00BFFF, #1E90FF, #4169E1, #1E90FF, #00BFFF);
  background-size: 200% 200%;
  background-position: 50% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientFlow 3s linear infinite;
}

#footer {
  background-color: #f4f4f4;
  height: 50px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
  font-size: 14px;
  color: #505050;
  padding-right: 15vw;
  padding-left: 15vw;
  position: relative;
  margin-top: auto;
}

.footer-left {
  text-align: left;
  flex: 1;
}

.footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-right span {
  margin-right: 8px;
  display: flex;
  align-items: center;
}

.social-icons {
  display: flex;
  align-items: center;
  gap: 15px;
}

.social-icons img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

@keyframes gradientFlow {
  0% {
      background-position: 0% 50%;
  }
  25% {
      background-position: 100% 0%;
  }
  50% {
      background-position: 100% 100%;
  }
  75% {
      background-position: 0% 100%;
  }
  100% {
      background-position: 0% 50%;
  }
}

.section-header {
  color: #000000;
}

.section-subtext {
  color: #69696d;
  white-space: nowrap;
}

.spacer {
  height: 25px;
  width: 100%;
}

.box1, .box2, .box3, .box4 {
  width: 70vw;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  font-size: 36px;
  font-weight: normal;
  position: relative;
  min-height: 0;
  overflow: visible;
  z-index: 1;
}

.content-wrapper {
  opacity: 0;
  max-height: 0;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: visible !important;
  width: 100%;
  position: relative;
}

.content-wrapper.animate {
  opacity: 1;
  max-height: 1000px;
}

.photo-gallery {
  position: relative;
  display: flex;
  gap: 20px;
  overflow-x: scroll;
  overflow-y: visible;
  white-space: nowrap;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  user-select: none;
  z-index: 2;
  width: 100vw;
  margin-left: -15vw;
  padding: 25px 15vw 25px 15vw; /* Added top/bottom padding to accommodate shadow */
}

.plus-circle {
  position: absolute;
  bottom: 15px;
  right: 15px;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(4px);  /* Adds a subtle blur effect */
  -webkit-backdrop-filter: blur(4px);  /* For Safari support */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.plus-circle::before,
.plus-circle::after {
  content: '';
  position: absolute;
  background-color: rgba(255, 255, 255, 0.9);  /* White plus sign */
  border-radius: 1px;
}

.plus-circle::before {
  width: 16px;  /* Doubled from previous size */
  height: 2px;
}

.plus-circle::after {
  width: 2px;
  height: 16px;  /* Doubled from previous size */
}

.plus-circle:hover {
  background-color: rgba(255, 255, 255, 0.3);  /* Slightly more opaque on hover */
  transform: scale(1.1);
}

.photo-gallery::-webkit-scrollbar {
  display: none;
}

.photo-gallery.active {
  cursor: grabbing;
}

.photo-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

.photo-card img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  display: block;
}

.photo-card .overlay-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 2;
  pointer-events: none;
}

.glass-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 33%;
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 30px;
  text-align: left;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.glass-text {
  font-size: 24px;
  color: #ffffff;
  font-weight: semi-bold;
  line-height: 1.5;
}

.photo-card {
  flex: 0 0 300px;
  height: 400px;
  border-radius: 30px;
  overflow: visible;  /* Changed from hidden to allow 3D effect */
  user-select: none;
  position: relative;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, box-shadow;
  transform-style: preserve-3d;
  perspective: 1000px;
  cursor: pointer;
  margin: 0;
}

/* Card sides common styles */
.photo-card-front,
.photo-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 30px;
  overflow: hidden;
}

/* Front side specific styles */
.photo-card-front {
  transform: rotateY(0deg);
}

.photo-card-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  display: block;
}

.photo-card-front .overlay-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 2;
  pointer-events: none;
}

.photo-card.flipped {
  transform: rotateY(180deg);
}

/* Hover effects */
.photo-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

.photo-card.flipped:hover {
  transform: translateY(-8px) rotateY(180deg);
}

/* Back side specific styles */
.photo-card-back {
  transform: rotateY(180deg);
  background: rgba(255, 255, 255, 0.1);  /* Much lighter, almost transparent background */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  overflow: hidden;
}

.back-description {
  box-sizing: border-box;
  padding: 20px;
  width: 100%;              /* Force full width */
  max-width: 100%;          /* Ensure text doesn't overflow */
  height: 100%;             /* Take full height */
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;      /* Force text wrapping */
  text-align: left;
  color: #000000;
  background-color: #ffffff;
  font-size: 20px;
  line-height: 1.5;
  overflow-y: auto;         /* Add scroll if text is too long */
}

.gradient-text {
  background-image: 
    linear-gradient(90deg, #00BFFF, #1E90FF, #4169E1, #1E90FF, #00BFFF),
    linear-gradient(180deg, #00BFFF, #1E90FF, #4169E1, #1E90FF, #00BFFF),
    linear-gradient(45deg, #00BFFF, #1E90FF, #4169E1, #1E90FF, #00BFFF),
    linear-gradient(135deg, #00BFFF, #1E90FF, #4169E1, #1E90FF, #00BFFF);
  background-size: 200% 200%;
  background-position: 50% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientFlow 3s linear infinite;
  font-weight: bold;
}

.back-description strong {
  background-image: 
    linear-gradient(90deg, #00BFFF, #1E90FF, #4169E1, #1E90FF, #00BFFF),
    linear-gradient(180deg, #00BFFF, #1E90FF, #4169E1, #1E90FF, #00BFFF),
    linear-gradient(45deg, #00BFFF, #1E90FF, #4169E1, #1E90FF, #00BFFF),
    linear-gradient(135deg, #00BFFF, #1E90FF, #4169E1, #1E90FF, #00BFFF);
  background-size: 200% 200%;
  background-position: 50% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientFlow 3s linear infinite;
  font-weight: bold;
}

.contact-gallery {
  position: relative;
  display: flex;
  gap: 20px;
  overflow-x: scroll;
  overflow-y: visible;
  white-space: nowrap;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  user-select: none;
  z-index: 2;
  width: 100vw;
  margin-left: -15vw;
  padding: 25px 15vw 25px 15vw; /* Added top/bottom padding to accommodate shadow */
}

.contact-card {
  flex: 0 0 300px;
  height: 400px;
  border-radius: 30px;
  overflow: visible;  /* Changed from hidden to allow 3D effect */
  user-select: none;
  position: relative;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, box-shadow;
  transform-style: preserve-3d;
  perspective: 1000px;
  cursor: pointer;
  margin: 0;
  background-color: #000000;
  background: rgba(0, 0, 0, 0.05);
}

.contact-card1 {
  flex: 0 0 300px;
  height: 400px;
  border-radius: 30px;
  overflow: visible;  /* Changed from hidden to allow 3D effect */
  user-select: none;
  position: relative;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, box-shadow;
  transform-style: preserve-3d;
  perspective: 1000px;
  cursor: pointer;
  margin: 0;
  background-color: #000000;
  background: rgba(0, 0, 0, 0.05);
}

.contact-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

.contact-card-mini:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

.contact-glass {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: rgba(0, 0, 0, .1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 30px;
  text-align: left;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.contact-text {
  font-size: 24px;
  color: #ffffff;
  font-weight: semi-bold;
  line-height: 1.5;
}

.contact-icon {
  position: absolute;
  right: 30px;
  width: 25px;
  height: 25px;
  z-index: 2;

}

.contact-card-link {
text-decoration: none;
color: inherit;
flex: 0 0 300px; /* Match the contact-card flex properties */
height: 200px;   /* Match the contact-card height */
}


.contact-desc {
position: absolute;
top: 60px;
height: 340px; /* Remaining space after glass section */
left: 30px;
padding-top: 20px;  /* Add some padding from the top */
right: 30px;
font-size: 20px;
color: #ffffff;
text-align: left;
z-index: 10;
white-space: normal; /* Allow text to wrap */
overflow-wrap: break-word; /* Break long words if necessary */
word-wrap: break-word;
line-height: 1.5; /* Add some line spacing */
overflow: hidden;
display: block;  /* Changed from flex to block */
align-items: center;
flex-direction: column; /* Align items vertically */
justify-content: center; /* Center vertically */
}

.contact-desc-mini {
  position: absolute;
  top: 60px;
  height: 130px; /* Remaining space after glass section */
  left: 30px;
  padding-top: 20px;  /* Add some padding from the top */
  right: 30px;
  font-size: 20px;
  color: #ffffff;
  text-align: left;
  z-index: 10;
  white-space: normal; /* Allow text to wrap */
  overflow-wrap: break-word; /* Break long words if necessary */
  word-wrap: break-word;
  line-height: 1.5; /* Add some line spacing */
  overflow: hidden;
  display: block;  /* Changed from flex to block */
  align-items: center;
  flex-direction: column; /* Align items vertically */
  justify-content: center; /* Center vertically */
  }

.photo-gallery, .contact-gallery {
/* Add this line to your existing styles */
overscroll-behavior-x: contain;
}

.playground {
width: 70vw; /* Corrected unit */
position: relative;
display: flex;
z-index: 2;
padding: 25px 0 25px 0;  
border: 2px solid #e0e0e0;  /* Light gray border */
}

.game {
position: relative;
display: flex;
gap: 20px;
overflow-x: scroll;
overflow-y: visible;
white-space: nowrap;
cursor: grab;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
user-select: none;
z-index: 2;
height: 400px;

width: 100vw;
border: 2px solid #000000;  /* Light gray border */
}

.contact-card-mini {
  flex: 0 0 300px;
  height: 190px;
  border-radius: 30px;
  overflow: visible;  /* Changed from hidden to allow 3D effect */
  user-select: none;
  position: relative;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, box-shadow;
  transform-style: preserve-3d;
  perspective: 1000px;
  cursor: pointer;
  margin: 0;
}

.contact-subgroup {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Adjust the spacing between the cards */
}

.contact-glass-mini {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: rgba(0, 0, 0, .1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 30px;
  text-align: left;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}


/* Add to your existing CSS */
svg.paused * {
  animation-play-state: paused !important;
  -webkit-animation-play-state: paused !important;
}

.playground:hover svg *,
.contact-card:hover svg * {
  animation-play-state: running !important;
  -webkit-animation-play-state: running !important;
}

.contact-card-front1 {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 30px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(220, 20, 60, 0.15); /* This replaces fill and fill-opacity */
  }

.contact-card-front2 {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 30px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(10, 102, 194, 0.15);}

.contact-card-front3 {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 30px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(223, 175, 44, 0.15);}

.contact-card-front4 {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 30px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(60, 179, 113, 0.15);}

.contact-card-front5 {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 30px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(138, 43, 226, 0.15);
}

.contact-card-front6 {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 30px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
background-color: rgba(217, 108, 53, 0.15);}

/* Positioning for the gallery arrows */
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  cursor: pointer;
  z-index: 5;
  transition: transform 0.2s ease;  /* Match plus-circle transition */
}

.gallery-arrow img {
  width: 100%;
  height: 100%;
}

/* Hover effect to match plus-circle */
.gallery-arrow:hover {
  transform: translateY(-50%) scale(1.1);  /* Combined with existing translateY */
}

/* Specific positioning for left and right arrows */
.left-arrow {
  left: -10vw;
}

.right-arrow {
  right: -10vw;
}

/* Mobile adjustments - only adjust position, not size */
@media (max-width: 768px) {
  .left-arrow {
    left: -10vw;
  }

  .right-arrow {
    right: -10vw;
  }
}

/* Hide the theme-toggle icon on screens smaller than 350px */
@media (max-width: 350px) {
  #theme-toggle-icon {
      display: none !important;
  }
}

/* Default styles for the theme-toggle icon */
#theme-toggle-icon {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

/* Set the icon size */
.theme-icon {
  width: 20px;
  height: 20px;
}

.photo-gallery, .contact-gallery {
  overflow-x: scroll;
  overflow-y: hidden;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE and Edge */
}

.photo-gallery::-webkit-scrollbar,
.contact-gallery::-webkit-scrollbar {
  display: none;                /* Chrome, Safari, and Opera */
}







body.dark-mode {
  background-color: #000000; /* Changes the body background to black */
  color: #ffffff; /* Changes the body text color to white */
}

body.dark-mode header nav {
  background: #000000; /* Solid black background */
  color: #ffffff; /* White text */
  backdrop-filter: none; /* Disable the blur effect */
  box-shadow: none; /* Remove any shadow, if needed */
}
body.dark-mode footer {
  background-color: #000000; /* Darkens the footer background */
  color: #ffffff; /* Changes footer text to white */
}

body.dark-mode a {
  color: #ffffff; /* Ensures links are white */
}

/* Main container and boxes in dark mode */
body.dark-mode main {
  background-color: #000000; /* Match the body background */
  color: #ffffff; /* Set text to white */
}

/* Section headers and subtexts */
body.dark-mode .section-header {
  color: #ffffff; /* Make section headers white */
}

body.dark-mode .section-subtext {
  color: #ffffff; /* Slightly lighter gray for subtext */
}

body.dark-mode #footer {
  background-color: #000000; /* Darkens the footer background */
  color: #ffffff; /* Changes footer text to white */
}
body.dark-mode a:hover {
  color: #dcdcdc; /* A lighter shade of white for hover effect */
}

body.dark-mode .privacy-link:hover {
  color: #dcdcdc; /* Same lighter shade for Privacy link */
}

/* Initial state */
#dark-mode-toggle {
  transition: transform 0.3s ease-in-out; /* Smooth rotation effect */
}

/* Rotated state */
#dark-mode-toggle.rotated {
  transform: rotate(180deg);
}

body.dark-mode header nav::after {
  content: ''; /* Creates an empty pseudo-element */
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px; /* Adjust the thickness of the line */
  background-color: #505050; /* The color of the line */
}

body.dark-mode footer::before {
  content: ''; /* Creates an empty pseudo-element */
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px; /* Adjust the thickness of the line */
  background-color: #505050; /* The color of the line */
}

body.dark-mode #logo-text {
  color: #ffffff; /* Change the logo text to white */
}

/* For the dark mode toggle icon */
body.dark-mode #dark-mode-toggle {
  filter: brightness(0) saturate(10000%) invert(1); /* Converts black to white */
}

/* General styles for other icons in dark mode */
body.dark-mode .social-icons img,
body.dark-mode .nav-links .social-icons img {
  filter: brightness(0) saturate(10000%) invert(1); /* Converts black to white */
  transition: filter 0.3s ease-in-out; /* Smooth transition for toggling */
}

body.dark-mode .section-header {
  color: #ffffff; /* Pure white for the section header */
}

body.dark-mode .section-subtext {
  color: #a0a0a0; /* Slightly darker white for the subtext */
}

.contact-card[style*="pointer-events: none"],
.contact-card-mini[style*="pointer-events: none"],
.contact-card1[style*="pointer-events: none"] {
    filter: grayscale(20%);
}


/* Add to your style.css */
.social-icons img {
  position: relative;
}

.social-icons img::before {
  content: attr(title);
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  font-size: 12px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.1s;  /* Reduced from default delay */
  pointer-events: none;
  z-index: 1000;
}

.social-icons img:hover::before {
  opacity: 1;
  visibility: visible;
}