@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root{
	--fw-200: 200;
	--fw-600: 600;
	--fw-700: 700;
	--fw-800: 800;
	--fw-500: 500;

	--clr-body-font: #222222;
	--clr-primary: #0142E3;
	--clr-blue: #0042e4;
	--clr-gray-100: #8E8E8E;
	--clr-gray-200: #6D6D6D;
	--clr-gray-300: #6F6F6F;
	--clr-gray-400: #D9D9D9;
	--clr-darkgrey: #222222;
	--clr-black: #000000;
	--clr-light-blue: #D2EBFF;
	--clr-light-blue-100: #F2F5FF;
	--clr-orange: #F3660E;
	--clr-white: #FFFFFF;
	--clr-white-200: #F5F5F5;


	
	--size-800: 7.5rem;
	--size-700: 6.25rem;
	--size-600: 5rem;
	--size-500: 3.75rem;
	--size-400: 3.125rem;
	--size-375: 2.813rem;
	--size-350: 2.5rem;
	--size-300: 1.875rem;
	--size-250: 1.563rem;
	--size-200: 1.25rem;

	--fs-900: 5.3rem;
	--fs-800: 3.25rem;
	--fs-750: 3rem;
	--fs-700: 2.75rem;
	--fs-600: 2.5rem;
	--fs-400: 2.25rem;
	--fs-300: 2rem;
	--fs-275: 1.5rem;
	--fs-250: 1.375rem;
	--fs-200: 1.25rem;
	--fs-150: 1.125rem;
	--fs-100: 1rem;

	--fs-primary: var(--fs-400);
	--fs-secondary: var(--fs-300);
	--fs-small--heading: var(--fs-200);
}

@media screen and (min-width: 375px){
	:root{
		--fs-primary: var(--fs-600);
		--fs-secondary: var(--fs-400);
	}
}
@media screen and (min-width: 768px){
	:root{
		--fs-primary: var(--fs-700);
		--fs-secondary: var(--fs-600);
		--fs-small--heading: var(--fs-250);
	}
}
@media screen and (min-width: 1200px){
	:root{
		--fs-primary: var(--fs-750);
		--fs-secondary: var(--fs-700);
	}
}	
@media screen and (min-width: 1400px){
	:root{
		--fs-primary: var(--fs-800);
	}
}	

.text-clr-primary{
	color: var(--clr-primary);
}
.text-clr-orange{
	color: var(--clr-orange);
}
.text-clr-gray-100{
	color: var(--clr-gray-100);
}
.text-clr-gray-300{
	color: var(--clr-gray-300);
}
.text-clr-gray-400{
	color: var(--clr-gray-400);
}
.text-clr-darkgrey{
	color: var(--clr-darkgrey);
}
.text-clr-blue{
	color: var(--clr-blue);
}
.text-clr-black{
	color: var(--clr-black);
}
.text-clr-light-blue{
	color: var(--clr-light-blue);
}

.text-clr-light-blue:hover
{
	color: var(--clr-light-blue);
}

.bg-clr-black{
	background-color: var(--clr-black);
}
.bg-clr-black-100{
	background-color: var(--clr-body-font);
}
.bg-clr-blue{
	background-color: var(--clr-blue);
}
.bg-clr-light-blue-100{
	background-color: var(--clr-light-blue-100);
}
.bg-clr-gray-200{
	background-color: var(--clr-gray-200);
}
.bg-clr-darkgrey{
	background-color: var(--clr-darkgrey);
}
.bg-clr-white{
	background-color: var(--clr-white);
}
.bg-clr-white-200{
	background-color: var(--clr-white-200);
}
.bg-clr-orange{
	background-color: var(--clr-orange);
}

.border-lightdark{
	border-color: #333434 !important;
}
.border-blue-100{
	border-color: #223B59 !important;
}

.roboto-bold {
	font-family: "Roboto", sans-serif;
	font-weight: 700;
	font-style: normal;
}
.ff-manrope{
	font-family: "Manrope", sans-serif;
}
.fw-300{
	font-weight: 300;
}
.fw-200{
	font-weight: 200;
}
.fw-700{
	font-weight: 700;;
}
.fw-800{
	font-weight: 800;
}
.fw-600{
	font-weight: 600;
}
.fw-500{
	font-weight: var(--fw-500);
}

.fs-extreme{
	font-size: var(--fs-extreme);
}
.fs-primary{
	font-size: var(--fs-primary);	
}
.fs-secondary{
	font-size: var(--fs-secondary);
}
.fs-small--heading{
	font-size: var(--fs-small--heading);
}
.fs-800{
	font-size: var(--fs-800);
}
.fs-700{
	font-size: var(--fs-700);
}
.fs-300{
	font-size: var(--fs-300);
}
.fs-250{
	font-size: var(--fs-250);
}
.fs-150{
	font-size: var(--fs-150);
}

.padding-block-800{
	padding-block: var(--size-800);
}
.padding-block-700{
	padding-block: var(--size-700);
}
.padding-block-600{
	padding-block: var(--size-600);
}
.padding-block-500{
	padding-block: var(--size-500);
}
.padding-block-375{
	padding-block: var(--size-375);
}
.padding-block-400{
	padding-block: var(--size-400);
}
.padding-block-300{
	padding-block: var(--size-300);
}

.padding-bottom-200{
	padding-bottom: var(--size-200);
}
.padding-bottom-300{
	padding-bottom: var(--size-300);
}
.padding-bottom-375{
	padding-bottom: var(--size-375);
}
.padding-bottom-600{
	padding-bottom: var(--size-600);
}
.padding-bottom-700{
	padding-bottom: var(--size-700);
}

.padding-inline-600{
	padding-inline: var(--size-600);
}
.padding-inline-400{
	padding-inline: var(--size-400);
}
.padding-inline-350{
	padding-inline: var(--size-350);
}
.padding-inline-300{
	padding-inline: var(--size-300);
}

.padding-top-800{
	padding-top: var(--size-800);
}
.padding-top-700{
	padding-top: var(--size-700);
}
.padding-top-600{
	padding-top: var(--size-600);
}
.padding-top-500{
	padding-top: var(--size-500);
}
.padding-top-400{
	padding-top: var(--size-400);
}
.padding-top-375{
	padding-top: var(--size-375);
}
.padding-top-300{
	padding-top: var(--size-300);
}

.margin-block-500{
	margin-block: var(--size-500);
}
.margin-block-375{
	margin-block: var(--size-375);
}
.margin-block-300{
	margin-block: var(--size-300);
}

.margin-bottom-500{
	margin-bottom: var(--size-500);
}
.margin-bottom-400{
	margin-bottom: var(--size-400);
}
.margin-bottom-350{
	margin-bottom: var(--size-350);
}
.margin-bottom-300{
	margin-bottom: var(--size-300);
}
.margin-bottom-250{
	margin-bottom: var(--size-250);
}
.margin-bottom-200{
	margin-bottom: var(--size-200);
}

.margin-top-500{
	margin-top: var(--size-500);
}
.margin-top-400{
	margin-top: var(--size-400);
}
.margin-top-300{
	margin-top: var(--size-300);
}
.margin-top-250{
	margin-top: var(--size-250);
}

@media screen and (max-width: 767px) {
	.mv-padding-block-500{
		padding-block: var(--size-500);
	}

	.mv-padding-bottom-500{
		padding-block: var(--size-500);
	}

	.mv-padding-top-300{
		padding-top: var(--size-300);
	}

	.mv-padding-block-300{
		padding-block: var(--size-300);
	}

	.mv-padding-inline-300{
		padding-inline: var(--size-300);
	}

	.mv-margin-block-300{
		margin-block: var(--size-300);
	}

	.mv-margin-top-300{
		margin-top: var(--size-300);
	}
	.mv-margin-bottom-300{
		margin-bottom: var(--size-300);
	}
	.mv-margin-bottom-0{
		margin-bottom: 0;
	}
}

sup{
	color: #F16223;
}

a:hover {
    color: #F16223;
}

.d-grid{
	display: grid;
}

.banner-grid-row{
	grid-template-columns: 1fr 40%;
	grid-template-rows: auto auto;
	grid-template-areas:
		"content box"
		"logos box";
	gap: 30px;	
}
.banner-col-1{
	grid-area: content;
}
.banner-col-2{
	grid-area: box;
}
.banner-col-3{
	grid-area: logos;
	margin-top: 75px;
}
.banner-grid-bg{
	position: absolute;
	top: 0;
	width: 100%;
    position: absolute;
    background-image: linear-gradient(to right, #03050B 20%, #0b2b2c);
	z-index: -1;
	height: calc(100% - 80px);
}
.banner-col-2{
	position: relative;
}
.banner-col-2::before{
	content:  '';
	background-image: url('../images/new/ex-line.svg');
	position: absolute;
	top: 0;
	left: 0;
	width: 90px;
	height: 70px;
	transform: translate(-80px, -52px);
}

.button{
	display: flex;
	align-items: center;
	font-size: var(--fs-100);
	font-weight: var(--fw-500);
	text-decoration: none;
	color: #fff;
	padding: 0px 15px 0px 30px;
	border-radius:6px;
	background-color: var(--clr-blue);
	min-width: 200px;
	height: 55px;
	-webkit-transition: .4s cubic-bezier(0,0,.3642,1);
    transition: .4s cubic-bezier(0,0,.3642,1);
}

.button-2{
	margin-top:10px;
	width: 300px;
	display: flex;
	align-items: center;
	font-size: var(--fs-100);
	font-weight: var(--fw-500);
	text-decoration: none;
	color: #000 !important;
	padding: 0px 15px 0px 30px;
	border-radius: 5px;
	background-color:#fff;
	min-width: 200px;
	height: 55px;
	-webkit-transition: .4s cubic-bezier(0,0,.3642,1);
    transition: .4s cubic-bezier(0,0,.3642,1);
}

.button-2 i{
	-webkit-transition: .4s cubic-bezier(0,0,.3642,1);
    transition: .4s cubic-bezier(0,0,.3642,1);
	background-color:#fff;
    color: #000;
	border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.button-2:hover i{
	-webkit-transform: scale(1.15);
    transform: scale(1.15);
}
.button-2:hover{
	-webkit-transform: scale(1.015);
	transform: scale(1.015);
	-webkit-filter: brightness(110%);
	filter: brightness(110%);
}


.button-icon{
	justify-content: space-between;
	gap: 1.2rem;
}
.button i{
	-webkit-transition: .4s cubic-bezier(0,0,.3642,1);
    transition: .4s cubic-bezier(0,0,.3642,1);
	background-color: #011833;
    color: #fff;
	border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.button:hover i{
	-webkit-transform: scale(1.15);
    transform: scale(1.15);
}
.button:hover{
	-webkit-transform: scale(1.015);
	transform: scale(1.015);
	-webkit-filter: brightness(110%);
	filter: brightness(110%);
}

.row-width-lg {
    width: min(992px, 100%);
    margin-inline: auto;
}
.row-width-tablet {
    width: min(1024px, 100%);
    margin-inline: auto;
}

body {
	font-family: "Outfit", sans-serif;
	color: var(--clr-body-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
}
ul{
	list-style: none;
}
a{
	display: block;
}
@media screen and (min-width: 768px) {
	body{
		font-size: var(--fs-150);
	}
}	
@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        width: 1370px;
		max-width: 1370px;
    }
	.button{
		font-size: var(--fs-150);
	}
}


.custom-accordian .accordion-button::after{
	background-image: url('data:image/svg+xml,<svg width="35" height="34" viewBox="0 0 35 34" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.1022 5.6665C17.8846 5.6665 18.5189 6.30077 18.5189 7.08317V26.9165C18.5189 27.6989 17.8846 28.3332 17.1022 28.3332C16.3198 28.3332 15.6855 27.6989 15.6855 26.9165V7.08317C15.6855 6.30077 16.3198 5.6665 17.1022 5.6665Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M5.76758 17.0002C5.76758 16.2178 6.40184 15.5835 7.18424 15.5835H27.0176C27.8 15.5835 28.4342 16.2178 28.4342 17.0002C28.4342 17.7826 27.8 18.4168 27.0176 18.4168H7.18424C6.40184 18.4168 5.76758 17.7826 5.76758 17.0002Z" fill="white"/></svg>')
}
.custom-accordian .accordion-button{
	color: #fff;
	background-color: transparent;
}
.custom-accordian .accordion-button:not(.collapsed) {
	background-color: unset;
	box-shadow: none;
}
.custom-accordian .accordion-item{
	border: none;;
}
.custom-accordian .accordion-button:focus {
    box-shadow: none;
}
.custom-accordian .accordion-item{
	background-color: transparent;
	margin-bottom: 1rem;
}
.custom-accordian .accordion-body{
	color: #AEAEAE;
}
.accordian-arrow{
	width: 25px;
	height: 25px;
}
.accordion-flush .accordion-item .accordion-button {
    font-weight: 600;
    border-radius: 0;
    font-size: 20px;
}



.case-study-box{
	background-color: #000;
	margin-right: -15px;
    margin-top: 50px;
}
.case-study-carousal h3{
	font-size: 2.75rem;
}
.case-study-carousal h4{
	font-size: 2.375rem;
}
@media screen and (max-width: 1699px) {
	.case-study-carousal h3{
		font-size: 2.5rem;
	}
	.case-study-carousal h4{
		font-size: 1.875rem;
	}
}	
@media screen and (max-width: 1599px) {
	.case-study-carousal h3{
		font-size: 2rem;
	}
	.case-study-carousal h4{
		font-size: 1.75rem;
	}
}
@media screen and (max-width: 1200px) {
	.case-study-carousal h3{
		font-size: 1.875rem;
	}
	.case-study-carousal h4{
		font-size: 1.5rem;
	}
}
@media screen and (max-width: 767px) {
	.case-study-carousal h3{
		font-size: 1.5rem;
	}
	.case-study-carousal h4{
		font-size: 1.375rem;
	}
	.case-study-box {
		margin-top: 20px;
	}
}

.wooCommerceColor {
	color: #1152FC;
}

h2 {
	font-size: 32px;
	font-weight: 500;
}

.numberFont {
	font-family: 'Work Sans', sans-serif;
	font-weight: 600;
	font-size: 16px;
	color: #fff;
	text-decoration: none;
}

.bannerHeader {
	padding: 20px 0;
	background-color: #223B59;
}





.phoneWrapper img,
.emailWrapper img {
	padding-right: 8px;
}


.topStripRight {
	gap: 8px;
	margin-top: 15px;
}

@media (min-width: 576px) {
	.topStripRight {
		margin-top: 0;
	}
}

@media (min-width: 768px) {
	.topStripRight {
		gap: 15px;
	}

	.phoneWrapper {
		padding-right: 15px;
		border-right: 1px solid #fff;
	}
}


.footer {
	padding:2px 0 0;
	background: #2d2d2d;
	color: #fff;
	font-size: 16px;
}

.footerLogo {
	position: relative;
	display: flex;
	align-items: center;
}

.footerLogo img {
	margin-right: 50px;
}

.footerLogo hr {
	width: 100%;
	opacity: 0.5;
}

.footLogoImage {
	width: 85px;
	height: auto;
}

.footerInnerLink {
	display: grid;
	grid-template-columns: repeat(3, auto);
	grid-template-rows: 1fr 1fr;
	gap: 15px;
	margin-top: 30px;
}

.footerInnerLink a {
	color: #fff;
	text-decoration: none;
}

.copyContent {
	border-top:none;
	padding: 20px 0;
}

.copyContent a {
	color: #fff !important;
	text-decoration: none;
}

.footerRightSideWrap {
	margin-top: 30px;
}

.footerRightSideWrap a {
	color: #fff !important;
	text-decoration: none;
}

.footerFormSection {
	background-size: cover;
	position: relative;
}

.products-menu
{
}

.products-menu ul
{
	width:320px;
	margin: 0;
	padding: 0;
	position:relative;
	z-index:5;
	border:2px solid #0042e4;
	background-color: #f0f4ff;
}

.products-menu ul li
{
	font-family: 'Montserrat', sans-serif;
	font-size:20px;
	font-weight:600;	
	border-bottom:1px solid #787878;	
}

.products-menu ul li:last-child
{		
	border-bottom:none;
}

.products-menu ul li a
{	
	font-size: 18px;
	padding:12px;
	display:block;
	color:#000;
	margin:3px 0px;
	text-decoration: none;
}

.products-menu ul li a:hover
{
	margin:3px 0px;
	background-color:#0042e4;
	color:#FFF;
}

.products-menu ul li a.active
{
	margin:3px 0px;
	background-color:#0036c0;
	color:#FFF;
	padding-left: 25px;
}

.products-menu ul li:last-child a
{		
	border-bottom:none;
}

.products-tab
{
	padding-bottom:80px;
}

.products-wrapper
{
	background-color: #fff;
}

.products-wrapper ul 
{
	margin-top:40px;
}

.products-wrapper ul li
{
	margin-bottom: 20px;
}

#footerContactFormWrapper h4 {
	padding-left: 0;
	font-size: 32px;
	line-height: 1.2;
}

#footerContactFormWrapper .formLabel {
	color: #fff;
	font-size: 17px;
}


#footerContactFormWrapper #footerPageForm .newCroFormSubmit {
	background-color: var(--clr-blue);
	color: #fff;
	font-size: 20px;
	font-weight: 500;
	border: none;
	padding: 12px 25px;
	border-radius: 5px;
}


.caseStudyWrapper {
	background-color: #FAFAFA;
	gap: 15px;
	margin-bottom: 35px;
	max-width: 290px;
	margin-left: auto;
	margin-right: auto;
}

.caseStudyContentWrapper {
	padding: 12px 20px;
}

.caseStudyContentWrapper p {
	margin-bottom: 0;
	font-size: 14px;
}

.caseStudyContentWrapper h3 {
	font-size: 28px;
}

.caseStudyCategoryWrapper {
	font-size: 14px;
	display: inline-block;
	padding: 5px 12px;
	color: #fff;
	background-color: #1152FC;
	border-radius: 20px;
	line-height: 1;
	margin-bottom: 20px;
}

a.caseStudyLink {
	display: block;
	margin-top: 20px;
	font-size: 20px;
	color: #1152FC;
	font-weight: 600;
	text-decoration: none;
}

.case-study-box span{
	border-color: #fff !important;
}
.case-study-carousal h3
{
	margin-top: 30px;
}

.owl-theme .owl-dots .owl-dot span {
	background-color: #d9d9d9;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
	background-color: #223B59;
}

.owl-theme .owl-nav [class*=owl-] {
	padding: 0;
	background-color: transparent !important;
}


.owl-prev {
	position: absolute;
	bottom: -10px;
	left: calc(50% - 120px);
}

.owl-next {
	position: absolute;
	bottom: -10px;
	right: calc(50% - 120px);
}

.owl-nav {
	height: 50px;
}

.help-block.with-errors {
    position: absolute;
    margin: 0;
    font-size: 12px;
    color: red;
    font-weight: bold;
    margin-top: 2px;
}

#footerContactFormWrapper #footerPageForm .form-group.has-error.has-danger .form-control {
    border-color: red !important;
	color:#fff;
}

.thankyouBanner{
	margin: 50px 0;
}

.jumper{
	cursor: pointer;
}




@media (min-width: 576px) {

	.caseStudyWrapper {
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	.caseStudyContentWrapper {
		padding: 12px 20px 12px 0;
	}

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

@media (min-width: 768px) {

	h2 {
		font-size: 36px;
	}


	.footerInnerLink {
		grid-template-columns: repeat(2, auto);
		grid-template-rows: 1fr 1fr 1fr;
		margin: 0;
	}

	.footerRightSideWrap {
		margin-top: 0;
	}

}

@media (min-width: 992px) {


	.footLogoImage {
		width: 120px;
	}

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

@media (min-width: 1200px) {

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

}

@media (min-width: 1400px) {

	h2 {
		font-size: 42px;
	}
	.caseStudyContentWrapper p {
		font-size: 16px;
	}
}




.logoWrapper img
{
	width: 80%;
}

.mobile-img
	{
		display: none !important;
	}

@media (max-width: 992px) {



	.mobile
{
	margin-top: -50px;
	display: block;
	margin-bottom: 60px;
}

	

	.d-grid {
		display: block !important;
	}

	.banner-col-2 {
		position: relative;
		margin-top: 90px;
	}

	.mobile-img
	{
		display: block !important;
		margin-top: 40px;
	}


}

.footer-f input
{
	color:#fff !important;
}

.case-study-carousal .owl-dots{
	margin-top: 2.2rem !important;
}
.case-study-carousal .d-flex img
{
	width: auto;
}

@media (max-width: 992px) {

.case-study-carousal .d-flex {
    display: block !important;

}

.case-study-carousal .d-flex img
{
	margin-top: 50px;
}



.case-study-carousal ul li.d-flex  {
	display: flex !important;
}

}


/* *************************************** 
	|| Mobile CRO page new styles
*****************************************/	
.main-banner{
	/* background-image: url(../images/cr/main-banner-bg.svg); */
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-color: #fff;
}
.highlights-separator span{
	background-color: #FF8B00;
	height: 35px;
	width: 1px;
	display: block;
}
.highlights{
	margin-block: 1rem;
	gap: 1rem;
}
.banner-desc{
	background-color: #EDE9E6;
	font-size: var(--fs-150);
	border-radius: 100px;
}
@media screen and (min-width: 768px) {
	.highlights{
		margin-block: 3rem;
	}
	.banner-desc{
		font-size: var(--fs-250);
	}	
	.highlights-points:first-child{
		padding: 1rem 1.5rem 1rem 1.5rem;
	}
	.highlights-points:last-child{
		padding: 1rem 1.5rem 1rem 1.5rem;
	}
	.highlights{
		margin-block: 2rem;
	}
}	
@media screen and (min-width: 992px) {
	.highlights{
		gap: 0rem;
	}
	.highlights-points:not(:last-child)::after{
		content: '';
        position: absolute;
        top: 12px;
        right: 0px;
        background-color: #FF8B00;
        width: 1px;
        height: 65%;
	}
	.highlights-points p{
		font-size: 17px;
	}
	.highlights-points:first-child{
		
		padding: 1rem 1.5rem 1rem 0rem;
	}
	.highlights-points{
		
		padding: 1rem 1.5rem 1rem 1.5rem;
	}
	.highlights-points:last-child{
		
		padding: 1rem 0rem 1rem 1.5rem;
	}
}
@media screen and (min-width: 1200px) {
	.highlights-points p{
		font-size: var(--fs-150);
	}
}

/* || Problem-solving section styles */
.problem-solving-column h3{
	font-size: var(--fs-250);
}
.problem-solving-column{
	background: linear-gradient(108.06deg, #D3DBE7 13.63%, #D9E3E1 95.19%);
	flex-basis: 0;
    flex-grow: 1;
}
@media screen and (min-width: 768px) {
	.problem-solving-column h3{
		font-size: 1.5rem;
	}
	.problem-solving-column p{
		font-size: var(--fs-100);
	}
}

/* Stats section styles */
.stats-section{
	margin-top: -120px;
    margin-bottom: 7.5rem;
}
.stats-section .bg-clr-orange{
	border-radius: 5px;
}
.stats-column h3{
	font-size: 4.375rem;
}
.stats-column p{
	font-size: var(--fs-200);
}

@media screen and (max-width: 991px) {
	.stats-section .bg-clr-orange{
		padding-inline: 15px;
	}
}

@media screen and (max-width: 767px) {
	.stats-section {
		margin-top: -200px;
		margin-bottom: 2rem;
	}
}

/* || Services section */
.servcies-section{
	padding-block: 2.813rem 10rem;
}
.services-column span{
	font-size: var(--fs-200);
}
@media screen and (min-width: 1200px) {
	.services-column span{
		font-size: var(--fs-250);
	}
}
@media screen and (min-width: 1400px) {
	.services-column span{
		font-size: 1.375rem;
	}
	.stats-section .bg-clr-orange{
		padding-inline: 15px 30px;
	}
}

/* || FAQ Section */
.faq-hightlight{
	font-size: 1.5rem;
}
@media screen and (max-width: 991px) {
	.accordion-button div{
		display: none !important;
	}
}

/* || CTA Section */
.cta-section{
	background-color: #2F2F2F;
}
.cta-section h2{
	font-size: 2.25rem;
}
.cta-section p{
	font-size: 1.375rem;
}
.cta-section{
	
}
@media screen and (min-width: 992px) {
	.cta-section p{
		font-size: 1.5rem;
	}
}
@media screen and (min-width: 1200px) {
	.cta-section h2{
		font-size: 2.25rem;
	}
	.cta-section p{
		font-size: 1.375rem;
	}
}	

/* || Testimonial section styles */

.testimonial-heading-column{
	border-bottom: 3.43px solid #E5F0FF;
}
.testimonial-carousal .owl-dots{
	margin-top: 60px !important;
}
@media screen and (min-width: 992px) {
	.testimonial-content{
		font-size: var(--fs-200);
	}
}
@media screen and (max-width: 767px) {
	.testimonial-footer{
		margin-top: 1.5rem;
	}
	.testimonial-carousal .owl-dots{
		margin-top: 30px !important;
	}
}

/* || Website intro */
.features-column{
	background-color: #F3660E29;
	border-radius: 60px;
	color: #0F0F0F;
}
.features-heading{
	font-size: 2.5rem;
	color: #223B59;
}

@media screen and (max-width: 1199px) {
	.features-heading{
		text-align: center;
		margin-bottom: 30px !important;
	}	
}
@media screen and (max-width: 574px) {
	.features-column{
		text-align: center;
	}	
}	

/* || Banner form section */
.banner-form-section{
	background: linear-gradient(108.06deg, #D3DBE7 13.63%, #D9E3E1 95.19%);
}
.banner-form-heading{
	font-size: 1.5rem;
	color: #011833;
}
.blue-line{
    border-top: 2px solid #BBC7D0;
    width: 100%;
}
.banner-cform .form-control{
	background-color: #fff;
	border-radius: 5px !important;
}
.form-control:focus{
	box-shadow: none !important;
	border: 1px solid #F16223 !important;
}

/* || Improvements section */
.improvements-column p{
	font-size: var(--fs-150);
}

.tech-logos-section{
	background-color: #fff;
}

@media screen and (min-width: 1200px) {
	.tech-logos-section img{
		width: 75%;
	}
}
@media screen and (min-width: 1400px) {
	.tech-logos-section img{
		width: 172px;
		height: 92px;
	}
}
@media screen and (max-width: 1199px) {
	.tech-logo{
		margin-bottom: 45px;
	}
}	

@media screen and (min-width: 1400px) {
	.improvements-column p{
		font-size: var(--fs-250);
	}
}

.conversion-progress-section{
	background: linear-gradient(180deg, #FFFFFF 0%, #FFF4EE 100%);
}

/***************************************
	|| Customer Retention Page styles
***************************************/	

/* Services box with borders section */
.services-top-border{
	border-top: 3px solid #D2EBFF1F;
}
.services-top-border:before{
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: var(--clr-orange);
    transform: scaleX(0);
    transition: transform 500ms ease;
    transform-origin: left;
}
.services-top-border:hover::before{
	transform: scaleX(1);
}
/*.eds-service-icon::after{
	content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background-color:#719aff;
    transform: scaleX(0);
    transition: transform 500ms ease;
    transform-origin: left;
	z-index: -1;
}*/
.eds-servcie-box:hover .eds-service-icon::after{
	transform: scaleX(1);
}

.eds-service-icon{
	padding-bottom: 30px;
	margin-bottom: 30px;
    border-bottom:5px solid #0042e4;
}

.dont-delay-2
{
	background-color:#0042e4;	
	padding:30px;
	border-radius: 20px;
}

.dont-delay-2 h2
{
	color:#fff;
}

.eds-offer-section{
	background: linear-gradient(180deg, #FFFFFF 0%, #f3f3f3 100%);
}
.eds-offers{
	background-color: #fff4ee;
}

.eds-offers-2{
	background-color: #f0f4ff;
}

.eds-impact-column{
	border: 1px solid #5B5B5F;
}
.eds-impacts-row{
	border-top: 7px solid #F3660E
}
.eds-impact-column h3{
	color: #433A51;
}
.why-reasons-column {
    border-bottom: 4px solid #F16223;
}

.why-reasons-column-2 {
    border-bottom:4px solid #0042e4;
}

.cr-features{
	background-color: #E5E5E5;
}
.cr-features h3{
	font-size: 1.5rem;
}

/* Equal height cards for cr-features section */
.cr-features .row {
	display: flex;
	flex-wrap: wrap;
}

.cr-features .col-12 {
	display: flex;
	flex-direction: column;
}

.cr-features .col-12 > div {
	flex: 1;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.cr-features .d-flex {
	flex: 1;
	align-items: flex-start !important;
}

/* Responsive adjustments for cr-features cards */
@media (max-width: 991px) {
	.cr-features .col-12 {
		min-height: auto;
	}
	
	.cr-features .col-12[style*="border-right"] {
		border-right: none !important;
		border-bottom: solid 1px #6B727C !important;
	}
}

@media (min-width: 992px) {
	.cr-features .col-lg-6 {
		display: flex;
		flex-direction: column;
	}
}

/* Equal height cards for added-advantages section */
.added-advantages .row {
	display: flex;
	flex-wrap: wrap;
}

.added-advantages .col-12 {
	display: flex;
	flex-direction: column;
}

.added-advantages .card {
	flex: 1;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: auto !important;
}

.added-advantages .card-body {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.added-advantages .d-flex {
	flex: 1;
	align-items: flex-start !important;
}

/* Responsive adjustments for added-advantages cards */
@media (max-width: 991px) {
	.added-advantages .col-12 {
		min-height: auto;
	}
	
	.added-advantages .card {
		margin-bottom: 1.5rem;
	}
}

@media (min-width: 992px) {
	.added-advantages .col-lg-6 {
		display: flex;
		flex-direction: column;
	}
}

@media (max-width: 767px) {
	.added-advantages .card {
		padding: 1.5rem 1rem !important;
	}
	
	.added-advantages .card .px-5 {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
}

.stats-box h3{
	font-size: var(--fs-800);
}
.stats-box p{
	color: #737373;
}

ul.magento-list li
{
	padding-bottom:10px;
	margin-bottom:10px;
	border-bottom:1px solid #f3660e;
	height: 80px;
}

ul.magento-list li p
{
	padding-bottom: 0;
	margin-bottom: 0;
}


ul.magento-list li img
{
	margin-top: 4px;
    margin-bottom: 14px;
    margin-right: 10px;
    float: left;
}

ul.bigcommerce-list li
{
	padding-bottom:10px;
	margin-bottom:10px;
	border-bottom:1px solid #0d52ff;
	height: 80px;
}

ul.bigcommerce-list li p
{
	padding-bottom: 0;
	margin-bottom: 0;
}


ul.bigcommerce-list li img
{
	margin-top: 4px;
    margin-bottom: 14px;
    margin-right: 10px;
    float: left;
}

@media screen and (max-width: 767px) {
	.stats-number-section .stats-box::after {
		content: '';
		position: absolute;
		left: 15px;
		bottom: 0px;
		width: 90%;
		height: 3px;
		background-color: #00457021;
	}
	.stats-box{
		padding-block: 45px;
	}
}
@media screen and (min-width: 768px) {
	.stats-box:not(:last-child)::after{
		content: '';
		position: absolute;
		right: 0;
		top: 0px;
		width: 3px;
		height: 70%;
		background-color: #00457021;
		transform: translateY(15px);
	}
	.stats-box{
		padding-inline: 15px;
	}
}

.stats-number-section{
	padding-block: 80px 0px;
}
.stats-line{
	margin-block: 30px;
	height: 3px !important;
	background-color: #00457021;
	opacity: 1;
}

.client-logos-row{
	padding: 45px 25px;
	background-color: #fff;
	border-radius: 5px;
	margin-top: -95px;
	margin-bottom: 60px;
	box-shadow:0px 4px 25px 0px #e9ecef7d;
}

.footerFormSection ul li {
    list-style-type: circle;
    font-size: 20px;
    color: #fff;
    line-height: 46px;
}

.cr-features ul li img
{
	float: left;
	margin-right: 15px;
}

.cr-features ul li
{
	margin-bottom: 40px;
}

@media screen and (max-width: 767px) {
	.client-logos-row{
		margin-top: -160px;
	}
}	


@media screen and (max-width: 991px) {

.products-menu ul {
    width:100%;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 5;
    border: 2px solid #0042e4;
    background-color: #f0f4ff;
}


.stats-box:not(:last-child)::after {
	content: '';
	position: absolute;
	right: 0;
	top: 0px;
	width: 3px;
	height: 70%;
	background-color:transparent;
	transform: translateY(15px);
}

}

.logo-carosial .owl-carousel .owl-item img{
	max-width: 100% !important;
	width: auto !important;
}
.logo-carosial .owl-carousel .owl-stage-outer{
	text-align: center !important;
}

.spl-text{
	background: #f16223;
    color: #fff;
    border-radius: 5px;
    padding: 0 10px 0 10px;
}
.fa-circle-arrow-right{
	font-size: 28px;
    color: #000;
    padding: 0px 10px 0 0px;
}

.clutch-section {
    padding: 50px 0;
    background: #fafafa;
}
.clutch-section img {
    width: auto;
}
.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}
.center-block {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.main-banner h1
{
	font-size: 50px;
}

.main-banner p
{
	padding-top: 5;
	font-size:22px;
}

.main-banner
{
	padding-top:85px;
}

.stats-number-section {
    padding-block: 65px 0px;
}




/* AI Image Animation */
.ai-image-animated {
    position: relative;
    display: inline-block;
    width: 100%;
    animation: aiImageFloat 3s ease-in-out infinite;
}

.ai-image-animated img {
    width: 100%;
    display: block;
    /* filter: drop-shadow(0 10px 20px rgba(72, 176, 44, 0.3)); */
    transition: all 0.3s ease;
}

.ai-image-animated::before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    /* background: linear-gradient(45deg, #f2f7f1, #d6ddd3, #ffffff, #dbdbdb); */
    border-radius: 10px;
    opacity: 0;
    z-index: -1;
    animation: aiGlow 3s ease-in-out infinite;
    filter: blur(15px);
}

/* Portfolio Section */
.portfolio-section {
    padding: 60px 0;
    background: linear-gradient(135deg, #2C2E3E 0%, #1F2029 100%);
    color: white;
    overflow-x: hidden;
    width: 100%;
}

.portfolio-section .container-fluid {
    overflow-x: hidden;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

.portfolio-label {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 2px;
    color: #FFF;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    padding-left: 20px;
}

.portfolio-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background: #FFF;
    border-radius: 50%;
    animation: blink 1.5s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(21, 12, 153, 0.5)
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
        box-shadow: 0 0 10px rgba(123, 90, 166, 0.8);
    }
    50% {
        opacity: 0.3;
        transform: translateY(-50%) scale(0.8);
        box-shadow: 0 0 5px rgba(123, 90, 166, 0.3);
    }
}

.portfolio-title {
    font-size: 3rem;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
}

.portfolio-subtitle {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.6;
    max-width: 900px;
    margin: 0 auto;
}

.portfolio-carousel {
    margin-top: 50px;
    overflow: hidden;
    max-width: 100%;
}

.portfolio-carousel .slick-list {
    overflow: hidden !important;
    padding-right: 0 !important;
    margin: 0;
}

.portfolio-carousel .slick-track {
    display: flex;
    align-items: stretch;
    margin-left: 0;
    margin-right: 0;
}

.portfolio-carousel .slick-slide {
    padding: 0 10px;
    height: auto;
}

.portfolio-carousel .slick-slide > div {
    height: 100%;
}

.portfolio-card {
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 450px;
}

.portfolio-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

.card-orange {
    background: linear-gradient(135deg, #FF6B35 0%, #FF8555 100%);
}

.card-purple {
    background: linear-gradient(135deg, #7B5AA6 0%, #9B7BC6 100%);
}

.card-green {
    background: linear-gradient(135deg, #2ECC71 0%, #27AE60 100%);
}

.card-cyan {
    background: linear-gradient(135deg, #1ABC9C 0%, #16A085 100%);
}

.card-orange-dark {
    background: linear-gradient(135deg, #FF5438 0%, #FF5438 100%);
}

.card-blue {
    background: linear-gradient(135deg, #4B71FD 0%, #4B71FD 100%);
}
.portfolio-image {
    height: 250px;
    overflow: hidden;
    padding: 20px 0 0 20px;
}

.portfolio-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.portfolio-card:hover .portfolio-image img {
    transform: scale(1.1);
}

.portfolio-content {
    padding: 30px;
    flex: 1;
}

.portfolio-brand {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 15px;
}

.portfolio-description {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.9);
    line-height: 1.6;
    margin: 0;
}

/* Slick Carousel Custom Styles */
.portfolio-carousel .slick-dots {
    bottom: -50px;
}

.portfolio-carousel .slick-dots li button:before {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
}

.portfolio-carousel .slick-dots li.slick-active button:before {
    color: #7B5AA6;
}

.portfolio-carousel .slick-prev,
.portfolio-carousel .slick-next {
    width: 50px;
    height: 50px;
    z-index: 10;
}

.portfolio-carousel .slick-prev {
    left: -60px;
}

.portfolio-carousel .slick-next {
    right: -60px;
}

.portfolio-carousel .slick-prev:before,
.portfolio-carousel .slick-next:before {
    font-size: 40px;
    color: rgba(255,255,255,0.7);
}

.portfolio-carousel .slick-prev:hover:before,
.portfolio-carousel .slick-next:hover:before {
    color: #7B5AA6;
}


/* Case Studies Section */
.case-studies-section {
    padding: 60px 0;
    background: #fff;
}

.case-studies-title {
    font-size: 3rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 20px;
}

.guaranteed-text {
    color: #000000;
}

.case-studies-subtitle {
    font-size: 18px;
    color: #444;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

/* Case Studies Carousel */
.case-studies-carousel.owl-carousel .owl-stage {
    display: flex;
}

.case-studies-carousel.owl-carousel .owl-stage .owl-item {
    display: flex;
    height: auto;
}

/* Case Study Card */
.case-study-item {
    height: 100%;
    display: flex;
}

.case-study-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: all 0.4s ease;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.case-study-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

.case-study-image {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.case-study-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.case-study-card:hover .case-study-image img {
    transform: scale(1.1);
}

.case-study-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: white;
    z-index: 2;
}

.badge-cybersecurity {
    background: linear-gradient(135deg, #000000  0%, #000000 100%);
}

.badge-healthcare {
    background: linear-gradient(135deg, #000000 0%, #000000 100%);
}

.badge-automotive {
    background: linear-gradient(135deg, #000000 0%, #000000 100%);
}

.badge-watches {
    background: linear-gradient(135deg, #000000 0%, #000000 100%);
}

.case-study-content {
    padding: 10px 30px 30px 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.case-study-name {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 50px;
}

.case-study-content .case-study-name img {
    max-height: 50px;
    max-width: 180px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.case-study-name i {
    font-size: 1.2rem;
    color: #FF6B35 !important;
    opacity: 1 !important;
    display: inline-block !important;
    visibility: visible !important;
    transition: all 0.3s ease;
    flex-shrink: 0;
    margin-left: auto;
}

.case-study-card:hover .case-study-name i {
    transform: translate(5px, -5px);
}

.case-study-card:hover .case-study-name img {
    transform: scale(1.05);
}

.case-study-description {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.case-study-link {
    display: flex;
    align-items: center;
    color: #4CAF50;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 25px;
    letter-spacing: 0.5px;
}

.case-study-link i {
    transition: transform 0.3s ease;
}

.case-study-card:hover .case-study-link i {
    transform: translateX(5px);
}

/* Case Study Metrics */
.case-study-metrics {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding-top: 25px;
    border-top: 2px solid #f0f0f0;
}

.metric-item {
    flex: 1;
    text-align: center;
    padding: 20px 15px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.metric-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.metric-value {
    font-size: 1.8rem;
    font-weight: 800;
    background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
    line-height: 1;
}

.metric-label {
    font-size: 0.85rem;
    color: #6c757d;
    line-height: 1.3;
    margin: 0;
}

/* Metric Animation on Hover */
.case-study-card:hover .metric-value {
    transform: scale(1.05);
    transition: all 0.3s ease;
}

@keyframes aiImageFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-15px);
    }
}

@keyframes aiGlow {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.6;
    }
}

.ai-image-animated:hover img {
    filter: drop-shadow(0 15px 30px #af94cf);
    transform: scale(1.02);
}

.ai-image-animated:hover::before {
    opacity: 0.8;
}

/* Responsive AI Image */
@media screen and (max-width: 767px) {
    .ai-image-animated::before {
        filter: blur(10px);
    }
}
/* Banner Image Wrapper */
.banner-image-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}
/* Banner Right Image - No Animation */
.banner-right-image {
    opacity: 1;
    transform: none;
    position: relative;
    z-index: 1;
}

/* AI Loading Container */
.ai-loading-container {
    position: absolute;
    bottom: 16%;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 60%;
    max-width: 320px;
    z-index: 10;
}

/* AI Loading Bar */
.ai-loading-bar {
    width: 100%;
    height: 40px;
    background: white;
    border: 2px solid #333;
    border-radius: 50px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    padding: 0 8px;
}

/* AI Loading Fill Animation */
.ai-loading-fill {
    height: 100%;
    width: 0%;
    animation: aiLoadingProgress 3s ease-in-out infinite;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 8px 0;
    position: relative;
}

.ai-loading-fill::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 70%;
    width: 100%;
    background: 
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 10px,
            rgba(255, 255, 255, 0.5) 10px,
            rgba(255, 255, 255, 0.5) 12px
        ),
        linear-gradient(
            90deg,
            #888888 0%,
            #777777 10%,
            #666666 20%,
            #555555 30%,
            #444444 40%,
            #333333 50%,
            #2a2a2a 60%,
            #222222 70%,
            #1a1a1a 80%,
            #111111 90%,
            #000000 100%
        );
    border-radius: 50px;
}

@keyframes aiLoadingProgress {
    0% {
        width: 0%;
    }
    50% {
        width: 100%;
    }
    100% {
        width: 100%;
    }
}
/* CTA Section */
.cta-section {
    position: relative;
    padding: 50px 0;
    background: linear-gradient(135deg, #8B5FC7 0%, #A77DD4 50%, #9B6FCC 100%);
    background-image: url('../images/cta-background.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.cta-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.cta-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><circle cx="3" cy="3" r="2" fill="rgba(255,255,255,0.1)"/></svg>');
    opacity: 0.5;
}

.cta-triangles {
    position: absolute;
    width: 100%;
    height: 100%;
}

.triangle {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    opacity: 0.2;
    animation: floatTriangle 8s ease-in-out infinite;
}

.triangle-1 {
    top: 8%;
    left: 3%;
    border-width: 0 20px 35px 20px;
    border-color: transparent transparent rgba(255,255,255,0.4) transparent;
    animation-delay: 0s;
}

.triangle-2 {
    top: 25%;
    left: 8%;
    border-width: 0 12px 20px 12px;
    border-color: transparent transparent rgba(255,255,255,0.3) transparent;
    animation-delay: 1s;
}

.triangle-3 {
    top: 50%;
    left: 5%;
    border-width: 0 15px 26px 15px;
    border-color: transparent transparent rgba(255,255,255,0.35) transparent;
    animation-delay: 2s;
}

.triangle-4 {
    top: 75%;
    left: 10%;
    border-width: 0 10px 17px 10px;
    border-color: transparent transparent rgba(255,255,255,0.3) transparent;
    animation-delay: 3s;
}

.triangle-5 {
    top: 12%;
    right: 8%;
    border-width: 0 22px 38px 22px;
    border-color: transparent transparent rgba(255,255,255,0.4) transparent;
    animation-delay: 1.5s;
}

.triangle-6 {
    top: 35%;
    right: 4%;
    border-width: 0 14px 24px 14px;
    border-color: transparent transparent rgba(255,255,255,0.3) transparent;
    animation-delay: 2.5s;
}

.triangle-7 {
    top: 65%;
    right: 12%;
    border-width: 0 18px 31px 18px;
    border-color: transparent transparent rgba(255,255,255,0.35) transparent;
    animation-delay: 0.5s;
}

.triangle-8 {
    bottom: 8%;
    right: 6%;
    border-width: 0 11px 19px 11px;
    border-color: transparent transparent rgba(255,255,255,0.3) transparent;
    animation-delay: 3.5s;
}

.cta-dots {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.cta-dots .dot {
    position: absolute;
    width: 5px;
    height: 5px;
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
    animation: floatDot 5s ease-in-out infinite;
}

.cta-dots .dot:nth-child(1) {
    top: 25%;
    right: 20%;
    animation-delay: 0s;
}

.cta-dots .dot:nth-child(2) {
    top: 45%;
    right: 30%;
    animation-delay: 0.5s;
}

.cta-dots .dot:nth-child(3) {
    top: 65%;
    right: 25%;
    animation-delay: 1s;
}

.cta-dots .dot:nth-child(4) {
    top: 35%;
    right: 10%;
    animation-delay: 1.5s;
}

.cta-dots .dot:nth-child(5) {
    top: 20%;
    left: 25%;
    animation-delay: 2s;
}

.cta-dots .dot:nth-child(6) {
    top: 50%;
    left: 15%;
    animation-delay: 2.5s;
}

.cta-dots .dot:nth-child(7) {
    top: 75%;
    left: 10%;
    animation-delay: 3s;
}

.cta-dots .dot:nth-child(8) {
    bottom: 15%;
    left: 30%;
    animation-delay: 3.5s;
}

.cta-section .row {
    gap: 0;
}

.cta-section .col-lg-7 {
    padding-right: 20px;
}

.cta-section .col-lg-5 {
    padding-left: 20px;
}

.cta-content {
    position: relative;
    z-index: 2;
}

.cta-title {
    font-size: 3rem;
    font-weight: 700;
    color: white;
    margin-bottom: 25px;
    line-height: 1.2;
}

.cta-subtitle {
    font-size: 1.2rem;
    color: rgba(255,255,255,0.95);
    margin-bottom: 35px;
    line-height: 1.6;
}

.btn-cta {
    background: white;
    color: #0c375a;
    padding: 18px 40px;
    font-size: 1.1rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

.btn-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(241, 99, 35, 0.4);
    background: linear-gradient(135deg, #000000 0%, #f16323 100%);
    color: #fff !important;
}

.btn-cta i {
    transition: transform 0.3s ease;
}

.btn-cta:hover i {
    transform: translateX(5px);
}

/* Expert Profile */
.expert-profile {
    position: relative;
    z-index: 2;
    text-align: center;
}

.expert-image-wrapper {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 auto 30px;
}

.expert-image {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    border: 8px solid white;
    box-shadow: 0 15px 50px rgba(0,0,0,0.3);
    z-index: 3;
}

.expert-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.expert-ring {
    position: absolute;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.4);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ring-1 {
    width: 320px;
    height: 320px;
    animation: pulseRing 3s ease-in-out infinite;
}

.ring-2 {
    width: 340px;
    height: 340px;
    border-color: rgba(255,255,255,0.3);
    animation: pulseRing 3s ease-in-out infinite 0.5s;
}

.ring-3 {
    width: 360px;
    height: 360px;
    border-color: rgba(255,255,255,0.2);
    animation: pulseRing 3s ease-in-out infinite 1s;
}

.expert-info {
    text-align: center;
}

.expert-name {
    font-size: 2rem;
    font-weight: 700;
    color: white;
    margin-bottom: 8px;
}

.expert-title {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.9);
    margin: 0;
}

@keyframes pulseRing {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.4;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.05);
        opacity: 0.6;
    }
}

@media screen and (min-width: 992px) {
	.cta-section p{
		font-size: 1.5rem;
	}
}
@media screen and (min-width: 1200px) {
	.cta-section h2{
		font-size: 3rem;
	}
	.cta-section p{
		font-size: 1.375rem;
	}
}	

/* Responsive Styles for AI Loading */
@media screen and (max-width: 1199px) {
    .ai-loading-container {
        width: 65%;
        max-width: 240px;
        bottom: 18%;
    }
    
    .ai-loading-bar {
        height: 38px;
        border: 2.5px solid #333;
        padding: 0 7px;
    }
    
    .ai-loading-fill::before {
        height: 68%;
    }
}

@media screen and (max-width: 991px) {
    .ai-loading-container {
        width: 70%;
        max-width: 280px;
        bottom: 16%;
    }
    
    .ai-loading-bar {
        height: 32px;
        border: 2.5px solid #333;
        padding: 0 6px;
    }
    
    .ai-loading-fill::before {
        height: 65%;
    }
}

@media screen and (max-width: 767px) {
    .banner-image-wrapper {
        margin-top: 30px;
    }
    
    .ai-loading-container {
        width: 75%;
        max-width: 260px;
        bottom: 15%;
    }
    
    .ai-loading-bar {
        height: 32px;
        border: 2px solid #333;
        padding: 0 5px;
    }
    
    .ai-loading-fill {
        padding: 6px 0;
    }
    
    .ai-loading-fill::before {
        height: 60%;
        background: 
            repeating-linear-gradient(
                90deg,
                transparent 0px,
                transparent 8px,
                rgba(255, 255, 255, 0.5) 8px,
                rgba(255, 255, 255, 0.5) 10px
            ),
            linear-gradient(
                90deg,
               #888888 0%,
            #777777 10%,
            #666666 20%,
            #555555 30%,
            #444444 40%,
            #333333 50%,
            #2a2a2a 60%,
            #222222 70%,
            #1a1a1a 80%,
            #111111 90%,
            #000000 100%
            );
    }
}

@media screen and (max-width: 576px) {
    .banner-image-wrapper {
        margin-top: 40px;
    }
    
    .ai-loading-container {
        width: 80%;
        max-width: 240px;
        bottom: 12%;
    }
    
    .ai-loading-bar {
        height: 28px;
        border: 2px solid #333;
        padding: 0 4px;
    }
    
    .ai-loading-fill {
        padding: 5px 0;
    }
    
    .ai-loading-fill::before {
        height: 55%;
        background: 
            repeating-linear-gradient(
                90deg,
                transparent 0px,
                transparent 6px,
                rgba(255, 255, 255, 0.5) 6px,
                rgba(255, 255, 255, 0.5) 8px
            ),
            linear-gradient(
                90deg,
               #888888 0%,
            #777777 10%,
            #666666 20%,
            #555555 30%,
            #444444 40%,
            #333333 50%,
            #2a2a2a 60%,
            #222222 70%,
            #1a1a1a 80%,
            #111111 90%,
            #000000 100%
            );
    }
}

@media screen and (max-width: 480px) {
    .ai-loading-container {
        width: 85%;
        max-width: 190px;
        bottom: 16%;
    }
    
    .ai-loading-bar {
        height: 25px;
        border: 1.5px solid #333;
        padding: 0 3px;
    }
    
    .ai-loading-fill {
        padding: 4px 0;
    }
    
    .ai-loading-fill::before {
        height: 50%;
        background: 
            repeating-linear-gradient(
                90deg,
                transparent 0px,
                transparent 5px,
                rgba(255, 255, 255, 0.5) 5px,
                rgba(255, 255, 255, 0.5) 7px
            ),
            linear-gradient(
                90deg,
            #888888 0%,
            #777777 10%,
            #666666 20%,
            #555555 30%,
            #444444 40%,
            #333333 50%,
            #2a2a2a 60%,
            #222222 70%,
            #1a1a1a 80%,
            #111111 90%,
            #000000 100%
            );
    }
}

@media screen and (max-width: 375px) {
    .ai-loading-container {
        width: 88%;
        max-width: 170px;
        bottom: 16%;
    }
    
    .ai-loading-bar {
        height: 22px;
        border: 1.5px solid #333;
        padding: 0 3px;
        border-radius: 40px;
    }
    
    .ai-loading-fill {
        padding: 3px 0;
    }
    
    .ai-loading-fill::before {
        height: 48%;
        background: 
            repeating-linear-gradient(
                90deg,
                transparent 0px,
                transparent 4px,
                rgba(255, 255, 255, 0.5) 4px,
                rgba(255, 255, 255, 0.5) 6px
            ),
            linear-gradient(
                90deg,
                #888888 0%,
                #666666 25%,
                #444444 50%,
                #222222 75%,
                #000000 100%
            );
        border-radius: 40px;
    }
}

@media screen and (max-width: 320px) {
    .ai-loading-container {
        width: 90%;
        max-width: 150px;
        bottom: 16%;
    }
    
    .ai-loading-bar {
        height: 20px;
        border: 1px solid #333;
        padding: 0 2px;
        border-radius: 35px;
    }
    
    .ai-loading-fill {
        padding: 3px 0;
    }
    
    .ai-loading-fill::before {
        height: 45%;
        background: 
            repeating-linear-gradient(
                90deg,
                transparent 0px,
                transparent 3px,
                rgba(255, 255, 255, 0.5) 3px,
                rgba(255, 255, 255, 0.5) 5px
            ),
            linear-gradient(
                90deg,
                #888888 0%,
                #555555 33%,
                #333333 66%,
                #000000 100%
            );
        border-radius: 35px;
    }
}



/* Responsive Adjustments */
@media screen and (max-width: 991px) {
    .moving-icon {
        width: 42px;
        height: 42px;
        padding: 6px;
    }
}
@media screen and (max-width: 767px) {
    .moving-icon {
        width: 35px;
        height: 35px;
        padding: 5px;
    }
    
    @keyframes wooMoving {
        0% {
            left: 0;
            opacity: 0;
            transform: translateX(-30px) scale(0.5);
        }
        10% {
            opacity: 1;
            transform: translateX(0) scale(1);
        }
        50% {
            left: 45%;
            opacity: 1;
            transform: translateX(-17px) scale(1);
        }
        60% {
            opacity: 0;
            transform: translateX(-17px) scale(0.5);
        }
        100% {
            left: 45%;
            opacity: 0;
            transform: translateX(-17px) scale(0.5);
        }
    }
    
    @keyframes shopifyReceiving {
        0% {
            left: 45%;
            opacity: 0;
            transform: translateX(-17px) scale(0.5);
        }
        10% {
            opacity: 1;
            transform: translateX(-17px) scale(1.1);
        }
        50% {
            left: 90%;
            opacity: 1;
            transform: translateX(-35px) scale(1);
        }
        90% {
            opacity: 0.5;
        }
        100% {
            left: 95%;
            opacity: 0;
            transform: translateX(-35px) scale(0.8);
        }
    }
}
@media (max-width: 992px) {
	.portfolio-section {
        padding: 80px 0;
    }
    
    .portfolio-title {
        font-size: 2.5rem;
    }
    
    .portfolio-subtitle {
        font-size: 1rem;
    }
    
    .portfolio-carousel .slick-prev {
        left: -40px;
    }
    
    .portfolio-carousel .slick-next {
        right: -40px;
    }
}
@media (max-width: 768px) {
	.portfolio-section {
        padding: 60px 0;
    }
    
    .portfolio-title {
        font-size: 2rem;
        padding: 0 15px;
    }
    
    .portfolio-subtitle {
        font-size: 0.95rem;
        padding: 0 15px;
    }
    
    .portfolio-carousel {
        margin-top: 30px;
        padding: 0 15px;
    }
    
    .portfolio-carousel .slick-list {
        overflow: hidden;
        padding: 0 !important;
    }
    
    .portfolio-carousel .slick-prev,
    .portfolio-carousel .slick-next {
        display: none !important;
    }
    
    .portfolio-carousel .slick-slide {
        padding: 0 10px;
    }
    
    .portfolio-card {
        min-height: auto;
    }
    
    .portfolio-image {
        height: 180px;
        padding: 15px 0 0 15px;
    }
    
    .portfolio-content {
        padding: 20px 15px;
    }
    
    .portfolio-brand {
        font-size: 1.2rem;
    }
    
    .portfolio-description {
        font-size: 0.85rem;
        line-height: 1.5;
    }
    
    .portfolio-carousel .slick-dots {
        bottom: -40px;
    }
    
    .portfolio-carousel .slick-dots li {
        margin: 0 3px;
    }
    
    .case-studies-title {
        font-size: 2rem;
    }
    
    .case-study-metrics {
        flex-wrap: wrap;
    }
    
    .metric-item {
        flex: 0 0 calc(50% - 10px);
        margin-bottom: 15px;
    }
    
    .cta-title {
        font-size: 2rem;
    }
    
    .cta-subtitle {
        font-size: 1rem;
    }
    
    .expert-image-wrapper {
        width: 250px;
        height: 250px;
    }
    
    .ring-1 {
        width: 270px;
        height: 270px;
    }
    
    .ring-2 {
        width: 290px;
        height: 290px;
    }
    
    .ring-3 {
        width: 310px;
        height: 310px;
    }
}
@media (max-width: 576px) {
	 /* Portfolio Section Mobile */
    .portfolio-section {
        padding: 50px 0;
    }
    
    .portfolio-label {
        font-size: 0.75rem;
        padding-left: 18px;
    }
    
    .portfolio-label::before {
        width: 8px;
        height: 8px;
    }
    
    .portfolio-title {
        font-size: 1.75rem;
        padding: 0 10px;
        line-height: 1.3;
    }
    
    .portfolio-subtitle {
        font-size: 0.9rem;
        padding: 0 10px;
    }
    
    .portfolio-carousel {
        margin-top: 25px;
        padding: 0 10px;
    }
    
    .portfolio-carousel .slick-slide {
        padding: 0 8px;
    }
    
    .portfolio-card {
        min-height: auto;
        border-radius: 15px;
    }
    
    .portfolio-image {
        height: 160px;
        padding: 12px 0 0 12px;
    }
    
    .portfolio-content {
        padding: 18px 12px;
    }
    
    .portfolio-brand {
        font-size: 1.1rem;
        margin-bottom: 10px;
    }
    
    .portfolio-description {
        font-size: 0.8rem;
        line-height: 1.4;
    }
    
    .portfolio-carousel .slick-dots {
        bottom: -35px;
    }
    
    .portfolio-carousel .slick-dots li {
        margin: 0 2px;
    }
    
    .portfolio-carousel .slick-dots li button:before {
        font-size: 10px;
    }
    
    .case-studies-section {
        padding: 60px 0;
    }
    
    .case-studies-title {
        font-size: 1.75rem;
    }
    
    .case-studies-subtitle {
        font-size: 0.95rem;
    }
    
    .case-study-name {
        font-size: 1.5rem;
        min-height: 50px;
        gap: 10px;
    }
    
    .case-study-content .case-study-name img {
        max-height: 40px;
        max-width: 150px;
    }
    
    .case-study-name i {
        font-size: 1rem;
    }
    
    .case-study-description {
        font-size: 0.9rem;
    }
    
    .metric-value {
        font-size: 1.5rem;
    }
    
    .metric-label {
        font-size: 0.7rem;
    }
    
    .cta-section {
        padding: 60px 0;
    }
    
    .cta-section .col-lg-7 {
        padding-right: 15px;
        margin-bottom: 30px !important;
    }
    
    .cta-section .col-lg-5 {
        padding-left: 15px;
    }
    
    .cta-title {
        font-size: 1.75rem;
    }
    
    .cta-subtitle {
        font-size: 0.95rem;
    }
    
    .btn-cta {
        padding: 15px 30px;
        font-size: 1rem;
    }
    
    .expert-image-wrapper {
        width: 220px;
        height: 220px;
    }
    
    .expert-image {
        border: 5px solid white;
    }
    
    .ring-1 {
        width: 240px;
        height: 240px;
    }
    
    .ring-2 {
        width: 260px;
        height: 260px;
    }
    
    .ring-3 {
        width: 280px;
        height: 280px;
    }
    
    .expert-name {
        font-size: 1.5rem;
    }
    
    .expert-title {
        font-size: 0.95rem;
    }
    
}

/* Book a Call Button (Secondary) */
.book-a-call-btn {
    border-radius: 5px;
    border-color: #000000;
    border-width: 2px;
    color: #000000;
    background-color: transparent;
    position: relative;
    overflow: hidden;
}

.book-a-call-btn:hover {
    background: linear-gradient(135deg, #000000 0%, #f16323 100%);
    color: #fff !important;
    border-color: #f16323;
    /* transform: translateY(-2px); */
    box-shadow: 0 5px 15px rgba(241, 99, 35, 0.3);
}

.book-a-call-btn:active {
    transform: translateY(0);
}

/* Migrate Now Button - Main Banner */
.jumper.btn-dark:hover {
    background: linear-gradient(135deg, #000000 0%, #f16323 100%) !important;
    /* transform: translateY(-2px); */
    box-shadow: 0 5px 15px rgba(241, 99, 35, 0.4);
    transition: all 0.3s ease;
}

.jumper.btn-dark:active {
    transform: translateY(0);
}

/* Responsive styles for main-banner buttons */
@media (max-width: 767px) {
    .main-banner .d-flex.align-items-center {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem !important;
    }
    
    .main-banner .btn {
        width: 100% !important;
        text-align: center;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

@media (max-width: 575px) {
    .main-banner .btn-lg {
        font-size: 1rem;
        padding: 0.75rem 1.25rem !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .main-banner .btn-lg {
        font-size: 1rem;
        padding: 0.75rem 2rem !important;
    }
}

@media (max-width: 320px) {
    .main-banner h1 {
    font-size: 40px;
}
ul.bigcommerce-list li {
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid #7f54b1;
    height: max-content;
    min-height: 80px;
}
}
@media (min-width: 320PX) and (max-width: 480PX) {
    .main-banner h1 {
    font-size: 40px;
}
ul.bigcommerce-list li {
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid #7f54b1;
    height: max-content;
    min-height: 80px;
}
}