/* Contacts page responsive & adaptive */

/* 1200px: desktops */
@media (max-width: 1200px) {
	.contact-card {
		padding: 40px;
	}
	.contact-main .contact-info h3 {
		font-size: 32px;
	}
	.contact-form h3 {
		font-size: 44px;
	}
	.addresses-container {
		gap: 48px;
	}
	#contact-map {
		min-height: 380px;
	}
}

/* 992px: tablets landscape */
@media (max-width: 992px) {
	.contact-cards h4 {
		font-size: 20px;
	}

    .contact-cards p {
        font-size: 16px;
    }

	.contact-card {
		padding: 32px;
	}
	.contact-main {
		flex-direction: column;
		gap: 40px;
	}
	.contact-main .contact-info {
		max-width: 100%;
	}
	.contact-form h3 {
		font-size: 40px;
	}
	.addresses-container {
		flex-direction: column;
		gap: 24px;
	}
	.addresses-list,
	.contact__block {
		width: 100%;
	}
	#contact-map {
		min-height: 360px;
	}
}

/* 768px: tablets portrait */
@media (max-width: 768px) {
    .contact-cards {
        flex-wrap: wrap;
        gap: 16px;
        margin-bottom: 60px;
    }
    .contact-cards .contact-card {
        flex: 1 1 250px;
        }
    .contact-cards .contact-card:not(:last-child) {
        margin-bottom: 0;
    }
	.contact-form h3 {
		font-size: 34px;
	}
	.contact-form form .form-row {
		flex-direction: column;
		gap: 16px;
	}
	.contact-card h4 {
		font-size: 22px;
		line-height: 28px;
	}
	.contact-card p {
		font-size: 16px;
		line-height: 24px;
	}
	.address-ttl {
		font-size: 18px;
	}
	.addresses-container {
		padding: 16px;
	}
	#contact-map {
		min-height: 320px;
	}
}

/* 576px: phones */
@media (max-width: 576px) {
	.contact-card {
		padding: 24px;
		border-radius: 20px;
	}
	.contact-form h3 {
		font-size: 28px;
		margin-bottom: 16px;
	}
	.contact-form form input,
	.contact-form form textarea {
		padding: 16px 18px;
		border-radius: 20px;
		font-size: 15px;
	}
	.contact-main .contact-info h3 {
		font-size: 26px;
	}
	.contact-main .contact-info p {
		margin-bottom: 20px;
	}
    .addresses-list {
		padding: 0;
	}
	.address-answer .social {
		width: 26px;
		min-width: 26px;
		min-height: 26px;
	}
	#contact-map {
		min-height: 280px;
	}
    .hero-section-component::after {
        border-radius:  25px 25px 0px 0px;
    }

    .footer-side::after {
        border-radius: 0px 0px 25px 25px;
    }
}

/* 400px: very small phones */
@media (max-width: 400px) {
	.contact-form h3 {
		font-size: 24px;
	}
	.address-ttl {
		font-size: 16px;
	}
	#contact-map {
		min-height: 240px;
	}
}