/* Video play button css for hero */

.CoolProjex-hero-video-play{position:relative}

.CoolProjex-hero-video-play {
    position: relative;
    max-width: 100%;
    width: 100%;
    border: 1px solid #36a9e14f;
    box-shadow: inset 0 0 68px #36a9e13d, 0 1em 2em rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 12px;
}
.CoolProjex-hero-video-play img{    border-radius: 6px;width:100%}
/* .CoolProjex-hero-video-play::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(3, 8, 41, 0.5);
    border-radius: 10px;
    border: 6px solid #fff;
} */
.CoolProjex-hero-video-play .CoolProjex-video-btn-main {
    position: absolute;
    top: 39%;
    left: 45%;
}
.CoolProjex-hero-video-play .CoolProjex-video-play-button {
	position: relative;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: #36A9E1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform 0.3s ease;
}

.CoolProjex-hero-video-play .CoolProjex-video-play-button:hover {
	transform: scale(1.05);
}

.CoolProjex-hero-video-play .CoolProjex-video-play-button .CoolProjex-icon {
	width: 0;
	height: 0;
	border-left: 20px solid white;
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
	position: relative;
	z-index: 0;    right: -3px;
}

.CoolProjex-hero-video-play .CoolProjex-video-play-button::before,
.CoolProjex-hero-video-play .CoolProjex-video-play-button::after,
.CoolProjex-hero-video-play .CoolProjex-video-play-button .CoolProjex-pulse-ring {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
  background: rgba(54, 169, 225, 0.4); /* RGB-like color with opacity */
	animation: CoolProjex-pulse 2s ease-out infinite;
	z-index: 0;
}

.CoolProjex-video-play-button::after {
	animation-delay: 0.5s;
}

.CoolProjex-video-play-button .CoolProjex-pulse-ring {
	animation-delay: 1s;
}

@keyframes CoolProjex-pulse {
	0% {
		transform: scale(1);
		opacity: 1;
	}
	100% {
		transform: scale(2.5);
		opacity: 0;
	}
}

.CoolProjex-video-overlay {
	position: fixed;
	top: 0; left: 0;
	width: 100vw;
	height: 100vh;
background: rgba(54, 169, 225, 0.85); /* Updated color */
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 9999999999;
}
.CoolProjex-spinner {
  border: 6px solid #f3f3f3; /* Light gray */
  border-top: 6px solid #36A9E1; /* Blue */
	    position: absolute;
    left: 49%;
    top: 49%;
    z-index: 333333;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  animation: CoolProjex-spin 1.5s linear infinite;
}

@keyframes CoolProjex-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.CoolProjex-video-overlay.CoolProjex-active {
	display: flex;
}

.CoolProjex-video-overlay iframe {
	max-width: 90vw;
	max-height: 90vh;
	border: none;
}

.CoolProjex-video-overlay .CoolProjex-close-btn {
	position: absolute;
top: 40px;
    right: 60px;
    font-size: 65px;
	color: #fff;
	cursor: pointer;
	z-index: 1000;
	transition: transform 0.2s;
}

.CoolProjex-video-overlay .CoolProjex-close-btn:hover {
	transform: scale(1.2);
	color: #36A9E1;
}

.CoolProjex-video-overlay iframe {
	max-width: 95vw;
	max-height: 95vh;
	width: 1200px;
	height: 675px;
	border: none;
}
body {
  overflow-x: hidden;
}

@media (max-width: 1024px) {
.CoolProjex-hero-video-play .CoolProjex-video-play-button {

    width: 65px;
    height: 65px;
 
}
.CoolProjex-hero-video-play .CoolProjex-video-btn-main {
    position: absolute;
    top: 38%;
    left: 42%;
}
	
}

@media (max-width: 767px) {
.CoolProjex-hero-video-play .CoolProjex-video-play-button {

    width: 50px;
    height: 50px;
 
}
.CoolProjex-hero-video-play .CoolProjex-video-btn-main {
    position: absolute;
    top: 38%;
    left: 42%;
}
	
.CoolProjex-hero-video-play .CoolProjex-video-play-button .CoolProjex-icon {
    width: 0;
    height: 0;
    border-left: 15px solid white;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    position: relative;
    z-index: 0;
    right: -2px;
}
}





/* Marquee Testimonial css */
.CoolProjex-marquee {
    width: 100%;
    overflow: hidden;
    padding: 30px 0;
}

.CoolProjex-marquee .CoolProjex-track {
/*     display: flex;
    width: max-content; */
/*     animation: CoolProjex-scroll 20s linear infinite; */
	
	 display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 50px;
    align-items: start;
}

.CoolProjex-marquee:hover .CoolProjex-track {
/*     animation-play-state: paused; */
}

.CoolProjex-marquee .CoolProjex-card {
    width: 100%;
    min-width: 300px;
    padding: 25px 20px;
    margin: 0 10px;
    background: #F8F9F9;
    flex-shrink: 0;
/*     padding-bottom: 45px; */
}

.CoolProjex-marquee .CoolProjex-card .CoolProjex-stars {
    color: orange;
    font-size: 16px;
    margin-bottom: 10px;
}

.CoolProjex-marquee .CoolProjex-card p {
    font-size: 14px;
    color: #0D273D;
    margin-bottom: 12px;
    line-height: 1.5;
}

.CoolProjex-marquee .CoolProjex-card h4 {
    color: #233A4F;
    font-size: 20px;
    margin-top: 20px;
    display: block;    margin-bottom: 0;
}

/* Desktop Animation */
/* @keyframes CoolProjex-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
} */

/* Mobile Animation - slides full width faster */
/* @keyframes CoolProjex-scroll-mobile {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
} */

@media (max-width: 767px) {
    .CoolProjex-marquee .CoolProjex-card {
        width: 90vw;
        margin: 10px auto;margin-left: 10px;
    margin-right: 10px;
    }
.CoolProjex-marquee .CoolProjex-track {
/*     display: flex;
    width: max-content; */
/*     animation: CoolProjex-scroll 20s linear infinite; */
	
	 display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px 0px;
    align-items: center;
}
    .CoolProjex-marquee .CoolProjex-track {
        width: 100%;
/*         animation: CoolProjex-scroll-mobile 20s linear infinite; */
    }
    
    .CoolProjex-marquee {
        padding: 0;
    }
	
	.CoolProjex-marquee .CoolProjex-card h4 {

		margin-bottom: 30px;
	}
}






/* Stacking card rotate css */
:root {
	--card-height: 65vh;
	--card-margin: 4vh;
	--card-top-offset: 1em;
	--numcards: 4;
	--outline-width: 0px;
}
 @media (max-width: 1024px) {
:root {
	--card-height: 25vh;

}
	
}

 @media (max-width: 767px) {
	.CoolProjex-stacking-card__content>div {
		gap: 18px;

	}
:root {
/* 	--card-height: 53vh; */

}
	 
}

 
@media screen and (min-width: 360px) and (max-width: 375px) and (max-height: 740px) {
:root {
/* 	--card-height: 64vh; */

}
}
 



.CoolProjexStacking ul{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}




.CoolProjexStacking main {
	width: 80vw;
	margin: 0 auto;
}



#CoolProjex-stacking-cards {
	padding-bottom: calc(var(--numcards) * var(--card-top-offset));
	margin-bottom: var(--card-margin);
	list-style: none;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(var(--numcards), var(--card-height));
	gap: var(--card-margin);
	counter-reset: card;
}

#CoolProjex-stacking-card_1 { --index: 1; }
#CoolProjex-stacking-card_2 { --index: 2; }
#CoolProjex-stacking-card_3 { --index: 3; }
#CoolProjex-stacking-card_4 { --index: 4; }

.CoolProjex-stacking-card {
	position: sticky;
	top: 70px;
	padding-top: calc(var(--index) * var(--card-top-offset));
}

.CoolProjex-stacking-card__content {
	background: white;
	padding:24px;
	border-radius: 20px;
	box-shadow: inset 0 0 68px #36a9e13d, 0 1em 2em rgba(0, 0, 0, 0.1);
	display: grid;
	grid-template-areas: "text img";
	grid-template-columns: 1fr 1fr;
	align-items: stretch;border: 1px solid #36a9e14f;
}
.CoolProjex-stacking-card__content div h2{    font-family: "Neue Haas Grotesk Bold Title Pro", Sans-serif;
    font-size: 44px;    line-height: 45px;
    font-weight: 800;margin: 0;
    color: #0D273D;}
.CoolProjex-stacking-card__content div p{    font-size: 16px;color: #384D61;
    line-height: 25px;margin: 0;
}
.CoolProjex-stacking-card__content figure.CoolProjex-stacking-card-thumbnail img{display:block;width:100%;border-radius:6px}
.CoolProjex-stacking-card__content > div {
	grid-area: text;
	width: 80%;
	place-self: center;
	text-align: left;
	display: grid;
	gap: 1em;
	place-items: start;
}

.CoolProjex-stacking-card__content > figure {
	grid-area: img;
	overflow: hidden;
}

.CoolProjex-stacking-card__content > figure > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@supports (animation-timeline: works) {
	@scroll-timeline CoolProjex-cards-scroll {
		source: selector(body);
		scroll-offsets: selector(#CoolProjex-stacking-cards) start 1, selector(#CoolProjex-stacking-cards) start 0;
		start: selector(#CoolProjex-stacking-cards) start 1;
		end: selector(#CoolProjex-stacking-cards) start 0;
		time-range: 4s;
	}

	.CoolProjex-stacking-card {
		--index0: calc(var(--index) - 1);
		--reverse-index: calc(var(--numcards) - var(--index0));
		--reverse-index0: calc(var(--reverse-index) - 1);
	}

	.CoolProjex-stacking-card__content {
		transform-origin: 50% 0%;
		will-change: transform;
		--duration: calc(var(--reverse-index0) * 1s);
		--delay: calc(var(--index0) * 1s);
		animation: var(--duration) linear CoolProjex-scale var(--delay) forwards;
		animation-timeline: CoolProjex-stacking-cards-scroll;
	}

	@keyframes CoolProjex-scale {
		to {
			transform: scale(calc(1.1 - (0.1 * var(--reverse-index))));
		}
	}
}

@media (max-width: 1024px) {
	.CoolProjex-stacking-card__content div h2 {
line-height: 38px;
    font-size: 32px;

}
.CoolProjex-stacking-card__content > div {

    width: 100%;

}

	
}
@media (min-width: 768px) and (max-width: 820px) {
	
	.CoolProjex-stacking-card-wrapper
	.CoolProjex-stacking-card-title .elementor-widget-container {
    padding: 70px 0px 5px 0px!important
}
	

.friends-area-section{background-color: #e3edf5 !important;
    background-image: none;        background-position: 50%;
}
.friends-area-section .friends-area-info{padding-left: 0px !important
	
	}
}
@media (max-width: 767px) {
	.CoolProjex-stacking-card-wrapper
	.CoolProjex-stacking-card-title .elementor-widget-container {
    padding: 70px 0px 5px 0px!important
}
	
	
		.CoolProjex-stacking-card__content div h2 {
line-height: 28px;
    font-size: 26px;

}
.CoolProjex-stacking-card__content > div {
        width: 100%;
        margin-bottom: 24px;
    }

/* Children must have these: */
.CoolProjex-stacking-card__text {
    grid-area: text;
}

.CoolProjex-stacking-card__image {
    grid-area: img;
}
	
    .CoolProjex-stacking-card__content {
        grid-template-areas:
            "text"
            "img";
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
  .CoolProjex-stacking-card {
    position: static !important;
    top: auto !important;
  }

  .CoolProjex-stacking-card__content {
    animation: none !important;
  }
	
:root {
    --card-height: auto;
    --card-margin: 0vh;
    --card-top-offset: 0.2em;
    --numcards: 4;
    --outline-width: 0px;
}
}




/* // marquee  */
/* Top rotated wrapper */
.CoolProjex-rotated-wrapper-main{position:relative}

.CoolProjex-rotated-wrapper {
    transform: rotate(-2deg);
    overflow: hidden;
    position: relative;
    z-index: 1;
    bottom: -88px;
}


/* Bottom rotated wrapper */
.CoolProjex-rotated-wrapper-bottom {
	transform: rotate(2deg);
	overflow: hidden;

}
.CoolProjex-marqueee-top{	background: #36A9E1;}
.CoolProjex-marqueee-bottom{	background: #6ebde3;}
.CoolProjex-marquee-container {
	overflow: hidden;

	padding: 10px 0;height: 80px;
}

/* MARQUEE CONTENT */
.CoolProjex-marquee-content {
  display: flex;
  width: max-content;
  animation: CoolProjexMarqueeLeft 100s linear infinite;
	    height: 80px;
 
}

.CoolProjex-marquee-content.reverse {
  animation: CoolProjexMarqueeRight 100s linear infinite;
}

.CoolProjex-marquee-item {
    flex: 0 0 auto;
    margin-right: 60px;
    padding: 18px;
    /* background: #e9e9e9; */
    text-align: center;
    font-size: 18px;
    color: #fff;
    align-items: center;
    justify-content: center;
   
	display: block;
}
.CoolProjex-marqueee-top .CoolProjex-marquee-item{     position: relative;}
.CoolProjex-marqueee-top .CoolProjex-marquee-item img {
    position: absolute;
    left: -47px;
    top: 12px;
}
@keyframes CoolProjexMarqueeLeft {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

@keyframes CoolProjexMarqueeRight {
	0% {
		transform: translateX(-50%);
	}
	100% {
		transform: translateX(0);
	}
}

/* Pause on hover */
.CoolProjex-marquee-container:hover .CoolProjex-marquee-content {
	animation-play-state: paused;
}
.CoolProjex-marqueee-top{	background: #36A9E1;width:110vw;left: -4vw;}
.CoolProjex-marqueee-bottom{	position: relative;background: #6ebde3;width:110vw;left: -4vw;}


@media (max-width: 1024px) {
.CoolProjex-rotated-wrapper {
    bottom: -65px;
}
.CoolProjex-marquee-item {
    margin-right: 70px;
    padding: 11px 10px;
}

	.CoolProjex-marqueee-bottom .CoolProjex-marquee-item {
    margin-right: 70px;
    padding:0px 10px;
}

	
	
.CoolProjex-marquee-container {
height: 60px;
}
.CoolProjex-marqueee-top .CoolProjex-marquee-item img {
    position: absolute;
    left: -47px;
    top: 3px;
}
	
	
.CoolProjex-marqueee-top{width:100vw;left: 0vw;}
.CoolProjex-marqueee-bottom{	width:100vw;left: 0vw;}
	
	
	

.CoolProjex-rotated-wrapper {
    bottom: 0px;
}
}

@media (max-width: 767px) {
.CoolProjex-marqueee-top{width:100vw;left: 0vw;}
.CoolProjex-marqueee-bottom{	width:100vw;left: 0vw;}

}


