/*
Mukto Theme Responsive Css
*/



@media (max-width: 991px) {
	.show-md {
		display: block !important;
	}

	.humbarger-icon {
		display: inline-block !important;
		left: 24px;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		font-size: 24px;
		line-height: 0;
		cursor: pointer;
		color: var(--primary);
	}

	.logo-col {
		position: relative;
	}

	.logo {
		text-align: right;
		padding: 14px 10px;
		box-sizing: border-box;
	}

	.hide-md {
		display: none !important;
	}
}

@media (max-width: 1072px) {
	.intro-content {
		padding: 40px;
	}
}

@media (max-width: 1250px) {
	.intro-content {
		padding: 40px;
	}

	.section-header .container {
		max-width: 1180px;
		width: 90%;
	}

	.ImagesGrid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}

	.hero_images {
		display: none;

	}


}





@media (max-width: 842px) {
	.section-header {
		padding: 40px;
	}

	.section-header .container {
		max-width: 1180px;
		width: 95%;
	}

	.inner-gradient {
		padding: 30px;
	}

	.port-gellary {
		margin: 100px 20px;
	}

	.port-area {
		height: 470px;
	}

	.heading-button {
		width: 60%;
	}

	.ImagesGrid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}



}



@media (max-width: 700px) {

	.section-header {
		padding: 40px;
	}

	.section-header .container {
		width: 100%;
	}

	.section-header {
		padding: 80px 0px;
		background-color: #ffffff;
	}

	.section-container {
		background: #ffffff;
		border-radius: none;
		overflow: hidden;
	}

	.main-header {
		position: sticky;
		padding: 10px;
		padding: 0px 5px;
		background: #fff;
		border-bottom: 1px solid #dfdfdf;
	}

	.header-contact li {
		margin: auto;
	}

	.grid-area {
		width: 60%;
		margin: 30px auto;
	}

	.inner-gradient {
		padding: 30px;
	}

	.ImagesGrid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}

	.section-container {
		box-shadow: none;
	}

	.bottom_pop {
		padding: 14px 10px;
		margin: 0 auto;
		display: flex;
		width: 90%;
		text-align: center;
		background: #ffffff;
	}

	.profile-images,
	.profile-name {
		display: none;
	}

	.profile_info {
		display: block;
	}

	.availablework {
		margin: 0 auto;
		color: #4daa57;
	}

	.port-gellary .button-frame {
		margin: 0px auto;
		padding: 8px 24px;
		cursor: pointer;
		font-size: 12px;
	}

	.mobileHide {
		display: none !important;
	}

	.contact-area {
		width: 100%;
		background: #fff;
		margin: 100px auto;
		padding: 40px 20px;
		border-radius: 14px;
	}

	.contact {
		background: #fff;
		padding: 130px 0 5px;
	}

	.skill-block {
		width: 100%;
		padding: 50px 30px;
	}


	.port-gellary .button-filled {
		padding: 8px 30px;
		margin: 30px auto;
		text-align: center;
	}

	.port-gellary .button-filled {
		margin: auto;
		margin-top: auto;
		margin-top: 66px;
		border: none;
	}

	.Project_content {
		width: 94%;
	}

	.modal_p_desc {
		padding: 30px 10px;
	}

	.skill-info h5 {
		margin-bottom: 12px;
		font-size: 22px;
		padding-top: 16px;
	}

	.skill-info p {
		font-size: 18px;
		text-align: center;
		padding: 14px 30px 50px 30px;
	}

	.subtitle {
		width: fit-content;
		margin: 0 18px;
		text-align: center;
	}

}

@media (max-width: 767px) {
	.overly-title {
		display: block;
	}

	.project-overlay {
		display: block;
	}

	.h-one-grid-shadow {
		padding: 18px;
		height: 200px;
	}

	.h-one-grid-area {
		margin: 0px 10px 24px 10px;
	}

	.h-one-list-area {
		margin: 0px 10px 24px 10px;

	}

	.h-one-grid-area .post-info h1 {
		font-size: 20px;
	}

	.h-one-grid-area .post-info {
		bottom: 9px;
	}

	.grid-area {
		width: 80%;
		margin: 30px auto;
	}

	.heading-button {
		width: 80%;
	}

	.main-header {
		padding: 0px 5px;
	}

	.modal_bottom .project-title {
		font-size: 32px;
		line-height: 1.2;
	}

	.ImagesGrid {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
	}

	.title {
		font-size: 42px;
		font-weight: 700;
	}

	.what-i-do {
		background: #FFF;
		margin-bottom: 60px;
		cursor: pointer;
		margin: 20px;
	}

	.pViewArea {
		padding: 10px;
		background: white;
		margin: 0 auto;
	}

	.page-header-port {
		padding: 75px 20px;
		background-size: cover;
		background-position: center;
	}

	.project-title {
		font-size: 16px;
		font-weight: bold;
		color: #fff;
		padding-top: 18px;
		text-transform: capitalize;
		line-height: 24px;
		width: 80%;
	}

	.m-divider {
		height: 3px;
		width: 80px;
		background: var(--primary);
		margin: 11px 0;
		display: block;
	}



}


@media (max-width: 500px) {

	.footer-bottom {
		text-align: center;
	}

	body.admin-bar .scrl {
		top: 0;
	}

	.widgets-area {
		padding: 50px 20px;
		margin-top: 40px;
	}

	.comment-form-author,
	.comment-form-email,
	.comment-form-url {
		width: 100%;
		float: left;
	}

	#comments .comment p {
		padding-left: 0px;
		margin-bottom: 0 !important;
	}

	.grid-area {
		width: 98%;
		margin: 30px auto;
	}

	.test-block {
		width: 90%;
		margin: auto;
		padding: 40px 20px;
	}


	.inner-gradient {
		padding: 25px;
	}

	.port-area {
		height: 420px;
	}

	.port-gellary {
		margin: 100px 10px;
	}

	.heading-button {
		width: 100%;
	}

	.heading-name {
		font-size: 18px;
	}

	.heading-subtitle {
		font-size: 16px;
	}

	.section-header {
		padding: 0 0px;
		height: 80vh;
		background-position: left;
	}

	.header-contact {
		display: none;
	}

	.heading-skill-subtitle {
		font-size: 32px;
	}

	.heading-skill-title {
		font-size: 32px;
	}

	.bottom_pop {
		display: none;
	}

	.heading-bt-bg,
	.heading-bt-br {
		padding: 10px 20px;
		margin-right: 14px;
		font-size: 14px;
	}

	.paynow {
		width: 100%;
		margin: auto;
		padding: 18px;
		background: #fff;
	}


}

@media (max-width: 410px) {
	.intro-content {
		padding: 18px;
	}

	.grid-area {
		width: 98%;
		margin: 30px auto;
	}

}

@media (max-width: 810px) {
	.section-header {
		height: 75vh;
	}

}