/* =======================
   Variables
========================= */
:root {
    /* Theme Colors */
    --primary-color: #194669; /* Main theme color */
    --secondary-color: #AE2320; /* Secondary color */
    --background-color: #f8f9fa; /* Light background */
    --dark-color: #343a40; /* Dark color */
    --text-color: #435061; /* Default text color */
    --text-color-light: #6c757d;
    --white-color: #ffffff; /* White */
    --orange-color: #EF7F1B;
    --error: #f64e60;

    /* Font Sizes */
    --font-size-base: 16px;
    --font-size-large: 1.25rem;
    --font-size-small: 0.875rem;

    /* Spacing */
    --spacing-small: 0.5rem;
    --spacing-medium: 1rem;
    --spacing-large: 2rem;

    /* Border Radius */
    --border-radius: 5px;

    /* Shadows */
    --box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* =======================
   Global Styles
========================= */
/* body {
    font-family: Arial, sans-serif;
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--background-color);
    margin: 0;
    padding: 0;
} */

/* Typography */
.font-bold {
    font-weight: 700;
}

.font-semibold {
    font-weight: 600;
}

.font-medium {
    font-weight: 500;
}

.font-regular {
    font-weight: 400;
}

.font-light {
    font-weight: 300;
}

.text-primary {
    color: var(--primary-color);
}

.text-secondary {
    color: var(--secondary-color) !important;
}

.text-white {
    color: var(--white-color);
}

.text-dark {
    color: var(--dark-color);
}

/* Background Colors */
.um-bg-primary {
    background-color: var(--primary-color);
    color: var(--white-color);
}

.um-bg-secondary {
    background-color: var(--secondary-color);
    color: var(--white-color);
}

.um-bg-light {
    background-color: var(--background-color);
    color: var(--dark-color);
}

.um-bg-dark {
    background-color: var(--dark-color);
    color: var(--white-color);
}

.um-bg-orange {
    background-color: var(--orange-color);
    color: var(--white-color);
}



body {
    font-family: 'Kumbh Sans', sans-serif;
    font-size: 16px; /* Default font size */
    color: #212529; /* Default text color */
    line-height: 1.6; /* Line height for readability */
    padding-top: 75px;
}

section {
    padding: 75px 0; /* Top and bottom padding for each section */
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Kumbh Sans', sans-serif;
    font-weight: 600; /* Bold for headings */
}

/* Paragraphs */
p {
    font-family: 'Kumbh Sans', sans-serif;
    font-weight: 400; /* Regular weight for paragraphs */
}

/* Custom Font Size Classes */
.fn-xxs {
    font-size: 0.625rem; /* 10px */
}

.fn-xs {
    font-size: 0.75rem; /* 12px */
}

.fn-sm {
    font-size: 0.875rem; /* 14px */
}

.fn-md {
    font-size: 1rem; /* 16px */
}

.fn-lg {
    font-size: 1.125rem; /* 18px */
}

.fn-xl {
    font-size: 1.25rem; /* 20px */
}

.fn-xxl {
    font-size: 1.5rem; /* 24px */
}

/* Primary Colors */
.tc-primary {
    color: var(--primary-color); /* #194669 */
}

.tc-secondary {
    color: var(--secondary-color); /* #AE2320 */
}

.tc-dark {
    color: var(--dark-color); /* #343a40 */
}

.tc-light {
    color: var(--text-color-light); /* #6c757d */
}

/* Text and Background Colors */
.tc-default {
    color: var(--text-color); /* #435061 */
}

.tc-white {
    color: var(--white-color); /* #ffffff */
}

.tc-orange {
    color: var(--orange-color); /* #EF7F1B */
}

.round-10{
    border-radius: 10px;
}

.slider {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 300%; /* 3 slides */
}

.slide {
    width: 100%;
    flex-shrink: 0;
    position: relative;
}

.slide img {
    width: 100%;
    height: auto;
    display: block;
}

.caption {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: white;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-radius: 5px;
}


/* Sub-title */
.sub-title {
    font-weight: 400;
    font-size: 1rem;
    color: var(--text-color-light);
    margin-bottom: 1rem; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
}

/* Main Title */
.main-title {
    font-weight: 500; 
    font-size: 1.25rem; 
    color: var(--text-color); 
    margin-bottom: 3rem; 
    line-height: 1.5; 
}



/* theme */

.mw-65 {
    max-width: 650px;
}

.um-btn-primary {
    background: var(--primary-color);
    color: var(--white-color);
}

.um-btn-secondary {
    background: var(--secondary-color);
    color: var(--white-color);
}

.um-btn-outline-primary{
    border-color: var(--primary-color);
}

.btn:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--primary-color);
}

.btn {
    text-transform: uppercase;
    font-weight: 500;
    padding-left: 20px;
    padding-right: 20px;
    letter-spacing: 1px;
    border-radius: 10px;
}

.card-text-body {
    font-size: 14px;
}


.progress-container {
    position: relative;
    width: 100%;
    height: 8px; /* Thickness of the bar */
    background-color: #e0e0e0; /* Light gray background */
    border-radius: 4px;
    overflow: visible;
    margin: 0 auto;
    /* max-width: 600px; Adjust the width of the progress bar */
}

.progress-bar {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible;
    text-align: right;
    background-color: #e0e0e0;
}

.progress-fill {
    position: relative;
    height: 100%;
    background-color: var(--secondary-color);
    border-radius: 4px 0 0 4px;
    transition: width 0.3s ease-in-out;
}

.progress-label {
    /* position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%); */
    background-color: var(--secondary-color);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 400;
    padding: 0.25rem 1.0rem;
    border-radius: 4px;
}

/* Statistics */
.stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 600px;
    margin: 1rem auto 0;
}

.stat-item {
    text-align: center;
}

.stat-title {
    font-weight: 600;
    font-size: 12px;
    color: var(--text-color);
    margin-bottom: 0;
}

.stat-value {
    font-weight: 600;
    font-size: 18px;
    color: var(--secondary-color);
}

.testimonial-main {
    box-shadow: 0px 0px 10px 5px #eeeeee;
    border-radius: 10px;
}

.testimonial-text {
     font-size: 14px;
}

.carousel-indicators{
    bottom: -70px;
}

.carousel-indicators [data-bs-target]  {
    background-color: var(--secondary-color);
}

#stories .carousel-control-next,#stories .carousel-control-prev {
    top: unset;
    bottom: 36px;
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    background: aquamarine;
}

.testimonial-content {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
    padding-right: 20px;
    padding-left: 20px;
}

/* General Section Styling */
.testimonial-section {
    padding: 2rem 0;
    background-color: #f8f9fa; /* Light gray background */
}

/* Testimonial Card */
.testimonial-card {
    display: flex;
    align-items: stretch; /* Ensure items stretch equally */
    background: #fff; /* White background */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    border-radius: 10px; /* Rounded corners */
    overflow: hidden; /* Ensure content stays within bounds */
    height: 100%; /* Set height dynamically based on image div */
}

/* Image Section */
.testimonial-image {
    /* flex: 0 0 40%; Image takes up 40% of the width */
    display: flex;
    align-items: stretch;
}



.sponsor {
    /* background: #18466991; */

    background-image: url('../images/sponsors.png'); /* Replace with your image URL */
    background-size: cover; /* Ensures the image covers the entire section */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    display: flex;
    align-items: center; /* Vertically center the content */
    justify-content: center; /* Horizontally center the content */
    color: #fff; /* White text color for contrast */
    text-align: center;
    position: relative;
}

.sponsor::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #184669db; /* Black overlay with 50% opacity */
    z-index: 1; /* Ensures overlay appears below the text */
}

.nav-link {
    font-size: 16px;
    font-weight: 600;
}

.swiper-slide {
    height: auto;
  }

/* hero */
.hero-bg {
    height: 100%; 
   
    background-size: cover;
    background-position: center; 
}

/* Card Styling */
.hero-card {
    background: #fff; /* White card background */
    border-radius: 10px; /* Rounded corners */
    padding: 2rem;
    width: 100%;
    max-width: 600px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.hero-title {
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.4;
    color: #333;
}

.hero-text {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
}

/* Hero Stats */
.hero-stat-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-color);
}

.hero-stat-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--secondary-color); /* Primary theme color */
}


.sub-page-header{
    padding-top: 20px;
    padding-bottom: 20px;
}

.sub-page-header p {
    margin-bottom: 0;
}

.my-15 {
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
}

button.btn.category-btn {
    margin-top: 5px;
    padding: 5px 10px;
    margin-right: 5px;
}
button.btn.category-btn.active {
    background: var(--secondary-color);
    color: var(--white-color);
}


/* Full Container */
.login-container {
    display: flex;
}

/* Left Section */
.left-section {
    /* background-color: ; Primary color */
    /* background-image: url('https://via.placeholder.com/600x400'); Background image */
    background-size: cover;
    background-position: center;
}

/* Right Section */
.right-section {
    flex: 1;
    background-color: #ffffff;
    padding: 3rem;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
}

/* .profile-image {
    width: 150px;
    height: 150px;
    object-fit: cover;
    cursor: pointer;
    border: 1px solid #ddd;
}

.cropper-container {
    max-height: 400px;
    overflow: hidden;
} */

#profileImage {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f8f9fa; /* Light background color */
  }

  #profileImage img {
    object-fit: cover; /* Ensures the image fills the round container */
    width: 100%;
    height: 100%;
  }


  .form-control, .form-select{
    padding: 0.575rem 0.75rem;
    border-radius: 10px;
    /* background: #fbfbfb; */
  }


  /* Adjust individual image styling */
  .custom-file-container__image-multi-preview {
    width: 120px !important;
    height: 120px !important;
    object-fit: cover;
  }

  .custom-file-container__custom-file__custom-file-control{
    height: auto !important;
    border-radius: 10px !important;
  }

  .custom-file-container__custom-file__custom-file-control__button{
    height: 100% !important;
  }

  .custom-file-container__image-preview{
    margin-bottom: 0px !important;
  }

  .custom-img-fit{
    background-size: auto 275px !important;
  }


  .bg-body-secondary{
    background: #e9ecef;
  }

    .form-control.error, .nice-select.error, .form-select.error, .custom-file-container__image-preview.error {
        border-style: dashed !important;
        border-color: var(--error) !important;
    }

    .error.text-danger {
        margin-left: 10px;
        margin-left: 5px;
        margin-top: 5px;
        font-size: 12px;
    }

    .hover-dark:hover{
        color: var(--secondary-color);

    }

    .swiper-container .swiper-zoom-container>img {
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center;
    }

    .accordion-button:not(.collapsed) {
        color: #ffffff;
        background-color: var(--primary-color);
    }

    .accordion-body {
        background: #c8c8c8;
    }

    .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
        border: 0px;
        background: #f8f9fa;
        padding-top: 20px;  
    }

    .dropdown-item.active, .dropdown-item:active {
        background-color: var(--primary-color);
    }

    .testimonial-image {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat; 
        min-height: 300px;
    }
    
    .campaign-image {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat; /* Prevent the image from repeating */
        min-height: 250px;
    }

    .page-item.active .page-link{
        background-color: var(--primary-color);
        border-color: var(--primary-color);
    }

    .pass-eye{
        right: 10px;
        top: 10px;
    }

    .beneficiary-list {
        max-height: 500px; /* Set maximum height */
        overflow-y: auto; /* Enable vertical scrolling */
        padding-right: 5px; /* Prevent content from cutting off */
    }