html{
	scroll-behavior:smooth;
}

body {
	margin: 0;
	font-family: Arial;
	background: #031a1c;
	color: white;
	overflow-x: hidden;
}

/* NAVBAR */

header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:12px 4%;
	background:#000;
	position:sticky;
	top:0;
	z-index:1000;
	gap:15px;
}

.logo{
	font-size: clamp(12px,1.2vw,12px);
	font-weight:600;
	white-space:nowrap;
	flex-shrink:1;
	max-width:40%;
	overflow:hidden;
	text-overflow:ellipsis;
}

nav{
	display:flex;
	gap:14px;
	flex:1;
	justify-content:flex-end;
	min-width:0;
}


nav::-webkit-scrollbar{
	display:none;
}

nav a{
	font-size:clamp(9px,1vw,12px);
    color:white;
	text-decoration:none;
	font-weight:bold;
	white-space:nowrap;
	flex-shrink:0;
}


nav a:hover {
	color: #00f7ff;
	text-shadow: 0 0 10px cyan;
}



.hero-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 900px;
	width: 90%;
	z-index: 10;
}

.hero h1{
font-family:'Montserrat',sans-serif;

font-weight:800;

font-size:clamp(38px,6vw,70px);

letter-spacing:1px;

line-height:1.1;

text-align:center;

margin-bottom:15px;

color:#ffffff;

text-shadow:0 0 10px rgba(0,255,255,0.3);
}

@keyframes welcomeFloat {
	0% {
		transform: translateY(0)
	}

	50% {
		transform: translateY(15px)
	}

	100% {
		transform: translateY(0)
	}
}

.btn {
	display: inline-block;
	margin-top: 20px;
	padding: 12px 25px;
	background: linear-gradient(45deg, #00f7ff, #00c3ff);
	color: #000;
	font-weight: bold;
	text-decoration: none;
	border-radius: 8px;
	transition: 0.3s;
}

.btn:hover {
	box-shadow: 0 0 20px #00f7ff, 0 0 40px #00f7ff;
	transform: translateY(-2px);
}

/* ABOUT */
.about {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 60px;
	padding: 80px 8%;
	padding-top: 120px;
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
}


.profile {
	width: 260px;
	height: 260px;
	object-fit: cover;
	border-radius: 50%;
	border: 4px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 0 30px #00f7ff;
	position: relative;
	z-index: 1;
	margin-top: 20px;
}


.about-text {
	max-width: 550px;
	line-height: 1.8;
	font-size: 18px;
}

.about strong {
	color: #00f7ff;
	text-shadow: 0 0 10px cyan;
}

/* PORTFOLIO */
.portfolio {
	padding: 20px 40px;
	text-align: center;
}

.portfolio-container {
	display: flex;
	justify-content: center;
	gap: 30px;
	flex-wrap: wrap;
	perspective: 1000px;
}

.portfolio-card {
	width: 260px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 15px;
	overflow: hidden;
	transition: 0.5s;
}

.portfolio-card img {
	width: 100%;
}

.portfolio-card:hover {
	transform: rotateY(15deg) rotateX(10deg) scale(1.05);
	box-shadow: 0 0 30px cyan;
}

.portfolio-card h3 {
	margin: 15px 0;
	font-size: 20px;
	color: #fff;
}

a{
	text-decoration:none;
}


/* SERVICES */
.services {
	padding: 50px 8% 30px;
	text-align: center;
}

.service-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 25px;
	margin-bottom: 40px;
}

.service-card {
	background: rgba(255, 255, 255, 0.05);
	padding: 25px;
	border-radius: 15px;
	transition: .4s;
}

.service-card:hover {
	transform: translateY(-10px) scale(1.05);
	box-shadow: 0 0 25px cyan;
}

/* FORM */
form {
	max-width: 500px;
	margin: auto;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

input,
select,
textarea {
	padding: 12px;
	border: none;
	border-radius: 5px;
}

button {
	padding: 12px;
	background: #00f7ff;
	border: none;
	font-weight: bold;
	cursor: pointer;
}

button:hover {
	box-shadow: 0 0 15px cyan;
}

/* GALLERY */
.gallery {
	padding: 80px 20px;
	text-align: center;
}

.gallery-wrapper {
	overflow: hidden;
	width: 100%;
	margin-top: 40px;
}

.gallery-track {
	display: flex;
	gap: 25px;
	width: max-content;
	animation: scrollGallery 25s linear infinite;
}

.gallery-track img {
	width: 260px;
	height: 160px;
	object-fit: cover;
	border-radius: 12px;
	transition: 0.4s;
}

.gallery-track img:hover {
	transform: scale(1.1);
	box-shadow: 0 0 20px cyan;
}

@keyframes scrollGallery {
	0% {
		transform: translateX(0)
	}

	100% {
		transform: translateX(-50%)
	}
}

/* TESTIMONIALS */
.testimonials {
	padding: 80px 20px;
	text-align: center;
}

.testimonial-wrapper {
	overflow: hidden;
	width: 100%;
}

.testimonial-track {
	display: flex;
	gap: 30px;
	width: max-content;
	animation: scrollTestimonial 20s linear infinite;
}

@keyframes scrollTestimonial {
	0% {
		transform: translateX(0)
	}

	100% {
		transform: translateX(-50%)
	}
}

.testimonial {
	min-width: 260px;
	background: rgba(255, 255, 255, 0.08);
	padding: 25px;
	border-radius: 15px;
}

/* CONTACT */
.contact {
	text-align: center;
	padding: 60px 20px;
}

.whatsapp {
	font-size: 90px;
	color: #25D366;
	display: block;
	margin: 30px auto;
	transition: 0.4s;
}

/* hover glow */
.whatsapp:hover {
	transform: scale(1.2);
	text-shadow: 0 0 10px #25D366, 0 0 25px #25D366, 0 0 45px #25D366;
}

@keyframes whatsappGlow {
	0% {
		text-shadow: 0 0 10px #25D366;
	}

	50% {
		text-shadow: 0 0 35px #25D366;
	}

	100% {
		text-shadow: 0 0 10px #25D366;
	}
}

.whatsapp {
	animation: whatsappGlow 2.5s infinite;
}

/* SOCIAL */
.social {
	text-align: center;
	padding: 40px 20px;
}

.social-icons {
	display: flex;
	justify-content: center;
	gap: 40px;
	margin-top: 20px;
}

.social-icons a {
	font-size: 40px;
	color: white;
	transition: .3s;
}

.social-icons a:hover {
	transform: translateY(-8px) scale(1.2);
	color: #00f7ff;
}

/* FOOTER */
.footer {
	background: #0b0b0b;
	padding: 80px 8%;
	color: white;
}

.footer-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 120px;
	max-width: 900px;
	margin: 0 auto;
}

.footer h3 {
	margin-bottom: 20px;
	color: #00f7ff;
}

.footer ul {
	list-style: none;
	padding: 0;
}

.footer ul li {
	margin: 8px 0;
}

.footer ul li a {
	color: #ccc;
	text-decoration: none;
	transition: 0.3s;
}

.footer ul li a:hover {
	color: #00f7ff;
	text-shadow: 0 0 10px cyan;
}

.footer-bottom {
	text-align: center;
	margin-top: 60px;
}

/* FLOATING CARDS */
.floating-cards {
	display: flex;
	gap: 25px;
	margin-top: 50px;
	justify-content: center;
	flex-wrap: wrap;
	position: relative;
	z-index: 5;
}


.float-card {
	width: 180px;
	height: 120px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(15px);
	border-radius: 15px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
	transition: all 0.4s ease;
	animation: floatCard 4s ease-in-out infinite;

	color: #fff;
	text-decoration: none;
}


.float-card i {
	font-size: 28px;
	color: #00f7ff;
	margin-bottom: 8px;
}

.float-card:hover {
	transform: scale(1.05);
	box-shadow: 0 0 25px #00f7ff;
}

@keyframes floatCard {
	0% {
		transform: translateY(0)
	}

	50% {
		transform: translateY(-15px)
	}

	100% {
		transform: translateY(0)
	}
}

/* CURSOR */
.cursor {
	position: fixed;
	width: 18px;
	height: 18px;
	background: #00f7ff;
	border-radius: 50%;
	pointer-events: none;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 8px #00f7ff, 0 0 20px #00f7ff;
	z-index: 9999;
}

.cursor-glow {
	position: fixed;
	width: 40px;
	height: 40px;
	background: #00f7ff;
	opacity: 0.25;
	border-radius: 50%;
	pointer-events: none;
	transform: translate(-50%, -50%);
	filter: blur(12px);
	z-index: 9998;
}

/* PARTICLES BACKGROUND */
#particles-js{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-4;
opacity:0.6;
pointer-events:none;
}

#bg{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-2;
opacity:0.5;
}

section{
position:relative;
z-index:2;
}

/* TOP SHOWCASE */
.top-showcase {
	position: absolute;
	top: 10%;
	left: 0;
	width: 100%;
	overflow: hidden;
	z-index: 1;
	pointer-events: none;
}

.top-track {
	display: flex;
	gap: 25px;
	width: max-content;
	animation: topScroll 50s linear infinite;
}

.top-track img {
	width: 420px;
	height: 260px;
	object-fit: cover;
	border-radius: 15px;
	opacity: 0.35;
	filter: blur(1px);
	transition: 0.4s;
}

@keyframes topScroll {
	0% {
		transform: translateX(0)
	}

	100% {
		transform: translateX(-50%)
	}
}

/* GLOBAL */
img {
	max-width: 100%;
	height: auto;
	display: block;
}

h2 {
	font-size: clamp(24px, 4vw, 40px);
	margin-bottom: 25px;
	text-shadow: 0 0 10px rgba(0, 255, 255, 0.4);
}

/* MOBILE */
@media (max-width:768px) {
	header {
		padding: 12px 4%;
	}

	.logo {
		font-size: 10px;
	}

	nav {
		gap: 10px;
		overflow-x: auto;
	}

	nav a {
		font-size: 11px;
		white-space: nowrap;
	}

	.about {
		flex-direction: column;
		text-align: center;
		gap: 40px;
	}

	.profile {
		width: 200px;
		height: 200px;
	}

	.portfolio-card {
		width: 90%;
	}

	.footer-container {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
	}

	.float-card {
		width: 110px;
		height: 85px;
	}

	.float-card h3 {
		font-size: 11px;
	}
}

@media(max-width:768px){

.hero h1{
font-size:clamp(32px,9vw,50px);
}

}

.float-card {
	color: #fff;
	text-decoration: none;
}

.float-card h3 {
	color: #fff;
	font-weight: 600;
}

/* SERVICE PAGE */
.service-page {
	max-width: 1000px;
	margin: auto;
	text-align: center;
	padding: 80px 20px;
}

.service-page h1 {
	font-size: 40px;
	margin-bottom: 20px;
}

.back-btn {
	display: inline-block;
	margin-bottom: 30px;
	color: #00f7ff;
	text-decoration: none;
	font-weight: bold;
}

.back-btn:hover {
	text-shadow: 0 0 10px cyan;
}

.service-image {
	width: 100%;
	max-width: 350px;
	height: auto;
	object-fit: cover;
	border-radius: 15px;
	margin: auto;
	margin-top: 20px;
	display: block;
	box-shadow: 0 0 25px rgba(0, 255, 255, 0.4);
}

@media (max-width:768px) {
	.service-image {
		max-width: 70%;
	}
}

#service-particles {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -3;
}

.pricing-box {
	background: rgba(255, 255, 255, 0.05);
	padding: 40px;
	border-radius: 15px;
	max-width: 350px;
	margin: auto;
	box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
}

.pricing-box select {
	margin-top: 10px;
	padding: 10px;
	border-radius: 5px;
	border: none;
}

#price {
	margin-top: 20px;
	font-size: 28px;
	color: #00f7ff;
}

section img {
	border-radius: 10px;
	transition: 0.3s;
}

section img:hover {
	transform: scale(1.1);
	box-shadow: 0 0 20px cyan;
}

/* ===== MOBILE & SPACING FIX ===== */
/* Navbar auto resize */

/* Reduce hero top space */
.hero {
	position: relative;
	min-height: 90vh;
	padding-top: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
}


/* Reduce space after explore services cards */
.floating-cards {
	margin-top: 35px;
	margin-bottom: 10px;
}

/* Reduce section spacing */
section {
	padding: 30px 6%;
}

/* Project showcase spacing */
.gallery {
	padding: 50px 20px;
}

/* Client testimonials spacing */
.testimonials {
	padding: 50px 20px;
}

/* Services spacing */
.services {
	padding: 40px 8% 20px;
}

/* WhatsApp icon spacing */
.whatsapp {
	margin: 15px auto;
}

/* Follow me spacing */
.social {
	padding: 25px 20px;
}

.hero-description {
	max-width: 650px;
	margin: 10px auto 0;
	font-size: 16px;
	line-height: 1.6;
	color: #d1d1d1;
}

body::before{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.45);
z-index:-1;
pointer-events:none;
}

/* LOADER */
#loader{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#000;
display:flex;
align-items:center;
justify-content:center;
z-index:99999;
overflow:hidden;
}

.loader-content{
text-align:center;
}

.loader-text{
font-size:32px;
color:#fff;
letter-spacing:2px;
margin-bottom:20px;
animation: fadeText 1.5s ease-in-out infinite alternate;
}

/* loading bar */
.loader-bar{
width:200px;
height:3px;
background:rgba(255,255,255,0.2);
margin:auto;
overflow:hidden;
position:relative;
}

.loader-bar::before{
content:"";
position:absolute;
left:-100%;
width:100%;
height:100%;
background:#00f7ff;
animation: loading 1.5s linear infinite;
}

@keyframes loading{
0%{left:-100%;}
100%{left:100%;}
}

@keyframes fadeText{
0%{opacity:0.5;}
100%{opacity:1;}
}

/* CTA */
.cta{
text-align:center;
padding:80px 20px;
background:rgba(0,255,255,0.05);
}

/* VIDEO */
.video-section{
  text-align:center;
  padding:100px 20px;
}

.video-container{
  width:100%;
  max-width:900px; /* 🔥 increase size for desktop */
  margin:auto;
}

.video-container video{
  width:100%;
  height:auto;
  border-radius:15px;
  box-shadow:0 0 25px cyan;
}

@media (max-width:768px){
  .video-container{
    max-width:95%; /* perfect for mobile */
  }
}

.video-container video:hover{
transform:scale(1.03);
transition:0.4s;
}

/* WHY ME */
.why-me{
text-align:center;
padding:80px 20px;
}

.why-grid{
display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;
}

.why-card{
background:rgba(255,255,255,0.05);
padding:25px;
border-radius:15px;
width:250px;
transition:0.4s;
}

.why-card i{
font-size:30px;
color:#00f7ff;
margin-bottom:10px;
}

.why-card:hover{
transform:translateY(-10px);
box-shadow:0 0 25px cyan;
}

/* FAQ */
.faq{
padding:80px 20px;
max-width:800px;
margin:auto;
}

.faq-item{
margin-bottom:20px;
background:rgba(255,255,255,0.05);
padding:20px;
border-radius:10px;
cursor:pointer;
transition:0.3s;
}

.faq-item:hover{
box-shadow:0 0 15px cyan;
}