/*
######## INDEX ########

1. LOCAL FONTS
2. CUSTOM PROPERTIES (CSS VARIABLES)
  2A. color variables
  2B. font-family
  2C. font-weight
  2D. font-size
3. CSS RESET
4. TYPOGRAPHY
  4A. font color
  4B. font weight
  4C. font size
5. GENERAL STYLES
6. COMPONENTS
  6A. background colors
  6B. buttons
  6C. links
7. TEMPLATE STYLES
  7A. wide navigation
  7B. narrow navigation
  7C. event banner
  7D. footer
8. GROUPED BY PAGE
  8A. index.html
  8B. events.html
  8C. services.html
  8D. about.html
  8E. contact.html & success.html
  8F. donate.html
*/

/* 1. LOCAL FONTS */
@font-face {
    font-family: 'Inter';
    font-weight: 300;
    src: url(/fonts/Inter_18pt-Light.woff2) format('woff2'),
         url(/fonts/Inter_18pt-Light.woff) format('woff');
}

@font-face {
    font-family: 'Inter';
    font-weight: 400;
    src: url(/fonts/Inter_18pt-Regular.woff2) format('woff2'),
         url(/fonts/Inter_18pt-Regular.woff) format('woff');
}

@font-face {
    font-family: 'Inter';
    font-weight: 500;
    src: url(fonts/Inter_18pt-Medium.woff2) format('woff2'),
         url(fonts/Inter_18pt-Medium.woff) format('woff');
}

@font-face {
    font-family: 'Inter';
    font-weight: 500;
    font-style: italic;
    src: url(fonts/Inter_18pt-MediumItalic.woff2) format('woff2')
         url(fonts/Inter_18pt-MediumItalic.woff) format('woff');
}

:root {
    /* 2. CUSTOM PROPERTIES (CSS VARIABLES) */
    /* 2A. color variables */
    --clr-black: hsl(214, 50%, 14%);
    --clr-white: hsl(0, 0%, 100%);
    --clr-gray-200: hsl(0, 0%, 96%);
    --clr-gray-250: hsl(0, 0%, 94%);
    --clr-gray-300: hsl(0, 0%, 90%);
    --clr-gray-700: hsl(0, 0%, 20%);

    --clr-blue-300: hsl(216, 76%, 90%);
    --clr-blue-400: hsl(214, 49%, 55%);
    --clr-blue-450: hsl(214, 49%, 44%);
    --clr-blue-600: hsl(214, 64%, 30%);

    --clr-green-300: hsl(84, 36%, 52%);
    --clr-green-400: hsl(84, 42%, 42%);

    /* 2B. font-family variables */
    --ff-primary: 'Inter', sans-serif;

    /* 2C. font-weight variables */
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;

    /* 2D. font-size variables */
    --fz-100: 1rem;     /* 16 */
    --fz-200: 1.125rem; /* 18 */
    --fz-300: 1.25rem;  /* 20 */
    --fz-400: 1.375rem; /* 22 */
    --fz-500: 1.5rem;   /* 24 */
    --fz-600: 1.75rem;  /* 28 */
    --fz-700: 2.25rem;  /* 36 */
    --fz-800: 2.5rem;   /* 40 */
}

/* 3. CSS RESET */
/* https://piccalil.li/blog/a-modern-css-reset */
/* modified with Kevin Powell's suggestions */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin, padding, and font inheritance */
* {
  margin: 0;
  padding: 0;
  font: inherit;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

html,
body {
    height: 100%;
}

/* Set core body defaults */
body {
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture,
svg {
  max-width: 100%;
  display: block;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 4. TYPOGRAPHY */
/* 4A. font color */
.home-hero h1,
.home-hero p,
.home-services h2,
.home-services a,
.home-about h2,
.home-about p,
.home-about a,
.home-donate h2,
.home-donate p,
.events-gallery-card-text,
.events-gallery-card-text a,
.services-nav,
.services-nav a,
.services-women,
.services-men,
.services-men a,
.services-supportive,
.about-story,
.about-leadership,
.about-staff,
.about-title-vi h4,
.about-title-vi p,
.contact-page h1,
.contact-page p,
.contact-info a,
.contact-page address,
.contact-page label,
.donate-actions h1,
.donate-actions p,
.donate-scholarships h1,
.donate-scholarships h2 {
  color: var(--clr-black);
}

.event-banner,
footer,
.footer-contact a,
.footer-details-credit a,
.home-services-card,
.events-banner,
.services-women-offerings,
.services-women-offerings a,
.services-men-impact,
.services-supportive-cm,
.services-supportive-providers,
.donate-scholarships-card {
  color: var(--clr-white);
}

/* 4B. font weight */
.footer-connect p,
.footer-contact address span,
.home-hero h1,
.home-services h2,
.home-services-card h3,
.home-services-card h4,
.home-about h2,
.home-donate h2,
.events-form h1,
.events-gallery-card-text h2,
.services-nav h1,
.services-women h1,
.services-women-residence h3,
.services-women-offerings h3,
.services-women span,
.services-men h1,
.services-men-how h3,
.services-men-impact h3,
.services-men-impact span,
.services-supportive h1,
.about-story h1,
.about-leadership h1,
.about-leadership h3,
.about-leadership-card span,
.about-staff h1,
.about-staff h2,
.about-title-vi h4,
.contact-page h1,
.donate-actions h1,
.donate-scholarships h2,
.donate-scholarships-card h3 {
  font-weight: var(--fw-medium);
}

nav li a,
.event-banner,
.footer-contact address,
.footer-contact p,
.home-hero p,
.home-services a,
.home-services-card p,
.home-about p,
.home-about a,
.home-donate p,
.events-banner,
.events-sponsors h1,
.events-form h2,
.events-form p,
.events-gallery h1
.services-women h2,
.services-women-residence p,
.services-women-offerings a,
.services-men h2,
.services-men p,
.services-men a,
.services-supportive h2,
.about-story p,
.about-leadership h4,
.contact-page .contact-how-to,
.contact-page .contact-info-phone p,
p.venmo,
p.volunteer,
.donate-scholarships h1,
.donate-scholarships-card p {
  font-weight: var(--fw-regular);
}

.events-gallery-card-text p,
.footer-info {
  font-weight: var(--fw-light);
}

/* 4C. font size */
.home-hero h1,
.home-donate h2,
.services-nav h1,
.about-story h1,
.about-leadership h1,
.about-staff h1,
.contact-page h1,
.donate-actions h1 {
  font-size: var(--fz-800);
}

.home-services h2,
.home-about h2,
.events-form h1,
.events-gallery h1 {
  font-size: var(--fz-700);
}

.home-services-card h3,
.services-women h1,
.services-men h1,
.services-supportive h1,
.donate-scholarships h2 {
  font-size: var(--fz-600);
}

.event-banner,
.home-hero p,
.home-services a,
.home-about p,
.home-about a,
.home-donate p,
.events-banner,
.services-women h2,
.services-women h3,
.services-men h2,
.services-men h3,
.services-supportive h2,
.services-supportive h3,
.services-supportive-list li,
.about-title-vi h4,
.contact-page p:first-of-type {
  font-size: var(--fz-500);
}

nav li a,
.home-services-card h4,
.events-sponsors h1,
.events-form h2,
.about-leadership h3,
.about-staff h2 {
  font-size: var(--fz-400);
}

.footer-connect p,
.footer-contact address span
.home-services-card p,
.services-nav h2,
.services-nav h3,
.services-women p,
.services-women a,
.services-men p,
.services-men a,
.services-supportive p,
.services-supportive-list li span,
.about-leadership h2,
.contact-page .contact-info-phone p,
.contact-page .contact-info-location address,
.availability,
label,
p.venmo,
p.volunteer,
.donate-scholarships h1,
.donate-scholarships-card h3 {
  font-size: var(--fz-300);
}

.footer-contact address,
.footer-contact p,
.events-form p,
.about-story p,
.about-leadership h4,
.about-staff h3 {
  font-size: var(--fz-200);
}

.events-gallery-card-text h2,
.events-gallery-card-text p,
.donate-scholarships-card p {
  font-size: var(--fz-100);
}

/* 5. GENERAL STYLES */
* {
  font-family: var(--ff-primary);
  text-align: center;
}

section,
nav,
.event-banner,
footer,
.events-banner,
div.donate-page,
div.donate-page-block {
min-width: 0;
}

em {
    font-style: italic;
}

/* 6. COMPONENTS */
/* 6A. background colors */
.home-services,
.home-donate,
.services-women-residence,
.services-supportive-list {
  background-color: var(--clr-white);
}

.home-about,
.events-form,
.about-leadership,
.about-title-vi,
.contact-page-block:nth-child(2),
.donate-page-block:nth-child(2) {
  background-color: var(--clr-gray-200);
}
.services-men-how {
  background-color: var(--clr-gray-250);
}

.events-gallery-card-text {
  background-color: var(--clr-gray-300);
}

.services-women,
.services-supportive {
  background-color: var(--clr-blue-300);
}

.services-women-offerings,
.services-men-impact,
.services-supportive-cm,
.services-supportive-providers {
  background-color: var(--clr-blue-600);
}

/* 6B. buttons */
.button {
  font-size: var(--fz-300);
  font-weight: var(--fw-medium);
  cursor: pointer;
  text-decoration: none;
  color: var(--clr-black);
  border: solid 2px var(--clr-black);
  border-radius: 50px;
  padding: 0.5em 2em;
  margin: 0.5em;
}

.navigation-wide .button {
  padding: 0.5em 1.75em;
}

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

.button.white-text:hover,
.button.white-text:focus-visible {
  color: var(--clr-blue-300);
  border-color: var(--clr-blue-300);
}

.button.green-400-fill {
  color: var(--clr-white);
  background-color: var(--clr-green-400);
  border-color: var(--clr-green-400);
}

.button.green-400-fill:hover,
.button.green-400-fill:focus-visible {
  color: var(--clr-white);
  background-color: var(--clr-green-300);
  border-color: var(--clr-green-300);
}

.button.green-400-text {
  color: var(--clr-green-400);
  background-color: var(--clr-white);
  border-color: var(--clr-green-400);
}

.button.green-400-text:hover,
.button.green-400-text:focus-visible {
  color: var(--clr-green-300);
  border-color: var(--clr-green-300);
}

.button.blue-400-fill {
  color: var(--clr-white);
  background-color: var(--clr-blue-400);
  border-color: var(--clr-blue-400);
}

.button.blue-400-fill:hover,
.button.blue-400-fill:focus-visible {
  background-color: var(--clr-blue-450);
  border-color: var(--clr-blue-450);
}

.button.blue-400-text {
  color: var(--clr-blue-400);
  background-color: var(--clr-white);
  border-color: var(--clr-blue-400);
}

.button.blue-400-text:hover,
.button.blue-400-text:focus-visible {
  color: var(--clr-blue-600);
  border-color: var(--clr-blue-600);
}

.button.blue-600-fill {
  color: var(--clr-white);
  background-color: var(--clr-blue-600);
  border-color: var(--clr-blue-600);
}

.button.blue-600-fill:hover,
.button.blue-600-fill:focus-visible {
  background-color: var(--clr-blue-450);
  border-color: var(--clr-blue-450);
}

.button.blue-600-text {
  color: var(--clr-blue-600);
  background-color: var(--clr-white);
  border-color: var(--clr-white);
}

.button.blue-600-text:hover,
.button.blue-600-text:focus-visible {
  color: var(--clr-blue-400);
}

/* 6C. links */
.footer-contact a,
.footer-details-credit a,
.text-link,
.events-gallery-card-text a,
.venmo a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.services-nav a {
  text-underline-offset: 5px;
}

.contact-info a {
  text-decoration: none;
}

.text-link a:hover,
.text-link a:focus-visible,
.events-gallery-card-text a:hover,
.events-gallery-card-text a:focus-visible,
.services-nav a:hover,
.services-nav a:focus-visible {
  color: var(--clr-blue-450);
}

.services-women-offerings .text-link a:hover,
.services-women-offerings .text-link a:focus-visible {
  color: var(--clr-blue-300);
}

.venmo a {
  color: var(--clr-blue-450);
}

.venmo a:hover,
.venmo a:focus-visible {
  color: var(--clr-blue-600);
}

/* 7. TEMPLATE STYLES */
/* 7A. wide navigation */
@media (min-width: 58.75em) {
  .navigation-narrow {
    display: none;
  }

  .event-banner,
  .events-banner {
    margin-top: 118px;
  }

  .navigation-wide {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    top: 0;
    background-color: var(--clr-white);
    box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
    width: 100%;
  }
  
  .navigation-wide img {
    max-width: 14rem;
    padding: 1.25rem;
    padding-right: 3rem;
  }
  
  .navigation-wide ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    list-style: none;
  }
  
  .navigation-wide li a {
    color: var(--clr-gray-700);
    text-decoration: none;
    padding: 0.75rem;
  }

  .navigation-wide .selected {
    color: var(--clr-green-400);
  }
  
  .navigation-wide li a:hover,
  .navigation-wide li a:focus-visible {
    color: var(--clr-green-400);
  }

  /* !!!: IF EVENT BANNER IS COMMENTED OUT IN HTML, COMMENT IN CODE BELOW (1/2) */
   .home-hero,
   .about-story,
   .contact-page,
   .donate-page,
   .services-nav {
    margin-top: 112.5px;
  } 
  /* !!!: END OF COMMENT */

  /* !!!: IF SPECIAL EVENTS BANNER IS COMMENTED OUT IN HTML, COMMENT IN CODE BELOW (1/2) */
  .events-flyer {
    margin-top: 112.5px;
  }
  /* !!!: END OF COMMENT */
}

/* 7B. narrow navigation */
@media (max-width: 58.75em) {
  .navigation-wide {
    display: none;
  }

  .event-banner,
  .events-banner {
    padding-top: 118px;
  }

  .navigation-narrow {
    background-color: #fff;
    box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
    position: fixed;
    width: 100%;
    z-index: 3;
  }
  
  .navigation-narrow a {
    color: var(--clr-black);
  }
  
  .navigation-narrow ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    background-color: #fff;
  }
  
  .navigation-narrow li a {
    display: block;
    padding: 20px 20px;
    border-right: 1px solid #f4f4f4;
    text-decoration: none;
    text-align: center;
    font-size: var(--fz-300);
  }
  
  .navigation-narrow li a:hover,
  .navigation-narrow .menu-btn:hover {
    color: var(--clr-green-400);
  }
  
  .navigation-narrow .logo {
    display: block;
    float: left;
    max-width: 11.5rem;
    padding: 1.25rem;
    text-decoration: none;
  }
  
  /* menu */
  
  .navigation-narrow .menu {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
  }
  
  /* menu icon */
  
  .navigation-narrow .menu-icon {
    cursor: pointer;
    float: right;
    padding: 54px 20px;
    position: relative;
    user-select: none;
  }
  
  .navigation-narrow .menu-icon .navicon {
    background: var(--clr-green-400);
    display: block;
    height: 5px;
    position: relative;
    transition: .2s ease-out;
    width: 46px;
    border-radius: 4px;
  }
  
  .navigation-narrow .menu-icon .navicon:before,
  .navigation-narrow .menu-icon .navicon:after {
    background: var(--clr-green-400);
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
    border-radius: 4px;
  }
  
  .navigation-narrow .menu-icon .navicon:before {
    top: 15px;
  }
  
  .navigation-narrow .menu-icon .navicon:after {
    top: -15px;
  }
  
  /* menu btn */
  
  .navigation-narrow .menu-btn {
    display: none;
  }
  
  .navigation-narrow .menu-btn:checked ~ .menu {
    max-height: 25rem;
  }
  
  .navigation-narrow .menu-btn:checked ~ .menu-icon .navicon {
    background: transparent;
  }
  
  .navigation-narrow .menu-btn:checked ~ .menu-icon .navicon:before {
    transform: rotate(-45deg);
  }
  
  .navigation-narrow .menu-btn:checked ~ .menu-icon .navicon:after {
    transform: rotate(45deg);
  }
  
  .navigation-narrow .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
  .navigation-narrow .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
    top: 0;
  }

  /* !!!: IF EVENT BANNER IS COMMENTED OUT IN HTML, COMMENT IN CODE BELOW (2/2) */
   .home-hero,
   .about-story,
   .contact-page,
   .donate-page,
   .services-nav {
    padding-top: 112.5px;
  } 
  /* !!!: END OF COMMENT */

  /* !!!: IF SPECIAL EVENTS BANNER IS COMMENTED OUT IN HTML, COMMENT IN CODE BELOW (2/2) */
  .events-flyer {
    padding-top: 112.5px;
  }
  /* !!!: END OF COMMENT */
}

/* 7C. event banner */
.event-banner {
  background-color: var(--clr-blue-400);
  text-align: center;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-inline: 1.25rem;
}

.event-banner p {
  padding-top: 1.25em;
}

.event-banner .button {
  margin-top: 1em;
  margin-bottom: 1em;
  margin-inline: 1.25em;
}

/* 7D. footer */
footer {
  background-color: var(--clr-blue-600);
  padding-inline: 2.5rem
}

.footer-wrapper {
  display: grid;
  gap: 1rem;
  align-items: center;
}

.footer-connect p {
  margin-bottom: 1rem;
}

.footer-connect ul {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
}

.footer-details .grant-disclaimer {
  max-width: 22rem;
  margin-top: 2.5rem;
  margin-inline: auto;
}

.footer-details-logos {
  display: flex;
  gap: 0.25rem;
  justify-content: center;
}

.footer-details img {
  max-height: 4rem;
  margin-top: 1.25rem;
  margin-bottom: 1.5rem;
}

.footer-details .agency-disclaimer {
  max-width: 37rem;
  margin-inline: auto;
}

.footer-details-credit {
  display: grid;
  max-width: 32rem;
  margin-top: 1rem;
  margin-bottom: 2.5rem;
  margin-inline: auto;
}

.footer-contact {
  margin-bottom: 2.5rem;
}

@media (max-width: 67rem) {
  .footer-connect p {
    margin-top: 2.5rem;
  }
}

@media (min-width: 67rem) {
  .footer-wrapper {
    grid-template-columns: 1fr 2fr 1fr;
  }

  .footer-details-credit {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 8. GROUPED BY PAGE */
/* 8A. index.html */

/* multi-section styles */

.home-services h2,
.home-about h2 {
  padding-top: 4.75rem;
  padding-bottom: 4rem;
}

.home-services .text-link,
.home-about .text-link {
  padding: 4.25rem;
}

/* hero section */

.home-hero {
  background-image: url("/images/Hero.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top right;
  padding-inline: 2.5rem;
}

.home-hero h1, .home-hero p {
  max-width: 35rem;
  margin-inline: auto;
}

.home-hero h1 {
  padding-top: 5rem;
}

.home-hero p {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.hero-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-bottom: 7rem;
}

/* services section */

.home-services-card-wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.home-services-card {
  background-color: var(--clr-blue-600);
  border-radius: 0.75rem;
  max-width: 24rem;
  margin: 1rem;
  padding: 2.5rem;
}

.home-services-card p {
  padding-top: 1rem;
}

/* about section */

.home-about {
  padding-inline: 2.5rem;
}

.home-about p {
  max-width: 57.5rem;
  margin-inline: auto;
}

.home-about span {
  color: var(--clr-blue-450);
  font-style: italic;
}

/* donate section */

.home-donate {
  padding-inline: 2.5rem;
}

.home-donate-card-wrapper {
  margin-top: 5rem;
  margin-bottom: 5rem;
}

.home-donate-card {
  background-color: var(--clr-blue-300);
  max-width: 71.25em;
  margin-inline: auto;
  padding: 4rem 2.5rem;
}

.home-donate h2 {
  max-width: 30rem;
  margin-inline: auto;
}

.home-donate p {
  max-width: 40rem;
  margin-inline: auto;
  margin-top: 1.75rem;
  margin-bottom: 3rem;
}

.home-donate .home-donate-button {
  padding-bottom: 1.75rem;
}

/* media queries */

@media (min-width: 78rem) {
  .text-gap  {
    margin-top: 2rem;
  }
}

/* 8B. events.html */

.events-newsletter {
  background: var(--clr-blue-300);
}

#mc_embed_shell {
  background: var(--clr-blue-300);
  padding-top: 2rem;
  overflow: auto;
}

#mc_embed_signup {
  max-width: 37.5rem;
  margin-inline: auto;
}

/* banner section */

.events-banner {
  background-color: var(--clr-blue-400);
  text-align: center;
  justify-content: center;
  flex-wrap: wrap;
  padding-inline: 1.25rem;
}

.events-banner p {
  padding-top: 1.25em;
  padding-bottom: 1.25em;
}

/* flyer section */

.events-flyer-wrapper {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

img.flyer-tall {
  max-width: 30rem;
  margin-inline: auto;
}

/* change the number of the max width here to accommodate wider images (depending on the height of the flyer, i recommend anywhere between 52% and 94%). must comment out the max-width of .events-flyer-wrapper for it to function properly */
img.flyer-wide {
  max-width: 52%;
  margin-inline: auto;
}

/* purchase section */

.events-purchase {
  background-image: url("/images/golf_tourney_backdrop2.webp");
  background-repeat: no-repeat;
  background-size: cover;
  padding: 8rem 4rem;
  background-position: top center;
}

/* sponsors section */

.events-sponsors h1 {
  padding-top: 3.75rem;
  padding-bottom: 2rem;
}

.events-sponsors ul {
  justify-content: center;
  padding-bottom: 3.75rem;
}

.events-sponsors li {
  padding: 1rem;
}

.events-sponsors img {
  max-height: 8.75rem;
  margin-inline: auto;
}

/* form section */

.events-form {
  padding-inline: 2rem;
}

.events-form h1 {
  padding-top: 3.75rem;
}

.events-form h2 {
  padding-top: 1.5rem;
  padding-bottom: 2.5rem;
}

.events-form p {
  padding-top: 3rem;
  padding-bottom: 3.75rem;
}

/* gallery section */

.events-gallery h1 {
  padding-top: 3.75rem;
  padding-bottom: 3.75rem;
}

.events-gallery-card-wrapper {
  max-width: 27rem;
  margin-inline: auto;
  padding-bottom: 3.75rem;
}

.events-gallery-card {
  padding-bottom: .75rem;
}

.events-gallery-card-text {
  padding: 1rem
}

/* media queries */

@media (max-width: 36rem) {
  .events-purchase {
    padding: 8rem 1.75rem;
  }
}

@media (min-width: 58.75em) {
  .events-flyer-wrapper {
    display: flex;
    flex-wrap: wrap;
    max-width: 64rem;
    margin-inline: auto;
  }

  .events-purchase {
    padding: 8rem 10rem;
  }

  .events-sponsors ul {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    max-width: 65%;
    margin-inline: auto;
  }

  .events-gallery-card-wrapper {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    max-width: 60rem;
    margin-inline: auto;
  }

  .events-gallery-card-column {
    width: 32.5%;
  }
}

@media (min-width: 74em) {
  .events-purchase {
    padding: 8rem 18rem;
  }
}

/* 8C. services.html */

/* multi-section styles */

.services-women-residence,
.services-women-offerings,
.services-men-how,
.services-men-impact,
.services-supportive-list,
.services-supportive-cm,
.services-supportive-providers {
  max-width: 64rem;
  margin-inline: auto;
}

.services-women-residence h3,
.services-women-offerings h3,
.services-men-how h3,
.services-men-impact h3 {
  padding-top: 3rem;
}

.services-women-residence,
.services-men-how,
.services-supportive-list,
.services-supportive-cm,
.services-supportive-providers {
  margin-bottom: 2rem;
}

.services-women h2,
.services-women-residence p,
.services-women-offerings p,
.services-men p {
  text-align: left;
}

.services-women,
.services-women-offerings,
.services-men,
.services-men-how,
.services-men-impact,
.services-supportive,
.services-supportive-list,
.services-supportive-cm,
.services-supportive-providers {
  padding-inline: 2rem;
}

.services-women h2,
.services-men h2,
.services-supportive h2 {
  padding-inline: 1rem;
}

.services-women h1,
.services-men h1,
.services-supportive h1 {
  padding-top: 4rem;
}

.services-women h2,
.services-men h2,
.services-supportive h2 {
  margin-top: 2rem;
  margin-bottom: 4rem;
  margin-inline: auto;
}

.services-women-residence,
.services-women-offerings,
.services-men-how,
.services-men-impact,
.services-supportive-list,
.services-supportive-cm,
.services-supportive-providers {
  max-width: 64rem;
  margin-inline: auto;
}

.services-women-residence h3,
.services-women-offerings h3,
.services-men-how h3,
.services-men-impact h3 {
  padding-top: 3rem;
}

.services-women-residence,
.services-men-how,
.services-supportive-list,
.services-supportive-cm,
.services-supportive-providers {
  margin-bottom: 2rem;
}

.services-women h2,
.services-women-residence p,
.services-men p,
.services-men h2,
.services-supportive h2,
.services-supportive-list h3,
.services-supportive-cm p,
.services-supportive-providers p {
  text-align: left;
}

.services-women-residence-card-wrapper,
.services-men-impact {
  padding-bottom: 2rem;
}

.services-women-offerings .text-link,
.services-men-how .text-link {
  padding-bottom: 3.75rem;
}

/* nav section */

.services-nav h1 {
  padding-top: 5rem;
}

.services-nav h2 {
  margin-top: 1.75rem;
  margin-bottom: 1rem;
}

.services-nav h3 {
  margin-bottom: 5rem;
}

/* women section */

.services-women .services-button {
  padding-top: 1.5rem;
  padding-bottom: 3.75rem;
}

.services-women h2 {
  max-width: 49rem;
}

.services-women span {
  color: var(--clr-blue-450);
}

.services-women-residence h3 {
  padding-bottom: 1.5rem;
}

.services-women-residence p.intro {
  max-width: 44rem;
  margin-inline: auto;
}

.services-women-residence hr {
  color: var(--clr-black);
  max-width: 85%;
  margin: 3rem auto 3rem;
}

.services-women-offerings p {
  max-width: 36.5rem;
  margin: 2rem auto 2.5rem;
}

.services-women-disclaimer {
  max-width: 32.5rem;
  margin: 3.75rem auto 2.5rem;
}

/* men section */

.services-men h2 {
  max-width: 50rem;
}

.services-men-how p {
  max-width: 46rem;
  margin: 2rem auto;
}

.services-men-impact p {
  max-width: 49rem;
  margin: 2rem auto;
}

.services-men .services-men-disclaimer {
  max-width: 36rem;
  margin: 3.75rem auto;
  text-align: center;
}

/* supportive section */

.services-supportive-list ul {
  padding-left: 1rem;
}

.services-supportive h3 {
  max-width: 47rem;
  margin-inline: auto;
  padding-bottom: 3rem;
}

.services-supportive-providers p {
  max-width: 43rem;
  margin-inline: auto;
}

.services-supportive h2 {
  max-width: 56rem;
}

.services-supportive-list {
  padding-top: 3.75rem;
  padding-bottom: 3.75rem;
}

.services-supportive-list-wrapper {
  margin-inline: auto;
  max-width: 22.5rem;
}

.services-supportive-list li {
  list-style: disc;
  text-align: left;
  color: var(--clr-blue-400);
  padding-top: .25rem;
  padding-bottom: .25rem;
}

.services-supportive-list li span {
  color: var(--clr-black);
  padding-left: .5rem;
}

.services-supportive-cm,
.services-supportive-providers {
  padding-top: 2.75rem;
  padding-bottom: 2.75rem;
}

.services-supportive-cm p {
  max-width: 40rem;
  margin-inline: auto;
}

.services-supportive-disclaimer {
  max-width: 50rem;
  margin-inline: auto;
  padding-top: 1.5rem;
  padding-bottom: 3.75rem;
}

/* media queries */

@media (max-width: 36rem) {
  .services-nav h3 {
    font-size: var(--fz-100);
  }
}

@media (max-width: 58.75em) {
  .services-women-residence-card p,
  .services-women-residence p.intro {
    padding-inline: 2rem;
  }

  .services-women-residence-card p {
    padding-bottom: 1.5rem;
  }
}

@media (min-width: 45rem) {
  .services-women h2,
  .services-women-residence p.intro,
  .services-women-offerings p,
  .services-men p,
  .services-men h2,
  .services-supportive h2,
  .services-supportive-list h3,
  .services-supportive-cm p,
  .services-supportive-providers p {
    text-align: center;
  }
}

@media (min-width: 58.75em) {
  .services-women-residence hr {
    max-width: 50rem;
  }

  .services-women-residence-card-wrapper {
    display: flex;
    max-width: 55rem;
    margin-inline: auto;
    padding-inline: 2rem;
    padding-bottom: 3.75rem;
  }

  .services-women-residence-card:nth-of-type(2) {
    padding-inline: 1rem;
  }

  .services-supportive-list-wrapper {
    max-width: 45rem;
  }

  .services-supportive-list ul {
    columns: 2 auto;
  }
}

/* 8D. about.html */

/* multi-section styles */

.about-story,
.about-leadership,
.about-staff,
.about-title-vi{
  padding-inline: 2rem;
}

.about-story h1,
.about-staff h1 {
  text-align: center;
  padding-top: 5rem;
}

.about-leadership-card h3,
.about-staff-card h2,
.about-title-vi h4 {
  margin-bottom: 0.5rem;
}

.about-story-content-text span,
.about-leadership-card span {
  color: var(--clr-blue-450);
}

/* story section */

.about-story-content {
  display: grid;
  margin-top: 3.75rem;
  margin-bottom: 6.25rem;
}

.about-story-content p {
  text-align: left;
}

.about-story-content-text {
  margin-top: 3rem;
}

/* leadership section */

.about-leadership h1 {
  padding-top: 5rem;
  text-align: center;
}

.about-leadership h2 {
  max-width: 35rem;
  margin-inline: auto;
  padding-top: 1.8rem;
  padding-bottom: 3.1rem;
}

.about-leadership hr {
  max-width: 20rem;
  color: var(--clr-black);
  margin-bottom: 3rem;
  margin-inline: auto;
}

.about-leadership-card-wrapper {
  display: grid;
  padding-bottom: 3.5rem;
}

.about-leadership-card {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* staff section */

.about-staff h1 {
  margin-bottom: 3rem;
}

.about-staff-card-wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-bottom: 4rem;
}

.about-staff-card {
  background-color: var(--clr-blue-300);
  border-radius: 0.75rem;
  align-content: center;
  width: 22rem;
  height: 14rem;
  margin: 1rem;
  padding: 2.5rem;
}

/* title vi section */

.about-title-vi h4 {
  padding-top: 3rem
}

.about-title-vi p {
  max-width: 49em;
  padding-bottom: 3rem;
  margin-top: 2rem;
  margin-inline: auto;
}

/* media queries */

@media (min-width: 45rem) {

  .about-story-content-img {
    margin-inline: auto;
  }

  .about-story img {
    max-width: 35rem;
  }

  .about-story-content-text {
    max-width: 60rem;
    margin-inline: auto;
  }

  .about-staff-card-wrapper {
    max-width: 72rem;
    margin-inline: auto;
  }
}

@media (min-width: 82rem) {
  .about-leadership hr {
    max-width: 50rem;
  }

  .about-leadership-card-wrapper {
    grid-template-columns: repeat(3, 1fr);
    margin-inline: 8rem;
  }
}

@media (min-width: 90rem) {
  .about-story-content {
    grid-template-columns: repeat(2, 1fr);
    margin-inline: 4.75rem;
  }

  .about-story img {
    max-width: 43rem;
  }

  .about-story-content-text {
    margin-top: 0;
    margin-left: 3.75rem;
  }

  .about-leadership-card-wrapper {
    grid-template-columns: repeat(3, 1fr);
    margin-inline: 12rem;
  }

  .about-leadership-card {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
}

/* 8E. contact.html & success.html */

/* multi-section styles */

.contact-page {
  display: grid;
  align-items: center;
}

.contact-page h1,
.contact-info p,
.contact-info address,
.form-column,
input,
textarea {
  text-align: left;
}

.contact-page .contact-how-to {
  margin-top: 1.25rem;
  margin-bottom: 3.75rem;
}

/* info section */

.contact-info-content-wrapper {
  max-width: 28.25rem;
  margin-inline: auto;
}

.contact-info-phone,
.contact-info-location {
  display: flex;
}

.contact-info-phone p,
.contact-info-location address {
  margin-left: 1rem;
}

.contact-info-phone {
  margin-bottom: 1.25rem;
}

.contact-info img {
  max-width: 30px;
}

.availability {
  margin-top: 3.75rem;
}

/* form section */

.contact-form-content-wrapper,
.contact-form-success {
  max-width: 30.5rem;
  margin: 5rem auto;
}

.contact-form-content-wrapper .button {
  margin-left: 0;
  padding: 0.25em 1.75em;
}

.contact-form-success h1 {
  text-align: center;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.form-column {
  flex: 1;
}

.form-column span {
  color: var(--clr-blue-400);
}

.form-row:nth-of-type(4){
  margin-bottom: 0;
}

input,
textarea {
  margin-top: 6px;
}

input {
  padding: 0.25rem 0.5rem;
}

textarea {
  height: 10rem;
  padding: 0.5rem 0.75rem;
  resize: none;
}

input[type=text],
input[type=email],
textarea {
  border: solid 2px #d9d9d9;
  border-radius: 6px;
}

#fname,
#lname {
  max-width: 18.75rem;
}

#email,
#phone,
#message {
  width: 100%;
}

input:focus,
textarea:focus {
  border-color: var(--clr-blue-400);
    outline: none;
}

/* media queries */

@media (min-width: 67rem) {
  .contact-page {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-form-success {
    padding-top: 13.875rem;
    padding-bottom: 13.875rem;
  }
}

@media (max-width: 67rem) {
  .contact-info-content-wrapper {
    margin: 6rem auto;
  }
}

@media (max-width: 35rem) {
  .contact-form-content-wrapper,
  .contact-form-success {
    max-width: 24rem;
    margin: 6rem auto 5rem;
  }

  .contact-info-content-wrapper,
  .contact-form-success {
    max-width: 26rem;
  }

  #fname,
  #lname {
    max-width: 11.5rem;
  }
}

/* 8F. donate.html */

/* multi-section styles */

.donate-page {
  display: grid;
  align-items: center;
}

.donate-page-block:nth-child(2) {
    height: 100%;
}

/* actions section */

.donate-actions h1 {
  max-width: 18.75rem;
  margin-inline: auto;
  margin-top: 5rem;
}

.donate-actions form {
  margin: 2.25rem auto;
}

p.venmo {
  margin-bottom: 5rem;
}

p.volunteer {
  margin-bottom: 2rem;
}

.donate-actions-contact-button {
  padding-bottom: 5rem;
}

/* scholarships section */

.donate-scholarships h1 {
  max-width: 33rem;
  margin-inline: auto;
  margin-top: 5rem;
  margin-bottom: 2.5rem;
  padding-inline: 2rem;
}

.donate-scholarships-card-wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 30rem;
  margin: 2rem auto;
}

.donate-scholarships-card {
  background-color: var(--clr-blue-600);
  border-radius: 0.75rem;
  max-width: 24rem;
  margin: 1rem;
  padding: 1.25rem;
}

@media (min-width: 67rem) {
  .donate-page {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* media queries */

@media (max-width: 35rem) {
  .donate-scholarships-card-wrapper {
    padding-inline: 2rem;
    
    .event-banner {
  padding: 16px 0;
}

.event-banner p {
  margin: 0;
}
  }
}.events-flyer,
.events-gallery {
  display: none;
}