/* Find this existing rule for the main card */
.events-wrapper .card,
.services-wrapper .card,
.campaign-wrapper .card {
    height: auto;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
    /* Keep existing transition or update for zoom effect */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Added box-shadow for a nicer hover */
    
    position: relative;
    overflow: hidden;
    
    /* === ADD THIS FOR ZOOM IN FROM CENTER === */
    transform-origin: top center; 
}


/* ...And CHANGE it back to this */
.events-wrapper .card:hover,
.services-wrapper .card:hover,
.campaign-wrapper .card:hover {
    transform: translateY(-10px); /* This lifts the card up */
}
.events-wrapper .card:hover,
.services-wrapper .card:hover,
.campaign-wrapper .card:hover {
    transform: translateY(-10px); /* This lifts the card up */
 box-shadow: 0 15px 20px rgba(0, 0, 0, 0.1);
}

/* Find this existing rule for the card image */
.card .card-image {
    position: relative;
    /* === ADD A TRANSITION FOR SMOOTH MOVEMENT === */
    transition: transform 0.3s ease; 
}
.card .card-video  {
   position: relative;
}

/* === NEW STYLES FOR EVENT DATE SCOPE === */
.card-event-scope {
display: flex;
    flex-direction: column;     /* Stack rows vertically */
justify-content: flex-start;
gap: 5px;                 /* Space between the two rows */
font-size: 0.85rem;
color: rgba(0, 0, 0, 0.75); 
margin-bottom: 15px; 
}
/* ADD THIS NEW RULE */
.scope-row {
    display: flex;
    align-items: center;
    gap: 10px; /* This adds the space between the icon and the text */
}

/* Find this existing rule */
.card .card-image img {
    width: 100%;
    /* === REMOVE THIS LINE === */
    /* padding: 10px; */ 
    
    /* === REMOVE THIS LINE === */
    /* border-radius: 22px; */ 

aspect-ratio: 16/9; /* This will make the image taller */
    object-fit: cover;
}

.card .card-video iframe {
    width: 100%;
    height: 315px;    
    border-radius: 22px;
    display: block; /* ensures no extra spacing */
}


.card .card-image .card-tag {
   position: absolute;
   left:25px;
   top: 25px;
   color: #F4B400;
   border-radius:30px;
   font-weight: 600;
   font-size:0.75rem;
   padding:5px 15px;
   text-transform:uppercase;
   letter-spacing: 0.5px;
   background:rgba(255,255,255,0.9);
}

/* Find this existing rule for the card content */
.card .card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 10px 25px 25px;

    position: relative;
    z-index: 1;
    /* === ADD A TRANSITION FOR SMOOTH MOVEMENT === */
    transition: transform 0.3s ease; 
}

/* Find this existing rule for the pseudo-element */
.card .card-content::before {
    content: "";
    position: absolute;
    top: -20px; 
    left: 0;
    width: 100%;
    height: 20px;
    background: #fff;
    border-top-left-radius: 20px; 
    border-top-right-radius: 20px;
    
    /* === ADD A TRANSITION FOR SMOOTH MOVEMENT === */
    transition: top 0.3s ease; /* Transition for the 'opening' effect */
}

.card .card-content .card-title {
    color: #111;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 15px;
}

.card-title-campaign {
    color: #111;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    margin-bottom: 15px;
}

/* === NEW STYLES FOR PROGRESS BAR === */

/* This styles the specific row for the progress bar */
.card-event-scope .progress-bar-row {
    gap: 12px; /* Space between the bar and the text */
    width: 100%;
    align-items: center; /* Vertically centers the text with the bar */
}

/* This is the outer "track" of the bar */
.card-progress-bar-container {
    flex-grow: 1; /* Makes the bar take up all available space */
    height: 12px; /* Bar thickness */
    background-color: #eee; /* The "empty" track color */
    border-radius: 6px;
    overflow: hidden;
}

/* This is the inner "fill" of the bar */
.card-progress-bar-fill {
    height: 100%;
    border-radius: 6px;
    /* Width and background-color are set inline by PHP */
    transition: width 0.6s ease-out; /* Smooth fill animation */
}

/* This styles the "80%" text */
.progress-percent-text {
    font-weight: 700;
    font-size: 0.9rem;
    color: #333;
    flex-shrink: 0; /* Stops the text from shrinking */
}


.card-campaign {
  display: flex;
  align-items: center;
}

.card .card-content .card-text {
    color: #747474;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

.card .card-content .card-footer {
    display:flex;
    align-items: center;
    padding-top:15px;
    margin-top:auto;
    justify-content: flex-end; /* Changed from 'space-between' */
    border-top: 1px solid rgba(0,0,0, 0.08);
}

.services-section .card-footer {
  display: flex;
  justify-content: flex-end !important;
  padding-top: 10px; /* optional */
  margin-top: 10px;
}



/*
.card .card-event-percentage {
    width: 35px;
    height: 35px;
    background-color: #6366f1;  You can change the color 
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-right: 10px;
} */

/* .card .card-event .card-event-info {
    display: flex;
    flex-direction: column;
} */

.card .card-campaign .card-campaign-info {
    display: flex;
    flex-direction: column;
}



/* .card .card-event .card-event-date {
    font-size: 0.875rem;
    font-weight: 600;
    color: #202020;
} */

.card .card-campaign .card-target-fund {
    font-size: 0.875rem;
    font-weight: 600;
    color: #202020;
}

.card .card-campaign .card-raised-fund {
    font-size: 0.875rem;
    font-weight: 600;
    color: #202020;
}

/* .card .card-event .card-event-time {
    font-size: 0.8rem;
    color: #7a7a7a;
} */

/* === NEW STYLES FOR EVENT DATE SCOPE === */


/* This styles the icon container */
.card-event-scope .event-icon {
    /* bg-primary bg-opacity-25 text-primary */
    background-color: rgba(178, 34, 34, 0.2); /* Using your B22222 color */
    color: #B22222; 
    
    padding: 6px 8px; /* px-2 py-1 */
    border-radius: 6px; /* rounded-3 */
    font-size: 0.8rem;
    line-height: 1; /* Ensures icon is centered */
}
/* This styles the text next to the icon */
.card-event-scope .event-date-text {
    font-weight: 500;
}

.card .card-footer .card-button {
    color: #fff;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 0.81rem;
    font-weight: 600;
    text-decoration: none;
    background:  linear-gradient(to bottom, #B22222, #7A0000);
    transition: all 0.3s ease;
}

.card .card-footer .card-button:hover {
   transform: translateY(-3px);
   box-shadow: 0 8px 15px rgba(241, 151, 99, 0.3)
}

.events-wrapper .swiper-pagination-bullet,
.campaign-wrapper .swiper-pagination-bullet  {
    height: 15px;
    width: 15px;
    overflow: hidden;
    opacity: 1;
    background: #ffad5c!important;
}

/* Target your specific class */
.swiper-pagination.campaign {
    /* Sets the color of the active bullet */
    --swiper-pagination-color: #ffad5c!important;
}


/* Custom Next Button */
.custom-next,
.events-next,
.services-next,
.campaign-next
{
  color: #fff !important;
  right: 1px !important;
  top: 50% !important;
  height: 50px !important;
  width: 50px !important;
  transition: all 0.3s ease;
  border-radius: 50%;
  position: absolute !important;
  background:  linear-gradient(to right, #B22222, #7A0000);
  cursor: pointer !important;
}


/* Custom Prev Button */
.custom-prev,
.services-prev,
.events-prev,
.campaign-prev{
  color: #fff !important;
  left: 10px !important;
  height: 50px !important;
  width: 50px !important;
  transition: all 0.3s ease;
  border-radius: 50%;
  position: absolute !important;
  background: linear-gradient(to left, #B22222, #7A0000);
  cursor: pointer !important;
}

.custom-next::before,
.custom-next::after,
.custom-prev::before,
.custom-prev::after,
.events-next::before,
.events-next::after,
.events-prev::before,
.events-prev::after,
.services-next::before,
.services-next::after,
.services-prev::before,
.services-prev::after,
.campaign-next::before,
.campaign-next::after,
.campaign-prev::before,
.campaign-prev::after
{
    font-size: 20px !important; 
    color: #fff
}

.custom-prev:hover,
.events-prev:hover,
.services-prev:hover,
.campaign-prev:hover,
.custom-next:hover,
.events-next:hover,
.services-next:hover,
.campaign-next:hover
 {
   transform: translateY(-3px);
   box-shadow: 0 8px 15px rgba(241, 151, 99, 0.3)}



.card-title span {
  color: #F4B400;
}


@media screen and (max-width: 768px) and (max-width: 1024px){
   
    .custom-prev,
    .events-prev,
    .services-prev,
    .campaign-prev,
    .events-next,
    .custom-next,
    .campaign-next,
    .services-next
      {
    visibility: hidden;
    }

  .swiper-pagination-bullet {
    visibility: visible;
  }
}