/*!
 * Mark Fathers Agency — responsive stylesheet
 * Breakpoints mirror the Elementor kit: 1400 / 1200 / 992 / 768 / 575.
 * @package MarkFathers
 */

/* ==========================================================================
   <= 1400px (laptop)
   ========================================================================== */
@media (max-width: 1400px) {
	.mf-hero__title {
		font-size: 58px;
	}

	.mf-portfolio__title {
		font-size: 130px;
	}

	.mf-cta__subtitle {
		font-size: 110px;
	}

	.mf-cta__circle {
		width: 200px;
		height: 200px;
		font-size: 16px;
	}

	.mf-team__title {
		font-size: 130px;
	}

	.mf-about__counter-number {
		font-size: 80px;
	}
}

/* ==========================================================================
   <= 1200px (tablet-extra)
   ========================================================================== */
@media (max-width: 1200px) {
	:root {
		--mf-header-h: 72px;
	}

	.mf-hero__title {
		font-size: 52px;
	}

	.mf-hero__content {
		padding-left: 30px;
	}

	.mf-hero__text {
		max-width: 90%;
	}

	.mf-services__title {
		font-size: 45px;
		margin-bottom: 30px;
	}

	.mf-services__title br,
	.mf-about__title br {
		display: none;
	}

	.mf-about__title,
	.mf-technology__title,
	.mf-testimonials__title {
		font-size: 36px;
	}

	.mf-blog__title {
		font-size: 55px;
	}

	.mf-process__title {
		font-size: 54px;
	}

	.mf-process__grid {
		gap: 30px;
	}

	.mf-process__item-title {
		font-size: 30px;
	}

	.mf-portfolio__title {
		font-size: 110px;
	}

	.mf-portfolio__grid {
		column-gap: 30px;
	}

	.mf-portfolio__shape {
		width: 12%;
	}

	.mf-portfolio__footer {
		margin-top: -120px;
	}

	.mf-team__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.mf-team__title {
		font-size: 110px;
	}

	.mf-cta__subtitle {
		font-size: 90px;
	}

	.mf-cta__main {
		gap: 40px;
	}

	.mf-cta__circle {
		width: 180px;
		height: 180px;
		font-size: 15px;
	}

	.mf-footer__top {
		grid-template-columns: 1fr 1fr;
		row-gap: 50px;
	}
}

/* ==========================================================================
   <= 1199px (below XL — match Aleric d-none d-xl-block menu)
   ========================================================================== */
@media (max-width: 1199px) {
	.mf-header__inner {
		display: flex;
		justify-content: space-between;
	}

	.mf-header__nav {
		display: none !important;
	}

	.mf-technology__capsule,
	.mf-technology__capsule--vue,
	.mf-technology__capsule--dc,
	.mf-technology__capsule--sketch {
		width: 150px;
		height: 150px;
		text-align: center;
	}

	.mf-technology__capsule svg {
		margin-bottom: 5px;
	}
}

/* ==========================================================================
   <= 992px (tablet)
   ========================================================================== */
@media (max-width: 992px) {
	.mf-section {
		padding-block: 90px;
	}

	.mf-hero {
		padding-top: calc(var(--mf-header-h) + 40px);
	}

	.mf-hero__social {
		display: none;
	}

	.mf-hero__inner {
		flex-direction: column-reverse;
		gap: 50px;
	}

	.mf-hero__content {
		flex: 0 0 100%;
		max-width: 100%;
		padding-left: 0;
		text-align: center;
	}

	.mf-hero__line {
		margin-inline: auto;
	}

	.mf-hero__title {
		font-size: 44px;
	}

	.mf-hero__body {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	.mf-hero__shape--inline {
		grid-row: auto;
	}

	.mf-hero__cta,
	.mf-hero__trust {
		grid-column: auto;
	}

	.mf-hero__text {
		max-width: 100%;
	}

	.mf-hero__media {
		flex: 0 0 70%;
		max-width: 420px;
	}

	.mf-about__top {
		grid-template-columns: minmax(0, 80%) minmax(0, 20%);
	}

	.mf-about__deco {
		padding-top: 20px;
	}

	.mf-about__copy {
		width: 90%;
		max-width: none;
		justify-self: start;
	}

	.mf-about__col--media,
	.mf-about__col--stats {
		flex: 0 0 46%;
		width: 46%;
		max-width: 46%;
	}

	.mf-about__col--stack {
		flex: 0 0 66%;
		width: 66%;
		max-width: 66%;
		margin-top: 40px;
	}

	.mf-about__col--stats {
		padding-right: 0;
	}

	.mf-about__figure--secondary {
		margin-left: 0;
	}

	.mf-services__header {
		flex-direction: column;
		gap: 24px;
		margin-bottom: 30px;
	}

	.mf-services__header-left,
	.mf-services__header-right {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.mf-services__title {
		font-size: 40px;
		margin-bottom: 0;
	}

	.mf-services__note {
		max-width: 70%;
		font-size: 20px;
	}

	.mf-process__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}

	.mf-process__title {
		flex: 0 0 100%;
		max-width: 100%;
		font-size: 48px;
	}

	.mf-process__cta-wrap {
		flex: 0 0 auto;
		justify-content: flex-start;
		width: 100%;
	}

	.mf-process__grid {
		grid-template-columns: 1fr;
		gap: 50px;
	}

	.mf-portfolio__title {
		font-size: 90px;
	}

	.mf-portfolio__label,
	.mf-portfolio__years {
		font-size: 28px;
	}

	.mf-portfolio__footer {
		margin-top: -100px;
	}

	.mf-team__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.mf-team__title {
		font-size: 90px;
	}

	.mf-team__desc {
		margin-left: 0;
	}

	.mf-blog__col--title,
	.mf-blog__col--posts {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.mf-blog__cta-wrap {
		margin-left: 0;
	}

	.mf-cta__main {
		flex-direction: column;
		align-items: flex-start;
		gap: 40px;
		min-height: 0;
	}

	.mf-cta__subtitle {
		font-size: 70px;
	}

	.mf-cta__circle {
		align-self: flex-end;
		width: 160px;
		height: 160px;
		font-size: 14px;
	}

	.mf-footer__locations {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.mf-technology__title {
		margin-bottom: 40px;
		font-size: 40px;
	}

	.mf-technology__para p {
		margin-left: 0;
	}

	.mf-technology__shape {
		display: none;
	}

	.mf-technology__capsule,
	.mf-technology__capsule--vue,
	.mf-technology__capsule--dc,
	.mf-technology__capsule--sketch {
		width: 150px;
		height: 150px;
		text-align: center;
	}

	.mf-technology__capsule svg {
		margin-bottom: 5px;
	}
}

/* ==========================================================================
   <= 768px (mobile landscape)
   ========================================================================== */
@media (max-width: 768px) {
	:root {
		--mf-header-h: 60px;
	}

	.mf-section {
		padding-block: 70px;
	}

	.mf-hero__title {
		font-size: 40px;
	}

	.mf-hero__title br {
		display: none;
	}

	.mf-hero__media {
		max-width: 340px;
	}

	.mf-services__header,
	.mf-testimonials__header {
		margin-bottom: 45px;
	}

	.mf-services__title {
		font-size: 35px;
	}

	.mf-services__note {
		max-width: 100%;
		font-size: 18px;
	}

	.mf-about__title,
	.mf-technology__title,
	.mf-testimonials__title {
		font-size: 30px;
	}

	.mf-blog__title {
		font-size: 45px;
	}

	.mf-services__card {
		padding: 34px 26px 30px;
		min-height: 0;
	}

	.mf-about__counter-number {
		font-size: 64px;
	}

	.mf-about__top {
		grid-template-columns: 1fr;
	}

	.mf-about__intro,
	.mf-about__copy,
	.mf-about__deco {
		grid-column: 1;
		grid-row: auto;
		width: 100%;
		max-width: 100%;
		justify-self: start;
	}

	.mf-about__deco {
		justify-content: flex-start;
		padding-top: 10px;
		margin-bottom: 20px;
	}

	.mf-about__figure--secondary {
		margin: 30px 0 0;
	}

	.mf-about__figure--overlap {
		position: relative;
		top: 0;
		margin-bottom: 16px;
	}

	.mf-process__title {
		font-size: 40px;
	}

	.mf-process__cta-wrap {
		flex-wrap: wrap;
		gap: 14px;
	}

	.mf-process__item-title {
		font-size: 28px;
	}

	.mf-portfolio__header {
		flex-wrap: wrap;
		justify-content: flex-start;
		text-align: left;
		gap: 10px;
		padding-bottom: 40px;
	}

	.mf-portfolio__label {
		margin: 0 0 10px;
		align-items: flex-start;
		text-align: left;
		font-size: 24px;
	}

	.mf-portfolio__label-bars {
		margin-bottom: 16px;
	}

	.mf-portfolio__title {
		font-size: 85px;
		padding: 17px 0;
		margin: 0;
		width: 100%;
		text-align: left;
	}

	.mf-portfolio__years {
		margin: 0 0 10px;
		font-size: 24px;
	}

	.mf-portfolio__grid {
		grid-template-columns: 1fr;
		column-gap: 15px;
	}

	.mf-blog {
		padding-top: 80px;
		padding-bottom: 55px;
	}

	.mf-blog__cta-wrap {
		margin-top: 40px;
	}

	.mf-blog__item {
		margin-bottom: 40px;
	}

	.mf-testimonials__quote {
		font-size: 20px;
		margin-bottom: 40px;
	}

	.mf-testimonials__name {
		font-size: 20px;
	}

	.mf-testimonials__desc {
		font-size: 18px;
	}

	.mf-portfolio__footer {
		margin-top: -60px;
	}

	.mf-portfolio__shape {
		width: 15%;
	}

	.mf-portfolio__item-title {
		font-size: 22px;
	}

	.mf-team__grid {
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}

	.mf-team__title {
		font-size: 80px;
	}

	.mf-testimonials__card {
		padding: 32px 24px 28px;
	}

	.mf-cta__eyebrow {
		font-size: 14px;
		gap: 10px;
	}

	.mf-cta__eyebrow-line {
		max-width: 80px;
	}

	.mf-cta__subtitle {
		font-size: 54px;
		margin-bottom: 28px;
	}

	.mf-cta__social-link {
		padding: 10px 16px;
		font-size: 12px;
	}

	.mf-cta__circle {
		width: 140px;
		height: 140px;
		font-size: 13px;
		gap: 10px;
	}

	.mf-footer {
		padding-top: 70px;
	}

	.mf-footer__top {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.mf-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.mf-offcanvas__panel {
		width: 100%;
		padding: 22px 22px 40px;
	}

	.mf-offcanvas__menu-link {
		font-size: 24px;
	}

	.mf-offcanvas__gallery {
		display: none;
	}

	.mf-technology {
		height: 1000px;
		padding-block: 80px 0;
	}

	.mf-technology__aside {
		width: 100%;
	}

	.mf-technology__title {
		margin-bottom: 30px;
	}
}
@media (max-width: 575px) {
	:root {
		--mf-container-pad: 15px;
		--mf-header-h: 82px;
	}

	.mf-section {
		padding-block: 55px;
	}

	.mf-header {
		padding-block: 14px;
	}

	.mf-header__logo img {
		height: 38px;
	}

	.mf-header__search {
		display: none;
	}

	.mf-hero {
		padding-top: calc(var(--mf-header-h) + 30px);
	}

	.mf-hero__title {
		font-size: 32px;
	}

	.mf-hero__title br {
		display: none;
	}

	.mf-hero__eyebrow {
		font-size: 15px;
	}

	.mf-hero__media {
		max-width: 100%;
	}

	.mf-hero__shape--circle,
	.mf-hero__shape--deco {
		display: none;
	}

	.mf-hero__trust {
		flex-direction: column;
		align-items: center;
		gap: 10px;
	}

	.mf-marquee__item {
		padding-inline: 26px;
	}

	.mf-marquee__item img {
		height: 24px;
	}

	.mf-services__title,
	.mf-about__title,
	.mf-technology__title,
	.mf-testimonials__title {
		font-size: 26px;
	}

	.mf-blog__title {
		font-size: 36px;
	}

	.mf-blog__card-title {
		font-size: 20px;
	}

	.mf-testimonials__desc br {
		display: none;
	}

	.mf-blog__desc br {
		display: none;
	}

	.mf-services__pretitle {
		font-size: 13px;
		padding: 6px 16px;
	}

	.mf-about__counter {
		flex-wrap: wrap;
	}

	.mf-about__counter-number {
		font-size: 52px;
	}

	.mf-about__counter-label {
		margin-left: 20px;
	}

	.mf-about__col--media,
	.mf-about__col--stats,
	.mf-about__col--stack {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
	}

	.mf-about__col--stack {
		margin-top: 30px;
	}

	.mf-about__text {
		max-width: 100%;
	}

	.mf-about__cta {
		margin-top: 10px;
	}

	.mf-process__title {
		font-size: 28px;
	}

	.mf-portfolio__title {
		font-size: 72px;
	}

	.mf-portfolio__years {
		margin-left: 0;
		width: 100%;
	}

	.mf-portfolio__label {
		font-size: 20px;
	}

	.mf-portfolio__item-title {
		font-size: 20px;
	}

	.mf-team__grid {
		grid-template-columns: 1fr;
	}

	.mf-team__title {
		font-size: 52px;
	}

	.mf-cta__subtitle {
		font-size: 40px;
		margin-bottom: 24px;
	}

	.mf-cta__social {
		gap: 8px;
	}

	.mf-cta__social-link {
		padding: 9px 14px;
		gap: 8px;
	}

	.mf-cta__circle {
		align-self: center;
		width: 130px;
		height: 130px;
		font-size: 12px;
	}

	.mf-rounded-btn {
		width: 130px;
		height: 130px;
		font-size: 13px;
	}

	.mf-footer__middle,
	.mf-footer__bottom {
		padding-block: 30px;
	}

	.mf-footer__legal {
		flex-wrap: wrap;
	}

	.mf-offcanvas__panel {
		width: 100%;
		padding: 20px 20px 36px;
	}

	.mf-offcanvas__menu-link {
		font-size: 22px;
		padding: 10px 0;
	}

	.mf-offcanvas__title {
		font-size: 30px;
	}

	.mf-offcanvas__gallery {
		display: none;
	}

	.mf-technology {
		height: 1000px;
		padding-block: 60px 0;
	}

	.mf-technology__para p br {
		display: none;
	}

	.mf-technology__para p {
		padding-left: 0;
	}

	.mf-technology__para p::before {
		display: none;
	}

	.mf-technology__capsule,
	.mf-technology__capsule--dc,
	.mf-technology__capsule--sketch {
		width: 100px;
		height: 100px;
		font-size: 16px;
		line-height: 1;
		margin-bottom: 0;
	}

	.mf-technology__capsule--vue {
		width: 120px;
		height: 120px;
	}

	.mf-technology__capsule svg {
		width: 30px;
		height: 30px;
		margin-bottom: 5px;
	}
}