@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

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

html {
  scroll-behavior: smooth;
}



body {
  font-family: 'Poppins', sans-serif;
  line-height: 1.6;
}

/* Brand Colors */
:root {
  --brand-blue: #1E4D8B;
  --brand-magenta: #D91C7B;
  --brand-orange: #F5A623;
  --brand-red: #E63946;
}

/* Custom Utilities for Tailwind CDN */
.container-custom {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (min-width: 640px) {
  .container-custom {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 768px) {
  .container-custom {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .container-custom {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

@media (min-width: 1280px) {
  .container-custom {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

.btn-primary {
  padding: 0.75rem 1.5rem;
  background-color: #1e3a8a;
  color: white;
  border-radius: 0.5rem;
  transition: background-color 0.3s;
}

.btn-primary:hover {
  background-color: #1e293b;
}

.btn-secondary {
  padding: 0.75rem 1.5rem;
  background-color: #e5e7eb;
  color: #1f2937;
  border-radius: 0.5rem;
  transition: background-color 0.3s;
}

.btn-secondary:hover {
  background-color: #d1d5db;
}

.section-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .section-title {
    font-size: 2.25rem;
  }
}

.card {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s;
  padding: 1.5rem;
}

.card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.5s ease-in;
}

/* Loading Animation */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-up {
  animation: slideUp 0.6s ease-out forwards;
}

/* Stagger animation for cards */
.card-1 { animation-delay: 0.1s; }
.card-2 { animation-delay: 0.2s; }
.card-3 { animation-delay: 0.3s; }
.card-4 { animation-delay: 0.4s; }
.card-5 { animation-delay: 0.5s; }
.card-6 { animation-delay: 0.6s; }

/* Hover Animation */
@keyframes scaleUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.05);
  }
}

.hover-scale:hover {
  animation: scaleUp 0.3s ease-out forwards;
}

/* Card Entrance Animation */
@keyframes cardEntrance {
  0% {
    opacity: 0;
    transform: translateY(20px) rotateX(-10deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0);
  }
}

.card-entrance {
  animation: cardEntrance 0.6s ease-out;
}

/* Icon Pulse Animation */
@keyframes iconPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.icon-hover:hover {
  animation: iconPulse 0.6s ease-in-out;
}

/* Gallery Styles */
.gallery-item {
  background-color: #f3f4f6;
  perspective: 1000px;
}

.gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
}

.gallery-item:hover img {
  filter: brightness(0.8);
}

/* Lightbox Animation */
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.lightbox-overlay {
  animation: zoomIn 0.3s ease-out;
}

/* Hero Slider */
.hero-slider {
  position: relative;
  min-height: 24rem;
}

@media (min-width: 768px) {
  .hero-slider {
    min-height: 31.25rem;
  }
}

.slider-wrapper {
  position: relative;
  width: 100%;
  height: 24rem;
  overflow: hidden;
}

@media (min-width: 768px) {
  .slider-wrapper {
    height: 31.25rem;
  }
}

.slider-item {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  display: none !important;
  z-index: 0 !important;
}

.slider-item.active {
  opacity: 1 !important;
  display: block !important;
  z-index: 2 !important;
}

.slider-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.slider-btn {
  z-index: 10;
  cursor: pointer;
  border: none;
  outline: none;
}

.slider-btn:hover {
  transform: translateY(-50%) scale(1.1);
}

.slider-dots {
  z-index: 10;
}

.slider-dots .dot {
  cursor: pointer;
  border: none;
  outline: none;
}

.slider-dots .dot.active {
  width: 2rem;
  background-color: white !important;
}