/**
 * /* RESPONSIVENESS - MEDIA QUERIES
 *
 * @format
 */

@media all and (max-width: 1440px) {
	.hero .about-hero {
		width: 100%;
	}
	.hero .about-hero .headline {
		font-size: 72px;
	}
	.about-hero .hero-description {
		width: 80%;
	}
	.hero .illustration-wrap {
		align-self: center;
		width: 150%;
	}
	.illustration-wrap .hero-illustration {
		max-width: 100%;
		margin-left: -3rem;
	}

	.feature-card.second-feature,
	.feature-card.fourth-feature {
		margin-right: 0%;
	}

	.feature-card .feature-info {
		padding-left: 10rem;
		padding-right: 2rem;
	}

	.feature-card .feature-illustration-wrap {
		width: 180px;

		/* position: initial; */
	}
}

@media screen and (max-width: 1200px) {
	.top-menu {
		margin-left: 0;
	}
	.features .features-grid {
		margin: 0;
	}

	.features-grid .feature-card {
		flex-direction: column;
		width: 100%;
		align-items: center;
		margin: 0;
	}

	.feature-card .feature-illustration-wrap {
		left: 10%;
		top: 25%;
	}

	.feature-card.second-feature .feature-illustration-wrap,
	.feature-card.fourth-feature .feature-illustration-wrap {
		left: 10%;
	}
}

@media all and (max-width: 960px) {
	.hero {
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
		min-height: 75vh;
		transition: all ease 3s;
	}
	.hero .about-hero {
		width: 100%;
		order: 2;
		/* padding-top: 2rem; */
	}

	.hero .about-hero .headline {
		font-size: 60px;
		transition: ease-in-out 3s;
	}
	.about-hero .hero-description {
		font-size: 16px;
	}

	.hero-btn {
		margin-top: 2rem;
	}

	.hero .illustration-wrap {
		order: 1;
		width: 100%;
		padding: 2rem;
	}
	.illustration-wrap .hero-illustration {
		max-width: 100%;
	}

	.more-info {
		flex-direction: column;
	}

	.inner-illustration-wrap {
		width: 100%;
	}
	.more-info-details {
		width: 100%;
		padding: 2rem;
	}

	.feature-card .feature-illustration-wrap {
		width: 160px;

		/* position: initial; */
	}

	.testimonials-slider .testimonial-card {
		flex-direction: column;
		align-items: flex-start;
		padding: 1.2rem;
		height: auto;
		width: 75vw;
	}

	.testimonial-card.card-hidden {
		display: none;
	}

	.testimonial-card .user-profile {
		padding-left: 0;
	}
}

@media screen and (max-width: 868px) {
	.header {
		flex-direction: column;
		justify-content: center;
	}

	.top-menu {
		margin: auto;
	}
	.nav-group.top-menu-wrap {
		flex-direction: column;
		justify-content: center;
		text-align: center;
		transition: linear 2s;
	}

	.trial-section .trial-action-buttons {
		padding-top: 2rem;
	}

	.testimonial {
		padding: 2rem;
	}

	.company-address .company {
		padding-bottom: 1.8rem;
	}

	.company-address .company-location {
		padding-bottom: 1rem;
	}
}

@media all and (max-width: 720px) {
	.about-hero .hero-description {
		width: 100%;
	}

	.feature-card .feature-illustration-wrap {
		width: 120px;

		/* position: initial; */
	}

	.feature-card .feature-info {
		background-size: 390px 360px;
	}

	.feature-info .sub-sub-headline {
		font-size: 20px;
	}

	.trial-section {
		/* flex-direction: column; */
		align-items: flex-start;
	}

	.footer-nav {
		flex-direction: column;
	}
}

@media screen and (max-width: 546px) {
	.feature-card .feature-info {
		background-size: 340px 360px;
	}

	.trial-section .trial-action-buttons {
		flex-wrap: wrap;
	}

	.trial-action-buttons .solid-btn {
		margin-bottom: 2rem;
	}
}

@media all and (max-device-width: 480px) {
	.container {
		/* padding-left: 5%;
		padding-right: 5%; */
	}

	.action-btn {
		padding: 1rem 1.5rem;
	}
	.hero .about-hero .headline {
		font-size: 48px;
	}
	/* .about-hero .hero-description {
		font-size: 16px;
	} */

	.sub-headline {
		font-size: 28px;
	}
	.more-info-details {
		padding: 1.6rem;
	}

	.more-info-description {
		font-size: 16px;
	}
	.feature-card .feature-illustration-wrap {
		/* position: initial; */

		left: 30%;
		top: -2%;

		height: 120px;
	}

	.feature-card.second-feature .feature-illustration-wrap,
	.feature-card.fourth-feature .feature-illustration-wrap {
		left: 30%;
	}

	.feature-card .feature-info {
		background-position: center;
		background-size: 280px 360px;

		padding: 2.4rem;
		align-items: center;
		margin-bottom: 2rem;
	}

	.chat-help {
		width: 48px;
		height: 48px;
	}
}

@media screen and (max-width: 396px) {
	.feature-card .feature-info {
		border-radius: 20px;
		padding: 1rem;
		padding-top: 2rem;
	}
	/* body {
		overflow-x: auto;
	} */
}