@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

@font-face {
	font-family: "gtw-r";
	src: url(../fonts/GTWalsheimPro-Regular.ttf) format("truetype");
}

@font-face {
	font-family: "gtw-m";
	src: url(../fonts/GTWalsheimPro-Medium.ttf) format("truetype");
}

@font-face {
	font-family: "AustinHairline-Roman-Trial";
	src: url(../fonts/AustinHairline-Roman-Trial.otf) format("truetype");
}

@font-face {
	font-family: "AustinHairline-Semibold-Trial";
	src: url(../fonts/AustinHairline-Semibold-Trial.otf) format("truetype");
}


* {
	margin: 0px;
	box-sizing: border-box;
	font-family: "Montserrat", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol {
	margin: 0px;
	padding: 0px;
}

a,
a:hover {
	text-decoration: none;
}

body {
	background-color: #0a0b0c;
}

li {
	list-style: none;
}

img {
	width: 100%;
	height: auto;
}

:root {
	--main-font: "Montserrat", sans-serif;
	--heading-main: "AustinHairline-Roman-Trial", sans-serif;
	--heading-sub: "AustinHairline-Semibold-Trial", sans-serif;
	--primary: #f2c94c;
	--secondery: #eb5757;
	--sub-1: #333333;
	--sub-2: #828282;
	--sub-3: #bdbdbd;
	--sub-4: #e0e0e0;
	--white: #ffffff;
	--black: #000000;
	--primary01: rgb(145, 197, 145);
	--btn: rgba(0, 0, 0, 0.15);
}

#main-wrapper {
	overflow: hidden;
	position: relative;
	max-width: 1900px;
	margin: 0 auto;
	width: 100%;
}

header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9;
	padding: 35px 0px 10px;

	.logo {
		display: block;
		width: 150px;
	}

	.main-menu {
		gap: 30px;
		margin-top: -18px;

		li {
			a {
				color: var(--white);
				font-family: "gtw-r";
				font-weight: 500;
				font-size: 18px;
				padding: 6px 2px;
				border-bottom: 2px solid transparent;
				transition: 0.3s ease-in-out;

				&:hover {
					color: var(--white);
					border-bottom: 2px solid var(--white);
				}

				&.active {
					color: var(--white);
					border-bottom: 2px solid var(--white);
				}
			}

			&.current-menu-item {
				a {
					color: var(--white);
					font-family: "gtw-m";
					border-bottom: 2px solid var(--white);
				}
			}
		}
	}
}

.banner-area {
	position: relative;
	/* background-image: url(../images/banner-bg.webp); */
	background-position: center top;
	background-size: cover;
	padding: 11px 0px 100px;
	min-height: 124vh;
	overflow: hidden;
	img.back {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		z-index: 1;
	}
	img.light {
		position: absolute;
		top: 50%;
		left: 30%;
		transform: translate(-50%, -50%);
		width: 50%;
		object-fit: contain;
		z-index: 2;
	}

	.content {
/*		position: relative;*/
		z-index: 10;
		position: absolute;
		top: 57%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 1400px;
		margin: 0 auto;
        float: none;
        display: table;
        right: 44%;
		.cover {
			margin-bottom: 40px;
		}

		h2 {
			font-size: 120px;
			color: #fff;
			line-height: 90%;

			text-align: center;
			font-family: var(--heading-main);
		}
	}
}

.primary-btn {
	background-color: transparent;
	border: 1px solid var(--white);
	padding: 8px 22px;
	font-size: 18px;
	font-weight: 500;
	border-radius: 40px;
	color: var(--white);
	transition: 0.3s ease-in-out;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: max-content;

	&:hover {
		background-color: var(--white);
		color: var(--black);
		border: 1px solid var(--white);
	}
}

@keyframes arrowBounce {

	0%,
	100% {
		transform: translateY(-4px);
	}

	50% {
		transform: translateY(4px);
	}
}

.arrow-animate {
	animation: arrowBounce 2s infinite;
	display: inline-block;
}

.section-top {
	margin-bottom: 40px;
	overflow: hidden;

	.section-title {
		text-align: center;
		font-size: 130px;
		font-family: var(--heading-main);
		color: #fff;
	}
}
.banner-area {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.video-section {
	padding: 60px 0px;
	position: relative;
	background: #000;
	min-height: 100vh;
	overflow: hidden;

	.section-title.hidden {
		opacity: 0;
	}

	.video-area {
		position: relative;
		width: 100%;
		height: 80vh;

		video {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 50%;
			transform: translate(-50%, -50%);
			transition: all 1s ease;
			object-fit: cover;
			border-radius: 40px;
		}
	}
}

.video-area.full video {
	width: 80vw;
	height: 70vh;
}

.stylish-top {
	margin-bottom: 40px;
	overflow: hidden;

	h3 {
		font-size: 140px;
		font-family: var(--heading-main);
		color: transparent;
		text-align: center;
		-webkit-text-stroke: 1px #0a5c75;
		text-stroke: 1px #0a5c75;
	}

	.section-title {
		text-align: center;
		font-size: 140px;
		font-family: var(--heading-main);
		color: #fff;
		margin-top: -110px;
	}
}

.work-section {
	background-color: #0a0b0c;
	position: relative;
	margin-top: -60px;
	padding-bottom: 0px;

	.container {
		border-top: 1px solid #fff;
		padding-top: 40px;
	}

	.row {
		.item {
			padding: 20px;
			margin-bottom: 20px;

			.pic {
				width: 100%;
				height: 540px;
				overflow: hidden;

				img {
					/*Imagestreched*/
					/*max-height: 500px;*/
					animation: scale 40s linear infinite;
					object-fit: cover;
				}

				video {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}

			.work-link {
				display: block;
				padding: 20px;

				.name {
					font-family: var(--heading-sub);
					font-size: 35px;
					color: #fff;
					margin-bottom: 6px;
				}

				p {
					font-size: 20px;
					color: #fff;
				}
			}
		}
	}
}

@keyframes scale {
	50% {
		-webkit-transform: scale(1.2);
		-moz-transform: scale(1.2);
		-ms-transform: scale(1.2);
		-o-transform: scale(1.2);
		transform: scale(1.2);
	}
}

/* .container-scroller {
	display: flex;
	align-items: stretch;
	padding: 0 24px;
	gap: 24px;
	max-height: 550px;
	overflow: hidden;
	.scroller {
		flex: 1;
		height: 100%;
		gap: 24px;
		overflow: hidden;
		-webkit-mask: linear-gradient( 0deg, transparent, white 7%, white 93%, transparent);
		mask: linear-gradient(0deg, transparent, white 7%, white 93%, transparent);
	}

	.scroller__inner {
		padding-block: 1rem;
		display: flex;
		flex-wrap: nowrap;
		gap: 1rem;
		flex-direction: column;
		height: max-content;
		animation: scroll var(--_animation-duration, 30s) var(--_animation-direction, forwards) linear infinite;
	}

	.scroller__inner.reverse {
		--_animation-direction: reverse;
	}

	img {
		width: 100%;
		max-width: 100%;
	}
}

@keyframes scroll {
	to {
		transform: translateY(calc(-50% - 0.5rem));
	}
} */


.bottomSwiper .swiper-wrapper,
.topSwiper .swiper-wrapper {
	-webkit-transition-timing-function: linear !important;
	transition-timing-function: linear !important;
	position: relative;
}

.swiper-pagination-bullet {
	margin: 0 !important;
	width: 24px !important;
	border-radius: 0 !important;
	opacity: 0.4 !important;
	border-top: 1px solid var(--white);
	border-bottom: 1px solid var(--white);

	&.swiper-pagination-bullet-active {
		opacity: 1 !important;
		position: relative !important;

		&::after {
			content: "";
			position: absolute;
			inset: 50% auto auto 50%;
			transform: translate(-50%, -20%);
			background: transparent url(../images/cursor.webp) no-repeat center center / cover;
			width: 18px;
			height: 18px;
		}
	}
}

.swiper-pagination-bullet-active {
	background-color: transparent !important;
	border-top: 1px solid rgba(255, 255, 255, 0.4);
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.swiper-pagination .swiper-pagination-bullet:nth-child(1) {
	border-left: 1px solid rgba(255, 255, 255, 0.4);
	border-bottom-left-radius: 10px !important;
	border-top-left-radius: 10px !important;
}

.swiper-pagination .swiper-pagination-bullet:last-child {
	border-right: 1px solid rgba(255, 255, 255, 0.4);
	border-bottom-right-radius: 10px !important;
	border-top-right-radius: 10px !important;
}

.logo-section {
	background-color: #0a0b0c;

	.container {
		border-top: 1px solid var(--white);
		border-bottom: 1px solid var(--white);
		padding: 80px 0px;
		margin-top: 60px;
	}

	.top-logo-slider,
	.bottom-logo-slider {
		overflow: hidden;
		padding: 20px 0;
	}

	.swiper-slide img {
		width: 100%;
		height: 90px;
		object-fit: contain;
		max-width: 200px;
		margin: 0 auto;
		display: block;
		background-color: #0a0b0c;
		border: none;
	}

	.swiper-wrapper {
		align-items: center;
	}
}

.services-area {
	background-color: #0a0b0c;
	padding: 60px 0px;

	.abs-pic {
		display: none;
	}

	.nav-pills {
		.nav-link {
			color: #fff;
			display: flex;
			position: relative;
			justify-content: space-between;
			align-items: center;
			font-size: 22px;
			font-weight: 500;
			color: #fff;
			background-color: transparent;
			border-bottom: 1px solid var(--white);
			border-radius: 0px;
			padding: 15px 0px 15px 16px;
			width: 100%;
			text-align: left;
			gap: 10px;

			&.sub-nav-link {
				font-size: 16px;
				font-weight: 400;
				border-bottom: none;
				padding: 12px 0px 12px 30px;
			}

			.submenu {
				width: 100%;
			}
		}
	}

	.tab-content {
		position: relative;
		z-index: 2;

		.pic {
			min-height: 600px;

			img {
				width: 85%;
				height: 85% !important;
				margin: 0 auto;
				display: block;
				height: auto;
				object-fit: cover;
			}
		}

		.tab-pane {
			position: relative;

			.primary-btn {
				position: relative;
				margin-top: 20px;
				position: absolute;
				bottom: 20px;
				right: 0px;
			}
		}

		.primary-btn {
			padding: 12px 34px;
		}
	}

	.abs-pic {
		.first {
			position: absolute;
			top: 20px;
			left: 16%;
			width: 240px;
			z-index: 1;
			animation: floatFirst 4s ease-in-out infinite;
		}

		.sec {
			position: absolute;
			bottom: 40%;
			right: 0px;
			width: 120px;
			z-index: 1;
			animation: floatSec 3.5s ease-in-out infinite;
		}

		.third {
			position: absolute;
			bottom: 11%;
			right: 26%;
			width: 190px;
			z-index: 1;
			animation: floatThird 5s ease-in-out infinite;
		}
	}
}

@keyframes floatFirst {

	0%,
	100% {
		transform: translateY(0) scale(1);
	}

	50% {
		transform: translateY(-18px) scale(1.04);
	}
}

@keyframes floatSec {

	0%,
	100% {
		transform: translateX(0) rotate(0deg);
	}

	50% {
		transform: translateX(-16px) rotate(-4deg);
	}
}

@keyframes floatThird {

	0%,
	100% {
		transform: translateY(0) scale(1);
	}

	25% {
		transform: translateY(10px) scale(0.98);
	}

	50% {
		transform: translateY(-14px) scale(1.03);
	}

	75% {
		transform: translateY(5px) scale(1);
	}
}

.services-area .nav-pills .submenu.super-sub .sub {
	font-size: 16px;
	border-bottom: unset;
	padding: 12px 0px 12px 48px;
}

.services-area .nav-pills .submenu .sub {
	font-size: 16px;
	border-bottom: unset;
	padding: 12px 0px 12px 30px;
}

.services-area .nav-pills>.nav-link.active {
	border-bottom: 1px solid #23add1;
}

.about-area {
	padding: 60px 0px;
	position: relative;
	background-color: #fff;

	.left {
		padding-left: 40px;

		h3 {
			font-size: 160px;
			font-family: var(--heading-main);
			color: transparent;
			text-align: center;
			-webkit-text-stroke: 2px #23add1;
			text-stroke: 2px #23add1;
			width: max-content;
		}
	}

	.right {
		h4 {
			font-size: 55px;
			color: #000;
			font-family: var(--heading-sub);
			margin-bottom: 20px;
		}

		p {
			font-size: 17px;
			color: #000;
			font-weight: 500;
		}
	}

	.parson-bg {
		background-image: url(../images/parson-bg.webp);
		padding: 80px 35px;
		background-size: cover;
		background-position: center;
		border-radius: 30px;
		margin-top: 30px;

		.parson {
			position: absolute;
			bottom: 0px;
			left: 70px;
			width: 350px;
		}

		.content-side {
			padding-left: 40px;

			h5 {
				font-size: 42px;
				color: #fff;
				font-weight: 300;
				margin-bottom: 20px;

				span {
					font-weight: 700;
				}
			}

			p {
				font-size: 20px;
				font-weight: 400;
				color: #fff;
			}

			p.fw-bold {
				font-size: 30px;
				margin: 16px 0px;
			}

			.sert {
				max-width: 250px;
				margin-top: 20px;
			}
		}
	}
}

.testimonials-area {
	background-color: #fff;
	padding: 60px 0px;
	position: relative;

	.stylish-top {
		h3 {
			-webkit-text-stroke: 2px #23add1;
			text-stroke: 2px #23add1;
		}

		.section-title {
			color: #000;
		}
	}

	.reviews-slider {
		width: 100vw;
		max-width: 900px;
		margin: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		overflow: hidden;

		.ReviewSlider {
			width: min(90vw, 900px);
			height: 380px;
			list-style-type: none;
			display: flex;
			transition: transform 1.25s;
		}

		.reviewitem {
			position: relative;
			min-width: 100%;
			height: inherit;
			display: flex;
			align-items: center;

			.testimonial {
				width: 80%;
				margin-left: 20px;
				min-height: 250px;
				padding: 2rem;
				padding-right: 5rem;
				background-color: var(--black);
				color: white;
				border-radius: 0.75rem;
				font: 100 0.7rem/1.6 helvetica, sans-serif;
				opacity: 0;
				box-shadow: 0 7px 15px 5px rgba(180, 170, 150, .5);

				/* p {
					transform: translateY(20px);
					opacity: 0;
				} */

				p:nth-of-type(1) {
					font-weight: 500;
					font-size: 18px;
				}

				p:nth-of-type(2) {
					font-weight: 400;
					margin-top: 1rem;
					font-size: 14px;
					color: rgba(255, 255, 255, 1);
				}

				p:nth-of-type(3) {
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					font-size: 15px;
				}
			}

			.image {
				position: absolute;
				right: 0;
				z-index: 10;
				width: 250px;
				aspect-ratio: 1;
				border-radius: 50%;
				object-fit: cover;
				/* transform: translateX(-25px); */
			}
		}

		.animation {
			.image {
				animation: image 1.25s ease-out forwards;
			}

			.testimonial {
				animation: testimonial 1s ease-out forwards;

				p:nth-of-type(1) {
					animation: content 1s forwards 0.75s;
				}

				p:nth-of-type(2) {
					animation: content 1s forwards 1s;
				}

				p:nth-of-type(3) {
					animation: content 1s forwards 1.25s;
				}
			}
		}

		.revBtn {
			width: 16px;
			height: 16px;
			border-radius: 1rem;
			display: inline-block;
			border: none;
			background-color: var(--btn);
			cursor: pointer;
			margin: 0 0.1rem;
			transition: all 0.3s;

			&.expand {
				background-color: var(--primary);
				width: 24px;
			}

			&:hover {
				background-color: var(--sub-1);
			}
		}


	}

}

@keyframes image {
	100% {
		transform: translateX(0);
	}
}

@keyframes testimonial {
	50% {
		opacity: 1;
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes content {
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.contact-section {
	padding: 60px 0px;

	.section-top {
		margin-bottom: 0px;
	}

	.sub {
		font-size: 28px;
		color: #fff;
		font-weight: 400;
		text-align: center;
		margin-bottom: 40px;

		span {
			color: #23add1;
		}
	}

	.form {
		width: 80%;
		margin: 0px auto;

		.comn-inp {
			padding: 14px 14px;
			background-color: #fff;
			border-radius: 10px;
			width: 100%;
			margin-bottom: 20px;
			border: 1px solid #fff;
			outline: none;
		}

		.primary-btn {
			padding: 14px 30px;
		}
	}
}





footer {
	background-color: #0a0b0c;

	.container {
		border-top: 1px solid #fff;
		border-bottom: 1px solid #fff;
		padding: 40px 0px;

		.footer-logo {
			display: block;
			margin: 0px auto;
			max-width: 380px;
		}

		h6 {
			font-size: 22px;
			color: #fff;
			font-weight: 600;
			margin-top: 20px;
			margin-bottom: 10px;
			text-align: center;
		}

		.contact-details {
			display: flex;
			gap: 14px;
			justify-content: center;
			align-items: center;

			li {
				display: flex;
				align-items: center;
				gap: 10px;

				span {
					font-size: 17px;
					color: #fff;
					font-weight: 700;
				}

				a {
					color: #fff;
					font-size: 17px;
					font-weight: 400;
				}
			}

			li.divider {
				height: 24px;
				width: 2px;
				border-left: 1px solid #fff;
				display: block;
			}
		}

		.scan {
			display: flex;
			justify-content: center;
			gap: 30px;
			align-items: center;
			margin-top: 30px;

			p {
				font-size: 18px;
				font-weight: 700;
				color: #fff;
			}

			.code {
				img {
					width: 70px;
					height: auto;
				}
			}
		}
	}

	.copy {
		font-size: 14px;
		font-weight: 500;
		padding: 16px 0px;
		text-align: center;
		color: #fff;
	}
}

@media (max-width: 1440px) {}

@media (max-width: 1199px) {}

@media (max-width: 991px) {}

@media (max-width: 767px) {}

@media (max-width: 576px) {}

.work-section .stylish-top .scroller .scroller__inner {
	li {
		font-size: 125px;
		color: #fff;
		font-weight: bold;
		white-space: nowrap;

		img.animate-rotate {
			width: 150px;
			animation: rotate-animation 15s infinite linear;
			-webkit-animation: rotate-animation 15s infinite linear;
		}
	}
}

@keyframes rotate-animation {
	0% {
		transform: rotate(0deg);
	}

	50% {
		transform: rotate(180deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.nav-link.sub.active {
	color: #23add1 !important;
}


#branding {
	.databox {
		max-height: 550px;
		overflow: hidden;

		.scroller {
			width: 100%;
		}
	}
}

#calendar,
#optimisation,
#postdesign,
#localseo,
#companypage,
#ghostwriting,
#organic,
#primarypackage,
#secondarypackage,
#tertiarypackage,
#visitingcard,
#envelopes,
#letterhead,
#InstagramFacebook,
#LinkedIn,
#PageAds,
#GoogleAds,
#InstagramFacebookAds,
#GoogleBusiness,
#illustration,
#d3d2creation,
#motiongraphics,
#brandvideo,
#ThirdParty,
#PageListing,
#sponsorships,
#content,
#website,
#collaborations,
#catalogue {
	.horizontal {
		margin-top: 100px;
	}

	li {
		color: #fff;
		font-size: 24px;
		font-weight: 700;
		white-space: nowrap;
	}
}

#LinkedIn,
#SEOlotus,
#SEOanmol {
	.databox {
		max-height: 550px;
		overflow: hidden;

		.scroller {
			width: 100%;

			li {
				min-width: 300px;

				img {
					width: 100%;
					height: auto;
					object-fit: cover;
				}
			}
		}
	}
}

#packaging {
	.databox {
		max-height: 550px;
		overflow: hidden;

		.scroller {
			width: 100%;

			li {
				min-width: 300px;
				height: 300px;

				img {
					width: 100%;
					height: auto;
					object-fit: cover;
				}
			}
		}
	}
}

#logo {
	.databox {
		max-height: 550px;
		overflow: hidden;

		.scroller {
			width: 100%;

			li {
				min-width: 180px;
				height: 180px;

				img {
					width: 100%;
					height: auto;
					object-fit: cover;
				}
			}
		}
	}
}

/* General Reset & Layout */
.tag-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tag-list li {
	border-radius: 0.5rem;
	transition: 300ms;
}

/* Scroller base */
.scroller {
	max-width: 100%;
	overflow: hidden;
	position: relative;
}

.scroller__inner {
	display: flex;
	gap: 1rem;
}

/* Animated state with gradient fade edges */
.scroller[data-direction="horizontal-reverse"][data-animated="true"],
.scroller[data-direction="horizontal"][data-animated="true"] {
	-webkit-mask: linear-gradient(90deg, transparent, white 25%, white 75%, transparent);
	mask: linear-gradient(90deg, transparent, white 25%, white 75%, transparent);
}

.scroller[data-direction="vertical-reverse"][data-animated="true"],
.scroller[data-direction="vertical"][data-animated="true"] {
	-webkit-mask: linear-gradient(0deg, transparent, white 25%, white 75%, transparent);
	mask: linear-gradient(0deg, transparent, white 25%, white 75%, transparent);

	li {
		img {
			width: 100%;
			min-width: 100%;
			height: auto;
			object-fit: cover;
		}
	}
}

/* Direction styles */
.scroller[data-direction="horizontal"] .scroller__inner {
	flex-direction: row;
	animation: scroll-horizontal var(--_animation-duration, 40s) linear infinite;
}

.scroller[data-direction="horizontal-reverse"] .scroller__inner {
	flex-direction: row;
	animation: scroll-horizontal var(--_animation-duration, 40s) linear infinite reverse;
}

.scroller[data-direction="vertical"] .scroller__inner {
	flex-direction: column;
	animation: scroll-vertical var(--_animation-duration, 40s) linear infinite;
	height: max-content;
}

.scroller[data-direction="vertical-reverse"] .scroller__inner {
	flex-direction: column;
	animation: scroll-vertical var(--_animation-duration, 40s) linear infinite reverse;
	height: max-content;
}

/* Speeds */
.scroller[data-speed="slow"] {
	--_animation-duration: 30s;
}

.scroller[data-speed="medium"] {
	--_animation-duration: 20s;
}

.scroller[data-speed="fast"] {
	--_animation-duration: 10s;
}

.scroller[data-speed="superfast"] {
	--_animation-duration: 5s;
}

/* Pause on hover (for both img or li) */
.scroller[data-animated="true"][data-animation-pause="true"] .scroller__inner:has(img:hover, img:focus, li:hover, li:focus) {
	animation-play-state: paused;
}

/* Scroll Animations */
@keyframes scroll-horizontal {
	to {
		transform: translateX(calc(-50% - 0.5rem));
	}
}

@keyframes scroll-vertical {
	to {
		transform: translateY(calc(-50% - 0.5rem));
	}
}

.video-section {
	.abh {
		position: absolute;
		top: 0%;
		left: 50%;
		transform: translate(-50%, 0);
		width: 100%;
		z-index: 999;
	}

	.scroller__inner {
		gap: 80px;

		li {
			text-align: center;
			font-size: 180px;
			font-family: var(--heading-main);
			color: transparent;
			text-align: center;
			width: max-content;
			-webkit-text-stroke: 2px rgb(255, 255, 255);

			white-space: nowrap;
		}
	}
}

section#video{padding: 0 0px 60px;}
section#home video {
    width: 100%;
}

section#services video.bn-vid {
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin: 0 auto;
}

section#services ul li {
    color: #fff;
    margin: 10px 0 0 21px;
    list-style: disc;
}
.bn-vid {
  filter: grayscale(1);
  transition: filter 0.3s ease;
  cursor: pointer;
}
.nav-btn {
	color: #fff;
	font-size: 20px;
	width: max-content;
	margin-left: auto;
	display: block;
}
.left-header {
	ul {
		display: flex;
		flex-direction: column;
		gap: 14px;
		li {
			a {
				color: var(--black);
				font-family: "gtw-r";
				font-weight: 500;
				font-size: 18px;
				padding: 6px 2px;
				border-bottom: 2px solid transparent;
				transition: 0.3s ease-in-out;
			}
		}
	}
}

.wpcf7 form.invalid .wpcf7-response-output{color:#fff;}
.wpcf7 form.sent .wpcf7-response-output{color:#fff;}

img.btmlogo {
    width: auto;
    margin: 0 auto;
    float: none;
    display: table;
}



  @media (max-width: 1440px) { 
    
  }

  @media (max-width: 1199px) { 

  }

  @media (max-width: 991px) { 
	.banner-area {
		height: 100%;
		min-height: 100%;
		padding: 0px 0px 0px;
		.content {
			h2 {
				font-size: 80px;
			}
		}
	}
	.video-section {
		& .scroller__inner {
			li {
				font-size: 120px;
			}
		}
	}
	.work-section .stylish-top .scroller .scroller__inner {
		li {
			font-size: 90px;
		}
	}
	.work-section {
		& .row {
			& .item {
				.pic {
					height: auto;
				}
			}
		}
	}
	.services-area {
		padding: 30px 0px;
	}
	.about-area {
		padding: 30px 0px;
		.left {
			padding-left: 0px;
			h3 {
				line-height: 100%;
				font-size: 90px;
			}
		}
		.right {
			h4 {
				font-size: 38px;
				margin-bottom: 10px;
			}
			p {
				font-size: 16px;
			}
		}
    & .parson-bg {
		flex-direction: column-reverse;
		padding: 30px 20px 0px;
		.content-side {
			padding-left: 0px;
			h5 {
				font-size: 32px;
				margin-bottom: 10px;
			}
			p {
				font-size: 18px;
			}
			p.fw-bold {
				font-size: 22px;
			}
		}
        .parson {
            position: relative;
            bottom: 0px;
            left: unset;
            width: 50%;
            margin: 30px auto 0px;
        }
    }
}
.stylish-top {
	margin-bottom: 20px;
    h3 {
        font-size: 90px;
    }
	.section-title {
		font-size: 80px;
		margin-top: -70px;
	}
}
.testimonials-area {
	padding: 30px 0px;
}
.section-top {
	margin-bottom: 20px;
    .section-title {
        font-size: 90px;
    }
}
.contact-section {
	padding: 30px 0px;
}
.logo-section {
    .container {
        padding: 30px 0px;
        margin-top: 14px;
    }
}
.contact-section {
    .sub {
        font-size: 20px;
        margin-bottom: 20px;
    }
	.form {
        width: 100%;
    }
}
footer {
    .container {
        padding: 0px 0px 20px;
		.contact-details {
            flex-direction: column;
			li {
                flex-wrap: wrap;
                justify-content: center;
            }
			li.divider {
				display: none;
			}
        }
		.scan  {
			p {
				font-size: 16px;
				text-align: center;
			}
		}
    }
}
.testimonials-area {
    .reviews-slider {
        width: 100%;
		max-width: unset;
        overflow: hidden;
		.ReviewSlider {
            width: 100%;
            height: auto;
			.reviewitem {
				.image {
					width: 160px;
					right: 30px;
				}
				.testimonial {
					width: 75%;
					padding: 10px;
					padding-top: 20px;
					padding-right: 30px;
					p:nth-of-type(1) {
						font-size: 15px;
					}
				}
			}
        }
    }
}

  }
  @media (max-width: 767px) { 
    .banner-area {
        & .content {
        	top: 70%;
       		width: 100%;
            h2 {
                font-size: 50px;
            }
			.cover {
				margin-bottom: 16px;
			}
			.primary-btn {
				font-size: 16px;
			}
        }
    }
	.work-section .stylish-top .scroller .scroller__inner {
        li {
            font-size: 50px;
        }
    }
	.video-section {
        & .scroller__inner {
            li {
                font-size: 80px;
            }
        }
    }
	.section-top {
        .section-title {
            font-size: 50px;
        }
    }
	.about-area {
        & .left {
            h3 {
                line-height: 100%;
                font-size: 70px;
            }
        }
    }
	.stylish-top {
		margin-bottom: 10px;
		h3 {
			font-size: 60px;
		}
        .section-title {
        	font-size: 50px;
            margin-top: -36px;
        }
    }
    .contact-section {
        .sub {
            font-size: 17px;
            margin-bottom: 15px;
        }
    }


.about-area {
		.left {
			h3 {
				font-size: 60px;
			}
		}
		.right {
			h4 {
				font-size: 32px;
			}
			p {
				font-size: 16px;
			}
		}
    & .parson-bg {
		padding: 25px 20px 0px;
		.content-side {
			padding-left: 0px;
			h5 {
				font-size: 28px;			}
			p {
				font-size: 16px;
			}
			p.fw-bold {
				font-size: 18px;
			}
		}
    }
}
.testimonials-area {
        & .reviews-slider {
            & .ReviewSlider {
                .reviewitem {
					flex-direction: column-reverse;
					.image {
                        width: 160px;
                        right: 0px;
						margin-bottom: -70px;
						position: static;
                    }
					.testimonial {
						width: 100%;
						padding: 80px 10px 10px;
						min-height: 200px;
						margin: 0px 15px;
					}
                }
            }
        }
}












  }
  @media (max-width: 576px) {
	.about-area {
        & .parson-bg {
			            margin: 0px 3px;
			padding: 25px 0px 0px;
            .parson {
           
                width: 60%;
                margin: 30px auto 0px;
            }
        }
    }
	.work-section {
		& .row {
			& .item {
				.work-link {
					display: block;
					padding: 20px 10px;
					.name {
						font-size: 28px;
					}
					p {
						font-size: 18px;
					}
				}
			}
		}
	}

.video-section {
    & .video-area {
        video {
            border-radius: 10px;
                width: 342px !important;
                object-fit: contain !important;
        }
    }
}
header {
	padding: 15px 0px 10px;
}
.banner-area {
	height: 100%;
    min-height: 100%;
    padding: 85px 0px 0px;
	.content {
		top: 75%;
        width: 100%;
        h2 {
            font-size: 30px;
        }
		.primary-btn {
			padding: 5px 16px;
			font-size: 14px;
		}
    }
}

.work-section {
    & .row {
        .item {
            padding: 20px;
            margin-bottom: 0;
        }
    }
}

.services-area {
    & .nav-pills {
        .nav-link {
            font-size: 18px;
        }
    }
}








  }