/* Connect Section Styles */
.connect-container {
  width: 100%;
  max-width: 100%;
  margin: 5px auto 0;
  padding: 60px 20px;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
  gap: 60px;
  min-height: 70vh;
  position: relative;
  box-sizing: border-box;
}

.connect-left-section {
  flex: 2;
  max-width: 50%;
  margin-top: -25px;
}

.connect-right-section {
  flex: 1;
  max-width: 40%;
}

.connect-column {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Left Column - Personal Message & Social */

/* .navbar-brand {
  font-family: "Ysabeau Infant", sans-serif;
  font-optical-sizing: auto;
  font-size: 90px;
  font-weight: 100;
  font-style: normal;
  margin-right: 0;
  display: inline-block;
  z-index: 1;
  color: white;
  opacity: 0.8;
  transition: font-size 2s ease-in-out;
} */
 
.connect-message {
  margin-bottom: 20px;
  color: white;
  color: white;
  font-family: 'Ysabeau Infant', sans-serif;
  font-size: 3rem;
  opacity: 1;
  text-shadow: 
    0px 0px 10px rgba(0, 0, 0, 1),
    0px 0px 10px rgba(0, 0, 0, 1),
    0px 0px 10px rgba(0, 0, 0, 1),
    0px 0px 10px rgba(0, 0, 0, 1),
    0px 0px 10px rgba(0, 0, 0, 1),
    0px 0px 10px rgba(0, 0, 0, 1);
}

.message-text {
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 40px;
  margin: 0;
  color: white;
  font-family: 'Ysabeau Infant', sans-serif;
  opacity: 1;
  text-shadow: 
    0px 0px 10px rgba(0, 0, 0, 1),
    0px 0px 10px rgba(0, 0, 0, 1),
    0px 0px 10px rgba(0, 0, 0, 1),
    0px 0px 10px rgba(0, 0, 0, 1),
    0px 0px 10px rgba(0, 0, 0, 1),
    0px 0px 10px rgba(0, 0, 0, 1);
}

.social-links h3 {
  font-size: 1.5rem;
  font-weight: 300;
  margin-bottom: 25px;
  color: white;
  font-family: "Ysabeau Infant", sans-serif;
}

.social-icons {
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: space-between;
  padding: 0 100px;
}

.social-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s ease;
  font-family: "Poppins", sans-serif;
  flex: 1;
  text-align: center;
  position: relative;
}

.social-link::after {
  display: none !important;
}

.social-link i {
  font-size: 1.5rem;
  width: 24px;
}

.social-link:hover {
  color: white;
  text-decoration: none !important;
}

/* Center Column - Contact Form */
.connect-form h3 {
  font-size: 1.5rem;
  font-weight: 300;
  margin-bottom: 30px;
  color: white;
  font-family: "Ysabeau Infant", sans-serif;
}

.enhanced-contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.enhanced-contact-form .form-group {
  margin-bottom: 0;
}

.enhanced-contact-form .form-control {
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  padding: 15px;
  color: white;
  font-size: 1rem;
  transition: all 0.3s ease;
  font-family: "Poppins", sans-serif;
}

.enhanced-contact-form .form-control::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.enhanced-contact-form .form-control:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.8);
  background: rgba(0, 0, 0, 0.02);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.btn-send {
  background: transparent;
  border: 2px solid white;
  color: white;
  padding: 15px 30px;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: "Poppins", sans-serif;
  margin-top: 10px;
}

.btn-send:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

/* Right Column - Location & Globe */
.connect-location h3 {
  font-size: 1.5rem;
  font-weight: 300;
  margin-bottom: 30px;
  color: white;
  font-family: "Ysabeau Infant", sans-serif;
}

.location-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 600px;
}

.contact-details {
  text-align: center;
  margin-top: -300px;
}

.contact-details p {
  margin: 10px 0;
  font-family: "Poppins", sans-serif;
}

.location {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 300;
}

.email {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
  font-family: monospace;
}

/* Responsive Design - Option B: Stack on Mobile */
@media (max-width: 768px) {
  .connect-container {
      grid-template-columns: 1fr;
      gap: 50px;
      padding: 40px 20px;
      text-align: center;
  }
  
  .connect-message h2 {
      font-size: 2rem;
  }
  
  .social-icons {
      align-items: center;
  }
  
  .location-info {
      align-items: center;
  }
}

@media (max-width: 480px) {
  .connect-container {
      padding: 30px 15px;
      gap: 40px;
  }
  
  .connect-message h2 {
      font-size: 1.8rem;
  }
  
  .message-text {
      font-size: 1.1rem;
  }
}

/* 3D Globe Styles */
.globe-container {
  width: 600px;
  height: 600px;
  position: relative;
  top: -150px;
  perspective: 800px;
  margin: 0 auto;
}

.globe-container::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 290px;        /* Increased from 220px */
  height: 290px;       /* Increased from 220px */
  background-color: rgba(0, 2, 98, 0.346);  /* Semi-transparent black */
  border: 1.5px solid rgba(255, 255, 255, 0.15);  /* Thin white border */
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;  
  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.8);       /* Behind the globe but in front of background */
}

.globe-container::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 292px;        /* Slightly larger than ::before */
  height: 292px;       /* Slightly larger than ::before */
  background-color: rgba(0, 0, 0, 0.75);  /* Black layer with 75% opacity */
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: -2;         /* Behind the ::before element */
}

.globe {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: globeRotate 20s linear infinite;
}

@keyframes globeRotate {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

.globe-sphere {
  width: 100%;
  height: 100%;
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform-style: preserve-3d;
}

#three-globe {
  position: relative;
}

/* Connect Section Specific Positioning */
#connect-section {
  padding-top: 0px;
}

#connect-section .connect-container {
  padding-top: 20px;
}

/* Mobile Globe Adjustments */
@media (max-width: 768px) {
  .globe-container {
      width: 180px;
      height: 180px;
  }
  
  .globe-container::before {
      width: 200px;        /* Increased from 160px */
      height: 200px;       /* Increased from 160px */
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8);
  }

  .globe-container::after {
      width: 202px;        /* Slightly larger than ::before mobile size */
      height: 202px;       /* Slightly larger than ::before mobile size */
  }
}

/* Navigation Hover & Active State Effects */