/*
Theme Name: Danbox
Author: ModinaTheme
Author URI: https://themeforest.net/user/modinatheme/
Description: Charity & Fundraiser Html Template
Version: 1.1.0
*/

/*
=================================
|***    Table of contents:   ***|
=================================

1. General styles
2. Typography
3. Helpers
4. Preloader
5. Go up button
6. Header and navigation
7. Hero Section
8. About us
9. Services
10. Fun facts
11. Projects
12. Pricing
13. Testimonial
14. CTA
15. Team
16. Video Banner
17. Shop
18. Marquee
19. Blog
20. Footer

Main Style file-> assets/css/main.css 
*/

/* General styles */
:root {
  --theme-2: #3fb58e;
  /* --theme-2: #000080; */
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Poppins", sans-serif;
  margin: 0px;
  padding: 0;
  color: var(--header);
  transition: all 0.4s ease-in-out;
  font-weight: 600;
}

/* Header and navigation */

.header-3 {
  padding: 0;
}

.header-logo img {
  width: 125px;
}

.header-main .main-menu ul li {
  margin-inline-end: 30px;
}

.header-main .main-menu ul li a {
  font-size: 15px;
}

.about-wrapper-3 .about-image-items-2 .private-sector-investment {
  background-color: var(--border2);
  padding: 30px;
  margin-top: 20px;
}

.about-wrapper-3 .about-image-items-2 .adaptation-efforts {
  background-color: var(--theme);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-wrapper-3 .about-image-items-2 .about-image {
  height: auto;
}

.hero-1 .hero-content h1 {
  font-size: 55px;
  margin-bottom: 20px;
}

.hero-1 .hero-content h5 {
  line-height: 1.5;
}

.mt-char-animation {
  font-size: 32px;
}

.stats-section {
  background-color: var(--theme-2);
  color: #ffffff;
}

.stats-section__header {
  color: #ffffff;
}

.statistics {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.statistic {
  background-color: #ffffff;
  border-radius: 4px;
  padding: 2rem 3rem;
  width: 24%;
}

.theme-btn {
  border-radius: 4px;
}

.support-promo-box {
  border-radius: 10px;
}

.promo-bg.bg-cover {
  border-radius: 10px 10px 0 0;
}

.box-1 {
  background: #fee055;
}

.promo-wrapper .support-promo-box.box-2 .promo-details h3,
.promo-wrapper .support-promo-box.box-3 .promo-details h3 {
  color: var(--white);
}

.promo-wrapper .support-promo-box.box-1 .promo-details span {
  color: var(--black);
}

.box-2 {
  background: #3fb58e;
}

.box-3 {
  background: #262262;
}

@media only screen and (max-width: 1200px) {
  .statistic {
    width: 100%;
    margin-top: 1rem;
  }
}

.statistic__icon {
  font-size: 32px;
  color: var(--border2);
  font-weight: 100;
}

.statistic__number {
  color: var(--theme-2);
  font-weight: 100;
  font-size: 32px;
}

.statistic__header {
  font-weight: 100;
  font-size: 16px;
}

.donation-card-items .content .donation-btn {
  text-decoration: underline;
}

.entrepreneur-image {
  width: 100%;
}

.theme-btn:before {
  background-color: #299546;
}

.our-motivation {
  background-image: url("../images/why-kijani-investors.png");
  background-size: cover;
  background-repeat: no-repeat;
}

.why-kijani__body {
  line-height: 32px;
}

.why-kijani__item-icon {
  color: var(--theme-2);
  margin-right: 0.5rem;
}

/* Team */

.team-content a {
  font-size: 20px;
}

/* Why Kijani */
.mt-char-animation {
  font-size: 24px;
}

/* Stay Informed */
.stay-informed {
  background-image: url("../images/stay-informed-20.png");
  background-size: cover;
  background-repeat: no-repeat;
}

/* Personas */
.entrepreneur {
  background-image: url("../images/entrepreneur-20.png");
  background-size: cover;
  background-repeat: no-repeat;
}

.donor {
  background-image: url("../images/why-kijani-investors.png");
  background-size: cover;
  background-repeat: no-repeat;
}

.bg-cover.section-padding {
  padding: 120px 0;
}

.persona-title,
.persona-body h3 {
  font-size: 24px;
}

.persona-body h3:not(:first-child) {
  margin-top: 2rem;
}

.persona-description,
.persona-body p {
  font-size: 22px;
}

.persona-body p:not(:last-child) {
  margin-bottom: 3rem;
}

.section-title__faq {
  color: #212255;
}

.faq {
  background: #f8f8f8;
  border-radius: 4px;
}

.faq-title {
  margin-bottom: 14px;
}

.faq-description {
  font-size: 19px;
  color: #707173;
}

.section-title h2.section-title__faq {
  text-transform: none;
}

.faq-content.faq-content__persona {
  margin-right: 0;
}

.faq-content .accordion-item .accordion-header .accordion-button::after,
.faq-content
  .accordion-item
  .accordion-header
  .accordion-button:not(.collapsed)::after {
  background: #212255;
  color: white;
  font-weight: 300;
  line-height: normal;
}

.accordion-button::after {
  width: 20px;
  height: 20px;
  text-align: center;
}

.form-clt {
  position: relative;
  margin-bottom: 20px; /* Ensure there's enough space below each input for the error message */
}

.form-clt input,
.form-clt textarea {
  width: 100%;
  box-sizing: border-box; /* Includes padding and borders in the element's total width and height */
  border: 1px solid #ccc; /* Default border color */
  padding: 10px; /* Adds some padding inside the input boxes */
}

.form-clt.error input,
.form-clt.error textarea {
  border: 1px solid red; /* Highlights borders in red on error */
}

.error-message {
  color: red; /* Sets the text color of error messages to red */
  font-size: 0.85em; /* Sets a smaller font size for error messages */
  position: absolute; /* Positions the error message relative to .form-clt */
  bottom: -30px; /* Positions the message below the input field with more space */
  left: 0; /* Aligns the message to the left */
  width: 100%; /* Ensures the message spans the full width of the input field */
}

.alert-success {
  color: #fff; /* White text color */
  background-color: #28a745; /* Green background */
  border-color: #28a745; /* Green border, can be adjusted if needed */
  padding: 10px;
  border-radius: 5px; /* Rounded corners */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: adds shadow for a 'pop' effect */
  margin-top: 20px; /* Space above the alert */
  text-align: center; /* Center the text */
  font-size: 16px; /* Make the font a bit larger for readability */
}
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: #fff; /* Light background for the content */
  color: #333; /* Dark text for readability */
  border: 2px solid #28a745; /* Subtle green border */
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden; /* Ensures nothing leaks outside the border */
}

.modal-header {
  padding: 10px 20px; /* Reduced padding for a thinner header strip */
  background: #007bff; /* Vibrant blue background */
  color: #fff; /* White text for contrast */
  display: flex;
  justify-content: space-between; /* Ensures space between title and close button */
  align-items: center; /* Vertically centers the content */
}

.modal-body {
  padding: 20px;
  line-height: 1.5; /* Improved line spacing for readability */
}

.close-btn {
  cursor: pointer;
  color: #fff; /* White color for visibility on the blue background */
  font-size: 24px;
  margin-left: auto; /* Pushes the close button to the right */
}

.modal-footer {
  padding: 10px 20px; /* Consistent padding with the header */
  background: #28a745; /* Green footer */
  text-align: center; /* Center the button text */
}

.modal-footer button {
  border: none;
  padding: 10px 20px;
  background-color: #fff; /* Contrasting white button */
  color: #28a745; /* Text color matches the footer */
  border-radius: 5px;
  cursor: pointer;
}

.about-statistics-text {
  text-transform: none;
}

.counter-wrapper .counter-items p::before {
  content: "";
}

.counter-wrapper .counter-items p {
  max-width: 20vw;
  padding-left: 0;
}

.faq-image-items-2 .faq-image-3 img {
  width: 215px;
  height: 220px;
}

.event-card-items .event-image img {
  max-width: 285px;
}

@media (min-width: 1400px) {
  .event-content {
    max-width: 70%;
  }
}