/* =========================================================
   HOME PAGE  (templates/website/index.html  ->  /)
   Top video banner, "Urgent Causes" cards (Rebuild Her Home +
   Educational Kit), "Our Homes" cards, birthday section.
   ========================================================= */

  @media only screen and (max-width: 767px) {
    .tf-slideshow .wrap-slider {
      height: 190px;
    }

    .our-homes-mobile-grid {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 10px;
    }

    .our-homes-mobile-grid > div {
      width: calc(50% - 5px) !important;
      max-width: calc(50% - 5px) !important;
      flex: 0 0 calc(50% - 5px) !important;
    }

    .our-homes-mobile-grid .same-size-card-img {
      height: 110px;
    }

    .our-homes-mobile-grid .content .title {
      font-size: 14px;
      line-height: 1.25;
    }

    .our-homes-mobile-grid .desc,
    .box-title .sub-desc.text-secondary {
      display: none !important;
    }

    .our-homes-mobile-grid .box-btn-slider .tf-btn {
      padding: 6px 12px;
    }

    .our-homes-mobile-grid .box-btn-slider .tf-btn .text {
      font-size: 12px;
    }

    .flat-with-text-lookbook-v2.wrap-lookbook-hover {
      display: flex;
      flex-direction: column;
    }

    .flat-with-text-lookbook-v2.wrap-lookbook-hover .banner-img {
      order: 1;
    }

    .flat-with-text-lookbook-v2.wrap-lookbook-hover .lookbook-content {
      order: 2;
    }

    .flat-with-text-lookbook-v2.wrap-lookbook-hover .banner-img video {
      width: 100%;
      height: auto;
      display: block;
    }

    .mobile-video-first-wrap {
      display: flex;
      flex-direction: column;
    }

    .mobile-video-first-wrap .mobile-order-video {
      order: 1;
    }

    .mobile-video-first-wrap .mobile-order-cards {
      order: 2;
    }
  }

  .same-size-card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
  }

  .mobile-video-first-wrap {
    display: block;
  }

  .about-read-content {
    max-height: 135px;
    overflow: hidden;
    transition: max-height 0.6s ease;
    position: relative;
  }

  .about-read-content::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40px;
    pointer-events: none;
  }

  .about-read-content.show {
    max-height: 1000px;
  }

  .about-read-content.show::after {
    display: none;
  }

  .widget-content-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .about-read-btns {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 15px;
    padding: 0;
    border: none;
    background: none;
    color: #0d6efd;
    font-weight: 600;
    cursor: pointer;
  }


/* ---------- Urgent Causes cards ---------- */

.static-home-card {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  border: 5px solid #4699eb;
  box-shadow: 0 8px 24px rgba(32, 148, 249, 0.23);
}

.same-size-static-card-img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

.static-home-card .content {
  padding: 0px 30px 30px;
  text-align: center;
}

.static-home-card .content .title {
  margin: 0 0 12px;
  font-size: 28px;
  line-height: 1.3;
}

.static-home-card .content .title a {
  color: #222;
  text-decoration: none;
}



.static-home-card .content .desc {
  max-width: 650px;
  margin: 0 auto 10px;
  color: #777;
  line-height: 1.6;
  font-size: 15px;
}

.static-home-card .box-btn-slider {
  margin-top: 0;
  margin-bottom: 10px;
}

.static-home-card .box-btn-slider .tf-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 30px;
}

/* Urgent Causes: two cards 50:50, each as wide as two "Our Homes" cards */
.urgent-causes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.urgent-causes-grid .static-home-card {
  max-width: none;
  display: flex;
  flex-direction: column;
}

/* Keep both buttons on one line even when one title wraps */
.urgent-causes-grid .static-home-card .content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.urgent-causes-grid .static-home-card .box-btn-slider {
  margin-top: auto;
}

/* Bold card titles ("Rebuild Her Home", "Educational Kit ...") on every screen */
.urgent-causes-grid .static-home-card .content .title,
.urgent-causes-grid .static-home-card .content .title a {
  font-weight: 700;           /* was 500 (medium) */
}

/* The theme sizes .img-style and its img at height:100%; pin them so both
   card images get the same fixed height whatever the title length. */
.urgent-causes-grid .static-home-card .img-style {
  height: auto;
  flex: none;
}

/* Both Urgent Causes pictures: a fixed 2:1 box on EVERY screen (about 620x310
   on a laptop). A fixed height made the box change shape with the screen width,
   so no poster could fit it. Card posters should be 2:1 (e.g. 1440x720). */
.urgent-causes-grid .static-home-card .same-size-static-card-img {
  height: auto;
  aspect-ratio: 2 / 1;
}

/* Educational Kit card: its banner (3200x1338) is a bit wider than 2:1, so it
   fills the box and the extra width is trimmed from the RIGHT edge only (part
   of the girl's photo) - the text, logo, button and price tag start on the
   left and stay whole. A 2:1 banner would fit with nothing trimmed. */
.urgent-causes-grid .static-home-card img.education-kit-banner-img {
  object-fit: cover;
  object-position: left center;
}

.section-title-wrap {
  text-align: center;
  margin-bottom: 24px;
}

.section-title-wrap h3 {
  margin: 0;
  padding: 0;
  font-size: 35px;
  margin-top :59px;
}


/* Mobile */
@media only screen and (max-width: 767px) {

  .section-title-wrap h3 {
    font-size: 22px;
    margin-top :38px;
  }

  .container {
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 0px;
    padding-top:0px;

  }


  .static-home-card {
    border-radius: 10px;
  }

  .same-size-static-card-img {
    height: 220px;
  }

  .static-home-card .content {
    padding: 0px 16px 10px;
  }

  .static-home-card .content .title {
    font-size: 20px;
    

  }

  .static-home-card .content .desc {
    font-size: 15px;
    line-height: 1.5;
  }
  
  .space{
    padding:20px;
  }

  /* Same compact look as the two-per-row "Our Homes" cards */
  .urgent-causes-grid {
    gap: 10px;
  }

  .urgent-causes-grid .static-home-card {
    border-width: 3px;
  }

  .urgent-causes-grid .static-home-card .content {
    padding: 0 6px 8px;
  }

  .urgent-causes-grid .static-home-card .content .title {
    font-size: 14px;
    line-height: 1.25;
  }

  .urgent-causes-grid .static-home-card .content .desc {
    display: none;
  }

  .urgent-causes-grid .static-home-card .box-btn-slider .tf-btn {
    padding: 6px 12px;
  }

  .urgent-causes-grid .static-home-card .box-btn-slider .tf-btn .text {
    font-size: 12px;
  }

  /* Compact text area on phones too */
  .urgent-causes-grid .static-home-card {
    gap: 8px;                 /* picture -> title (was 20px) */
  }

  .urgent-causes-grid .static-home-card .content .title {
    margin: 0;                /* was 12px below the title */
  }

  .urgent-causes-grid .static-home-card .box-btn-slider {
    margin-bottom: 0;         /* was 10px under the button */
  }

}

@media (min-width: 768px) and (max-width: 1199px) {
  .urgent-causes-grid {
    gap: 15px;
  }

}

@media (min-width: 768px) {
  .collection-default.style-1 .content {
    padding: 20px 15px 20px;
  }
  .static-home-card .content .desc {
    max-width: 646px;
    margin: 0 auto 1px;
    color: #777;
    line-height: 1.6;
    font-size: 17px;
  }
}

/* ---------- Urgent Causes cards: compact text area (laptop / tablet) ----------
   Smaller title, text and button and less empty space under the pictures,
   so the section is shorter and quicker to scroll past.
   Old values are in the comments if you want to go back. */
@media (min-width: 768px) {
  .urgent-causes-grid .static-home-card {
    gap: 14px;                /* picture -> title (was 20px) */
  }

  .urgent-causes-grid .static-home-card .content {
    gap: 10px;                /* between title / text / button (was 12px) */
    padding: 0 24px 18px;     /* space under the button (was 30px) */
  }

  .urgent-causes-grid .static-home-card .content .title {
    font-size: 22px;          /* was 28px */
    margin: 0;                /* was 12px below the title */
  }

  .urgent-causes-grid .static-home-card .content .desc {
    font-size: 15px;          /* was 17px */
    line-height: 1.5;         /* was 1.6 */
    margin: 0 auto;
  }

  .urgent-causes-grid .static-home-card .box-btn-slider {
    margin-bottom: 0;         /* was 10px under the button */
  }

  .urgent-causes-grid .static-home-card .box-btn-slider .tf-btn {
    padding: 9px 24px;        /* button 52px tall -> about 42px (was 12px 28px) */
  }
}