/* ==============
 ========= CSS Documentation =========

 * Theme Name: Rotary
 * Version: 1.0
 * Description: Rotary Club
 * Author: Sajeeb Debnath
 * Author url: https://sypsolutions.com.bd/



 01. Layout
     1.1 --> Header
     1.2 --> Banner
     1.3 --> Footer

 02. Sections
     2.1 --> Overview


    =========================
============== */

/* ==== 
 --------- (1.1) Header styles start ---------
 ==== */
.header {
  position: fixed;
  top: 30px;
  left: 0px;
  right: 0px;
  width: 100%;
  z-index: 99;
  background: transparent;
}

.header .nav {
  padding: 30px 60px;
  background-color: #ffffff;
  border-radius: 5px;
  -webkit-box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.08);
  box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.08);
}

.header .nav__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 24px;
  min-width: 100%;
}

.header .nav__menu {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.header .nav__menu-items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.header .nav__menu-link {
  padding: 10px 12px;
  color: var(--rotary-body-text-color);
  font-weight: 500;
}

.header .nav__menu-link:hover {
  color: var(--rotary-secondary-color);
}

.header .nav__menu-item--dropdown {
  position: relative;
}

.header .nav__menu-item--dropdown .nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0px;
  min-width: 250px;
  max-width: 300px;
  background-color: var(--rotary-primary-color);
  padding: 30px;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  -webkit-transform: translateY(30px);
  transform: translateY(30px);
  -webkit-box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.08);
  box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.08);
}

.header .nav__menu-item--dropdown .nav__dropdown::-webkit-scrollbar {
  width: 0px;
}

.header .nav__menu-item--dropdown .nav__dropdown::before,
.header .nav__menu-item--dropdown .nav__dropdown::after {
  content: "";
  display: table;
}

.header .nav__menu-item--dropdown .nav__dropdown::after {
  clear: both;
}

.header .nav__menu-item--dropdown .nav__dropdown li {
  margin-bottom: 5px;
}

.header .nav__menu-item--dropdown .nav__dropdown li:nth-last-of-type(1) {
  margin-bottom: 0px;
}

.header .nav__menu-item--dropdown:hover .nav__dropdown {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}

.header .nav__menu-item--dropdown .nav__dropdown-item {
  font-size: 16px;
  font-weight: 500;
  width: 100%;
  color: black;
  border-bottom: 1px solid #2f2e2e30;
}

.header .nav__menu-item--dropdown .nav__dropdown-item:hover {
  padding-left: 8px;
  color: #ffffff;
  border-color: #ffffff;
}

.header .nav__menu-link--dropdown {
  position: relative;
}

.header .nav__menu-link--dropdown::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f107";
  border: none;
  font-size: 16px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.header .nav__menu-item--dropdown:hover .nav__menu-link--dropdown {
  color: var(--rotary-secondary-color);
}

.header .nav__menu-item--dropdown:hover .nav__menu-link--dropdown::after {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  color: var(--rotary-secondary-color);
}

.header .nav__menu-item--dropdown .nav__menu-link-child {
  position: relative;
}

.header .nav__menu-item--dropdown .nav__menu-link-child a {
  color: #ffffff !important;
  -webkit-box-pack: justify !important;
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
}

.header .nav__menu-item--dropdown .nav__menu-link-child a::after {
  color: #ffffff !important;
  -webkit-transform: rotate(0deg) !important;
  transform: rotate(0deg) !important;
  right: 0px;
}

.header .nav__menu-item--dropdown .nav__menu-link-child a:hover {
  color: #ffffff !important;
}

.header .nav__menu-item--dropdown .nav__menu-link-child a:hover::after {
  -webkit-transform: rotate(-90deg) !important;
  transform: rotate(-90deg) !important;
}

.header
  .nav__menu-item--dropdown
  .nav__menu-link-child:hover
  .nav__dropdown-child {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}

.header .nav__menu-item--dropdown .nav__dropdown-child {
  padding: 20px 30px;
  background: var(--rotary-primary-color);
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(30px);
  transform: translateY(30px);
  position: absolute;
  top: 0px;
  left: 100%;
  min-width: 170px;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  -webkit-box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.08);
  box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.08);
}

.header .nav__uncollapsed {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 24px;
}

.header .nav__uncollapsed a {
  color: var(--rotary-body-text-color);
}

.header .nav__uncollapsed .cmn-button--secondary {
  color: var(--rotary-body-text-color);
}

.header .nav__uncollapsed .cmn-button:hover {
  color: var(--rotary-body-text-color);
}

.header .social {
  margin-top: 40px;
  display: none;
}

.header .social a:hover {
  color: #ffffff;
}

.header .nav__uncollapsed-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 24px;
}

.header .nav__uncollapsed-item .cmn-button--secondary:hover {
  color: #ffffff;
  border: 1px solid var(--rotary-primary-color);
}

.header .nav__uncollapsed-item .cmn-button:nth-last-of-type(1):hover {
  background-color: var(--rotary-blackish-color);
  color: var(--rotary-primary-color) !important;
}

.header .nav__bar {
  padding: 0px;
  display: inline-block;
  background-color: transparent;
}

.header .nav__bar span {
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}

.header .nav__bar .icon-bar {
  width: 35px;
  height: 2px;
  background-color: var(--rotary-primary-color);
  margin: 0px;
  display: block;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.header .nav__bar .middle-bar {
  margin: 6px 0px;
  opacity: 1;
}

.header .nav__bar-toggle .top-bar {
  -webkit-transform: rotate(-45deg) translate(-7px, 4px);
  transform: rotate(-45deg) translate(-7px, 4px);
  background: var(--rotary-primary-color);
}

.header .nav__bar-toggle .middle-bar {
  opacity: 0;
}

.header .nav__bar-toggle .bottom-bar {
  -webkit-transform: rotate(45deg) translate(-7px, -4px);
  transform: rotate(45deg) translate(-7px, -4px);
  background: var(--rotary-primary-color);
}

.header-active {
  background-color: #ffffff;
  -webkit-animation: header 0.5s linear;
  animation: header 0.5s linear;
  top: 0px;
  z-index: 99;
  -webkit-box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.08);
  box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.08);
}

.header-active .nav {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.backdrop {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
  background-color: #12121260;
  z-index: 9;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  display: none;
}

.backdrop-active {
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
}

.body-active {
  overflow: hidden;
  min-width: 100vw;
  min-height: 100vh;
}

@-webkit-keyframes header {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@keyframes header {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

.header--secondary {
  top: 0px !important;
}

.header--secondary .nav {
  padding: 30px 0px 29px;
  background-color: transparent;
  border-bottom: 1px solid var(--rotary-blackish-color);
  border-radius: 0px;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.header--secondary .cmn-button {
  background: black;
  color: var(--rotary-primary-color) !important;
  border: none;
}
.header--secondary.header-active .cmn-button {
  background: var(--rotary-primary-color);
  color: black !important;
  border: none;
}
.header .nav__menu-link.active {
  color: var(--rotary-secondary-color);
}
.header--secondary .nav__menu-link {
  color: black;
}

.header--secondary.header-active .nav__menu-link.active {
  color: var(--rotary-secondary-color);
}

.header--secondary .nav__menu-link--dropdown {
  color: black;
}
.header--secondary.header-active .nav__menu-link--dropdown {
  color: white;
}

.header--secondary .nav__menu-link--dropdown:hover {
  color: black !important;
}
.header--secondary.header-active .nav__menu-link--dropdown:hover {
  color: white !important;
}

.header--secondary .nav__menu-item--dropdown:hover .nav__menu-link--dropdown {
  color: black;
}

.header--secondary
  .nav__menu-item--dropdown:hover
  .nav__menu-link--dropdown::after {
  color: black;
}
.header--secondary.header-active
  .nav__menu-item--dropdown:hover
  .nav__menu-link--dropdown::after {
  color: white;
}

.header--secondary .nav__uncollapsed .cmn-button--secondary {
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.header--secondary .nav__uncollapsed .cmn-button--secondary:hover {
  border: 1px solid var(--rotary-primary-color) !important;
}

.header--secondary .nav__bar .icon-bar {
  background: var(--rotary-body-text-color);
}

.header--secondary.header-active {
  background-color: white;
}
.header--secondary.header-active .nav__bar .icon-bar {
  background-color: var(--rotary-primary-color);
}
.header--secondary.header-active .nav {
  border-bottom: 1px solid transparent;
}
/* ==== 
 --------- (1.1) Header styles End ---------
 ==== */

/* ==== 
 --------- (1.2) Banner styles start ---------
 ==== */
.banner {
  padding: 266px 0px 240px;
  background-image: radial-gradient(
      circle at left center,
      white 300px,
      transparent 300px
    ),
    url(../images/banner/banner-one.png),
    linear-gradient(90deg, var(--rotary-primary-color) 0%, white 100%);
  background-repeat: no-repeat;
  background-position: left -110px center, right bottom, left top;
  background-size: auto, contain, 100%;
}

.banner--secondary {
  padding: 266px 0px 240px;
  background-color: #ffffff;
  background-image: -webkit-gradient(
      linear,
      left top,
      right top,
      from(#fdfffa),
      to(rgba(255, 255, 255, 0))
    ),
    url("../images/banner/banner-two.png");
  background-image: linear-gradient(
      90deg,
      #fdfffa 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    url("../images/banner/banner-two.png");
  background-repeat: no-repeat;
  background-position: left top, right top;
  background-size: 100%, auto 100%;
}

.banner--secondary .cmn-button:nth-of-type(1) {
  border: 1px solid var(--rotary-primary-color);
}

.banner--secondary .cmn-button:nth-of-type(1):hover {
  border: 1px solid #cecece;
}

.banner--tertiary {
  background-image: url("../images/flag-alt.png"),
    -webkit-gradient(linear, left top, right top, color-stop(60%, rgba(192, 217, 242, 0.13)), to(rgba(255, 255, 255, 0))),
    url("../images/banner/banner-three.png");
  background-image: url("../images/flag-alt.png"),
    linear-gradient(
      90deg,
      rgba(192, 217, 242, 0.13) 60%,
      rgba(255, 255, 255, 0) 100%
    ),
    url("../images/banner/banner-three.png");
  background-repeat: no-repeat;
  background-position: left 20px bottom 30px, left top, right top;
  background-size: 140px, 100%, auto 100%;
}

.banner--inner {
  padding: 196px 0px 80px;
  position: relative;
  background-image: url("../images/charity-count-bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left bottom;
  position: relative;
  z-index: 2;
}
.banner--inner:before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(252 239 22 / 62%);
  z-index: -1;
}
.banner--inner .banner--inner__content h2 {
  color: var(--rotary-body-text-color);
}

/* ==== 
 --------- (1.2) Banner styles End ---------
 ==== */

/* ==== 
 --------- (1.3) Footer styles start ---------
 ==== */
.footer {
  padding-top: 120px;
  background-image: linear-gradient(
    0deg,
    var(--rotary-primary-color) 0%,
    white 100%
  );
}

.footer h5 {
  margin-top: -6px;
  color: var(--rotary-body-text-color);
}

.footer .footer__single-content {
  margin-top: 20px;
}
.footer__single.logo {
  text-align: left;
  transform: translateY(-60px);
}
.footer .footer__single-content p {
  color: var(--rotary-body-text-color);
}

.footer .footer__single-content .social {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start;
  margin-top: 20px;
}

.footer .footer__single-content .social a {
  background-color: transparent;
  border: 1px solid var(--rotary-body-text-color);
}

.footer .footer__single-content .social a i {
  color: var(--rotary-body-text-color);
}

.footer .footer__single-content ul li {
  margin-bottom: 0px;
}

.footer .footer__single-content ul li:nth-last-of-type(1) {
  margin-bottom: 0px;
}

.footer .footer__single-content ul a {
  color: var(--rotary-body-text-color);
}

.footer .footer__single-content ul a:hover {
  color: var(--rotary-secondary-color);
  padding-left: 10px;
}

.footer .footer__single-content .footer__single-content__group {
  margin-bottom: 2px;
}

.footer
  .footer__single-content
  .footer__single-content__group:nth-last-of-type(1) {
  margin-bottom: 0px;
}
.footer .footer__single-content .footer__single-content__group a:hover {
  color: var(--rotary-body-text-color);
}
.footer hr {
  margin: 60px 0px 0px;
  opacity: 1;
  height: 1px;
  border: 0px;
  width: 100%;
  background-color: #00000054;
}

.footer .section__row {
  margin-bottom: -60px;
}

.footer .section__col {
  margin-bottom: 60px;
}

.footer .copyright {
  padding: 30px 0px;
}

.footer .copyright p {
  color: var(--rotary-body-text-color);
}

.footer .copyright ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: end;
  gap: 24px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.footer .copyright ul a {
  color: var(--rotary-body-text-color);
}

.footer .copyright ul a:hover {
  color: var(--rotary-primary-color);
}
/* ==== 
 --------- (1.3) Footer styles End ---------
 ==== */

/* ==== 
 --------- (2.1) Overview Section Styles Start ---------
 ==== */
.overview .overview__inner {
  padding: 30px;
  background-color: #ffffff;
  border-radius: 5px;
  -webkit-box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.08);
  box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.08);
}

.overview .overview__inner-card {
  text-align: center;
}

.overview .overview__inner-card__icon {
  width: 60px;
  min-width: 60px;
  height: 60px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0px auto 20px;
  border-radius: 5px;
  background-color: black;
}

.overview .overview__inner-card__icon i {
  font-size: 34px;
  color: var(--rotary-primary-color);
}

.overview h5 {
  margin-bottom: 8px;
  font-size: 18px;
  line-height: 22px;
}
.overview__inner-card__content p {
  font-size: 14px;
  line-height: 20px;
}
.overview .section__row {
  margin-bottom: -40px;
}

.overview .section__col {
  margin-bottom: 40px;
}

.overview .overview__thumb img {
  -webkit-animation: spin 20s linear infinite;
  animation: spin 20s linear infinite;
}

/* ==== 
 --------- (2.1) Overview Section Styles End ---------
 ==== */

/* ==== 
 --------- (2.2) About Section Styles Start ---------
 ==== */
.about {
  overflow-x: clip;
  background-image: url("../images/player-bg.png");
  background-repeat: no-repeat;
  background-size: auto;
  background-position: right 5% bottom 40px;
  position: relative;
  background-size: 100px;
}

.about .about__thumb {
  position: relative;
  height: 100%;
}
.about .about__thumb img {
  border-radius: 70px 70px 20px 20px;
}
.about .about__thumb .about__experience {
  width: 340px;
  min-width: 340px;
  height: 340px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border: 5px solid var(--rotary-primary-color);
  text-align: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: var(--rotary-primary-color);
  position: absolute;
  bottom: 50px;
  left: 0px;
  direction: ltr;
  box-shadow: 1px 1px 3px 0px rgb(0 0 0 / 37%);
}
.about .about__thumb .about__experience img {
  border-radius: 50%;
}

.about .about__section-inner {
  margin-top: 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 24px;
}

.about .about__section-inner__single {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
}

.about .about__section-inner__single-thumb {
  width: 60px;
  min-width: 60px;
  height: 60px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 5px;
  background-color: black;
}

.about .about__section-inner__single-thumb i {
  font-size: 34px;
  color: var(--rotary-primary-color);
}

.about .about__section-inner__single-content h5 {
  margin-bottom: 8px;
  text-transform: capitalize;
}

.about--alt {
  background-position: left 40px bottom 40px;
}

.about--secondary {
  background-color: rgba(12, 169, 64, 0.05);
  overflow-x: clip;
}

.about--secondary .about--secondary__thumb {
  position: relative;
  margin-bottom: 30px;
}

.about--secondary .about--secondary__thumb .about--secondary__thumb-experience {
  padding: 20px 30px;
  background-color: var(--rotary-primary-color);
  border-radius: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
  position: absolute;
  left: -40%;
  top: 30px;
  direction: ltr;
}

.about--secondary
  .about--secondary__thumb
  .about--secondary__thumb-experience
  h3 {
  color: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
}

.about--secondary
  .about--secondary__thumb
  .about--secondary__thumb-experience
  h3
  span {
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  overflow: visible !important;
  text-align: center !important;
}

.about--secondary
  .about--secondary__thumb
  .about--secondary__thumb-experience
  p {
  color: #ffffff;
}

.about--secondary .about--secondary__modal {
  width: 340px;
  min-width: 340px;
  height: 340px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: absolute;
  bottom: -60px;
  left: -20%;
}

.about--secondary .about--secondary__modal img {
  border: 10px solid white;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.about--secondary .about--secondary__single {
  margin-top: 40px;
}

.about--secondary .about--secondary__single .about--secondary__single-item {
  padding: 20px;
  border: 1px solid rgba(12, 169, 64, 0.15);
  border-radius: 5px;
  height: 100%;
}

.about--secondary
  .about--secondary__single
  .about--secondary__single-item__icon {
  width: 50px;
  min-width: 50px;
  height: 50px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border: 1px solid rgba(12, 169, 64, 0.15);
  border-radius: 5px;
  margin-bottom: 15px;
}

.about--secondary
  .about--secondary__single
  .about--secondary__single-item__icon
  i {
  font-size: 34px;
  color: #0e7a31;
}

.about--tertiary {
  background-color: #0ca9400d;
}

.about--tertiary .about--tertiary__thumb {
  position: relative;
}

.about--tertiary .about--tertiary__thumb img {
  width: 100%;
}

.about--tertiary .about--tertiary__thumb-experience {
  padding: 20px 42px;
  background-color: #ffffff;
  -webkit-box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.08);
  box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
  position: absolute;
  right: 0%;
  bottom: 0%;
  direction: ltr;
}

.about--tertiary .about--tertiary__thumb-experience h3 {
  color: #0e7a31;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
}

.about--tertiary .about--tertiary__thumb-experience h3 span {
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  overflow: visible !important;
  text-align: center !important;
}

.about--tertiary .about--tertiary__thumb-experience p {
  color: #0e7a31;
  font-weight: 700;
}

.about--tertiary .section__content h2 {
  margin-bottom: 0px;
}

.about--tertiary .about--secondary__tabs {
  margin-top: 30px;
}

.about--tertiary .about--secondary__tabs .about--secondary__tabs-btn-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.about--tertiary .about--secondary__tabs .about--secondary__tabs-btn {
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.about--tertiary .about--secondary__tabs .about--secondary__tabs-btn:hover {
  text-decoration: underline;
  color: #0e7a31;
}

.about--tertiary .about--secondary__tabs .about--secondary__tabs-btn-active {
  color: #0e7a31;
  text-decoration: underline;
}

.about--tertiary .about--secondary__tabs hr {
  width: 100%;
  height: 1px;
  border: 0px;
  opacity: 1;
  background-color: rgba(12, 169, 64, 0.15);
  margin: 20px 0px;
}
/* ==== 
 --------- (2.2) About Section Styles End ---------
 ==== */

/* ==== 
 --------- (2.3) Club Section Styles Start ---------
 ==== */
.club {
  overflow-x: clip;
  background-color: var(--rotary-section-bg);
  background-repeat: no-repeat;
  background-size: auto;
  position: relative;
  padding-bottom: 180px;
}

.club_thumb_images img.image-one {
  z-index: 1;
  position: absolute;
  top: 70px;
  right: 0;
  border-radius: 20px;
}

.club_thumb_images img.image-two {
  position: absolute;
  z-index: 2;
  border-radius: 30px 0px 0px 30px;
  bottom: 60px;
  right: 70px;
}
.club .club__thumb {
  position: relative;
  height: 100%;
}

.club .club__thumb-experience {
  padding: 20px 30px;
  background-color: var(--rotary-primary-color);
  border-radius: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
  position: absolute;
  right: -3%;
  bottom: -9%;
  z-index: 3;
}

.club .club__thumb-experience h3 {
  color: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
}

.club .club__thumb-experience h3 span {
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  color: black !important;
  overflow: visible !important;
  text-align: center !important;
}

.club .club__thumb-experience p {
  color: black;
}

.club .cmn-button {
  border: 0px;
}

.club--alt {
  background-position: right 40px bottom 70px;
}

.club--alt .club__thumb-experience {
  right: 0px !important;
}
/* ==== 
 --------- (2.3) Club Section Styles End ---------
 ==== */

/* ==== 
 --------- (2.4) Event Section Styles Start ---------
 ==== */

.event .event__slider-single {
  padding: 10px 10px 30px;
  background-color: #ffffff;
  border-radius: 5px;
  -webkit-box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.08);
  box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.08);
  margin-bottom: 40px;
}

.event .event__slider-single:hover .event__slider-single__thumb img {
  -webkit-transform: scale(1.2) rotate(5deg);
  transform: scale(1.2) rotate(5deg);
}

.event .event__slider-single__thumb {
  border-radius: 5px;
  text-align: center;
}

.event .event__slider-single__thumb a {
  width: 100%;
  display: block;
  border-radius: 5px;
  overflow: hidden;
}

.event .event__slider-single__thumb a img {
  border-radius: 5px;
  width: 100%;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  height: 190px;
  object-fit: cover;
}

.event .event__slider-single__thumb-small {
  width: 60px;
  min-width: 60px;
  height: 60px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0px auto -30px;
  border: 2px solid #ffffff;
  background-color: black;
  border-radius: 5px;
  position: relative;
  top: -30px;
}

.event .event__slider-single__thumb-small i {
  color: var(--rotary-primary-color);
  font-size: 24px;
}

.event .event__slider-single__content {
  text-align: center;
  margin-top: 24px;
  padding: 0px 12px;
}

.event .event__slider-single__content h5 {
  margin-bottom: 10px;
  font-size: 20px;
  line-height: 25px;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 48px;
}
.event .event__slider-single__content p {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  height: 65px;
}
.event .event__slider-single__content .cmn-button {
  padding: 12px 24px;
  margin-top: 30px;
}

.event--secondary {
  position: relative;
  z-index: 1;
}

.event--secondary::before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 40%;
  background-color: rgba(12, 169, 64, 0.05);
  z-index: -1;
}

.event--secondary .event__slider-single__thumb-small {
  position: static;
  margin-bottom: 24px;
}

.event--secondary .event__slider--secondary {
  margin-top: -10px;
}

.event--secondary .event__slider-single {
  padding: 30px 20px;
  margin-top: 10px;
}

.event--tertiary {
  background-color: #0ca9400d;
  background-image: url("../images/dots.png"), url("../images/dots.png");
  background-repeat: no-repeat;
  background-size: auto, auto;
  background-position: left 16% bottom 22%, right 16% bottom 22%;
}

.event--tertiary .event--tertiary__card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 30px;
  padding: 10px;
  background-color: #ffffff;
  -webkit-box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.08);
  box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.08);
  border-radius: 5px;
  margin-bottom: 40px;
}

.event--tertiary .event--tertiary__card:hover a img {
  -webkit-transform: scale(1.2) rotate(-6deg);
  transform: scale(1.2) rotate(-6deg);
}

.event--tertiary .event--tertiary__card-thumb {
  width: 100%;
  max-width: 300px;
}

.event--tertiary .event--tertiary__card-thumb a {
  display: block;
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
}

.event--tertiary .event--tertiary__card-thumb a img {
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  width: 100%;
}

.event--tertiary .event--tertiary__card-content h5 {
  margin-bottom: 15px;
}

.event--tertiary .event--tertiary__card-content p {
  margin-bottom: 30px;
}

.event--tertiary .event--tertiary__card-content .cmn-button {
  padding: 12px 24px;
}
/* ==== 
 --------- (2.4) Event Section Styles End ---------
 ==== */

/* ==== 
 --------- (2.5) Counter Section Styles Start ---------
 ==== */
.counter {
  background: url("../images/charity-count-bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom left;
  position: relative;
  z-index: 1;
}

.counter::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(252 239 22 / 52%);
  z-index: -1;
}

.counter .counter__card {
  text-align: center;
  padding: 30px;
  background: linear-gradient(
    180deg,
    rgb(255 255 255 / 38%) 0%,
    rgb(255 255 255 / 44%) 100%
  );
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 5px;
}

.counter .counter__card .counter__card-thumb {
  width: 70px;
  min-width: 70px;
  height: 70px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0px auto 20px;
  border-radius: 5px;
  background-color: black;
}

.counter .counter__card .counter__card-thumb i {
  font-size: 34px;
  color: var(--rotary-primary-color);
}

.counter .counter__card h2 {
  color: #ffffff;
  margin-bottom: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
}

.counter .counter__card h2 span {
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  color: black !important;
  overflow: visible !important;
  text-align: center !important;
}

.counter .counter__card p {
  color: black;
}
/* ==== 
 --------- (2.5) Counter Section Styles End ---------
 ==== */

/* ==== 
 --------- (2.6) Join Club Section Styles Start ---------
 ==== */
.join-club {
  position: relative;
  z-index: 3;
}
.join-club:before {
  content: "";
  width: 130%;
  height: 100%;
  background-color: var(--rotary-section-bg);
  position: absolute;
  right: 30%;
  top: 0;
  transform: skewX(-21deg);
  border-right: 10px solid var(--rotary-primary-color);
  z-index: -1;
}
.join-club::after {
  content: "";
  width: 42%;
  height: 100%;
  right: 0;
  top: 0;
  position: absolute;
  background-image: url(../images/club-bg.jpg);
  background-repeat: no-repeat;
  background-size: auto 100%, 100%;
  background-position: left;
  z-index: -2;
  clip-path: polygon(53% 0, 100% 0%, 100% 100%, 0 103%);
}
.join-club .section__content h2 {
  margin-bottom: 0px;
}

.join-club .join-club__form {
  margin-top: 60px;
}

.join-club button {
  margin-top: 30px;
}

.join-club--secondary {
  background-image: url("../images/join-bg-two.png"),
    -webkit-gradient(linear, left top, left bottom, color-stop(50%, #0ca9400d), color-stop(50%, #0ca9400d));
  background-image: url("../images/join-bg-two.png"),
    linear-gradient(#0ca9400d 50%, #0ca9400d 50%);
  background-position: right -100px top, left top;
}

.join--tertiary .section__content {
  padding: 40px;
  background-color: rgba(255, 255, 255, 0.5);
  margin-top: 0px;
}

.join--tertiary .section__content h2 {
  margin-bottom: 60px;
}

.join--tertiary .section__content .cmn-button {
  margin-top: 40px;
  border: 1px solid var(--rotary-primary-color);
}

.join--tertiary .input-single input,
.join--tertiary .input-single textarea {
  background-color: rgba(255, 255, 255, 0.8);
}
/* ==== 
 --------- (2.6) Join Club Section Styles End ---------
 ==== */

/* ==== 
 --------- (3.1) Member Pages Section Styles Start ---------
 ==== */
.single-member-item .member-img img {
  border-radius: 100%;
  width: 190px;
  height: 190px;
  object-fit: cover;
  object-position: top;
  transition: 0.3s all;
  background-color: var(--rotary-section-bg);
}

.single-member-item {
  display: flex;
  align-items: center;
  gap: 20px;
  background: white;
  box-shadow: 1px -1px 14px 4px rgba(0, 0, 0, 0.08);
  border-radius: 100px 0 0 100px;
  margin-bottom: 30px;
}
.single-member-item .member-img {
  border-radius: 100%;
  overflow: hidden;
  border-width: 5px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 1) var(--rotary-secondary-color)
    rgba(255, 255, 255, 1) var(--rotary-secondary-color);
  transition: 0.3s all;
}

.single-member-item:hover .member-img {
  border-color: var(--rotary-secondary-color) rgba(255, 255, 255, 1)
    var(--rotary-secondary-color) rgba(255, 255, 255, 1);
  transform: rotate(90deg);
}
.single-member-item:hover .member-img img {
  transform: rotate(-90deg);
}
.single-member-item .member-info-content .name {
  font-size: 18px;
  font-weight: 500;
}

.single-member-item .member-info-content .title {
  font-size: 14px;
  line-height: 20px;
  opacity: 0.9;
}

.single-member-item .member-info-content .btn-link {
  text-decoration: none;
  margin-top: 7px;
  font-size: 14px;
  color: var(--rotary-secondary-color);
}

.single-member-item .member-info-content .btn-link > span {
  color: var(--rotary-secondary-color);
  font-size: 15px;
  margin-top: 2px;
}
.member-info-wrapper {
  background: #fffdaf54;
  padding: 30px;
}

.member-info-head .title {
  font-size: 24px;
  color: var(--rotary-body-text-color);
  position: relative;
  padding-bottom: 7px;
}

.member-info-head {
  margin-bottom: 30px;
}

.member-info-head .title:after,
.member-info-head .title:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background: var(--rotary-secondary-color);
  left: 0;
  bottom: 0;
}

.member-info-head .title:after {
  width: 50%;
  background: var(--rotary-body-text-color);
}
.member-info-wrapper.home {
  background: transparent;
  padding: 0;
}

.member-info-wrapper.home .member-info-head .title {
  text-align: center;
}
/* ==== 
 --------- (3.1) Member Pages Section Styles End ---------
 ==== */

/* ==== 
 --------- (3.2) About & Event Pages Section Styles Start ---------
 ==== */
.about-page .about__thumb img {
  max-width: -webkit-fill-available;
}
.about-page .about__thumb .about__experience {
  left: 50%;
  transform: translateX(-50%);
  bottom: 80px;
}
.event-page .event__slider-single {
  margin-bottom: 20px;
}
.mission-vision-section {
  width: 100%;
  background: var(--rotary-section-bg);
  position: relative;
  z-index: 2;
}
.mission-vision-section:before {
  content: " ";
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  background-image: url(../images/mision-vission-bg.png);
  background-position: right top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  z-index: -1;
}
.mission-vission {
  background-image: url("../images/mission-vission.png");
  background-repeat: no-repeat;
  background-position: center left;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mission-vission-title {
  font-size: 35px;
  font-weight: 800;
}

/* ==== 
 --------- (3.2) About & Event Pages Section Styles End ---------
 ==== */

/* ==== 
 --------- (3.3) Contact Pages Section Styles Start ---------
 ==== */
.contact {
  background: var(--rotary-section-bg);
}

.contact .contact__item {
  padding: 30px 15px;
  background-color: #ffffff;
  border-radius: 10px;
  -webkit-box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.08);
  box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.08);
  text-align: center;
}

.contact .contact__item-thumb {
  width: 70px;
  min-width: 70px;
  height: 70px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: var(--rotary-body-text-color);
  border: 1px solid #ebebeb;
  border-radius: 5px;
  margin: 0px auto 24px;
}

.contact .contact__item-thumb i {
  font-size: 40px;
  color: var(--rotary-primary-color);
}

.contact .contact__item-content h5 {
  margin-bottom: 10px;
}

.contact .contact__item-content p {
  margin-bottom: 5px;
}

.contact .contact__item-content p:nth-last-of-type(1) {
  margin-bottom: 0px;
}

.contact-form {
  position: relative;
  z-index: 1;
}

.contact-form::before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 50%;
  background: linear-gradient(#fcef1617 50%, #fcef1617 50%);
  z-index: -1;
}

.contact-form__inner {
  padding: 30px;
  background-color: #ffffff;
  -webkit-box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.08);
  box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.08);
  border-radius: 10px;
}

.contact-form__inner label {
  margin-bottom: 15px;
}

/* ==== 
 --------- (3.3) Contact Pages Section Styles End ---------
 ==== */

/* ==== 
 --------- (3.4) Donation Pages Section Styles Start ---------
 ==== */
.donation {
  position: relative;
  margin: 100px 0;
  padding: 0;
  margin-bottom: 40px;
}

.doantion-title-img {
  position: absolute;
  height: 100%;
  width: 45%;
  background-size: cover;
  top: 0;
  right: 0;
  background-position: center;
  border-radius: 50px 20px 20px 50px;
}
.make-donation-text h1 {
  font-size: 35px;
  line-height: 50px;
}

.make-donation-text p {
  font-size: 18px;
  line-height: 28px;
}
.donar-information-form .title {
  font-size: 25px;
  margin-bottom: 10px;
}

.donation-information-content {
  padding: 30px;
  background-color: #ffffff;
  -webkit-box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.08);
  box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  text-align: center;
}

.donation-information-content .number {
  margin: 15px 0;
}

.donation-information-content h5 {
  font-size: 20px;
  line-height: 24px;
  font-weight: 300;
}
/* ==== 
 --------- (3.4) Donation Pages Section Styles End ---------
 ==== */

/* ==== 
 --------- (3.5) What We Do Pages Section Styles Start ---------
 ==== */
.activity-content-wrapper h3 {
  font-size: 28px;
  line-height: 33px;
  margin-bottom: 15px;
}

.activity-img-wrapper {
  text-align: right;
}

/* ==== 
 --------- (3.6) What We Do Pages Section Styles End ---------
 ==== */

/* ==== 
 --------- (3.7) Registration Section Styles Start ---------
 ==== */
.registration-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
  border-radius: 25px 0px 0px 25px;
  position: relative;
  z-index: 3;
}

.contact-form__inner.join-registration {
  padding: 0;
}

.contact-form__inner.join-registration form {
  padding: 50px 30px;
}
.contact-form__inner.join-registration input,
.contact-form__inner.join-registration select {
  font-size: 14px;
}

.contact-form__inner.join-registration label {
  font-size: 15px;
  margin-bottom: 10px;
}
.contact-form__inner.join-registration .input-group {
  margin-bottom: 0;
}
.contact-form__inner.join-registration .input-single {
  margin-bottom: 10px;
}
.thank-you-message-area .success-message {
  text-align: center;
  box-shadow: 2px 2px 7px 0px rgba(0, 0, 0, 0.15);
  background: white;
  padding: 30px;
  border-radius: 25px;
}

.thank-you-message-area {
  margin-bottom: 80px;
}

.thank-you-message-area .success-message h2 {
  font-size: 24px;
  font-weight: 600;
  color: var(--primary-color);
}

.thank-you-message-area .success-message p {
  font-size: 16px;
  margin-bottom: 5px;
}

.thank-you-message-area .success-message p > span {
  color: var(--primary-color);
  font-weight: 600;
}
/* ==== 
 --------- (3.7) Registration Section Styles End ---------
 ==== */