/*
@File: Pily Template Style

* This file contains the styling for the actual template, this
is the file you need to edit to change the look of the
template.

This files table contents are outlined below>>>>>

*******************************************
*******************************************

** - Default CSS
** - Home Demo One CSS
** - Home Demo Two CSS
** - Home Demo Three CSS
** - About CSS
** - Events CSS
** - Event Details CSS
** - Blog Details CSS
** - Contact CSS
** - User Form CSS
** - Donation CSS
** - FAQ CSS
** - Error CSS
** - Coming Soon CSS
** - Rules CSS
** - Go Top CSS
** - Preloader CSS
*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
/*----- Default CSS -----*/
body {
  font-family: "Montserrat", sans-serif;
  color: #464646;
  background-color: #fff;
  font-size: 15px;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  color: #2A2A2A;
  font-family: "Poppins", sans-serif;
}

p {
  line-height: 1.7;
}

a {
  transition: 0.5s all ease;
  text-decoration: none;
}

img {
  max-width: 100%;
}

.d-table {
  width: 100%;
  height: 100%;
}

.d-table-cell {
  vertical-align: middle;
}

.mtb-100 {
  margin-top: 100px;
  margin-bottom: 100px;
}

.mt-100 {
  margin-top: 100px;
}

.mt-50 {
  margin-top: 50px;
}

.mb-100 {
  margin-bottom: 100px;
}

.ptb-100 {
  padding-top: 100px;
  padding-bottom: 100px;
}

.ptb-50 {
  padding-bottom: 50px;
}

.ptb-30 {
  padding-top: 30px;
  padding-bottom: 20px;
}

.pt-100 {
  padding-top: 100px;
}

.pt-50 {
  padding-top: 50px;
}

.pb-50 {
  padding-bottom: 50px;
}

.pb-70 {
  padding-bottom: 70px;
}

.pb-100 {
  padding-bottom: 100px;
}

button:focus {
  outline: 0;
}

.btn.focus, .btn:focus {
  box-shadow: none;
}

.common-btn {
  display: inline-block;
  position: relative;
  z-index: 1;
  border: 0;
  border-radius: 0;
  transition: 0.5s all ease;
  color: #fff;
  background-color: #F00041;
  padding: 12px 25px;
  font-weight: 500;
}
.common-btn:before {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  background-color: #2A2A2A;
  opacity: 0;
  visibility: hidden;
  z-index: -1;
  transition: 0.5s all ease;
}
.common-btn i {
  display: inline-block;
  font-size: 20px;
  position: relative;
  top: 2px;
}
.common-btn:hover {
  color: #fff;
}
.common-btn:hover:before {
  opacity: 1;
  visibility: visible;
  width: 100%;
}
.common-btn.two {
  background-color: #C03D30;
}
.common-btn.two:before {
  background-color: #182C4F;
}

.section-title {
  text-align: center;
  margin-bottom: 40px;
  margin-top: -5px;
  position: relative;
  z-index: 1;
}

.section-title1 {
  text-align: center;
  margin-bottom: 40px;
  margin-top: 30px;
  position: relative;
  z-index: 1;
}

.section-title1 .sub-title {
  display: inline-block;
  font-weight: 500;
  color: #F00041;
  margin-bottom: 10px;
}
.section-title1 h2 {
  margin-bottom: 0;
  font-size: 50px;
}
.section-title1 p {
  margin-top: 8px;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  font-size: 16px;
  color: #000;
}
.section-title1.two .sub-title {
  color: #C03D30;
  font-size: 16px;
}
.section-title1.two h2 {
  color: #182C4F;
}

.section-title .sub-title {
  display: inline-block;
  font-weight: 500;
  color: #F00041;
  margin-bottom: 10px;
}
.section-title h2 {
  margin-bottom: 0;
  font-size: 50px;
}
.section-title p {
  margin-top: 8px;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  color: #000;
}
.section-title.two .sub-title {
  color: #C03D30;
}
.section-title.two h2 {
  color: #182C4F;
}

/*----- Home Demo One CSS -----*/
/*-- Header --*/
.header-area {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #005BB5;
  position: relative;
  z-index: 9999;
}
.header-area .left span {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  margin-right: 3px;
  color: #fff;
}
.header-area .left a {
  display: inline-block;
  color: #fff;
  font-size: 14px;
  border-bottom: 1px solid transparent;
}
.header-area .left a i {
  display: inline-block;
  font-size: 20px;
  position: relative;
  top: 3px;
}
.header-area .left a:hover {
  border-bottom: 1px solid #fff;
}
.header-area .right {
  text-align: right;
}
.header-area .right .social-icon {
  margin: 0;
  padding: 0;
  display: inline-block;
  margin-right: 15px;
  vertical-align: middle;
}
.header-area .right .social-icon li {
  list-style-type: none;
  display: inline-block;
  margin-right: 10px;
}
.header-area .right .social-icon li:last-child {
  margin-right: 0;
}
.header-area .right .social-icon li a {
  display: block;
  color: #fff;
  font-synthesis: 20px;
}
.header-area .right .social-icon li a:hover {
  transform: translate(0, -3px);
}
.header-area .right .nav-flag-dropdown {
  display: inline-block;
  vertical-align: middle;
}
.header-area .right .nav-flag-dropdown .nice-select {
  border: 0;
  height: 25px;
  line-height: 25px;
  background-color: transparent;
  padding-left: 0;
  color: #fff;
  font-size: 14px;
}
.header-area .right .nav-flag-dropdown .nice-select:after {
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  top: 51%;
}
.header-area .right .nav-flag-dropdown .nice-select ul {
  border-radius: 0;
  left: -50px;
}
.header-area .right .nav-flag-dropdown .nice-select ul li {
  color: #2A2A2A;
}
.header-area .right .dropdown-toggle::after {
  display: none;
}

/*-- Navbar --*/
.main-nav {
  background: #fff;
  box-shadow: 0px 0px 20px 0px rgba(221, 221, 221, 0.3098039216);
  transition: 0.5s all ease;
  padding-top: 0;
  padding-bottom: 0;
}
.main-nav nav {
  padding: 0;
}

.main-nav nav .navbar-brand {
  margin-right: 0;
  padding: 0;
  padding-top: 6px;
  position: relative;
  transition: 0.5s all ease;
  height: 90px; /* match image height */
  display: flex;
  align-items: flex-start;
}

.main-nav nav .navbar-brand img {
  height: 90px;
  width: auto;
  max-width: 100%;
  transition: 0.5s all ease;
  display: block;
}

/* Always enforce the logo height */
.navbar-brand img {
  height: 90px !important;
  width: auto;
}

.main-nav nav .navbar-brand:before {
  position: absolute;
  content: "";
  width: 130px;  /* adjust to match image width (110px) + 10px padding */
  height: 40px;
  left: -10px;   /* trimmed from previous -25px */
  bottom: -14px;
  background-color: #fff;
  z-index: -1;
  box-shadow: 0px 16px 26px rgba(221, 221, 221, 0.3);
  transition: 0.5s all ease;
  border-radius: 8px;
}

/* Prevent shrink on scroll-triggered sticky classes */
.navbar-area.sticky .navbar-brand img,
.navbar-area.is-sticky .navbar-brand img,
.navbar-area.sticky-top .navbar-brand img {
  height: 90px !important;
  width: auto;
}

.navbar-area.sticky .navbar-brand,
.navbar-area.is-sticky .navbar-brand {
  height: 90px !important;
  padding-top: 6px;
}

.main-nav nav .navbar-nav {
  margin-left: auto;
  margin-right: auto;
}
.main-nav nav .navbar-nav .nav-item:hover a {
  color: #F00041;
}
.main-nav nav .navbar-nav .nav-item a {
  font-weight: 500;
  color: #2A2A2A;
  margin-left: 12px;
  margin-right: 12px;
  text-transform: unset;
  position: relative;
  transition: 0.5s all ease;
}
.main-nav nav .navbar-nav .nav-item a:before {
  position: absolute;
  content: "";
  width: 0;
  height: 2px;
  left: 0;
  bottom: -4px;
  background-color: #F00041;
  transition: 0.5s all ease;
}
.main-nav nav .navbar-nav .nav-item a:hover, .main-nav nav .navbar-nav .nav-item a:focus, .main-nav nav .navbar-nav .nav-item a.active {
  color: #F00041;
}
.main-nav nav .navbar-nav .nav-item a:hover:before, .main-nav nav .navbar-nav .nav-item a:focus:before, .main-nav nav .navbar-nav .nav-item a.active:before {
  width: 25px;
}
.main-nav nav .navbar-nav .nav-item a i {
  display: inline-block;
  font-size: 18px;
  position: relative;
  top: 2px;
}
.main-nav nav .navbar-nav .nav-item .dropdown-menu {
  background: #fff;
  padding: 0;
  border: 0;
  border-radius: 0;
  border-top: 3px solid #F00041;
}
.main-nav nav .navbar-nav .nav-item .dropdown-menu li {
  border-bottom: 1px solid rgba(221, 221, 221, 0.3098039216);
  position: relative;
}
.main-nav nav .navbar-nav .nav-item .dropdown-menu li:before {
  position: absolute;
  content: "";
  width: 0;
  height: 1px;
  left: 0;
  right: 0;
  bottom: -1px;
  margin-left: auto;
  margin-right: auto;
  background-color: #F00041;
  transition: 0.5s all ease;
}
.main-nav nav .navbar-nav .nav-item .dropdown-menu li:hover:before {
  width: 100%;
}
.main-nav nav .navbar-nav .nav-item .dropdown-menu li:hover a {
  color: #F00041;
}
.main-nav nav .navbar-nav .nav-item .dropdown-menu li:hover .dropdown-menu {
  top: -3px !important;
}
.main-nav nav .navbar-nav .nav-item .dropdown-menu li a {
  font-size: 14px;
  color: #2A2A2A;
  padding-top: 12px;
  padding-bottom: 12px;
}
.main-nav nav .navbar-nav .nav-item .dropdown-menu li a:before {
  display: none;
}
.main-nav nav .navbar-nav .nav-item .dropdown-menu li a:hover, .main-nav nav .navbar-nav .nav-item .dropdown-menu li a:focus, .main-nav nav .navbar-nav .nav-item .dropdown-menu li a.active {
  color: #F00041;
}
.main-nav nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu {
  left: unset;
  right: -100%;
  top: 15px;
}
.main-nav nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a {
  color: #2A2A2A;
  text-transform: unset;
}
.main-nav nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a:hover, .main-nav nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a:focus, .main-nav nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a.active {
  color: #F00041;
}
.main-nav .dropdown-toggle::after {
  display: none;
}

.main-nav.menu-shrink nav .navbar-brand img {
  max-width: 110px !important;
}

.main-nav.menu-shrink nav .navbar-brand {
  padding-top: 10px !important;
}

.main-nav.menu-shrink nav .navbar-brand:before,
.main-nav.menu-shrink nav .navbar-brand:after {
  opacity: 1 !important;
  visibility: visible !important;
}


.side-nav .left {
  display: inline-block;
  font-weight: 500;
  color: #005BB5;
  margin-right: 15px;
}
.side-nav .left:hover {
  color: #F00041;
}

/*-- Banner --*/
.banner-area {
  height: 900px;
  background-image: url("../images/banner/banner-bg.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
  border-bottom: 1px solid #ddd;
}
.banner-area .banner-shape img {
  position: absolute;
}
.banner-area .banner-shape img:nth-child(1) {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
}
.banner-area .banner-shape img:nth-child(2) {
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
}
.banner-area .banner-shape img:nth-child(3) {
  right: 0;
  bottom: 0;
  max-width: 600px;
  z-index: -1;
}

.banner-content {
  position: relative;
  z-index: 1;
  max-width: 830px;
}
.banner-content h1 {
  color: #fff;
  font-size: 40px;
  margin-bottom: 15px;
}
.banner-content p {
  margin-bottom: 20px;
  font-weight: 500;
  font-size: 16px;
  color: #fff;
}

/*-- Mission --*/
.mission-area {
  position: relative;
}
.mission-area .mission-shape {
  position: absolute;
  bottom: 0;
  left: 0;
}

.mission-item {
  transition: 0.5s all ease;
  margin-bottom: 30px;
  background-color: #fff;
  position: relative;
  z-index: 1;
}
.mission-item:hover {
  transform: translate(0, -10px);
}
.mission-item .bottom {
  padding: 28px 30px 30px;
  box-shadow: 0px 0px 20px 0px rgba(221, 221, 221, 0.4196078431);
}
.mission-item .bottom h3 {
  margin-bottom: 10px;
  font-size: 20px;
}
.mission-item .bottom h3 a {
  color: #2A2A2A;
}
.mission-item .bottom h3 a:hover {
  color: #F00041;
}
.mission-item .bottom p {
  margin-bottom: 16px;
}

/*-- Donate --*/
.donate-area {
  position: relative;
  overflow: hidden;
}
.donate-area .donate-shape {
  position: absolute;
  bottom: 0;
  right: 0;
  max-width: 500px;
}
.donate-area .donate-wrap {
  background-image: url("../images/donate-bg.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  padding: 30px 30px;
  z-index: 1;
}
.donate-area .donate-wrap:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #fff;
  opacity: 0.95;
  z-index: -1;
}
.donate-area .donate-wrap .donate-left {
  padding-right: 135px;
  text-align: left;
}
.donate-area .donate-wrap .donate-left h3 {
  font-size: 20px;
  margin-bottom: 6px;
  line-height: 1.4;
}
.donate-area .donate-wrap .donate-left p {
  text-align: left;
  color: #000;
}
.donate-area .donate-wrap .donate-left ul {
  margin: 0;
  padding: 0;
  text-align: left;
}
.donate-area .donate-wrap .donate-left ul li {
  list-style-type: none;
  display: inline-block;
  margin-right: 5px;
  margin-bottom: 10px;
}
.donate-area .donate-wrap .donate-left ul li a {
  display: block;
  color: #2A2A2A;
  background-color: #fff;
  font-weight: 500;
  padding: 10px 20px;
}
.donate-area .donate-wrap .donate-left ul li a:hover {
  color: #fff;
  background-color: #005BB5;
}

.donate-area .donate-wrap .donate-right {
  background-color: #005BB5;
  padding: 40px 30px 40px;
  background-image: url("../images/donate-shape.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.donate-area .donate-wrap .donate-right span {
  display: block;
  color: #fff;
  margin-bottom: 5px;
  font-size: 15px;
  margin-top: -5px;
}
.donate-area .donate-wrap .donate-right h3 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #fff;
}
.donate-area .donate-wrap .donate-right p {
  color: #fff;
  margin-bottom: 22px;
}

.volunteer-area .container {
  display: flex;
  justify-content: flex-end; /* moves content to the right */
}

.volunteer-content {
  max-width: 600px; /* Optional: control width */
}


/*-- Volunteer --*/
.volunteer-area {
  background-image: url("../images/volunteer-bg.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
}
.volunteer-area:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 30px;
  left: 0;
  top: 0;
  background-color: #fff;
}
.volunteer-area:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 30px;
  left: 0;
  bottom: 0;
  background-color: #fff;
}
.volunteer-area .volunteer-content {
  background-color: #F00041;
  padding: 85px 50px 85px;
  max-width: 460px;
  position: relative;
  z-index: 1;
  text-align: left;
}
.volunteer-area .volunteer-content .title {
  display: block;
  color: #fff;
  margin-bottom: 5px;
  font-size: 15px;
}
.volunteer-area .volunteer-content h3 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #fff;
}
.volunteer-area .volunteer-content p {
  color: #fff;
  margin-bottom: 22px;
  color: #fff;
}
.volunteer-area .volunteer-content .common-btn {
  color: #F00041;
  background-color: #fff;
  border: 1px solid #fff;
}
.volunteer-area .volunteer-content .common-btn:hover {
  color: #fff;
  border: 1px solid #2A2A2A;
}
.volunteer-area .volunteer-content .volunteer-btn {
  margin-left: 10px;
  border: 1px solid #fff;
  background-color: #F00041;
  color: #fff;
}
.volunteer-area .volunteer-content .volunteer-btn:hover {
  border: 1px solid #2A2A2A;
}
.volunteer-area .volunteer-content .scroll-span {
  font-weight: 700;
  font-size: 60px;
  display: inline-block;
  color: rgba(242, 242, 242, 0.3803921569);
  position: absolute;
}
.volunteer-area .volunteer-content .scroll-span.left {
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
}
.volunteer-area .volunteer-content .scroll-span.right {
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}

/*-- About --*/
.about-area {
  background-image: url("../images/about-bg.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
}
.about-area:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #fff;
  opacity: 0.97;
  z-index: -1;
}
.about-area .about-content {
  position: relative;
  z-index: 1;
  margin-bottom: 30px;
}
.about-area .about-content .section-title {
  text-align: left;
}
.about-area .about-content .section-title h2 span {
  color: #F00041;
}
.about-area .about-content ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  background-color: #005BB5;
  text-align: center;
}
.about-area .about-content ul li {
  list-style-type: none;
  display: inline-block;
  padding-top: 15px;
  padding-bottom: 15px;
}
.about-area .about-content ul li:nth-child(1) {
  flex: 0 0 50%;
  max-width: 50%;
  border-right: 1px solid #fff;
}
.about-area .about-content ul li:nth-child(2) {
  flex: 0 0 50%;
  max-width: 50%;
}
.about-area .about-content ul li h3 {
  font-size: 20px;
  margin-bottom: 3px;
  color: #fff;
}
.about-area .about-content ul li span {
  display: block;
  color: #fff;
  font-size: 15px;
}
.about-area .about-img {
  margin-bottom: 30px;
}
.about-area .about-img img {
  width: 100%;
}

.counter-area1 {
  background-image: url("../images/page-title/title-shape.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* position: relative; */
}

/*-- Counter --*/
.counter-area {
  background-image: url("../images/page-title/title-shape.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
}
.counter-area:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #F00041;
  opacity: 0.65;
}

.counter-item {
  position: relative;
  text-align: center;
  z-index: 1;
  background-color: #fff;
  border-radius: 5px;
  padding-top: 32px;
  padding-bottom: 35px;
  margin-bottom: 30px;
}
.counter-item img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  z-index: -1;
  animation: counter-ani-one 5s infinite linear;
}
.counter-item h3 {
  font-size: 50px;
  margin-bottom: 0;
  color: #F00041;
}
.counter-item p {
  font-weight: 500;
  margin-bottom: 0;
}

@keyframes counter-ani-one {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}
/*-- Ideology --*/
.ideology-item {
  text-align: center;
  transition: 0.5s all ease;
  margin-bottom: 30px;
}
.ideology-item:hover {
  transform: translate(0, -10px);
}
.ideology-item img {
  width: auto;
}
.ideology-item .bottom {
  background-color: #F00041;
  padding-top: 30px;
  padding-bottom: 30px;
}
.ideology-item .bottom h3 {
  font-size: 20px;
  color: #fff;
  margin-bottom: 0;
}

/*-- Events --*/
.events-area {
  position: relative;
}
.events-area .events-shape {
  position: absolute;
  top: -100px;
  right: 0;
  max-width: 500px;
  z-index: -1;
}

.events-inner {
  margin-bottom: 30px;
}
.events-inner .main-wrap {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.events-inner .main-wrap li {
  list-style-type: none;
  display: inline-block;
}
.events-inner .main-wrap li:nth-child(1) {
  flex: 0 0 38%;
  max-width: 38%;
}
.events-inner .main-wrap li:nth-child(2) {
  flex: 0 0 60%;
  max-width: 60%;
  margin-left: 10px;
}
.events-inner .main-wrap li a {
  display: block;
}
.events-inner .main-wrap li a img {
  width: 100%;
}
.events-inner .main-wrap li p {
  margin-bottom: 0;
}
.events-inner .main-wrap li .link-wrap {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.events-inner .main-wrap li .link-wrap li {
  list-style-type: none;
  display: inline-block;
}
.events-inner .main-wrap li .link-wrap li:nth-child(1) {
  flex: 0 0 14%;
  max-width: 14%;
}
.events-inner .main-wrap li .link-wrap li:nth-child(2) {
  flex: 0 0 75%;
  max-width: 75%;
  margin-left: 15px;
}
.events-inner .main-wrap li .link-wrap li span {
  display: block;
  color: #fff;
  background-color: #F00041;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-bottom: 0;
}
.events-inner .main-wrap li .link-wrap li h3 {
  font-size: 20px;
  margin-bottom: 0;
  line-height: 1.4;
  display: inline-block;
}
.events-inner .main-wrap li .link-wrap li h3 a {
  color: #2A2A2A;
}
.events-inner .main-wrap li .link-wrap li h3 a:hover {
  color: #F00041;
}

.events-item {
  margin-bottom: 30px;
  position: relative;
}
.events-item:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(0deg, rgb(240, 0, 65) 7%, rgba(240, 0, 65, 0) 81%);
}
.events-item img {
  width: 100%;
}
.events-item .bottom {
  position: absolute;
  left: 30px;
  bottom: 30px;
}
.events-item .bottom ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.events-item .bottom ul li {
  list-style-type: none;
  display: inline-block;
}
.events-item .bottom ul li:nth-child(1) {
  flex: 0 0 16%;
  max-width: 16%;
}
.events-item .bottom ul li:nth-child(2) {
  flex: 0 0 75%;
  max-width: 75%;
  margin-left: 15px;
}
.events-item .bottom ul li span {
  display: block;
  color: #F00041;
  background-color: #fff;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-bottom: 0;
  width: 65px;
}
.events-item .bottom ul li h3 {
  font-size: 20px;
  margin-bottom: 0;
  line-height: 1.4;
  display: inline-block;
}
.events-item .bottom ul li h3 a {
  color: #fff;
  border-bottom: 1px solid transparent;
}
.events-item .bottom ul li h3 a:hover {
  border-bottom: 1px solid #fff;
}
.events-item .bottom p {
  margin-bottom: 0;
  color: #fff;
}

/*-- Subscribe --*/
.subscribe-area {
  background-image: url("../images/mahabalipuram.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
}
.subscribe-area:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #005BB5;
  opacity: 0.8;
  z-index: -1;
}
.subscribe-area .subscribe-content {
  margin-bottom: 30px;
}
.subscribe-area .subscribe-content h2 {
  font-size: 30px;
  margin-bottom: 0;
  color: #fff;
  line-height: 1.4;
}
.subscribe-area .subscribe-item {
  position: relative;
  margin-right: 90px;
  margin-bottom: 30px;
}
.subscribe-area .subscribe-item .form-control {
  height: 85px;
  border-radius: 0;
  background-color: rgba(42, 42, 42, 0.831372549);
  padding-left: 20px;
  border: 0;
  color: #fff;
}
.subscribe-area .subscribe-item .form-control:focus {
  border: 0;
  box-shadow: none;
}
.subscribe-area .subscribe-item ::-moz-placeholder {
  color: #fff;
}
.subscribe-area .subscribe-item ::placeholder {
  color: #fff;
}

.subscribe-area .subscribe-item .common-btn {
  opacity: 1;
  position: absolute;
  top: 16px;
  background: #fff;
  right: -90px;
  padding: 15px 25px;
  color: #2A2A2A !important; /* Always Black Text */
}

.subscribe-area .subscribe-item .common-btn:hover {
  color: #2A2A2A !important; /* Keep text black on hover */
  background-color: #fff; /* Prevent color change on hover */
}

.subscribe-area .subscribe-item .common-btn:before {
  background-color: #fff;
}

/*-- Testimonials --*/
.testimonials-area .section-title {
  margin-bottom: 10px;
}
.testimonials-area .testimonials-item {
  text-align: center;
}
.testimonials-area .testimonials-item .top {
  box-shadow: 0px 0px 20px 0px rgba(221, 221, 221, 0.4196078431);
  padding: 40px 35px 50px;
  margin-top: 30px;
  margin-left: 30px;
  margin-right: 30px;
  margin-bottom: 55px;
  position: relative;
}
.testimonials-area .testimonials-item .top:before {
  position: absolute;
  content: "";
  bottom: -30px;
  right: 0;
  left: 0;
  width: 50px;
  margin-left: auto;
  margin-right: auto;
  border-left: 35px solid transparent;
  border-top: 45px solid #F00041;
  border-right: 35px solid transparent;
}
.testimonials-area .testimonials-item .top i {
  display: inline-block;
  color: #F00041;
  font-size: 55px;
  margin-bottom: 10px;
}
.testimonials-area .testimonials-item .top p {
  margin-bottom: 0;
  font-size: 25px;
  font-weight: 500;
  font-style: italic;
}
.testimonials-area .content {
  margin: 0;
  padding: 0;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  max-width: 455px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  left: 120px;
}
.testimonials-area .content li {
  list-style-type: none;
  display: inline-block;
}
.testimonials-area .content li:nth-child(1) {
  flex: 0 0 25%;
  max-width: 25%;
}
.testimonials-area .content li:nth-child(2) {
  flex: 0 0 70%;
  max-width: 70%;
  margin-left: 15px;
  text-align: left;
}
.testimonials-area .content li img {
  border-radius: 50%;
}
.testimonials-area .content li h3 {
  font-size: 20px;
  margin-bottom: 3px;
}
.testimonials-area .content li span {
  display: block;
  margin-bottom: 5px;
}
.testimonials-area .content li .rating {
  margin: 0;
  padding: 0;
}
.testimonials-area .content li .rating li {
  list-style-type: none;
  display: inline-block;
  margin-left: 0;
}
.testimonials-area .content li .rating li i {
  display: block;
  font-size: 16px;
}
.testimonials-area .content li .rating li i.checked {
  color: #FFC107;
}
.testimonials-area .owl-prev {
  width: 70px;
  height: 45px;
  line-height: 45px !important;
  color: #fff !important;
  background-color: #F00041 !important;
  font-size: 30px !important;
  border-radius: 0 !important;
  transition: 0.5s all ease;
  position: absolute;
  top: 75%;
  left: 0;
}
.testimonials-area .owl-prev i {
  line-height: 45px;
}
.testimonials-area .owl-prev:hover {
  background-color: #2A2A2A !important;
}
.testimonials-area .owl-next {
  width: 70px;
  height: 45px;
  line-height: 45px !important;
  color: #fff !important;
  background-color: #F00041 !important;
  font-size: 30px !important;
  border-radius: 0 !important;
  transition: 0.5s all ease;
  position: absolute;
  top: 75%;
  right: 0;
}
.testimonials-area .owl-next i {
  line-height: 45px;
}
.testimonials-area .owl-next:hover {
  background-color: #2A2A2A !important;
}
.testimonials-area .owl-theme .owl-nav {
  margin-top: 0;
}

/*-- Blog --*/
.blog-area {
  position: relative;
  overflow: hidden;
}

.blog-item {
  margin-bottom: 30px;
  transition: 0.5s all ease;
  text-align: left;
}
.blog-item:hover {
  transform: translate(0, -10px);
}
.blog-item .top {
  margin-bottom: 20px;
}
.blog-item .top a {
  display: block;
}
.blog-item .top a img {
  width: 100%;
}
.blog-item .bottom ul {
  margin: 0;
  padding: 0;
  margin-bottom: 12px;
}
.blog-item .bottom ul li {
  list-style-type: none;
  display: inline-block;
  margin-right: 15px;
}
.blog-item .bottom ul li:last-child {
  margin-right: 0;
}
.blog-item .bottom ul li i {
  display: inline-block;
  color: #F00041;
  font-size: 16px;
  margin-right: 2px;
}
.blog-item .bottom ul li span {
  display: inline-block;
  font-size: 14px;
}
.blog-item .bottom ul li a {
  display: inline-block;
  color: #464646;
  font-size: 14px;
}
.blog-item .bottom ul li a:hover {
  color: #F00041;
}
.blog-item .bottom h3 {
  margin-bottom: 8px;
  font-size: 20px;
  line-height: 1.4;
}
.blog-item .bottom h3 a {
  color: #2A2A2A;
  display: block;
}
.blog-item .bottom h3 a:hover {
  color: #F00041;
}
.blog-item .bottom p {
  margin-bottom: 12px;
}
.blog-item .bottom .blog-btn {
  display: inline-block;
  color: #F00041;
  font-weight: 500;
}

.event-description .blog-btn {
  padding-top: 5px;
  color: #F00041;
}

.blog-item .bottom .blog-btn i {
  display: inline-block;
  font-size: 19px;
  position: relative;
  top: 2px;
}
.blog-item .bottom .blog-btn:hover {
  color: #2A2A2A;
}

.blog-side-item {
  margin-bottom: 30px;
  display: flex;
  flex-wrap: wrap;
  text-align: left;
}
.blog-side-item .left {
  flex: 0 0 30%;
  max-width: 30%;
}
.blog-side-item .right {
  flex: 0 0 60%;
  max-width: 60%;
  margin-left: 15px;
}
.blog-side-item ul {
  margin: 0;
  padding: 0;
  margin-bottom: 10px;
}
.blog-side-item ul li {
  list-style-type: none;
  display: inline-block;
  margin-right: 15px;
}
.blog-side-item ul li:last-child {
  margin-right: 0;
}
.blog-side-item ul li i {
  display: inline-block;
  color: #F00041;
  font-size: 16px;
  margin-right: 2px;
}
.blog-side-item ul li span {
  display: inline-block;
  font-size: 14px;
}
.blog-side-item ul li a {
  display: inline-block;
  color: #464646;
  font-size: 14px;
}
.blog-side-item ul li a:hover {
  color: #F00041;
}
.blog-side-item h3 {
  margin-bottom: 10px;
  font-size: 20px;
  line-height: 1.4;
}
.blog-side-item h3 a {
  color: #2A2A2A;
  display: block;
}
.blog-side-item h3 a:hover {
  color: #F00041;
}
.blog-side-item .blog-btn {
  display: inline-block;
  color: #F00041;
  font-weight: 500;
}
.blog-side-item .blog-btn i {
  display: inline-block;
  font-size: 19px;
  position: relative;
  top: 2px;
}
.blog-side-item .blog-btn:hover {
  color: #2A2A2A;
}

/*-- Footer --*/
.footer-area {
  background-image: url("../images/page-title/title-shape.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
}
.footer-area:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #005BB5;
  opacity: 0.45;
}

.footer-item {
  position: relative;
  z-index: 1;
  margin-bottom: 30px;
}
.footer-item h3 {
  font-size: 20px;
  color: #fff;
  margin-bottom: 30px;
  text-align: left;
}
.footer-item .footer-logo {
  background-color: #F00041;
  text-align: center;
  padding: 30px 25px 30px;
}
.footer-item .footer-logo .logo {
  display: block;
  margin-bottom: 18px;
}
.footer-item .footer-logo p {
  margin-bottom: 20px;
  color: #fff;
}
.footer-item .footer-logo ul {
  margin: 0;
  padding: 0;
}
.footer-item .footer-logo ul li {
  list-style-type: none;
  display: inline-block;
  margin-left: 5px;
  margin-right: 5px;
}
.footer-item .footer-logo ul li a {
  display: block;
}
.footer-item .footer-logo ul li a i {
  display: inline-block;
  text-align: center;
  color: #fff;
  font-size: 18px;
  transition: 0.5s all ease;
}
.footer-item .footer-logo ul li a i:hover {
  transform: translate(0, -5px);
}
.footer-item .footer-contact p {
  margin-bottom: 10px;
  color: #fff;
  text-align: left;
}
.footer-item .footer-contact ul {
  margin: 0;
  padding: 0;
}
.footer-item .footer-contact ul li {
  list-style-type: none;
  display: block;
  position: relative;
  margin-bottom: 15px;
  padding-left: 40px;
  text-align: left;
}
.footer-item .footer-contact ul li:last-child {
  margin-bottom: 0;
}
.footer-item .footer-contact ul li i {
  display: inline-block;
  font-size: 27px;
  position: absolute;
  top: 1px;
  left: 0;
  color: #fff;
}
.footer-item .footer-contact ul li a {
  display: block;
  color: #fff;
  font-weight: 500;
}
.footer-item .footer-contact ul li a:hover {
  letter-spacing: 1px;
}
.footer-item .footer-link ul {
  margin: 0;
  padding: 0;
}

.footer-item .footer-link ul li {
  list-style-type: none;
  display: block;
  margin-bottom: 15px;
  text-align: left;
}
.footer-item .footer-link ul li:last-child {
  margin-bottom: 0;
}
.footer-item .footer-link ul li a {
  display: block;
  font-weight: 500;
  color: #fff;
}
.footer-item .footer-link ul li a i {
  display: inline-block;
  font-size: 16px;
}
.footer-item .footer-link ul li a:hover {
  letter-spacing: 1px;
}
.footer-item .footer-events .footer-events-inner {
  margin-bottom: 15px;
}
.footer-item .footer-events .footer-events-inner:last-child {
  margin-bottom: 0;
}
.footer-item .footer-events .footer-events-inner ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  text-align: left;
}
.footer-item .footer-events .footer-events-inner ul li {
  list-style-type: none;
  display: inline-block;
  position: relative;
}
.footer-item .footer-events .footer-events-inner ul li:nth-child(1) {
  flex: 0 0 30%;
  max-width: 30%;
}
.footer-item .footer-events .footer-events-inner ul li:nth-child(2) {
  flex: 0 0 65%;
  max-width: 65%;
  margin-left: 15px;
}
.footer-item .footer-events .footer-events-inner ul li span {
  display: block;
  font-weight: 700;
  color: #fff;
  text-align: center;
  background-color: #F00041;
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
  max-width: 75px;
  margin-left: auto;
  margin-right: auto;
  padding: 5px 15px;
}
.footer-item .footer-events .footer-events-inner ul li a {
  display: inline-block;
  color: #fff;
  font-weight: 500;
}
.footer-item .footer-events .footer-events-inner ul li a:hover {
  color: #F00041;
}

.copyright-area {
  padding-top: 25px;
  padding-bottom: 25px;
  background-color: rgba(0, 91, 181, 0.8392156863);
  margin-top: 70px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.copyright-area p {
  margin-bottom: 0;
  color: #fff;
}
.copyright-area p a {
  display: inline-block;
  font-weight: 700;
  color: #fff;
}
.copyright-area p a:hover {
  color: #F00041;
}

/*----- Home Demo Two CSS -----*/
/*-- Header --*/
.header-area.two {
  background-color: #C03D30;
}

/*-- Banner --*/
.banner-area-two {
  position: relative;
}
.banner-area-two .banner-slider-item {
  background-image: url("../images/banner/banner-bg2.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  height: 850px;
}
.banner-area-two .banner-slider-item:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #C03D30;
  opacity: 0.9;
}
.banner-area-two .banner-slider-item .slider-img img {
  position: absolute;
  bottom: 0;
  right: 65px;
  max-width: 490px;
}
.banner-area-two .banner-shape img {
  position: absolute;
  max-width: 150px;
  z-index: 2;
}
.banner-area-two .banner-shape img:nth-child(1) {
  left: 10px;
  bottom: 10px;
}
.banner-area-two .banner-shape img:nth-child(2) {
  right: 0;
  top: 105px;
}
.banner-area-two .banner-content {
  margin-top: 60px;
  z-index: 3;
  text-align: left;
}
.banner-area-two .banner-content .common-btn {
  color: #C03D30;
  background-color: #fff;
}
.banner-area-two .banner-content .common-btn:hover {
  color: #fff;
}
.banner-area-two .owl-item.active .banner-content h1 {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: fadeInUp;
  animation-delay: 0.7s;
}
.banner-area-two .owl-item.active .banner-content p {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: fadeInDown;
  animation-delay: 0.7s;
}
.banner-area-two .owl-item.active .slider-img img {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: fadeInUp;
  animation-delay: 0.7s;
}
.banner-area-two .owl-theme .owl-nav.disabled + .owl-dots {
  margin-top: 0;
  position: absolute;
  left: 0;
  bottom: 190px;
  right: 0;
  max-width: 1305px;
  margin: 0 auto;
  text-align: left;
}
.banner-area-two .owl-theme .owl-dots .owl-dot span {
  background: #fff;
  transition: 0.5s all ease;
  width: 6px;
  height: 6px;
  margin: 3px 4px;
  border-radius: 50px;
}
.banner-area-two .owl-theme .owl-dots .owl-dot.active span {
  background: #fff;
  width: 50px;
}

/*-- Navbar --*/
.main-nav.two nav .navbar-nav .nav-item:hover a {
  color: #C03D30;
}
.main-nav.two nav .navbar-nav .nav-item a {
  color: #182C4F;
}
.main-nav.two nav .navbar-nav .nav-item a:before {
  background-color: #C03D30;
}
.main-nav.two nav .navbar-nav .nav-item a:hover, .main-nav.two nav .navbar-nav .nav-item a:focus, .main-nav.two nav .navbar-nav .nav-item a.active {
  color: #C03D30;
}
.main-nav.two nav .navbar-nav .nav-item .dropdown-menu {
  border-top: 3px solid #C03D30;
}
.main-nav.two nav .navbar-nav .nav-item .dropdown-menu li:before {
  background-color: #C03D30;
}
.main-nav.two nav .navbar-nav .nav-item .dropdown-menu li:hover a {
  color: #C03D30;
}
.main-nav.two nav .navbar-nav .nav-item .dropdown-menu li a {
  color: #182C4F;
}
.main-nav.two nav .navbar-nav .nav-item .dropdown-menu li a:hover, .main-nav.two nav .navbar-nav .nav-item .dropdown-menu li a:focus, .main-nav.two nav .navbar-nav .nav-item .dropdown-menu li a.active {
  color: #C03D30;
}
.main-nav.two nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a {
  color: #182C4F;
}
.main-nav.two nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a:hover, .main-nav.two nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a:focus, .main-nav.two nav .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a.active {
  color: #C03D30;
}
.main-nav.two .side-nav .left {
  color: #182C4F;
  border-bottom: 1px solid #182C4F;
}
.main-nav.two .side-nav .left:hover {
  color: #C03D30;
  border-bottom: 1px solid #C03D30;
}

/*-- About --*/
.about-area.two {
  position: relative;
}
.about-area.two .about-shape img {
  position: absolute;
  top: 50px;
  left: 0;
  max-width: 230px;
}
.about-area.two .about-content .section-title.two h2 span {
  color: #C03D30;
}
.about-area.two .about-content ul {
  background-color: #182C4F;
}
.about-area.two .about-img {
  position: relative;
}
.about-area.two .about-img img:nth-child(1) {
  padding-right: 30px;
  padding-top: 30px;
  padding-bottom: 30px;
  position: relative;
  z-index: 1;
}
.about-area.two .about-img img:nth-child(2) {
  position: absolute;
  top: 0;
  right: 0;
  max-width: 399px;
}

/*-- Election --*/
.election-area {
  text-align: center;
  background-image: url("../images/election-bg.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
}
.election-area .election-shape img {
  position: absolute;
  max-width: 200px;
}
.election-area .election-shape img:nth-child(1) {
  top: 70px;
  left: 0;
}
.election-area .election-shape img:nth-child(2) {
  top: 70px;
  right: 0;
}
.election-area:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #182C4F;
  opacity: 0.7;
}
.election-area h1 {
  margin-bottom: 0;
  position: relative;
  color: #fff;
  font-size: 50px;
}

/*-- Ideology --*/
.ideology-area.two .ideology-item .bottom {
  background-color: #C03D30;
}

/*-- Counter --*/
.counter-area.two:before {
  background-color: #C03D30;
}
.counter-area.two h3 {
  color: #C03D30;
}

/*-- Live --*/
.live-area .live-content {
  position: relative;
}
.live-area .live-content img {
  width: 100%;
}

.video-wrap {
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.video-wrap .js-modal-btn {
  z-index: 10;
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: relative;
  font-size: 40px;
  text-align: center;
  color: #fff;
  transition: 0.5s all ease;
}
.video-wrap .js-modal-btn i {
  line-height: 98px;
}
.video-wrap .js-modal-btn:before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 100px;
  height: 100px;
  background-color: #C03D30;
  border-radius: 50%;
  z-index: -1;
  animation: pulse-border 1500ms ease-out infinite;
}
.video-wrap .js-modal-btn:after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 100px;
  height: 100px;
  background-color: #C03D30;
  border-radius: 50%;
  z-index: -1;
  transition: 0.5s all ease;
}
.video-wrap .js-modal-btn:hover {
  color: #C03D30;
}
.video-wrap .js-modal-btn:hover:before {
  background-color: #fff;
}
.video-wrap .js-modal-btn:hover:after {
  background-color: #fff;
}

@keyframes pulse-border {
  0% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    opacity: 0;
  }
}
/*-- Donate --*/
.donate-area.two .donate-wrap .donate-left h3 {
  color: #182C4F;
  text-align: left;
}
.donate-area.two .donate-wrap .donate-left ul li a {
  color: #182C4F;
  text-align: left;
}
.donate-area.two .donate-wrap .donate-left ul li a:hover {
  color: #fff;
  background-color: #182C4F;
}
.donate-area.two .donate-wrap .donate-right {
  background-color: #C03D30;
  text-align: left;
}
.donate-area.two .donate-wrap .donate-right .common-btn.two {
  color: #C03D30;
  background-color: #fff;
}
.donate-area.two .donate-wrap .donate-right .common-btn.two:hover {
  color: #fff;
}

/*-- Testimonials --*/
.testimonials-area.two .testimonials-item .top:before {
  border-top: 45px solid #C03D30;
}
.testimonials-area.two .testimonials-item .top i {
  color: #C03D30;
}
.testimonials-area.two .owl-prev {
  background-color: #C03D30 !important;
}
.testimonials-area.two .owl-prev:hover {
  background-color: #182C4F !important;
}
.testimonials-area.two .owl-next {
  background-color: #C03D30 !important;
}
.testimonials-area.two .owl-next:hover {
  background-color: #182C4F !important;
}

/*-- Subscribe --*/
.subscribe-area.two:before {
  opacity: 0.7;
}
.subscribe-area.two .subscribe-item .form-control {
  background-color: rgba(24, 44, 79, 0.7411764706);
  transition: 0.5s all ease;
}
.subscribe-area.two .subscribe-item .form-control:focus {
  border: 1px solid #182C4F;
}

/*-- Events --*/
.events-area.two .events-inner .main-wrap li .link-wrap {
  margin-bottom: 6px;
}
.events-area.two .events-inner .main-wrap li .link-wrap li:nth-child(2) {
  margin-left: 10px;
}
.events-area.two .events-inner .main-wrap li .link-wrap li span {
  background-color: #C03D30;
  font-size: 18px;
}
.events-area.two .events-inner .main-wrap li .link-wrap li h3 {
  font-size: 18px;
}
.events-area.two .events-inner .main-wrap li .link-wrap li h3 a:hover {
  color: #C03D30;
}

/*-- Blog --*/
.blog-area.two .blog-item .bottom ul li i {
  color: #C03D30;
}
.blog-area.two .blog-item .bottom ul li a:hover {
  color: #C03D30;
}
.blog-area.two .blog-item .bottom h3 a {
  color: #182C4F;
}
.blog-area.two .blog-item .bottom h3 a:hover {
  color: #C03D30;
}
.blog-area.two .blog-item .bottom .blog-btn {
  color: #C03D30;
}
.blog-area.two .blog-item .bottom .blog-btn:hover {
  color: #182C4F;
}
.blog-area.two .blog-side-item ul li i {
  color: #C03D30;
}
.blog-area.two .blog-side-item ul li a:hover {
  color: #C03D30;
}
.blog-area.two .blog-side-item h3 a {
  color: #182C4F;
}
.blog-area.two .blog-side-item h3 a:hover {
  color: #C03D30;
}
.blog-area.two .blog-side-item .blog-btn {
  color: #C03D30;
}
.blog-area.two .blog-side-item .blog-btn:hover {
  color: #182C4F;
}

/*-- Footer --*/
.footer-area.two .footer-item .footer-logo {
  background-color: #F00041;
}
.footer-area.two .footer-item .footer-logo ul li a i {
  color: #C03D30;
}
.footer-area.two .footer-item .footer-events .footer-events-inner ul li span {
  background-color: #C03D30;
}
.footer-area.two .footer-item .footer-events .footer-events-inner ul li a:hover {
  color: #C03D30;
}

.copyright-area.two {
  background-color: rgba(24, 44, 79, 0.8784313725);
}
.copyright-area.two p a:hover {
  color: #C03D30;
}

/*-- Go Top --*/
.go-top.two {
  background-color: #C03D30;
}
.go-top.two:hover {
  background-color: #182C4F;
}

/*----- Home Demo Three CSS -----*/
/*-- Header --*/
.header-area three {
  background-color: #182C4F;
}

/*-- Banner --*/
.banner-area-two.three .banner-slider-item:before {
  background-color: #fff;
  opacity: 0.9;
}
.banner-area-two.three .banner-slider-item:after {
  position: absolute;
  content: "";
  width: 300px;
  height: 100%;
  right: 0;
  top: 0;
  background-color: #C03D30;
  opacity: 0.7;
  z-index: 1;
}
.banner-area-two.three .banner-slider-item .banner-content {
  max-width: 815px;
}
.banner-area-two.three .banner-slider-item .banner-content h1 {
  color: #182C4F;
}
.banner-area-two.three .banner-slider-item .banner-content p {
  color: #182C4F;
}
.banner-area-two.three .banner-slider-item .banner-content .common-btn.two {
  color: #fff;
  background-color: #C03D30;
}
.banner-area-two.three .banner-slider-item .slider-img img {
  z-index: 2;
  max-width: 550px;
}
.banner-area-two.three .owl-theme .owl-dots .owl-dot span {
  background: #182C4F;
}
.banner-area-two.three .owl-theme .owl-dots .owl-dot.active span {
  background: #182C4F;
}
.banner-area-two.three .banner-shape img:nth-child(1) {
  display: none;
}
.banner-area-two.three .banner-shape img:nth-child(2) {
  max-width: 185px;
}

/*-- Countdown --*/
.countdown-area {
  text-align: center;
  padding-top: 50px;
  padding-bottom: 20px;
  background-image: url("../images/banner/tamilnadu.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
}
.countdown-area:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #182C4F;
  opacity: 0.8;
}
.countdown-area .countdown-wrap {
  text-align: center;
}
.countdown-area h2 {
  color: #fff;
  font-size: 25px;
  margin-bottom: 30px;
  position: relative;
}
.countdown-area .coming-inner {
  position: relative;
  margin-bottom: 30px;
}
.countdown-area .coming-inner.dotted-right:before {
  display: none;
}
.countdown-area .coming-inner.dotted-right:after {
  display: none;
}
.countdown-area .coming-inner:before {
  position: absolute;
  content: "";
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #fff;
  top: 25px;
  right: -20px;
}
.countdown-area .coming-inner:after {
  position: absolute;
  content: "";
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #fff;
  bottom: 25px;
  right: -20px;
}
.countdown-area .coming-inner span {
  font-size: 60px;
  margin-bottom: 5px;
  color: #fff;
  font-weight: 700;
}
.countdown-area .coming-inner p {
  margin-bottom: 0;
  color: #fff;
  font-weight: 500;
  font-size: 18px;
}

/*-- About --*/
.about-area.three .about-img-three {
  margin-bottom: 30px;
  padding-top: 30px;
  padding-left: 30px;
  padding-bottom: 30px;
  position: relative;
  z-index: 1;
}
.about-area.three .about-img-three:before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 350px;
  height: 100%;
  background-color: #C03D30;
  z-index: -1;
}

/*-- Election --*/
.election-area.two:before {
  background-color: #C03D30;
}

/*-- Donate --*/
.donate-area.three .donate-wrap {
  background-image: unset;
  box-shadow: 0px 0px 20px 0px rgba(221, 221, 221, 0.3098039216);
}
.donate-area.three .donate-wrap:before {
  background-color: unset;
}
.donate-area.three .donate-wrap .donate-left ul li a {
  border: 1px solid #182C4F;
}

/*-- Live --*/
.live-area.two .live-content {
  position: relative;
}
.live-area.two .live-content:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #182C4F;
  opacity: 0.6;
}
.live-area.two .video-wrap .js-modal-btn {
  color: #C03D30;
}
.live-area.two .video-wrap .js-modal-btn:before {
  background-color: #fff;
}
.live-area.two .video-wrap .js-modal-btn:after {
  background-color: #fff;
}
.live-area.two .video-wrap .js-modal-btn:hover {
  color: #fff;
}
.live-area.two .video-wrap .js-modal-btn:hover:before {
  background-color: #C03D30;
}
.live-area.two .video-wrap .js-modal-btn:hover:after {
  background-color: #C03D30;
}

/*-- Campaign --*/
.campaign-area .campaign-img {
  margin-bottom: 30px;
}
.campaign-area .campaign-img ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.campaign-area .campaign-img ul li {
  list-style-type: none;
  display: inline-block;
}
.campaign-area .campaign-img ul li img {
  width: 100%;
}
.campaign-area .campaign-img ul li:nth-child(1) {
  flex: 0 0 54%;
  max-width: 54%;
  margin-bottom: 15px;
}
.campaign-area .campaign-img ul li:nth-child(2) {
  flex: 0 0 40%;
  max-width: 40%;
  margin-left: 15px;
  margin-bottom: 15px;
}
.campaign-area .campaign-img ul li:nth-child(3) {
  flex: 0 0 40%;
  max-width: 40%;
}
.campaign-area .campaign-img ul li:nth-child(4) {
  flex: 0 0 54%;
  max-width: 54%;
  margin-left: 15px;
}
.campaign-area .campaign-content {
  margin-bottom: 30px;
}
.campaign-area .campaign-content .section-title.two {
  text-align: left;
  margin-bottom: 20px;
}
.campaign-area .campaign-content .inner {
  position: relative;
  padding-left: 80px;
  text-align: left;
}
.campaign-area .campaign-content .inner .icon {
  display: inline-block;
  width: 55px;
  height: 55px;
  line-height: 55px;
  font-size: 40px;
  color: #fff;
  background-color: #C03D30;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
}
.campaign-area .campaign-content .inner h3 {
  font-size: 20px;
  margin-bottom: 10px;
  text-align: left;
}
.campaign-area .campaign-content .inner p {
  margin-bottom: 15px;
  text-align: left;
  color: #000;
}

/*-- Amount --*/
.amount-area .section-title.two {
  margin-bottom: 20px;
}
.amount-area .amount-item {
  text-align: center;
}
.amount-area .amount-item h2 {
  font-size: 90px;
  margin-bottom: 10px;
  color: #C03D30;
}
.amount-area .amount-item span {
  display: block;
  margin-bottom: 30px;
}

/*-- Ideology --*/
.ideology-area.three {
  background-image: url("../images/ideology-bg.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
}
.ideology-area.three:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #C03D30;
  opacity: 0.8;
  z-index: -2;
}
.ideology-area.three:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 410px;
  left: 0;
  bottom: 0;
  background-color: #fff;
  z-index: -1;
}
.ideology-area.three .section-title.two .sub-title {
  color: #fff;
}
.ideology-area.three .section-title.two h2 {
  color: #fff;
}
.ideology-area.three .section-title.two p {
  color: #fff;
}
.ideology-area.three .ideology-item .bottom {
  background-color: #182C4F;
}

/*-- Team --*/
.team-area .owl-theme .owl-nav.disabled + .owl-dots {
  margin-top: 0;
  margin-bottom: -10px;
}
.team-area .owl-theme .owl-dots .owl-dot span {
  background: #182C4F;
  transition: 0.5s all ease;
}
.team-area .owl-theme .owl-dots .owl-dot.active span {
  background: #182C4F;
  width: 50px;
}

.team-item {
  text-align: center;
  margin-bottom: 30px;
  transition: 0.5s all ease;
}
.team-item:hover {
  transform: translate(0, -10px);
}
.team-item:hover .top ul {
  opacity: 1;
  visibility: visible;
  bottom: 0;
}
.team-item .top {
  position: relative;
  margin-bottom: 20px;
  overflow: hidden;
}
.team-item .top img {
  width: 100%;
}
.team-item .top ul {
  margin: 0;
  padding: 0;
  background-color: #C03D30;
  max-width: 225px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 12px;
  padding-bottom: 12px;
  border-radius: 30px 30px 0 0;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -15px;
  opacity: 0;
  visibility: hidden;
  transition: 0.5s all ease;
}
.team-item .top ul li {
  list-style-type: none;
  display: inline-block;
  margin-left: 5px;
  margin-right: 5px;
}
.team-item .top ul li a {
  display: block;
}
.team-item .top ul li a i {
  display: block;
  color: #fff;
  font-size: 18px;
  transition: 0.5s all ease;
}
.team-item .top ul li a i:hover {
  transform: translate(0, -5px);
}
.team-item .bottom h3 {
  font-size: 20px;
  margin-bottom: 5px;
}
.team-item .bottom span {
  display: block;
}

/*-- Volunteer --*/
.volunteer-area.two .volunteer-content {
  background-color: #C03D30;
}
.volunteer-area.two .volunteer-content .common-btn {
  color: #C03D30;
}
.volunteer-area.two .volunteer-content .common-btn:hover {
  color: #fff;
}
.volunteer-area.two .volunteer-content .volunteer-btn {
  color: #fff;
  background-color: #C03D30;
}

.page-title-wrapper {
  padding-top: 90px;
  position: relative;
  overflow: hidden;
}

.page-title-area {
  position: relative;
  height: 400px;
  width: 100%;
  background-image: url("/assets/images/page-title/page-title-bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
}

.page-title-area .title-shape {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  pointer-events: none;
}

/* Image 1: smoky background layer (bottom) */
.title-shape img:nth-child(1) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
  z-index: 1;
}

/* Image 2: skyline shape (should be on top) */
.title-shape img:nth-child(2) {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  object-fit: contain;
  z-index: 2;
}

/* Content stays on top of everything */
.page-title-area .title-content {
  position: relative;
  z-index: 3;
  text-align: center;
  color: white;
}

.page-title-area .title-content h2 {
  color: #fff;
  font-size: 50px;
  margin-bottom: 8px;
}
.page-title-area .title-content ul {
  margin: 0;
  padding: 0;
}
.page-title-area .title-content ul li {
  list-style-type: none;
  display: inline-block;
  margin-left: 8px;
  margin-right: 8px;
  position: relative;
}
.page-title-area .title-content ul li:before {
  position: absolute;
  content: "-";
  left: 54px;
  right: 0;
  bottom: -4px;
  color: #fff;
  font-size: 20px;
}
.page-title-area .title-content ul li:last-child:before {
  display: none;
}
.page-title-area .title-content ul li a {
  display: inline-block;
  font-weight: 500;
  color: #fff;
  position: relative;
}
.page-title-area .title-content ul li a:before {
  position: absolute;
  content: "";
  width: 0;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: #fff;
  transition: 0.5s all ease;
}
.page-title-area .title-content ul li a:hover:before {
  width: 25px;
}
.page-title-area .title-content ul li span {
  display: inline-block;
  color: #fff;
}

.team-area.two {
  position: relative;
}
.team-area.two .team-shape {
  position: absolute;
  top: 0;
  right: 0;
  max-width: 500px;
}
.team-area.two .team-item .top ul {
  background-color: #F00041;
}

/*----- Events CSS -----*/
.events-area-three {
  position: relative;
}
.events-area-three .events-shape {
  position: absolute;
  top: 65%;
  right: 0;
  max-width: 500px;
}
.events-area-three .events-heading {
  margin-bottom: 20px;
  margin-top: -5px;
  text-align: left;
}
.events-area-three .events-heading h2 {
  font-size: 30px;
  margin-bottom: 0;
  color: #F00041;
}
.events-area-three .events-top {
  margin-bottom: 50px;
}
.events-area-three .events-top .events-item-two:last-child {
  margin-bottom: 0;
}
.events-area-three .events-bottom {
  margin-bottom: 30px;
}
.events-area-three .events-bottom .events-item-two:last-child {
  margin-bottom: 0;
}
.events-area-three .events-item-two {
  margin-bottom: 15px;
  background-color: #fff;
  position: relative;
  z-index: 1;
}
.events-area-three .events-item-two .main-divide {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  padding: 15px;
  box-shadow: 0px 0px 20px 0px rgba(221, 221, 221, 0.4117647059);
  text-align: left;
}
.events-area-three .events-item-two .main-divide li {
  list-style-type: none;
  display: inline-block;
}
.events-area-three .events-item-two .main-divide li:nth-child(1) {
  flex: 0 0 25%;
  max-width: 25%;
}
.events-area-three .events-item-two .main-divide li:nth-child(2) {
  flex: 0 0 45%;
  max-width: 45%;
  margin-left: 15px;
}
.events-area-three .events-item-two .main-divide li:nth-child(3) {
  text-align: right;
  flex: 0 0 25%;
  max-width: 25%;
  margin-left: 15px;
}
.events-area-three .events-item-two .main-divide li h3 {
  margin-bottom: 8px;
  font-size: 20px;
  line-height: 1.4;
}
.events-area-three .events-item-two .main-divide li h3 a {
  color: #2A2A2A;
}
.events-area-three .events-item-two .main-divide li h3 a:hover {
  color: #F00041;
}
.events-area-three .events-item-two .main-divide li .inner-divide {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  text-align: left;
}
.events-area-three .events-item-two .main-divide li .inner-divide li {
  list-style-type: none;
  display: inline-block;
  position: relative;
  padding-left: 25px;
}
.events-area-three .events-item-two .main-divide li .inner-divide li:nth-child(1) {
  flex: 0 0 50%;
  max-width: 50%;
}
.events-area-three .events-item-two .main-divide li .inner-divide li:nth-child(2) {
  flex: 0 0 50%;
  max-width: 50%;
  margin-left: 0;
}
.events-area-three .events-item-two .main-divide li .inner-divide li i {
  display: inline-block;
  color: #F00041;
  font-size: 18px;
  position: absolute;
  top: 2px;
  left: 0;
}
.events-area-three .events-item-two .main-divide li .inner-divide li span {
  display: inline-block;
  font-size: 14px;
}
.events-area-three .events-item-two .main-divide li .inner-divide li a {
  color: #464646;
  display: inline-block;
  font-size: 14px;
}
.events-area-three .events-item-two .main-divide li .inner-divide li a:hover {
  color: #F00041;
}
.events-area-three .events-item-two .main-divide li .common-btn {
  padding-left: 0;
  padding-right: 0;
  width: 190px;
  text-align: center;
  border: 1px solid #F00041;
}
.events-area-three .events-item-two .main-divide li .common-btn.default {
  color: #F00041;
  margin-bottom: 15px;
  background-color: #fff;
}
.events-area-three .events-item-two .main-divide li .common-btn.default:hover {
  color: #fff;
}
.events-area-three .events-item-two .main-divide li .common-btn.default:hover:before {
  background-color: #F00041;
}
.events-area-three .events-item-two .main-divide li .common-btn.disabled {
  background-color: #707070;
  border: 1px solid #707070;
}
.events-area-three .events-item h3 {
  font-size: 20px;
  margin-bottom: 15px;
  line-height: 1.4;
}
.events-area-three .events-item h3 a {
  color: #fff;
}
.events-area-three .events-item h3 a:hover {
  color: #2A2A2A;
}
.events-area-three .events-item .common-btn {
  color: #F00041;
  background-color: #fff;
}

/*----- Event Details CSS -----*/
.event-details-area .details-img {
  margin-bottom: 30px;
}
.event-details-area .details-img img {
  width: auto;
  margin-bottom: 20px;
}
.event-details-area .details-img h2 {
  font-size: 30px;
  margin-bottom: 15px;
  line-height: 1.4;
}
.event-details-area .details-img p {
  margin-bottom: 10px;
}
.event-details-area .details-img p:last-child {
  margin-bottom: 0;
}
.event-details-area .details-img ul {
  margin: 0;
  padding: 0;
  margin-top: 15px;
}
.event-details-area .details-img ul li {
  list-style-type: none;
  display: inline-block;
  margin-bottom: 10px;
  position: relative;
  padding-left: 15px;
  font-weight: 500;
}
.event-details-area .details-img ul li:before {
  position: absolute;
  content: "";
  width: 5px;
  height: 5px;
  top: 8px;
  left: 0;
  background-color: #F00041;
}
.event-details-area .details-img ul li:last-child {
  margin-bottom: 0;
}
.event-details-area .details-recent {
  margin-bottom: 30px;
  text-align: left;
}
.event-details-area .details-recent .events-inner:last-child {
  margin-bottom: 0;
}
.event-details-area .details-recent .events-inner .main-wrap li:nth-child(1) {
  display: none;
}
.event-details-area .details-recent .events-inner .main-wrap li:nth-child(2) {
  flex: 0 0 100%;
  max-width: 100%;
}
.event-details-area .details-recent .events-inner .main-wrap li .link-wrap li:nth-child(1) {
  display: block;
  flex: 0 0 20%;
  max-width: 20%;
}
.event-details-area .details-recent .events-inner .main-wrap li .link-wrap li:nth-child(2) {
  flex: 0 0 75%;
  max-width: 75%;
}
.event-details-area .details-recent .events-inner .main-wrap li .link-wrap li span {
  display: block;
  padding-left: 18px;
  padding-right: 18px;
}

.common-details-content {
  padding: 40px 30px;
  box-shadow: 0px 0px 20px 0px rgba(221, 221, 221, 0.3098039216);
  margin-bottom: 30px;
  text-align: left;
}
.common-details-content h3 {
  font-size: 20px;
  margin-bottom: 30px;
  position: relative;
  padding-bottom: 10px;
}
.common-details-content h3:before {
  position: absolute;
  content: "";
  width: 30px;
  height: 2px;
  left: 0;
  bottom: 0;
  background-color: #F00041;
}
.common-details-content ul {
  margin: 0;
  padding: 0;
}
.common-details-content ul li {
  list-style-type: none;
  display: block;
  position: relative;
  font-weight: 600;
  color: #F00041;
  margin-bottom: 12px;
}
.common-details-content ul li:last-child {
  margin-bottom: 0;
}
.common-details-content ul li span {
  display: inline-block;
  color: #464646;
  font-weight: 400;
  position: absolute;
  top: 0;
  right: 0;
}
.common-details-content ul li a {
  display: inline-block;
  color: #464646;
  font-weight: 400;
  position: absolute;
  top: 0;
  right: 0;
}
.common-details-content ul li a:hover {
  color: #F00041;
}

.pagination-area {
  text-align: center;
}
.pagination-area ul {
  margin: 0;
  padding: 0;
}
.pagination-area ul li {
  list-style-type: none;
  display: inline-block;
  margin-left: 3px;
  margin-right: 3px;
}
.pagination-area ul li a {
  display: block;
  padding: 7px 15px;
  color: #2A2A2A;
  background-color: #fafafa;
  font-weight: 500;
  border-radius: 5px;
}
.pagination-area ul li a:hover, .pagination-area ul li a.active {
  color: #fff;
  background-color: #F00041;
}

/*----- Blog Details CSS -----*/
.blog-details-area .details-img {
  margin-bottom: 30px;
}
.blog-details-area .details-img img {
  width: auto;
}
.blog-details-area .details-item .details-info {
  margin-bottom: 30px;
  text-align: left;
}
.blog-details-area .details-item .details-info ul {
  margin: 0;
  padding: 0;
  margin-bottom: 10px;
  text-align: left;
}
.blog-details-area .details-item .details-info ul li {
  list-style-type: none;
  display: inline-block;
  margin-right: 15px;
}
.blog-details-area .details-item .details-info ul li:last-child {
  margin-right: 0;
}
.blog-details-area .details-item .details-info ul li i {
  display: inline-block;
  color: #F00041;
  font-size: 16px;
  margin-right: 2px;
}
.blog-details-area .details-item .details-info ul li span {
  display: inline-block;
}
.blog-details-area .details-item .details-info ul li a {
  display: inline-block;
  color: #464646;
}
.blog-details-area .details-item .details-info ul li a:hover {
  color: #F00041;
}
.blog-details-area .details-item .details-info h2 {
  font-size: 30px;
  margin-bottom: 10px;
  text-align: left;
}
.blog-details-area .details-item .details-info p {
  margin-bottom: 10px;
}
.blog-details-area .details-item .details-info p:last-child {
  margin-bottom: 0;
}
.blog-details-area .details-item .details-info blockquote {
  position: relative;
  font-weight: 500;
  font-style: italic;
  font-size: 20px;
  box-shadow: 0px 0px 20px 0px rgba(221, 221, 221, 0.3098039216);
  padding: 40px 30px 40px;
  margin-top: 30px;
  margin-bottom: 30px;
}
.blog-details-area .details-item .details-info blockquote i {
  display: inline-block;
  font-size: 80px;
  color: #182C4F;
  position: absolute;
  top: 32px;
  left: 42px;
  opacity: 0.05;
}
.blog-details-area .details-item .details-info blockquote h3 {
  margin-top: 15px;
  margin-bottom: 0;
  font-size: 15px;
  color: #F00041;
  text-align: right;
}
.blog-details-area .details-item .details-info blockquote h3 span {
  color: #464646;
  position: relative;
}
.blog-details-area .details-item .details-info blockquote h3 span:before {
  position: absolute;
  content: "";
  width: 25px;
  height: 2px;
  top: 10px;
  left: -33px;
  background-color: #F00041;
}
.blog-details-area .details-item .details-tag {
  margin-bottom: 30px;
  border-bottom: 1px solid rgba(221, 221, 221, 0.2392156863);
  padding-bottom: 30px;
  text-align: left;
}
.blog-details-area .details-item .details-tag .left ul {
  margin: 0;
  padding: 0;
}
.blog-details-area .details-item .details-tag .left ul li {
  list-style-type: none;
  display: inline-block;
}
.blog-details-area .details-item .details-tag .left ul li span {
  font-weight: 600;
  display: inline-block;
  color: #F00041;
  margin-right: 5px;
}
.blog-details-area .details-item .details-tag .left ul li a {
  color: #F00041;
  border: 1px solid #F00041;
  display: inline-block;
  padding: 3px 10px;
  margin-right: 5px;
}
.blog-details-area .details-item .details-tag .left ul li a:hover {
  color: #fff;
  background-color: #F00041;
}
.blog-details-area .details-item .details-tag .right {
  text-align: right;
}
.blog-details-area .details-item .details-tag .right ul {
  margin: 0;
  padding: 0;
}
.blog-details-area .details-item .details-tag .right ul li {
  list-style-type: none;
  display: inline-block;
}
.blog-details-area .details-item .details-tag .right ul li span {
  font-weight: 600;
  display: inline-block;
  color: #F00041;
}
.blog-details-area .details-item .details-tag .right ul li a {
  display: block;
  margin-left: 3px;
}
.blog-details-area .details-item .details-tag .right ul li a i {
  display: block;
  color: #fff;
  background-color: #F00041;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
  transition: 0.5s all ease;
}
.blog-details-area .details-item .details-tag .right ul li a i:hover {
  background-color: #182C4F;
}
.blog-details-area .details-item .details-comment {
  margin-bottom: 30px;
  text-align: left;
}
.blog-details-area .details-item .details-comment h3 {
  margin-bottom: 30px;
  font-size: 20px;
}
.blog-details-area .details-item .details-comment h3 span {
  color: #F00041;
}
.blog-details-area .details-item .details-comment ul {
  margin: 0;
  padding: 0;
}
.blog-details-area .details-item .details-comment ul li {
  list-style-type: none;
  display: block;
  position: relative;
  padding: 15px;
  padding-left: 135px;
  box-shadow: 0px 0px 20px 0px rgba(221, 221, 221, 0.2392156863);
  margin-bottom: 15px;
}
.blog-details-area .details-item .details-comment ul li:last-child {
  margin-bottom: 0;
}
.blog-details-area .details-item .details-comment ul li img {
  position: absolute;
  top: 15px;
  left: 15px;
  max-width: 100px;
}
.blog-details-area .details-item .details-comment ul li h4 {
  font-size: 16px;
  margin-bottom: 5px;
}
.blog-details-area .details-item .details-comment ul li span {
  display: block;
  font-size: 14px;
  margin-bottom: 8px;
}
.blog-details-area .details-item .details-comment ul li p {
  margin-bottom: 0;
}
.blog-details-area .details-item .details-comment ul li a {
  display: inline-block;
  color: #fff;
  background-color: #F00041;
  padding: 4px 15px;
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 14px;
}

.blog-details-area .details-item .details-comment ul li a:hover {
  background-color: #182C4F;
}
.blog-details-area .details-item .details-form {
  margin-bottom: 30px;
}
.blog-details-area .details-item .details-form h3 {
  font-size: 20px;
  margin-bottom: 30px;
}
.blog-details-area .details-item .details-form .form-group {
  margin-bottom: 15px;
}
.blog-details-area .details-item .details-form .form-group .form-control {
  height: 50px;
  padding-left: 20px;
  background-color: #fafafa;
  border: 0;
  border-radius: 0;
}
.blog-details-area .details-item .details-form .form-group .form-control:focus {
  border: 0;
  box-shadow: none;
}
.blog-details-area .details-item .details-form .form-group textarea {
  padding-top: 13px;
  height: auto !important;
}
.blog-details-area .details-item .details-form .common-btn {
  display: block;
  width: 100%;
}

.widget-area .widget-item {
  margin-bottom: 30px;
  text-align: left;
}
.widget-area .widget-item h3 {
  font-size: 20px;
  margin-bottom: 20px;
}
.widget-area .search {
  position: relative;
}
.widget-area .search .form-control {
  height: 50px;
  border: 1px solid #F00041;
  border-radius: 0;
  padding-left: 15px;
  transition: 0.5s all ease;
}
.widget-area .search .form-control:focus {
  border: 1px solid #2A2A2A;
  box-shadow: none;
}
.widget-area .search .btn {
  position: absolute;
  top: 9px;
  right: 14px;
  color: #F00041;
  transition: 0.5s all ease;
  font-size: 20px;
  padding: 0;
}
.widget-area .search .btn:hover {
  color: #2A2A2A;
}
.widget-area .news .inner {
  margin-bottom: 15px;
  text-align: left;
}
.widget-area .news .inner:last-child {
  margin-bottom: 0;
}
.widget-area .news ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.widget-area .news ul li {
  list-style-type: none;
  display: block;
}
.widget-area .news ul li:nth-child(1) {
  flex: 0 0 25%;
  max-width: 25%;
}
.widget-area .news ul li:nth-child(2) {
  flex: 0 0 70%;
  max-width: 70%;
  margin-left: 15px;
}
.widget-area .news ul li i {
  display: inline-block;
  font-size: 15px;
  color: #F00041;
  margin-right: 3px;
}
.widget-area .news ul li span {
  display: inline-block;
  font-size: 14px;
}
.widget-area .news ul li h4 {
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: 0;
  margin-top: 5px;
}
.widget-area .news ul li h4 a {
  color: #2A2A2A;
}
.widget-area .news ul li h4 a:hover {
  color: #F00041;
}
.widget-area .tags h3 {
  margin-bottom: 22px;
}
.widget-area .tags ul {
  margin: 0;
  padding: 0;
}
.widget-area .tags ul li {
  list-style-type: none;
  display: inline-block;
  margin-right: 8px;
  margin-top: 8px;
}
.widget-area .tags ul li a {
  display: block;
  color: #F00041;
  border: 1px solid #F00041;
  padding: 3px 12px;
}

.widget-area .events-item {
  text-align: left;
}

.widget-area .events-item h3 {
  margin-bottom: 5px;
  font-size: 20px;
}
.widget-area .events-item h3 a {
  color: #fff;
}
.widget-area .events-item h3 a:hover {
  color: #2A2A2A;
}
.widget-area .events-item p {
  margin-bottom: 10px;
  margin-right: 10px;
}
.widget-area .events-item .common-btn {
  color: #F00041;
  background-color: #fff;
}
.widget-area .events-item .common-btn:hover {
  color: #fff;
}

/*----- Contact CSS -----*/
.contact-area {
  position: relative;
}
.contact-area .contact-shape {
  position: absolute;
  bottom: 0;
  right: 0;
  max-width: 500px;
}
.contact-area #contactForm {
  margin-bottom: 30px;
}
.contact-area #contactForm .form-group {
  margin-bottom: 15px;
}
.contact-area #contactForm .form-group .form-control {
  height: 50px;
  border: 0;
  border-radius: 0;
  background-color: #fafafa;
  padding-left: 15px;
}
.contact-area #contactForm .form-group .form-control:focus {
  border: 0;
  box-shadow: none;
}
.contact-area #contactForm textarea {
  padding-top: 13px;
  height: auto !important;
}
.contact-area #contactForm .list-unstyled {
  margin-bottom: 0;
  margin-top: 10px;
  font-size: 14px;
  color: #dc3545;
}
.contact-area #contactForm .form-check {
  margin-bottom: 15px;
}
.contact-area #contactForm .form-check a {
  display: inline-block;
  color: #F00041;
}
.contact-area #contactForm .form-check a:hover {
  color: #464646;
}
.contact-area #contactForm .common-btn {
  opacity: 1;
}
.contact-area #contactForm .text-danger {
  color: #dc3545 !important;
  margin-bottom: 0;
  margin-top: 10px;
  font-size: 20px;
}
.contact-area #contactForm .text-success {
  color: #28a745 !important;
  margin-bottom: 0;
  margin-top: 10px;
  font-size: 20px;
}
.contact-area .contact-info {
  background-image: url("../images/contact-bg.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  padding: 30px;
  margin-bottom: 30px;
}
.contact-area .contact-info:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #fff;
  opacity: 0.98;
}
.contact-area .contact-info .inner {
  position: relative;
  z-index: 1;
}
.contact-area .contact-info .inner h3 {
  font-size: 20px;
  margin-bottom: 5px;
}
.contact-area .contact-info .inner p {
  margin-bottom: 15px;
}
.contact-area .contact-info .inner ul {
  margin: 0;
  padding: 0;
}
.contact-area .contact-info .inner ul li {
  list-style-type: none;
  display: block;
  position: relative;
  padding-left: 40px;
  margin-bottom: 12px;
}
.contact-area .contact-info .inner ul li:last-child {
  margin-bottom: 0;
}
.contact-area .contact-info .inner ul li i {
  font-size: 25px;
  color: #F00041;
  display: inline-block;
  position: absolute;
  top: 3px;
  left: 0;
}
.contact-area .contact-info .inner ul li a {
  display: block;
  color: #464646;
  font-weight: 500;
}
.contact-area .contact-info .inner ul li a:hover {
  color: #F00041;
}

.map-area #map {
  width: 100%;
  height: 400px;
  border: 0;
  display: block;
}

/*----- User Form CSS -----*/
.user-form-area {
  background-image: url("../images/user-bg.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  height: 100vh;
}
.user-form-area:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #2A2A2A;
  opacity: 0.9;
}
.user-form-area .form-item {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
.user-form-area .form-item form {
  margin-bottom: 25px;
}
.user-form-area .form-item form h2 {
  font-size: 38px;
  padding-bottom: 10px;
  margin-bottom: 40px;
  position: relative;
  color: #fff;
}
.user-form-area .form-item form h2:before {
  position: absolute;
  content: "";
  width: 50px;
  height: 3px;
  left: 0;
  right: 0;
  bottom: 0;
  margin-left: auto;
  margin-right: auto;
  background-color: #F00041;
}
.user-form-area .form-item form h2:after {
  position: absolute;
  content: "";
  width: 40px;
  height: 3px;
  left: 0;
  right: 0;
  bottom: -6px;
  margin-left: auto;
  margin-right: auto;
  background-color: #F00041;
}
.user-form-area .form-item form .form-group {
  margin-bottom: 30px;
}
.user-form-area .form-item form .form-group .form-control {
  height: 50px;
  border: 0;
  border-radius: 0;
  background-color: #fafafa;
  padding-left: 20px;
  font-size: 15px;
}
.user-form-area .form-item form .form-group .form-control:focus {
  border: 0;
  box-shadow: none;
}
.user-form-area .form-item form .common-btn {
  padding: 12px 70px;
}
.user-form-area .form-item .user-btn h3 {
  font-weight: 400;
  font-size: 15px;
  margin-bottom: 30px;
  color: #fff;
}
.user-form-area .form-item .user-btn h3 a {
  display: inline-block;
  color: #F00041;
  font-weight: 600;
  margin-left: 5px;
}
.user-form-area .form-item .user-btn h3 a:hover {
  color: #fff;
}
.user-form-area .form-item .user-btn span {
  display: block;
  font-size: 15px;
  position: relative;
  margin-bottom: 25px;
  color: #fff;
}
.user-form-area .form-item .user-btn span:before {
  position: absolute;
  content: "";
  width: 35%;
  height: 1px;
  left: 0;
  top: 11px;
  background-color: #dbdbdb;
}
.user-form-area .form-item .user-btn span:after {
  position: absolute;
  content: "";
  width: 35%;
  height: 1px;
  right: 0;
  top: 11px;
  background-color: #dbdbdb;
}
.user-form-area .form-item .user-btn ul li {
  list-style-type: none;
  display: inline-block;
  margin-left: 3px;
  margin-right: 3px;
}
.user-form-area .form-item .user-btn ul li:nth-child(2) a {
  background-color: #00acee;
}
.user-form-area .form-item .user-btn ul li:nth-child(3) a {
  background-color: #0e76a8;
}
.user-form-area .form-item .user-btn ul li:nth-child(4) a {
  background-color: #E60023;
}
.user-form-area .form-item .user-btn ul li a {
  display: block;
  width: 30px;
  height: 30px;
  color: #fff;
  background-color: #3b5998;
  border-radius: 50%;
  font-size: 14px;
}
.user-form-area .form-item .user-btn ul li a i {
  line-height: 30px;
}
.user-form-area .form-item .user-btn ul li a:hover {
  transform: translate(0, -5px);
}

/*----- Donation CSS -----*/
.help-page-area .help-content {
  background-image: url("../images/donate-bg.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  padding: 50px;
  margin-bottom: 30px;
}
.help-page-area .help-content:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #fff;
  opacity: 0.98;
}
.help-page-area .help-content form {
  position: relative;
  z-index: 1;
  text-align: left;
}
.help-page-area .help-content .dollar {
  text-align: center;
  margin: 0;
  padding: 0;
  margin-bottom: 30px;
}
.help-page-area .help-content .dollar li {
  list-style-type: none;
  display: inline-block;
  margin-left: 3px;
  margin-right: 3px;
}
.help-page-area .help-content .dollar li a {
  display: block;
  color: #2A2A2A;
  background-color: #fff;
  font-weight: 500;
  padding: 10px 20px;
}
.help-page-area .help-content .dollar li a:hover {
  color: #fff;
  background-color: #2A2A2A;
}
.help-page-area .help-content .form-group {
  margin-bottom: 15px;
}
.help-page-area .help-content .form-group label {
  margin-bottom: 10px;
  font-weight: 600;
}
.help-page-area .help-content .form-group .form-control {
  height: 50px;
  border: 0;
  border-radius: 0;
  padding-left: 15px;
  box-shadow: 0px 0px 20px 0px rgba(221, 221, 221, 0.2392156863);
}
.help-page-area .help-content .form-group .form-control:focus {
  border: 0;
  box-shadow: 0px 0px 20px 0px rgba(221, 221, 221, 0.2392156863);
}
.help-page-area .help-content .gateway {
  margin-bottom: 15px;
}
.help-page-area .help-content .gateway h4 {
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 15px;
}
.help-page-area .help-content .gateway .form-check {
  margin-right: 35px;
}
.help-page-area .help-content .gateway .form-check .form-check-label {
  font-weight: 500;
}
.help-page-area .cash-content h3 {
  font-size: 20px;
  margin-bottom: 15px;
  text-align: left;
}
.help-page-area .cash-content ul {
  margin: 0;
  padding: 0;
}
.help-page-area .cash-content ul li {
  list-style-type: none;
  display: block;
  margin-bottom: 12px;
  padding-left: 20px;
  position: relative;
  text-align: left;
}
.help-page-area .cash-content ul li:before {
  position: absolute;
  content: "";
  width: 10px;
  height: 2px;
  left: 0;
  top: 10px;
  background-color: #F00041;
}
.help-page-area .cash-content ul li:last-child {
  margin-bottom: 0;
}
.help-page-area.two .help-content {
  margin-bottom: 0;
}
.help-page-area.two .form-group textarea {
  height: auto !important;
  padding-top: 13px;
}

.testimonials-area.three .testimonials-item {
  margin-bottom: 30px;
}
.testimonials-area.three .testimonials-item .top {
  margin-left: 0;
  margin-top: 0;
  margin-right: 0;
}

/*-- FAQ --*/
.faq-area .accordion {
  margin: 0;
  padding: 0;
  margin-bottom: 30px;
}
.faq-area .accordion p {
  display: none;
  padding: 20px 25px 20px;
  margin-bottom: 0;
}
.faq-area .accordion li {
  position: relative;
  list-style-type: none;
  margin-bottom: 20px;
  display: block;
  box-shadow: 0px 0px 30px 0px rgba(221, 221, 221, 0.2588235294);
  border-radius: 5px;
}
.faq-area .accordion li:first-child {
  border-top: 0;
}
.faq-area .accordion li:last-child {
  margin-bottom: 0;
}
.faq-area .accordion li a {
  width: 100%;
  display: block;
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
  color: #2A2A2A;
  padding: 13px 38px 13px 20px;
  border-radius: 5px;
}
.faq-area .accordion li a.active {
  color: #fff;
  background-color: #F00041;
}
.faq-area .accordion li a.active i {
  color: #fff;
  opacity: 0;
}
.faq-area .accordion li a.active i.two {
  opacity: 1;
}
.faq-area .accordion li a i {
  position: absolute;
  top: 19px;
  right: 20px;
  color: #2A2A2A;
  display: inline-block;
  font-size: 18px;
  opacity: 1;
  transition: 0.5s all ease;
}
.faq-area .accordion li a i.two {
  opacity: 0;
}
.faq-area .faq-img {
  margin-bottom: 30px;
}
.faq-area .faq-img img {
  width: 100%;
}

/*----- Error CSS -----*/
.error-area {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  height: 100vh;
  text-align: center;
}
.error-area .error-content i {
  color: #F00041;
  display: inline-block;
  font-size: 100px;
}
.error-area .error-content h1 {
  font-size: 130px;
  color: #F00041;
  margin-bottom: 20px;
}
.error-area .error-content h2 {
  font-size: 25px;
  color: #2A2A2A;
  margin-bottom: 10px;
}
.error-area .error-content p {
  margin-bottom: 20px;
  font-weight: 500;
}

/*----- Coming Soon -----*/
.coming-soon-area {
  height: 100vh;
  text-align: center;
}
.coming-soon-area .soon-item h1 {
  font-size: 100px;
  margin-bottom: 20px;
}
.coming-soon-area .soon-item span {
  display: block;
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 30px;
}
.coming-soon-area .soon-item .coming-inner {
  background-color: #F00041;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-bottom: 30px;
}
.coming-soon-area .soon-item .coming-inner span {
  display: block;
  font-size: 40px;
  margin-bottom: 0;
  color: #fff;
  font-weight: 700;
}
.coming-soon-area .soon-item .coming-inner p {
  margin-bottom: 0;
  color: #fff;
}

/*----- Rules CSS -----*/
.rules-area {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.rules-area .rules-item img {
  margin-bottom: 30px;
}
.rules-area .rules-item h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
.rules-area .rules-item p {
  margin-bottom: 30px;
}
.rules-area .rules-item p:last-child {
  margin-bottom: 0;
}

/*----- Mission Details CSS -----*/
.mission-details-area .details-img {
  margin-bottom: 30px;
}
.mission-details-area .details-img img {
  width: auto;
  margin-bottom: 20px;
}
.mission-details-area .details-img h2 {
  font-size: 30px;
  margin-bottom: 15px;
}
.mission-details-area .details-img p {
  margin-bottom: 10px;
}
.mission-details-area .details-img p:last-child {
  margin-bottom: 0;
}
.mission-details-area .details-img ul {
  margin: 0;
  padding: 0;
  margin-top: 15px;
}
.mission-details-area .details-img ul li {
  list-style-type: none;
  display: inline-block;
  margin-bottom: 10px;
  position: relative;
  padding-left: 15px;
  font-weight: 500;
}
.mission-details-area .details-img ul li:before {
  position: absolute;
  content: "";
  width: 5px;
  height: 5px;
  top: 8px;
  left: 0;
  background-color: #F00041;
}
.mission-details-area .details-img ul li:last-child {
  margin-bottom: 0;
}
.mission-details-area .details-mission {
  margin-bottom: 30px;
}
.mission-details-area .details-mission .inner {
  margin-bottom: 15px;
}
.mission-details-area .details-mission .inner:last-child {
  margin-bottom: 0;
}
.mission-details-area .details-mission .inner ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.mission-details-area .details-mission .inner ul li {
  list-style-type: none;
  display: inline-block;
}
.mission-details-area .details-mission .inner ul li:nth-child(1) {
  flex: 0 0 25%;
  max-width: 25%;
}
.mission-details-area .details-mission .inner ul li:nth-child(2) {
  flex: 0 0 70%;
  max-width: 70%;
  margin-left: 15px;
}
.mission-details-area .details-mission .inner ul li h3 {
  margin-bottom: 5px;
  font-size: 20px;
}
.mission-details-area .details-mission .inner ul li h3 a {
  color: #2A2A2A;
}
.mission-details-area .details-mission .inner ul li h3 a:hover {
  color: #F00041;
}
.mission-details-area .details-mission .inner ul li p {
  margin-bottom: 0;
}

/*----- Go Top CSS -----*/
.go-top {
  position: fixed;
  cursor: pointer;
  bottom: 0;
  right: 15px;
  color: #ffffff;
  background-color: #F00041;
  z-index: 4;
  width: 45px;
  text-align: center;
  height: 45px;
  opacity: 0;
  visibility: hidden;
  transition: 0.4s;
  border-radius: 50%;
  border: 1px solid #F00041;
}
.go-top i {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: 0 auto;
  transition: 0.6s;
  font-size: 20px;
  line-height: 45px;
}
.go-top i:last-child {
  opacity: 0;
  visibility: hidden;
  top: 60%;
}
.go-top.active {
  bottom: 2%;
  transform: translateY(-1%);
  opacity: 1;
  visibility: visible;
}
.go-top:hover, .go-top:focus {
  color: #ffffff;
  border: 1px solid #2A2A2A;
  background-color: #2A2A2A;
}
.go-top:hover i:first-child, .go-top:focus i:first-child {
  opacity: 0;
  top: 0;
  visibility: hidden;
}
.go-top:hover i:last-child, .go-top:focus i:last-child {
  opacity: 1;
  visibility: visible;
  top: 50%;
}

/*----- Preloader CSS -----*/
.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999999;
  background: #fff;
}
.loader .sub-loader {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 70px;
  height: 70px;
  margin: auto auto;
  transform-style: preserve-3d;
  animation: pre-animate 4.59s ease-in-out infinite;
}
.loader .sub-loader:before {
  content: "";
  width: 70px;
  height: 70px;
  border: 40px solid #F00041;
  border-radius: 50%;
  position: absolute;
  animation: pre-animate-two 1.73s ease-in-out infinite both reverse;
}
.loader .sub-loader:after {
  content: "";
  width: 70px;
  height: 70px;
  border: 40px solid #F00041;
  border-radius: 50%;
  position: absolute;
  animation: pre-animate-two 1.73s ease-in-out infinite both reverse;
  border-color: #005BB5;
  animation-delay: -0.86s;
}

@keyframes pre-animate {
  0%, 100% {
    transform: rotateX(8.75deg) rotateY(35deg);
  }
  50% {
    transform: rotateX(35deg) rotateY(-15deg) rotate(90deg);
  }
}
@keyframes pre-animate-two {
  0%, 100% {
    transform: translateZ(25px) rotateX(14deg);
  }
  33% {
    transform: translateZ(-25px) scale(0.4);
  }
  66% {
    transform: translateZ(-25px);
  }
}
/*----- Buy Now Btn -----*/
.buy-now-btn {
  right: 20px;
  z-index: 99;
  top: 50%;
  position: fixed;
  transform: translateY(-50%);
  border-radius: 30px;
  display: inline-block;
  color: #fff;
  background-color: #82b440;
  padding: 10px 20px 10px 42px;
  box-shadow: 0 1px 20px 1px #82b440;
  font-size: 13px;
  font-weight: 600;
}
.buy-now-btn img {
  top: 50%;
  left: 20px;
  width: 15px;
  position: absolute;
  transform: translateY(-50%);
}
.buy-now-btn:hover {
  color: #fff;
  background-color: #94be5d;
}/*# sourceMappingURL=style.css.map */

/* Dropdown Container */
.profile-dropdown {
  position: relative;
  display: inline-block;
  font-family: "Arial", sans-serif;
}

/* Avatar and Greeting Button */
.profile-dropdown-toggle {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  font-size: 14px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 30px;
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.profile-dropdown-toggle:hover {
  background-color: #e0e0e0;
}

.profile-dropdown-toggle img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 8px;
  border: 2px solid #007bff;
  transition: border 0.3s ease;
}

.profile-dropdown-toggle span {
  font-weight: bold;
  color: #333;
}

/* Dropdown Menu */
.profile-dropdown-menu {
  position: absolute;
  top: 50px;
  right: 0;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  width: 180px;
  padding: 8px 0;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease-in-out;
}

/* Show Dropdown on Hover */
.profile-dropdown:hover .profile-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Dropdown Item */
.profile-dropdown-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  font-size: 14px;
  color: #555;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.profile-dropdown-item:hover {
  background-color: #007bff;
  color: #ffffff;
}

.profile-dropdown-item svg {
  margin-right: 8px;
  font-size: 16px;
  color: #777;
}

.profile-dropdown-item:hover svg {
  color: #ffffff;
}

/* Divider */
.profile-dropdown-divider {
  height: 1px;
  background-color: #ddd;
  margin: 8px 0;
}

.profile-dropdown-toggle:hover img {
  border-color: #ff0000;
}

.label-spacing {
  margin-top: 1rem; /* Adjust the value as needed */
}

/* Styles for the disabled button */
.btn.common-btn:disabled {
  border: 2px solid #ccc; /* Border for disabled button */
  background-color: #f8f9fa; /* Light background for disabled state */
  color: #6c757d; /* Muted text color */
  cursor: not-allowed; /* Not-allowed cursor for disabled state */
  position: relative; /* Enable positioning for tooltip */
}

.button-container {
  position: relative; /* Allow positioning of the info message */
  display: flex; /* Use flexbox for alignment */
  flex-direction: column; /* Stack button and message vertically */
  align-items: center; /* Horizontally center items */
  justify-content: center; /* Vertically center items */
}

.info-message {
  display: none; /* Hidden by default */
  position: absolute; /* Position relative to the container */
  top: 110%; /* Position below the button */
  left: 50%; /* Center horizontally */
  transform: translateX(-50%); /* Center the message */
  background-color: rgba(0, 0, 0, 0.8); /* Dark background for visibility */
  color: #fff; /* White text for readability */
  padding: 5px 10px;
  border-radius: 4px; /* Rounded corners */
  font-size: 12px; /* Adjust text size */
  white-space: nowrap; /* Prevent text wrapping */
  z-index: 10; /* Ensure it appears above other elements */
  pointer-events: none; /* Prevent interference with hover interactions */
  text-align: center; /* Center-align text */
}

/* Show the info message when the container is hovered */
.button-container:hover .info-message {
  display: block;
}

.donation-container {
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 200px;
  padding-right: 200px;
}

.donation-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.donation-filters input,
.donation-filters select {
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.donation-filters button {
  padding: 6px 12px;
  border: none;
  background-color: #007bff;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

.donation-filters button:hover {
  background-color: #0056b3;
}

.donation-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.donation-table th,
.donation-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.donation-table th {
  background-color: #f4f4f4;
}

.donation-pagination {
  display: flex;
  gap: 5px;
  justify-content: center;
}

.donation-pagination button {
  padding: 5px 10px;
  border: 1px solid #ddd;
  cursor: pointer;
  background-color: #F00041;
}

.donation-pagination button:hover {
  background-color: #F00041;
}

.donation-pagination button:disabled {
  background-color: #ddd;
  cursor: not-allowed;
}

.donation-search-input {
  width: 300px; /* Adjust the width */
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.donation-download-button {
  padding: 6px 12px;
  border: none;
  background-color: #007bff;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

.donation-download-button:hover {
  background-color: #0056b3;
}

.volunteer-container {
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 200px;
  padding-right: 200px;
}

.volunteer-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.volunteer-filters input,
.volunteer-filters select {
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.volunteer-filters button {
  padding: 6px 12px;
  border: none;
  background-color: #007bff;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

.volunteer-filters button:hover {
  background-color: #0056b3;
}

.volunteer-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.volunteer-table th,
.volunteer-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left; /* Ensure text is left-aligned */
}

.volunteer-pagination {
  display: flex;
  gap: 5px;
  justify-content: center;
  padding-top: 20px;
}

.volunteer-pagination button {
  padding: 5px 10px;
  border: 1px solid #ddd;
  background-color: #fff;
  cursor: pointer;
}

.volunteer-pagination button:disabled {
  background-color: #ddd;
  cursor: not-allowed;
}

.volunteer-search-input {
  width: 300px; /* Adjust the width */
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.volunteer-filter-select {
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  color: #333;
}

.help-page-area {
  padding: 50px 0;
  background-color: #f8f9fa;
}

.help-page-area {
  padding: 30px 0;
  background-color: #f8f9fa;
}

.card {
  border-radius: 8px;
}

.card-header {
  background-color: #007bff;
  color: #fff;
  text-align: center;
}

.input-group-text {
  background-color: #f1f1f1;
  border-right: 0;
}

.form-control {
  border-left: 0;
}

.btn-success {
  background-color: #28a745;
  border: none;
  border-radius: 4px;
}

.btn-success:hover {
  background-color: #218838;
}


.text-danger {
  font-size: 0.875rem;
}

/* React-Quill Editor Container */
.resizable-editor {
  height: 350px; /* Increased total height for the container */
}

/* React-Quill Toolbar Styling */
.ql-toolbar {
  height: 50px; /* Adjust toolbar height if needed */
  border: 1px solid #ddd; /* Clean border for toolbar */
  border-bottom: none; /* Remove bottom border to connect with the editor */
  border-radius: 4px 4px 0 0; /* Rounded corners on top */
  background-color: #f9f9f9; /* Light toolbar background */
  padding: 5px;
}

/* React-Quill Content Area */
.ql-container {
  flex-grow: 1; /* Allow the container to fill available space */
  height: calc(350px - 50px); /* Adjusted height to subtract toolbar height */
  overflow-y: auto; /* Enable scrolling for overflow content */
}

/* Editor (Text Input Area) */
.ql-editor {
  height: 100%; /* Match the container height */
  padding: 10px; /* Internal padding for better readability */
  line-height: 1.5; /* Improve text readability */
  background-color: #fff; /* Clean white background */
  border: none; /* Remove default borders */
  overflow-y: auto; /* Enable scrolling */
}

/* Placeholder Styling for Empty Editor */
.ql-editor.ql-blank::before {
  content: attr(data-placeholder); /* Display placeholder text */
  color: #ccc; /* Light gray for placeholder text */
  font-style: italic; /* Italic style for placeholder */
  pointer-events: none; /* Prevent interactions with placeholder */
  height: 300px; /* Ensure the placeholder matches editor height */
}

/* Ensure height consistency */
.ql-editor {
  height: 300px !important; /* Increased consistent height */
}

.ql-editor.ql-blank {
  height: 300px !important; /* Increased consistent height when blank */
}

.form-label {
  text-align: left; /* Force labels to align left */
  display: block; /* Ensure labels take up the full width */
  font-weight: 600; /* Optional: Add bold styling for better visibility */
  margin-bottom: 5px; /* Add spacing below the label */
  color: #F00041;
}

.ql-toolbar {
  justify-content: flex-start !important; /* Align toolbar to the left */
}

.my-quill-editor .ql-toolbar {
  justify-content: left !important;
}

.my-quill-editor .ql-toolbar .ql-formats {
  margin-right: 16px; /* Add spacing between groups */
}

.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}
.modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  width: 400px;
  max-width: 90%;
}

.custom-heading {
  color: #F00041;
}

.custom-tags-container {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background-color: #f9f9f9;
}

.custom-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.custom-tag {
  background-color: #F00041;
  color: white;
  border-radius: 20px;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
}

.custom-tag:hover {
  background-color: #F00041;
}

.custom-tag-close {
  font-size: 0.8rem;
}

.custom-tags-input {
  border: none;
  outline: none;
  flex: 1;
  font-size: 1rem;
  padding: 0.5rem;
  min-width: 150px;
}

.custom-tags-input:focus {
  outline: none;
}

.fixed-blog-image {
  width: 640px;
  height: 350px;
  object-fit: cover; /* Ensures the image maintains aspect ratio and fills the dimensions */
}

.blog-description {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Limit to 3 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 5em; /* Approx. 3 lines of text depending on font size */
  line-height: 1.5; /* Adjust line height for better readability */
}

.comment-item {
  margin-bottom: 15px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}

.blog-reply-btn {
  border: 1px solid #F00041;
  background-color: #F00041;
  color: #fff;
  padding: 4px 15px; /* Default padding */
  border-radius: 5px;
  margin-top: 10px;
  font-size: 14px;
  transition: all 0.3s ease; /* Smooth transition */
  display: inline-block;
  margin-bottom: 10px;
}

.blog-reply-btn:hover {
  background-color: #D0003B; /* Slightly darker red on hover */
  border-color: #D0003B;
}

.show-more-container {
  display: flex;
  justify-content: center; /* Center the button */
  margin-top: 15px; /* Reduce spacing above */
}

.show-more-btn {
  background-color: #f00041; /* Red background */
  color: #fff; /* White text */
  border: 2px solid transparent; /* No border initially */
  padding: 8px 20px; /* Reduced padding */
  border-radius: 30px; /* Slightly smaller rounded corners */
  font-size: 14px; /* Smaller font size */
  font-weight: 600; /* Semi-bold text */
  cursor: pointer; /* Pointer cursor */
  display: inline-flex; /* Align icon and text horizontally */
  align-items: center; /* Center icon and text vertically */
  gap: 8px; /* Spacing between icon and text */
  transition: all 0.3s ease; /* Smooth animations */
  box-shadow: 0px 5px 10px rgba(240, 0, 65, 0.2); /* Subtle shadow */
}

.show-more-btn:hover {
  background-color: #fff; /* White background on hover */
  color: #f00041; /* Red text on hover */
  border: 2px solid #f00041; /* Red border on hover */
  transform: translateY(-2px); /* Slight upward lift */
  box-shadow: 0px 10px 15px rgba(240, 0, 65, 0.4); /* Enhanced shadow */
}

.show-more-btn:active {
  transform: translateY(0); /* Press effect */
  box-shadow: 0px 5px 8px rgba(240, 0, 65, 0.3); /* Reduced shadow */
}

.icofont-arrow-down {
  font-size: 16px; /* Smaller icon size */
  animation: bounce 1s infinite; /* Bouncing arrow animation */
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0); /* Resting position */
  }
  40% {
    transform: translateY(-4px); /* Reduced bounce up */
  }
  60% {
    transform: translateY(-2px); /* Slight bounce down */
  }
}

.comment-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  top: 15px;
  left: 15px;
  margin-right: 10px;
  border: 2px solid rgba(240, 0, 65, 0.7); /* Red border */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  background-color: #f9f9f9; /* Fallback background color */
}

.comment-avatar:hover {
  transform: scale(1.1); /* Slightly enlarge on hover */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Enhance shadow on hover */
}

.reply-avatar {
  width: 40px; /* Smaller size for replies */
  height: 40px;
  border-radius: 50%; /* Circular shape */
  object-fit: cover; /* Ensure the image fits perfectly */
  border: 2px solid rgba(240, 0, 65, 0.7); /* Bright red border with 70% transparency */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for elevation */
  margin-right: 10px; /* Add spacing between image and text */
}

/* 23456789 */

/* General Styling */
.details-comment {
  margin-top: 40px;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.comments-heading {
  font-size: 22px;
  margin-bottom: 20px;
  color: #333;
}

.comment-card {
  margin-bottom: 20px;
  padding: 15px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.comment-top {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.comment-details {
  flex: 1;
}

.comment-author {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.comment-date {
  font-size: 12px;
  color: #777;
}

.comment-text {
  font-size: 14px;
  color: #555;
  margin: 10px 0;
}

.reply-btn {
  margin-top: 5px;
  font-size: 13px;
  color: #f00041;
  background: none;
  border: none;
  cursor: pointer;
}

.reply-btn:hover {
  text-decoration: underline;
}

.replies-container {
  margin-top: 10px;
}

.reply-card {
  margin-top: 10px;
  display: flex;
  align-items: flex-start;
  padding: 10px;
  background: #f9f9f9;
  border-radius: 8px;
  border-left: 4px solid rgba(240, 0, 65, 0.7);
}

.reply-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 10px;
}

.reply-content {
  flex: 1;
}

.reply-content h5 {
  margin: 0;
  font-size: 14px;
  font-weight: bold;
}

.reply-content span {
  font-size: 12px;
  color: #888;
}

.reply-content p {
  margin: 5px 0;
  font-size: 13px;
  color: #666;
}

.view-replies-btn,
.hide-replies-btn {
  margin-top: 5px;
  font-size: 13px;
  color: #f00041;
  background: none;
  border: none;
  cursor: pointer;
}

.view-replies-btn:hover,
.hide-replies-btn:hover {
  text-decoration: underline;
}

.comment-submit-btn {
  background: #f00041;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
}

.comment-submit-btn:hover {
  background: #c70035;
}

/* Wrapper for the search input */
.event-search-container {
  position: relative;
  width: 100%;
}

/* Input field styling */
.event-search-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 16px;
  border: 1px solid #ced4da;
  border-radius: 5px;
  outline: none;
  transition: border-color 0.3s ease-in-out;
}

.event-search-input:focus {
  border-color: #007bff;
  box-shadow: 0px 0px 5px rgba(0, 123, 255, 0.5);
}

/* Suggestions dropdown */
.event-suggestions {
  position: absolute;
  width: 100%; /* Adjusted width */
  max-height: 200px; /* Adds scroll when there are many items */
  overflow-y: auto; /* Enable vertical scroll */
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: 5px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  margin-top: 2px;
  padding: 0;
  list-style: none;
}

/* Individual suggestion item */
.event-suggestion-item {
  padding: 8px 10px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  text-align: left; /* Left-align text */
  transition: background 0.3s ease-in-out;
}

.event-suggestion-item:hover {
  background: #f8f9fa;
}

/* Hide dropdown when showSuggestions is false */
.event-suggestions.hidden {
  display: none;
}

/* Wrapper for the search input */
.blog-search-container {
  position: relative;
  width: 100%;
}

/* Input field styling */
.blog-search-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 16px;
  border: 1px solid #ced4da;
  border-radius: 5px;
  outline: none;
  transition: border-color 0.3s ease-in-out;
}

.blog-search-input:focus {
  border-color: #007bff;
  box-shadow: 0px 0px 5px rgba(0, 123, 255, 0.5);
}

/* Suggestions dropdown */
.blog-suggestions {
  position: absolute;
  width: 98%; /* Adjusted width */
  max-height: 200px; /* Adds scroll when there are many items */
  overflow-y: auto; /* Enable vertical scroll */
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: 5px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  margin-top: 2px;
  padding: 0;
  list-style: none;
}

/* Individual suggestion item */
.blog-suggestion-item {
  padding: 8px 10px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  text-align: left; /* Left-align text */
  transition: background 0.3s ease-in-out;
}

.blog-suggestion-item:hover {
  background: #f8f9fa;
}

/* Hide dropdown when showSuggestions is false */
.blog-suggestions.hidden {
  display: none;
}

/* Wrapper for the search input */
.member-search-container {
  position: relative;
  width: 100%;
}

/* Input field styling */
.member-search-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 16px;
  border: 1px solid #ced4da;
  border-radius: 5px;
  outline: none;
  transition: border-color 0.3s ease-in-out;
  margin-bottom: 20px;
}

.member-search-input:focus {
  border-color: #007bff;
  box-shadow: 0px 0px 5px rgba(0, 123, 255, 0.5);
}

/* Suggestions dropdown */
.member-suggestions {
  position: absolute;
  width: 98%; /* Adjusted width */
  max-height: 200px; /* Adds scroll when there are many items */
  overflow-y: auto; /* Enable vertical scroll */
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: 5px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  margin-top: 2px;
  padding: 0;
  list-style: none;
}

/* Individual suggestion item */
.member-suggestion-item {
  padding: 8px 10px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  text-align: left; /* Left-align text */
  transition: background 0.3s ease-in-out;
}

.member-suggestion-item:hover {
  background: #f8f9fa;
}

/* Hide dropdown when showSuggestions is false */
.member-suggestions.hidden {
  display: none;
}

.help-page-area {
  padding: 50px 0;
  background-color: #f9f9f9;
}

.card {
  border-radius: 8px;
}

.card-body {
  padding: 30px;
}

.form-label {
  font-weight: bold;
}

.input-group-text {
  background-color: #f8f9fa;
  border-right: 0;
}

.input-group .form-control {
  border-left: 0;
}

.text-secondary {
  font-weight: bold;
}

/* Custom Verify Button */
.verify-btn {
  background-color: #F00041 !important;
  border-color: #F00041 !important;
  color: white !important;
}

.verify-btn:hover {
  background-color: #c00034 !important;
  border-color: #c00034 !important;
}

/* Custom dropdown with form-control styling */
.custom-dropdown {
  width: 100%;
  height: 42px; /* ✅ Matches input fields */
  padding: 8px 12px;
  font-size: 16px;
  border: 1px solid #ced4da;
  border-radius: 5px;
  background-color: white;
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center; /* ✅ Centers text vertically */
  text-align: left; /* ✅ Left aligns the text */
}

/* Ensure proper alignment inside input-group */
.input-group .custom-dropdown {
  border-left: 0;
}

/* Dropdown options */
.custom-dropdown option {
  text-align: left; /* ✅ Ensures options are left-aligned */
  font-size: 16px;
  padding: 10px;
}

/* Focus styling */
.custom-dropdown:focus {
  border-color: #007bff;
  box-shadow: 0px 0px 5px rgba(0, 123, 255, 0.5);
  outline: none;
}

/* Hover effect */
.custom-dropdown:hover {
  border-color: #0056b3;
}

/* Profile Page Layout */
.profile-page-container {
  display: flex;
  background: #f0f2f5;
}

/* Sidebar */
.profile-sidebar {
  width: 280px;
  background: #005BB5; /* New Blue Gradient */
  color: white;
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.profile-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid #fff;
  margin-bottom: 15px;
}

.profile-sidebar h3 {
  font-size: 22px;
  margin-bottom: 15px;
  font-weight: bold;
  color: white;
}

.profile-logout-btn {
  background: #e63946;
  color: white;
  border: none;
  padding: 10px 15px;
  font-size: 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s;
}

.profile-logout-btn:hover {
  background: #b82e3a;
}

/* Sidebar Menu */
.profile-sidebar ul {
  list-style: none;
  padding: 0;
  width: 100%;
}

.profile-sidebar ul li {
  padding: 12px 15px;
  display: flex;
  align-items: center;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  transition: 0.3s;
}

.profile-sidebar ul li i {
  margin-right: 10px;
  font-size: 18px;
}

.profile-sidebar ul li:hover,
.profile-sidebar ul li.active {
  background: rgba(255, 255, 255, 0.2);
}

/* Main Content */
.profile-content {
  flex: 1;
  padding: 30px;
  background: white;
  border-radius: 8px;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
  margin: 20px;
}

/* Tabs */
.profile-tab-buttons {
  display: flex;
  border-bottom: 2px solid #ddd;
  margin-bottom: 20px;
}

.profile-tab {
  padding: 12px 18px;
  cursor: pointer;
  font-size: 16px;
  border: none;
  background: none;
  transition: 0.3s;
  margin-right: 20px;
}

.profile-tab.active {
  color: #005fa3;
  font-weight: bold;
  border-bottom: 2px solid #005fa3;
}

/* Forms */
.profile-form input {
  width: 100%;
  padding: 10px;
  margin-bottom: 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

/* Edit Button */
.profile-edit-btn {
  background: #005fa3;
  color: white;
  border: none;
  padding: 10px 16px;
  cursor: pointer;
  border-radius: 5px;
  transition: 0.3s;
  float: right;
}

.profile-edit-btn:hover {
  background: #00457c;
}

/* Lists */
.profile-list {
  list-style: none;
  padding: 0;
}

.profile-list li {
  background: #f9f9f9;
  padding: 12px;
  margin-bottom: 8px;
  border-radius: 5px;
  border-left: 4px solid #005fa3;
}

/* Ensure uniform height for input & icons */
.input-group .input-group-text {
  border: 1px solid #ced4da;
  font-size: 16px;
  display: flex;
  align-items: center;
  padding: 10px 12px; /* Adjust padding to match input */
  height: 42px; /* Match form-control height */
}

.input-group .form-control {
  height: 42px; /* Ensure same height as icons */
  font-size: 16px;
  padding: 10px 12px;
  border: 1px solid #ced4da;
}

/* Fix icon alignment */
.input-group .input-group-text i {
  font-size: 18px; /* Adjust icon size */
}

.profile-form label {
  display: block;
  text-align: left;
  font-weight: 600;
  margin-bottom: 5px;
  color: #F00041;
}

/* Donations Table */
.donations-table-container {
  overflow-x: auto;
}

.donations-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
}

.donations-table th,
.donations-table td {
  padding: 12px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}

.donations-table th {
  background: #005BB5;
  color: white;
  font-weight: bold;
}

.donations-table td {
  background: #f9f9f9;
}

/* Transaction Status Styles */
.status {
  padding: 6px 12px;
  border-radius: 5px;
  font-weight: bold;
}

.status.success {
  color: #28a745;
  background: rgba(40, 167, 69, 0.1);
}

.status.pending {
  color: #ffc107;
  background: rgba(255, 193, 7, 0.1);
}

.status.failed {
  color: #dc3545;
  background: rgba(220, 53, 69, 0.1);
}

/* Download Button */
.download-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #005fa3;
  transition: 0.3s;
}

.download-btn:hover {
  color: #004080;
}

/* Events Table */
.events-table-container {
  overflow-x: auto;
}

.events-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
}

.events-table th,
.events-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.events-table th {
  background: #005fa3;
  color: white;
  font-weight: bold;
}

.events-table td {
  background: #f9f9f9;
}

/* De-Register Button */
.deregister-btn {
  background: #dc3545;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 5px;
  transition: 0.3s;
}

.deregister-btn:hover {
  background: #b02a37;
}

/* Filter Dropdown Container */
.filter-dropdown-container {
  display: inline-block;
  width: 180px; /* ✅ Reduced width */
  position: relative;
}

/* Custom Dropdown */
.filter-dropdown {
  width: 100%;
  padding: 10px;
  background: white;
  border: 1px solid #ccc;
  border-radius: 5px;
  position: relative;
  cursor: pointer;
  text-align: left;
  font-size: 12px;
}

/* Dropdown List */
.filter-dropdown-list {
  width: 100%;
  background: white;
  border: 1px solid #ccc;
  border-radius: 5px;
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none; /* Hidden by default */
  z-index: 10;
}

.filter-dropdown-list.show {
  display: block; /* Show when dropdown is open */
}

/* Dropdown Options */
.filter-option {
  padding: 10px;
  text-align: left;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
  font-size: 12px;
}

.filter-option:hover {
  background: #f0f0f0;
  color: #005fa3;
}

/* Active Selection */
.filter-current {
  display: block;
  font-size: 12px;
}

.team-photo {
  width: 100%;
  max-width: 510px;
  height: 400px;
  object-fit: contain; /* ensures the image isn't cropped */
  display: block;
  margin: 0 auto;
}

.ideology-image {
  width: 510px; /* Fixed width */
  height: 500px; /* Fixed height */
  object-fit: cover; /* Ensures images maintain aspect ratio without distortion */
  display: block; /* Ensures proper alignment */
  margin: 0 auto; /* Centers the image horizontally */
}

.nav-icon-button {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background-color: #f5f5f5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s ease;
  margin-right: 10px;
}

.nav-icon-button:hover {
  background-color: #e0e0e0;
}

.nav-icon-svg {
  width: 22px;
  height: 22px;
  stroke: #333;
  stroke-width: 1.8;
}

.cart-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background-color: crimson;
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 50px;
  font-weight: bold;
  line-height: 1;
}

.auth-icons {
  display: flex;
  align-items: center;
}

.modern-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 32px;
  padding-top: 30px;
}

.modern-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.06);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.modern-image-container {
  width: 100%;
  overflow: hidden;
}

.modern-product-image {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.modern-card:hover .modern-product-image {
  transform: scale(1.05);
}

.modern-card-body {
  padding: 20px;
  text-align: center;
}

.modern-product-name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #111;
}

.modern-product-price {
  font-size: 18px;
  font-weight: bold;
  color: #28a745;
  margin-bottom: 16px;
}

.modern-action-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.modern-qty-input {
  width: 50px;
  text-align: center;
  padding: 4px 6px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}

.modern-cart-btn {
  background: #F00041; /* Solid background color */
  color: white;
  border: none;
  padding: 6px 16px;
  font-size: 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.modern-cart-btn:hover {
  background: #c90035; /* Slightly darker shade on hover */
}

.cart-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 900px;
  margin: 40px auto;
}

.cart-card-alt {
  display: flex;
  border: 1px solid #e0e0e0;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow 0.3s ease;
}

.cart-card-alt:hover {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}

.cart-img-col {
  flex: 0 0 120px;
  border-right: 1px solid #eee;
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;
}

.cart-content-col {
  padding: 20px;
  flex: 1;
}

.cart-head-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.cart-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.cart-remove-alt {
  background: none;
  border: none;
  color: crimson;
  font-weight: 500;
  cursor: pointer;
  font-size: 14px;
}

.cart-row {
  display: flex;
  justify-content: space-between;
  margin: 6px 0;
  font-size: 14px;
}

.cart-subtotal-row {
  margin-top: 12px;
  font-weight: 600;
}

.qty-alt-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qty-alt {
  padding: 2px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #f9f9f9;
  font-size: 16px;
  cursor: pointer;
}

.qty-alt:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.subtotal-price {
  font-weight: 700;
  color: #111;
}

.cart-total-section {
  margin-top: 20px;
  text-align: right;
}

.checkout-full-btn {
  background: #111827;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  margin-top: 10px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.checkout-full-btn:hover {
  background: #000;
}

.checkout-wrapper {
  max-width: 1080px;
  margin: 40px auto;
  padding: 24px;
  font-family: "Inter", sans-serif;
}

.checkout-title {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 30px;
}

.checkout-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.checkout-section {
  flex: 1;
  min-width: 300px;
}

.address-card {
  background: #f9f9f9;
  padding: 18px;
  border: 1px solid #eee;
  border-radius: 12px;
  line-height: 1.6;
}

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

.form-grid input {
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 14px;
}

.text-button {
  background: none;
  border: none;
  color: #0d6efd;
  cursor: pointer;
  font-size: 14px;
  margin-top: 10px;
  text-decoration: underline;
}

.order-card {
  background: #fff;
  padding: 18px 20px;
  border-radius: 12px;
  border: 1px solid #eee;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.order-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 14px;
}

.order-total {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  margin-top: 20px;
  font-size: 16px;
}

.checkout-button {
  margin-top: 24px;
  width: 100%;
  background: #111827;
  color: #fff;
  padding: 12px;
  font-size: 16px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.checkout-button:hover {
  background: #000;
}

.modern-shipping-section {
  background: #fff;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  border: 1px solid #eee;
}

.section-header {
  margin-bottom: 16px;
}

.section-title {
  color: #000;
  font-size: 16px;
  margin-bottom: 16px;
}

.modern-address-card {
  background-color: #f9f9f9;
  border-radius: 12px;
  padding: 18px;
  border: 1px solid #ddd;
}

.address-summary .address-line {
  margin: 4px 0;
  color: #333;
  font-size: 14px;
}

.link-button {
  margin-top: 12px;
  background: none;
  border: none;
  color: #0d6efd;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  font-size: 14px;
}

.modern-form-card {
  padding: 16px 0 0;
}

.form-grid-modern {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.input-group-modern {
  display: flex;
  flex-direction: column;
}

.input-group-modern label {
  margin-bottom: 6px;
  font-size: 13px;
  color: #555;
  font-weight: 500;
}

.input-group-modern input {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 14px;
  background: #fff;
  transition: border-color 0.2s;
}

.input-group-modern input:focus {
  border-color: #0d6efd;
  outline: none;
}

.address-form-wrapper {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 0;
}

.address-form-pro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.input-group-pro {
  position: relative;
}

.input-group-pro input {
  width: 100%;
  padding: 14px 12px;
  border-radius: 10px;
  border: 1px solid #ccc;
  font-size: 14px;
  background: #fff;
}

.input-group-pro input:focus {
  border-color: #0d6efd;
  outline: none;
}

.input-group-pro label {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  background: white;
  padding: 0 6px;
  font-size: 13px;
  color: #888;
  pointer-events: none;
  transition: all 0.2s ease;
}

.input-group-pro input:focus + label,
.input-group-pro input:not(:placeholder-shown) + label {
  top: -8px;
  left: 10px;
  font-size: 11px;
  color: #0d6efd;
}

.shipping-address-label {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #111827;
}

.qr-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.qr-modal-content {
  background: #fff;
  padding: 30px 40px;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  max-width: 350px;
  width: 90%;
}

.qr-image {
  width: 200px;
  height: 200px;
  object-fit: contain;
  border: 1px solid #ddd;
  border-radius: 12px;
  margin-bottom: 16px;
}

.qr-modal-content h3 {
  margin-bottom: 10px;
  font-size: 20px;
}

.qr-amount-text {
  font-size: 16px;
  margin: 12px 0 8px;
  color: #111;
}

.qr-done-btn {
  background-color: #22c55e; /* Tailwind green-500 */
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 15px;
  margin-top: 18px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.qr-done-btn:hover {
  background-color: #16a34a; /* darker green */
}

.orders-section {
  margin-top: 20px;
}

.orders-table-container {
  overflow-x: auto;
}

.orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.orders-table th,
.orders-table td {
  padding: 12px;
  border-bottom: 1px solid #e0e0e0;
  text-align: left;
}

.orders-table th {
  background-color: #f9f9f9;
  font-weight: 600;
}

.status.pending {
  color: orange;
}

.status.completed {
  color: green;
}

.status.cancelled {
  color: red;
}

.empty-cart-container {
  text-align: center;
  padding: 60px 20px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #eee;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.03);
}

.empty-cart-image {
  width: 180px;
  max-width: 100%;
  margin-bottom: 24px;
  opacity: 0.9;
}

.empty-cart-container h3 {
  font-size: 22px;
  margin-bottom: 10px;
  color: #111;
}

.empty-cart-container p {
  font-size: 15px;
  color: #666;
  margin-bottom: 20px;
}

.continue-shopping-btn {
  background-color: #0d6efd;
  color: white;
  border: none;
  padding: 12px 24px;
  font-size: 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.continue-shopping-btn:hover {
  background-color: #084cdf;
}

.download-btn {
  background: none;
  border: none;
  color: #0d6efd;
  font-size: 16px;
  cursor: pointer;
}

.download-btn:hover {
  color: #084cdf;
}

/* Modern Table Container */
.table-responsive {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05);
  background: #fff;
}

/* Table Base Style */
.modern-order-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: #111827;
}

/* Table Headers */
.modern-order-table thead {
  background-color: #f9fafb;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 13px;
}

.modern-order-table th,
.modern-order-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: top;
}

/* Last row */
.modern-order-table tbody tr:last-child td {
  border-bottom: none;
}

/* Order Items List */
.order-item-list {
  margin: 0;
  padding-left: 16px;
  font-size: 13px;
  line-height: 1.5;
  color: #374151;
  text-align: left;
}

.order-item-list li {
  margin-bottom: 4px;
  padding-left: 4px;
}

.modern-order-table td {
  vertical-align: top;
}


/* Status Badges */
.badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 500;
  text-transform: capitalize;
}

.badge-pending {
  background-color: #fff3cd;
  color: #856404;
}

.badge-success {
  background-color: #e0f7fa;
  color: #00796b;
}

.badge-approved {
  background-color: #e0f7fa;
  color: #00796b;
}

.badge-fulfilled {
  background-color: #e8f5e9;
  color: #2e7d32;
}

.badge-shipped {
  background-color: #e3f2fd;
  color: #1976d2;
}

.badge-delivered {
  background-color: #ede7f6;
  color: #4527a0;
}

/* Action Button */
.btn-outline-primary {
  font-weight: 500;
  padding: 6px 16px;
  border-radius: 8px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-outline-primary:hover {
  background-color: #0d6efd;
  color: #fff;
}

/* Pagination Buttons (Optional) */
.pagination-controls {
  margin-top: 24px;
  font-size: 14px;
  color: #374151;
}

.badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  text-transform: capitalize;
  letter-spacing: 0.3px;
}

.badge-pending {
  background-color: #fff3cd;
  color: #856404;
}

.badge-approved {
  background-color: #e0f7fa;
  color: #00796b;
}

.badge-fulfilled {
  background-color: #e8f5e9;
  color: #2e7d32;
}

.badge-shipped {
  background-color: #e3f2fd;
  color: #1976d2;
}

.badge-delivered {
  background-color: #e0e7ff;
  color: #3730a3;
}

.badge-cancelled,
.badge-failed {
  background-color: #f8d7da;
  color: #842029;
}

/* --- Filters Container --- */
.donation-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* --- Inputs & Select --- */
.donation-filters input[type="text"],
.donation-filters input[type="date"],
.donation-filters select {
  padding: 8px 14px;
  font-size: 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: #f9fafb;
  transition: border 0.2s ease;
  min-width: 160px;
  max-width: 220px;
  flex: 1;
}

.donation-filters input:focus,
.donation-filters select:focus {
  border-color: #0d6efd;
  outline: none;
}

/* --- Download Button --- */
.donation-download-button {
  padding: 8px 16px;
  background-color: #0d6efd;
  border: none;
  color: #fff;
  font-size: 14px;
  border-radius: 8px;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.donation-download-button:hover {
  background-color: #084298;
}

/* --- Responsive (Mobile) --- */
@media (max-width: 576px) {
  .donation-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .donation-download-button {
    width: 100%;
    text-align: center;
  }
}

.volunteer-filters-modern {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  background: #fff;
  padding: 16px 20px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03);
  margin-bottom: 24px;
  align-items: center;
}

.volunteer-input {
  flex: 1;
  min-width: 200px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  font-size: 14px;
}

.events-input {
  min-width: 300px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  font-size: 14px;
}

/* Custom Dropdown */
.volunteer-dropdown {
  min-width: 160px;
  position: relative;
}

.volunteer-select {
  background: #f9fafb;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  position: relative;
  width: 100%;
  user-select: none;
}

.volunteer-select::after {
  content: "▾";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #555;
}

.volunteer-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 20;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  margin-top: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
  list-style: none;
  padding-left: 0;  /* ✅ removes extra spacing */
  margin: 0;
}

.volunteer-select.open .volunteer-list {
  display: block;
}

.volunteer-list li {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  text-align: left;
}

.volunteer-list li:hover {
  background-color: #f3f4f6;
  color: #0d6efd;
}

/* React Select wrapper */
.volunteer-select-wrapper {
  min-width: 160px;
  max-width: 220px;
  flex: 1;
  text-align: left;
}

.text-left {
  text-align: left !important;
}

/* CSV Button */
.volunteer-csv-btn {
  padding: 8px 16px;
  font-size: 14px;
  background: #F00041;
  color: white;
  border: none;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.volunteer-csv-btn:hover {
  background: #F00041;
}

/* Responsive tweaks */
@media (max-width: 576px) {
  .volunteer-filters-modern {
    flex-direction: column;
    align-items: stretch;
  }

  .volunteer-csv-btn {
    width: 100%;
  }

  .volunteer-select-wrapper {
    max-width: 100%;
  }
}

.donation-filters-modern {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  background: #fff;
  padding: 16px 20px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03);
  margin-bottom: 24px;
  align-items: center;
}

.donation-input,
.donation-select {
  padding: 8px 12px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  color: #374151;
  min-width: 160px;
  max-width: 300px;
  flex: 1;
}

.donation-input:focus,
.donation-select:focus {
  border-color: #0d6efd;
  outline: none;
}

.donation-btn {
  padding: 8px 16px;
  font-size: 14px;
  background: #F00041;
  color: white;
  border: none;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.donation-btn:hover {
  background: #F00041;
}

/* Responsive (mobile) */
@media (max-width: 576px) {
  .donation-filters-modern {
    flex-direction: column;
    align-items: stretch;
  }

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

  .donation-input,
  .donation-select {
    max-width: 100%;
    width: 100%;
  }
}

.event-filters-modern {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 24px;
  position: relative;
}

.event-input {
  flex: 1;
  min-width: 250px;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 0.95rem;
}

.event-download-btn {
  background-color: #0d6efd;
  color: white;
  border: none;
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.event-download-btn:hover {
  background-color: #084298;
}

.event-dropdown-container {
  position: relative;
  width: 100%;
}

.event-suggestion-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  background: white;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-top: 4px;
  padding: 0;
  list-style: none;
  max-height: 250px;
  overflow-y: auto;
}

.event-suggestion-item {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 0.95rem;
  border-bottom: 1px solid #eee;
}

.event-suggestion-item:hover {
  background-color: #f8f9fa;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.enroll-modal {
  background: #fff;
  padding: 30px;
  border-radius: 8px;
  max-width: 480px;
  width: 100%;
  z-index: 1000;
}

.enroll-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); /* Reduced from 0.7 to 0.3 */
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.3s ease-in-out;
}


.enroll-modal-box {
  background: #fff;
  padding: 2.5rem;
  width: 100%;
  max-width: 480px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  text-align: center;
}

.modal-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #222;
}

.modal-subtext {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 1.5rem;
}

.enroll-form input {
  width: 100%;
  padding: 12px 16px;
  font-size: 0.95rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-bottom: 1rem;
  transition: border-color 0.2s;
}

.enroll-form input:focus {
  border-color: #007bff;
  outline: none;
}

.enroll-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 1rem;
}

.btn-cancel {
  background: #f3f3f3;
  color: #333;
  border: none;
  padding: 10px 18px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-cancel:hover {
  background: #e0e0e0;
}

.btn-submit {
  background: #2b7cff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-submit:hover {
  background: #1a65d9;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Limit to 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.read-more-link {
  display: inline-block;
  margin-top: 5px;
  color: #007bff;
  text-decoration: underline;
  cursor: pointer;
}

.google-signin-btn {
  background-color: #ffffff;
  border: 1px solid #dcdcdc;
  color: #444;
  font-weight: 500;
  font-size: 15px;
  padding: 10px 16px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.google-signin-btn i {
  font-size: 18px;
  color: #ea4335; /* Google's red */
  transition: color 0.2s ease;
}

.google-signin-btn:hover {
  background-color: #f0f4f8;
  border-color: #c6c6c6;
  color: #202124;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.google-signin-btn:hover i {
  color: #d93025; /* deeper red on hover */
}

.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clamp-up-to-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 3;
}

.description-block {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.6em; /* Approx 3 lines for 14px text + line-height */
}

.users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.users-table thead {
  background-color: #005BB5;
}

.users-table th,
.users-table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid #e5e5e5;
}

.users-table th {
  font-weight: 600;
  color: white;
}

.users-table tbody tr:hover {
  background-color: #f9f9f9;
}

.users-table img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}