/*--------------------------------------------- INCLUDING-CSS FOR FONTS SECTION START ---------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300&display=swap');
/*--------------------------------------------- INCLUDING-CSS FOR FONTS SECTION COMPLETE ---------------------------------------*/


/*--------------------------------------------- CSS FOR PRE-DEFINED SECTION START ---------------------------------------*/

*,
::after,
::before {
	box-sizing: border-box;
}

html {
	max-width: 100%;
	overflow-x: hidden;
}

body {
	margin: 0;
	height: auto;
	width: 100%;
	font-size: 15px;
	line-height: 19px;
	font-weight: 400;
	background: #231d15d9 !important;
	overflow: hidden;
	position: relative;
	font-family: 'Space Grotesk', sans-serif !important;
	scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
	margin: 0;
}

a {
	text-decoration: none !important;
	cursor: pointer;
	display: block;
}

a:hover {
	text-decoration: none !important;
}

ul, 
ol {
	padding: 0 !important;
	margin: 0 !important;
}

ul, 
ol li {
	list-style: none;
}


input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
    margin: 0;
}

input,
textarea::placeholder {
	color: #fff;
}

button:focus {
	outline: none !important;
}

/*--------------------------------------------- PRE-DEFINED CSS FOR FORM-GROUP START ---------------------------------------*/

.main-form-group {
  position: relative;
}

.main-form-group input {
	height: auto;
	width: 100%;
	padding: 10px 0;
	background: none;
	border: 1px solid transparent;
	border-bottom-color: #ffffff80;
	outline: none;
	font-size: 17px;
	line-height: 30px;
	color: #fff;
	font-weight: 500;
	letter-spacing: 0;
	margin-bottom: 0;
	transition: border-color 0.4s ease-in-out;
}

.main-form-group input:focus {
  outline: none;
}

.main-form-group input:focus + label,
.main-form-group input:not(:placeholder-shown) + label {
  top: -20px;
  font-size: 16px;
  left: 10px;
}

.main-form-group select {
	height: auto;
	width: 100%;
	padding: 10px 0;
	background: none;
	border: 1px solid transparent;
	border-bottom-color: #ffffff80;
	outline: none;
	font-size: 17px;
	line-height: 30px;
	color: #fff;
	font-weight: 500;
	letter-spacing: 0;
	margin-bottom: 0;
	transition: border-color 0.3s ease;
}

.main-form-group select:focus {
  outline: none;
}

.main-form-group textarea {
	height: 150px;
	width: 100%;
	padding: 10px 0;
	background: none;
	border: 1px solid transparent;
	border-bottom-color: #ffffff80;
	outline: none;
	font-size: 17px;
	line-height: 30px;
	color: #fff;
	font-weight: 500;
	letter-spacing: 0;
	margin-bottom: 0;
	transition: border-color 0.3s ease;
}

.main-form-group textarea:focus {
  outline: none;
}

.main-form-group label {
	position: absolute;
	left: 12px;
	top: 12px;
	font-size: 17px;
	line-height: 30px;
	color: #eee;
	font-weight: 500;
	letter-spacing: 1px;
	margin-bottom: 0;
	transition: top 0.4s ease-in-out, font-size 0.4s ease-in-out, color 0.4s ease-in-out;
}

/*--------------------------------------------- PRE-DEFINED CSS FOR FORM-GROUP COMPLETE ---------------------------------------*/

.main-body-scrollable {
	height: auto;
	width: 100%;
}

.id-selector-btn {
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 40px;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-align: center;
	color: #fff;
	cursor: pointer;
	border: 1px solid transparent;
	outline: none;
	padding: 8px 40px;
	background: transparent;
	border-top-color: #9ac1d094;
	border-left-color: #9ac1d094;
	border-bottom-color: #9ac1d094;
	box-shadow: -10px 10px 20px 0 #1affff3b;
	border-radius: 40px 0 0 40px;
	opacity: 1;
	transition: all 0.2s ease-in-out;
}

.id-selector-btn i {
	font-size: 15px;
	padding-right: 10px;
}

.id-selector-btn:hover {
	opacity: 0.9;
}

section#ABOUT,
section#SERVICES,
section#PORTFOLIO,
section#TESTIMONIAL,
section#CONTACT {
	height: auto;
	width: 100%;
  position: relative;
}

section#SERVICES::after,
section#PORTFOLIO::after,
section#TESTIMONIAL::after,
section#CONTACT::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 1px;
	width: 100%;
	background: linear-gradient(to left, transparent, #b5a9ab, transparent);
}

section .content-heading {
	font-size: 50px;
	line-height: 60px;
	color: #fff;
	font-weight: 500;
	letter-spacing: 1px;
	margin-bottom: 20px;
}

section .content-heading span {
	color: #dab750;
	text-transform: uppercase;
}

section h3.small {
	font-size: 25px;
  line-height: 35px;
  font-weight: 500;
  letter-spacing: 1px;
  margin: 10px 20px 20px;
  color: #fff;
}

section h3.small.trending-heading {
  color: #28e98c;
}

section h3.small.shorts-heading {
  color: #14c5fd;
}

section h3.small.playlist-heading {
  color: #fe6f1d;
}

section h3.small.note {
  color: #28e98c;
  font-size: 25px;
}

section h3.small i {
	font-size: 30px;
	padding-right: 5px;
}

/*--------------------------------------------- PRE-DEFINED CSS FOR FORM-GROUP COMPLETE ---------------------------------------*/


/*--------------------------------------------- CSS FOR PRE-DEFINED SECTION COMPLETE ---------------------------------------*/


/*--------------------------------------------- CSS FOR SCROLL-TO-TOP BUTTON SECTION START ---------------------------------------*/

.scrollToTopBtn {
	border: none;
	cursor: pointer;
	height: 70px;
	width: 70px;
	position: fixed;
	background: #dab750;
	border-radius: 40px 40px 0 0;
	bottom: 0;
	right: 30px;
	z-index: 100;
	opacity: 0;
	transform: translateY(100px);
	box-shadow: -10px 10px 20px 0 #1affff3b;
	transition: all 0.6s ease;
}

.scrollToTopBtn i {
	font-size: 25px;
	color: #fff;
}

.showBtn {
	opacity: 1;
	transform: translateY(0)
}

/*--------------------------------------------- CSS FOR SCROLL-TO-TOP BUTTON SECTION COMPLETE ---------------------------------------*/

.header-main {
	height: auto;
	width: 100%;
	background: linear-gradient(to bottom, #33281bfc, transparent);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1003;
}

.header {
	height: auto;
	width: 100%;
}

.bottom-header {
	height: auto;
	width: 100%;
	padding: 20px 0;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

.bottom-header.sticky {
	height: auto;
	width: 100%;
	padding: 20px 80px;
	background: linear-gradient(to bottom, #33281b0f, #33281b59);
	backdrop-filter: blur(10px);
}

.bottom-header-links-part {
	height: auto;
	width: 100%;
}

.bottom-header-links-part ul {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	margin-bottom: 0;
}

.bottom-header-links-part ul li {
	list-style: none;
	font-size: 14px;
	font-weight: 500;
	text-transform: capitalize;
	letter-spacing: 1px;
	text-align: center;
	cursor: pointer;
	border: 1px solid transparent;
	padding: 5px 25px;
	margin: 0 40px;
	position: relative;
	z-index: 1;
	border-top-color: #dab750;
	overflow: hidden;
}

.bottom-header-links-part ul li::before {
	content: '';
	position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
	background: linear-gradient(80deg, #dab750, #c6972a);
	transform: scaleY(0);
	transform-origin: bottom;
	z-index: -1;
	transition: transform 0.4s ease-in-out;
}

.bottom-header-links-part ul li:hover::before {
	transform: scaleY(1);
	transform-origin: top;
}

.bottom-header-links-part ul li a {
	display: block;
	color: #fff;
}

.bottom-header-links-part ul li a:hover {
	color: #fff;	
}

.mobile-navigation-part {
	display: none;
}

.mobile-menu {
	display: none;
}

.main {
	height: auto;
	width: 100%;
	position: relative;
	z-index: 1;
}

.body-content {
	background: #231d15d9;
  border: 0 solid #dab750;
  border-top-width: 2px;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
  padding: 0 20px;
	position: relative;
	z-index: 10;
}

.main-profile-scrollable {
	height: auto;
	width: 100%;
	position: sticky;
	top: 5%;
	left: 0;
	padding: 20px 0 50px;
}

.main-profile-mobile-image {
	height: auto;
	width: 100%;
	padding: 0;
	position: relative;
}

.main-profile-mobile-image img {
	height: auto;
	width: 100%;
}

.main-profile-mobile-ui-design-main {
	position: absolute;
	top: 60px;
	left: 20px;
	height: 90%;
	width: 95%;
	border-radius: 40px;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 25px 50px;
}

.my-info-part {
	height: auto;
	width: 100%;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

.my-info-logo {
	height: auto;
	width: 120px;
}

.my-info-logo img {
	height: auto;
	width: 100%;
}

.my-info-text {
	height: auto;
	width: 60%;
	padding: 0;
	text-align: right;
}

.my-info-text p {
	font-size: 15px;
	line-height: 20px;
	color: #dfdfdf;
	font-weight: 500;
	letter-spacing: 1px;
	margin-bottom: 0;
}

.rolling-poster {
	height: auto;
	width: 100%;
	margin: 0 0 30px;
	padding: 0;
	text-align: right;
	position: relative;
}

.rolling-poster img {
	height: auto;
	width: 20%;
	animation: myRollingBall 8s linear infinite;
}

@keyframes myRollingBall {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.rolling-poster-moblie-ui {
	height: auto;
	width: 100%;
	margin: 0 0 25px;
	padding: 0;
	text-align: right;
	position: relative;
}

.rolling-poster-moblie-ui img {
	height: auto;
	width: 35%;
	animation: myRollingBall 8s linear infinite;
}

.my-profile-image {
	height: auto;
	width: 90%;
	margin: 0 auto;
	border-radius: 40px;
	overflow: hidden;
	cursor: pointer;
}

.my-profile-image img {
	height: auto;
	width: 100%;
	border-radius: 40px;
	filter: grayscale(100%);
	transition: all 0.3s ease-in-out;
}

.main-profile-scrollable:hover .my-profile-image img {
	filter: grayscale(0);
}

.my-profile-image-desc {
	height: auto;
	width: 100%;
	padding: 20px 0;
}

.my-profile-image-desc h2 {
	font-size: 50px;
	line-height: 50px;
	color: #dab750;
	font-weight: 500;
	letter-spacing: 1px;
	margin-bottom: 20px;
}

.my-profile-image-desc p {
	font-size: 18px;
	line-height: 30px;
	color: #fff;
	font-weight: 500;
	letter-spacing: 1px;
	margin-bottom: 35px;
}

.my-profile-image-desc ul {
	padding: 0;
}

.my-profile-image-desc ul li {
	list-style: none;
	font-size: 20px;
	line-height: 30px;
	font-weight: 500;
	letter-spacing: 1px;
	margin-bottom: 5px;
}

.my-profile-image-desc ul li a {
	color: #dab750;
	text-decoration: underline !important;
}

.my-profile-image-desc ul li a:hover {
	color: #dab750;
}

.my-profile-image-desc h6 {
	font-size: 18px;
	line-height: 30px;
	color: #fff;
	font-weight: 500;
	letter-spacing: 1px;
	margin: 16px 0;
}

.my-profile-social-icons {
	height: auto;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 40px;
}

.my-profile-social-icons a {
	height: 45px;
	width: 45px;
	border-radius: 50px;
	text-align: center;
	padding: 10px 0;
	margin-right: 15px;
	border: 2px solid transparent;
	transition: all 0.3s ease-in-out;
}

.my-profile-social-icons a i {
	font-size: 20px;
	color: #fff;
	font-weight: 100;
}

.my-profile-social-icons a:nth-child(1) {
	border-color: #18acff;
}

.my-profile-social-icons a:nth-child(2) {
	border-color: #45ec62;
}

.my-profile-social-icons a:nth-child(3) {
	border-color: #e900e4;
}

.my-profile-social-icons a:nth-child(4) {
	border-color: #36ade9;
}

.my-profile-social-icons a:nth-child(5) {
	border-color: #ff0000;
}

.my-profile-social-icons a:hover {
	border-color: #565656;
}

.my-profile-image-desc button {
	height: auto;
	width: 100%;
	font-size: 18px;
	font-weight: 500;
	margin-bottom: 0;
	text-transform: capitalize;
	letter-spacing: 1px;
	text-align: center;
	color: #fff;
	cursor: pointer;
	border: 1px solid transparent;
	outline: none;
	padding: 15px 0;
	background: transparent;
	border-top-color: #9ac1d0;
	border-left-color: #9ac1d0;
	border-bottom-color: #9ac1d0;
	box-shadow: -10px 10px 20px 0 #1affff3b;
	z-index: 1;
	position: relative;
}

.my-profile-image-desc button:hover {
	box-shadow: -10px 10px 30px 0 #1affff3b;
}

.my-profile-image-desc button::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: linear-gradient(80deg, #dab750, #c6972a);
	z-index: -1;
	transition: all 0.2s ease-in-out;
}

.my-profile-image-desc button:hover::before {
	width: 0;
}

.hero {
	height: auto;
	width: 100%;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	z-index: 1;
}

.hero-overlay {
	height: 100%;
	width: 100%;
	padding: 110px 0 80px;
	background: #231d15d9;
	box-shadow: inset 0 -80px 150px 0 #dab75080;
}

.banner {
	height: 100%;
	width: 100%;
}

.banner video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.banner-content {
	height: auto;
	width: 80%;
	text-align: center;
}

.banner-content h1 {
	font-size: 80px;
	line-height: 90px;
	color: #fff;
	font-weight: 500;
	letter-spacing: 1px;
}

.banner-content h1 span {
	color: #dab750;
}

.banner-content p {
	font-size: 16px;
	line-height: 25px;
	color: #dfdfdf;
	font-weight: 500;
	letter-spacing: 1px;
	margin-bottom: 40px;
}

.banner-content button {
	font-size: 18px;
	font-weight: 500;
	margin-bottom: 0;
	text-transform: capitalize;
	letter-spacing: 1px;
	text-align: center;
	color: #fff;
	cursor: pointer;
	border: 1px solid transparent;
	outline: none;
	padding: 15px 60px;
	background: transparent;
	border-top-color: #9ac1d0;
	border-left-color: #9ac1d0;
	border-bottom-color: #9ac1d0;
	z-index: 1;
	position: relative;
}

.banner-content button::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: linear-gradient(80deg, #dab750, #c6972a);
	z-index: -1;
	transition: all 0.2s ease-in-out;
}

.banner-content button:hover::before {
	width: 0;
}

.sucsess-part {
	height: auto;
	width: 100%;
	padding: 40px 0 0;
	display: flex;
	align-items: start;
	justify-content: flex-start;
	flex-wrap: wrap;
}

.success-box {
	height: auto;
	width: 25%;
	border-right: 1px dotted #ffffff90;
}

.success-box:last-child {
	border: none;
}

.success-box p {
	font-size: 15px;
	line-height: 20px;
	color: #dfdfdf;
	font-weight: 500;
	letter-spacing: 1px;
	margin-bottom: 0;
}

/*--------------------------------------------- CSS FOR COUNTER-JS SECTION START ---------------------------------------*/

.success-box #counter {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
}

.success-box #counter h3 {
	font-size: 80px;
	line-height: 80px;
	color: #dab750;
	font-weight: 500;
	letter-spacing: 1px;
	margin-bottom: 10px;
}

.success-box #counter span {
	color: #dab750;
	font-size: 50px;
	padding-left: 7px;
}

/*--------------------------------------------- CSS FOR COUNTER-JS SECTION COMPLETE ---------------------------------------*/

.about {
	padding: 70px 0 40px;
}

.about-content {
	height: auto;
	width: 100%;
}

.about-content p {
	font-size: 18px;
	line-height: 30px;
	color: #dfdfdf;
	font-weight: 500;
	letter-spacing: 1px;
	margin-bottom: 8px;
}

.about-content p span {
	color: #dab750;
	font-weight: 600;
	text-transform: uppercase;
	padding-right: 10px;
}

.about-content p a {
	color: #dab750;
	text-decoration: underline !important;
	display: inline-block;
}

.about-content p a:hover {
	color: #14bdff;
}

/*------------------------------------------- CSS FOR CARD-DECORATE START ------------------------------------------*/

.tilt-card {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.15s ease;
  overflow: hidden;
  will-change: transform;
}

.tilt-card * {
  transform-style: preserve-3d;
}

.card-light {
  position: absolute;
  inset: -90%;
  background: radial-gradient(
    circle at center,
    rgba(255,255,255,0.6),
    rgba(255,255,255,0.2) 30%,
    rgba(255,255,255,0.05) 45%,
    transparent 60%
  );
  opacity: 0;
  mix-blend-mode: soft-light;
  pointer-events: none;
  transition: opacity 0.2s ease;
  transform: translateZ(80px);
}

.tilt-card:hover .card-light {
  opacity: 0.6;
}

/*------------------------------------------- CSS FOR CARD-DECORATE COMPLETE ------------------------------------------*/

.services {
	padding: 40px 0 30px;
}

.services-content {
	height: auto;
	width: 100%;
}

.services-content-box {
	height: auto;
	width: 100%;
	padding: 40px 30px;
	transition: 0.4s ease-in-out;
	cursor: pointer;
	position: relative;
}

.services-content-box .floating-icon {
	position: absolute;
	top: 20px;
	right: 10px;
	height: auto;
	width: 100px;
}

.services-content-box .floating-icon img {
	height: auto;
	width: 100%;
  object-fit: contain;
  aspect-ratio: 3 / 2;
}

.services-content-box h2 {
	font-size: 35px;
	line-height: 40px;
	color: #fff;
	font-weight: 500;
	letter-spacing: 1px;
	margin-bottom: 10px;
	display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -moz-box;
  -moz-box-orient: vertical;
  -moz-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.services-content-box h4 {
	font-size: 25px;
	line-height: 30px;
	font-weight: 500;
	letter-spacing: 1px;
	margin-bottom: 20px;
}

.services-content-box h4 i {
	font-size: 30px;
}

.services-content-box p {
	font-size: 17px;
	line-height: 30px;
	color: #dfdfdf;
	font-weight: 500;
	letter-spacing: 1px;
	margin-bottom: 10px;
	display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -moz-box;
  -moz-box-orient: vertical;
  -moz-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.services-content-box a {
	display: block;
	font-size: 16px;
	line-height: 20px;
	color: #fff;
	font-weight: 500;
	letter-spacing: 1px;
	margin-bottom: 0;
	text-decoration: underline !important;
}

.services-content-box a:hover {
	color: #fff;
}

.services-content-box button {
	font-size: 18px;
	font-weight: 500;
	margin: 30px 0 0;
	text-transform: capitalize;
	letter-spacing: 1px;
	text-align: center;
	color: #fff;
	cursor: pointer;
	border: 1px solid transparent;
	outline: none;
	padding: 14px 60px;
	background: transparent;
	border-top-color: #9ac1d0;
	border-left-color: #9ac1d0;
	border-bottom-color: #9ac1d0;
	box-shadow: -10px 10px 20px 0 #1affff3b;
	z-index: 1;
	position: relative;
}

.services-content-box button::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	transform: scaleX(0);
	transform-origin: right;
	z-index: -1;
	transition: transform 0.4s ease-in-out;
}

.services-content-box:hover button::before {
	transform: scaleX(1);
	transform-origin: left;
}

.services-content-box:hover h4 {
	color: #fff;
}

.services-content-box:hover {
	background: none;
}

.portfolio {
	padding: 40px 0 30px;
}

.portfolio-content {
	height: auto;
	width: 100%;
}

.portfolio-content-box {
  height: auto;
  width: 100%;
  margin-bottom: 30px;
  border: 1px solid #ffffff30;
  border-radius: 20px;
  padding: 20px 20px;
  position: relative;
  z-index: 1;
}

.portfolio-content-box::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(
      135deg,
      #dab75052,
      #dab75036 40%,
      #dab7501c
   );
   backdrop-filter: blur(22px) saturate(160%);
   -webkit-backdrop-filter: blur(22px) saturate(160%);
   border-radius: 20px;
   opacity: 0.6;
   z-index: -1;
}

.portfolio-content-box-image {
	height: auto;
	width: 100%;
	border-radius: 20px;
	overflow: hidden;
	position: relative;
}

.portfolio-content-box-image img {
	height: 100%;
	width: 100%;
	aspect-ratio: 3/2;
	object-fit: cover;
	transform: scale(1.0);
	transition: all 0.2s ease-in-out;
}

.portfolio-content-box-image-overlay {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: linear-gradient(0deg, #dab75026, transparent);
	display: flex;
	align-items: end;
	justify-content: center;
	flex-wrap: nowrap;
	padding-bottom: 10px;
}

.portfolio-content-box-image-overlay button {
	font-size: 18px;
	font-weight: 500;
	margin-bottom: 0;
	text-transform: capitalize;
	letter-spacing: 1px;
	text-align: center;
	color: #fff;
	cursor: pointer;
	border: 1px solid transparent;
	outline: none;
	padding: 15px 60px;
	background: linear-gradient(80deg, #dab750, #c6972a);
	border-top-color: #9ac1d0;
	border-left-color: #9ac1d0;
	border-bottom-color: #9ac1d0;
	box-shadow: -10px 10px 20px 0 #1affff3b;
}

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

.portfolio-content-box h4 {
	font-size: 25px;
	line-height: 30px;
	font-weight: 500;
	letter-spacing: 1px;
	margin: 20px 0 10px;
}

.portfolio-content-box h4 a {
	color: #fff;
}

.portfolio-content-box h4 a:hover {
	color: #fff;
	text-decoration: underline !important;
}

.portfolio-content-box h6 {
	margin-bottom: 10px;
}

.portfolio-content-box h6 i {
	font-size: 17px;
	color: #e4af12;
	padding-right: 5px;
}

.portfolio-content-box p {
	font-size: 18px;
	line-height: 30px;
	color: #dfdfdf;
	font-weight: 500;
	letter-spacing: 1px;
	margin-bottom: 0;
}

.portfolio-content h3 {
	font-size: 20px;
	line-height: 30px;
	color: #fff;
	font-weight: 500;
	letter-spacing: 1px;
	margin: 0 0 30px;
}

.portfolio-content h3 span {
	color: #dab750;
}

.portfolio-content-icons-box {
	height: auto;
	width: 100%;
	padding: 5px 10px;
	margin-bottom: 20px;
}

.portfolio-content-icons-box.for-logo {
	background: none;
	padding: 5px 10px;
}

.portfolio-content-icons-box img {
	height: auto;
	width: 100%;
	aspect-ratio: 3/2;
	object-fit: contain;
	transform: scale(0.95);
	cursor: pointer;
	transition: all 0.4s ease-in-out;
}

.portfolio-content-icons-box img:hover {
	transform: scale(1.0);
}

.testmonial {
	padding: 40px 0;
}

.testmonial-content-box {
	height: auto;
	width: 100%;
	padding: 30px 40px;
	border: 1px solid #595357;
	border-radius: 20px;
	background: linear-gradient(300deg, #dab750bd, transparent);
	position: relative;
}

.testmonial-content-box-user-info {
	height: auto;
	width: 100%;
	display: flex;
	align-items: start;
	justify-content: flex-start;
	flex-wrap: nowrap;
}

.testmonial-content-box-user-info img {
	height: auto;
	width: 80px !important;
	margin-right: 20px;
	border-radius: 50%;
}

.testmonial-content-box-user-info h6 {
	font-size: 18px;
	line-height: 30px;
	color: #fff;
	font-weight: 600;
	letter-spacing: 1px;
	margin-bottom: 0;
}

.testmonial-content-box-user-info p {
	font-size: 14px;
	line-height: 30px;
	color: #dfdfdf;
	font-weight: 500;
	letter-spacing: 1px;
	margin-bottom: 0;
}

.testmonial-content-box-user-info p span {
	color: #dab750;
}

.testmonial-content-box h4 {
	font-size: 22px;
	line-height: 30px;
	color: #fff;
	font-weight: 500;
	letter-spacing: 1px;
	margin: 30px 0 40px;
}

.testmonial-content-box:hover {
	background: none;
}

.testmonial-content-box a {
	font-size: 16px;
	line-height: 20px;
	color: #fff;
	font-weight: 500;
	letter-spacing: 1px;
	margin-bottom: 0;
	text-decoration: underline !important;
}

.testmonial-content-box a:hover {
	color: #fff;
}

.contact {
	padding: 40px 0;
}

.contact-content {
	height: auto;
	width: 100%;
}

.contact-content h4 {
	font-size: 25px;
	line-height: 30px;
	font-weight: 500;
  overflow-wrap: break-word;
	letter-spacing: 1px;
	margin-bottom: 50px;
}

.contact-content h4 a {
	color: #dab750;
	text-decoration: underline !important;
}

.contact-content h4 a:hover {
	color: #dab750;
}

.contact-form {
	height: auto;
	width: 100%;
	padding: 35px 35px;
	border: 1px solid #595357;
	inset: 0;
  background: linear-gradient(
      135deg,
      #dab75052,
      #dab75036 40%,
      #dab7501c
  );
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-radius: 20px;
}

.contact-form-box {
	height: auto;
	width: 100%;
	padding: 0 0 40px;
}

.contact-content button {
	height: auto;
	width: 100%;
	font-size: 18px;
	font-weight: 500;
	margin-bottom: 0;
	text-transform: capitalize;
	letter-spacing: 1px;
	text-align: center;
	color: #fff;
	cursor: pointer;
	border: 1px solid transparent;
	outline: none;
	padding: 15px 60px;
	background: transparent;
	border-top-color: #9ac1d0;
	border-left-color: #9ac1d0;
	border-bottom-color: #9ac1d0;
	box-shadow: -10px 10px 20px 0 #1affff3b;
	z-index: 1;
	position: relative;
}

.contact-content button:hover {
	box-shadow: -10px 10px 30px 0 #1affff3b;
}

.contact-content button::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: linear-gradient(80deg, #dab750, #c6972a);
	z-index: -1;
	transition: all 0.2s ease-in-out;
}

.contact-content button:hover::before {
	width: 0;
}

.footer {
	padding: 22px 0;
	position: relative;
}

.footer::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 1px;
	width: 100%;
	background: linear-gradient(to left, #1f1f1f, #b5a9ab, #1f1f1f);
}

.footer-content {
	height: auto;
	width: 100%;
	text-align: center;
}

.footer-content h6 {
	font-size: 20px;
	line-height: 30px;
	color: #fff;
	font-weight: 500;
	letter-spacing: 1px;
	margin-bottom: 0;
}

.footer-content h6 a {
	color: #dab750;
}

.footer-content h6 a:hover {
	color: #dab750;
	text-decoration: underline !important;
}

.sticky-social-bar {
	position: fixed;
	top: 30%;
	right: 0;
	z-index: 100;
}

.sticky-social-icons {
	height: auto;
	width: 100%;
}

.sticky-social-icons a {
	text-align: center;
	height: 75px;
	width: 75px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #ffffff;
	border-width: 0 1px 1px 0;
	margin-bottom: 4px;
	border-radius: 0 20px 0 20px;
	background: linear-gradient(80deg, #dab750, #c6972a);
}

.sticky-social-icons a i {
	font-size: 25px;
	color: #fff;
	font-weight: 100;
}

.sticky-social-icons a:hover {
	background: linear-gradient(300deg, #14bcff28, #ce4cfd06);
}

/*--------------------------------------------- CSS FOR CUSTOM-CHATBOX SECTION START -------------------------------------------*/

#sy-whatshelp {
	position: fixed;
	bottom: 40%;
	left: 2%;
	z-index: 100;
}

#sy-whatshelp a {
	position: relative;
}

#sy-whatshelp a.sywh-open-services {
	background: linear-gradient(300deg, #14bcff28, #ce4cfd06);
	backdrop-filter: blur(10px);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	font-size: 30px;
	font-weight: 100;
	color: #fff;
	border-radius: 50%;
}

#sy-whatshelp a.sywh-open-services i.fa-times {
	display: none;
}

#sy-whatshelp .sywh-services a {
	display: none;
}

#sy-whatshelp .sywh-services a i {
	background-color: #129bf4;
	border: none;
	cursor: pointer;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 70px;
	height: 70px;
	font-size: 20px;
	color: #fff;
	border-radius: 50%;
	margin-bottom: 4px;
	background: linear-gradient(80deg, #dab750, #c6972a);
}
 	
/*--------------------------------------------- CSS FOR CUSTOM-CHATBOX SECTION COMPLETE -------------------------------------------*/

/*--------------------------------------------- CSS FOR PURCHASE-NOTIFICATION SECTION COMPLETE -------------------------------------------*/

.purchase-pop-up {
	width: 550px;
	padding: 0;
	position: fixed;
	bottom: 3%;
	left: 5%;
	font-family: 'Space Grotesk', sans-serif;
	z-index: 1000;
}

.purchase-notf-body {
	height: auto;
	width: 100%;
	padding: 18px 20px;
	border-radius: 10px;
	background: linear-gradient(-80deg, #00000035, #dab7502b);
	backdrop-filter: blur(10px);
}

.purchase-notf-body h6 {
	font-size: 16px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: 0;
	margin-bottom: 18px;
	color: #463941;
	border-radius: 5px;
	background: #fff;
	padding: 10px 30px;
}

.purchase-notf-body img {
	height: auto;
	width: 90px;
	border: 4px solid #33281b52;
	border-radius: 50%;
	margin: 0 15px 0 0;
}

.purchase-notf-body p {
	font-size: 17px;
	line-height: 24px;
	font-weight: 500;
	letter-spacing: 0;
	margin-bottom: 20px;
	color: #fff;
}

.purchase-notf-body h5 {
	font-size: 18px;
	line-height: 20px;
	font-weight: 500;
	letter-spacing: 0;
	margin-bottom: 0;
	color: #fff;
}

.purchase-peoples-pop-up,
.purchase-location-pop-up,
.purchase-product-pop-up {
	color: #dab750;
	font-weight: 600;
}

/*--------------------------------------------- CSS FOR PURCHASE-NOTIFICATION SECTION COMPLETE -------------------------------------------*/

/*--------------------------------------------- CSS FOR MOUSE-CURSOR SECTION COMPLETE -------------------------------------------*/

.main-cursor {
	height: auto;
	width: 100%;
}

.cursor {
	position: fixed;
	border-radius: 50%;
	top: 50%;
	left: 50%;
	width: 80px;
	height: 80px;
	cursor: auto;
	transform: translate(-50%, -50%);
	transition: all 0.1s ease-in-out;
	z-index: -1;
}

.runner {
	background: linear-gradient(80deg, #dab750, #c6972a);
	box-shadow: 0px 0px 200px 100px #1affff3b;
}

.chaser {
	width: 20px;
	height: 20px;
	background: #fff;
	box-shadow: 0 0 45px 5px rgba(#fff, 1);
	transition: all 0.5s ease-in-out;
}

/*--------------------------------------------- CSS FOR MOUSE-CURSOR SECTION COMPLETE -------------------------------------------*/

/*--------------------------------------------- CSS FOR PAGE-AUDIO SECTION START -------------------------------------------*/

.main-audio {
	height: auto;
	width: 100%;
}

button#play-audio {
	position: fixed;
	bottom: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: linear-gradient(300deg, #14bcff28, #ce4cfd06);
	backdrop-filter: blur(10px);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	font-size: 28px;
	font-weight: 100;
	color: #fff;
	border-radius: 50%;
	user-select: none;
	z-index: 1004;
}

/*--------------------------------------------- CSS FOR PAGE-AUDIO SECTION COMPLETE -------------------------------------------*/

/*--------------------------------------------- CSS FOR PAGE SCROLL-BAR SECTION START -------------------------------------------*/

::-webkit-scrollbar {
	width: 5px;
}

::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px grey;
	border-radius: 10px;
}

::-webkit-scrollbar-thumb {
	background: #dab750;
	border-radius: 10px;
	box-shadow: 0px 0px 40px 1px #dab750;
}

::-webkit-scrollbar-thumb:hover {
	background: #dab750;
}

/*--------------------------------------------- CSS FOR PAGE SCROLL-BAR SECTION COMPLETE -------------------------------------------*/