* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", sans-serif;
}

/* ===== TOP BAR ===== */

/* ===== Topbar Wrapper ===== */
.sdpm-topbar {
  background-color: #00385f;
  color: #ffffff;
  font-size: 14px;
  padding: 8px 0;
}

/* ===== Inner Container ===== */
.sdpm-topbar-container {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 20px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

/* ===== Left Side Contact Info ===== */
.sdpm-topbar-left {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.sdpm-topbar-left p {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

/* Icon inside left text */
.sdpm-icon {
  width: 18px !important;
  height: 18px !important;
  color: #9ad6ce;
  margin-right: 6px !important;
}

/* ===== Right Side Socials ===== */
.sdpm-topbar-right {
  display: flex;
  gap: 12px;
}

.sdpm-topbar-right a {
  color: white;
  font-size: 15px;
  transition: 0.3s;
}

.sdpm-topbar-right a:hover {
  color: #9ad6ce;
}

/* ========= RESPONSIVE ========= */
@media (max-width: 768px) {
  .sdpm-topbar-container {
    justify-content: center;
    text-align: center;
    gap: 8px;
  }
}

@media (max-width: 500px) {
  .sdpm-topbar-left {
    justify-content: center;
    gap: 10px;
  }

  .sdpm-topbar-right {
    justify-content: center;
  }
}

.sdpm-link {
  color: #ffffff;
  text-decoration: none;
}

.sdpm-link:hover {
  color: #9ad6ce;
}


/* ===== MAIN HEADER ===== */





/* ===== MAIN HEADER ===== */
.main-header {
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #ddd;
  position: sticky;
  top: 0;
  z-index: 1000;
}



/* ===== NAVBAR WRAPPER ===== */
.nav-container {
  /* max-width: 1300px; */
  margin: auto;
  padding: 15px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ===== LOGO ===== */
.logo-section {
  display: flex;
  align-items: center;
}

.logo {
  height: 60px;
  margin-right: 10px;
}

.logo-text h2 {
  color: #00385f;
  margin: 0;
  font-size: 22px;
}

.logo-text p {
  margin: 0;
  color: #3a7934;
}

/* ===== NAV MENU ===== */
.navbar {
  display: flex;
  transition: 0.4s ease;
}

.nav-links {
  display: flex;
  list-style: none;
  align-items: center;
}

.nav-links li {
  margin: 0 15px;
  position: relative;
}

.nav-links a,
.dropdown-btn,
.submenu-btn {
  background: none;
  border: none;
  color: #00385f;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}

/* ===== DROPDOWN ===== */
.dropdown-menu {
  display: none;
  position: absolute;
  background: #fff;
  top: 35px;
  left: 0;
  min-width: 240px;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

.dropdown.active .dropdown-menu {
  display: block;
}

.dropdown-menu li {
  padding: 10px 18px;
  white-space: nowrap;
}

/* ===== SUBMENU ===== */
.dropdown-submenu {
  display: none;
  background: #fff;
  margin-left: 10px;
  border-left: 2px solid #eee;
}

.dropdown-submenu.show {
  display: block;
}

/* ===== HAMBURGER ===== */
.hamburger {
  display: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
}

.hamburger span {
  width: 26px;
  height: 3px;
  background: #00385f;
  transition: 0.3s;
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translateY(8px);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translateY(-8px);
}

/* ===== MOBILE ===== */
@media (max-width: 991px) {
  .hamburger {
    display: flex;
  }

  .navbar {
    position: fixed;
    top: 130px;
    left: -100%;
    flex-direction: column;
    background: #fff;
    width: 100%;
    height: calc(100vh - 120px);
    padding: 20px 0;
    transition: left 0.4s ease;
    overflow-y: auto;
  }
  .nav-container {
    /* max-width: 1300px; */
    margin: auto;
        padding: 10px 10px;
  }

  .navbar.open {
    left: 0;
  }

  .nav-links {
    flex-direction: column;
    width: 100%;
  }

  .nav-links li {
    width: 100%;
    text-align: center;
    padding: 10px 0;
  }

  /* Dropdown fixes for mobile */
  .dropdown-menu {
    position: static;
    box-shadow: none;
    background: #f9f9f9;
    margin-top: 10px;
  }

  .dropdown-submenu {
    position: static;
    padding-left: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
    margin-left: 0px;
  }
  .nav-links li {
    margin: 0px;
  }
}

/* nav css end  */


/* hero section.css */


/* ===== Hero Slider ===== */
.hero-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hero-slide {
  position: relative;
  height: 70vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.overlay {
  position: absolute;
  inset: 0;
  background-image: url('/assets/img/h2.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.5);
  /* height: 70vh; */


}

.overlay1 {
  position: absolute;
  inset: 0;
  background-image: url('/assets/img/8.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.5);

}

.overlay2 {
  position: absolute;
  inset: 0;
  background-image: url('/assets/img/b.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.5);

}

.hero-text {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 700px;
  padding: 20px;
  animation: fadeInUp 1.2s ease-in-out;
}

.hero-text h1 {
  font-size: 2.8rem;
  font-weight: bold;
  margin-bottom: 10px;
  color: #fff;
}

.hero-text p {
  font-size: 1.2rem;
  margin-bottom: 20px;
  color: #f1f1f1;
}

.hero-btn {
  background-color: #00385f;
  color: white;
  border: none;
  padding: 10px 25px;
  border-radius: 25px;
  cursor: pointer;
  transition: 0.3s ease;
  font-weight: 500;
}

.hero-btn:hover {
  background-color: #2d80b9;
  transform: translateY(-3px);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slick-dots li button:before {
  color: white !important;
  font-size: 12px;
}

.slick-dots li.slick-active button:before {
  color: #00a3a3 !important;
}

@media (max-width: 768px) {
  .hero-slide {
    height: 65vh;
  }

  .hero-text h1 {
    font-size: 1.8rem;
  }

  .hero-text p {
    font-size: 1rem;
  }

  .hero-btn {
    padding: 8px 20px;
    font-size: 0.9rem;
  }
}



/* / hero section.css / */



/* ===== Services Section ===== */
.services-section {
  text-align: center;
  padding: 60px 20px;
  background-color: #fff;
}

.section-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 40px;
  color: #1a1a1a;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.service-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 30px 20px;
  transition: all 0.3s ease;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
  
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.08);
}

.service-icon {
  font-size: 36px;
  color: #65ad4b;
  /* ✅ Updated SVG color */
  margin-bottom: 20px;
  text-align: center;
}

.service-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #222;
}

.service-desc {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
  /* padding: 0 10px; */
}



/* / Services Section / */



/* AboutSection css */
.about-section {
  padding: 80px 20px;
  background-color: #f9f9f9;
}

.about-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.about-text {
  flex: 1 1 50%;
}

.about-text h2 {
  color: #00385f;
  font-size: 2rem;
  margin-bottom: 10px;
  font-weight: 600;
}

.about-text h3 {
  font-size: 1.6rem;
  margin-bottom: 20px;
  color: #222;
}

.about-text p {
  color: #555;
  line-height: 1.6;
  margin-bottom: 30px;
}

.about-stats {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.stat {
  flex: 1 1 30%;
  text-align: center;
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.stat:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  font-size: 2rem;
  color: #65ad4b;
  margin-bottom: 10px;
}

.stat h4 {
  font-size: 1.3rem;
  font-weight: 600;
  color: #222;
}

.stat p {
  color: #555;
  font-size: 0.95rem;
}

.about-image {
  flex: 1 1 45%;
  text-align: center;
}

.about-image img {
  width: 100%;
  /* max-width: 500px; */
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Responsive */
@media (max-width: 992px) {
  .about-content {
    flex-direction: column-reverse;
    text-align: center;
  }

  .about-text {
    flex: 1 1 100%;
  }

  .about-stats {
    justify-content: center;
  }
}


/* / AboutSection css  / */


/* IndustriesSection css */

.industries-area {
  position: relative;
  padding: 70px 0;
  /* Reduced height */
  background: #162951cc;
  overflow: hidden;
}

.industries-overlay {
  position: absolute;
  inset: 0;
  background-image: url("/assets/img/bg2.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.2;
}

.section-title {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: white;
}

.section-subtitle {
  max-width: 650px;
  margin: 0 auto 40px;
  color: #dfe6ed;
}

.industries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 25px;
  position: relative;
  z-index: 1;
}

.industry-card {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 25px 15px;
  color: white;
  text-align: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  min-height: 230px;
  /* Compact fixed height */
}

.industry-card:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.icon-box {
  font-size: 2.3rem;
  color: #65ad4b;
  margin-bottom: 12px;
  transition: transform 0.3s ease;
}

.industry-card:hover .icon-box {
  transform: scale(1.1);
}

.industry-card h4 {
  font-size: 1.2rem;
  margin-bottom: 8px;
}

.industry-card p {
  font-size: 0.9rem;
  color: #d1e8ff;
}


/* / IndustriesSection css / */


/* TeamSection */

.team-section {
  background: #f7fafc;
  padding: 100px 0;
  text-align: center;
}

.section-title {
  font-size: 2.3rem;
  font-weight: 700;
  color: #00385f;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 15px;
}

.section-subtitle {
  color: #555;
  font-size: 1.1rem;
  margin-bottom: 60px;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px;
  justify-content: center;
  align-items: stretch;
}

.team-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 30px 20px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.team-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.team-img-wrap {
  width: 140px;
  height: 140px;
  margin: 0 auto 20px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #0b7285;
}

.team-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.team-card h5 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #0b7285;
  margin-bottom: 6px;
}

.team-card span {
  font-size: 1rem;
  color: #555;
}

/* Responsive */
@media (max-width: 992px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }
}

@media (max-width: 576px) {
  .team-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .team-card {
    padding: 25px 15px;
  }

  .team-img-wrap {
    width: 120px;
    height: 120px;
  }
}




/*  / TeamSection / */


/* MissionVisionSection css */

.mission-vision-section {
  position: relative;
  background-image: url("/assets/img/bg1.jpg");
  /* replace with your bg image path */
  background-size: cover;
  background-position: center;
  color: white;
  padding: 100px 0;
  text-align: center;
  overflow: hidden;
}

.mission-vision-section .overlay {
  position: absolute;
  inset: 0;
  background: #162951cc;
  z-index: 0;
}

.mission-vision-section .container {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: auto;
  padding: 0 20px;
}

.mission-vision-content {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  margin-top: 50px;
  flex-wrap: wrap;
}

.mission-box,
.vision-box {
  background: rgba(255, 255, 255, 0.1);
  padding: 30px 25px;
  border-radius: 15px;
  flex: 1;
  min-width: 280px;
  backdrop-filter: blur(8px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.mission-box:hover,
.vision-box:hover {
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.15);
}

.mission-box h3,
.vision-box h3 {
  font-size: 1.8rem;
  color: #00a3a3;
  margin-bottom: 15px;
}

.mission-box p,
.vision-box p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #f1f1f1;
}

/* Responsive */
@media (max-width: 992px) {
  .mission-vision-content {
    flex-direction: column;
    align-items: center;
  }

  .mission-box,
  .vision-box {
    max-width: 90%;
  }
}


/* / MissionVisionSection css / */




/* footer css */


.footer {
  background: #00385f;
  color: #ffffff;
  position: relative;
  padding-top: 80px;
  padding-bottom: 40px;
}

.footer-overlay {
  background: rgba(255, 255, 255, 0.05);
  padding: 40px 0;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 25px;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 50px;
}

.footer-logo {
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
}

.footer-logo span {
  color: #a5f3fc;
}

.footer-col h4 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 20px;
  color: #ffffff;
  position: relative;
}

.footer-col ul {
  list-style: none;
  padding: 0;
}

.footer-col ul li {
  margin-bottom: 10px;
}

.footer-col ul li a {
  color: #e3f7f9;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-col ul li a:hover {
  color: #a5f3fc;
}

.footer-col p {
  font-size: 0.95rem;
  color: #e3f7f9;
  line-height: 1.7;
}

.footer-social {
  margin-top: 15px;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-right: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: 16px;
  transition: all 0.3s ease;
}

.footer-social a:hover {
  background: #a5f3fc;
  color: #0b7285;
  transform: translateY(-4px);
}

/* Bottom footer */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 20px;
  text-align: center;
  font-size: 0.95rem;
  color: #d9f2f5;
}

.footer-bottom span {
  color: #a5f3fc;
  font-weight: 600;
}

/* Responsive */
@media (max-width: 992px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-social a {
    margin: 5px;
  }
}


/* / footer css / */


/* about us page css */

:root {
  --primary-color: #00385f;
  --secondary-color: #65ad4b;
  --light-gray: #f9f9f9;
  --timeline-bg: #e8f5f5;
}

/* Hero Section */
.about-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
}

.about-hero .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 56, 95, 0.7);
}

.about-hero-text {
  position: relative;
  z-index: 2;
}

.about-hero-text h1 {
  font-size: 3rem;
  font-weight: 700;
}

.about-hero-text p {
  font-size: 1.2rem;
  margin-top: 10px;
}

/* About Intro */
.about-intro {
  background: var(--light-gray);
}

.about-intro p {
  max-width: 800px;
  margin: auto;
  color: #555;
  line-height: 1.8;
}

/* Team Section */
/* Team Section */
.about-team-area {
  background: #f8f9fa;
}

.about-section-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary-color);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4rem;
}

/* Team Card */
.about-team-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.about-team-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
}

.about-team-card-reverse {
  flex-direction: row-reverse;
}

/* Image Column */
.about-team-card-image {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

.about-team-img {
  /* width: 100%; */
  height: 300px;
  border-radius: 20px;
  transition: transform 0.4s;
}

.about-team-card:hover .about-team-img {
  transform: scale(1.08);
}

/* Decorative Shape */
.about-team-card-deco {
  position: absolute;
  bottom: -30px;
  right: -30px;
  width: 80px;
  height: 80px;
  background: var(--secondary-color);
  border-radius: 50%;
  opacity: 0.15;
  z-index: 0;
}

/* Text Column */
.about-team-card-info {
  padding-left: 2rem;
}

.about-team-card-reverse .about-team-card-info {
  padding-left: 0;
  padding-right: 2rem;
}

.about-team-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 0.8rem;
}

.about-team-bio {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #555;
  margin-bottom: 1rem;
}

.about-team-skills {
  list-style: disc;
  padding-left: 20px;
  margin-bottom: 1rem;
}

.about-team-skills li {
  margin-bottom: 6px;
  font-size: 0.9rem;
  color: #333;
}

/* Experience under text */
.about-team-experience {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--secondary-color);
  margin-top: 0.5rem;
}

/* Responsive */
@media (max-width: 992px) {
  .about-team-card {
    flex-direction: column !important;
    text-align: center;
    padding: 2rem 1rem;
  }

  .about-team-card-info {
    padding-left: 0 !important;
    padding-top: 1.5rem;
  }

  .about-team-card-reverse .about-team-card-info {
    padding-right: 0 !important;
  }

  .about-team-card-deco {
    display: none;
  }
}




/* Responsive Adjustments */
@media (max-width: 768px) {
  .about-hero-text h1 {
    font-size: 2.2rem;
  }

  .about-hero-text p {
    font-size: 1rem;
  }

  .team-member {
    flex-direction: column !important;
    text-align: center;
  }

  .team-img-container {
    margin-bottom: 1rem;
  }

  .timeline-container {
    padding-left: 20px;
  }
}


:root {
  --primary: #00385f;
  --green: #65ad4b;
  --muted: #5e6e77;
}

.creativeAbout-wrapper {
  position: relative;
  padding: 90px 0;
  background: linear-gradient(120deg, #eef6ff, #ffffff);
  overflow: hidden;
}

/* Floating Shapes */
.shape {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  filter: blur(90px);
  z-index: 1;
}

.shape1 {
  top: -80px;
  left: -80px;
  background: rgba(0, 56, 95, 0.25);
}

.shape2 {
  bottom: -80px;
  right: -80px;
  background: rgba(101, 173, 75, 0.25);
}

.creative-grid {
  position: relative;
  z-index: 2;
  display: block;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 50px;
  max-width: 1200px;
  margin: auto;
}

/* LEFT SIDE */
.tag {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 1px;
}

.title {
  font-size: 46px;
  line-height: 1.1;
  font-weight: 800;
  margin: 10px 0 20px;
  color: #0b1a26;
}

.title-bold {
  color: var(--primary);
}

.title-green {
  color: var(--green);
}

.subtitle {
  font-size: 17px;
  /* max-width: 540px; */
  color: var(--muted);
  margin-bottom: 30px;
  line-height: 1.7;
}

/* Feature cards */
.feature-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.feature-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px 20px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);
}

.feature-card h4 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--primary);
}

/* RIGHT CARD */
.creative-right {
  background: #ffffff;
  padding: 30px;
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.creative-right h3 {
  font-size: 20px;
  font-weight: 800;
}

.right-sub {
  font-size: 15px;
  color: var(--muted);
  margin-top: 6px;
}

.pill-box {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 20px 0;
}

.pill-box span {
  background: rgba(0, 56, 95, 0.06);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--primary);
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.stat-box {
  background: #f8fbff;
  border-radius: 14px;
  padding: 18px;
  text-align: left;
  border: 1px solid #e4eef5;
}

.stat-box h4 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--primary);
}

.stat-box p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

/* Mobile */
/* @media (max-width: 900px) {
  .creative-grid {
    grid-template-columns: 1fr;
  }

  .title {
    font-size: 32px;
  }

  .about-team-img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    transition: transform 0.4s;
  }
} */


@media (max-width: 900px) {
  .creative-grid {
    grid-template-columns: 1fr;
  }

  .title {
    font-size: 32px;
  }

  .about-team-img {
    width: 245px;
    height: 250px;            /* FIXED HEIGHT for all images */
    object-fit: contain;        /* Crop nicely, no stretch */
    border-radius: 20px;
    transition: transform 0.4s;
  }

  .about-team-card-image {
    width: 100%;
  }
  h2.about-section-title.text-center.mb-5{
    font-size: 35px;

}
}


.oss-root {
  background: var(--bg);
  width: 100%;
  padding: 56px 18px;
  box-sizing: border-box;
  /* font-family: var(--font-sans); */
  color: #102027;
}

/* centered inner wrapper */
.oss-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* TOP area */
.oss-top {
  text-align: center;
  padding: 8px 20px 0 20px;
}

.oss-label {
  display: inline-block;
  color: var(--green);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.oss-heading {
  margin: 0 auto;
  font-size: 28px;
  color: var(--primary);
  font-weight: 800;
  line-height: 1.06;
  max-width: 820px;
  animation: oss-fade-up 700ms cubic-bezier(.18, .9, .35, 1) both;
}

@media (min-width: 720px) {
  .oss-heading {
    font-size: 36px;
  }
}

.oss-lead {
  margin: 14px auto 0 auto;
  color: var(--muted);
  max-width: 760px;
  line-height: 1.6;
  font-size: 15px;
  animation: oss-fade-up 780ms cubic-bezier(.18, .9, .35, 1) 120ms both;
}

/* CTA */
.oss-cta {
  display: inline-block;
  margin-top: 16px;
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(0, 56, 95, 0.06);
  padding-bottom: 2px;
  transition: color 180ms ease, transform 160ms ease;
}

.oss-cta:hover {
  transform: translateY(-2px);
  color: #002b46;
}

/* CARDS area - stacked vertical layout */
.oss-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
  padding: 6px 4px 2px 4px;
}

/* feature/intro card */
.oss-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: 0 12px 28px var(--soft);
  border: 1px solid rgba(16, 24, 32, 0.04);
}

/* larger intro styling */
.oss-card--feature {
  padding: 28px;
}

.oss-card-title {
  margin: 0;
  font-size: 18px;
  color: var(--primary);
  font-weight: 700;
  letter-spacing: 0.1px;
  animation: oss-fade-up 680ms cubic-bezier(.18, .9, .35, 1) 200ms both;
}

.oss-card-body {
  margin-top: 12px;
}

.oss-card-para {
  margin: 0 0 12px 0;
  color: #374151;
  font-size: 15px;
  line-height: 1.7;
  animation: oss-fade-up 680ms cubic-bezier(.18, .9, .35, 1) 260ms both;
}

/* divider decorative */
.oss-divider {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px 0;
}

/* values card */
.oss-card--values {
  display: block;
  padding: 18px;
  border-style: dashed;
  border-width: 1px;
  border-color: rgba(3, 56, 95, 0.12);
  background: linear-gradient(180deg, rgba(246, 251, 255, 0.4), rgba(255, 255, 255, 0.6));
}

/* pill */
.oss-pill {
  display: inline-block;
  background: var(--glass);
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--primary);
  font-weight: 700;
  font-size: 12px;
}

/* values list */
.oss-values-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.oss-value {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.oss-value-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--green), #4aa23f);
  flex: 0 0 12px;
  margin-top: 6px;
  box-shadow: 0 6px 12px rgba(100, 160, 80, 0.12);
  transform: translateY(4px);
}

.oss-value-title {
  font-weight: 700;
  color: var(--primary);
  font-size: 13px;
}

.oss-value-text {
  margin-top: 6px;
  color: #374151;
  font-size: 14px;
  line-height: 1.55;
}

/* Animations (subtle entrance) */
@keyframes oss-fade-up {
  from {
    transform: translateY(10px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* responsive: two-column stacked style on wide screens for cards */
@media (min-width: 920px) {
  .oss-cards {
    grid-template-columns: 1fr 420px;
    gap: 22px;
  }

  .oss-divider {
    display: none;
  }

  .oss-card--feature {
    order: 1;
  }

  .oss-card--values {
    order: 2;
    height: fit-content;
  }
}

/* accessibility focus */
a:focus, button:focus {
  /* outline: 3px solid rgba(0, 56, 95, 0.12); */
  outline-offset: 2px;
}

/* small visual tweak for narrow screens */
@media (max-width: 480px) {
  .oss-root {
    padding: 36px 12px;
  }

  .oss-heading {
    font-size: 22px;
  }

  .oss-lead {
    font-size: 14px;
  }
}


.milestones-section {
  padding: 64px 20px 92px;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Intro (title & subtitle) */
.intro {
  max-width: 760px;
  margin-bottom: 28px;
}

.eyebrow {
  font-size: 12px;
  letter-spacing: 1.6px;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 10px;
}

.title {
  font-size: 28px;
  margin: 0 0 12px;
  line-height: 1.05;
  color: #071224;
  font-weight: 700;
}

.subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

/* Outer wrapper for the timeline card */
.cards-wrap {
  display: flex;
  justify-content: center;
}

/* Main card */
.timeline-card {
  width: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.96));
  border-radius: var(--radius);
  box-shadow: var(--soft-shadow);
  border: 1px solid var(--soft-border);
  padding: 20px;
  position: relative;
  overflow: visible;
}

/* Decorative thin horizontal line across (behind the items) */
.timeline-line {
  position: absolute;
  left: 34px;
  right: 34px;
  top: 68px;
  height: 1px;
  background: linear-gradient(90deg, rgba(10, 130, 200, 0.06), rgba(10, 130, 200, 0.03));
  z-index: 1;
}

/* Grid for 4 columns */
.milestones-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  align-items: start;
  position: relative;
  z-index: 2;
  /* above the timeline line */
  padding: 18px 8px 22px;
}

/* Individual milestone */
.milestone-item {
  background: transparent;
  border-radius: 10px;
  padding: 12px 6px 18px;
  transition: transform 320ms cubic-bezier(.2, .9, .2, 1), box-shadow 320ms;
  transform-origin: center;
  cursor: default;
  outline: none;
}

.milestone-item:focus,
.milestone-item:hover {
  transform: translateY(-6px);
}

/* Top row (badge & tiny divider) */
.milestone-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

/* circular badge */
.milestone-badge {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.06), rgba(14, 165, 233, 0.03));
  border: 1px solid rgba(14, 165, 233, 0.18);
  box-shadow: 0 6px 18px rgba(14, 165, 233, 0.06);
  flex: 0 0 36px;
}

.badge-number {
  width: 20px;
  height: 20px;
  font-size: 13px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: var(--accent);
  border: 2px solid rgba(14, 165, 233, 0.18);
  background: white;
  font-weight: 700;
  box-shadow: 0 3px 6px rgba(6, 21, 38, 0.04);
}

/* little divider line under the top area */
.divider {
  height: 1px;
  flex: 1;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  margin-right: 18px;
}

/* text */
.milestone-title {
  font-size: 14px;
  margin: 8px 0 6px;
  font-weight: 700;
  color: #0f172a;
}

.milestone-text {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  max-width: 260px;
}

/* Hover glow on larger screens */
@media (hover: hover) and (min-width: 880px) {
  .milestone-item:hover .milestone-badge {
    transform: scale(1.08);
  }
}

/* Responsive: collapse into 2 columns then 1 */
@media (max-width: 980px) {
  .milestones-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .timeline-line {
    top: 74px;
    left: 28px;
    right: 28px;
  }

  .milestone-text {
    max-width: none;
  }
}

@media (max-width: 620px) {
  .container {
    padding: 0 16px;
  }

  .milestones-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .timeline-line {
    display: none;
  }

  .title {
    font-size: 22px;
  }

  .milestone-item {
    padding: 14px;
  }
}

/* Entrance animation: fade + upward move — using CSS only */
.milestones-grid .milestone-item {
  opacity: 0;
  transform: translateY(18px);
  animation: popIn 600ms cubic-bezier(.22, .9, .3, 1) forwards;
}

/* stagger effect: target each child using nth-child */
.milestones-grid .milestone-item:nth-child(1) {
  animation-delay: 160ms;
}

.milestones-grid .milestone-item:nth-child(2) {
  animation-delay: 260ms;
}

.milestones-grid .milestone-item:nth-child(3) {
  animation-delay: 360ms;
}

.milestones-grid .milestone-item:nth-child(4) {
  animation-delay: 460ms;
}

@keyframes popIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Small accessibility tweaks */
.milestone-item:focus {
  box-shadow: 0 6px 20px rgba(2, 6, 23, 0.08);
  border-radius: 10px;
}





:root {
  --primary-color: #00385f;
  --secondary-color: #65ad4b;
  --light-gray: #f9f9f9;
  --timeline-bg: #e8f5f5;

  --card-bg: #ffffff;
  --glass-bg: rgba(255, 255, 255, 0.7);
  --muted: #5b6770;
  --radius-lg: 14px;
  --shadow: 0 14px 40px rgba(2, 6, 23, 0.06);
  --container: 1180px;
  --gap: 34px;
  /* --font-family: "Poppins", sans-serif; */
}

/* Section */
.wpf-section {
  background: var(--light-gray);
  padding: 72px 20px;
}

.wpf-inner {
  max-width: var(--container);
  margin: 0 auto;
}

.wpf-header {
  max-width: 920px;
  margin-bottom: 26px;
}

.wpf-eyebrow {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 12px;
  color: var(--primary-color);
  margin-bottom: 6px;
}

.wpf-title {
  font-size: 32px;
  margin-bottom: 10px;
  color: #042431;
}

.wpf-lead {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

/* GRID */
.wpf-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--gap);
}

/* Steps Card */
.card-elev {
  background: #fff;
  padding: 24px;
  border-radius: 14px;
  box-shadow: var(--shadow);
}

/* Step style */
.wpf-step {
  display: flex;
  gap: 18px;
  padding: 12px;
  border-radius: 12px;
  opacity: 0;
  transform: translateY(12px);
  animation: fadeInUp .5s forwards;
  margin-bottom: 14px;
  transition: .3s ease;
}

.wpf-step:hover {
  transform: translateY(-4px);
  background: #f4f9f9;
}

/* NUMBER BOX */
.wpf-num-only {
  min-width: 46px;
  min-height: 46px;
  border-radius: 12px;
  background: var(--timeline-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  font-size: 18px;
  font-weight: 700;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 6px 12px rgba(0, 56, 95, 0.08);
}

/* Step text */
.wpf-step-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: #062635;
}

.wpf-step-text {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

/* RIGHT GLASS BOX */
.glass {
  background: var(--glass-bg);
  padding: 24px;
  border-radius: 14px;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(101, 173, 75, 0.1);
}

.wpf-pill {
  background: rgba(101, 173, 75, 0.15);
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--secondary-color);
  font-weight: 700;
  font-size: 12px;
}

.wpf-side-title {
  margin-top: 10px;
  margin-bottom: 12px;
  font-size: 18px;
  color: var(--primary-color);
}

.wpf-side-desc {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 14px;
}

.wpf-side-list li {
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--muted);
}

.wpf-side-list li::before {
  /* content: "•"; */
  color: var(--secondary-color);
  margin-right: 8px;
  font-size: 18px;
}

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

/* Responsive */
@media (max-width: 900px) {
  .wpf-grid {
    grid-template-columns: 1fr;
  }

  .glass {
    margin-top: 20px;
  }
}



/* / about us page css / */


/* Contact Us page */

/* ===== HERO SECTION ===== */
.contact-hero {
  background: url("/assets/img/contact.jpeg") center/cover no-repeat;

  text-align: center;
  padding: 120px 20px;
  position: relative;
  color: white;
  filter: brightness(0.5);
}

.contact-hero .overlay {
  background: rgba(0, 0, 0, 0.6);
  display: inline-block;
  padding: 60px 50px;
  border-radius: 10px;
}

.contact-hero h1 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 15px;
  letter-spacing: 1px;
}

.contact-hero p {
  font-size: 18px;
  color: #f8f9fa;
  max-width: 650px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ===== CONTACT SECTION ===== */
.contact-container {
  background: var(--bg);
  padding: 80px 20px;
  display: flex;
  justify-content: center;
  /* center the inner container */
}

/* center the content and control widths */
.contact-inner {
  width: 100%;
  max-width: 1180px;
  display: flex;
  gap: 48px;
  align-items: flex-start;
  /* top align so both start at same baseline */
  box-sizing: border-box;
}

/* Left Info Section */
.contact-info {
  flex: 0 0 44%;
  /* fixed-ish left column */
  min-width: 300px;
}

.contact-info h2 {
  font-size: 34px;
  color: var(--primary);
  margin: 0 0 14px 0;
  font-weight: 800;
  line-height: 1.05;
}

.contact-info p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 28px;
  max-width: 520px;
}

/* info list */
.info-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.info-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 18px;
  color: #34494f;
  font-size: 15px;
}

/* icon circle, color and vertical centering */
.info-list span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(101, 173, 75, 0.08), rgba(0, 56, 95, 0.03));
  color: var(--green);
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  /* visually align icon with text */
}

/* make text block wrap nicely */
.info-list li>div {
  line-height: 1.5;
  color: #24383f;
}

/* label styling inside info block */
.info-list strong {
  display: inline-block;
  color: var(--primary);
  font-weight: 700;
  margin-right: 6px;
}

/* Right Form Section (card) */
.contact-form {
  flex: 0 0 48%;
  min-width: 320px;
  max-width: 520px;
  background: #fff;
  padding: 36px 36px 28px 36px;
  border-radius: 18px;
  box-shadow:
    0 10px 30px rgba(2, 45, 64, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(3, 56, 95, 0.06);
  box-sizing: border-box;
}

/* Card heading */
.contact-form h2 {
  text-align: center;
  font-size: 28px;
  font-weight: 800;
  color: var(--primary);
  margin: 0 0 20px 0;
}

/* optional status text */
.form-status {
  text-align: center;
  color: var(--green);
  font-weight: 600;
  margin-bottom: 12px;
}

/* form rows */
.form-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

/* stack inputs on tiny screens */
.form-row input {
  flex: 1 1 0;
}

/* single-column groups (textarea) */
.form-group {
  margin-bottom: 20px;
}

/* controls */
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #e3e6e8;
  font-size: 15px;
  color: #122b32;
  outline: none;
  box-shadow: none;
  transition: border 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

/* subtle focus */
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: rgba(101, 173, 75, 0.9);
  box-shadow: 0 6px 20px rgba(101, 173, 75, 0.08);
  transform: translateY(-1px);
}

/* textarea height like screenshot */
.contact-form textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.5;
}

/* big submit button like screenshot */
.submit-btn {
  display: inline-block;
  width: 100%;
  margin-top: 6px;
  background: var(--green);
  color: #fff;
  border: none;
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(78, 154, 58, 0.16);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.submit-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(78, 154, 58, 0.18);
}

/* smaller screens: stack columns */
@media (max-width: 980px) {
  .contact-inner {
    flex-direction: column;
    gap: 28px;
    align-items: stretch;
  }

  .contact-info,
  .contact-form {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .form-row {
    flex-direction: column;
  }
}

/* very small screens: tighten paddings */
@media (max-width: 440px) {
  .contact-inner {
    padding: 0 8px;
  }

  .contact-form {
    padding: 20px;
    border-radius: 12px;
  }

  .contact-info h2 {
    font-size: 24px;
  }
}

/* ===== MAP SECTION ===== */
.map-section {
  width: 100%;
  height: 400px;
  margin-top: 40px;
}

.map-section iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 992px) {
  .contact-hero h1 {
    font-size: 38px;
  }

  .contact-hero p {
    font-size: 16px;
  }

  .contact-form {
    padding: 40px 25px;
  }

  .form-row {
    flex-direction: column;
    gap: 15px;
  }

  .contact-container {
    padding: 60px 20px;
    display: block;
  }
}

@media (max-width: 576px) {
  .contact-hero h1 {
    font-size: 32px;
  }

  .contact-hero p {
    font-size: 15px;
  }
}

.branch-section {
  padding: 70px 20px;
  background: #f9fafc;
  text-align: center;
}

.branch-title {
  font-size: 32px;
  font-weight: 700;
  color: #00385f;
  margin-bottom: 40px;
}

.branch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  justify-content: center;
}

.branch-card {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 3px 10px rgba(0, 56, 95, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.branch-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 18px rgba(0, 56, 95, 0.15);
}

.branch-card h3 {
  color: #00385f;
  font-size: 20px;
  margin-bottom: 10px;
}

.branch-card p {
  color: #444;
  font-size: 15px;
  line-height: 1.6;
}


/* / Contact Us */



/* ============================
  AuditAssurance.css — Full
  (keeps original class names)
============================ */

/* ---------------------------
  base variables (Corporate Blue default)
---------------------------- */
:root {
  --bg: #ffffff;
  --text: #15202b;
  --muted: #586675;
  --primary: #00385f;
  /* corporate */
  --accent: #0c66b3;
  --soft: #f4f8fc;
  --card-shadow: 0 6px 24px rgba(3, 32, 50, 0.08);
  --glass: rgba(255, 255, 255, 0.06);
}

/* ---------------------------
  Theme variants: gradient, minimal, dark
  Switch by setting data-theme on <body> or wrapper
---------------------------- */
body[data-theme="gradient"] {
  --primary: #5b21b6;
  --accent: #06b6d4;
  --soft: linear-gradient(180deg, rgba(91, 33, 182, 0.06), rgba(6, 182, 212, 0.03));
  --card-shadow: 0 12px 36px rgba(91, 33, 182, 0.08);
  --bg: linear-gradient(180deg, #f7f8ff, #fcfbff);
  --text: #0f172a;
}

body[data-theme="minimal"] {
  --primary: #0f172a;
  --accent: #64748b;
  --soft: #fbfdff;
  --card-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
  --bg: #ffffff;
  --text: #111827;
}

body[data-theme="dark"] {
  --primary: #0ea5a4;
  --accent: #7c3aed;
  --soft: rgba(255, 255, 255, 0.03);
  --card-shadow: 0 10px 30px rgba(2, 6, 23, 0.6);
  --bg: #061223;
  --text: #e6eef6;
  --muted: #9fb3c8;
}

/* ---------------------------
  Global reset & helpers
---------------------------- */
/* * { box-sizing: border-box; }
html,body,#root { height: 100%; }
body {
  margin: 0;
  font-family: "Inter", "Segoe UI", Roboto, system-ui, -apple-system, "Helvetica Neue", Arial;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
} */

/* small container utility (matches your .container expectation) */
/* .container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
} */

/* ---------------------------
  HERO: audit-banner
---------------------------- */
.audit-banner {
  background-image: url("/assets/img/auditbg.png");
  background-size: cover;
  background-position: center;
  height: 70vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  filter: brightness(0.9);
}

/* overlay keeps same original class */
.banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.55));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

/* banner-content kept */
.banner-content {
  position: relative;
  z-index: 2;
  color: #fff;
  text-align: center;
  max-width: 900px;
  animation: heroFade 900ms cubic-bezier(.2, .8, .2, 1) both;
  padding: 0 12px;
  backdrop-filter: blur(0px);
}

/* headline */
.banner-content h1 {
  font-size: clamp(28px, 4.2vw, 48px);
  line-height: 1.05;
  margin: 0 0 12px 0;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: none;
  text-shadow: 0 8px 28px rgba(2, 8, 23, 0.45);
}

.banner-content p {
  font-size: clamp(14px, 1.4vw, 18px);
  margin: 0 auto;
  max-width: 760px;
  color: rgba(255, 255, 255, 0.92);
}

/* subtle particle / gradient accent (optional) */
.audit-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(800px 400px at 10% 20%, rgba(0, 56, 95, 0.12), transparent 12%),
    radial-gradient(600px 300px at 90% 80%, rgba(12, 102, 179, 0.08), transparent 12%);
  pointer-events: none;
}

/* hero keyframe */
@keyframes heroFade {
  from {
    transform: translateY(18px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ---------------------------
  INTRO: audit-intro
---------------------------- */
.audit-intro {
  text-align: center;
  padding: 64px 20px;
}

.audit-intro h2 {
  color: var(--primary);
  font-size: 28px;
  margin-bottom: 18px;
  font-weight: 700;
}

.audit-intro p {
  color: var(--muted);
  max-width: 900px;
  margin: 0 auto;
  font-size: 16px;
}

/* ---------------------------
  WHY: audit-why
---------------------------- */
.audit-why {
  background: var(--soft);
  padding: 56px 20px;
}

.audit-why .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.why-text {
  flex: 1 1 420px;
  min-width: 280px;
}

.why-text h2 {
  color: var(--primary);
  margin-bottom: 16px;
  font-size: 26px;
}

.why-text ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.why-text li {
  margin-bottom: 12px;
  color: var(--muted);
  line-height: 1.65;
  font-size: 15.5px;
}

/* image column kept */
.why-image {
  flex: 1 1 320px;
  display: flex;
  justify-content: flex-end;
  min-width: 260px;
}

.why-image img {
  width: 100%;
  max-width: 420px;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  display: block;
  object-fit: cover;
  transition: transform .45s ease, box-shadow .45s ease;
}

.why-image img:hover {
  transform: translateY(-6px) scale(1.01);
}

/* ---------------------------
  PROCESS: audit-process
---------------------------- */
.audit-process {
  text-align: center;
  padding: 48px 20px;
}

.audit-process h2 {
  color: var(--primary);
  font-size: 26px;
  margin-bottom: 20px;
  font-weight: 700;
}

.process-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 8px;
}

.audit-process-img {
  width: 70%;
  max-width: 560px;
  border-radius: 12px;
  /* box-shadow: var(--card-shadow); */
  transform-origin: center;
  animation: fadeZoom 1200ms cubic-bezier(.2, .8, .2, 1) both;
  /* mix-blend-mode: normal; */
  mix-blend-mode: multiply;
}

/* fadeZoom (keeps original intent) */
@keyframes fadeZoom {
  0% {
    opacity: 0;
    transform: scale(.94);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---------------------------
  SERVICES: audit-services
---------------------------- */
.audit-services {
  padding: 56px 20px;
  text-align: center;
}

.audit-services h2 {
  color: var(--primary);
  font-size: 26px;
  margin-bottom: 18px;
  font-weight: 700;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 22px;
}

.service-card {
  background: var(--bg);
  border: 1px solid rgba(15, 23, 42, 0.04);
  border-radius: 12px;
  padding: 26px;
  box-shadow: var(--card-shadow);
  text-align: left;
  transition: transform .36s ease, box-shadow .36s ease;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(2, 6, 23, 0.08);
}

.service-card h3 {
  color: var(--primary);
  margin-bottom: 8px;
  font-size: 18px;
}

.service-card p {
  color: var(--muted);
  margin-bottom: 10px;
}

.service-card ul {
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.7;
}

/* ---------------------------
  METHODOLOGY: audit-method
---------------------------- */
.audit-method {
  background: var(--primary);
  color: #fff;
  padding: 56px 20px;
  text-align: center;
  border-radius: 6px;
}

.audit-method h2 {
  margin-bottom: 30px;
  font-size: 28px;
  font-weight: 700;
}

/* FIXED GRID ALIGNMENT */
.method-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(240px, 1fr));
  gap: 26px;
  align-items: stretch;
  justify-items: center;
  margin-top: 20px;
}

/* FIXED BOX STYLE */
.method-step {
  background: rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  padding: 30px 22px;
  width: 100%;
  max-width: 320px;
  min-height: 240px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  transition: background 0.28s ease, transform 0.28s ease;
}

.method-step:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-6px);
}

/* NUMBER BADGE FIXED */
.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--primary);
  font-weight: 700;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-bottom: 14px;
  font-size: 18px;
}

/* MOBILE RESPONSIVE FIX */
@media (max-width: 992px) {
  .method-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 576px) {
  .method-grid {
    grid-template-columns: 1fr;
  }

  .method-step {
    max-width: 100%;
  }
}

/* ---------------------------
  BENEFITS: audit-benefits
---------------------------- */
.audit-benefits {
  padding: 48px 20px;
  text-align: center;
}

.audit-benefits h2 {
  color: var(--primary);
  font-size: 24px;
  margin-bottom: 16px;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.benefit-item {
  background: rgba(12, 102, 179, 0.06);
  color: var(--primary);
  border-radius: 8px;
  padding: 14px;
  font-weight: 600;
}

/* ---------------------------
  CTA: audit-cta
---------------------------- */
.audit-cta {
  background: linear-gradient(180deg, rgba(0, 56, 95, 0.04), rgba(0, 56, 95, 0.02));
  color: var(--text);
  text-align: center;
  padding: 48px 20px;
  margin-top: 24px;
}

.audit-cta h2 {
  font-size: 24px;
  color: var(--primary);
  margin-bottom: 10px;
}

.audit-cta p {
  max-width: 760px;
  margin: 0 auto 18px;
  color: var(--muted);
}

.btn-primary {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .22s ease, box-shadow .22s ease;
}

.btn-primary:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(3, 32, 50, 0.16);
}

/* ---------------------------
  small helpers & responsiveness
---------------------------- */
.my-5 {
  margin-top: 28px;
  margin-bottom: 28px;
}

@media (max-width: 1100px) {
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .method-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .why-image {
    justify-content: center;
  }
}

@media (max-width: 700px) {
  .audit-banner {
    height: 48vh;
  }

  .banner-content h1 {
    font-size: 26px;
  }

  .audit-intro {
    padding: 36px 18px;
  }

  .service-grid {
    grid-template-columns: 1fr;
  }

  .method-grid {
    grid-template-columns: 1fr;
  }

  .benefits-grid {
    grid-template-columns: 1fr;
  }

  .why-text {
    text-align: center;
  }

  .why-image {
    justify-content: center;
    padding-top: 18px;
  }

  .audit-process-img {
    width: 92%;
  }

  .audit-cta {
    padding: 36px 16px;
  }
}

/* small accessible focus outlines */
a:focus, button:focus {
  /* outline: 3px solid rgba(12, 102, 179, 0.14); */
  outline-offset: 3px;
}

/* ---------------------------
  End of file
---------------------------- */



/* / /Audit & Assurance css */


/* Career css */

:root {
  --blue: #00385f;
  --green: #65ad4b;
  --muted: #4a5560;
}

.career-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  /* font-family: Arial, sans-serif; */
  color: var(--muted);
}

/* Hero Section */
.hero {
  text-align: center;
  margin-bottom: 50px;
}

.hero h1 {
  font-size: 36px;
  margin-bottom: 15px;
  color: var(--blue);
}

.hero p {
  font-size: 18px;
  margin-bottom: 10px;
}

.hero .highlight {
  color: var(--green);
  cursor: pointer;
  font-weight: bold;
  transition: color 0.3s;
}

.hero .highlight:hover {
  color: darken(var(--green), 10%);
}

/* Highlights */
.highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 50px;
}

.highlight-card {
  flex: 1 1 30%;
  background: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.highlight-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.highlight-card h2 {
  font-size: 20px;
  margin-bottom: 10px;
  color: var(--blue);
}

.highlight-card ul {
  list-style: disc inside;
  color: var(--muted);
}

/* Filters */
.filters {
  text-align: center;
  margin-bottom: 30px;
}

.filters button {
  padding: 10px 20px;
  margin: 5px;
  border: none;
  border-radius: 25px;
  background: #e0e0e0;
  cursor: pointer;
  color: var(--muted);
  transition: background 0.3s, color 0.3s;
}

.filters button.active,
.filters button:hover {
  background: var(--blue);
  color: white;
}

/* Careers Grid */
.careers-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 50px;
}

.career-card {
  flex: 1 1 45%;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}

.career-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.career-card h3 {
  font-size: 22px;
  margin-bottom: 10px;
  color: var(--blue);
}

.career-card ul {
  list-style: disc inside;
  margin-bottom: 10px;
  color: var(--muted);
}

.apply-btn {
  padding: 10px 20px;
  background: var(--green);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s;
}

.apply-btn:hover {
  background: #4e943c;
}

/* Application Form */
.application-form {
  background: #f8f8f8;
  padding: 30px;
  border-radius: 8px;
}

.application-form h2 {
  text-align: center;
  margin-bottom: 15px;
  color: var(--blue);
}

.application-form p {
  text-align: center;
  margin-bottom: 25px;
  color: var(--muted);
}

.application-form form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.application-form input,
.application-form textarea {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  width: 100%;
  box-sizing: border-box;
}

.application-form textarea {
  grid-column: span 2;
  height: 100px;
}

.application-form button {
  grid-column: span 2;
  padding: 12px;
  background: var(--blue);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.application-form button:hover {
  background: #002a45;
}

/* Responsive */
@media (max-width: 768px) {
  .highlights {
    flex-direction: column;
  }

  .career-card {
    flex: 1 1 100%;
  }

  .application-form form {
    grid-template-columns: 1fr;
  }

  .application-form textarea,
  .application-form button {
    grid-column: span 1;
  }
}

/* section wrapper */
.typical-week {
  background: linear-gradient(180deg, #f7fbfd 0%, #fbfdff 100%);
  padding: 56px 20px;
  color: #123;
}

/* center container */
.container {
  max-width: 1180px;
  margin: 0 auto;
}

/* header */
.tw-header {
  max-width: 840px;
  margin-bottom: 28px;
}

.eyebrow {
  color: var(--primary);
  font-weight: 700;
  letter-spacing: 1.6px;
  font-size: 12px;
  margin-bottom: 8px;
}

.tw-title {
  font-size: 28px;
  margin: 0 0 8px 0;
  color: #10202a;
  line-height: 1.08;
}

.tw-sub {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

/* grid layout */
.tw-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 28px;
  align-items: start;
}

/* main card */
.tw-main-card {
  background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-2);
  border: 1px solid rgba(3, 56, 95, 0.04);
}

.tw-main-intro {
  color: #2e4b57;
  line-height: 1.6;
  margin: 0 0 16px 0;
  font-size: 15px;
}

/* bullets */
.tw-bullets {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 10px;
  list-style: disc;
  color: #2e4b57;
}

.tw-bullets li {
  font-size: 15px;
}

/* side cards container */
.tw-side-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

/* small card */
.tw-card {
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  border-radius: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(3, 56, 95, 0.10);
  box-shadow: var(--shadow-1);
  min-height: 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tw-card-title {
  margin: 0 0 6px 0;
  font-size: 14px;
  color: #063048;
  font-weight: 700;
}

.tw-card-body {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

/* responsive adjustments */
@media (max-width: 980px) {
  .tw-grid {
    grid-template-columns: 1fr;
  }

  .tw-side-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .tw-header {
    text-align: left;
  }

  .tw-title {
    font-size: 22px;
  }

  .tw-side-cards {
    grid-template-columns: 1fr;
  }

  .tw-main-card {
    padding: 20px;
  }

  .tw-card {
    padding: 12px;
  }
}

/* subtle accent - vertical bar on main card on wide screens */
@media (min-width: 900px) {
  .tw-main-card {
    position: relative;
    overflow: visible;
  }

  .tw-main-card::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 22px;
    width: 6px;
    height: calc(100% - 44px);
    background: linear-gradient(180deg, var(--primary), var(--green));
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(3, 56, 95, 0.06);
  }
}

/* .input-error {
  border: 2px solid #e63946 !important;
  background: #ffe8e8;
}

.error-text {
  color: #e63946;
  font-size: 14px;
  margin-top: -8px;
  margin-bottom: 10px;
} */




/* Form Container */
.application-form {
  /* max-width: 600px; */
  margin: 60px auto;
  padding: 40px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.08);
}

/* Form title */
.application-form h2 {
  margin-bottom: 5px;
  font-size: 26px;
  font-weight: 700;
}

.application-form p {
  margin-bottom: 25px;
  font-size: 15px;
  color: #444;
}

/* Inputs UI */
.application-form input,
.application-form textarea {
  width: 100%;
  padding: 14px;
  border: 1px solid #dcdcdc;
  border-radius: 10px;
  outline: none;
  font-size: 15px;
  transition: 0.2s;
  background: #fafafa;
}

.application-form input:focus,
.application-form textarea:focus {
  border-color: #0a66c2;
  background: #fff;
}

/* RED ERROR BORDER */
.input-error {
  border: 1px solid #e63946 !important;
  background: #fff5f5;
}

/* CLEAN ERROR MESSAGE STYLE */
.error-text {
  color: #e63946;
  font-size: 13px;
  margin-top: 4px;        /* Perfect small spacing */
  margin-bottom: 12px;    /* Keeps gap before next input */
  padding-left: 4px;
  font-weight: 500;
}

/* Submit Button */
/* .application-form button {
  width: 100%;
  padding: 14px;
  background: #0a66c2;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  margin-top: 10px;
  cursor: pointer;
  transition: 0.3s;
}

.application-form button:hover {
  background: #084a94;
} */






/* / / Career */


/* TaxationCompliance css */

.tax-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  background: #00385f;
  padding: 15px;
  flex-wrap: wrap;
}

.tax-tabs button {
  background: transparent;
  color: white;
  border: 2px solid #65ad4b;
  padding: 10px 25px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: 0.3s;
}

.tax-tabs button:hover {
  background: #65ad4b;
  color: #fff;
}

.tax-tabs .active {
  background: #65ad4b;
  color: #fff;
}

/* Content */
.tax-content {
  padding: 60px 20px;
}

.tax-content h2 {
  color: #00385f;
  margin-bottom: 15px;
}

.tax-content p {
  font-size: 1.1rem;
  color: #444;
  line-height: 1.7;
  margin-bottom: 20px;
}

.tax-content ul {
  list-style: none;
  padding: 0;
}

.tax-content li {
  padding-left: 25px;
  margin-bottom: 10px;
  position: relative;
}

.tax-content li::before {
  content: "✔";
  color: #65ad4b;
  position: absolute;
  left: 0;
  top: 0;
}

/* Animation */
.fade-in {
  animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .tax-hero {
    padding: 80px 15px;
  }

  .tax-tabs {
    flex-direction: column;
    align-items: center;
  }

  .tax-tabs button {
    width: 90%;
  }

  .tax-content {
    padding: 40px 15px;
  }
}

/* Wrapper */
.taxCreativeWrapper {
  padding: 70px 10%;
  background: #f5f8f4;
  /* font-family: "Inter", sans-serif; */
}

/* Header */
.taxCreativeHeader {
  text-align: center;
  margin-bottom: 50px;
}

.taxTag {
  background: #00385f;
  padding: 6px 14px;
  border-radius: 20px;
  color: white;
  font-size: 14px;
  display: inline-block;
  margin-bottom: 12px;
}

.taxCreativeHeader h2 {
  font-size: 34px;
  font-weight: 700;
  color: #00385f;
}

.taxCreativeHeader p {
  width: 70%;
  margin: auto;
  font-size: 17px;
  color: #444;
  margin-top: 12px;
}

/* Four Grid Section */
.taxGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 25px;
  margin-top: 40px;
}

.taxGridItem {
  background: white;
  padding: 25px;
  border-radius: 14px;
  border: 1px solid #e2e2e2;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.05);
  transition: 0.3s;
}

.taxGridItem:hover {
  transform: translateY(-5px);
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1);
}

.taxGridItem h4 {
  color: #00385f;
  margin-bottom: 10px;
}

/* Highlight Strip */
.taxHighlightStrip {
  background: #eaf4e7;
  padding: 25px;
  border-left: 5px solid #3a7934;
  margin: 50px 0;
  text-align: center;
  border-radius: 10px;
  font-weight: 500;
  font-size: 17px;
  color: #2f4f2b;
}

/* Three Cards */
.taxCardSection {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
}

.taxCard {
  background: white;
  padding: 30px;
  border-radius: 14px;
  border: 1px solid #dcdcdc;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.05);
}

.taxCard h4 {
  margin-bottom: 12px;
  font-size: 20px;
  color: #00385f;
  font-weight: 600;
}

.taxCard ul li {
  margin-bottom: 8px;
  color: #333;
}

/* CTA Box */
.taxCTABox {
  background: linear-gradient(135deg, #3a7934, #1f4920);
  padding: 40px;
  color: white;
  text-align: center;
  border-radius: 16px;
  margin-top: 60px;
}

.taxCTAButton {
  margin-top: 20px;
  padding: 12px 32px;
  background: white;
  color: #3a7934;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  font-weight: 600;
  border: none;
  transition: 0.3s;
}

.taxCTAButton:hover {
  background: #e8f4e6;
}


.tax-main {
  width: 90%;
  margin: auto;
  /* font-family: "Inter", sans-serif; */
}

/* SECTION STYLING */
.compact-section {
  padding: 40px 0;
}

.compact-section.colored {
  background: #00385f;
  color: #fff;
}

.compact-section.colored2 {
  background: #f3f7fb;
}

/* HEADING */
.heading {
  font-size: 26px;
  font-weight: 700;
  color: #00385f;
  margin-bottom: 12px;
}

.heading.light {
  color: #fff;
}

/* PARAGRAPHS */
.text {
  font-size: 16px;
  color: #444;
  margin-bottom: 10px;
}

/* OFFER SECTION */
.offer-list {
  margin-top: 20px;
}

.offer-box {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
}

.offer-box .dot {
  width: 10px;
  height: 10px;
  background: #65ad4b;
  border-radius: 50%;
  margin-right: 12px;
  margin-top: 5px;
}

/* APPROACH SECTION */
.approach-list {
  margin-top: 15px;
}

.approach-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.approach-item .line {
  width: 14px;
  height: 14px;
  border: 3px solid #00385f;
  border-radius: 50%;
  margin-right: 12px;
}

/* BENEFITS */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.benefit-card {
  padding: 16px;
  background: #fff;
  border-left: 4px solid #00385f;
  border-radius: 6px;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
}

/* WHO WE SERVE */
.serve-grid {
  margin-top: 15px;
}

.serve-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
}

.serve-item .dot2 {
  width: 10px;
  height: 10px;
  background: #00385f;
  border-radius: 50%;
  margin-right: 12px;
  margin-top: 5px;
}

/* CTA */
.cta {
  background: #00385f;
  color: #fff;
  text-align: center;
  padding: 35px 20px;
  margin-top: 20px;
  border-radius: 8px;
}

.cta-btn {
  margin-top: 15px;
  padding: 12px 32px;
  background: #65ad4b;
  color: #fff;
  border: none;
  border-radius: 40px;
  font-weight: 600;
  cursor: pointer;
}


/* taxation-pro.css - Ultra Premium Corporate (Option A) */

/* Core tokens */
:root {
  --blue: #00385f;
  --green: #65ad4b;
  --muted: #4a5560;
  --card-shadow: 0 8px 20px rgba(0, 56, 95, 0.06);
  --radius: 12px;
  --container-width: 1150px;
  /* font-family: "Inter", "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; */
}

.tp-section {
  padding: 56px 0;
  background: #fff;
  color: #0f1720;
}

/* layout container */
.tp-container {
  width: 92%;
  max-width: var(--container-width);
  margin: 0 auto;
}

/* ---------- INTRO ---------- */
.tp-intro-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 28px;
  align-items: start;
}

.tp-kicker {
  display: inline-block;
  color: var(--blue);
  font-weight: 700;
  letter-spacing: 0.6px;
  margin-bottom: 10px;
  font-size: 13px;
}

.tp-h2 {
  font-size: 28px;
  color: var(--blue);
  margin: 6px 0 18px;
  line-height: 1.25;
  font-weight: 700;
}

.tp-lead {
  font-size: 16px;
  color: var(--muted);
  margin-bottom: 14px;
}

.tp-text {
  color: #263238;
  font-size: 15.6px;
  margin-bottom: 12px;
}

/* aside box */
.tp-intro-right .tp-box {
  background: #fff;
  border-radius: var(--radius);
  padding: 20px;
  border: 1px solid rgba(0, 56, 95, 0.05);
  box-shadow: var(--card-shadow);
}

.tp-box-title {
  color: var(--blue);
  font-size: 16px;
  margin-bottom: 8px;
  font-weight: 700;
}

.tp-box-text {
  font-size: 14.6px;
  color: #334;
  margin-bottom: 12px;
}

.tp-quicklist {
  list-style: none;
  padding: 0;
  margin: 0 0 12px 0;
}

.tp-quicklist li {
  font-size: 14.5px;
  padding: 6px 0;
  color: #24303a;
}

/* CTA */
.tp-box-cta {
  margin-top: 12px;
}

.tp-btn {
  display: inline-block;
  background: var(--green);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  border: none;
}

/* ---------- WHAT WE OFFER / CARDS ---------- */
.tp-offer {
  background: #fbfdfe;
}

.tp-section-title {
  text-align: left;
  font-size: 20px;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 18px;
}

/* cards grid */
.tp-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 12px;
}

.tp-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #fff;
  border-radius: 10px;
  padding: 18px;
  border: 1px solid rgba(0, 56, 95, 0.04);
  box-shadow: var(--card-shadow);
}

.tp-card-icon {
  min-width: 44px;
  height: 44px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(101, 173, 75, 0.08), rgba(0, 56, 95, 0.03));
  color: var(--green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
  border: 1px solid rgba(101, 173, 75, 0.12);
}

.tp-card-body h4 {
  margin: 0 0 6px 0;
  font-size: 16px;
  color: var(--blue);
  font-weight: 700;
}

.tp-card-body p {
  margin: 0;
  font-size: 14.6px;
  color: #344;
}

/* ---------- APPROACH ---------- */
.tp-approach {
  background: #fff;
}

.tp-approach-wrap {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 26px;
  align-items: start;
  margin-top: 12px;
}

.tp-approach-list {
  margin: 0;
  padding-left: 18px;
  color: #2b3b43;
  font-size: 15.6px;
  line-height: 1.7;
}

.tp-approach-list li {
  margin-bottom: 12px;
  position: relative;
  padding-left: 8px;
}

.tp-approach-note {
  background: #fbfdfe;
  border-radius: 10px;
  padding: 18px;
  border: 1px solid rgba(0, 56, 95, 0.04);
  box-shadow: var(--card-shadow);
  color: #263238;
  font-size: 15px;
}

/* ---------- BENEFITS ---------- */
.tp-benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 14px;
}

.tp-benefit {
  background: #fff;
  border-radius: 10px;
  padding: 18px;
  border-left: 4px solid var(--blue);
  box-shadow: var(--card-shadow);
}

.tp-benefit h4 {
  margin: 0 0 8px 0;
  color: var(--blue);
  font-size: 16px;
  font-weight: 700;
}

.tp-benefit p {
  margin: 0;
  color: #2b3b43;
  font-size: 14.6px;
}

/* ---------- WHO WE SERVE ---------- */
.tp-who-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.tp-who-item {
  background: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  display: inline-block;
  border: 1px solid rgba(0, 56, 95, 0.06);
  color: var(--blue);
  font-weight: 700;
  text-align: center;
}

/* ---------- TRUST / CTA ---------- */
.tp-trust-inner {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 28px;
  align-items: center;
  margin-top: 12px;
}

.tp-contact-title {
  margin-top: 10px;
  font-size: 16px;
  color: var(--blue);
  font-weight: 700;
}

.tp-cta-btn {
  display: inline-block;
  margin-top: 10px;
  background: var(--green);
  color: #fff;
  padding: 12px 18px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  border: none;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 992px) {
  .tp-intro-grid, .tp-approach-wrap, .tp-trust-inner {
    grid-template-columns: 1fr;
  }

  .tp-cards, .tp-benefit-grid, .tp-who-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .tp-cards, .tp-benefit-grid, .tp-who-grid {
    grid-template-columns: 1fr;
  }

  .tp-section {
    padding: 36px 0;
  }

  .tp-h2 {
    font-size: 22px;
  }
}



/* // TaxationCompliance */


/* CorporateCompliance css */

/* Corporate & ROC Compliances page styles */

/* Basic container width (you already have .container in main CSS; keep for safety) */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* HERO */
.cc-hero {
  background-position: center;
  background-size: cover;
  min-height: 52vh;
  display: flex;
  align-items: center;
  color: #fff;
}

.cc-hero-overlay {
  width: 100%;
  background: rgba(0, 56, 95, 0.65);
  padding: 60px 0;
}

.cc-hero h1 {
  font-size: 36px;
  color: #fff;
  margin-bottom: 12px;
  text-align: center;
}

.cc-hero p {
  color: #e9f7f4;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  font-size: 16px;
}

/* INTRO */
.cc-intro {
  padding: 40px 20px;
  text-align: center;
}

.cc-intro .lead {
  color: #444;
  font-size: 16px;
  margin-top: 12px;
  line-height: 1.7;
}

/* GENERAL SECTION */
.cc-section {
  padding: 60px 0;
  background: #fff;
}

.cc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
}

/* reverse layout for alternate section */
.cc-grid.reverse {
  direction: ltr;
}

.cc-grid.reverse .cc-media {
  order: 2;
}

.cc-grid.reverse .cc-text {
  order: 1;
}

/* Media (image) */
.cc-media img {
  width: 100%;
  height: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* Text block */
.cc-text h3 {
  color: #00385f;
  font-size: 22px;
  margin-bottom: 12px;
}

.cc-text p {
  color: #333;
  font-size: 15px;
  margin-bottom: 12px;
  line-height: 1.7;
}

.cc-text ul {
  list-style: disc;
  padding-left: 20px;
  color: #444;
}

.cc-text ul li {
  margin-bottom: 8px;
}

/* CTA */
.cc-cta {
  background: linear-gradient(90deg, #00385f 0%, #065a8a 100%);
  color: #fff;
  padding: 34px 0;
}

.cta-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.cta-wrap h3 {
  margin: 0;
  font-size: 20px;
}

.cta-wrap p {
  margin: 6px 0 0;
  color: #e6f4f1;
}

.btn-primary {
  display: inline-block;
  background: #65ad4b;
  color: #fff;
  padding: 12px 22px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .cc-grid {
    grid-template-columns: 1fr;
  }

  .cc-media img {
    max-height: 300px;
  }

  .cc-hero h1 {
    font-size: 30px;
  }
}

@media (max-width: 576px) {
  .cc-hero {
    min-height: 40vh;
  }

  .cc-hero-overlay {
    padding: 30px 0;
  }

  .cc-hero h1 {
    font-size: 24px;
  }

  .cc-hero p {
    font-size: 14px;
  }

  .cta-wrap {
    text-align: center;
  }

  .cta-wrap>div {
    width: 100%;
  }

  .btn-primary {
    width: 100%;
    text-align: center;
  }
}


/* // CorporateCompliance css */



/* BusinessAdvisory css */

/* Business Advisory & CFO Page Styles */

/* HERO */
.ba-hero {
  background-size: cover;
  background-position: center;
  position: relative;
  color: #fff;
}

.ba-hero-overlay {
  background: rgba(0, 56, 95, 0.75);
  padding: 90px 20px;
}

.ba-hero h1 {
  font-size: 40px;
  font-weight: 700;
}

.ba-hero p {
  font-size: 18px;
  color: #eaf6f1;
  margin-top: 10px;
}

/* INTRO */
.ba-intro h2 {
  color: #00385f;
  font-size: 28px;
  font-weight: 600;
}

.ba-intro .lead {
  color: #444;
  font-size: 16px;
  line-height: 1.7;
  margin-top: 10px;
}

/* CONTENT */
.ba-content {
  padding: 20px 0 60px;
}

.ba-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 56, 95, 0.08);
  padding: 30px;
  height: 100%;
  border-top: 4px solid #00385f;
  transition: all 0.3s ease;
}

.ba-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 35px rgba(0, 56, 95, 0.15);
}

.ba-card h4 {
  color: #00385f;
  font-weight: 600;
  margin-bottom: 10px;
}

.ba-card p {
  color: #444;
  line-height: 1.7;
  margin-bottom: 8px;
}

.ba-card ul {
  margin: 0;
  padding-left: 20px;
  color: #333;
}

.ba-card ul li {
  margin-bottom: 6px;
}

/* HIGHLIGHT SECTION */
.ba-highlight {
  background: #f4faf3;
  border-left: 6px solid #65ad4b;
  border-radius: 8px;
  padding: 30px;
}

.ba-highlight h3 {
  color: #00385f;
  margin-bottom: 12px;
}

.ba-highlight ul {
  padding-left: 20px;
  color: #333;
}

.ba-highlight ul li {
  margin-bottom: 6px;
}

/* CTA */
.ba-cta {
  background: linear-gradient(90deg, #00385f 0%, #065a8a 100%);
  color: #fff;
  padding: 60px 20px;
}

.ba-cta h3 {
  font-size: 26px;
  margin-bottom: 10px;
}

.ba-cta p {
  font-size: 16px;
  color: #eaf6f1;
  max-width: 800px;
  margin: 0 auto 20px;
}

.btn-primary {
  background: #65ad4b;
  padding: 12px 30px;
  border-radius: 6px;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background: #549b3e;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .ba-hero h1 {
    font-size: 28px;
  }

  .ba-hero p {
    font-size: 15px;
  }

  .ba-card {
    padding: 20px;
  }

  .ba-cta h3 {
    font-size: 22px;
  }
}


/* // BusinessAdvisory css */



/* BankingFinance css */

/* Banking & Project Finance Page Styles */

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* HERO */
.bf-hero {
  background-position: center;
  background-size: cover;
  min-height: 50vh;
  display: flex;
  align-items: center;
  color: #fff;
}

.bf-hero-overlay {
  width: 100%;
  background: rgba(0, 56, 95, 0.7);
  padding: 60px 0;
}

.bf-hero h1 {
  font-size: 36px;
  text-align: center;
  margin-bottom: 10px;
}

.bf-hero p {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  font-size: 16px;
  color: #eaf6f1;
}

/* INTRO */
.bf-intro {
  padding: 40px 0;
  text-align: center;
}

.bf-intro h2 {
  color: #00385f;
  font-size: 26px;
}

.bf-intro .lead {
  color: #444;
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.7;
}

/* SECTION */
.bf-section {
  padding: 60px 0;
}

.bf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
}

.bf-grid.reverse .bf-media {
  order: 2;
}

.bf-grid.reverse .bf-text {
  order: 1;
}

.bf-media img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.bf-text h3 {
  color: #00385f;
  font-size: 22px;
  margin-bottom: 12px;
}

.bf-text p {
  color: #333;
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 10px;
}

.bf-text ul {
  list-style: disc;
  padding-left: 20px;
  color: #444;
}

.bf-text ul li {
  margin-bottom: 6px;
}

/* CTA */
.bf-cta {
  background: linear-gradient(90deg, #00385f 0%, #065a8a 100%);
  color: #fff;
  padding: 40px 0;
}

.cta-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.btn-primary {
  background: #65ad4b;
  color: #fff;
  padding: 12px 22px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .bf-grid {
    grid-template-columns: 1fr;
  }

  .bf-hero h1 {
    font-size: 30px;
  }
}

@media (max-width: 576px) {
  .bf-hero {
    min-height: 42vh;
  }

  .bf-hero-overlay {
    padding: 40px 0;
  }

  .bf-hero h1 {
    font-size: 24px;
  }

  .bf-hero p {
    font-size: 14px;
  }

  .cta-wrap {
    text-align: center;
  }

  .btn-primary {
    width: 100%;
  }
}


/* MAIN WRAPPER */
.bf-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  margin: 40px auto;
}

.bf-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  border-top: 5px solid #00385f;
  transition: all 0.3s ease;
}

.bf-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
}

.bf-card h3 {
  color: #00385f;
  font-size: 22px;
  margin-bottom: 12px;
  font-weight: 700;
}

.bf-card p {
  font-size: 15px;
  color: #444;
  margin-bottom: 12px;
  line-height: 1.7;
}

.bf-card ul {
  padding-left: 18px;
  color: #333;
}

.bf-card ul li {
  margin-bottom: 6px;
}


/* CTA */
.bf-cta {
  background: linear-gradient(90deg, #00385f, #0768a0);
  color: #fff;
  padding: 50px 0;
}

.btn-primary {
  padding: 12px 26px;
  background: #65ad4b;
  border-radius: 8px;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .bf-main {
    grid-template-columns: 1fr;
  }

  .bf-points {
    grid-template-columns: 1fr;
  }
}



/*  // BankingFinance  css*/


/* CapitalMarketSEBI css */


.capital-market-banner {
  background: linear-gradient(to right, #0c3c60, #155f8d);
  color: #fff;
  text-align: center;
  padding: 80px 20px;
}

.capital-market-banner h1 {
  font-size: 40px;
  font-weight: bold;
  margin-bottom: 15px;
}

.capital-market-banner p {
  font-size: 18px;
  max-width: 800px;
  margin: 0 auto;
}

.capital-market-content {
  padding: 80px 20px;
  background-color: #f8f9fa;
}

.capital-market-content h2 {
  text-align: center;
  font-size: 32px;
  color: #0c3c60;
  margin-bottom: 40px;
}

.capital-market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 25px;
}

.service-card {
  background: #fff;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.service-card:hover {
  transform: translateY(-5px);
}

.service-card h3 {
  color: #155f8d;
  margin-bottom: 10px;
}

.capital-market-highlight {
  padding: 70px 20px;
  background: #0c3c60;
  color: #fff;
  text-align: center;
}

.capital-market-highlight h2 {
  font-size: 30px;
  margin-bottom: 25px;
}

.capital-market-highlight ul {
  list-style: none;
  padding: 0;
  max-width: 700px;
  margin: 0 auto;
  text-align: left;
}

.capital-market-highlight li {
  font-size: 18px;
  margin-bottom: 12px;
  position: relative;
  padding-left: 25px;
}

.capital-market-highlight li::before {
  content: "✔";
  color: #00d084;
  position: absolute;
  left: 0;
}



/* / /CapitalMarketSEBI */


/* InternationalNRI css */


/* HERO SECTION */
.about-hero {
  position: relative;
  padding: 120px 20px;
  background-size: cover;
  background-position: center;
  color: #fff;
}

.about-hero .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
}

.about-hero-text {
  position: relative;
  z-index: 2;
  text-align: center;
}

.about-hero-text h1 {
  font-size: 42px;
  margin-bottom: 10px;
}

.about-hero-text p {
  font-size: 20px;
  max-width: 800px;
  margin: 0 auto;
}

/* MAIN SERVICES SECTION */
.nri-services {
  background: #f8f9fa;
  padding: 80px 20px;
}

.nri-services h2 {
  text-align: center;
  color: #09304d;
  font-size: 32px;
  margin-bottom: 25px;
}

.nri-services p {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 40px auto;
  color: #555;
  font-size: 18px;
  line-height: 1.6;
}

/* GRID */
.nri-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 25px;
}

.service-card {
  background: #fff;
  border-radius: 14px;
  padding: 25px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: 0.3s;
}

.service-card:hover {
  transform: translateY(-6px);
}

.service-card h3 {
  color: #155f8d;
  margin-bottom: 10px;
}

/* WHY CHOOSE US */
.nri-highlight {
  padding: 70px 20px;
  background: #0c3c60;
  color: #fff;
  text-align: center;
}

.nri-highlight ul {
  max-width: 750px;
  list-style: none;
  padding: 0;
  margin: 0 auto;
  text-align: left;
}

.nri-highlight li {
  font-size: 18px;
  margin-bottom: 12px;
  padding-left: 25px;
  position: relative;
}

.nri-highlight li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #00d084;
}

/* FINAL CTA BANNER */
.nri-banner {
  background: linear-gradient(to right, #09304d, #155f8d);
  padding: 70px 20px;
  text-align: center;
  color: #fff;
}

.nri-banner h1 {
  font-size: 36px;
  margin-bottom: 15px;
}

.nri-banner p {
  font-size: 18px;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
}


.nri-expand {
  background: linear-gradient(90deg, #0c3c60, #135a84);
  /* border-radius: 12px; */
  margin: 60px 0;
}

.nri-expand h2 {
  font-size: 32px;
  color: #ffffff;
}

.nri-expand p {
  font-size: 18px;
  color: #e6f4ff;
  max-width: 900px;
  margin: 0 auto 15px;
}

.nri-expand p:last-child {
  font-weight: bold;
  color: #a6ffcb;
}


/* // InternationalNRI css */


/* OutsourcingOther css */

/* ===== Hero Section ===== */
.about-hero {
  background: center/cover no-repeat;
  color: #fff;
  text-align: center;
  padding: 120px 20px;
  position: relative;
}

.about-hero .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
}

.about-hero-text {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
}

.about-hero-text h1 {
  font-size: 46px;
  font-weight: 700;
  margin-bottom: 15px;
}

.about-hero-text p {
  font-size: 18px;
  line-height: 1.6;
}

.outsourcing-intro {
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fb 100%);
  padding: 80px 20px;
  text-align: center;
}

.outsourcing-intro h2 {
  color: #0c2461;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 15px;
}

.outsourcing-intro p {
  color: #555;
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.8;
}

.outsourcing-services {
  padding: 70px 0;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
}

.service-card {
  background: #fff;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.service-card:hover {
  transform: translateY(-8px);
}

.service-card h3 {
  color: #0c2461;
  font-size: 20px;
  margin-bottom: 10px;
}

.service-card p, .service-card ul {
  color: #555;
  font-size: 15px;
  line-height: 1.6;
}

.service-card ul {
  padding-left: 20px;
}

.outsourcing-why {
  background: #0c3c60;
  color: #fff;
  padding: 80px 20px;
  text-align: center;
}

.outsourcing-why h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 25px;
}

.outsourcing-why ul {
  list-style: none;
  padding: 0;
  font-size: 17px;
  line-height: 2;
  max-width: 700px;
  margin: 0 auto;
  text-align: left;
}

.outsourcing-why li::before {
  content: "✔";
  color: #00d084;
  margin-right: 10px;
}

.outsourcing-partner {
  background: #f9fafc;
  text-align: center;
  padding: 70px 20px;
}

.outsourcing-partner h2 {
  color: #0c2461;
  font-weight: 700;
  margin-bottom: 15px;
}

.outsourcing-partner p {
  color: #555;
  font-size: 16px;
  line-height: 1.8;
  max-width: 900px;
  margin: 0 auto;
}

.outsourcing-contact {
  color: #fff;
}

@media (max-width: 768px) {
  .about-hero-text h1 {
    font-size: 32px;
  }

  .about-hero-text p {
    font-size: 16px;
  }

  .outsourcing-intro h2,
  .outsourcing-why h2,
  .outsourcing-partner h2 {
    font-size: 26px;
  }
}


/* // OutsourcingOther */







/* DepositoryParticipantAudit css  */

.about-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  color: white;
  text-align: center;
  padding: 120px 20px;
}

.about-hero .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.about-hero-text {
  position: relative;
  z-index: 1;
}

.about-hero-text h1 {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 15px;
}

.about-hero-text p {
  font-size: 18px;
  max-width: 700px;
  margin: 0 auto;
  color: #e2e8f0;
}

/* ===== SERVICE DETAILS ===== */
.service-details {
  max-width: 1100px;
  margin: auto;
}

.section-title {
  font-size: 28px;
  font-weight: 700;
  color: #00385f;
  margin-bottom: 20px;
}

.service-text {
  font-size: 17px;
  color: #555;
  line-height: 1.8;
  margin-bottom: 20px;
}

.service-list {
  list-style: none;
  padding-left: 0;
}

.service-list li {
  font-size: 16px;
  margin-bottom: 12px;
  color: #333;
  position: relative;
  padding-left: 25px;
}

.service-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: #65ad4b;
  font-weight: bold;
}

/* Responsive */
@media (max-width: 768px) {
  .about-hero-text h1 {
    font-size: 32px;
  }

  .service-text {
    font-size: 15px;
  }
}


.dp-section {
  max-width: 1150px;
}

/* CARD */
.dp-card {
  background: #fff;
  padding: 25px;
  border-radius: 8px;
  border-top: 5px solid #00385f;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
}

/* TITLES */
.dp-section-title,
.dp-card h3,
.dp-card h2 {
  color: #00385f;
  font-weight: 700;
}

.dp-card h4 {
  color: #00385f;
  font-size: 18px;
  margin-bottom: 10px;
  font-weight: 600;
}

/* Paragraph */
.dp-card p {
  color: #444;
  line-height: 1.7;
  margin-bottom: 10px;
}

/* List */
.dp-card ul {
  padding-left: 0;
}

.dp-card ul li {
  list-style: none;
  padding-left: 22px;
  position: relative;
  margin-bottom: 6px;
  font-size: 15px;
  color: #333;
}

.dp-card ul li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: #65ad4b;
  font-weight: bold;
}


/* //DepositoryParticipantAudit css */



/* SystemAuditCapitalMarket css */

/* SystemAuditCapitalMarket.css
   Scoped styles for System Audit page
   - Uses brand colors: #00385f (primary), #65ad4b (accent)
   - Does NOT modify .tax-tabs styles (keeps tabs unchanged)
*/

/* HERO (keeps your about-hero class name) */
.about-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  padding: 110px 20px;
  color: #fff;
  text-align: center;
}

.about-hero .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.about-hero-text {
  position: relative;
  z-index: 2;
}

.about-hero-text h1 {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 12px;
}

.about-hero-text p {
  color: #e6eef6;
  font-size: 16px;
  max-width: 820px;
  margin: 0 auto;
}

/* SERVICE CONTENT WRAPPER */
.service-content {
  max-width: 1150px;
  margin: 40px auto;
  color: #333;
}

/* Intro card */
.svc-intro.card-border {
  background: #fff;
  padding: 22px 24px;
  border-radius: 8px;
  border-top: 6px solid #00385f;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}

.section-subtitle {
  color: #00385f;
  font-weight: 700;
  margin-bottom: 12px;
}

/* SERVICE CARDS (Bootstrap grid handles cols) */
.svc-card {
  background: #ffffff;
  border-radius: 8px;
  padding: 18px 20px;
  border: 1px solid rgba(0, 56, 95, 0.06);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.svc-card h4 {
  color: #00385f;
  font-size: 18px;
  margin-bottom: 10px;
  font-weight: 700;
}

.svc-card p {
  margin-bottom: 8px;
  color: #444;
}

.svc-card ul {
  padding-left: 18px;
  margin-bottom: 8px;
}

.svc-card ul li {
  margin-bottom: 8px;
  position: relative;
  padding-left: 20px;
  color: #333;
}

.svc-card ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: #65ad4b;
  font-weight: 700;
}

/* small note */
.small-note {
  font-size: 13px;
  color: #666;
  margin-top: 8px;
}

/* CTA BOX */
.cta-box {
  background: linear-gradient(90deg, rgba(0, 56, 95, 0.06), rgba(6, 88, 138, 0.02));
  border-left: 6px solid #00385f;
  padding: 24px;
  border-radius: 8px;
  text-align: center;
}

.cta-box h3 {
  color: #00385f;
  font-size: 20px;
  margin-bottom: 8px;
}

.cta-box p {
  color: #444;
  margin-bottom: 12px;
}

.btn-primary {
  background: #00385f;
  color: #fff;
  padding: 10px 24px;
  border-radius: 6px;
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s;
}

.btn-primary:hover {
  background: #063a63;
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .about-hero {
    padding: 80px 20px;
  }

  .about-hero-text h1 {
    font-size: 22px !important;
  }

  .svc-card {
    padding: 16px;
  }
}


/* // SystemAuditCapitalMarket css */


/* ExchangeSEBICompliances css */

.exchange-banner {
  background: linear-gradient(135deg, #0061a8, #0096d6);
  padding: 100px 20px;
}

.exchange-banner h1 {
  font-size: 2.5rem;
}

.exchange-banner p {
  max-width: 800px;
  margin: 0 auto;
}

.cta-box {
  background-color: #f1f8ff;
  border-left: 5px solid #0061a8;
}


/* //ExchangeSEBICompliances css  */


/* IPOLisitingSupport css  */
.ipo-banner {
  background: linear-gradient(135deg, #005c97, #363795);
  padding: 100px 20px;
}

.ipo-banner h1 {
  font-size: 2.5rem;
}

.ipo-banner p {
  max-width: 800px;
  margin: 0 auto;
}

.cta-box {
  background-color: #f7f9ff;
  border-left: 5px solid #005c97;
}

.dp-card ul {
  padding-left: 18px;
  margin-top: 10px;
}

.dp-card ul li {
  margin-bottom: 6px;
  color: #444;
}


/*  / /IPOLisitingSupport css  */



/* DirectTax css  */

/* HERO IMAGE FIX */
.directtax-hero {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  /* height: 60vh; */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Overlay */
.overlay {
  position: absolute;
  inset: 0;
  /* background: rgba(0, 56, 95, 0.65); */
}

/* Text */
.about-hero-text {
  z-index: 3;
  text-align: center;
  color: #fff;
}

/* Animation */
.fade-in-up {
  animation: fadeUp 1.1s ease-in-out;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==== PAGE HEADING ==== */
.directtx-heading {
  font-size: 32px;
  color: #00385f;
  border-left: 5px solid #65ad4b;
  padding-left: 12px;
  font-weight: 600;
  margin-bottom: 20px;
}

/* ==== CARD ==== */
.directtx-card {
  border: 2px solid #65ad4b;
  border-radius: 12px;
  transition: 0.3s ease;
  background: #fff;
}

.directtx-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Fade animation for cards */
.fade-card {
  animation: fadeCard 0.8s ease;
}

@keyframes fadeCard {
  from {
    opacity: 0;
    transform: translateY(25px);
  }

  to {
    opacity: 1;
  }
}

/* List */
.list-group-item {
  background: #f6fff3;
  border-left: 5px solid #65ad4b;
  font-size: 16px;
  color: #00385f;
  margin-bottom: 10px;
}

/* Button */
.contact-btn {
  background: #65ad4b;
  color: #fff;
  border-radius: 8px;
  transition: 0.3s ease;
}

.contact-btn:hover {
  background: #4c8c3c;
  transform: translateY(-3px);
}




/*  / / DirectTax css  */

/* IndirectTax css  */

.about-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  color: white;
  text-align: center;
  padding: 120px 20px;
}

.about-hero .overlay {
  position: absolute;
  inset: 0;
  /* background: rgba(0, 0, 0, 0.6); */
}

.about-hero-text {
  position: relative;
  z-index: 2;
  max-width: 750px;
  margin: 0 auto;
}

.about-hero-text h1 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 15px;
}

.about-hero-text p {
  font-size: 18px;
  line-height: 1.6;
  color: #f1f1f1;
}

.service-details {
  background: #f9fbfd;
}

.service-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 25px 20px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  height: 100%;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.service-card h4 {
  color: #00385f;
  font-weight: 700;
  margin-bottom: 10px;
  font-size: 20px;
}

.service-card p {
  color: #555;
  font-size: 15px;
  line-height: 1.7;
}

@media (max-width: 768px) {
  .about-hero-text h1 {
    font-size: 34px;
  }

  .about-hero-text p {
    font-size: 16px !important;
  }
}

.directtx-section .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0, 56, 95, 0.15);
  transition: all 0.3s ease;
}

/* / / IndirectTax css  */


/* popup css */

.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.popup-box {
  background: #fff;
  padding: 30px;
  width: 350px;
  border-radius: 14px;
  text-align: center;
  animation: popupScale 0.3s ease;
}

.popup-box h3 {
  color: #28a745;
  margin-bottom: 10px;
}

.close-btn {
  margin-top: 15px;
  padding: 10px 25px;
  background: #28a745;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
}

.close-btn:hover {
  background: #208837;
}

@keyframes popupScale {
  from {
    transform: scale(0.7);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* / / popup css */



/* EngagementProcess css  */

/* Engagement Process Section */
.engagement-section {
  background: #f2f6fc;
  padding: 70px 0;
  text-align: center;
}

.engagement-tag {
  color: #00385f;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 10px;
  font-size: 13px;
}

.engagement-title {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 12px;
  color: #14202B;
}

.engagement-subtitle {
  color: #6d7b88;
  font-size: 15px;
  max-width: 650px;
  margin: 0 auto 40px auto;
  line-height: 1.6;
}

/* White Box */
.engagement-section {
  padding: 56px 0;
  background: transparent;
}

.engagement-box {
  background: #ffffff;
  display: flex;
  justify-content: space-between;
  /* gap: 25px; */
  padding: 28px;
  border-radius: 22px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  align-items: stretch; /* ensure equal height children */
  flex-wrap: wrap; /* allow wrapping on small screens */
}

/* Each Step */
.engagement-item {
  flex: 1 1 220px; /* grow, shrink, base width */
  text-align: left;
  padding: 10px 14px;
  min-width: 200px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* number badge */
.step-number {
  width: 44px;
  height: 44px;
  border: 2px solid #65ad4b;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  color: #65ad4b;
  margin-bottom: 8px;
  background: #fff;
  flex-shrink: 0;
  box-shadow: 0 6px 12px rgba(101,173,75,0.08);
}

/* title & text */
.step-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: #14202B;
}

.step-text {
  font-size: 14px;
  color: #6d7b88;
  line-height: 1.6;
  margin: 0;
  flex-grow: 1; /* push to bottom for equal height cards */
}

/* Hover / focus */
.engagement-item:hover,
.engagement-item:focus-within {
  transform: translateY(-6px);
  transition: transform .22s ease;
}

/* small screen: stack vertically and center text */
@media (max-width: 992px) {
  .engagement-box {
    flex-direction: column;
    gap: 18px;
    padding: 22px;
  }

  .engagement-item {
    text-align: center;
    align-items: center;
    padding: 18px;
    max-width: none;
  }

  .step-number {
    margin-bottom: 12px;
  }

  .step-title { font-size: 17px; }
  .step-text { text-align: center; }
}

/* extra small phones */
@media (max-width: 420px) {
  .engagement-box {
    padding: 16px;
    gap: 12px;
  }
  .step-number { width: 40px; height: 40px; font-size: 14px; }
  .step-title { font-size: 15px; }
  .step-text { font-size: 14px; }
}



/* / / /EngagementProcess css  */



/* ComplianceOverview css  */

/* ComplianceOverview.css - paste into your styles and adjust variables to match theme */

:root {
  --bg: #f6fafc;
  --box-bg: #fff;
  --muted: #6d7b88;
  --accent: #00a0df;
  --accent-2: #f2a922;
  --success: #1e7d58;
  --warning: #e89b2b;
  --neutral: #345;
  --card-radius: 14px;

  --frame-blue: #103f57;
  --deep-blue: #0f4e71;
  --sdpm-green: #65ad4b;
}

/* ---------- Base layout ---------- */

.compliance-section {
  background: var(--bg);
  padding: 60px 0;
  /* font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif; */
  color: #12242B;
}

.compliance-container {
  width: 92%;
  max-width: fit-content;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}

/* glance & cards */
.glance-card {
  background: var(--box-bg);
  border-radius: var(--card-radius);
  padding: 26px;
  box-shadow: 0 14px 40px rgba(15, 30, 45, 0.06);
}

.small-tag {
  background: rgba(0, 160, 223, 0.08);
  color: var(--accent);
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
}

.next-due {
  color: var(--muted);
  font-size: 14px;
  text-align: right;
}

.glance-title {
  font-size: 22px;
  margin: 10px 0 12px;
  font-weight: 800;
}

.glance-quicktabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.pill {
  background: #fff;
  border: 1px solid #eef5f8;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  color: #344;
  cursor: pointer;
}

.pill:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.04);
}

.glance-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 6px;
}

.status-card {
  background: #fbfdff;
  border: 1px solid #eef6f9;
  padding: 14px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.status-label {
  font-size: 13px;
  color: var(--muted);
}

.status-value {
  font-weight: 800;
  font-size: 16px;
  color: var(--accent);
}

.status-value.success {
  color: var(--success);
}

.status-value.warning {
  color: var(--warning);
}

.status-value.neutral {
  color: var(--neutral);
}

/* RIGHT: details card */
.details-card {
  background: var(--box-bg);
  border-radius: var(--card-radius);
  padding: 20px;
  box-shadow: 0 14px 40px rgba(15, 30, 45, 0.06);
}

.tabs-row {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.tab-btn {
  background: transparent;
  border: none;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  border: 1px solid transparent;
}

.tab-btn:hover {
  background: rgba(0, 0, 0, 0.02);
}

.tab-btn.active {
  color: var(--accent);
  background: rgba(0, 160, 223, 0.08);
  border-color: rgba(0, 160, 223, 0.12);
}

/* table-like list inside details */
.table-header, .table-row {
  display: grid;
  grid-template-columns: 120px 1.5fr 1fr 1fr;
  padding: 12px 0;
  align-items: center;
  grid-template-columns: 120px 2fr 1fr 1fr;
column-gap: 30px;

}



.table-header {
  border-bottom: 1px solid #e3e8ee;
  font-size: 13px;
  font-weight: 600;
  color: #718096;
  text-transform: uppercase;
}

.table-row {
  border-bottom: 1px solid #f0f0f0;
  font-size: 15px;
}

.table-row .td strong {
  font-weight: 600;
  color: #000;
}

.status-pill {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.status-scheduled {
  background: #d9ecff;
  color: #276fbf;
}

.status-on-track {
  background: #d8f3e1;
  color: #2d8a4b;
}

.status-planned {
  background: #eaf0ff;
  color: #4057b3;
}

.status-priority {
  background: #ffeab8;
  color: #b77900;
}

.note-box {
  background: rgba(34, 139, 135, 0.06);
  border: 1px dashed rgba(34, 139, 135, 0.14);
  padding: 12px;
  border-radius: 10px;
}

/* extra detail styling */
.details-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.detail-row {
  display: grid;
  grid-template-columns: 100px 1fr 150px 220px;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #f0f5f7;
  background: linear-gradient(180deg, #fff 0%, #fbfeff 100%);
}

.due-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.due-date {
  font-weight: 800;
  color: #223;
  font-size: 16px;
}

.due-title {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.freq-col {
  color: var(--muted);
  font-size: 13px;
  padding-left: 6px;
}

.status-col {
  text-align: left;
}

/* empty state */
.empty-state {
  padding: 18px;
  border-radius: 10px;
  background: #fbfdff;
  border: 1px solid #eef6f9;
  color: var(--muted);
  text-align: center;
}

/* Responsive general */
@media (max-width: 980px) {
  .compliance-container {
    grid-template-columns: 1fr;
  }

  .detail-row {
    grid-template-columns: 90px 1fr;
    grid-auto-rows: auto;
    gap: 8px;
  }

  .extra-col {
    grid-column: 1 / -1;
  }

  .tabs-row {
    justify-content: center;
  }
}

/* ---------- Calendar grid (scrollable) ---------- */

.sm-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 8px;
}

.sm-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  padding: 8px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid rgba(16, 64, 88, 0.04);
  margin-top: 8px;
  min-width: 760px;
  box-sizing: border-box;
}

.sm-wd {
  text-align: center;
  font-weight: 800;
  color: var(--deep-blue);
  padding: 8px 6px;
  font-size: 13px;
  background: linear-gradient(180deg, #eaf6fb, #ffffff);
  border-radius: 6px;
  border: 1px solid rgba(16, 64, 88, 0.03);
}

/* day cell */
.sm-cell {
  min-height: 100px;
  border-radius: 8px;
  padding: 8px;
  border: 1px solid rgba(16, 64, 88, 0.04);
  background: #fff;
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-sizing: border-box;
  text-align: left;
}

.sm-cell.empty {
  background: #f6fbff;
  opacity: 0.95;
}

.sm-num {
  position: absolute;
  left: 8px;
  top: 8px;
  font-weight: 800;
  color: var(--frame-blue);
  font-size: 13px;
}

/* events inside cell */
.sm-events {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: #163a44;
  overflow: visible;
}

.sm-event {
  background: rgba(16, 64, 88, 0.05);
  padding: 6px 8px;
  border-radius: 8px;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  line-height: 1.2;
  font-size: 13px;
  color: #163a44;
  word-break: break-word;
}

.sm-more {
  font-weight: 800;
  color: var(--frame-blue);
  font-size: 13px;
}

.sm-cell.has-events {
  box-shadow: 0 6px 16px rgba(16, 64, 88, 0.04);
  border-color: rgba(16, 64, 88, 0.06);
}

/* responsive adjustments for medium screens */
@media (max-width: 900px) {
  .sm-grid {
    gap: 6px;
    min-width: 700px;
  }

  .sm-cell {
    min-height: 120px;
  }

  .sm-event {
    font-size: 12px;
  }
  .table-header, .table-row {
    display: grid;
    grid-template-columns: 120px 1.5fr 1fr 1fr;
    padding: 12px 0;
    align-items: center;
    /* grid-template-columns: 120px 2fr 1fr 1fr; */
    column-gap: 11px;
    font-size: 10px;
}
.status-pill {
    padding: 5px 7px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
}
}

/* ---------- Day modal (Google Calendar-like) ---------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.45) !important;  /* soft white overlay */
  backdrop-filter: blur(12px) saturate(160%) !important; /* glass blur */
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  padding: 18px;
}

.day-modal {
  width: 100%;
  max-width: 720px;
  max-height: 92vh;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 60px rgba(2, 12, 22, 0.3);
}

.day-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #eef6f9;
}

.day-modal-date {
  font-weight: 900;
  color: var(--frame-blue);
  font-size: 16px;
}

.day-modal-sub {
  color: var(--muted);
  font-size: 12px;
}

.modal-icon-btn {
  background: transparent;
  border: 1px solid rgba(2, 12, 22, 0.06);
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
}

.modal-close-btn {
  background: var(--sdpm-green);
  color: #fff;
  border: none;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
}

.day-modal-body {
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.day-event-card {
  background: linear-gradient(180deg, #fbfdff, #fff);
  border: 1px solid rgba(16, 64, 88, 0.04);
  padding: 12px;
  border-radius: 8px;
}

.day-event-title {
  font-weight: 700;
  color: #0e3b44;
  font-size: 14px;
}

.day-empty {
  color: var(--muted);
  text-align: center;
  padding: 20px 0;
}

.day-modal-footer {
  padding: 12px 16px;
  border-top: 1px solid #eef6f9;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ---------- Mobile / truncation behaviour ---------- */

/* show only 1 line of event in grid cells on phones; full event shows in modal */
@media (max-width: 480px) {
  .sm-scroll {
    overflow-x: hidden;
  }

  .sm-grid {
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    padding: 6px;
    margin-top: 6px;
    min-width: 100%;
    grid-auto-rows: minmax(76px, auto);
  }

  .sm-cell {
    min-height: 76px;
    padding: 6px;
    border-radius: 6px;
  }

  .sm-num {
    top: 6px;
    left: 6px;
    font-size: 12px;
  }

  .sm-events {
    margin-top: 24px;
    gap: 4px;
    font-size: 12px;
    max-height: 64px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* TRUNCATE to one line with ellipsis in the grid */
  .sm-event {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    padding: 4px 6px;
    font-size: 12px;
    border-radius: 6px;
  }

  .sm-event::after {
    content: "";
  }

  /* avoid double ellipsis in some browsers */

  .sm-event {
    background: rgba(16, 64, 88, 0.06);
    color: #0e3b44;
  }

  .sm-more {
    font-size: 11px;
    font-weight: 800;
    color: var(--frame-blue);
  }

  .sm-wd {
    padding: 6px 4px;
    font-size: 12px;
  }

  .sm-cell.empty {
    min-height: 60px;
    opacity: 0.98;
  }

  .details-card, .glance-card {
    padding: 14px;
  }
}

/* extremely small phones */
@media (max-width: 360px) {
  .sm-events {
    max-height: 54px;
    gap: 3px;
  }

  .sm-event {
    font-size: 11px;
    padding: 3px 6px;
    border-radius: 6px;
  }

  .sm-num {
    font-size: 11px;
  }

  .sm-cell {
    min-height: 68px;
    padding: 5px;
  }
}

/* print */
@media print {
  .pill, .tab-btn, .modal-backdrop, .day-modal {
    display: none !important;
  }

  .sm-cell {
    min-height: 56px;
  }

  .sm-event {
    font-size: 11px;
  }
}




/* / /  ComplianceOverview css  */






/* Achievements css */


/* Achievements.css
   Split modules design (Option B) - Creative Minimal + Lines
   Theme colors:
   --primary-color: #00385f;
   --secondary-color: #65ad4b;
   --light-gray: #f9f9f9;
   --timeline-bg: #e8f5f5;
   Uses Poppins font (recommended).
*/

/* ---------------- theme tokens ---------------- */
:root {
  --primary-color: #00385f;
  --secondary-color: #65ad4b;
  --light-gray: #f9f9f9;
  --timeline-bg: #e8f5f5;
  --muted: #58666d;
  --card-bg: #ffffff;
  --glass: rgba(255, 255, 255, 0.82);
  --radius: 14px;
  --container: 1180px;
  --shadow: 0 14px 40px rgba(2, 6, 23, 0.06);
  --accent-line: rgba(0, 56, 95, 0.06);
  --gap: 28px;
  /* font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; */
}

/* Optional: add Poppins in index.html:
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap" rel="stylesheet">
*/

/* Global page */
.kc-main {
  background: var(--light-gray);
  color: var(--primary-color);
}

/* HERO */
.about-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  padding: 110px 20px;
  text-align: center;
  color: white;
}

.overlay {
  position: absolute;
  inset: 0;
}

.about-hero-text {
  position: relative;
  z-index: 2;
  max-width: 920px;
  margin: 0 auto;
}

.about-hero-text h1 {
  font-size: 44px;
  margin: 0;
  font-weight: 700;
}

.about-hero-text p {
  margin: 10px 0 0;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.92);
}

/* container wrapper for modules */
.kc-module {
  padding: 48px 20px;
  border-top: 1px solid transparent;
}

.kc-inner {
  max-width: var(--container);
  margin: 0 auto;
}

/* module header style */
.kc-module-head {
  text-align: left;
  margin-bottom: 18px;
}

.kc-module-head h2 {
  font-size: 30px;
  color: var(--primary-color);
  margin: 0 0 6px;
}

.kc-module-head .muted {
  color: var(--muted);
  margin: 0 0 10px;
}

.kc-lead {
  color: var(--muted);
  margin: 6px 0 12px;
  max-width: 880px;
}

.kc-quick-request {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
}

.link-cta {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 700;
}

/* small separator between modules */
.separator {
  height: 1px;
  background: var(--accent-line);
  margin: 0 auto;
}

/* -------- Editor cards grid -------- */
.kc-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 18px;
}

/* card */
.kc-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 20px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: var(--shadow);
  transition: transform .28s ease, box-shadow .28s ease;
  overflow: visible;
  opacity: 0;
  transform: translateY(12px);
  animation: kc-fadeIn .5s forwards;
}

.kc-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 50px rgba(2, 6, 23, 0.08);
}

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tag {
  display: inline-block;
  background: linear-gradient(90deg, rgba(0, 56, 95, 0.04), rgba(101, 173, 75, 0.02));
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  color: var(--primary-color);
  font-size: 13px;
}

.kc-card h3 {
  color: #042431;
  margin: 12px 0 8px;
  font-size: 18px;
}

.excerpt {
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 10px;
}

.meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--muted);
  list-style: none;
  padding: 0;
  margin: 8px 0;
}

.card-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

/* Buttons */
.btn-primary {
  background: var(--primary-color);
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
}

.btn-ghost {
  background: transparent;
  color: var(--primary-color);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(0, 56, 95, 0.06);
  text-decoration: none;
  font-weight: 700;
}

/* small modules layout */
.module-head-inline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

/* Latest articles grid */
.kc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.mini-card {
  background: linear-gradient(180deg, var(--card-bg), #fff);
  padding: 14px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.03);
  box-shadow: 0 8px 18px rgba(2, 6, 23, 0.03);
  opacity: 0;
  transform: translateY(8px);
  animation: kc-fadeIn .45s forwards;
}

.mini-tag {
  font-weight: 700;
  color: var(--primary-color);
  font-size: 13px;
}

.mini-card h4 {
  margin: 8px 0 6px;
  color: #042431;
  font-size: 15px;
}

.mini-meta {
  color: var(--muted);
  font-size: 13px;
}

/* Downloads grid */
.download-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.download-card {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 10px 26px rgba(2, 6, 23, 0.03);
  opacity: 0;
  transform: translateY(10px);
  animation: kc-fadeIn .48s forwards;
}

.download-kind {
  font-weight: 700;
  color: var(--primary-color);
  font-size: 13px;
}

.btn-download {
  display: inline-block;
  margin-top: 10px;
  color: var(--secondary-color);
  font-weight: 700;
  text-decoration: none;
}

/* FAQs */
.kc-faqs {
  margin-top: 12px;
}

.faq-list {
  margin-top: 10px;
  display: grid;
  gap: 10px;
}

.faq-item {
  background: var(--card-bg);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.03);
}

.faq-q {
  width: 100%;
  background: linear-gradient(90deg, rgba(0, 56, 95, 0.02), rgba(101, 173, 75, 0.01));
  border: none;
  padding: 12px 14px;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-weight: 700;
  color: var(--primary-color);
}

.faq-a {
  padding: 12px 14px;
  color: var(--muted);
  display: none;
  line-height: 1.6;
}

.faq-item.open .faq-a {
  display: block;
}

/* Support block */
.support-block {
  margin-top: 18px;
  padding: 18px;
  background: linear-gradient(180deg, #fff, var(--timeline-bg));
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.03);
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.03);
}

.support-block h3 {
  margin: 0 0 8px;
  color: var(--primary-color);
}

.support-block p {
  color: var(--muted);
  margin: 0 0 12px;
}

/* animations */
@keyframes kc-fadeIn {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-up {
  animation: slideUp .55s cubic-bezier(.2, .9, .2, 1) forwards;
}

/* small helpers */
.muted {
  color: var(--muted);
}

.ep-small {
  color: var(--muted);
  font-size: 14px;
}

/* responsive */
@media (max-width: 1100px) {
  .kc-cards, .kc-grid, .download-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .kc-cards, .kc-grid, .download-grid {
    grid-template-columns: 1fr;
  }

  .about-hero-text h1 {
    font-size: 28px;
  }

  .about-hero {
    padding: 60px 18px;
    height: 40vh;
  }

  .module-head-inline {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
}

/* small accessibility focus */
.kc-card:focus, .mini-card:focus, .download-card:focus, .faq-q:focus {
  outline: 3px solid rgba(0, 56, 95, 0.08);
  outline-offset: 3px;
}




/* // Achievements css */



@media (max-width: 768px) {
    .glance-card {
      padding: 0 !important;
    }
 
    .industry-card {
      padding: 0 !important;
    }
}

@media (max-width: 1024px) {
  
.compliance-container {
  width: 100% !important;
  display: block;
  gap: 20px;
}
.engagement-box {
    display: flex;
    justify-content: center;
  }

}

/* 375px Mobile Responsive */
@media (max-width: 375px) {
    .table-header,
    .table-row {
        display: grid;
        grid-template-columns: 80px 1.2fr 0.8fr 0.8fr;  /* smaller columns */
        column-gap: 10px;
        padding: 10px 0;
        align-items: center;
    }

    .table-header div,
    .table-row div {
        font-size: 12px; /* smaller text for mobile */
        word-break: break-word;
    }
    .navbar{
      top: 173px;
    }
}







/* AdminUpload csa  */



:root {
  --primary: #00385f;
  --green: #65ad4b;
}

/* Page background */
.admin-upload-page {
  min-height: 100vh;
  padding: 24px 20px 40px;
  background: radial-gradient(circle at top left, #e3f1ff 0, #f6f7fb 45%, #edf6f1 100%);
  box-sizing: border-box;
}

/* Top hero */
.upload-hero {
  max-width: 1100px;
  margin: 0 auto 20px;
  padding: 18px 22px;
  border-radius: 16px;
  background: linear-gradient(135deg, #00385f, #065b93);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  position: relative;
  overflow: hidden;
}

.upload-hero::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 16px solid rgba(255, 255, 255, 0.12);
}

.upload-hero-content {
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 1;
}

.hero-icon-circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.upload-hero-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
}

.upload-hero-subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  opacity: 0.9;
}

/* Stats on the right */
.upload-stats {
  display: flex;
  align-items: center;
  gap: 18px;
  z-index: 1;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.stat-label {
  font-size: 11px;
  opacity: 0.8;
}

.stat-value {
  font-size: 20px;
  font-weight: 600;
}

.stat-divider {
  width: 1px;
  height: 34px;
  background: rgba(255, 255, 255, 0.28);
}

.stat-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

/* Main layout */
.admin-upload-layout {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr);
  gap: 20px;
  align-items: flex-start;
}

/* Card base styles */
.admin-upload-card,
.upload-list-card {
  background: rgba(255, 255, 255, 0.88);
  border-radius: 14px;
  padding: 20px 18px 22px;
  box-shadow: 0 12px 30px rgba(7, 26, 48, 0.08);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.8);
}

/* Form section */
.admin-upload-header h2 {
  margin: 0;
  font-size: 18px;
  color: var(--primary);
}

.admin-upload-header p {
  margin: 4px 0 0;
  font-size: 13px;
  color: #66708a;
}

.admin-upload-form {
  margin-top: 16px;
}

.form-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 14px;
}

.form-group {
  margin-bottom: 14px;
  text-align: left;
}

.form-group label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #2c3648;
}

.form-group label span {
  color: #e53935;
}

/* Inputs */
.form-group input[type="text"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #d0d7e2;
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
  font-family: inherit;
  background-color: #fdfefe;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.form-group input[type="text"]:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(0, 56, 95, 0.15);
  background: #ffffff;
}

.form-group textarea {
  resize: vertical;
}

/* File drop area */
.file-drop-area {
  border-radius: 12px;
  border: 1px dashed #c4cede;
  background: #f7f9ff;
  padding: 12px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
}

.file-drop-area::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(120deg, rgba(0, 56, 95, 0.06), transparent);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.file-drop-area:hover::before {
  opacity: 1;
}

.file-drop-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #dde4f2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.file-drop-text {
  flex: 1;
}

.file-drop-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #2b3950;
}

.file-drop-sub {
  margin: 3px 0 0;
  font-size: 11px;
  color: #7a849b;
}

.file-browse-btn {
  margin-top: 6px;
  display: inline-block;
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid #ccd3e5;
  cursor: pointer;
  background: #ffffff;
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.file-browse-btn:hover {
  background: #f1f4ff;
  box-shadow: 0 4px 10px rgba(24, 49, 90, 0.08);
  transform: translateY(-1px);
}

/* Hide real file input */
.file-drop-area input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* Submit button */
.form-actions {
  margin-top: 10px;
  text-align: right;
}

.form-actions button {
  padding: 9px 18px;
  border-radius: 999px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(135deg, var(--primary), #022a46);
  color: #fff;
  box-shadow: 0 8px 18px rgba(1, 32, 58, 0.35);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.form-actions button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(1, 32, 58, 0.42);
}

/* Recent uploads card */
.upload-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.upload-list-header h2 {
  margin: 0;
  font-size: 16px;
  color: var(--primary);
}

.upload-count-badge {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #edf3ff;
  color: #3b4764;
  border: 1px solid #d1dcff;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 26px 10px;
}

.empty-icon {
  font-size: 32px;
  margin-bottom: 4px;
}

.empty-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #3b4256;
}

.empty-text {
  margin: 4px 0 0;
  font-size: 12px;
  color: #7d859c;
}

/* Upload list */
.upload-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.upload-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 8px 10px 0;
}

.upload-item + .upload-item {
  border-top: 1px dashed #e1e5f2;
}

.upload-timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 7px;
  flex-shrink: 0;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(101, 173, 75, 0.22);
}

.upload-item-content {
  flex: 1;
}

.upload-item-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.upload-item-main h3 {
  font-size: 14px;
  margin: 0;
  color: #283043;
}

.badge {
  display: inline-block;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(101, 173, 75, 0.12);
  color: var(--green);
  text-transform: capitalize;
}

.upload-desc {
  margin: 5px 0 0;
  font-size: 12px;
  color: #656f86;
}

.upload-meta-row {
  margin-top: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.upload-file-name {
  margin: 0;
  font-size: 12px;
  color: #5b6275;
}

.upload-time-pill {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f3f5ff;
  color: #757ea0;
}

/* Responsive */
@media (max-width: 900px) {
  .admin-upload-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .upload-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .upload-stats {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 600px) {
  .admin-upload-page {
    padding: 18px 12px 28px;
  }

  .upload-hero {
    padding: 14px 14px;
  }

  .upload-hero-title {
    font-size: 18px;
  }

  .admin-upload-card,
  .upload-list-card {
    padding: 16px 14px 18px;
  }

  .form-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.upload-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.upload-delete-btn {
  border: none;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  cursor: pointer;
  background: #ffe5e5;
  color: #b3261e;
  border: 1px solid #f7b7b7;
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.upload-delete-btn:hover {
  background: #ffcccc;
  box-shadow: 0 3px 8px rgba(179, 38, 30, 0.25);
  transform: translateY(-1px);
}


/* / / AdminUpload csa  */


/* Admin login css */

:root {
  --primary: #00385f;
  --green: #65ad4b;
}

/* Full page container */
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: radial-gradient(circle at top, #e6f0ff, #f6f8fb);
}

/* Login box */
.login-box {
  width: 100%;
  max-width: 400px;
  background: #fff;
  padding: 30px 28px;
  border-radius: 18px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
  text-align: center;
}

/* Header */
.login-header h2 {
  margin: 8px 0 4px;
  color: var(--primary);
  font-size: 22px;
}

.login-header p {
  color: #6c7280;
  font-size: 13px;
}

.login-logo-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  font-size: 20px;
}

/* Form */
.login-form {
  margin-top: 16px;
  text-align: left;
}

.login-field {
  margin-bottom: 15px;
}

.login-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
}

.login-field input {
  width: 100%;
  padding: 9px 10px;
  border-radius: 6px;
  border: 1px solid #d0d7e4;
  font-size: 14px;
  outline: none;
  background: #fbfcff;
  transition: all 0.2s;
}

.login-field input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(0, 56, 95, 0.15);
}

/* Password box with show button */
.password-box {
  display: flex;
  align-items: center;
}

.password-box input {
  flex: 1;
}

.toggle-password {
  border: none;
  background: #eef2ff;
  padding: 6px 10px;
  margin-left: 6px;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  color: var(--primary);
}

/* Options: remember & forgot */
.login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0 16px;
}

.remember-me {
  font-size: 12px;
}

.forgot-link {
  border: none;
  background: transparent;
  font-size: 12px;
  color: var(--primary);
  cursor: pointer;
  text-decoration: underline;
}

/* Login button */
.login-button {
  width: 100%;
  padding: 10px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.login-button:hover {
  background: #00233b;
  transform: translateY(-1px);
}

/* Error message */
.login-error {
  background: #ffe5e5;
  color: #b3261e;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  margin-bottom: 12px;
  border: 1px solid #f5b4b4;
}

/* Responsive */
@media (max-width: 480px) {
  .login-box {
    padding: 24px 18px;
  }
}


/* / /  Admin login css  */