@charset "utf-8";
/* CSS Document */
/* Basic Reset & Body Styles */
body {
	margin: 0;
	font-family: 'Quicksand', sans-serif; /* Your chosen casual font */
	background-color: #f0f8ff; /* Light sky blue, very casual */
	color: #333;
	line-height: 1.6;
	scroll-behavior: smooth;
}
/* Container for content */
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}
/* Header & Navigation */
header {
	background-color: #fff;
	padding: 15px 0;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	position: sticky;
	top: 0;
	z-index: 1000;
}
nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.logo {
	/*
	font-size: 1.8em;
	font-weight: 700;
	color: #6a5acd;
	text-decoration: none;
	*/
	background:url(images/logo.png) no-repeat;
	width:171px;
	height:60px;
	text-indent:-9999999px;
}
nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
}
nav ul li {
	margin-left: 30px;
}
nav ul li a {
	text-decoration: none;
	color: #555;
	font-weight: 500;
	transition: color 0.3s ease;
}
nav ul li a:hover {
	color: #6a5acd;
}
/* Hero Section (incorporates carousel) */
.hero {
	position: relative;
	height: 500px; /* Define a fixed height for the hero carousel */
	overflow: hidden; /* Crucial for hiding parts of slides */
	background-color: #bbdefb; /* Fallback background */
	display: flex;
	align-items: center; /* Vertically center content if needed */
	justify-content: center;
}
.hero-slides {
	display: flex;
	width: 100%;
	height: 100%;
	transition: transform 0.8s ease-in-out; /* Smooth slide transition */
}
.hero-slide {
	min-width: 100%; /* Each slide takes full width */
	box-sizing: border-box; /* Include padding/border in width calculation */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0;
	position: relative;
	color: white; /* Text color over images */
	text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
.hero-slide img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover; /* Cover the whole slide area */
	z-index: -1; /* Place image behind text */
}
.hero-slide a{
	text-indent:-99999px;
	width:100%;
	height:100%;
	display:block;
}
.hero-slide h1 {
	font-size: 3.5em;
	margin-bottom: 15px;
	animation: fadeInDown 1s ease-out; /* Existing animation */
	color: white; /* Ensure heading is white */
}
.hero-slide p {
	font-size: 1.3em;
	margin-bottom: 40px;
	max-width: 700px;
	animation: fadeInUp 1s ease-out 0.3s; /* Existing animation */
	color: white; /* Ensure paragraph is white */
}
.hero-slide .cta-button {
	display: inline-block;
	background-color: #ff6347; /* Tomato Red - vibrant CTA */
	color: white;
	padding: 15px 30px;
	border-radius: 50px;
	text-decoration: none;
	font-size: 1.2em;
	font-weight: 700;
	margin: 0 10px;
	transition: background-color 0.3s ease, transform 0.2s ease;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.hero-slide .cta-button:hover {
	background-color: #e5533a;
	transform: translateY(-3px);
}
/* Carousel Navigation Buttons */
.carousel-nav-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	border: none;
	padding: 15px 10px;
	cursor: pointer;
	z-index: 10;
	font-size: 1.5em;
	border-radius: 5px;
	transition: background-color 0.3s ease;
}
.carousel-nav-btn:hover {
	background-color: rgba(0, 0, 0, 0.7);
}
.prev-slide {
	left: 10px;
}
.next-slide {
	right: 10px;
}
/* Carousel Dots */
        .carousel-dots {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
	z-index: 10;
}
.dot {
	width: 12px;
	height: 12px;
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.2s ease;
}
.dot.active {
	background-color: white;
	transform: scale(1.2);
}
/* Section Styling (remains the same as previous HTML) */
section {
	padding: 0;
	text-align: center;
}
 section:nth-of-type(odd):not(.hero) { /* Apply to odd sections except hero */
 background-color: #f7fcfd; /* Slightly different background for alternating sections */
}
section#contact{min-height: calc(100vh - 307px);}
section#about-us{min-height: calc(100vh - 307px);}
section#privacy{min-height: calc(100vh - 307px);}
section#privacy p{text-align:left;}
section h2 {
	font-size: 2.5em;
	color: #6a5acd;
	margin-bottom: 40px;
	position: relative;
	display: inline-block;
}
 section h2::after {
 content: '';
 display: block;
 width: 60px;
 height: 3px;
 background-color: #ff6347;
 margin: 10px auto 0;
 border-radius: 2px;
}
section h3 {
	font-size: 2em;
	color: #666;
	margin-bottom: 0px;
	text-align:left;
}
/* Games Portfolio Grid (remains the same as previous HTML) */
.games-portfolio-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid */
	gap: 30px;
	margin-top: 40px;
}
.game-card {
	background-color: #fff;
	border-radius: 15px;
	box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
	overflow: hidden; /* Ensures image corners are rounded */
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	text-align: left; /* Align text within card */
}
.game-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 12px 20px rgba(0, 0, 0, 0.12);
}
.game-card img {
	width: 100%;
	height: 200px; /* Fixed height for consistency */
	object-fit: cover; /* Ensures images cover the area without distortion */
	border-bottom: 1px solid #eee;
}
.game-card-content {
	padding: 25px;
}
.game-card h3 {
	font-size: 1.8em;
	color: #4a148c;
	margin-top: 0;
	margin-bottom: 10px;
}
.game-card p {
	font-size: 0.95em;
	color: #666;
	margin-bottom: 15px;
	height: 10em; /* Limit description height for consistency */
	overflow: hidden;
	text-overflow: ellipsis;
}
.game-card .platform-icons img {
	height: 24px;
	width: auto;
	margin-right: 8px;
	vertical-align: middle;
	box-shadow: none; /* Override general img shadow */
}
.game-card .learn-more-btn {
	display: inline-block;
	background-color: #ff6347;
	color: white;
	padding: 10px 20px;
	border-radius: 50px;
	text-decoration: none;
	font-weight: 500;
	transition: background-color 0.3s ease;
	margin-top: 15px;
}
.game-card .learn-more-btn:hover {
	background-color: #e5533a;
}
/* About Us Section (remains the same) */
.about-us-text {
	max-width: 800px;
	margin: 0 auto;
	font-size: 1.1em;
	color: #555;
	text-align: left;
}
/* Footer (remains the same) */
footer {
	background-color: #4a148c; /* Darker purple from hero heading */
	color: white;
	padding: 40px 0;
	text-align: center;
	font-size: 0.9em;
}
footer .social-links a {
	color: white;
	margin: 0 10px;
	font-size: 1.5em;
	text-decoration: none;
	transition: color 0.3s ease;
}
footer .social-links a:hover {
	color: #ff6347;
}
footer p {
	margin-top: 20px;
}

        /* Responsive Design (remains the same) */
        @media (max-width: 768px) {
 .hero h1 {
 font-size: 2.5em;
}
 .hero p {
 font-size: 1em;
}
 nav {
 flex-direction: column;
}
 nav ul {
 margin-top: 15px;
 flex-wrap: wrap;
 justify-content: center;
}
 nav ul li {
 margin: 5px 15px;
}
 .games-portfolio-grid {
 grid-template-columns: 1fr; /* Single column on small screens */
}
 .game-card {
 width: 90%;
 margin: 0 auto; /* Center cards */
}
 .hero {
 height: 400px; /* Adjust height for smaller screens */
}
}

        /* Keyframe Animations (remains the same) */
        @keyframes fadeInDown {
 from {
 opacity: 0;
 transform: translateY(-20px);
}
to {
	opacity: 1;
	transform: translateY(0);
}
}
 @keyframes fadeInUp {
 from {
 opacity: 0;
 transform: translateY(20px);
}
to {
	opacity: 1;
	transform: translateY(0);
}
}