.header-blue {max-height: 570px;margin-bottom: -20px;}
.header-orange {max-width: 800px;margin-bottom: -10px;transform: rotate(90deg);height: 800px;}

.shape.top-center {position: absolute;top: -80px;margin: 0 auto;left: 30%;}
.header-top-blue {width: 1421px;height: 580px;transform: rotate(214deg);box-shadow: inset 20px 20px 20px 20px rgb(0 0 0 / 0%), inset -20px 20px 20px 20px rgb(0 0 0 / 0%);}

.yellowcircle{
	background: #e59700 !important;
	/* 	background: radial-gradient(circle at center, rgba(238,175,54), rgba(238,175,54, 0)) !important; */
	box-shadow: 0 0 90px 112px #e59700!important;
	opacity: 0.7 !important;
}

.bluecircle{
	background: #8cd1f3 !important;
	box-shadow: 0 0px 90px 112px #8cd1f3 !important;
}
.right-ani{
	right:8%;
}
.left-ani{
	left: 0;
}
.hero-center{
	left: 50%;
	transform: translate(-50%, 20px);
}
.page-header-img {
	z-index: 2;
}


.circles {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	animation-name: rotate;
	animation-duration: 25s;
	animation-iteration-count: infinite;
	animation-direction: reverse;
	backface-visibility: hidden;
}

/* .circle::before {
content: "";
display: block;
border-radius: 100%;
position: absolute;
top: -75%;
left: -75%;
height: 15vw;
width: 15vw;
background: radial-gradient(circle at 50% 50%, rgba(0,0,0,1), #eeaf3600), url("data:image/svg+xml,%3Csvg viewBox='0 0 700 700' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
opacity: 0.5;
mix-blend-mode: plus-lighter;
} */




.circles-revers {
	animation-name: rotate-revers;
	animation-duration: 40s;
	animation-iteration-count: infinite;
	animation-direction: reverse;
	backface-visibility: hidden;
}


.circle {
	position: relative;
	width: 5vw;
	height: 5vw;
	border-radius: 50%;
	backface-visibility: hidden;
	opacity: .9;
}

.circle.research {
	background: #296aa9;
	box-shadow: 0 0px 90px 112px #296aa9;
	animation-name: float;
	animation-duration: 12s;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
	opacity: 0.7;
}

.circle.research.bluecircle {
	animation-name: float-random;
	animation-duration: 8s;
}

.circle.research.yellowcircle {
	animation-name: float-circle;
	animation-direction: reverse;
	animation-duration: 5s;
}

.what-wedo-section .bottom-left {
	top: 0;
}

.footer-contact .right-ani {
	right: 0%;
	z-index: -1;
}
.footer-contact .right-ani {
	right: 0%;
	z-index: -1;
}
.footer-contact .circle.research {
	background: #8cd1f3 !important;
	box-shadow: 0 0px 90px 112px #8cd1f3 !important;
	animation-name: float;
	animation-duration: 12s;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
	opacity: 0.7;
}


/*  .page-header-img{background:url(https://circuit.cbddev.com/wp-content/uploads/2023/05/dna.svg) no-repeat;background-size:52% !important} */
.dna-circle-items li {position: absolute;}
.dna-circle-items li:first-child {left: 20%;top: 31%;}
.dna-circle-items li:nth-child(2) {left: 62%; top:32%;}
.dna-circle-items li:nth-child(3) {left: 15%;top: 70%;}
.dna-circle-items li:nth-child(4) {top: 15%;right: 0%;}
.dna-circle-items li span {font-size: 14px;line-height: 16px;position: absolute;width: 100%;left: 0;}
.dna-img {
	position: absolute;
	z-index: -2;
	right: 0px;
	top: 20%;
	width: 100%;
}

.dna-circle-items li{
	padding:0;
	transition: all 0.5s ease-in-out;
}
.dna-circle-items li:first-child span{
	top: 32%;
	left: -166px;
}

.dna-circle-items li:nth-child(4) span {
	top: 32%;
	left: -168px;
	min-width: 110px;
}

.dna-circle-items li:nth-child(2)::before {
	content: "";
	width: 100%;
	height: 13px;
	background: url(../../../images/line-2.png) no-repeat;
	position: absolute;
	top: 45%;
	right: -140px;
	left: unset;
	background-size: 65px;
}

.dna-circle-items li:nth-child(2) span{
	left: unset;
	top: 53%;
	right: -201px;
}

.dna-circle-items li:nth-child(3)::before {
	content: "";
	width: 100%;
	height: 13px;
	background: url(../../../images/line-3.png) no-repeat;
	position: absolute;
	top: 45%;
	right: -140px;
	left: unset;
	background-size: 65px;
}

.dna-circle-items li:nth-child(3) span{
	left: unset;
	right: -200px;
	top: 36%;
}



.dna-circle-items ul li:hover {
	transform: scale(1.1);
}

.dna-circle-items ul li::before {
    content: "";
    width: 100%;
    height: 13px;
    background: url(../../../images/line-blue.png) no-repeat;
    position: absolute;
    left: -65px;
    top: 45%;
	background-size: 65px;
}

.dna-circle-items li:after {
/* 	outline:55px solid black; */
	border-radius:50%;
	content: "";
	position: absolute;
	height:120px;
	width:120px;
	left: 50%;
	top: 50%;
	z-index: -1;
	animation: outline 5s infinite ;
	opacity:0.2;
	-webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
   -khtml-border-radius: 50%;
}

.dna-circle-items li:nth-child(1)::after {
/* 	outline:55px solid   */
	animation-delay: 2s;
	background:#4ed6d5;
}

.dna-circle-items li:nth-child(2)::after {
/* 	outline:55px solid #d6b54e; */
	background:#d6b54e;
}

.dna-circle-items li:nth-child(3)::after {
	background:#d6b54e;
}

.dna-circle-items li:nth-child(4)::after {
	background:#4ed6d5;
	left: 80%;
	animation-delay: 2s;
}

.dna-circle-items {
	position: fixed;
	right: 0;
	width: 1000px;
	bottom: 0;
	height: 900px;
}


@media screen and (max-width: 1440px) {
	.dna-circle-items {
		width: 800px;
    	height: 740px;
	}
}

@media screen and (max-width: 1290px) {
.dna-circle-items {
    width: 630px;
    height: 600px;
}
	.dna-circle-items ul li {
		max-width: 70px !important;
		height: 70px !important;
	}
/* 	.dna-circle-items li::after {
		outline-width: 23px !important;
	} */
	.dna-circle-items li:nth-child(3)::before {
		right: -68px;
		top: 36%;
	}
	.dna-circle-items li:nth-child(3) span {
		right: -130px;
		    top: -10%;
	}
	.dna-circle-items ul li::before {
		left: -64px;
		top: 33%;
	}
	.dna-circle-items li:first-child span {
		top: -15%;
		left: -98px;
	}
	.dna-circle-items li:nth-child(2)::before {
		right: -68px;
	}
	
	.dna-circle-items li:nth-child(2) span {
		right: -130px; 
		    top: 62%;
	}
	.dna-circle-items li:nth-child(4) img {
		object-fit: contain;
		width: 70px;
		height: 70px;
		    margin-right: -21px;
	}
	.dna-circle-items li:nth-child(4) span {
		top: 5%;
		left: -145px;
	}
	
	.dna-circle-items li:nth-child(4)::before {
		    left: -44px;
	}
	.dna-circle-items li:after {
    width: 60px;
    height: 60px;
}
}

@media screen and (max-width: 992px){
	.dna-circle-items {
		width: 430px;
		height: 420px;
	}
}

@media screen and (max-width: 768px){
	.dna-circle-items {
		width: 450px;
		height: 440px;
	}
	body.home .page-header-img {
		align-items: flex-start;
		padding-top: 12rem;
		height: 720px;
	} 
/* 	.dna-circle-items li::after {
		outline: 20px solid #d6b54e !important;
	} */
}

@media screen and (max-width: 470px){
	.dna-circle-items {
		width: 100%;
		height: 315px;
	}
	.dna-circle-items ul li::before {
		background-size: 45px;
		top: 33%;
	}
	.dna-circle-items li:first-child span {
		    left: -60px;
	}
	.dna-circle-items li:nth-child(2) span {
		right: -75px;
	}
	.dna-circle-items li:nth-child(2)::before {
		    background-size: 45px;
		    right: -68px;
	}
	.dna-circle-items ul li::before {
		    left: -45px;
	}
	.dna-circle-items li:nth-child(4)::before {
		left: -38px;
	}
}




@keyframes float {
	0%   { transform: translateX( calc( 125px * 0.0 ) ) translateZ( 0 ) }
	20%  { transform: translateX( calc( 125px * -0.5 ) ) translateZ( 0 ) }
	40%  { transform: translateX( calc( 125px * -1.0 ) ) translateZ( 0 ) }
	60%  { transform: translateX( calc( 125px * -1.5 ) ) translateZ( 0 ) }
	80%  { transform: translateX( calc( 125px * -0.5 ) ) translateZ( 0 ) }
	100% { transform: translateX( calc( 125px * 0.0 ) ) translateZ( 0 ) }
}

@keyframes float-random {
	0%   { transform: translateX( calc( 125px * 0.0 ) ) translateZ( 0 ) }
	20%  { transform: translateX( calc( 125px * 0.5 ) ) translateZ( 0 ) }
	40%  { transform: translateX( calc( 125px * 1 ) ) translateZ( 0 ) }
	60%  { transform: translateX( calc( 125px * 1.5 ) ) translateZ( 0 ) }
	80%  { transform: translateX( calc( 125px * 0.5 ) ) translateZ( 0 ) }
	100% { transform: translateX( calc( 125px * 0.0 ) ) translateZ( 0 ) }
}

@keyframes float-circle {
	0%   { transform: translateX( calc( 125px * 0.0 ) ) translateZ( 0 ) }
	20%  { transform: translateX( calc( 125px * 0.5 ) ) translateZ( 0 ) }
	40%  { transform: translateX( calc( 125px * 1.0 ) ) translateZ( 0 ) }
	60%  { transform: translateX( calc( 125px * 1.5 ) ) translateZ( 0 ) }
	80%  { transform: translateX( calc( 125px * 0.5 ) ) translateZ( 0 ) }
	100% { transform: translateX( calc( 125px * 0.0 ) ) translateZ( 0 ) }
}

@keyframes rotate {
	0%   { transform: rotate( 0deg )   translateZ( 0 ) }
	100% { transform: rotate( 360deg ) translateZ( 0 ) }
}

@keyframes rotate-revers {
	0%   { transform: rotate( 360deg )   translateZ( 0 ) }
	100% { transform: rotate( 0deg ) translateZ( 0 ) }
}




@media (min-width:320px) and (max-width:767px) {
	.bluecircle {
		display:none;
	}
	.hero-bottom-right-shape{
		display:none;
	}

	.footer-contact .circle.research{
		display:block;
	}
	.footer-contact .hero-bottom-right-shape {
		display: block;
	}
	.yellowcircle {
		opacity: 0.5 !important;
	}
}


@keyframes outline{
	0%{
		transform: translate(-50%, -50%) scale(0);
	}
	
	50%{
		transform: translate(-50%, -50%) scale(1.9);
	}
	
	100%{
		transform: translate(-50%, -50%) scale(0);
	}
}