/* lightbox */
.mfp-wrap {
  z-index: 99999999;
}
.mfp-bg {
  z-index: 9999999;
}
.grkma-our-gallery {
  text-align: center;
}
.grkma-our-gallery img {
  margin: 5px 2px;
  border-radius: 10px;
  box-shadow: #eb5310 0px 0px 3px 1px;
  border: 2px solid #eb5210cc;
  max-width: 200px;
}

.section-heading {
  max-width: 650px;
  margin: 0px auto 20px;
}
.heading-welcome-text {
  text-align: center;
  font-size: 25px;
  font-weight: 500;
  position: relative;
}
.heading-welcome-text::after {
  content: "";
  width: 120px;
  height: 2px;
  position: absolute;
  bottom: -17px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #000;
}
.heading-welcome-text::before {
  content: "";
  background-image: url("../icon/border-center.png");
  background-size: 70% 70%;
  background-repeat: no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  position: absolute;
  bottom: -30px;
  left: 50%;
  outline: 5px solid #fff;
  transform: translateX(-50%);
  background-color: #ffffff;
  z-index: 9;
  border: 3px solid #000;
  border-radius: 50%;
}
.heading-welcome-text.text-start::after {
  left: 0%;
  transform: translateX(0%);
}
.heading-welcome-text-name.text-start {
  font-size: 20px;
  margin-top: 35px;
  font-weight: 500;
}
.heading-welcome-text.text-start::before {
  left: 11%;
  transform: translateX(-50%);
}

.heading-welcome-text-name {
  text-align: center;
  margin-top: 30px;
  font-size: 30px;
  font-weight: 600;
}

.grkm-about-section-main {
  padding: 50px 0px 0px;
}

.grkm-about-section-image-slider-nav {
  text-align: center;
  margin-top: 5px;
}
.grkm-about-section-image-slider-nav button {
  background-color: #eb5310;
  color: #fff;
  padding: 15px 15px 10px;
  border-radius: 50%;
  margin: 0px 10px;
  box-shadow: #000 0px 0px 1px;
  outline: 1px solid #fff;
}
.grkm-about-section-image-slider-nav button:hover {
  background-color: #fff;
  color: #eb5310;
  box-shadow: #eb5310 0px 0px 1px;
}

.about-seciton-button {
  background-color: aliceblue;
  padding: 15px;
}

.grkm--activities-section-bottom-button {
  margin-top: 30px;
}
.grkm-services-slider-nav {
  margin: auto;
  justify-content: center;
}
grkm-service-title {
  font-family: var(--font-Roboto);
}

.grkm-volunteer {
  background-image: url(../img/about-2-img.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}
.grkm-volunteer-block {
  padding: 100px 80px;
}
.grkm-volunteer-row {
  background-color: #000000c8;
  text-align: center;
}
.grkm-volunteer-block::before {
  background: transparent;
}
.grkm-volunteer-list {
  justify-content: center;
}

.grkm-volunteer .modal-header {
  background: #0d6efd;
  color: #fff;
}

.grkm-volunteer .left-panel {
  background: #f0f7ff;
  padding: 20px;
  border-radius: 10px;
  height: 100%;
}

.grkm-volunteer .right-panel {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  border-left: 3px solid #0d6efd;
  height: 100%;
}

.grkm-volunteer .bank-box {
  background: #f8f9fa;
  border-left: 4px solid #0d6efd;
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 15px;
}

.grkm-volunteer .left-panel h4 {
  color: #0d6efd;
  font-weight: 700;
}

.grkm-volunteer .right-panel h4 {
  font-weight: 700;
  color: #0d6efd;
}

.modal-under-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(30px, 2.1vw, 40px);
  margin-bottom: clamp(15px, 1.31vw, 25px);
}

.modal-under-list li::before {
  content: "\f106";
  font-family: flaticon_charitics !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: clamp(9px, 0.63vw, 12px);
  margin-right: 5px;
}

.grkm-header-container {
  justify-content: space-between;
}

.logo {
  max-width: 340px;
}
@media (max-width: 575px) {
  .logo {
    max-width: 240px;
  }
}

@media (max-width: 575px) {
  .heading-welcome-text-name {
    font-size: 20px;
  }
  .grkma-our-gallery img {
    max-width: 100%;
  }
}

.main-slider-banner {
  width: 100%;
  overflow: hidden;
}

.main-slider-banner .swiper-wrapper {
  width: 100%;
}

.main-slider-banner .swiper-slide {
  width: 100% !important;
  height: 100%;
}

.main-slider-banner-content {
  width: 100%;
  height: 100%;
  position: relative;
}

.main-slider-banner-content-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}