/* ---- General ---- */
html { scroll-behavior: smooth; }
body {
  font-family: 'Poppins', Arial, sans-serif;
  background: #f8f9fb;
  color: #1a1a1a;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}
h1, h2, h3, h4, h5 {
  font-weight: 700;
  margin-bottom: 0.5em;
}
a {
  color: #1064a3;
  text-decoration: none;
  transition: color 0.2s;
}
a:hover, a:focus {
  color: #0d47a1;
  text-decoration: underline;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
ul, ol {
  padding-left: 1.2em;
}

.container, .container-fluid {
  padding-left: 1rem;
  padding-right: 1rem;
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Navbar ---- */
.header_section {
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(100,120,140,0.07);
}
.navbar {
  padding: 0.75rem 0;
}
.navbar-brand img {
  height: 48px;
  max-width: 180px;
}
.navbar-nav {
  align-items: center;
  gap: 1rem;
}
.navbar-nav .nav-link {
  color: #303b4e;
  font-size: 1rem;
  font-weight: 500;
  padding: 0.5em 1em;
  transition: color 0.2s;
}
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
  color: #1064a3;
}
.navbar-toggler {
  border: none;
  font-size: 1.5rem;
}
@media (max-width: 991px) {
  .navbar-collapse {
    background: #fff;
    box-shadow: 0 2px 12px rgba(16,100,163,0.04);
    margin-top: 0.5em;
  }
  .navbar-nav {
    gap: 0;
  }
  .navbar-nav .nav-link {
    padding: 0.7em 1em;
  }
}

/* ---- Hero/Slider ---- */
.hero_area {
  background: linear-gradient(115deg,#f7fafc 60%,#e3f2fd 100%);
}
.slider_section {
  padding: 2rem 0 0 0;
  position: relative;
}
.slider-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  min-height: 350px;
  padding: 2rem 1rem 1rem 1rem;
}
.slider-img-col {
  flex: 1 1 300px;
  max-width: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slider-img-col .img-box {
  background: #fff;
  padding: 1rem;
  border-radius: 1rem;
  box-shadow: 0 4px 24px rgba(32,64,128,0.10);
}
.slider-text-col {
  flex: 1 1 360px;
  max-width: 500px;
  display: flex;
  align-items: center;
}
.detail-box h1, .detail-box h2, .detail-box h3 {
  color: #1064a3;
  font-weight: 700;
}
.detail-box p {
  color: #212529;
  font-size: 1.12rem;
  margin-bottom: 1.5rem;
}
.btn-box {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.btn-1, .btn-2 {
  display: inline-block;
  font-weight: 600;
  border-radius: 25px;
  padding: 0.55em 1.7em;
  font-size: 1.05em;
  transition: background 0.18s, color 0.18s;
}
.btn-1 {
  background: #1064a3;
  color: #fff;
  border: none;
}
.btn-1:hover { background: #09457a; }
.btn-2 {
  background: #fff;
  color: #1064a3;
  border: 2px solid #1064a3;
}
.btn-2:hover {
  background: #1064a3;
  color: #fff;
}
.carousel_btn-container {
  text-align: center;
  margin-top: 1rem;
}
.carousel-control-prev-icon, .carousel-control-next-icon {
  background-color: #000000;
  border-radius: 50%;
}
@media (max-width: 991px) {
  .slider-content {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
  }
  .slider-img-col, .slider-text-col {
    max-width: 100%;
  }
}
@media (max-width: 575px) {
  .slider-content {
    padding: 1rem 0.2rem 0.5rem 0.2rem;
  }
}

/* ---- Experience/Work/Clients ---- */
.experience_section,
.clients_section,
.category_section,
.freelance_section,
.client_section {
  padding: 3rem 0;
  background: #fff;
}
.clients-list {
  display: flex;
  gap: 2.2rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.7rem;
}

.client-group {
  margin-bottom: 3.2rem;
}

/* ---- CLIENTS GRID SECTION (MODERN, CLEAN) ---- */
.clients_section {
  padding: 3rem 0;
  background: #fff;
}
.clients_section > .container {
  max-width: 1300px;
  margin: 0 auto;
}
.client-link {
  text-decoration: none;
  color: inherit;
}


/* Heading style */
.heading_container h1, .heading_container h2 {
  color: #1064a3;
  margin-bottom: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Each client group (category) */
.client-group {
  margin-bottom: 2.7rem;
}
.client-group-title {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  color: #1064a3;
  font-weight: 700;
  font-size: 1.4rem;
  margin-bottom: 1.1rem;
  letter-spacing: 0.01em;
}
.client-group-title .org-logo {
  max-width: 42px;
  max-height: 38px;
  border-radius: 0.5rem;
  background: #f5fafd;
  padding: 0.2em;
  box-shadow: 0 2px 6px rgba(16,100,163,0.07);
}

/* The responsive grid for logos */
.clients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1.5rem 2.1rem;
  margin-bottom: 1.5rem;
}

.client-card {
  background: #fff;
  border-radius: 1.2rem;
  box-shadow: 0 4px 18px rgba(16,100,163,0.10);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.1rem 0.7rem 0.7rem 0.7rem;
  min-width: 110px;
  max-width: 180px;
  min-height: 98px;
  transition: box-shadow 0.14s, transform 0.14s;
}
.client-card:hover {
  box-shadow: 0 12px 38px rgba(16,100,163,0.16);
  transform: translateY(-4px) scale(1.03);
}

.client-logo {
  width: 58px;
  height: 44px;
  background: #f5fafd;
  border-radius: 0.8rem;
  box-shadow: 0 1px 5px rgba(16,100,163,0.06);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.client-logo img {
  max-width: 52px;
  max-height: 36px;
  object-fit: contain;
  margin: 0 auto;
  display: block;
}

.client-name {
  font-size: 1.01em;
  font-weight: 600;
  color: #1064a3;
  text-align: center;
  min-height: 2.1em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Responsive tweaks */
@media (max-width: 991px) {
  .clients-grid { gap: 1rem 0.8rem; }
  .client-card { min-width: 85px; max-width: 120px; padding: 0.6rem 0.3rem; }
  .client-logo { width: 38px; height: 28px; margin-bottom: 0.4rem; }
  .client-logo img { max-width: 30px; max-height: 18px; }
  .client-name { font-size: 0.92em; min-height: 1.1em; }
}
@media (max-width: 600px) {
  .clients-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .client-card { min-width: 40vw; max-width: 100vw; min-height: 74px; }
  .client-logo { width: 30px; height: 22px; }
  .client-logo img { max-width: 22px; max-height: 13px; }
}


.freelance_section .carousel-inner {
  border-radius: 1.2rem;
}

.heading_container h2, .heading_container h1 {
  color: #1064a3;
  margin-bottom: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.detail-box {
  background: #f8f9fa;
  padding: 1rem 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 2px 10px rgba(16,100,163,0.05);
  margin-bottom: 1.5rem;
}
@media (max-width: 991px) {
  .category_container .box {
    width: 45vw;
    max-width: 270px;
    height: 180px;
    padding: 1rem;
  }
}
@media (max-width: 767px) {
  .detail-box {
    padding: 1.2rem 0.8rem;
    margin-bottom: 1rem;
  }
}
@media (max-width: 767px) {
  .category_container {
    gap: 1.2rem;
  }
  .category_container .box {
    width: 90vw;
    max-width: 370px;
    height: 140px;
    padding: 0.7rem;
  }
  .category_container .img-box img {
    max-width: 60px;
    max-height: 40px;
  }
}
.category_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem 2rem;
}

.category_container .box {
  background: #fff;
  border-radius: 1rem;
  padding: 1.2rem 1.5rem;
  text-align: center;
  box-shadow: 0 2px 16px rgba(16,100,163,0.08);
  width: 190px;
  height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  transition: transform 0.14s, box-shadow 0.18s;
}
.category_container .box:hover {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 8px 24px rgba(16,100,163,0.15);
}
.category_container .img-box img {
  max-width: 90px;
  max-height: 70px;
  object-fit: contain;
  margin-bottom: 0.7em;
  margin-top: 0.3em;
}
.category_container .detail-box {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.category_container .detail-box h5 {
  font-size: 1.08rem;
  font-weight: 600;
  color: #222;
  margin: 0;
}

/* ---- CLIENTS / ORGANIZATION CARDS ---- */
.clients_section > .container {
  max-width: 1300px;
  margin: 0 auto;
}

.organization {
  margin: 2rem 0 2rem 0;
  padding: 2rem 1.2rem;
  background: #fff;
  border-radius: 1.1rem;
  box-shadow: 0 4px 18px rgba(16,100,163,0.08);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.org-header {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 1rem;
}
.org-logo {
  max-width: 80px;
  max-height: 64px;
  border-radius: 0.5rem;
}
.sub-agencies {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem 1.5rem;
  margin-top: 0.3rem;
  justify-content: flex-start;
}
.sub-agency {
  background: #f5fafd;
  border-radius: 0.9rem;
  padding: 0.7em 1em 0.4em 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 110px;
  max-width: 140px;
  box-shadow: 0 2px 6px rgba(16,100,163,0.06);
  margin-bottom: 1rem;
}
.sub-agency img {
  max-width: 54px;
  max-height: 38px;
  margin-bottom: 0.6em;
  object-fit: contain;
  background: #fff;
}
.sub-agency h5, .sub-agency p {
  margin: 0;
  font-size: 0.98em;
  text-align: center;
  color: #1164a3;
  font-weight: 600;
}
@media (max-width: 1100px) {
  .organization {
    padding: 1.5rem 0.3rem;
  }
  .sub-agencies { gap: 0.8rem 1rem; }
  .sub-agency { min-width: 90px; max-width: 120px; }
  .sub-agency img { max-width: 38px; max-height: 28px; }
}
@media (max-width: 767px) {
  .org-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .sub-agencies { gap: 0.5rem 0.5rem; }
  .sub-agency { min-width: 44vw; max-width: 46vw; padding: 0.3rem 0.6rem; }
  .sub-agency img { max-width: 34px; max-height: 24px; }
  .organization { padding: 1.2rem 0.1rem; }
}

.previous_work_section .mb-4 {
  padding-top: 0.5em;
}

/* Ensure consistent button spacing and alignment */
.gallery-filters {
  display: flex !important;
  flex-wrap: wrap;
  gap: 1.1em 1em;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 2em !important;
  position: relative;
  row-gap: 2.1em;
}

.filter-btn,
.filter-btn.main {
  border: 2px solid #1064a3;
  background: #fff;
  color: #1064a3;
  font-weight: 500;
  font-size: 1.09rem;
  padding: 0.48em 2em;
  border-radius: 2em;
  box-shadow: 0 2px 8px rgba(16,100,163,0.07);
  transition: background 0.17s, color 0.15s, border-color 0.13s, box-shadow 0.14s;
  outline: none !important;
  position: relative;
  z-index: 1;
}

.filter-btn.active,
.filter-btn:focus,
.filter-btn:hover {
  background: #1064a3;
  color: #fff;
  border-color: #1064a3;
  box-shadow: 0 6px 18px rgba(16,100,163,0.16);
}

/* Group parent stays in the row */
.filter-btn-group {
  position: relative;
  display: inline-block;
  flex-direction: column;
  align-items: center;
  margin: 0 0.5em;
}
#sim-btn {
  position: relative;
  z-index: 1;
}

/* Sub-buttons row is absolutely positioned just under the main group button */
.sub-btn-row {
  display: none;
  position: absolute;
  left: 0;
  top: 110%;
  background: #fff;
  border-radius: 1em;
  box-shadow: 0 4px 24px rgba(16,100,163,0.10);
  padding: 0.6em 0.2em;
  min-width: 210px;
  z-index: 999;
  flex-direction: column;
  gap: 0.5em;
}

.filter-btn-group.open .sub-btn-row {
  display: flex;
}

.sub-btn-row .filter-btn {
  width: 100%;
  border: 2px dashed #1064a3;
  background: #fff;
  margin: 0.15em 0;
  font-size: 1em;
  border-radius: 2em;
}

.filter-btn.sub {
  border: 2px dashed #1064a3;
  border-radius: 1.8em;
  font-size: 1.03em;
  color: #1967a7;
  background: #f8fafd;
  box-shadow: 0 1px 4px rgba(16,100,163,0.03);
  min-width: 170px;
  padding-left: 2em;
  text-align: center;
  position: relative;
  transition: background 0.13s, color 0.13s, border-color 0.13s;
}
.filter-btn.sub:before {
  content: "↳";
  color: #8db5e1;
  font-size: 1.08em;
  position: absolute;
  left: 1em;
  top: 47%;
  transform: translateY(-50%);
  opacity: 0.7;
  font-weight: 500;
}
.filter-btn.sub.active,
.filter-btn.sub:focus,
.filter-btn.sub:hover {
  background: #1064a3;
  color: #fff;
  border-color: #1064a3;
}

@media (max-width: 991px) {
  .gallery-filters {
    flex-direction: column;
    align-items: center;
    gap: 0.7em;
  }
  .filter-btn, .filter-btn.sub {
    width: 96vw;
    max-width: 410px;
    margin-right: 0;
    margin-left: 0;
    font-size: 1em;
    text-align: left;
  }
  .sub-btn-row {
    position: static;
    top: auto;
    left: 0;
    min-width: 140px;
    transform: none;
    margin-top: 0.3em;
    flex-direction: column;
    gap: 0.3em;
    width: 100%;
  }
}

#portfolio-grid .portfolio-item {
  cursor: pointer;
  padding: 0.5em;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 2px 10px rgba(16,100,163,0.06);
  margin-bottom: 1.2em;
  transition: box-shadow 0.12s, transform 0.14s;
}
#portfolio-grid .portfolio-item:hover {
  box-shadow: 0 8px 18px rgba(16,100,163,0.14);
  transform: translateY(-2px) scale(1.02);
}
#portfolio-grid img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  border-radius: 0.7em;
}
@media (max-width: 991px) {
  #portfolio-grid img { height: 150px; }
}
@media (max-width: 575px) {
  #portfolio-grid img { height: 120px; }
}

/* ---- Client Testimonials ---- */
.client_section .carousel-inner {
  background: #f7f9fa;
  border-radius: 1.3rem;
  box-shadow: 0 6px 32px rgba(32, 90, 140, 0.10);
  padding: 2rem 2.5rem 1.5rem 2.5rem;
  margin-top: 1.5rem;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.client_section .carousel-item .detail-box h4 {
  font-size: 1.4rem;
  font-weight: 700;
  color: #192D49;
  margin-bottom: 0.2em;
}
.client_section .carousel-item .detail-box h6 {
  font-size: 1rem;
  color: #666;
  font-weight: 400;
  margin-bottom: 1em;
}
.client_section .carousel-item .detail-box p {
  font-size: 1.11rem;
  color: #222;
  margin-bottom: 0.8em;
  line-height: 1.7;
  max-width: 700px;
}
.client_section .carousel-item .detail-box img {
  width: 2.2em;
  opacity: 0.15;
  position: absolute;
  bottom: 1em;
  right: 1.3em;
}
.client_section .carousel-control-prev,
.client_section .carousel-control-next {
  width: 2.7em;
  height: 2.7em;
  top: 55%;
  transform: translateY(-50%);
  border-radius: 50%;
  border: none;
  opacity: 0.95;
}
.client_section .carousel-control-prev {
  left: 1.1em;
}
.client_section .carousel-control-next {
  right: 1.1em;
}
.client_section .carousel-control-prev-icon,
.client_section .carousel-control-next-icon {
  opacity: .5;
  width: 1.5em;
  height: 1.5em;
}
@media (max-width: 768px) {
  .client_section .carousel-inner {
    padding: 1.1rem 0.7rem 1.1rem 0.7rem;
    max-width: 99vw;
  }
  .client_section .carousel-item .detail-box p {
    font-size: 1rem;
    max-width: 98vw;
  }
  .client_section .carousel-control-prev,
  .client_section .carousel-control-next {
    width: 2em;
    height: 2em;
    top: 50%;
  }
}

/* ---- Accordion / Services Tabs ---- */
.tab_container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.t-link-box {
  display: flex;
  align-items: center;
  gap: 1.3rem;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 2px 10px rgba(16,100,163,0.07);
  padding: 1rem 1.2rem;
  cursor: pointer;
  transition: box-shadow 0.13s, background 0.13s;
  border-left: 6px solid #1064a3;
}
.t-link-box.collapsed {
  border-left-color: #dadada;
  opacity: 0.88;
}
.t-link-box:hover {
  box-shadow: 0 6px 16px rgba(16,100,163,0.11);
  background: #f1f7fc;
}
.t-link-box .img-box img {
  max-width: 56px;
  max-height: 56px;
}
.t-link-box .detail-box h3 {
  font-size: 1.18rem;
  margin-bottom: 0;
}
.accordion {
  border-width: 0;
}
.accordion .img-box img {
  border-radius: 1rem;
  max-width: 100%;
  max-height: 400px;
}

/* ---- Info/Footer Section ---- */
.info_section {
  background: #1064a3;
  color: #fff;
  padding: 3.5rem 0 1rem 0;
  margin-top: 2rem;
  font-size: 1rem;
}
.info_logo img {
  max-height: 48px;
}
.social_box {
  display: flex;
  gap: 1.1rem;
}
.social_box a {
  color: #fff;
  background: rgba(255,255,255,0.10);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.18em;
  transition: background 0.2s, color 0.2s;
}
.social_box a:hover {
  background: #fff;
  color: #1064a3;
}
.info_main {
  margin-top: 2.5rem;
  margin-bottom: 1.7rem;
}
.footer-links {
  list-style: none;
  padding-left: 0;
}
.footer-links li {
  margin-bottom: 0.4em;
}
.footer-links a {
  color: #e6eef9;
  font-weight: 500;
}
.footer-links a:hover { color: #fff; }
.contact-info a {
  display: block;
  color: #e6eef9;
  margin-bottom: 0.45em;
  font-size: 1em;
  transition: color 0.19s;
}
.contact-info a:hover { color: #fff; }
.info_bottom {
  border-top: 1px solid rgba(255,255,255,0.09);
  padding-top: 1rem;
  text-align: center;
  color: #e6eef9;
  font-size: 0.98em;
}
@media (max-width: 767px) {
  .info_section { padding: 2.2rem 0 0.7rem 0; }
  .info_main { margin-top: 1.2rem; margin-bottom: 1rem; }
  .info_top { flex-direction: column; gap: 1.1rem; }
}

/* ---- Contact Page ---- */
.contact-us .box1 {
  background: #fff;
  padding: 2.5rem 1.5rem;
  border-radius: 1.2rem;
  box-shadow: 0 4px 18px rgba(16,100,163,0.07);
}
.contact-us h2 {
  color: #1064a3;
  font-weight: 700;
  margin-bottom: 2rem;
}
.contact-us .card {
  border: none;
  background: #f5fafd;
  border-radius: 1rem;
  margin-bottom: 1.2rem;
}
.contact-us .social-icons .btn {
  border-radius: 25px;
  font-weight: 500;
  min-width: 100px;
  margin-bottom: 0.3em;
}
@media (max-width: 767px) {
  .contact-us .box1 {
    padding: 1.2rem 0.6rem;
  }
}

/* ---- About Page ---- */
#about-us img {
  border-radius: 1.2rem;
  box-shadow: 0 4px 20px rgba(16,100,163,0.13);
  margin-bottom: 1.2rem;
}
#about-us h2 {
  color: #1064a3;
  font-weight: 700;
  margin-bottom: 1.1rem;
}
#about-us .lead {
  font-size: 1.16em;
}
#about-us button.btn {
  border-radius: 30px;
  font-weight: 600;
  padding: 0.5em 2em;
}

/* ---- Carousel Buttons and Fixes ---- */
.carousel-control-prev,
.carousel-control-next {
  background: none;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: brightness(1.3);
  background-size: 80% 80%;
}

/* ---- Miscellaneous / Utility ---- */
.layout_padding { padding: 2.2rem 0; }
.shadow-sm { box-shadow: 0 2px 8px rgba(16,100,163,0.10)!important; }
.rounded { border-radius: 1.2rem!important; }
.py-5 { padding-top: 3rem!important; padding-bottom: 3rem!important; }
.mx-auto { margin-left: auto!important; margin-right: auto!important; }
.text-primary { color: #1064a3!important; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb {
  background: #e3f2fd;
  border-radius: 12px;
}
::-webkit-scrollbar-track { background: #fafbfc; }

@media (max-width: 575px) {
  .heading_container h1, .heading_container h2 { font-size: 1.4em; }
}

/* ---- Smooth Fade-In Effect ---- */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease-out forwards;
}

/* --- MODERN GALLERY MODAL --- */
.modal-gallery-content {
  background: rgba(20, 30, 38, 0.88) !important;
  border-radius: 2.2rem;
  box-shadow: 0 12px 40px 0 rgba(10,30,40,0.35), 0 1.5px 12px rgba(16,100,163,0.14);
  border: none;
  padding: 0.7rem 0.5rem;
  animation: fadeInUp 0.45s cubic-bezier(.42,.15,.52,1.35);
  position: relative;
  z-index: 2002 !important;  /* makes sure it's above backdrop */
}
.modal-gallery-nav, .modal-gallery-close {
  z-index: 2010 !important;
}
.modal-gallery-nav {
  pointer-events: auto;
}
.modal-gallery-close {
  pointer-events: auto;
}


@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(40px) scale(.98);}
  100% { opacity: 1; transform: translateY(0) scale(1);}
}

.modal-gallery-img {
  max-width: 84vw;
  max-height: 70vh;
  margin: 0 82px;
  border-radius: 1.2rem;
  background: #e7eff7;
  box-shadow: 0 6px 30px rgba(30,55,90,0.18), 0 2px 18px #101a2822;
  border: 2px solid #dbe6f2;
  object-fit: contain;
  transition: box-shadow 0.22s, border-color 0.16s;
}

.modal-gallery-img:hover {
  box-shadow: 0 18px 48px rgba(16,100,163,0.26), 0 2px 30px #101a2822;
  border-color: #1064a3;
}

.modal-gallery-nav.prev { left: 22px; }
.modal-gallery-nav.next { right: 22px; }
.modal-gallery-nav:hover {
  background: #1064a3;
  color: #fff;
  border-color: #1064a3;
  box-shadow: 0 6px 24px rgba(16,100,163,0.18);
  opacity: 1;
}

.modal-gallery-close:hover {
  background: #f03e3e;
  color: #fff;
  opacity: 1;
}

@media (max-width: 1200px) {
  .modal-gallery-img { max-width: 97vw; margin: 0 16px; }
  .modal-gallery-nav { width: 44px; height: 44px; font-size: 1.4rem; }
  .modal-gallery-nav.prev { left: 8px; }
  .modal-gallery-nav.next { right: 8px; }
  .modal-gallery-close { top: 12px; right: 13px; width: 33px; height: 33px; font-size: 1.5rem; }
}
@media (max-width: 600px) {
  .modal-gallery-content { border-radius: .9rem; }
  .modal-gallery-img { max-height: 48vh; border-radius: .9rem; }
  .modal-gallery-close { top: 7px; right: 7px;}
}

/* Optional: Remove outline on click for buttons */
.modal-gallery-nav:focus,
.modal-gallery-close:focus { outline: none; box-shadow: 0 0 0 2px #1064a3; }

/* Modal Gallery Modern Look */
.modal-gallery-dialog {
  min-height: 100vh;
  margin: 0 auto;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.modal-gallery-content {
  background: rgba(20, 30, 38, 0.98) !important;
  border-radius: 1.8rem;
  box-shadow: 0 18px 48px 0 rgba(10,30,40,0.39), 0 4px 20px rgba(16,100,163,0.13);
  border: none;
  padding: 0.7rem 0.7rem;
  position: relative;
  min-width: 350px;
  max-width: 90vw;
  max-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-gallery-img {
  max-width: 80vw;
  max-height: 80vh;
  border-radius: 1.4rem;
  background: #fff;
  box-shadow: 0 8px 32px rgba(16,100,163,0.15), 0 2px 16px #101a2822;
  border: 1.5px solid #d0d8e6;
  margin: 0 72px;
  display: block;
  object-fit: contain;
  transition: box-shadow 0.19s, border-color 0.19s;
}
.modal-gallery-img:hover {
  box-shadow: 0 18px 50px rgba(16,100,163,0.23), 0 2px 30px #101a2822;
  border-color: #1064a3;
}
.modal-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(245,247,251,0.95);
  color: #1064a3;
  border: 2.5px solid #e0e9f8;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  font-size: 2.1rem;
  z-index: 8;
  box-shadow: 0 2px 10px rgba(16,100,163,0.08);
  cursor: pointer;
  opacity: 0.95;
  transition: background 0.17s, color 0.18s, border-color 0.17s, box-shadow 0.22s;
  display: flex; align-items: center; justify-content: center;
  outline: none;
  user-select: none;
}
.modal-gallery-nav.prev { left: 10px; }
.modal-gallery-nav.next { right: 10px; }
.modal-gallery-nav span { line-height: 1; display: block; }
.modal-gallery-nav:hover {
  background: #1064a3;
  color: #fff;
  border-color: #1064a3;
  box-shadow: 0 6px 24px rgba(16,100,163,0.18);
  opacity: 1;
}
.modal-gallery-close {
  position: absolute;
  top: 20px;
  right: 28px;
  background: rgba(245,247,251,0.97);
  color: #31465d;
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 2.2rem;
  z-index: 10;
  box-shadow: 0 2px 14px #101a2811;
  opacity: 0.85;
  cursor: pointer;
  transition: background 0.15s, color 0.16s, opacity 0.15s;
  text-align: center;
  padding-bottom: 0.18em;
}
.modal-gallery-close:hover {
  background: #f03e3e;
  color: #fff;
  opacity: 1;
}
/* Responsive Modal */
@media (max-width: 900px) {
  .modal-gallery-img { max-width: 95vw; margin: 0 18px; }
  .modal-gallery-nav { width: 42px; height: 42px; font-size: 1.4rem; }
  .modal-gallery-nav.prev { left: 2px; }
  .modal-gallery-nav.next { right: 2px; }
  .modal-gallery-close { top: 8px; right: 8px; width: 36px; height: 36px; font-size: 1.5rem; }
}
@media (max-width: 576px) {
  .modal-gallery-content { border-radius: 1.1rem; }
  .modal-gallery-img { max-height: 55vh; border-radius: 1.1rem; }
}
/* Professional Centered Gallery Modal */
.custom-gallery-modal {
  position: fixed !important;  /* Use absolute, not fixed */
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: 2100;
  height: 100vh; width: 100vw;
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
}
.custom-gallery-modal.active { 
  display: flex; 
 }
 
.custom-modal-overlay {
  position: fixed;
  left: 0; top: 0; right: 0px; bottom: 0;
  background: rgba(16,30,48,0.87);
  z-index: 0;
  animation: fadeInBg 0.25s ease;
  border-radius: 1.5rem;
}
@keyframes fadeInBg { from { opacity: 0; } to { opacity: .5; } }

.custom-modal-content {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 98vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  padding: 0;
  border-radius: 1.5rem;
  box-shadow: 0 8px 44px rgba(10,30,48,0.19), 0 2px 12px rgba(16,100,163,0.11);
  z-index: 10;
}
@keyframes popIn {
  0% { transform: scale(0.94) translateY(24px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.custom-modal-img {
  max-width: 95vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 1.2rem;
  background: #f7f9fa;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  margin: 0 10px;
  transition: box-shadow 0.17s;
}
.custom-modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(16,30,48,0.92);
  color: #fff;
  border: none;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  font-size: 2.3rem;
  z-index: 2;
  opacity: 0.88;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  display: flex; align-items: center; justify-content: center;
  user-select: none;
}
.custom-modal-nav:hover {
  background: #1064a3;
  opacity: 1;
}
.custom-modal-nav.prev { left: 18px; }
.custom-modal-nav.next { right: 18px; }
.custom-modal-close {
  position: absolute;
  top: 22px; right: 22px;
  background: #fff;
  color: #101a30;
  border: none;
  border-radius: 50%;
  width: 46px; height: 46px;
  font-size: 2.1rem;
  z-index: 11;
  box-shadow: 0 2px 8px rgba(10,30,48,0.10);
  opacity: 0.85;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, opacity 0.13s;
  text-align: center;
  padding: 0;
}
.custom-modal-close:hover {
  background: #f03e3e;
  color: #fff;
  opacity: 1;
}
@media (max-width: 900px) {
  .custom-modal-content { max-width: 98vw; max-height: 90vh; }
  .custom-modal-img { max-width: 96vw; max-height: 56vh; margin: 0 22px; }
  .custom-modal-nav { width: 42px; height: 42px; font-size: 1.5rem; }
  .custom-modal-nav.prev { left: 4px; }
  .custom-modal-nav.next { right: 4px; }
  .custom-modal-close { top: 7px; right: 11px; width: 35px; height: 35px; font-size: 1.5rem; }
}
@media (max-width: 576px) {
  .custom-modal-content { border-radius: 0.9rem; }
  .custom-modal-img { max-height: 44vh; border-radius: 0.8rem; }
}