/*
Theme Name: Meraaki Group
Theme URI: https://example.com/meraakigroup-child
Description: A child theme of Twenty Twenty
Author: Your Name
Author URI: https://example.com
Template: twentytwenty
Version: 1.0.0
*/

/* Import styles from the parent theme */
@import url("../twentytwenty/style.css");

/* Add your custom styles below */
@media (min-width: 1200px) {
	.container, .container-lg, .container-md, .container-sm, .container-xl {
		max-width: 1040px;
	}
}
/**********/
body{
	overflow-x:hidden;
}
body.custom-background.light, body.custom-background.light #site-header {
	background-color: #fff;;
}
#site-header{
	/* 	position: fixed; */
	width: 100%;
	z-index: 999999;
	background: linear-gradient(180deg, #121212 69.07%, rgba(18, 18, 18, 0) 100%)!important;
	background-color:unset!important;
}
.sticky {
	width: 100%;
	position: fixed!important;
	transition: top 0.3s ease;
	z-index: 1000; /* Keep it on top */
}
.light #site-header{
	background: unset!important;
	background-color:#fff!important;
}
#site-header .col-sm-6.hide-mobile{
	display:flex;
	align-items: center;
	justify-content: flex-end;
}
#site-header ul.primary-menu{
	margin-left: 0px;
}
#site-header .col-lg-5{
	padding:0px;
}
.custom-logo, .footer-logo .light-logo, .social-links .light{
	display:none!important;	
}
.agency-section img.light-mode, .light .agency-section img.dark-mode{
	display:none;
}
.light .agency-section img.light-mode{
	display:block;
}
.agency-section .cards.gmp{
	padding:103px 0px 48px 28px;
}
.agency-section .cards.gmp img{
	width:130px;
}
.agency-section .cards.gmp:before{
	content: ' ';
	background: linear-gradient(178.6deg, rgba(18, 18, 18, 0) 1.65%, rgba(18, 18, 18, 0.52) 32.12%, #121212 63.45%);
	position: absolute;
	left: 0;
	right: 0;
	top: 0px;
	bottom: 0px;
	width: 100%
}
.agency-section .cards.gmp {
	padding: 145px 0px 24px 23px;
	border-radius: 24px;
	background-image: url(https://dev.meraakigroup.com/wp-content/uploads/2024/10/e5f900d7fda865c7a24da926de812f5b-1.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center right;
	position: relative;
	margin-bottom: 20px;
}
.agency-section .cards.id{
	padding:129px 0px 23px 28px;
}
.agency-section .cards.id img{
	width:136px;
}
.agency-section .cards.id:before{
	content: ' ';
	background: linear-gradient(178.6deg, rgba(18, 18, 18, 0) 1.65%, rgba(18, 18, 18, 0.52) 32.12%, #121212 63.45%);
	position: absolute;
	left: 0;
	right: 0;
	top: 0px;
	bottom: 0px;
	width: 100%;
}
.agency-section .cards.id{
	padding: 145px 0px 24px 23px;
	border-radius: 24px;
	background-image: url(https://dev.meraakigroup.com/wp-content/uploads/2024/10/a72f2317fddc87c1d18b69142ecf8779.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center right;
	position: relative;
	margin-bottom: 20px;
}
.agency-section .cards.autonomix{
	padding:209px 0px 22px 28px;
	border-radius: 24px;
	background-image: url(https://dev.meraakigroup.com/wp-content/uploads/2024/10/90c7afb19527783d13047dc1784b33be.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center right;
	position: relative;
	margin-bottom: 20px;
}
.agency-section .cards.autonomix img{
	width:191px;
}
.agency-section .cards.autonomix:before{
	content: ' ';
	background: linear-gradient(178.6deg, rgba(18, 18, 18, 0) 1.65%, rgba(18, 18, 18, 0.52) 32.12%, #121212 63.45%);
	position: absolute;
	left: 0;
	right: 0;
	top: 0px;
	bottom: 0px;
	width: 100%;
}
/**********/
#site-header{
	padding: 34.38px 0px;
}
#site-header .container .row{
	align-items: center;
}
#site-header .custom-btn{
	float:right;
	margin-left:35px;
}
#site-header .col-lg-4{
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
#site-header .custom-btn a, .form-div .wpcf7-submit{
	font-family: "Roboto", sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 31.5px;
	letter-spacing: 0.03em;
	color: #AEEBB4;
	text-decoration: underline;
	text-underline-offset:10px;
}
.form-div .wpcf7-submit, .light .form-div .wpcf7-submit{
	margin-bottom:0px;
	padding: 4px 19px;
	background: transparent;
	text-transform: capitalize;
}
.light .form-div .wpcf7-submit{
	border:unset;
}
.light #site-header .custom-btn a{
	color: #005734;
}
#site-header .site-logo img, .dark-logo{
	width: 165px;
	max-width: 100%;
}
.light .dark-logo, .light .footer-logo .dark-logo, .light .social-links .dark{
	display:none;
}
.light .custom-logo, .light .footer-logo .light-logo, .light .social-links .light {
	display: block !important;
}
#site-header .primary-menu li a, .mobile-menu li a{
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 17.78px;
	text-align: center;
	color: #fff;
}
.mobile-menu li a{
	text-align: left;
}
.light #site-header .primary-menu li a, .light .light-label, .light .mobile-menu li a{
	color:#121212;
}
.light .dark-label{
	color:#BABABA;
}
.light .light-label{
	font-weight:600;
}
.light .mobile-menu li a{
	color:#fff;
}
.primary-menu > li {
	margin: 12px 21px 0 21px;
	line-height: 0px;
}
#site-header .site-logo{
	float:left;
}
ul.primary-menu{
	justify-content: center;
	margin-left: 15px;
}
#site-footer{
	background: linear-gradient(106.01deg, #AEEBB4 -20.93%, #405242 41.39%, #384739 52.24%, #303C32 66.07%, #272F28 78.02%, #121212 102.94%);
	padding:90px 0px;
}
.light #site-footer{
	background: linear-gradient(105.43deg, rgba(130, 190, 200, 0.42) 1.04%, rgba(241, 241, 255, 0.42) 95.15%);
	padding:90px 0px;
}
#site-footer .container .row{
	display:unset!important;
}
#site-footer .footer-content{
	text-align:center;
	padding-bottom:40px;
	margin-bottom:40px;
	border-bottom:1px solid #fff;
}
.light #site-footer .footer-content{
	border-bottom:1px solid #313131;
}
#site-footer h5{
	font-family: "Hepta Slab", serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 30px;
	letter-spacing: -0.02em;
	color: #AEEBB4;
	margin:0px;
	margin-bottom:8px!important;
}
.light #site-footer h5{
	color: #144568;
}
#site-footer h2{
	font-family: "Roboto", sans-serif;
	font-size: 45px;
	font-weight: 400;
	line-height: 58px;
	color: #fff;
	margin:0px;
	margin-bottom:8px!important;
}
.light #site-footer h2, .light #site-footer p{
	color:#111111;
}
#site-footer p{
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 28px;
	letter-spacing: 0.03em;
	color: #fff;
	margin:0 auto;
	margin-bottom:40px!important;
}
#site-footer i{
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	font-weight: 100;
	line-height: 17.07px;
	text-align: center;
	color: #fff;
}
.light #site-footer i{
	color: #181818;
}
.footer-bottom{
	display: flex;
	justify-content: space-between;
}
.footer-bottom .footer-logo img{
	width:165px;
}
.social-links{
	display: flex;
	column-gap: 24px;
}
.social-links a img{
	width:43px;
}
.banner-section{
	/* 	padding: 390px 0px 226px; */
	padding: 390px 0px 400px;
}
.banner-section .video-overlay{
	height:751px;
	max-height:100%;
}
.light-mode-video, .light .dark-mode-video{
	display:none;
}
.light .light-mode-video{
	display:block;
}
.clipped-video {
	width: 100%;
	overflow: hidden;
	-webkit-mask-image: url('/wp-content/uploads/2024/10/Rectangle-4306-1.png'); /* Use your image URL */
	mask-image: url('/wp-content/uploads/2024/10/Rectangle-4306-1.png'); 
	-webkit-mask-size: contain;
	mask-size: contain;
	mask-position: center top;
	mask-repeat: no-repeat;
}
.clipped-video.mask-image{
	-webkit-mask-image: none; /* Use your image URL */
	mask-image: none;
}
.clipped-video::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5); 
	pointer-events: none; 
}
.content-overlay {
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -60%);
	text-align: center;
	color: white;
	width:100%;
}
.full-video .center-wrapper{
	top: 400px;
}
.content-overlay.content-overlay-2 p{
	width:888px;
	max-width:100%;
	margin:0 auto;
}
.content-overlay.visible {
	opacity: 1;
}
.content-overlay-1 {
	z-index: 1;
}
.content-overlay-2 {
	z-index: 1;
}
/* CSS for the button styling */
/* Center wrapper styling */
.center-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw; /* Full viewport width */
	position: relative;
	top: 300px;
}

/* Existing button and arrow styling */
.scroll-button {
	width: 46px;
	height: 93px;
	border: 2px solid #AEEBB4;
	border-radius: 34px;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow:hidden;
	cursor: pointer;
	z-index: 99999;
}

.arrow-image {
	width: 20px; 
	position: absolute;
	top: 0; /* Start position */
	animation: moveDown .8s linear infinite;
}

/* Arrow animation */
@keyframes moveDown {
	0% {
		top: 0; /* Start at the top */
		opacity: 1; /* Fully visible */
	}
	100% {
		top: 100%; /* Move to the bottom */
		opacity: 0; /* Optional: fade out at the bottom */
	}
}


/*
.banner-section {
background-image: url(https://dev.meraakigroup.com/wp-content/uploads/2024/10/Rectangle-4306-1.png);
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
}*/
.content-overlay h1{
	font-family: "Roboto", sans-serif;
	font-size: 40px;
	font-weight: 700;
	line-height: 46.88px;
	letter-spacing: 0.08em;
	text-align: center;
	margin-bottom:16px!important;
	margin:0px;
}
.content-overlay h1 span{
	font-weight: 400;
}
.content-overlay p{
	font-family: "Roboto", sans-serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 36px;
	text-align: center;
	width:682px;
	max-width:100%;
	margin:0 auto;
} 
.video-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 1;
}
.background-video {
	width: 100%;
	/* 	height: 100%; */
	object-fit: cover;
}
.banner-section {
	position: relative;
	overflow: hidden;
}
h1, p {
	margin: 0;
}
.agency-section {
	padding:120px 0px;
}
.agency-section h5, .sponser-section h5, .about-section h5, .leadership-section .heading h5{
	font-family: "Roboto", sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 30px;
	letter-spacing: -0.02em;
	/* 	text-align: left; */
	margin:0px;
	color: #AEEBB4;
}
.agency-section h3, .sponser-section h3, .about-section h3, .leadership-section .heading h3{
	font-family: "Montserrat", sans-serif;
	font-size: 32px;
	font-weight: 600;
	line-height: 48px;
	letter-spacing: 0.04em;
	/* 	text-align: left; */
	margin:0px;
	width:825px;
	max-width:100%;
	color: #fff;
}
.leadership-section{
	padding:80px 0px;
	overflow-x:hidden;
	background-image: url(https://dev.meraakigroup.com/wp-content/uploads/2024/10/Our-Team-min-1-scaled.jpg);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	position:relative;
}
.light .leadership-section{
	background-image: url(https://dev.meraakigroup.com/wp-content/uploads/2024/10/Our-Team-Light-scaled.jpg);
}
.leadership-section:before{
	content: ' ';
	background: linear-gradient(105.43deg, rgba(174, 235, 180, 0.61) 1.04%, rgba(18, 18, 18, 0.61) 75.35%);
	position: absolute;
	width: 100%;
	display: block;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.light .leadership-section:before{
	background: linear-gradient(105.43deg, rgba(130, 190, 200, 0.25) 1.04%, rgba(241, 241, 255, 0.25) 95.15%);
}
.leadership-section .heading h3{
	margin-bottom:24px;
}
.leadership-section .heading p{
	font-family: "Roboto", sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 28px;
	letter-spacing: 0.03em;
	text-align: center;
}
.light .leadership-section .heading p{
	color: #302E2E;
}
.light .agency-section h3, .light .sponser-section h3, .light .about-section h3, .light .leadership-section .heading h3{
	color:#000;
}
.sponser-section h3, .sponser-section h5, .about-section h5, .about-section h3, .leadership-section .heading h3, .leadership-section .heading h5{
	text-align:center!important;
	width:100%!important;
}
.light .agency-section h5, .light .sponser-section h5, .light .about-section h5, .light .leadership-section .heading h5{
	color: #19496C;
}
.agency-section .heading{
	margin-bottom:80px;
}
.agency-section .cards.meraaki-designs{
	padding: 145px 0px 24px 23px;
	border-radius: 24px;
	background-image: url(https://dev.meraakigroup.com/wp-content/uploads/2024/10/c1b29272bcc634f1c95cc24a277fab43-1-1.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position:center right;
	position:relative;
	margin-bottom:20px;;
}
.agency-section .cards.meraaki-designs:before{
	content: ' ';
	background: linear-gradient(178.6deg, rgba(18, 18, 18, 0) 1.65%, rgba(18, 18, 18, 0.52) 32.12%, #121212 63.45%);
	position: absolute;
	left: 0;
	right: 0;
	top: 0px;
	bottom: 0px;
	width: 100%;
}
.light .agency-section .cards.meraaki-designs:before, .light .agency-section .cards.gmp:before, .light .agency-section .cards.id:before, .light .agency-section .cards.autonomix:before{
	background: linear-gradient(180deg, rgba(241, 241, 255, 0) 0%, rgba(171, 209, 221, 0.89) 40%, #99C9D4 55%, #83BFC9 97%);
	border-radius:24px;
}
.agency-section .cards.meraaki-designs:after, .agency-section .cards.gmp:after, .agency-section .cards.id:after, .agency-section .cards.autonomix:after{
	content: ' ';
	left: 0;
	right: 0;
	top: 0px;
	bottom: 0px;
	width: 100%;
	border-radius: 24px;
	background: linear-gradient(190.16deg, #000000 -21.74%, #666666 99.93%);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	border-width: 4px;
	border-style: solid;
	border-image: linear-gradient(190.16deg, #000000 -21.74%, #666666 99.93%) 1;
	position:absolute;
}
.light .agency-section .cards.meraaki-designs:after, .light .agency-section .cards.gmp:after, .light .agency-section .cards.id:after, .light .agency-section .cards.autonomix:after{
	content:none;
}
.agency-section .cards img{
	z-index: 99999;
	position: relative;
	width:68px;
	margin-bottom:12px;
}
.agency-section .cards p{
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 25.6px;
	letter-spacing: 0.03em;
	text-align: left;
	color: #fff;
	margin-bottom: 24px;
	z-index: 99;
	position: relative;
	width: 390px;
	max-width: 100%;
}
.light .agency-section .cards p{
	color:#000;
}
.cards a{
	font-family: "Roboto", sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 31.5px;
	letter-spacing: 0.30000001192092896px;
	margin-left:19px;
	color: #AEEBB4;
	z-index: 9;
	position: relative;
	text-decoration: underline;
	text-underline-offset: 10px;
}
.light .cards a {
	color:#003459;
}
.light .cards a:hover {
	font-weight: 600;
}
.nexus-section{
	padding: 90px 0px;
	background-image: url(https://dev.meraakigroup.com/wp-content/uploads/2024/10/Rectangle-4307-1.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position:relative;
	transition: background-size 0.1s cubic-bezier(0.25, 0.8, 0.25, 1);
	overflow: hidden;
}
.light .nexus-section{
	background-image: url(https://dev.meraakigroup.com/wp-content/uploads/2024/10/Frame-1000004305.png);
}
.nexus-section .content{
	width: 824px;
	max-width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align:center;
	position:relative;
	z-index:99;
}
.nexus-section .content p{
	font-family: "Roboto", sans-serif;
	font-size: 18px;
	font-weight: 300;
	line-height: 27px;
	letter-spacing: 0.06em;
	text-align: left;
	width:358px;
	max-width:100%;
	color: #fff;
}
.light .nexus-section .content p, .light .nexus-section .content h2{
	color: #313131;
}
.nexus-section .content h2{
	font-family: "Roboto", sans-serif;
	font-size: 36px;
	font-weight: 700;
	line-height: 43.88px;
	letter-spacing: 0.03em;
	text-align: center;
	color: #fff;
	margin:0px 0px 24px 0px;
}
.nexus-section .content a{
	font-family: "Roboto", sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 31.5px;
	letter-spacing: 0.03em;
	color: #AEEBB4;
	text-decoration: underline;
	text-underline-offset: 10px;
}
.light .nexus-section .content a{
	color: #003459;
}
.nexus-section:before{
	content: ' ';
	position:absolute;
	top: -70%;
	bottom: 0;
	left: -22%;
	display: block;
	/* 	background: linear-gradient(106.01deg, #AEEBB4 -20.93%, #405242 41.39%, #384739 52.24%, #303C32 66.07%, #272F28 78.02%, #121212 102.94%); */
	z-index:-1;
	background-image: url(https://dev.meraakigroup.com/wp-content/uploads/2024/10/green-circle-min.png);
	background-position: center left;
	background-size: cover;
	width: 70%;
	background-repeat: no-repeat;
}
.light .nexus-section:before, .light .nexus-section:after{
	background-image: url(https://dev.meraakigroup.com/wp-content/uploads/2024/10/blue-circle.png);
}
.nexus-section:after{
	content: ' ';
	position:absolute;
	top: 0;
	right: -22%;
	bottom: -70%;
	display: block;
	/* 	background: linear-gradient(106.01deg, #AEEBB4 -20.93%, #405242 41.39%, #384739 52.24%, #303C32 66.07%, #272F28 78.02%, #121212 102.94%); */
	z-index:-1;
	background-image: url(https://dev.meraakigroup.com/wp-content/uploads/2024/10/green-circle-min.png);
	background-position: center right;
	background-size: cover;
	width: 70%;
	background-repeat: no-repeat;
}
.nexus-section.scale-bg {
	background-size: 130%; /* Scaling the background image */
	transition: background-size 15s ease-in-out;
}
.sponser-section{
	padding:120px 0px;
}
.sponser-section .heading{
	margin-bottom:60px;
}
.about-section .heading{
	margin-bottom:40px;
}
.about-section{
	padding:0px 0px 120px 0px;
}
.about-section h4{
	font-family: "Montserrat", sans-serif;
	font-size: 36px;
	font-weight: 600;
	line-height: 43.88px;
	text-align: center;
	color: #AEEBB4;
	margin: 0px 0px 24px 0px;
}
.light .about-section h4{
	color: #19496C;
}
.about-section .vision { 
	padding:268px 38px 90px 38px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	background-image:url('https://dev.meraakigroup.com/wp-content/uploads/2024/10/Mask-group.png');
	background-position: center top;
	background-size: contain;
	background-repeat: no-repeat;
}
.light .about-section .vision{
	background-image:url('https://dev.meraakigroup.com/wp-content/uploads/2024/10/Mask-group-1.png');
}
.about-section .vision p, .about-section .mission p{
	font-family: "Roboto", sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 30px;
	letter-spacing: 0.06em;
	text-align: center;
}
.light .about-section .vision p, .light .about-section .mission p{
	color:#000;
}
.about-section .mission { 
	padding:166px 59px 273px 59px;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	background-image:url('https://dev.meraakigroup.com/wp-content/uploads/2024/10/Mask-group-2.png');
	background-position: center top;
	background-size: contain;
	background-repeat: no-repeat;
}
.light .about-section .mission{
	background-image:url('https://dev.meraakigroup.com/wp-content/uploads/2024/10/Mask-group-3.png');
}
/*new*/
/* Container for the slider */
.theme-toggle-slider {
	display: flex;
	align-items: center;
	justify-content: center;
}

.slider-container {
	position: relative;
	width: 46px;
	height: 2px;
	background: #AEEBB4;
	border-radius: 12px;
	cursor: pointer;
	margin:0 12px;
}
.light .slider-container {
	background: #121212;
}
.label {
	font-size: 14px;
	color: #fff;
}

.dark-label {
	color: #AEEBB4;
	font-size: 12px;
	line-height: 14px;
	cursor:pointer;
}

.light-label {
	font-size: 12px;
	line-height: 14px;
	color: #fff; /* Greenish for light mode */
	cursor:pointer;
}

/* Sun-Moon handle */
.slider-handle {
	position: absolute;
	top: -8px;
	left: 30px; /* By default, start near the right (moon position) */
	width: 20px;
	height: 20px;
	background-color: transparent;
	transition: all 0.5s ease; /* Smooth transition */
}

.sun-moon {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-image: url('https://dev.meraakigroup.com/wp-content/uploads/2024/10/sun-2.png'); 
	background-size: cover;
	background-position: center;
	transition: background-color 0.4s ease, transform 0.5s ease;
	display: block;
}

/* Sun style */
.sun-mode {
	/* 	background-color: #F8D25A;
	box-shadow: 0 0 10px rgba(255, 223, 0, 0.7); */
	/* 	transform: rotate(0deg) scale(1); */
}

/* Moon style */
.moon-mode {
	background-image: url('https://dev.meraakigroup.com/wp-content/uploads/2024/10/moon.png'); 
	background-size: cover;
	background-position: center;
	/* 	transform: rotate(180deg) scale(1); */
	display: block;
}
.light #owl-carousel.owl-carousel .owl-item img{
	filter: invert(18%) sepia(100%) saturate(500%) hue-rotate(160deg) brightness(90%) contrast(85%);
}
.scroll-image{
	width:154px;
	transform: translateX(0);
	transition: transform 0.5s ease;
	display: block;
	margin: 0 auto;
}
.scroll-image:nth-child(even){
	padding-top:82px
}
.container {
	overflow: hidden;
	position: relative;
	width: 100%;
}
.image-wrapper{
	display: flex;
	column-gap: 50px;
	margin-top:60px;
	align-items: center;
	transition: transform 1s ease-out;
	margin-left:15%;
}
.leadership-section .container-fluid {
	overflow-x: hidden; /* Hide the horizontal scroll bar */
}
.image-wrapper {
	display: flex;
	justify-content: flex-start; /* Align images horizontally */
	width: max-content; /* Allow the container to grow based on the images */
	position: relative;
}

.scroll-image {
	flex-shrink: 0; /* Prevent images from shrinking */
	width: 10%; /* Adjust width based on how many images you have */
	margin-right: 10px; /* Add space between the images */
}
.owl-carousel{
	padding-left:0px;
	padding-right:0px;
}
.testimonial-section .owl-carousel .item{
	width: 754px!important;
	max-width: 100%;
	display: flex;
	column-gap: 31px;
	padding: 30px;
	border: 3px solid;
	background: #fafafa;
	border-radius: 28px;
	border: 3px solid #fff;
	opacity:.3;
}
.testimonial-section .owl-carousel .active .item{
	border: 3px solid #658568;
	background: linear-gradient(105.78deg, #AEEBB4 -32.61%, #323E33 29.16%, #272F28 50.14%, #121212 80.89%);
	opacity:1;
}
.light .testimonial-section .owl-carousel .active .item{
	background: #fafafa;
	border: unset;
	border: 3px solid #fafafa;
}

.owl-carousel .item .content{
	position:relative;
}
.owl-carousel .item .content .meta{
	position:absolute;
	bottom:0;
}
.owl-carousel .item .content p{
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	letter-spacing: 0.06em;
	text-align: left;
	color:#202020;
	padding-top:20px;
	position:relative;
}
.owl-carousel .active .item .content p, .owl-carousel .active .item .content .meta h6, .owl-carousel .active .item .content .meta span{
	color:#fff;
}
.light .owl-carousel .active .item .content p, .light .owl-carousel .active .item .content .meta h6, .light .owl-carousel .active .item .content .meta span{
	color:#202020;
}
.testimonial-section .owl-carousel .item img{
	min-width: 277px;
	height: 302px;
	object-fit: cover;
}
.owl-carousel .item .content .meta h6{
	font-family: "Roboto", sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 23.44px;
	text-align: left;
	margin:0px 0px 5px 0px;
	color:#202020;
}
.owl-carousel .item .content .meta span{
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 16.41px;
	text-align: left;
	color:#202020;
}
.owl-dots button span{
	width: 15px;
	height: 15px;
	display: block;
	border-radius: 10px !important;
	background: #005436;
}
.owl-dots button span{
	background: #EAEAEA;
}
.owl-dots{
	text-align:center;
}
.owl-dots button{
	margin:0px 10px;
}
.owl-dots button.active span{
	background: #AEEBB4;
}
.light .owl-dots button.active span{
	background: #17476B;
}
.owl-carousel .owl-nav{
	text-align:center;
	position: relative;
	height: 50px;
}
.owl-carousel .owl-nav button span{
	font-size:40px;
	color: #AEEBB4;
}
.light .owl-carousel .owl-nav button span{
	color: #17476B;
}
.owl-carousel .owl-nav .owl-prev{
	position: absolute;
	left: 42%;
	top: 67%
}
.owl-carousel .owl-nav .owl-next{
	position: absolute;
	right: 42%;
	top: 67%
}
.owl-carousel .item .content p:after{
	content: ' ';
	background-image:url('https://dev.meraakigroup.com/wp-content/uploads/2024/10/Quotes-1.png');
	background-size:auto;
	background-repeat:no-repeat;
	position:absolute;
	width:37px;
	display:block;
	right:-10px;
	bottom:0;
	top:-10px;
}
.light .owl-carousel .item .content p:after{
	background-image:url('https://dev.meraakigroup.com/wp-content/uploads/2024/10/blue_quote-1.png');
}
.connect-section{
	padding:156px 0px 160px;
}
.connect-box{
	display: flex;
	width:1092px;
	max-width:100%;
	background: linear-gradient(105.89deg, #AEEBB4 -20.93%, #405242 37.47%, #384739 47.64%, #303C32 60.59%, #272F28 71.79%, #121212 95.15%);
	border:3px solid #82ad86;
	border-radius:28px;
	padding:30px 18px;
}
.light .connect-box{
	background: linear-gradient(105.43deg, rgba(130, 190, 200, 0.42) 1.04%, rgba(255, 255, 255, 0.42) 74.45%),
		linear-gradient(294.66deg, rgba(244, 236, 255, 0.3) 20.69%, rgba(130, 190, 200, 0.3) 100%);
	border: 2px solid #0A0D170D;
}
.connect-box img{
	width: 516px;
	max-width: 100%;
}
.form-div{
	padding:40px;
}
.form-div h4{
	font-family: "Roboto", sans-serif;
	font-size: 40px;
	font-weight: 600;
	line-height: 46.88px;
	letter-spacing: -0.02em;
	text-align: left;
	margin:0px 0px 8px 0px;
}
.light .form-div h4, .light .form-div p.para{
	color:#111;
}
.form-div p.para{
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0.06em;
	text-align: left;
	margin-bottom:41px;
}
.form-div form input[type="text"], .form-div form input[type="email"], .form-div form input[type="tel"], .form-div form textarea{
	padding:12px 14px;
	margin-bottom:14px;
	border: 1px solid #FFFFFF33;
	border-radius:5px;
	background: #FFFFFF0D;
}
.light .form-div form input, .light .form-div form textarea{
	border: 1px solid #22222233;
	background: #0000000D;
}
.form-div form input::placeholder, .form-div form textarea::placeholder, .form-div form input, .form-div form textarea{
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 18.75px;
	letter-spacing: -0.01em;
	text-align: left;
	color: #D1D1D1;
}
.form-div form textarea{
	margin-bottom:24px;
}
.light .form-div form input::placeholder, .light .form-div form textarea::placeholder, .light .form-div form input, .light .form-div form textarea{
	color: #00000099;
}
.form-div form input:focus, .form-div form textarea:focus{
	outline: none; 
	box-shadow: none; 
	border-color: #FFFFFF33; 
}
#site-header .custom-btn a:hover, .cards a:hover, .nexus-section .content a:hover, .form-div .wpcf7-submit:hover{
	color:#fff;
	text-decoration: none;
}
.light #site-header .custom-btn a:hover, .light .cards a:hover, .light .nexus-section .content a:hover, .light .form-div .wpcf7-submit:hover{
	color:#121212;
	text-decoration: none;
}
/* Initial states for animation */
.about-section .heading,
.about-section .vision,
.about-section .mission {
	opacity: 0;
	transform: translateY(50px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Animated states when visible */
.about-section .heading.visible,
.about-section .vision.visible,
.about-section .mission.visible {
	opacity: 1;
	transform: translateY(0);
}
.image-wrapper {
	transition: transform 0.2s ease-out;
}
.testimonial-section .owl-stage{
	padding-right: 0px!important;
}
/*Responsive CSS*/
@media (min-width:1440px){
	.testimonial-section .owl-carousel .active, .testimonial-section .owl-carousel .active .item{
		margin: 0 auto;
		margin-left: 20px !important;
		margin-right: 20px !important;
	}
}
@media (max-width:1200px) {
	.primary-menu > li {
		margin: 12px 10px 0 10px;
	}
	.banner-section {
		padding: 290px 0px 290px;
	}
}
@media (max-width:1000px) {
	.content-overlay h1 {
		font-size: 30px;
		line-height: 38.88px;
	}
	.content-overlay p {
		font-size: 18px;
		line-height: 26px;
	}
	.banner-section {
		padding: 230px 0px 230px;
	}
	.agency-section h3, .sponser-section h3, .about-section h3, .leadership-section .heading h3{
		font-size: 26px;
		line-height: 36px;
	}
	.nexus-section .content h2{
		font-size: 30px;
		line-height: 38.88px;
	}
	.about-section h4{
		font-size: 30px;
		line-height: 38.88px;
	}
	.about-section .vision p, .about-section .mission p{
		font-size: 16px;
		line-height: 24px;
	}
	.about-section .vision{
		padding: 200px 38px 60px 38px;
		background-size: cover;
	}
	.about-section .mission{
		padding: 100px 38px 190px 38px;
		background-position: center bottom;
		background-size: cover;
	}
}
@media (max-width:992px) {
	.about-section .vision{
		margin-bottom:40px;
	}
	.connect-box img{
		display:none;
	}
	.agency-section .cards.meraaki-designs, .agency-section .cards.gmp, .agency-section .cards.id{
		margin-bottom:40px;
	}
	#site-header .custom-btn {
		margin-left: 0px;
	}
	#site-header .custom-btn a{
		font-size;14px;
		line-height:22px;
	}
	#site-header .col-lg-3{
		order:1;
		padding-left: 0px;
	}
	#site-header .col-lg-5{
		order:3;
	}
	#site-header .col-lg-4{
		order:2;
		display: flex;
		justify-content: space-evenly;
	}
	#site-header .site-logo img, .dark-logo {
		max-width: 80%;
	}
	#site-header .mobile-nav-toggle{
		width: 40px;
		height: auto;
		position: absolute;
		right: 0;
		top: -28px;
	}
	#site-header .nav-toggle .toggle-icon {
		height: auto;
		width: 100%;
	}
	#site-header .nav-toggle .toggle-inner{
		height: auto;
	}
}
@media (max-width:769px) {
	.banner-section {
		padding: 180px 0px 126px;
	}
	.testimonial-section .owl-carousel .item{
		padding: 20px;
	}
	.testimonial-section .owl-carousel .item img {
		min-width: 160px;
		height: 210px;
	}
	.owl-carousel .item .content p{
		font-size: 14px;
		line-height: 22px;
	}
	.owl-carousel .item .content .meta h6{
		font-size: 16px;
		line-height: 20.44px;
	}
	.owl-carousel .item .content .meta span{
		font-size: 12px;
		line-height: 16.41px;
	}
	.owl-carousel .owl-nav .owl-prev {
		left: 40%;
		top: 62%;
	}
	.owl-carousel .owl-nav .owl-next {
		right: 40%;
		top: 62%;
	}
	.agency-section, .sponser-section {
		padding: 90px 0px;
	}
	.about-section {
		padding: 0px 0px 10px 0px;
	}
	.connect-section {
		padding: 0px 0px 90px;
	}
	.nexus-section .content{
		flex-direction: column;
		row-gap: 40px;
	}
	.nexus-section:before{
		top: 0%;
		left: 0%;
		width: 50%;
	}
	.nexus-section:after{
		bottom: 0%;
		right: 0%;
		width: 50%;
	}
	.nexus-section .content p{
		text-align:center;
	}
	.image-wrapper{
		column-gap: 30px;
		margin-top: 30px;
	}
	.scroll-image{
		width: 20%;
	}
}
@media (max-width:576px) {
	.col-xs {
		width:50%!important;
	}
	.hide-mobile {
		display:none;
	}
	.content-overlay p {
		font-size: 16px;
		line-height: 24px;
	}
	.content-overlay h1 {
		font-size: 24px;
		line-height: 32.88px;
	}
	.banner-section {
		padding: 0px;
		height:100vh;
		background-image: url(https://dev.meraakigroup.com/wp-content/uploads/2024/10/mobile-banner-bg.png);
		background-size: cover;
		background-position: center bottom;
		background-repeat: no-repeat;
	}
	section{
		padding-left:16px!important;
		padding-right:16px!important;
	}
	.agency-section h3, .sponser-section h3, .about-section h3, .leadership-section .heading h3 {
		font-size: 22px;
		line-height: 30px;
	}
	.agency-section h5, .sponser-section h5, .about-section h5, .leadership-section .heading h5{
		font-size: 14px;
		line-height: 22px;
	}
	.agency-section .heading {
		margin-bottom: 40px;
	}
	.nexus-section .content h2{
		margin: 0px 0px 12px 0px;
	}
	.testimonial-section .owl-carousel .item{
		flex-direction: column;
	}
	.owl-carousel .item .content .meta{
		position:relative;
	}
	.owl-carousel .item .content p{
		margin-bottom:24px;
	}
	.owl-carousel .owl-nav{
		height: 20px;
	}
	.owl-carousel .owl-nav .owl-prev {
		left: 30%;
		top: 8%;
	}
	.owl-carousel .owl-nav .owl-next {
		right: 30%;
		top: 8%;
	}
	.testimonial-section .owl-carousel .item img {
		margin-bottom: 30px;
	}
	.owl-carousel .item .content p:after{
		right: 0px;
		top: 0px;
	}
	.form-div {
		padding: 0px;
	}
	.form-div .row{
		flex-direction: column;
	}
	#site-footer h2{
		font-size: 30px;
		line-height: 38px;
	}
	#site-footer h5{
		font-size: 16px;
		line-height: 24px;
	}
	.footer-bottom{
		align-items: flex-end;
	}
	.social-links a img {
		width: 36px;
	}
	.social-links {
		column-gap: 8px;
	}
	.footer-bottom .footer-logo img {
		width: 112px;
	}
	#site-header {
		padding: 20px 0px;
	}
	#site-header .col-lg-3 {
		width:25%;
	}
	#site-header .col-lg-5 {
		width:15%;
	}
	#site-header .col-lg-4 {
		width:60%;
		justify-content: flex-end;
	}
	#site-header .custom-btn {
		display:none;
	}
	#site-header .site-logo img, .dark-logo {
		max-width: 100%;
	}
	#site-header .container .row {
		min-height: 40px;
		padding: 0 15px;
	}
	.banner-section .video-overlay{
		/* 		transform: translate(0%, 50%);
		height:100vh; */
		transform:unset;
		height:unset;
		top: 28%;
	}
	.content-overlay{
		position: absolute;
		top: 30%;
		left: 0;
		right: 0;
		bottom: 0;
		margin: 0 auto;
		width:80%;
		transform: unset;
	}
	/* 	.content-overlay{
	top: 54%;
} */
	.center-wrapper{
		display:none;
	}
	.mask-image .background-video{
		height:100vh;
	}
	.banner-section.full-video .video-overlay {
		transform: translate(0%, 0%);
		top:0%;
	}
	.banner-section .center-wrapper{
		width:100%;
	}
	.banner-section.full-video .center-wrapper{
		display:none;
	}
}
@media (max-width: 376px) {
	.content-overlay {
		width: 100%;
	}
}