/*
 Theme Name: UTS
 Version: 1.0.0
 Text Domain: uts
 Author: Obaro Egbane
*/

/*---------- CSS Reset ----------*/

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

/* Remove default margin and padding, and reset font default */
* {
  margin-inline: 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;
}

/* Set height on html and body */

html,
body {
	height: 100%;
}

/* Set paragraph and heading defaults */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: 1em;  /* Adjust as needed */
}

/* 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;
  }
}

/*---------- Root ----------*/

:root {
  
/* Fonts */

/* Primary font → clean modern sans */
--ff-primary: 'Inter', Arial, Helvetica, sans-serif;

/* Secondary font → flexible display/headline font */
--ff-secondary: 'Plus Jakarta Sans', 'Inter', Arial, Helvetica, sans-serif;

/* Colors */
  --color-black: #020202;
  --color-black-alt: #0e0e0e;
  --color-true-black: #000000;
  --color-black-text: #231f20;
  --color-black-text-alt-grey: #b2b1b1;
  --color-grey: #3b3f46;
  --color-lighter-grey: #e6e6e7;
  --color-light-grey: #cdced0;
  --color-light-grey-alt: #8a8a8a;
  --color-raspberry: #9b2d54;
  --color-deep-raspberry: #771236;
  --color-blue: #3a7ebf;
  --color-muted-blue: #3b6f9e;
  --color-red: #eb2337;
  --color-red-alt: #c91d2f;
  --color-white: #ffffff;
  --color-green: #429351;
  --color-deep-green: #377b4d;
  --color-orange: #efb14c;
  --color-muted-orange: #d68857;
}

/*---------- Foundational Styles ----------*/

body {
  font-family: var(--fs-primary);
  font-size: 1rem;
  color: var(--color-black-text);
  background-color: var(--color-white);
  padding: 0;
}

p, a, address, span, li, button, input, textarea {
  font-family: var(--ff-primary); 
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-secondary); 
}

/*---------- Container ----------*/

.container {
  max-width: 78.125rem;
  width: 100%;
  padding-inline: 1.25rem;
  margin-inline: auto;
}

.container-alt {
  max-width: 78.125rem;
  width: 100%;
  margin-inline: auto;
}

/*---------- Header ----------*/

.site-header { 
  display: f;
  position: sticky;
  top: 0;
  max-width: 100%;
  width: 100%;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-light-grey);
  z-index: 1000;  
}

.site-header.scrolled {
  border-bottom: 0;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 6.25rem;
}

.site-logo a img {
  width: 8rem;
  height: auto;
}

/*---------- Navigation ----------*/

.navigation-elements {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 5rem;
}

.main-navigation {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 999;
}

.main-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-navigation li {
  display: flex !important;
  align-items: center !important;
  width: calc(100% - 2rem);
  margin-inline: auto;
}

.main-navigation li:not(:last-child) {
  border-bottom: 1px solid var(--color-white);
}

.menu-link {
  display: flex;
  align-items: center;
  position: relative;
  text-decoration: none;
  font-family: var(--ff-primary);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--color-white);
  width: 100%;
  padding: 0.938rem 0;
}

.main-navigation > ul {
  position: fixed;
  top: 6.25rem;
  left: 0;
  width: 100%;
  height: calc(100vh - 6.25rem);
  background-color: var(--color-deep-raspberry);
  overflow: hidden;
  transform: translateX(-100%);
  transition: transform .35s ease;
  z-index: 999;
}

.main-navigation.open > ul {
  transform: translateX(0);
}

/* Mobile sliding submenu */
.sub-menu {
  position: fixed;
  top: 0;
  left: 100%;
  width: 100%;
  height: calc(100vh - 7.813rem);
  background-color: var(--color-deep-raspberry);
  overflow-y: auto;
  transform: translateX(0);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
}

.sub-menu.active {
  transform: translateX(-100%);
}

.menu .menu-item-has-children > a,
.sub-menu .menu-item-has-children > a {
  display: grid;
  grid-template-columns: 1fr 1.25rem; 
  align-items: center;              
  column-gap: 0.625rem;                
}

.back-button {
  display: flex;
  align-items: center;
  font-size: 1.125rem;
  text-align: left;
  color: var(--color-white);
  width: calc(100% - 2rem);
  margin-inline: auto;
  padding: 0.875rem 0.938rem;
  padding: 0.938rem 0.938rem;
  padding: 0.938rem 0;
  background-color: var(--color-deep-raspberry);
  border: 0;
  border-bottom: 1px solid var(--color-white);
  outline: 0;
  cursor: pointer;
}

.back {
  display: inline-flex;
  align-items: center;
}

.back-button-chevron {
  width: 0.938rem;
  height: 0.938rem;
  margin-left: 0.125rem;
  border-left: 0.125rem solid var(--color-white);
  border-bottom: 0.125rem solid var(--color-white);
  transform: rotate(45deg);
  display: block;
  flex: 0 0 auto;
}

.back-text {
  display: inline-block;
  line-height: 1;
}

body.menu-open {
  overflow: hidden;
}

/*---------- Hamburger ----------*/

.menu-toggle {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.menu-toggle span {
  position: absolute;
  left: 0.25rem;
  right: 0.25rem;
  height: 0.125rem;
  background-color: var(--color-black);
  transform-origin: center;
  transition: opacity .3s ease;
}

.menu-toggle span:nth-child(1) {
  top: 0.75rem;
}

.menu-toggle span:nth-child(2) {
  top: 1.1875rem;
}

.menu-toggle span:nth-child(3) {
  top: 1.625rem;
}

/* Opening animation */
.menu-toggle.active span:nth-child(1) {
  animation: hamburger-top .45s ease forwards;
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  animation: hamburger-bottom .45s ease forwards;
}

/* Closing animation */
.menu-toggle:not(.active) span:nth-child(1) {
  animation: hamburger-top-close .45s ease forwards;
}

.menu-toggle:not(.active) span:nth-child(3) {
  animation: hamburger-bottom-close .45s ease forwards;
}

/* Top bar: collapse, then rotate */
@keyframes hamburger-top {
  0% {
    transform: translateY(0) scaleX(1);
  }
  50% {
    transform: translateY(0.4375rem) scaleX(0.35);
  }
  100% {
    transform: translateY(0.4375rem) rotate(45deg) scaleX(1);
  }
}

/* Bottom bar: collapse, then rotate */
@keyframes hamburger-bottom {
  0% {
    transform: translateY(0) scaleX(1);
  }
  50% {
    transform: translateY(-0.4375rem) scaleX(0.35);
  }
  100% {
    transform: translateY(-0.4375rem) rotate(-45deg) scaleX(1);
  }
}

/* Top bar: reverse the X into a full bar */
@keyframes hamburger-top-close {
  0% {
    transform: translateY(0.4375rem) rotate(45deg) scaleX(1);
  }
  50% {
    transform: translateY(0.4375rem) scaleX(0.35);
  }
  100% {
    transform: translateY(0) scaleX(1);
  }
}

/* Bottom bar: reverse the X into a full bar */
@keyframes hamburger-bottom-close {
  0% {
    transform: translateY(-0.4375rem) rotate(-45deg) scaleX(1);
  }
  50% {
    transform: translateY(-0.4375rem) scaleX(0.35);
  }
  100% {
    transform: translateY(0) scaleX(1);
  }
}

/*---------- Arrow ----------*/

.icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
}

.chevron-down {
  width: 0.625rem;
  height: 0.625rem;
  border-right: 0.125rem solid var(--color-white);
  border-bottom: 0.125rem solid var(--color-white);
  transform: rotate(-45deg);
  transform-origin: center;
  transition: transform 0.4s ease-out;
}

/*---------- Homepage ----------*/

.hero {
  position: relative;
  padding: 3.125rem 0;
  overflow: hidden;
}

.hero img.uts-logo-icon {
  position: absolute;
  right: -5%;
  bottom: -10%;
  width: 95%;
}

.hero-text h1 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 0.938rem;
} 

.hero-text p {
  font-size: 1.125rem;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}

.hero-text a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  text-decoration: none;
  text-align: center;
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-true-black);
  line-height: 1;
  width: 13.438rem;
  margin-bottom: 2.188rem;
  padding: 1.25rem 1.75rem;
  background-color: var(--color-orange);
  border-radius: 999px;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.hero-text a:hover {
  transform: translateY(-2px);
  background-color: var(--color-muted-orange);
  box-shadow: 0 12px 28px rgba(239, 177, 76, 0.35);
}

.hero-image {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 15px;
  overflow: hidden;
  z-index: 2;
}

.hero-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Homepage Parters */
.partners {
  padding: 3.125rem 0;
  background-color: var(--color-orange);
}

.partners-container h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-true-black);
  line-height: 1.28;
  margin-bottom: 0.625rem;
}

.partners-container p {
  font-size: 1.125rem;
  color: var(--color-true-black);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.partners-container a {
  display: inline-flex;
  align-items: center;
  column-gap: 0.156rem;
  align-self: flex-start;
  text-decoration: none;
  color: var(--color-true-black);
  font-weight: 700;
  width: fit-content;
  padding-bottom: 0.219rem;
  border-bottom: 1px solid var(--color-true-black);
}

.partners-container a svg {
  margin-top: 0.125rem;
}

.partners-slide {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  margin-bottom: 2.188rem;
}

.slider-intro {
  display: none;
}

/* Homepage Partners Slider */
.partners-swiper {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 0.781rem 0 !important;
}

.partners-swiper .swiper-wrapper {
  align-items: center;
  transition-timing-function: linear !important;
}

.partners-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
}

.partners-swiper .swiper-slide img {
  display: block !important;
  max-width: 100%;
  width: 12.5rem !important;
  height: auto;
  object-fit: contain;
}

.partners-swiper .swiper-slide img.aims {
  width: 5rem !important;
}

.partners-swiper .swiper-slide img.gaisf {
  width: 6.25rem !important;
}

.partners-swiper .swiper-slide img.sportaccord {
  width: 6.25rem !important;
}

/* Homepage Programmes */
.programme {
  padding-bottom: 4.688rem;
  background-color: var(--color-white); 
}

.programme-image {
  height: 17.188rem;
  margin-bottom: 3.125rem;
  overflow: hidden;
}

.programme-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.programme-text-left {
  margin-bottom: 2.188rem;
}

.programme-text-left h2 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 0.938rem;
}

.programme-text-left p {
  font-size: 1.125rem;
  line-height: 1.8;
  margin-bottom: 1.563rem;
}

.programme-text-left a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  text-decoration: none;
  text-align: center;
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-white);
  line-height: 1;
  width: 13.438rem;
  padding: 1.25rem 1.75rem;
  background-color: var(--color-raspberry);
  border-radius: 999px;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.programme-text-left a:hover {
  transform: translateY(-2px);
  background-color: var(--color-deep-raspberry);
  box-shadow: 0 12px 28px rgba(119, 18, 54, 0.35);
}

.programme-text-right {
  position: relative;
}

.programme-cards {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  row-gap: 1.563rem;
  position: relative;
}

.programme-card {
  width: 100%;
  background-color: var(--color-white);
  border: 1px solid var(--color-grey);
  border-radius: 15px;
}

.programme-card-inner {
  position: relative;
  padding: 1.875rem 1.25rem;
  overflow: hidden;
}

.programme-number {
  display: block;
  font-family: var(--ff-secondary);
  font-weight: 600;
  margin-bottom: 0.938rem;
}

.programme-number .text {
  display: flex;
  align-items: center;
  column-gap: 0.625rem;
}

.programme-number .circle {
  display: block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
}

.programme-number .circle.one {
  background-color: var(--color-orange);
}

.programme-number .circle.two {
  background-color: var(--color-raspberry);
}

.programme-number .circle.three {
  background-color: var(--color-blue);
}

.programme-number .circle.four {
  background-color: var(--color-green);
}

.programme-card-inner h3 {
  position: relative;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 0.938rem;
  z-index: 1;
}

.programme-card-inner p {
  position: relative;
  line-height: 1.8;
  z-index: 1;
}

/* Homepage Reach */
.reach {
  padding: 3.75rem 0 2.813rem 0;
  background-color: var(--color-deep-raspberry); 
}

.reach-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.reach-container h2 {
  text-align: center;
  font-size: 1.875rem;
  font-weight: 700;
  background: linear-gradient(
    100deg,
    var(--color-raspberry) 0%,
    var(--color-white) 50%,
    var(--color-white) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1.25rem;
}

.reach-container p {
  text-align: center;
  font-size: 1.25rem;
  color: var(--color-white);
  line-height: 1.5;
}

.impact-numbers {
  display: flex;
  flex-direction: column;
}

.impact-number {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 0.625rem;
  position: relative;
  min-height: 10.938rem;
  width: 12.5rem;
  padding: 1.563rem 1.563rem;
}

.impact-number:not(:last-child) {
  border-bottom: 1px solid var(--color-white);
}

.impact-number .number {
  text-align: center;
  font-size: 3.125rem;
  color: var(--color-white);
}

.impact-number .focus {
  text-align: center;
  color: var(--color-white);
}

/* UTS News Slider */
.uts-news {
  padding: 3.125rem 0;
  background-color: var(--color-white);
  overflow: hidden;
}

.uts-news-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.188rem;
}

.uts-news-header h2 {
  font-size: 1.625rem;
  font-weight: 800;
  color: var(--color-black-text);
  line-height: 1.1;
}

.uts-news-navigation {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.313rem;
}

.uts-news-navigation button {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-true-black);
  width: 2.375rem;
  height: 2.375rem;
  padding: 0;
  background-color: var(--color-blue);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.uts-news-navigation button:hover {
  color: var(--color-white);
  background-color: var(--color-deep-raspberry);
}

.uts-news-navigation button:active {
  transform: scale(0.95);
}

.uts-news-navigation button svg {
  display: block;
  width: 1.375rem;
  height: 1.375rem;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.uts-news-swiper {
  margin-bottom: 2.188rem;
  overflow: visible;
}

.uts-news-swiper .swiper-wrapper {
  align-items: stretch;
}

.uts-news-swiper .swiper-slide {
  display: flex;
  align-items: stretch;
  height: auto;
}

.uts-news-swiper .news-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.uts-news-swiper .item-image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 15px;
}

.uts-news-swiper .item-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.uts-news-swiper .news-item-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
  padding: 1.25rem 0 0.313rem 0;
}

.news-item-text .post-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-bottom: 0.938rem;
}

.news-item-text .post-categories a {
  text-transform: uppercase;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-black-text);
}

.uts-news-swiper .news-card-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.3;
  width: 100%;
  height: 3.9em;
  margin-bottom: 1.875rem;
  overflow: hidden;
}

.uts-news-swiper .news-card-title a {
  color: inherit;
  text-decoration: none;
}

.uts-news-swiper .news-card-title a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.uts-news-swiper .news-date {
  display: block;
  font-family: var(--ff-primary);
  font-size: 0.875rem;
  color: var(--color-grey);
}

.swiper-footer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  text-decoration: none;
  text-align: center;
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-true-black);
  line-height: 1;
  width: 13.438rem;
  padding: 1.25rem 1.75rem;
  background-color: var(--color-blue);
  border-radius: 999px;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.swiper-footer a:hover {
  transform: translateY(-2px);
  background-color: var(--color-muted-blue);
  box-shadow: 0 12px 28px rgba(59, 111, 158, 0.35);
}

/* Homepage Get Involved */
.homepage-get-involved {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 3.75rem 0 6.25rem 0;
  background-color: var(--color-black);
  background: linear-gradient(to bottom, var(--color-true-black) 0%, var(--color-black) 77.5%, var(--color-raspberry) 100%);
  overflow: hidden;
}

.homepage-get-involved img {
  display: block;
  position: absolute;
  top: -5%;
  right: -10%;
  width: 65%;
}

.homepage-get-involved-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.homepage-get-involved-text h2 {
  position: relative;
  text-align: center;
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-white);
  line-height: 1.2;
  margin-bottom: 1.563rem;
  z-index: 2;
}

.homepage-get-involved-text p {
  position: relative;
  text-align: center;
  font-size: 1.125rem;
  color: var(--color-white);
  line-height: 1.6;
  margin-bottom: 1.875rem;
  z-index: 2;
}

.homepage-get-involved-text p .bold {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--color-orange);
}

.ways {
  display: flex;
  flex-direction: column;
  row-gap: 2.188rem;
  position: relative;
  z-index: 2;
}

.way {
  display: flex;
  flex-direction: column;
  height: 15.625rem;
  border-radius: 8px;
  overflow: hidden;
}

.way h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-black);
  width: 100%;
  height: 35%;
  padding: 0.938rem 0.938rem;
}

.way h3.orange {
  background-color: var(--color-orange);
}

.way h3.raspberry {
  background-color: var(--color-raspberry);
}

.way h3.blue {
  background-color: var(--color-blue);
}

.way h3.green {
  background-color: var(--color-green);
}

.way-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-black);
  width: 100%;
  height: 65%;
  padding: 2.188rem 0.938rem;
  background-color: var(--color-white);
}

.way-detail p {
  text-align: center;
  font-weight: 500;
  line-height: 1.4;
  height: 2.813rem;
  margin-bottom: 0.938rem;
}

.way-detail a {
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-black-text);
  margin-top: auto;
  padding: 0.469rem 0.938rem;
  border: 1px solid var(--color-grey);
  border-radius: 15px;
  background-color: transparent;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.way-detail a:hover {
  background-color: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}

/*---------- What We Do ----------*/

.what-we-do-header {
  padding: 4.063rem 0;
  background-color: var(--color-black);
  background-image: url("../uts/assets/images/young-female-footballers.webp");
  background-size: cover;
  background-repeat: no-repeat;
}

.what-we-do-header-container h1 {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--color-white);
  line-height: 1.26;
  margin-bottom: 0.938rem;
}

.what-we-do-header-container p {
  font-size: 1.25rem;
  color: var(--color-white);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}

.what-we-do-header-container a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  text-decoration: none;
  text-align: center;
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-true-black);
  line-height: 1;
  width: 13.438rem;
  margin-bottom: 2.188rem;
  padding: 1.25rem 1.75rem;
  background-color: var(--color-orange);
  border-radius: 999px;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.what-we-do-header-container a:hover {
  transform: translateY(-2px);
  background-color: var(--color-muted-orange);
  box-shadow: 0 12px 28px rgba(239, 177, 76, 0.35);
}

.what-we-do {
  padding: 4.063rem 0 2.188rem 0;
  background-color: var(--color-deep-raspberry);
}

.what-we-do-container {
  display: flex;
  flex-direction: column;
  align-content: start;
  gap: 1.563rem;
}

.what-we-do-details {
  padding: 2.188rem 0.938rem;
  border: 1px solid var(--color-orange);
  border-radius: 25px;
  box-shadow: 0 8px 20px rgba(119, 18, 54, 0.25);
}

.details-intro {
  display: inline-block;
  font-family: var(--ff-secondary);
  font-size: 1.25rem;
  color: var(--color-orange);
  margin-bottom: 1.563rem;
}

.what-we-do-details h2 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 1.25rem;
}

.what-we-do-details p:not(.checklists p) {
  font-size: 1.25rem;
  color: var(--color-white);
  line-height: 1.8;
}

.what-we-do-details.extra-details p {
  margin-bottom: 1.563rem;
}

.what-we-do-details .checklists {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.what-we-do-details .checklists .checklist {
  display: grid;
  grid-template-columns: 1.125rem 1fr;
  column-gap: 0.469rem;
  color: var(--color-white);
  margin: 0;
  padding: 0;
}

.what-we-do-details .checklists .checklist svg {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-orange);
  margin-top: 0.313rem;
}

.what-we-do-details .checklists .checklist p {
  margin: 0;
  line-height: 1.5;
}

.young-leaders-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 18.75rem;
  background-color: var(--color-deep-raspberry);
  background-image: url("../uts/assets/images/youth-delegates.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}

.young-leaders-header h2 {
  text-align: center;
  font-size: 4.375rem;
  font-weight: 800;
  color: var(--color-white);
  line-height: 0.9;
  margin-top: 0.938rem;
  text-shadow: 0 8px 20px rgba(119, 18, 54, 0.65);
}

.young-leaders-container {
  padding: 3.125rem 0 4.688rem 0;
}

.young-leaders-intro {
  display: flex;
  justify-content: center;
}

.young-leaders-intro p {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 2.188rem;
}

.young-leaders-intro p .bold {
  font-weight: 800;
}

.young-leaders-profiles {
  display: flex;
  flex-direction: column;
  gap: 2.188rem;
}

.young-leaders-profiles .profile {
  padding: 1.563rem;
  border: 1px solid var(--color-light-grey-alt);
  border-radius: 10px;
}

.young-leaders-profiles .profile h3 {
  font-family: var(--ff-secondary);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.625rem;
}

.young-leaders-profiles .profile .sport {
  display: inline-flex;
  align-items: center;
  column-gap: 0.469rem;
  font-family: var(--ff-secondary);
  font-weight: 500;
  color: var(--color-grey);
  margin-bottom: 0.625rem;
}

.young-leaders-profiles .profile .sport svg {
  color: var(--color-raspberry);
  width: 1.375rem;
}

.young-leaders-profiles .profile .sport .circle {
  display: block;
  width: 0.625rem;
  height: 0.625rem;
  background-color: var(--color-orange);
  border-radius: 50%;
}

.young-leaders-profiles .profile p {
  line-height: 1.6;
}

/*---------- About Us ----------*/

.about-us-header {
  position: relative;
  padding: 3.438rem 0;
  background-color: var(--color-blue);
  overflow: hidden;
}

.about-us-header-container h1 {
  position: relative;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--color-true-black);
  line-height: 1.15;
  margin-bottom: 0.938rem;
  z-index: 2;
}

.about-us-header-container p {
  position: relative;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-true-black);
  color: var(--color-white);
  line-height: 1.7;
  z-index: 2;
}

.about-us-header img {
  position: absolute;
  right: -15%;
  bottom: -10%;
}

.youth-development {
  padding: 3.125rem 0 2.5rem 0;
}

.youth-development-container h2 {
  font-size: 1.625rem;
  font-weight: 800;
  line-height: 1.4;
  color: var(--color-black);
  margin-bottom: 1.25rem;
}

.youth-development-text p {
  font-size: 1.125rem;
  line-height: 1.8;
}

.youth-development-text p:first-child {
  margin-bottom: 1.25rem;
}

.uts-values {
  padding-bottom: 4.063rem;
}

.uts-values-container hr {
  margin-bottom: 2.813rem;
  border: none;
  border-top: 1px solid var(--color-grey);
}

.uts-values-container h2 {
  font-size: 1.625rem;
  font-weight: 800;
  line-height: 1.4;
  color: var(--color-black);
  margin-bottom: 1.25rem;
}

.uts-values-container > p {
  font-size: 1.125rem;
  line-height: 1.8;
  margin-bottom: 1.563rem;
}

.uts-values .values {
  display: grid;
  grid-auto-rows: 1fr;
  row-gap: 1.563rem;
}

.uts-values .values .value {
  padding: 1.875rem 1.25rem;
  border: 1px solid var(--color-grey);
  border-radius: 15px;
}

.uts-values .values .value h3 {
  display: flex;
  align-items: first baseline;
  column-gap: 0.625rem;
  font-weight: 800;
  margin-bottom: 0.938rem;
}

.uts-values .values .value h3 .circle {
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background-color: var(--color-orange);
}

.uts-values .values .value h3 .circle.orange {
  background-color: var(--color-orange);
}

.uts-values .values .value h3 .circle.raspberry {
  background-color: var(--color-raspberry);
}

.uts-values .values .value h3 .circle.blue {
  background-color: var(--color-blue);
}

.uts-values .values .value h3 .circle.green {
  background-color: var(--color-green);
}

.uts-values .values .value p {
  line-height: 1.8;
}

.uts-leadership {
  padding: 3.75rem 0;
  background-color: var(--color-orange);
}

.uts-leadership-text {
  margin-bottom: 2.188rem;
}

.uts-leadership-text h2 {
  font-size: 1.625rem;
  font-weight: 800;
  color: var(--color-true-black);
  line-height: 1.4;
  margin-bottom: 1.25rem;
}

.uts-leadership-text p {
  font-size: 1.125rem;
  color: var(--color-true-black);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}

.uts-leadership-text a {
  display: inline-flex;
  align-items: center;
  column-gap: 0.156rem;
  align-self: flex-start;
  text-decoration: none;
  color: var(--color-true-black);
  font-weight: 700;
  width: fit-content;
  padding-bottom: 0.219rem;
  border-bottom: 1px solid var(--color-true-black);
}

.uts-leaders {
  display: flex;
  flex-direction: column;
  row-gap: 2.188rem;
}

.uts-leaders .leader {
  color: var(--color-true-black);
  padding: 1.563rem 1.563rem;
  background-color: var(--color-white);
  border-radius: 15px;
}

.uts-leaders .leader .leader-picture {
  width: 115px;
  height: 115px;
  border-radius: 50%;
  margin-bottom: 0.938rem;
  overflow: hidden;
}

.uts-leaders .leader .leader-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.uts-leaders .leader h3 {
  font-size: 1.125rem;
  font-weight: 800;
  margin-bottom: 0.469rem;
}

.uts-leaders .leader .position {
  display: inline-block;
  font-weight: 600;
  margin-bottom: 0.625rem;
}

.uts-leaders .leader p {
  line-height: 1.6;
}

.about-us-cta {
  padding: 3.75rem 0;
  background-color: var(--color-lighter-grey);
}

.about-us-cta-container h2 {
  font-size: 1.625rem;
  font-weight: 800;
  color: var(--color-true-black);
  line-height: 1.4;
  margin-bottom: 1.25rem;
}

.about-us-cta-container p {
  font-size: 1.125rem;
  color: var(--color-true-black);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}

.about-us-cta-container a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-align: center;
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-white);
  line-height: 1;
  width: 13.438rem;
  padding: 1.25rem 1.75rem;
  background-color: var(--color-raspberry);
  border-radius: 999px;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.about-us-cta-container a:hover {
  transform: translateY(-2px);
  background-color: var(--color-deep-raspberry);
  box-shadow: 0 12px 28px rgba(119, 18, 54, 0.35);
}

/*---------- Impact ----------*/

.impact-header {
  padding: 4.063rem 0;
  background-color: var(--color-black);
  background-image: url("../uts/assets/images/teenagers.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

.impact-header-container h1 {
  display: flex;
  align-items: center;
  column-gap: 0.625rem;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-white);
  line-height: 1.2;
  margin-bottom: 1.563rem;
}

.impact-header-container h1 .circle {
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background-color: var(--color-orange);
}

.impact-header-container h2 {
  font-size: 2.813rem;
  font-weight: 800;
  color: var(--color-white);
  line-height: 1;
  background: linear-gradient( 145deg, var(--color-white) 0%, var(--color-orange) 40%, var(--color-raspberry) 75%, var(--color-raspberry) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.impact-table {
  padding: 3.125rem 0 4.063rem 0;
  background-color: var(--color-black);
}

.impact-table-container h2 {
  font-size: 1.625rem;
  font-weight: 800;
  background: linear-gradient(
    100deg, 
    var(--color-black) 0%, 
    var(--color-white) 10%, 
    var(--color-white) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin-bottom: 1.875rem;
}

.programme-table-wrapper {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--color-raspberry) var(--color-light-grey);
}

.programme-table-wrapper::-webkit-scrollbar {
  height: 0.438rem;
}

.programme-table-wrapper::-webkit-scrollbar-track {
  background: var(--color-light-grey);
  border-radius: 10px;
}

.programme-table-wrapper::-webkit-scrollbar-thumb {
  background: var(--color-raspberry);
  border-radius: 10px;
}

.programme-table-container {
  width: max-content;
  min-width: 0;
  background: var(--color-white);
  border-radius: 16px;
  box-shadow: 0 18px 55px rgba(2, 2, 2, 0.08);
  overflow: hidden;
}

.programme-table {
  width: 56.25rem;
  min-width: 56.25rem;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  border-radius: 12px;
  color: var(--color-black-text);
  font-family: var(--ff-primary, "Inter", sans-serif);
  font-size: inherit;
  line-height: 1.55;
  text-align: left;
  box-shadow: 0 18px 55px rgba(2, 2, 2, 0.08);
}

/* Table caption */
.programme-table caption {
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -0.063rem;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Column widths */
.programme-table th:nth-child(1),
.programme-table td:nth-child(1) {
  width: 27%;
}

.programme-table th:nth-child(2),
.programme-table td:nth-child(2) {
  width: 14%;
}

.programme-table th:nth-child(3),
.programme-table td:nth-child(3) {
  width: 23%;
}

.programme-table th:nth-child(4),
.programme-table td:nth-child(4) {
  width: 36%;
}

/* Table header */
.programme-table thead th {
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.5;
  letter-spacing: 1.1px; 
  vertical-align: middle;
  padding: 1.25rem;
  background: var(--color-deep-raspberry);
  border: 0;
}

/* Table body */
.programme-table tbody td {
  padding: 1.25rem;
  background-color: var(--color-white);
  border: 0;
  border-bottom: 1px solid var(--color-light-grey);
  vertical-align: top;
  overflow-wrap: break-word;
  transition: background-color 0.2s ease;
}

.programme-table tbody tr:nth-child(even) td {
  background-color: var(--color-white);
}

.programme-table tbody tr:hover td {
  background-color: rgba(155, 45, 84, 0.06);
}

.programme-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Programme names */
.programme-table .programme-name {
  display: inline-block;
  font-size: 1em;
  font-weight: 700;
  color: var(--color-deep-raspberry);
  line-height: 1.5;
}

.reports-and-downloads {
  padding: 3.125rem 0 4.063rem 0;
  background-color: var(--color-blue);
}

.reports-and-downloads-container h2 {
  font-size: 1.625rem;
  font-weight: 800;
  color: var(--color-true-black);
  line-height: 1.2;
  margin-bottom: 1.875rem;
}

.reports-and-downloads-container .downloads {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  row-gap: 1.563rem;
}

.reports-and-downloads-container .downloads .item {
  border: 1px solid var(--color-true-black);
  border-radius: 15px;
  overflow: hidden;

}

.reports-and-downloads-container .downloads .item  .item-text {
  height: 65%;
  padding: 1.875rem 1.25rem;
  border-bottom: 1px solid var(--color-true-black);
  background-color: var(--color-blue);
}

.reports-and-downloads-container .downloads .item  .item-text h3 {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.4;
  color: var(--color-true-black);
  margin: 0 0 0.625rem;
}

.reports-and-downloads-container .downloads .item  .item-text p {
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-true-black);
  margin: 0;
}

.reports-and-downloads-container .downloads .item .item-link {
  display: flex;
  align-items: center;
  height: 35%;
  padding: 1.875rem 0.938rem;
}

.reports-and-downloads-container .downloads .item a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  padding: 0.625rem 0.938rem;
  border-radius: 20px;
  background-color: var(--color-true-black);
  color: var(--color-white);
  text-align: center;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.reports-and-downloads-container .downloads .item a:hover {
  background-color: var(--color-deep-raspberry);  
}

/*---------- Get Involved ----------*/

.get-involved-header {
  padding: 4.063rem 0;
  background-color: var(--color-black);
  background-image: url("../uts/assets/images/team-members.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

.get-involved-header-container h1 {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--color-white);
  line-height: 1.2;
  margin-bottom: 0.938rem;
}

 .get-involved-header-container p {
  font-size: 1.25rem;
  color: var(--color-white);
  line-height: 1.8;
}

.partner-with-uts {
  padding: 3.438rem 0;
}

.partner-with-uts-container h2 {
  font-size: 1.625rem;
  font-weight: 800;
  word-spacing: 0.125rem;
  margin-bottom: 0.938rem;
}

.partner-with-uts-container > p {
  font-size: 1.25rem;
  line-height: 1.8;
  margin-bottom: 1.875rem;
}

.partner-categories {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  row-gap: 2.188rem;
  position: relative;
  margin-bottom: 2.188rem;
}

.partner-with-uts .partner-category {
  padding: 1.25rem;
  border: 1px solid var(--color-grey);
  border-radius: 20px;
}

.partner-with-uts .partner-category h3 {
  display: flex;
  align-items: first baseline;
  column-gap: 0.625rem;
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 0.625rem;
}

.partner-with-uts .partner-category h3 .circle {
  display: block;
  width: 0.625rem;
  height: 0.625rem;
  background-color: var(--color-raspberry);
  border-radius: 50%;
}

.partner-with-uts .partner-category p {
  line-height: 1.7;
}

.partner-with-uts a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-align: center;
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-white);
  line-height: 1;
  width: 13.438rem;
  padding: 1.25rem 1.75rem;
  background-color: var(--color-raspberry);
  border-radius: 999px;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.partner-with-uts a:hover {
  transform: translateY(-2px);
  background-color: var(--color-deep-raspberry);
  box-shadow: 0 12px 28px rgba(119, 18, 54, 0.35);
}

.partner-with-uts-extra {
  padding: 3.75rem 0;
  background-color: var(--color-lighter-grey);
}

.partner-with-uts-extra-container {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  row-gap: 1.563rem;
}

.partner-with-uts-extra-container .category {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.875rem 11.5px;
  border: 1px solid var(--color-grey);
  border-radius: 20px;
}

.partner-with-uts-extra-container .category h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-true-black);
  word-spacing: 0.125rem;
  margin-bottom: 0.938rem;
}

.partner-with-uts-extra-container .category p {
  font-size: 1.075rem;
  color: var(--color-true-black);
  line-height: 1.8;
  margin-bottom: 1.875rem;
}

.partner-with-uts-extra-container .category.volunteer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  text-decoration: none;
  text-align: center;
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-true-black);
  line-height: 1;
  width: 100%;
  margin-top: auto;
  padding: 1.25rem 1.75rem;
  background-color: var(--color-blue);
  border-radius: 999px;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.partner-with-uts-extra-container .category.volunteer a:hover {
  transform: translateY(-2px);
  background-color: var(--color-muted-blue);
  box-shadow: 0 12px 28px rgba(59, 111, 158, 0.35);
}

.partner-with-uts-extra-container .category.join-uts a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-align: center;
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-true-black);
  line-height: 1;
  width: 100%;
  margin-top: auto;
  padding: 1.25rem 1.75rem;
  background-color: var(--color-green);
  border-radius: 999px;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.partner-with-uts-extra-container .category.join-uts a:hover {
  transform: translateY(-2px);
  background-color: var(--color-deep-green);
  box-shadow: 0 8px 20px rgba(66, 147, 81, 0.35);
}

.involvement-categories {
  padding: 6.25rem 0 12.5rem 0;
  background-color: var(--color-black);
  background: linear-gradient(to bottom, var(--color-true-black) 0%, var(--color-black) 77.5%, var(--color-raspberry) 100%);
}

.involvement-categories-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 1.563rem;
}

.involvement-categories-container > div:first-child {
  grid-column: 1 / -1;
}

.involvement-categories-container .category {
  padding: 2.188rem 1.563rem 2.813rem 1.563rem;
  border-radius: 25px;
}

.involvement-categories-container .category h2 {
  font-size: 1.625rem;
  font-weight: 800;
  color: var(--color-white);
  word-spacing: 0.125rem;
  margin-bottom: 0.938rem;
}

.involvement-categories-container .category.partner-with-uts {
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: var(--color-raspberry);
  overflow: hidden;
}

.involvement-categories-container .category.partner-with-uts img {
  position: absolute;
  right: -10%;
  bottom: -5%;
  width: 40.625rem;
}

.involvement-categories-container .category > p {
  font-size: 1.125rem;
  color: var(--color-white);
  line-height: 1.7;
}

.involvement-categories-container .category.partner-with-uts > p {
  position: relative;
  font-size: 1.25rem;
  color: var(--color-white);
  line-height: 1.8;
  width: 70%;
  margin-bottom: 1.25rem;
  z-index: 2;
}

.involvement-categories-container .category.partner-with-uts .partner-categories {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 1.563rem;
  position: relative;
  margin-bottom: 2.188rem;
  z-index: 2;
}

.involvement-categories-container .category.partner-with-uts .partner-category {
  padding: 1.25rem;
  background-color: var(--color-deep-raspberry);
  border-radius: 20px;
}

.involvement-categories-container .category.partner-with-uts .partner-category h3 {
  display: flex;
  align-items: center;
  column-gap: 0.625rem;
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--color-white);
  margin-bottom: 0.625rem;
}

.involvement-categories-container .category.partner-with-uts .partner-category h3 .circle {
  display: block;
  width: 0.625rem;
  height: 0.625rem;
  background-color: var(--color-orange);
  border-radius: 50%;
}

.involvement-categories-container .category.partner-with-uts .partner-category p {
  color: var(--color-white);
  line-height: 2;
}

.involvement-categories-container .category.partner-with-uts a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  text-decoration: none;
  text-align: center;
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-black);
  line-height: 1;
  width: 13.438rem;
  padding: 1.25rem 1.75rem;
  background-color: var(--color-orange);
  border-radius: 999px;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.involvement-categories-container .category.partner-with-uts a:hover {
  transform: translateY(-2px);
  background-color: var(--color-muted-orange);
  box-shadow: 0 12px 28px rgba(239, 177, 76, 0.35);
}

.involvement-categories-container .category.volunteer { 
  background-color: var(--color-blue);
}

.involvement-categories-container .category.volunteer h2, .involvement-categories-container .category.volunteer p { 
  color: var(--color-true-black);
}

.involvement-categories-container .category.volunteer p { 
  margin-bottom: 1.563rem;
}

.involvement-categories-container .category.volunteer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-align: center;
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-white);
  line-height: 1;
  width: 13.438rem;
  padding: 1.25rem 1.75rem;
  background-color: var(--color-raspberry);
  border-radius: 999px;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.involvement-categories-container .category.volunteer a:hover {
  transform: translateY(-2px);
  background-color: var(--color-deep-raspberry);
  box-shadow: 0 12px 28px rgba(119, 18, 54, 0.35);
}

.involvement-categories-container .category.join-uts { 
  background-color: var(--color-green);
}

.involvement-categories-container .category.join-uts h2, .involvement-categories-container .category.join-uts p { 
  color: var(--color-true-black);
}

.involvement-categories-container .category.join-uts p { 
  margin-bottom: 1.563rem;
}

.involvement-categories-container .category.join-uts a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-align: center;
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-white);
  line-height: 1;
  width: 13.438rem;
  padding: 1.25rem 1.75rem;
  background-color: var(--color-raspberry);
  border-radius: 999px;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.involvement-categories-container .category.join-uts a:hover {
  transform: translateY(-2px);
  background-color: var(--color-deep-raspberry);
  box-shadow: 0 12px 28px rgba(119, 18, 54, 0.35);
}

/*---------- Contact Us ----------*/

.contact-us {
  position: relative;
  padding: 4.063rem 0;
  background-color: var(--color-black);
  background-image: url("../uts/assets/images/meeting.webp");
  background-size: cover;
  background-repeat: no-repeat;
}

.contact-us-container {
  display: flex;
  flex-direction: column;
  row-gap: 2.813rem;
}

.contact-intro {
  position: relative;
  color: var(--color-white);
  margin-bottom: 1.563rem;
  padding-bottom: 1.563rem;
  border-bottom: 1px solid var(--color-white);
}

.contact-intro h1 {
  word-spacing: 3px;
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 1.25rem;
}

.contact-intro p {
  font-size: 1.125rem;
  line-height: 1.7;
}

.contact-information {
  position: relative;
  color: var(--color-white);
  z-index: 2;
}

.contact-category:first-of-type {
  margin-bottom: 0.938rem;
}

.contact-category h3 {
  font-weight: 700;
  margin-bottom: 0.313rem;
}

.contact-category address {
  line-height: 1.6;
}

.contact-form-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  padding: 2.188rem 0.938rem 0 0.938rem;
  background-color: var(--color-white);
  border-radius: 15px;
  box-shadow: 0 12px 28px rgba(119, 18, 54, 0.35);
  overflow: hidden;
}

.contact-form-container h2 {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1.563rem;
}

/* Contact Form 7 */
.cf7-contact-form {
  line-height: 1.6;
  width: 100% !important;
  max-width: 100% !important;
}

.cf7-contact-form .cf7-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100% !important;
}

.cf7-contact-form .cf7-field {
  min-width: 0;
  margin-bottom: 1.25rem !important;
}

.cf7-contact-form .cf7-row .cf7-field {
  margin-bottom: 1.25rem !important;
}

.cf7-contact-form .cf7-field p label {
  display: block;
  font-weight: 500;
  color: var(--color-black-text);
  line-height: 1.45;
  margin-bottom: 0.625rem;
}

.cf7-contact-form .cf7-field p br {
  display: none;
}

.cf7-contact-form .required {
  color: var(--color-raspberry);
  font-weight: 700;
}

.cf7-contact-form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

.cf7-contact-form input[type="text"],
.cf7-contact-form input[type="email"],
.cf7-contact-form input[type="tel"],
.cf7-contact-form select {
  display: block;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-black-text);
  width: 100%;
  min-width: 0;
  min-height: 58px;
  margin: 0;
  padding: 0.875rem;
  background-color: var(--color-white);
  border: 1px solid var(--color-light-grey-alt);
  border-radius: 9px;
  box-shadow: none;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cf7-contact-form input::placeholder {
  color: var(--color-light-grey-alt);
  opacity: 1;
}

.cf7-contact-form select {
  appearance: none;
  -webkit-appearance: none;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  padding-right: 2.188rem !important;
  overflow: hidden !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23771236' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 1.125rem;
  cursor: pointer;
}

.cf7-contact-form input[type="text"]:focus,
.cf7-contact-form input[type="email"]:focus,
.cf7-contact-form input[type="tel"]:focus,
.cf7-contact-form select:focus {
  border-color: var(--color-deep-raspberry);
  box-shadow: 0 0 0 3px rgba(119, 18, 54, 0.10);
}

.cf7-contact-form .wpcf7-not-valid {
  border-color: var(--color-red) !important;
}

.cf7-contact-form .wpcf7-not-valid:focus {
  box-shadow: 0 0 0 3px rgba(235, 35, 55, 0.10);
}

.cf7-contact-form .wpcf7-not-valid-tip {
  display: block;
  font-size: 0.813rem;
  color: var(--color-red-alt);
  line-height: 1.5;
  margin-top: 0.438rem;
}

.cf7-contact-form .cf7-submit input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font-size: 0.938rem;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.4;
  letter-spacing: 0.031rem;
  width: 100%;
  min-height: 3.75rem;
  margin-top: 0.313rem !important;
  padding: 1.063rem 1.625rem;
  background-color: var(--color-raspberry);  
  border: 1px solid var(--color-deep-raspberry);
  border-radius: 9px;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(119, 18, 54, 0.25);
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.cf7-contact-form .cf7-submit input[type="submit"]:hover {
  transform: translateY(-2px);
  background-color: var(--color-deep-raspberry);
  border-color: var(--color-deep-raspberry);
  box-shadow: 0 12px 28px rgba(119, 18, 54, 0.35);
}

.cf7-contact-form .cf7-submit input[type="submit"]:active {
  transform: translateY(1px);
}

.cf7-contact-form .cf7-submit input[type="submit"]:disabled {
  opacity: 0.65;
  cursor: wait;
}

.wpcf7 form .wpcf7-response-output {
  display: block;
  position: relative;
  text-align: left;
  font-family: var(--ff-primary) !important;
  font-size: 0.938rem;
  font-weight: 500 !important;
  color: var(--color-black-text);
  line-height: 1.65;
  width: 100% !important;
  margin-inline: auto !important;
  margin-top: -1.875rem;
  margin-bottom: 2.813rem;
  padding: 1.063rem 1.25rem 1.063rem 1.5rem !important;
  background: var(--color-white);
  border: 1px solid var(--color-light-grey) !important;
  border-left: 4px solid var(--color-grey) !important;
  border-radius: 9px;
  box-shadow: 0 8px 24px rgba(2, 2, 2, 0.05);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
  color: var(--color-black-text);
  background-color: rgba(235, 35, 55, 0.06);
  border-color: var(--color-red) !important;
  border-left-color: var(--color-red-alt) !important;
}

.wpcf7 form.sent .wpcf7-response-output {
  color: var(--color-black-text);
  background: rgba(66, 147, 81, 0.07);
  border-color: var(--color-green) !important;
  border-left-color: var(--color-green) !important;
}

.wpcf7 form.spam .wpcf7-response-output {
  color: var(--color-black-text);
  background: rgba(239, 177, 76, 0.10);
  border-color: var(--color-orange) !important;
  border-left-color: var(--color-orange) !important;
}

.cf7-contact-form .wpcf7-spinner {
  display: block;
  margin: 0.75rem auto 0;
  background-color: var(--color-raspberry) !important;  
}

/*---------- Partner ----------*/

.uts-partners-hero {
  padding: 4.063rem 0;
  background-color: var(--color-blue);
} 

.uts-partners-hero-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.uts-partners-hero-container h1 {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--color-true-black);
  margin-bottom: 0.938rem;
}

.uts-partners-hero-container p {
  text-align: center;
  font-size: 1.125rem;
  color: var(--color-true-black);
  line-height: 1.8;
}

.uts-partner-logos {
  padding: 4.063rem 0 9.375rem 0;
  background-color: var(--color-black);
  background: linear-gradient(to bottom, var(--color-true-black) 0%, var(--color-black) 77.5%, var(--color-raspberry) 100%);
}

.uts-partner-logos-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.uts-partner-logos-container h2 {
  text-align: center;
  word-spacing: 0.125rem;
  font-size: 1.625rem;
  font-weight: 800;
  color: var(--color-white);
  margin-bottom: 2.813rem;
  background: linear-gradient(
    100deg,
    var(--color-true-black) 0%,
    var(--color-white) 50%,
    var(--color-white) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.uts-partners-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  padding-inline: 1rem !important;
  gap: 0;
  padding: 0 !important;
  border: 1px solid var(--color-deep-raspberry);
  border-radius: 25px;
  overflow: hidden;
}

.uts-partners-wrapper .uts-partner {
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-width: 0;
  padding: 2.188rem 1.875rem;
  border-bottom: 1px solid var(--color-deep-raspberry);
}

.uts-partners-wrapper .uts-partner-logo-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 9.375rem;
  padding: 1.25rem;
  box-sizing: border-box;
  background: var(--color-white);
  border-radius: 10px;
}

.uts-partners-wrapper .uts-partner-logo-wrapper img {
  display: block;
  height: auto;
  max-width: 100%;
}

.uts-partners-wrapper .uts-partner-logo-wrapper img.ioc,
.uts-partners-wrapper .uts-partner-logo-wrapper img.ipc,
.uts-partners-wrapper .uts-partner-logo-wrapper img.special-olympics{
  width: 100%;
}

.uts-partners-wrapper .uts-partner-logo-wrapper img.aims {
  width: 30%;
}

.uts-partners-wrapper .uts-partner-logo-wrapper img.gaisf {
  width: 70%;
}

.uts-partners-wrapper .uts-partner-logo-wrapper img.sportaccord {
  width: 85%;
}

/*---------- Animation ----------*/

.fade-up {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.js-enabled .fade-up {
  opacity: 0;
  transform: translateY(40px);
}

.js-enabled .fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/*---------- Animtion Delays ----------*/

.fade-up-delay-1 {
  transition-delay: 0.1s;
}

.fade-up-delay-2 {
  transition-delay: 0.2s;
}

.fade-up-delay-3 {
  transition-delay: 0.3s;
}

.fade-up-delay-4 {
  transition-delay: 0.4s;
}

.fade-up-delay-5 {
  transition-delay: 0.5s;
}

/*---------- Single Post ----------*/

.post-single {
  max-width: 53.125rem;
  margin: 0 auto;
  padding: 4.5rem 1.25rem 6rem 1.25rem;
}

.post-header { 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.post-title {
  text-align: center;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 1.5rem;
}

.post-meta {
  text-align: center;
  font-size: 0.925rem;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 3.125rem;
}

.middot {
  font-weight: 800 !important;
}

.post-meta a {
  text-decoration: none;
  color: var(--color-black-text);
}

.post-meta a:hover {
  text-decoration: underline;
}

.post-tldr {
  font-size: var(--fs-18);
  line-height: 1.8;
  margin-top: -0.25rem;
  margin-bottom: 1.75rem;
}

.post-tldr-acronym {
  font-family: var(--ff-primary);
  font-weight: 500;
}

.post-content {
  position: relative;
  line-height: 2.1;
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--color-grey);
}

.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
  font-family: var(--ff-primary);
  margin-top: 1.5em;
  margin-bottom: 0.75em;
  line-height: 1.5;
}

.post-content h2 {
  font-size: 1.25rem;    
  font-weight: 600;
}

.post-content h3, .post-content h4 {
  font-size: 1.125rem; 
  font-weight: 600;
}

.post-content h5, .post-content h6 {
  font-size: 1rem; 
  font-weight: 600;
}

.post-featured-image,
.wp-block-image {
  width: 100% !important;
  margin-bottom: 2.188rem !important;
  overflow: hidden !important;
  border-radius: 15px !important;
}

.wp-block-image { 
  margin-top: 1.125rem;
}

.post-featured-image img,
.wp-block-image img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center top;
  border-radius: 15px !important;
  border-radius: 15px !important;
}

.wp-block-image figure {
  width: 100%;
  height: 100%;
  margin: 0;
}

.post-header figcaption {
  font-size: 0.925rem;
  font-weight: 500;
  line-height: 1.5;
  margin-top: 0.625rem;
}

.post-content figure figcaption,
.post-content .wp-caption-text {
  font-size: 0.925rem;
  font-weight: 500;
  line-height: 1.4;
  margin-top: 0.625rem;
}




.wp-block-quote {
  position: relative;
  background: #f8f1f4;
  border: none;
  border-radius: 15px;
  padding: 30px 25px;
  margin: 0 0 2rem;
}

.wp-block-quote::before {
  content: "\201C";
  display: block;
  font-family: Georgia, serif;
  font-size: 4rem;
  line-height: 0.7;
  color: #9b2d54;
  margin-bottom: 1.5rem;
}

.wp-block-quote p {
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 500;
  color: #231f20;
  margin: 0 0 1.5rem;
}

.wp-block-quote cite {
  display: block;
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  color: #9b2d54;
}

.wp-block-quote cite strong {
  font-weight: 700;
}

@media (min-width: 768px) {
  .wp-block-quote {
    border-radius: 20px;
    padding: 40px 45px;
  }

  .wp-block-quote::before {
    font-size: 5rem;
  }

  .wp-block-quote p {
    font-size: 1.25rem;
  }
}






.post-content .wp-caption-text {
  margin-bottom: 0;
}

.post-content .wp-block-gallery.is-layout-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin-top: 0;
  margin-bottom: 1.75rem;
}

.post-content .wp-block-gallery.is-layout-flex:last-child {
  margin-bottom: 0;
}

.post-content p:not(:last-child) {
  margin-bottom: 1.563rem;
}

.post-content p a {
  font-weight: 500;
  color: var(--color-blue);
}

.post-content p strong, .post-content p em {
  font-weight: 600;
}

/* Base list styling */
.post-content ul,
.post-content ol {
  font-size: 1rem;
  margin: 0 0 1.5rem 0;
  padding-left: 1.25rem;
}

.post-content li {
  line-height: 1.6;
  margin-bottom: 0.5rem;
  padding-left: 0.625rem;
}

.post-content li::marker {
  font-size: 0.75rem;
}

/* Remove bottom margin on last item */
.post-content li:last-child {
  margin-bottom: 0;
}

/* Nested lists */
.post-content li > ul,
.post-content li > ol {
  margin-top: 0.5rem;
  margin-bottom: 0;
  padding-left: 1.25rem;
}

/* Second level */
.post-content ul ul,
.post-content ol ol,
.post-content ul ol,
.post-content ol ul {
  margin-bottom: 0;
}

/* Optional visual tightening for deep nesting */
.post-content ul ul li,
.post-content ol ol li {
  font-size: 1rem;
}

/* About UTS */
.about-uts {
  font-size: 0.925rem;
  line-height: 2.1;
  margin-bottom: 2.188rem;
}

.about-us p a {
  font-weight: 700;
  color: var(--color-black);
}

.explore-more-posts .explore-more-posts-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 2.813rem;
}

/* Related posts */
.custom-blog-archive.custom-blog-related article {
  width: 100% !important;
}

/*---------- Archive ----------*/

.archive-page {
  padding: 3rem 1.25rem 5rem 1.25rem;
}

.custom-blog-archive {
  display: grid;
  gap: 2.188rem;
  margin-bottom: 2.813rem;
}

.archive-title {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 3rem;
}

.archive-intro {
  display: flex;
  justify-content: center;
}

.archive-intro p {
  position: relative;
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.8;
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem; 
}

.news-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.item-image {
  display: block;
  aspect-ratio: 4 / 3;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 15px;
}

.item-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.news-item-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
  padding: 1.25rem 0 0.313rem 0;
}

.news-item-text .post-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-bottom: 0.938rem;
}

.news-item-text .post-categories a {
  text-transform: uppercase;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-black-text);
}

.news-card-title {
  width: 100%;
  height: 3.9em;
  margin-bottom: 1.875rem;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.news-card-title a {
  color: inherit;
  text-decoration: none;
}

.news-card-title a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.news-date {
  display: block;
  font-family: var(--ff-primary);
  font-size: 0.875rem;
  color: var(--color-grey);
}

.archive-load-more {
  display: flex;
  justify-content: center;
}

.archive-see-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--color-white);
  min-width: 8.125rem;
  height: 3.5rem;
  padding: 1.25rem 1.75rem;
  background-color: var(--color-deep-raspberry);
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}

.archive-see-more-text {
  display: inline-block;
}

.archive-loader {
  display: none;
  width: 2rem;
  height: 2rem;
  border: 0.125rem solid var(--color-white);
  border-top-color: transparent;
  border-radius: 50%;
  animation: archive-loader-spin 0.7s linear infinite;
}

.archive-see-more.loading .archive-see-more-text {
  display: none;
}

.archive-see-more.loading .archive-loader {
  display: block;
}

.archive-end-message {
  font-size: 0.925rem;
  font-weight: 700;
}

@keyframes archive-loader-spin {
  to {
      transform: rotate(360deg);
  }
}

/*---------- 404 ----------*/

.error-404 {
  padding: 1.563rem 0 5rem 0;
  background-color: var(--color-black);
}

.error-404-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 25rem;
}

.error-404-container h1 {
  text-align: center;
  font-size: 6.25rem;
  font-weight: 800;
  color: transparent;
  line-height: 1;
  margin-bottom: 1.25rem;
  background: linear-gradient( 145deg, var(--color-white) 0%, var(--color-orange) 40%, var(--color-raspberry) 75%, var(--color-raspberry) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.error-404-container p {
  text-align: center;
  color: var(--color-white);
  line-height: 1.6;
}

.error-404-container p a {
  font-weight: 500;
  color: var(--color-raspberry);
}

/*---------- Privacy Policy ----------*/

.privacy-policy {
  padding-bottom: 4.688rem;
}

.privacy-policy-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 4.063rem;
}

.privacy-policy-header h1 {
  text-align: center;
  font-size: 1.375rem;
  font-weight: 700;
}

.privacy-policy-date-updated {
  margin-bottom: 1.563rem;
}

.privacy-policy-date-updated p {
  color: var(--color-raspberry);
}

.privacy-section {
  padding: 2.188rem 0;
}

.privacy-section:not(:last-child) {
  border-bottom: 1px solid var(--color-light-grey-alt);
}

.privacy-section h2,  .privacy-section h3 {
  font-weight: 700;
  margin-bottom: 0.938rem;
}

.privacy-section h2 {
  font-size: 1.125rem;
}

.privacy-section p {
  line-height: 2;
}

.privacy-section p:not(:last-child)  {
  margin-bottom: 1.25rem;
}

.privacy-section ul {
  font-size: 1rem;
  margin: 0 0 1.5rem 0;
  padding-left: 0.625rem;
}

.privacy-section li {
  line-height: 1.6;
  margin-bottom: 0.5rem;
  padding-left: 0.625rem;
}

.privacy-section li::marker {
  font-size: 0.75rem;
}

.privacy-section li:last-child {
  margin-bottom: 0;
}

.privacy-section .contact p:not(:last-child) {
  margin-bottom: 0;
}

.privacy-section .contact p:last-child {
  margin-top: 1.25rem;
}

.privacy-section .contact p strong {
  font-weight: 500;
}

/*---------- Footer ----------*/

.site-footer {
  padding: 3.75rem 0;
  background-color: var(--color-black-alt);
}

.footer-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2.813rem;
  padding-bottom: 2.813rem;
  border-bottom: 1px solid var(--color-grey);
}

.footer-logo img {
  width: 15.625rem;
}

.footer-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 2.188rem;
}

.footer-details .contact {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-details .contact address {
  text-align: center;
  font-weight: 500;
  color: var(--color-white);
  line-height: 1.6;
  margin-bottom: 1.563rem;
}

.footer-details .contact .social-media {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 0.5rem;
}

.footer-details .contact .footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  text-decoration: none;
}

.footer-details .contact .footer-social-link svg {
  display: block;
  width: 2rem;
  height: 2rem;
}

.footer-details .contact .footer-social-link svg path {
  fill: currentColor;
}

.footer-details .contact .footer-social-link[aria-label="YouTube"] svg path:first-child {
  fill: var(--color-white);
}

.footer-details .contact .footer-social-link[aria-label="YouTube"] svg path:last-child {
  fill: var(--color-black);
}

.footer-details .links h3 {
  text-align: center;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 0.625rem;
}

.footer-details .links ul {
  display: flex;
  flex-direction: column;
  row-gap: 0.6rem;
  list-style: none;
  text-align: center;
  margin: 0 !important;
}

.footer-details .links ul a {
  text-decoration: none;
  font-size: 0.875rem;
  color: var(--color-light-grey);
}

.footer-details .links ul a:hover {
  text-decoration: underline;
}

.footer-details p.copyright {
  font-size: 0.8rem;
  color: var(--color-white);
}


@media (min-width: 18.75rem /* 300px */) {

/*---------- Get Involved ----------*/

.partner-with-uts-extra-container .category {
  padding: 1.875rem 1.25rem;
}

.partner-with-uts-extra-container .category.volunteer a {
  width: 13.438rem;
}

.partner-with-uts-extra-container .category.join-uts a {
  width: 13.438rem;
}

}

@media (min-width: 20em /* 320px */) {

/*---------- Header ----------*/

.site-logo a img {
  width: 10.5rem;
}

/*---------- Homepage ----------*/

/* Homepage Reach */
.impact-number {
  width: 13.75rem;
}

/* Homepage Get Involved */
.homepage-get-involved img {
  top: -10%;
  right: -10%;
  width: 65%;
}

/*---------- Get Involved ----------*/

.partner-with-uts-extra-container .category {
  padding: 1.875rem 1.563rem;
}

}

@media (min-width: 25rem /* 400px */) {

/*---------- Homepage ----------*/

/* Homepage Reach */
.impact-number {
  width: 18.75rem;
}

/* UTS News Slider */
.uts-news-header h2 {
  font-size: 2rem;
}

.uts-news-navigation button {
  width: 2.875rem;
  height: 2.875rem;
}

/* Homepage Get Involved */
.way-detail p {
  width: 75%;
}

/*---------- About Us ----------*/
 .about-us-header-container h1 {
  font-size: 2.75rem;
}

.about-us-header-container p {
  font-size: 1.375rem;
}

.about-us-header img {
  bottom: -25%;
}

}


@media (min-width: 28.125em /* 28.125rem */) {

/*---------- About Us ----------*/

.about-us-header img {
  bottom: -40%;
}

/*---------- Partner ----------*/
.uts-partners-wrapper {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.uts-partners-wrapper .uts-partner {
  padding: 1.25rem;
  border-right: 1px solid var(--color-deep-raspberry);
}

.uts-partners-wrapper .uts-partner:nth-child(2n) {
  border-right: none;
}

.uts-partners-wrapper .uts-partner:nth-last-child(-n + 2) {
  border-bottom: none;
}

.uts-partners-wrapper .uts-partner-logo-wrapper img.aims {
  width: 38%;
}

}

@media (min-width: 35.5em /* 568px */) {

/*---------- Homepage ----------*/

.hero img.uts-logo-icon {
  right: -15%;
  bottom: -25%;
}

.hero-image {
  aspect-ratio: 2 / 1.35;
}

.hero-text h1 {
  width: 80%;
}

/* Homepage Get Involved */
.homepage-get-involved img {
  top: -15%;
  right: -20%;
  width: 65%;
}

/*---------- About Us ----------*/
.about-us-header-container h1 {
  font-size: 3rem;
}

.about-us-header img {
  bottom: -50%;
}

.uts-values .values {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.563rem;
}

.uts-leaders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.563rem;
}

.uts-leadership-text h2 {
  width: 85%;
}

.about-us-cta-container h2 {
width: 85%;
}

/*---------- Partner ----------*/

.uts-partners-wrapper .uts-partner {
  padding: 2.188rem;
}

/*---------- What We Do ----------*/

.young-leaders-profiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/*---------- Archive ----------*/

.custom-blog-archive {
  grid-template-columns: repeat(2, 1fr);
}


/*---------- Contact Us ----------*/

.contact-form-container {
  padding: 2.188rem 1.563rem 0 1.563rem;
}

}

@media (min-width: 37.5em /* 600px */) {

/*---------- Homepage Slider ----------*/

/* Homepage Partners */
.slider-intro {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 7.813rem;
  height: 100%;
  background-color: var(--color-true-black);
  border-radius: 10px 0 0 10px;
}

.slider-intro h3 {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--color-orange);
}

.partners-swiper {
  padding-inline: 3.125rem;
}

.partners-swiper .swiper-slide img {
  width: 15.625rem;
}

/* Homepage Programmes */
.programme-card-inner {
  padding: 2.188rem 1.25rem;
}

.programme-card-inner h3 {
  font-size: 1.563rem;
}

/*---------- About Us ----------*/

.about-us-header-container h1 {
  font-size: 52px;
}

}

@media (min-width: 40.625em /* 650px */) {

/*---------- About Us ----------*/

.about-us-header-container h1 {
  font-size: 3.5rem;
}

.youth-development-container h2 {
  width: 85%;
}

/*---------- Impact ----------*/

.reports-and-downloads-container .downloads {
  grid-template-rows: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 0.938rem;
}

}

@media (min-width: 43.75em /* 700px */) {

/*---------- About Us ----------*/

.about-us-header-container h1 {
  font-size: 4.375rem;
  line-height: 1;
}

.about-us-header-container p {
  font-size: 1.5rem;
}

}

@media (min-width: 48em /* 768px */) {

/*---------- Homepage ----------*/

.hero-text h1 {
  font-size: 3rem;
  width: auto;
} 

.hero img.uts-logo-icon {
  width: 80%;
}

/* Homepage Parters */
.partners {
  padding: 3.75rem 0;
}

.partners-container h2 {
  font-size: 1.75rem;
}

.partners-container p {
  margin-bottom: 1.875rem;
}

/* Homepage Programmes */
.programme-text-left h2 {
  font-size: 2.375rem;
}

/* Homepage Reach */
.reach {
  padding: 5rem 0 3.75rem 0;
}

.reach-container h2 {
  font-size: 2.25rem;
}

.impact-numbers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2.188rem;
}

.impact-number {
  min-height: 12.5rem;
}

.impact-number:not(:last-child) {
  border-bottom: 0;
}

.impact-number:nth-child(-n+2) {
  border-bottom: 1px solid var(--color-white);
}

/* UTS News Slider */
.uts-news {
  padding: 5rem 0;
}

.uts-news-header h2 {
  font-size: 2.5rem;
}

/* Homepage Get Involved */
.homepage-get-involved {
  padding: 5.313rem 0 9.375rem 0;
}

.homepage-get-involved img {
  display: block;
  position: absolute;
  top: -10%;
  right: -15%;
  width: 45%;
}

.homepage-get-involved-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.homepage-get-involved-text h2 {
  font-size: 2.625rem;
}

.homepage-get-involved-text p {
  width: 80%;
}

/* Homepage Get Involved */
.ways {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 0.938rem;
  position: relative;
  width: 100%;
  z-index: 2;
}

.way-detail p {
  width: auto;
}

/*---------- About Us ----------*/
.about-us-header {
  padding: 4.688rem 0;
}

.about-us-header-container h1 {
  margin-bottom: 1.563rem;
}

.about-us-header img {
  bottom: -75%;
}

/*---------- What We Do ----------*/

.what-we-do-header {
  padding: 4.688rem 0;
}

.what-we-do-header-container h1 {
  font-size: 2.5rem;
}

.young-leaders-intro p {
  width: 80%;
}

/*---------- Get Involved ----------*/

.get-involved-header {
  padding: 4.688rem 0;
}

.get-involved-header-container h1 {
  font-size: 2.5rem;
  width: 80%;
}

.get-involved-header-container p {
  width: 80%;
}

.partner-with-uts {
  padding: 4.063rem 0;
}

.partner-categories {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: none;
  column-gap: 1.563rem;
}

.partner-with-uts-extra {
  padding: 5rem 0;

}

.partner-with-uts-extra-container {
  row-gap: 2.188rem;
}

/*---------- Impact ----------*/

.impact-header-container h2 {
  font-size: 3.75rem;
}

.reports-and-downloads-container .downloads {
  column-gap: 1.563rem;
}

/*---------- Partner ----------*/

.uts-partners-hero-container h1 {
  font-size: 2.125rem;
}

.uts-partners-hero-container p {
  font-size: 1.25rem;
}
  
.uts-partner-logos-container h2 {
  font-size: 1.75rem;
}

.uts-partners-wrapper {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.uts-partners-wrapper .uts-partner:nth-child(2n) {
  border-right: 1px solid var(--color-deep-raspberry);
}

.uts-partners-wrapper .uts-partner:nth-child(3n) {
  border-right: none;
}

.uts-partners-wrapper .uts-partner:nth-last-child(-n + 3) {
  border-bottom: none;
}

/*---------- Contact Us ----------*/

.contact-form-container h2 {
  margin-bottom: 2.188rem;
}

.cf7-contact-form .cf7-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.563rem;
}

.cf7-contact-form .cf7-field {
  min-width: 0;
  margin-bottom: 1.563rem !important;
}

.cf7-contact-form .cf7-row .cf7-field {
  margin-bottom: 1.563rem !important;
}

/*---------- 404 ----------*/

.error-404-container h1 {
  font-size: 9.375rem;
}

.error-404-container p {
  font-size: 1.125rem;
}

/*---------- Privacy Policy ----------*/

.privacy-policy-container {
  width: 85%;
}

.privacy-policy-header {
  padding: 4.063rem 0 1.25rem 0;
}

/*---------- Footer ----------*/

.site-footer {
  padding: 4.688rem 0;
}

}

@media (min-width: 53.125em /* 850px */) {

/*---------- Homepage ----------*/

/* Homepage Partners */
.partners-container p {
  width: 85%;
}

/* Homepage Get Involved */
.ways {
  column-gap: 1.563rem;
}

/*---------- About Us ----------*/

.about-us-header-container h1 {
  font-size: 5rem;
}

.about-us-header img {
  width: 50rem;
}

.youth-development-container h2 {
  font-size: 1.875rem;
}

.uts-values {
  padding-bottom: 5.313rem;
}

.uts-values-container h2 {
  font-size: 1.875rem;
}

.uts-leadership-text h2 {
  font-size: 1.875rem;
  width: 70%;
}

.about-us-cta-container h2 {
  font-size: 1.875rem;
  width: 65%;
}

/*---------- What We Do ----------*/

.what-we-do-header-container h1 {
  width: 80%;
}

.what-we-do-header-container p {
  width: 90%;
}

/*---------- Get Involved ----------*/

.get-involved-header-container p {
  width: 90%;
}

.partner-with-uts-container > p {
  width: 90%;
}

.partner-with-uts-extra-container {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: none;
  column-gap: 2.188rem;
}

/*---------- What We Do ----------*/

.young-leaders-profiles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.563rem;
}

/*---------- Single Post ----------*/

.post-title {
  width: 90%;
}
  
/* Related posts */

.custom-blog-archive.custom-blog-related {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/*---------- Archive ----------*/

.custom-blog-archive {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.item-image {
  aspect-ratio: 1 / 1;
}

.archive-title {
  font-size: 2rem;
  margin-bottom: 4rem;
}

/*---------- Footer ----------*/

.footer-logo img {
  width: 21.875rem;
}

.footer-details {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  align-items: flex-start;
  column-gap: 2.188rem;
}

.footer-details .contact {
  align-items: flex-start;
}

.footer-details .contact address {
  text-align: left;
}

.footer-details .links {
  margin-left: 3.125rem;
}

.footer-details .links h3 {
  text-align: left;
}

.footer-details .links ul {
   text-align: left;
}

}

@media (min-width: 56.25em /* 900px */) {

/*---------- Homepage ----------*/

/* Homepage Programmes */
.programme-container {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 2.188rem;
}

.programme-text-left {
  align-self: start;
  position: sticky;
  top: 6.25rem;
  margin-bottom: 0;
}

.programme-cards {
  row-gap: 2.188rem;
}

.programme-card {
  position: sticky;
  top: 6.25rem;
}

.programme-card-inner {
  min-height: 14.063rem;
}

/*---------- About Us ----------*/

.about-us-header-container h1 {
  width: 75%;
}

.about-us-header-container p {
  width: 85%;
}

.about-us-header img {
  right: -27%;
  bottom: -10%;
}

.about-us-header img {
  bottom: -50%;
}

.youth-development-text {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 0.938rem;
}

.youth-development-container h2 {
  font-size: 2rem;
  width: 65%;
}

.youth-development-text p:first-child {
  margin-bottom: 0;
}

.uts-leadership-text h2 {
  font-size: 2rem;
  width: 60%;
}

.about-us-cta-container p {
  width: 80%;
}

/*---------- Impact ----------*/

.impact-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 28.125rem;
  padding: 5.313rem 0;
}

.impact-header-container h1 {
  font-size: 1.75rem;
}

.impact-header-container h1 .circle {
  width: 0.781rem;
  height: 0.781rem;
}

.impact-header-container h2 {
  font-size: 4.375rem;
}

.programme-table {
  width: 62.5rem;
  min-width: 56.25rem;
}

/*---------- Contact Us ----------*/

.contact-us {
  padding: 5.313rem 0;
}

.contact-us-container {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  column-gap: 2.188rem;
}

.contact-intro {
  padding-top: 7.813rem;
}

}

@media (min-width: 64em /* 1024px */) {

/*---------- Homepage ----------*/

.hero {
  padding: 4.688rem 0;
}

.hero-container {
  display: grid;
  align-items: center;
  grid-template-columns: 1.15fr 1fr;
  column-gap: 2.188rem;
}

.hero img.uts-logo-icon {
  right: -5%;
  bottom: -12%;
  width: 45%;
}

.hero-text a {
  margin-bottom: 0;
}

.hero-image {
  aspect-ratio: auto;
  height: 100%;

}

/* Homepage Parters */
.partners-container p {
  width: 70%;
}

/* Homepage Programmes */
.programme-image {
  height: 23.438rem;
  margin-bottom: 5rem;
}

.programme-card {
  border-radius: 25px;
}

.programme-card-inner {
  padding: 2.188rem 1.875rem;
}

.programme-card-inner h3 {
  font-size: 1.875rem;
}

.programme-card-inner p {
  font-size: 1.05rem;
}

/* Homepage Reach */
.reach-container p {
  font-size: 1.5rem;
  width: 80%;
  margin-bottom: 1.25rem;
}

/* Homepage Get Involved */
.homepage-get-involved img {
  top: -15%;
  right: -25%;
  width: 45%;
}

.homepage-get-involved-text p {
  width: 65%;
}

.ways {
  column-gap: 2.188rem;
  width: 85%;
}

/*---------- About Us ----------*/

.uts-leadership {
  padding: 4.688rem 0;
}

.uts-leadership-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  column-gap: 1.563rem;
}

.uts-leadership-text {
  margin-bottom: 0;
}

.uts-leadership-text h2 {
  width: auto;
}

/*---------- Partner ----------*/

.uts-partners-hero {
  padding: 5.313rem 0;
}

.uts-partners-hero-container p {
  width: 82.5%;
}

.uts-partner-logos {
  padding: 4.688rem 0 9.375rem 0;
}

.uts-partners-wrapper .uts-partner {
  padding: 2.188rem 1.875rem;
}

.uts-partners-wrapper .uts-partner-logo-wrapper {
  min-height: 12.5rem;
}

.uts-partner-logos-container .uts-partner-logo-wrapper img.ioc,
.uts-partner-logos-container .uts-partner-logo-wrapper img.ipc,
.uts-partner-logos-container .uts-partner-logo-wrapper img.special-olympics {
  width: 78% !important;
}

.uts-partners-wrapper .uts-partner-logo-wrapper img.gaisf {
  width: 55%;
}

.uts-partners-wrapper .uts-partner-logo-wrapper img.sportaccord {
  width: 60%;
}

/*---------- About Us ----------*/

.about-us-header-container h1 {
  width: 68%;
}

.about-us-header img {
  right: -18%;
  bottom: -5%;
}

/*---------- What We Do ----------*/

.what-we-do-header-container h1 {
  font-size: 4rem;
}

.what-we-do-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.563rem;
}

.what-we-do-details {
  padding: 2.188rem 1.563rem;
  border-radius: 30px;
}

.what-we-do-details .checklists .checklist svg {
  margin-top: 0.219rem;
}

.young-leaders-header h2 {
  font-size: 7.5rem;
}

.young-leaders-intro p {
  font-size: 2rem;
}

.young-leaders-container {
  padding: 3.75rem 0 5.313rem 0;
}

/*---------- Get Involved ----------*/

.get-involved-header-container h1 {
  font-size: 4rem;
}

.partner-categories {
  column-gap: 2.188rem;
}

/*---------- Impact ----------*/

.impact-table {
  padding: 4.063rem 0 5.313rem 0;
}

.impact-table-container h2 {
  font-size: 1.75rem;
}

.programme-table-wrapper {
  overflow: visible;
}

.programme-table-container {
  width: 100%;
  min-width: 100%;
}

.programme-table {
  width: 100%;
  min-width: 56.25rem;
  border-radius: 16px;
}

.reports-and-downloads {
  padding: 4.063rem 0 5.313rem 0;
}

.reports-and-downloads-container h2 {
  font-size: 1.75rem;
}

/*---------- 404 ----------*/

.error-404-container h1 {
  font-size: 15.625rem;
}

/*---------- Privacy Policy ----------*/

.privacy-policy-container {
  width: 55%;
}

.privacy-policy-header {
  padding: 4.063rem 0 2.188rem 0;
}

/*---------- Footer ----------*/

.footer-details .links {
  margin-left: 5rem;
}

}

@media (min-width: 68.125em /* 1090px */) {

/*---------- Header ----------*/

.site-header {
  height: auto;
  padding: 0.625rem 0 !important;
}

.header-container {
  display: grid;
  grid-template-columns: 15% 1fr;
}

.navigation-elements {
  column-gap: 3.125rem;
  width: auto;
}
 
.navigation {
  display: flex;
  justify-content: right;
  width: 100%;
}

.main-navigation {
  display: flex;
  align-items: center;
  justify-content: stretch;
}

.main-navigation > ul {
  display: flex;
  position: static;
  height: auto;
  background-color: transparent;
  overflow: visible;
  transform: none;
  transition: none;
}

.vertical-divider {
  width: 0.125rem;
  height: 3.125rem;
  background-color: var(--color-light-grey-alt);

}

#primary-menu > li {
  width: auto;
  border-radius: 5px;
}

.sub-menu li {
  width: 100%;
}

.main-navigation li:not(:last-child) {
  border-bottom: 0;
}

.main-navigation > ul > li:nth-last-child(2) {
  margin-right: 1.5rem;
}

.main-navigation > ul > li:last-child {
  background-color: var(--color-raspberry);
}

.menu-link {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-black-text);
  padding: 1rem 1.5rem; /* slightly better horizontal spacing */
}

.main-navigation > ul > li:last-child .menu-link {
  font-weight: 600;
  color: var(--color-white);
}

.menu > li > .menu-link {
  justify-content: center; /* this ensures that the link text and the chevron are positioned in the middle of the list item anchor */
  border-radius: 5px;
}

.menu-item-has-children {
  position: relative;
}

.menu-item-has-children > .menu-link {
  cursor: pointer;
}

.menu > .menu-item-has-children > a { /* controls the spacing from between the link text and arrow, effectively disabling the grid spacing used in the mobile mode */ 
  display: flex;             
}

.sub-menu .menu-link {
  color: var(--color-black-text); 
  padding: 0.625rem 1rem;
}

.menu-toggle {
  display: none;
}

/* First level dropdown */
.sub-menu {
  position: absolute;
  top: 3.2rem;
  left: 50%;
  min-width: 11rem;
  height: auto;
  padding: 0.938rem 0 !important;
  background-color: var(--color-white);
  overflow: visible;
  border: 1px solid var(--color-light-grey);
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .12);
  z-index: 1000;

  /* Hidden state */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  /* Start slightly lower and slightly smaller */
  transform: translate(-50%, 0.938rem);
  transform-origin: top center;

  /* Smooth, refined animation */
  transition:
    opacity .25s ease,
    transform .35s cubic-bezier(.16, 1, .3, 1),
    visibility 0s linear .35s;
}

/* Dropdown arrow */
.menu > li > .sub-menu::before {
  content: "";
  position: absolute;
  top: -0.563rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 0.75rem solid transparent;
  border-right: 0.75rem solid transparent;
  border-bottom: 9px solid var(--color-light-grey);;
  z-index: 0;
}

/* Inner white triangle */
.menu > li > .sub-menu::after {
  content: "";
  position: absolute;
  top: -0.438rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-bottom: 0.5rem solid var(--color-white);
  z-index: 1;
}

/* Open state */
.sub-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  /* Move upward and scale into position */
  transform: translate(-50%, 0);

  transition:
    opacity .25s ease,
    transform .35s cubic-bezier(.16, 1, .3, 1),
    visibility 0s linear 0s;
}

.sub-menu li:first-of-type {
  border-top-left-radius: 0.938rem;
  border-top-right-radius: 0.938rem;
}

.sub-menu li:last-of-type {
  border-bottom-left-radius: 0.938rem;
  border-bottom-right-radius: 0.938rem;
}

.sub-menu .menu-link {
  font-size: 0.925rem;
  line-height: 1.4;
  width: 100%;
}

.sub-menu .sub-menu { 
  top: 50%;
  left: 100%;
  background-color: var(--color-white);
  transform: none;
}

/* This controls the space between the menu link text and the arrow icon. Setting it to "display: flex" removes this spacing 

.menu .menu-item-has-children > a,
.sub-menu .menu-item-has-children > a {
  display: grid;
  grid-template-columns: 1fr 1.25rem; 
  align-items: center;              
  column-gap: 0.625rem;                
}
*/

.sub-menu .back-button {
  display: none !important;
}

/*---------- Arrow ----------*/

.icon-box {
  width: 0.938rem;
  height: 0.938rem;
}

.chevron-down {
  width: 0.5rem;
  height: 0.563rem;
  border-right: 1.5px solid var(--color-black);
  border-bottom: 1.5px solid var(--color-black);
  margin-top: -0.313rem;
  transform: rotate(45deg);
}

/* Hover / active */
.menu-item-has-children:hover > .menu-link .chevron-down,
.menu-item-has-children.active > .menu-link .chevron-down {
  margin-top: 0.375rem;
  transform: rotate(-135deg);
}

/*---------- Archive ----------*/
  
.custom-blog-archive {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

}

@media (min-width: 68.75em /* 1100px */) {

/*---------- Homepage ----------*/

/* Homepage Reach */
.impact-numbers {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 0;
}

.impact-number {
  min-height: 15.625rem;
  width: auto;
}

.impact-number:nth-child(-n+2) {
  border-bottom: 0;
}

.impact-number:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  margin-left: 6.25rem;
  width: 1px;
  height: 60%;
  background-color: var(--color-white);
  transform: translateY(-50%);
}

/*---------- About Us ----------*/

.about-us-header-container h1 {
  width: 70%;
}

.about-us-header img {
  right: -23%;
}

.youth-development {
  padding: 4.688rem 0 3.125rem 0;
}

.youth-development-text {
  column-gap: 2.188rem;
}

.uts-values-container hr {
  margin-bottom: 3.125rem;
}

.uts-values .values {
  gap: 2.188rem;
}

.uts-leadership-container {
  column-gap: 2.188rem;
}

.uts-leadership-text h2 {
  width: 80%;
}

.uts-leaders {
column-gap: 2.188rem;
}

/*---------- What We Do ----------*/

.what-we-do-header-container h1 {
  width: 65%;
}

.what-we-do-header-container p {
  width: 75%;
}

.what-we-do-details {
  padding: 2.813rem 2.813rem;
}

.young-leaders-header {
  min-height: 25rem;
}

.young-leaders-header h2 {
  font-size: 9.375rem;
}

.young-leaders-profiles {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/*---------- Get Involved ----------*/

.get-involved-header-container h1 {
  width: 65%;
}

.get-involved-header-container p {
  width: 75%;
}

.partner-with-uts-container > p {
  width: 75%;
}

.partner-with-uts-extra-container .category {
  padding: 2.188rem 1.875rem;
}

/*---------- Impact ----------*/

.reports-and-downloads-container .downloads {
  column-gap: 2.188rem;
}

/*---------- Footer ----------*/

.footer-logo img {
  width: 28.125rem;
}

.footer-details .links {
  margin-left: 6.25rem;
}

}

@media (min-width: 75em /* 1200px */) {

/*---------- Homepage ----------*/
.hero img.uts-logo-icon {
  bottom: -25%;
}

/*---------- About Us ----------*/

.about-us-header-container h1 {
  width: 70%;
  margin-bottom: 1.875rem;
}

.about-us-header-container p {
  width: 75%;
}

.about-us-header img {
  right: -10%;
  bottom: -10%;
}

.youth-development-text {
  column-gap: 2.188rem;
}

.youth-development-container h2 {
  width: 45%;
}

.about-us-cta-container p {
  width: 70%;
}

/*---------- What We Do ----------*/

.what-we-do-header-container h1 {
  width: 55%;
}

.what-we-do-header-container p {
  width: 65%;
}

.young-leaders-profiles {
  gap: 2.188rem;
}

/*---------- Impact ----------*/

.impact-header-container h2 {
  font-size: 5rem;
}

}