/* Landing Pages Shared Styles */

/* Color Variables */
:root {
  --primary-blue: #44689d;
  --primary-gold: #fbd38a;
  --text-white: #ffffff;
}

/* Navigation Styles */
.nav-btn {
  @apply px-3 py-2 text-sm font-semibold text-white bg-white bg-opacity-20 rounded-full border border-white border-opacity-30 backdrop-blur-sm transition-all duration-300 hover:bg-opacity-30 sm:px-6 sm:text-base;
}

.nav-btn-active {
  @apply bg-white bg-opacity-30 border-opacity-50 hover:bg-opacity-40;
}

.nav-btn-login {
  @apply px-3 py-2 text-sm font-semibold text-white bg-blue-600 rounded-full shadow-lg transition-all duration-300 hover:bg-blue-700 sm:px-6 sm:text-base;
}

/* Common Animation Styles */
.fade-in-logo {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s ease-out 0.5s forwards;
}

.fade-in-text {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s ease-out 1s forwards;
}

.fade-in-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.fade-in-section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Animation Keyframes */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInFromRight {
  0% { 
    opacity: 0; 
    transform: translateX(40px) translateY(10px); 
  }
  100% { 
    opacity: 1; 
    transform: translateX(0) translateY(0); 
  }
}

@keyframes slideInFromLeft {
  0% { 
    opacity: 0; 
    transform: translateX(-40px) translateY(10px); 
  }
  100% { 
    opacity: 1; 
    transform: translateX(0) translateY(0); 
  }
}

@keyframes logoSparkle {
  0% { 
    opacity: 0; 
    transform: translateY(30px) scale(0.8) rotate(-5deg); 
  }
  50% { 
    opacity: 0.7; 
    transform: translateY(-5px) scale(1.1) rotate(2deg); 
  }
  100% { 
    opacity: 1; 
    transform: translateY(0) scale(1) rotate(0deg); 
  }
}

/* Modal Styles */
.modal-overlay {
  @apply fixed inset-0 z-50 bg-black bg-opacity-75 backdrop-blur-sm;
}

.modal-container {
  @apply flex justify-center items-center px-4 min-h-screen relative z-10;
}

.modal-content {
  @apply relative w-full max-w-4xl bg-black bg-opacity-80 rounded-lg shadow-2xl backdrop-blur-md;
}

.modal-close-btn {
  @apply absolute top-4 right-4 z-10 w-8 h-8 bg-white bg-opacity-20 rounded-full transition-all duration-200 hover:bg-opacity-30;
}

.contact-modal-content {
  @apply relative w-full max-w-md rounded-lg shadow-2xl backdrop-blur-md;
  background-color: rgba(68, 104, 157, 0.9);
}

.contact-form-input {
  @apply px-3 py-2 w-full placeholder-gray-300 text-white rounded border border-white border-opacity-30 focus:outline-none focus:border-opacity-50;
  background-color: rgba(44, 64, 117, 0.8);
}

.btn-primary {
  @apply px-8 py-4 text-lg font-semibold rounded-full border-2 transition-all duration-300 transform hover:shadow-2xl hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2;
  color: var(--primary-gold);
  border-color: var(--primary-gold);
}

.btn-primary:hover {
  background-color: var(--primary-gold);
  color: black;
}

.btn-secondary {
  @apply px-8 py-4 text-lg font-semibold rounded-full border-2 transition-all duration-300 transform hover:shadow-2xl hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2;
  color: var(--primary-blue);
  border-color: var(--primary-blue);
}

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

.btn-submit {
  @apply px-6 py-3 w-full font-semibold rounded-full transition-all duration-300 hover:scale-105;
  background-color: var(--primary-gold);
  color: black;
}

/* Text Color Utilities */
.text-primary-blue {
  color: var(--primary-blue);
}

.text-primary-gold {
  color: var(--primary-gold);
}

/* About Page Specific Animations */
.fade-in-section[data-delay="200"].visible {
  transition-delay: 100ms;
}

.fade-in-section[data-delay="400"].visible {
  transition-delay: 200ms;
}

.fade-in-section[data-delay="500"].visible {
  transition-delay: 250ms;
}

.fade-in-section[data-delay="600"].visible {
  transition-delay: 300ms;
}

.fade-in-section[data-delay="650"].visible {
  transition-delay: 350ms;
  animation: slideInFromRight 0.5s ease-out 350ms forwards;
}

.fade-in-section[data-delay="700"].visible {
  transition-delay: 400ms;
  animation: slideInFromRight 0.5s ease-out 400ms forwards;
}

.fade-in-section[data-delay="750"].visible {
  transition-delay: 450ms;
  animation: slideInFromRight 0.5s ease-out 450ms forwards;
}

.fade-in-section[data-delay="800"].visible {
  transition-delay: 500ms;
  animation: slideInFromRight 0.5s ease-out 500ms forwards;
}

.fade-in-section[data-delay="850"].visible {
  transition-delay: 550ms;
  animation: slideInFromLeft 0.5s ease-out 550ms forwards;
}

.fade-in-section[data-delay="1000"].visible {
  transition-delay: 600ms;
}

.fade-in-section[data-delay="1200"].visible {
  transition-delay: 700ms;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .text-center {
    text-align: center !important;
  }
  
  /* Stack grid items with better spacing on mobile */
  .lg\:grid-cols-2 {
    gap: 2rem;
  }
  
  /* Adjust VIP service boxes for mobile */
  .sm\:grid-cols-2 {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  /* Make sure images scale properly */
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* Adjust padding for mobile sections */
  section {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  
  @media (max-width: 480px) {
    h1, h2 {
      font-size: 1.5rem !important;
      line-height: 1.3;
    }
    
    h3 {
      font-size: 1.25rem !important;
    }
    
    p {
      font-size: 0.875rem;
      line-height: 1.5;
    }
  }
}

/* Smooth Scroll */
html, body {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  height: auto;
  min-height: 100vh;
}