/*!
Theme Name: Tirik
Theme URI: http://underscores.me/
Author: Metapixel Inc.
Author URI: http://www.metapixel.com.ph
Description: Wordpress theme for Tirik
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: tirik
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Tirik is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
:root {
	--red: #b91e1c;
	--yellow: #f5cc60;
}

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #666;
	font-family: "Arvo", serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Gupter", serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
	color: #fff;
	margin-bottom: 0.5em;
}

h1:first-letter,
h2:first-letter,
h3:first-letter,
h4:first-letter,
h5:first-letter,
h6::first-letter {
	color: var(--red);
}

big {
	font-size: 125%;
}

h1 {
	font-size: clamp( 2.2rem, 2.2rem + 2.5vw, 5.2rem);
}

h2 {
	font-size: clamp( 1.6rem, 1.6rem + 2.5vw, 3rem);
}

h3 {
	font-size: clamp( 1.4rem, 1.4rem + 2.5vw, 2.7rem);
}

h4 {
	font-size: clamp( 1.2rem, 1.2rem + 2.5vw, 2.4rem);
}

h5 {
	font-size: clamp( 1.1rem, 1.1rem + 2.5vw, 2.2rem);
}

h6 {
	font-size: clamp( 1rem, 1rem + 2.5vw, 2rem);
}

main p {
	line-height: 2em;
}

/* Elements
--------------------------------------------- */
body {
	background: #000;
}

hr {
	background-color: rgba(255,255,255,0.12);
	border: 0;
	height: 1px;
	opacity: 1;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

blockquote {
	font-style: italic;
}

/* Links
--------------------------------------------- */
a {
	color: var(--yellow);
	transition: all 0.4s ease;
	text-decoration: none;
}

a:hover,
a:focus,
a:active {
	color: var(--red);
}

a:focus {
	outline: thin dotted;
}

a:focus:not(:focus-visible) {
	outline: none;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--red);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    clip-path: circle(100% at 50% 50%);
    transition: clip-path 1s ease;
}

#preloader-content {
    text-align: center;
}

#preloader-percentage {
    font-size: 48px;
    font-weight: 700;
    color: #000;
}

#masthead {
	position: fixed;
	display: flex;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 10000;
	padding: 15px 50px;
	gap: 30px;
	border-bottom: 1px solid rgba(255,255,255,0.1);
	background-color: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.site-branding {
	display: flex;
	position: relative;
	width: auto;
	gap: 30px;
	transition: all 0.4s ease;
}

.site-branding h1,
.site-branding p  {
	position: relative;
	display: inline-block;
	font-size: 0;
	line-height: 0;
	margin: 0;
	vertical-align: top;
}

.site-branding h1 a,
.site-branding p a {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: inline-block;
	color: #fff;
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 24px;
	line-height: 40px;
	font-weight: 600;
	vertical-align: top;
}

.site-title-none {
	font-size: 0;
	width: 1px;
	height: 1px;
	display: inline-block;
	overflow: hidden;
	position: absolute!important;
	border: 0!important;
	padding: 0!important;
	margin: 0!important;
	clip: rect(1px,1px,1px,1px);
}

.site-branding img {
	height: 30px;
	width: auto;
}

#colophon {
	padding: 0 0 50px;
	background-color: #000;
	color: #666;
}

.footer-bg {
	background-size: cover;
	background-position: center;
	height: 700px;
}

.site-info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 0 30px;
}

.site-info img {
	width: 100%;
	max-width: 400px;
}

/* Navigation
--------------------------------------------- */
#site-navigation {
	display: flex;
	flex: 1 0 auto;
	transition: all 0.4s ease;	
	justify-content: flex-end;
}

#page-navigation {
	display: flex;
	transition: all 0.4s ease;
	margin-left: 50px;
}

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

.main-navigation > div > ul {
	display: flex;
	gap: 40px;
	height: 100%;
	align-items: center;

}

.main-navigation ul ul {
	float: left;
	position: absolute;
	top: 100%; left: 0;
	visibility: hidden;
	z-index: 99999;
	padding: 15px 0 10px;
	opacity: 0;
	transition: visibility 0s ease 0.4s, opacity 0.4s ease;
}

.main-navigation ul ul:before {
	content: "";
	display: block;
	position: absolute;
	top: 5px; right: 0; bottom: 0; left: 0;
	background: #fff;
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	opacity: 1;
	visibility: visible;
	-webkit-transition: visibility 0s ease 0s, opacity 0.4s ease;
			transition: visibility 0s ease 0s, opacity 0.4s ease;
}

.main-navigation ul ul li {
	margin: 0;
}

.main-navigation ul ul a {
	display: block;
	width: 250px;
	padding: 10px 15px;
	color: #fff;	
	line-height: 1.2em;
	text-align: left;
}

.main-navigation ul ul li > a:hover,
.main-navigation ul ul li.focus > a,
.main-navigation ul ul li.current_page_item:hover > a,
.main-navigation ul ul li.current_page_item.focus > a,
.main-navigation ul ul li.current-menu-item:hover > a,
.main-navigation ul ul li.current-menu-item.focus > a,
.main-navigation ul ul li.current_page_ancestor:hover > a,
.main-navigation ul ul li.current_page_ancestor.focus > a,
.main-navigation ul ul li.current-menu-ancestor:hover > a,
.main-navigation ul ul li.current-menu-ancestor.focus > a,
.main-navigation ul ul li.current_page_item > a,
.main-navigation ul ul li.current_page_ancestor > a,
.main-navigation ul ul li.current-page-parent > a,
.main-navigation ul ul li.current-menu-item > a,
.main-navigation ul ul li.current-menu-ancestor > a,
.main-navigation ul ul li.current-menu-parent > a,
.main-navigation ul ul li.current-post-ancestor > a,
.main-navigation ul ul li.current-post-parent > a {
	background-color: #333;
	color: #fff;
}

.main-navigation ul ul ul {
	top: -10px; left: 100%;
	padding: 10px 0 10px 10px;
}

.main-navigation ul ul ul:before {
	top: 0; right: 0; bottom: 0; left: 10px;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
	font-weight: 700;
}

#masthead.scrolled .main-navigation a {
	font-size: 16px;
}

.main-navigation > div > ul > li {
	position: relative;
}

.main-navigation > div > ul > li > a {
	display: block;
	position: relative;
	z-index: 1;
	text-decoration: none;
	color: rgba(255,255,255,0.3);
}

.main-navigation > div > ul > li:before {
	content: "";
	display: block;
	position: absolute;
	right: 50%; bottom: 0; left: 50%;
	height: 1px;
	background-color: var(--red);
	transition: all 0.2s ease;
}

.main-navigation > div > ul > li:hover:before,
.main-navigation > div > ul > li.current_page_item.focus:before,
.main-navigation > div > ul > li.current-menu-item.focus:before,
.main-navigation > div > ul > li.current_page_ancestor.focus:before,
.main-navigation > div > ul > li.current-menu-ancestor.focus:before,
.main-navigation > div > ul > li.current_page_item:before,
.main-navigation > div > ul > li.current_page_ancestor:before,
.main-navigation > div > ul > li.current-page-parent:before,
.main-navigation > div > ul > li.current-menu-item:before,
.main-navigation > div > ul > li.current-menu-ancestor:before,
.main-navigation > div > ul > li.current-menu-paren:before,
.main-navigation > div > ul > li.current-post-ancestor:before,
.main-navigation > div > ul > li.current-post-parent:before,
.main-navigation > div > ul > li.active:before {
	right: 0; left: 0;
}

.main-navigation > div > ul > li > a:hover,
.main-navigation > div > ul > li.current_page_item:hover > a,
.main-navigation > div > ul > li.current_page_item.focus > a,
.main-navigation > div > ul > li.current-menu-item:hover > a,
.main-navigation > div > ul > li.current-menu-item.focus > a,
.main-navigation > div > ul > li.current_page_ancestor:hover > a,
.main-navigation > div > ul > li.current_page_ancestor.focus > a,
.main-navigation > div > ul > li.current-menu-ancestor:hover > a,
.main-navigation > div > ul > li.current-menu-ancestor.focus > a,
.main-navigation > div > ul > li.current_page_item > a,
.main-navigation > div > ul > li.current_page_ancestor > a,
.main-navigation > div > ul > li.current-page-parent > a,
.main-navigation > div > ul > li.current-menu-item > a,
.main-navigation > div > ul > li.current-menu-ancestor > a,
.main-navigation > div > ul > li.current-menu-parent > a,
.main-navigation > div > ul > li.current-post-ancestor > a,
.main-navigation > div > ul > li.current-post-parent > a,
.main-navigation > div > ul > li.active > a {
	color: #fff;
}

/* Mobile navigation */
.mobile-navigation-button {
	display: none;
	z-index: 99999;
	transition: all 0.5s ease;
}

.hamburger {
	display: inline-block;
	position: relative;
	width: 40px;
	height: 30px;
	padding: 0;
	z-index: 9999;
	vertical-align: top;
}

.hamburger:hover {
	opacity: 1;
}

.hamburger:focus {
	outline: 0;
}

.hamburger-box {
	position: absolute;
	top: 50%; left: 50%;
	margin-top: -12px;
	margin-left: -17px;
	width: 34px;
	z-index: 10;
}

.hamburger .hamburger-inner, 
.hamburger .hamburger-inner::after, 
.hamburger .hamburger-inner::before {
	background-color: #fff;
	width: 34px;
	-webkit-transition: all 0.2s ease;
			transition: all 0.2s ease;
}

.hamburger.is-active .hamburger-inner, 
.hamburger.is-active .hamburger-inner::after, 
.hamburger.is-active .hamburger-inner::before {
	width: 34px;
}

.hamburger-label {
	display: inline-block;
	position: absolute;
	top: 50%;
	right: 100%;
	transform: translate(-20px,-50%);
	font-size: 16px;
	font-weight: 600;
	line-height: 50px;
	color: #fff;
	-webkit-transition: all 0.2s ease;
			transition: all 0.2s ease;
}

#masthead .hamburger.is-active .hamburger-inner, 
#masthead .hamburger.is-active .hamburger-inner::after, 
#masthead .hamburger.is-active .hamburger-inner::before {
	background: #fff;
}

#masthead .hamburger.is-active .hamburger-label {
	color: #fff;
}

.mobile-navigation {
	position: fixed;
	top: 100%; left: 100%;
	width: 100vw;
	height: 100vh;
	z-index: 99998;
	padding: 100px 100px 0;
	text-align: left;
	background-color: var(--red);
	transition: left 0.4s ease, opacity 0.4s ease, top 0s ease 0.4s;
	-ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
}

.mobile-navigation::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}

.mobile-navigation.open {
	top: 0; left: 0;
	transition: left 0.4s ease, opacity 0.4s ease, top 0s ease 0s;
}

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

.mobile-navigation ul ul {
	position: relative;
	padding: 0;
	margin: 0 30px;
}

.mobile-navigation ul li {
	display: block;
	position: relative;
	text-transform: uppercase;
	max-width: 50%;
	border-bottom: 1px solid rgba(255,255,255,0.3);
}

.mobile-navigation ul li a {
	position: relative;
	display: inline-block;
	padding: 10px 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1em;
	vertical-align: middle;
	text-decoration: none;
	color: #fff;
	margin-top: 10px;
	-webkit-transition: all 0.4s ease 0s;
			transition: all 0.4s ease 0s;
}

.mobile-navigation ul li a:hover,
.mobile-navigation ul li a:focus {
	text-decoration: none;
}

.mobile-navigation ul.menu.slide-nav li i.drop-down-icon {
	position: absolute;
	box-sizing: border-box;
	display: block;
	top: 13px; right: 0;
	width: 30px;
	height: 30px;
	margin: 0;
	border-radius: 3px;
	color: #fff;
	font-size: 20px;
	line-height: 30px;
	text-align: center;
	-webkit-transition: all 0.4s ease;
			transition: all 0.4s ease;
}

.mobile-navigation ul.menu.slide-nav li i.drop-down-icon:hover {
	cursor: pointer;
}

.mobile-navigation ul.menu.slide-nav li i.drop-down-icon.open {
	transform: rotate(180deg);
}

.mobile-navigation ul li > a:hover,
.mobile-navigation ul li.focus > a,
.mobile-navigation ul li.current_page_item.focus > a,
.mobile-navigation ul li.current-menu-item.focus > a,
.mobile-navigation ul li.current_page_ancestor.focus > a,
.mobile-navigation ul li.current-menu-ancestor.focus > a,
.mobile-navigation ul li.current_page_item > a,
.mobile-navigation ul li.current_page_ancestor > a,
.mobile-navigation ul li.current-page-parent > a,
.mobile-navigation ul li.current-menu-item > a,
.mobile-navigation ul li.current-menu-ancestor > a,
.mobile-navigation ul li.current-menu-parent > a,
.mobile-navigation ul li.current-post-ancestor > a,
.mobile-navigation ul li.current-post-parent > a {
	color: #ffe19f;
}

.mobile-navigation .search-form{
	margin: 20px 0 0 50px;
}

#mobile-page-menu {
	margin-top: 30px;
}

/* Post navigation */
.post-navigation {
	margin-top: 60px;
}

.post-navigation .blog-column-content h4 {
	font-size: 20px;
	margin-bottom: 0;
}

.blog-column {
	height: 100%;
	position: relative;
	color: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	overflow: hidden;
}

.blog-column-content {
	padding: 15px 0 0;
}

.blog-column-content h3 {
	margin: 0;
}

.blog-column-content span {
	display: block;
	margin-bottom: 7px;
	color: #999;
}

.post-nav-label {
	padding: 0 0 15px;
	text-transform: uppercase;
	background-color: var(--green);
}

.post-thumb {
	position: relative;
	display: block;
	height: 200px;
	background-size: cover;
	background-position: center;
	border: 1px solid rgba(255,255,255,0.12)
}

.thumb-overlay {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background-color: var(--red);
	opacity: 0;
	-webkit-transition: all 0.4s ease;
			transition: all 0.4s ease;
}

.thumb-overlay span {
	position: absolute;
	top: 80%; left: 50%;
	transform: translate(-50%,-50%);
	font-size: 20px;
	color: #fff;
	-webkit-transition: all 0.4s ease;
			transition: all 0.4s ease;
}

.thumb-overlay:hover,
.thumb-overlay:focus,
.thumb-overlay.focus {
	opacity: 0.8;
}

.thumb-overlay:hover span,
.thumb-overlay:focus span,
.thumb-overlay.focus span {
	top: 50%;
}

/* Posts and pages
--------------------------------------------- */
/* --- IMAGE SEQUENCE SECTION --- */
.sequence-section {
	position: relative;
	width: 100%;
	height: calc(var(--vh, 1vh) * 100);
	overflow: hidden;
}

/* Canvas fills width, height adapts */
#sequenceCanvas {
	display: block;
	width: 100vw;
	height: 100%;
	margin: 0 auto;
}

/* Video fallback for mobile: hidden by default, shown on small viewports */
.sequence-video {
    display: none; /* hidden by default for desktop */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
    z-index: 1;
}


/* Center video and preserve aspect ratio */
#sequenceVideo {
	display: none; /* shown on mobile via media query */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 100vw;
	max-height: 100vh;
	width: auto;
	height: auto;
	object-fit: contain;
	z-index: 1;
}

#videoLoader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
}

#videoLoader svg circle {
    stroke-dasharray: 283; /* 2 * PI * r */
    stroke-dashoffset: 283;
    transform-origin: 50% 50%;
    animation: loadingCircle 1.5s linear infinite;
}

@keyframes loadingCircle {
    0% { stroke-dashoffset: 283; transform: rotate(0deg); }
    100% { stroke-dashoffset: 0; transform: rotate(360deg); }
}

#scrollDownBtn {
	position: fixed;       /* fixed in viewport */
	bottom: 40px;          /* distance from bottom */
	left: 50%;             /* center horizontally */
	transform: translateX(-50%);
	z-index: 9999;         /* above everything */
	opacity: 1;
	pointer-events: auto;
	transition: opacity 0.25s ease;
	background: var(--red);   /* or your preferred color */
	color: #fff;        /* text color */
	border: none;
	padding: 12px 24px;
	border-radius: 24px;
	cursor: pointer;
	font-size: 16px;
	font-weight: 500;
}

.scroll-down-btn.hidden {
  opacity: 0;
  pointer-events: none;
}

.content-section {
	padding: 100px 50px;
	margin: 1px 0;
}

.flex-container {
	display: flex;
	gap: 50px;
	padding: 50px 0 0;
}

.flex-container > div {
	padding: 50px;
	border: 1px solid #330706;
	background-color: #000000;
}

.flex-col-4 {
	flex: 1 0 33.33%;
}

.flex-col-12 {
	flex: 1 0 66.66%;
}

hr.gsap-divider {
	width: 100%;
	height: 1px;
	margin: 0 auto;
}

.section-header {
	width: 100%;
	overflow: hidden;        /* hides left + right overflow */
	display: flex;
	justify-content: center; /* center the h2 */
}

.section-header h2 {
	white-space: nowrap;     /* never wrap */
	text-align: center;
	display: inline-block;
	max-width: none;         /* allow overflow */
	will-change: transform;
	transition: none;

	font-size: 100px;
	margin: 0;
	padding: 30px 0.5em;
}

.content-section.red-section {
	display: flex;
	position: relative;
	justify-content: center;
	gap: 50px;
	width: auto;
	background-color: var(--red);
	overflow: hidden;
}

.rotated-header {
	display: inline-block;      /* shrink to content */
	writing-mode: vertical-rl;  /* vertical top-to-bottom */
	position: relative;
	will-change: transform;
}

.rotated-header h2 {
	margin: 0;                  /* remove extra margin */
	padding: 0;
	line-height: 1em;
	white-space: nowrap;        /* keep text in one line */
	font-size: 100px;
}

.red-section h2:first-letter,
.red-section h3:first-letter{
	color: #000;
}

.red-section p {
	color: #fff;
}

.red-section h3 {
	font-size: 42px;
}

.maker-boxes-1,
.maker-boxes-2 {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 50px;
	margin-top: 50px;
}

.maker-boxes-1 > div,
.maker-boxes-2 > div {
	position: relative;
	background-color: #000;
	padding: 40px 50px 40px 300px;
	transform: scaleX(0);
	transform-origin: left;
}

.maker-boxes-1 > div > img,
.maker-boxes-2 > div > img {
	position: absolute;
	top: 50%; left: 50px;
	transform: translateY(-50%);
	width: 200px;
	height: auto;
	clip-path: circle(100% at 50% 50%);
}

.maker-boxes-1 > div > h4,
.maker-boxes-2 > div > h4 {
	font-size: 60px;
	margin: 0 0 10px;
	line-height: 1em;
}

.maker-boxes-1 > div > p,
.maker-boxes-2 > div > p {
	color: #666;
	margin-bottom: 0;
}

.maker-boxes-2 {
	gap: 20px;
	margin-top: 30px;
}

.maker-boxes-2 > div {
	padding: 20px 50px;
}

.maker-boxes-2 > div > h4 {
	font-size: 36px;
	margin: 0 0 5px;
}

.maker-boxes-2 > div > p {
	margin: 0;
}

#section3 {
	position: relative;
	min-height: 100vh;
	/* Optional: keeps the fixed bg 'inside' this section visually */
	clip-path: inset(0 0 0 0); 
}

.parallax-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 160vh; /* 60% taller than viewport to cover the 30% +/- movement */	
	background-size: cover;
	background-position: center;
	margin-top: -30vh; /* Half of the extra height to keep it centered */
	z-index: -1;
	opacity: 0;
	will-change: transform, opacity;
}



.grid-characters {
    display: grid;
	max-width: 1250px;
    /* 
       1. auto-fill: Creates as many columns as will fit.
       2. minmax(min(100%, 600px), 600px): 
          - The first 600px is the 'preferred' size.
          - min(100%, 600px) ensures it shrinks on mobile.
          - The second 600px (instead of 1fr) locks the width.
    */
    grid-template-columns: minmax(0, 600px);
    
    /* Centers the entire 1 or 2-column block */
    justify-content: center; 
    /* Centers the items inside their 600px tracks */
    justify-items: center; 
    
    gap: 50px;
    margin: 50px auto 0;
}

.character {
    display: grid;
    /* 
       Column 1: max 200px (shrinks if needed)
       Column 2: 1fr takes all remaining space
    */
    grid-template-columns: minmax(0, 200px) 1fr;
    gap: 20px;
	align-items: center;
    width: 100%;
}

@media (min-width: 1250px) { /* Adjust based on your gap (600 + 600 + 50) */
	.grid-characters {
        grid-template-columns: repeat(2, 600px);
    }
    .character:first-child,
	.character:nth-child(2) {
        grid-column: span 2;
        
        /* Optional: Keep the item centered within the 2-column span */
        max-width: 100%; 
        width: 100%;
    }
}

@media (max-width: 576px) { /* Adjust based on your gap (600 + 600 + 50) */
	.character {
        grid-template-columns: 1fr; /* Image and text stack vertically */
        justify-items: center;      /* Centers the image */
        text-align: center;         /* Centers the text */
    }
}

.character img {
	width: 100%;
    max-width: 200px;
    object-fit: cover;
}

.character h3 {
	font-size: 2em;
	margin-bottom: 5px;
}

.character p span {
	font-size: 1.2em;
	color: var(--yellow);
	font-weight: 700;
}

#section5,
#section6 {
	min-height: auto;
}

.contact-section-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
}

#custom_wp_form div.wpforms-container-full:not(:empty) {
	margin: 0;
}

#custom_wp_form .wpforms-container .wpforms-field {
	padding: 0 0 30px;
}

#custom_wp_form .wpforms-container .wpforms-form .wpforms-field-label {
	font-family: "Gupter", serif;
	font-optical-sizing: auto;
	font-size: 1.75rem;
	font-weight: 700;
	font-style: normal;
	line-height: 1.2em;
	color: #fff;
	margin-bottom: 0.5em;
}

#custom_wp_form .wpforms-container .wpforms-form .wpforms-field-label:first-letter{
	color: var(--red);
}

#custom_wp_form div.wpforms-container-full input[type="date"],
#custom_wp_form div.wpforms-container-full input[type="datetime"],
#custom_wp_form div.wpforms-container-full input[type="datetime-local"], 
#custom_wp_form div.wpforms-container-full input[type="email"], 
#custom_wp_form div.wpforms-container-full input[type="month"], 
#custom_wp_form div.wpforms-container-full input[type="number"], 
#custom_wp_form div.wpforms-container-full input[type="password"], 
#custom_wp_form div.wpforms-container-full input[type="range"], 
#custom_wp_form div.wpforms-container-full input[type="search"], 
#custom_wp_form div.wpforms-container-full input[type="tel"], 
#custom_wp_form div.wpforms-container-full input[type="text"], 
#custom_wp_form div.wpforms-container-full input[type="time"], 
#custom_wp_form div.wpforms-container-full input[type="url"], 
#custom_wp_form div.wpforms-container-full input[type="week"], 
#custom_wp_form div.wpforms-container-full select, 
#custom_wp_form div.wpforms-container-full textarea, 
#custom_wp_form .wp-core-ui div.wpforms-container-full input[type="date"], 
#custom_wp_form .wp-core-ui div.wpforms-container-full input[type="datetime"], 
#custom_wp_form .wp-core-ui div.wpforms-container-full input[type="datetime-local"], 
#custom_wp_form .wp-core-ui div.wpforms-container-full input[type="email"], 
#custom_wp_form .wp-core-ui div.wpforms-container-full input[type="month"], 
#custom_wp_form .wp-core-ui div.wpforms-container-full input[type="number"], 
#custom_wp_form .wp-core-ui div.wpforms-container-full input[type="password"], 
#custom_wp_form .wp-core-ui div.wpforms-container-full input[type="range"], 
#custom_wp_form .wp-core-ui div.wpforms-container-full input[type="search"], 
#custom_wp_form .wp-core-ui div.wpforms-container-full input[type="tel"], 
#custom_wp_form .wp-core-ui div.wpforms-container-full input[type="text"], 
#custom_wp_form .wp-core-ui div.wpforms-container-full input[type="time"], 
#custom_wp_form .wp-core-ui div.wpforms-container-full input[type="url"], 
#custom_wp_form .wp-core-ui div.wpforms-container-full input[type="week"], 
#custom_wp_form .wp-core-ui div.wpforms-container-full select, 
#custom_wp_form .wp-core-ui div.wpforms-container-full textarea {
	background-color: rgba(255,255,255,0.12);
	border: none;
	border-radius: 10px;
	color: #fff;
 }

#custom_wp_form div.wpforms-container-full button[type="submit"]:not(:hover):not(:active) {
	background-color: var(--yellow);
	color: #333;
	border-radius: 10px;
	border: none;
}

#custom_wp_form div.wpforms-container-full button[type="submit"]:hover {
	background-color: var(--red);
	color: #fff;
	border-radius: 10px;
	border: none;
}

/***** Partners Logo Marquee *****/

.logo-marquee-container {
    background: #000;
    overflow: hidden;
    padding: 80px 0;
    position: relative;
    width: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent, black 30%, black 70%, transparent);
    mask-image: linear-gradient(to right, transparent, black 30%, black 70%, transparent);
}

.marquee-track {
    display: flex;
    width: max-content;
    gap: 60px;
    padding-right: 60px; /* Must match gap */
    /* Adjust '60s' to be slower if 40s feels too fast with the extra logos */
    animation: scroll-marquee 60s linear infinite; 
    will-change: transform;
}

@keyframes scroll-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-25%); } /* Reset after the 1st of 4 sets */
}

.logo-circle {
    background: #fff;
    border-radius: 50%;
    width: 280px; 
    height: 280px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 45px;
    box-sizing: border-box;
}

.logo-circle img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .logo-circle {
        width: 150px;
        height: 150px;
        padding: 25px;
    }
    .marquee-track {
        gap: 30px;
        padding-right: 30px;
    }
}

.page-header {
	padding: 200px 0 50px;
}

.page-header h1 {
	margin: 0;
}

.page-banner {
	position: relative;
	padding: 300px 100px 60px;
	background-size: cover;
	background-position: center;
}

.page-banner.no-image {
	padding: 200px 100px 60px;
	background-image: url(images/characters-bg.jpg);
	background-size: cover;
	background-position: center;
}

.page-banner:before {
	content: "";
	display: block;
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background-color: rgba(0, 0, 0, 0.6);
}

.page-banner.no-image:before {
	content: none;
}

.page-banner .entry-header,
.page-banner .page-header {
	position: relative;
	z-index: 1;
}

.page-banner h1 {
	color: #fff;
	line-height: 1em;
}

.page-banner .entry-header > span {
	color: #fff;
}

.main-column {
	padding-right: 30px;
}

.sub-column h2 {
	font-size: clamp( 1.2rem, 1.2rem + 2.5vw, 2rem);
}

.sub-column ul,
.sub-column ol {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sub-column ul li,
.sub-column ol li {
	margin-top: 10px;
	border-bottom: 1px solid rgba(255,255,255,0.12);
}

.post-box img {
	width: 100%;
	height: 300px;
	object-fit: cover;
	object-position: center;
}

.post-text h2 a {
	color: #fff;
}

.post-text h2 a:hover {
	color: var(--red);
}

.post-date {
	display: block;
}

.entry-footer span {
	display: block;
}

.no-results .page-header,
.not-found .page-header {
	padding-top: 0;
}


/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

.custom-logo-link::before {
	content: "";
	display: block;
	position: fixed;
	top: 0; bottom: 0; left: 0;
	width: 160px;
	height: 60px;
	background: #000000;
	z-index: -1;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

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

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

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

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

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

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

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

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

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}



/*--------------------------------------------------------------
# Media Queries
--------------------------------------------------------------*/
@media only screen and (max-width : 1599px) {
}

@media only screen and (max-width : 1399px) {
}

@media only screen and (max-width : 1199px) {
	.main-column {
		padding-right: 0;
		padding-bottom: 50px;
	}
}

@media only screen and (max-width : 991px) {
	#masthead {
		padding: 15px;
	}
	.gsap-header h2,
	.rotated-header h2 {
		font-size: 10vw;
	}
	.red-section h3 {
		font-size: 8vw;
	}
	#primary-menu,
	#page-menu {
		display: none;
	}
	.mobile-navigation-button {
		display: block;
	}
	.custom-logo-link::before {
		width: 90px;
	}
	.flex-container {
		flex-direction: column;
	}
	.content-section.red-section {
		gap: 30px;
	}
	.maker-boxes-1 > div {
		padding: 20px 50px 20px 250px;
	}
	.maker-boxes-1 > div > img, .maker-boxes-2 > div > img {
		width: 150px;
	}
	.maker-boxes-1 > div > h4, .maker-boxes-2 > div > h4 {
		font-size: 32px;
	}
	.contact-section-columns {
		grid-template-columns: 1fr;
	}
}

@media only screen and (max-width : 767px) {
	#sequenceCanvas {
		display: none !important;
	}
	#sequenceVideo {
		display: block !important;
		position: static !important;
		transform: none !important;
		width: 100% !important;
		height: auto !important;
		max-width: 100% !important;
		max-height: none !important;
		object-fit: contain !important;
	}

	/* Make the sequence section stack naturally and use modest vertical padding */
	.sequence-section {
		height: auto !important;
		padding: 50px 0 0 !important;
		overflow: visible !important;
	}

	/* Hide interactive scroll/navigation buttons on mobile */
	#scrollDownBtn {
		display: none !important;
	}
	.scroll-to-top,
	#scrollToTopBtn,
	#scrollToSection1Btn {
		display: none !important;
	}
	.content-section {
		padding: 60px 30px;
	}
	.flex-container {
		gap: 30px;
	}
	.flex-container > div {
		padding: 30px;
	}
	.maker-boxes-1 > div {
		padding: 20px 30px 20px 210px;
	}
	.maker-boxes-2 > div {
		padding: 20px 30px;
	}
	.maker-boxes-1 > div > img, .maker-boxes-2 > div > img {
		left: 30px;
	}
}

@media only screen and (max-width : 575px) {
	.content-section.red-section {
		flex-direction: column;
	}
	.rotated-header {
		writing-mode: horizontal-tb;  /* vertical top-to-bottom */
	}
	.mobile-navigation {
		padding: 100px 50px 0;
	}
}

@media only screen and (max-width : 480px) {
	.maker-boxes-1 {
		gap: 30px;
	}
	.maker-boxes-1 > div {
		width: 100%;
		padding: 105px 30px 20px 30px;
		margin-top: 70px;
	}
	.maker-boxes-1 > div > img, .maker-boxes-2 > div > img {
		top: 0;
		left: 30px;
	}
}

@media only screen and (max-width : 360px) {
}