@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
/*
  Using Tailwind's @apply directive for custom classes.
  This setup keeps styling consistent with the utility-first approach.
*/
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        --color-primary: 204 100% 50%; /* A bright, modern blue for accents */
        --color-secondary: 39 100% 50%; /* A vibrant orange for primary actions */
        
        --color-dark-bg: 222 47% 11%;      /* Very dark navy blue (slate-900) */
        --color-dark-card: 222 47% 15%;  /* Slightly lighter navy (slate-800) */
        --color-light-text: 210 40% 96%;   /* Light grey/blue for text (slate-200) */
        --color-muted-text: 215 28% 63%;   /* Muted grey for paragraphs (slate-400) */
    }
}

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

@layer components {
    /* Main Buttons */
    .btn {
        @apply inline-flex items-center justify-center whitespace-nowrap rounded-md px-6 py-2.5 text-base font-semibold text-white transition-all duration-300;
        background-color: hsl(var(--color-secondary)); /* Orange */
    }
    .btn:hover {
        @apply shadow-lg shadow-orange-500/20 transform -translate-y-1;
        background-color: hsl(var(--color-secondary) / 0.9);
    }
    .btn-light {
        @apply inline-flex items-center justify-center whitespace-nowrap rounded-md px-6 py-2.5 text-base font-semibold bg-white text-slate-900 transition-all duration-300;
    }
    .btn-light:hover {
        @apply shadow-lg shadow-white/20 transform -translate-y-1 bg-slate-200;
    }
    .btn-outline {
        @apply inline-flex items-center justify-center whitespace-nowrap rounded-md px-6 py-2.5 text-base font-semibold text-white bg-transparent border-2 border-white transition-all duration-300;
    }
    .btn-outline:hover {
        @apply bg-white text-slate-900;
    }

    /* Navbar Links (now styled more like buttons) */
    .nav-link {
        @apply block py-2 px-4 text-slate-200 font-semibold transition-colors duration-300 relative rounded-md;
        @apply hover:bg-slate-700 hover:text-orange-400; /* Button-like hover */
    }
    /* Removed ::after underline for button-like style, can be re-added if preferred */
    /* .nav-link::after {
        content: '';
        @apply absolute w-0 h-0.5 bottom-0 left-1/2 -translate-x-1/2 transition-all duration-300;
        background-color: hsl(var(--color-secondary));
    }
    .nav-link:hover::after {
        @apply w-1/2;
    } */

    /* Vision/Mission Section Cards */
    .vision-box {
        @apply bg-slate-800 p-8 rounded-lg shadow-lg border-l-4 transition-all duration-300;
        border-color: hsl(var(--color-primary)); /* Blue border */
    }
    .vision-box:hover {
        @apply transform -translate-y-2 shadow-2xl shadow-slate-950/50;
    }

    /* Team Section Cards */
    .team-member {
        @apply text-center bg-slate-800 p-6 rounded-lg shadow-md transition-all duration-300 flex flex-col items-center;
    }
    .team-member:hover {
        @apply shadow-xl shadow-slate-950/70 transform -translate-y-2;
    }
    .team-img {
        @apply w-32 h-32 rounded-full mx-auto object-cover border-4;
        border-color: hsl(var(--color-primary) / 0.8); /* Blue border */
    }
    .read-more-btn {
        @apply mt-4 px-4 py-1.5 text-sm bg-primary-500/20 text-primary-300 rounded-full border border-primary-500/30 hover:bg-primary-500/40 transition-colors cursor-pointer;
        color: hsl(var(--color-primary));
        background-color: hsl(var(--color-primary) / 0.1);
        border-color: hsl(var(--color-primary) / 0.3);
    }
    .read-more-btn:hover {
         background-color: hsl(var(--color-primary) / 0.2);
    }

    /* Contact Section Form & Links */
    .form-label {
        @apply mb-2 block font-medium text-slate-300;
    }
    .form-input {
        @apply w-full px-4 py-2 bg-slate-700 border border-slate-600 rounded-md focus:ring-2 focus:ring-orange-500 focus:border-transparent transition text-slate-200;
    }
    .contact-link {
        @apply flex items-center gap-4 text-slate-300 hover:text-orange-400 transition-colors;
    }
    .text-primary-400 {
        color: hsl(var(--color-primary));
    }

   /* Footer */
   
.footer-bg {
  background-image: url('integrity.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
  padding: 4rem 1rem;
  color: white;
}
.footer-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 50, 100, 0.85);
  z-index: 0;
}
.footer-bg .container {
  position: relative;
  z-index: 2;
}

/* Social Icons */
.social-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  color: white;
  font-size: 16px;
}
.social-icon:hover {
  background: #00bcd4; /* secondary color highlight */
  color: white;
}

/* WhatsApp Floating Button */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
}
.whatsapp-float img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  transition: transform 0.2s ease;
}
.whatsapp-float img:hover {
  transform: scale(1.1);
}


     /* --- ANIMATIONS --- */
    @keyframes loop-horizontally {
        from { transform: translateX(0); }
        to { transform: translateX(-50%); }
    }
    .animate-loop-horizontally {
        animation: loop-horizontally 30s linear infinite;
        width: 200%;
    }
}