/* Big screen :1200px. */
@media (min-width: 1200px) and (max-width: 1500px) {
	.hero__content h1 {
		font-size: 48px;
	}

	.hero-img img {
		width: 46%;
	}
	.contact__form__content {
		right: unset;
	}

	.contact__img {
		margin: auto;
	}

	.contact__img__content {
		padding: 30px 55px;
	}
}

/* Normal screen :992px. */
@media (min-width: 992px) and (max-width: 1199px) {
	.hero__content h1 {
		font-size: 48px;
	}

	.hero-img img {
		width: 46%;
	}
	.contact__form__content {
		right: unset;
	}

	.contact__img {
		margin: auto;
		width: max-content;
		margin-bottom: 40px;
	}

	.contact__img__content {
		padding: 30px 55px;
	}
	.hero__content {
		margin-top: 50px;
	}
	.benefits__block p {
		font-size: 16px;
	}
	.blog__content h1 {
		width: auto;
		font-size: 32px;
	}
	.blog__content ul li {
		font-size: 18px;
	}

}

/* Tablet screen :768px. */
@media (min-width: 768px) and (max-width: 991px) {
	.bar__icon {
		display: block;
	}
	.header-area a.border-btn {
		padding: 8px 20px;
	}
	.contact__img__content {
		padding: 40px;
		max-width: 600px;
	}

	.contact__img {
		margin: 0;
	}
	.hero__content h1 {
		font-size: 40px;
	}

	.hero-img img {
		width: 46%;
	}
	.contact__form__content {
		right: unset;
	}

	.contact__img {
		margin: auto;
		width: max-content;
		margin-bottom: 40px;
	}

	.contact__img__content {
		padding: 30px 55px;
	}
	.hero__content {
		margin-top: 50px;
		max-width: 400px;
	}

.hero__content.v3 {
    max-width: 580px;
}

.hero__content.v3 a {
    width: max-content;
}

	.hero__content.v2 {
		max-width: 475px;
		margin-inline: auto;
		margin-bottom: -100px;
	}

	.hero__content.v2 p br {
		display: none;
	}

	.hero__content a {
		width: 100%;
	}

	.hero-btns {
		flex-direction: column;
	}
	.benefits__block p {
		font-size: 16px;
	}
	.brand-content {
		text-align: center;
	}

	.brand-content ul {
		justify-content: center;
	}

	.benefits__block h4 {
		font-size: 22px;
	}

	.benefits__block {
		margin-bottom: 24px;
	}
	.footer__bottom {
		flex-direction: column-reverse;
		gap: 10px;
	}

	.footer__bottom ul {
		gap: 40px;
	}
	.blog__content h1 {
		width: auto;
	}
	.blog__content ul li {
		font-size: 18px;
	}
	.video-container {
		margin: auto !important;
	}

	.blog__content {
		max-width: 550px;
		margin-inline: auto;
	}
}

/* small screen :320px. */
@media (max-width: 767px) {
	:root {
		--f18: 16px;
		--f20: 18px;
		--f22: 18px;
		--f24: 20px;
		--f28: 22px;
		--f30: 24px;
		--f32: 24px;
		--f36: 28px;
		--f40: 30px;
		--f48: 32px;
	}
	.logo-area {
		max-width: 110px;
	}
	.bar__icon {
		display: block;
	}
	.header-area a.border-btn {
		padding: 8px 20px;
	}
	.contact__img__content {
		padding: 0;
		max-width: 600px;
		position: unset;
		margin-top: 30px;
		display: none;
	}

	.contact__img {
		margin: 0;
	}
	.hero__content h1 {
		font-size: 32px;
	}

	.hero-img img {
		width: 100%;
		position: unset;
	}
	.contact__form__content {
		right: unset;
	}

	.contact__img {
		margin: auto;
		width: auto;
		margin-bottom: 40px;
	}


	.hero__content {
		margin-top: 50px;
		max-width: 100%;
	}

	.hero__content.v2 {
		margin-bottom: -100px;
	}

	.hero-img {
		margin-bottom: -100px;
	}

	.arrow-down-btn img {
		width: 24px;
	}

	.arrow-down-btn {
		margin-top: 30px;
		margin-bottom: 24px;
	}

	.hero__content a {
		width: 100%;
	}

	.hero-btns {
		flex-direction: column;
	}
	.benefits__block p {
		font-size: 14px;
	}
	.brand-content {
		margin-top: 30px;
	}

	.brand-content ul {
		justify-content: center;
		gap: 20px;
	}

	.benefits__block h4 {
		font-size: 20px;
	}

	.benefits__block {
		margin-bottom: 16px;
	}
	.footer__bottom {
		flex-direction: column;
		gap: 10px;
		margin-top: 50px;
		text-align: left;
		align-items: baseline;
	}

	.footer__bottom p {
		font-size: 14px;
	}

	.footer__bottom ul {
		gap: 20px;
		font-size: 14px;
	}
	.hero-area {
		position: relative;
		margin-top: -84px;
		padding-top: 100px;
	}

	.hero-bg {
		/* height: calc(100% + 290px); */
		object-fit: cover;
		/* margin-top: -221px; */
		object-position: bottom;
		width: 100%;
		height: 100%;
		top: auto;
		bottom: 0;
	}

	.Feature-hero-area .hero-bg {
		height: calc(100% + 200px);
		object-fit: cover;
		margin-top: -180px;
		object-position: bottom;
	}
	.section__title label {
		font-size: 14px;
	}
	.benefits__block i {
		width: 60px;
		height: 60px;
	}
	.work-area {
		padding: 40px 0 20px;
	}
	.work__block {
		text-align: left;
		padding-left: 60px;
		padding-bottom: 60px;
	}

	.work__block:last-child {
		padding-bottom: 0;
	}



	.work__block i {
		width: 48px;
		height: 48px;
		padding: 14px;
		position: absolute;
		left: 0;
		top: 0;
	}

	.work__block i:after {
		width: 32px;
		height: 32px;
	}

	.work__block h4 {
		font-weight: 500;
	}

	.work__block:after {
		opacity: 1;
		left: 23px;
		top: 55px;
		width: 2px;
		height: 68%;
		background: linear-gradient(176deg, rgba(19, 191, 194, 0.04) 5%, rgba(19, 191, 194, 0.64) 50%, rgba(19, 191, 194, 0.04) 95%);
	}
	.pt_100 {
		padding-top: 40px;
	}

	.pb_100 {
		padding-bottom: 40px;
	}
	.section__title p br {
		display: none;
	}

	.feedback__slider .owl-nav {
		display: none;
	}

	.feedback__block {
		padding: 28px 24px;
	}

	.feedback__block > p {
		font-size: 14px;
		height: auto;
		padding-bottom: 16px;
	}
	.contact__form {
		padding: 20px;
	}

	.thm_btn {
		font-size: 14px;
		font-weight: 400;
	}

	.contact__form input {
		height: 48px;
		font-size: 14px;
	}

	.contact__form textarea {
		font-size: 14px;
	}
	.footer__nav {
		flex-direction: column;
		gap: 30px;
		margin-top: 30px;
		margin-left: unset;
	}
	.blog__content h1 {
		width: auto;
		gap: 15px;
	}
	.blog__content ul li {
		font-size: 16px;
	}
	.video-container {
		margin: auto !important;
		padding: 8px;
		padding-bottom: 0;
		border-radius: 16px;
		height: auto;
		aspect-ratio: 16/9;
	}

	.video-container video {
		border-radius: 10px;
		object-fit: cover;
	}

	.blog__content {
		max-width: 550px;
		margin-inline: auto;
	}
	.blog__content h1 i {
		width: 48px;
		height: 48px;
		padding: 12px;
	}

	.blog__content h5 {
		font-size: 16px;
	}

	.blog__content p {
		font-size: 14px;
	}
	.blog__content ul li i {
		width: 24px;
		height: 24px;
		padding: 7px;
	}
	.play-btn {
		width: 36px;
		height: 36px;
	}

	.play-btn::before {
		border-width: 5px 0 6px 10px;
		margin-left: 3px;
		margin-top: 1px;
	}
}

/* Large Mobile screen :480px. */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.container {
		width: 450px;
	}
	.hero-bg {
		height: calc(100% + 220px);
	}
}