/* Global Styles */
body {
	margin: 0;
	padding: 0;
	font-family: Forum, serif;
	overflow-x: hidden;
	overscroll-behavior: none;
	position: relative;
	background-color: black;
	opacity: 1;
	transition: opacity 300ms ease-in-out;
}

body.fade-in {
    animation: fadeIn 300ms ease-in-out forwards;
}

body.fade-out {
    opacity: 0;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.header {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 16px;
	height: 60px;
	gap: 96px;
	background-color: black;
	box-sizing: border-box;
	position: fixed;
	width: 100%;
	z-index: 100;
}

.header a {
	color: #9a9fa5;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 18px;
}

.header a.active {
	color: #dfbe90;
}

.header a:hover {
	color: #e6bb73;
}

.header .social-media-container a img{
	width: 36px;
	height: 36px;
}

.header .close-menu-button {
	display: none;
}

/* Dropdown container styling */
.dropdown {
	position: relative;
}
  
/* Hidden by default */
.dropdown-content {
	display: none;
	flex-direction: column;
	position: absolute;
	top: 100%;
	left: 0;
	background-color: black;
	white-space: nowrap;
	padding: 8px;
	box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
	z-index: 1;
	gap: 0.6rem;
}
  
/* Style for submenu items (horizontal layout) */
.dropdown-content a {
	text-decoration: none;
	color: #9a9fa5;
}

/* Optional hover effects */
.dropdown-content a:hover {
	color: white;
}

/* Main content */
.wrapper {
	margin: auto 0;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

.wrapper .section-wrapper {
	padding: 1rem 0;
	box-sizing: border-box;
	color: white;
}

.wrapper .section-wrapper.main {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	gap: 12rem;
}

.wrapper .section-wrapper.main .background {
	width: 100%;
	position: relative;
}

.wrapper .section-wrapper.main .top-part {
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	gap: 3.5rem;
	top: 9rem;
	left: 15rem;
}

.wrapper .section-wrapper.main .top-part .logo {
	width: 50rem;
	height: auto;
}

.wrapper .section-wrapper .title {
	text-transform: uppercase;
	font-size: 1.8rem;
	color: #bfbfbf;
	position: relative;
	letter-spacing: 0.08cm;
	margin-bottom: 3rem;
}

.wrapper .section-wrapper .title .line {
	position: absolute;
	bottom: -0.8rem;
	left: -4rem;
}

.wrapper .section-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
	margin: 0 auto;
	color: #bfbfbf;
}

.wrapper .section-wrapper.about-game .game-description {
	text-align: center;
	font-size: 1.3rem;
	width: 50rem;
	letter-spacing: 0.01cm;
}

.wrapper .section-wrapper.about-game .trailer-button {
	width: 17.9rem;
	height: 2.875rem;
	background-color: #404040;
	border-radius: 24px;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	text-decoration: none;
	color: #bfbfbf;
	text-transform: uppercase;
	font-size: 1.25rem;
	letter-spacing: 0.05cm;
	margin-top: 2.5rem;
}

.wrapper .section-wrapper.about-game .trailer-button:hover {
	background-color: #689ade;
	color: white;
}

.wrapper .section-wrapper.about-game .extra-info {
	margin-top: 3rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 90%;
}

.wrapper .section-wrapper.about-game .extra-info .extra-info-item {
	display: flex;
}

.wrapper .section-wrapper.about-game .extra-info .extra-info-item:nth-child(odd) {
	align-self: flex-start;
	text-align: left;
}

.wrapper .section-wrapper.about-game .extra-info .extra-info-item:nth-child(even) {
	align-self: flex-end;
	text-align: right;
}

.wrapper .section-wrapper.about-game .extra-info .extra-info-item .text {
	width: 30rem;
	margin-top: 5rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.wrapper .section-wrapper.about-game .extra-info .extra-info-item .title {
	color: #907954;
	font-size: 1.5rem;
	text-transform: none;
	letter-spacing: normal;
	margin: 0;
}

.wrapper .section-wrapper.about-game .extra-info .extra-info-item .description {
	width: 100%;
	color: #837F7C;
	font-size: 1.2rem;
}

/* Features */
.wrapper .section-wrapper.features .title .line {
	bottom: -0.9rem;
    left: -5.6rem;
}

.wrapper .section-wrapper.features .features-list {
	width: 65%;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.wrapper .section-wrapper.features .features-list .feature-entry {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 1rem;
}

.wrapper .section-wrapper.features .features-list .feature-entry .text {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.wrapper .section-wrapper.features .features-list .feature-entry .title {
	margin-bottom: 0;
	letter-spacing: 0.05em;
	color: #907954;
	font-size: 1.5rem;
	text-transform: none;
}

.wrapper .section-wrapper.features .features-list .feature-entry .description {
	color: #837F7C;
	font-size: 1.1rem;
}

.wrapper .section-wrapper.features .quote {
	margin: 4rem 0;
	font-size: 1.56rem;
	color: #907954;
}

/* Steam button */
.wrapper .section-wrapper .steam-button {
	width: 21rem;
	height: 8rem;
	cursor: pointer;
	background-color: #242424;
	border-radius: 24px;
	display: flex;
	box-sizing: border-box;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	box-shadow: 1px 4px 8px rgba(0, 0, 0, 0.4);
}

.wrapper .section-wrapper .steam-button img {
	height: 70%;
	transition: transform 0.3s ease-in-out;
}

.wrapper .section-wrapper .steam-button span {
	position: absolute;
    text-decoration: none;
    color: #bdcf29;
    text-transform: uppercase;
    top: 1.25rem;
    font-size: 1.25rem;
    left: 9rem;
    letter-spacing: 0.1cm;
}

.wrapper .section-wrapper .steam-button img:hover {
	transform: scale(1.05);
}

/* Gallery */
.wrapper .section-wrapper.images {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	max-width: 65rem;
	margin: 0 auto;
	box-sizing: border-box;
}

.wrapper .section-wrapper.images .title .line {
	bottom: -0.9rem;
	left: -5.8rem;
}

.wrapper .section-wrapper.images .gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(4, 1fr));
	grid-auto-rows: 220px;
	gap: 10px;
	width: 100%;
}

.wrapper .section-wrapper.images .gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: filter 0.3s ease-in-out;
	filter: grayscale(1);
}

.wrapper .section-wrapper.images .gallery img:hover {
	filter: grayscale(0);
}

.wrapper .section-wrapper.images .gallery img:nth-child(1) {
	grid-column: 1 / span 2;
	grid-row: 1 / span 2;
}
.wrapper .section-wrapper.images .gallery img:nth-child(2) {
	grid-column: 3 / span 2;
	grid-row: 1;
}
.wrapper .section-wrapper.images .gallery img:nth-child(3) {
	grid-column: 3;
	grid-row: 2;
}
.wrapper .section-wrapper.images .gallery img:nth-child(4) {
	grid-column: 4;
	grid-row: 2;
}
.wrapper .section-wrapper.images .gallery img:nth-child(5) {
	grid-column: 1 / span 2;
	grid-row: 3;
}

/* Pattern for second row (items 6-9) */
.wrapper .section-wrapper.images .gallery img:nth-child(6) {
	grid-column: 3 / span 2;
	grid-row: 3 / span 2;
}
.wrapper .section-wrapper.images .gallery img:nth-child(7) {
	grid-column: 1;
	grid-row: 4;
}
.wrapper .section-wrapper.images .gallery img:nth-child(8) {
	grid-column: 2;
	grid-row: 4;
}
.wrapper .section-wrapper.images .gallery img:nth-child(9) {
	grid-column: 1 / span 2;
	grid-row: 5;
}

/* Pattern for third row (items 10-13) */
.wrapper .section-wrapper.images .gallery img:nth-child(10) {
	grid-column: 3 / span 2;
	grid-row: 5 / span 2;
}
.wrapper .section-wrapper.images .gallery img:nth-child(11) {
	grid-column: 1;
	grid-row: 6;
}
.wrapper .section-wrapper.images .gallery img:nth-child(12) {
	grid-column: 2;
	grid-row: 6;
}
.wrapper .section-wrapper.images .gallery img:nth-child(13) {
	grid-column: 1 / span 2;
	grid-row: 7;
}

/* Pattern for fourth row (items 14-17) */
.wrapper .section-wrapper.images .gallery img:nth-child(14) {
	grid-column: 3 / span 2;
	grid-row: 7 / span 2;
}
.wrapper .section-wrapper.images .gallery img:nth-child(15) {
	grid-column: 1;
	grid-row: 8;
}
.wrapper .section-wrapper.images .gallery img:nth-child(16) {
	grid-column: 2;
	grid-row: 8;
}
.wrapper .section-wrapper.images .gallery img:nth-child(17) {
	grid-column: 1 / span 4;
	grid-row: 9;
}

/* Modal Gallery */
.modal {
	display: none;
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.9);
	overflow: hidden;
}

.modal-content {
	margin: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
}
  
.carousel {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	position: relative;
}
  
#modalImage {
	max-height: 100%;
	max-width: 90%;
	object-fit: contain;
}

.arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	color: white;
	font-size: 40px;
	font-weight: bold;
	cursor: pointer;
	z-index: 1100;
	background-color: rgba(0, 0, 0, 0.5);
	height: 60px;
	width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: background-color 0.3s;
}
  
.arrow:hover {
	background-color: rgba(0, 0, 0, 0.8);
}

.prev {
	left: 20px;
}
  
.next {
	right: 20px;
}
  
.close {
	position: absolute;
	top: 15px;
	right: 35px;
	color: #f1f1f1;
	font-size: 40px;
	font-weight: bold;
	cursor: pointer;
	z-index: 1100;
}
  
/* Make gallery images clickable */
.gallery img {
	cursor: pointer;
	transition: opacity 0.3s;
}
  
.gallery img:hover {
	opacity: 0.8;
}

/* System */
.wrapper .section-wrapper.system {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 2rem;
}

.wrapper .section-wrapper.system .title {
	margin-top: 4rem;
	margin-bottom: 0;
}

.wrapper .section-wrapper.system .title .line {
	bottom: -1rem;
    left: 0.6rem;
}

.wrapper .section-wrapper .system-requirements-wrapper {
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10rem;
}

.wrapper .section-wrapper .system-requirements-wrapper > * {
	width: 21.8rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.wrapper .section-wrapper .system-requirements-wrapper > * .title,
.wrapper .section-wrapper .coverage .title {
	text-align: center;
	color: #907954;
	font-size: 1.3rem;
	text-transform: none;
	letter-spacing: normal;
}

.wrapper .section-wrapper .system-requirements-wrapper > * .container {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.wrapper .section-wrapper .system-requirements-wrapper > * .requirement,
.wrapper .section-wrapper .coverage .container {
	display: flex;
	gap: 0.5rem;
	font-size: 1rem;
	font-family: Arial, sans-serif;
}

.wrapper .section-wrapper .system-requirements-wrapper > * .requirement .name,
.wrapper .section-wrapper .coverage .note-title,
.wrapper .section-wrapper .coverage .container ul li {
	color: #907954;
}

.wrapper .section-wrapper .system-requirements-wrapper > * .requirement .value, 
.wrapper .section-wrapper .coverage .container {
	color: #bfbfbf;
}

.wrapper .section-wrapper .coverage {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.wrapper .section-wrapper .coverage .title {
	font-size: 1.875rem;
}

.wrapper .section-wrapper .coverage .container {
	flex-direction: column;
}

.wrapper .section-wrapper .coverage .container ul {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	list-style-type: none;
	padding: 0;
	margin: 0;
}

/* Footer */
.footer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 1rem;
	height: 4rem;
	box-sizing: border-box;
	font-size: 1.15rem;
	gap: 0.5rem;
	color: #e0d5c3;
}

/* Devlog Page */
.wrapper .section-wrapper.devlog {
	margin-top: 8rem;
	margin-bottom: 4rem;
	width: 65%;
	min-width: 55rem;
}

.wrapper .section-wrapper.devlog .title {
	letter-spacing: 0.15cm;
}

.wrapper .section-wrapper.devlog .title .line {
	left: -5.8rem;
}

.wrapper .section-wrapper.devlog .list {
	display: flex;
	flex-direction: column;
	gap: 5rem;
	width: 100%;
	margin-top: 4rem;
}

.wrapper .section-wrapper.devlog .list .list-item {
	display: flex;
	gap: 2.5rem;
	width: 100%;
}

.wrapper .section-wrapper.devlog .list .list-item iframe {
	aspect-ratio: 16 / 9;
}

.wrapper .section-wrapper.devlog .list .list-item iframe,
.wrapper .section-wrapper.devlog .list .list-item img,
.wrapper .section-wrapper.devlog .list .list-item .text-container,
.wrapper .section-wrapper.devlog .list .list-item .devlog-link{
	width: 50%;
	flex: 1;
}

.wrapper .section-wrapper.devlog .list .list-item .text-container {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.wrapper .section-wrapper.devlog .list .list-item .text-container .label {
	color: #907954;
	font-size: 1.8rem;
	margin: 0;
}

.wrapper .section-wrapper.devlog .list .list-item .text-container .description {
	font-family: Arial, sans-serif;
	font-size: 1rem;
	color: #837F7C;
}

.wrapper .section-wrapper.devlog .list .list-item .devlog-link {
	text-decoration: none;
	color: #907954;
	font-size: 1.8rem;
	display: flex;
	align-items: center;
}

/* Devlog 1 */
.wrapper .section-wrapper.devlog.devlog1 .title .line {
	left: 12.2rem;
}

.wrapper .section-wrapper.devlog .content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
}

.wrapper .section-wrapper.devlog .content .text {
	font-family: Arial, sans-serif;
	font-size: 1.125rem;
	line-height: 1.8;
}

.wrapper .section-wrapper.devlog .content .text a {
	color: #bfbfbf;
}

/* Devlog 2 */
.wrapper .section-wrapper.devlog.devlog2 .title .line {
	left: 7.2rem;
}

/* Devlog 3 */
.wrapper .section-wrapper.devlog.devlog3 .title {
	text-align: center;
}

.wrapper .section-wrapper.devlog.devlog3 .title .line {
	left: 13.2rem;
}

.wrapper .section-wrapper.devlog.devlog3 .content .special {
	color: #907954;
}

/* Roadmap */
.wrapper .section-wrapper.roadmap .title {
	margin-top: 5rem;
}

.wrapper .section-wrapper.roadmap .title .line {
	left: -5.9rem;
}

#roadmap-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	box-sizing: border-box;
	justify-content: center;
    align-items: center;
}

.roadmap-card {
	width: 17rem;
	height: 10rem;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	color: #c5b28d;
	text-align: center;
	box-sizing: border-box;
	position: relative;
}

.roadmap-card:hover {
	transform: scale(1.05);
	transition: transform 0.3s ease-in-out;
}

.roadmap-card img {
	width: 100%;
	display: block;
}

.roadmap-card .name {
	position: absolute;
	text-transform: uppercase;
	height: 1.53rem;
	width: 100%;
	bottom: 0;
	left: 0;
	font-size: 1.05rem;
	background-color: #1c1b1a;
	display: flex;
	justify-content: center;
	align-items: center;
}

.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.9);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999;
	box-sizing: border-box;
}

.modal.hidden {
	display: none;
}

.modal-container {
	background: #222;
	border-radius: 10px;
	width: 80%;
	max-width: 56.5rem;
	color: #fff;
	position: relative;
	box-sizing: border-box;
}

.modal-container .description {
	box-sizing: border-box;
	padding: 2rem 3rem;
	font-size: 1rem;
	line-height: 1.5;
	color: #bfbfbf
}

.roadmap-card .card-status {
    position: absolute;
    top: 0.313rem;
    left: 0.313rem;
    width: 2.5rem;
    height: auto;
    z-index: 1;
}

.close {
	position: absolute;
	top: 0.625rem;
	right: 1.25rem;
	font-size: 3rem;
	cursor: pointer;
	color: #fff;
}

.carousel-container {
	position: relative;
	text-align: center;
}

.page-indicator {
    position: absolute;
	width: 100%;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 0.313rem 0.625rem;
    border-radius: 4px;
    font-size: 0.875rem;
	box-sizing: border-box;
	text-align: right;
}

.carousel-container img {
	width: 100%;
	max-height: 25rem;
	border-radius: 5px;
	box-sizing: border-box;
	object-fit: cover;
    object-position: top;
}

.carousel-controls {
	position: absolute;
	top: 50%;
	width: 100%;
	display: flex;
	justify-content: space-between;
	transform: translateY(-50%);
	box-sizing: border-box;
}

.carousel-controls button {
	background: none;
	border: none;
	color: #fff;
	font-size: 2rem;
	cursor: pointer;
	padding: 0.625rem;
	box-sizing: border-box;
	text-shadow: 0px 0px 3px #000, 
                 0px 0px 5px #000, 
                 0px 0px 7px #000;
	opacity: 0.7;
	transition: opacity 0.3s;
}

.carousel-controls button:hover {
	opacity: 1;
}

/* Support */
.wrapper .section-wrapper.support {
	height: 100vh;
	justify-content: flex-start;
}

.wrapper .section-wrapper.support .title {
	margin-top: 5rem;
}

.wrapper .section-wrapper.support .title .line {
	left: -6rem;
}

.wrapper .section-wrapper.support .text {
	font-size: 1.875rem;
	color: #907954;
}

/* FAQ */
.wrapper .section-wrapper.faq .title {
	margin-top: 5rem;
}

.wrapper .section-wrapper.faq .title .line {
	left: 4.2rem;
}

.wrapper .section-wrapper.faq .faq-container {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	width: 85%;
	margin-top: 4rem;
	font-family: 'Arial', sans-serif;
}

.wrapper .section-wrapper.faq .faq-container .faq-item {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-size: 1.125rem;
}

.wrapper .section-wrapper.faq .faq-container .faq-item .question {
	color: #907954;
}

.wrapper .section-wrapper.faq .faq-container .faq-item .answer {
	color: white;
	line-height: 1.5;
}

.wrapper .section-wrapper.faq .faq-container .faq-item .link {
	color: white;
}

/* Partnership */
.wrapper .section-wrapper.apply .bg {
	width: 100%;
	position: relative;
	margin-top: 2rem;
}

.wrapper .section-wrapper.apply .content {
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	gap: 1.5rem;
	top: 15rem;
	left: 50%;
	transform: translateX(-50%);
}

.wrapper .section-wrapper.apply .content .title {
	letter-spacing: 0.25em;
	font-size: 3.125rem;
	color: black;
	margin-bottom: 0;
}

.wrapper .section-wrapper.apply .content .title .line {
	left: -0.8rem;
}

.wrapper .section-wrapper .special-button {
	height: 4rem;
	position: relative;
}

.wrapper .section-wrapper .special-button .outline {
	height: 100%;
}

.wrapper .section-wrapper .special-button .text {
	position: absolute;
	line-height: 1.85em;
    letter-spacing: 0.2em;
    text-shadow: 2.83px 2.83px 10px #3E3E3E;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 1.25rem;
	text-align: center;
	color: black;
    transform: translate(-50%, -50%);
	top: 50%;
    left: 50%;
}

.wrapper .section-wrapper .special-button .text:hover {
	color: white;
	text-shadow: 
    0 10px 8px rgba(#bba48a, 0.3),
    0 10px 4px rgba(#bba48a, 0.2);  
}

.wrapper .section-wrapper.partners {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 2rem;
}

.wrapper .section-wrapper.partners .title .line {
	left: -3.4rem;
}

.wrapper .section-wrapper.partners .code-info {
	font-size: 1.4rem;
	color: #907954;
}

.wrapper .section-wrapper.partners .special-button .text,
.wrapper .section-wrapper.partnership-info .special-button .text {
	color: #bfbfbf;
	width: 100%;
}

.wrapper .section-wrapper.partners .special-button .text:hover,
.wrapper .section-wrapper.partnership-info .special-button .text:hover {
	color: white;
}

.wrapper .section-wrapper.partners .partners-list {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	width: 90%;
	justify-content: center;
}

.wrapper .section-wrapper.partners .partners-list .partner-card {
	width: 21rem;
	height: 5.875rem;
	border: 3px solid #2b251a;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding: 5px;
	gap: 1rem;
}

.wrapper .section-wrapper.partners .partners-list .partner-card .partner-image {
	border-radius: 50%;
	height: 98%;
}

.wrapper .section-wrapper.partners .partners-list .partner-card .text-container {
	flex: 1;
}

.wrapper .section-wrapper.partners .partners-list .partner-card .text-container .partner-name {
	font-size: 1.5rem;
	color: rgb(144, 121, 84);
}

.wrapper .section-wrapper.partners .partners-list .partner-card .partner-links {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	gap: 0.5rem;
	justify-self: flex-end;
	padding-right: 0.25rem;
}

.wrapper .section-wrapper.partners .partners-list .partner-card .partner-links a {
	height: 2.3rem;
}

.wrapper .section-wrapper.partners .partners-list .partner-card .partner-links a img {
	height: 100%;
}

.wrapper .section-wrapper.partners .partners-list .partner-card .partner-links .youtube-link {
	height: 1.7rem;
}

.wrapper .section-wrapper.partnership-info {
	width: 80%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 4rem;
}

.wrapper .section-wrapper.partnership-info > * {
	display: flex;
	gap: 1rem;
	width: 100%;
	align-items: flex-start;
	box-sizing: border-box;
}

.wrapper .section-wrapper.partnership-info > * .side-image {
	width: 33rem;
}

.wrapper .section-wrapper.partnership-info > * .content .title {
	font-size: 1.3rem;
	color: #907954;
	margin-bottom: 1.5rem;
	justify-self: center;
}

.wrapper .section-wrapper.partnership-info > * .content .title .line {
	left: -0.5rem;
}

.wrapper .section-wrapper.partnership-info .benefits .title .line {
	left: -2.2rem;
}

.wrapper .section-wrapper.partnership-info .apply-now {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 70%;
}

@media (min-width: 768px) and (max-width: 991px) {
    /* Main section adjustments */
    .wrapper .section-wrapper.main .top-part {
        left: 50%;
        transform: translateX(-50%);
        top: 6rem;
    }
    
    .wrapper .section-wrapper.main .top-part .logo {
        width: 90%;
        max-width: 30rem;
    }
    
    /* About game section */
    .wrapper .section-wrapper.about-game .game-description {
        width: 90%;
        font-size: 1.1rem;
    }
    
    .wrapper .section-wrapper.about-game .extra-info {
        width: 95%;
    }
    
    .wrapper .section-wrapper.about-game .extra-info .extra-info-item {
        flex-direction: column;
        align-items: center;
    }
    
    .wrapper .section-wrapper.about-game .extra-info .extra-info-item:nth-child(even) {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .wrapper .section-wrapper.about-game .extra-info .extra-info-item .text {
        width: 90%;
        margin-top: 1rem;
        text-align: center;
    }
    
    .wrapper .section-wrapper.about-game .extra-info .extra-info-item img {
        width: 90%;
    }
    
    /* Features section */
    .wrapper .section-wrapper.features .features-list {
        width: 90%;
    }
    
    /* System requirements */
    .wrapper .section-wrapper .system-requirements-wrapper {
        flex-direction: column;
        gap: 2rem;
    }
    
    /* Gallery */
    .wrapper .section-wrapper.images .gallery {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 11.25rem;
    }
    
    /* Reset the complex grid layout for tablets */
    .wrapper .section-wrapper.images .gallery img {
        grid-column: auto !important;
        grid-row: auto !important;
    }
}

/* Mobile Styles */
@media (max-width: 767px) {
    .header {
        padding: 1rem;
        align-items: center;
        height: auto;
        gap: 0.75rem;
		flex-wrap: wrap;
    }
    
    .header a, 
    .header .dropdown > a {
        font-size: 1.1rem;
    }

	.wrapper .section-wrapper.main .background {
		margin-top: 5rem;
	}
    
    .dropdown-content {
        display: none;
        padding: 0.5rem;
        width: fit-content;
		align-items: flex-start;
        flex-direction: column;
		box-sizing: border-box;
    }
    
    .dropdown-content a {
        padding: 0.3rem 0;
        font-size: 0.9rem;
    }
    
    .dropdown:hover .dropdown-content,
    .dropdown:focus-within .dropdown-content,
    .dropdown.active .dropdown-content {
        display: flex;
    }
    
    .social-media-container {
        width: 100%;
        justify-content: center;
        gap: 1rem;
		justify-self: center;
		align-self: center;
		display: flex;
    }
    
    .social-media-container a img {
        width: 1.5rem;
        height: 1.5rem;
    }
    
    /* Remove dropdown visual indicators that don't make sense in stacked layout */
    .dropdown::after {
        display: none;
    }
    
    /* Add bottom border for visual separation between items */
    .header > a,
    .header > .dropdown {
        text-align: center;
    }
    
    .header > a:last-child,
    .header > .dropdown:last-child {
        border-bottom: none;
    }
    
    /* Main section adjustments */
    .wrapper .section-wrapper.main .top-part {
        left: 50%;
        transform: translateX(-50%);
        top: 9rem;
        width: 100%;
        padding: 0 1rem;
        box-sizing: border-box;
    }
    
    .wrapper .section-wrapper.main .top-part .logo {
        width: 100%;
        max-width: 20rem;
    }

	.wrapper .section-wrapper {
		margin-top: 3rem;
	}
    
    .wrapper .section-wrapper .steam-button {
        height: 6rem;
    }
    
    .wrapper .section-wrapper .steam-button span {
        font-size: 1rem;
        top: 1rem;
    }
    
    /* About game section */
    .wrapper .section-wrapper.about-game .game-description {
        width: 90%;
        font-size: 1rem;
    }
    
    .wrapper .section-wrapper.about-game .trailer-button {
        width: 80%;
        font-size: 1rem;
    }
    
    .wrapper .section-wrapper.about-game .extra-info {
        width: 95%;
    }
    
    .wrapper .section-wrapper.about-game .extra-info .extra-info-item {
        flex-direction: column;
        align-items: center;
    }
    
    .wrapper .section-wrapper.about-game .extra-info .extra-info-item:nth-child(even) {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .wrapper .section-wrapper.about-game .extra-info .extra-info-item .text {
        width: 90%;
        margin-top: 1rem;
        text-align: center;
    }
    
    .wrapper .section-wrapper.about-game .extra-info .extra-info-item img {
        width: 90%;
    }
    
    .wrapper .section-wrapper.about-game .extra-info .extra-info-item .title {
        font-size: 1.2rem;
    }
    
    .wrapper .section-wrapper.about-game .extra-info .extra-info-item .description {
        font-size: 1rem;
    }
    
    /* Features section */
    .wrapper .section-wrapper.features .features-list {
        width: 90%;
    }
    
    .wrapper .section-wrapper.features .features-list .feature-entry {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .wrapper .section-wrapper.features .features-list .feature-entry .title {
        font-size: 1.2rem;
    }
    
    .wrapper .section-wrapper.features .quote {
        font-size: 1.2rem;
        text-align: center;
        padding: 0 1rem;
    }
    
    /* Gallery */
    .wrapper .section-wrapper.images {
        padding: 0 1rem;
        width: 100%;
    }
    
    .wrapper .section-wrapper.images .gallery {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 7.5rem;
        gap: 0.3125rem;
    }
    
    /* Reset the complex grid layout for mobile */
    .wrapper .section-wrapper.images .gallery img {
        grid-column: auto !important;
        grid-row: auto !important;
    }
    
    /* System requirements */
    .wrapper .section-wrapper .system-requirements-wrapper {
        flex-direction: column;
        gap: 2rem;
        width: 90%;
    }
    
    .wrapper .section-wrapper .system-requirements-wrapper > * {
        width: 100%;
    }
    
    .wrapper .section-wrapper .coverage {
        width: 90%;
    }
    
    /* Modal adjustments for mobile */
    .modal-content {
        width: 100%;
    }
    
    #modalImage {
        max-width: 95%;
    }
    
    .arrow {
        width: 1.875rem;
        height: 2.5rem;
        font-size: 1.5625rem;
    }
    
    .prev {
        left: 0.3125rem;
    }
    
    .next {
        right: 0.3125rem;
    }
    
    .close {
        top: 0.625rem;
        right: 0.9375rem;
        font-size: 1.875rem;
    }
    
    /* Fix section titles */
    .wrapper .section-wrapper .title {
        font-size: 1.5rem;
        text-align: center;
        margin-left: 0;
    }
    
    .wrapper .section-wrapper .title .line {
        display: none; /* Hide decorative lines on mobile */
    }
    
    /* Footer adjustments */
    .footer {
        font-size: 0.9rem;
        text-align: center;
    }

	.wrapper .section-wrapper.devlog {
		min-width: unset;
		width: 90%;
	}

	.wrapper .section-wrapper.devlog .list .list-item {
		flex-direction: column;
		gap: 1rem;
		justify-content: center;
		align-items: center;
	}

	.wrapper .section-wrapper.devlog .list .list-item iframe,
	.wrapper .section-wrapper.devlog .list .list-item img,
	.wrapper .section-wrapper.devlog .list .list-item .text-container,
	.wrapper .section-wrapper.devlog .list .list-item .devlog-link {
		width: 90%;
	}

	.wrapper .section-wrapper.devlog .content {
		width: 100%
	}

	.wrapper .section-wrapper.devlog .content img {
		width: 90%;
	}

	.wrapper .section-wrapper .special-button .text {
		font-size: 1.5rem;
		line-height: 1;
		width: 95%;
		font-weight: bold;
	}

	.wrapper .section-wrapper.partners .code-info {
		text-align: center;
		padding: 0 0.5rem;
	}

	.wrapper .section-wrapper.partnership-info {
		width: 90%;
	}

	.wrapper .section-wrapper.partnership-info > * {
		flex-direction: column;
		align-items: center;
	}

	.wrapper .section-wrapper.partnership-info > * .side-image {
		width: 90%;
	}
}