/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 26 2026 | 12:10:59 */
	/* Add your CSS code here.


For example:
.example {
color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */




	/* Add your CSS code here */
	html {
		scroll-behavior: smooth;
		width: 100%;
    overflow-x: hidden;
	}

	html ::-webkit-scrollbar {
		width: 8px;
	}

	html ::-webkit-scrollbar-track {
		box-shadow: inset 0 0 5px grey;
	}

	html ::-webkit-scrollbar-thumb {
		background: linear-gradient(135.89deg, #D03355 -5.11%, #FB7A6B 97.89%);
	}

	html ::-webkit-scrollbar-thumb:hover {
		background: #4D8E53;
	}

	.prd-btn-1 a,
	.prd-btn-1 button {
		background: linear-gradient(135.89deg, #D03355 -5.11%, #FB7A6B 97.89%);
		color: #fff;
		font-weight: 500;
		font-size: 16px;
		line-height: 50px;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		height: 50px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0 30px;
		position: relative;
		z-index: 2;
		border-radius: 50px;
		outline: none;
		border: none;
		overflow: hidden;
		cursor: pointer;
		text-decoration: none;
		white-space: nowrap;
	}

	.prd-btn-1 a:after,
	.prd-btn-1 button:after {
		position: absolute;
		content: "";
		inset: 0;
		background: linear-gradient(135.89deg, #FB7A6B -5.11%, #D03355 97.89%);
		z-index: -1;
		border-radius: 50px;
		opacity: 0;
		transition: all 0.3s ease-in;
	}

	.prd-btn-1 a:hover:after,
	.prd-btn-1 button:hover:after {
		opacity: 1;
	}

	.prd-btn-1 a i,
	.prd-btn-1 button i {
		margin-left: 10px;
	}

	/* BTN 2 */

	.prd-btn-2 a,
	.prd-btn-2 button {
		background: linear-gradient(135.89deg, #D03355 -5.11%, #FB7A6B 97.89%);
		color: #fff;
		font-weight: 500;
		font-size: 16px;
		line-height: 50px;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		height: 50px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0 30px;
		position: relative;
		z-index: 2;
		border-radius: 50px;
		border: none;
		outline: none;
		overflow: hidden;
		cursor: pointer;
		text-decoration: none;
	}

	.prd-btn-2 a:after,
	.prd-btn-2 button:after {
		position: absolute;
		content: "";
		left: 1px;
		top: 1px;
		bottom: 1px;
		right: 1px;
		background: #161D35;
		z-index: -2;
		border-radius: 50px;
		transition: all 0.3s ease-in;
		opacity: 1;
	}

	.prd-btn-2 a:before,
	.prd-btn-2 button:before {
		position: absolute;
		content: "";
		inset: 0;
		background: linear-gradient(144.14deg, #4D233F -11.44%, #305B9F 123.42%);
		z-index: -1;
		border-radius: 50px;
		transition: all 0.3s ease-in;
		opacity: 0;
	}

	.prd-btn-2 a:hover:before,
	.prd-btn-2 button:hover:before {
		opacity: 1;
	}

	.prd-btn-2 a:hover:after,
	.prd-btn-2 button:hover:after {
		opacity: 0;
	}

	.prd-btn-2 a i,
	.prd-btn-2 button i {
		margin-left: 10px;
	}

	h1.entry-title {
		display: none;
	}

	.footer_links ul li:hover span {
		cursor: pointer;
		color: #db384f;
	}

	.footer_links ul li:hover span,
	.single-link li:hover span {
		cursor: pointer;
		color: #db384f !important;
	}

	.single-link span {
		position: relative;
		padding: 0 10px !important;
		cursor: pointer;
	}

	/* heading css */
	.title h2 {
		-webkit-text-fill-color: unset;
		-webkit-background-clip: text;
		background-image: linear-gradient(144.14deg, #4D233F -11.44%, #305B9F 123.42%);
		font-weight: 800 !important;
		font-size: 46px !important;
		line-height: 60px !important;
		letter-spacing: 0.03em;
		position: relative;
		padding-bottom: 10px !important;
		margin-bottom: 0;
		font-size: 46px;
		line-height: 60px;
		padding-bottom: 43px;
	}

	.title.white h2 {
		color: #fff !important;
		-webkit-text-fill-color: snow;
		font-weight: 700 !important;
	}

	.title.heading_image h2:after {
		content: "";
		height: 30px;
		width: 153px;
		background: url("https://peredion.netlify.app/assets/img/icon/section-title.png") left center no-repeat;
		background-size: contain;
		position: absolute;
		bottom: -40px;
		left: 0px;
		transform: 0px;
	}

	.title.heading_image.image-center h2:after {
		left: 50%;
		transform: translateX(-50%);
	}

	.sub-title h3 {
		display: table;
		-webkit-text-fill-color: transparent;
		-webkit-background-clip: text;
		background-image: linear-gradient(135.89deg, #D03355 -5.11%, #FB7A6B 97.89%);
		font-weight: 600 !important;
		font-size: 20px;
		line-height: 30px;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		margin-bottom: 10px;
		margin-top: -8px;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
	}

	.white-nowrap {
		white-space: nowrap;
	}

	.about-box {
		max-width: 150px;
	}



	.w-100 {
		min-width: 64px !important;
	}

	.prd-btn-4:hover {
		background: linear-gradient(144.14deg, var(--prd-purple) -11.44%, var(--prd-blue) 123.42%);
		color: #fff !important;
		border-color: transparent;
	}

	.working-process .part-icon {
		height: 100px;
		width: 100px;
		background: url("https://peredion.netlify.app/assets/img/working-process/icon-shape.png") center center no-repeat;
		background-size: contain;
		text-align: center;
		margin-top: 20px;
		display: inline-block;
	}

	.working-process .part-icon img {
		height: 75px;
		width: auto;
		max-width: none;
		margin-top: -20px;
	}

	.working-process .step-number div {
		display: inline-block;
		width: 70px;
		height: 70px;
		background: linear-gradient(135.89deg, #D03355 -5.11%, #fb7a6b 97.89%);
		line-height: 70px;
		font-weight: 700;
		font-size: 35px;
		text-align: center;
		position: relative;
		z-index: 2;
		/* margin: 30px 0 30px; */
	}

	.working-process .step-number div:before {
		position: absolute;
		content: "";
		background: url("https://peredion.netlify.app/assets/img/working-process/step-arrow.png") center center no-repeat;
		background-size: contain;
		width: 136px;
		height: 15px;
		left: calc(100% + 51px);
		top: 50%;
		transform: translateY(-50%);
	}

	.working-process .step-number.forth div:before {
		display: none;
	}

	.working-process .step-number div:after {
		position: absolute;
		content: "";
		left: 2px;
		top: 2px;
		right: 2px;
		bottom: 2px;
		background: #fff;
		z-index: -1;
	}

	.working-process .gradient-number p {
		-webkit-text-fill-color: transparent;
		-webkit-background-clip: text;
		background-image: linear-gradient(144.14deg, #4D233F -11.44%, #305B9F 123.42%);
		display: inline;
	}

	.feature::before {
		position: absolute;
		content: "";
		left: 0px;
		top: 0px;
		width: 100%;
		height: 100%;
		z-index: 0;
		opacity: 0.91;
		background: rgb(22, 29, 53);
	}
:root {
  --home-bg: #0a0820;
  --home-bg-soft: #14112c;
}

body {
  font-family: "Asap", sans-serif;
  font-size: 16px;
  margin: 0;
  overflow-x: hidden;
  color: #fff;
   background: linear-gradient(
    180deg,
    var(--home-bg) 0%,
    var(--home-bg-soft) 100%
  ) !important;
  color: #fff;
  background-attachment: fixed;
}.prd-btn-1.small-button a, .prd-btn-1.small-button button {

    height: 44px;
    width: 100%;
   
}

:root {
  --home-bg: #0a0820;
  --home-bg-soft: #14112c;
}

.home-redesign {
  background: linear-gradient(
    180deg,
    var(--home-bg) 0%,
    var(--home-bg-soft) 100%
  );
  color: #fff;
  background-attachment: fixed;
}

	/* responisve css */
	.e-con>.e-con-inner {
		width: 100%;
		padding-right: 15px;
		padding-left: 15px;
		margin-right: auto;
		margin-left: auto;
	}

	/* ─── SM : 576px → 540px ─────────────────────── */
	@media (min-width: 576px) {
		.e-con>.e-con-inner {
			max-width: 540px;
		}
	}

	/* ─── MD : 768px → 720px ─────────────────────── */
	@media (min-width: 768px) {
		.e-con>.e-con-inner {
			max-width: 720px;
		}
	}

	/* ─── LG : 992px → 960px ─────────────────────── */
	@media (min-width: 992px) {
		.e-con>.e-con-inner {
			max-width: 960px;
		}
	}

	@media (min-width: 1200px) {
		.e-con>.e-con-inner {
			max-width: 1140px;
		}
	}

	@media (min-width: 1400px) {
		.e-con>.e-con-inner {
			max-width: 1272px;
		}

/* 		.working-process .step-number div:before {
			left: calc(100% + 38.5px);
			transform: rotateZ(9deg) translateY(-20%);
			width: 110px;
		} */
	}

	/* max width media */
	@media (max-width: 1400px) {

		.working-process .step-number div:before {
			left: calc(100% + 38.5px);
			transform: rotateZ(9deg) translateY(-20%);
			width: 110px;
		}

		.working-process .step-number.step-2 div:before {
			transform: rotateZ(-9deg) translateY(-130%);
		}
	}

	@media (max-width: 1024px) {
		.banner-bottom-player-img {
			display: none;
		}
.about-part-img img.main-img {
    position: static !important;
    transform: unset !important;
    width: 100% !important;
}

		.about-part-img img.img-shape {
			display: none;
		}

		.working-process .step-number div:before {
			display: none;
		}
		.global-shapes img, .global-shapes {
    height: 120px;
}

	}
@media (max-width: 576px) {
	.title h2 {
    font-size: 40px !important;
    line-height: 50px !important;
}
}

@media (max-width: 430px) {
body {
    padding: 0px !important;
}
}