.container-over {
	--sz: min(90vh, clamp(360px, 60vw, 500px));
	--fz: calc(0.032 * var(--sz));
	--xv: 0;
	--yv: 0;
	width: var(--sz);
	height: calc(1.05 * var(--sz));
	max-width: calc(100vw - 24px);
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;

	transform-style: preserve-3d;
	perspective: 1200px;

	.tilt {
		width: 100%;
		height: 100%;
		transition: all 0.4s ease-out;
		box-shadow: 0 0 0 10000px #000000;
		transform: rotateX(calc(1deg * var(--xv))) rotateY(calc(1deg * var(--yv)));
		/* background: linear-gradient(
			calc(var(--yv) * -0.4deg),
			transparent,
			transparent calc(20% + (-3px * var(--xv))),
			rgba(255, 255, 255, 0.06) calc(40% + (-3px * var(--xv))),
			rgba(255, 255, 255, 0.02) calc(70% + (-3px * var(--xv))),
			transparent calc(90% + (-3px * var(--xv))),
			transparent
		); */
        display: flex;
        flex-direction: column;
        align-items: center;
		

		padding: 12px 22px;
		span.tag {
			display: block;
			width: fit-content;
			border: 1px solid #fff3;
			border-radius: 4px;
			color: #fff;
			font-size: 0.8em;
			font-size: calc(0.8 * var(--fz));
			margin: 0 auto 22px auto;
			padding: 4px 8px;
		}
		h2 {
			/* font-size: 3.6em; */
			font-size: 43px;
			font-weight: 500;
			line-height: 116%;
			background: linear-gradient(144deg, #ffffff 0%, #534f4f 100%);
			background-clip: text;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			text-align: center;
			margin: 0;
			margin-bottom: 20px;
			margin-top: 50px;
			letter-spacing: .4px;
		}
		p {
			/* font-size: 1.3em; */
		font-size: 20px;
            margin-top: 69px;
                        letter-spacing: .3px;
            font-weight: 400;
            line-height: 180%;
            color: #fff8;
            text-align: left;
            width: 80%;
        }
			span {
				color: #fffc;
			}
		}
	}

	.vortex {
		position: absolute;
		width: 100%;
		height: 100%;
		svg {
			position: absolute;
			left: 0;
			right: 0;
			bottom: -3%;
            width: 94%;
			margin: auto;
			opacity: 0.1;
		}
	}
/* 
	.mist {
		position: absolute;
		width: 140%;
		height: 200%;
		bottom: -6%;
		left: -20%;
		box-shadow: inset 0 0 calc(var(--sz) / 6) calc(var(--sz) / 10) #F8D10F;
		border-radius: calc(var(--sz) / 2);
	} */

	.orbs {
		position: absolute;
		width: 100%;
		height: 100%;

		.hide-orb {
			--ax: calc((3 / 3.6) * var(--sz));
			position: absolute;
			left: 0;
			right: 0;
			width: 100%;
			height: 100%;
			border-radius: calc((1 / 3) * var(--sz));
			/* box-shadow: inset 0 calc((0.78) * var(--sz)) calc((0.08) * var(--sz))
				calc((-0.18) * var(--sz)) #1e1e1e; */
		} 

		.orb {
			position: absolute;
			width: calc(var(--sz) / 6);
			height: calc(var(--sz) / 6);
			background: #898782;
			box-shadow: 0 -2px 12px -3px #fffdfd, inset 8px -4px 2px 0 #fff2,
				inset 0 0 12px 0 #fffc, inset 0 6px 12px -6px #0008,
				inset 0 32px 12px -12px #0003;
			border-radius: 100%;
			left: 0;
			right: 0;
			margin: auto;
			bottom: 20%;
			opacity: 0;

			--startX: calc(-0.6 * var(--sz));
			--startY: 0;
			--offset: 0s;
			animation: orbX 24s cubic-bezier(0.11, 0, 0.5, 0) infinite,
				orbY 24s cubic-bezier(0.64, 0, 0.92, 0) infinite;
			animation-delay: var(--offset);

			&:nth-child(2) {
				--startX: calc(0.6 * var(--sz));
				--offset: 4s;
			}
			&:nth-child(3) {
				--startX: calc(-0.3 * var(--sz));
				--startY: calc(-0.3 * var(--sz));
				--offset: 8s;
			}
			&:nth-child(4) {
				--startX: calc(0.3 * var(--sz));
				--startY: calc(-0.3 * var(--sz));
				--offset: 12s;
			}
			&:nth-child(5) {
				--startX: calc(-0.6 * var(--sz));
				--startY: calc(-0.15 * var(--sz));
				--offset: 16s;
			}
			&:nth-child(6) {
				--startX: calc(0.6 * var(--sz));
				--startY: calc(-0.15 * var(--sz));
				--offset: 20s;
			}

			img {
				width: 64%;
				height: auto;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
			}

			.dot {
				position: absolute;
				left: 0;
				right: 0;
				top: 100%;
				bottom: 0;
				margin: auto;
				width: 2px;
				height: 1px;
				background: #fff;
				transform-origin: 0 -36px;
				rotate: 0deg;
				box-shadow: 0 0 4px 1px #fff;
				animation: innerDot 10s linear infinite, innerDot2 6s ease-in-out infinite;
				&:nth-child(2) {
					animation: innerDot 12s linear infinite, innerDot2 5s ease-in-out infinite;
					animation-delay: -2s;
					scale: 0.8;
				}
				&:nth-child(3) {
					animation: innerDot 8s linear infinite, innerDot2 4s ease-in-out infinite;
					animation-delay: -6s;
					animation-direction: reverse;
					scale: 0.7;
				}
				&:nth-child(4) {
					animation: innerDot 22s linear infinite, innerDot2 5s ease-in-out infinite;
					animation-delay: -5s;
				}
				&:nth-child(5) {
					animation: innerDot 8s linear infinite, innerDot2 3.4s ease-in-out infinite;
					animation-delay: -1s;
					animation-direction: reverse;
					scale: 0.76;
				}
				&:nth-child(5) {
					animation: innerDot 8.6s linear infinite,
						innerDot2 3.4s ease-in-out infinite;
					animation-delay: -2s;
					scale: 0.8;
				}
				&:nth-child(5) {
					animation: innerDot 9.2s linear infinite,
						innerDot2 3.4s ease-in-out infinite;
					animation-delay: -3s;
					animation-direction: reverse;
					scale: 0.9;
				}
			}
		}
	}

@keyframes innerDot {
	to {
		rotate: 360deg;
	}
}
@keyframes innerDot2 {
	50% {
		translate: 0 -16px;
	}
	100% {
		translate: 0 0px;
	}
}

@keyframes orbX {
	0% {
		translate: var(--startX) var(--startY);
	}
	20% {
		translate: 0 0;
	}
	100% {
		translate: 0 0;
	}
}
@keyframes orbY {
	0% {
		transform: translateY(0) scale(1);
		opacity: 1;
	}
	20% {
		transform: translateY(calc(0.3 * var(--sz))) scale(0.5);
		opacity: 0;
	}
	100% {
		transform: translateY(calc(0.3 * var(--sz))) scale(0.5);
		opacity: 0;
	}
} 

  
#stars {
	width: 1px;
	height: 1px;
	background: transparent;
	
	animation: animStar 50s linear infinite;
  }
  
  #stars:after {
	content: "★ ";
	position: absolute;
	top: 2000px;
	width: 1px;
	height: 1px;
	background: transparent;
  }
  
  #stars3 {
	width: 3px;
	height: 3px;
	background: transparent;
	
	animation: animStar 150s linear infinite;
  }
  
  #stars3:after {
	content: "★ ";
	position: absolute;
	top: 2000px;
	width: 3px;
	height: 3px;
	background: transparent;
	
  }
  
  @keyframes animStar {
	from {
	  transform: translateY(0px);
	}
	to {
	  transform: translateY(-2000px);
	}
  }
  #stars, #stars3 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
  }
  
  .fadein {
	opacity: 0;
	transition: all 1.5s;
	transform: translate(0, 100px);
  }
  
  .fadein.visible {
	opacity: 1;
	transform: translate(0, 0);
  }

  /* Button Shadow Container */
.button-shadow {
	--shadow-cuttoff-fix: 2em;
	position: absolute;
	width: calc(100% + var(--shadow-cuttoff-fix));
	height: calc(100% + var(--shadow-cuttoff-fix));
	top: calc(0% - var(--shadow-cuttoff-fix) / 2);
	left: calc(0% - var(--shadow-cuttoff-fix) / 2);
	filter: blur(clamp(2px, 0.125em, 12px));
	-webkit-filter: blur(clamp(2px, 0.125em, 12px));
	-moz-filter: blur(clamp(2px, 0.125em, 12px));
	-ms-filter: blur(clamp(2px, 0.125em, 12px));
	overflow: visible;
	pointer-events: none;
  }
  
  /* Shadow */
  .button-shadow::after {
	content: "";
	position: absolute;
	z-index: 0;
	inset: 0;
	border-radius: 999vw;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
	width: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
	height: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
	top: calc(var(--shadow-cuttoff-fix) - 0.5em);
	left: calc(var(--shadow-cuttoff-fix) - 0.875em);
	padding: 0.125em;
	box-sizing: border-box;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	transition: all var(--anim--hover-time) var(--anim--hover-ease);
	overflow: visible;
	opacity: 1;
  }

  .btn-primary.contact-btn {
	  /* Basic Styling */
	  --border-width: clamp(1px, 0.0625em, 4px);
	  all: unset;
	  cursor: pointer;
	  position: relative;
	  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	  pointer-events: auto;
	  z-index: 3;
	  background: linear-gradient(
		-75deg,
		rgba(255, 255, 255, 0.05),
		rgba(255, 255, 255, 0.2),
		rgba(255, 255, 255, 0.05)
	  );
	  border-radius: 999vw;
	  box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
		inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
		0 0.25em 0.125em -0.125em rgba(0, 0, 0, 0.2),
		0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2),
		0 0 0 0 rgba(255, 255, 255, 1);
	  backdrop-filter: blur(clamp(1px, 0.125em, 4px));
	  -webkit-backdrop-filter: blur(clamp(1px, 0.125em, 4px));
	  -moz-backdrop-filter: blur(clamp(1px, 0.125em, 4px));
	  -ms-backdrop-filter: blur(clamp(1px, 0.125em, 4px));
	  transition: all var(--anim--hover-time) var(--anim--hover-ease);
	}
	
	.btn-primary.contact-btn:hover {
	  transform: scale(0.975);
	  backdrop-filter: blur(0.01em);
	  -webkit-backdrop-filter: blur(0.01em);
	  -moz-backdrop-filter: blur(0.01em);
	  -ms-backdrop-filter: blur(0.01em);
	  box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
		inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
		0 0.15em 0.05em -0.1em rgba(0, 0, 0, 0.25),
		0 0 0.05em 0.1em inset rgba(255, 255, 255, 0.5),
		0 0 0 0 rgba(255, 255, 255, 1);
	}
	.btn-primary.contact-btn span{
		display: flex;
		padding: 20px 35px;
		gap: 10px;
		justify-content: start;
	}	
	.btn-primary.contact-btn a{
		color: white;
	}	


	.btn-primary.contact-btn span::after {
		content: "";
		display: block;
		position: absolute;
		z-index: 1;
		width: calc(100% - var(--border-width)); /* Prevent overlapping border */
		height: calc(100% - var(--border-width));
		top: calc(0% + var(--border-width) / 2);
		left: calc(0% + var(--border-width) / 2);
		box-sizing: border-box;
		border-radius: 999vw;
		overflow: clip;
		background: linear-gradient(
		  var(--angle-2),
		  rgba(255, 255, 255, 0) 0%,
		  rgba(255, 255, 255, 0.5) 40% 50%,
		  rgba(255, 255, 255, 0) 55%
		);
		z-index: 3;
		mix-blend-mode: screen;
		pointer-events: none;
		background-size: 200% 200%;
		background-position: 0% 50%;
		background-repeat: no-repeat;
		transition: background-position calc(var(--anim--hover-time) * 1.25)
			var(--anim--hover-ease),
		  --angle-2 calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease);
	  }
	  
	  .btn-primary.contact-btn:hover span::after {
		background-position: 25% 50%;
	  }
	  
	  .btn-primary.contact-btn:active span::after {
		background-position: 50% 15%;
		--angle-2: -15deg;
	  }
	  
	  /* Touch Devices */
	  @media (hover: none) and (pointer: coarse) {
		.btn-primary.contact-btn span::after,
		.btn-primary.contact-btn:active span::after {
		  --angle-2: -45deg;
		}
	  }
	  
	  /* ========== BUTTON OUTLINE ========== */
	  
	  /* Outline */
	  .btn-primary.contact-btn::after {
		content: "";
		position: absolute;
		z-index: 1;
		inset: 0;
		border-radius: 999vw;
		width: calc(100% + var(--border-width));
		height: calc(100% + var(--border-width));
		top: calc(0% - var(--border-width) / 2);
		left: calc(0% - var(--border-width) / 2);
		padding: var(--border-width);
		box-sizing: border-box;
		background: conic-gradient(
			from var(--angle-1) at 50% 50%,
			rgba(0, 0, 0, 0.5),
			rgba(0, 0, 0, 0) 5% 40%,
			rgba(0, 0, 0, 0.5) 50%,
			rgba(0, 0, 0, 0) 60% 95%,
			rgba(0, 0, 0, 0.5)
		  ),
		  linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
		mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
		mask-composite: exclude;
		transition: all var(--anim--hover-time) var(--anim--hover-ease),
		  --angle-1 500ms ease;
		box-shadow: inset 0 0 0 calc(var(--border-width) / 2) rgba(255, 255, 255, 0.5);
	  }
	  
	  .btn-primary.contact-btn:hover::after {
		--angle-1: -125deg;
	  }
	  
	  .btn-primary.contact-btn:active::after {
		--angle-1: -75deg;
	  }
	  
	  @media (hover: none) and (pointer: coarse) {
		.btn-primary.contact-btn::after,
		.btn-primary.contact-btn:hover::after,
		.btn-primary.contact-btn:active::after {
		  --angle-1: -75deg;
		}
	  }
	  
	  /* Shadow Hover */
	  .btn-primary.contact-btn:has(.btn-primary.contact-btn:hover) .btn-primary.contact-btn-shadow {
		filter: blur(clamp(2px, 0.0625em, 6px));
		-webkit-filter: blur(clamp(2px, 0.0625em, 6px));
		-moz-filter: blur(clamp(2px, 0.0625em, 6px));
		-ms-filter: blur(clamp(2px, 0.0625em, 6px));
		transition: filter var(--anim--hover-time) var(--anim--hover-ease);
	  }
	  
	  .btn-primary.contact-btn:has(.btn-primary.contact-btn:hover) .button-shadow::after {
		top: calc(var(--shadow-cuttoff-fix) - 0.875em);
		opacity: 1;
	  }
	  
	  /* Rotation */
	  .btn-primary.contact-btn:has(.btn-primary.contact-btn:active) {
		transform: rotate3d(1, 0, 0, 25deg);
	  }
	  
	  .btn-primary.contact-btn:has(.btn-primary.contact-btn:active) .btn-primary.contact-btn {
		box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
		  inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
		  0 0.125em 0.125em -0.125em rgba(0, 0, 0, 0.2),
		  0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2),
		  0 0.225em 0.05em 0 rgba(0, 0, 0, 0.05),
		  0 0.25em 0 0 rgba(255, 255, 255, 0.75),
		  inset 0 0.25em 0.05em 0 rgba(0, 0, 0, 0.15);
	  }
	  
	  .btn-primary.contact-btn:has(.btn-primary.contact-btn:active) .button-shadow {
		filter: blur(clamp(2px, 0.125em, 12px));
		-webkit-filter: blur(clamp(2px, 0.125em, 12px));
		-moz-filter: blur(clamp(2px, 0.125em, 12px));
		-ms-filter: blur(clamp(2px, 0.125em, 12px));
	  }
	  
	  .btn-primary.contact-btn:has(.btn-primary.contact-btn:active) .button-shadow::after {
		top: calc(var(--shadow-cuttoff-fix) - 0.5em);
		opacity: 0.75;
	  }
	  
	  .btn-primary.contact-btn:has(.btn-primary.contact-btn:active) span {
		text-shadow: 0.025em 0.25em 0.05em rgba(0, 0, 0, 0.12);
	  }
	  



	  .sections {
		width: 100%;
		position: relative;
		z-index: 5;
	  }
	  .container-page {
		width: 50%;
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		display: flex;
			justify-content: flex-start;
			    align-items: flex-start;
    padding-left: 10%;
			flex-direction: column;
			gap: 44px;
	  }
	  .container-page .contento {
		position: sticky;
		/* top: 25%; */
		color: white;
	
	  }
	  .contento.mail-content.one-mail {
		top: 20%;
		bottom: 40%;
	}
	.contento.mail-content.two-mail {
		top: 30%;
		bottom: 30%;
	}
	.contento.mail-content.three-mail {
		top: 40%;
		bottom: 20%;
	}
	  .one {
		color: white;
	  }
	  .two {
		color: gray;
	  }
	  .container-page h2 {
		font-size: 30px;
	  }
	  .panel {
		height: auto;
		width: 60%;
		margin-left: auto;
		display: flex;
			align-items: center;
			justify-content: center;
			padding: 20px;
	  }
	  .panel .get-locate-box {
		border: 1px solid #1c1b1b;
		display: flex;
		flex-direction: column;
		gap: 23px;
		padding: 35px;
		/* padding-left: 0; */
		width: 100%;
		border-radius: 20px;
		margin-bottom: 40px;
		/* height: 120px; */
	}
	  .panel .get-locate-box .locate {
		display: flex;
		align-items: center;
		justify-content: flex-start;
    gap: 30px
	}
	  
	  .description {
		height: 100vh;
	  }
	  .green {
		height: 100vh;
	  }
	  
	  .line {
		height: 1px;
		width: 100%;
		background: fuchsia;
		position: fixed;
		top: 15vh;
		left: 0;
		right: 0;
		z-index: 1500;
	  }


	  .night {
		position: absolute;
		width: 100%;
		height: 100%;
		background: black;
		z-index: -2;
		top: 0px;
		border-radius: 16px;  
	  }
	  .star.small {
		--star-width: 3vh;
		--star-height: 3vh;
	  }
	  
	  .star.medium {
		--star-width: 5vh;
		--star-height: 5vh;
	  }
	  
	  .star {
		--star-width: 7vh;
		--star-height: 7vh;
		--blur-radius: calc(var(--star-width) / 2);
		width: var(--star-width);
		height: var(--star-height);
		position: absolute;
		top: 50%;
		left: 50%;
		opacity: 0;
		animation: starlight 3.2s linear infinite;
	  }
	  
	  .star::before,
	  .star::after {
		position: absolute;
		content: '';
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: white;
		z-index: 2;
	  }
	  
	  .star::before {
		width: 100%;
		height: 10%;
		border-radius: 50%;
	  }
	  .star::after {
		height: 100%;
		width: 10%;
		border-radius: 50%;
	  }
	  
	  @keyframes starlight {
		0% {
		  opacity: 0.2;
		  transform: scale(0.2) rotateZ(45deg);
		  filter: blur(var(--blur-radius));
		}
		
		50% {
		  opacity: 1;
		  transform: scale(1.4) rotateZ(90deg);
		  filter: blur(0);
		}
		
		100% {
		  opacity: 0.2;
		  transform: scale(0.2) rotateZ(135deg);
		  filter: blur(var(--blur-radius));
		}
	  }
	  

	  .colour1{
		position: absolute;
		/*background-image: radial-gradient(closest-side, rgb(179 179 177 / 31%), #00000000);*/
		height: 1000px;
		width: 850px;
		left: -121px;
		top: 11%;
		z-index: -232;
	  }
	  .colour2{
		position: absolute;
		background-image: radial-gradient(closest-side, rgb(110 110 110 / 31%), #00000000);
		height: 1000px;
		width: 850px;
		/*top: 30%;*/
		z-index: -232;
	  }
	  .colour3{
	    position: absolute;
		background-image: radial-gradient(closest-side, rgb(73 52 99 / 31%), #00000000);
    height: 1000px;
    width: 850px;
    top: 40%;
    right: 0;
    z-index: -229;
	  }
	  .colour4{
		position: absolute;
		background-image: radial-gradient(closest-side, rgb(124 94 103 / 31%), #00000000);
		height: 700px;
		width: 850px;
		top: 61%;
    right: 1px;    
		z-index: -232;
	  }
	  .colour5{
		position: absolute;
		background-image: radial-gradient(closest-side, rgb(82 82 80 / 31%), #00000000);
		height: 1000px;
		width: 850px;
		top: 10%;
		z-index: -232;
	  }
	  .colour6{
		position: absolute;
		background-image: radial-gradient(closest-side, rgb(127 127 127 / 31%), #00000000);
    height: 700px;
    width: 850px;
    bottom: 45%;
		z-index: -232;
	  }
	  .colour7{
		position: absolute;
		/*background-image: radial-gradient(closest-side, rgb(179 179 177 / 31%), #00000000);*/
		height: 1000px;
		width: 60%;
		left: -60px;
		bottom: 10%;
		z-index: -232;
	  }
	  .colour8{
		position: absolute;
		background-image: radial-gradient(closest-side, rgb(47 140 120 / 31%), #00000000);
		    width: 100%;
			height: 1000px;
    right: 0px;
    bottom: 7.5%;
		z-index: -232;
	  }

	  @media (max-width:991px) {
		.clrt{
			display: none;
		  }
	  }
	  @media (max-width:650px) {
		.service-grid .grid-item {
			align-items: flex-end;
		}
		.service-grid:hover .grid-item {
			align-items: flex-start;
		}
		.creative-grid-content.one h1 {
			width: 66%;
			line-height: 1.3;
			font-size: 50px;
		}
	}

	
	.grediant-glow-crd{
		position: absolute;
		background-image: radial-gradient(closest-side, rgb(118 118 116 / 31%), #04040400);
		    height: 561px;
    width: 850px !important;
    right: -816px;
    top: -5%;
    z-index: -232;
}

	  .about-greydiant-colour.colour-a1 {
		position: absolute;
		background-image: radial-gradient(closest-side, rgb(77 120 129 / 31%), #04040400);
		height: 1000px;
		width: 850px;
		  right: -135px;
    top: 17%;
		z-index: -232;
	}

	.about-greydiant-colour.colour-a3.clrt {
	position: absolute;
    background-image: radial-gradient(closest-side, rgb(97 132 121 / 31%), #00000000);
    height: 1000px;
    width: 72%;
    left: -108px;
    bottom: 21%;
    z-index: -232;
	}
	.about-greydiant-colour.colour-a4.clrt {
		    position: absolute;
    background-image: radial-gradient(closest-side, rgb(47 140 120 / 31%), #00000000);
    width: 100%;
    height: 1000px;
    right: 0px;
    bottom: 7.5%;
    z-index: -232; 
	}

	.about-greydiant-colour.colour-a2.clrt {
		position: absolute;
		background-image: radial-gradient(closest-side, rgb(179 179 177 / 31%), #00000000);
		height: 700px;
		width: 850px;
		top: 35%;
		right: 314px;  
		z-index: -232;
	}
	.about-greydiant-colour.blog-grediant.colour-a2.clrt {
		position: absolute;
		background-image: radial-gradient(closest-side, rgb(179 179 177 / 31%), #00000000);
		    height: 600px;
    width: 848px;
    top: 3%;
    right: -148px;
    z-index: -232;
}

.sub-menu-grediant {
        position: absolute;
    width: 50px;
  
    height: 50px;
    /* background-image: radial-gradient(closest-side, rgb(121 121 116 / 35%), #1d1d1d00); */
    /* z-index: -232; */
    top: 0px;
    left: 0px;
}
.sub-page-logo img{
     /* height: 50px;
	 width: 50px; */
}
	  .service-greydiant-colour.colour-a1 {
		position: absolute;
		background-image: radial-gradient(closest-side, rgb(179 179 177 / 31%), #00000000);
		height: 1000px;
		width: 850px;
		left: -121px;
		top: 10%;
		z-index: -232;
	}

	.service-greydiant-colour.colour-a3.clrt {
		position: absolute;
		background-image: radial-gradient(closest-side, rgb(179 179 177 / 31%), #00000000);
		height: 1000px;
		width: 60%;
		left: -108px;
		bottom: 24%;
		z-index: -232;
	}
	.service-greydiant-colour.colour-a4.clrt {
		position: absolute;
		background-image: radial-gradient(closest-side, rgb(179 179 177 / 31%), #00000000);
		height: 1000px;
		width: 60%;
		right: 0px;
		bottom: 8%;
		z-index: -232;
	}

	.service-greydiant-colour.colour-a2.clrt {
		position: absolute;
		background-image: radial-gradient(closest-side, rgb(179 179 177 / 31%), #00000000);
		height: 700px;
		width: 850px;
		top: 38%;
		right: -191px;    
		z-index: -232;
	}
	  .works-greydiant-colour.colour-a1 {
		position: absolute;
		background-image: radial-gradient(closest-side, rgb(179 179 177 / 31%), #00000000);
		height: 1000px;
		width: 850px;
		left: -133px;
		top: 6%;
		z-index: -232;
	}

	.works-greydiant-colour.colour-a4.clrt {
		position: absolute;
		background-image: radial-gradient(closest-side, rgb(179 179 177 / 31%), #00000000);
		height: 1000px;
		width: 60%;
		right: 0px;
		bottom: 10%;
		z-index: -232;
	}
	.works-greydiant-colour.colour-a3.clrt {
		position: absolute;
		background-image: radial-gradient(closest-side, rgb(179 179 177 / 31%), #00000000);
		height: 1000px;
		width: 60%;
		left: -108px;
		bottom: 20%;
		z-index: -232;
	}

	.works-greydiant-colour.colour-a2.clrt {
		position: absolute;
		background-image: radial-gradient(closest-side, rgb(179 179 177 / 31%), #00000000);
		height: 700px;
		width: 850px;
		top: 38%;
		right: -191px;    
		z-index: -232;
	}


@keyframes appear {
	from{
		opacity: 0;
		clip-path: inset(100% 100% 0 0);
	}
	to{
		opacity: 1;
		clip-path: inset(0 0 0 0);
	}
}

.block-fade {
	animation: appear linear;
	animation-timeline: view();
	animation-range: entry 0% cover 40%;
}


.clrt.colour7.menu-des {
	left: -191px;
    height: 700px;
    bottom: 59%;
}
.colour6.menu-des.clrt {
    bottom: -164px;
    z-index: 9999;
	right: -86px;
}

.recent-blog-details h2{
      font-size: 14px;
    font-weight: 300;
    /* letter-spacing: 1.4px; */
    line-height: 1.5;
 
}
.recent-blog-details p{
  font-size: 15px ;
  font-weight: 200;
  /* letter-spacing: 1.4px; */
  line-height: 1.3;
  margin-top: 6px;
 
}

@media (max-width:991px) {
	.container-page {
		position: relative;
		margin-bottom: 22px;
		align-items: start;
        padding: 50px;
		width: 100%;
	}	
	.panel {
		width: 100%;
	}
}

.about-greydiant-colour.colour-a4.clrt.services {
    position: absolute;
    background-image: radial-gradient(closest-side, rgb(47 140 120 / 31%), #00000000);
    width: 100%;
    height: 1000px;
    right: 0px;
    bottom: 13.5%;
    z-index: -232;
}