/* 
 * Giving Back Page Styles
 * Extracted from templates/giving_Back/giving_back.html
 * Date: 2026-01-13
 */

/* ========================================
   CSS CUSTOM PROPERTIES
   ======================================== */
:root {
  --pink: #E50695;
  --black: #000;
  --text: #40434E;
  --text2: #454545;
  --ink: #1C1C1C;
  --divider: #E5E5E5;
  --bg: #F4F5F7;
}

/* ========================================
   BASE STYLES
   ======================================== */
* {
  box-sizing: border-box;
  font-family: Comfortaa, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ========================================
   PAGE LAYOUT
   ======================================== */
#giving-back {
  padding-bottom: 40px;
  overflow: hidden;
}

#main-cont-div {
  margin-top: 150px;
}

#main-cont-div-mobile {
  display: none;
  margin-top: 100px;
}

.mobile-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 90%;
}


/* ========================================
   LABEL + PINK LINE PATTERN
   ======================================== */
.page-label {
  gap: 14px;
  margin-left: 112px;
}

.giving-back-text {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  margin: 0;
}

.rectangle-2191 {
  width: 183px;
  height: 4px;
  border-radius: 100px;
  background: var(--pink);
}

/* ========================================
   HERO HEADER
   ======================================== */
.page-header-text {
  width: 60%;
  margin-top: 18px;
  margin-left: 112px;
  color: var(--black);
}

.page-header-text h1 {
  font-size: 60px;
  line-height: 1.2;
  letter-spacing: -2.4px;
  margin: 0;
}

/* ========================================
   INTRO COPY
   ======================================== */
.giving-back-copy {
  width: 69%;
  margin-top: 47px;
  margin-left: 112px;
}

.copy-paragraph {
  font-size: 18px;
  line-height: 2;
  color: var(--text2);
  font-weight: 700;
}

/* ========================================
   BANNER SECTION
   ======================================== */
.section-banner-style {
  margin-top: 62px;
  justify-content: center;
  display: flex;
}

.banner-cont {
  width: 90%;
}

.giving-back-banner-img {
  border-radius: 55px;
}

/* ========================================
   ALTERNATING CONTENT SECTIONS
   ======================================== */
.toys-donations-cont {
  margin-top: 116px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.flex-row {
  display: flex;
  gap: 24px;
  align-items: center;
}

.img-align {
  justify-content: center;
  gap: 9%;
}

.col-img,
.col-text {}

/* ========================================
   IMAGE STYLES WITH HOVER EFFECTS
   ======================================== */
.toys-donation-image {
  border-radius: 55px;
  transition: transform .5s;
}

.adopt-school-image {
  border-radius: 55px;
  transition: transform .5s;
}

.community-relations-image {
  border-radius: 55px;
  transition: transform .5s;
}

.toys-donation-image:hover,
.adopt-school-image:hover,
.community-relations-image:hover {
  transform: scale(1.03);
}

/* ========================================
   TEXT BLOCKS
   ======================================== */
.sections-sub-header {
  font-size: 50px;
  max-width: 500px;
  line-height: 1.2;
  letter-spacing: -2.4px;
  color: var(--ink);
  margin: 72px 0 16px;
}

.sections-paragraph {
  width: 402px;
  font-size: 18px;
  line-height: 2;
  color: var(--text);
  font-weight: 700;
}

.sections-paragraph a {
  color: #1D52E1;
  text-decoration: underline;
}

.sections-paragraph a:hover {
  text-decoration: none;
}

/* ========================================
   MOBILE STYLES
   ======================================== */
.page-label-mobile {
  display: flex;
  gap: 14px;
  align-items: center;
}

.page-label-mobile span {
  font-size: 16px;
  font-weight: 700;
}

.rectangle-2191-mobile {
  background: var(--pink);
  border-radius: 100px;
  width: 96px;
  height: 4px;
}

.page-header-text-mobile {
  margin-top: 27px;
}

.sections-sub-header-mobile {
  font-size: 38px;
  line-height: 1.37;
  letter-spacing: -1.52px;
  color: var(--ink);
  margin: 0 0 8px;
}

.giving-back-copy-mobile {
  margin-top: 27px;
}

.copy-paragraph-mobile {
  font-size: 18px;
  line-height: 2;
  color: var(--text2);
  font-weight: 700;
  width: 90%;
}

#section-banner-style-mobile {
  margin-top: 48px;
}

.giving-back-banner-img-mobile {
  border-radius: 30px;
}

#section-toys-donation-style-mobile {
  margin-top: 110px;
}

.toys-donation-image-mobile {
  border-radius: 30px;
}

#toys-donation-content-block-mobile {
  margin-top: 35px;
}

.sections-paragraph-mobile {
  font-size: 16px;
  line-height: 1.63;
  color: var(--text);
  font-weight: 700;
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* Desktop Large - 1440px and below */
@media (max-width: 1439px) {
  .page-header-text h1 {
    font-size: 50px;
  }
}

/* Tablet - 1024px and below (Tailwind lg) */
@media (max-width: 1024px) {
  .page-label {
    margin-left: 57px;
  }

  .page-header-text {
    width: 90%;
    margin-left: 57px;
  }

  .giving-back-copy {
    width: 90%;
    margin-left: 57px;
  }

  .sections-sub-header {
    font-size: 33px;
    margin-top: 28px;
  }

  .sections-paragraph {
    width: 387px;
  }
}

/* Tablet Small - 860px and below */
@media (max-width: 860px) {
  .sections-paragraph {
    width: 95%;
    font-size: 16px;
    line-height: 1.63;
  }
}

/* Mobile Switch - 800px and below */
@media (max-width: 925px) {
  #main-cont-div {
    display: none;
  }

  #main-cont-div-mobile {
    display: block;
  }
}

/* Mobile - 768px and below (Tailwind md) */
@media (max-width: 768px) {
  .page-label {
    margin-left: 43px;
  }

  .page-header-text {
    width: 90%;
    margin-left: 43px;
  }

  .giving-back-copy {
    width: 90%;
    margin-left: 43px;
  }

  .sections-sub-header {
    font-size: 26px;
  }
}