/* Tablets and medium screens */
@media screen and (max-width: 1024px) {
	header {
		padding: 18px 5%;
	}

	.feature-section,
	.faq-section,
	.contact-section {
		padding: 60px 5%;
	}

	.hero{
		height: 60vh;	
	}
	
	.hero h1 {
		font-size: 32px;
	}

	.contact-card {
		padding: 30px;
		padding-top: 45px;
	}
}

/* Mobile Devices */
@media screen and (max-width: 800px) {

	.logo {
		position: relative;
		display: block;
	}

	.listicon,
	.xicon {
		position: absolute;
		font-size: 25px;
		cursor: pointer;
		display: block;
		top: 0;
		right: 0;
		margin: 15px 20px;
		color: #fff;
	}

	.xicon {
		display: none;
		font-size: 28px;
	}

	nav {
		position: fixed;
		width: 100%;
		height: 0;
		max-height: 55vh;
		background: #0e271b;
		z-index: 1000;
		top: 70px;
		left: 0;
		display: block;
		overflow: hidden;
		transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1), padding 0.4s ease;
	}

	/* Active open state */
	nav.nav-active {
		height: 50vh;
		padding: 30px 25px;
	}

	nav ul {
		display: block;
	}

	nav ul li {
		width: 100%;
		height: 50px;
		margin-bottom: 13px;
		font-size: 20px;
	}

	nav ul li a {
		color: #fff;
	}

	/* Hero */
	.hero {
		height: 90vh;
	}

	.hero .write-up {
		top: 60%;
		width: 90%;
	}

	.hero h1 {
		font-size: 26px;
	}

	.hero p {
		font-size: 13px;
	}

	.btn-container {
		flex-direction: column;
		gap: 10px;
	}

	.btn {
		width: 100%;
	}

	.feature-container,
	.feature-container.reverse {
		flex-direction: column;
		text-align: left;
		gap: 30px;
	}
	
	.feature-text h2 {
		font-size: 25px;	
	}

	.feature-image img {
		margin: 0 auto;
		width: 100%;
		min-width: 100%;
	}

	/* Gallery section */
	.series-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 50px;
	}


/*@media (max-width: 600px) {*/
	.series-grid {
		grid-template-columns: 1fr;
		gap: 60px;
		padding-left: 25px;
	}

	.card-info h2 {
		font-size: 24px;
	}

	/* FAQ Section */
	.faq-container {
		flex-direction: column;
		gap: 30px;
	}

	/* Contact Section */
	.contact-container {
		position: relative;
		display: block;
		align-content: flex-start;
		flex-direction: column;
		gap: 40px;
		margin-left: 25px;
	}

	.contact-info h2 {
		font-size: 36px;
	}

	/* Contact Form Card */
	.contact-card {
		width: 100%;
		display: none;
	}

	.form-row {
		flex-direction: column;
		gap: 0;
	}
}