:root {
    /* Colours */
    --colours-primary-colour: #2BFF53;
    --colours-primary-hover-colour: #00C325;
    --colours-secondary-colour: #00CFFF;
    --colours-secondary-hover-colour: #008FB1;
    --colours-primary-background-colour: #202020;
    --colours-secondary-background-colour: #3C3C3C;
    --colours-font-primary-colour: #F5F5F5;
    --colours-font-secondary-colour: #FFFFFF;
    --colours-border-colour: #989898;
    --colours-button-primary-font-colour: #002C08;
    --colours-button-secondary-font-colour: #002F3A;
    --colours-warning-colour: #ff0000;
    --colours-text-input-background-colour: #FFFFFF;
    --colours-text-input-colour: #333;
    --colours-header-opacity: rgba(0, 0, 0, 0);
    --colours-header: #202020;
    --colours-secondary-background-colour: #3C3C3C;
    --colours-secondary-background-colour-rgb: 60, 60, 60;



    /* Fonts - family */
    --fonts-family-title-font: 'Varsity Regular', serif;
    --fonts-family-heading-font: 'Varsity Regular', serif;
    --fonts-family-body-font: 'Inter', sans-serif;
    --fonts-family-button-font: 'Inter', sans-serif;
    --fonts-family-code-font: 'Share Tech Mono', monospace;
    --fonts-family-logo-font: 'Varsity Regular', serif;
  
    /* Fonts - weight */
    --fonts-weight-H1-weight: 600;
    --fonts-weight-H2-weight: 00;
    --fonts-weight-H3-weight: 500;
    --fonts-weight-H4-weight: 500;
    --fonts-weight-H5-weight: 500;
    --fonts-weight-logo-weight: 100;
    --fonts-weight-body-weight: 400;
    --fonts-weight-small-text-weight: 400;
    --fonts-weight-button-text-weight: 600;
    --fonts-weight-code-text-weight: 400;
  
    /* Fonts - size (Desktop) */
    --fonts-size-H1-size: 64px;
    --fonts-size-H2-size: 48px;
    --fonts-size-H3-size: 32px;
    --fonts-size-H4-size: 26px;
    --fonts-size-H5-size: 20px;
    --fonts-size-body-size: 16px;
    --fonts-size-small-text-size: 14px;
    --fonts-size-button-text-size: 16px;
    --fonts-size-code-text-size: 14px;
  
    /* Letter Spacing */
    --fonts-letter-spacing-title-spacing: 2px;
    --fonts-letter-spacing-heading-spacing: 1px;
    --fonts-letter-spacing-body-spacing: 0.5px;
    --fonts-letter-spacing-button-spacing: 0.5px;
    --fonts-letter-spacing-code-spacing: 0.5px;
  
    /* Spacing - Desktop */
    --padding-vertical: 48px;
    --padding-vertical-half: 24px;
    --padding-vertical-double: 96px;
    --padding-horizontal: 48px;
    --padding-horizontal-half: 24px;
    --padding-horizontal-double: 96px;
    --padding-inner-container: 12px;
    --padding-inner-container-policy: 24px;
    --gap: 12px;
    --gap-half: 6px;
    --gap-double: 24px;
    --gap-quad: 48px;
    --inner-container-vertical: 12px;
    --inner-container-horizontal: 20px;
    --padding-vertical-other: 176px;

    /* Buttons */
    --vertical-button: 48px;
    --vertical-small-button: 32px;
    --horizontal-button: 200px;
    --horizontal-small-button: 128px;
  
    /* Other */
    --border-radius: 6px;
    --max-width: 1440px;
    --max-width-inner: 900px;
    --max-width-with-padding: 1536px;
    --drop-shadow-vertical: 6px;
    --drop-shadow-horizontal: 6px;
    --box-shadow: 6px 6px 4px rgba(0, 0, 0, 0.25);

    /* Text Shadow */
    --text-shadow: 0px 6px 6px rgba(42, 244, 23, 0.25);

    /* Testimonial Roundels */
    --roundel-size: 150px;
    --roundel-glow: var(--colours-primary-colour);
    --roundel-border: var(--colours-secondary-background-colour);
    --roundel-background: var(--colours-primary-colour);
  }

  @media (max-width: 768px) {
    :root {
      --fonts-size-H1-size: 40px;
      --fonts-size-H2-size: 32px;
      --fonts-size-H3-size: 26px;
      --fonts-size-H4-size: 20px;
      --fonts-size-H5-size: 18px;
      --fonts-size-body-size: 14px;
      --fonts-size-small-text-size: 12px;
      --fonts-size-button-text-size: 14px;
      --fonts-size-code-text-size: 12px;
  
      --padding-vertical: 48px;
      --padding-vertical-half: 24px;
      --padding-horizontal: 24px;
      --padding-horizontal-half: 12px;

      --padding-vertical-other: 128px;
    }
  }
  
/* Header & body values Values */
h1 {
    color: var(--colours-primary-colour);
    text-align: center;
    text-shadow: var(--text-shadow);
    font-family: var(--fonts-family-title-font);
    font-size: var(--fonts-size-H1-size);
    font-style: normal;
    font-weight: 100;
    line-height: normal;
    letter-spacing: var(--fonts-letter-spacing-title-spacing);
    margin: 0px !important;
}

h2 {
    font-family: var(--fonts-family-heading-font);
    font-size: var(--fonts-size-H2-size);
    font-style: normal;
    font-weight: var(--fonts-weight-H2-weight);
    line-height: normal;
    letter-spacing: var(--fonts-letter-spacing-heading-spacing);
    color: var(--colours-primary-colour);
    text-align: center;
    text-shadow: var(--text-shadow);
    margin: 0px !important;
  }

h3 {
    color: var(--colours-primary-colour);
    text-align: center;
    text-shadow: var(--text-shadow);
    font-family: var(--fonts-family-heading-font);
    font-size: var(--fonts-size-H3-size);
    font-style: normal;
    font-weight: var(--fonts-weight-H3-weight);
    line-height: normal;
    letter-spacing: var(--fonts-letter-spacing-heading-spacing);
    margin: 0px !important;
  }
  
h4 {
    color: var(--colours-primary-colour);
    text-align: center;
    text-shadow: var(--text-shadow);
    font-family: var(--fonts-family-heading-font);
    font-size: var(--fonts-size-H4-size);
    font-style: normal;
    font-weight: var(--fonts-weight-H4-weight);
    line-height: normal;
    letter-spacing: var(--fonts-letter-spacing-heading-spacing);
    margin: 0px !important;
  }

h5 {
    color: var(--colours-primary-colour);
    text-align: center;
    text-shadow: var(--text-shadow);
    font-family: var(--fonts-family-heading-font);
    font-size: var(--fonts-size-H5-size);
    font-style: normal;
    font-weight: var(--fonts-weight-H5-weight);
    line-height: normal;
    letter-spacing: var(--fonts-letter-spacing-heading-spacing);
    margin: 0px !important;
}

p {
    color: var(--colours-font-primary-colour);
    font-family: var(--fonts-family-body-font);
    font-size: var(--fonts-size-body-size);
    font-style: normal;
    font-weight: var(--fonts-weight-body-weight);
    line-height: normal;
    letter-spacing: var(--fonts-letter-spacing-body-spacing);
    margin: 0px !important;
}

body {
    color: var(--colours-font-primary-colour);
    font-family: var(--fonts-family-body-font);
    font-size: var(--fonts-size-body-size);
    font-style: normal;
    font-weight: var(--fonts-weight-body-weight);
    line-height: normal;
    letter-spacing: var(--fonts-letter-spacing-body-spacing);
    background-color: var(--colours-primary-background-colour);
    margin: 0px !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.small-body {
    color: var(--colours-font-primary-colour);
    font-family: var(--fonts-family-body-font);
    font-size: var(--fonts-size-small-text-size);
    font-style: normal;
    font-weight: var(--fonts-weight-small-text-weight);
    line-height: normal;
    letter-spacing: var(--fonts-letter-spacing-body-spacing);
}

.button-text {
    color: var(--colours-button-primary-font-colour);
    font-family: var(--fonts-family-button-font);
    font-size: var(--fonts-size-button-text-size);
    font-style: normal;
    font-weight: var(--fonts-weight-button-text-weight);
    line-height: normal;
    letter-spacing: var(--fonts-letter-spacing-button-spacing);
    text-decoration: none;
}

.code-text {
    color: var(--colours-font-primary-colour);
    font-family: var(--fonts-family-code-font);
    font-size: var(--fonts-size-code-text-size);
    font-style: normal;
    font-weight: var(--fonts-weight-code-text-weight);
    line-height: normal;
    letter-spacing: var(--fonts-letter-spacing-code-spacing);
}

.nav-body {
    color: var(--colours-font-primary-colour);
    font-family: var(--fonts-family-body-font);
    font-size: var(--fonts-size-body-size);
    font-style: normal;
    font-weight: var(--fonts-weight-H2-weight);
    line-height: normal;
    letter-spacing: var(--fonts-letter-spacing-body-spacing);
}

a {
  text-decoration: none;
  color: var(--colours-button-primary-font-colour);
  font-family: var(--fonts-family-button-font);
  font-size: var(--fonts-size-button-text-size);
  font-style: normal;
  font-weight: var(--fonts-weight-button-text-weight);
  line-height: normal;
  letter-spacing: var(--fonts-letter-spacing-button-spacing);
}

.heading-title {
    font-family: var(--fonts-family-heading-font);
    font-size: var(--fonts-size-H2-size);
    font-style: normal;
    font-weight: var(--fonts-weight-H2-weight);
    line-height: normal;
    letter-spacing: var(--fonts-letter-spacing-heading-spacing);
    color: var(--colours-primary-colour);
    text-align: center;
    text-shadow: var(--text-shadow);
    margin: 0px !important;
}

/* Button Styling */
.button-primary {
    color: var(--colours-button-primary-font-colour);
    background-color: var(--colours-primary-colour);
    text-align: center;
    font-family: var(--fonts-family-button-font);
    font-size: var(--fonts-size-button-text-size);
    font-style: normal;
    font-weight: var(--fonts-weight-button-text-weight);
    line-height: normal;
    letter-spacing: var(--fonts-letter-spacing-button-spacing);
    display: flex;
    width: 200px;
    height: 48px;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--border-radius);
    text-decoration: none;
    box-shadow: var(--box-shadow);
    transition: 0.3s ease;
    z-index: 1;
    cursor: pointer;
    border: none;
}

.button-primary:hover {
  box-shadow: 0 0 10px var(--colours-primary-colour);
  z-index: 0;
  background-color: var(--colours-primary-hover-colour);
}



.button-outline {
  background-color: transparent;
  color: var(--colours-primary-colour);
  border: 2px solid var(--colours-primary-colour);
  text-align: center;
  font-family: var(--fonts-family-button-font);
  font-size: var(--fonts-size-button-text-size);
  font-style: normal;
  font-weight: var(--fonts-weight-button-text-weight);
  line-height: normal;
  letter-spacing: var(--fonts-letter-spacing-button-spacing);
  display: flex;
  width: 192px;
  height: 48px;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--border-radius);
  text-decoration: none;
    box-shadow: var(--box-shadow);
    transition: 0.3s ease;
    z-index: 1;
    cursor: pointer;
}

.button-outline:hover {
  box-shadow: 0 0 10px var(--colours-primary-colour);
  background-color: var(--colours-primary-colour);
  color: var(--colours-button-primary-font-colour);
  z-index: 0;
}


.button-secondary {
    color: var(--colours-button-secondary-font-colour);
    background-color: var(--colours-secondary-colour);
    text-align: center;
    font-family: var(--fonts-family-button-font);
    font-size: var(--fonts-size-button-text-size);
    font-style: normal;
    font-weight: var(--fonts-weight-button-text-weight);
    line-height: normal;
    letter-spacing: var(--fonts-letter-spacing-button-spacing);
    display: flex;
    width: 100%;
    height: 48px;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--border-radius);
    text-decoration: none;
    padding: var(--padding-inner-container);
    box-shadow: var(--box-shadow);
    transition: 0.3s ease;
    z-index: 1;
    cursor: pointer;
    border: none;
}

.button-secondary:hover {
  transform: scale(1);
  box-shadow: 0 0 5px var(--colours-secondary-colour);
  z-index: 0;
  background-color: var(--colours-secondary-hover-colour);
}

.button-secondary:hover {
    background-color: var(--colours-secondary-hover-colour);
}


/* Social Icon Styling */
.social-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    aspect-ratio: 1/1;
}

/* Container */
.container {
  padding: var(--padding-vertical) var(--padding-horizontal);
}

.container-half {
  padding: var(--padding-vertical-half) var(--padding-horizontal-half);
}



/* Header Menu */

/* Nav bar containers */

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  transition: background-color 0.3s ease, opacity 0.3s ease;
  background-color: var(--colours-header-opacity);
 }

.navbar.scrolled {
  background-color: var(--colours-header);
  border-bottom: solid 1px var(--colours-primary-colour);
}

.navbar .nav-body {
  width: 100%;
  padding: 12px var(--padding-horizontal);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  max-width: 1440px;
}
.nav-container-bar {
  display: flex;
  align-items: center;
  gap: var(--gap);
}

/* Header Logo & Text Title */ 
.logo-container {
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-width: 0;
  flex-shrink: 1;
  text-decoration: none;
}

.logo img {
    width: 75px;
    height: 75px;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
  }

  .logo-title {
  color: var(--colours-font-secondary-colour);
  font-family: var(--fonts-family-logo-font);
  font-size: var(--fonts-size-H5-size);
  font-weight: var(--fonts-weight-logo-weight);
  letter-spacing: var(--fonts-letter-spacing-heading-spacing);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  }

/* Navigational Links and Styling - Inc Button*/ 
  .nav-links a {
    margin: var(--gap);
    text-decoration: none;
    color: var(--colours-font-primary-colour);
    font-family: var(--fonts-family-body-font);
    font-size: var(--fonts-size-body-size);
    font-style: normal;
    font-weight: var(--fonts-weight-H2-weight);
    line-height: normal;
    letter-spacing: var(--fonts-letter-spacing-body-spacing);
    text-transform: uppercase;
  }

  .nav-links a:hover {
    text-decoration: underline;
  }

  .nav-button {
    width: 150px;
    height: 48px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }



/* Mobile Menu Styling and Containers */ 
.mobile-menu-icon {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
}

/* Mobile Sidebar */
.mobile-nav {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  max-width: 260px;
  height: 100dvh;
  max-height: 100dvh;
  background: var(--colours-primary-background-colour);
  backdrop-filter: blur(12px);
  box-shadow: -4px 0 24px var(--colours-primary-colour);
  border-left: 1px solid var(--colours-primary-colour);
  transition: right 1.0s ease;
  z-index: 9999;
  padding: var(--padding-vertical) var(--padding-horizontal);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  overflow-y: auto;
}

.mobile-nav.open {
  right: 0;
}

.mobile-nav .close-icon {
  width: 40px;
  height: 40px;
  aspect-ratio: 1 / 1;
  align-self: flex-end;
  margin-bottom: 30px;
  transition: transform 0.2s ease;
}
.mobile-nav .close-icon:hover {
  transform: rotate(90deg) scale(1.1);
}

.mobile-nav .mobile-menu-icon {
  align-self: flex-end;
}

.mobile-nav .nav-link {
  opacity: 0;
  transform: translateX(20px);
  animation: fadeInRight 0.5s ease forwards;
  animation-delay: calc(var(--i) * 0.1s);
  transition: color 0.3s ease, text-shadow 0.3s ease;
  width: 100%;
  padding: var(--gap) 0;
  text-decoration: none;
  color: var(--colours-font-primary-colour);
  font-family: var(--fonts-family-body-font);
  font-size: var(--fonts-size-body-size);
  font-style: normal;
  font-weight: var(--fonts-weight-H2-weight);
  line-height: normal;
  letter-spacing: var(--fonts-letter-spacing-body-spacing);
  text-transform: uppercase;
  border-radius: 100%;
}



@keyframes fadeInRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Header Menu - Mobile Socials Section */
.mobile-socials {
  margin: auto auto 0 auto;
}

.socials-label-menu {
  text-decoration: none;
  color: var(--colours-font-primary-colour);
  font-family: var(--fonts-family-body-font);
  font-size: 20px;
  font-style: normal;
  font-weight: var(--fonts-weight-H2-weight);
  line-height: normal;
  letter-spacing: var(--fonts-letter-spacing-body-spacing);
  text-transform: uppercase;
  text-decoration: none;
  margin-bottom: var(--gap);
  text-align: center;
}

.social-icons-menu {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(3, 2fr);
  align-items: flex-start;
  margin-top: var(--gap-double)
}


.social-icons-menu img {
  width: 40px;
  height: 40px;
  transition: filter 0.3s ease;
}


.social-icons-menu a:hover img {
  filter: brightness(0) invert(1);
}

/* Hamburger Images w/ Text */

.nav-link.with-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 75px;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  color: white;
  font-weight: bold;
  text-decoration: none;
  border-radius: var(--border-radius);
  position: relative;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
  transition: transform 0.3s ease;
  overflow: hidden;
}

/* Optional: dark overlay for contrast */
.nav-link.with-image::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
}

.nav-link.with-image {
  z-index: 1; /* Ensure text stays above overlay */
}

.nav-link.with-image:hover {
  transform: scale(1.05);
}




/* Header Menu - Mobile Responsiveness */


  @media (max-width: 999px) {
    .nav-links {
      display: none !important;
    }


    .nav-container-bar .button-outline {
      display: none !important;
    }
    
    .mobile-menu-icon {
      display: block;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    }

  .mobile-menu-icon:hover {
  transform: scale(1.1) rotate(1deg); /* Slight exaggeration for interactivity */
  box-shadow: 0 0 12px var(--colours-primary-colour);
  filter: brightness(1.2);
  border-radius: 50%;
}

    .mobile-menu-icon-close {
      display: block;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    }


  .navbar .nav-body {
     padding: var(--gap) var(--gap-double);
  }
}
  
@media (max-width: 325px) {
  .logo-title {
    display: none;
  }
}

/* Footer Menu */

footer {
  background-color: var(--colours-primary-background-colour);
  border-top: solid 1px var(--colours-primary-colour);
  margin-top: auto;
}

.footer-container {
  padding: var(--padding-vertical) var(--padding-horizontal) 0px var(--padding-horizontal);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-double);
  justify-content: center;
  align-items: center;
}

.footer-about-section {
  display: flex;
  flex-direction: column;
  width: 35%;
}

.about-logo-container {
  display: flex;
  flex-direction: row;
  gap: var(--gap);
  margin-bottom: var(--gap);
  align-items: center;
}

.footer-section {
  flex: 1 1 220px;
  min-width: 200px;
}

.footer-menu-container {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.footer-subgrid {
  display: flex;
  flex-direction: row;
  gap: var(--gap-quad);
}

.footer-top-section {
  display: flex;
  flex-direction: row;
  gap: var(--gap-quad);
  align-items: flex-start;
  justify-content: center;
}

.footer-menu-container a,
.footer-menu-container p {
color: var(--colours-font-primary-colour);
text-decoration: none;
font-weight: normal;
}

.footer-menu-container a:hover {
  text-decoration: underline;
}

.footer-bottom {
  text-align: center;
  padding: var(--padding-vertical-half);
}

.footer-bottom,
.footer-bottom a {
  color: var(--colours-primary-colour);
  text-decoration: none;
  font-weight: normal;
  font-size: 12px;
}

.footer-bottom a:hover {
  text-decoration: underline;
}

.footer-socials-container {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  max-width: 345px;
}

.social-icons {
  display: flex;
  gap: var(--gap);
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: var(--gap);
}

.social-icons img {
  width: 30px;
  height: 30px;
  transition: filter 0.3s ease;
}

.social-icons a:hover img {
  filter: brightness(0) saturate(100%) invert(54%) sepia(99%) saturate(747%) hue-rotate(71deg) brightness(102%) contrast(102%);
}


/* When screen is under 1230px – Switch to 1 + 3 layout */
@media (max-width: 1230px) {
  .footer-container {
    flex-direction: column;
    align-items: stretch;
  }

.footer-top-section {
  display: flex;
  flex-direction: column;
  gap: var(--gap-double);
  align-items: center;
  justify-content: center;
}

  .footer-about-section {
    width: 650px;
    margin-bottom: var(--gap-double);
  }

  .footer-subgrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--gap-double);
    width: 650px;
  }

  .footer-menu-container,
  .footer-socials-container {
    min-width: 200px;
  }
}


/* When screen is under 700px – Stack all sections vertically, center aligned */
@media (max-width: 700px) {


  .footer-top-section {
  align-items: flex-start;
}

  .footer-subgrid {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    width: 100%;
  }

  .footer-menu-container,
  .footer-socials-container {
    width: 100%;
    align-items: flex-start;
  }

  .footer-socials-container .social-icons {
    justify-content: center;
  }

  .footer-about-section {
    width: 500px;
  }

  .about-logo-container {
    justify-content: flex-start;
  }

  .footer-bottom {
    text-align: left;
    padding: var(--gap) 0px;
  }
}

@media (max-width: 550px) {
  .footer-about-section {
    width: 350px;
  }
}

@media (max-width: 380px) {
  .footer-about-section {
    width: 250px;
  }

.about-logo-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

}

/* Scroll to top functionality */

#scrollToTopBtn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  background-color: var(--colours-primary-colour);
  color: black !important;
  border: none;
  outline: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 32px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.3s ease;
}

#scrollToTopBtn.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

#scrollToTopBtn:hover {
  background-color: var(--colours-primary-hover-colour);
}

/* Random GIF button */


#randomGifBtn {
  position: fixed;
  bottom: 30px;
  right: 100px; /* Offset it next to the scroll-to-top button */
  z-index: 999;
  background-color: var(--colours-primary-colour);
  color: black;
  border: none;
  outline: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 32px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.3s ease;
}

#randomGifBtn.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

#randomGifBtn:hover {
  background-color: var(--colours-primary-hover-colour);
}

/* GIF modal */

.gif-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
}

.gif-modal-content {
  position: relative;
  max-width: 90%;
  max-height: 80vh;
  padding: var(--padding-inner-container);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}

.gif-modal img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}

.close-gif-modal {
  position: absolute;
  top: -20px;
  right: -20px;
  font-size: 48px;
  background: var(--colours-primary-colour);
  border-radius: 50%;
  padding: 4px 14px;
  color: black;
  font-weight: normal;
  cursor: pointer;
  z-index: 1001;
  line-height: 0.99;
  transition: all 0.3s ease;
}

/* Hero Image section - Home Page */

.hero-home-hero-section {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 800px;

  background-image: url('Assets/Hero-Images/D3 - Home Hero - Desktop - small.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}



.hero-home-text-wrapper {
  position: relative;
  z-index: 1;
  color: white;
  gap: var(--gap);
  padding: var(--padding-vertical) var(--padding-horizontal);
  max-width: var(--max-width);
  width: 100%;
  margin: 0px auto;
  display: flex;
  flex-direction: column;
}

.hero-home-hero-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, var(--colours-primary-background-colour) 100%);
  pointer-events: none;
  z-index: 2;
}

.hero-home-hero-title {
  font-family: var(--fonts-family-logo-font);
  text-align: left;
  font-weight: 100;
  font-size: clamp(28px, 5.5vw, 82px);
  color: var(--colours-primary-colour);
  text-shadow: 0px 0px 175px var(--colours-primary-colour);
}

.hero-home-hero-description {
  font-family: var(--fonts-family-body-font);
  font-weight: var(--fonts-weight-body-weight);
  font-size: clamp(14px, 2.5vw, 24px);
  line-height: 1.5;
  color: var(--colours-font-primary-colour);
  text-shadow: 1px 1px 4px var(--colours-border-colour);
  max-width: 800px;
}

.hero-home-hero-buttons {
  display: flex;
  gap: var(--gap);
}


@media (max-width: 1000px) {
.hero-home-hero-description {
  max-width: 600px;
}


}



@media (max-width: 550px) {
  .hero-home-hero-section {
    aspect-ratio: 2 / 3;
    min-height: 300px;
    max-height: 500px;
    background-image: url('Assets/Hero-Images/D3 - Home Hero - Mobile - small.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  
.hero-home-text-wrapper {
  margin-top: 0px;
  }
}


@media (max-width: 550px) {
  .hero-home-hero-buttons {
    display: flex;
    flex-direction: column;
  }
}

@media (max-width: 350px) {
  .hero-home-hero-title {
    font-size: 20px;
  }

  .hero-home-hero-buttons {
    display: none;
  }
}


@media (max-width: 1000px) {
  .hero-home-text-wrapper {
    padding-top: 100px;
}
}

@media (max-width: 850px) {
  .hero-home-text-wrapper {
    padding-top: 120px;
}

.hero-home-hero-title {
  font-size: 20px;
}

.hero-home-hero-description {
  font-size: 14px;
  max-width: 600px;
}
}

@media (max-width: 350px) {

.hero-home-hero-description {
  font-size: 14px;
  max-width: 600px;
}
}




/* Gaming Showcase Section */

.showcase-wrapper {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap-double);
  padding: var(--padding-vertical) var(--padding-horizontal);
  align-items: center  
}

.showcase-header {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  text-align: center;
}

.showcase-header {
  max-width: 800px;
}

.featured-game-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-double);
  align-items: stretch;
}

.featured-game-card {
  background-color: var(--colours-secondary-background-colour);
  border-radius: var(--border-radius);
  padding: var(--padding-inner-container);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
  height: 100%;
  text-align: left;
  box-shadow: var(--box-shadow);
  gap: var(--gap);
}

.featured-game-image {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
  border-radius: var(--border-radius);
}

.game-text-container {
  gap: var(--gap-double);
}

.featured-game-card h2 {
  color: var(--colours-primary-colour);
  margin: var(--gap) 0 0;
  text-shadow: none;
  text-align: left;
}

.featured-game-card p {
  text-align: left;
  flex-grow: 1;
  margin: var(--gap) 0;
}

.featured-game-card .button-secondary {
  align-self: center;
  margin-top: auto;
}

/* Mobile Responsive */
@media (max-width: 1000px) {
  .featured-game-grid {
    grid-template-columns: repeat(2, 2fr);
  }

  .featured-game-card {
    height: auto;
  }
}

/* Mobile Responsive */
@media (max-width: 400px) {
  .featured-game-grid {
    grid-template-columns: 1fr;
  }

  .featured-game-card {
    height: auto;
  }
}




/* Youtube Featured Section - Home Page */

.youtube-featured-section {
  padding: var(--padding-vertical) var(--padding-horizontal);
  background-image: url('Assets/Backgrounds/Background Image 2 - Video Wrapper - V3.webp');
  background-size: 1440px;
  background-position: center;
  background-repeat: no-repeat;
}

.youtube-featured-wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  gap: var(--gap-double);
}

.youtube-featured-text {
  display: flex;
  max-width: 800px;
  text-align: center;
  gap: var(--gap);
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.video-container-home {
  width: 100%;
  box-sizing: border-box;
  max-width: 900px;
}

#latest-video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  box-shadow: var(--box-shadow);
}

#latest-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: none;
  max-width: 100%;
}

.youtube-featured-buttons {
  display: flex;
  justify-content: center;
  gap: var(--gap);
  flex-wrap: wrap;
}

#youtube-lazy-placeholder {
  position: relative;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  background-color: #000;
  width: 100%;
  height: 0;
  overflow: hidden;
}

#youtube-lazy-placeholder iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 1200px) {
  .youtube-featured-section {
    background-image: none;
  }

  #latest-video iframe {
    height: 400px;
  }
}





/* Assets Home Page Section */

.assets-container {
  padding: var(--padding-vertical) var(--padding-horizontal);
  display: flex;
  flex-direction: column;
  gap: var(--gap-double);
}

.assets-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-double);
  justify-content: space-between;
  max-width: 1350px;
  margin: 0 auto;
}

.assets-text {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.asset-block {
  flex: 1 1 45%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-double);
}

.asset-block h2 {
  text-transform: uppercase;
}

.asset-image-wrapper {
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
}

.asset-image {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 7;
  box-shadow: var(--box-shadow);
  border-radius: var(--border-radius);
  filter: grayscale(100%);
}

.asset-image:hover {
  filter: grayscale(0%);
  transition: 0.3s ease;
  transform: scale(1.05);
  box-shadow: 0 0 25px var(--colours-primary-colour);
  z-index: 50;
}

/* Responsive layout */
@media screen and (max-width: 550px) {
  .assets-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .asset-block {
    flex: 1 1 100%;
  }
}

@media screen and (max-width: 1000px) {
  .asset-image {
    filter: none;
  }
}






/* Home page about section - Dreams and Dreamers */
.about-section .about-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--padding-vertical) var(--padding-horizontal);
}

.about-container {
  display: flex;
  flex-direction: column;
  gap: var(--gap-double);
}

.dreams-text-container {
  text-align: center;
  max-width: 800px;
  gap: 12px;
  display: flex;
  margin: 0 auto;
  flex-direction: column;
}

.dream-container-wrappers {
  display: flex;
  flex-direction: column;
  gap: var(--gap-double);
}

.dreamers-container {
  display: flex;
  max-width: 800px;
  padding: var(--padding-inner-container);
  box-shadow: var(--box-shadow);
  border-radius: var(--border-radius);
  background-color: var(--colours-secondary-background-colour);
}

.dreamers-text {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding-left: var(--gap);
  gap: var(--gap);
}

.dreamers-container h3 {
  text-align: left;
}

.dreams-right {
  display: flex;
  justify-content: flex-end;
}

.dreams-container {
  display: flex;
  flex-direction: row-reverse;
  max-width: 800px;
  padding: var(--padding-inner-container);
  box-shadow: var(--box-shadow);
  border-radius: var(--border-radius);
  background-color: var(--colours-secondary-background-colour);
}

.dreams-text {
  display: flex;
  flex-direction: column;
  text-align: right;
  padding-right: var(--gap);
  gap: var(--gap);
}

.dreams-container h3 {
  text-align: right;
}


.dreamers-container img,
.dreams-container img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 1 / 1;
  border-radius: var(--border-radius);
}

@media screen and (max-width: 550px) {
  .dreamers-container,
  .dreams-container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
    gap: var(--gap);
  }
  .dreamers-container,
  .dreams-container {
    flex-direction: column;
    display: flex;
  }

.dreams-text,
.dreams-container h3,
.dreamers-text,
.dreamers-container h3 {
  text-align: left;
  padding: 0px;
  }
}


/* About Roundels */
.features-section {
  padding: var(--padding-vertical) var(--padding-horizontal);
  text-align: center;
}

.features-roundel-container {
  display: flex;
  flex-direction: column;
  gap: var(--gap-double);
}


.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-quad);
  justify-items: center;
  max-width: var(--max-width);
  margin: 0 auto;
}


.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-double);
  width: 100%;
}

.feature-item h4 {
    color: var(--colours-font-primary-colour);
    text-align: center;
    text-shadow: none;
    font-family: var(--fonts-family-heading-font);
    font-size: var(--fonts-size-H4-size);
    font-style: normal;
    font-weight: var(--fonts-weight-H4-weight);
    line-height: normal;
    letter-spacing: var(--fonts-letter-spacing-heading-spacing);
    margin: 0px !important;
  }

.roundel {
  width: 100%;
  aspect-ratio: 1 / 1; /* Makes it a perfect square */
  background-color: var(--colours-secondary-background-colour);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.roundel:hover {
  transform: scale(1.10);
  box-shadow: 0px 0px 70px var(--colours-primary-colour);
}

.roundel img {
  width: 90%;
  height: 90%;
  object-fit: cover;
  border-radius: var(--border-radius);
}

/* Tablet: 2x2 layout */
@media (max-width: 1000px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 550px) {
  .features-grid {
    grid-template-columns: repeat(1, 4fr);
  }
}



/* Testimonial Roundel CSS */

.testimonials-section {
  padding: var(--padding-vertical) var(--padding-horizontal);
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.testimonials-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-quad);
}

.testimonials-text-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  max-width: 800px;
}

.testimonial-container-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--gap-quad);
}

.testimonial {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-double);
  flex-wrap: wrap;
}

.testimonial.reverse {
  flex-direction: row-reverse;
}
.testimonial-content {
  max-width: 600px;
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: var(--gap);
}

.testimonial-content-right {
  max-width: 600px;
  display: flex;
  flex-direction: column;
  text-align: right;
  gap: var(--gap);
}

.testimonial-content h3 {
  text-align: left;
  text-transform: uppercase;
  color: var(--colours-primary-colour);
}

.testimonial-content-right h3 {
  text-align: right;
  text-transform: uppercase;
  color: var(--colours-primary-colour);
}

.testimonial-content .author,
.testimonial-content-right .author {
  color: var(--colours-primary-colour);
}

.testimonial-roundel {
  position: relative;
  width: var(--roundel-size);
  height: var(--roundel-size);
  border-radius: 50%;
  background-color: var(--roundel-background);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--box-shadow);
  z-index: 1;
}

.testimonial-roundel::before {
  content: "";
  position: absolute;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background-color: var(--roundel-glow);
  top: -5%;
  left: -5%;
  z-index: -1;
}

.testimonial-roundel img {
  width: 85%;
  height: 85%;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--box-shadow);
  border: 5px solid var(--colours-secondary-background-colour);
}

.testimonial-roundel-right {
  position: relative;
  width: var(--roundel-size);
  height: var(--roundel-size);
  border-radius: 50%;
  background-color: var(--roundel-background);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--box-shadow);
  z-index: 1;
}

.testimonial-roundel-right::before {
  content: "";
  position: absolute;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background-color: var(--roundel-glow);
  top: -5%;
  left: 45%;
  z-index: -1;
}

.testimonial-roundel-right img {
  width: 85%;
  height: 85%;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--box-shadow);
  border: 5px solid var(--colours-secondary-background-colour);
}





@media (max-width: 940px) {

.testimonial,
.testimonial.reverse {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: var(--gap-double);
    flex-wrap: wrap;
  }


.testimonial-content,
.testimonial-content h5,
.testimonial-content .author {
  text-align: center;
  }


.testimonial-content-right,
.testimonial-content-right h5,
.testimonial-content-right .author {
  text-align: center;
  padding-right: 0px;
  }
}


/* Hero Image section - Home Page */

.hero-section {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  min-height: 350px;
  max-height: 450px;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: var(--colours-primary-background-colour);
  display: flex;
  align-items: center;
}

.hero-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, var(--colours-primary-background-colour) 50%);
  pointer-events: none;
  z-index: 2;
}

.text-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
  padding: var(--padding-vertical) var(--padding-horizontal);
  width: 100%;
  margin: 100px auto 0px auto;
}

.hero-title {
  font-family: var(--fonts-family-logo-font);
  text-align: left;
  font-weight: 100;
  font-size: clamp(28px, 5.5vw, 82px);
  color: var(--colours-primary-colour);
  text-shadow: 0px 0px 175px var(--colours-primary-colour);
  text-align: center
}

.hero-description {
  font-family: var(--fonts-family-body-font);
  font-weight: var(--fonts-weight-body-weight);
  font-size: clamp(14px, 2.5vw, 24px);
  line-height: 1.5;
  color: var(--colours-font-primary-colour);
  text-shadow: 1px 1px 4px var(--colours-border-colour);
  text-align: center;
   max-width: 800px;
}


@media (max-width: 1000px) {
.hero-description {
  max-width: clamp(400px, 60vw, 600px);
}
}


@media (max-width: 500px) {
  .hero-section {
    aspect-ratio: 2 / 3;
    min-height: 300px;
    max-height: 500px;
  }
}


/* Page Heading Section */
.page-heading-section {
  padding: var(--padding-vertical) var(--padding-horizontal) 0px var(--padding-horizontal);
  max-width: 1300px;
  margin: 0 auto;
}


/* Page Heading Section */
.page-heading-other-section {
  padding: var(--padding-vertical-other) var(--padding-horizontal) var(--padding-vertical-half) var(--padding-horizontal);
  max-width: 1300px;
  margin: 0 auto;
}

@media (max-width: 300px) {
.page-heading-other-section h1 {
  font-size: 24px
}
}





/* Game Containers */


.game-container-section {
  padding: var(--padding-vertical) var(--padding-horizontal);
}

.game-container {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  max-width: 1300px;
  border-radius: var(--border-radius);
  background-image: url('Assets/GameContainers/Link Desktop.webp');
  background-size: cover;
  background-position: center;
  margin: 0 auto;
  box-shadow: var(--box-shadow);
}

.game-container-reverse {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  max-width: 1300px;
  border-radius: var(--border-radius);
  background-image: url('Assets/GameContainers/Link Desktop.webp');
  background-size: cover;
  background-position: center;
  margin: 0 auto;
  box-shadow: var(--box-shadow);
}


.game-info-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--gap);
  background-color: rgba(var(--colours-secondary-background-colour-rgb), 0.9);
  border-radius: var(--border-radius);
  margin: var(--padding-inner-container);
  max-width: 900px;
  padding: var(--padding-inner-container);

}

.text-container {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.text-container h2 {
  text-align: left;
  color: var(--colours-primary-colour);
}

.game-media-container {
  display: flex;
  flex-direction: row;
  gap: var(--gap);
}

.game-media-container-reverse {
  display: flex;
  flex-direction: row-reverse;
  gap: var(--gap);
}



.game-images {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(4, 1fr);
  flex-shrink: 0px;
  cursor: pointer;
}

.game-images img {
  width: 100%; /* Full width of grid cell */
  height: auto; /* Maintain aspect ratio */
  aspect-ratio: 25 / 16;
  object-fit: cover;
  border-radius: var(--border-radius);
  display: block;
  box-shadow: var(--box-shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.game-images img:hover {
  transform: scale(1.1);
  box-shadow: 0 0 20px var(--colours-primary-colour);
  z-index: 2;
  position: relative;
}

.game-button-container .button-secondary {
  height: 100%;
  width: 100%;
}




@media (max-width: 850px) {

  .game-media-container {
    display: flex;
    flex-direction: column;
  }

  .game-media-container-reverse {
    display: flex;
    flex-direction: column;
  }
}



@media (max-width: 600px) {


  .game-container-section {
  padding: var(--padding-vertical-half) var(--padding-horizontal);
}

  .game-container {
    height: 1100px;
    max-width: 100%;
    display: flex;
    align-items: flex-end;
    background-image: url('Assets/GameContainers/Link Mobile.webp');
    margin: 0 auto;
    background-size: cover;
    background-position: center;
  }

    .game-container-reverse {
    height: 1100px;
    max-width: 100%;
    display: flex;
    align-items: flex-end;
    background-image: url('Assets/GameContainers/Link Mobile.webp');
    margin: 0 auto;
    background-size: cover;
    background-position: center;
  }

  .game-info-container {
    width: auto;
    max-width: 95%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-end;
    margin: 0 auto;
    margin-bottom: var(--padding-inner-container);
  }

  .game-images {
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
  }


.game-images img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--border-radius);
  display: block;
}

  .game-button-container .button-secondary {
    width: 100%;
    height: 52px;
  }
}



/* Game Image Modal */

/* Initial hidden state */
#image-modal {
  display: none;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* When shown */
#image-modal.show {
  display: flex;
  opacity: 1;
  transform: scale(1);
}

.image-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.8);

  /* Flex to center */
  display: flex;
  align-items: center;
  justify-content: center;
}


.image-modal .modal-content {
  display: block;
  margin: auto;
  max-width: 90%;
  max-height: 80vh;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}

.image-modal .close-modal {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 40px;
  height: 40px;
  background: var(--colours-primary-colour);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1002;
  transition: all 0.3s ease;
}

.image-modal .close-icon {
  color: black;
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
  pointer-events: none; /* Ensures clicks pass through to the outer span */
}

.modal-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 90vw;
  max-height: 90vh;
  margin: auto;
}


.image-modal .modal-content {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  height: auto;
  width: auto;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  position: relative;
}

.modal-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.4);
  border: 3px solid var(--colours-primary-colour);
  border-radius: 50%;
  cursor: pointer;
  z-index: 1001;
  transition: all 0.3s ease;
}

.modal-arrow .arrow-char {
  color: var(--colours-primary-colour);
  font-size: 36px;
  line-height: 1;
  pointer-events: none;
}

.left-arrow {
  left: 0;
}

.right-arrow {
  right: 0;
}


.image-modal .close-modal:hover {
  color: var(--colours-primary-hover-colour);
  background: rgba(255, 255, 255, 0.1);
}

.image-modal .close-modal:hover,
.modal-arrow:hover {
  color: var(--colours-primary-hover-colour);
  transition: 0.3s ease;
  z-index: 1;
  cursor: pointer;
}

@media (max-width: 1000px) {
  .left-arrow,
  .right-arrow {
    font-size: 62px;
  }

}

@media (max-width: 600px) {
  .image-modal .close-modal {
    top: -12px;
    right: -12px;
    font-size: 28px;
    padding: 4px 10px;
  }
}

@media (max-width: 450px) {
  .image-modal .close-modal {
    font-size: 20px;
    padding: 0px 0px;
  }
}

@media (max-width: 600px) {
  .image-modal .close-modal {
    top: -12px;
    right: -12px;
    width: 32px;
    height: 32px;
  }

  .image-modal .close-icon {
    font-size: 20px;
  }
}

@media (max-width: 450px) {
  .image-modal .close-modal {
    width: 28px;
    height: 28px;
  }

  .image-modal .close-icon {
    font-size: 18px;
  }
}





/* Download Button Modal Styling */

/* Download Modal Styles */
.download-modal {
  display: none;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.3s ease, transform 0.3s ease;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}

.download-modal.show {
  opacity: 1;
  transform: scale(1);
}

.download-modal-content {
  background-color: var(--colours-secondary-background-colour);
  padding: var(--padding-inner-container);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  max-width: 500px;
  width: 100%;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gap-double);
}

.download-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.download-buttons .button-secondary {
  width: 100%;
  height: 80px;
  text-align: center;
}

.close-download-modal {
  position: absolute;
  top: 0px;
  right: var(--padding-inner-container);
  font-size: var(--fonts-size-H3-size);
  color: var(--colours-primary-colour);
  cursor: pointer;
}



/* More Games Container */

.more-games-section {
  padding: var(--padding-vertical) var(--padding-horizontal) var(--padding-vertical) var(--padding-horizontal);
}

.more-games-container {
  display: flex;
  flex-direction: column;
  gap: var(--gap-double);
  background-color: var(--colours-secondary-background-colour);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  justify-content: center;
  align-items: center;
  padding: var(--padding-inner-container);
  max-width: 1300px;
  margin: 0 auto;
  min-height: 200px;
}




/* Assets Page */


/* Layout */
#assets-section {
  background-color: var(--colours-primary-background-colour);
  max-width: var(--max-width);
  padding: var(--padding-vertical) var(--padding-horizontal) var(--padding-vertical-double) var(--padding-horizontal);
  margin: 0 auto;
}

.assets-section-container {
  display: flex;
  flex-direction: column;
  gap: var(--gap-quad)
}

/* Filter Section */
.filters-panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--gap-double);
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.filter-button-group {
  display: flex;
  flex-wrap: wrap;
  max-width: var(--max-width);
  flex-direction: row;
  gap: var(--gap);
}

.filter-btn {
  background-color: var(--colours-secondary-background-colour);
  color: var(--colours-font-primary-colour);
  border: 1px solid var(--colours-border-colour);
  border-radius: var(--border-radius);
  padding: var(--inner-container-vertical) var(--inner-container-horizontal);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.filter-btn.active {
  border-color: var(--colours-primary-colour);
  color: var(--colours-primary-colour);
}

.asset-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-double);
  align-items: stretch;
}

/* Asset Item */
.asset-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--colours-secondary-background-colour);
  border-radius: var(--border-radius);
  overflow: hidden;
  padding: var(--padding-inner-container);
  gap: var(--gap);
  text-align: left;
  transition: transform 0.2s ease;
  height: 100%;       /* Important */
  box-sizing: border-box;
}

.assets-text-button-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  gap: var(--gap);
}

.assets-text-container {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.assets-text-container h3 {
  text-align: left;
  color: var(--colours-primary-colour);
}

.assets-button-container {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.asset-item h4 {
  text-align: left;
}

.asset-item .button-primary,
.asset-item .button-outline {
  width: 100%;
}

.asset-item img {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
}

@media (min-width: 576px) {
  .filterToggleBtn {
  display: none;
}
}

@media (max-width: 575px) {
  .filters-panel {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease;
  }

  .filters-panel.open {
    max-height: 1000px;
    opacity: 1;
  }

.filterToggleBtn {
  color: var(--colours-button-primary-font-colour);
  background-color: var(--colours-primary-colour);
  text-align: center;
  font-family: var(--fonts-family-button-font);
  font-size: var(--fonts-size-button-text-size);
  font-style: normal;
  font-weight: var(--fonts-weight-button-text-weight);
  line-height: normal;
  letter-spacing: var(--fonts-letter-spacing-button-spacing);
  
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  gap: 6px;

  width: 100%;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--border-radius);
  text-decoration: none;
  box-shadow: var(--box-shadow);
  transition: 0.3s ease;
  z-index: 1;
  cursor: pointer;
  border: none;
}

.toggle-icon {
  display: inline-block;
  transition: transform 0.3s ease;
  font-weight: bold;
  font-size: var(--fonts-size-body-size);
  margin-left: 8px;
}

#filterToggleBtn.active .toggle-icon {
  transform: rotate(45deg); /* + turns into × */
}

}




@media (max-width: 1100px) {
.asset-grid {
  grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 750px) {
.asset-grid {
  grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
.asset-grid {
  grid-template-columns: repeat(1, 1fr);
  }
}

/* Preview Modal on Assets Page */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.modal.hidden {
  display: none;
}

.modal-content {
  background: var(--colours-secondary-background-colour);
  gap: var(--gap-double);
  text-align: left;
  padding: var(--padding-inner-container-policy);
  border-radius: var(--border-radius);
  width: 90%;
  max-width: 900px;
  position: relative;
}

.modal-text {
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: var(--gap);
}

.modal-text h4 {
  text-align: left;
}

.modal-text .button-primary {
  width: 100%;
}

.modal-close {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 40px;
  height: 40px;
  background: var(--colours-primary-colour);
  border-radius: 50%;
  color: black;
  font-size: 24px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1002;
  transition: all 0.3s ease;
  padding: 0; /* remove default button padding if present */
  border: none; /* optional: remove outline border */
}


.responsive-video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 ratio */
  height: 0;
  overflow: hidden;
  border-radius: var(--border-radius);
}

.responsive-video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



/* Resources Page */

#Featured-videos {
  background-image: url("Assets/Backgrounds/resources-background-1.webp");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

#Latest-Videos {
  background-image: url("Assets/Backgrounds/resources-background-2-2.webp");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

.resources-videos-container {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  gap: var(--gap-double);
  padding: var(--padding-vertical) var(--padding-horizontal);
  width: 100%;
  max-width: 1200px;
}

.resources-video-wrapper {
  width: 100%;
  max-width: 1200px; /* or whatever your global max is */
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gap-double);
}


.video-container {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--gap);
}

.video-container a {
  display: block;
  width: 100%;
}

.video-container img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}


.video-container p {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  text-align: left;
  padding: 0 4px;
}

.resources-button-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--gap-double);
  justify-content: center;
  width: 100%;
}

.load-more-container {
  display: flex;
  justify-content: center;
  width: 100%;
}


.download-modal {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}


.video-thumbnail {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.video-thumbnail img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
  border-radius: var(--border-radius);
}

.video-thumbnail::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--border-radius);
  background: rgba(0, 255, 0, 0.1); /* subtle green overlay */
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.video-thumbnail:hover {
  transform: scale(1.04);
  box-shadow: 0 0 20px var(--colours-primary-colour);
  z-index: 10;
}

.video-thumbnail:hover::before {
  opacity: 1;
}

.video-thumbnail:hover img {
  transform: scale(1.05);
}

.video-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  color: var(--colours-primary-colour);
  opacity: 0.85;
  pointer-events: none;
  transition: transform 0.3s ease;
}

.video-thumbnail:hover .video-play-icon {
  transform: translate(-50%, -50%) scale(1.15);
}






@media (max-width: 700px) {
  .resources-video-wrapper {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

@media (max-width: 500px) {
  .resources-video-wrapper {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1300px) {
#Featured-videos {
  background-image: none;
}

#Latest-Videos {
  background-image: none;
}

}


/* Resources subscription container */

.resources-sub-section {
  padding: var(--padding-vertical) var(--padding-horizontal) var(--padding-vertical) var(--padding-horizontal);
}

.resources-sub-container {
  display: flex;
  flex-direction: column;
  gap: var(--gap-double);
  background-color: var(--colours-secondary-background-colour);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  justify-content: center;
  align-items: center;
  padding: var(--padding-inner-container);
  max-width: 1300px;
  margin: 0 auto;
  min-height: 200px;
}






/* Contact Us Page */

.contact-us-section {
  padding: var(--padding-vertical-half) var(--padding-horizontal) var(--padding-vertical) var(--padding-horizontal);
  display: flex;
  flex-direction: column;
}

.contact-us-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-quad);
  margin: 0 auto;
}

.social-container {
  display: flex;
  flex-direction: column;
  gap: var(--gap-double);
}

.social-container .social-icons-menu {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(6, 1fr);
    align-items: flex-start;
    margin-top: 0px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  background: var(--colours-secondary-background-colour);
  padding: var(--padding-inner-container);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}

.input-wrapper-form {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.input-container {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}


input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: var(--padding-inner-container);
  border: 1px solid var(--colours-border-colour);
  border-radius: var(--border-radius);
  margin-bottom: 5px;
  font-size: var(--fonts-size-body-size);
  background-color: var(--colours-text-input-background-colour);
  color: var(--colours-text-input-colour);
}

.error {
  font-size: var(--fonts-size-small-text-size);
  color: var(--colours-warning-colour);
}

.input-container .button-primary {
  border: none;
}

.contact-form,
.social-container {
  width: 100%;
  max-width: 500px;
  box-sizing: border-box;
}

.contact-us-wrapper {
  width: 100%;
  max-width: 1000px;
  box-sizing: border-box;
  overflow-x: hidden;
}

.contact-form h3 {
  text-align: left;
}


.social-container h3 {
  text-align: left;
}


@media (max-width: 1000px) {
  .contact-us-wrapper {
  margin: 0px;
  }

.input-container .button-primary {
  width: 100%;
}

.social-container h3,
.social-container p {
  text-align: center;
}

}

@media (max-width: 725px) {
  .contact-us-wrapper {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  }
}

@media (max-width: 725px) {
  .contact-us-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .social-container,
  .contact-form {
    width: 100%;
    max-width: 90%; /* This is mobile-safe */
    margin: 0 auto;
  }
}

@media (max-width: 350px) {
  .social-container .social-icons-menu {
    grid-template-columns: repeat(3, 1fr);
}
.contact-us-section {
  padding: var(--padding-vertical-half) 4px var(--padding-vertical) 4px;
  display: flex;
  flex-direction: column;
}

}


/* Google Recaptcha Sizing */
.recaptcha-container {
  display: flex;
  justify-content: left;
  max-width: 100%;
  overflow-x: auto;
}


/* Privacy & Terms Policy Section */

.policy-container {
    padding: var(--padding-vertical-half) var(--padding-horizontal) var(--padding-vertical) var(--padding-horizontal);
  }

  .policy-background {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    background-color: var(--colours-secondary-background-colour);
    border-radius: var(--border-radius);
    max-width: 1200px;
    padding: var(--padding-inner-container-policy);
    box-shadow: var(--box-shadow);
  }

  .policy-background a {
    color: white;
    text-decoration: underline;
  }