/*=========================================
    AI FILM HERO SECTION
==========================================*/
#header {
	background: transparent;
}
.section-subtitle i{
        color: #fdce02;
}
.ai-hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	background:
		linear-gradient(90deg,
			rgba(0, 0, 0, .92) 0%,
			rgba(0, 0, 0, .75) 45%,
			rgba(0, 0, 0, .35) 100%),
		url("../img/ai-page/hero-bg.webp");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding-top: 40px;
}

.ai-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 82% 18%, rgba(253, 206, 2, .30), transparent 25%),
		radial-gradient(circle at 75% 80%, rgba(253, 206, 2, .12), transparent 30%),
		linear-gradient(90deg,
			rgba(0, 0, 0, .35),
			transparent);
	z-index: 1;
}

.ai-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../images/noise.png");
	opacity: .05;
	mix-blend-mode: overlay;
	z-index: 2;
}

.ai-hero .container {
	position: relative;
	z-index: 10;
}

.hero-tag {
	display: inline-block;
	padding: 10px 20px;
	border: 1px solid rgba(253, 206, 2, .35);
	color: #fdce02;
	border-radius: 50px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: 25px;
	background: rgba(253, 206, 2, .08);
}

.ai-hero h1 {
	font-size: 48px;
	font-weight: 700;
	line-height: 1.1;
	color: #fff;
	margin-bottom: 25px;
}

.ai-hero h1 span {
	display: block;
	color: #fdce02;
}

.ai-hero p {
	color: rgba(255, 255, 255, .75);
	font-size: 19px;
	line-height: 1.6;
	max-width: 620px;
	margin-bottom: 40px;
}

.hero-btns {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

.btn-main {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 17px 38px;
	background: #fdce02;
	color: #000;
	border-radius: 60px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 60px !important;
	transition: .35s;
	border: 2px solid #fdce02;
	height: 50px;
}

.btn-main:hover {
	background: #fff;
	color: #000;
	transform: translateY(-4px);
}

.btn-outline-1 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 17px 38px;
	border-radius: 60px;
	border: 1px solid #fdce02;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	transition: .35s;
	height: 50px;
}

.btn-outline-1:hover {
	background: #fdce02;
	color: #000;
	transform: translateY(-4px);
}

.hero-image {
	position: relative;
	border-radius: 25px;
	overflow: hidden;
	border: 1px solid rgba(253, 206, 2, .20);
	box-shadow:
		0 40px 80px rgba(0, 0, 0, .55),
		0 0 70px rgba(253, 206, 2, .12);
}

.hero-image::before {
	content: "";
	position: absolute;
	width: 350px;
	height: 350px;
	background: #fdce02;
	filter: blur(180px);
	opacity: .18;
	top: -80px;
	right: -80px;
	z-index: -1;
}

.hero-image img {
	width: 100%;
	display: block;
}

.play-btn {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background: #fdce02;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #000;
	font-size: 30px;
	cursor: pointer;
	transition: .35s;
	box-shadow: 0 0 30px rgba(253, 206, 2, .5);
}

.play-btn:hover {
	transform: translate(-50%, -50%) scale(1.08);
}

.bottom-fade {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 180px;
	background: linear-gradient(transparent, #000);
	z-index: 5;
}

/*=========================================
    RESPONSIVE
==========================================*/

@media(max-width:1199px) {

	.ai-hero h1 {
		font-size: 58px;
	}

}

@media(max-width:991px) {

	.ai-hero {
		text-align: center;
		padding: 120px 0 80px;
		min-height: auto;
	}

	.ai-hero h1 {
		font-size: 48px;
	}

	.ai-hero p {
		margin: 0 auto 40px;
	}

	.hero-btns {
		justify-content: center;
	}

	.hero-image {
		margin-top: 60px;
	}

}

@media(max-width:767px) {

	.ai-hero h1 {
		font-size: 38px;
	}

	.ai-hero p {
		font-size: 16px;
	}

	.hero-btns {
		flex-direction: column;
	}

	.btn-main,
	.btn-outline {
		width: 100%;
	}

	.play-btn {
		width: 70px;
		height: 70px;
		font-size: 22px;
	}

}

/*==========================================
    AI BRAND FILM SECTION
==========================================*/

.brand-film-section {
	padding: 80px 0;
	background: #fff;
	overflow: hidden;
}

.brand-film-section .container {
	max-width: 1320px;
}

/*==========================================
LEFT IMAGE
==========================================*/

.film-gallery {
	position: relative;
}

.main-video {
	position: relative;
	overflow: hidden;
	border-radius: 18px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .12);
}

.main-video img {
	width: 100%;
	height: 520px;
	object-fit: cover;
	display: block;
	transition: .5s;
}

.main-video:hover img {
	transform: scale(1.05);
}

/*==========================================
PLAY BUTTON
==========================================*/

.play-btn {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 82px;
	height: 82px;
	border-radius: 50%;
	background: #fff;
	color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-size: 28px;
	box-shadow: 0 15px 40px rgba(0, 0, 0, .18);
	transition: .35s;
}

.play-btn:hover {
	background: #fdce02;
	color: #000;
	transform: translate(-50%, -50%) scale(1.08);
}

/*==========================================
THUMBNAILS
==========================================*/

.thumb-gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-top: 14px;
}

.thumb {
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	border: 2px solid transparent;
	transition: .35s;
}

.thumb img {
	width: 100%;
	height: 90px;
	object-fit: cover;
	display: block;
	transition: .4s;
}

.thumb:hover img {
	transform: scale(1.08);
}

.thumb.active,
.thumb:hover {
	border-color: #fdce02;
}

/*==========================================
RIGHT CONTENT
==========================================*/

.brand-content {
	padding-left: 35px;
}

.section-subtitle {
	display: inline-block;
	color: #fdce02;
	font-size: 13px;
	letter-spacing: 1px;
	font-weight: 500;
	text-transform: capitalize;
	margin-bottom: 0px;
    border: 1px solid #fdce02 !important;
	padding: 10px 20px;
	border-radius: 22px;
	color: #000;
	background: #FFF8E1;
	padding: 8px 20px;
	border-radius: 22px;
	font-weight: 600;
}

.section-title {
	position: relative;
	display: block;
	font-size: 36px;
	line-height: 1.28em;
	text-align: left;
	color: #222222;
	font-weight: 700;
	margin-bottom: 20px;
	text-transform: capitalize;
	padding: 0px;
	margin-top: 20px !important;

}

.brand-content p {
	font-size: 18px;
	line-height: 1.6;
	color: #666;
	margin-bottom: 45px;
}

/*==========================================
FEATURES
==========================================*/

.feature-row {
	row-gap: 30px;
}

.feature-box img {
	height: 38px;
}

.feature-box {
	position: relative;
	text-align: center;
}

/*.feature-box::after{*/
/*    content:"";*/
/*    position:absolute;*/
/*    right:0;*/
/*    top:15px;*/
/*    width:1px;*/
/*    height:85px;*/
/*    background:#ececec;*/
/*}*/

.feature-row .col-md-3:last-child .feature-box::after {
	display: none;
}

.icon-circle {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	border: 2px solid rgba(253, 206, 2, .35);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 18px;
	transition: .35s;
	background: #fdce02;
}

.icon-circle i {
	font-size: 28px;
	color: #c49a00;
}

.feature-box h6 {
	font-size: 17px;
	font-weight: 600;
	color: #222;
	line-height: 1.5;
	margin: 0;
}

.feature-box:hover .icon-circle {
	background: #fdce02;
	border-color: #fdce02;
	transform: translateY(-6px);
}

.feature-box:hover .icon-circle i {
	color: #000;
}

/*==========================================
RESPONSIVE
==========================================*/

@media(max-width:1199px) {

	.brand-content h2 {
		font-size: 42px;
	}

}

@media(max-width:991px) {

	.brand-film-section {
		padding: 80px 0;
	}

	.brand-content {
		padding-left: 0;
		margin-top: 25px;
	}

	.brand-content h2 {
		font-size: 36px;
	}

	.main-video img {
		height: 360px;
	}

	.feature-box::after {
		display: none;
	}

}

@media(max-width:767px) {

	.brand-film-section {
		padding: 70px 0;
	}

	.brand-content {
		text-align: center;
	}

	.brand-content h2 {
		font-size: 30px;
	}

	.brand-content p {
		font-size: 16px;
	}

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

	.main-video img {
		height: 260px;
	}

	.play-btn {
		width: 65px;
		height: 65px;
		font-size: 22px;
	}

	.icon-circle {
		width: 70px;
		height: 70px;
	}

	.icon-circle i {
		font-size: 22px;
	}

	.feature-box {
		margin-bottom: 25px;
	}

}

.ai-film-section {
	background: #fdce02;
	position: relative;
	overflow: hidden;
	padding: 80px 0px;
}

.ai-film-section::before {
	content: "";
	position: absolute;
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, #f3d9a330 0%, transparent 70%);
	top: -180px;
	left: -180px;
}

.ai-film-section::after {
	content: "";
	position: absolute;
	width: 450px;
	height: 450px;
	background: radial-gradient(circle, #f3d9a320 0%, transparent 70%);
	bottom: -180px;
	right: -180px;
}

.ai-film-section .container {
	position: relative;
	z-index: 2;
}


.feature-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.feature-list li {
	margin-bottom: 16px;
	font-size: 16px;
	color: #000;
	display: flex;
	align-items: center;
}

.feature-list i {
	color: #000;
	font-size: 18px;
	margin-right: 12px;
}

.btn-story {
	background: #111;
	color: #fff;
	padding: 15px 32px;
	border-radius: 10px;
	font-weight: 600;
	transition: .3s;
	border-radius: 60px;
}

.btn-story:hover {
	background: #000;
	color: #fff;
	transform: translateY(-6px);
}

.image-wrapper {
	position: relative;
	overflow: hidden;
	border-radius: 18px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .12);
	margin-left: 30px;
}

.image-wrapper img {
	width: 100%;
	object-fit: cover;
	display: block;
	transition: .5s;
}

.image-wrapper:hover img {
	transform: scale(1.05);
}

.ai-film-section .section-desc {
	color: #000;
	font-size: 18px;
	line-height: 1.6;
}

@media(max-width:991px) {

	.section-title {
		font-size: 42px;
	}

	.section-desc {
		font-size: 16px;
	}

}

@media(max-width:576px) {

	.section-title {
		font-size: 34px;
	}

	.feature-list li {
		font-size: 15px;
	}

	.btn-story {
		width: 100%;
		text-align: center;
	}

}

.business-types {
	background: #fff;
	padding: 80px 0px;
}

.section-tag {
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #b8893f;
	margin-bottom: 12px;
}


.business-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	border-top: 1px solid #ececec;
	border-bottom: 1px solid #ececec;
	margin-top: 20px;
}

.business-card {
	padding: 20px 20px;
	text-align: center;
	border-right: 1px solid #ececec;
	transition: all .35s ease;
	cursor: pointer;
}

.business-card:hover {
	transform: translateY(-10px) scale(1.03);
	box-shadow: 0 20px 40px rgba(0, 0, 0, .08);
	background: #fff;
}

.business-card:first-child {
	border-left: 1px solid #ececec;
}

.business-card i {
	font-size: 24px;
	padding: 19px;
	display: inline-flex;
	text-align: center;
	height: 60px;
	width: 60px;
	margin-bottom: 15px;
	border-radius: 50px;
	color: #222;
	background: #fdce02;
}

.business-card h5 {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 10px;
}

.business-card p {
	font-size: 14px;
	line-height: 1.6;
	color: #000;
	margin: 0;
}

/* Tablet */
@media (max-width:991px) {
	.business-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.business-card {
		border-right: 1px solid #ececec;
		border-bottom: 1px solid #ececec;
	}

	.business-card:nth-child(3n) {
		border-right: none;
	}

	.business-card:nth-last-child(-n+3) {
		border-bottom: none;
	}
}

/* Mobile */
@media (max-width:767px) {
	.business-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.business-card {
		padding: 25px 15px;
	}

	.business-card:nth-child(3n) {
		border-right: 1px solid #ececec;
	}

	.business-card:nth-child(2n) {
		border-right: none;
	}

	.business-card:nth-last-child(-n+2) {
		border-bottom: none;
	}
}

/* Small Mobile */
@media (max-width:480px) {
	.business-grid {
		grid-template-columns: 1fr;
	}

	.business-card {
		border-right: none;
		border-bottom: 1px solid #ececec;
	}

	.business-card:last-child {
		border-bottom: none;
	}
}


.py-80 {
	padding: 80px 0;
}

.ai-services {
	position: relative;
	background: #000;
	z-index: 1;
}

.ai-services::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .82);
	z-index: -1;
}

.services-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 15px;
	margin-top: 35px;
}

.service-card {
	border: 1px solid #fdce0269;
	background: rgba(255, 255, 255, .04);
	backdrop-filter: blur(3px);
	text-align: center;
	padding: 35px 20px;
	border-radius: 10px;
	transition: .35s ease;
}

.service-card i {
	width: 48px;
	height: 48px !important;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	display: inline-flex;
	padding: 14px 20px;
	/* align-items: center; */
	justify-content: center;
	font-size: 22px;
	color: #f9d423;
	transition: all 0.3s ease;
	z-index: 1;
}

.service-card h5 {
	color: #fff;
	font-size: 17px;
	line-height: 1.35;
	font-weight: 500;
	margin-top: 25px !important;
	margin: 0;
}

.service-card:hover {
	transform: translateY(-8px);
	border-color: #fdce02;
	background: rgba(201, 168, 106, .08);
}

.service-card:hover i {
	transform: scale(1.15);
	color: #fdce02;
}

@media(max-width:991px) {

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

}

@media(max-width:767px) {

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

	.service-card {
		padding: 30px 15px;
	}

	.service-card h5 {
		font-size: 20px;
	}

}

@media(max-width:480px) {

	.services-grid {
		grid-template-columns: 1fr;
	}

}

.ai-hero-section {
	background: #fff;
	padding: 70px 0 0;
	overflow: hidden;
}

.section-tag {
	color: #fdce02;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	display: block;
	margin-bottom: 12px;
}

.hero-title {
	font-size: 52px;
	line-height: 1.1;
	color: #111;
	font-weight: 500;
	margin-bottom: 25px;
}

.hero-desc {
	font-size: 18px;
	line-height: 1.6;
	color: #666;
	margin-bottom: 45px;
}

.hero-highlights {
	display: flex;
	gap: 25px;
	flex-wrap: wrap;
	margin-bottom: 30px;
}

.highlight-item {
	border-right: 1px solid #d8d8d8;
	padding-right: 25px;
}

.highlight-item strong {
	display: block;
	font-size: 15px;
	color: #000;
	font-weight: 600;
}

.highlight-item span {
	display: block;
	color: #666;
	font-size: 13px;
}

.hero-earth {
	width: 115%;
	max-width: none;
	margin-left: 40px;
	display: block;
}

@media(max-width:991px) {

	.hero-title {
		font-size: 38px;
	}

	.hero-earth {
		width: 100%;
		margin: 40px 0 0;
	}

	.hero-highlights {
		gap: 18px;
	}

	.highlight-item {
		width: calc(50% - 10px);
		border: none;
		padding: 0;
	}

}

@media(max-width:576px) {

	.ai-hero-section {
		padding: 50px 0;
	}

	.hero-title {
		font-size: 30px;
	}

	.hero-desc {
		font-size: 15px;
	}

	.highlight-item {
		width: 100%;
	}

}


.why-ai-studio {
	background: #000;
	padding: 90px 0;
}


.why-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 12px;
	overflow: hidden;
	background: #090909;
}

.why-item {
	padding: 40px 20px;
	border-right: 1px solid rgba(255, 255, 255, .08);
	transition: .35s;
}

.why-item:last-child {
	border-right: none;
}

.why-item:hover {
	background: linear-gradient(180deg, #000000 25%, #1a1a1a 70%, #ffcf00 100%);
}

.count {
	display: inline-block;
	color: #fdce02;
	font-size: 24px;
	font-weight: 300;
	margin-bottom: 25px;
	position: relative;
}

.section-title span {
	position: relative !important;
	color: #fdce02;
	top: 10px;
	position: absolute;
}

.count:after {

	content: "";
	width: 30px;
	height: 2px;
	background: #fdce02;
	display: block;
	margin-top: 3px;
}

.why-item h4 {
	color: #fff;
	font-size: 18px;
	line-height: 1.4;
	margin-bottom: 18px;
}

.why-item p {
	color: #bdbdbd;
	font-size: 15px;
	line-height: 1.8;
	margin: 0;
}

@media (max-width:991px) {

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

	.why-item {
		border-right: 1px solid rgba(255, 255, 255, .08);
		border-bottom: 1px solid rgba(255, 255, 255, .08);
	}

}

@media (max-width:767px) {

	.section-heading {
		font-size: 34px;
	}

	.why-grid {
		grid-template-columns: 1fr;
	}

	.why-item {
		border-right: none;
	}

}


.process-section {
	background: #fff;
	padding: 80px 0;
	overflow: hidden;
}

.process-section .section-title {
	margin-bottom: 70px;
}

.process-wrapper {
	position: relative;
}

.process-line {
	position: absolute;
	top: 18px;
	left: 8%;
	right: 8%;
	height: 2px;
	background: #fdce02;
	z-index: 1;
}

.process-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 30px;
	position: relative;
	z-index: 2;
}

.process-item {
	text-align: center;
	position: relative;
	transition: .35s;
}

.process-dot {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	margin: 0 auto 35px;
	background: #fff;
	border: 3px solid #fdce02;
	position: relative;
	transition: .35s;
	box-shadow: 0 0 0 8px rgba(253, 206, 2, .12);
}

.process-dot:before {
	content: "";
	position: absolute;
	width: 12px;
	height: 12px;
	background: #fdce02;
	border-radius: 50%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.process-item h4 {
	font-size: 24px;
	margin-bottom: 18px;
	color: #111;
	font-weight: 600;
}

.process-item p {
	font-size: 16px;
	line-height: 1.6;
	color: #000;
	max-width: 220px;
	margin: auto;
}

.process-item:hover {
	transform: translateY(-10px);
}

.process-item:hover .process-dot {
	background: #fdce02;
	box-shadow: 0 0 30px rgba(253, 206, 2, .45);
}

.process-item:hover .process-dot:before {
	background: #000;
}

.process-item:hover h4 {
	color: #fdce02;
}

/************* Tablet *************/

@media(max-width:991px) {

	.process-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 50px 30px;
	}

	.process-line {
		display: none;
	}

	.process-item {
		padding-top: 0;
	}

}

/************* Mobile *************/

@media(max-width:767px) {

	.process-section {
		padding: 70px 0;
	}

	.process-grid {
		grid-template-columns: 1fr;
		gap: 40px;
		position: relative;
	}

	.process-grid:before {
		content: "";
		position: absolute;
		left: 18px;
		top: 18px;
		bottom: 18px;
		width: 2px;
		background: #fdce02;
	}

	.process-item {
		text-align: left;
		padding-left: 70px;
	}

	.process-dot {
		position: absolute;
		left: 0;
		margin: 0;
	}

	.process-item p {
		margin: 0;
		max-width: 100%;
	}

	.process-item h4 {
		font-size: 24px;
	}

}

/*==============================
Touchpoints
==============================*/

.brand-touchpoints {

	background: #050505;
	padding: 80px 0;

}

.touchpoint-grid {

	margin-top: 30px;

	display: grid;

	grid-template-columns: repeat(5, 1fr);

	gap: 18px;

}

.touch-card {
	border: 1px solid #fdce0269;
	padding: 13px 11px;
	text-align: center;
	background: #f4f4f4;
	transition: .35s;
	background: #100c0c;
	position: relative;
	overflow: hidden;
	border-radius: 50px;

}


.touch-card:hover {

	transform: translateY(-8px);

	border-color: #fdce02;

}


.touch-card span {

	color: #fff;

	font-size: 17px;

	font-weight: 500;

}


/*==============================
CTA
==============================*/

/*==========================
Brand Story Section
==========================*/

.brand-story-section{
    padding:100px 0;
    background:#fff;
    position:relative;
    overflow:hidden;
}

.brand-story-section:before{

    content:"";

    position:absolute;

    left:-10%;

    bottom:-120px;

    width:900px;

    height:320px;

    background:
    radial-gradient(circle,
    rgba(253,206,2,.10),
    transparent 70%);

    transform:rotate(-8deg);

}


/*==========================
Left
==========================*/

.story-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:40px;

    background:#fff7dd;

    color:#b57b00;

    font-size:14px;

    letter-spacing:1px;

    font-weight:600;

    margin-bottom:28px;

}

.story-tag i{

    color:#fdce02;

    font-size:18px;

}



.story-divider{

    width:120px;

    height:4px;

    background:#fdce02;

    border-radius:20px;

    margin-bottom:35px;

}

.story-desc{

    font-size:18px;

    line-height:1.6;

    color:#666;

    max-width:720px;

    margin-bottom:40px;

}


/*==========================
Features
==========================*/

.story-features{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:30px;
    width:100%;
}

.story-features .feature-item {
    border-radius: 10px;
    width: 100%;
    text-align: center;
    border: 1px solid #fdce02;
    padding: 20px;
    /* background: #eee; */
}

/*.feature-item:not(:last-child):after{*/

/*    content:"";*/

/*    position:absolute;*/

/*    right:-18px;*/

/*    top:18px;*/

/*    width:1px;*/

/*    height:90px;*/

/*    background:#ececec;*/

/*}*/

.feature-icon{

    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 1px solid rgba(253, 206, 2, .35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* margin: auto auto 20px; */
    transition: .35s;
    background: #fff8e1;

}

.feature-icon i{

    font-size:26px;

    color:#000;

}

.feature-item:hover .feature-icon{

    background:#fdce02;

    transform:translateY(-8px);

    box-shadow:0 18px 35px rgba(253,206,2,.35);

}

.feature-item:hover i{

    color:#000;

}

.feature-item h6{

    font-size:18px;

    line-height:1.6;

    font-weight:600;

    color:#222;

}


/*==========================
Right Card
==========================*/

.brand-card{
    position:relative;
    overflow:hidden;

    padding:38px;
    height:500px;

    border:2px solid #fdce02;
    border-radius:28px;

    background:url("../img/ai-page/bg-02.png") center bottom/cover no-repeat;
}

/* Dark cinematic overlay */
.brand-card::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.45) 0%,
            rgba(0,0,0,.20) 35%,
            rgba(0,0,0,.55) 100%
        );

    z-index:1;
}

/* Gold spotlight (optional but recommended) */
.brand-card::after{
    content:"";
    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at bottom right,
            rgba(253,206,2,.22) 0%,
            rgba(253,206,2,.08) 18%,
            transparent 45%
        );

    z-index:2;
    pointer-events:none;
}

/* Keep content above overlays */
.brand-card > *{
    position:relative;
    z-index:3;
}


/*==========================
Buttons
==========================*/

.btn-primary-custom{

    display:flex;

    align-items:center;

    justify-content:space-between;

    background:#fdce02;

    color:#111;

    padding:18px 24px;

    border-radius:14px;

    text-decoration:none;

    font-size:18px;

    font-weight:600;

    margin-bottom:18px;

    transition:.35s;

}

.btn-primary-custom:hover{

    transform:translateY(-4px);

    color:#111;

}

.btn-outline-custom{

    display:flex;

    align-items:center;

    justify-content:space-between;

    border:2px solid rgba(253,206,2,.45);

    color:#fff;

    padding:18px 24px;

    border-radius:14px;

    text-decoration:none;

    font-size:18px;

    font-weight:500;

    transition:.35s;

}

.btn-outline-custom:hover{

    background:#fdce02;

    color:#111;

}

.btn-primary-custom i,

.btn-outline-custom i{

    font-size:24px;

}

.social-grid{
    display:flex;
    align-items:flex-start;
    gap:15px;
    margin-top:25px;
}

.social-box{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-decoration:none;
    transition:.35s ease;
}

.social-icon{
    width:58px;
    height:58px;
    border:1px solid rgba(253,206,2,.55);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.35s;
    background:rgba(255,255,255,.02);
}

.social-icon i{
    color:#fff;
    font-size:24px;
    transition:.35s;
}

.social-box small{
    margin-top:10px;
    color:#d8d8d8;
    font-size:13px;
    font-weight:500;
    transition:.35s;
}

.social-box:hover .social-icon{
    background:#fdce02;
    border-color:#fdce02;
    transform:translateY(-5px);
    box-shadow:0 10px 25px rgba(253,206,2,.35);
}

.social-box:hover .social-icon i{
    color:#000;
}

.social-box:hover small{
    color:#fdce02;
}










/*=========================================
    CUSTOM RESPONSIVE FIXES FOR TABLET & MOBILE
==========================================*/

@media (max-width: 991px) {
    /* General Grid Adjustments */
    .services-grid,
    .why-grid,
    .touchpoint-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .story-features {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Typography Adjustments */
    .ai-hero h1,
    .hero-title,
    .section-title {
        font-size: 36px !important;
        line-height: 1.2 !important;
    }

    .ai-hero p,
    .brand-content p,
    .ai-film-section .section-desc,
    .hero-desc,
    .story-desc {
        font-size: 16px !important;
    }

    /* Spacing & Alignment */
    .brand-content {
        padding-left: 0 !important;
        text-align: center;
    }

    .image-wrapper {
        margin-left: 0 !important;
        margin-top: 30px;
    }

    .brand-card {
        height: auto !important;
        padding: 25px !important;
    }
}

@media (max-width: 767px) {
    .ai-hero {
        text-align: center;
        padding: 120px 0 60px 0px;
        min-height: auto;
    }
    .min-vh-100 {
    min-height: 70vh !important;
}
    /* Single Column Layouts for Mobile */
    .services-grid,
    .why-grid,
    .touchpoint-grid,
    .story-features {
        grid-template-columns: 1fr !important;
    }

    .business-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Buttons and CTAs */
    .hero-btns {
        flex-direction: column !important;
    }

    .btn-main,
    .btn-outline-1,
    .btn-story {
        width: 100% !important;
        text-align: center !important;
    }

    /* Font Scaling */
    .ai-hero h1,
    .hero-title,
    .section-title {
        font-size: 30px !important;
    }

    /* Images and Cards */
    .main-video img {
        height: 280px !important;
    }

    .social-grid {
        justify-content: center;
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    /* Small Mobile Adjustments */
    .business-grid {
        grid-template-columns: 1fr !important;
    }

       .ai-hero h1, .hero-title, .section-title {
        font-size: 28px !important;
        margin-top: 0px;
    }

    .service-card,
    .brand-card,
    .why-item {
        padding: 20px 15px !important;
    }
}


.desktop{
    display:block;
}

.mobile{
    display: none;
}




.recent-work-section {
  background-color: #fff;
  padding: 80px 0px 0px ;
  color: #ffffff;
  font-family: inherit;
  text-align: center;
}


.recent-work-section .video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.recent-work-section .video-card {
  background: #141414;
  border: 1px solid #222222;
  border-radius: 12px;
  overflow: hidden;
  text-align: left;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.recent-work-section .video-card:hover {
  transform: translateY(-5px);
  border-color: #f3ce34;
}

.recent-work-section .video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
}

.recent-work-section .video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.recent-work-section .video-info {
  padding: 20px;
}

.recent-work-section .video-info h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #ffffff;
  margin-top: 0px;
}

.recent-work-section .video-info p {
  font-size: 14px;
  color: #f3ce34;
  margin: 0;
}

/*MObile CSss*/

@media only screen and (max-width: 767px) {
 .desktop{
    display:none;
}

.mobile{
    display: block;
}
.section-title{
    text-align: center;
}
    .brand-film-section {
        padding: 60px 0;
    }
    .brand-content {
        padding-left: 0;
        margin-top: 0px;
    }
    .feature-box {
        margin-bottom: 0px;
    }
    .ai-film-section {
    padding: 60px 0px;
}
.business-types {
    background: #fff;
    padding: 60px 0px;
}
    .business-card {
        border: 1px solid #ececec !important;
    }
    .business-card h5 {
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 10px;
}
.py-80 {
    padding: 60px 0;
}
.service-card, .brand-card, .why-item {
        padding: 30px 15px !important;
    }
    .ai-hero-section{
        text-align: center;
    }
        .ai-hero-section {
        padding: 50px 0 0px;
    }
        .hero-earth {
        width: 100%;
        margin: 0px 0 0;
    }
        .highlight-item {
        width: 100%;
        background: #fff;
        border: 1px solid #eee !important;
        border-radius: 10px;
        padding: 10px;
    }
    .service-card, .brand-card, .why-item {
        padding: 30px 15px !important;
        /* border: 1px solid #fff !important; */
        text-align: center;
    }
    .why-ai-studio {
    background: #000;
    padding: 60px 10px;
}
    .process-section {
        padding: 60px 0;
    }
    .process-section .section-title {
    margin-bottom: 40px;
}
    .process-item h4 {
        font-size: 21px;
        margin-top: 0px;
    }
    .brand-touchpoints {
    background: #050505;
    padding: 60px 0;
}
.brand-story-section {
    padding: 60px 0;
    background: #fff;
    position: relative;
    overflow: hidden;
    text-align: center;
}
.btn-primary-custom {
    display: inline-flex;
    justify-content: space-between;
    padding: 18px 13px;
    border-radius: 14px;
    font-size: 21px;
}
    .process-item {
        text-align: left;
        padding-left: 59px;
    }
    .section-subtitle {
    display: inline-block;
    color: #000;
    font-size: 12px;
    }
        .ai-hero h1, .hero-title, .section-title {
        margin-bottom: 5px;
    }
    
    .recent-work-section {
    padding: 60px 0px 0px;
}
.recent-work-section .video-grid {
    grid-template-columns: repeat(1, 1fr);
    margin-top: 20px !important;
}

}