/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 

STUDENT CUSTOMIZATION FILE
This is where you make your design changes!
Experiment with colors, typography, spacing, and component styles.

 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* ===============================================================
  🤖 **COPILOT INSTRUCTIONS FOR custom.css** 🤖
  ================================================================
  
  - **🚫 CRITICAL RULE: DO NOT EDIT `framework.css`.** - **✅ ALL new CSS styles, overrides, and design customizations go HERE in this file.**
  
  ---
  
  **KEY ASSETS:**
  
  1.  **Colors:** Use CSS Variables like `var(--primary-100)`, `var(--white)`, and `var(--grey)`.
  2.  **Spacing:** Use CSS Variables like `var(--spacing8x3)` or `var(--spacing8x8)` for consistent measurements.
  3.  **Layout:** Build upon the existing `grid` system classes (e.g., `.mobi1`, `.tab3`, `.desk4`).
  
  Always ask user for preferences instead of making assumptions!
  
*/

/* ==========================================================================
   DESIGN SYSTEM - CUSTOMIZE YOUR COLORS & BRAND
   ========================================================================== */

:root {
  --primary-100: #2B2D42;
  --primary-80: #486284;
  --primary-50: #9CB0C9;
  --primary-25: #CED7E4;
  --grey: #EBEFF4;
  --white: #fff;
  
  /* You can add more custom colors here */
--colour-1: #2B2D42;
--colour-2: #1F473C;
--colour-3: #F4F4EC;
--colour-4: #97F2E9;
--colour-5: #FDFF8A;
--colour-6: #414046;
--colour-7: #000000;

}




/* ==========================================================================
   TYPOGRAPHY - CUSTOMIZE FONTS & TEXT STYLES
   ========================================================================== */

body {
  color: var(--primary-80);
  background-color: var(--colour-1);
  font-family: "DM Sans", "PPPangramSans", sans-serif;
}

/* Heading Styles - Customize sizes, colors, spacing */
h1, h2, h3, h4, h5, h6 { 
  line-height: 1.1;
  color: var(--colour-7);
  /* Add your custom heading styles here */
.dm-mono-light {
  font-family: "DM Mono", monospace;
  font-weight: 300;
  font-style: normal;
}

.dm-mono-regular {
  font-family: "DM Mono", monospace;
  font-weight: 400;
  font-style: normal;
}

.dm-mono-medium {
  font-family: "DM Mono", monospace;
  font-weight: 500;
  font-style: normal;
}

.dm-mono-light-italic {
  font-family: "DM Mono", monospace;
  font-weight: 300;
  font-style: italic;
}

.dm-mono-regular-italic {
  font-family: "DM Mono", monospace;
  font-weight: 400;
  font-style: italic;
}

.dm-mono-medium-italic {
  font-family: "DM Mono", monospace;
  font-weight: 500;
  font-style: italic;
}
}

h1 { 
  font-family: "DM Mono", monospace;
  font-weight: 500;
  font-size: 50pt;
  line-height: 130%;
  letter-spacing: 0.15em;
  /* Try adding: text-transform, etc. */
}

h2 { 
  font-family: "DM Mono", monospace;
  font-weight: 500;
  font-size: 40pt;
  line-height: 150%;
  letter-spacing: 0;
  color: var(--colour-4);
}



h3 { 
  overflow: hidden;
  color: var(--colour-5);
  text-overflow: ellipsis;
  font-family: "DM Mono", monospace;
  font-size: 39px;
  font-style: normal;
  font-weight: 500;
  line-height: 48px; /* 123.077% */
  margin: 0;
}

h4 { 
  color: var(--colour-1);
  text-align: center;
  font-family: "DM Sans", monospace;
  font-size: 36px;
  font-style: normal;
  font-weight: 500;
  line-height: 48px; /* 133.333% */
  letter-spacing: 0.15px;
}

.dark-bg-wrapper h4,
section .card h4 {
  color: var(--colour-1);
  text-align: center;
}

section .card h4,
section .card h5,
section .card p {
  color: var(--colour-2);
}

.contact-info li h6 {
  color: #fff89c;
  font-size: 1.05rem;
  font-weight: 500;
  margin: 0;
}

h5 { 
  color: #1F473C;
  font-family: "DM Sans", sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 110%; /* 35.2px */
  letter-spacing: 0.15px;
}

h6 { 
  color: var(--colour-1);
  font-family: "DM Sans", sans-serif;
  font-size: var(--spacing8x3, 24px);
  font-style: normal;
  font-weight: 500;
  line-height: 110%; /* 26.4px */
  letter-spacing: 0.15px;
}

h7 {
  color: var(--3, #F4F4EC);
  font-family: "DM Sans", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 30px; /* 150% */
  letter-spacing: 0.37px;
}

/* Paragraph Styles */
p {
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 17.786px; /* 148.213% */
  color: var(--3, #F4F4EC);
}

img + h4,
picture + p {
  margin-top: var(--spacing8x2);
}



section div+div {
  margin-top: var(--spacing8x1);
}


/* Mobile Typography Adjustments */
@media only screen and (max-width: 799px) {
  h1 { 
    font-size: 75px;
  }
  
  /* Add more mobile typography adjustments here */
}

/* ==========================================================================
   LINKS & BUTTONS - CUSTOMIZE INTERACTIVE ELEMENTS
   ========================================================================== */

/* Basic Link Styles */
a {
  text-decoration: none;
  color: var(--primary-80);
  transition: all 300ms;
  /* Try adding: border-bottom, font-weight changes, etc. */
}

a:hover {
  opacity: 0.5;
  /* Try different hover effects: color changes, transforms, etc. */
}

/* Button Styles - Customize your call-to-action buttons */
a.button {
  border-radius: 50px;
  border: 2px solid var(--primary-80);
  padding: 10px 20px 8px;
  display: inline-block;
  margin-top: var(--spacing8x2);
  /* Try adding: background-color, box-shadow, transform on hover, etc. */
}

a.button:hover {
  background: var(--dark)
}

/* Example: Secondary Button Style */
a.button-secondary {
  background-color: var(--accent-color);
  border: 1.5px solid var(--accent-color);
  color: var(--primary-80);
}

/* Example: Highlight Button Style */
a.button-highlight {
  background-color: var(--highlight-color);
  border: 1.5px solid var(--highlight-color);
  color: white;
}

/* ==========================================================================
   LAYOUT SECTIONS - CUSTOMIZE PAGE STRUCTURE
   ========================================================================== */


/* Header styles */
header img {
  width: 160px;
  /* Try adjusting: width, border-radius for logo styling */
}

header nav {
  text-align: right;
  font-size: var(--spacing8x3, 24px);
  font-family: "DM Sans", sans-serif;
  color: var(--colour-3);
}

header nav a {
  margin-left: 40px;
  color: var(--colour-3);
  font-family: "DM Sans", sans-serif;
  font-size: var(--spacing8x3, 24px);
  font-weight: 500;
  line-height: 110%;
  letter-spacing: 0.15px;
  text-transform: none;
}

header nav a.active {
  border-bottom: 2px solid var(--colour-3);
  padding-bottom: 2px;
}

.desktop-nav nav .dropdown-menu,
.mobile-nav nav .dropdown-menu {
  background-color: var(--colour-1);
  border: 1.5px solid var(--colour-1);
}

.desktop-nav nav .dropdown-menu a,
.mobile-nav nav .dropdown-menu a {
  color: var(--colour-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.desktop-nav nav .dropdown-menu a:hover,
.mobile-nav nav .dropdown-menu a:hover {
  background-color: rgba(255, 255, 255, 0.08);
}


/* Hero section */
#hero-image {
  background: url('../img/hero-home.png') no-repeat center center/cover;
  height: 95vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing8x3);
}

#hero-image h1 {
  display: flex;
  width: 1440px;
  height: 863px;
  padding: 150px 471px 500px 571px;
  justify-content: flex-end;
  align-items: center;
  flex-shrink: 0;
  text-align: center;
  color: var(--colour-7);
  margin: 0; 
}

#hero-image p {
  color: var(--white);
  margin: 0; 
}

#hero-image span i {
  background: var(--white);
  font-size: 1.625rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--spacing8x12);
}

#hero-image.hero-about {
  background: url('../img/hero-about.png') no-repeat center center/cover;
}

#hero-image.hero-activities {
  background: url('../img/hero-activities.png') no-repeat center center/cover;
}

#hero-image.hero-resources {
  background: url('../img/hero-resources.png') no-repeat center center/cover;
}


.text-hero {
  background: var(--colour-6);
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding: 64px 200px;
  margin-top: 0;
  margin-bottom: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.text-hero h3 {
  color: var(--colour-5);
  font-family: "DM Mono", monospace;
  font-size: 39px;
  line-height: 1.2;
  margin: 0;
  max-width: 840px;
}

.text-hero h6 {
  color: var(--colour-3);
  line-height: 1.5;
  margin: 0;
  max-width: 940px;
  font-size: 18px;
  padding-left: 100px;
}

@media only screen and (max-width: 799px) {
  .text-hero {
    padding: 40px 20px;
    align-items: flex-start;
  }

  .text-hero h3 {
    font-size: 28px;
    padding-right: 0;
  }

  .text-hero h6 {
    font-size: 14px;
    padding-left: 0;
  }

  .contact-callout {
    flex-direction: column;
    padding: 32px 20px;
    gap: 24px;
  }

  .contact-card {
    padding: 32px;
    min-height: auto;
  }
}

@media only screen and (min-width: 800px) {
  .about-block-top {
    padding-top: 96px;
    padding-bottom: 32px;
  }

  .about-block-middle {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .about-block-bottom {
    padding-top: 32px;
    padding-bottom: 96px;
  }

  .activities-pad-right {
    padding-right: 200px !important;
  }

  .activities-pad-left {
    padding-left: 200px !important;
  }
}

.activities-order-1 { order: 1; }
.activities-order-2 { order: 2; }
.activities-order-3 { order: 3; }
.activities-order-4 { order: 4; }
.activities-order-5 { order: 5; }
.activities-order-6 { order: 6; }
.activities-order-7 { order: 7; }
.activities-order-8 { order: 8; }

@media only screen and (min-width: 800px) {
  .activities-order-1,
  .activities-order-2,
  .activities-order-3,
  .activities-order-4,
  .activities-order-5,
  .activities-order-6,
  .activities-order-7,
  .activities-order-8 {
    order: initial;
  }
}

/* Light background wrapper - extends to viewport edges */
.light-bg-wrapper {
  background: var(--grey);
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding: var(--spacing8x3) calc(50vw - 50%);
  box-sizing: border-box;
}

/* Callout */

.callout {
  background: var(--grey);
}

.callout div {
  padding: var(--spacing8x8);
}

.contact-callout {
  background: var(--colour-6);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 48px;
  padding: 48px 200px;
}

.contact-callout > div {
  padding: 0;
}

.contact-callout .contact-card form,
.contact-callout .form-row {
  padding: 0;
}

.contact-card {
  background: var(--colour-5);
  border-radius: 30px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  padding: 32px 48px;
  width: 528px;
  max-width: 100%;
  min-height: 580px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin: auto;
}

.contact-card form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1 1 auto;
  width: 465px;
  height: auto;
  max-width: 100%;
  align-items: stretch;
  justify-content: center;
  margin: auto;
  padding-bottom: 32px;
}

.contact-card .form-row {
  display: flex;
  gap: 20px;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  margin: 0 auto;
}

.contact-card .form-row input {
  flex: 0 0 calc((100% - 20px) / 2);
  width: calc((100% - 20px) / 2);
  height: 60px;
}


.contact-card input,
.contact-card textarea,
.contact-card button.button {
  width: 100%;
  border-radius: 18px;
  border: 2px solid #dcdcdc;
  padding: var(--spacing8x2);
  font-size: 1rem;
  font-family: inherit;
  box-sizing: border-box;
  background: #fff;
}

.contact-card input::placeholder,
.contact-card textarea::placeholder {
  color: #7a7a7a;
}

.contact-card textarea {
  min-height: 140px;
  resize: vertical;
  margin-bottom: 40px;
}

.contact-card button.button {
  width: 100%;
  height: 42px;
  border-radius: 50px;
  border: 1px solid var(--colour-2);
  background: var(--colour-4);
  color: var(--colour-1);
  font-family: "DM Sans", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: none;
  cursor: pointer;
}

.contact-card button.button:hover {
  background: var(--colour-3);
  color: var(--colour-2);
}

.button-submit {
  border-radius: 50px;
  border: 2px solid var(--primary-80);
  padding: 10px 20px 8px;
  background: transparent;
  color: var(--primary-80);
  font-family: "DM Sans", sans-serif;
  font-size: 1rem;
  cursor: pointer;
  margin-top: var(--spacing8x2);
  align-self: flex-start;
  text-transform: none;
}

.button-submit:hover {
  background: var(--dark);
  color: var(--white);
}

.contact-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-self: flex-start;
  color: #fff89c;
  padding-left: var(--spacing8x6);
}

.contact-info h3 {
  margin: 0 0 var(--spacing8x3) 0;
  color: #fff89c;
}

@media only screen and (max-width: 799px) {
  .contact-callout {
    flex-direction: column;
    padding: 32px 20px;
  }

  .contact-card {
    width: 100%;
    padding: 48px 16px;
    height: auto;
    min-height: 604px;
  }

  .contact-card form,
  .contact-card form > input,
  .contact-card form > textarea {
    width: 100%;
    max-width: 336px;
    justify-content: center;
    margin: 0 auto;
    padding-top: 16px;
    padding-bottom: 32px;
  }

  .contact-card .form-row {
    flex-direction: column;
    width: 100%;
  }

  .contact-card .form-row input {
    width: 100%;
  }

  .contact-card button.button {
    width: 100%;
  }
}

.contact-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing8x2);
  font-size: 1.05rem;
}

.contact-info li {
  display: flex;
  align-items: center;
  gap: var(--spacing8x1);
}

.contact-info i {
  font-size: 1.1rem;
}

.contact-section {
  background: #ffffff;
  height: 720px;
  color: var(--colour-2);
}

.contact-section .text h3 {
  margin-bottom: 30px;
}

.contact-section .text h3,
.contact-section .text h6 {
  color: var(--colour-2);
}

.contact-section .button {
  background: var(--colour-4);
  border: 1px solid var(--colour-1);
  color: var(--colour-1);
  font-family: "DM Sans", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 110%;
  letter-spacing: 0.15px;
}

.contact-section .image {
  background: url('../img/whyjoin.jpg') center center/cover no-repeat;
}

@media only screen and (max-width: 799px) {
  .contact-section .image {
    display: none;
  }

  .contact-section {
    height: auto;
  }
}
.resource-highlight {
  background: #fff89c;
  border-radius: 28px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
  padding: var(--spacing8x6);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--spacing8x4);
}

.resource-summary h4,
.resource-summary p {
  color: #2f2e38;
}

.resource-logo {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto var(--spacing8x3);
  border: 4px solid #2f2e38;
  background: #fff;
}

.resource-highlight .button {
  background: #a3f5f1;
  border: 2px solid #2f2e38;
  color: #2f2e38;
  padding: var(--spacing8x1) var(--spacing8x4);
}

.resource-highlight .button:hover {
  background: #8be0dc;
}

.resource-details {
  display: none;
  text-align: left;
}

.resource-details ul {
  margin: 0;
  padding-left: var(--spacing8x4);
  color: #2f2e38;
  line-height: 1.4;
}

.resource-details li {
  margin-bottom: var(--spacing8x1);
}

.resource-note {
  margin-top: var(--spacing8x1);
  font-size: 0.95rem;
  padding-left: var(--spacing8x3);
  list-style: disc;
}

.resource-note li {
  margin-bottom: var(--spacing8x1);
  list-style: disc;
  margin-left: var(--spacing8x2);
  font-weight: 300;
}

.resource-note h7 {
  color: var(--colour-2);
  font-family: "DM Sans", sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  margin: 0;
}

.stacked-resources {
  width: 100%;
  max-width: var(--Spacing-Desktop-Max-Width, 1440px);
  margin: 0 auto;
  padding: 0;
  gap: var(--spacing8x6);
  background: var(--colour-6);
  border-radius: 0;
}

.resource-panel {
  background: #fff89c;
  border-radius: 28px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
  padding: var(--spacing8x6);
  display: flex;
  flex-direction: column;
  gap: var(--spacing8x4);
}

 .resource-panel .resource-summary {
   text-align: center;
   color: var(--colour-2);
 }

.showcase-section {
  background: var(--colour-6);
  width: 100%;
}

.showcase-grid {
  display: grid;
  width: 100%;
  max-width: var(--Spacing-Desktop-Max-Width, 1440px);
  height: 426px;
  padding: 32px 200px;
  margin: 0 auto;
  row-gap: 32px;
  column-gap: 23px;
  flex-shrink: 0;
  grid-template-rows: repeat(1, minmax(0, 1fr));
  grid-template-columns: repeat(3, 332px);
  justify-content: center;
}

.showcase-grid-multi {
  height: auto;
  grid-template-rows: unset;
  grid-auto-rows: minmax(0, 1fr);
  padding-bottom: 32px;
}

.showcase-card {
  width: 332px;
  height: 341px;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

.showcase-card picture {
  width: 100%;
  height: 205px;
  display: block;
  margin-bottom: 8px;
}

.showcase-card picture img {
  width: 100%;
  height: 205px;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.showcase-content {
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  text-align: left;
  width: 332px;
  max-width: 100%;
  min-height: 89px;
  align-self: stretch;
  overflow: hidden;
}

.showcase-content h4,
.showcase-content h5,
.showcase-content p {
  color: var(--colour-3);
  margin: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

.showcase-content h4 {
  font-family: "DM Sans", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 110%;
  letter-spacing: 0.15px;
  height: 30px;
  max-height: 30px;
}

.showcase-content h5 {
  font-family: "DM Sans", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 110%;
  letter-spacing: 0.15px;
  margin-top: 0;
  height: 30px;
  max-height: 30px;
}

.showcase-content p {
  font-size: 12px;
  line-height: 150%;
  color: var(--colour-3);
  width: 332px;
  max-width: 100%;
  height: 89px;
}

.showcase-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 32px 0 64px;
  background: var(--colour-6);
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  font-family: "DM Mono", monospace;
}

.showcase-pagination span {
  color: var(--colour-3);
  cursor: pointer;
  font-size: 1.1rem;
}

.showcase-pagination .pagination-number.active {
  color: var(--colour-4);
}

.resource-panel-details {
  width: 100%;
  color: var(--colour-2);
}

.resource-panel-details ol {
  margin: 0;
  padding-left: var(--spacing8x4);
}

.resource-panel-details li {
  margin-bottom: var(--spacing8x2);
  color: #2f2e38;
}

.resource-panel-details strong {
  display: block;
  margin-bottom: var(--spacing8x1);
}

.resource-feature {
  width: 100%;
  max-width: 1040px;
  min-height: 492px;
  margin: 32px auto 32px;
  box-sizing: border-box;
  background: var(--colour-5);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
  padding: 0;
  color: var(--colour-2);
}

.resource-feature-inner {
  width: 100%;
  height: 100%;
  padding: 32px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 32px;
}

.resource-feature-summary {
  width: 250px;
  min-height: 432px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  color: var(--colour-2);
}

.resource-panel.resource-feature .resource-summary {
  width: 250px;
}

.resource-feature-summary h4 {
  color: var(--colour-2);
  margin: 0;
  text-align: center;
  width: 100%;
}

.resource-feature-summary h7,
.resource-feature-summary p {
  color: var(--colour-2);
  margin: 0;
  text-align: left;
  width: 100%;
}

.resource-feature-logo {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--colour-2);
  background: var(--white);
  margin: 0;
}

.resource-feature-summary .button {
  background: var(--colour-4);
  border: 1px solid var(--colour-2);
  color: var(--colour-1);
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  height: 42px;
  width: 250px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.resource-placeholder {
  min-height: 492px;
}

.resource-placeholder .resource-feature-summary {
  width: 250px;
}

.resource-placeholder-details {
  flex: 0 0 694px;
  width: 100%;
  max-width: 694px;
  min-height: 353.5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  color: var(--colour-2);
}

.resource-placeholder-details ol {
  margin: 0;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  list-style-position: inside;
}

.resource-placeholder-details li {
  margin: 0;
}

.resource-feature-details {
  flex: 0 0 694px;
  width: 100%;
  max-width: 694px;
  min-height: 428px;
  color: var(--colour-2);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.resource-feature-details ol {
  margin: 0;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  list-style-position: inside;
}

.resource-feature-details li {
  margin: 0;
}

.resource-feature-details strong,
.resource-placeholder-details strong {
  display: block;
  margin-bottom: 8px;
  color: var(--colour-2);
}

.resource-feature-details .resource-note,
.resource-placeholder-details .resource-note {
  margin: 0;
  padding-left: 20px;
}

.resource-feature-details strong,
.resource-feature-details .resource-note li,
.resource-placeholder-details strong,
.resource-placeholder-details .resource-note li {
  font-family: "DM Sans", sans-serif;
  font-size: 20px;
  line-height: 110%;
  letter-spacing: 0.37px;
  color: var(--colour-2);
}

.resource-feature-details strong,
.resource-placeholder-details strong {
  font-weight: 500;
}

.resource-feature-details .resource-note li,
.resource-placeholder-details .resource-note li {
  font-weight: 300;
}

.resource-panel .resource-details {
  display: block;
}

@media only screen and (min-width: 800px) {
  .stacked-resources {
    grid-template-columns: repeat(12, 1fr);
  }

  .resource-panel {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--spacing8x6);
    grid-column: span 12;
  }

  .resource-panel .resource-summary {
    width: 260px;
    text-align: center;
  }

  .resource-feature .resource-summary {
    width: 250px;
  }

  .resource-panel-details {
    padding-left: var(--spacing8x6);
  }
}

@media only screen and (max-width: 799px) {
  .stacked-resources {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  .resource-feature {
    min-height: auto;
    max-width: 100%;
    width: 100%;
  }

  .resource-feature-inner {
    flex-direction: column;
    padding: 24px;
    gap: 24px;
  }

  .resource-feature-summary {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    min-height: auto;
  }

  .resource-feature-details {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-height: auto;
    display: none;
  }

  .resource-feature-details ol {
    padding: 0;
  }

  .resource-placeholder-details {
    display: none;
  }
}

.callout-image {
  background: url('../img/placeholder_bg.png') no-repeat center center/cover;
  width: 100%;
  height: 100%;
  min-height: 300px;
}







/*  Content section */

section p + a.button {
  margin-top: var(--spacing8x12);
}


/* Footer Styles */
footer {
  width: 100%;
  background: transparent;
  color: var(--colour-3);
  padding: 40px 20px 20px;
  /* Try customizing: background gradients, text alignment, etc. */
}

footer img {
  width: 160px;
}

.footer-email {
  color: var(--colour-3);
  font-family: "DM Sans", sans-serif;
  font-size: var(--spacing8x3, 24px);
  font-style: normal;
  font-weight: 500;
  line-height: 110%;
  letter-spacing: 0.15px;
  text-align: right;
}

footer hr {
  margin: 10px 0 20px;
  border: none;
  border-bottom: 1.5px solid var(--primary-25);
}

footer a, footer p {
  color: var(--colour-3);
  font-size: 12px;
}

footer .footer-right {
  text-align: right;
  display: block;
}

footer nav a { 
  font-size: 14px;
}

footer nav a + a {
  margin-left: 40px;
}

footer nav, footer p {
  text-align: right;
}

/* Mobile Footer Adjustments */
@media only screen and (max-width: 799px) {
  .about-section {
    padding: 64px 20px;
    justify-content: flex-start;
  }
  .about-title {
    font-size: var(--spacing8x3, 24px);
  }
  .about-title br {
    display: none;
  }
  footer nav {
    text-align: center;
  }

  footer img {
    margin: 0 auto;
  }
}

/* ==========================================================================
   COMPONENTS - CUSTOMIZE REUSABLE ELEMENTS
   ========================================================================== */

.check-out-banner {
  padding: 32px calc(50vw - 50%);
  height: 136px;
  border-top: 1px solid var(--colour-3);
  border-bottom: 1px solid var(--colour-3);
  background: var(--colour-1);
}

.check-out-banner .check-out-wrapper {
  width: auto;
  max-width: 1274px;
  margin: 0 auto;
}

.check-out-banner h2 {
  color: var(--colour-4);
  text-align: center;
  margin: 0;
  font-size: clamp(24px, 6vw, 40pt);
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 2 / span 10;
}

.check-out-banner h2.start-col-3 {
  grid-column: 1 / -1;
}

.dark-bg-wrapper h3,
.dark-bg-wrapper h4,
.dark-bg-wrapper p {
  color: var(--white);
}

.dark-bg-wrapper a.button {
  border: 2px solid var(--white);
  color: var(--white);
} 


   /* Divider Lines */
hr {
  border: none;
  border-bottom: 1.5px solid var(--primary-25);
  /* Try adding: margin, different border styles, gradients */
}

/* Icon with Text Component */
.icon-with-text i {
  background: var(--grey);
  padding: 17px 16px 23px;
  border-radius: 200px;
  font-size: 30px;
  color: var(--primary-80);
  /* Try customizing: colors, sizing, border-radius, box-shadow */
}







/* ==========================================================================
   RESPONSIVE CUSTOMIZATIONS
   ========================================================================== */

/* Mobile-specific customizations */
@media only screen and (max-width: 799px) {
  /* Add mobile-specific styling here */
  
  /* Example: Larger touch targets for mobile */
  a.button {
    padding: 18px 24px 14px;
    font-size: 16px;
  }

  
  .callout-image {
    height: 33vh;
  }

  .showcase-grid {
    grid-template-columns: minmax(0, 1fr);
    padding: 32px 20px;
    height: auto;
  }

  .showcase-card {
    width: 332px;
    max-width: 100%;
    margin: 0 auto;
  }
}

/* Tablet-specific customizations */
@media only screen and (min-width: 800px) and (max-width: 1279px) {
  /* Add tablet-specific styling here */
}

/* Desktop-specific customizations */
@media only screen and (min-width: 1280px) {
  /* Add desktop-specific styling here */
}

/* Quote Section */
.quote-section blockquote {
  margin: 0;
  padding: 0;
}

.quote-section blockquote p {
  font-size: 24px;
  font-style: italic;
  color: var(--white);
  margin-bottom: var(--spacing8x2);
  line-height: 1.4;
}

.quote-section cite {
  font-size: 16px;
  color: var(--primary-25);
  font-style: normal;
  font-weight: 500;
}
.resource-panel {
  background: #FDFF8A;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
  padding: var(--spacing8x6);
  display: flex;
  flex-direction: column;
  gap: var(--spacing8x4);
}

.resource-panel .resource-summary {
  text-align: center;
}

.resource-panel-details {
  width: 100%;
}

.resource-panel-details ol {
  margin: 0;
  padding-left: var(--spacing8x4);
}

.resource-panel-details li {
  margin-bottom: var(--spacing8x2);
  color: #2f2e38;
}

.resource-panel-details strong {
  display: block;
  margin-bottom: var(--spacing8x1);
}

@media only screen and (min-width: 800px) {
  .resource-panel {
    flex-direction: row;
    align-items: flex-start;
  }

  .resource-panel .resource-summary {
    width: 260px;
  }
}
.about-section {
  display: flex;
  width: 100vw;
  padding: 64px 20px;
  align-items: flex-start;
  justify-content: center;
  gap: 50px;
  background-color: var(--colour-6);
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  margin-top: 0;
  margin-bottom: 0;
  box-sizing: border-box;
  flex-wrap: wrap;
}

.about-title {
  margin: 0;
}

.about-copy {
  color: var(--colour-5);
  line-height: 48px; /* 200% */
  margin: 0;
}

@media only screen and (max-width: 799px) {
  .check-out-banner {
    padding: 24px 20px;
    height: auto;
  }
}
.check-out-banner h2 {
  color: var(--colour-4);
  text-align: center;
  margin: 0;
  font-size: clamp(24px, 6vw, 40pt);
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 4 / span 6;
}
.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 456px));
  justify-content: center;
  gap: 32px;
  padding: 40px 200px;
}

.faq-card {
  background: var(--colour-5);
  border-radius: 10px;
  padding: 24px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  color: var(--colour-2);
  max-width: 456px;
  width: 100%;
}

.faq-card h4 {
  color: var(--colour-2);
  font-size: 28px;
  font-family: "DM Mono", monospace;
  margin-top: 0;
  margin-bottom: 48px;
  text-align: left;
}

.faq-card h5 {
  color: var(--colour-2);
  font-size: 18px;
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
  text-align: left;
}

@media only screen and (max-width: 799px) {
  .faq-grid {
    grid-template-columns: 1fr;
    padding: 40px 20px;
  }
}
.colour-6-bg {
  background: var(--colour-6);
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-top: 64px;
  padding-bottom: 64px;
  margin-top: 0;
  margin-bottom: 0;
}
.dual-full-width {
  background: var(--colour-6);
}

.dual-full-width.contact-section {
  background: var(--white);
}
.activities-colour-3 {
  color: var(--colour-3);
}