/*
|----------------------------------------------------------------------------
	AboutMe - Personal Portfolio Resume Template (Bootstrap 5) Main CSS
	Author: MGScoder
	Author URL: https://themeforest.net/user/mgscoder
	primary color: rgb(145 101 19) rgba(4, 185, 98, 0.8)
|----------------------------------------------------------------------------
*/
@media screen and (max-width: 1024px) {
	.timeline>li>.timeline-panel {
		width: 45%;
	}
}

@media screen and (max-width: 991px) {
	nav.navbar.mgsb4navbar .navbar-brand {
		padding: 0;
	}

	#header nav.navbar.mgsb4navbar .navbar-collapse {
		background-color: #f2f2f2;
		width: 200px;
		padding: .5rem 1rem;
		margin-top: 0;
	}

	nav.navbar.mgsb4navbar .navbar-nav a.nav-link,
	.mgsfixed-nav nav.navbar.mgsb4navbar .navbar-nav a.nav-link {
		padding: .5rem 1rem;
		color: #000;
	}

	nav.navbar.mgsb4navbar .navbar-nav a.nav-link:hover,
	nav.navbar.mgsb4navbar .navbar-nav a.nav-link.active,
	.mgsfixed-nav nav.navbar.mgsb4navbar .navbar-nav a.nav-link:hover,
	.mgsfixed-nav nav.navbar.mgsb4navbar .navbar-nav a.nav-link.active {
		color: #fff;
	}

	nav.navbar.mgsb4navbar .navbar-brand {
		padding: 0;
	}

	.mgsfixed-nav nav.navbar.mgsb4navbar .navbar-brand>img.logo,
	.mgsfixed-nav .navbar-brand .logo {
		height: 56px;
	}

	.navbar-collapse ul li {
		border-bottom: 1px solid #c5c5c5;
	}


	.banner-content h1 {
		font-size: 42px;
	}

	.banner-content h3 {
		font-size: 18px;
	}

	.intro-text {
		margin: 0 10% 60px;
	}

	.about-box-style .experience-content {
		padding: 20px 12px;
	}

	.service-menu a i {
		padding: 0 10px 0 0;
	}

	.footer h4.widget-title {
		font-size: 22px;
	}

	.comment-wrap {
		padding: 30px;
	}
}

@media screen and (max-width: 767px) {
	.portfolio-wrapper {
		margin: 0 auto 30px;
	}

	.contact {
		padding: 0;
	}

	.aboutcol-sm {
		padding: 0 !important;
	}

	.no-space .portfolio-wrapper {
		margin: 0 auto;
	}

	.banner-content {
		margin-bottom: 30px;
		text-align: center;
	}

	.banner-content {
		max-width: 100%;
	}

	.banner-content h1 {
		font-size: 48px;
	}

	.banner-content h3 {
		font-size: 22px;
	}

	#home .quoteForm-holder {
		margin-top: 30px;
		position: static;
		transform: translate(0px);
	}

	.quoteForm {
		margin: 0 auto;
	}

	.breadcrumb,
	#single-page-banner.page-title h2 {
		text-align: center;
	}

	#about .about-text .title-box {
		margin: 60px 0 40px;
	}

	#about .profile-image {
		margin: 0 auto 50px;
	}

	.about-box-style .experience-content {
		padding: 20px 15px;
	}

	aside#pfolio-single-content {
		margin-top: 30px;
	}

	#commentform .form-group .col-sm-6 {
		margin: 0 0 30px;
	}

	#commentform .form-group .col-sm-6:last-child {
		margin: 0;
	}

	/*timeline*/
	.about-timeline-style .nav.nav-tabs,
	.about-box-style .nav.nav-tabs {
		max-width: 100%;
	}

	#about .icon-holder .tab-content-title {
		left: 0%;
		margin-left: 90px;
	}

	#about .nav-tab-menu .nav-tabs>li {
		width: 50%;
	}

	#about .icon-holder {
		text-align: left;
	}

	#about .icon-holder i {
		left: 0;
		margin: 0 0 0 7.5px;
	}

	#about .icon-holder .sub-title {
		left: 0;
		margin-left: 90px;
	}

	ul.timeline:before {
		left: 40px;
	}

	ul.timeline>li>.timeline-panel {
		width: calc(100% - 90px);
		width: -moz-calc(100% - 90px);
		width: -webkit-calc(100% - 90px);
	}

	ul.timeline>li>.timeline-badge {
		left: 15px;
		margin-left: 0;
	}

	ul.timeline>li>.timeline-panel {
		float: right;
		padding-top: 55px;
	}

	ul.timeline>li>.timeline-panel:before {
		border-left-width: 0;
		border-right-width: 15px;
		left: -15px;
		right: auto;
	}

	ul.timeline>li>.timeline-panel:after {
		border-left-width: 0;
		border-right-width: 14px;
		left: -14px;
		right: auto;
	}

	.timeline li p.date,
	.timeline li p.date-inverted {
		left: 50%;
		font-weight: 400;
		margin: 10px 0 20px 80px;
		text-align: left;
		top: 0;
	}

	.timeline .experience-content {
		margin: 10px 0 0;
		text-align: left;
	}

	#service-single-content aside {
		margin-top: 60px;
	}

	.service-menu a i {
		padding: 0 10px;
	}

	.testimonial-item {
		margin: 0 5%;
	}

	#contactForm .sub-text {
		bottom: 70px;
	}

	.parallax,
	.home-top-banner,
	.home-top-banner-2 {
		background-attachment: scroll;
	}

	.footer-top .column {
		margin-bottom: 90px;
	}

	.footer-top .column:last-child {
		margin-bottom: 50px;
	}

	.footer h4.widget-title {
		font-size: 24px;
	}

	.breadcrumb {
		float: left;
	}
}

@media screen and (max-width: 667px) {
	.service-wrap {
		min-height: 340px;
	}

	.pricing-plan:first-child {
		margin: 0 0 30px;
	}

	.pricing-plan,
	.pricing-plan.active,
	.pricing-table .pricing-plan:last-child,
	.pricing-table .pricing-plan:first-child {
		border-radius: 8px;
		width: 100%;
	}

	.testimonial-item {
		margin: 0;
	}

	.post-title h1 {
		font-size: 32px;
	}
}

@media screen and (max-width: 575px) {

	#portfolio .portfolio-wrapper,
	.isotopeContainer .isotopeSelector {
		width: 100%;
	}

	#footer .latest-pfolio .col-sm-4.no-space {
		width: 33.33333333%;
	}
}

@media screen and (max-width: 480px) {
	.banner-content h1 {
		font-size: 42px;
	}

	.banner-content h3 {
		font-size: 20px;
	}

	.title-wrap .section-title {
		font-size: 34px;
	}

	.post-title h1 {
		font-size: 24px;
	}

	.pricing-plan-wrap h3 {
		font-size: 30px;
	}

	.pfolio-list .col-sm-3,
	.pfolio-list .col-sm-4,
	.pfolio-list .col-xs-6 {
		width: 50%
	}

	.post-navigation .col-xs-6 {
		width: 50%;
	}

	.about-wrap {
		min-height: auto;
	}

	#related-blog .col-xs-4 {
		width: 100%;
	}

	.banner-content h1.type-animate a.typewrite {
		font-size: 40px;
	}
}

@media screen and (max-width: 420px) {
	.title-wrap .section-title {
		font-size: 30px;
	}

	#home .owl-carousel .slider-content h2.banner-title-text {
		font-size: 36px;
	}

	#about .nav-tab-menu .nav-tabs>li {
		width: 100%;
	}

	.pricing-plan-wrap h3 {
		font-size: 26px;
	}

	.our-team .col-sm-3,
	.our-team .col-xs-6 {
		width: 100%
	}
}

@media screen and (max-width: 375px) {
	.post-navigation a {
		font-size: 16px;
	}

	.sub-title {
		font-size: 26px;
	}

	.post-navigation .post-navbtn a.btn-transparent span {
		display: none;
	}
}

@media screen and (max-width: 360px) {
	.title-wrap .section-title {
		font-size: 26px;
	}

	.pricing-plan-wrap h3 {
		font-size: 22px;
	}

	.isotopeContainer .col-sm-3,
	.isotopeContainer .col-sm-4,
	.isotopeContainer .col-xs-6 {
		width: 100%
	}

	#about .col-sm-12 .row .col-sm-5 .profile-image {
		margin-left: 15px;
		margin-right: 15px;
	}

	.banner-content h1.type-animate a.typewrite {
		font-size: 36px;
	}

	#home .owl-carousel .slider-content h2.banner-title-text {
		font-size: 32px;
	}

	.timeline li p.date,
	.timeline li p.date-inverted {
		margin: 10px 0 20px 70px;
	}

	.timeline li p.date,
	.timeline li p.date-inverted {
		width: 155px;
	}

	.timeline>li>.timeline-panel {
		padding: 20px;
	}

	.timeline li p.date,
	.timeline li p.date-inverted {
		font-size: 16px;
	}
}

@media screen and (max-width: 320px) {
	.sub-title {
		font-size: 24px;
	}

	.timeline li p.date,
	.timeline li p.date-inverted {
		width: 135px;
	}

	.timeline li p.date,
	.timeline li p.date-inverted {
		font-size: 14px;
	}

	.banner-content h1.type-animate a.typewrite {
		font-size: 32px;
	}

	#home .owl-carousel .slider-content h2.banner-title-text {
		font-size: 30px;
	}

	.progressbar-wrap .col-xs-3,
	.progressbar-wrap .col-xs-6 {
		width: 100%
	}
}

@media screen and (max-height: 700px) and (max-width: 991px) {

	.home-top-banner,
	.home-top-banner-2 {
		padding: 30px 0;
	}

	.home-slider.home-top-banner {
		padding: 0;
	}
}

@media screen and (max-height: 420px) {
	nav.navbar.mgsb4navbar .navbar-collapse {
		max-height: 270px;
		overflow-y: auto;
	}
}

@media screen and (max-height: 360px) {
	nav.navbar.mgsb4navbar .navbar-collapse {
		max-height: 240px;
	}
}

@media screen and (max-height: 320px) {
	nav.navbar.mgsb4navbar .navbar-collapse {
		max-height: 215px;
	}
}