/* ================================================================================================================

   FC NATIONS THEME — MASTER STYLESHEET HUB
   Author: Liam
   Template Name: Page Templates
   Version: 1.0

   This section acts as a quick navigation index for the stylesheet.
   Use CMD+F / CTRL+F and search the SECTION NUMBER to jump directly to that block.

   ================================================================================================================


   00000 — GLOBAL RESET / BASE STYLES
   00000 — TYPOGRAPHY
   00000 — GLOBAL LINKS & BUTTONS


   00000 — NAVBAR (DESKTOP)
   00000 — NAVBAR DROPDOWNS
   00000 — NAVBAR SOCIAL ICONS
   00000 — HAMBURGER NAVIGATION (≤1280px)


   00000 — HERO SECTIONS
   00000 — PAGE HERO
   00000 — TEAM HERO
   00000 — GALLERY HERO


   00000 — CLUB PAGE
   00000 — ABOUT SECTION
   00000 — MISSION STATEMENT


   00000 — COMMUNITY EVENTS
   00000 — COMMUNITY TESTIMONIALS


   00000 — HISTORY / TIMELINE


   00000 — MEDIA GALLERY


   00000 — WELFARE PAGE


   00000 — JOIN US PAGE


   00000 — DOCUMENTS PAGE


   00000 — TEAMS PAGE
   00000 — FIRST TEAM
   00000 — SECOND TEAM


   00000 — SPONSORS PAGE
   00000 — SINGLE SPONSOR PAGE


   00000 — SHOP PAGE
   00000 — SINGLE PRODUCT PAGE


   00000 — CONTACT PAGE
   00000 — CONTACT MAP


   00000 — FOOTER


   ================================================================================================================


   MEDIA QUERIES

   00000 — 1280px (Touch Navigation)
   00000 — 1024px (Tablet Landscape)
   00000 — 768px  (Tablet Portrait)
   00000 — 480px  (Mobile)


================================================================================================================ */

.fade-in {
  opacity:0;
  transform:translateY(60px);
  transition:all 1s ease-out;
}

.fade-in.visible {
  opacity:1;
  transform:translateY(0);
}

h1 {
  font-family: "Century Gothic", "AppleGothic", Futura, sans-serif; 
  font-weight: 300; font-size: 1.50rem;
  line-height:auto;
  font-style: normal;
  letter-spacing: 0.05rem; 
  padding: 0; margin-top:0; margin-bottom: 2rem;
}

h3 {
  font-family: "Century Gothic", "AppleGothic", Futura, sans-serif; 
  font-weight: 300; font-size: 1rem; font-style: normal;
  line-height:auto; letter-spacing: 0.05rem; 
  padding: 0; margin: 0;
}













/* 
Theme Name - FC Nations Child Theme
Template Name - Page Hero 
Version: 1.0 */

#page-hero {
  position: relative;
  height: 50vh; min-height: 50vh;
  display: flex;
  justify-content: center; 
  align-items: stretch;  
  color: white;
  z-index: 0;
  background-color: #000;
}

#page-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: url('https://madebyliam.co/nationsfc/hero.jpg');
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.5; z-index: -1;
}

#page-hero::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 15%);
  z-index: -1; 
}
#page-hero h1 { text-align:center; font-size:3.25rem; text-transform:none;!important;
  display: block !important;
  opacity: 1 !important;
	visibility: visible !important; padding-bottom:1.25rem; margin:0;
}

#page-hero h2 {
  text-align: center;
  font-size: 1rem;
  text-transform: none !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  padding: 0;
  margin: 0;
}
#page-hero-wrap {
  width: 80%;
  margin: 0 auto;
}
.page-hero-content { 
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 8vh;
}





/* 
Theme Name - FC Nations Child Theme
Template Name - Gallery Hero 
Version: 1.0 */

#gallery-hero {
    position: relative;
    height: 40vh;
    min-height: 70vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #000;
    z-index: 0; /* stacking context for pseudo-elements */
}

/* Dark overlay behind content */
#gallery-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.7));
    z-index: -1; /* make sure it's behind the content */
}

#gallery-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 15%);
    z-index: -1; /* behind content */
}

#gallery-hero-wrap {
    position: relative;
    z-index: 1;
    width: 80%;
    margin: 0 auto;
    display: flex;
    align-items: stretch;
    min-height: 100%;
}

.gallery-hero-content {
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 13vh;    align-items: stretch;
}

#gallery-hero h1 {
    color: #fff;
    text-align: center;
    font-size: 3.25rem;
    text-transform: none !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding-bottom: 1.25rem;
    margin: 0;
}



/* 
Theme Name - FC Nations Child Theme
Template Name - Team Hero 
Version: 1.0 */

#team-hero {
  position: relative;
  height: 80vh; min-height: 80vh;
  display: flex;
  justify-content: center; 
  align-items: stretch;  
  color: white;
  z-index: 0;
  background-color: #000;
}

#team-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: url('https://fcnations.com/img/team.jpg');
  background-size: cover;
  background-attachment: fixed;
  background-position: bottom;
  background-repeat: no-repeat;
  opacity: 0.75; z-index: -1;
}

#team-hero::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 15%);
  z-index: -1; 
}

#team-hero-wrap {
  width: 80%; 
  margin: 0 auto;
  display: flex;
  align-items: stretch; 
  height: 100%;         
}

.team-hero-content {
  width: auto; height: 100%; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top:13vh; 
}
#team-hero h1 {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}



/* 
Theme Name - FC Nations Child Theme
Template Name - Fixed Buttons 
Version: 1.0 */

.page-buttons-wrap {
  width:100%;
  top:7vh;
  padding:3rem 0;
  position:sticky;
  z-index:1000;
  transition:padding 0.25s ease;
}

.page-buttons-wrap.shrink{
  padding:1rem 0;
}

.page-buttons{
  display:flex;
  gap:0.5rem;
  flex-wrap:wrap;
}
	
.page-buttons button {
  background: #fff;
  border: 0.1rem solid #e7e0ea;
  color: #050417;
  padding: 0.5rem 1rem;
  border-radius: 500px;
  font-size: 0.9rem;
  cursor: pointer;
  font-weight: 100;
  text-transform: none;
  transition: background 0.3s, transform 0.3s;
}

.page-buttons button.active,
.page-buttons button:hover {
  background: #f7f4f8;
  border: 0.1rem solid #d7d8dd;
}	
















#club-first {
  background: #f8f8fc;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Inner Wrap */
#club-first-wrap {
  width: 80%;
  margin: 0 auto;
  padding: 4rem 0; /* vertical spacing */
  display: flex;
  justify-content: space-between;
  gap: 2%;                      /* optional spacing between flex items */
}

/* Image Block - Square with Background */
.club-first-one {
  width: 50%;
  display: flex;
  align-items: center;           /* vertically center the inner block */
  justify-content: flex-start;   /* horizontal alignment */
}
/* Inner Text Wrapper */
.club-first-one-wrap {
  display: flex;
  flex-direction: column;        /* stack h1 and p vertically */
  align-items: flex-start;       /* left-align text */
  gap: 1rem;                     /* spacing between h1 and p */
}

/* Optional: make text responsive */
.club-first-one-wrap h1 {
  margin: 0;
}
.club-first-one-wrap p {
  margin: 0;
}
.club-first-one-img {
  background-image: url('https://fcnations.com/img/accredited-england-football.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 300px;
  height: 90px;
  padding:0; margin-top:40px;
}
/* Text Block Container */
.club-first-two {
  width: 45%;                    /* relative width of parent */
  aspect-ratio: 1 / 1;           /* keeps square shape */
  background-image: url('https://fcnations.com/img/about-01.jpg');
  background-size: cover;        /* fills container without stretching */
  background-position: center;   /* centers image */
  min-width: 100px; min-height: 100px;           
  max-width: 500px; max-height: 500px;             
  width: 500px; height: 500px;    
  flex-shrink: 0;   	
}











#club-second { 
background:#f8f8fc;
width: 100%;
margin: 0; padding: 0;
}
#club-second-wrap { 
width: 80%; 

margin: 0 auto;   padding: 4rem 0; /* vertical spacing */ 
border-top:1px solid grey;
display: flex; justify-content:space-between;;
}
.club-second-one { width:25%;}
.club-second-two { width:25%; }
.club-second-three { width:25%; }
.club-second-four { width:25%; }
.club-one {  }
.club-two {  text-align:right;}
.club-three { text-align:center; }
.club-four { text-align:center; }

/* ⭐ ADDED NUMBER BLOCK STYLES */
.club-stat { 
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align:center;
}

.club-stat-number {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 5rem; color:#050417;
  text-align: center;
  line-height: 1;
}
.club-stat-number { text-align:center;
  display: inline-block;           /* allows us to control width */
  text-align: right;               /* keeps digits aligned right */
  font-variant-numeric: tabular-nums; /* all digits same width */
}
.club-stat-number::after {
  content: attr(data-placeholder); /* invisible placeholder text */
  visibility: hidden;              /* does not show */
  height: 0;                       /* no vertical space */
  display: inline-block;
}
.club-stat-label {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.1rem; color:#050417;
  text-align: center;
}
.club-stat-number .suffix {
  font-size: 0.5em;   /* or whatever size you want */
  vertical-align:0; /* optional: raise slightly */
  margin-left: 0.05em;   /* small spacing if needed */
}


#club-third {
  background: #fff;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Inner Wrap */
#club-third-wrap {
  width: 80%;
  margin: 0 auto;
  padding: 4rem 0; /* vertical spacing */
  display: flex;
  justify-content: space-between;
  gap: 2%;                      /* optional spacing between flex items */
}

/* Image Block - Square with Background */
.club-third-one {
  width: 45%;                    /* relative width of parent */
  aspect-ratio: 1 / 1;           /* keeps square shape */
  background-image: url('https://fcnations.com/img/about-01.jpg');
  background-size: cover;        /* fills container without stretching */
  background-position: center;   /* centers image */
  min-width: 100px; min-height: 100px;           
  max-width: 500px; max-height: 500px;             
  width: 500px; height: 500px;    
  flex-shrink: 0;                /* prevent shrinking on smaller screens */
}

/* Text Block Container */
.club-third-two {
  width: 50%;
  display: flex;
  align-items: center;           /* vertically center the inner block */
  justify-content: flex-start;   /* horizontal alignment */
}

/* Inner Text Wrapper */
.club-third-two-wrap {
  display: flex;
  flex-direction: column;        /* stack h1 and p vertically */
  align-items: flex-start;       /* left-align text */
  gap: 1rem;                     /* spacing between h1 and p */
}

/* Optional: make text responsive */
.club-third-two-wrap h1 {
  margin: 0;
}
.club-third-two-wrap p {
  margin: 0;
}
.club-third-two-wrap-img {
  background-image: url('https://fcnations.com/img/fa-kio.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 279px;
  height: 90px;
  padding:0; margin-top:40px;
}


#club-four { 
width: 100%;
margin: 0; padding: 0;
}
#club-four-wrap {
	width: 80%; 
margin: 0 auto; padding: 4rem 0; /* vertical spacing */ 
border-top:1px solid grey;
display: flex; justify-content:space-between;;

}



#club-testimonials-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.testimonial { 
    padding: 1rem;
    flex: 1 1 30%; /* ~3 per row */
    box-sizing: border-box;
}

.testimonial-header { 
    display: flex;
    align-items: center;   /* vertically align image and h3 */
    gap: 0.75rem;          /* space between image and title */
    margin-bottom: 1.50rem;
}

.testimonial-image img {
    border-radius: 50%;
    width: 40px;
    height:40px;
    object-fit: cover;
}

.testimonial-header h3 {
    font-family: "Bebas Neue", sans-serif;
    font-size: 1.85rem;
    margin: 0;
}

.testimonial-text p {
    margin:0; font-weight:400;
    font-size: 0.85rem;
    line-height: 1.6rem; margin-bottom:1.50rem;
}
.testimonial-text p.testimonial-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;  /* max 3 lines */
    overflow: hidden;
}
.testimonial-readmore { display:block;
    color:#050417;
    text-decoration: none;
    font-weight: 600;
	font-size: 0.85rem;
	transition: transform 0.2s ease;
}
.testimonial-readmore:hover {
    color:#797292;
	text-decoration:none;
	transform: translateX(0.5rem);
}






/* === START CLUB PAGES ================================================================================= */

/* === FC Nations ABOUT =====================================================================

  Theme Name: FC Nations Theme
  Section Name: About Page
  Section Number: 00000
  Author: Made by Liam
  Version: 1.0

============================================================================================================== */


#about {
  width: 100%; height: 100%;
  background: linear-gradient(
    35deg,
    #ffffff 60%,
    #f8f8fc 50%
  );	
}

#about-wrap { 
  padding: 3rem 0;	
  width: 80%; height:100%; 
  margin: 0 auto;
  display: flex; justify-content:space-between;
}

#about-left { 
	width:60%; height:100%; 
	display: flex; flex-direction: column;  
}

#about-right { 
	width:30%; height:100%; 
	display: flex; flex-direction: column;  
}

.about-intro, .about-facts { 
  position: sticky;
  height: max-content; margin-bottom:2rem
}

.about-intro, .about-facts h1 {
  margin-bottom: 20px;
}

.about-panel{
  position:relative;
  overflow:hidden;
  width:100%;
  padding-bottom:40px; 
}

.about-slider{
  display:flex;
  transition:transform 0.4s ease;
}

.about-slide{
  min-width:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.about-slide-content{
  display:flex;
  gap:2rem;
}

.about-text { display:flex; flex-direction:column;
  flex:1;
}

.about-text h1 { 
  margin-bottom:0 !important; 
  padding-bottom:0 !important; 
}

.about-detail {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  margin-bottom: .9rem;
}

.about-detail-title {
  font-weight: 400; 
  font-size:1rem;
}

.about-detail-text {
  color: #666;
  line-height: 1.5; font-size:0.9rem;
   
}

.about-detail h2,
.about-detail p {
  margin: 0; 
}
	
.about-image{
  flex:1.25;
  overflow: hidden;	
}

.about-image img {
  display: block;
  width: 100%;
  height: auto;
}

.about-arrow {
  font-size:18px;
  border:none;
  background:none;
  cursor:pointer;
	
  font-weight: 400; 
  font-size:1rem;	
}

.about-counter {
  position:absolute;
  bottom:10px;
  right:0%;
  display:flex;
  align-items:center;
  gap:12px;

  font-weight: 400; 
  font-size:1rem;	
}

/* === FC Nations CLUB STAFF =====================================================================

  Theme Name: FC Nations Theme
  Section Name: Club Staff Page
  Section Number: 00000
  Author: Made by Liam
  Version: 1.0

========================================================================================================================= */

#club-staff {
  width: 100%; height: 100%;
  background: #f8f8fc;
}

#club-staff-wrap { 
  padding: 0 0 3rem;	
  width: 80%; height:100%; 
  margin: 0 auto;
  display: flex; flex-direction:column;
}


.club-staff {
  width: 100%;
  display: grid;                      
  grid-template-columns: repeat(3, 1fr); 
  gap: 1rem;                          
  padding-bottom: 4rem;
}

.club-staff-group-title {
  grid-column: 1 / -1; 
  font-family: "Century Gothic", "AppleGothic", Futura, sans-serif;
  letter-spacing:0.06rem;
  font-weight: bold;
  font-size: 1.5rem;
  font-weight:300;
  color: #222;
}

.club-staff .club-staff-card { 
  display: flex;
  width: 100%;
  height: 140px;               
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.club-staff .club-staff-card:hover {
  transform: translateY(-5px);
}

.club-staff .club-staff-avatar {
  width: 70%;
  height: 100%;
  object-fit: cover;
  display: block;
object-position: 50% 30%;	
  margin: 0; padding: 0;
}

.club-staff .club-staff-info {
  width: 75%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem;
}


.club-staff .club-staff-info .club-staff-name {
  font-family: "Century Gothic", "AppleGothic", 
  Futura, sans-serif;  letter-spacing:0.1rem;
  font-size: 1.25rem;
  margin: 0;
  color: #222;
}


.club-staff .club-staff-info .club-staff-title {
  font-size: 0.9rem;
  font-weight: normal;
  color: #555;
  margin-top: 0.15rem;
}

#club-staff-key, #club-staff-welfare, #club-staff-media { padding:0 margin:0; }




/* === FC Nations CLUB STAFF PROFILE =====================================================================

  Theme Name: FC Nations Theme
  Section Name: Club Staff Profile Page
  Section Number: 00000-
  Author: Made by Liam
  Version: 1.0

========================================================================================================================= */

#club-staff-profile { 
  background:#f8f8fc;
  width: 100%; height:100%; 
}
	
#club-staff-profile-wrap {
  padding: 3rem 0;	
  width: 80%; height:100%; 
  display: grid; gap: 4rem;  
  grid-template-columns: 1fr 1fr; 
  margin: 0 auto; align-items: center;
}
	
.club-staff-profile-image {
  background-size: cover;
  background-position: 50% 27.5%;
  background-repeat: no-repeat;
  min-height: 500px; max-height: 500px;
  margin: 0; padding: 0;
}

.club-staff-emily-k {
  background-image: url('/img/commitee/full/emily-k.jpg');
}

.club-staff-jae-k {
  background-image: url('/img/commitee/full/jae-k.jpg');
}


.club-staff-profile-content {
  margin: 0; padding: 0;
}
	
.club-staff-profile-content-wrap {
  width:75%;
  margin: 0; padding: 0;	
} 
	
.club-staff-profile-role { 
  padding:4px 0 1.5rem; margin: 0 ; 
}
	
.club-staff-profile-role h1 { 
  padding:0; margin:0; 
  line-height:auto; 
}
	
.club-staff-profile-body { 
  padding: 0; margin: 0 ; 
}
.club-staff-button { 
  margin-top:1.5rem;
}



/* === FC Nations MISSION STATEMENT =====================================================================

  Theme Name: FC Nations Theme
  Section Name: Mission Statement Page
  Section Number: 00000
  Author: Made by Liam
  Version: 1.0

========================================================================================================================= */

#mission-statement {
  background:#f8f8fc;
  width: 100%; height:100%; 
}

#mission-statement-wrap {
  padding: 3rem 0;	
  width: 80%; height:100%; 
  margin: 0 auto; align-items: center;
  display: flex; flex-direction: column; 
}



/* === FC Nations COMMUNITY =====================================================================

  Theme Name: FC Nations Theme
  Section Name: Community Page
  Section Number: 00000
  Author: Made by Liam
  Version: 1.0

========================================================================================================================= */

#community {
  background:#f8f8fc;
  width: 100%; height:100%; 
}

#community-wrap {
  padding: 3rem 0;	
  width: 80%; height:100%; 
  margin: 0 auto; align-items: flex-start;
  display: flex; flex-direction: column; 
}

.community-events-title h1 {
  text-align: left; 
}

.community-events-grid { width:100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 4rem;
  column-gap: 2rem;
  padding: 0 0 6rem 0;	
}

.community-event-card {
  overflow: hidden;
  text-align: center;
  transition: transform 0.2s ease; 
}
.community-event-card:hover {
  transform: translateY(-5px);
  cursor:pointer;	
}

.community-event-card img {
  width: 100%;
  max-height: 250px;
  object-fit: cover;
  margin-bottom: 1rem;
}

.community-event-card-text { 
  width:100%;
  margin:0;
  text-align:left;
}

.community-event-card-text h2 {  
  margin-bottom:0.75rem !important; 
  padding-bottom: 0!important;
}
.community-event-card-text p {
  margin-top: 0rem !important; 
  padding-top: 0rem !important; 
}









#community-testimonial-carousel {
  background:#f8f8fc;
  width: 100%; height:100%; 
	overflow:hidden;
}

#community-testimonial-carousel-wrap {
  padding:3rem 0;
  width:80%;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  overflow:hidden;
}

.community-testimonial-title h1 {
  text-align: left; display:flex; justify-content:flex-start;
}

#community-testimonial-carousel {
  background:#f8f8fc;
  width:100%;
}

#community-testimonial-carousel-wrap {
  padding:3rem 0;
  width:80%;
  margin:0 auto;
  display:flex;
  flex-direction:column;
}

.community-testimonial-panel {
  position:relative;
  overflow:hidden;
  width:100%;
  padding-bottom:60px;
}

.community-testimonial-slider {
  display:flex;
  transition:transform 0.4s ease;
}

.community-testimonial-slide {
  min-width:100%;
}

.community-testimonial-slide-content {
  display:flex;
  gap:2rem;
  align-items:center;
}

.community-testimonial-text {
  flex:1;
  max-width:520px;
}

.community-testimonial-text p {
  font-size:1.2rem;
  font-style:italic;
  line-height:1.6;
  margin-bottom:0.5rem;
  color:#6b7280;
}

.community-testimonial-text h1 {
  font-weight:300;
  font-size:1rem;
  margin:0;
}

.community-testimonial-image {
  flex:0.5;
  margin-left:auto;
  overflow:hidden;
}
.community-testimonial-image img {
  display:block;
  width:100%;
  aspect-ratio:2/1;
  object-fit:cover;
  filter:brightness(1.05) contrast(0.95);
}

.community-testimonial-counter {
  position:absolute;
  bottom:0rem;
  right:0;
  display:flex;
  align-items:center;
  gap:12px;
}

.community-testimonial-counter button {
  width:50px;
  height:50px;
  background:#ececf3;
  border:none;
  border-radius:50%;
  color:#6b7280;
  border:1px solid #e3e4ea;
  font-size:1.2rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background 0.2s ease,color 0.2s ease;
}

.community-testimonial-counter button:hover{
background:#dfe1e8;
color:#050417;
}





#community-highlight-wrap { 
  width:100%; margin: 0 auto; 
  padding:3rem 0rem; 
}
#community-highlight { 
  width:90%; margin: 0 auto; 
}
#community-highlight img { 
  width:100%; padding:0; margin:0;
}



/* === FC Nations SINGLE COMMUNITY EVENT =================================================================================

  Theme Name: FC Nations Theme
  Section Name: Single Community Event Page
  Section Number: 00000-
  Author: Made by Liam
  Version: 1.0

========================================================================================================================= */

#single-community-event {
  background:#f8f8fc;
  width: 100%; height:100%; 
}

#single-community-event-wrap { 
  padding: 3rem 0;	
  width: 80%; height:100%; 
  margin: 0 auto; align-items: flex-start;
  display: flex; justify-content: space-between; 
}

#single-community-event-left { 
  width: 60%; height:100%;
  display: flex; flex-direction: column;
  margin: 0; padding: 0;
}

#single-community-event-right { 
  width: 30%; height:100%;
  display: flex; flex-direction: column;
  margin: 0; padding: 0;
}



/* === FC Nations HISTORY =================================================================================

  Theme Name: FC Nations Theme
  Section Name: History Page
  Section Number: 00000-
  Author: Made by Liam
  Version: 1.0

========================================================================================================================= */

#history {
  width: 100%; height: 100%;
  background: linear-gradient(
    35deg,
    #f8f8fc 55%,
    #fff 50%
  );
  background-position: center -3000px;
  background-repeat: no-repeat;			
}

#history-wrap { 
  padding: 3rem 0;	
  width: 80%; height:100%; 
  margin: 0 auto;
  display: flex; justify-content:space-between;
}

#history-left {
	width:30%; height:100%; 
	display: flex; flex-direction: column;  
}

#history-right { 
	width:50%; height:100%; 
	display: flex; flex-direction: column;  
}

.history-intro, .history-facts { 
  position: sticky;
  height: max-content; margin-bottom:2rem
}

.history-intro, .history-facts h1 {
  margin-bottom: 20px;
}

.timeline { 
  padding: 0px;
}

.timeline-container {
  position: relative;
  width: 720px;
  max-width: 100%;
  margin: 0 auto;
}

.timeline-container::after {
  content:'';
  position:absolute;
  border-radius:2px;
  width:4px;
  top:0;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  background:linear-gradient(
    to bottom,
    #e5e8ea,
    #cfd8dc,
    #cfd8dc,
    #e5e8ea
  );
}

.timeline-icon {
  position:absolute;
  width:16px;
  height:16px;
  background:hotpink;
  border-radius:50%;
  top:40px;    
  right:-8px;
  z-index:2;
}

.timeline-item.right .timeline-icon {
  left: -8px;
  right: auto;
}


.timeline-item {
  position: relative;
  width: 50%;
  padding: 28px 0px;  
  box-sizing: border-box;
  margin: 0;
}

.timeline-item.left .timeline-year {
  left: auto;
  right: -30px;
  transform: none;
  text-align: right;
}

.timeline-item.right .timeline-year {
  left: -30px;
  transform: none;
  text-align: left;
}

.timeline-item.left {
  left: 0;
  text-align: right;
  padding-right: 60px;
}

.timeline-item.right {
  left: 50%;
  text-align: left;
  padding-left: 60px;
}

.timeline-year {
  position: relative;
  margin: 60px 0 30px;
}

h1.timeline-year {
  color: hotpink;
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1.1;
}

/* Odd Years */

.timeline-year:nth-of-type(odd) {
  text-align: right;
  padding-right: calc(50% + 58px);
}

/* Even Years */

.timeline-year:nth-of-type(even) {
  text-align: left;
  padding-left: calc(50% + 58px);
}

.timeline-month {
  font-size:0.9rem;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#999;
  margin-bottom:4px;
}

.timeline-content { 
  width: 100%;
  padding: 0 0px;
  box-sizing: border-box;
}

.timeline-content h2 {  /* Month */
  text-align: inherit;
  margin: 0 0 4px 0;
}

.timeline-content h3 {  /* Event title */
  text-align: inherit;
  margin: 0 0 4px 0;
}

.timeline-content p { 
  text-align: inherit;
  color: #666;
  margin: 0;
  line-height: 1.5;
}

.timeline-item.left .timeline-content {
  margin-left: auto;
}

.timeline-item.right .timeline-content {
  margin-right: auto;
}

.timeline-content img {
  width:100%;
  height:auto;
  display:block;
  margin:12px 0;
}



/* === FC Nations MEDIA =====================================================================

  Theme Name: FC Nations Theme
  Section Name: Media Page
  Section Number: 00000
  Author: Made by Liam
  Version: 1.0

========================================================================================================================= */

#media {
  background:#f8f8fc;
  width: 100%; height:100%; 
}

#media-wrap { 
  padding: 3rem 0;	
  width: 80%; height:100%; 
  margin: 0 auto; align-items: center;
  display: flex; flex-direction: column; 
}

.media-grid { width:100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 1rem;
	margin:0 auto;
}

.media-album img {
    width: 100%;
    height: auto;
    display: block; margin-bottom: 1rem;
}

.media-album h2 { 
  text-align:left;
}

.media-album a {
  display: block;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.media-album a:hover {
  transform: translateY(-5px);
  cursor:pointer;	
}



/* === FC Nations GALLERY =====================================================================

  Theme Name: FC Nations Theme
  Section Name: Gallery Page
  Section Number: 00000
  Author: Made by Liam
  Version: 1.0

========================================================================================================================= */

#gallery {
  background:#f8f8fc;
  width: 100%; height:100%; margin:0 auto;
}

#gallery-wrap { 
  padding: 3rem 0;
  width: 80%; height:100%; 
  margin: 0 auto; align-items: center;
  display: flex; flex-direction: column; 
}

#gallery-items-grid .rl-gallery { 
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.2rem;
}

#gallery-items-grid .rl-gallery-item { 
    aspect-ratio: 3 / 3;
    overflow: hidden;
    padding: 0;
    display: block !important;
    width: 100% !important;
}

#gallery-items-grid .rl-gallery-item img { 
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

#gallery-items-grid .rl-gallery-item:hover img {
    transform: scale(1.05);opacity: 0.85;
}



/* === FC Nations Theme ====================================================================================

  Theme Name: FC Nations Child Theme 
  Section Name: Safeguarding 
  Events page
  Author: Made by Liam - http://madebyliam.co
  Version: 1.0

========================================================================================================================== */


#welfare {
  width: 100%; height: 100%;
  background: #f8f8fc;
}

#welfare-wrap { 
  padding: 0rem 0 3rem 0;	
  width: 80%; height:100%; margin: 0 auto;
  display:flex; justify-content:space-between;
  flex-wrap:wrap; margin:0 auto;	
}

#welfare-left { 
  width:60%; height:100%; 
  padding:0; margin:0;
}

#welfare-right { 
  width:25%; height:100%; 
  padding:0; margin:0;
}

#welfare .page-buttons-wrap {
  background: #f8f8fc;
}

.welfare-left-text { 
  display: flex;
  gap: 0rem;
  flex-direction: column;
  padding-bottom:1.5rem; margin-bottom:2rem; 
  border-bottom:1px solid #d7d8dd;
}

.welfare-left-text h1 { 
  margin: 0; 
  padding-bottom: 0;
}

#welfare-intro,
#welfare-policy,
#welfare-concern,
#welfare-edi, 
#welfare-resources { 	
  display: block;
}

.welfare-left-image-a,
.welfare-left-image-b,
.welfare-left-image-c {
  flex:0 0 40%;
}

.welfare-left-text-a,
.welfare-left-text-b,
.welfare-left-text-c {
  flex:1;
  min-width:0;
}

.welfare-left-image-a img,
.welfare-left-image-b img,
.welfare-left-image-c img {
  width:100%;
  display:block;
}

/* A */
.welfare-left-a {
  display:flex;
  gap:2rem;
  align-items:flex-start;
  padding-bottom:1.5rem;
  margin-bottom:2rem;
  border-bottom:1px solid #d7d8dd;
}

/* B */
.welfare-left-b {
  display:flex;
  flex-direction:column;
  gap:0;
  padding-bottom:1.5rem;
  margin-bottom:2rem;
  border-bottom:1px solid #d7d8dd;
}

/* C */
.welfare-left-c {
  display:flex;
  flex-direction:row-reverse;
  gap:2rem;
  align-items:flex-start;
  padding-bottom:1.5rem;
  margin-bottom:2rem;
  border-bottom:1px solid #d7d8dd;
}


/* Welfare Right */

#welfare-right p, h1, img {
  width:100%; display:block; 
  margin-bottom:1rem;
}
#welfare-right .box-button { 
  margin-bottom:3rem;
}

.welfare-right {
  display: flex;
  flex-direction: column;
  margin-bottom: 3rem;
  padding-bottom: 3rem; 
}

.pdf {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: #111;
  font-weight: 400;
  border-bottom:1px solid #d7d8dd;
  padding:0.25rem 0 1.25rem 0; 
}

.pdf::before {
  content: "";
  width: 22px; height: 25px;
  flex-shrink: 0;
  background-color: #050417;
  background-image: url('/img/icons/pdf.png');
  background-size: 22px 25px; 
  background-repeat: no-repeat;
  background-position: center;
  transition: background-color 0.25s ease;
}

.pdf:hover::before {
  background-color: #727290;
}

.pdf:hover {
  color: #727290;
}



/* Welfare Feature Block */

#fcn-wfblock {
  width: 100%;
  margin-bottom:2rem; border-bottom:1px solid #d7d8dd;
}

#fcn-wfblock-wrap {
  width: 100%;
  margin-bottom:2rem;
}

.fcn-wfgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 190px);
  gap: 1.5rem;
  width: 100%;
}

/* ------------ Tile Base ------------ */

.fcn-wftile {
  position: relative;
  isolation: isolate; /* keeps negative z-index overlays contained */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 1.5rem;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* ------------ Dark overlay (always on, behind background) ------------ */

.fcn-wftile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: -1;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
/* ------------ Pink overlay (slides up on hover, behind background) ------------ */

.fcn-wftile::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -100%;
  width: 100%;
  height: 100%;
  background: #eb66b8;
  z-index: -1;
  transition: bottom 0.45s ease;
  pointer-events: none;
}

/* ------------ Tile Hover Effects ------------ */

.fcn-wftile:hover::after {
  bottom: 0; /* pink slide UP */
}

.fcn-wftile:hover::before {
  opacity: 0; /* fade dark overlay */
}

/* ------------ Tile Text ------------ */

.fcn-wftile span {
  position: relative;
  z-index: 2;
  color: #fff;
  font-weight: 400;
  font-size: 1.25rem;
  text-align: left;
  padding: 0;
  opacity: 1;
}

/* ------------ Tile Accessiblity ------------ */

.fcn-wftile:focus-visible {
  outline: 3px solid rgba(0, 252, 255, 0.55);
  outline-offset: 4px;
}

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

.fcn-wftile .arrow {
  position: absolute;
  bottom: 1.5rem; right: 1.5rem;
  width: 22px; height: 22px;
  background: url('/img/icons/arrow.png') no-repeat center / contain;
  z-index: 3;
  pointer-events: none;
  transition: transform 0.25s ease;
}

.fcn-wftile:hover .arrow {
  transform: translateX(0.5rem);
}

/* ------------ Tile Images ------------ */

.fcn-wftile-1 {
  background-image: url('https://madebyliam.co/nationsfc/hero.jpg');
}

.fcn-wftile-2 {
  background-image: url('https://madebyliam.co/nationsfc/feature-01.jpg');
}

.fcn-wftile-3 {
  background-image: url('https://madebyliam.co/nationsfc/banner.jpg');
}

.fcn-wftile-4 {
  background-image: url('https://madebyliam.co/nationsfc/feature-03.jpg');
}



/* === FC Nations JOIN US =====================================================================

  Theme Name: FC Nations Theme
  Section Name: Join Us Page
  Section Number: 00000
  Author: Made by Liam
  Version: 1.0

========================================================================================================================= */

#join-us {
  width: 100%; height: 100%;
  background: linear-gradient(
    35deg,
    #f8f8fc 55%,
    #fff 50%
  );
  background-position: center;
  background-repeat: no-repeat;			
}

#join-us-wrap { 
  padding: 3rem 0;	
  width: 80%; height:100%; 
  margin: 0 auto; gap: 2rem;
  display: flex; justify-content:space-between;
}

#join-us-left { 
  background:url(/img/0001.jpg);
  flex: 1.75;   
  background-repeat: no-repeat;
  background-position: right !important;	
}

#join-us-right {
  flex: 3.25;            
  display: grid; gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.join-us-block { 
  background:#fff; 
  padding: 1.75rem 1.25rem 1.75rem 1.25rem;
  display: flex; flex-direction: column; gap: 0;  
  align-items: center;   
  border-left: 2px solid #e6e6ee;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.join-us-block:hover { 
  background:#fcfcfe; 
  border-left-color: #72738e;
  cursor: pointer;
}

.join-us-block-text { 
  text-align:center; 
  width:75%; margin: 0; padding: 0;
}

.join-us-block-text-large { 
  text-align:center; 
  width:85%; margin: 0; padding: 0;
}

a.join-us-button {   margin-top: -0.75rem;
  display: inline-flex;
  align-items: center;
  background-image: url(/img/icons/email-on.png);
  background-repeat: no-repeat;
  background-position: 1rem center;
  background-size: 16px 16px;
  background-color: transparent;	
  border-radius: 500px;	
  padding: 0.75rem 1.50rem 0.75rem 3rem; 
  font-weight: 500; line-height: 1;
  text-decoration: none;
  color:#797290;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.join-us-block:hover .join-us-button {
  background-image: url(/img/icons/email-off.png);
  background-color: #797290;
  color: #fff;
}



/* === FC Nations DOCUMENTS =====================================================================

  Theme Name: FC Nations Theme
  Section Name: Documents Page
  Section Number: 00000
  Author: Made by Liam
  Version: 1.0

========================================================================================================================= */


#documents {
  background:#f8f8fc;
  width: 100%; height:100%; 
}

#documents-wrap {
  padding: 3rem 0;	
  width: 80%; height:100%; 
  margin: 0 auto; align-items: flex-start;
  display: flex; justify-content: space-between; 
}

#documents-left {
	width:30%; height:100%; 
	display: flex; flex-direction: column;  
}

#documents-right { 
	width:60%; height:100%; 
	display: flex; flex-direction: column;  
}

.documents {
  display: flex;
  align-items: center;
  gap: 1rem;	
  padding: 2rem 1.5rem;	
  border-left: 3px solid #e6e6ef;
}

.documents:hover {
  background: #fff;
  border-left-color: #727290;
  color: #727290;
}

.documents::before {
  content: "";
  display: block;
  width: 34px;
  height: 38px;
  flex-shrink: 0;   /* prevents icon shrinking */
  background-color: #050417;
  background-image: url('/img/icons/pdf.png');
  background-size: 34px 38px;
  background-repeat: no-repeat;
  background-position: center;
  transition: background-color 0.25s ease;
}

.documents:hover::before {
  background-color: #797290;
}

.doc-text strong {
  display:block;
  font-weight: 400; font-size: 1.25rem; 
  font-style: normal;
  letter-spacing:0.06rem;
}

.doc-text span {
  font-size: 0.875rem;
  color: #666;
}


/* === END CLUB PAGES ================================================================================= */


/* === FC Nations TEAMS =================================================================================

  Theme Name: FC Nations Theme
  Section Name: Teams Page
  Section Number: 00000
  Author: Made by Liam
  Version: 1.0

========================================================================================================================= */


#teams {
  background:#f8f8fc;
  width: 100%; height:100%; 
}

#teams-wrap {
  padding: 3rem 0;	
  width: 80%; height:100%; 
  margin: 0 auto; align-items: center;
  display: flex; flex-direction: column; 
}

#teams h2,
#teams h2 a {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 200;
    font-size: 0.9rem;
    line-height: 1.2rem;
}

.teams-grid {
    width:100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.teams-card {
    flex: 0 0 25%;
    position: relative;
    overflow: hidden;
}

.teams-image {
    width: 100%;
    height: 380px;
    background-size: cover;
    background-position: center;
    border-radius: 0;
    transition: all 0.3s ease;
    position: relative; 
	margin-bottom: 1rem;
}

.teams-image::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.teams-image:hover::after {
    opacity: 1;
}

.teams-title a,
.teams-date a {
    text-decoration: none;
    color: #333;
}

.teams-title {
    margin: 0;
}

h2.teams-title {
    text-align: left;
}

.teams-date {
    font-size: 0.95rem;
    color: #666;
    text-align: left;
    margin: 1rem 0 0 0;
}

.teams-location {
    font-size: 0.9rem;
    color: #999;
}

.teams-image .teams-whatsapp,
.teams-image .teams-messenger {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: black;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 2;
}

.teams-image .teams-messenger {
    right: 55px;
}

.teams-image:hover .teams-whatsapp,
.teams-image:hover .teams-messenger {
    opacity: 1;
    transform: translateY(0);
}

.teams-image .teams-whatsapp:hover {
    background-color: #5fe56f;
}

.teams-image .teams-messenger:hover {
    background-color: #01b1fd;
}

.teams-whatsapp {
    background-image: url('/img/whatsapp-b.png');
}

.teams-messenger {
    background-image: url('/img/messenger-b.png');
}






/* === FC Nations FIRST TEAM =================================================================================

  Theme Name: FC Nations Theme
  Section Name: First Team Page
  Section Number: 00000
  Author: Made by Liam
  Version: 1.0

========================================================================================================================= */


#team-first {
  width: 100%;
  position: absolute;
  bottom: 0; left: 0;     
  margin-bottom: 5vh;  
}

/* Inner Wrap - CSS Grid */
#team-first-wrap { 
    width: 60%;
    margin: 0 auto;
    padding: 3rem 0;
    display: flex;
    justify-content: space-between; /* left group left, right block right */
    align-items: center;
}

/* Left group: logo + center content */
.team-first-group {
    display: flex;
    align-items: center;
    gap: 1rem; /* space between logo and team name/badge */
}

/* Logo */
.team-first-one {
    background-image: url('http://fcnations.com/img/logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    height: 15vh;
    width: 12vh;  /* or adjust as needed */
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

/* Team name */
.team-first-two {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* Right block - social links */
.team-first-three {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem; /* spacing between buttons */
}

.team-social  { 
  display: inline-block;
  border:2px solid #fff;
  color: #fff;
  font-weight: 550; font-size:0.8rem; letter-spacing:0.1rem;
  text-decoration: none; text-transform:uppercase;
  transition: 0.25s ease;
  padding: 0.75rem 1.25rem; 
}
.team-social:hover {
  cursor:pointer;
  background: #fff;
  color:#eb66b8;
  border:2px solid #eb66b8;	
}



/* === FC Nations SECOND TEAM =================================================================================

  Theme Name: FC Nations Theme
  Section Name: Second Team Page
  Section Number: 00000
  Author: Made by Liam
  Version: 1.0

============================================================================================================== */


#team-second { 
  background:#f8f8fc;
  width: 100%;
  padding: 2rem 0;
}

#team-second-wrap {
  width: 80%;
  margin: 0 auto;
  padding: 0;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}

#team-second-left { 
  background:none; 
  width:60%; 
}

#team-second-right { 
  background:none; 
  width:30%;  
}

.coach {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-bottom: 1.5rem;
}

.coach .coach-card { 
  display: flex;
  width: 100%;
  height: 140px;              
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.coach .coach-card:hover {
  transform: translateY(-5px);
}

/* LEFT — IMAGE (50%) */
.coach .coach-avatar {
  width: 50%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  padding: 0;
}

/* RIGHT — INFO (50%) */
.coach .coach-info {
  width: 75%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem;
}


.coach .coach-info .coach-name {
  font-family: "Century Gothic", "AppleGothic", Futura, sans-serif;  letter-spacing:0.1rem;
  font-size: 1.25rem;
  margin: 0;
  color: #222;
}

/* Player position / title */
.coach .coach-info .coach-title {
  font-size: 0.9rem;
  font-weight: normal;
  color: #555;
  margin-top: 0.15rem;
}


/* ===== Players Grid ===== */

.player .team-section-title {
  grid-column: 1 / 1;
}

.player {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.player .player-card { 
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden; padding:0;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: #fff;
}

.player .player-card:hover {
  transform: translateY(-5px); 
}

.player .player-avatar {
  width: 100%; height: 320px;
  object-fit: cover;
  display: block;
  border-radius: 0;
  padding:0; margin: 0;
}

.player .player-info-block {
  background: #fff;
  flex: 1; display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0.75rem 1rem;
}

/* Player name */
.player .player-info-block .player-name {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.25rem;
  margin: 0;
  color: #222;
}

/* Player position / title */
.player .player-info-block .player-position {
  font-size: 0.9rem;
  font-weight: normal;
  color: #555;
  margin-top: 0.15rem;
}

/* Optional: hover effect only lifts card, not info block */
.player .player-card:hover .player-info-block {
  background: #fff; /* keeps info block clean on hover */
}






.second-team-mini-image-01 { 	
  background-image: url('https://fcnations.com/img/about-01.jpg');         
}
.second-team-mini-image-02 { 	
  background-image: url('https://fcnations.com/img/about-01.jpg');         
}
.second-team-mini-image-01, .second-team-mini-image-02 { 
  width: 100%; 
  flex-shrink: 0; aspect-ratio: 1 / 0.5;  	
  background-size: cover; background-position: center; margin-bottom:1rem; padding:0;    
}









.nippers-register {
  max-width: 100%;
  position: relative;
}

#nippersForm {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: transform 0.5s ease, opacity 0.5s ease;
}
#nippersForm input::placeholder {
  color: #888; 
}

#nippersForm input {
  padding: 0.75rem;
  border: 2px solid transparent;
  background: #fff;
  color: #000;

  font-family: "Open Sans", "Source Sans Pro", -apple-system, 
  BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight:300;
  font-size:1rem;
	
  outline: none; 
  transition: border 0.2s ease; 
}

#nippersForm input:focus {
  border-color: #eb66b8; 
}

#nippersForm button {
  text-transform: uppercase;
  padding: 0.6rem;
  background: #0d0d21;
  color: #fff;
  border: none;
  cursor: pointer;
	  transition: 0.25s ease;
}
#nippersForm button:hover {
  background: #3d3d4d;
}

#nippersForm.hide {
  transform: translateY(-20px);
  opacity: 0;
}


/* FORM ANIMATION */
.js-form {
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.js-form.hide {
  opacity: 0;
  transform: translateY(-30px) scale(0.96);
  pointer-events: none;
}


/* MESSAGE ANIMATION */
.form-message {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

  text-align: center;
  margin-top: 1rem;

  opacity: 0;
  transform: translateY(50px) scale(0.96);
  pointer-events: none;

  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.form-message.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.form-message h3 {
  text-align: center;
  margin-top: 1rem;	
  font-family: "Century Gothic", "AppleGothic", Futura, sans-serif;
  font-weight: 500; font-size: 1.25rem; 
  font-style: normal;
  text-transform: uppercase;
  letter-spacing:0.1rem;	
}


.tick-img {
  width: 90px;
  height: 90px;
  margin: 0 auto 2rem;
  display: block;
  animation: pop 0.4s ease;
  position: relative;
}

.tick-img::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 120px;
  height: 120px;
  margin-left: -60px;
  margin-top: -60px;
  border-radius: 50%;
  background: rgba(235, 102, 184, 0.2); /* pink pulse */
animation: pulse 1s ease-out infinite;
  z-index: -1;
}

@keyframes pulse {
  0% { transform: scale(0.8); opacity: 0.6; }
  50% { transform: scale(1.1); opacity: 0.3; }
  100% { transform: scale(1.3); opacity: 0; }
}


.cta-button {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.6rem 1.2rem;
  background: #eb66b8;
  color: #fff;
  font-weight: 550; font-size:0.9rem; letter-spacing:0.1rem;
  text-decoration: none; text-transform:uppercase;	
}
.cta-button:hover { color:#fff;
  text-decoration: none;
}

.auto-reset-note {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.8rem;
  opacity: 0.6;
}

   

/* ===================== MATCH SECTION ===================== */



/* Specific styles */
#team-match-info { 
width: 100%;
margin: 0;
padding: 0 0 0 0;
min-height: 200px;

}
#team-match-info-wrap { 
width: 100%;
margin: 0 auto;
padding: 0 0 3rem 0;
display: flex;
justify-content: space-between;
gap: 2rem; /* adds space between columns */
}
/* Specific styles */
.team-match-info-content-wrap { display:flex; justify-content:space-between; gap:2rem; }
.team-match-info-content-01,
.team-match-info-content-02,
.team-match-info-content-03 { background: none; }

#team-match-info-wrap {
  max-width: 100%;
}
.team-match-info-content {
  flex: 1;  padding: 0;
}
.team-match-card {
  width: 100%;
  max-width: 380px;
  background:#fff;
  border-radius: 0;
  padding: 1rem;
  display: flex;
  flex-direction: column;

  text-align:center; margin-bottom:2rem;
}

/* TOP ROW (vertical info only here) */
.team-match-info-row {
  display: flex;
  flex-direction: column;
}

/* Stadium title */
.team-match-stadium {
  font-family: "Bebas Neue", sans-serif
  font-size: 1.3rem;
}

/* Date underneath */
.team-match-date {
  font-family: Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  opacity: 0.6;
  font-size: 0.75rem;
  margin-top: 0.2rem;
}

/* SCORE ROW — horizontal */
.team-match-score-row {
  display: flex;
  flex-direction: row;     
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

/* BADGES */
.team-match-badge {
  width: 70px;
  height: 70px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.team-badge-home {
  background-image: url('https://madebyliam.co/nationsfc/badge-01.png');
}

.team-badge-away {
  background-image: url('https://cdn1.sportngin.com/attachments/photo/cc8b-203894478/Logo.png');
}

.team-match-score {
  font-family: "Bebas Neue", sans-serif
  font-size: 1.8rem;
  white-space: nowrap;
}

.team {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.team-team-name {
  margin-top: 0.5rem;            /* adjust spacing between badge + name */
  font-family: Helvetica, Arial, sans-serif;
  font-size: 0.75rem;
  opacity: 0.7;
  text-align: center;
}



/* === FC Nations SPONSOR =================================================================================

  Theme Name: FC Nations Theme
  Section Name: Sponsor Page
  Section Number: 00000
  Author: Made by Liam
  Version: 1.0

========================================================================================================================= */


#sponsors {
  background:#f8f8fc;
  width: 100%; height:100%; 
}

#sponsors-wrap { 
  padding: 3rem 0;	
  width: 80%; height:100%; 
  margin: 0 auto; align-items: center;
  display: flex; flex-direction: column; 
}

.partner-tier h1 {
  font-family: "Century Gothic", "AppleGothic", Futura, sans-serif;
  font-weight: 500;
  font-size: 1.25rem;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.1rem; 
}


#sponsors-01, 
#sponsors-02, 
#sponsors-03, 
#sponsors-04 {
  background: none;
  width: 100%;
  display: block;
}

.sponsors-category-01,
.sponsors-category-02,
.sponsors-category-03,
.sponsors-category-04 {
  width: 100%;
  box-sizing: border-box;
}


.sponsors-grid-01 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem; margin-bottom: 2rem;
}



.sponsors-grid-02, 
.sponsors-grid-03, 
.sponsors-grid-04 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem; margin-bottom: 2rem;
}

.partner-tier h1 {
  font-family: "Century Gothic", "AppleGothic", Futura, sans-serif;
  font-weight: 500;
  font-size: 1.25rem;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.1rem; 
}

.sponsors-item {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: #dbdbdb;

  display: flex;
  justify-content: center;
  align-items: center;

  position: relative;
  cursor: pointer;
}


.sponsors-item img {
  position: absolute;
  max-width: 50%;
  max-height: 60%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transition: opacity 0.2s ease;
}

.sponsors-item img {
  pointer-events: none;
}

.sponsors-item .logo-grey {
  opacity: 1;
}

.sponsors-item .logo-colour {
  opacity: 0;
}

.sponsors-item:hover .logo-grey {
  opacity: 0;
}

.sponsors-item:hover .logo-colour {
  opacity: 1;
}
.sponsors-item.macdonalds img { max-width: 30%; max-height: 35%; }
.sponsors-item.macdonalds:hover { background-color: #ffc72c; }

.sponsors-item.belter img { max-width: 50%; max-height: 50%; }
.sponsors-item.belter:hover { background-color: #000; }

.sponsors-item.cartridgepeople:hover { background-color: #fff; }

.sponsors-item.ch img { max-width: 40%; max-height: 40%; }
.sponsors-item.ch:hover { background-color: #ab9152; }

.sponsors-item.fredperks:hover { background-color: #01cbf7; }

.sponsors-item.salopvapes:hover { background-color: #4e89da; }
.sponsors-item.howdens:hover { background-color: #d62338; }

.sponsors-item.syview:hover { background-color: #27b3ec; }

.sponsors-item.pinkstorage:hover { background-color: #cb0175; }
.sponsors-item.printzpro:hover { background-color: #fff; }
.sponsors-item.frameit:hover { background-color: #fff; }
.sponsors-item.riverbank:hover { background-color: #000; }

.sponsors-item.sws:hover { background-color: #000; }

.sponsors-item.madebyliam:hover { background: linear-gradient(45deg, #4492ee 0%, #ca5ea4 50%, #e26135 100%); }


.sponsors-item.wild img { max-width: 40%; max-height: 40%; }
.sponsors-item.wild:hover { background-color: #e42174; }

 

/* === FC Nations Child Theme ===============================================================================

  Theme Name: FC Nations Child Theme
  Section Name: Single Sponsor
  Events page
  Author: Your Name
  Version: 1.0

========================================================================================================================= */


#single-sponsor {
  background:#f8f8fc;
  width: 100%; 
}

#single-sponsor-wrap { 
  padding: 3rem 0;	
  width: 80%;  
  margin: 0 auto; align-items: flex-start;
  display: flex; justify-content: space-between; 
}

#single-sponsor-left { 
  width: 50%; 
  display: flex; flex-direction: column;
  margin: 0; padding: 0;
}

#single-sponsor-left img {
  max-width: 100%;
  height: auto;
  display: block;
}

#single-sponsor-right {
  width: 30%; height:100%;
  display: flex; flex-direction: column;
  margin: 0; padding: 0;
}

#single-sponsor-left p { 
  margin-bottom:1.5rem; padding:0;
}

.second-team-mini-image-01 { 	
  background-image: url('https://fcnations.com/img/about-01.jpg');         
}

.second-team-mini-image-02 { 	
  background-image: url('https://fcnations.com/img/about-01.jpg');         
}

.second-team-mini-image-01, .second-team-mini-image-02 { 
  width: 100%; 
  flex-shrink: 0; aspect-ratio: 1 / 0.5;  	
  background-size: cover; background-position: center; margin-bottom:1rem; padding:0;    
}

.single-sponsor-register {   
  max-width: 100%; padding:2rem 0 4rem 0;
  position: sticky;           
  align-self: flex-start;
  top: 13vh; 	
}



/* === FC Nations SHOP =================================================================================

  Theme Name: FC Nations Theme
  Section Name: Shop Page
  Section Number: 00000
  Author: Made by Liam
  Version: 1.0

========================================================================================================================= */

#shop {
  background:#f8f8fc;
  width: 100%; height:100%; 
}

#shop-wrap {
  padding: 3rem 0 6rem 0;	
  width: 80%; height:100%; 
  margin: 0 auto; align-items: center;
  display: flex; flex-direction: column; 
}
	
.product-card {
  transition:opacity .35s ease;
}
	
.product-card.hide {
  display:none;
}
	
.product-card a {
  text-decoration:none;
  color:inherit;
  display:block;
}

.product-card:hover {
  transform:translateY(-4px);
  transition:transform .2s ease;
}	
	
.shop-grid {
  position:relative;
}

.shop-filter-wrap {
  position:relative;
  width:100%;
}

.shop-filters {
  display:flex;
  gap:0.5rem;
  flex-wrap:wrap;
  margin-bottom:2rem;
}
	
.shop-filters button {
  background: #fff;
  border: 0.1rem solid #e7e0ea;
  color: #050417;
  padding: 0.5rem 1rem;
  border-radius: 500px;
  font-size: 0.9rem;
  cursor: pointer;
  font-weight: 100;
  text-transform: none;
  transition: background 0.3s, transform 0.3s;
}

.shop-filters button.active,
.shop-filters button:hover {
  background: #f7f4f8;
  border: 0.1rem solid #d7d8dd;
}	
		
.shop-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:2rem;
}

.product-card {
  text-align:center;
}

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

.product-image img {
  width:100%;
  height:100%;
  object-fit:contain;
}

h1.product-title {
  font-size: 1rem;
  margin: 1.5rem 0; text-align:left;
}

.product-price {
  font-weight:600;
  margin:5px 0 10px; text-align:left;
}

.buy-button {
  display:inline-block;
  padding:10px 18px;
  background:#eb66a2;
  color:#fff;
  text-decoration:none;
  font-weight:600;
  transition:all .2s ease;
}

.buy-button:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(0,0,0,0.15);
}

.sold-out {
  color:red;
  font-weight:bold;
}




/* === FC Nations SINGLE PRODUCT =================================================================================

  Theme Name: FC Nations Theme
  Section Name: Single Product Page
  Section Number: 00000
  Author: Made by Liam
  Version: 1.0

========================================================================================================================= */


#single-product {
  width: 100%; height: 100%;
  background:
    #f8f8fc;		
}

#single-product-wrap {
  padding: 3rem 0;	
  width: 80%; height:100%; 
  margin: 0 auto;
  display: flex; justify-content:space-between;
}

.product-page {
  display:flex;
  gap:60px;
  align-items:flex-start;
}

.product-image {
  flex:1;
}

.product-image img {
  width:100%;
}

.product-details {
  flex:1;
  max-width:420px;
}

.product-title {
  font-family: "Century Gothic", "AppleGothic", Futura, sans-serif; 
  font-weight: 300; font-size: 1.50rem;
  line-height:1.5;
  font-style: normal;
  letter-spacing: 0.05rem; 
}

.product-price {
  font-size:1.5rem;
  font-weight:500;
  margin-bottom: 1.5rem;
}

.product-size { 
  margin-bottom: 1.5rem;
}

.product-size label {
  display: block;	
  margin-bottom: 1.5rem;
}	
	
.product-description {
  color:#555;
  line-height:1.6;
}

.buy-button {
  display: inline-block;
  padding: 0.7rem 2rem;
  border:0.1rem solid #eb66b8;
  background: #eb66b8;       
  color: #fff !important;
  font-weight: 500; font-size:1rem; letter-spacing:0.06rem;;
  text-decoration: none; 
  text-transform: uppercase;
  transition: 0.25s ease;
  margin-bottom: 1.5rem;
}

.buy-button:hover {
transform:translateY(-2px);
}

.buy-button.disabled {
  opacity: 0.5;
  pointer-events: none;
}	
	
.product-soldout {
color:#ff4d4d;
font-weight:600;
font-size:1.2rem;
}

.size-buttons {
display:flex;
gap:10px;
flex-wrap:wrap;
}

.size-btn {
padding:0.6rem 1rem;
border:1px solid #ddd;
background:#fff;
cursor:pointer;
transition:0.2s;
}

.size-btn:hover {
border-color:#050417;
}

.size-btn.active {
background:#050417;
color:#fff;
border-color:#050417;
}	
	
.product-gallery {
display:grid;
grid-template-columns: 100px 520px;
gap:30px;
align-items:start;
}

.product-thumbs {
display:flex;
flex-direction:column;
gap:30px;
}

.product-thumbs img {
width:100%;
cursor:pointer;
border:1px solid #ddd;
}

.product-thumbs img:hover{
  border:1px solid #050417;
}

.product-thumbs img.active {
border:1px solid #050417;
}
	
.product-main-image {
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
}

.product-main-image img {
  width:100%;
  height:auto;
  display:block;
  transition: transform 0.2s ease, opacity 0.2s ease;
}



/* === FC Nations CONTACT =================================================================================

  Theme Name: FC Nations Theme
  Section Name: Contact Page
  Section Number: 00000
  Author: Made by Liam
  Version: 1.0

========================================================================================================================= */


#contact {
  background: #f8f8fc;
  width: 100%;
  padding: 0;
  margin: 0;
}

#contact-wrap { 
  margin: 0;
  display: grid;
  grid-template-columns: 10% 45% 45%;
  width: 100%;
}

#contact h1 {
  margin: 0; 
  padding: 0;
	
}

#contact bold {
  font-weight: 300;
}

#contact-left {
  grid-column: 2 / 3;
  background: transparent;
  padding: 4rem 0;
  margin: 0;
}

#contact-left-wrap {
  width: 90%;
}

#contact-right {
  grid-column: 3 / 4;
  background: #eb66b8;
  padding: 4rem 0;
  margin: 0;
  position: relative;
  overflow: hidden;
}

#contact-right::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('http://fcnations.com/img/number-bg.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 125%;
  transform: rotate(45deg);
  transform-origin: center;
  opacity: 0.1;
  z-index: 0; pointer-events: none;
}

#contact-right-wrap {
  padding-left: 2.5rem;
  color: #fff;
}

.contact-form-container {
  width: 100%;
  position: relative;
}

.contact-form-container .universal-form textarea {
  min-height: 160px;
  resize: vertical;
}

.contact-form-container .universal-form button {
  text-transform: uppercase;
  width: 33.33%;
  padding: 0.8rem;
  background: #0d0d21;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: 0.25s ease;
}

#contact-right a {
  color: #fff;
  font-weight: 400;
}

#contact-right a:hover {
  cursor: pointer;
}

.contact-emails {
  width: 100%;
  overflow: hidden;
  background: transparent;
  display: flex;
  flex-direction: column;
  padding-bottom: 2rem;
}

.contact-emails a {
  display: flex;
  align-items: center;
  padding-bottom: 1.3rem;
  cursor: pointer;
}

.contact-emails a:hover {
  cursor: pointer;
}

.contact-socials {
  width: 100%; 
  overflow: hidden;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* ← Adjust this value to increase / decrease vertical spacing */
}
.contact-socials h1 { 
  margin-bottom :15px; padding:0;
}

.contact-socials a {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* gap between icon and text */
}

.contact-socials a:hover {
  cursor: pointer;
}

.contact-socials a::before {
  content: "";
  width: 18px;
  height: 18px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

.contact-socials a:nth-child(2)::before {
  background-image: url('/img/socials/contact-facebook.png');
}

.contact-socials a:nth-child(3)::before {
  background-image: url('/img/socials/contact-instagram.png');
}

.contact-socials a:nth-child(4)::before {
  background-image: url('/img/socials/contact-tiktok.png');
}

.contact-socials a:nth-child(5)::before {
  background-image: url('/img/socials/contact-x.png');
}

#contact-map {
  background: #fff;
  width: 100%;
  text-align: justify;
}

#contact-map-wrap {
  width: 80%;
  margin: 0 auto; 
  display: flex; 
  flex-direction: column; 
}

#contact-map h1 {
  margin-top: 0; padding-top: 0;
}

.contact-map {
  padding: 5rem 0;
  width: 100%;
  display: flex;
  gap: 4rem;
  align-items: stretch;
}

.contact-map-left {
  width: 50%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.contact-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.contact-map-right {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-map-right-wrap {
  width: 75%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-map-right-wrap ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-map-right-wrap li {
  list-style: none;
  padding-bottom: 0.5rem;
  opacity: 0.8;
}













	
/* ================= FC Nations Child Theme ===============================================================================

  Theme Name: FC Nations Theme
  Section Name: UNIVERSAL FORM 
  Events page
  Author: Your Name
  Version: 1.0

========================================================================================================================= */


.universal-form-container {
  width: 100%;
  position: relative;
}

/* FORM LAYOUT */
.universal-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

/* PLACEHOLDERS */
.universal-form input::placeholder,
.universal-form textarea::placeholder,
.universal-form select option[disabled][selected] {
  color: #888; /* matches blank fields */
}

/* INPUTS, TEXTAREAS, SELECTS */
.universal-form input,
.universal-form textarea,
.universal-form select {
  padding: 0.75rem;
	
  border-bottom: 2px solid transparent;
  border-right:2px solid transparent;
  border-left:2px solid #e6e6ee;
  border-top:2px solid transparent;
	
  background: #fff; 
  color: #000;
  font-family: "Open Sans", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 1rem;
  border-radius: 0;
  transition: border 0.2s ease;
}

/* SELECT CUSTOM STYLING */
.universal-form select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6H0z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 10px 6px;
  color: #888;
}

/* Selected option text should be black */
.universal-form select option:not([disabled]) {
  color: #000;
}

/* Default select placeholder style */
.universal-form select:invalid {
  color: #888; /* placeholder color */
}

/* User-selected valid option style */
.universal-form select:valid {
  color: #000; /* selected option text color */
}

/* FOCUS STATES */
.universal-form input:focus,
.universal-form textarea:focus,
.universal-form select:focus {
  border-color: #eb66b8;
  outline: none;
}

/* TEXTAREA MIN HEIGHT */
.universal-form textarea {
  min-height: 80px;
  resize: vertical;
}

/* SUBMIT BUTTON */
.universal-form button {
  text-transform: uppercase;
  padding: 0.6rem;
  background: #0d0d21;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: 0.25s ease;
}

.universal-form button:hover {
  background: #3d3d4d;
}

/* HIDE FORM ANIMATION */
.universal-form.hide {
  transform: translateY(-20px);
  opacity: 0;
}

/* FORM SUCCESS MESSAGE */
.form-message {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  margin-top: 1rem;
  font-family: "Open Sans", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.form-message.show {
  display: block;
  opacity: 1;
  transform: scale(1);
}

.form-message h3 {
  text-align: center;
  margin-top: 1rem;
  font-family: "Century Gothic", "AppleGothic", Futura, sans-serif;
  font-weight: 500;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
}

/* SUCCESS TICK */
.tick-img {
  width: 90px;
  height: 90px;
  margin: 0 auto 2rem;
  display: block;
  animation: pop 0.4s ease;
  position: relative;
}

.tick-img::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin-left: -60px;
  margin-top: -60px;
  border-radius: 50%;
  background: rgba(235, 102, 184, 0.2);
  animation: pulse 1s ease-out infinite;
  z-index: -1;
}

@keyframes pulse {
  0% { transform: scale(0.8); opacity: 0.6; }
  50% { transform: scale(1.1); opacity: 0.3; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* OPTIONAL CTA LINK */
.cta-button {
  display: inline-block;
  margin: 1rem 0 0 0;
  padding: 0.6rem 1.2rem;
  background: #eb66b8;
  color: #fff;
  font-weight: 550;
  font-size: 0.9rem;
  letter-spacing: 0.1rem;
  text-decoration: none;
  text-transform: uppercase;
}

.cta-button:hover {
  color: #fff;
  text-decoration: none;
}

/* NOTE TEXT */
.auto-reset-note {
  display: block;
  margin: 0.75rem 0 0 0;
  font-size: 0.8rem;
  opacity: 0.6;
}

/* Checkbox styling: pink border, white tick */
.universal-form input[type="checkbox"] {
  width: 1.2rem;
  height: 1.2rem;
  cursor: pointer;
  margin-right: 0.5rem;
  accent-color: #eb66b8;
  background-color: #fff;
  border-radius: 2px;
}

/* Force the checkmark to be white */
.universal-form input[type="checkbox"]:checked {
  background-color: #eb66b8;
  color: #fff;
}

/* Optional: style the label text for alignment */
.universal-form label {
  display: flex;
  align-items: center;
  font-weight: 300;
  font-size: 0.9rem;
  cursor: pointer;
  gap: 0.25rem;
  color: #141412;
}






/* === FC Nations TOUCH SCREEN NAVIGATION ========================================================================

  Theme Name: FC Nations Theme
  Section Name: Hamurger Navigation 1280px
  Section Number: 00000
  Author: Made by Liam
  Version: 1.0

================================================================================================================== */

@media (max-width: 1280px) {	

/* Hide desktop nav on mobile */
	
#navbar nav {
  display: none !important;
}

.nav-logo {
  width: auto; height: 12vh;
  transition: height 0.3s ease;
}

#navbar.shrink .nav-logo { 
  width: auto;
  height: 4.5vh;
}
	
/* Show hamburger button */

.nav-toggle {
  display: flex; flex-direction: column;
  justify-content: space-between;
  width: 27px; height: 17px;
  background: none; border: none;
  cursor: pointer;
  margin-left: auto;
  padding: 0; z-index: 1001;
}

/* Hamburger lines (two bars) */
	
.nav-toggle span {
  display: block;
  width: 100%; height: 3px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.35s ease;
  transform-origin: center;
}

/* Animate hamburger to X when button is active */

.nav-toggle.active span:nth-child(1) {
  transform: rotate(-45deg) translateY(10px);
}

.nav-toggle.active span:nth-child(2) {
  transform: rotate(45deg) translateY(-10px);
}
	
.nav-wrap {
  width: 100%;
  padding: 0 6%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}
  
.nav-menu-mobile {
  display: block; 
  position: absolute;
  top: 100%;
  left: 0; width:100%;
  background: #fff;
  border-top: 1px solid #e5e5e5;
  margin: 0;
  padding: 0;
  list-style: none;

  opacity: 0;
  transform: translateY(-15px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
  z-index: 1000;
}
	
/* When menu is active */
	
.nav-menu-mobile.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Top-level menu links */
	
.nav-menu-mobile > li > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0 0.6rem 6%;
  font-size: 1.1rem;
  text-decoration: none;
  color: #050417;
  font-family: "Century Gothic", "AppleGothic", sans-serif;
  margin: 0;
}

.nav-menu-mobile li a:hover {
  color:#797292;
}

/* Sleek arrow for submenu parents */
  
.nav-menu-mobile .has-submenu > a::after {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  border-right: 2px solid #050417;
  border-bottom: 2px solid #050417;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
  margin-right: 2rem;
}

/* Rotate arrow when submenu is active */
	
.nav-menu-mobile li.active > a::after {
  transform: rotate(-135deg);
}

/* Submenus */
	
.submenu {
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.35s ease, transform 0.35s ease, max-height 0.35s ease;
  padding-left: 1.5rem;
  border-left: 3px solid #eb66b8;
  list-style: none;
  margin: 0;
  pointer-events: none;
  max-height: 0;
  overflow: hidden;
}
	
.submenu a {
  padding: 0.5rem 1.5rem; /* reduced from 0.7rem top/bottom */
  font-size: 0.95rem;      /* optional: slightly smaller text */
}

.nav-menu-mobile li.active .submenu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  max-height: 400px;
}

.submenu a {
  padding: 0.7rem 1.5rem;
  font-size: 1rem;
  margin: 0 2rem 0 0;
  display: block;
  text-decoration: none;
  font-style: italic;
  color: #050417;
}

/* Hide socials in top bar on mobile */
	
.nav-right .nav-socials {
  display: none;
}

  /* Mobile socials container */
	
.nav-socials-mobile {
  padding: 1.5rem 6% 2rem;
  border-top: 1px solid rgba(0,0,0,0.08);
  list-style: none;
}

.nav-socials-mobile .nav-socials {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 240px; 
}
	
.nav-logo { height: 8vh; }

}


/* === FC Nations TABLET LANDSCAPE =================================================================================

  Theme Name: FC Nations Theme
  Section Name: Media Queries 1024px
  Section Number: 00000
  Author: Made by Liam
  Version: 1.0

================================================================================================================== */

@media (max-width: 1024px) {		
		
/* 1024 Tablet Landcscape - Hero */	
	
#page-hero,  
#team-hero,
#gallery-hero { 
  height:50vh; 
}	
	
#page-hero::before,  
#team-hero::before,
#gallery-hero::before	{ 
  background-attachment: scroll; 
}		
	
#page-hero-wrap, 
#team-hero-wrap,
#gallery-hero-wrap	{ 
	width: 85%; height: 40vh; 
}
	
.page-hero-content, 
.team-hero-content,
.gallery-hero-content { 
  width: 85%; margin: 0 auto; 
}
	
#page-hero h1, 
#team-hero h1,
#gallery-hero h1 { 
  font-size: 2.25rem; 
}
	
	
/* 1024 Tablet Landcscape - Page Buttons */

.page-buttons{ 
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  gap:0.5rem;
  width:100%; padding-bottom:1.5rem; margin-bottom:0.5rem;
		
}

.page-buttons button{
  flex:0 0 auto;
}
	
.page-buttons::-webkit-scrollbar {
  height:6px;
}

.page-buttons::-webkit-scrollbar-track{
  background:transparent;
}

.page-buttons::-webkit-scrollbar-thumb{
  background:#d7d8dd;
  border-radius:10px;
}

.page-buttons-wrap::after {
  content:"";
  position:absolute;
  right:0; top:0;
  height:100%;
  width:75px;
  pointer-events:none;
  background:linear-gradient(
  to right,
  rgba(248,248,252,0),
  rgba(248,248,252,1)
);
}

	
/* 1024 Tablet Portrait - Home Page */		
	
#hero { 
  width:100%; margin:0 auto; 
}

#hero-wrap { 
  width:85%; margin:0 auto; 
}
.hero-content {
  width:100%; 
  margin-bottom: 15vh; 	
}
.hero-community { 
  flex-wrap: wrap; 
  justify-content:left; 
 gap: 0.8rem 1.2rem; 
}
.hero-logo { 
  height: 40px; width: auto; 
  margin: 0; 
}




#block-01-wrap { 
  max-width: 85%; width: 85%;
}
	
	
/* 1024 Tablet Portrait - Club Page */

#club-first-wrap,
#club-third-wrap {
  width: 85%;
  flex-direction: column;
}

.club-first-one,
.club-third-two {
  width: 100%;
  text-align: center;
  justify-content: center;
}

.club-first-one-wrap,
.club-third-two-wrap {
  align-items: center;
}

.club-first-one-img,
.club-third-two-img {
  width: 100%;
  margin: 40px 0;
}

.club-first-two,
.club-third-one {
  width: 100%;
  height: auto;
}

.club-third-one {
  margin-bottom: 2rem;
}

#club-second {
  width: 100%;
}

#club-second-wrap {
  width: 85%;
  justify-content: space-between;
}

.club-second-one,
.club-second-two,
.club-second-three,
.club-second-four {
  width: 25%;
}

.club-one,
.club-two,
.club-three,
.club-four {
  text-align: center;
}

	
/* 1024 Tablet Landcscape - About */	

#about {
  width: 100%;
  height: 100%;
  background: #f8f8fc;
}

#about-wrap {
  padding: 3rem 0;
  width: 85%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

#about-left,
#about-right {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}

.about-slide-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: 100%;
}

.about-intro,
.about-facts {
  position: relative;
}

.about-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 170px;
}

.about-text h1 {
  margin-bottom: 0.3rem;
}

.about-detail {
  grid-template-columns: 120px 1fr;
  gap: 10px;
  margin-bottom: 0.6rem;
}

.about-image {
  width: 100%;
  height: 220px;
  overflow: hidden;
}

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

.about-panel {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-bottom: 60px;
}

.about-counter {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
}
	
	
/* 1024 Tablet Landcscape - Club Staff */
	
#club-staff-wrap { 
  padding: 2rem 0;	
  width: 85%; height:100%; 
}	
	
.club-staff { 
  grid-template-columns: repeat(2, 1fr); 
}
	
	
/* 1024 Tablet Landcscape - Club Staff Profile */
	
#club-staff-profile-wrap { 
  padding: 2rem 0;	
  width: 85%; height:100%; 
  grid-template-columns: 1 1;
}	
.club-staff-profile-image { 
  min-height: 330px; max-height: 330px; 
}
.club-staff-profile-content-wrap { 
  width:100%; 
}		
	
	
/* 1024 Tablet Landcscape - Mission Statement */	

#mission-statement {
  width: 100%; height: 100%;
  background: linear-gradient(
    35deg,
    #ffffff 60%,
    #f8f8fc 50%
  );	
}

#mission-statement-wrap { 
  padding: 3rem 0;	
  width: 85%; height:100%; 
  margin: 0 auto;
  display: flex; flex-direction:column;
}	
	
	
/* 1024 Tablet Landcscape - Community Event */
	
#community-wrap { 
  padding: 2rem 0;	
  width: 85%; height:100%;
}

.community-events-grid { 
  row-gap: 0rem; padding: 0 0 0 0;	
  grid-template-columns: repeat(2, 1fr); 
}	
.community-event-card-text h2 { 
  margin-bottom:0rem !important; 
}

#community-testimonial-carousel-wrap {
  width: 85%;
}	
	
.community-testimonial-image{
  display:none;
}

.community-testimonial-text{
  flex:1;
  max-width:100%;
}

.community-testimonial-counter button{
  width:40px;
  height:40px;
  font-size:1rem;
}

	
/* 1024 Tablet Landcscape - Single Community Event */
		
#single-community-event-wrap { 
  padding: 2rem 0;	
  width: 85%; height:100%; 
  flex-direction: column; 
}

#single-community-event-left { 
  width: 100%; height:100%;
}

#single-community-event-right { 
  width: 100%; height:100%;
}		
	
	
/* 1024 Tablet Portrait - History */	
	
#history-wrap { 
  padding: 2rem 0;	
  width: 85%; height:100%; 
  display: flex; flex-direction: column;
}

#history-left {
    text-align:center;	
	width:100%; height:100%; 
	display: flex; flex-direction: column; 
}

#history-right { 
	width:100%; height:100%; 
	display: flex; flex-direction: column;  
}

.history-facts {
  display:none; 
}

.timeline-container::after {
    left: 24px;
    transform: none;
}

.timeline-item {
    width: 100%;
    left: 0;
    padding-left: 60px;
    padding-right: 20px;
    text-align: left;
}

.timeline-item.left,
.timeline-item.right {
    left: 0;
    padding-left: 60px;
    padding-right: 20px;
    text-align: left;
}

.timeline-icon {
  left: 19px !important;
  right: auto !important;
}

.timeline-item.right .timeline-icon {
    left: 16px;
}

.timeline-year,
.timeline-year:nth-of-type(odd),
.timeline-year:nth-of-type(even) {
  text-align: left;
  padding: 0 0 0 60px;
}	
	
	
/* 1024 Tablet Landcscape - Media */
	
#media-wrap { 
  padding: 2rem 0;	
  width: 85%; height:100%; 
}
.media-grid { width:100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 1rem;
	margin:0 auto;
}
	
/* 1024 Tablet Portrait - Gallery */
	
#gallery-wrap { 
  padding: 2rem 0;
  width: 85%; height:100%; 
}

#gallery-items-grid .rl-gallery { 
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.2rem;
}	
	
/* 1024 Tablet Landcscape - Media */
	
#welfare-wrap {
  padding: 2rem 0;
  width: 85%;
  flex-direction: column-reverse;
}

#welfare-left {
  width: 100%;
}

#welfare-right {
  width: 100%;
  display: flex;
  gap: 2rem;
}

#welfare-right img {
  width: 100%;
  height: auto;
}

.welfare-right {
  flex: 1;
}	
	
.welfare-profile{
  display:grid;
  grid-template-columns: 1fr 1.5fr;
  gap:2rem;
  align-items:start;
}

.welfare-profile img{
  width:100%;
  height:320px;
  object-fit:cover;
  object-position:50% 20%;
}

.welfare-profile-text {
  max-width: none;
}
	
.welfare-profile-text p {
  text-align: justify;
}
	
.welfare-left-a, 
.welfare-left-b,
.welfare-left-c {
  display:flex;
  flex-direction:column;
  gap:0;
  padding-bottom:1.5rem;
  margin-bottom:2rem;
  border-bottom:1px solid #d7d8dd;
}


/* 1024 Tablet Landcscape - Join Us */
	
#join-us-wrap { 
  padding: 2rem 0;	
  width: 85%; height:100%; 
  margin: 0 auto; align-items: flex-start;
  display: flex; flex-direction: column; 
}

#join-us-left { 
 display:none;
}

#join-us-right {
  flex: 1;            
  display: grid; gap: 1rem;
  grid-template-columns: repeat(1fr 1fr));
}
	
	
/* 1024 Tablet Landcscape - Documents */

#documents-wrap {
  padding: 2rem 0;	
  width: 85%; height:100%; 
  margin: 0 auto; align-items: flex-start;
  display: flex; flex-direction: column; 
}

#documents-left {
	width:100%; height:100%;  
}

#documents-right { 
	width:100%; height:100%;   
}

.documents {
  display:flex;
  align-items:flex-start;
  gap:1rem;
}

	
/* 1024 Tablet Landcscape - Teams */
	
#teams-wrap {
  padding: 2rem 0;	
  width: 85%; height:100%; 
  margin: 0 auto; align-items: center;
  display: flex; flex-direction: column; 
}

.teams-grid {
    width:100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}	
	

/* 1024 Tablet Landcscape - First Team */

#team-first-wrap { 
  width: 85%; 
  flex-direction: flex-start;
  justify-content: space-between;
}

#team-first-left { 
  width:60%; 
}

#team-first-right { 
  width:30%;  
}
.player { 
  grid-template-columns: repeat(2, 1fr); 
}
	
.team-first-three { 
  display:none; 
}
	

/* 1024 Tablet Landcscape - Second Team */
	
#team-second-wrap {
  width: 85%;
  flex-direction: flex-start;
  justify-content: space-between;
}

#team-second-left { 
  width:60%; 
}

#team-second-right { 
  width:30%;  
}	
	
	
/* 1024 Tablet Landcscape - Sponsors */	

#sponsors-wrap {
  width: 85%;
  padding: 2rem 0;
}

/* Top tier */
.sponsors-grid-01 {
  grid-template-columns: 2, 1fr !important;
}

/* All other tiers */
.sponsors-grid-02,
.sponsors-grid-03,
.sponsors-grid-04 {
  grid-template-columns: repeat(3, 1fr) !important;
}

/* Let logos breathe slightly more */
.sponsors-item img {
  max-width: 65%;
  max-height: 65%;
}


	
/* 1024 Tablet Landcscape - Single Sponsor */

#single-sponsor-wrap { 
  padding: 2rem 0;	
  width: 85%; 
  flex-direction: column; margin:0 auto;
}

#single-sponsor-left { 
  width:100%;
}

#single-sponsor-right {
  width:100%;
}

	
/* 1024 Tablet Landcscape - Shop */
	
#shop-wrap {
  padding: 2rem 0;	
  width: 85%; height:100%; 
}
	
.shop-filters{ 
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  gap:0.5rem;
  width:100%; padding-bottom:1.5rem; margin-bottom:0.5rem;
		
}

.shop-filters button{
  flex:0 0 auto;
}
	
.shop-filters::-webkit-scrollbar {
  height:6px;
}

.shop-filters::-webkit-scrollbar-track{
  background:transparent;
}

.shop-filters::-webkit-scrollbar-thumb{
  background:#d7d8dd;
  border-radius:10px;
}

.shop-filter-wrap::after{
  content:"";
  position:absolute;
  right:0; top:0;
  height:100%;
  width:75px;
  pointer-events:none;

  background:linear-gradient(
  to right,
  rgba(248,248,252,0),
  rgba(248,248,252,1)
);
}

.shop-grid { 
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2rem;
}
	
	
/* 1024 Tablet Landcscape - Single Product */	
	
#single-product-wrap{
  padding: 2rem 0;	
  width: 85%; height:100%; 
}
	
.product-page{
  flex-direction:column;
}

.product-gallery{
  display:flex;
  flex-direction:column;
  gap:15px;
}

.product-main-image{
  order:1;
}

.product-thumbs{
  order:2;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
}

.product-thumbs img{
  width:100%;
  height:auto;
}
		
	
/* 1024 Tablet Landcscape - Contact */	

#contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 85%;
  margin: 0 auto;
  }

#contact-left {
  grid-column: 1 / 2;
}

#contact-right {
  grid-column: 2 / 3;
  width: calc(50vw - 0.1%);
}
		
#contact-left-wrap {
  width: 90%;
}

#contact-right-wrap {
  width: 100%;
  margin: 0 auto;
}
	
#contact-map-wrap {
  width: 85%;
}

.contact-map {
  flex-direction: column;
  gap: 2rem;
  padding: 3rem 0;
}

.contact-map-left {
  width: 100%;
  aspect-ratio: 4 / 3;
  order: 2;
}

.contact-map-right {
  width: 100%;
  order: 1;
}

.contact-map-right-wrap {
  width: 100%;
}
	
	
/* Currently Not in Use */	
	
#events-wrap { 
  padding: 2rem 0;	
  width: 90%; height:100%; 
}	
	
#fixtures-wrap { 
  padding: 2rem 0;	
  width: 90%; height:100%; 
}		
	
#announcements-wrap { 
  padding: 2rem 0;	
  width: 90%; height:100%; 
}	
	
#single-announcements-wrap { 
  padding: 2rem 0;	
  width: 90%; height:100%; 
}		
	
}



/* === FC Nations TABLET PORTRAIT =================================================================================

  Theme Name: FC Nations Theme
  Section Name: Media Queries 768px
  Section Number: 00000
  Author: Made by Liam
  Version: 1.0

================================================================================================================== */

@media (max-width: 768px) {	

/* 768 Tablet Portrait - Hero */	
	
#page-hero,  
#team-hero,
#gallery-hero { 
  height:50vh; 
}	
	
#page-hero::before,  
#team-hero::before,
#gallery-hero::before	{ 
  background-attachment: scroll; 
}		
	
#page-hero-wrap, 
#team-hero-wrap,
#gallery-hero-wrap	{ 
	width: 85%; height: 40vh; 
}
	
.page-hero-content, 
.team-hero-content,
.gallery-hero-content { 
  width: 85%; margin: 0 auto; 
}
	
#page-hero h1, 
#team-hero h1,
#gallery-hero h1 { 
  font-size: 2.25rem; 
}
	
		
/* 768 Tablet Portrait - Page Buttons */

.page-buttons{ 
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  gap:0.5rem;
  width:100%; padding-bottom:1.5rem; margin-bottom:0.5rem;
		
}

.page-buttons button{
  flex:0 0 auto;
}
	
.page-buttons::-webkit-scrollbar {
  height:6px;
}

.page-buttons::-webkit-scrollbar-track{
  background:transparent;
}

.page-buttons::-webkit-scrollbar-thumb{
  background:#d7d8dd;
  border-radius:10px;
}

.page-buttons-wrap::after {
  content:"";
  position:absolute;
  right:0; top:0;
  height:100%;
  width:75px;
  pointer-events:none;
  background:linear-gradient(
  to right,
  rgba(248,248,252,0),
  rgba(248,248,252,1)
);
}

	
/* 768 Tablet Portrait - Home Page */		
	
#hero { 
  width:100%; margin:0 auto; 
}

#hero-wrap { 
  width:85%; margin:0 auto; 
}
.hero-content {
  width:100%; 
  margin-bottom: 15vh; 	
}
.hero-community { 
  flex-wrap: wrap; 
  justify-content:left; 
 gap: 0.8rem 1.2rem; 
}
.hero-logo { 
  height: 40px; width: auto; 
  margin: 0; 
}

#our-goals { 
  width:100%;	
  display: flex; 
  flex-direction:column; 
}
	
#our-goals h1 { 
  text-align:left; 
}
	
#our-goals-left { 
  width:70%; /* narrow for tablet portrait */
  margin:0 auto; padding: 3rem 0;  
}
	
#our-goals-left-wrap { 
  width:100%; min-width:100%; 
  text-align:center; 
}  

#our-goals-left-wrap h1 { 
	text-align:center;
}
	
#our-goals-right { 
  width:100%; padding: 3rem 0; 
}
	
#our-goals-right-wrap { 
  margin:0 auto; 
  display:inline-block; 
  display:flex; 
  flex-direction:column; 
  align-items:center; 
}

#block-01-wrap { 
  max-width: 85%; width: 85%;
} 
	
	
/* 768 Tablet Portrait - Club Page */

#club-first-wrap,
#club-third-wrap {
  width: 85%;
  flex-direction: column;
}

.club-first-one,
.club-third-two {
  width: 100%;
  text-align: center;
  justify-content: center;
}

.club-first-one-wrap,
.club-third-two-wrap {
  align-items: center;
}

.club-first-one-img,
.club-third-two-img {
  width: 100%;
  margin: 40px 0;
}

.club-first-two,
.club-third-one {
  width: 100%;
  height: auto;
}

.club-third-one {
  margin-bottom: 2rem;
}

#club-second {
  width: 100%;
}

#club-second-wrap {
  width: 85%;
  justify-content: space-between;
}

.club-second-one,
.club-second-two,
.club-second-three,
.club-second-four {
  width: 25%;
}

.club-one,
.club-two,
.club-three,
.club-four {
  text-align: center;
}

	
/* 768 Tablet Portrait - About */	

#about {
  width: 100%;
  height: 100%;
  background: #f8f8fc;
}

#about-wrap {
  padding: 3rem 0;
  width: 85%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

#about-left,
#about-right {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}

.about-slide-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: 100%;
}

.about-intro,
.about-facts {
  position: relative;
}

.about-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 170px;
}

.about-text h1 {
  margin-bottom: 0.3rem;
}

.about-detail {
  grid-template-columns: 120px 1fr;
  gap: 10px;
  margin-bottom: 0.6rem;
}

.about-image {
  width: 100%;
  height: 220px;
  overflow: hidden;
}

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

.about-panel {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-bottom: 60px;
}

.about-counter {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
}
	
	
/* 768 Tablet Portrait - Club Staff */
	
#club-staff-wrap { 
  padding: 2rem 0;	
  width: 85%; height:100%; 
}	
	
.club-staff { 
  grid-template-columns: repeat(1, 1fr); 
}
	
	
/* 768 Tablet Portrait - Club Staff Profile */
	
#club-staff-profile-wrap { 
  padding: 2rem 0;	
  width: 85%; height:100%; 
  grid-template-columns: 1fr;	
}	
.club-staff-profile-image { 
  min-height: 330px; max-height: 330px; 
}
.club-staff-profile-content-wrap { 
  width:100%; 
}	
	
	
/* 768 Tablet Portrait - Mission Statement */	

#mission-statement {
  width: 100%; height: 100%;
  background: linear-gradient(
    35deg,
    #ffffff 60%,
    #f8f8fc 50%
  );	
}

#mission-statement-wrap { 
  padding: 3rem 0;	
  width: 85%; height:100%; 
  margin: 0 auto;
  display: flex; flex-direction:column;
}
	
		
/* 768 Tablet Portrait - Community Event */
	
#community-wrap { 
  padding: 2rem 0;	
  width: 85%; height:100%;
}

.community-events-grid { 
  row-gap: 0rem; padding: 0 0 0 0;	
  grid-template-columns: repeat(2, 1fr); 
}	
.community-event-card-text h2 { 
  margin-bottom:0rem !important; 
}

#community-testimonial-carousel-wrap {
  width: 85%;
}	
	
.community-testimonial-image{
  display:none;
}

.community-testimonial-text{
  flex:1;
  max-width:100%;
}

.community-testimonial-counter button{
  width:40px;
  height:40px;
  font-size:1rem;
}

	
/* 768 Tablet Portrait - Single Community Event */
		
#single-community-event-wrap { 
  padding: 2rem 0;	
  width: 85%; height:100%; 
  flex-direction: column; 
}

#single-community-event-left { 
  width: 100%; height:100%;
}

#single-community-event-right { 
  width: 100%; height:100%;
}		
	
	
/* 768 Tablet Portrait - History */	
	
#history-wrap { 
  padding: 2rem 0;	
  width: 85%; height:100%; 
  display: flex; flex-direction: column;
}

#history-left {
    text-align:center;	
	width:100%; height:100%; 
	display: flex; flex-direction: column; 
}

#history-right { 
	width:100%; height:100%; 
	display: flex; flex-direction: column;  
}

.history-facts {
  display:none; 
}

.timeline-container::after {
    left: 24px;
    transform: none;
}

.timeline-item {
    width: 100%;
    left: 0;
    padding-left: 60px;
    padding-right: 20px;
    text-align: left;
}

.timeline-item.left,
.timeline-item.right {
    left: 0;
    padding-left: 60px;
    padding-right: 20px;
    text-align: left;
}

.timeline-icon {
  left: 19px !important;
  right: auto !important;
}

.timeline-item.right .timeline-icon {
    left: 16px;
}

.timeline-year,
.timeline-year:nth-of-type(odd),
.timeline-year:nth-of-type(even) {
  text-align: left;
  padding: 0 0 0 60px;
}
	
		
/* 768 Tablet Portrait - Media */
	
#media-wrap { 
  padding: 2rem 0;	
  width: 85%; height:100%; 
}
.media-grid { width:100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 1rem;
	margin:0 auto;
}
	
	
/* 768 Tablet Portrait - Gallery */
	
#gallery-wrap { 
  padding: 2rem 0;
  width: 85%; height:100%; 
}

#gallery-items-grid .rl-gallery { 
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
}	
	
	
/* 768 Tablet Portrait - Media */
	
#welfare-wrap {
  padding: 2rem 0;
  width: 85%;
  flex-direction: column-reverse;
}

#welfare-left {
  width: 100%;
}

#welfare-right {
  width: 100%;
  display: flex;
  gap: 2rem;
}

#welfare-right img {
  width: 100%;
  height: auto;
}

.welfare-right {
  flex: 1;
}	
	
.welfare-profile{
  display:grid;
  grid-template-columns: 1fr 1.5fr;
  gap:2rem;
  align-items:start;
}

.welfare-profile img{
  width:100%;
  height:320px;
  object-fit:cover;
  object-position:50% 20%;
}

.welfare-profile-text {
  max-width: none;
}
	
.welfare-profile-text p {
  text-align: justify;
}	

.welfare-left-a, 
.welfare-left-b,
.welfare-left-c {
  display:flex;
  flex-direction:column;
  gap:0;
  padding-bottom:1.5rem;
  margin-bottom:2rem;
  border-bottom:1px solid #d7d8dd;
}


/* 768 Tablet Portrait - Join Us */
	
#join-us-wrap { 
  padding: 2rem 0;	
  width: 85%; height:100%; 
  margin: 0 auto; align-items: flex-start;
  display: flex; flex-direction: column; 
}

#join-us-left { 
 display:none;
}

#join-us-right {
  flex: 1;            
  display: grid; gap: 1rem;
  grid-template-columns: repeat(1fr 1fr));
}
	
	
/* 768 Tablet Portrait - Documents */

#documents-wrap {
  padding: 2rem 0;	
  width: 85%; height:100%; 
  margin: 0 auto; align-items: flex-start;
  display: flex; flex-direction: column; 
}

#documents-left {
	width:100%; height:100%;  
}

#documents-right { 
	width:100%; height:100%;   
}

.documents {
  display:flex;
  align-items:flex-start;
  gap:1rem;
}

	
/* 768 Tablet Portrait - Teams */
	
#teams-wrap {
  padding: 2rem 0;	
  width: 85%; height:100%; 
  margin: 0 auto; align-items: center;
  display: flex; flex-direction: column; 
}

.teams-grid {
    width:100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}	
	

/* 768 Tablet Portrait - First Team */

#team-first-wrap { 
  width: 85%; 
  flex-direction: column;
}

.player { 
  grid-template-columns: repeat(2, 1fr); 
}
	
.team-first-three { 
  display:none; 
}
	

/* 768 Tablet Portrait - Second Team */
	
#team-second-wrap {
  width: 85%;
  flex-direction: column;
}

#team-second-left { 
  width:100%; 
}

#team-second-right { 
  width:100%;  
}	
	
	
/* 768 Tablet Portrait - Sponsors */	

#sponsors-wrap {
  width: 85%;
  padding: 2rem 0;
}

/* Top tier */
.sponsors-grid-01 {
  grid-template-columns: 2, 1fr !important;
}

/* All other tiers */
.sponsors-grid-02,
.sponsors-grid-03,
.sponsors-grid-04 {
  grid-template-columns: repeat(3, 1fr) !important;
}

/* Let logos breathe slightly more */
.sponsors-item img {
  max-width: 65%;
  max-height: 65%;
}


/* 768 Tablet Portrait - Single Sponsor */

#single-sponsor-wrap { 
  padding: 2rem 0;	
  width: 85%; 
  flex-direction: column; margin:0 auto;
}

#single-sponsor-left { 
  width:100%;
}

#single-sponsor-right {
  width:100%;
}


/* 768 Tablet Portrait - Shop */
	
#shop-wrap {
  padding: 2rem 0;	
  width: 85%; height:100%; 
}
	
.shop-filters{ 
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  gap:0.5rem;
  width:100%; padding-bottom:1.5rem; margin-bottom:0.5rem;
		
}

.shop-filters button{
  flex:0 0 auto;
}
	
.shop-filters::-webkit-scrollbar {
  height:6px;
}

.shop-filters::-webkit-scrollbar-track{
  background:transparent;
}

.shop-filters::-webkit-scrollbar-thumb{
  background:#d7d8dd;
  border-radius:10px;
}

.shop-filter-wrap::after{
  content:"";
  position:absolute;
  right:0; top:0;
  height:100%;
  width:75px;
  pointer-events:none;
  background:linear-gradient(
  to right,
  rgba(248,248,252,0),
  rgba(248,248,252,1)
);
}

.shop-grid { 
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
}
	
	
/* 768 Tablet Portrait - Single Product */	
	
#single-product-wrap{
  padding: 2rem 0;	
  width: 85%; height:100%; 
}
	
.product-page{
  flex-direction:column;
}

.product-gallery{
  display:flex;
  flex-direction:column;
  gap:15px;
}

.product-main-image{
  order:1;
}

.product-thumbs{
  order:2;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
}

.product-thumbs img{
  width:100%;
  height:auto;
}
		

/* 768 Tablet Portrait - Contact */	

#contact-wrap {
  grid-template-columns: 1fr;
  width: 85%;
  margin: 0 auto;
}

#contact-left,
#contact-right {
  grid-column: 1 / -1;
}

#contact-right {
  width: 100%; 
}

#contact-left-wrap,
#contact-right-wrap {
  width: 100%;
}

#contact-map-wrap {
  width: 85%;
}

.contact-map {
  flex-direction: column;
  gap: 2rem;
  padding: 3rem 0;
}

.contact-map-left {
  width: 100%;
  aspect-ratio: 4 / 3;
  order: 2;
}

.contact-map-right {
  width: 100%;
  order: 1;
}

.contact-map-right-wrap {
  width: 100%;
}
	
/* Currently Not in Use */	
	
#events-wrap { 
  padding: 2rem 0;	
  width: 90%; height:100%; 
}	
	
#fixtures-wrap { 
  padding: 2rem 0;	
  width: 90%; height:100%; 
}		
	
#announcements-wrap { 
  padding: 2rem 0;	
  width: 90%; height:100%; 
}	
	
#single-announcements-wrap { 
  padding: 2rem 0;	
  width: 90%; height:100%; 
}		
	
}


/* === FC Nations MOBILE =================================================================================

  Theme Name: FC Nations Theme
  Section Name: Media Queries 480px
  Section Number: 00000
  Author: Made by Liam
  Version: 1.0

================================================================================================================== */

@media (max-width: 480px) {	

/* 480 Tablet Portrait - Hero */	
	
#page-hero,  
#team-hero,
#gallery-hero { 
  height:50vh; 
}	
	
#hero::before,
#page-hero::before,  
#team-hero::before,
#gallery-hero::before	{ 
  background-attachment: scroll; 
}		
	
#page-hero-wrap, 
#team-hero-wrap,
#gallery-hero-wrap	{ 
	width: 90%; height: 40vh; 
}
	
.page-hero-content, 
.team-hero-content,
.gallery-hero-content { 
  width: 90%; margin: 0 auto; 
}
	
#page-hero h1, 
#team-hero h1,
#gallery-hero h1 { 
  font-size: 2.25rem; 
}
	
	
/* 480 Tablet Portrait - Page Buttons */

.page-buttons{ 
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  gap:0.5rem;
  width:100%; padding-bottom:1.5rem; margin-bottom:0.5rem;
		
}

.page-buttons button{
  flex:0 0 auto;
}
	
.page-buttons::-webkit-scrollbar {
  height:6px;
}

.page-buttons::-webkit-scrollbar-track{
  background:transparent;
}

.page-buttons::-webkit-scrollbar-thumb{
  background:#d7d8dd;
  border-radius:10px;
}

.page-buttons-wrap::after {
  content:"";
  position:absolute;
  right:0; top:0;
  height:100%;
  width:75px;
  pointer-events:none;
  background:linear-gradient(
  to right,
  rgba(248,248,252,0),
  rgba(248,248,252,1)
);
}

	
/* 480 Tablet Portrait - Home Page */		
	
#hero { 
  width:100%; margin:0 auto; 
}

#hero-wrap { 
  width:90%; margin:0 auto; 
}
.hero-content {
  width:100%; 
  margin-bottom: 15vh; 	
}
.hero-community { 
  flex-wrap: wrap; 
  justify-content:left; 
 gap: 0.8rem 1.2rem; 
}
.hero-logo { 
  height: 40px; width: auto; 
  margin: 0; 
}

#our-goals { 
  width:100%;	
  display: flex; 
  flex-direction:column; 
}
	
#our-goals h1 { 
  text-align:left; 
}
	
#our-goals-left { 
  width:90%;
  margin:0 auto; padding: 3rem 0;  
}
	
#our-goals-left-wrap { 
  width:100%; min-width:100%; 
  text-align:center; 
}  

#our-goals-left-wrap h1 { 
	text-align:center;
}
	
#our-goals-right { 
  width:100%; padding: 3rem 0; 
}
	
#our-goals-right-wrap { 
  margin:0 auto; 
  display:inline-block; 
  display:flex; 
  flex-direction:column; 
  align-items:center; 
}

#block-01-wrap { 
  max-width: 90%; width: 90%;
} 	
	
	
/* 480 Tablet Portrait - Club Page */

#club-first-wrap,
#club-third-wrap {
  width: 90%;
  flex-direction: column;
}

.club-first-one,
.club-third-two {
  width: 100%;
  text-align: center;
  justify-content: center;
}

.club-first-one-wrap,
.club-third-two-wrap {
  align-items: center;
}

.club-first-one-img,
.club-third-two-img {
  width: 100%;
  margin: 40px 0;
}

.club-first-two,
.club-third-one {
  width: 100%;
  height: auto;
}

.club-third-one {
  margin-bottom: 2rem;
}

#club-second {
  width: 100%;
}

#club-second-wrap {
  width: 90%;
  justify-content: space-between;
}

.club-second-one,
.club-second-two,
.club-second-three,
.club-second-four {
  width: 25%;
}

.club-one,
.club-two,
.club-three,
.club-four {
  text-align: center;
}

/* 480 Tablet Portrait - First Team */

#team-first-wrap { 
  width: 90%; 
  flex-direction: column;
}
	
.player { 
  grid-template-columns: repeat(1, 1fr); 
}
	
.team-first-three { 
  display:none; 
}

	
/* 480 Tablet Portrait - Second Team */
	
#team-second-wrap {
  width: 90%;
  flex-direction: column;
}

#team-second-left { 
  width:100%; 
}

#team-second-right { 
  width:100%;  
}
	
	
/* 480 Tablet Portrait - About */	

#about {
  width: 100%;
  height: 100%;
  background: #f8f8fc;
}

#about-wrap {
  padding: 3rem 0;
  width: 90%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

#about-left,
#about-right {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}

.about-slide-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: 100%;
}

.about-intro,
.about-facts {
  position: relative;
}

.about-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 170px;
}

.about-text h1 {
  margin-bottom: 0.3rem;
}

.about-detail {
  grid-template-columns: 120px 1fr;
  gap: 10px;
  margin-bottom: 0.6rem;
}

.about-image {
  width: 100%;
  height: 220px;
  overflow: hidden;
}

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

.about-panel {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-bottom: 60px;
}

.about-counter {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
}
	
	
/* 480 Tablet Portrait - Club Staff */
	
#club-staff-wrap { 
  padding: 2rem 0;	
  width: 90%; height:100%; 
}	
	
.club-staff { 
  grid-template-columns: repeat(1, 1fr); 
}
	
	
/* 480 Tablet Portrait - Club Staff Profile */
	
#club-staff-profile-wrap { 
  padding: 2rem 0;	
  width: 90%; height:100%; 
  grid-template-columns: 1fr;	
}	
.club-staff-profile-image { 
  min-height: 330px; max-height: 330px; 
}
.club-staff-profile-content-wrap { 
  width:100%; 
}	
	
	
/* 480 Tablet Portrait - Mission Statement */	

#mission-statement {
  width: 100%; height: 100%;
  background: linear-gradient(
    35deg,
    #ffffff 60%,
    #f8f8fc 50%
  );	
}

#mission-statement-wrap { 
  padding: 3rem 0;	
  width: 90%; height:100%; 
  margin: 0 auto;
  display: flex; flex-direction:column;
}
	
	
/* 480 Tablet Portrait - Community Event */
	
#community-event-wrap { 
  padding: 2rem 0;	
  width: 90%; height:100%; 
}

.community-events-grid { 
  row-gap: 0rem; padding: 0 0 0 0;	
  grid-template-columns: repeat(1, 1fr); 
}	
.community-event-card-text h2 { 
  margin-bottom:0rem !important; 
}

.community-testimonial-image{
  display:none;
}

.community-testimonial-text{
  flex:1;
  max-width:100%;
}

.community-testimonial-counter button{
  width:40px;
  height:40px;
  font-size:1rem;
}
	
	
/* 480 Tablet Portrait - Single Community Event */
		
#single-community-event-wrap { 
  padding: 2rem 0;	
  width: 90%; height:100%; 
  flex-direction: column; 
}

#single-community-event-left { 
  width: 100%; height:100%;
}

#single-community-event-right { 
  width: 100%; height:100%;
}		
	
	
/* 480 Tablet Portrait - History */	
	
#history-wrap { 
  padding: 2rem 0;	
  width: 90%; height:100%; 
  display: flex; flex-direction: column;
}

#history-left {
    text-align:center;	
	width:100%; height:100%; 
	display: flex; flex-direction: column; 
}

#history-right { 
	width:100%; height:100%; 
	display: flex; flex-direction: column;  
}

.history-facts {
  display:none; 
}

.timeline-container::after {
    left: 24px;
    transform: none;
}

.timeline-item {
    width: 100%;
    left: 0;
    padding-left: 60px;
    padding-right: 20px;
    text-align: left;
}

.timeline-item.left,
.timeline-item.right {
    left: 0;
    padding-left: 60px;
    padding-right: 20px;
    text-align: left;
}

.timeline-icon {
  left: 19px !important;
  right: auto !important;
}

.timeline-item.right .timeline-icon {
    left: 16px;
}

.timeline-year,
.timeline-year:nth-of-type(odd),
.timeline-year:nth-of-type(even) {
  text-align: left;
  padding: 0 0 0 60px;
}
	
	
/* 480 Tablet Portrait - Media */
	
#media-wrap { 
  padding: 2rem 0;	
  width: 90%; height:100%; 
}
.media-grid { width:100%;
    display: grid;
    grid-template-columns: repeat(1, 1fr); 
    gap: 1rem;
	margin:0 auto;
}
	
	
/* 480 Tablet Portrait - Gallery */
	
#gallery-wrap { 
  padding: 2rem 0;
  width: 90%; height:100%; 
}

#gallery-items-grid .rl-gallery { 
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
}	
	
	
/* 480 Tablet Portrait - Media */
	
#welfare-wrap { 
  padding: 2rem 0 2rem 0;	
  width: 90%; flex-direction: column-reverse;
}

#welfare-left { 
  width:100%; height:100%; 
  padding:0; margin:0;
}

#welfare-right { 
  width:100%; height:100%; 
  padding:0; margin:0;
}	

.welfare-profile {
  display:block;
}

.welfare-profile img {
  width:100%;
  height:auto;
}
	
.welfare-left-a, 
.welfare-left-b,
.welfare-left-c {
  display:flex;
  flex-direction:column;
  gap:0;
  padding-bottom:1.5rem;
  margin-bottom:2rem;
  border-bottom:1px solid #d7d8dd;
}

	
/* 480 Tablet Portrait - Join Us */
	
#join-us-wrap { 
  padding: 2rem 0;	
  width: 90%; height:100%; 
  margin: 0 auto; align-items: flex-start;
  display: flex; flex-direction: column; 
}

#join-us-left { 
 display:none;
}

#join-us-right {
  flex: 3.25;            
  display: grid; gap: 1rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
	
	
/* 480 Tablet Portrait - Documents */

#documents-wrap {
  padding: 2rem 0;	
  width: 90%; height:100%; 
  margin: 0 auto; align-items: flex-start;
  display: flex; flex-direction: column; 
}

#documents-left {
	width:100%; height:100%;  
}

#documents-right { 
	width:100%; height:100%;   
}

.documents {
  display:flex;
  align-items:flex-start;
  gap:1rem;
}
	
	
/* 480 Tablet Portrait - Teams */
	
#teams-wrap {
  padding: 2rem 0;	
  width: 85%; height:100%; 
}

.teams-grid {
  grid-template-columns: repeat(1, 1fr);
}	
	

/* 480 Tablet Portrait - First Team */

#team-first-wrap { 
  width: 85%; 
  flex-direction: column;
}

.player { 
  grid-template-columns: repeat(1, 1fr); 
}
	
.team-first-three { 
  display:none; 
}
	

/* 480 Tablet Portrait - Second Team */
	
#team-second-wrap {
  width: 85%;
  flex-direction: column;
}

#team-second-left { 
  width:100%; 
}

#team-second-right { 
  width:100%;  
}	
	
	
/* 480 Tablet Portrait - Sponsors */	

#sponsors-wrap {
  width: 90%;
  padding: 2rem 0;
}

/* Top tier */
.sponsors-grid-01 {
  grid-template-columns: 1fr !important;
}

/* All other tiers */
.sponsors-grid-02,
.sponsors-grid-03,
.sponsors-grid-04 {
  grid-template-columns: repeat(2, 1fr) !important;
}

/* Let logos breathe slightly more */
.sponsors-item img {
  max-width: 65%;
  max-height: 65%;
}

	
/* 480 Tablet Portrait - Single Sponsor */

#single-sponsor-wrap { 
  padding: 2rem 0;	
  width: 90%; 
  flex-direction: column; margin:0 auto;
}

#single-sponsor-left { 
  width:100%;
}

#single-sponsor-right {
  width:100%;
}
	

/* 480 Tablet Portrait - Shop */
	
#shop-wrap {
  padding: 2rem 0;	
  width: 90%; height:100%; 
}
	
.shop-filters{ 
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  gap:0.5rem;
  width:100%; padding-bottom:1.5rem; margin-bottom:0.5rem;
		
}

.shop-filters button{
  flex:0 0 auto;
}
	
.shop-filters::-webkit-scrollbar {
  height:6px;
}

.shop-filters::-webkit-scrollbar-track{
  background:transparent;
}

.shop-filters::-webkit-scrollbar-thumb{
  background:#d7d8dd;
  border-radius:10px;
}

.shop-filter-wrap::after{
  content:"";
  position:absolute;
  right:0; top:0;
  height:100%;
  width:75px;
  pointer-events:none;

  background:linear-gradient(
  to right,
  rgba(248,248,252,0),
  rgba(248,248,252,1)
);
}

.shop-grid { 
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:2rem;
}
	
		
/* 480 Tablet Portrait - Single Product */	
	
#single-product-wrap{
  padding: 2rem 0;	
  width: 90%; height:100%; 
}
	
.product-page{
  flex-direction:column;
}

.product-gallery{
  display:flex;
  flex-direction:column;
  gap:15px;
}

.product-main-image{
  order:1;
}

.product-thumbs{
  order:2;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
}

.product-thumbs img{
  width:100%;
  height:auto;
}
		
	
/* 480 Tablet Portrait - Contact */	

#contact-wrap {
  grid-template-columns: 1fr;
  width: 90%; margin: 0 auto;
}

#contact-left,
#contact-right {
  width:100%;
}

#contact-left-wrap {
  width: 100%;
}


#contact-right-wrap {
  width: 100%;
  margin: 0 auto;
}
	
#contact-map-wrap {
  width: 90%;
}

.contact-map {
  flex-direction: column;
  gap: 2rem;
  padding: 3rem 0;
}

.contact-map-left {
  width: 100%;
  aspect-ratio: 4 / 3;
  order: 2;
}

.contact-map-right {
  width: 100%;
  order: 1;
}

.contact-map-right-wrap {
  width: 100%;
}
	
	
/* Currently Not in Use */	
	
#events-wrap { 
  padding: 2rem 0;	
  width: 90%; height:100%; 
}	
	
#fixtures-wrap { 
  padding: 2rem 0;	
  width: 90%; height:100%; 
}		
	
#announcements-wrap { 
  padding: 2rem 0;	
  width: 90%; height:100%; 
}	
	
#single-announcements-wrap { 
  padding: 2rem 0;	
  width: 90%; height:100%; 
}		
	
}