/* About Page Custom Styles */

:root {
  /* Change the hex code below to your desired color */
  --bs-primary: #b68b2e;
  --bs-secondary: #ffb22c; /* Secondary color */
  --bs-light: #f8f9fa; /* Light background color */
  --bs-dark: #343a40; /* Dark text color */
  --bs-footer: #8b540f;
  --bs-white: #ffffff;
  --bs-gray: #e9ecef;
}

.zoom-fade-image {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

/* exit animation */
.zoom-fade-out {
  opacity: 0;
  transform: scale(1.05);
}

/* enter animation */
.zoom-fade-in {
  opacity: 1;
  transform: scale(1);
}


/* CEO Profile */
.ceo-img {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

/* Client Carousel */
.client-carousel img {
  max-height: 100px;
  margin: 0 auto;
  display: inline-block;
  filter: grayscale(100%);
  transition: all 0.3s ease;
}

.client-carousel img:hover {
  filter: grayscale(0%);
  transform: scale(1.05);
}

/* Our Group - Company Cards */
/* Section Header */
.section-title {
  font-weight: 700; /* Bold */
  color: #111827; /* 'text-gray-900' */
}

/* Modern Card Styles */
.group-card {
  border: none;
  border-radius: 1rem; /* 'rounded-2xl' */
  background-color: #fff;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.07),
    0 4px 6px -4px rgb(0 0 0 / 0.07); /* 'shadow-lg' */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%; /* Ensure cards are the same height */
  display: flex;
  flex-direction: column;
}

.group-card:hover {
  transform: translateY(-0.375rem); /* '-translate-y-1.5' */
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.15); /* 'shadow-2xl' */
}

.group-card .card-img-top {
  height: 8rem; /* 'h-32' */
  width: 100%;
  object-fit: contain;
  padding: 1.5rem; /* 'p-6' */
}

.group-card .card-body {
  text-align: center;
  padding: 1.5rem;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Makes card body fill height */
}

.group-card .card-title {
  font-size: 1.25rem; /* 'text-xl' */
  font-weight: 600; /* 'font-semibold' */
  color: #111827; /* 'text-gray-900' */
  margin-bottom: 0.75rem; /* 'mb-3' */
}

.group-card .card-text {
  font-size: 0.875rem; /* 'text-sm' */
  color: #4b5563; /* 'text-gray-600' */
  flex-grow: 1; /* Pushes button to bottom */
  margin-bottom: 1.25rem; /* 'mb-5' */
}

/* Modern Button Style */
/* Modern Button Style */
        .btn-modern {
            border-radius: 9999px; /* 'rounded-full' */
            font-weight: 600; /* 'font-bold' to match your nav button */
            background-color: var(--bs-primary); /* Using your primary color */
            border-color: var(--bs-primary);
            color: var(--bs-white);
            padding: 0.625rem 1.25rem; /* 'px-5 py-2.5' */
            font-size: 0.875rem; /* 'text-sm' */
            transition: all 0.3s ease; /* Matching your nav button transition */
        }
        
        .btn-modern:hover {
            background-color: var(--bs-secondary); /* Using your secondary color */
            border-color: var(--bs-secondary);
            color: var(--bs-dark); /* Text color changes on hover */
        }

/* === CEO Hero Section === */
.ceo-hero {
  position: relative;
  min-height: 95vh;
  background-image: url("../img/ceo-banner.jpg");
  background-size: cover; /* ensures image always visible */
  background-position: right center;
  background-position-x: calc(100% + 80px);
  background-repeat: no-repeat;
  color: #fff; /* default text color */
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Add a dark overlay to improve text visibility */
.ceo-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3); /* semi-transparent overlay */
  z-index: 1;
}

/* Make sure text stays above overlay */
.ceo-hero .container {
  position: relative;
  z-index: 2;
}

/* === Text readability fix === */
.ceo-hero h1,
.ceo-hero p {
  color: #ffffff;
  transition: color 0.3s ease;
}

/* Optional: automatic text color switch if background is light */
@media (prefers-color-scheme: light) {
  .ceo-hero {
    color: #111;
  }
  .ceo-hero h1,
  .ceo-hero p {
    color: #ffffff;
  }
}

/* === Mobile (below 576px) === */
@media (max-width: 575.98px) {
  .ceo-hero {
    min-height: auto;
    padding: 60px 15px;
    background-position: center top;
  }

  .ceo-hero::before {
    background: rgba(
      0,
      0,
      0,
      0.55
    ); /* slightly darker overlay for small screens */
  }

  .ceo-hero h1 {
    font-size: 1.5rem;
  }

  .ceo-hero p {
    font-size: 0.9rem;
    line-height: 1.6;
  }
}


/* =============================
   Vision & Mission Section
============================= */
.vision-mission-section h6 {
  letter-spacing: 1px;
  font-size: 0.9rem;
}

/* ===== Vision & Mission Layout ===== */
.vision-mission-section .row {
  align-items: center;
}
/* =============================
   Vision & Mission Section
============================= */

.vision-mission-section {
  background-color: var(--bs-white);
}

.vision-mission-section h3 {
  font-size: 1.75rem;
  font-weight: 700;
}

.vision-mission-section p {
  color: var(--bs-dark);
  line-height: 1.9;
  font-size: 1.05rem;
}

/* ===== Boxes ===== */
.vision-box,
.mission-box {
  width: 100%;
  max-width: 450px;
  height: 260px;
  margin: 0 auto;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: all 0.4s ease;
}

.vision-box {
  background: linear-gradient(135deg, var(--bs-primary), var(--bs-footer));
}

.mission-box {
  background: linear-gradient(135deg, var(--bs-secondary), var(--bs-primary));
}

.vision-box:hover,
.mission-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* ===== Mission List ===== */
.mission-list {
  list-style: none;
  padding-left: 0;
  line-height: 1.8;
}

.mission-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.9rem;
  color: var(--bs-dark);
  font-size: 1.05rem;
}

.mission-list li::before {
  content: "▸";
  color: var(--bs-primary);
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0;
}

/* ===== Responsive ===== */
@media (max-width: 991px) {
  .vision-box,
  .mission-box {
    max-width: 380px;
    height: 200px;
  }

  .vision-mission-section h3 {
    font-size: 1.5rem;
  }

  .vision-mission-section p,
  .mission-list li {
    font-size: 1rem;
  }

  .vision-mission-section .row {
    text-align: center;
  }
}

@media (max-width: 575px) {
  .vision-box,
  .mission-box {
    max-width: 320px;
    height: 180px;
  }
}