/* Navbar */
@media screen and (max-width: 1010px) {
	#menu-btn {
        display: block;
    }

	body.dark #menu-btn {
		color: #ccc;
	}

    .navbar {
        position: relative;
    }

    .navbar .list {
        position: absolute;
        top: 100%;
        right: 0;
        width: 100%;
        height: 0;
        flex-direction: column;
        justify-content: center;
        background-color: #ccc;
        border-radius: 10px;
        overflow: hidden;
    }

	body.dark .navbar .list {
		background-color: #222;
	}

    #nav-open {
        height: 400px;
        max-height: 100vh;
    }
}

/* Hero Section */

@media screen and (max-width: 600px) {
	.hero .description {
		width: 100%;
	}
}

/* About Section */

@media screen and (max-width: 950px) {
	.about .image {
		width: 100%;
		margin-bottom: 40px;
	}

	.about .image img {
		width: 100%;
	}

	.about .text {
		width: 100%;
	}
}

/* Service Section */

@media screen and (max-width: 800px) {
	.service .card {
		width: 100%;
	}
}

/* Portfolio Section */

@media screen and (max-width: 750px) {
	.portfolio .card img {
		width: 38vw;
	}
}

@media screen and (max-width: 500px) {
	.portfolio .card img {
		width: 100%;
	}
}

@media screen and (max-width: 600px) {
	.counter-container {
		height: 80vh;
	}

	.counter-container .card {
		width: 50%;
	}
}

/* Resume Section */

@media screen and (max-width: 1000px) {
	.resume .section {
		width: 100%;
	}
}

/* Testimonial Section */

@media screen and (max-width: 1000px) {
	.testimonial .card {
		width: 100%;
	}

	.testimonial .card .image {
		width: 20vw;
	}
}

/* Blog Section */

@media screen and (max-width: 850px) {
	.blog .card {
		width: 100%;
		margin-bottom: 20px;
	}

	.blog .card .image img {
		width: 100%;
	}

	.blog .card .text .date {
		font-size: 14px;
	}

	.blog .card .text .heading {
		font-size: 24px;
	}

	.blog .card .text .read {
		font-size: 18px;
	}
} 

/* Contact Section */

@media screen and (max-width: 1200px) {
	.contact .text {
		margin: 0;
	}
}

@media screen and (max-width: 1050px) {
	.contact form {
		width: 100%;
		margin-bottom: 40px;
	}
}

@media screen and (max-width: 600px) {
	.contact #name,
	.contact #email {
		width: 100%;
	}
}